/* =============================================================================
   پورتال نمایندگان — سیستم طراحی مستقل از پنل مدیریت
   مینیمال · RTL · Vazirmatn · روشن/تیره · موبایل‌محور
   ============================================================================= */

/* ---------------------------------------------------------------- توکن‌ها */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --surface-2:#f2f4f7; --surface-3:#e9ecf1;
  --line:#e4e7ec; --line-strong:#d0d5dd;
  --text:#101828; --text-2:#475467; --mute:#8a94a6;
  --primary:#4f46e5; --primary-2:#4338ca; --primary-soft:#eef0ff; --primary-line:#c7cbfb; --on-primary:#fff;
  --success:#079455; --success-soft:#e7f7ef; --warning:#b54708; --warning-soft:#fef4e6;
  --danger:#d92d20; --danger-soft:#fdecea; --info:#1570ef; --info-soft:#eaf2ff; --violet:#7a5af8; --violet-soft:#f1eefe;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 20px 40px -12px rgba(16,24,40,.18);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --side-w:272px; --top-h:64px; --bottom-h:64px;
  --font:'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --mono:ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0d12; --surface:#13161d; --surface-2:#1a1e27; --surface-3:#232835;
    --line:#252a36; --line-strong:#323949;
    --text:#f2f4f7; --text-2:#b4bccb; --mute:#7d8698;
    --primary:#7c74ff; --primary-2:#948dff; --primary-soft:rgba(124,116,255,.14); --primary-line:rgba(124,116,255,.38); --on-primary:#fff;
    --success:#3ccb7f; --success-soft:rgba(60,203,127,.13); --warning:#f5a524; --warning-soft:rgba(245,165,36,.13);
    --danger:#f97066; --danger-soft:rgba(249,112,102,.13); --info:#53a2ff; --info-soft:rgba(83,162,255,.13); --violet:#a48afb; --violet-soft:rgba(164,138,251,.14);
    --shadow-sm:none; --shadow:0 0 0 1px rgba(255,255,255,.02); --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0d12; --surface:#13161d; --surface-2:#1a1e27; --surface-3:#232835;
  --line:#252a36; --line-strong:#323949;
  --text:#f2f4f7; --text-2:#b4bccb; --mute:#7d8698;
  --primary:#7c74ff; --primary-2:#948dff; --primary-soft:rgba(124,116,255,.14); --primary-line:rgba(124,116,255,.38); --on-primary:#fff;
  --success:#3ccb7f; --success-soft:rgba(60,203,127,.13); --warning:#f5a524; --warning-soft:rgba(245,165,36,.13);
  --danger:#f97066; --danger-soft:rgba(249,112,102,.13); --info:#53a2ff; --info-soft:rgba(83,162,255,.13); --violet:#a48afb; --violet-soft:rgba(164,138,251,.14);
  --shadow-sm:none; --shadow:0 0 0 1px rgba(255,255,255,.02); --shadow-lg:0 24px 48px -12px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------------------------------------------------------------- پایه و تایپوگرافی */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-x:hidden }
@supports (overflow:clip){ html{ overflow-x:clip } }   /* ساید‌بار بیرون صفحه (موبایل) صفحه را عریض نکند */
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:14px; line-height:1.75; font-weight:400; letter-spacing:0;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{ margin:0; color:var(--text); line-height:1.4; font-weight:700 }
h1{ font-size:22px; letter-spacing:-.2px } h2{ font-size:17px } h3{ font-size:15px } h4{ font-size:14px }
p{ margin:0 }
a{ color:var(--primary); text-decoration:none } a:hover{ color:var(--primary-2) }
img{ max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit }
::selection{ background:var(--primary-soft) }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
.ltr{ direction:ltr; unicode-bidi:isolate }
.mono{ font-family:var(--mono); font-size:.92em; direction:ltr; unicode-bidi:isolate }
.muted{ color:var(--mute) } .dim{ color:var(--text-2) }
.small{ font-size:12.5px } .xs{ font-size:11.5px }
.strong{ font-weight:700 } .semi{ font-weight:600 }
.t-success{ color:var(--success) } .t-danger{ color:var(--danger) } .t-warning{ color:var(--warning) } .t-primary{ color:var(--primary) }
.hidden{ display:none !important }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.min0{ min-width:0 }
.row{ display:flex; align-items:center; gap:10px } .row.wrap{ flex-wrap:wrap } .row.between{ justify-content:space-between }
.col{ display:flex; flex-direction:column; gap:10px }
.gap-4{ gap:4px } .gap-6{ gap:6px } .gap-16{ gap:16px }
.grow{ flex:1 1 auto }
.mt-4{ margin-top:4px } .mt-8{ margin-top:8px } .mt-12{ margin-top:12px } .mt-16{ margin-top:16px } .mt-24{ margin-top:24px }
.mb-8{ margin-bottom:8px } .mb-12{ margin-bottom:12px } .mb-16{ margin-bottom:16px } .mb-24{ margin-bottom:24px }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px }

/* ---------------------------------------------------------------- پوسته */
.shell{ min-height:100vh; min-height:100dvh }
.side{
  position:fixed; inset-block:0; inset-inline-start:0; width:var(--side-w); z-index:60;
  display:flex; flex-direction:column; background:var(--surface); border-inline-end:1px solid var(--line);
}
.side-brand{ display:flex; align-items:center; gap:12px; padding:18px 18px 14px }
.side-logo{ width:40px; height:40px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden;
  background:var(--primary); color:var(--on-primary); font-size:19px }
.side-logo img{ width:100%; height:100%; object-fit:cover }
.side-title{ font-weight:700; font-size:15px; line-height:1.3 }
.side-sub{ font-size:11.5px; color:var(--mute) }
.side-wallet{ margin:4px 14px 10px; padding:14px; border-radius:var(--r-lg); background:var(--surface-2); border:1px solid var(--line) }
.side-wallet .lbl{ font-size:11.5px; color:var(--mute); display:flex; align-items:center; gap:6px }
.side-wallet .val{ font-size:20px; font-weight:800; margin:2px 0 10px; letter-spacing:-.3px }
.side-wallet .val small{ font-size:12px; font-weight:500; color:var(--mute); margin-inline-start:4px }
.side-nav{ flex:1 1 auto; overflow-y:auto; padding:6px 10px 10px; scrollbar-width:thin }
.nav-sec{ font-size:11px; font-weight:600; color:var(--mute); padding:14px 10px 6px; letter-spacing:.2px }
.nav-item{ display:flex; align-items:center; gap:11px; padding:9px 11px; margin:1px 0; border-radius:10px; color:var(--text-2);
  font-weight:500; font-size:13.5px; transition:background .15s, color .15s; position:relative }
.nav-item i{ font-size:17px; width:20px; text-align:center; color:var(--mute); transition:color .15s }
.nav-item:hover{ background:var(--surface-2); color:var(--text) } .nav-item:hover i{ color:var(--text-2) }
.nav-item.on{ background:var(--primary-soft); color:var(--primary); font-weight:600 } .nav-item.on i{ color:var(--primary) }
.nav-item .pill{ margin-inline-start:auto }
.side-foot{ border-top:1px solid var(--line); padding:12px 14px; display:flex; align-items:center; gap:10px }
.avatar{ width:36px; height:36px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; font-weight:700; font-size:14px;
  background:var(--surface-3); color:var(--text-2) }
.side-foot .who{ min-width:0; flex:1 1 auto; line-height:1.4 }
.side-foot .who b{ display:block; font-size:13px; font-weight:600 }
.side-foot .who span{ font-size:11.5px; color:var(--mute) }

.main{ margin-inline-start:var(--side-w); min-height:100vh; min-height:100dvh; display:flex; flex-direction:column }
.top{ position:sticky; top:0; z-index:40; height:var(--top-h); display:flex; align-items:center; gap:12px; padding:0 28px;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(1.6) blur(14px); -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s }
.top.scrolled{ border-bottom-color:var(--line) }
.top-title{ font-weight:700; font-size:15px }
.top-actions{ margin-inline-start:auto; display:flex; align-items:center; gap:8px }
.top-bal{ display:none; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line);
  font-weight:700; font-size:13px; color:var(--text) }
.top-bal i{ color:var(--primary) }
.top .menu-btn{ display:none }
.content{ width:100%; max-width:1160px; margin:0 auto; padding:24px 28px 56px; flex:1 1 auto }
.side-backdrop{ position:fixed; inset:0; background:rgba(10,12,18,.45); z-index:55; opacity:0; pointer-events:none; transition:opacity .2s }
.bottom-nav{ display:none }

/* ---------------------------------------------------------------- سربرگ صفحه */
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:22px }
.page-head .eyebrow{ font-size:12px; color:var(--mute); font-weight:500; margin-bottom:2px }
.page-head p{ color:var(--text-2); margin-top:4px; font-size:13.5px }
.view{ display:none; animation:fadeIn .22s ease } .view.on{ display:block }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }

/* ---------------------------------------------------------------- کارت و چیدمان */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px }
.card.flush{ padding:0 }
.card.soft{ background:var(--surface-2); box-shadow:none }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px 12px; margin-bottom:14px; flex-wrap:wrap }
.card-head h2,.card-head h3{ white-space:nowrap }
.card-head h2,.card-head h3{ display:flex; align-items:center; gap:8px }
.card-head h2 i,.card-head h3 i{ color:var(--mute); font-size:16px }
.card + .card{ margin-top:16px }
.grid{ display:grid; gap:16px }
.g2{ grid-template-columns:repeat(2, minmax(0,1fr)) } .g3{ grid-template-columns:repeat(3, minmax(0,1fr)) } .g4{ grid-template-columns:repeat(4, minmax(0,1fr)) }
.split{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start }
/* فرزندان grid/flex می‌توانند کوچک‌تر از محتوا شوند (آدرس‌ها و لینک‌های بلند صفحه را عریض نکنند) */
.grid > *,.split > *,.col > *,.row > *,.form-grid > *{ min-width:0 }
.copy-row .v,.code,.svc-name,.li .title{ overflow-wrap:anywhere }
.sticky{ position:sticky; top:calc(var(--top-h) + 12px) }
.divider{ height:1px; background:var(--line); margin:16px 0; border:0 }

/* ---------------------------------------------------------------- آمار */
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; box-shadow:var(--shadow); min-width:0 }
.stat .ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:17px; margin-bottom:12px;
  background:var(--primary-soft); color:var(--primary) }
.stat .ic.success{ background:var(--success-soft); color:var(--success) } .stat .ic.warning{ background:var(--warning-soft); color:var(--warning) }
.stat .ic.danger{ background:var(--danger-soft); color:var(--danger) } .stat .ic.violet{ background:var(--violet-soft); color:var(--violet) }
.stat .lbl{ font-size:12.5px; color:var(--text-2) }
.stat .val{ font-size:22px; font-weight:800; letter-spacing:-.3px; line-height:1.35; margin-top:2px }
.stat .val small{ font-size:12px; color:var(--mute); font-weight:500; margin-inline-start:4px }
.stat .foot{ font-size:12px; color:var(--mute); margin-top:2px }

/* ---------------------------------------------------------------- دکمه‌ها */
.btn{ --b:var(--surface); display:inline-flex; align-items:center; justify-content:center; gap:7px; height:40px; padding:0 16px;
  border-radius:10px; border:1px solid var(--line-strong); background:var(--b); color:var(--text); font-weight:600; font-size:13.5px;
  cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
  box-shadow:var(--shadow-sm); user-select:none }
.btn i{ font-size:16px }
.btn:hover{ background:var(--surface-2); color:var(--text) }
.btn:active{ transform:translateY(1px) }
.btn:disabled,.btn.is-busy{ opacity:.6; cursor:not-allowed; pointer-events:none }
.btn-primary{ background:var(--primary); border-color:var(--primary); color:var(--on-primary) }
.btn-primary:hover{ background:var(--primary-2); border-color:var(--primary-2); color:var(--on-primary) }
.btn-soft{ background:var(--primary-soft); border-color:transparent; color:var(--primary); box-shadow:none }
.btn-soft:hover{ background:var(--primary-soft); color:var(--primary-2); border-color:var(--primary-line) }
.btn-ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--text-2) }
.btn-ghost:hover{ background:var(--surface-2); color:var(--text) }
.btn-danger{ color:var(--danger) } .btn-danger:hover{ background:var(--danger-soft); border-color:transparent; color:var(--danger) }
.btn-sm{ height:32px; padding:0 11px; font-size:12.5px; border-radius:8px } .btn-sm i{ font-size:14px }
.btn-lg{ height:48px; padding:0 22px; font-size:15px; border-radius:12px }
.btn-block{ width:100% }
.btn-icon{ width:40px; padding:0 } .btn-icon.btn-sm{ width:32px }
.spin{ display:inline-block; width:15px; height:15px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---------------------------------------------------------------- فرم */
.field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.field > label,.label{ font-size:12.5px; font-weight:600; color:var(--text-2) }
.field > label .muted{ font-weight:400 }
.input{ width:100%; height:42px; padding:0 13px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text); font-size:14px; transition:border-color .15s, box-shadow .15s; outline:0 }
textarea.input{ height:auto; min-height:96px; padding:10px 13px; line-height:1.7; resize:vertical }
select.input{ appearance:none; -webkit-appearance:none; padding-inline-end:36px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%238a94a6'%3E%3Cpath d='M1.6 5.1a.75.75 0 0 1 1.06 0L8 10.4l5.34-5.3a.75.75 0 1 1 1.06 1.06l-5.87 5.83a.75.75 0 0 1-1.06 0L1.6 6.16a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 13px center }
.input::placeholder{ color:var(--mute) }
.input:hover{ border-color:var(--mute) }
.input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft) }
.input.lg{ height:52px; font-size:18px; font-weight:700 }
.input-group{ position:relative }
.input-group .suffix{ position:absolute; inset-block:0; inset-inline-end:13px; display:flex; align-items:center; color:var(--mute); font-size:13px; pointer-events:none }
.input-group .input{ padding-inline-end:60px }
.hint{ font-size:12px; color:var(--mute); line-height:1.65 }
.form-grid{ display:grid; gap:14px }
.form-grid.c2{ grid-template-columns:repeat(2, minmax(0,1fr)) } .form-grid.c3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.form-grid .full{ grid-column:1 / -1 }
.chips{ display:flex; gap:6px; flex-wrap:wrap }
.chip{ height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font-size:12.5px; font-weight:600;
  color:var(--text-2); cursor:pointer; display:inline-flex; align-items:center; transition:all .15s }
.chip:hover{ border-color:var(--primary-line); color:var(--primary) }

/* segmented */
.seg{ display:inline-flex; padding:3px; gap:2px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); max-width:100% }
.seg button{ border:0; background:none; color:var(--text-2); height:34px; padding:0 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:all .15s }
.seg button:hover{ color:var(--text) }
.seg button.on{ background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(16,24,40,.12) }
.seg.block{ display:flex } .seg.block button{ flex:1 1 0; justify-content:center }

/* switch */
.switch{ position:relative; display:inline-block; width:40px; height:23px; flex:0 0 auto }
.switch input{ opacity:0; width:0; height:0 }
.switch span{ position:absolute; inset:0; border-radius:999px; background:var(--surface-3); border:1px solid var(--line-strong); transition:.2s; cursor:pointer }
.switch span::after{ content:""; position:absolute; top:2px; inset-inline-start:2px; width:17px; height:17px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:.2s }
.switch input:checked + span{ background:var(--primary); border-color:var(--primary) }
.switch input:checked + span::after{ inset-inline-start:19px }
.toggle{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0; cursor:pointer }
.toggle + .toggle{ border-top:1px solid var(--line) }
.toggle .t{ font-weight:600; font-size:13.5px } .toggle .d{ font-size:12px; color:var(--mute); margin-top:1px }
.check{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:13px }
.check input{ width:16px; height:16px; accent-color:var(--primary) }

/* ---------------------------------------------------------------- برچسب و هشدار */
.badge{ display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--surface-2); color:var(--text-2); white-space:nowrap; line-height:1 }
.badge i{ font-size:12px }
.badge.success{ background:var(--success-soft); color:var(--success) } .badge.danger{ background:var(--danger-soft); color:var(--danger) }
.badge.warning{ background:var(--warning-soft); color:var(--warning) } .badge.info{ background:var(--info-soft); color:var(--info) }
.badge.primary{ background:var(--primary-soft); color:var(--primary) } .badge.violet{ background:var(--violet-soft); color:var(--violet) }
.badge.dot::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor }
.pill{ min-width:20px; height:20px; padding:0 6px; border-radius:999px; display:inline-grid; place-items:center; font-size:11px; font-weight:700;
  background:var(--danger); color:#fff }
.alert{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r); font-size:13px; line-height:1.75;
  background:var(--info-soft); color:var(--text) }
.alert > i{ font-size:17px; line-height:1.4; color:var(--info); flex:0 0 auto }
.alert.success{ background:var(--success-soft) } .alert.success > i{ color:var(--success) }
.alert.warning{ background:var(--warning-soft) } .alert.warning > i{ color:var(--warning) }
.alert.danger{ background:var(--danger-soft) } .alert.danger > i{ color:var(--danger) }
.alert b{ font-weight:700 }

/* ---------------------------------------------------------------- لیست‌ها */
.list{ display:flex; flex-direction:column }
.li{ display:flex; align-items:center; gap:12px; padding:13px 18px; border-top:1px solid var(--line) }
.li:first-child{ border-top:0 }
.li .ic{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; font-size:17px; background:var(--surface-2); color:var(--text-2) }
.li .ic.success{ background:var(--success-soft); color:var(--success) } .li .ic.danger{ background:var(--danger-soft); color:var(--danger) }
.li .ic.warning{ background:var(--warning-soft); color:var(--warning) } .li .ic.info{ background:var(--info-soft); color:var(--info) }
.li .ic.violet{ background:var(--violet-soft); color:var(--violet) } .li .ic.primary{ background:var(--primary-soft); color:var(--primary) }
.li .body{ min-width:0; flex:1 1 auto }
.li .title{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.li .sub{ font-size:12px; color:var(--mute); margin-top:1px }
.li .end{ text-align:end; flex:0 0 auto }
.amount{ font-weight:700; font-size:14px; white-space:nowrap; direction:ltr; unicode-bidi:isolate; display:inline-block }
.amount.pos{ color:var(--success) } .amount.neg{ color:var(--text) }
.kv{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; font-size:13.5px }
.kv + .kv{ border-top:1px dashed var(--line) }
.kv span:first-child{ color:var(--text-2) }
.kv b{ font-weight:600 }

/* ---------------------------------------------------------------- سرویس‌ها */
.toolbar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px }
.toolbar .search{ position:relative; flex:1 1 240px }
.toolbar .search i{ position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); color:var(--mute) }
.toolbar .search .input{ padding-inline-start:38px }
.svc{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto; gap:16px; align-items:center; padding:15px 18px; border-top:1px solid var(--line) }
.svc:first-child{ border-top:0 }
.svc-name{ font-weight:700; font-family:var(--mono); font-size:13.5px; direction:ltr; unicode-bidi:isolate }
.svc .meta{ font-size:12px; color:var(--mute); margin-top:2px }
.svc .k{ font-size:11.5px; color:var(--mute) } .svc .v{ font-size:13px; font-weight:600 }
.meter{ height:6px; border-radius:6px; background:var(--surface-3); overflow:hidden; margin-top:6px }
.meter i{ display:block; height:100%; border-radius:6px; background:var(--primary); transition:width .4s }
.meter.warn i{ background:var(--warning) } .meter.bad i{ background:var(--danger) }
.svc-acts{ display:flex; gap:6px; justify-content:flex-end }

/* ---------------------------------------------------------------- پلن‌ها */
.plans{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px }
.plan{ position:relative; text-align:start; padding:16px; border-radius:var(--r-lg); border:1.5px solid var(--line); background:var(--surface);
  cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .15s; display:flex; flex-direction:column; gap:12px; min-width:0 }
.plan:hover{ border-color:var(--primary-line); transform:translateY(-1px); box-shadow:var(--shadow-lg) }
.plan.on{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft) }
.plan .check-dot{ position:absolute; top:14px; inset-inline-end:14px; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--line-strong);
  display:grid; place-items:center; color:transparent; font-size:12px; transition:all .15s }
.plan.on .check-dot{ background:var(--primary); border-color:var(--primary); color:#fff }
.plan .name{ font-weight:700; font-size:14.5px; padding-inline-end:28px; line-height:1.5 }
.plan .feats{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-2) }
.plan .feats div{ display:flex; align-items:center; gap:8px }
.plan .feats i{ color:var(--mute); font-size:14px; width:16px; text-align:center }
.plan .price-box{ margin-top:auto; padding-top:12px; border-top:1px dashed var(--line) }
.price-old{ font-size:12px; color:var(--mute); text-decoration:line-through; text-decoration-thickness:1px }
.price-now{ font-size:18px; font-weight:800; letter-spacing:-.3px }
.price-now small{ font-size:12px; font-weight:500; color:var(--mute); margin-inline-start:3px }
.plans.compact{ grid-template-columns:1fr; gap:8px }
.plans.compact .plan{ flex-direction:row; align-items:center; gap:12px; padding:12px 14px }
.plans.compact .plan .check-dot{ position:static; flex:0 0 auto; order:-1 }
.plans.compact .plan .name{ padding:0; font-size:13.5px }
.plans.compact .plan .feats{ display:none }
.plan .line.hidden-full{ display:none }
.plans.compact .plan .line.hidden-full{ display:block }
.plans.compact .plan .line{ font-size:12px; color:var(--mute); margin-top:1px }
.plans.compact .plan .price-box{ margin:0 0 0 0; margin-inline-start:auto; padding:0; border:0; text-align:end; flex:0 0 auto }
.plans.compact .price-now{ font-size:15px }
.plans.compact .off{ display:none }
.off{ display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:6px; font-size:11px; font-weight:700;
  background:var(--success-soft); color:var(--success); margin-inline-start:6px; vertical-align:2px }

/* خلاصه‌ی سفارش */
.summary .kv{ font-size:13px }
.summary .total{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:14px 0 4px; margin-top:6px; border-top:1px solid var(--line) }
.summary .total b{ font-size:22px; font-weight:800; letter-spacing:-.4px }
.summary .save{ font-size:12px; color:var(--success); font-weight:600 }
.mobile-bar{ display:none }

/* ---------------------------------------------------------------- کیف پول */
.methods{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px }
.method{ display:flex; gap:12px; align-items:flex-start; padding:14px; border-radius:var(--r-lg); border:1.5px solid var(--line); background:var(--surface);
  cursor:pointer; text-align:start; transition:all .15s }
.method:hover{ border-color:var(--primary-line) }
.method.on{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft) }
.method .ic{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:grid; place-items:center; font-size:19px; background:var(--surface-2); color:var(--text-2) }
.method.on .ic{ background:var(--primary-soft); color:var(--primary) }
.method b{ display:block; font-size:13.5px } .method span{ font-size:12px; color:var(--mute); line-height:1.6; display:block; margin-top:2px }
.paybox{ border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface-2); padding:16px }
.copy-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0 }
.copy-row + .copy-row{ border-top:1px dashed var(--line-strong) }
.copy-row .k{ font-size:12px; color:var(--mute) }
.copy-row .v{ font-weight:700; font-size:15px; word-break:break-all }
.copy-row .v.mono{ font-size:14px }
.countdown{ display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--warning) }
.qr{ width:168px; height:168px; border-radius:12px; background:#fff; padding:8px; border:1px solid var(--line); flex:0 0 auto }
.qr img{ width:100%; height:100%; display:block; image-rendering:pixelated }
.drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:22px; border-radius:var(--r-lg);
  border:1.5px dashed var(--line-strong); background:var(--surface-2); color:var(--text-2); cursor:pointer; text-align:center; transition:all .15s }
.drop:hover,.drop.over{ border-color:var(--primary); color:var(--primary); background:var(--primary-soft) }
.drop i{ font-size:26px }
.drop img{ max-height:160px; border-radius:10px }
.steps{ display:flex; flex-direction:column; gap:10px; counter-reset:s }
.steps li{ list-style:none; display:flex; gap:10px; font-size:13px; color:var(--text-2) }
.steps li::before{ counter-increment:s; content:counter(s, persian); width:22px; height:22px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--primary-soft); color:var(--primary); font-weight:700; font-size:12px }
.steps{ padding:0; margin:0 }

/* ---------------------------------------------------------------- کیف پول (نسخه‌ی ۲): مبلغ روی صفحه، پرداخت و فاکتور در مودال */
.wallet-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start }
.wallet-hero{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:22px; color:#fff;
  background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--primary) 70%, #fff 0%) 0%, var(--primary-2) 55%, color-mix(in srgb, var(--primary-2) 70%, #000) 100%);
  box-shadow:0 18px 40px -18px color-mix(in srgb, var(--primary) 80%, transparent) }
.wallet-hero::after{ content:""; position:absolute; width:220px; height:220px; border-radius:50%; inset-inline-start:-70px; bottom:-110px; background:rgba(255,255,255,.08) }
.wallet-hero .lbl{ font-size:12.5px; opacity:.85; display:flex; align-items:center; gap:6px }
.wallet-hero .big{ font-size:30px; font-weight:800; letter-spacing:-.5px; margin:4px 0 2px; line-height:1.3 }
.wallet-hero .big small{ font-size:13px; font-weight:500; opacity:.8; margin-inline-start:6px }
.wallet-hero .meta{ display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-size:12px; opacity:.9; position:relative; z-index:1 }
.wallet-hero .meta b{ display:block; font-size:13.5px; font-weight:700; opacity:1 }
.amount-box{ position:relative }
.amount-box .input{ height:64px; font-size:26px; font-weight:800; text-align:center; letter-spacing:-.3px; padding-inline:70px }
.amount-box .unit{ position:absolute; inset-block:0; inset-inline-end:18px; display:flex; align-items:center; color:var(--mute); font-size:13px; font-weight:600; pointer-events:none }
.amount-words{ text-align:center; color:var(--text-2); font-size:12.5px; min-height:22px; margin-top:8px }
.chips.center{ justify-content:center }
.chip.on{ border-color:var(--primary); background:var(--primary-soft); color:var(--primary) }
.method-icons{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--mute); margin-top:14px }
.method-icons span{ display:inline-flex; align-items:center; gap:5px }
.method-icons i{ font-size:14px; color:var(--text-2) }
.open-inv{ display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-lg); margin-bottom:16px;
  background:var(--warning-soft); border:1px solid color-mix(in srgb, var(--warning) 30%, transparent) }
.open-inv .ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface); color:var(--warning); font-size:19px; flex:0 0 auto }
.open-inv .t{ flex:1 1 auto; min-width:0; line-height:1.55 } .open-inv .t b{ font-size:13.5px } .open-inv .t div{ font-size:12px; color:var(--text-2) }

/* ویزارد داخل مودال */
.wiz-steps{ display:flex; align-items:center; gap:6px; margin:-4px 0 16px; font-size:11.5px; color:var(--mute); font-weight:600 }
.wiz-steps span{ display:inline-flex; align-items:center; gap:5px }
.wiz-steps span::before{ content:attr(data-n); width:18px; height:18px; border-radius:50%; display:grid; place-items:center; background:var(--surface-3); color:var(--text-2); font-size:10.5px }
.wiz-steps span.on{ color:var(--primary) } .wiz-steps span.on::before{ background:var(--primary); color:#fff }
.wiz-steps span.done::before{ background:var(--success-soft); color:var(--success) }
.wiz-steps i{ font-size:10px; opacity:.6 }
.wiz-amount{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-radius:var(--r); background:var(--surface-2); margin-bottom:14px }
.wiz-amount span{ font-size:12.5px; color:var(--text-2) } .wiz-amount b{ font-size:17px; font-weight:800 }
.pm-list{ display:flex; flex-direction:column; gap:8px }
.pm{ display:flex; align-items:center; gap:13px; width:100%; padding:14px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface);
  cursor:pointer; text-align:start; transition:border-color .15s, background .15s, transform .1s }
.pm:hover{ border-color:var(--primary-line); background:color-mix(in srgb, var(--primary-soft) 40%, var(--surface)) }
.pm:active{ transform:scale(.995) }
.pm .ic{ width:44px; height:44px; border-radius:13px; flex:0 0 auto; display:grid; place-items:center; font-size:20px }
.pm .ic.auto{ background:var(--info-soft); color:var(--info) } .pm .ic.manual{ background:var(--warning-soft); color:var(--warning) } .pm .ic.crypto{ background:var(--violet-soft); color:var(--violet) }
.pm .tx{ flex:1 1 auto; min-width:0 } .pm .tx b{ display:flex; align-items:center; gap:8px; font-size:14px; flex-wrap:wrap }
.pm .tx span{ display:block; font-size:12px; color:var(--mute); line-height:1.6; margin-top:2px }
/* ردیف آیکون ارزها زیر «پرداخت ارزی»: افقی، نه زیر هم */
.pm .tx .cicons{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-top:7px }
.pm .tx .cicons .cico{ display:inline-grid; margin:0 }
.pm > .bi-chevron-left{ color:var(--mute); font-size:15px }
.pin{ width:200px; max-width:100%; height:58px; margin:0 auto; display:block; text-align:center; font-size:26px; font-weight:800; letter-spacing:12px; padding-inline-start:12px }
.cur-list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px }
.cur{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:var(--r); border:1.5px solid var(--line); background:var(--surface); cursor:pointer; text-align:start; transition:all .15s }
.cur:hover{ border-color:var(--primary-line) }
.cur.on{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft) }
.cur .sym{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:11px; background:var(--surface-2); color:var(--text); direction:ltr; flex:0 0 auto }
.cur b{ display:block; font-size:13px } .cur small{ display:block; font-size:11px; color:var(--mute); direction:ltr; text-align:right }

/* فاکتور */
.inv{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.inv-top{ padding:18px; text-align:center; background:var(--surface-2); border-bottom:1px dashed var(--line-strong); position:relative }
.inv-top .no{ font-size:12px; color:var(--mute) }
.inv-top .amt{ font-size:28px; font-weight:800; letter-spacing:-.5px; margin:4px 0; line-height:1.35 }
.inv-top .amt small{ font-size:13px; color:var(--mute); font-weight:500; margin-inline-start:4px }
.inv-top .sub{ font-size:12.5px; color:var(--text-2) }
.inv-body{ padding:6px 16px 10px }
.inv-timer{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--text-2) }
.inv-timer .bar{ flex:1 1 auto; height:5px; border-radius:5px; background:var(--surface-3); overflow:hidden }
.inv-timer .bar i{ display:block; height:100%; background:var(--warning); border-radius:5px; transition:width 1s linear }
.inv-timer b{ font-variant-numeric:tabular-nums; color:var(--warning); min-width:56px; text-align:end }
.inv-state{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:var(--r); margin-top:14px; font-size:13px; background:var(--info-soft) }
.inv-state .pulse{ width:9px; height:9px; border-radius:50%; background:var(--info); flex:0 0 auto; box-shadow:0 0 0 0 color-mix(in srgb, var(--info) 60%, transparent); animation:pulse 1.6s infinite }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--info) 55%, transparent) } 70%{ box-shadow:0 0 0 9px transparent } 100%{ box-shadow:0 0 0 0 transparent } }
.inv-ok{ text-align:center; padding:10px 0 4px }
.inv-ok .ic{ width:64px; height:64px; border-radius:50%; margin:0 auto 12px; display:grid; place-items:center; font-size:30px; background:var(--success-soft); color:var(--success); animation:pop .3s ease }
.inv-ok h3{ font-size:17px } .inv-ok p{ color:var(--text-2); font-size:13px; margin-top:4px }
.inv-qr{ display:flex; justify-content:center; padding:14px 0 4px }
.st-pill{ display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:999px; font-size:11.5px; font-weight:700; margin-top:8px }
.st-pill.pending{ background:var(--warning-soft); color:var(--warning) } .st-pill.approved{ background:var(--success-soft); color:var(--success) }
.st-pill.rejected{ background:var(--danger-soft); color:var(--danger) } .st-pill.cancelled,.st-pill.expired{ background:var(--surface-3); color:var(--text-2) }
.li.click{ cursor:pointer } .li.click:hover{ background:var(--surface-2) }

/* تولید نام سرویس */
.name-row{ display:flex; gap:8px } .name-row .input{ flex:1 1 auto }
.seg button:disabled{ opacity:.45; cursor:not-allowed }

/* ربات من */
.bot-hero{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.bot-hero .av{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; font-size:28px; background:linear-gradient(135deg, #2aabee, #229ed9); color:#fff; flex:0 0 auto }
@media (max-width:640px){ .grid.bot-stats{ grid-template-columns:1fr 1fr } .grid.bot-stats > :last-child{ grid-column:1 / -1 } }
.bot-hero .nm{ font-size:18px; font-weight:800; direction:ltr; unicode-bidi:isolate }

/* ---- تصویر کارت بانکی و آیکون ارزها ---- */
.bank-card{ position:relative; width:100%; max-width:360px; aspect-ratio:1.586; margin:0 auto; border-radius:18px; padding:18px 20px; color:#fff; overflow:hidden; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow:0 18px 36px -16px color-mix(in srgb, var(--c1) 85%, transparent), inset 0 1px 0 rgba(255,255,255,.18); user-select:none; transition:transform .15s }
.bank-card:hover{ transform:translateY(-2px) }
.bank-card::before{ content:""; position:absolute; width:260px; height:260px; border-radius:50%; inset-inline-start:-90px; top:-120px; background:rgba(255,255,255,.08) }
.bank-card::after{ content:""; position:absolute; width:200px; height:200px; border-radius:50%; inset-inline-end:-70px; bottom:-110px; background:rgba(0,0,0,.10) }
.bank-card > *{ position:relative; z-index:1 }
.bc-top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.bc-bank{ font-weight:800; font-size:15px; letter-spacing:0; text-shadow:0 1px 2px rgba(0,0,0,.2) }
.bc-logo{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:16px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3) }
.bc-chip{ width:42px; height:31px; border-radius:7px; background:linear-gradient(135deg, #f6e29b, #c9a649 55%, #e9d27e); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); position:relative }
.bc-chip i{ position:absolute; inset:7px 10px; border:1px solid rgba(90,70,20,.45); border-radius:3px }
.bc-num{ direction:ltr; text-align:center; font-size:21px; font-weight:800; letter-spacing:2px; font-variant-numeric:tabular-nums; text-shadow:0 1px 2px rgba(0,0,0,.25); white-space:nowrap }
.bc-bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px }
.bc-bottom small{ display:block; font-size:10.5px; opacity:.8 } .bc-bottom b{ display:block; font-size:13.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.bc-copy{ font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.18); white-space:nowrap }
@media (max-width:380px){ .bc-num{ font-size:18px; letter-spacing:1px } .bank-card{ padding:15px 16px } }
.cico{ width:36px; height:36px; flex:0 0 auto; display:inline-grid; place-items:center }
.cico svg{ width:100%; height:100%; display:block }
.cico-txt{ width:100%; height:100%; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:800; background:var(--surface-3, #eee); direction:ltr }

/* ---------------------------------------------------------------- رنگ آبی (حساب من و بخش‌های مرتبط) */
:root{ --blue:#2563eb; --blue-2:#1d4ed8; --blue-soft:#eaf1ff; --blue-line:#bfd3fe }
:root[data-theme="dark"]{ --blue:#4f8dff; --blue-2:#3b7bff; --blue-soft:rgba(79,141,255,.14); --blue-line:rgba(79,141,255,.35) }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --blue:#4f8dff; --blue-2:#3b7bff; --blue-soft:rgba(79,141,255,.14); --blue-line:rgba(79,141,255,.35) } }
.t-blue{ color:var(--blue) }
.stat .ic.blue,.li .ic.blue{ background:var(--blue-soft); color:var(--blue) }
.badge.blue{ background:var(--blue-soft); color:var(--blue) }
.card.blue-head .card-head h3 i{ color:var(--blue) }
.side-foot .avatar{ background:var(--blue-soft); color:var(--blue) }
.acct-hero{ position:relative; overflow:hidden; border-radius:var(--r-xl); padding:22px; color:#fff; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--blue-2), var(--blue) 60%, #60a5fa); box-shadow:0 18px 40px -18px color-mix(in srgb, var(--blue) 80%, transparent) }
.acct-hero::after{ content:""; position:absolute; width:240px; height:240px; border-radius:50%; inset-inline-start:-80px; bottom:-130px; background:rgba(255,255,255,.09) }
.acct-hero > *{ position:relative; z-index:1 }
.acct-hero .av{ width:58px; height:58px; border-radius:18px; display:grid; place-items:center; font-size:24px; font-weight:800; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3) }
.acct-hero .nm{ font-size:19px; font-weight:800 } .acct-hero .un{ font-size:12.5px; opacity:.85; direction:ltr; unicode-bidi:isolate }
.acct-hero .chips2{ display:flex; gap:8px; flex-wrap:wrap; margin-inline-start:auto }
.acct-hero .chip2{ display:flex; flex-direction:column; padding:8px 14px; border-radius:12px; background:rgba(255,255,255,.14); min-width:96px }
.acct-hero .chip2 small{ font-size:11px; opacity:.85 } .acct-hero .chip2 b{ font-size:15px; font-weight:800 }
.perm{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--r); border:1px solid var(--line); font-size:13px }
.perm.on{ border-color:var(--blue-line); background:var(--blue-soft) } .perm.on i{ color:var(--blue) } .perm i{ font-size:16px; color:var(--mute) }

/* ---------------------------------------------------------------- مودال، توست، خالی، اسکلت */
.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(10,12,18,.5) }
.modal.open{ display:flex; animation:fadeBg .18s ease }
@keyframes fadeBg{ from{ opacity:0 } to{ opacity:1 } }
.modal-box{ width:100%; max-width:520px; max-height:calc(100dvh - 40px); overflow:auto; background:var(--surface); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg); border:1px solid var(--line); animation:pop .2s ease }
.modal-box.wide{ max-width:720px }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98) } to{ opacity:1; transform:none } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px 0 }
.modal-head h3{ font-size:16px }
.modal-body{ padding:16px 20px 20px }
.modal-foot{ display:flex; gap:8px; padding:0 20px 20px }
.modal-foot .btn{ flex:1 1 0 }
.toasts{ position:fixed; z-index:120; bottom:24px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; align-items:center;
  width:max-content; max-width:calc(100vw - 32px); pointer-events:none }
.toast{ display:flex; align-items:center; gap:9px; padding:11px 16px; border-radius:12px; background:var(--text); color:var(--surface); font-size:13.5px;
  font-weight:500; box-shadow:var(--shadow-lg); animation:pop .2s ease; pointer-events:auto; line-height:1.6 }
.toast i{ font-size:16px }
.toast.success i{ color:#4ade80 } .toast.danger i{ color:#f87171 }
.empty{ text-align:center; padding:40px 20px; color:var(--mute) }
.empty .ic{ width:52px; height:52px; border-radius:16px; margin:0 auto 12px; display:grid; place-items:center; font-size:24px; background:var(--surface-2); color:var(--mute) }
.empty b{ display:block; color:var(--text); font-size:14px; margin-bottom:2px }
.empty .btn{ margin-top:14px }
.skel{ border-radius:8px; background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size:400% 100%;
  animation:shimmer 1.3s ease infinite; height:14px }
@keyframes shimmer{ 0%{ background-position:100% 50% } 100%{ background-position:0 50% } }
.code{ display:block; font-family:var(--mono); font-size:12px; direction:ltr; text-align:left; word-break:break-all; padding:10px 12px; border-radius:10px;
  background:var(--surface-2); border:1px solid var(--line); line-height:1.6; color:var(--text) }
.cfg{ padding:12px; border:1px solid var(--line); border-radius:var(--r); margin-bottom:10px }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto; scrollbar-width:none }
.tabs::-webkit-scrollbar{ display:none }
.tabs a{ display:inline-flex; align-items:center; gap:7px; padding:10px 12px; font-size:13.5px; font-weight:600; color:var(--text-2); border-bottom:2px solid transparent;
  margin-bottom:-1px; white-space:nowrap }
.tabs a:hover{ color:var(--text) } .tabs a.on{ color:var(--primary); border-bottom-color:var(--primary) }
.tabs a i{ font-size:15px }

/* ---------------------------------------------------------------- ورود */
.auth{ min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px 16px;
  background:radial-gradient(1200px 500px at 50% -10%, var(--primary-soft), transparent 70%), var(--bg) }
.auth-card{ width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); padding:32px 28px }
.auth-mark{ width:52px; height:52px; border-radius:15px; margin:0 auto 16px; display:grid; place-items:center; font-size:24px; background:var(--primary); color:#fff; overflow:hidden }
.auth-mark img{ width:100%; height:100%; object-fit:cover }
.auth h1{ text-align:center; font-size:20px } .auth .sub{ text-align:center; color:var(--mute); font-size:13px; margin:4px 0 24px }
.pw{ position:relative } .pw .input{ padding-inline-end:44px }
.pw button{ position:absolute; inset-block:0; inset-inline-end:4px; width:38px; border:0; background:none; color:var(--mute); cursor:pointer; font-size:16px }

/* ---------------------------------------------------------------- واکنش‌گرا */
@media (max-width: 1100px){
  .split{ grid-template-columns:minmax(0,1fr) 300px }
  .g4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width: 960px){
  .side{ transform:translateX(100%); transition:transform .25s ease, visibility .25s; width:min(300px, 86vw); visibility:hidden }
  [dir="ltr"] .side{ transform:translateX(-100%) }
  body.side-open .side{ transform:none; visibility:visible; box-shadow:var(--shadow-lg) }
  body.side-open .side-backdrop{ opacity:1; pointer-events:auto }
  body.side-open{ overflow:hidden }
  .main{ margin-inline-start:0 }
  .top .menu-btn{ display:inline-flex }
  .top{ padding:0 16px }
  .top-bal{ display:inline-flex }
  .content{ padding:18px 16px calc(var(--bottom-h) + 32px + env(safe-area-inset-bottom)) }
  .split,.wallet-grid{ grid-template-columns:1fr }
  .wallet-grid > aside{ order:-1 }
  .sticky{ position:static }
  .g3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  /* موبایل: نام + دکمه‌ها در ردیف اول، مصرف و زمان کنار هم در ردیف دوم */
  .svc{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:12px 14px }
  .svc > :first-child{ grid-column:1 / 3; order:1 } .svc .svc-acts{ grid-column:3; order:2; align-self:start }
  .svc .usage{ grid-column:1; order:3 } .svc .time{ grid-column:2 / 4; order:4 }
  .bottom-nav{ display:grid; grid-template-columns:repeat(5, 1fr); position:fixed; inset-inline:0; bottom:0; z-index:50;
    height:calc(var(--bottom-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line) }
  .bottom-nav a,.bottom-nav button{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10.5px; font-weight:600;
    color:var(--mute); background:none; border:0; cursor:pointer; padding:0 }
  .bottom-nav i{ font-size:20px; line-height:1 }
  .bottom-nav .on{ color:var(--primary) }
  .bottom-nav .fab i{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:var(--primary); color:#fff; font-size:22px;
    box-shadow:0 8px 18px -6px color-mix(in srgb, var(--primary) 70%, transparent); margin-top:-18px }
  .mobile-bar{ display:flex; position:fixed; inset-inline:0; bottom:calc(var(--bottom-h) + env(safe-area-inset-bottom)); z-index:45; padding:10px 16px;
    align-items:center; gap:12px; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -8px 24px -12px rgba(16,24,40,.18) }
  .mobile-bar .t{ flex:1 1 auto; min-width:0; line-height:1.4 } .mobile-bar .t b{ font-size:17px; font-weight:800; display:block }
  .mobile-bar .t span{ font-size:11.5px; color:var(--mute) }
  .has-mobile-bar .content{ padding-bottom:calc(var(--bottom-h) + 110px + env(safe-area-inset-bottom)) }
  .summary .order-btn{ display:none }
}
@media (max-width: 640px){
  body{ font-size:14px }
  h1{ font-size:19px }
  .card{ padding:16px; border-radius:14px }
  .grid{ gap:12px }
  .g2,.g3,.form-grid.c2,.form-grid.c3{ grid-template-columns:1fr }
  .g4{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .stat{ padding:14px }
  .stat .ic{ width:32px; height:32px; font-size:15px; margin-bottom:10px }
  .stat .val{ font-size:18px }
  .plans{ grid-template-columns:1fr 1fr; gap:10px }
  .plan{ padding:13px; gap:10px }
  .plan .name{ font-size:13.5px }
  .price-now{ font-size:16px }
  .li{ padding:12px 14px }
  .svc{ padding:14px }
  .page-head{ margin-bottom:16px }
  .modal{ align-items:flex-end; padding:0 }
  .modal-box{ border-radius:20px 20px 0 0; max-height:92dvh; padding-bottom:env(safe-area-inset-bottom) }
  .qr{ width:148px; height:148px }
  .toasts{ bottom:calc(var(--bottom-h) + 20px + env(safe-area-inset-bottom)) }
  .hide-sm{ display:none !important }
}
@media (max-width: 380px){ .plans{ grid-template-columns:1fr } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }