/* ===================================================================
   Trade Center — سیستم طراحی
   مقیاس تایپوگرافی، عمق، و حرکت — نه فقط رنگ
   =================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  font-display: swap;
  src: local('Vazirmatn');
}

:root {
  /* ── عمق: پس‌زمینه در لایه‌ها، نه یک رنگ تخت ───────────────────── */
  --bg-0: #040910;
  --bg-1: #07101c;
  --bg-2: #0a1828;
  --surface-1: rgba(255,255,255,.032);
  --surface-2: rgba(255,255,255,.055);
  --surface-3: rgba(255,255,255,.082);

  /* ── طلایی: سه درجه، نه یک رنگ ───────────────────────────────── */
  --gold-100: #ffe98a;
  --gold-300: #ffd84d;
  --gold-500: #f5c518;
  --gold-700: #c9971a;
  --gold-glow: rgba(245,197,24,.22);

  --accent:  #4aa8ff;
  --success: #1fd98a;
  --danger:  #ff5d6c;
  --warn:    #ffb547;

  /* ── متن: مقیاس کنتراست ──────────────────────────────────────── */
  --ink-1: #f4f8ff;   /* عنوان */
  --ink-2: #c3d2e6;   /* بدنه */
  --ink-3: #8396ad;   /* کم‌اهمیت */
  --ink-4: #5a6c82;   /* بسیار کم‌رنگ */

  --line-1: rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.12);
  --line-gold: rgba(245,197,24,.30);

  /* ── مقیاس تایپوگرافی (نسبت ۱٫۲۵) ────────────────────────────── */
  --t-xs: 11.5px;
  --t-sm: 13px;
  --t-md: 14.5px;
  --t-lg: 17px;
  --t-xl: 21px;
  --t-2xl: 26px;
  --t-3xl: 34px;

  --lh-tight: 1.3;
  --lh-body: 1.75;

  /* ── فاصله (مقیاس ۴px) ───────────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px;

  /* ── سایه: ارتفاع واقعی ──────────────────────────────────────── */
  --e-1: 0 1px 2px rgba(0,0,0,.28);
  --e-2: 0 4px 14px rgba(0,0,0,.34);
  --e-3: 0 12px 34px rgba(0,0,0,.44);
  --e-gold: 0 8px 26px rgba(245,197,24,.20), 0 1px 0 rgba(255,255,255,.22) inset;

  --font: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Roboto Mono', monospace;

  --ease: cubic-bezier(.22,.68,.36,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  direction: rtl;
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink-2);
  background: var(--bg-0);
  font-feature-settings: 'ss01', 'kern';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* نور محیطی — ثابت، بدون هزینه‌ی اسکرول */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(680px 380px at 78% -6%,  rgba(245,197,24,.10), transparent 62%),
    radial-gradient(520px 420px at 8%  14%,  rgba(74,168,255,.075), transparent 60%),
    radial-gradient(760px 520px at 50% 108%, rgba(31,217,138,.045), transparent 64%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 58%);
}

.shell { max-width: 460px; margin: 0 auto; padding: var(--s-5) var(--s-4) calc(112px + var(--safe-b)); }

/* ── تایپوگرافی ─────────────────────────────────────────────────── */
.h1 {
  font-size: var(--t-2xl); font-weight: 800; line-height: var(--lh-tight);
  color: var(--ink-1); letter-spacing: -.45px; margin: 0 0 var(--s-2);
}
.sub { font-size: var(--t-sm); color: var(--ink-3); margin: 0 0 var(--s-6); line-height: 1.65; }
.eyebrow {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: 1.4px;
  color: var(--gold-500); text-transform: uppercase; margin-bottom: var(--s-2);
}

/* ── کارت ───────────────────────────────────────────────────────── */
.card {
  position: relative;
  background: linear-gradient(168deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--e-2);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
/* درخشش لبه‌ی بالا — عمق می‌دهد */
.card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

/* ── کارت پلن ───────────────────────────────────────────────────── */
.plan {
  display: block; width: 100%; text-align: right;
  font-family: inherit; color: inherit; cursor: pointer;
  background: linear-gradient(168deg, var(--surface-2), var(--surface-1));
  border: 1.5px solid var(--line-1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-3);
  transition: border-color .22s var(--ease), transform .18s var(--ease),
              box-shadow .22s var(--ease), background .22s var(--ease);
}
.plan:active { transform: scale(.985); }
.plan[aria-pressed="true"] {
  border-color: var(--line-gold);
  background: linear-gradient(168deg, rgba(245,197,24,.10), var(--surface-1));
  box-shadow: var(--e-gold);
}
.plan[disabled] { opacity: .4; pointer-events: none; }

.plan-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); }
.plan-mark {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px; font-size: 20px;
  background: var(--surface-3); border: 1px solid var(--line-1);
}
.plan[aria-pressed="true"] .plan-mark {
  background: linear-gradient(150deg, var(--gold-300), var(--gold-700));
  border-color: transparent; box-shadow: 0 4px 14px var(--gold-glow);
}
.plan-name { font-size: var(--t-lg); font-weight: 700; color: var(--ink-1); letter-spacing: -.2px; }
.plan-desc { font-size: var(--t-sm); color: var(--ink-3); margin: 0 0 var(--s-4); line-height: 1.6; }

.price { display: flex; align-items: baseline; gap: var(--s-2); }
.price-n {
  font-size: var(--t-3xl); font-weight: 800; line-height: 1;
  letter-spacing: -1.2px;
  background: linear-gradient(160deg, var(--gold-100), var(--gold-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price-u { font-size: var(--t-sm); font-weight: 600; color: var(--gold-500); }
.price-x { font-size: var(--t-sm); color: var(--ink-4); }
.price-old { font-size: var(--t-sm); color: var(--ink-4); text-decoration: line-through; }

/* ── نشان ───────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 7px;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1px;
  background: rgba(245,197,24,.14); color: var(--gold-300);
  border: 1px solid var(--line-gold);
}
.tag-success { background: rgba(31,217,138,.13); color: var(--success); border-color: rgba(31,217,138,.28); }
.tag-danger  { background: rgba(255,93,108,.13); color: var(--danger);  border-color: rgba(255,93,108,.28); }
.tag-muted   { background: var(--surface-2);     color: var(--ink-3);   border-color: var(--line-1); }

/* ── دکمه ───────────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; min-height: 52px; padding: 0 var(--s-5);
  border: 0; border-radius: var(--r-md);
  font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: -.1px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .16s var(--ease), filter .2s, opacity .2s;
}
.btn:active:not(:disabled) { transform: scale(.978); }
.btn:disabled { opacity: .38; cursor: not-allowed; }

.btn-primary {
  color: #1b1400;
  background: linear-gradient(150deg, var(--gold-100) 0%, var(--gold-300) 42%, var(--gold-700) 100%);
  box-shadow: var(--e-gold);
}
.btn-primary:not(:disabled):hover { filter: brightness(1.06); }
.btn-ghost {
  color: var(--ink-1); background: var(--surface-2);
  border: 1px solid var(--line-2); box-shadow: var(--e-1);
}

/* ── فرم ────────────────────────────────────────────────────────── */
.label {
  display: block; font-size: var(--t-xs); font-weight: 700;
  color: var(--ink-3); letter-spacing: .5px; margin-bottom: var(--s-2);
}
.input {
  width: 100%; min-height: 52px; padding: 0 var(--s-4);
  background: rgba(0,0,0,.30);
  border: 1.5px solid var(--line-1); border-radius: var(--r-md);
  color: var(--ink-1); font-family: inherit; font-size: 16px;
  transition: border-color .2s var(--ease), background .2s, box-shadow .2s;
}
.input::placeholder { color: var(--ink-4); }
.input:focus {
  outline: 0; border-color: var(--line-gold);
  background: rgba(0,0,0,.38);
  box-shadow: 0 0 0 3.5px rgba(245,197,24,.10);
}
.input.err { border-color: var(--danger); box-shadow: 0 0 0 3.5px rgba(255,93,108,.10); }
.hint { font-size: var(--t-xs); color: var(--ink-4); margin-top: var(--s-2); line-height: 1.7; }
.err-msg { font-size: var(--t-sm); color: var(--danger); margin-top: var(--s-2); }

/* ── نوار پیشرفت ────────────────────────────────────────────────── */
.steps { display: flex; gap: 5px; margin-bottom: var(--s-6); }
.steps i {
  flex: 1; height: 3px; border-radius: 99px;
  background: var(--surface-3);
  transition: background .45s var(--ease), box-shadow .45s;
}
.steps i.done { background: var(--gold-700); }
.steps i.now  {
  background: linear-gradient(90deg, var(--gold-300), var(--gold-700));
  box-shadow: 0 0 10px var(--gold-glow);
}

/* ── فهرست ──────────────────────────────────────────────────────── */
.list { margin: 0; padding: 0; list-style: none; }
.list li {
  position: relative; padding-inline-start: var(--s-5);
  font-size: var(--t-md); line-height: 1.95; color: var(--ink-2);
}
.list li::before {
  content: ''; position: absolute; inset-inline-start: 4px; top: 13px;
  width: 5px; height: 5px; border-radius: 99px; background: var(--gold-500);
}

/* ── داک ────────────────────────────────────────────────────────── */
.dock {
  position: fixed; inset: auto 0 0; z-index: 40;
  padding: var(--s-4) var(--s-4) calc(var(--s-4) + var(--safe-b));
  background: linear-gradient(180deg, transparent, var(--bg-0) 42%);
}
.dock-in { max-width: 460px; margin: 0 auto; }

/* ── حرکت ───────────────────────────────────────────────────────── */
.fade { animation: fade .42s var(--ease) both; }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } }
/* ستون با فاصله: کارت‌ها دیگر به هم نمی‌چسبند (گزارش کاربر: «همه چی بهم چسبیده») */
.stagger { display: flex; flex-direction: column; gap: var(--s-4); }
.stagger > * { animation: fade .42s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: .04s; }
.stagger > *:nth-child(2) { animation-delay: .10s; }
.stagger > *:nth-child(3) { animation-delay: .16s; }
.stagger > *:nth-child(4) { animation-delay: .22s; }

.spin { width: 17px; height: 17px; border-radius: 99px;
        border: 2px solid rgba(0,0,0,.22); border-top-color: rgba(0,0,0,.72);
        animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── کد ─────────────────────────────────────────────────────────── */
.code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
  direction: ltr; text-align: left; word-break: break-all;
  background: rgba(0,0,0,.34); border: 1px solid var(--line-1);
  border-radius: var(--r-sm); padding: var(--s-3);
  color: var(--ink-2);
}
.mono { font-family: var(--mono); direction: ltr; text-align: left; unicode-bidi: plaintext; }

/* ═══════════════════════════════════════════════════════════════════
   هدر، منو، و پروفایل
   ═══════════════════════════════════════════════════════════════════ */

.app-head {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  margin: calc(var(--s-5) * -1) calc(var(--s-4) * -1) var(--s-4);
  background: rgba(4,9,16,.82);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom: 1px solid var(--line-1);
}
.brand { display: flex; align-items: center; gap: var(--s-2); flex: 1; min-width: 0; }
.brand-mark {
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-size: 16px; font-weight: 800;
  color: #1b1400;
  background: linear-gradient(150deg, var(--gold-100), var(--gold-700));
  box-shadow: 0 3px 12px var(--gold-glow);
}
.brand-name { font-size: var(--t-md); font-weight: 800; color: var(--ink-1); letter-spacing: -.2px; }
.brand-sub  { font-size: var(--t-xs); color: var(--ink-4); margin-top: -2px; }

.avatar {
  width: 34px; height: 34px; flex: none; border-radius: 99px;
  display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-1);
  background: var(--surface-3); border: 1px solid var(--line-2);
}

/* ── منوی پایین ─────────────────────────────────────────────────── */
.nav {
  display: flex; gap: 4px; padding: 5px;
  background: var(--surface-2); border: 1px solid var(--line-1);
  border-radius: var(--r-md); box-shadow: var(--e-2);
}
.nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border: 0; border-radius: 11px;
  background: transparent; color: var(--ink-3);
  font-family: inherit; font-size: var(--t-xs); font-weight: 700;
  cursor: pointer; transition: background .18s var(--ease), color .18s;
}
.nav button i { font-style: normal; font-size: 17px; line-height: 1; }
.nav button[aria-current="true"] {
  background: linear-gradient(150deg, rgba(245,197,24,.16), rgba(245,197,24,.05));
  color: var(--gold-300);
}

/* ── ردیف داده ──────────────────────────────────────────────────── */
.row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0; border-bottom: 1px solid rgba(255,255,255,.045);
}
.row:last-child { border-bottom: 0; }
.row-k { font-size: var(--t-sm); color: var(--ink-3); }
.row-v { font-size: var(--t-md); font-weight: 600; color: var(--ink-1); text-align: left; }

/* ── حلقه‌ی زمان باقی‌مانده ─────────────────────────────────────── */
.ring { display: grid; place-items: center; position: relative; width: 132px; height: 132px; margin: 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring-bg { stroke: var(--surface-3); }
.ring-fg { stroke: url(#g); stroke-linecap: round; transition: stroke-dashoffset .9s var(--ease); }
.ring-in { position: absolute; text-align: center; }
.ring-n  { font-size: 30px; font-weight: 800; line-height: 1; color: var(--ink-1); letter-spacing: -1px; }
.ring-l  { font-size: var(--t-xs); color: var(--ink-3); margin-top: 3px; }

/* ── نوار پیشرفت خطی ────────────────────────────────────────────── */
.meter { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 99px;
           background: linear-gradient(90deg, var(--gold-300), var(--gold-700)); }
.meter.warn i { background: linear-gradient(90deg, var(--warn), #e08a00); }
.meter.danger i { background: linear-gradient(90deg, var(--danger), #c23444); }

/* ── کانال دروازه ───────────────────────────────────────────────── */
.gate-ch {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); margin-bottom: var(--s-3);
  background: var(--surface-1); border: 1px solid var(--line-1);
  border-radius: var(--r-md);
}
.gate-ch.done { border-color: rgba(31,217,138,.3); background: rgba(31,217,138,.06); }

/* ── حالت خالی ──────────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--s-8) var(--s-4); color: var(--ink-4); }
.empty-icon { font-size: 40px; margin-bottom: var(--s-3); opacity: .5; }

/* ── لیست پرداخت ────────────────────────────────────────────────── */
.pay {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3); border-radius: var(--r-sm);
  background: var(--surface-1); margin-bottom: var(--s-2);
  border: 1px solid var(--line-1);
}

/* ═══════════════════════════════════════════════════════════════════
   دروازه‌ی عضویت، صف انتظار، پیام وضعیت
   ═══════════════════════════════════════════════════════════════════ */

.rich strong { color: var(--ink-1); font-weight: 700; }

.hero { text-align: center; padding: var(--s-2) 0 var(--s-4); }
.orb {
  width: 96px; height: 96px; margin: var(--s-2) auto var(--s-5);
  display: grid; place-items: center; font-size: 42px; border-radius: 30px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,233,138,.38), transparent 58%),
    linear-gradient(150deg, rgba(245,197,24,.22), rgba(74,168,255,.12));
  border: 1px solid var(--line-gold);
  box-shadow: 0 12px 42px rgba(245,197,24,.18), inset 0 1px 0 rgba(255,255,255,.22);
}

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin: 0 0 var(--s-5); }
.steps3 span {
  text-align: center; font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3);
  padding: var(--s-3) var(--s-2); border-radius: var(--r-sm);
  background: var(--surface-1); border: 1px solid var(--line-1);
}
.steps3 b {
  display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto 6px;
  border-radius: 99px; font-size: 12.5px; color: #1b1400;
  background: linear-gradient(150deg, var(--gold-100), var(--gold-700));
}

.gate-av {
  width: 46px; height: 46px; flex: none; border-radius: 15px;
  display: grid; place-items: center; font-size: 19px; font-weight: 800; color: #1b1400;
  background: linear-gradient(150deg, var(--gold-100), var(--gold-700));
  box-shadow: 0 4px 16px var(--gold-glow);
}
.gate-ch.done .gate-av { background: linear-gradient(150deg, #9af3cc, var(--success)); box-shadow: none; }
.gate-ch .btn { width: auto; min-height: 42px; padding: 0 var(--s-5); }

.notice { border-radius: var(--r-md); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); line-height: 1.7; margin-top: var(--s-3); white-space: pre-line; }
.notice-warn   { background: rgba(255,181,71,.08); border: 1px solid rgba(255,181,71,.28); color: var(--warn); }
.notice-danger { background: rgba(255,93,108,.08); border: 1px solid rgba(255,93,108,.28); color: var(--danger); }
.notice-ok     { background: rgba(31,217,138,.08); border: 1px solid rgba(31,217,138,.28); color: var(--success); }

.wait { text-align: center; }
.wait-orbit { position: relative; width: 156px; height: 156px; margin: var(--s-3) auto var(--s-6); }
.wait-orbit::before, .wait-orbit::after {
  content: ''; position: absolute; border-radius: 99px; border: 2.5px solid transparent;
}
.wait-orbit::before {
  inset: 0; border-top-color: var(--gold-500); border-right-color: rgba(245,197,24,.28);
  animation: spin 1.9s linear infinite;
}
.wait-orbit::after {
  inset: 18px; border-bottom-color: var(--accent); border-left-color: rgba(74,168,255,.26);
  animation: spin 2.8s linear infinite reverse;
}
.wait-core {
  position: absolute; inset: 36px; border-radius: 99px;
  display: grid; place-content: center; text-align: center;
  background: radial-gradient(circle, rgba(245,197,24,.16), transparent 72%);
}
.wait-core b { font-size: 32px; font-weight: 800; color: var(--ink-1); line-height: 1; }
.wait-core small { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 5px; }
.wait-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
.wait-stat { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line-1); }
.wait-stat b { display: block; font-size: var(--t-lg); font-weight: 800; color: var(--gold-300); }
.wait-stat span { font-size: var(--t-xs); color: var(--ink-3); }
.wait-bar { height: 4px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: var(--s-3); }
.wait-bar i { display: block; height: 100%; border-radius: 99px;
              background: linear-gradient(90deg, var(--gold-300), var(--gold-700)); transition: width 1s linear; }

.skel { border-radius: var(--r-md); background: linear-gradient(90deg, var(--surface-1), var(--surface-3), var(--surface-1));
        background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; }
@keyframes skel { to { background-position: -200% 0; } }


/* ═══════════════════════════════════════════════════════════════════
   حساب کاربری — سرفصل، ردیف داده، پرداخت‌ها   (۲۰۲۶-۰۹-۱۶)
   ═══════════════════════════════════════════════════════════════════ */

/* سرفصل بخش داخل کارت */
.sec-t {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-4); font-size: var(--t-md); font-weight: 700; color: var(--ink-1);
}
.sec-t > span { font-size: var(--t-xs); font-weight: 500; color: var(--ink-4); }

/* شناسه‌ی کاربر */
.pro-id { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.pro-av {
  width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center;
  font-size: 19px; font-weight: 800; color: #1b1400;
  background: linear-gradient(150deg, var(--gold-100), var(--gold-700));
  box-shadow: 0 5px 18px var(--gold-glow);
}
.pro-id-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pro-id-b strong { font-size: var(--t-md); color: var(--ink-1); font-weight: 700;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-id-b span { font-size: var(--t-xs); color: var(--ink-4); }

/* کارت اشتراک */
.pro-sub { text-align: center; padding: var(--s-4) 0 var(--s-2); }
.pro-sub .ring { margin-bottom: var(--s-4); }
.pro-meta {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-3);
}
.pro-life { padding: var(--s-6) 0 var(--s-4); text-align: center; }
.pro-life i { font-style: normal; font-size: 48px; line-height: 1; display: block; margin-bottom: var(--s-3); }
.pro-life strong { display: block; color: var(--ink-1); font-size: var(--t-lg); margin-bottom: var(--s-3); }

/* ردیف‌های داده با فاصله‌ی نفس‌گیر */
.kv { display: flex; flex-direction: column; }
.kv-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line-1); min-height: 46px;
}
.kv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-row:first-child { padding-top: 0; }
.kv-k { font-size: var(--t-sm); color: var(--ink-3); flex: none; }
.kv-v { font-size: var(--t-md); font-weight: 600; color: var(--ink-1); text-align: end;
        min-width: 0; overflow-wrap: anywhere; }

/* پرداخت‌ها */
.pay + .pay { margin-top: var(--s-2); }
.pay { padding: var(--s-4); }
.pay-a { display: block; font-size: var(--t-md); font-weight: 700; color: var(--ink-1); margin-bottom: 3px; }
.pay-t { font-size: var(--t-xs); color: var(--ink-4); }
.pay-s { text-align: end; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

/* دکمه‌های داخل کارت: همیشه فاصله از متن بالا */
.card > .btn:first-child { margin-top: 0; }
.card .btn + .btn { margin-top: var(--s-3); }

/* ═══════════════════════════════════════════════════════════════════
   لایه‌ی حرکت و جلا   (۲۰۲۶-۰۹-۱۶)
   قاعده: هر انیمیشن یک‌بار اجرا می‌شود و تمام؛ هیچ دکوری تا ابد حرکت
   نمی‌کند (باتری گوشی). prefers-reduced-motion همه را خاموش می‌کند.
   ═══════════════════════════════════════════════════════════════════ */

:root { --spring: cubic-bezier(.34, 1.36, .64, 1); }

/* ورود نرم‌تر صفحه‌ها: کمی بزرگ‌نمایی + بلورِ کوتاه */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* backwards، نه both: بعد از پایان ورود هیچ مقداری نگه داشته نمی‌شود. «both»
   مقدار نهایی (transform/filter) را قفل می‌کرد؛ هم قاعده‌های بعدی مثل مات‌شدن
   پس‌زمینه را خنثی می‌کرد، هم برای فرزندان fixed یک containing block می‌ساخت. */
.fade, .stagger > * { animation: rise .52s var(--ease) backwards; }
.stagger > *:nth-child(5) { animation-delay: .28s; }
.stagger > *:nth-child(6) { animation-delay: .34s; }

/* نوار مراحل: پر شدن روان */
.steps i { transition: background .45s var(--ease), transform .45s var(--ease), box-shadow .45s; }
.steps i.now { transform: scaleY(1.35); box-shadow: 0 0 12px var(--gold-glow); }

/* کارت پلن: بلند شدن ملایم روی دستگاه‌های دارای ماوس، فشار روی لمس */
@media (hover: hover) {
  .plan:not([disabled]):hover { transform: translateY(-2px); border-color: var(--line-2); }
}
.plan[aria-pressed="true"] { animation: pick .38s var(--spring); }
@keyframes pick { 40% { transform: scale(1.018); } }

/* درخشش یک‌باره روی دکمه‌ی اصلی — توجه را جلب می‌کند، بعد آرام می‌گیرد */
.btn.shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 66%);
  transform: translateX(120%); animation: sheen 1.5s .55s var(--ease) 1 both;
}
@keyframes sheen { to { transform: translateX(-120%); } }

/* دکمه‌ی شفاف (شیشه‌ای) */
.btn-glass {
  color: var(--ink-1);
  background: linear-gradient(160deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 30px rgba(0,0,0,.28);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.btn-glass:active:not(:disabled) { background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.07)); }

.ok-pulse { animation: okp .5s var(--spring); color: var(--success) !important; }
@keyframes okp { 45% { transform: scale(1.03); } }

/* ── صفحه‌ی پایانی ───────────────────────────────────────────────── */
.done-hero { padding-top: var(--s-2); }
.done-mark { width: 84px; height: 84px; margin: var(--s-3) auto var(--s-4); }
.done-mark svg { width: 100%; height: 100%; overflow: visible; }
.done-mark circle {
  fill: rgba(31,217,138,.10); stroke: var(--success); stroke-width: 3;
  stroke-dasharray: 176; stroke-dashoffset: 176;
  animation: draw .7s .1s var(--ease) forwards, halo 1.2s .7s ease-out 1;
  transform-origin: center;
}
.done-mark path {
  fill: none; stroke: var(--success); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s .65s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes halo { 0% { filter: drop-shadow(0 0 0 rgba(31,217,138,.6)); } 60% { filter: drop-shadow(0 0 14px rgba(31,217,138,.45)); } 100% { filter: none; } }

/* عضو شد: پس‌زمینه مات، کارت روی آن شناور.
   پرده‌ی fixed اینجا جواب نمی‌داد: والدِ متحرکِ کارت (transform با fill-mode)
   یک containing block می‌سازد و پرده فقط همان جعبه را می‌پوشاند، نه صفحه را.
   پس خودِ محتوای پشت کارت را مات و تیره می‌کنیم — بدون بازی با z-index. */
body.vip-focus .app-head,
body.vip-focus .steps,
body.vip-focus .done-hero {
  filter: blur(6px) saturate(.75) brightness(.45);
  transition: filter .6s var(--ease);
}
body.vip-focus::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 90% at 50% 58%, rgba(4,9,16,.15), rgba(2,5,10,.82));
  animation: veil-in .6s var(--ease) both;
}
@keyframes veil-in { from { opacity: 0; } }
.vip-sheet {
  position: relative; z-index: 31; text-align: center;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-color: rgba(31,217,138,.28);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation: sheet-in .55s .08s var(--spring) both;
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }
.vip-ok {
  width: 58px; height: 58px; margin: 0 auto var(--s-4); border-radius: 20px;
  display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #04110b;
  background: linear-gradient(150deg, #9af3cc, var(--success));
  box-shadow: 0 10px 28px rgba(31,217,138,.32);
  animation: pop .5s .3s var(--spring) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } }
.vip-title { display: block; color: var(--ink-1); font-size: var(--t-lg); margin-bottom: var(--s-2); }
.vip-text { font-size: var(--t-sm); color: var(--ink-3); margin: 0 0 var(--s-5); line-height: 1.8; }

/* ── پرداخت ────────────────────────────────────────────────────── */
.pay-hero { text-align: center; }
.pay-amount { justify-content: center; margin: var(--s-2) 0 var(--s-3); }
.pay-amount .price-n { font-size: 48px; }
.pay-amount .price-u { font-size: var(--t-md); }
.chips { display: flex; gap: var(--s-2); justify-content: center; flex-wrap: wrap; }

/* قاب QR: حاشیه‌ی طلایی گرادیانی، گوشه‌های براکتی، اسکن یک‌باره */
.qr-card { text-align: center; }
.qr-frame {
  position: relative; width: min(236px, 72vw); margin: var(--s-2) auto var(--s-4);
  padding: 14px; border-radius: 26px;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(150deg, var(--gold-100), var(--gold-700) 45%, rgba(74,168,255,.55)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 16px 44px rgba(0,0,0,.4), 0 0 38px rgba(245,197,24,.10);
  animation: qr-in .6s .15s var(--spring) both;
}
@keyframes qr-in { from { opacity: 0; transform: scale(.9) rotate(-2deg); } }
.qr-inner { position: relative; border-radius: 16px; overflow: hidden; background: #fff; line-height: 0; }
.qr-inner svg { width: 100%; height: auto; display: block; }
.qr-inner img.qr-img { width: 100%; height: auto; display: block; }
.qr-scan {
  position: absolute; inset-inline: 0; top: 0; height: 26%;
  background: linear-gradient(180deg, transparent, rgba(245,197,24,.28) 70%, rgba(245,197,24,.75));
  mix-blend-mode: multiply; pointer-events: none; opacity: 0;
  animation: scan 1.7s .75s var(--ease) 1 both;
}
@keyframes scan { 0% { opacity: 0; transform: translateY(-100%); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(390%); } }
.qc { position: absolute; width: 22px; height: 22px; border: 3px solid var(--gold-300); z-index: 2; }
.qc.tl { top: -7px;    left: -7px;  border-width: 3px 0 0 3px; border-radius: 12px 0 0 0; }
.qc.tr { top: -7px;    right: -7px; border-width: 3px 3px 0 0; border-radius: 0 12px 0 0; }
.qc.bl { bottom: -7px; left: -7px;  border-width: 0 0 3px 3px; border-radius: 0 0 0 12px; }
.qc.br { bottom: -7px; right: -7px; border-width: 0 3px 3px 0; border-radius: 0 0 12px 0; }
.qr-hint { font-size: var(--t-xs); color: var(--ink-4); margin: 0; line-height: 1.8; }

@media (prefers-reduced-motion: reduce) {
  .fade, .stagger > *, .btn.shine::after, .qr-frame, .qr-scan, .vip-sheet, .vip-ok,
  .done-mark circle, .done-mark path, .plan[aria-pressed="true"], .ok-pulse, body.vip-focus::after {
    animation: none !important;
  }
  .done-mark circle, .done-mark path { stroke-dashoffset: 0; }
}

/* کارت‌ها روی پس‌زمینه‌ی ساکن می‌نشینند؛ بلورِ پشت‌شان دیده نمی‌شد ولی روی
   گوشی هر اسکرول GPU و باتری می‌خورد. فقط دکمه‌ی شیشه‌ای و پرده‌ی مات بلور دارند. */
.card { backdrop-filter: none; -webkit-backdrop-filter: none; }


/* ═══════════════════════════════════════════════════════════════════
   لوگوی ترید سنتر   (۲۰۲۶-۰۹-۱۶)
   ═══════════════════════════════════════════════════════════════════ */
.brand-mark { overflow: hidden; padding: 0; background: #0b1a2c;
              border: 1px solid var(--line-gold); box-shadow: 0 3px 14px var(--gold-glow); }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.18); }

/* قفل صفحه‌ی عضویت اجباری: لوگو با نشان قفل */
.orb-logo { position: relative; padding: 0; overflow: visible; background: #0b1a2c; }
.orb-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; transform: scale(1.02); }
.orb-lock {
  position: absolute; inset-inline-end: -8px; bottom: -8px; width: 34px; height: 34px;
  display: grid; place-items: center; font-size: 16px; border-radius: 12px;
  background: linear-gradient(150deg, var(--gold-100), var(--gold-700));
  box-shadow: 0 6px 16px rgba(0,0,0,.4); animation: pop .5s .35s var(--spring) both;
}

/* نمای شروع تا رسیدن پاسخ سرور */
.boot { min-height: 64vh; display: grid; place-content: center; justify-items: center; gap: var(--s-3); }
.boot-logo {
  width: 92px; height: 92px; border-radius: 28px; object-fit: cover;
  border: 1px solid var(--line-gold);
  box-shadow: 0 18px 48px rgba(0,0,0,.5), 0 0 44px rgba(245,197,24,.14);
  animation: rise .6s var(--ease) backwards;
}
.boot-name { font-size: var(--t-lg); font-weight: 800; color: var(--ink-1); letter-spacing: -.2px;
             animation: rise .6s .12s var(--ease) backwards; }
.boot-spin { width: 20px; height: 20px; margin-top: var(--s-2);
             border-color: rgba(255,255,255,.14); border-top-color: var(--gold-500); }

@media (prefers-reduced-motion: reduce) {
  .orb-lock, .boot-logo, .boot-name { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   عمق، بارگذاری و حرکت — نسخه‌ی ۱۹   (۲۰۲۶-۰۹-۱۷)
   همان قاعده‌ها: انیمیشن تزئینی یک‌بار اجرا می‌شود؛ فقط نشانگرهای بارگذاری تا وقتی
   واقعاً درخواستی در راه است حرکت می‌کنند؛ روی کارت‌ها هیچ backdrop-filter نیست.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --card-top: #0f1b2b;
  --card-bot: #09121e;
  --edge: rgba(255,255,255,.13);
  --edge-soft: rgba(255,255,255,.03);
  --lift: 0 1px 0 rgba(255,255,255,.05) inset, 0 22px 44px -24px rgba(0,0,0,.8), 0 2px 8px rgba(0,0,0,.28);
  --lift-hi: 0 1px 0 rgba(255,255,255,.08) inset, 0 26px 52px -24px rgba(0,0,0,.85),
             0 14px 34px -14px rgba(245,197,24,.30);
}

/* ── آیکون ──────────────────────────────────────────────────────── */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
       stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 15px; height: 15px; vertical-align: -2.5px; }
.tag .ico-sm { vertical-align: 0; }

/* ── کارت: لبه‌ی گرادیانی، نور بالا، سایه‌ی بلند ─────────────────── */
.card, .plan {
  background:
    linear-gradient(172deg, var(--card-top), var(--card-bot)) padding-box,
    linear-gradient(165deg, var(--edge), var(--edge-soft) 40%, rgba(245,197,24,.09)) border-box;
  border: 1px solid transparent;
  box-shadow: var(--lift);
}
.card-hero {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(245,197,24,.10), transparent 62%) padding-box,
    linear-gradient(172deg, var(--card-top), var(--card-bot)) padding-box,
    linear-gradient(165deg, rgba(245,197,24,.34), var(--edge-soft) 45%, rgba(255,255,255,.07)) border-box;
}

.sec-h { display: inline-flex; align-items: center; gap: 8px; }
.sec-h .ico { color: var(--gold-300); }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow::before {
  content: ''; width: 16px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--gold-700), var(--gold-300));
}
.hero .eyebrow { justify-content: center; }

/* ── کارت پلن ───────────────────────────────────────────────────── */
.plan { position: relative; overflow: hidden; }
.plan[aria-pressed="true"] {
  background:
    radial-gradient(90% 70% at 90% 0%, rgba(245,197,24,.15), transparent 65%) padding-box,
    linear-gradient(172deg, #13202f, var(--card-bot)) padding-box,
    linear-gradient(160deg, var(--gold-100), var(--gold-700) 45%, rgba(245,197,24,.22)) border-box;
  box-shadow: var(--lift-hi);
  transform: translateY(-2px);
}
.plan[disabled] { opacity: .45; filter: saturate(.55); }
.plan-mark {
  color: var(--gold-300);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .3s var(--ease), color .3s;
}
.plan-mark .ico { width: 22px; height: 22px; }
.plan[aria-pressed="true"] .plan-mark { color: #1b1400; }
.plan-check {
  position: absolute; top: var(--s-4); inset-inline-end: var(--s-4);
  width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center;
  color: #1b1400; background: linear-gradient(150deg, var(--gold-100), var(--gold-700));
  box-shadow: 0 4px 12px var(--gold-glow);
  transform: scale(.3) rotate(-20deg); opacity: 0;
  transition: transform .4s var(--spring), opacity .2s var(--ease);
}
.plan-check .ico { width: 15px; height: 15px; stroke-width: 2.8; }
.plan[aria-pressed="true"] .plan-check { transform: none; opacity: 1; }
.plan-lock { display: flex; align-items: center; gap: 6px; color: var(--warn); margin-bottom: var(--s-3); }

/* ── دکمه: عمق، فشار، موج ───────────────────────────────────────── */
.btn { isolation: isolate; }
.btn > :not(.ripple) { position: relative; z-index: 1; }
.btn .ico { width: 19px; height: 19px; }
.btn-primary {
  background: linear-gradient(180deg, #ffec96 0%, #f8d24a 38%, #e9b72c 72%, #cf9a1c 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -2px 0 rgba(110,72,0,.30) inset,
              0 12px 26px -10px rgba(245,197,24,.58), 0 2px 5px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(255,246,205,.45);
  transition: transform .16s var(--ease), box-shadow .2s var(--ease), filter .2s, opacity .2s;
}
.btn-primary:active:not(:disabled) {
  transform: translateY(1px) scale(.985);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 -1px 0 rgba(110,72,0,.26) inset,
              0 5px 12px -6px rgba(245,197,24,.5), 0 1px 2px rgba(0,0,0,.3);
}
.btn-ghost {
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 8px 18px -10px rgba(0,0,0,.7);
  transition: transform .16s var(--ease), border-color .2s, background .2s;
}
.btn-ghost .ico { color: var(--gold-300); }
@media (hover: hover) {
  .btn-primary:not(:disabled):hover { filter: brightness(1.05); transform: translateY(-1px); }
  .btn-ghost:not(:disabled):hover { border-color: rgba(245,197,24,.30); }
}
.btn-sm {
  width: auto; min-height: 40px; padding: 0 var(--s-4); gap: 6px;
  font-size: var(--t-sm); border-radius: 12px; flex: none;
}
.btn-sm .ico { width: 16px; height: 16px; }

/* در حال انجام: روشن می‌ماند (نه کم‌رنگِ غیرفعال)، با درخشش گذرا */
.btn[aria-busy="true"] { opacity: 1; cursor: progress; filter: none; }
.btn[aria-busy="true"]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.30) 50%, transparent 75%);
  background-size: 220% 100%;
  animation: sweep 1.15s linear infinite;
}
@keyframes sweep { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.btn-ghost .spin, .btn-glass .spin { border-color: rgba(255,255,255,.18); border-top-color: var(--gold-300); }

.ripple {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.32) 0%, rgba(255,255,255,.10) 38%, transparent 62%);
  transform: scale(0);
  animation: ripple .62s var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ── منو با نشانگر لغزان ────────────────────────────────────────── */
.nav {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--lift);
}
.nav-pill {
  position: absolute; top: 5px; bottom: 5px; inset-inline-start: 5px; z-index: 0;
  width: calc((100% - 10px - (var(--n, 2) - 1) * 4px) / var(--n, 2));
  border-radius: 11px;
  background: linear-gradient(160deg, rgba(245,197,24,.24), rgba(245,197,24,.06));
  box-shadow: inset 0 0 0 1px rgba(245,197,24,.30), 0 8px 18px -10px rgba(245,197,24,.55);
  transform: translateX(calc(var(--i, 0) * (100% + 4px) * -1));
  transition: transform .44s var(--spring);
}
.nav button { position: relative; z-index: 1; overflow: hidden; }
.nav button,
.nav button[aria-current="true"] { background: transparent; }
.nav button .ico { width: 19px; height: 19px; }
.nav button[aria-current="true"] { color: var(--gold-100); }

/* ── نوار بارگذاری سراسری ───────────────────────────────────────── */
.loadbar {
  position: fixed; inset: 0 0 auto; height: 2.5px; z-index: 60; overflow: hidden;
  pointer-events: none; opacity: 0; transition: opacity .25s var(--ease);
}
.loadbar i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
  background: linear-gradient(90deg, transparent, var(--gold-300), var(--gold-500), transparent);
  box-shadow: 0 0 10px var(--gold-glow);
}
body.net-busy .loadbar { opacity: 1; }
body.net-busy .loadbar i { animation: loadbar 1.1s var(--ease) infinite; }
@keyframes loadbar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

/* ── پیش‌بارگذار شروع ───────────────────────────────────────────── */
.boot { min-height: 70vh; gap: var(--s-3); }
.boot-mark { position: relative; width: 132px; height: 132px; display: grid; place-items: center;
             margin-bottom: var(--s-2); animation: rise .6s var(--ease) backwards; }
.boot-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.boot-track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 2.5; }
.boot-arc {
  fill: none; stroke: var(--gold-500); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 352; stroke-dashoffset: 260;
  transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(245,197,24,.45));
  animation: boot-arc 1.5s var(--ease) infinite;
}
@keyframes boot-arc {
  0%   { stroke-dashoffset: 330; transform: rotate(-90deg); }
  50%  { stroke-dashoffset: 150; }
  100% { stroke-dashoffset: 330; transform: rotate(270deg); }
}
.boot-logo { width: 96px; height: 96px; border-radius: 30px; animation: none; }
.boot-status { min-height: 1.8em; font-size: var(--t-sm); color: var(--ink-3); }
.boot-status.swap { animation: rise .4s var(--ease) backwards; }
.boot-dots { display: flex; gap: 6px; margin-top: var(--s-1); }
.boot-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--gold-500); opacity: .25;
               animation: boot-dot 1.2s ease-in-out infinite; }
.boot-dots i:nth-child(2) { animation-delay: .15s; }
.boot-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes boot-dot { 40% { opacity: 1; transform: translateY(-3px); } }

/* ── اسکلت‌ها: هم‌شکل صفحه‌ی واقعی ──────────────────────────────── */
.skel {
  background: linear-gradient(100deg, rgba(255,255,255,.035) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.035) 70%);
  background-size: 220% 100%;
  animation: sweep 1.3s linear infinite;
}
.sk { display: flex; flex-direction: column; gap: var(--s-4); }
.sk-id { display: flex; align-items: center; gap: var(--s-3); }
.sk-av { width: 46px; height: 46px; border-radius: 15px; flex: none; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.sk-l1 { height: 14px; width: 55%; border-radius: 6px; }
.sk-l2 { height: 10px; width: 34%; border-radius: 6px; }
.sk-tag { width: 54px; height: 24px; border-radius: 7px; flex: none; }
.sk-ring { width: 132px; height: 132px; border-radius: 99px; margin: var(--s-2) auto 0; }
.sk-meta { width: 48%; height: 12px; margin: 0 auto; border-radius: 6px; }
.sk-title { width: 32%; height: 14px; border-radius: 6px; }
.sk-kv { display: flex; justify-content: space-between; gap: var(--s-4); }
.sk-kv .skel { height: 12px; border-radius: 6px; }
.sk-kv .skel:first-child { width: 26%; }
.sk-kv .skel:last-child { width: 40%; }

/* ── حالت‌ها (خطا، خالی) ───────────────────────────────────────── */
.state-ico {
  width: 56px; height: 56px; margin: 0 auto var(--s-3); border-radius: 18px;
  display: grid; place-items: center; color: var(--ink-3);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
.state-ico .ico { width: 26px; height: 26px; }
.state-ico-danger { color: var(--danger); background: rgba(255,93,108,.07); border-color: rgba(255,93,108,.24); }
.state-ico-lg { width: 76px; height: 76px; border-radius: 26px; }
.state-ico-lg .ico { width: 34px; height: 34px; }
.empty .state-ico { opacity: .7; }

/* ── دروازه‌ی عضویت ─────────────────────────────────────────────── */
.orb-lock .ico { width: 17px; height: 17px; color: #1b1400; stroke-width: 2.2; }
.steps3 { list-style: none; padding: 0; }
.steps3 li {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-3);
  padding: var(--s-3) var(--s-2); border-radius: var(--r-sm);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.07);
}
.steps3 b { margin: 0; }
.steps3 li span { padding: 0; background: none; border: 0; border-radius: 0; font-size: inherit; color: inherit; }
.gate-card { display: flex; flex-direction: column; gap: var(--s-3); }
.gate-progress { display: grid; gap: 8px; }
.gate-progress > span { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 700; color: var(--ink-3); }
.gate-progress .ico { color: var(--gold-300); }
.gate-progress .meter i { transition: width .7s var(--ease); }
.gate-ch {
  position: relative; overflow: hidden; margin: 0;
  background: rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.07);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.gate-ch.opened { border-color: rgba(245,197,24,.30); background: rgba(245,197,24,.05); }
/* دکمه‌ی کانال در ردیف دوم: نام کانال و وضعیت جا دارند و دکمه برای لمس بزرگ است */
.gate-ch { flex-wrap: wrap; row-gap: var(--s-3); }
.gate-ch .btn-sm { flex: 1 1 100%; min-height: 44px; }
.gate-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gate-info strong { color: var(--ink-1); font-size: var(--t-md); line-height: 1.5; overflow: hidden;
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gate-info .mono { font-size: var(--t-xs); color: var(--ink-4); align-self: flex-start; }
.gate-wait { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-xs); font-weight: 700; color: var(--gold-300); }
.gate-av .ico { width: 22px; height: 22px; stroke-width: 2; }
.gate-ch.checking::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(245,197,24,.12) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: sweep 1.2s linear infinite;
}
.gate-ch.done { animation: pick .45s var(--spring); }
.gate-hint { margin: 0; text-align: center; }
.gate-ok {
  min-height: 58vh; display: grid; place-content: center; justify-items: center; text-align: center;
  animation: rise .5s var(--ease) backwards;
}

/* ── حرکت بین مراحل: جهت‌دار، و فقط وقتی صفحه عوض می‌شود ─────────── */
#view.still .fade, #view.still .stagger > * { animation: none; }
#view[data-dir="fwd"]  .fade, #view[data-dir="fwd"]  .stagger > * { animation-name: in-fwd; }
#view[data-dir="back"] .fade, #view[data-dir="back"] .stagger > * { animation-name: in-back; }
/* راست‌به‌چپ: مرحله‌ی بعد از سمت چپ وارد می‌شود */
@keyframes in-fwd  { from { opacity: 0; transform: translateX(-24px); } }
@keyframes in-back { from { opacity: 0; transform: translateX(24px); } }
.steps i.now { animation: step-now .7s var(--ease); }
@keyframes step-now { from { transform: scaleY(1) ; box-shadow: none; } 50% { transform: scaleY(1.9); } }

@media (prefers-reduced-motion: reduce) {
  .ripple, .boot-status.swap, .boot-mark, .gate-ok, .gate-ch.done, .steps i.now,
  #view[data-dir] .fade, #view[data-dir] .stagger > * { animation: none !important; }
  .nav-pill, .plan-check { transition: none !important; }
  .boot-arc { animation: none; stroke-dashoffset: 250; }
  .boot-dots i { animation: none; opacity: .6; }
  body.net-busy .loadbar i { animation: none; width: 100%; opacity: .6; }
  .btn[aria-busy="true"]::before, .skel, .gate-ch.checking::after { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════════
   فوتر سازنده — مشعل استودیو   (۲۰۲۶-۰۹-۱۷، نسخه‌ی ۲۲)
   یک خط ریز و کم‌رنگ؛ متن‌ها خودشان لینک‌اند. متن فارسی و دکمه‌ها از پنل روشن می‌شوند.
   ═══════════════════════════════════════════════════════════════════ */
.credit {
  display: grid; justify-items: center; gap: var(--s-2); text-align: center;
  margin-top: var(--s-8); padding-top: var(--s-3);
  position: relative;
}
.credit::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 44px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(245,197,24,.35), transparent);
}
.credit:empty { display: none; }
.credit-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); width: 100%; flex-wrap: wrap;
}

/* نام سازنده = دکمه. زیرخط و پیکان عمدی‌اند تا حتی وقتی دکمه‌های گرد
   خاموش‌اند، کاربر بفهمد اینجا کلیک می‌شود. */
.credit-brand {
  appearance: none; border: 0; background: none; margin: 0; cursor: pointer;
  flex: 1 1 180px; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 5px 8px; border-radius: 99px;
  font-family: inherit; font-size: 10.5px; font-weight: 500; line-height: 1.4; letter-spacing: .15px;
  color: var(--ink-4);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.credit-brand.is-static { cursor: default; }
.credit-logo { width: 11px; height: 22px; flex: none; display: block; object-fit: contain; }
.credit-names {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; flex-wrap: wrap;
}
.credit-names b {
  font-weight: 700; color: rgba(245,197,24,.82);
  border-bottom: 1px dashed rgba(245,197,24,.45); padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.credit-brand.is-static .credit-names b { border-bottom: 0; }
.credit-sep { width: 3px; height: 3px; border-radius: 99px; background: currentColor; opacity: .35; }
.credit-chev {
  width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: .55; transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.credit-brand.is-static .credit-chev { display: none; }
button.credit-brand:active { color: var(--ink-2); background: rgba(245,197,24,.08); }
button.credit-brand:active .credit-names b { color: var(--gold-300); border-color: var(--gold-300); }
.credit-brand:focus-visible { outline: 1.5px solid var(--gold-300); outline-offset: 2px; }
@media (hover: hover) {
  button.credit-brand:hover { color: var(--ink-3); }
  button.credit-brand:hover .credit-names b { color: var(--gold-300); border-color: var(--gold-300); }
  button.credit-brand:hover .credit-chev { transform: translateX(-2px); opacity: .95; }
}

/* دکمه‌های گردِ ریز */
.credit-dot {
  flex: none; width: 26px; height: 26px; border-radius: 99px; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0;
  color: var(--gold-300);
  background: rgba(245,197,24,.09);
  border: 1px solid rgba(245,197,24,.26);
  transition: transform .16s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.credit-dot .ico { width: 12px; height: 12px; }
.credit-dot:active { transform: scale(.9); }
.credit-dot:focus-visible { outline: 1.5px solid var(--gold-300); outline-offset: 2px; }
@media (hover: hover) {
  .credit-dot:hover { border-color: rgba(245,197,24,.55); background: rgba(245,197,24,.16); transform: translateY(-1px); }
}

/* حالت چسبیده به پایین صفحه — همیشه دیده می‌شود، زیرِ دکمه‌ی اصلی */
.credit.is-fixed {
  position: fixed; inset: auto 0 0; z-index: 41; margin: 0;
  padding: 5px var(--s-4) calc(5px + var(--safe-b));
  background: color-mix(in srgb, var(--bg-0) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-1);
}
.credit.is-fixed::before { display: none; }
.credit.is-fixed .credit-bar { max-width: 460px; margin: 0 auto; }
body.has-fixed-credit .dock { padding-bottom: calc(var(--s-4) + var(--credit-h, 44px)); }
body.has-fixed-credit .shell { padding-bottom: calc(112px + var(--credit-h, 44px) + var(--safe-b)); }

body.vip-focus .credit { filter: blur(6px) saturate(.75) brightness(.45); transition: filter .6s var(--ease); }

/* ── حساب صرافی: انتخاب صرافی و چک‌لیست شرایط ───────────────────── */
.ex-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-3); }
.ex-opt {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; cursor: pointer;
  text-align: start; font-family: inherit; color: var(--ink-2);
  background: rgba(255,255,255,.03); border: 1px solid var(--line-1);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .16s var(--ease);
}
.ex-opt:active { transform: scale(.98); }
.ex-opt.on { border-color: rgba(245,197,24,.55); background: rgba(245,197,24,.08); color: var(--ink-1); }
.ex-mono {
  flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-weight: 800; font-size: 15px; color: #1a1305;
  background: linear-gradient(135deg, var(--gold-300), #b98a12);
  box-shadow: 0 4px 12px rgba(245,197,24,.18);
}
.ex-opt:not(.on) .ex-mono { filter: grayscale(.7) brightness(.8); }
.ex-name { display: grid; line-height: 1.35; min-width: 0; }
.ex-name b { font-size: 14px; }
.ex-name small { font-size: 11px; color: var(--ink-4); letter-spacing: .3px; }
.ex-radio {
  margin-inline-start: auto; flex: none; width: 18px; height: 18px; border-radius: 99px;
  border: 1.5px solid var(--line-2, rgba(255,255,255,.18)); position: relative;
}
.ex-opt.on .ex-radio { border-color: var(--gold-300); }
.ex-opt.on .ex-radio::after {
  content: ''; position: absolute; inset: 3px; border-radius: 99px; background: var(--gold-300);
}

.rules-card .sec-t { display: flex; align-items: center; gap: 6px; }
.rules-card.is-ok { border-color: rgba(74,222,128,.32); }
.rules-card.is-bad { border-color: rgba(248,113,113,.32); }
.rules { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 10px; }
.rule { display: flex; align-items: center; gap: 10px; }
.rule-ico {
  flex: none; position: relative; width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center; color: var(--gold-300);
  background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.2);
}
.rule-ico .ico { width: 16px; height: 16px; }
.rule-ico i {
  position: absolute; top: -5px; inset-inline-start: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 800;
  color: #1a1305; background: var(--gold-300);
}
.rule-text { flex: 1; min-width: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.7; }
.rule-state {
  flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.rule-state .ico { width: 12px; height: 12px; }
.rule-state.ok { color: #4ade80; background: rgba(74,222,128,.1); border: 1px solid rgba(74,222,128,.25); }
.rule-state.bad { color: #f87171; background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); }
.rule-state.later { color: var(--gold-300); background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.25); }
/* پانویس شرایط = هشدار «حذف و غیرقابل برگشت» کارفرما؛ باید دیده شود، نه خاکستری کم‌رنگ */
.rules-note {
  margin: var(--s-3) 0 0; padding: 8px 10px; font-size: 11.5px; line-height: 1.8; color: var(--warn);
  background: rgba(255,181,71,.06); border-inline-start: 2px solid rgba(255,181,71,.55); border-radius: 8px;
}
.unmet {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(245,197,24,.07); border: 1px dashed rgba(245,197,24,.35);
}
.unmet strong { display: block; color: var(--gold-300); margin-bottom: 4px; }
.unmet p { margin: 0; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.8; }
@media (max-width: 360px) { .ex-pick { grid-template-columns: 1fr; } .rule { flex-wrap: wrap; } }