/* =============================================================
   MINIPOLY — سیستم طراحی «فصل اول»
   یک شیت مشترک برای همهٔ صفحه‌ها.
   ترتیب: توکن‌ها → پایه → بافت‌ها → چیدمان → هدر → دکمه‌ها →
   پنل‌ها → تایپوگرافی → فرم‌ها → کامپوننت‌ها → فوتر → ریسپانسیو

   زبان بصری: گرافیک پخش زندهٔ یک لیگ حرفه‌ای.
   مرز مویی، لبهٔ نورِ یک‌پیکسلی، سایهٔ تینت‌شده، یک رنگ داغ.
   هیچ برجستگی پیکسلی، هیچ سایهٔ سخت، هیچ بافت شطرنجی.
   ============================================================= */

/* ===== ۱) توکن‌ها ===== */
:root {
  /* ---- قاب و ناودان ----
     قاب ۲px دور سند حذف شد؛ صفحه تمام‌بلید نفس می‌کشد و عرضش با
     نما رشد می‌کند تا ۱۶۰۰. */
  --shell: min(100%, 1600px);
  --gutter: clamp(20px, 3.4vw, 72px);
  /* ریتم عمودی تقریباً ۲٫۲ برابر قبل — «گران» یعنی صفحه نفس بکشد */
  --band-y: clamp(72px, 8.4vw, 168px);
  --measure: 68ch;

  --font-sans: Vazirmatn, system-ui, sans-serif;
  /* لهجهٔ لاتین و عددِ نمایشی. Archivo محور عرض دارد؛ در ۱۱۵٪ عرض و
     وزن ۸۰۰ همان حسِ تختهٔ نتایج پخش تلویزیونی را می‌دهد.
     نامِ توکن از نسخهٔ پیکسلی مانده تا JSِ تولیدکنندهٔ `.pixel` نشکند. */
  --font-pixel: Archivo, 'Vazirmatn', system-ui, sans-serif;
  --font-display: Archivo, 'Vazirmatn', system-ui, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- فاصله: یک مقیاس، پایهٔ ۴ ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;
  --sp-14: 160px;

  /* ---- مقیاس تایپ ----
     کنتراست شدید: تیتر هیرو ۱۳۲ در برابر بدنهٔ ۱۷٫۵ ⇒ ۷٫۵ برابر. */
  --fs-display: clamp(44px, 6.4vw + 6px, 114px);
  --fs-h1: clamp(36px, 3.4vw + 22px, 92px);
  --fs-h2: clamp(30px, 2.3vw + 20px, 66px);
  --fs-h3: clamp(25px, 1.5vw + 19px, 48px);
  --fs-h4: clamp(22px, 1.1vw + 17px, 38px);
  --fs-h5: clamp(19px, .82vw + 16px, 31px);
  --fs-h6: clamp(17px, .48vw + 15px, 22px);
  --fs-lead: clamp(17px, .3vw + 16px, 21px);
  --fs-body: clamp(15.5px, .15vw + 15px, 17.5px);
  --fs-note: clamp(14.5px, .1vw + 14.2px, 16px);
  --fs-fine: clamp(13px, .07vw + 12.8px, 14.5px);
  --fs-tiny: clamp(12px, .06vw + 11.8px, 13.5px);
  --fs-micro: 10.5px;

  /* فارسی نفس می‌خواهد؛ تیتر جمع، بدنه باز. */
  --lh-display: 1.06;
  --lh-tight: 1.22;
  --lh-snug: 1.55;
  --lh-body: 1.78;
  --lh-loose: 2;

  /* ---- سطوح: گرافیت سرد، نه مشکیِ سبز ---- */
  --void: #05070A;
  --bg: #06080B;
  --surface-0: #080A0E;
  --surface-1: #0C1015;
  --surface-2: #11151B;
  --surface-3: #161B23;
  --surface-violet: #0E0B15;
  --well: #1C222B;

  /* ---- متن: رمپ خنثیِ سرد ----
     هر چهار پله روی بالاترین سطح (--well) از AA رد می‌شوند:
     ink ۱۳٫۳ · muted ۸٫۲ · dim ۶٫۱ · faint ۴٫۷ */
  --ink: #EDF1F0;
  --muted: #B4BDC2;
  --dim: #9AA4AA;
  --faint: #838E95;

  /* ---- خطوط: مویی، نه ضخیم ---- */
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .12);
  --edge: rgba(255, 255, 255, .10);
  --line-solid: #171C23;

  /* ---- سبز (تنها رنگ داغ) ---- */
  --green: #7CF56B;
  --green-mid: #63D653;
  --green-low: #5FD44F;
  --green-ink: #05130A;
  --green-edge: #2E6B26;
  --green-deep: #1B4415;
  --green-soft: #A8FA9C;
  --green-track: rgba(124, 245, 107, .12);
  /* دیگر رنگ دوم نیست — فقط تینتِ روشن‌ترِ همان سبز */
  --lime: #B8FF9E;

  /* ---- بنفش: حبس‌شده در بخش کش‌بک ---- */
  --violet: #B79DFF;
  --violet-soft: #C9B8FF;
  --violet-edge: #4B3A6E;
  --violet-deep: #33245A;
  --violet-ink: #0C0616;

  /* ---- رنگ وضعیت: معنایی، نه برند ---- */
  --ok: #7CF56B;
  --ok-edge: rgba(124, 245, 107, .32);
  --ok-bg: rgba(124, 245, 107, .07);
  --warn: #FFC24B;
  --warn-edge: rgba(255, 194, 75, .3);
  --warn-bg: rgba(255, 194, 75, .07);
  --err: #FF8878;
  --err-edge: rgba(255, 136, 120, .32);
  --err-bg: rgba(255, 136, 120, .08);
  --err-solid: #E05A48;
  --info: #C4AEFF;
  --info-edge: rgba(196, 174, 255, .3);
  --info-bg: rgba(196, 174, 255, .07);
  --ember: #FF6B4A;
  --ember-deep: #6B2718;

  /* ---- لبهٔ نور ----
     یک خط نور یک‌پیکسلی در بالای هر سطح. جای شش توکن برجستگیِ
     پیکسلی را می‌گیرد. نام‌های قدیمی مانده‌اند چون ui.css و
     admin.css مصرف‌شان می‌کنند — فقط مقدارشان عوض شده، و همین یک
     تغییر، برجستگی ۸ بیتی را از کل سایت برمی‌دارد. */
  --rim: inset 0 1px 0 rgba(255, 255, 255, .06);
  --bevel: inset 0 1px 0 rgba(255, 255, 255, .06);
  --bevel-green: inset 0 1px 0 rgba(124, 245, 107, .16);
  --bevel-violet: inset 0 1px 0 rgba(183, 157, 255, .18);
  --bevel-block: inset 0 1px 0 rgba(255, 255, 255, .28);
  --bevel-logo: inset 0 2px 0 rgba(255, 255, 255, .34);
  --bevel-btn: inset 0 1px 0 rgba(255, 255, 255, .26);

  /* ---- شعاع: پلکانی، نه یکنواخت ---- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 999px;

  /* ---- ارتفاع: سایهٔ تینت‌شده، هم‌رنگ زمینه ---- */
  --elev-1: 0 1px 2px rgba(2, 4, 7, .5), 0 2px 8px rgba(2, 4, 7, .35);
  --elev-2: 0 2px 6px rgba(2, 4, 7, .5), 0 12px 32px rgba(2, 4, 7, .45);
  --elev-3: 0 4px 12px rgba(2, 4, 7, .55), 0 32px 72px rgba(2, 4, 7, .6);
  --glow: 0 0 0 1px rgba(124, 245, 107, .22), 0 14px 44px rgba(124, 245, 107, .15);
  --glow-violet: 0 0 0 1px rgba(183, 157, 255, .22), 0 14px 44px rgba(183, 157, 255, .15);

  /* ---- حرکت ---- */
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;
  --dur-cine: 900ms;
  --ease: cubic-bezier(.2, .8, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* ---- لایه‌بندی ---- */
  --z-base: 1;
  --z-grain: 3;
  --z-sticky: 20;
  --z-overlay: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* ---- کف هدف لمسی ---- */
  --tap: 44px;

  /* ---- گرین سینمایی: تنها بافت سایت ---- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== ۲) پایه ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* اسکرول‌بار و کنترل‌های بومی هم باید تیره باشند */
  color-scheme: dark;
}

body {
  margin: 0;
  padding: 0 0 var(--sp-11);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  /* عمق از سه لایه می‌آید: یک بلوم سبز از بالا-راست (تنها منبع نور)،
     یک محیطِ سرد از پایین-چپ، و یک گرادیان عمودیِ خیلی کم‌کنتراست.
     هیچ گرید تکراری و هیچ شطرنجی. */
  background:
    radial-gradient(1200px 720px at 78% -12%, rgba(124, 245, 107, .09), transparent 62%),
    radial-gradient(900px 620px at 8% 88%, rgba(96, 128, 168, .05), transparent 64%),
    linear-gradient(180deg, var(--surface-0), var(--bg) 46%, var(--void));
  background-attachment: fixed;
  /* تأخیر دابل-تپ روی موبایل */
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(124, 245, 107, .16);
}

/* گرین سینمایی — ثابت، بدون رهگیری اشاره‌گر، زیر کرومِ چسبان.
   تنها بافتی که در کل سایت مجاز است. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: .05;
  mix-blend-mode: overlay;
}

/* منوی موبایل که باز است، صفحهٔ پشتش نباید بلغزد */
body.is-locked { overflow: hidden; }

/* لینک بدنه دیگر سبز نیست — سبز خرج CTA و عدد کلیدی می‌شود.
   خوانایی از زیرخط ظریف می‌آید، نه از رنگ داغ. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .22);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--green); text-decoration-color: rgba(124, 245, 107, .5); }

/* لینک‌هایی که خودشان کامپوننت‌اند زیرخط نمی‌خواهند */
a.btn,
a.brand,
a.nav__link,
a.side__link,
a.trust,
a.toc__link,
a.chip,
a.skip-link,
a.tcard__poster,
a.logo-slot { text-decoration: none; }

::selection { background: var(--green); color: var(--green-ink); }

/* تراکینگ منفی روی فارسی حروف چسبان را به هم می‌فشارد — هیچ‌جا.
   سایهٔ سختِ ۳px هم رفت؛ تیتر باید تخت و سنگین باشد. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-wrap: balance;
}
p { margin: 0; }

img { max-width: 100%; }

/* [hidden] یک قاعدهٔ UA با وزن پایین است؛ هر کلاسی که display بدهد
   (.stack، .row، .grid) آن را می‌شکند و عنصرِ «پنهان» دیده می‌شود.
   این تنها !important عمدی و سراسری شیت است. */
[hidden] { display: none !important; }

/* ===== ۳) بافت‌ها =====
   نام‌ها ماندند (پانزده صفحه و JS مصرف‌شان می‌کنند)، ظاهرشان عوض شد:
   دیگر شطرنجی پیکسلی نیست، یک سطحِ آرام است با لبهٔ نور. */
.tex-stone {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 42%),
    var(--tex, var(--surface-1));
  box-shadow: var(--rim);
}

.tex-grid {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg, rgba(255, 255, 255, .02) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--tex, var(--surface-2));
}

.on-2 { --tex: var(--surface-2); }

/* ===== ۴) چیدمان ===== */
.shell {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
}

.band {
  padding: var(--band-y) var(--gutter);
  /* تصحیح نوری: پدینگ پایین ۱٫۱۵ برابر بالا */
  padding-bottom: calc(var(--band-y) * 1.15);
  border-top: 1px solid var(--line);
}
.band--tight {
  padding: clamp(36px, 4.2vw, 76px) var(--gutter);
  padding-bottom: clamp(40px, 4.8vw, 86px);
}
.band--flush { border-top: 0; }

.grid { display: grid; gap: var(--sp-5); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }

/* گرید دوستونی با نسبت دلخواه: style="--cols: 1.35fr .65fr" */
.split {
  display: grid;
  gap: var(--gap, var(--sp-5));
  grid-template-columns: var(--cols, 1fr 1fr);
}

.stack { display: flex; flex-direction: column; gap: var(--gap, var(--sp-3)); }
.row { display: flex; align-items: center; gap: var(--gap, var(--sp-3)); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--top { align-items: flex-start; }
.row--baseline { align-items: baseline; }

/* آیتم فلکس/گرید پیش‌فرض min-width:auto دارد، یعنی کوچک‌تر از محتوایش
   نمی‌شود و روی موبایل قاب را باز می‌کند. */
.split > *,
.grid > *,
.stack > *,
.row > * { min-width: 0; }

.sticky { position: sticky; top: var(--sp-5); }
.items-start { align-items: start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.fill { flex: 1; }
.center { text-align: center; }
.ltr { direction: ltr; text-align: left; }

/* ===== ۵) هدر و ناوبری ===== */
.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-4) var(--gutter);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding-inline-end: var(--sp-1);
}
/* تک‌ژست پیکسلیِ باقی‌مانده: یک مربع تیز. */
.brand__mark {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 0;
  background: var(--green);
  box-shadow: var(--bevel-logo), 0 6px 22px rgba(124, 245, 107, .3);
}
.brand__mark--sm {
  width: 22px;
  height: 22px;
  box-shadow: var(--bevel-block), 0 4px 16px rgba(124, 245, 107, .24);
}
.brand__name { font-weight: 900; font-size: 20px; letter-spacing: 0; }
.brand__name--sm { font-size: 16px; }
.brand__latin {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 4px;
}

.nav { display: flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-note); }
.nav__link { color: var(--muted); }
.nav__link:hover { color: var(--ink); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav__actions { display: flex; align-items: center; gap: var(--sp-2); }

.crumb-bar {
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-fine);
  color: var(--dim);
}
.crumb-bar a { color: var(--muted); text-decoration: none; }
.crumb-bar a:hover { color: var(--green); }

/* ===== ۶) دکمه‌ها =====
   تخت، شعاع کوچک، لبهٔ نور. هر واریانت هر پنج حالت را دارد:
   عادی / hover / active / focus-visible / disabled. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
}

.btn--sm { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-fine); }
.btn--md { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-note); }
.btn--lg { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-lead); }
.btn--block { display: flex; width: 100%; padding: var(--sp-4); font-size: var(--fs-note); }

.btn--primary {
  background: var(--green);
  color: var(--green-ink);
  font-weight: 900;
  box-shadow: var(--bevel-btn), 0 6px 20px rgba(124, 245, 107, .18);
}
.btn--primary:hover { color: var(--green-ink); background: var(--green-soft); }

/* همان دکمهٔ سبز بدون هالهٔ بیرونی — برای داخل کارت‌ها */
.btn--flat {
  background: var(--green);
  color: var(--green-ink);
  font-weight: 900;
  box-shadow: var(--bevel-btn);
}
.btn--flat:hover { color: var(--green-ink); background: var(--green-soft); }

.btn--violet {
  background: var(--violet);
  color: var(--violet-ink);
  font-weight: 900;
  box-shadow: var(--bevel-btn), 0 6px 20px rgba(183, 157, 255, .2);
}
.btn--violet:hover { color: var(--violet-ink); background: var(--violet-soft); }

.btn--ghost {
  border: 1px solid var(--line-2);
  box-shadow: var(--rim);
  color: var(--ink);
  background: rgba(255, 255, 255, .03);
}
.btn--ghost:hover {
  color: var(--ink);
  border-color: rgba(124, 245, 107, .34);
  background: rgba(124, 245, 107, .07);
}

.btn--muted {
  border: 1px solid var(--line);
  box-shadow: var(--rim);
  color: var(--dim);
  background: transparent;
}
.btn--muted:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255, 255, 255, .04); }

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .45;
  filter: none;
  transform: none;
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { filter: none; background: transparent; }
.btn--primary:disabled:hover,
.btn--flat:disabled:hover { background: var(--green); }

/* ===== ۷) پنل‌ها و کارت‌ها =====
   مرز مویی + لبهٔ نور + سایهٔ تینت‌شده. هیچ برجستگی. */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--rim), var(--elev-1);
}
.panel--green {
  border-color: rgba(124, 245, 107, .28);
  box-shadow: var(--bevel-green), var(--elev-1);
}
.panel--violet {
  border-color: rgba(183, 157, 255, .26);
  box-shadow: var(--bevel-violet), var(--elev-1);
  background: var(--surface-violet);
}
.panel--outline {
  border: 1px solid rgba(124, 245, 107, .4);
  box-shadow: none;
}
.panel--hero {
  border: 1px solid rgba(124, 245, 107, .3);
  border-radius: var(--r-lg);
  box-shadow: var(--rim), var(--elev-2);
}
.panel--dashed {
  border: 1px dashed var(--violet-edge);
  border-radius: var(--r-md);
  box-shadow: none;
  background: var(--surface-violet);
}
.panel--dashed-green {
  border: 1px dashed var(--green-edge);
  border-radius: var(--r-md);
  box-shadow: none;
}
.panel--hairline {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: none;
}

.pad-md { padding: var(--sp-5); }
.pad-lg { padding: var(--sp-6); }
.pad-xl { padding: clamp(24px, 2.6vw, 40px); }

/* سربرگ داخل کارت */
.card-head {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-h6);
  font-weight: 800;
}

/* ===== ۸) تایپوگرافی ===== */
.h-xl { font-size: var(--fs-h1); font-weight: 900; line-height: var(--lh-display); }
.h-lg { font-size: var(--fs-h2); font-weight: 900; line-height: 1.12; }
.h-md { font-size: var(--fs-h3); font-weight: 900; line-height: 1.16; }
.h-sm { font-size: var(--fs-h4); font-weight: 900; line-height: 1.2; }
.h-xs { font-size: var(--fs-h5); font-weight: 900; line-height: 1.26; }

/* تیتر نمایشیِ هیرو — تنها جایی که به این مقیاس می‌رسد */
.h-display {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: 0;
  text-wrap: balance;
}

.lead { font-size: var(--fs-lead); line-height: 1.68; color: var(--muted); max-width: 38ch; text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
.note { font-size: var(--fs-note); line-height: var(--lh-body); color: var(--muted); max-width: var(--measure); }
.sub  { font-size: var(--fs-note); line-height: var(--lh-snug); color: var(--dim); }
.fine { font-size: var(--fs-fine); line-height: var(--lh-snug); color: var(--dim); }
.tiny { font-size: var(--fs-tiny); line-height: var(--lh-snug); color: var(--dim); }

/* لهجهٔ لاتین. عمداً محدود: فقط واژه‌های لاتین و برچسب‌های ریز. */
.pixel {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* برچسب ریزِ حروف‌بزرگ — «eyebrow» */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--faint);
  line-height: 1;
}

/* عدد. Archivo با ارقام هم‌عرض تا ستون‌ها روی هم بنشینند؛ برای
   ارقام فارسی به Vazirmatn برمی‌گردد چون Archivo گلیف فارسی ندارد. */
.num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0;
  line-height: 1.1;
}

.code { font-family: var(--font-code); direction: ltr; text-align: left; }

.t-green { color: var(--green); }
.t-lime { color: var(--lime); }
.t-violet { color: var(--violet-soft); }
.t-muted { color: var(--muted); }
.t-dim { color: var(--dim); }
.t-faint { color: var(--faint); }

.w-500 { font-weight: 500; }
.w-600 { font-weight: 600; }
.w-700 { font-weight: 700; }
.w-800 { font-weight: 800; }
.w-900 { font-weight: 900; }

/* تیتر بخش + زیرنویس */
.section-head { padding-bottom: var(--sp-8); }
.section-head__sub {
  font-size: var(--fs-note);
  color: var(--dim);
  padding-top: var(--sp-3);
  max-width: 56ch;
}

/* ===== ۹) فرم‌ها ===== */
.input {
  display: block;
  width: 100%;
  min-height: var(--tap);
  /* زیر ۱۶px، iOS موقع فوکوس کل صفحه را زوم می‌کند. */
  font-size: 16px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--rim);
  background: var(--surface-3);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
}
.input::placeholder { color: var(--faint); }
.input:hover:not(:disabled) { border-color: rgba(255, 255, 255, .18); }
.input:focus {
  border-color: var(--green);
  box-shadow: var(--rim), 0 0 0 3px rgba(124, 245, 107, .16);
}
.input[aria-invalid='true'] { border-color: var(--err-solid); }
.input[aria-invalid='true']:focus {
  border-color: var(--err);
  box-shadow: var(--rim), 0 0 0 3px rgba(255, 136, 120, .16);
}
.input:disabled { opacity: .5; cursor: not-allowed; }

.input--sm { padding: var(--sp-2) var(--sp-3); }
.input--ltr { direction: ltr; text-align: left; }

textarea.input { resize: vertical; min-height: 96px; line-height: var(--lh-body); }

select.input {
  appearance: none;
  padding-inline-start: var(--sp-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: var(--sp-4) 50%, calc(var(--sp-4) + 5px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* ویندوز در حالت تیره، select بومی را روشن می‌کشد اگر رنگ صریح نباشد */
  background-color: var(--surface-3);
  color: var(--ink);
}
select.input option { background: var(--surface-2); color: var(--ink); }

.label {
  display: block;
  font-size: var(--fs-fine);
  color: var(--muted);
  padding-bottom: var(--sp-2);
}

.field-error {
  font-size: var(--fs-tiny);
  color: var(--err);
  padding-top: var(--sp-2);
  line-height: var(--lh-snug);
}

/* پیام فرم — چهار وضعیت از توکن‌های مرکزی */
.form-msg {
  font-size: var(--fs-fine);
  line-height: var(--lh-snug);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid;
  border-radius: var(--r-sm);
}
.form-msg--error   { color: var(--err);   border-color: var(--err-edge);  background: var(--err-bg); }
.form-msg--success { color: var(--ok);    border-color: var(--ok-edge);   background: var(--ok-bg); }
.form-msg--warn    { color: var(--warn);  border-color: var(--warn-edge); background: var(--warn-bg); }
.form-msg--info    { color: var(--info);  border-color: var(--info-edge); background: var(--info-bg); }

/* خانه‌های کد تایید */
.otp { display: flex; gap: var(--sp-2); direction: ltr; }
.otp-input {
  width: 46px;
  height: 56px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  box-shadow: var(--rim);
  background: var(--surface-3);
  color: var(--ink);
}
.otp-input:focus {
  border-color: var(--green);
  box-shadow: var(--rim), 0 0 0 3px rgba(124, 245, 107, .16);
}

/* دکمه‌های فیلتر */
.filter-btn[aria-pressed='true'] {
  background: var(--green);
  color: var(--green-ink);
  font-weight: 800;
  border: 1px solid transparent;
  box-shadow: var(--bevel-btn);
}

/* ===== ۱۰) کامپوننت‌ها ===== */

/* نشان کوچک بالای تیتر */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-xs);
  font-size: var(--fs-tiny);
  font-weight: 600;
  border: 1px solid rgba(124, 245, 107, .26);
  box-shadow: var(--rim);
  background: rgba(124, 245, 107, .06);
  color: var(--green-soft);
}
.badge--violet {
  border-color: rgba(183, 157, 255, .26);
  background: rgba(183, 157, 255, .07);
  color: var(--violet-soft);
}
.badge--bare { background: transparent; }

/* برچسب حالت بازی — همیشه لاتین، تنها عنصر با گوشهٔ کاملاً تیز */
.tag {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 0;
  padding: 6px 9px;
  background: var(--green);
  color: var(--green-ink);
}
.tag--violet { background: var(--violet); color: var(--violet-ink); }
.tag--dead { background: rgba(255, 255, 255, .12); color: var(--muted); }
.tag--float { position: absolute; top: var(--sp-4); inset-inline-end: var(--sp-4); }

/* تراشهٔ اطلاعات */
.chip {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  box-shadow: var(--rim);
  font-size: var(--fs-fine);
  color: var(--muted);
}

/* بلوک پیکسلی (آواتار / نقطه) — ژست برند، گوشهٔ تیز می‌ماند */
.pxl {
  display: block;
  flex: none;
  border-radius: 0;
  background: var(--skin, var(--green));
  box-shadow: var(--bevel-block);
}
.pxl--8  { width:  8px; height:  8px; }
.pxl--10 { width: 10px; height: 10px; }
.pxl--22 { width: 22px; height: 22px; }
.pxl--26 { width: 26px; height: 26px; }
.pxl--28 { width: 28px; height: 28px; }
.pxl--30 { width: 30px; height: 30px; }
.pxl--56 { width: 56px; height: 56px; }

/* عدد بزرگ + برچسب */
.stat__value {
  font-family: var(--font-sans);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 2.1vw + 22px, 52px);
  line-height: 1;
  color: var(--ink);
}
.stat__label {
  font-size: var(--fs-tiny);
  color: var(--dim);
  padding-top: var(--sp-3);
  line-height: var(--lh-snug);
}

/* کارت آمار */
.metric { padding: var(--sp-5); }
.metric__label { font-size: var(--fs-tiny); color: var(--dim); }
.metric__value {
  font-family: var(--font-sans);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 1.2vw + 21px, 34px);
  line-height: 1.05;
  padding-top: var(--sp-3);
}

/* شمارش معکوس — چهار عدد بدون جعبه، جداشده با خط مویی */
.count {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: var(--sp-6) 0 var(--sp-2);
}
.count__cell {
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-inline-start: 1px solid var(--line);
  transition: color var(--dur) var(--ease);
}
.count__cell:first-child { border-inline-start: 0; }
.count__num {
  font-family: var(--font-sans);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 3.4vw + 20px, 78px);
  line-height: .96;
  color: var(--ink);
}
/* فقط ثانیه سبز است — یک لکه، نه چهار تا */
.count__cell:last-child .count__num { color: var(--green); }
.count__unit {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--faint);
  padding-top: var(--sp-3);
}

/* نوار پیشرفت ظرفیت — نازک، تخت، بدون راه‌راه */
.meter {
  height: 6px;
  border-radius: var(--r-xs);
  background: var(--green-track);
  border: 0;
  box-shadow: none;
}
.meter--bare { height: 5px; }
.meter__fill {
  height: 100%;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: var(--green);
}
.meter--bare .meter__fill { background: var(--green); }
.meter__fill--dead { background: rgba(255, 255, 255, .2); }

/* کارت مسابقه */
.tcard__poster {
  height: 168px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tcard__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.tcard--full { opacity: .66; }

/* خانهٔ لوگوی اسپانسر */
.logo-slot { height: 88px; }

/* ردیف برچسب/مقدار */
.kv { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-fine); }
.kv__k { color: var(--dim); }
.kv__v { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* فهرست قوانین */
.rules {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 0;
  margin: 0;
  font-size: var(--fs-note);
  line-height: var(--lh-body);
  color: var(--muted);
}
.rules > li { display: flex; gap: var(--sp-3); list-style: none; }
.rules > li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: .72em;
  background: var(--green);
}

/* فهرست ویژگی با نقطهٔ پیکسلی */
.feats { display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-note); color: var(--ink); padding: 0; margin: 0; }
.feats > li { display: flex; gap: var(--sp-3); align-items: center; list-style: none; }

/* هالهٔ نور پشت تیتر بخش */
.glow-green { background: radial-gradient(720px 360px at 76% 24%, rgba(124, 245, 107, .1), transparent 68%); }

/* جداکنندهٔ نازک */
.hr { height: 1px; background: var(--line); }
.hr--violet { background: rgba(183, 157, 255, .16); }

/* حالت خالی */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-11) var(--sp-6);
  text-align: center;
  color: var(--dim);
  font-size: var(--fs-fine);
  line-height: var(--lh-body);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
}

/* ===== ۱۱) فوتر ===== */
.site-foot {
  position: relative;
  border-top: 1px solid var(--line);
  background: var(--surface-0);
  overflow: hidden;
}

.site-foot__inner {
  position: relative;
  z-index: 1;
  padding: var(--sp-12) var(--gutter) var(--sp-10);
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 1.9fr);
  gap: var(--sp-9) var(--sp-12);
  align-items: start;
}
.site-foot__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 42ch;
}
.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  font-size: var(--fs-fine);
}
.site-foot__col { display: flex; flex-direction: column; align-items: start; }
.site-foot__col a {
  color: var(--muted);
  text-decoration: none;
  min-width: var(--tap);
  /* هدف لمسی: ارتفاع ۲۲px قبلی نصف حداقل قابل‌اطمینان بود */
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline-end: var(--sp-2);
}
.site-foot__col a:hover { color: var(--ink); }
.site-foot__title {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--faint);
  padding-bottom: var(--sp-3);
}

.site-foot__bar {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
  padding: var(--sp-5) var(--gutter);
  padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-tiny);
  color: var(--faint);
}

/* نمادهای اعتماد */
.site-foot__trust {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.trust {
  width: 72px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--rim);
  display: block;
  overflow: hidden;
  background: var(--surface-1);
}
.trust img { width: 100%; height: 100%; display: block; }
.trust:hover { border-color: rgba(124, 245, 107, .34); }

/* ===== ۱۲) ریسپانسیو ===== */
@media (max-width: 1200px) {
  .split { grid-template-columns: 1fr; }
  .side { width: 200px; }
}

@media (max-width: 900px) {
  .nav { gap: var(--sp-4); }
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-foot__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .side {
    width: 100%;
    border-inline-start: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .dash { flex-direction: column; }
}

@media (max-width: 700px) {
  .site-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
}

@media (max-width: 560px) {
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  /* دو ستونِ تنگ در ۳۶۰ ناخواناست؛ یک ستون با گروه‌بندی روشن. */
  .site-foot__cols { grid-template-columns: 1fr; gap: var(--sp-5); }
  .site-foot__col { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
  .count__cell { padding: var(--sp-2) 2px; }
  .otp-input { width: 40px; height: 50px; font-size: 18px; }
}

/* ===== ۱۳) کمکی‌های چیدمان ===== */
.g-1 { --gap: var(--sp-1); }
.g-2 { --gap: var(--sp-2); }
.g-3 { --gap: var(--sp-3); }
.g-4 { --gap: var(--sp-4); }
.g-5 { --gap: var(--sp-5); }
.g-6 { --gap: var(--sp-6); }
.g-7 { --gap: var(--sp-7); }
.g-8 { --gap: var(--sp-8); }
.g-9 { --gap: var(--sp-9); }
.g-10 { --gap: var(--sp-10); }

.split--wide { --cols: 1.2fr .8fr; }
.split--narrow { --cols: .8fr 1.2fr; }
.split--main { --cols: 1.35fr .65fr; }
.split--aside { --cols: 1.4fr .6fr; }

/* برچسب/مقدار عمودی — پرتکرارترین الگوی صفحه‌ها */
.fact { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.fact__k {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--faint);
}
.fact__v {
  font-size: var(--fs-note);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.fact__v--lg { font-size: var(--fs-h6); }

/* سربرگ بخش با ابزار کنارش */
.section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

/* ورق تک‌ستونهٔ فرم‌ها */
.sheet {
  padding: clamp(48px, 6vw, 96px) var(--gutter);
  display: flex;
  justify-content: center;
}
.sheet__inner { width: 100%; max-width: 440px; }
.sheet__inner--wide { max-width: 520px; }

.divider { margin-block: var(--sp-5); }

/* آیتمی که کل عرض گرید را می‌گیرد (حالت خالی/خطا) */
.grid-full { grid-column: 1 / -1; }

/* سربرگ و پانوشت ورق فرم */
.sheet__head { padding-bottom: var(--sp-8); }
.sheet__foot { padding-top: var(--sp-6); }

/* برچسب کنار لینک «رمزت را فراموش کردی؟» */
.label-row { padding-bottom: var(--sp-2); }
.label--bare { padding: 0; }

/* راهنمای زیر فیلد */
.hint { padding-top: var(--sp-2); }

/* جعبهٔ اطلاعات نتیجهٔ پرداخت */
.result-box { width: 100%; padding: var(--sp-5); text-align: start; }
.result-box__code { font-size: var(--fs-h6); padding-top: var(--sp-2); }
.result-box__value { font-size: var(--fs-note); padding-top: var(--sp-2); }
.dots { font-size: var(--fs-note); letter-spacing: 4px; }

.otp--center { justify-content: center; }
.verify-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  color: var(--green);
  font-size: 24px;
}
.feats--sm { font-size: var(--fs-fine); }
.quote-total { font-size: var(--fs-h5); font-variant-numeric: tabular-nums; }

/* ---------- صفحهٔ اسپانسرینگ ---------- */
.sponsor-hero { padding-block: clamp(56px, 6vw, 120px); }
.sponsor-hero__copy { max-width: 60ch; }
.sponsor-stats { padding-top: var(--sp-9); }

.pkg { height: 100%; }
.pkg__tier {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0;
}
.pkg__price {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.pkg__unit { font-size: var(--fs-fine); font-weight: 400; color: var(--dim); }
.pkg__perks { font-size: var(--fs-fine); line-height: var(--lh-loose); }
.pkg__flag {
  font-weight: 800;
  font-size: var(--fs-tiny);
  border-radius: var(--r-xs);
  background: var(--green);
  color: var(--green-ink);
  padding: 4px 9px;
}
.mt-auto { margin-top: auto; }

/* دو فیلد کنار هم که روی موبایل زیر هم می‌روند */
.form-col { min-width: 190px; }

/* ---------- پنل کاربری ---------- */
.dash { display: flex; align-items: stretch; min-height: 70dvh; }
.dash__main { padding: clamp(24px, 2.8vw, 44px); }
.dash__brand { padding: var(--sp-1) var(--sp-3) var(--sp-6); }
.dash__who { padding: var(--sp-2) var(--sp-3); }
.brand__latin--flush { padding-top: 0; }
.side__link--last { margin-top: auto; color: var(--dim); }
.card-body { padding: var(--sp-5) var(--sp-6); }
.gamertag { font-size: var(--fs-note); }
.dl-flush { margin: 0; }
.dd-flush { margin: 0; }
.skel--w260 { display: block; width: min(260px, 70%); }
.skel--w180 { display: block; width: min(180px, 60%); }

.pxl--violet { --skin: var(--violet); }

/* ===== ۱۴) قاعدهٔ زبانِ لهجهٔ لاتین =====
   Archivo هیچ گلیف فارسی ندارد و مهم‌تر از آن، تراکینگِ باز و
   حروف‌بزرگ روی خط فارسی، حروفِ چسبان را از هم می‌کَند. پس هر جا که
   لهجهٔ لاتین به کار می‌رود، محتوایش هم باید لاتین باشد:
   .eyebrow · .pixel · .tag · .brand__latin · .livebar__label ·
   .step-card__num · .wizard-step__num · .error-page__digit ·
   .sponsor-mark__tier. هر برچسب فارسی با Vazirmatn و تراکینگ صفر
   نوشته می‌شود. این کامنت قرارداد است، نه تزئین. */