/* =========================================================
   01. متغیرهای عمومی و تنظیمات پایه
   Customer Console — Light UI / Blue Brand
   ========================================================= */

:root {
  --backblue: #1c49bc;
  --backgray: rgb(245 247 250);
  --brand-color: var(--backblue);
  --brand-ink: #fff;
  --desk-paper: #fff;
  --desk-card: var(--backgray);
  --desk-line: var(--backgray);
  --desk-muted: #636363;
  --desk-soft: var(--backgray);
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px #1c1b19;
}

/* تنظیم رنگ‌بندی روشن برای صفحه پنل */

html:has(body.PanelPage) {
  color-scheme: light;
}

body.PanelPage {
  background: #f5f7fa !important;
  background-image: none !important;
  background-attachment: scroll !important;
  color: #2b2b2b !important;
  color-scheme: light;
  font-family: "Vazirmatn", "YekanBakh", Tahoma, sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* یکپارچه‌سازی فونت عناصر داخل پنل */

body.PanelPage h1,
body.PanelPage h2,
body.PanelPage h3,
body.PanelPage h4,
body.PanelPage p,
body.PanelPage span,
body.PanelPage label,
body.PanelPage li,
body.PanelPage td,
body.PanelPage th,
body.PanelPage button,
body.PanelPage input,
body.PanelPage select,
body.PanelPage textarea,
body.PanelPage a {
  font-family: Estedad, "Vazirmatn", "YekanBakh", Tahoma, sans-serif;
  letter-spacing: 0;
  font-weight: 400;
}

/* اسکرول‌بار صفحه پنل */

body.PanelPage::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: #edeff2;
}

body.PanelPage::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  background-image: none;
  border-radius: 999px;
}

/* جلوگیری از اسکرول صفحه هنگام باز بودن منوی موبایل */

body.is-panel-nav {
  overflow: hidden;
}

@media (min-width: 1024px) {
  body.is-panel-nav {
    overflow: auto;
  }
}

/* =========================================================
   02. توکن‌های طراحی و پوسته اصلی پنل
   ========================================================= */

.PanelRoot {
  --brand-color: var(--backblue);
  --brand-color-soft: #fff;
  --brand-color-mid: #fff;
  --brand-blue: var(--backblue);
  --brand-blue-soft: #fff;
  --brand-blue-deep: var(--backblue);
  --brand-ink: #fff;

  --slate-50: #f5f7fa;
  --slate-100: #edeff2;
  --slate-200: #e2e9fa;
  --slate-400: #6f6f6f;
  --slate-500: #606060;
  --slate-600: #4a4a4a;
  --slate-700: #333333;
  --slate-800: #2b2b2b;
  --slate-900: #181818;

  --indigo-50: var(--brand-color-soft);
  --indigo-100: #fff2cc;
  --indigo-200: var(--brand-color-mid);
  --indigo-500: var(--brand-blue);
  --indigo-600: var(--brand-blue);
  --indigo-700: var(--brand-blue-deep);

  --emerald-50: #ecfdf5;
  --emerald-200: #a7f3d0;
  --emerald-500: #10b981;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;

  --amber-50: #fff8e0;
  --amber-100: #fff2cc;
  --amber-200: #ffe08a;
  --amber-700: #8a6a00;
  --amber-800: #6b5200;
  --amber-950: #3d2e00;

  --rose-50: #fff1f2;
  --rose-200: #fecdd3;
  --rose-700: #be123c;

  --blue-50: var(--brand-blue-soft);
  --blue-700: var(--brand-blue-deep);

  --sky-50: #eef4ff;
  --sky-700: #033a9e;

  --shadow-sm: 0 4px 12px rgba(184, 184, 184, 0.18);
  --shadow-xl: 0 18px 40px rgba(27, 69, 219, 0.08);
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 65, 255, 0.38);

  accent-color: var(--brand-blue);

  min-height: 100vh;
  background: var(--slate-50);
  color: var(--slate-900);
  color-scheme: light;
  font-family: "Vazirmatn", "YekanBakh", Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* انتخاب متن و لینک‌های پنل */

.PanelRoot ::selection {
  background: #d0e0ff;
  color: #000000;
}

.PanelRoot a {
  color: var(--indigo-600);
  text-decoration: none;
}

.PanelRoot a:hover {
  color: var(--indigo-700);
}

/* =========================================================
   03. ورود و احراز هویت
   Login / Referral Gate
   ========================================================= */

.PanelLogin {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 42% 34% at 8% 6%, rgba(255, 190, 0, 0.32), transparent 58%),
    radial-gradient(ellipse 38% 32% at 94% 92%, rgba(0, 65, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 28% 22% at 82% 10%, rgba(255, 190, 0, 0.14), transparent 52%),
    var(--slate-50);
  overflow: hidden;
}

/* هاله‌های تزئینی پس‌زمینه ورود */

.PanelLogin::before,
.PanelLogin::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 0%;
  pointer-events: none;
  filter: blur(48px);
}

.PanelLogin::before {
  width: 18rem;
  height: 18rem;
  top: -4rem;
  inset-inline-start: -3rem;
background: rgba(0, 65, 255, 0.18);
}

.PanelLogin::after {
  width: 16rem;
  height: 16rem;
  bottom: -3rem;
  inset-inline-end: -2rem;
  background: rgba(0, 65, 255, 0.18);
}

/* چینش صفحه ورود در نمایشگرهای متوسط و بزرگ */

@media (min-width: 768px) {
  .PanelLogin {
    align-items: center;
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* کارت اصلی ورود */

.PanelLoginCard {
  width: min(440px, 100%);
  max-width: 100%;
  display: grid;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(0, 65, 255, 0.08);
  border-radius: 0px;
  padding: 24px 20px;
  box-shadow:
    0 18px 48px rgba(27, 69, 219, 0.08),
    0 2px 8px rgba(184, 184, 184, 0.12);
}

@media (min-width: 1024px) {
  .PanelLoginCard {
    padding: 32px 28px;
  }
}

/* سربرگ و عنوان ورود */

.PanelLoginTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--slate-100);
}

.PanelLogin h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--slate-900);
  line-height: 1.35;
}

.PanelLogin .PanelHint {
  margin: 0;
  color: var(--slate-500);
  font-size: 14px;
  line-height: 1.75;
}

/* مراحل احراز هویت */

.PanelSteps {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
      visibility: hidden;
}

.PanelSteps li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--slate-400);
}

.PanelSteps li.is-current,
.PanelSteps li.is-done {
  color: var(--slate-700);
}

.PanelStep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 0px;
  background: var(--slate-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-500);
}

.PanelSteps li.is-current .PanelStep,
.PanelSteps li.is-done .PanelStep {
  background: var(--brand-color);
  color: var(--brand-ink);
}

/* شماره تلفن و اطلاعات کاربر */

.PanelPhoneLine {
  margin: 0;
  font-size: 12px;
  color: var(--slate-400);
}

.PanelPhoneLine strong {
  color: var(--slate-700);
  font-weight: 600;
}

/* جلوگیری از بیرون‌زدگی فرم ورود */

.PanelLoginCard,
.PanelLogin [data-auth-form],
.PanelLogin .PanelField {
  min-width: 0;
  max-width: 100%;
}

.PanelLogin [data-auth-form] {
  display: grid;
}

.PanelLogin .PanelBtnPrimary.is-wide.mt-4 {
  margin-top: 1rem;
}

/* پایین کارت ورود */

.PanelLoginFoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* =========================================================
   04. ساختار اصلی پنل و منوی کناری
   Shell / Frame / Sidebar
   ========================================================= */

.PanelShell {
  min-height: 100vh;
  position: relative;
}

.PanelFrame {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .PanelFrame {
    padding-inline-start: 16rem;
  }
}

/* منوی ثابت دسکتاپ */

.PanelSide {
  display: none;
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 30;
  width: 16rem;
  height: 100vh;
  height: 100dvh;
  background: #fff;
  border-inline-end: 1px solid var(--slate-100);
  flex-direction: column;
}

@media (min-width: 1024px) {
  .PanelSide {
    display: flex;
  }
}

/* لوگو و نام برند */

.PanelBrand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  min-width: 0;
}

.PanelLogin .PanelBrand,
.PanelDrawerHead .PanelBrand {
  padding: 0;
}

.PanelBrandMark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}

.PanelBrandText {
  min-width: 0;
}

.PanelBrandText strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--slate-900);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.PanelBrandText span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--slate-400);
}

/* فهرست لینک‌های منو */

.PanelSide nav,
.PanelDrawer nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 12px;
  overflow: auto;
  flex: 1;
}

.PanelNavLabel {
  margin: 8px 12px 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-400);
}

.PanelNavLabel:first-child {
  margin-top: 4px;
}

.PanelNavItem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: start;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 0px;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--slate-600);
  transition: background 0.15s, color 0.15s;
}

.PanelNavItem svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--slate-400);
}

.PanelNavItem:hover {
  background: var(--slate-50);
  color: var(--slate-900);
}

.PanelNavItem:hover svg {
  color: var(--slate-600);
}

.PanelNavItem.is-active {
  background: var(--brand-color);
  color: var(--brand-ink);
  font-weight: 700;
}

.PanelNavItem.is-active svg {
  color: var(--brand-ink);
}

/* حالت فوکوس قابل مشاهده برای دسترسی‌پذیری */

.PanelNavItem:focus-visible,
.PanelIconBtn:focus-visible,
.PanelBtnPrimary:focus-visible,
.PanelBtnSecondary:focus-visible,
.PanelBtnDanger:focus-visible,
.PanelLang button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* پایین منوی کناری و اطلاعات حساب */

.PanelSideFoot {
  margin-top: auto;
  border-top: 1px solid var(--slate-100);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid;
  gap: 8px;
}

.PanelUserMeta strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-900);
}

.PanelUserMeta span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--slate-400);
  direction: ltr;
  text-align: end;
  unicode-bidi: isolate;
}

.PanelSideFoot a,
.PanelTextLink {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--indigo-600);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.PanelSideFoot a:hover,
.PanelTextLink:hover {
  color: var(--indigo-700);
}

.PanelBackLink {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-500);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.PanelBackLink:hover {
  color: var(--slate-800);
}

/* دکمه خروج */

.PanelLogout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: 0px;
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
  font-size: 14px;
  padding: 8px 12px;
  cursor: pointer;
}

.PanelLogout:hover {
  background: var(--slate-50);
}

.PanelLogout svg {
  width: 16px;
  height: 16px;
}

/* =========================================================
   05. منوی کشویی موبایل
   Drawer / Scrim
   ========================================================= */

.PanelScrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgb(15 23 42 / 0.2);
}

.PanelDrawer {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 40;
  width: min(18rem, calc(100vw - 2.5rem));
  height: 100vh;
  height: 100dvh;
  background: #fff;
  box-shadow: var(--shadow-xl);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
}

/* جهت حرکت منو در صفحات راست‌چین */

html[dir="rtl"] .PanelDrawer {
  transform: translateX(100%);
}

/* وضعیت باز بودن منو */

.PanelShell.is-nav-open .PanelScrim {
  display: block;
}

.PanelShell.is-nav-open .PanelDrawer {
  transform: translateX(0);
}

/* مخفی‌کردن منوی موبایل در دسکتاپ */

@media (min-width: 1024px) {
  .PanelScrim,
  .PanelDrawer {
    display: none !important;
  }
}

/* سربرگ منوی کشویی */

.PanelDrawerHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding: 20px 16px 12px;
  padding-top: calc(20px + env(safe-area-inset-top));
}

.PanelDrawerTools {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* =========================================================
   06. سربرگ اصلی و ابزارهای پنل
   Topbar / Search / Language
   ========================================================= */

.PanelTop {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgb(255 255 255 / 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--slate-100);
}

@media (min-width: 640px) {
  .PanelTop {
    padding-inline: 24px;
  }
}

@media (min-width: 1024px) {
  .PanelTop {
    padding-inline: 32px;
  }
}

/* دکمه‌های آیکونی */

.PanelIconBtn {
  border: 0;
  background: transparent;
  border-radius: 0px;
  padding: 8px;
  color: var(--slate-500);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.PanelIconBtn:hover {
  background: var(--slate-50);
  color: var(--slate-700);
}

.PanelIconBtn svg {
  width: 18px;
  height: 18px;
}

/* دکمه بازکردن منوی موبایل */

.PanelMenuBtn {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .PanelMenuBtn {
    display: none;
  }
}

/* کادر جست‌وجو */

.PanelSearch {
  position: relative;
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 28rem;
}

.PanelSearch svg {
  position: absolute;
  top: 50%;
  inset-inline-start: 12px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--slate-400);
  pointer-events: none;
}

.PanelSearch input {
  width: 100%;
  height: 44px;
  border-radius: 0px;
  border: 1px solid var(--slate-200);
  background: #fff;
  padding-inline-start: 40px;
  padding-inline-end: 12px;
  font-size: 14px;
  color: var(--slate-900);
  box-shadow: none;
}

.PanelSearch input::placeholder {
  color: var(--slate-400);
}

.PanelSearch input:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 65, 255, 0.16);
}

/* ابزارهای سمت دیگر سربرگ */

.PanelTopTools {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* انتخاب زبان */

.PanelLang {
  display: inline-flex;
  border: 1px solid var(--slate-200);
  border-radius: 0px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
}

.PanelLang button {
  padding: 6px 10px;
  font-size: 12px;
  color: var(--slate-500);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.PanelLang button+button {
  border-inline-start: 1px solid var(--slate-200);
}

.PanelLang button.is-active {
  background: var(--brand-color);
  color: var(--brand-ink);
  font-weight: 700;
}

/* نشان اعلان */

.PanelBell {
  position: relative;
}

.PanelBellDot {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: var(--brand-color);
  box-shadow: 0 0 0 2px #fff;
}

/* =========================================================
   07. محتوای اصلی و عنوان صفحه
   Main Content / Page Heading
   ========================================================= */

.PanelMain {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 24px 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  display: grid;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 640px) {
  .PanelMain {
    padding-inline: 24px;
  }
}

@media (min-width: 1024px) {
  .PanelMain {
    padding: 32px;
  }
}

.PanelPageHead h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--slate-900);
  line-height: 1.35;
}

.PanelPageHead p {
  margin: 6px 0 0;
  max-width: 46rem;
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.75;
}


/* =========================================================
   08. کارت‌ها، آمار و توضیحات
   Cards / Stats / Notes
   ========================================================= */

.PanelCard {
  background: #fff;
  border: 1px solid var(--slate-100);
  border-radius: 0px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 1024px) {
  .PanelCard {
    padding: 24px;
  }
}

.PanelCard h2,
.PanelCard h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
}

.PanelCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.PanelCardHead h2,
.PanelCardHead h3 {
  margin: 0;
}

/* شبکه کارت‌های آماری */

.PanelStatGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .PanelStatGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .PanelStatGrid.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .PanelStatGrid.is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* کارت آماری */

.PanelStat {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(24, 24, 24, 0.06);
  border-radius: 0px;
  padding: 18px;
  padding-inline-start: 22px;
  box-shadow: 0 10px 28px rgba(24, 24, 24, 0.045);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.PanelStat::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 0px;
  background: var(--brand-color);
}

.PanelStat.is-blue::before {
  background: var(--brand-blue);
}

.PanelStat.is-ink::before {
  background: #181818;
}

.PanelStatLabel {
  display: block;
  font-size: 14px;
  color: var(--slate-500);
  margin-bottom: 8px;
}

/* مقدار آماری — قوانین تکراری در یک بخش ادغام شده‌اند */

.PanelStatValue {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: break-word;
}

.PanelStatHint {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--slate-400);
  line-height: 1.6;
}

/* آیکون کارت آماری */

.PanelStatIcon {
  width: 42px;
  height: 42px;
  border-radius: 0px;
  background: #fff6d6;
  color: #8a6a00;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.PanelStat.is-blue .PanelStatIcon {
  background: #e8eeff;
  color: #0041ff;
}

.PanelStat.is-ink .PanelStatIcon {
  background: #f3f3f3;
  color: #181818;
}

.PanelStatIcon svg {
  width: 18px;
  height: 18px;
}

/* پیام‌های توضیحی و چیدمان دو ستونه */

.PanelNote {
  border-radius: 0px;
  background: var(--slate-50);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--slate-600);
  line-height: 1.75;
}

.PanelSplit {
  display: grid;
  gap: 24px;
}

@media (min-width: 1024px) {
  .PanelSplit {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

/* شناسه فروشگاه و اطلاعات هویتی */

.PanelStoreMark {
  width: 40px;
  height: 40px;
  border-radius: 0px;
  background: var(--indigo-50);
  color: var(--indigo-700);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.PanelIdentity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* متن‌های کد و مبالغ */

.PanelMono,
.PanelRoot code.PanelMono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  direction: ltr;
  unicode-bidi: isolate;
}

.PanelMoney {
  color: var(--indigo-700);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-style: normal;
}

.PanelSub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--slate-400);
  font-weight: 400;
}

.PanelHint {
  margin: 0;
  color: var(--slate-500);
  font-size: 14px;
  line-height: 1.75;
}

.PanelMeta {
  font-size: 12px;
  color: var(--slate-400);
}

.PanelFieldHint {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 12px;
  color: var(--slate-400);
}

/* =========================================================
   09. فرم‌ها و ورودی‌ها
   Forms / Inputs / Selects / OTP
   ========================================================= */

.PanelFormGrid {
  display: grid;
  gap: 16px;
}

@media (min-width: 640px) {
  .PanelFormGrid {
    grid-template-columns: 1fr 1fr;
  }

  .PanelFormGrid .is-span-2 {
    grid-column: span 2;
  }
}

.PanelField {
  display: grid;
  gap: 0;
  min-width: 0;
}

.PanelField>span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);
}

/* ورودی‌های عمومی فرم و ماژول Gateway */

.PanelField input,
.PanelField textarea,
.PanelField select,
.PanelRoot .GwField input,
.PanelRoot .GwField textarea,
.PanelRoot .GwField select,
.PanelRoot .GwSearch {
  margin-top: 6px;
  width: 100%;
  height: 44px;
  border-radius: 0px;
  border: 1px solid var(--slate-200);
  background: #fff;
  padding: 0 12px;
  font-size: 14px;
  color: var(--slate-900);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.PanelField input.is-tall,
.PanelLogin .PanelField input {
  height: 48px;
}

/* ورودی کد یک‌بارمصرف */

.PanelOtp {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding: 0;
  box-sizing: border-box;
}

.PanelOtp .PanelOtpValue {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.PanelLogin .PanelField .PanelOtp .PanelOtpCell,
.PanelField .PanelOtp .PanelOtpCell {
  display: block;
  box-sizing: border-box;
  flex: none;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 52px;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 52px;
  border-radius: 0px;
  border: 1px solid var(--slate-200);
  background: var(--slate-50);
  color: var(--slate-900);
  caret-color: var(--brand-blue);
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.PanelLogin .PanelField .PanelOtp .PanelOtpCell.is-filled,
.PanelField .PanelOtp .PanelOtpCell.is-filled {
  background: #fff;
  border-color: var(--brand-color);
  box-shadow: inset 0 0 0 1px var(--brand-color);
}

.PanelLogin .PanelField .PanelOtp .PanelOtpCell:focus,
.PanelField .PanelOtp .PanelOtpCell:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand-blue);
  box-shadow: inset 0 0 0 1px var(--brand-blue);
}

.PanelOtp.is-invalid .PanelOtpCell {
  border-color: #f3b4b4;
}

/* کوچک‌سازی کادرهای OTP در گوشی‌های کوچک */

@media (max-width: 419px) {
  .PanelOtp {
    gap: 6px;
  }

  .PanelLogin .PanelField .PanelOtp .PanelOtpCell,
  .PanelField .PanelOtp .PanelOtpCell {
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    border-radius: 0px;
  }
}

/* textarea */

.PanelField textarea,
.PanelRoot .GwField textarea {
  height: auto;
  min-height: 112px;
  padding: 12px;
  line-height: 1.75;
  resize: vertical;
}

/* فلش انتخاب گزینه در select */

.PanelField select,
.PanelRoot .GwField select,
.PanelFilters select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-left: 36px;
}

html[dir="ltr"] .PanelField select,
html[dir="ltr"] .PanelRoot .GwField select,
html[dir="ltr"] .PanelFilters select {
  background-position: right 12px center;
  padding-left: 12px;
  padding-right: 36px;
}

/* متن راهنمای ورودی‌ها */

.PanelField input::placeholder,
.PanelField textarea::placeholder,
.PanelRoot .GwField input::placeholder,
.PanelRoot .GwField textarea::placeholder,
.PanelSearch input::placeholder {
  color: var(--slate-400);
}

/* وضعیت فوکوس ورودی‌ها */

.PanelField input:focus,
.PanelField textarea:focus,
.PanelField select:focus,
.PanelRoot .GwField input:focus,
.PanelRoot .GwField textarea:focus,
.PanelRoot .GwField select:focus,
.PanelRoot .GwSearch:focus {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 65, 255, 0.16);
}

/* ورودی‌های غیرفعال */

.PanelField input:disabled,
.PanelField textarea:disabled,
.PanelField select:disabled,
.PanelRoot .GwField input:disabled,
.PanelRoot .GwField textarea:disabled,
.PanelRoot .GwField select:disabled {
  background: var(--slate-50);
  opacity: 1;
}


/* =========================================================
   10. دکمه‌ها و عملیات فرم
   Buttons / Actions
   ========================================================= */

.PanelActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.PanelBtnPrimary,
.PanelBtnSecondary,
.PanelBtnDanger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0px;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}

/* دکمه اصلی */

.PanelBtnPrimary {
  border: 0;
  background: var(--brand-color);
  color: var(--brand-ink);
  font-weight: 700;
}

.PanelBtnPrimary:hover {
  background: var(--brand-blue);
  color: #fff;
}

.PanelBtnPrimary.is-wide {
  width: 100%;
  min-height: 48px;
  border-radius: 0px;
  font-weight: 800;
}

/* دکمه ثانویه */

.PanelBtnSecondary {
  border: 1px solid var(--slate-200);
  background: #fff;
  color: var(--slate-700);
}

.PanelBtnSecondary:hover {
  background: var(--slate-50);
}

/* دکمه خطر */

.PanelBtnDanger {
  border: 1px solid var(--rose-200);
  background: #fff;
  color: var(--rose-700);
}

.PanelBtnDanger:hover {
  background: var(--rose-50);
}

/* وضعیت غیرفعال دکمه‌ها */

.PanelBtnPrimary:disabled,
.PanelBtnSecondary:disabled,
.PanelBtnDanger:disabled,
.PanelLogout:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* دکمه‌های کوچک */

.PanelBtnTiny {
  display: inline-flex;
  align-items: center;
  border-radius: 0px;
  border: 1px solid var(--slate-200);
  background: transparent;
  color: var(--slate-700);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: none;
}

.PanelBtnTiny:hover {
  background: var(--slate-50);
}

.PanelBtnTiny.is-warn {
  border-color: var(--amber-200);
  background: var(--amber-50);
  color: var(--amber-800);
}

.PanelBtnTiny.is-ok {
  border-color: var(--emerald-200);
  background: var(--emerald-50);
  color: var(--emerald-700);
}

.PanelBtnTiny.is-danger {
  border-color: var(--rose-200);
  background: var(--rose-50);
  color: var(--rose-700);
}

.PanelBtnTiny:disabled {
  opacity: 0.4;
}

/* =========================================================
   11. پیام‌های وضعیت و کدهای قابل کپی
   Alerts / Tokens
   ========================================================= */

.PanelError {
  margin: 0;
  border-radius: 0px;
  background: var(--rose-50);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--rose-700);
  line-height: 1.7;
}

.PanelSuccess {
  margin: 0;
  border-radius: 0px;
  background: var(--emerald-50);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--emerald-700);
  line-height: 1.7;
}

.PanelSuccess code,
.PanelToken code {
  display: block;
  margin-top: 8px;
  border-radius: 0px;
  background: #fff;
  padding: 10px 12px;
  color: var(--slate-900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
  word-break: break-all;
}

.PanelWarn {
  border-radius: 0px;
  background: var(--amber-50);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--amber-950);
  line-height: 1.75;
}

.PanelToken {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-radius: 0px;
  background: var(--emerald-50);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--emerald-900);
  line-height: 1.7;
}

.PanelTokenCopy {
  justify-self: start;
  border: 0;
  border-radius: 0px;
  background: var(--emerald-700);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  cursor: pointer;
  box-shadow: none;
  font-family: inherit;
}

.PanelTokenCopy:hover {
  background: var(--emerald-800);
}

/* کپچا */

.g-recaptcha {
  max-width: 100%;
  margin-top: 4px;
}

/* =========================================================
   12. جدول‌ها، فیلترها و برچسب‌ها
   Tables / Filters / Badges
   ========================================================= */

.PanelTableWrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border-radius: 0px;
  border: 1px solid var(--slate-100);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.PanelTableWrap>.PanelCardHead {
  padding: 20px 24px 0;
}

.PanelTable {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-size: 14px;
}

.PanelTable th {
  background: var(--slate-50);
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-500);
  padding: 12px 24px;
  text-align: start;
  white-space: nowrap;
}

.PanelTable td {
  padding: 16px 24px;
  border-top: 1px solid var(--slate-100);
  color: var(--slate-700);
  vertical-align: top;
}

.PanelTable tbody tr:hover {
  background: var(--slate-50);
}

.PanelTable strong {
  color: var(--slate-900);
  font-weight: 600;
}

/* محدودکردن متن‌های طولانی جدول */

.PanelClamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 28rem;
  color: var(--slate-600);
  line-height: 1.75;
}

/* فیلترهای جدول */

.PanelFilters {
  display: grid;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--slate-100);
  align-items: end;
}

@media (min-width: 800px) {
  .PanelFilters {
    grid-template-columns: 1.3fr 1fr 1fr auto;
  }
}

.PanelFilters .GwSearch,
.PanelFilters input,
.PanelFilters select {
  margin-top: 6px;
}

/* برچسب‌های وضعیت */

.PanelBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border: 0;
  white-space: nowrap;
}

.PanelBadge.is-emerald {
  background: var(--emerald-50);
  color: var(--emerald-700);
}

.PanelBadge.is-amber {
  background: var(--amber-50);
  color: var(--amber-700);
}

.PanelBadge.is-rose {
  background: var(--rose-50);
  color: var(--rose-700);
}

.PanelBadge.is-indigo {
  background: var(--indigo-50);
  color: var(--indigo-700);
}

.PanelBadge.is-blue {
  background: var(--blue-50);
  color: var(--blue-700);
}

.PanelBadge.is-sky {
  background: var(--sky-50);
  color: var(--sky-700);
}

.PanelBadge.is-slate {
  background: var(--slate-100);
  color: var(--slate-600);
}

/* برچسب‌های ساده */

.PanelTag {
  display: inline-flex;
  border-radius: 0px;
  background: var(--slate-50);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--slate-600);
}

.PanelTag.is-brand {
  background: var(--indigo-50);
  color: var(--indigo-700);
}

/* حالت خالی جدول یا فهرست */

.PanelEmpty {
  padding: 64px 24px;
  text-align: center;
}

.PanelEmpty h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--slate-900);
}

.PanelEmpty p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--slate-500);
  line-height: 1.7;
}

/* ردیف خلاصه اطلاعات */

.PanelRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border-radius: 0px;
  background: var(--slate-50);
  padding: 12px 16px;
}

.PanelRow span {
  font-size: 14px;
  color: var(--slate-600);
}

.PanelRow strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-900);
}

/* =========================================================
   13. ماژول Gateway
   Cards / Statistics / Rows
   ========================================================= */

.PanelRoot .GwApp {
  color: var(--slate-900);
  display: grid;
  gap: 24px;
}

.PanelRoot .GwBento {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.PanelRoot .GwBezel {
  padding: 0;
  border-radius: 0px;
  background: transparent;
  border: 0;
  min-width: 0;
}

.PanelRoot .GwCard {
  background: #fff;
  border: 1px solid var(--slate-100);
  border-radius: 0px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
  min-width: 0;
}

@media (min-width: 1024px) {
  .PanelRoot .GwCard {
    padding: 24px;
  }
}

.PanelRoot .GwCard h3 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--slate-900);
}

/* عنوان‌ها و توضیحات Gateway */

.PanelRoot .GwKicker {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 4px 8px;
  border-radius: 0px;
  border: 0;
  color: var(--indigo-700);
  background: var(--indigo-50);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

.PanelRoot .GwTitle {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  background: none;
  -webkit-text-fill-color: var(--slate-900);
  background-clip: unset;
  color: var(--slate-900);
}

.PanelRoot .GwLead,
.PanelRoot .GwMeta,
.PanelRoot .GwEmpty p {
  color: var(--slate-500);
  line-height: 1.75;
  font-weight: 400;
  font-size: 14px;
}

/* آمار Gateway */

.PanelRoot .GwStatLabel {
  display: block;
  color: var(--slate-500);
  font-size: 14px;
  margin-bottom: 8px;
}

.PanelRoot .GwStatValue {
  display: block;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--slate-900);
  font-variant-numeric: tabular-nums;
}

/* برچسب وضعیت Gateway */

.PanelRoot .GwPill {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  border: 0;
  white-space: nowrap;
}

.PanelRoot .GwPill.is-live {
  color: var(--emerald-700);
  background: var(--emerald-50);
}

.PanelRoot .GwPill.is-wait {
  color: var(--amber-700);
  background: var(--amber-50);
}

.PanelRoot .GwPill.is-down {
  color: var(--rose-700);
  background: var(--rose-50);
}

.PanelRoot .GwPill.is-indigo {
  color: var(--indigo-700);
  background: var(--indigo-50);
}

.PanelRoot .GwPill.is-blue {
  color: var(--blue-700);
  background: var(--blue-50);
}

/* ردیف‌های اطلاعات Gateway */

.PanelRoot .GwRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--slate-100);
  background: transparent;
  color: inherit;
}

.PanelRoot .GwRow:first-child {
  border-top: 0;
  padding-top: 4px;
}

.PanelRoot .GwMark {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  padding: 4px 8px;
  border-radius: 0px;
  font-size: 12px;
  color: var(--indigo-700);
  background: var(--indigo-50);
}

.PanelRoot .GwRow strong {
  font-weight: 600;
  color: var(--slate-900);
  font-size: 14px;
}

.PanelRoot .GwRow span,
.PanelRoot .GwRow em {
  display: block;
  color: var(--slate-400);
  font-style: normal;
  font-size: 12px;
  margin-top: 2px;
}

.PanelRoot .GwRow em.PanelMoney,
.PanelRoot .PanelMoney {
  color: var(--indigo-700);
  font-weight: 600;
  font-size: 14px;
}

/* =========================================================
   14. فرم‌ها و دکمه‌های Gateway
   ========================================================= */

.PanelRoot .GwForm {
  display: grid;
  gap: 16px;
}

.PanelRoot .GwField {
  display: grid;
  gap: 0;
  font-size: 14px;
  color: var(--slate-700);
}

.PanelRoot .GwField>span {
  font-size: 14px;
  font-weight: 500;
  color: var(--slate-700);
}

.PanelRoot .GwActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

/* پایه مشترک دکمه‌های Gateway */

.PanelRoot .GwBtn,
.PanelRoot .GwGhost,
.PanelRoot .GwCopy {
  min-height: 0;
  border-radius: 0px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: none;
  transform: none;
}

.PanelRoot .GwBtn:hover,
.PanelRoot .GwGhost:hover,
.PanelRoot .GwCopy:hover,
.PanelRoot .GwBtn:active,
.PanelRoot .GwGhost:active,
.PanelRoot .GwCopy:active {
  transform: none;
}

/* دکمه اصلی Gateway */

.PanelRoot .GwBtn {
  border: 0;
  background: var(--brand-color);
  color: var(--brand-ink);
  font-weight: 700;
}

.PanelRoot .GwBtn:hover {
  background: var(--brand-blue);
  color: #fff;
}

/* حالت غیرفعال */

.PanelRoot .GwBtn:disabled,
.PanelRoot .GwGhost:disabled,
.PanelRoot .GwCopy:disabled {
  opacity: 0.6;
}

/* آیکون‌های داخلی غیرفعال */

.PanelRoot .GwBtn span.GwIco,
.PanelRoot .GwCopy span.GwIco {
  display: none;
}

/* دکمه‌های ثانویه و کپی */

.PanelRoot .GwGhost,
.PanelRoot .GwCopy {
  background: #fff;
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}

.PanelRoot .GwGhost:hover,
.PanelRoot .GwCopy:hover {
  background: var(--slate-50);
}

/* دکمه لغو یا ابطال */

.PanelRoot .GwGhost[data-revoke] {
  border-radius: 0px;
  border-color: var(--rose-200);
  background: var(--rose-50);
  color: var(--rose-700);
  font-size: 12px;
  padding: 6px 12px;
}

.PanelRoot .GwGhost[data-revoke]:hover {
  background: var(--rose-50);
  filter: brightness(0.98);
}

/* دکمه‌های تأیید و چالش */

.PanelRoot .GwGhost[data-verify],
.PanelRoot .GwGhost[data-challenge] {
  border-radius: 0px;
  font-size: 12px;
  padding: 6px 12px;
}

/* =========================================================
   15. پیام‌ها، کد و اطلاعات محرمانه Gateway
   ========================================================= */

.PanelRoot .GwErr {
  margin: 0;
  border-radius: 0px;
  background: var(--rose-50);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--rose-700);
}

.PanelRoot .GwOk {
  margin: 0;
  border-radius: 0px;
  background: var(--emerald-50);
  padding: 12px 16px;
  font-size: 14px;
  color: var(--emerald-700);
}

.PanelRoot .GwEmpty {
  text-align: center;
  padding: 64px 24px;
}

.PanelRoot .GwEmpty h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--slate-900);
}

/* نمایش کدها و متن‌های فنی */

.PanelRoot .GwCode {
  position: relative;
  background: var(--slate-50);
  color: var(--slate-800);
  border-radius: 0px;
  padding: 16px;
  overflow: auto;
  direction: ltr;
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.7;
  border: 1px solid var(--slate-100);
  margin-top: 8px;
}

/* کادر اطلاعات محرمانه */

.PanelRoot .GwSecret {
  background: var(--amber-50);
  border: 0;
  border-radius: 0px;
  padding: 12px 16px;
  color: var(--amber-950);
  font-size: 14px;
  box-shadow: none;
}

.PanelRoot .GwSecret .GwCode {
  background: #fff;
  border-color: var(--amber-100);
}

/* جلوگیری از کوچک‌شدن بیش از حد ستون‌های Gateway */

.PanelRoot .GwSpan4,
.PanelRoot .GwSpan5,
.PanelRoot .GwSpan6,
.PanelRoot .GwSpan7,
.PanelRoot .GwSpan8,
.PanelRoot .GwSpan12 {
  min-width: 0;
}

/* چیدمان تک‌ستونه در نمایشگرهای متوسط */

@media (max-width: 980px) {
  .PanelRoot .GwSpan4,
  .PanelRoot .GwSpan5,
  .PanelRoot .GwSpan6,
  .PanelRoot .GwSpan7,
  .PanelRoot .GwSpan8,
  .PanelRoot .GwSpan12,
  .PanelRoot .GwForm.GwTwo,
  .PanelRoot .GwFilters {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   16. تنظیمات عمومی نمایش در صفحه‌های کوچک
   Responsive / Overflow Protection
   ========================================================= */

.PanelShell,
.PanelFrame,
.PanelMain>*,
.PanelCard,
.PanelStat,
.PanelFormGrid>*,
.PanelRoot .GwApp,
.PanelRoot .GwBento,
.PanelRoot .GwBento>*,
.PanelRoot .GwCard,
.PanelIdentity,
.PanelNavItem span {
  min-width: 0;
  max-width: 100%;
}

/* جلوگیری از بیرون‌زدگی متن‌های طولانی */

.PanelNavItem span,
.PanelPageHead h1,
.PanelPageHead p,
.PanelNote,
.PanelHint,
.PanelCard h2,
.PanelCard h3,
.PanelRoot .GwCard h3,
.PanelRoot .GwLead,
.PanelRoot .GwMeta,
.PanelRoot .GwTitle,
.PanelUserMeta span,
.PanelRoot .GwRow strong,
.PanelRoot .GwRow span {
  overflow-wrap: break-word;
}

/* کوچک‌سازی کپچا در گوشی */

@media (max-width: 420px) {
  .PanelLogin .g-recaptcha {
    transform: scale(0.78);
    transform-origin: top right;
  }

  html[dir="ltr"] .PanelLogin .g-recaptcha {
    transform-origin: top left;
  }
}

/* چیدمان سربرگ و دکمه‌ها در موبایل */

@media (max-width: 720px) {
  .PanelTop {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .PanelMenuBtn {
    order: 1;
  }

  .PanelTopTools {
    order: 2;
  }

  .PanelSearch {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }

  .PanelDrawerHead .PanelBrand {
    flex: 1 1 10rem;
  }

  .PanelActions {
    flex-direction: column;
    align-items: stretch;
  }

  .PanelActions .PanelBtnPrimary,
  .PanelActions .PanelBtnSecondary,
  .PanelActions .PanelBtnDanger,
  .PanelLogin .PanelBtnPrimary,
  .PanelFilters .GwGhost,
  .PanelRoot .GwForm .GwBtn,
  .PanelTokenCopy {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }

  /* کاهش فاصله داخلی جدول و فیلترها */

  .PanelTableWrap>.PanelCardHead,
  .PanelFilters {
    padding-inline: 16px;
  }

  /* تبدیل جدول به نمایش عمودی در موبایل */

  .PanelTable thead {
    display: none;
  }

  .PanelTable,
  .PanelTable tbody,
  .PanelTable tr,
  .PanelTable td {
    display: block;
    width: 100%;
  }

  .PanelTable tr {
    padding: 14px 16px;
    border-top: 1px solid var(--slate-100);
  }

  .PanelTable td {
    border: 0;
    padding: 6px 0;
  }

  .PanelTable td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--slate-500);
  }

  .PanelTable tbody tr:hover {
    background: transparent;
  }

  /* نمایش کامل متن‌های محدودشده در موبایل */

  .PanelClamp {
    display: block;
    overflow: visible;
    max-width: none;
    -webkit-line-clamp: unset;
  }

  /* ردیف‌های Gateway در موبایل */

  .PanelRoot .GwRow {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  .PanelRoot .GwActions {
    width: 100%;
    justify-content: flex-start;
  }

  .PanelRoot .GwActions .GwBtn,
  .PanelRoot .GwActions .GwGhost,
  .PanelRoot .GwActions .GwCopy,
  .PanelRoot .GwRow>.GwGhost,
  .PanelRoot .GwRow>.GwPill {
    white-space: normal;
  }

  .PanelRoot .GwActions .GwGhost,
  .PanelRoot .GwActions .GwCopy,
  .PanelRoot .GwActions .GwBtn,
  .PanelRoot .GwRow>.GwGhost {
    flex: 1 1 auto;
  }

  /* شکستن خطوط کدهای طولانی */

  .PanelRoot .GwCode {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* اندازه مناسب ورودی‌ها برای گوشی و تبلت */

@media (max-width: 900px) {
  .PanelRoot .GwRow {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
  }

  .PanelRoot .GwActions {
    width: 100%;
    justify-content: flex-start;
  }

  .PanelRoot .GwActions .GwGhost,
  .PanelRoot .GwActions .GwCopy,
  .PanelRoot .GwActions .GwBtn,
  .PanelRoot .GwRow>.GwGhost {
    white-space: normal;
    flex: 1 1 auto;
  }

  .PanelField input,
  .PanelField textarea,
  .PanelField select,
  .PanelRoot .GwField input,
  .PanelRoot .GwField textarea,
  .PanelRoot .GwField select,
  .PanelRoot .GwSearch,
  .PanelSearch input {
    font-size: 16px;
  }

  .PanelField textarea,
  .PanelRoot .GwField textarea {
    font-size: 16px;
  }
}

/* =========================================================
   17. ورودی مبلغ
   Money Input
   ========================================================= */

.PanelMoneyInput {
  display: flex;
  align-items: stretch;
  margin-top: 6px;
  border: 1px solid var(--slate-200);
  border-radius: 0px;
  background: #fff;
  overflow: hidden;
}

.PanelMoneyInput:focus-within {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 65, 255, 0.16);
}

.PanelField .PanelMoneyInput input,
.PanelRoot .GwField .PanelMoneyInput input {
  margin: 0;
  border: 0;
  border-radius: 0px;
  box-shadow: none;
  height: 44px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.PanelField .PanelMoneyInput input:focus,
.PanelRoot .GwField .PanelMoneyInput input:focus {
  box-shadow: none;
  border-color: transparent;
}

.PanelMoneyUnit {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--brand-color);
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.PanelMoneyUnit[hidden] {
  display: none;
}

/* =========================================================
   18. انتخاب تاریخ و تقویم
   Date Picker / Calendar
   ========================================================= */

.PanelDateField {
  margin-top: 6px;
}

.PanelDateTrigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--slate-200);
  border-radius: 0px;
  background: #fff;
  color: var(--slate-900);
  font: inherit;
  cursor: pointer;
  text-align: start;
}

.PanelDateTrigger.is-empty {
  color: var(--slate-400);
}

.PanelDateTrigger:hover {
  border-color: var(--brand-blue);
}

.PanelDateTrigger:focus-visible {
  outline: none;
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 65, 255, 0.16);
}

.PanelDateTrigger svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--brand-blue);
}

/* بدنه تقویم */

.PanelCal {
  background: #ffffff8f;
  border: 1px solid rgba(0, 65, 255, 0.1);
  border-radius: 0px;
  box-shadow: 0 22px 50px rgba(27, 69, 219, 0.14);
  padding: 14px;
  color: var(--slate-900);
  font-family: "Vazirmatn", "YekanBakh", Tahoma, sans-serif;
  backdrop-filter: blur(4px);
}

/* سربرگ تقویم */

.PanelCalHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.PanelCalTitle {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.PanelCalTitle strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-color);
}

.PanelCalTitle span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-blue);
}

/* دکمه‌های جابه‌جایی ماه */

.PanelCalNav {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0px;
  color: var(--brand-color);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.PanelCalNav:hover {
  background: var(--brand-color);
  color: #fff;
}

/* روزهای هفته و شبکه تاریخ‌ها */

.PanelCalWeek {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}

.PanelCalWeek span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--slate-400);
  padding: 4px 0;
}

.PanelCalGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* هر روز تقویم */

.PanelCalDay {
  height: 38px;
  border: 0;
  border-radius: 0px;
  background: transparent;
  color: var(--slate-800);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.PanelCalDay.is-empty {
  visibility: hidden;
  pointer-events: none;
}

.PanelCalDay:hover {
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
}

.PanelCalDay.is-today {
  box-shadow: inset 0 0 0 1.5px var(--brand-blue);
  color: var(--brand-blue-deep);
}

.PanelCalDay.is-selected,
.PanelCalDay.is-selected:hover {
  background: var(--brand-color);
  color: var(--brand-ink);
  font-weight: 800;
  box-shadow: none;
}

/* پایین تقویم */

.PanelCalFoot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--slate-100);
}

.PanelCalLink {
  border: 0;
  background: none;
  color: var(--brand-blue);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.PanelCalLink:hover {
  color: var(--brand-blue-deep);
}

/* =========================================================
   19. انتخاب پلن
   Plan Grid / Plan Cards
   ========================================================= */

.PanelPlanGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 10px;
}

@media (min-width: 720px) {
  .PanelPlanGrid {
    grid-template-columns: 1fr 1fr;
  }
}

/* کارت هر پلن */

.PanelPlanCard {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 100%;
  padding: 20px 20px 18px;
  border: 1px solid rgba(0, 65, 255, 0.08);
  border-radius: 0px;
  background: #fff;
  cursor: pointer;
  color: var(--slate-900);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(27, 69, 219, 0.06);
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
}

/* هاله تزئینی کارت پلن */

.PanelPlanAura {
  position: absolute;
  z-index: -1;
  width: 9rem;
  height: 9rem;
  top: -3.5rem;
  inset-inline-end: -3rem;
  border-radius: 0%;
  pointer-events: none;
}

.PanelPlanCard:hover {
  border-color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2);
}

/* رادیوی انتخاب پلن */

.PanelPlanRadio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* سربرگ و آیکون پلن */

.PanelPlanTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.PanelPlanIcon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 0px;
  color: var(--brand-color);
  flex-shrink: 0;
}

.PanelPlanGlyph {
  width: 22px;
  height: 22px;
}

.PanelPlanCard>strong {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

/* مدت اعتبار پلن */

.PanelPlanTime {
  display: inline-flex;
  align-items: center;
  max-width: 60%;
  padding: 6px 10px;
  border-radius: 0px;
  background: var(--brand-blue-soft);
  color: var(--brand-blue-deep);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

/* قیمت و مشخصات پلن */

.PanelPlanCost,
.PanelPlanProps {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 0px;
}

.PanelPlanCost {
  background: var(--brand-color);
  color: var(--brand-ink);
}

.PanelPlanProps {
  background: var(--slate-50);
  border: 1px solid var(--slate-100);
}

.PanelPlanCost em,
.PanelPlanProps em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.72;
}

.PanelPlanCost strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

/* فهرست ویژگی‌های پلن */

.PanelPlanProps ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.PanelPlanProps li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--slate-200);
  font-size: 13px;
  line-height: 1.5;
}

.PanelPlanProps li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.PanelPlanProps li:first-child {
  padding-top: 0;
}

.PanelPlanProps span {
  color: var(--slate-900);
}

.PanelPlanProps b {
  color: var(--slate-900);
  font-weight: 700;
  text-align: end;
}

/* توضیحات و دکمه انتخاب پلن */

.PanelPlanDesc {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--slate-600);
  line-height: 1.85;
}

.PanelPlanPick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 0px;
  background: var(--slate-50);
  color: var(--slate-700);
  font-size: 12px;
  font-weight: 800;
  width: fit-content;
}

.PanelPlanPick.is-on {
  display: none;
}

/* حالت انتخاب‌شده */

.PanelPlanCard:has(.PanelPlanRadio:checked) {
  border-color: transparent;
  background: var(--brand-color);
  box-shadow: 0 16px 36px rgb(28 73 188 / 58%);
  color: var(--brand-ink);
}

.PanelPlanCard:has(.PanelPlanRadio:checked) .PanelPlanAura {
  background: radial-gradient(circle, rgba(0, 65, 255, 0.16), transparent 70%);
}

.PanelPlanCard:has(.PanelPlanRadio:checked) .PanelPlanIcon {
  color: var(--brand-ink);
}

.PanelPlanCard:has(.PanelPlanRadio:checked) .PanelPlanTime {
  background: rgba(43, 43, 43, 0.1);
  color: var(--brand-ink);
}

.PanelPlanCard:has(.PanelPlanRadio:checked) .PanelPlanProps {
  background: rgba(255, 255, 255, 0.55);
  border-color: transparent;
}

.PanelPlanCard:has(.PanelPlanRadio:checked) .PanelPlanDesc {
  color: var(--brand-ink);
}

.PanelPlanCard:has(.PanelPlanRadio:checked) .PanelPlanPick.is-idle {
  display: none;
}

.PanelPlanCard:has(.PanelPlanRadio:checked) .PanelPlanPick.is-on {
  display: inline-flex;
  background: var(--brand-ink);
  visibility: hidden;
}

/* فوکوس صفحه‌کلید روی پلن */

.PanelPlanCard:has(.PanelPlanRadio:focus-visible) {
  box-shadow: var(--focus-ring);
}