/* ملی‌کوین — موبایل‌اول، راست‌به‌چپ.
   ۹۰٪ کاربران با گوشی معامله می‌کنند؛ هر تصمیمِ این فایل اول برای انگشتِ شست گرفته شده. */

:root {
  /* برندِ ملی‌کوین (از لوگوی حسن استخراج شد) */
  --navy:        #141C4D;
  --gold:        #D3AF37;
  --gold-lite:   #E6C558;
  --gold-deep:   #A9862A;
  --peach:       #F9BA77;

  /* سطوح — ته‌رنگِ سرمه‌ای دارند تا با برند یکی باشند */
  --bg:          #0F1216;
  --surface:     #1B1E24;
  --surface-2:   #242831;
  --surface-3:   #2D323C;
  --line:        #343943;
  --line-soft:   #24272E;
  /* ⭐ ۲۵ شهریور ۱۴۰۵ — خواسته‌ی علیرضا: «ردیفِ غیرفعال کم‌رنگ و شیشه‌ای باشد تا
     حسِ محوبودن بدهد.» سطحِ کارت نیمه‌شفاف می‌شود، نه `opacity` — چون opacity
     متن را هم می‌برد و کنتراست را زیرِ ۳ می‌اندازد (اندازه‌گیریِ ۱۰ شهریور). */
  --surface-off: rgba(27, 30, 36, .45);
  --line-off:    rgba(52, 57, 67, .55);

  --text:        #EAECEF;
  --text-dim:    #9CA5B3;
  /* ۴.۸۲:۱ روی تیره‌ترین سطح — بالای کفِ ۴.۵ برای متنِ ریز. رنگِ قبلی ۳.۶۶ بود. */
  --text-faint:  #8A93A1;

  --up:          #3ED07E;
  --up-bg:       #12281E;
  --down:        #FF6B5E;
  --down-bg:     #2E1B1A;

  --radius:      16px;
  --radius-sm:   11px;
  --shadow:      0 2px 14px rgba(0,0,0,.4);

  /* ارتفاع‌های ثابتِ چیدمان */
  --topbar-h:    56px;
  --bottomnav-h: 60px;
  --safe-b:      env(safe-area-inset-bottom, 0px);
  --safe-t:      env(safe-area-inset-top, 0px);
  --safe-r:      env(safe-area-inset-right, 0px);
  --safe-l:      env(safe-area-inset-left, 0px);

  /* رنگِ متن روی پرکردنِ طلایی و روی سرمه‌ای — در هر دو تم ثابت می‌ماند */
  --on-gold:     #10142A;
  --on-navy:     #FFFFFF;

  /* ⚠️ `--gold-lite` در تمِ روشن به یک طلاییِ **تیره** بازتعریف می‌شود تا
     بتواند متن باشد. اگر همان را برای پس‌زمینه‌ی hover هم به کار ببریم،
     متنِ تیره روی زمینه‌ی تیره می‌افتد (اندازه‌گیری شد: ۳٫۰۱). پس پرکننده‌ی
     hover توکنِ خودش را دارد و در هر دو تم روشن می‌ماند. */
  --gold-fill:   #E6C558;

  /* رنگِ عددِ قیمت وقتی معامله بسته است. عمداً توکنِ جدا و نه شفافیت روی متن:
     opacity کنتراست را زیرِ ۴٫۵ می‌برد و عددِ ناخوانا از عددِ نبود بدتر است.
     اندازه‌گیری‌شده روی --surface تمِ تیره: ۶٫۸:۱ */
  --px-off:      #98A1AF;
  /* برجستگیِ دکمه‌ی قیمت — در تمِ تیره یک خطِ نورِ بالا و سایه‌ی زیر */
  --px-shadow:   inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.34);

  /* رنگِ متن و حاشیه‌ی حالت‌ها. توکن شدند تا تمِ روشن بتواند عوضشان کند —
     قبلاً رنگِ ثابت بودند و روی زمینه‌ی روشن ناخوانا می‌شدند. */
  --up-ink:      #8FE3B4;
  /* رنگِ «خاموش»: همان سبز/قرمز ولی خاکستری‌شده (۶۰٪ به‌سمتِ متنِ کم‌رنگ).
     ⚠️ عمداً `opacity` نیست: شفافیت کنتراست را زیرِ ۴٫۵ می‌برد — اندازه‌گیری شد
     که در تمِ روشن با ۳۵٪ محوشدگی به ۲٫۸۹ می‌افتاد. این‌ها ≥۵٫۷ می‌مانند. */
  --up-ink-off:  #96BFBF;   /* ۸٫۶۰:۱ روی سلولِ خاموشِ تیره */
  --up-line:     #1E5A3C;
  --down-ink:    #F5A9A2;
  --down-ink-off:#BFA8B8;   /* ۷٫۷۸:۱ */
  --down-line:   #6A3029;
  --warn-bg:     #38300F;
  --warn-line:   #5F5220;
  --warn-ink:    #F3DFA4;
  --info-bg:     #10263A;
  --info-line:   #1F4763;
  --info-ink:    #A8D3EE;
  --badge-ink:   #A7B0BE;
  --gold-ink:    var(--gold-lite);

  --buy-bg:      linear-gradient(180deg, #16281E 0%, var(--surface-2) 100%);
  --buy-line:    #23503A;
  --buy-off:     #13201B;
  --sell-bg:     linear-gradient(180deg, #2C1A18 0%, var(--surface-2) 100%);
  --sell-line:   #5A2B27;
  --sell-off:    #221715;

  --topbar-grad: linear-gradient(180deg, #1A1E25 0%, #14171D 100%);

  --flash-up:        rgba(62,208,126,.30);
  --flash-down:      rgba(255,107,94,.30);

  /* پس‌زمینه‌ی چیپ‌های ریز (مثلِ اقلامِ ماندهٔ مشتری در «بیشتر») — هم‌خانواده‌ی
     پس‌زمینه‌ی .chip-btn و .tab در همین فایل. */
  --chip-bg:         var(--surface-2);

  /* ── ردیفِ قیمت‌گذاریِ پنل ────────────────────────────────────────
     هر قلم یک ردیفِ مستقل است و حسن باید با یک نگاه مرزِ ردیف‌ها را ببیند.
     قبلاً ردیف (--surface-2) و پنلِ زیرش (--surface) تقریباً هم‌رنگ بودند و در
     تمِ روشن هر دو نزدیکِ سفید می‌شدند ⇒ چشم ردیف‌ها را از هم جدا نمی‌کرد
     (علیرضا، ۱۶ سپتامبر ۲۰۲۶). حالا: پنل یک «گودالِ» تیره‌تر، ردیف روشن‌تر و
     برجسته با حاشیه‌ی دیده‌شدنی و سایه. */
  --row-well:   #0B0E12;                      /* پس‌زمینه‌ی پنلِ قیمت‌گذاری */
  --row-bg:     #1E222A;                      /* خودِ ردیف — روشن‌تر از گودال */
  --row-line:   #363B46;
  --row-line-h: #4B5160;                      /* حاشیه هنگامِ عبورِ موس */
  --row-shadow: 0 1px 3px rgba(0,0,0,.42);
  --row-inset:  #272C35;                      /* نوارِ سودِ داخلِ ردیف */

  --cat-melted:      #E8B04B;
  --cat-gold-coin:   #C9822A;
  --cat-jewelry:     #C88BC4;
  --cat-silver:      #9FB4CF;
  --cat-silver-coin: #6E9BC4;
  --cat-reference:   #5C6890;

  color-scheme: dark;
}

/* ═══ تمِ روشن ══════════════════════════════════════════════
   بازارِ طلا بیرون و در روشناییِ روز کار می‌کند؛ صفحه‌ی تیره زیرِ آفتاب
   خوانده نمی‌شود. زمینه عمداً **سفیدِ خالص نیست**: کرمِ ملایم هم خیرگی را
   کم می‌کند و هم با طلای برند جور است.

   ⚠️ طلای برند (#D3AF37) روی سفید فقط ۲.۱:۱ است — برای هیچ متنی کافی نیست.
   در این تم طلا فقط برای **پرکردنِ بزرگ، حاشیه و خودِ آرم** می‌ماند؛
   هر جا طلا باید متن باشد، `--gold-ink` (۶.۰:۱) جایش می‌نشیند. */
[data-theme="light"] {
  /* ⚠️ بدونِ این، کنترل‌های بومیِ مرورگر (select، چک‌باکس، اسکرول‌بار) در تمِ
     روشن هم تیره می‌مانند — چون `color-scheme: dark` در `:root` ثابت بود. */
  color-scheme: light;
  /* «شیشه‌ی طلایی» — لوکس و مینیمال. سطح‌ها نیمه‌شفافند تا نورِ زمینه از پشتشان بزند بیرون. */
  --bg:#F2F0EA;
  --surface:rgba(255,255,255,.74);
  --surface-2:rgba(255,255,255,.56);
  --surface-3:rgba(255,255,255,.86);
  --line:rgba(26,21,10,.11);
  --line-soft:rgba(26,21,10,.06);
  --surface-off:rgba(255,255,255,.30);
  --line-off:rgba(26,21,10,.07);

  --text:#1A1509;   /* ۱۶.۴:۱ روی شیشه */
  --text-dim:#6A6151;
  --text-faint:#6E6759;   /* ۵.۱:۱ — رنگِ قبلی ۴.۳ بود و رد شد */

  --gold:#C9A227; --gold-deep:#96751A; --gold-ink:#856811; --gold-lite:#856811;
  --on-gold:#1A1508; --on-navy:#1A1509;

  --px-off:#6E6759;   /* ۵٫۱:۱ روی شیشه‌ی روشن */
  --up:#0B6B44;   --up-ink:#0B6B44;   --up-line:rgba(11,107,68,.30);  --up-bg:rgba(11,107,68,.07);
  --up-ink-off:#44654C;                                                  /* ۵٫۷۴:۱ روی زمینه‌ی روشن */
  --down:#A32A20; --down-ink:#A32A20; --down-line:rgba(163,42,32,.28); --down-bg:rgba(163,42,32,.06);
  --down-ink-off:#814B3D;                                                /* ۶٫۱۳:۱ */
  --badge-ink:#6A6151;

  /* رنگِ دسته‌ها در تمِ روشن باید تیره‌تر باشد — نسخه‌ی تمِ شب روی کارتِ سفید محو می‌شد */
  --cat-melted:#B8801B; --cat-gold-coin:#A65C14; --cat-jewelry:#9C519A;
  --cat-silver:#5E7590; --cat-silver-coin:#37688F; --cat-reference:#454F73;

  --row-well:#E6E2D6;
  --row-bg:#FFFFFF;
  --row-line:rgba(26,21,10,.18);
  --row-line-h:rgba(26,21,10,.34);
  --row-shadow:0 1px 2px rgba(30,26,18,.08), 0 3px 10px rgba(30,26,18,.07);
  --row-inset:rgba(26,21,10,.05);

  --shadow:0 10px 30px rgba(30,26,18,.09);
  --flash-up:rgba(11,107,68,.14); --flash-down:rgba(163,42,32,.13);
  /* هشدار و اطلاع: روی شیشه‌ی روشن باید متنِ تیره باشند — رنگِ تمِ تیره این‌جا ناخوانا بود */
  --warn-bg:rgba(201,162,39,.12); --warn-line:rgba(201,162,39,.34); --warn-ink:#7A5F0E;
  --info-bg:rgba(255,255,255,.70); --info-line:rgba(26,21,10,.10); --info-ink:#3F4A55;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* بدونِ این، display:grid روی .sheet-bg بر hidden غلبه می‌کند و مودال همیشه باز می‌ماند. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  direction: rtl;
  /* جا برای نوارِ پایین + ناحیه‌ی امنِ آیفون */
  padding-bottom: calc(var(--bottomnav-h) + var(--safe-b));
  overscroll-behavior-y: none;
}

a { color: var(--gold-lite); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ═══ سربرگ ═══════════════════════════════════════════════ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l));
  background: var(--topbar-grad);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; min-height: 44px; }
.brand .mark { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: block; }
.brand .mark.lg { width: 52px; height: 52px; border-radius: 14px; }
.brand-txt b { display: block; font-size: 16px; font-weight: 700; letter-spacing: .2px; line-height: 1.25; }
.brand-txt small { display: block; color: var(--text-dim); font-size: 11px; line-height: 1.3; }
.topbar .spacer { flex: 1; }

.mgr {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; border: 1px solid;
}
.mgr .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.mgr.on  { background: var(--up-bg);   color: var(--up-ink); border-color: var(--up-line); }
.mgr.on .dot { animation: pulse 2s ease-in-out infinite; }
.mgr.off { background: var(--down-bg); color: var(--down-ink); border-color: var(--down-line); }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ═══ تازگیِ قیمت‌ها ═══════════════════════════════════════════
   یک خطِ نازک زیرِ سربرگ: «قیمت‌ها تا کِی به‌روزند». نقطه‌ی سبزِ تپنده = تازه،
   کهربایی = چند دقیقه است عددِ تازه‌ای از منبع نیامده. */
.updbar {
  margin: 7px calc(14px + var(--safe-r)) 0 calc(14px + var(--safe-l));
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; line-height: 1.5; color: var(--text-dim);
}
.updbar .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--up-ink); animation: pulse 2s ease-in-out infinite;
}
.updbar.stale { color: var(--warn-ink); }
.updbar.stale .dot { background: currentColor; animation: none; }

/* ═══ نوارِ وضعیت ══════════════════════════════════════════ */
.banner {
  margin: 9px 14px 0; padding: 9px 12px;
  border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.65;
  display: flex; align-items: flex-start; gap: 8px;
}
.banner.compact { font-size: 11.5px; padding: 6px 10px; line-height: 1.5; }
.banner b { font-weight: 700; }
.banner.warn   { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.banner.danger { background: var(--down-bg); border: 1px solid var(--down-line); color: var(--down-ink); }
.banner.info   { background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info-ink); }

/* ═══ تابلوی پیام مدیر ═════════════════════════════════════ */
.notice {
  margin: 9px 14px 0; background: var(--surface);
  border: 1px solid var(--gold-deep); border-radius: var(--radius-sm); overflow: hidden;
}
.notice summary {
  padding: 9px 12px; font-size: 12.5px; font-weight: 700; color: var(--gold-lite);
  cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 7px;
}
.notice summary::-webkit-details-marker { display: none; }
.notice summary::after {
  content: '▾'; margin-inline-start: auto; font-size: 15px;
  transition: transform .2s; line-height: 1;
}
.notice[open] summary::after { transform: rotate(180deg); }
.notice-body {
  padding: 0 13px 13px; font-size: 13px; line-height: 2;
  white-space: pre-wrap; max-height: 40vh; overflow-y: auto;
}

/* ═══ نوارِ چسبانِ جستجو و دسته‌ها ═══════════════════════════ */
.stickybar {
  position: sticky; top: calc(var(--topbar-h) + var(--safe-t)); z-index: 20;
  background: linear-gradient(180deg, var(--bg) 72%, transparent 100%);
  padding: 10px 14px 8px;
}
.search { position: relative; display: flex; align-items: center; }
.search-ico {
  position: absolute; inset-inline-start: 12px; width: 18px; height: 18px;
  fill: var(--text-faint); pointer-events: none;
}
.search input {
  width: 100%; height: 44px; padding: 0 38px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  color: var(--text); font-family: inherit;
  font-size: 16px; /* زیرِ ۱۶ باعث می‌شود آیفون هنگام فوکوس صفحه را زوم کند */
}
.search input::placeholder { color: var(--text-faint); font-size: 14px; }
.search input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute; inset-inline-end: 4px; width: 36px; height: 36px;
  border: none; background: none; color: var(--text-faint);
  font-size: 15px; cursor: pointer; border-radius: 50%;
}

.tabs-wrap { position: relative; margin-top: 9px; }
.tabs { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
/* ⚠️ نشانه‌ی اسکرولِ افقی: نوارِ دسته‌ها روی گوشیِ باریک فقط چند تای اول را نشان
   می‌دهد و بدونِ این محوشدگی هیچ نشانه‌ای نبود که بقیه با کشیدن دیده می‌شوند.
   فقط زیرِ کلاسِ `.has-fade` (که app.js وقتی واقعاً اسکرول دارد می‌گذارد) دیده
   می‌شود — لبه‌ی چپِ فیزیکی (نه منطقی)، چون این‌جا محلِ محتوایِ پنهان‌شده است. */
.tabs-wrap.has-fade::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30px;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
  pointer-events: none;
}
.tab {
  flex: 0 0 auto; min-height: 44px; padding: 9px 16px; border-radius: 999px;
  display: inline-flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 13.5px; font-family: inherit;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  scroll-snap-align: start; white-space: nowrap;
}
.tab.active { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
.tab .cnt { font-size: 11px; opacity: .65; margin-inline-start: 4px; }

/* ═══ تابلوی قیمت — ردیفی، نه کارتی ═══════════ */
/* در طرحِ کارتی، برچسبِ «شما می‌خرید»/«می‌فروشید»/«تومان» روی هر ۲۸ قلم
   تکرار می‌شد ⇒ ۱۳۸ پیکسل برای هر قلم و ۵.۳ صفحه اسکرول.
   حالا برچسب‌ها یک بار در سرتیترِ چسبان می‌آیند و هر قلم یک ردیف است. */
:root {
  /* ⭐ چیدمانِ «مثلِ اپِ خودِ حسن» (۲۴ شهریور ۱۴۰۵): در راست‌به‌چپ ستونِ اول
     سمتِ **راست** رندر می‌شود ⇒ خرید راست · عنوان وسط · فروش چپ. */
  --board-cols: 95px minmax(0, 1fr) 95px;
  --ref-cols:   minmax(0, 1fr) 95px 95px;
  --board-gap:  4px;
}
@media (max-width: 359px) {
  :root { --board-cols: 86px minmax(0, 1fr) 86px; --ref-cols: minmax(0, 1fr) 86px 86px; }
}

/* سرتیترِ ستون‌ها — برچسب‌ها فقط یک بار.
   ⚠️ پس‌زمینه‌ی مات لازم است: نوارِ چسبان (`.stickybar`) تهش به شفاف می‌رود و
   بدونِ این، ردیفِ اولِ فهرست از زیرِ برچسب‌ها شبح‌وار دیده می‌شد و متن روی هم می‌افتاد. */
.boardhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 9px;
  background: var(--bg); }
.bh-grp {
  display: grid; grid-template-columns: var(--board-cols); gap: var(--board-gap);
  align-items: end; padding: 0 5px 5px 9px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px; font-weight: 600; line-height: 1.2;
}
.bh-grp.dup { display: none; }
.bh-cur  { color: var(--text-faint); font-weight: 400; text-align: center; grid-column: 2; grid-row: 1; }
.bh-buy  { color: var(--up-ink);   text-align: center; grid-column: 1; grid-row: 1; }
.bh-sell { color: var(--down-ink); text-align: center; grid-column: 3; grid-row: 1; }

.list { padding: 6px 14px 8px; display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); }
/* هر دسته (آب‌شده/سکه/…) بلوکِ خودش است تا در دسکتاپ بشود ستونی چیدش
   بدونِ اینکه هم‌دسته‌ای‌ها از هم جدا بیفتند. در موبایل رفتارش عینِ خودِ
   `.list` (تک‌ستونه با گپ) است — یک لایه‌ی شفاف، نه تغییرِ ظاهر. */
.list .cat-group { display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); }

.list .card {
  /* کشو که باز می‌شود کارت جلوی چشم می‌آید؛ نوارِ چسبانِ بالا نباید رویش بیفتد */
  /* + سرگروهِ چسبانِ دسته (~۴۲px)؛ بدونِ آن کارت زیرِ سرگروه می‌رفت */
  scroll-margin-top: calc(var(--topbar-h) + var(--safe-t) + var(--sticky-h) + 48px);
  display: grid; grid-template-columns: var(--board-cols); gap: var(--board-gap);
  align-items: center;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 5px 5px 5px 6px;
  /* ⚠️ `translateZ(0)` این‌جا بود (۱۷ سپتامبر ۲۰۲۶) برای «کارتِ خالی تا اسکرول» —
     تشخیصِ غلط بود. کارت را پرده‌ی کدرِ `.grouphead::before` می‌پوشاند؛ نگاه کن همان‌جا. */
}

/* ⚠️⚠️ `grid-row: 1` روی هر سه **واجب** است. وقتی ستون‌ها صریح‌اند ولی ردیف نه،
   جایگذاریِ خودکارِ گرید مکان‌نما را جلو می‌برد و دیگر به ستونِ **عقب‌تر**
   برنمی‌گردد: عنوان ستونِ ۲ را می‌گرفت، بعد خرید (ستونِ ۱) مجبور می‌شد به
   ردیفِ دوم برود ⇒ هر ردیف دو سطر و پر از فضای خالی می‌شد.
   (۲۵ شهریور ۱۴۰۵، علیرضا از روی گوشی دید.) */
.ci { min-width: 0; grid-column: 2; grid-row: 1; }
.list .card > .px.buy  { grid-column: 1; grid-row: 1; }
.list .card > .px.sell { grid-column: 3; grid-row: 1; }
.list .card > .drawer  { grid-row: 2; }
/* کارتِ مرجع (فقط نمایش) خرید/فروش ندارد ⇒ چیدمانِ قدیمیِ خودش را نگه می‌دارد */
.list .card.ref { grid-template-columns: var(--ref-cols); }
.list .card.ref > .ci { grid-column: 1; grid-row: 1; }
.list .card.ref > .ref-price { grid-row: 1; }
/* عنوان وقتی کشوی حباب فعال است دکمه می‌شود — پس باید عینِ همان div
   دیده شود: بی‌قاب، بی‌پس‌زمینه، متن راست‌چین. */
button.ci {
  /* ⚠️ فلش **بیرونِ جریانِ گرید** است. وقتی ستونِ خودش را داشت (۱۴px این‌طرف،
     ۱۴px آن‌طرف برای تقارن) ۲۸ پیکسل از ۱۰۶ پیکسلِ ستونِ عنوان را می‌خورد و
     نامِ هر پنج آب‌شده «آب‌شده نقد …» می‌شد. حالا عنوان کلِ عرض را دارد. */
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  gap: 0; background: none; border: 0; padding: 2px 0; margin: 0;
  font: inherit; color: inherit; text-align: center; cursor: pointer;
  border-radius: 8px;
}
button.ci > .card-title, button.ci > .card-unit { grid-column: 1; }
button.ci .caret {
  position: absolute; inset-inline-end: 0; bottom: 0;
  width: 14px; height: 14px;
  /* ⚠️ --text-faint خیلی محو بود و مثلِ خط‌تیره‌ی سرگردان دیده می‌شد، نه فلشِ «بازشدنی». */
  fill: var(--text-dim); transition: transform .18s;
}
/* خطِ ریزِ واحد زیرِ فلش نرود */
button.ci > .card-unit { padding-inline-end: 14px; }
button.ci[aria-expanded="true"] .caret { transform: rotate(180deg); fill: var(--gold-ink); }
button.ci:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.list .card.ref button.ci { grid-template-columns: minmax(0, 1fr) 16px; text-align: start; }
.list .card.ref button.ci > .card-title,
.list .card.ref button.ci > .card-unit { grid-column: 1; }
.list .card.ref button.ci .caret { grid-column: 2; width: 16px; height: 16px; }

/* ── کشوی «حباب و جزئیات» ─────────────────────────────────────
   تمامِ عرضِ کارت را می‌گیرد و زیرِ هر سه ستون می‌نشیند، پس چیدمانِ
   سه‌ستونه‌ی تابلو دست‌نخورده می‌ماند. */
.drawer {
  grid-column: 1 / -1; margin-top: 6px; padding: 9px 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 9px; animation: drawer-in .18s ease-out;
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
  button.ci .caret { transition: none; }
}
.dr-grid { display: grid; gap: 6px; }
.dr-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 4px 8px; font-size: 12px; color: var(--text-dim);
}
.dr-row > b {
  font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dr-row > b .cur { font-size: 10px; font-weight: 400; color: var(--text-faint); margin-inline-start: 3px; }
.dr-row > b .sgn { margin-inline-end: 2px; }
.dr-row > small { grid-column: 1 / -1; font-size: 10.5px; color: var(--text-faint); }
.dr-row .bub.over  { color: var(--warn-ink); }
.dr-row .bub.under { color: var(--up-ink); }
.bub-pct { font-weight: 700; }
.bub-pct.over  { color: var(--warn-ink); }
.bub-pct.under { color: var(--up-ink); }
/* ── نوارِ «نسبت به ۳۰ روزِ اخیر» ─────────────────────────────
   بدونِ این، «٪۲٫۹» فقط یک عدد است؛ با این، تصمیم است. */
.trend { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tr-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; font-size: 11.5px; color: var(--text-dim);
}
.tr-head > b { font-size: 12px; font-weight: 700; }
.tr-head .bub.same { color: var(--text-dim); }
.tr-bar {
  position: relative; height: 6px; margin: 7px 0 5px; border-radius: 999px;
  /* ⚠️ `to left` عمدی است: نشانه‌ها با inset-inline-start از **راست** چیده
     می‌شوند (راست‌به‌چپ)، پس ارزان باید سمتِ راست باشد. با ۹۰deg گرادیان
     برعکسِ نشانه‌ها می‌افتاد و «ارزان» روی رنگِ گران می‌نشست. */
  background: linear-gradient(to left, var(--up-bg), var(--surface-3), var(--warn-bg));
  border: 1px solid var(--line-soft);
}
.tr-bar > i {
  position: absolute; top: 50%; width: 2px; height: 12px;
  transform: translate(50%, -50%); border-radius: 2px;
}
.tr-bar > i.tr-avg { background: var(--text-faint); }
/* ⚠️ اختصاصیت باید هم‌تراز `.tr-bar > i` باشد وگرنه width: 2px برنده می‌شود
   و نقطه‌ی «الان» به یک خطِ نازک تبدیل می‌شود (همین اتفاق افتاد). */
.tr-bar > i.tr-now {
  width: 10px; height: 10px; border-radius: 999px;
  border: 2px solid var(--surface-2); box-shadow: 0 0 0 1px var(--line);
}
.tr-bar > i.tr-now.over  { background: var(--warn-ink); }
.tr-bar > i.tr-now.under { background: var(--up-ink); }
.tr-bar > i.tr-now.same  { background: var(--text-dim); }
.tr-foot {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 10px; color: var(--text-faint); font-variant-numeric: tabular-nums;
}

/* ⭐ کلیدِ «جزئیات بیشتر» (۲۴ شهریور ۱۴۰۵) — حباب، ارزشِ ذاتی و توضیحِ اختلافِ
   فروشگاه پیش‌فرض بسته‌اند. حرفِ حسن: «اپ شلوغ شده و آدم گیج می‌شود». */
.dr-more {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; min-height: 34px; margin-top: 8px; padding: 6px 10px;
  background: none; border: 0; border-top: 1px dashed var(--line-soft);
  border-radius: 0; font: inherit; font-size: 11px; font-weight: 700;
  color: var(--text-dim); cursor: pointer;
}
.dr-more .caret { width: 14px; height: 14px; fill: var(--text-faint); transition: transform .18s; }
/* قاعده‌ی موبایلِ همین پروژه: هدفِ لمسی ≥ ۴۴px. روی ماوس ۳۴ کافی است و
   کشو را بی‌دلیل بلند نمی‌کند. */
@media (pointer: coarse) { .dr-more { min-height: 44px; } }
.dr-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.drawer.pro .dr-more .caret { transform: rotate(180deg); fill: var(--gold-ink); }
.drawer.pro .dr-more { color: var(--gold-ink); }
/* تا وقتی جزئیات بسته است، کشو فقط نمودارِ روز را نشان می‌دهد */
.drawer:not(.pro) .dr-pro,
.drawer:not(.pro) .mc-note { display: none; }
.dr-pro:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .dr-more .caret { transition: none; } }

/* دکمه‌ی ساختِ هشدار — هدفِ لمسی ۴۴px، طبقِ قاعده‌ی موبایلِ همین پروژه */
.dr-alert {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 40px; margin-top: 9px; padding: 8px 10px;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 9px; font: inherit; font-size: 12px; font-weight: 700;
  color: var(--text); cursor: pointer;
}
.dr-alert svg { width: 15px; height: 15px; fill: var(--gold-ink); flex: 0 0 auto; }
.dr-alert:active { transform: scale(.99); }
.dr-alert:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── مودالِ هشدار ─────────────────────────────────────────── */
.al-form { display: grid; gap: 9px; }
.al-hint, .muted.sm { font-size: 11px; line-height: 1.7; }
.al-h { font-size: 12.5px; color: var(--text-dim); margin: 14px 0 7px; }
.al-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center;
  gap: 6px; padding: 8px 10px; margin-bottom: 5px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 9px;
  font-size: 12px;
}
.al-row.done { opacity: .62; }
.al-txt { overflow-wrap: anywhere; }
.al-del {
  min-height: 32px; background: none; border: 0; color: var(--text-faint);
  font-size: 15px; cursor: pointer; border-radius: 8px;
}
.al-del:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
/* سودِ پله‌ای — خبرِ خوب، پس سبزِ «رو به بالا»ی خودِ سامانه، نه زرد */
.vol-note {
  margin: 10px 0 0; padding: 7px 11px; border-radius: 12px; line-height: 1.7;
  font-size: 12.5px; background: var(--buy-bg); border: 1px solid var(--buy-line);
  color: var(--text);
}
.vol-note b { color: var(--up-ink); }
.vol-note .vol-sub { color: var(--text-dim); font-size: 12px; }
.msg.warn { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
            padding: 9px 11px; border-radius: 9px; font-size: 12px; line-height: 1.7; }

.dr-basis, .dr-help, .dr-none {
  margin: 7px 0 0; font-size: 10.5px; line-height: 1.7; color: var(--text-faint);
}
.dr-basis { padding-top: 7px; border-top: 1px dashed var(--line); color: var(--text-dim); }
.dr-basis b { color: var(--text); font-weight: 700; }
.dr-none { margin: 0; }
.card-title {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere; hyphens: none;
}
.card-unit {
  font-size: 9.5px; color: var(--text-dim); display: flex; align-items: center;
  justify-content: center; gap: 3px; flex-wrap: nowrap; margin-top: 1px;
  min-width: 0; overflow: hidden;
}
.list .card.ref .card-unit { justify-content: flex-start; }
.card-unit .u { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-unit .badge { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
.card-unit .chg   { flex: 0 0 auto; }
/* ⚠️ ستونِ وسط روی گوشی ~۱۰۶px است و «آب‌شده نقد پس‌فردا» در یک خط جا نمی‌شود.
   با nowrap هر پنج آب‌شده «آب‌شده نقد …» می‌شدند و از هم تشخیص‌دادنی نبودند.
   دو خط اجازه دارد؛ ارتفاعِ ردیف هنوز از ۴۴px دکمه‌ها بیشتر نمی‌شود. */
.card-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: 12px; line-height: 1.22;
  white-space: normal; overflow-wrap: anywhere;
}
/* تغییرِ قیمت — وقتی تغییری نیست هیچ نشان نده.
   دایره‌ی «—» قبلی شبیهِ دکمه‌ی حذف دیده می‌شد و جا می‌گرفت. */
.chg {
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; padding: 1px 5px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 3px;
}
.chg .arw { font-size: 8px; line-height: 1; }
.chg .num { font-variant-numeric: tabular-nums; }
.chg.up   { color: var(--up);   background: var(--up-bg); }
.chg.down { color: var(--down); background: var(--down-bg); }
.chg.flat { display: none; }

/* سلولِ قیمت. جعبه‌ی پرِ صورتی/سبز «آب‌نباتی» دیده می‌شد؛ حالا زمینه آرام است
   و رنگ فقط در خودِ عدد و یک خطِ نازکِ زیرش می‌نشیند — تابلوی بازار، نه شکلات. */
/* ⚠️ خواسته‌ی علیرضا (۱۰ شهریور ۱۴۰۵): «قیمتِ خرید و فروش را دکمه‌مانند کن تا
   مشتری با زدنِ روی هرکدام بتواند بخرد یا بفروشد.» قبلاً یک سلولِ تختِ بی‌قاب بود
   و اصلاً به‌نظر نمی‌آمد که فشردنی است.
   ⚠️ ارتفاع ۴۴ است نه ۴۰ — قانونِ خودِ پروژه: هر هدفِ لمسی ≥ ۴۴px. */
.px {
  position: relative;
  min-height: 44px; padding: 6px 4px; border-radius: 11px; text-align: center;
  background: var(--px-bg, var(--surface-2));
  border: 1px solid var(--px-line, var(--line-soft));
  box-shadow: var(--px-shadow);
  cursor: pointer; font-family: inherit; color: var(--text);
  transition: transform .12s, border-color .15s, background .15s, box-shadow .12s;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; overflow: hidden;
}
/* فشردنِ واقعی: دکمه یک پله پایین می‌رود و سایه‌اش می‌رود — بازخوردی که
   انگشت روی گوشی حس می‌کند و می‌فهمد کارِ خرید انجام شد. */
.px:active:not(.off) { transform: translateY(1px) scale(.985); box-shadow: none; }
.px:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.px:disabled { cursor: default; }
.px .val {
  font-size: clamp(10.5px, 3.25vw, 13px);
  font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -.35px; line-height: 1.25; white-space: nowrap;
}
.px .cur { display: none; }          /* «تومان» یک بار در سرتیتر آمده */
.px .val.empty { font-size: 10px; white-space: normal; color: var(--text-faint); font-weight: 400; }
/* خطِ ریزِ دومِ زیرِ قیمتِ آب‌شده: قیمتِ یک گرمِ ۷۵۰. هم‌رنگِ عددِ بالا ولی
   کم‌جان‌تر و ریزتر — عددِ اصلیِ معامله همان مثقال است، این فقط کمکِ ذهنی است. */
.px .gram {
  font-size: clamp(8.5px, 2.4vw, 10px);
  font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: -.2px; line-height: 1.2; white-space: nowrap;
  margin-top: 1px;
}
/* ⚠️ اینجا `opacity` ننویس — با ۰٫۷۲ کنتراستِ تمِ روشن به ۳٫۵۸ می‌افتاد (اندازه‌گیری شد).
   تمایز از عددِ اصلی با اندازه (۹ در برابر ۱۳ پیکسل) و وزنِ سبک‌تر گرفته می‌شود. */
.px.buy  { color: var(--up-ink);   --px-bg: var(--buy-bg);  --px-line: var(--buy-line); }
.px.sell { color: var(--down-ink); --px-bg: var(--sell-bg); --px-line: var(--sell-line); }

@media (hover: hover) {
  .px:hover:not(:disabled) { border-color: var(--gold); }
  .tab:hover:not(.active) { border-color: var(--line); color: var(--text); }
  .btn-primary:hover:not(:disabled) { background: var(--gold-fill); }
}

/* ردیفِ مرجع (فقط نمایش) */
.list .card.ref { background: transparent; border-style: dashed; }
.ref-price {
  grid-column: 2 / span 2; text-align: center; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--gold-lite);
}
/* واحدِ کارتِ مرجع **دلار** است، نه تومانِ سرتیتر ⇒ برخلافِ سلول‌های قیمت
   باید دیده شود، وگرنه «۴٬۳۷۱» بی‌واحد کنارِ «مبالغ به تومان» می‌نشیند. */
.ref-price .cur { font-size: 10px; font-weight: 400; color: var(--text-faint); margin-inline-start: 4px; }
.ref-price.empty { font-size: 10px; color: var(--text-faint); font-weight: 400; }


/* ═══ بازپس‌گیریِ فضای بالا ════════════════════════════════
   قبلاً ۲۷٪ ارتفاعِ گوشی پیش از اولین قیمت خرج می‌شد. جستجو موقعِ
   اسکرول جمع می‌شود و موقعِ برگشت به بالا خودش برمی‌گردد؛ چیپ‌ها و
   سرتیترِ ستون‌ها می‌مانند چون حینِ مرور واقعاً لازم‌اند. */
:root { --sticky-h: 96px; }   /* با اندازه‌ی واقعیِ نوار در app.js جایگزین می‌شود */
.stickybar .search {
  transition: max-height .22s ease, opacity .18s ease, margin .22s ease;
  max-height: 44px; overflow: hidden;
}
body.scrolled .stickybar .search { max-height: 0; opacity: 0; margin-bottom: -9px; }
body.scrolled .stickybar { padding-top: 6px; padding-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .stickybar .search { transition: none; }
}

/* ═══ سرگروهِ دسته ═════════════════════════════════════════
   ۲۲ ردیفِ یک‌شکل یک توده است. سرگروه به چشم ریتم و جای استراحت می‌دهد
   و «سکه» را از «آب‌شده» در نگاه جدا می‌کند. */
.grouphead {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 4px 5px; margin-top: 2px;
  /* وسطِ فهرست باید بدانی کدام دسته را می‌بینی */
  position: sticky; z-index: 8;
  top: calc(var(--topbar-h) + var(--safe-t) + var(--sticky-h, 52px));
  /* ⚠️ پس‌زمینه باید تا پایینِ سرگروه **کدر** بماند، نه گرادیانِ شفاف‌شونده.
     وقتی سرگروه چسبان (sticky) بالای صفحه می‌ماند، کارتِ زیرش از همین قسمتِ
     شفاف بیرون می‌زند و یک تکه‌ی «بریده» از ردیفِ قبلی پشتِ سرگروه دیده
     می‌شود. (۱۶ سپتامبر ۲۰۲۶، علیرضا از روی گوشیِ خودش دید.) */
  background: var(--bg);
}
/* ⚠️ تورِ ایمنیِ دوم: پرده‌ی کدرِ رو به‌بالا تا کارتِ زیرین از شکافِ بینِ نوار و
   سرگروهِ چسبان دیده نشود (۱۶ سپتامبر ۲۰۲۶).
   ⚠️⚠️ **فقط وقتی سرگروه واقعاً چسبیده است** (`.stuck`، از `app.js`). بی‌شرط که بود،
   هر سرگروه ۸۰px آخرِ دسته‌ی قبلی را می‌پوشاند: کارت‌ها از وسط بریده، دسته‌های
   کوچک («نقره») کاملاً خالی. (۱۷ سپتامبر ۲۰۲۶، علیرضا از روی عکسِ mellicoin.com.) */
.grouphead.stuck::before {
  /* ⚠️ عمداً بدونِ z-index منفی: با -1 این لایه داخلِ استکِ خودِ سرگروه
     عقب می‌رفت و در برخی مرورگرها پشتِ کارتِ خارجی (که در استکِ دیگری است)
     هم قرار می‌گرفت. با ترتیبِ طبیعی (بدونِ z-index)، همیشه همراهِ خودِ
     سرگروه یک واحد حساب می‌شود. */
  content: ''; position: absolute; inset-inline: 0; bottom: 100%;
  height: 80px; background: var(--bg); pointer-events: none;
}
.grouphead:first-child { padding-top: 4px; margin-top: 0; }
/* سرگروهِ قبلی وقتی بعدی رویش می‌آید: فقط پس‌زمینه‌اش بماند (`markStuckHeads` در app.js) */
.grouphead.overtaken > * { visibility: hidden; }
.gh-name { font-size: 12px; font-weight: 800; letter-spacing: .2px; color: var(--text); }
.gh-n {
  font-size: 10px; color: var(--text-faint); font-weight: 500;
  margin-inline-start: auto; font-variant-numeric: tabular-nums;
}

/* ═══ تپشِ قیمت ════════════════════════════════════════════
   قیمت هر ۱۵ ثانیه عوض می‌شود و تا امروز هیچ نشانه‌ای نداشت.
   یک تپشِ کوتاه = همان حسِ «زنده بودن» تابلوی معاملاتی.
   ⚠️ به `background` خودِ جعبه دست نمی‌زنیم: قبلاً انیمیشن پس‌زمینه را با `none` عوض
   می‌کرد و رنگ/گرادیانِ تمِ شب (color-mix، گرادیان) یک لحظه می‌پرید — روی گوشی جعبه
   سفید چشمک می‌زد. حالا یک لایه‌ی رنگیِ درونی (inset shadow) رویش می‌آید و محو می‌شود. */
@keyframes flashUp {
  0%   { box-shadow: inset 0 0 0 999px var(--flash-up),   0 0 0 1px var(--up); }
  100% { box-shadow: inset 0 0 0 999px transparent,       0 0 0 1px transparent; }
}
@keyframes flashDown {
  0%   { box-shadow: inset 0 0 0 999px var(--flash-down), 0 0 0 1px var(--down); }
  100% { box-shadow: inset 0 0 0 999px transparent,       0 0 0 1px transparent; }
}
.list .card .px.flash-up   { animation: flashUp   1.1s ease-out; }
.list .card .px.flash-down { animation: flashDown 1.1s ease-out; }

.badge {
  display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px;
  background: var(--surface-3); color: var(--badge-ink); border: 1px solid var(--line);
}
.badge.demo { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
/* «آخرین قیمت» روی کارتِ کهنه (منبعِ قیمت موقتاً قطع، ۲۶ سپ ۲۰۲۶): ساعت + ساعتِ آخرین قیمتِ واقعی.
   `.card-unit .badge.old` از `html[data-board="ios"] .badge` پرزورتر است تا در همه‌ی تم‌ها کهربایی بماند.
   کوچک نمی‌شود (ساعت اصلِ خبر است)؛ اگر جا تنگ شد نامِ واحد کوتاه می‌شود. */
.list .card .card-unit .badge.old {
  display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto;
  padding: 1px 6px 1px 5px; line-height: 1.35;
  background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line);
}
/* روی کارتِ کهنه نشانِ ساعت **جای** قرصِ «▲ تغییر» می‌نشیند: تغییرِ آخرین قیمتِ واقعی خبرِ امروز نیست،
   و دو قرص کنارِ هم در ردیفِ دسکتاپ (۱۳۶۶) نامِ کالا را می‌بُرید. */
.list .card .card-unit:has(.badge.old) .chg { display: none; }
.badge.old svg { width: 10px; height: 10px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* ⚡ نشانِ حدِ فعالِ خودِ مشتری روی کارتِ تابلو (۲۰ سپتامبر ۲۰۲۶، انتخابِ علیرضا).
   داخلِ ردیفِ واحد می‌نشیند تا کارت بلندتر نشود؛ فقط برای کسی که حد گذاشته دیده
   می‌شود، پس برای بقیه هیچ عنصرِ تازه‌ای به تابلو اضافه نمی‌کند. */
.as-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700;
  color: var(--gold-ink); background: var(--gold-soft, rgba(211,175,55,.14));
  border: 1px solid var(--gold-line, rgba(211,175,55,.32));
}
.as-tag > i { font-style: normal; font-size: 9px; line-height: 1; }
.as-tag > em { font-style: normal; font-weight: 600; opacity: .85; }
/* حدِ فعال ⇒ دکمه‌ی کشو طلایی می‌شود تا «داری» از «بگذار» جدا دیده شود */
.dr-alert.on {
  color: var(--gold-ink); background: var(--gold-soft, rgba(211,175,55,.14));
  border-color: var(--gold-line, rgba(211,175,55,.32));
}

.listfoot { text-align: center; color: var(--text-faint); font-size: 11px; padding: 6px 16px 14px; margin: 0; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--text-dim); }
.empty-state .ico { font-size: 34px; display: block; margin-bottom: 10px; opacity: .5; }

/* اسکلتِ بارگذاری */
.skel { background: var(--surface); border: 1px solid var(--line-soft);
        border-radius: var(--radius); height: 104px; overflow: hidden; position: relative; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.045), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%) } to { transform: translateX(100%) } }

/* ═══ ناوبریِ پایین ════════════════════════════════════════ */
.bottomnav {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40;
  height: calc(var(--bottomnav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: var(--nav-bg, rgba(19,26,50,.96));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.bnav {
  position: relative; border: none; background: none; cursor: pointer;
  color: var(--text-faint); font-family: inherit; font-size: 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: color .15s;
}
.bnav svg { width: 22px; height: 22px; fill: currentColor; }
.bnav.active { color: var(--gold); }
.bnav:active { background: rgba(255,255,255,.04); }
.nav-badge {
  position: absolute; top: 8px; inset-inline-end: 22%;
  min-width: 8px; height: 8px; border-radius: 999px; background: var(--down);
}

/* ═══ صفحه‌های دیگر ════════════════════════════════════════ */
.pad { padding: 14px; }
.sec-title { font-size: 13px; font-weight: 700; color: var(--text-dim);
             margin: 18px 0 9px; letter-spacing: .3px; }
.sec-title:first-child { margin-top: 4px; }
.muted { color: var(--text-dim); font-size: 12.5px; }


.info-card { line-height: 1.9; }
.faq { margin: 0; font-size: 13px; }
.faq dt { font-weight: 700; color: var(--gold-lite); margin-top: 12px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: 3px 0 0; color: var(--text-dim); }
.faq b { color: var(--text); font-weight: 600; }

.summary-card { background: var(--surface); border: 1px solid var(--line-soft);
                border-radius: var(--radius); padding: 13px; }
.sum-row { display: flex; justify-content: space-between; gap: 8px; align-items: center;
           padding: 8px 0; font-size: 13px; border-top: 1px solid var(--line-soft); }
.sum-row:first-child { border-top: none; padding-top: 0; }
.sum-row .up { color: var(--up); } .sum-row .down { color: var(--down); }
.sum-row .num { font-variant-numeric: tabular-nums; }

.ord { background: var(--surface); border: 1px solid var(--line-soft);
       border-radius: var(--radius-sm); padding: 12px; margin-bottom: 8px; }
.ord-top { display: flex; justify-content: space-between; align-items: center; gap: 8px;
           margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.ord-mid { display: flex; justify-content: space-between; gap: 8px; font-size: 13px;
           color: var(--text-dim); margin-bottom: 4px; }
.ord-bot { font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums;
           display: flex; justify-content: space-between; gap: 8px; }
.chip { padding: 3px 9px; border-radius: 999px; font-size: 11px; white-space: nowrap; font-weight: 600; }
.chip.pending   { background: var(--warn-bg); color: var(--warn-ink); }
.chip.confirmed { background: var(--up-bg); color: var(--up-ink); }
.chip.cancelled { background: var(--surface-3); color: var(--text-dim); }
.chip.returned  { background: var(--down-bg); color: var(--down-ink); }

.phone-row { font-size: 16px; margin-bottom: 8px; }
.phone-row a { text-decoration: none; display: inline-flex; align-items: center;
               gap: 7px; min-height: 44px; font-variant-numeric: tabular-nums; }
.ver { text-align: center; margin-top: 22px; font-size: 11px; }

/* ═══ مودال (bottom sheet) ═════════════════════════════════ */
.sheet-bg {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4,7,16,.72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: grid; place-items: end center;
  animation: fade .18s ease-out;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.sheet {
  width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
  padding: 8px 16px 0;
  /* روی گوشیِ کوتاه با کیبوردِ باز، مودال باید خودش اسکرول شود نه صفحه */
  max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 -10px 44px rgba(0,0,0,.55);
  animation: slideup .24s cubic-bezier(.2,.8,.3,1);
}
@keyframes slideup { from { transform: translateY(18px) } to { transform: none } }
/* دسکتاپ: مثلِ پنجره‌ی مک از خودِ وسطِ صفحه با کمی بزرگ‌شدنِ فنری باز می‌شود، نه از پایین */
@keyframes sheet-pop { from { opacity: 0; transform: translateY(6px) scale(.95) } to { opacity: 1; transform: none } }
.grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--line);
           margin: 0 auto 12px; }

/* ═══ صفحه‌ی انتظارِ تأیید ═════════════════════════════════
   روی همه‌چیز می‌نشیند (بالاتر از برگه‌ها، پایین‌تر از پیامِ کوتاه) و هیچ راهِ بستنی
   ندارد: مشتری تا تصمیمِ مدیر همین‌جا می‌ماند. رنگ‌ها فقط توکن — در هر ۶ چیدمان و دو تم. */
.wait-bg {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: start center;
  padding: calc(var(--safe-t) + 11vh) 16px 16px;
  background: rgba(4,7,16,.58);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  animation: fade .2s ease-out;
  touch-action: none; overscroll-behavior: contain;
}
body.wait-on { overflow: hidden; }
.wait-card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--surface-solid); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 20px 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  animation: slideup .26s cubic-bezier(.2,.8,.3,1);
  outline: none;
}
.wait-ring { position: relative; width: 116px; height: 116px; margin: 0 auto 16px; }
.wait-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wait-ring circle { fill: none; stroke-width: 7; }
.wr-track { stroke: var(--line); }
.wr-bar {
  stroke: var(--gold); stroke-linecap: round;
  stroke-dasharray: 339.3; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke .25s;
}
#waitNum {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 800; line-height: 1; color: var(--text);
}
#waitNum.sm { font-size: 25px; }
.wait-card h2 { margin: 0 0 6px; font-size: 17px; line-height: 1.7; color: var(--text); }
.wait-card p  { margin: 0; font-size: 14px; line-height: 1.9; color: var(--text-dim); }
.wait-what {
  margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--text-dim);
}
.wait-what:empty { display: none; }
.wait-what b { color: var(--text); font-weight: 700; }
.wait-acts { display: flex; gap: 10px; margin-top: 18px; }
/* ⚠️ `margin-top: 9px`ِ `.btn-ghost` برای دکمه‌های **روی هم** نوشته شده؛ در این ردیفِ
   افقی دکمه‌ی آرام را ۹ پیکسل پایین‌تر می‌انداخت و دو دکمه ناهم‌تراز دیده می‌شدند. */
.wait-acts .btn { flex: 1 1 0; min-height: 46px; margin-top: 0; }
#waitNum svg { position: static; width: 46px; height: 46px; transform: none; fill: none;
               stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.wait-card.ok .wr-bar, .wait-card.bad .wr-bar { stroke-dasharray: none; }   /* حلقه‌ی کامل درز نداشته باشد */
.wait-card.ok  .wr-bar { stroke: var(--up); }
.wait-card.ok  #waitNum { color: var(--up-ink); }
.wait-card.bad .wr-bar { stroke: var(--down); }
.wait-card.bad #waitNum { color: var(--down-ink); }
@media (prefers-reduced-motion: reduce) {
  .wait-bg, .wait-card { animation: none; }
  .wr-bar { transition: none; }
}

/* دکمه‌ی ثبت همیشه دیده شود — روی گوشیِ کوتاه با کیبوردِ باز نباید زیرِ اسکرول گم شود */
.sheet-foot {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--surface); border-top: 1px solid var(--line-soft);
  margin: 6px -16px 0; padding: 11px 16px calc(14px + var(--safe-b));
}
.sheet-foot .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-amount { font-variant-numeric: tabular-nums; font-weight: 700; opacity: .82; font-size: 14px; }
.btn-amount::before { content: '·'; margin-inline-end: 7px; opacity: .6; }
.btn-amount:empty { display: none; }
.sheet h2 { margin: 0 0 3px; font-size: 17px; }
.sheet .sub { color: var(--text-dim); font-size: 12.5px; margin: 0 0 14px; }
.sheet-head { display: flex; align-items: center; gap: 9px; }
.side-chip { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.side-chip.buy  { background: var(--up-bg); color: var(--up-ink); }
.side-chip.sell { background: var(--down-bg); color: var(--down-ink); }

.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; }
/* ⚠️ `select` هم باید همین‌جا باشد: بدونِ آن، مرورگر رنگِ پیش‌فرضِ سیستم را
   می‌گذارد و در تمِ روشن یک جعبه‌ی مشکی وسطِ فرمِ شیشه‌ای می‌نشیند. */
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-family: inherit;
  font-size: 16px; /* زیرِ ۱۶ ⇒ زومِ خودکارِ آیفون */
}
/* ⚠️ پیکانِ کشویی را دست‌ساز نکن: با دو گرادیان در راست‌به‌چپ دو مثلثِ جدا
   درمی‌آید. پیکانِ خودِ مرورگر رنگِ `color` را می‌گیرد و همیشه درست می‌نشیند. */
.field select { padding-inline-end: 34px; cursor: pointer; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }
.field input[inputmode="numeric"], .field input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }

.stepper { display: flex; align-items: stretch; gap: 8px; }
.stepper input { text-align: center; font-weight: 700; font-size: 18px; }
.step-btn {
  width: 48px; min-height: 48px; flex: 0 0 auto; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 22px; font-family: inherit; cursor: pointer;
}
.step-btn:active { background: var(--surface-3); }

.quick { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.chip-btn {
  min-height: 44px; padding: 7px 14px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text-dim);
  font-family: inherit; font-size: 13.5px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.chip-btn:active { background: var(--surface-3); color: var(--text); }
.limit-hint { margin-top: 8px; font-size: 11.5px; }

.summary {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px; margin: 14px 0; font-size: 13px;
}
.summary .row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; }
.summary .row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 9px; }
.summary .row.total b { color: var(--gold-lite); font-size: 17px; }
.summary .num { font-variant-numeric: tabular-nums; }

.chart-box { background: var(--surface-2); border: 1px solid var(--line);
             border-radius: 12px; padding: 10px; margin-bottom: 14px; }
.chart-box svg { width: 100%; height: 60px; display: block; }
.chart-cap { text-align: center; font-size: 10px; color: var(--text-faint); margin-top: 5px; }

.code-input {
  text-align: center; letter-spacing: 12px; font-size: 24px !important;
  font-weight: 700; font-variant-numeric: tabular-nums; padding-inline-start: 25px !important;
}

/* ═══ دکمه و پیام ══════════════════════════════════════════ */
.btn {
  width: 100%; min-height: 50px; padding: 13px; border-radius: 13px; border: none;
  font-family: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  transition: background .15s, opacity .15s, transform .1s;
}
.btn:active:not(:disabled) { transform: scale(.985); }
.btn-primary { background: var(--gold); color: var(--on-gold); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; border: 1px solid var(--line); color: var(--text-dim); margin-top: 9px; }
.btn-sm { width: auto; min-height: 40px; padding: 8px 18px; font-size: 13.5px;
          border-radius: 10px; background: var(--gold); color: var(--on-gold); margin: 0; flex: 0 0 auto; }
.btn-sm.btn-ghost { background: transparent; color: var(--text-dim); }

.msg { padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 12px; line-height: 1.8; }
.msg.err { background: var(--down-bg); border: 1px solid var(--down-line); color: var(--down-ink); }
/* ⚠️ توکن، نه کدِ ثابت: پیش‌فرضِ تازه‌واردها تمِ روشن است و رنگِ ثابتِ تمِ تیره
   پیامِ «کد پیامک شد» را روی پس‌زمینه‌ی روشن ناخوانا می‌کرد. */
.msg.ok  { background: var(--up-bg);   border: 1px solid var(--up-line);   color: var(--up-ink); }

.toast {
  position: fixed; inset-inline: 14px; z-index: 90;
  bottom: calc(var(--bottomnav-h) + var(--safe-b) + 14px);
  padding: 13px 16px; border-radius: 13px; text-align: center;
  font-size: 13.5px; box-shadow: var(--shadow); max-width: 420px;
  margin-inline: auto; animation: rise .22s ease-out;
}
/* پس‌زمینه‌ی پیام‌ک باید مات باشد (روی محتوا می‌نشیند)، پس سطحِ تم + خط و متنِ رنگی */
.toast.ok  { background: var(--surface); border: 1px solid var(--up-line);   color: var(--up-ink); }
.toast.err { background: var(--surface); border: 1px solid var(--down-line); color: var(--down-ink); }
@keyframes rise { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ═══ صفحه‌های بزرگ‌تر ═════════════════════════════════════ */
@media (min-width: 640px) {
  /* ⚠️ ستون‌بندی حالا داخلِ هر `.cat-group` است، نه روی خودِ `.list`.
     وگرنه گرید فقط به ترتیبِ ظاهرشدن پر می‌شد و قلم‌های هم‌دسته
     (نقدی/نقد فردا/کارتخوان) یکی‌درمیان بینِ دو ستون پخش می‌شدند.
     (۱۶ سپتامبر ۲۰۲۶، علیرضا از روی عکسِ mellicoin.com دید.)
     `.list` خودش تک‌ستونه می‌ماند تا سرگروه و بلوکِ هر دسته کلِ عرض را بگیرند. */
  .list { grid-template-columns: minmax(0, 1fr); }
  /* ⚠️ align-items لازم است: در تابلوی دوستونه، بازشدنِ کشوی یک کارت
     کارتِ همسایه را هم تا همان ارتفاع کش می‌داد و وسطش خالی می‌ماند.
     با start هر کارت فقط به اندازه‌ی محتوای خودش بلند می‌شود. */
  .list .cat-group {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 1), auto);
    column-gap: 9px; row-gap: 5px; align-items: start;
  }
  .boardhead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-grp.dup { display: grid; }
  /* گروهِ هم‌واحد (`.uni`) روی دسکتاپ تک‌ستونه و تمام‌عرض بود ⇒ وسطِ هر ردیف
     صدها پیکسل خالی می‌ماند (ستونِ نامِ 1fr کش می‌آمد). کارت را محدود و وسط‌چین
     می‌کنیم تا دو قیمت کنارِ نام بنشینند، نه چسبیده به دو لبه. */
  .list .cat-group.uni > .card:not(.ref) { max-width: 560px; margin-inline: auto; }
}
@media (min-width: 900px) {
  .list, .stickybar, .banner, .notice, .pad, .listfoot, .bnrs, .updbar {
    max-width: 940px; margin-inline: auto;
  }
  .banner, .notice { margin-inline: auto; }
  .sheet-bg { place-items: center; padding: 20px; }
  .sheet { border-radius: 20px; max-height: 90dvh; padding-bottom: 20px;
           animation: sheet-pop .34s cubic-bezier(.2, .9, .3, 1.12); }
  .bottomnav { max-width: 940px; margin-inline: auto; border-radius: 16px 16px 0 0;
               border-inline: 1px solid var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; transition: none !important; }
}

/* ═══ کلیدِ روشن/تاریک ═════════════════════════════════════ */
.theme-btn {
  width: 40px; height: 40px; flex: 0 0 auto;
  display: grid; place-items: center; position: relative;
  border: 1px solid rgba(255,255,255,.18); border-radius: 11px;
  background: rgba(255,255,255,.07); color: var(--on-navy);
  cursor: pointer; padding: 0;
}
/* ناحیه‌ی لمسِ نامرئی تا ۴۴px روی گوشی، بی‌آنکه دکمه بزرگ‌تر دیده شود */
@media (pointer: coarse) { .theme-btn::after { content: ''; position: absolute; inset: -3px; } }
.theme-btn:active { background: rgba(255,255,255,.14); }
.theme-btn svg { width: 19px; height: 19px; fill: currentColor; display: block; }
/* آفتاب یعنی «برو روشن»، ماه یعنی «برو تاریک» — همیشه مقصد را نشان بده، نه وضعیتِ فعلی */
.theme-btn .ico-sun  { display: none; }
[data-theme="dark"] .theme-btn .ico-sun  { display: block; }
[data-theme="dark"] .theme-btn .ico-moon { display: none; }


/* ═══ چیزهایی که در تمِ روشن باید عوض شوند ══════════════════ */
[data-theme="light"] .bnav.active { color: var(--gold-ink); }
[data-theme="light"] .sheet-bg { background: rgba(20,24,58,.42); }
[data-theme="light"] .skel::after {
  background: linear-gradient(90deg, transparent, rgba(20,24,58,.06), transparent);
}
[data-theme="light"] .step-btn,
[data-theme="light"] .chip-btn { background: var(--surface-2); }

/* ═══ شیشه‌ی طلایی (تمِ روشن) ═══════════════════════════════
   نمونه‌هایی که علیرضا فرستاد: سطحِ نیمه‌شفاف، هاله‌ی نور، گوشه‌ی گرد.
   «مینیمال» این‌جا یعنی **کم‌کردن**: جعبه‌ی رنگیِ قیمت کلاً برداشته شد و
   رنگ فقط در خودِ عدد ماند — همان کار صفحه را «گران» کرد.
   ⚠ شیشه بدونِ نورِ پشتش دیده نمی‌شود: هاله‌ها باید داخلِ دیدِ کاربر باشند
     و نوارهای چسبان نیمه‌شفاف، وگرنه صفحه سفیدِ تخت می‌شود.
   ⚠ بلور (backdrop-filter) فقط روی سطوحِ بزرگ — روی ۲۵ ردیف گوشی را کند می‌کند.
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] body {
  /* پالت‌های رنگی (brand.js ← /palettes.css) کلِ زمینه را با --page-bg به فامِ خودشان می‌برند */
  background: var(--page-bg,
    radial-gradient(700px 480px at 88% -40px, rgba(228,196,116,.62) 0%, rgba(233,206,140,0) 62%),
    radial-gradient(560px 460px at -6% 26%,   rgba(222,214,196,.55) 0%, rgba(214,216,224,0) 60%),
    radial-gradient(620px 520px at 62% 88%,   rgba(235,220,182,.64) 0%, rgba(238,228,206,0) 64%),
    linear-gradient(180deg, #FCFAF4 0%, #F5F1E7 48%, #F0ECE1 100%) fixed);
}
[data-theme="light"] .topbar {
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 1px 0 rgba(24,22,18,.05), 0 8px 26px rgba(30,26,18,.06);
  color: var(--text);
}
[data-theme="light"] .brand-txt b {
  background: linear-gradient(100deg,#B98E1C 0%,#D9B54A 45%,#A87F14 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] .brand-txt small { color: var(--text-dim); }
[data-theme="light"] .brand .mark { box-shadow: 0 4px 18px rgba(201,162,39,.40); border-radius: 11px; }
[data-theme="light"] .theme-btn {
  background: rgba(255,255,255,.75); border-color: rgba(24,22,18,.10); color: var(--gold-ink);
  box-shadow: 0 2px 10px rgba(30,26,18,.07);
}
[data-theme="light"] .stickybar {
  background: linear-gradient(180deg, rgba(248,247,244,.80) 62%, rgba(248,247,244,0) 100%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
[data-theme="light"] .search input {
  background: rgba(255,255,255,.78); border: 1px solid rgba(24,22,18,.08);
  border-radius: 999px; box-shadow: 0 2px 12px rgba(30,26,18,.05);
}
[data-theme="light"] .tab {
  background: rgba(255,255,255,.66); border: 1px solid rgba(24,22,18,.07);
  box-shadow: 0 1px 6px rgba(30,26,18,.04);
}
[data-theme="light"] .tab.active {
  background: linear-gradient(135deg,#EFD98F 0%,#D8B54E 48%,#BE9A31 100%);
  border-color: rgba(190,154,49,.55); color:#1A1508;
  box-shadow: 0 4px 18px rgba(201,162,39,.40);
}
[data-theme="light"] .list .card {
  background: linear-gradient(160deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 100%);
  border: 1px solid rgba(255,255,255,.90);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 6px 22px rgba(30,26,18,.07);
}
/* ⚠️ گرادیانِ بالا هم‌اختصاصیتِ `.list .card.off` است و چون بعدش می‌آید
   برنده می‌شد ⇒ ردیفِ خاموش در تمِ روشن اصلاً محو نمی‌شد. این قاعده باید
   این‌جا و **بعد** از آن بنشیند. (اندازه‌گیری شد، نه حدس.) */
[data-theme="light"] .list .card.off {
  background: linear-gradient(160deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.18) 100%);
  border-color: rgba(26,21,10,.08);
  box-shadow: none;
}
[data-theme="light"] .list .card:has(.drawer:not([hidden])) {
  border-color: rgba(201,162,39,.45);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 30px rgba(30,26,18,.11), 0 0 0 1px rgba(201,162,39,.14);
}
/* ⚠️ قبلاً در تمِ روشن جعبه‌ی رنگیِ قیمت کلاً برداشته شده بود («مینیمال یعنی
   کم‌کردن»). ولی نتیجه‌اش این شد که هیچ‌کس نمی‌فهمید این عدد فشردنی است.
   حالا برمی‌گردد، اما به‌شکلِ شیشه‌ی رنگیِ کم‌رمق: هم دکمه دیده می‌شود،
   هم صفحه شلوغ و ارزان نمی‌شود. */
[data-theme="light"] .px {
  border-radius: 12px; padding: 6px 3px;
}
[data-theme="light"] {
  --buy-bg:   linear-gradient(180deg, rgba(11,107,68,.14) 0%, rgba(255,255,255,.72) 100%);
  --buy-line: rgba(11,107,68,.26);
  --sell-bg:  linear-gradient(180deg, rgba(163,42,32,.13) 0%, rgba(255,255,255,.72) 100%);
  --sell-line: rgba(163,42,32,.24);
  --px-shadow: 0 1px 2px rgba(30,26,18,.07);
}
[data-theme="light"] .grouphead {
  /* ⚠️ اینجا یک کپیِ دومِ همان قانونِ گرادیانی بود که در [style.css:638](#L638)
     رفع شد — این‌یکی چون بعداً در فایل می‌آید و برای تمِ روشن است، بی‌صدا
     همان گرادیانِ نیمه‌شفاف را دوباره برمی‌گرداند و همان تکه‌ی «بریده» را
     زیرِ سرگروهِ چسبان دوباره نمایان می‌کرد. (۱۶ سپتامبر ۲۰۲۶، علیرضا بعد از
     رفرش هم «حل نشد» گفت — علتش همین کپی بود.) */
  background: var(--bg);
  border-bottom: 1px solid rgba(24,22,18,.07);
}
[data-theme="light"] .gh-name { color: var(--text); font-weight: 700; letter-spacing: .3px; }
[data-theme="light"] .bottomnav {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border-top: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 -6px 24px rgba(30,26,18,.06);
}
[data-theme="light"] .bnav.active { color: var(--gold-ink); }
[data-theme="light"] .banner, [data-theme="light"] .notice {
  border-radius: 16px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(30,26,18,.05);
}
[data-theme="light"] .banner.info { background: rgba(255,255,255,.66); border-color: rgba(24,22,18,.08); }
[data-theme="light"] .notice { background: rgba(255,255,255,.70); border-color: rgba(201,162,39,.30); }
[data-theme="light"] .notice summary { color: var(--gold-ink); }
[data-theme="light"] .badge { background: rgba(255,255,255,.8); border-color: rgba(24,22,18,.08); border-radius: 999px; }
[data-theme="light"] .drawer, [data-theme="light"] .dr-grid { border-radius: 15px; }
[data-theme="light"] .dr-alert {
  border-radius: 999px; background: rgba(201,162,39,.10);
  border: 1px solid rgba(201,162,39,.34); color: var(--gold-ink);
}

/* ═══ نقشِ سکه و شمش ══════════════════════════════════════ */
.gh-ico {
  width: 22px; height: 22px; flex: 0 0 auto;
  filter: drop-shadow(0 2px 5px rgba(150,117,26,.38));
}

/* ═══ بازارِ بسته: قیمت می‌ماند، ولی «خاموش» دیده می‌شود ═══════
   خواسته‌ی علیرضا (۱۰ شهریور ۱۴۰۵): شب که معامله تعطیل است مشتری باید
   آخرین قیمت‌ها را کم‌رنگ ببیند، نه اینکه با یک دکمه‌ی مرده روبه‌رو شود.
   حاشیه‌ی خط‌چین علامتِ دومِ همان حرف است — رنگ به‌تنهایی برای کسی که
   کوررنگ است پیام نمی‌رساند. */
/* خاموش = نه رنگ، نه برجستگی، نه سایه. کنارِ دکمه‌ی زنده فوراً فرقش پیداست. */
/* ⭐ ردیفِ کاملاً بسته (هر دو سمت) — کلِ سطر محو و شیشه‌ای می‌شود، نه فقط
   دو دکمه‌ی قیمت. عنوان از متنِ اصلی به خاکستری می‌رود و پس‌زمینه شفاف‌تر
   می‌شود، پس چشم در یک نگاه ردیف‌های زنده را از مرده جدا می‌کند.
   ⚠️ `opacity` عمداً استفاده نشده — قاعده‌ی ثبت‌شده‌ی همین پروژه. */
.list .card.off {
  background: var(--surface-off);
  border-color: var(--line-off);
  box-shadow: none;
}
.list .card.off .card-title { color: var(--text-dim); font-weight: 600; }
.list .card.off .card-unit  { color: var(--text-faint); }
.list .card.off .caret      { fill: var(--text-faint); }
/* کشوی باز باید خوانا بماند، حتی روی ردیفِ خاموش */
.list .card.off .drawer { background: var(--surface-2); }

.px.off { --px-bg: var(--surface); --px-line: var(--line-soft);
          border-style: dashed; box-shadow: none; }
/* ⚠️ خواسته‌ی علیرضا (۲۴ شهریور ۱۴۰۵): «قیمتِ خرید سبز، قیمتِ فروش قرمز» —
   **بی‌استثنا**، حتی وقتی بازار بسته است. قبلاً هر دو خاکستریِ `--px-off` می‌شدند و
   شب کلِ تابلو بی‌رنگ بود. «خاموش» را خط‌چینِ حاشیه، نبودِ سایه و پس‌زمینه‌ی تخت
   می‌گویند — همان دو علامتِ غیررنگی که برای کوررنگ هم می‌ماند.
   کنتراستِ `--up-ink`/`--down-ink` در هر دو تم از قبل ≥۴٫۵ سنجیده شده. */
/* خواسته‌ی علیرضا (۲۴ شهریور ۱۴۰۵، بارِ دوم): «وقتی بازار بسته یا قیمت قدیمی است،
   قیمت را کم‌رنگ و محو نشان بده تا مشتری بفهمد غیرفعال است.»
   سبز و قرمز می‌مانند (خواسته‌ی خودش در همان روز) ولی **خاکستری‌شده**‌اند، عدد
   سبک‌تر است و یک نوارِ مورّبِ خیلی کم‌رنگ روی سلول می‌افتد — سه علامتِ هم‌زمان،
   که دوتایش غیررنگی است و برای کوررنگ هم می‌ماند. */
.px.off.buy  { color: var(--up-ink-off); }
.px.off.sell { color: var(--down-ink-off); }
.px.off .val { font-weight: 500; letter-spacing: .2px; }
/* راه‌راهِ مورّب: «این عدد الان زنده نیست». آن‌قدر کم‌رنگ که عدد را نخورد. */
.px.off::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(135deg,
    transparent 0 7px, var(--px-stripe, rgba(155,167,198,.10)) 7px 8px);
}
.px.off .val.empty { color: var(--px-off); }

/* ═══ نمودارِ قیمتِ روز (داخلِ کشو) ═══════════════════════════
   رنگِ خط و سایه از `currentColor` می‌آید تا با یک کلاس روی جعبه،
   کلِ نمودار سبز یا قرمز شود — بی‌هیچ رنگِ ثابتی در CSS. */
.dr-chart { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line);
            color: var(--gold-ink); }
.dr-chart.up   { color: var(--up); }
.dr-chart.down { color: var(--down); }
.dr-chart.loading::after {
  content: ''; display: block; height: 116px; border-radius: 9px;
  background: var(--surface-3); opacity: .45; animation: mc-pulse 1.2s ease-in-out infinite;
}
@keyframes mc-pulse { 50% { opacity: .18; } }
@media (prefers-reduced-motion: reduce) { .dr-chart.loading::after { animation: none; } }

.mc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-old  { font-size: 10px; font-weight: 400; color: var(--text-faint); margin-top: 3px; line-height: 1.6; }

/* کلیدهای بازه — کوچک ولی ۴۴px ارتفاعِ لمسی، داخلِ یک نوارِ فرورفته */
.mc-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px;
           background: var(--surface-3); border: 1px solid var(--line-soft); }
.mc-tab {
  min-height: 44px; padding: 4px 9px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.mc-tab.on { background: var(--gold); color: var(--on-gold); font-weight: 800; }
.mc-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (hover: hover) { .mc-tab:not(.on):hover { color: var(--text); } }
.mc-chg {
  font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px; font-variant-numeric: tabular-nums;
}
.mc-chg .arw  { font-size: 8px; line-height: 1; }
.mc-chg.up    { color: var(--up);   background: var(--up-bg); }
.mc-chg.down  { color: var(--down); background: var(--down-bg); }
.mc-chg.flat  { color: var(--text-dim); background: var(--surface-3); }

/* خطِ خوانش: پیش‌فرض آخرین قیمت، و موقعِ کشیدنِ انگشت قیمتِ همان دقیقه */
.mc-read { display: flex; align-items: baseline; gap: 8px; margin: 5px 0 3px; min-height: 22px; }
.mc-val  { font-size: 15.5px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.mc-val .cur { font-size: 10px; font-weight: 400; color: var(--text-faint); margin-inline-start: 3px; }
.mc-at   { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* ⚠️ `touch-action: pan-y` لازم است: بدونش کشیدنِ افقیِ انگشت روی نمودار،
   صفحه را اسکرول می‌کند و هیچ عددی خوانده نمی‌شود. با این، اسکرولِ عمودیِ
   صفحه سرِ جایش می‌ماند و کشیدنِ افقی نمودار را می‌خواند. */
.mc-svg { width: 100%; height: auto; display: block; direction: ltr;
          touch-action: pan-y; cursor: crosshair; }
.mc-area { fill: currentColor; opacity: .13; }
.mc-line { fill: none; stroke: currentColor; stroke-width: 1.9;
           stroke-linejoin: round; stroke-linecap: round; }
.mc-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; opacity: .8; }
.mc-tick { fill: var(--text-faint); font-size: 8.5px; font-family: inherit; }
.mc-mark { fill: var(--surface-2); stroke: currentColor; stroke-width: 1.4; }
.mc-last { fill: currentColor; }
.mc-hdot { fill: currentColor; opacity: .55; }
/* سایه‌ی دیروز: نقطه‌چینِ خنثا — نباید با خطِ امروز (سبز/قرمز) رقابت کند */
.mc-prev { fill: none; stroke: var(--text-faint); stroke-width: 1.2; stroke-dasharray: 3 3;
           stroke-linejoin: round; opacity: .75; }
.mc-prev-tag { fill: var(--text-faint); font-size: 7.5px; font-family: inherit; }
.mc-hint { margin: 5px 0 0; font-size: 11px; color: var(--text-dim); }
.mc-hint .q { color: var(--text-faint); font-size: 10px; }
.mc-guide { stroke: var(--text-dim); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.mc-dot   { fill: currentColor; stroke: var(--surface); stroke-width: 1.6; opacity: 0; }
.mc-svg.scrubbing .mc-guide, .mc-svg.scrubbing .mc-dot { opacity: 1; }

.mc-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px;
           font-size: 10.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mc-foot b { font-weight: 700; color: var(--text); }
.mc-foot b .cur { display: none; }     /* واحد یک بار در خطِ خوانش آمده */
.mc-note { margin: 7px 0 0; font-size: 10.5px; line-height: 1.75; color: var(--text-faint); }
.mc-none { margin: 8px 0 2px; font-size: 11.5px; line-height: 1.8; color: var(--text-dim); }

/* ═══ نوارِ «سفارش‌ها به هیچ‌کس خبر نمی‌دهند» (پنلِ مدیریت) ══════
   قرمز و چسبیده به بالا، چون هزینه‌اش سفارشِ ازدست‌رفته است. */
.notifybar {
  /* ⚠️ `top: 0` با سربرگ که خودش sticky است روی هم می‌افتاد و روی موبایل هر دو
     متن ناخوانا می‌شدند. همان الگوی نوارِ ابزار: زیرِ سربرگ می‌نشیند. */
  position: sticky; top: calc(var(--topbar-h) + var(--safe-t)); z-index: 20;
  margin: 0 0 10px; padding: 11px 14px; border-radius: 0 0 12px 12px;
  font-size: 13px; line-height: 1.8; font-weight: 600;
  display: flex; gap: 8px; align-items: flex-start;
}
.notifybar.bad  { background: var(--down-bg); border: 1px solid var(--down-line); color: var(--down-ink); }
.notifybar.good { background: var(--up-bg);   border: 1px solid var(--up-line);   color: var(--up-ink); }
.notifybar b { font-weight: 800; }

/* ═══ فهرستِ ادمین‌هایی که از سفارش خبردار می‌شوند ══════════ */
.field.wide { grid-column: 1 / -1; }
.recip-list { display: grid; gap: 7px; margin-bottom: 8px; }
.recip-row { display: grid; grid-template-columns: minmax(0,1fr) 150px 40px; gap: 7px; align-items: center; }
@media (max-width: 560px) { .recip-row { grid-template-columns: minmax(0,1fr) 40px; }
                            .recip-row .r-mob { grid-column: 1; } }
.recip-row input { min-height: 44px; }
.recip-del {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--down-ink); font: inherit; cursor: pointer;
}
.recip-opt { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; }
/* ⚠️ `min-height: 48px` از `.field input` ارث می‌رسد و تیک را به یک مربعِ
   ۴۸پیکسلی تبدیل می‌کند؛ باید صریح خنثی شود. */
.recip-opt input[type="checkbox"] {
  width: 20px; height: 20px; min-height: 20px; padding: 0;
  margin-top: 2px; flex: 0 0 auto; accent-color: var(--gold);
}
.recip-empty { font-size: 12.5px; color: var(--down-ink); }

/* ═══ انتخابِ نوعِ هشدار: قیمت یا حباب ═══════════════════════
   «قیمت» اول است و پیش‌فرض: مشتریِ معمولی «وقتی رسید به فلان قیمت» را
   می‌فهمد؛ «حباب» مفهومِ تخصصی‌تری است و کنارش می‌ماند. */
.al-metric {
  display: flex; gap: 3px; padding: 3px; margin: 2px 0 12px;
  border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line-soft);
}
.al-mtab {
  flex: 1; min-height: 38px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-dim); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.al-mtab.on { background: var(--gold); color: var(--on-gold); }
.al-mtab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* هشدارِ «این عددها زنده نیستند» — بالای نمودار، جایی که چشم اول می‌رود */
.dr-shut {
  margin: 7px 0 0; padding: 6px 9px; border-radius: 8px; font-size: 11.5px; line-height: 1.7;
  color: var(--warn-ink); background: var(--warn-bg); border: 1px solid var(--warn-line);
}
.dr-shut b { font-weight: 700; }

/* حاشیه‌ی پیش‌فرضِ تمِ روشن تقریباً نامرئی است ⇒ خط‌چینِ «خاموش» گم می‌شد */
[data-theme="light"] .px.off { --px-bg: transparent; --px-line: var(--line);
                              border-style: dashed; box-shadow: none;
                              --px-stripe: rgba(106,97,81,.10); }
[data-theme="light"] .mc-area { opacity: .10; }
[data-theme="light"] .mc-mark { fill: #FFFFFF; }
[data-theme="light"] .mc-dot  { stroke: #FFFFFF; }

/* ═══ بنرهای وضعیتِ تابلو (فازِ ۱ / تحویلِ ۱) ═══════════════════════
   خطِ کوتاهِ بالای قیمت‌ها که حسن از پنل روشن می‌کند. برخلافِ «پیام مدیر»
   کشویی نیست — چیزی که باید همین حالا دیده شود پشتِ یک کلیک نمی‌رود.
   ⚠️ همه‌ی رنگ‌ها توکن‌اند تا در تمِ روشن هم خوانا بمانند. */
.bnrs {
  display: grid; gap: 8px;
  /* همان حاشیه‌ی ۱۴ پیکسلیِ .banner و .notice تا سه بلوک روی یک خط بنشینند */
  margin: 9px 14px 0;
}
.bnr {
  border: 1px solid var(--info-line);
  background: var(--info-bg);
  color: var(--info-ink);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13.5px; line-height: 1.65;
  /* متنِ بلند نباید صفحه را افقی کش بدهد */
  overflow-wrap: anywhere;
}
.bnr.ok   { background: var(--up-bg);   border-color: var(--up-line);   color: var(--up-ink); }
.bnr.warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.bnr.stop { background: var(--down-bg); border-color: var(--down-line); color: var(--down-ink); }

/* راهنمای حداقل/حداکثر زیرِ فیلدِ مقدار — چند تکه با «·» جدا می‌شوند و
   در ۳۹۰px باید بشکنند، نه اینکه مودال را پهن کنند. */
.limit-hint { line-height: 1.7; overflow-wrap: anywhere; }

/* ⚠️ این بلوک باید **بعد از** قاعده‌ی پایه‌ی `.bnrs` بیاید: قاعده‌ی پایه در انتهای
   فایل است و `margin: 9px 14px 0` آن، بر `margin-inline: auto`ِ مدیا-کوئریِ بالای
   فایل غلبه می‌کرد ⇒ بنر در دسکتاپ به لبه‌ی راست می‌چسبید و با ستونِ وسط هم‌تراز نبود. */
@media (min-width: 900px) {
  .bnrs { margin-inline: auto; }
}

/* ═══ چرخه‌ی درخواست (فازِ ۱ / تحویلِ ۲) ═══════════════════════════ */
/* شمارنده‌ی «زمان تأیید» و یادداشت‌های کارتِ سفارش */
.ord-count {
  font-size: 12.5px; color: var(--text-dim);
  margin: 6px 0 2px; font-variant-numeric: tabular-nums;
}
.ord-count b { color: var(--gold-ink); font-weight: 700; }
.ord-note {
  margin: 7px 0 0; padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.7;
  background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info-ink);
  overflow-wrap: anywhere;
}
.ord-note.err { background: var(--down-bg); border-color: var(--down-line); color: var(--down-ink); }
.ord-note.ok  { background: var(--up-bg);   border-color: var(--up-line);   color: var(--up-ink); }
/* ⚠️ دکمه‌ها باید کنارِ هم بمانند: `.btn` عرضِ کامل می‌گیرد و بدونِ flex:1 روی
   موبایل زیرِ هم می‌افتادند و «می‌پذیرم» یک دکمه‌ی غول‌پیکر می‌شد. */
.ord-acts { display: flex; gap: 8px; margin-top: 8px; }
.ord-acts > .btn { flex: 1 1 0; min-width: 0; }
/* دکمه‌ی تنها (مثلِ «درخواست مجدد» روی ردیفِ لغوشده) به‌اندازه‌ی متنش می‌مانَد —
   دکمه‌ی تمام‌عرض روی هر ردیفِ لغوشده فهرست را شلوغ و پرسروصدا می‌کرد. */
.ord-acts.one { justify-content: flex-start; }
/* ⚠️ `width: auto` هم لازم است: خودِ `.btn` عرضِ ۱۰۰٪ دارد و فقط `flex: 0 0 auto`
   جلویش را نمی‌گیرد (پایه‌ی خودکار همان ۱۰۰٪ را می‌خواند). */
.ord-acts.one > .btn { flex: 0 0 auto; width: auto; }
/* دکمه‌ی کوچکِ داخلِ کارت — ولی هنوز ۴۴px برای انگشت */
.ord-acts .btn.sm, .btn.sm { min-height: 44px; padding: 0 16px; font-size: 13.5px; }
/* چیپِ وضعیتِ «پیشنهاد مدیر» — رنگِ خبری، نه سبز و نه قرمز */
.chip.countered {
  background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info-ink);
}
/* فیلدِ مبلغ و فیِ پیشنهادی، هم‌شکلِ بقیه‌ی فرم */
#amtWrap input, #propWrap input {
  width: 100%; font-size: 16px;          /* زیرِ ۱۶ آیفون زوم می‌کند */
  font-variant-numeric: tabular-nums;
}

/* ═══ مانده حساب مشتری (فازِ ۱ / تحویلِ ۴) ═══════════════════════ */
/* ⚠️ علامتِ + و − همیشه در متن هست، نه فقط رنگ — کوررنگی */
.bal-pos { color: var(--up-ink) }
.bal-neg { color: var(--down-ink) }
.bal-chips { display: flex; flex-wrap: wrap; gap: 8px }
.bal-chip {
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--line);
}

/* ═══ دعوتِ نصب روی صفحه‌ی اصلی ═════════════════════════════
   همه‌ی رنگ‌ها توکن‌اند — رنگِ ثابت در تمِ روشن ناخوانا می‌شود. */
.inst-sheet { padding-top: 8px; }
.inst-hero { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.inst-icon { width: 60px; height: 60px; flex: 0 0 auto; border-radius: 15px;
             border: 1px solid var(--line); background: var(--surface-2); }
.inst-hero h2 { margin: 0 0 3px; font-size: 17px; }
.inst-hero .sub { margin: 0; }

.inst-perks { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 9px; }
.inst-perks li { display: flex; align-items: center; gap: 9px;
                 font-size: 13.5px; color: var(--text-dim); }
.inst-perks li::before {
  content: '✓'; flex: 0 0 auto;
  width: 21px; height: 21px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--up-bg); color: var(--up-ink);
}

/* راهنمای دستی — وقتی مرورگر دکمه‌ی نصب در اختیار کد نمی‌گذارد (سافاریِ آیفون) */
.inst-steps { margin: 14px 0 0; padding-inline-start: 20px; display: grid; gap: 9px; }
.inst-steps li { font-size: 13.5px; line-height: 1.75; color: var(--text); }
.inst-steps b { color: var(--gold-ink); }
.inst-steps .ios-share {
  display: inline-grid; place-items: center; vertical-align: -5px;
  width: 21px; height: 21px; margin-inline: 2px;
  border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line);
}
.inst-steps .ios-share svg { width: 13px; height: 13px; fill: currentColor; display: block; }
/* شماره‌ی قدم‌ها فارسی باشد، نه 1/2/3 لاتین */
.inst-steps { list-style-type: persian; }
.inst-steps .en {
  display: inline-block; direction: ltr; unicode-bidi: isolate;
  font-size: 12px; color: var(--text-dim); margin-top: 2px;
}
/* ═══ اعلانِ رایگان روی گوشی ════════════════════════════════ */

/* روی گوشی، دکمه‌ی نامِ قلم (که کشو را باز می‌کند) ۳۵px بود — زیرِ حداقلِ لمسیِ ۴۴.
   ⚠️ فقط روی دستگاهِ لمسی، و فقط `min-height`: کارتِ قیمت خودش بلندتر است، پس
   این هیچ ارتفاعی به کارت اضافه نمی‌کند و تابلو شلوغ‌تر نمی‌شود. */
@media (pointer: coarse) {
  button.ci { min-height: 44px; }
}

/* ═══ صیقلِ سراسری — سمتِ مشتری، دورِ ۱ (۲۸ شهریور ۱۴۰۵) ══════════════
   فقط ظاهر. کارتِ قیمت، کاشیِ شیشه‌ای و ترتیبِ خرید/فروش دست نخورده‌اند. */

/* سطحِ **کدر** برای هر چیزی که روی محتوا می‌نشیند (پیامک، برگه‌ی پایین).
   شیشه‌ی ۷۴٪ِ تمِ روشن عددهای تابلو را از پشتِ متنِ پیام و فرم نشان می‌داد. */
:root { --surface-solid: #131A32; }
[data-theme="light"] { --surface-solid: #FBFAF6; }
.toast.ok, .toast.err { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.28); }
[data-theme="light"] .toast.ok, [data-theme="light"] .toast.err { box-shadow: 0 8px 28px rgba(30,26,18,.18); }
.sheet { background: var(--surface-solid); }
/* نوارِ چسبانِ دکمه همیشه هم‌رنگِ خودِ برگه — تم‌ها (iOS، نرم) رنگِ برگه را عوض می‌کنند و نوار دورنگ می‌ماند */
.sheet-foot { background: inherit; }
/* پیامک هرگز روی برگه‌ی باز (دکمه‌ی اصلیِ آن) ننشیند */
body:has(.sheet-bg:not([hidden])) .toast { bottom: auto; top: calc(var(--safe-t) + 12px); }

/* دسکتاپ: دستگیره‌ی کشیدن کاری نمی‌کند؛ نوارِ خالیِ زیرِ دکمه‌ها برود */
@media (min-width: 640px) {
  .grabber { display: none; }
  .sheet { padding-top: 16px; }
}
@media (min-width: 900px) {
  .sheet { padding-bottom: 0; }
  .sheet-foot { padding-bottom: 16px; border-radius: 0 0 20px 20px; }
}

/* هدفِ لمسیِ ۴۴px بی‌آنکه سربرگ بلندتر شود */
.theme-btn { position: relative; }
.theme-btn::after { content: ''; position: absolute; inset: -3px; }

/* ── تابلوی ردیفی: دو ستونِ مستقل در هر دسته (نگاه کن `splitCols` در app.js) ── */
.list .cat-col { display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
@media (min-width: 640px) {
  .list .cat-group:has(> .cat-col) {
    grid-auto-flow: row; grid-template-rows: none; row-gap: 0; align-items: start;
  }
}

/* شمارشِ «N قلم» کنارِ هر سرگروه — تزئینِ تکراری؛ ردیف‌ها خودشان پیدایند */
.gh-n { display: none; }

/* ردیفِ خاموش: چیپِ تغییر نباید پرچشم‌ترین چیزِ ردیفِ محو باشد */
.list .card.off .chg { filter: saturate(.35); opacity: .85; }

/* قطعِ ارتباط: نشانِ «مدیر آنلاین» با بنرِ «ارتباط قطع است» نقیض بود */
body:has(#banner.danger:not([hidden])) #mgrChip { filter: grayscale(1); opacity: .6; }

/* ── بنرِ وضعیتِ تابلو: یک خط، نشانه‌ی تک‌رنگ ── */
.banner .b-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; margin-top: 2px; }
.banner.compact .b-ico { width: 14px; height: 14px; margin-top: 1px; }
.banner.warn:not(.compact) { font-size: 13px; padding: 8px 12px; }
/* تمِ تیره: زمینه‌ی زیتونیِ پررنگ از قیمت‌ها پرچشم‌تر بود */
:root:not([data-theme="light"]) .banner.warn { background: color-mix(in srgb, var(--gold) 10%, var(--surface)); }

/* ── کشوی قلم: تخت، بی جعبه‌درجعبه ── */
.drawer, [data-theme="light"] .drawer, .list .card.off .drawer {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  border-top: 1px solid var(--line-soft); padding: 8px 2px 2px; margin-top: 5px;
}
.dr-chart { margin-top: 0; padding-top: 0; border-top: 0; }
.dr-shut { margin: 0 0 8px; padding: 5px 9px; }
.mc-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1 1 auto; max-width: 268px; padding: 3px; }
.mc-tab { min-height: 36px; padding: 2px 4px; font-size: 12px; position: relative; }
.mc-tab::after { content: ''; position: absolute; inset: -4px 0; }
.mc-none { margin: 8px 0 0; font-size: 12.5px; color: var(--text-dim); }
.dr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.dr-foot .dr-more { flex: 0 1 auto; }
.dr-alert, [data-theme="light"] .dr-alert {
  width: auto; min-height: 44px; margin: 0; padding: 0 12px; flex: 0 0 auto;
  background: none; border: 0; border-radius: 999px; color: var(--gold-ink); font-size: 13px;
}
.dr-alert svg { width: 18px; height: 18px; }
@media (hover: hover) { .dr-alert:hover { background: var(--warn-bg); } }
.dr-basis { border-top: 0; padding-top: 0; }

/* ── درخواست‌های من ── */
.es-cta { display: flex; margin: 14px auto 0; min-height: 44px; max-width: 220px; width: 100%;
          align-items: center; justify-content: center; }
.ord { padding: 10px 12px; }
.ord-top { margin-bottom: 3px; }
.ord-mid { margin-bottom: 3px; }
.ord-mid .num { color: var(--text); font-weight: 700; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.ord-mid .side { font-weight: 600; }
.ord-mid .side.up { color: var(--up-ink); }
.ord-mid .side.down { color: var(--down-ink); }
.ord.st-cancelled .ord-mid .num { color: var(--text-dim); font-weight: 500; }
.chip.cancelled { background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); }
/* فیِ پیشنهادی یک خطِ کم‌رنگ است، نه جعبه‌ای شبیهِ فیلدِ ورودی */
.ord-note:not(.err):not(.ok):not(.info) { background: none; border: 0; padding: 0; margin-top: 2px;
  color: var(--text-dim); font-size: 12px; }
.ord-note + .ord-bot, .ord-count + .ord-bot, .ord-acts + .ord-bot { margin-top: 6px; }
.sec-title { font-size: 14px; color: var(--text); }
@media (min-width: 900px) {
  #viewOrders .pad, #viewAbout .pad { max-width: 720px; }
  .ord-top { font-size: 15px; } .ord-bot { font-size: 12px; }
}

/* ── بیشتر: ریتمِ یکسانِ سرتیترها ── */
.sec-title:first-child { margin-top: 18px; }
.pad > .sec-title:first-child, .pad > :first-child .sec-title:first-child,
#viewOrders .sec-title[hidden] + .summary-card + .sec-title { margin-top: 4px; }
@media (min-width: 1024px) {
  #viewAbout .faq { font-size: 14px; }
}
.dr-foot .dr-more { width: auto; margin: 0; border-top: 0; font-size: 12.5px; justify-content: flex-start; padding: 6px 4px; }
/* نوارِ پایین: عددهای تابلو نباید از پشتِ برچسب‌ها خوانده شوند */
[data-theme="light"] .bottomnav { background: rgba(255,255,255,.94); }
/* دسکتاپ: سه دکمه در یک قرصِ جمع‌وجور، نه نوارِ ۹۴۰پیکسلیِ خالی */
@media (min-width: 900px) {
  .bottomnav { max-width: 420px; border-radius: 16px 16px 0 0; }
}
/* دلیلِ لغو: یک خطِ قرمزِ آرام، نه جعبه‌ی صورتیِ هم‌وزنِ خودِ سفارش */
.ord-note.err { background: none; border: 0; padding: 0; margin-top: 2px; font-size: 12.5px; }
.ord-mid .num .u { font-size: 11px; font-weight: 500; color: var(--text-faint); }
/* شماره‌ی نمونه‌ی کامل در خانه‌ی خالی «پُرشده» به نظر می‌رسید */
.field input::placeholder { color: var(--text-faint); opacity: .7; }
/* برگه‌ی هشدار: دو انتخابِ هم‌تراز («کدام قیمت» و «وقتی که») کنارِ هم، مبلغ تمام‌عرض */
#alertBg .al-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 10px; }
#alertBg .al-form > .field { margin-bottom: 0; min-width: 0; }
#alertBg #alPctField, #alertBg #alRialField { grid-column: 1 / -1; }
#alertBg .al-hint { margin: 10px 0 0; }
/* «هنوز هشداری نساخته‌اید» خبری نیست — جای خالی کافی است */
#alList > .muted.sm:only-child { display: none; }
#alertBg #alCancel { border-color: transparent; background: none; margin-top: 2px; }

/* برچسب‌ها کمی درشت‌تر — در شک، درشت‌تر */
.field label, .sheet .sub { font-size: 13.5px; }
/* کلیدِ «قیمت | حباب»: ناحیه‌ی لمسِ ۴۴px بی‌آنکه نوار بلندتر شود */
.al-mtab { position: relative; }
.al-mtab::after { content: ''; position: absolute; inset: -3px 0; }

/* ═══ برگه‌ی سفارشِ ساده (۲۸ شهریور ۱۴۰۵) ════════════════════════
   الگو: اپِ طلای نمونه‌ی علیرضا — سمت · قیمتِ لحظه‌ای · یک خانه با کلیدِ واحد · یک دکمه. */
.ord-sheet .sheet-head { justify-content: space-between; margin-bottom: 14px; }
.ord-sheet h2 { margin: 0; font-size: 18px; }
.ord-x {
  width: 44px; height: 44px; margin-inline-end: -10px; flex: 0 0 auto;
  display: grid; place-items: center; border: 0; border-radius: 12px;
  background: none; color: var(--text-dim); cursor: pointer;
}
.ord-x:hover { background: var(--surface-2); color: var(--text); }
.ord-sheet #mSub:not([hidden]) { display: block; margin: -8px 0 12px; }

.ord-side {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px;
  padding: 4px; margin-bottom: 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.ord-side button {
  min-height: 44px; border: 0; border-radius: 11px; background: none; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--text-dim);
}
.ord-side button.on { background: var(--surface-solid); font-weight: 800; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.ord-side button.on.buy  { color: var(--up-ink); }
.ord-side button.on.sell { color: var(--down-ink); }
.ord-side button:disabled { color: var(--text-faint); cursor: not-allowed; }

.ord-price {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; margin-bottom: 18px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--text-dim);
}
/* روز: نوارِ کرمیِ نمونه (از طلای پالت ⇒ با رنگِ هر مغازه هم‌خوان). شب همان سطحِ سرمه‌ای
   می‌ماند — طلا روی سرمه در `color-mix` خاکستریِ گِلی می‌شد (عکسِ ممیزی). */
[data-theme="light"] .ord-price { border-color: transparent;
  background: color-mix(in srgb, var(--gold) 13%, var(--surface-solid)); }
.ord-price > span { display: flex; align-items: center; gap: 8px; }
.ord-price b { color: var(--text); font-size: 16px; font-weight: 800; white-space: nowrap; }
.ord-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); flex: 0 0 auto;
            animation: ordLive 1.8s ease-in-out infinite; }
@keyframes ordLive { 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .ord-live { animation: none; } }

.ord-field { margin-bottom: 8px; }
.ord-field > label { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.ord-box {
  display: flex; align-items: stretch; border-radius: 14px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
.ord-box:focus-within { border-color: var(--gold); }
.field .ord-box input {
  flex: 1 1 auto; min-width: 0; min-height: 56px; border: 0; border-radius: 0; background: none;
  font-size: 20px; font-weight: 700; padding-inline: 14px;
  /* رقم‌های جدولیِ وزیرمتن فاصله‌دار دیده می‌شوند («۸ ,۸ ۰ ۱») */
  font-variant-numeric: normal;
}
.ord-unit {
  flex: 0 0 auto; min-width: 104px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 14px; border: 0; border-inline-start: 1px solid var(--line); background: none;
  color: var(--text); font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.ord-unit:hover { background: var(--surface-3); }
.ord-unit svg { color: var(--text-dim); }
.ord-conv {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  min-height: 24px; margin-top: 10px; font-size: 13.5px; color: var(--text-dim);
}
.ord-conv b { color: var(--text); font-size: 16px; font-weight: 800; }
.ord-conv .neg, .ord-warn { color: var(--down-ink); }
.ord-warn { margin-top: 6px; font-size: 13px; font-weight: 600; }
.ord-sheet .vol-note { background: none; border: 0; padding: 0; margin: 4px 0 0; font-size: 13.5px; color: var(--text-dim); }
.ord-sheet #mMsg:not(:empty) { margin-top: 10px; }
.ord-sheet .sheet-foot { border-top: 0; margin-top: 14px; }
.ord-sheet #mSubmit { width: 100%; min-height: 52px; font-size: 16px; font-weight: 800; }

/* ═══ هسته‌ی معامله (۱۹ سپتامبر ۲۰۲۶) ═══════════════════════════════
   قیمتِ جان‌دار · قفلِ قیمت · نشانِ حباب · کارتِ پرفروش‌ترین · خطِ اعتماد ·
   ستاره‌دارها · دارایی من · پیگیریِ سفارش · رسید. همه‌ی رنگ‌ها توکن‌اند (دو تم). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ناوبریِ پایین: ۳ یا ۴ دکمه (دارایی فقط بعد از ورود) — ستون‌ها خودشان شمرده می‌شوند */
.bottomnav { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* «همین حالا / ۱۲ ثانیه پیش» کنارِ «مبالغ به تومان» */
.live-age { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: 8px;
  color: var(--up-ink); font-weight: 600; white-space: nowrap; }
.live-age::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--up);
  animation: ordLive 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-age::before { animation: none; } }
/* «۱۲ نفر در حالِ دیدن» کنارِ «… ثانیه پیش» (۲۶ سپ ۲۰۲۶) — فقط بالای ۳ نفر؛ گوشی: «👁 ۱۲ نفر» */
.live-watch { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 10px;
  color: var(--text-dim); font-weight: 500; white-space: nowrap; }
.live-watch b { font-weight: 700; color: var(--text); }
.live-watch svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
/* گوشی: خطِ دوم، زیرِ «… ثانیه پیش» و وسط‌چین — کنارِ آن به «شما می‌فروشید» می‌چسبید */
@media (max-width: 899px) {
  .bh-cur:has(.live-watch:not([hidden])) { flex-wrap: wrap; row-gap: 1px; }
  .live-watch { flex-basis: 100%; justify-content: center; margin: 0; font-size: 11px; }
  .live-watch svg { width: 12px; height: 12px; }
}

/* ── کارتِ بزرگِ پرفروش‌ترین ─────────────────────────────────────── */
.hero { margin: 10px 14px 0; padding: 12px 14px 12px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--shadow); }
.hero-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hero-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  color: var(--gold-ink); background: color-mix(in srgb, var(--gold) 16%, transparent); }
.hero-name { font-size: 16px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-head .chg { margin-inline-start: auto; }
.hero-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.hero-px { display: grid; gap: 1px; min-width: 0; }
.hero-px small { font-size: 12px; color: var(--text-dim); }
.hero-val { font-size: 24px; font-weight: 800; color: var(--up-ink); line-height: 1.2; white-space: nowrap; border-radius: 8px; }
.hero-val .cur { font-size: 12.5px; font-weight: 500; color: var(--text-dim); margin-inline-start: 4px; }
.hero-val.flash-up   { animation: flashUp 1.1s ease-out; }
.hero-val.flash-down { animation: flashDown 1.1s ease-out; }
.hero-chart { flex: 0 1 132px; min-width: 88px; height: 44px; }
.hero-spark { width: 100%; height: 100%; display: block; overflow: visible; }
.hero-spark polyline { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-spark.up polyline { stroke: var(--up); }
.hero-spark.down polyline { stroke: var(--down); }
.hero-acts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.hero-acts .btn { margin: 0; min-height: 44px; padding-block: 0; font-size: 15px; font-weight: 800; border-radius: 12px; }
.hero-buy   { background: var(--up-bg); color: var(--up-ink); border: 1px solid var(--up-line); }
.hero-sellb { background: var(--down-bg); color: var(--down-ink); border: 1px solid var(--down-line); }
.hero-acts .btn.off { background: var(--surface-2); color: var(--text-faint); border-color: var(--line-soft); }
@media (min-width: 900px) {
  .hero { max-width: 1152px; margin: 14px auto 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 260px;
          align-items: center; gap: 18px; padding: 14px 20px; }
  .hero-head { flex-wrap: wrap; }
  .hero-body { margin: 0; }
  .hero-chart { flex-basis: 220px; height: 52px; }
}

/* ── خطِ اعتماد ────────────────────────────────────────────────── */
.trust-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 18px 0;
  font-size: 12px; color: var(--text-dim); cursor: pointer; }
.trust-line > span { display: inline-flex; align-items: center; gap: 5px; }
.tl-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }
.tl-lic::before { content: '🛡'; font-size: 11px; }
@media (min-width: 900px) { .trust-line { max-width: 1152px; margin: 8px auto 0; padding-inline: 6px; } }

/* ── نشانِ حباب («الان وقتِ خرید است؟») ────────────────────────── */
.bub-tag { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim); min-width: 0; white-space: nowrap; overflow: hidden; }
.bub-tag i { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); }
.bub-tag .bw { overflow: hidden; text-overflow: ellipsis; }
/* ⚠️ جداکننده‌ی «·» عمداً نیست: در فارسی شبیهِ صفر خوانده می‌شد (عکسِ ممیزیِ ۲۸ شهریور) */
.bub-tag .bw { margin-inline-start: 2px; }
.bub-tag.low  i { background: var(--up); }
.bub-tag.low  .bw { color: var(--up-ink); }
.bub-tag.high i { background: var(--warn-ink); }
.bub-tag.high .bw { color: var(--warn-ink); }
button.ci > .bub-tag { grid-column: 1; }

/* ── ستاره‌دارها ─────────────────────────────────────────────── */
.list .card.is-star .card-title::after { content: '★'; color: var(--gold); font-size: .85em; margin-inline-start: 5px; }
.dr-star { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: none; color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }
.dr-star svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.dr-star.on { color: var(--gold-ink); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.dr-star.on svg { fill: var(--gold); stroke: var(--gold); }
.show-off { display: block; margin: 6px auto 0; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-soft);
  border-radius: 999px; background: none;
  color: var(--text-dim); font: inherit; font-size: 13px; cursor: pointer; }

/* ═══ واحد یک‌بار در سرگروه، نه زیرِ تک‌تکِ ردیف‌ها (۲۰ سپتامبر ۲۰۲۶) ═══
   روی گوشی «عدد» پنج بار پشتِ سرِ هم زیرِ سکه‌ها تکرار می‌شد. وقتی همه‌ی اقلامِ یک
   گروه یک واحد دارند (`.cat-group.uni`)، واحد یک‌بار کنارِ نامِ گروه می‌آید.
   ⚠️ قبلاً فقط تمِ `ios` این را داشت؛ منطقش به تم ربطی ندارد، پس سراسری شد. */
.gh-unit { font-size: 12px; font-weight: 400; color: var(--text-faint); }
.gh-unit::before { content: '·'; margin-inline: 2px 6px; }
.list .cat-group.uni .card-unit .u { display: none; }
/* واحد که رفت، ردیفِ زیرِ نام ممکن است کلاً خالی بماند ⇒ فاصله‌ی بی‌کار نگذارد.
   ⚠️ `.chg.flat` عنصرش هست ولی متنش خالی است، پس مثلِ نبودن حساب می‌شود. */
.list .cat-group.uni .card-unit:not(:has(> :not(.u):not(.flat))) { display: none; }

/* پلِ واحد زیرِ قیمتِ برگه — «هر مثقال …» وقتی برگه گرمی حساب می‌کند */
.ord-eq { margin-top: 5px; font-size: 12px; color: var(--text-dim); }

/* ── برگه‌ی سفارش: قفلِ قیمت ────────────────────────────────────── */
.ord-price { position: relative; overflow: hidden; }
.ord-pv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ord-move { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
  color: #fff; background: #D93A2B; box-shadow: 0 0 0 3px rgba(217,58,43,.18); }
.ord-move i { font-style: normal; font-size: 10px; }
.ord-move b { font-weight: 800; }
.ord-move.pulse { animation: ordMovePulse .9s ease-out 2; }
@keyframes ordMovePulse { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ord-move.pulse { animation: none; } }
/* ⚠️ قفلِ قیمت خنثی (طلاییِ برند) است، نه سبز — چیپ در هر دو سمتِ خرید و فروش
   یک‌جور دیده می‌شود؛ سبزِ ثابت روی سمتِ فروش (اکسنتِ قرمز) ناهماهنگ بود. */
.ord-lock { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; color: var(--gold-ink);
  background: var(--gold-soft, rgba(211,175,55,.14)); border: 1px solid var(--gold-line, rgba(211,175,55,.32)); }
.ord-lock svg { width: 13px; height: 13px; fill: currentColor; }
.ord-price .ord-lock b { font-size: 13px; color: inherit; min-width: 2ch; text-align: center; }
.ord-lockbar { position: absolute; inset-inline: 0; bottom: 0; height: 3px; }
.ord-lockbar > i { display: block; height: 100%; width: 100%; background: var(--gold); transition: width .25s linear; }
.ord-price.expired .ord-lock { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-line); }
.ord-price.expired #sUnit { color: var(--text-dim); }
.msg.info { background: var(--info-bg); border: 1px solid var(--info-line); color: var(--info-ink); }

/* ── پیگیریِ سفارش: چهار قدم ───────────────────────────────────── */
.trk { list-style: none; margin: 10px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trk li { position: relative; display: grid; justify-items: center; gap: 3px; text-align: center;
  font-size: 11px; color: var(--text-faint); padding-top: 2px; }
.trk li i { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface-solid); border: 2px solid var(--line); }
.trk li::before { content: ''; position: absolute; top: 7px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--line); }
.trk li:first-child::before { display: none; }
.trk li.done { color: var(--text-dim); }
.trk li.done i { background: var(--up); border-color: var(--up); }
.trk li.done::before, .trk li.now::before { background: var(--up); }
.trk li.now { color: var(--text); font-weight: 700; }
.trk li.now i { border-color: var(--up); box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 22%, transparent); animation: trkNow 1.6s ease-in-out infinite; }
@keyframes trkNow { 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--up) 22%, transparent); } }
@media (prefers-reduced-motion: reduce) { .trk li.now i { animation: none; } }
.trk li small { font-size: 10.5px; color: var(--text-faint); font-weight: 400; }
.chip.ready     { background: var(--info-bg); color: var(--info-ink); }
.chip.delivered { background: var(--up-bg); color: var(--up-ink); }
.ord-no { display: inline-flex; align-items: center; gap: 10px; }
.ord-rc { border: 0; background: none; color: var(--gold-ink); font: inherit; font-size: 12px; font-weight: 700;
  min-height: 32px; padding: 0 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ord.flash { animation: ordFlash 2s ease-out; }
@keyframes ordFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ── رسید ──────────────────────────────────────────────────── */
.rcpt { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface-solid); margin-top: 4px; }
.rc-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #141C4D; color: #fff;
  border-bottom: 3px solid var(--gold); }
.rc-head img { border-radius: 10px; flex: 0 0 auto; }
.rc-head > div { display: grid; min-width: 0; }
.rc-head b { font-size: 16px; }
.rc-head small { font-size: 12px; opacity: .75; }
.rc-st { margin-inline-start: auto; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #8A6A12; color: #fff; white-space: nowrap; }
.rc-st.confirmed, .rc-st.delivered { background: #1F6B4A; }
.rc-st.ready, .rc-st.countered { background: #2558B8; }
.rc-st.cancelled, .rc-st.returned { background: #9E2432; }
.rc-big { display: grid; gap: 2px; padding: 16px 16px 8px; }
.rc-big .side { font-size: 13px; font-weight: 800; }
.rc-big .side.up { color: var(--up-ink); }
.rc-big .side.down { color: var(--down-ink); }
.rc-big b { font-size: 20px; font-weight: 800; }
.rc-q { font-size: 14px; color: var(--text-dim); }
.rc-rows { margin: 0; padding: 4px 16px 12px; }
.rc-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.rc-rows dt { color: var(--text-dim); font-size: 13px; }
.rc-rows dd { margin: 0; font-weight: 700; font-size: 14px; }
.rc-rows dd small { font-weight: 400; color: var(--text-dim); font-size: 11.5px; }
.rc-rows .rc-total dd { font-size: 19px; font-weight: 800; }
.rcpt-push { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px;
  padding: 10px 12px; border-radius: 12px; background: var(--info-bg); color: var(--info-ink); font-size: 13px; }
.rcpt-push .btn { margin: 0; min-height: 40px; flex: 0 0 auto; }
.rcpt-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rcpt-foot .btn { margin: 0; min-height: 48px; }

/* ── دارایی من ──────────────────────────────────────────────── */
.pf-sum { display: grid; gap: 4px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line-soft); }
.pf-k { font-size: 12.5px; color: var(--text-dim); }
.pf-v { font-size: 28px; font-weight: 800; line-height: 1.25; }
.pf-v small { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.pf-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pf-pnl { font-size: 16px; font-weight: 800; }
.pf-pnl small { font-weight: 500; font-size: 12px; }
.pf-pnl em { font-style: normal; font-size: 13px; margin-inline-start: 4px; }
.pf-pnl.up, .pf-real b.up, .pf-it small.up { color: var(--up-ink); }
.pf-pnl.down, .pf-real b.down, .pf-it small.down { color: var(--down-ink); }
.pf-warn { margin: 6px 0 0; font-size: 12px; color: var(--warn-ink); }
.pf-real { margin: 6px 0 0; }
.pf-note { margin: 10px 4px 12px; font-size: 12px; line-height: 1.8; }
.pf-note:empty { display: none; }
.pf-sum + #pfList { margin-top: 12px; }
.pf-empty { display: grid; gap: 8px; justify-items: start; }
.pf-empty .btn { margin: 4px 0 0; }
/* یک قابِ واحد با خطِ جداکننده — هم‌زبانِ فهرستِ «حسابِ من» (۲۱ سپتامبر ۲۰۲۶):
   کارتِ شناورِ جدا برای هر قلم، صفحه را جعبه‌درجعبه می‌کرد. */
#pfList { border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-soft, var(--line)); }
#pfList:empty { display: none; }
.pf-it { display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: none; border: 0; }
.pf-it + .pf-it { border-top: 1px solid var(--line-soft, var(--line)); }
.pf-ico { width: 30px; height: 30px; flex: 0 0 auto; }
.pf-l { display: grid; min-width: 0; flex: 1 1 auto; }
.pf-l b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-l small, .pf-r small { font-size: 11.5px; color: var(--text-dim); }
.pf-r { display: grid; justify-items: end; flex: 0 0 auto; }
.pf-r b { font-size: 15px; white-space: nowrap; }
@media (min-width: 900px) { #viewAssets .pad { max-width: 720px; margin-inline: auto; } }

/* ── «بیشتر»: عکس و مجوزِ مغازه ───────────────────────────────── */
.shop-photo { display: block; width: calc(100% + 26px); max-height: 190px; object-fit: cover;
  margin: -13px -13px 12px; border-radius: var(--radius) var(--radius) 0 0; }
.shop-lic { margin: 0 0 8px; font-size: 13px; color: var(--text-dim); }

/* ⚠️ «·» بینِ دو عدد شبیهِ صفر خوانده می‌شد (٪۳٫۱ ⇒ «٪۳٫۱۰») — فاصله جایش */
.pf-pct { margin-inline-start: 10px; }
.tl-addr::before { content: '📍'; font-size: 11px; }

/* تمِ ملی‌کوین (ios): ستونِ وسط تنگ است ⇒ فقط عدد + نقطه‌ی رنگی، توضیح در title (عدد هرگز بریده نشود) */
html[data-board="ios"] .bub-tag .bw { display: none; }

/* تمِ ملی‌کوین (ios) در دسکتاپ: کارتِ بزرگ هم‌پهنای ستونِ ۷۲۸پیکسلیِ تابلو، نشانِ حباب وسطِ نام */
html[data-board="ios"] button.ci > .bub-tag { justify-content: center; justify-self: center; }
@media (min-width: 900px) {
  html[data-board="ios"] .hero { max-width: 728px; grid-template-columns: minmax(0, 1fr) 330px 190px; gap: 14px; }
  html[data-board="ios"] .hero-chart { flex: 0 1 110px; min-width: 70px; height: 40px; }
  html[data-board="ios"] .trust-line { max-width: 728px; }
}

/* ── ⚡ حدِ سود و حدِ ضرر ───────────────────────────────────────── */
/* ردیفِ دارایی خودش کلید است: همان ظاهر، فقط لمس‌پذیر. */
.pf-it.act { width: 100%; text-align: start; font: inherit; color: inherit; cursor: pointer; }
.pf-it.act:hover { background: var(--surface-2); }
.pf-it.act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pf-go { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: var(--text-faint);
         stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* دو قرصِ کوچک زیرِ نام: حدِ سود سبز، حدِ ضرر قرمز. بی برچسبِ متنی. */
.pf-as { display: flex; gap: 6px; margin-top: 4px; }
.pf-as b { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.pf-as b.up { color: var(--up-ink); background: var(--buy-bg); border: 1px solid var(--buy-line); }
.pf-as b.down { color: var(--down-ink); background: var(--sell-bg); border: 1px solid var(--sell-line); }


.as-form { display: grid; gap: 12px; }
.as-qty { display: flex; align-items: center; gap: 8px; }
.as-qty input { flex: 1 1 auto; min-width: 0; }
.as-unit { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.as-all {
  min-height: 34px; padding: 0 12px; border-radius: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-dim);
  font: inherit; font-size: 12.5px;
}
.as-all:hover { color: var(--text); }
.as-all:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.as-pv { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-dim); min-height: 14px; }
.as-pv.up { color: var(--up-ink); }
.as-pv.down { color: var(--down-ink); }
.as-hint { margin: 10px 0 0; font-size: 11px; line-height: 1.8; }
#asBg #asCancel { border-color: transparent; background: none; margin-top: 2px; }
@media (pointer: coarse) { .as-all { min-height: 44px; } }
/* ردیفِ آخرِ «حدهای من» زیرِ دکمه‌ی چسبانِ برگه دفن می‌شد */
/* ⚠️ دکمه‌ی چسبانِ برگه (`.sheet-foot` با `position: sticky`) روی محتوای زیرش
   می‌افتد. قبلاً فقط وقتی فهرستِ «حدهای من» پر بود فاصله می‌گرفت؛ ولی برای
   مشتریِ تازه که هنوز حدی ندارد، **کلیدِ «ثابت | کشویی» و خانه‌ی حدِ ضرر**
   زیرِ همان دکمه دفن می‌شدند و اصلاً کلیک نمی‌خوردند (۲۰ سپتامبر ۲۰۲۶). */
/* فاصله را JS برابرِ **ارتفاعِ واقعیِ** دکمه‌ی چسبان می‌گذارد (`asPadFoot`)؛
   عددِ ثابت یا کم بود و چیزی دفن می‌شد، یا زیاد بود و ته برگه فضای خالیِ بی‌کار
   می‌ماند. این مقدارِ پیش‌فرض فقط تا اولین اندازه‌گیری است. */
#asList { padding-bottom: var(--as-foot, 104px); }
/* و `scroll-padding` تا وقتی مرورگر عنصری را داخلِ دید می‌آورد (Tab، فوکوسِ
   خودکار، `scrollIntoView`) زیرِ همان دکمه‌ی چسبان رهایش نکند. */
#asBg .sheet { scroll-padding-block-end: 116px; }
.pf-as i { font-size: 10px; font-style: normal; opacity: .75; align-self: center; }
/* کلیدِ «ثابت | کشویی» زیرِ برچسبِ حدِ ضرر */
.as-modes { display: flex; gap: 6px; margin: 0 0 6px; }
.as-mode {
  min-height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-dim);
}
.as-mode.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
.as-mode:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (pointer: coarse) { .as-mode { min-height: 40px; } }
/* کلیدِ «می‌فروشم | می‌خرم» بالای برگه‌ی حد */
.as-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0 2px; }
.as-side {
  min-height: 40px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 13.5px;
  background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text-dim);
}
.as-side.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
.as-side:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (pointer: coarse) { .as-side { min-height: 44px; } }

/* ══════════════════════════════════════════════════════════════════
   ؟ راهنمای گرد — سراسری (۲۰ سپتامبر ۲۰۲۶، خواسته‌ی علیرضا)
   «یک علامتِ گردِ کوچک که وقتی رویش زدی دست‌نوشته‌ای توضیح بدهد و مشتری
   را کامل تفهیم کند.» هر جای سایت: <button class="hq" data-hq="کلید">؟</button>
   ⚠️ عمداً `title` نیست — روی گوشی `title` هیچ‌وقت دیده نمی‌شود.
   ══════════════════════════════════════════════════════════════════ */
.hq {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 17px; block-size: 17px; padding: 0; margin-inline-start: 5px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-dim); font: inherit; font-size: 11px; font-weight: 700;
  line-height: 1; cursor: pointer; vertical-align: middle; flex: 0 0 auto;
  position: relative; transition: background .14s, color .14s, border-color .14s;
}
.hq:hover { background: var(--gold-fill); border-color: var(--gold); color: var(--on-gold); }
.hq.on    { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.hq:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* ناحیه‌ی لمسِ ۴۴px بدونِ بزرگ‌کردنِ خودِ دایره (قاعده‌ی پروژه) */
.hq::after { content: ''; position: absolute; inset: -14px; border-radius: 50%; }
/* روی دسکتاپ (موس) نیازی به ۴۴px نیست، ولی آن‌قدر بزرگ می‌ماند که نشانه‌گرفتنش
   با موس هم آسان باشد — و ناحیه‌ی پهن‌تر کلیکِ عنصرِ همسایه را ندزدد. */
@media (hover: hover) and (pointer: fine) { .hq::after { inset: -9px; } }

.hq-pop {
  position: fixed; z-index: 95; inline-size: min(300px, calc(100vw - 24px));
  /* ⚠️ `--surface-*` در تمِ روشن شیشه‌ای است و متنِ پشتِ حباب از لایش خوانده
     می‌شد ⇒ راهنما ناخوانا. مثلِ مودال‌ها و پیامِ شناور، توکنِ **کدر**. */
  background: var(--surface-solid); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: 0 10px 34px rgba(0,0,0,.42);
  padding: 12px 14px 13px; font-size: 12.5px; line-height: 1.9; color: var(--text);
  text-align: start; animation: hqIn .16s ease-out;
}
@keyframes hqIn { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .hq-pop { animation: none; } }
.hq-pop h4 { margin: 0 0 5px; font-size: 13px; color: var(--gold-ink); }
.hq-pop p  { margin: 0 0 7px; }
.hq-pop p:last-child { margin-bottom: 0; }
.hq-pop b  { color: var(--text); font-weight: 700; }
.hq-pop .hq-eg {
  display: block; margin-top: 8px; padding: 7px 9px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text-dim); font-size: 11.5px; line-height: 1.85;
}
.hq-x {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  inline-size: 26px; block-size: 26px; border: 0; background: none;
  color: var(--text-faint); font-size: 13px; cursor: pointer; border-radius: 7px;
}
.hq-x:hover { color: var(--text); background: var(--surface-2); }
.hq-arrow {
  position: absolute; inline-size: 10px; block-size: 10px; transform: rotate(45deg);
  background: var(--surface-solid); border: 1px solid var(--line);
}
.hq-arrow.up   { inset-block-start: -6px; border-block-end: 0; border-inline-start: 0; }
.hq-arrow.down { inset-block-end: -6px;   border-block-start: 0; border-inline-end: 0; }

/* ══════════════════════════════════════════════════════════════════
   ⚡ برگه‌ی حد — واحدها، دکمه‌های آماده، و نوارِ موقعیت
   ══════════════════════════════════════════════════════════════════ */

/* کلیدِ واحدِ مقدار: مثقال | گرم | تومان */
.as-units { display: flex; gap: 5px; margin: 0 0 7px; flex-wrap: wrap; }
.as-units:empty { display: none; }
.as-u {
  min-height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 12px; background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text-dim);
}
.as-u.on { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
.as-u:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (pointer: coarse) { .as-u { min-height: 38px; padding: 0 13px; } }

/* دکمه‌های آماده (٪ برای حدها · همه/نصف/چهارم برای مقدار) */
.as-quick { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }
.as-quick:empty { display: none; }
.as-q {
  min-height: 28px; padding: 0 10px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 11.5px; background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text-dim); white-space: nowrap;
}
.as-q:hover { color: var(--text); border-color: var(--line); }
.as-q.on { border-color: var(--gold); color: var(--gold-ink); font-weight: 700; }
.as-q.up   { color: var(--up-ink); }
.as-q.down { color: var(--down-ink); }
.as-q:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (pointer: coarse) { .as-q { min-height: 38px; padding: 0 12px; font-size: 12px; } }

/* پیش‌نمایشِ خطا (حدی که همین حالا اجرا می‌شود) */
.as-pv.warn { color: var(--down-ink); font-weight: 600; }

/* نوارِ موقعیت — کلِ تصمیم در یک نگاه */
.as-bar { margin: 10px 0 2px; }
.as-bar-track {
  position: relative; block-size: 26px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line-soft); overflow: hidden;
}
/* بازه‌ی بینِ دو حد — جایی که «هنوز کاری نمی‌شود» */
.as-bar-span {
  position: absolute; inset-block: 0; background: var(--gold-fill); opacity: .09;
}
.as-bar-pin { position: absolute; inset-block: 3px; inline-size: 2px; border-radius: 2px; }
.as-bar-pin.avg  { background: var(--text-faint); }
.as-bar-pin.take { background: var(--up); }
.as-bar-pin.stop { background: var(--down); }
.as-bar-pin.now  { inline-size: 3px; inset-block: 0; background: var(--gold); }
.as-bar-pin[hidden] { display: none; }
.as-bar-keys {
  display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px;
  font-size: 10.5px; color: var(--text-dim); line-height: 1.7;
}
.as-bar-keys i { font-style: normal; }
.as-bar-keys .k::before {
  content: ''; display: inline-block; inline-size: 7px; block-size: 7px;
  border-radius: 2px; margin-inline-end: 4px; background: currentColor;
  vertical-align: baseline;
}
.as-bar-keys .k.take { color: var(--up-ink); }
.as-bar-keys .k.stop { color: var(--down-ink); }
.as-bar-keys .k.now  { color: var(--gold-ink); }
.as-bar-keys .k.avg  { color: var(--text-faint); }

/* دکمه‌ی ثبت تا خانه‌ای پر نشود کاری از دستش برنمی‌آید */
#asSave:disabled { opacity: .45; cursor: not-allowed; }
/* ═══ دروازه‌ی «برای دیدنِ قیمت‌ها وارد شوید» (۲۰ سپتامبر ۲۰۲۶) ═══════════
   پرده‌ی تمام‌صفحه روی تابلو. عمداً یک کارتِ کوچک با یک دکمه است، نه یک صفحه‌ی
   تبلیغاتی: مشتری آمده قیمت ببیند و هر چیزِ اضافه فقط تأخیر است.
   رنگ‌ها فقط توکن ⇒ در تمِ شب و روز هر دو درست است. */
.gate {
  /* ⚠️ ۵۰ عمدی است: بالاتر از سربرگ (۳۰) و نوارِ پایین (۴۰)، ولی **پایین‌تر از
     برگه‌ها (۶۰)** — وگرنه خودِ پرده روی مودالِ ورودی که باز می‌کند می‌افتد و
     دکمه‌اش کلیک نمی‌خورد (همین بار اول در تستِ کاربر گیر کرد). */
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background: var(--bg);
}
.gate-card {
  width: 100%; max-width: 380px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 26px 20px 20px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.gate-logo { width: 68px; height: 68px; border-radius: 18px; object-fit: cover; margin-bottom: 14px; }
.gate-logo.wide { width: 100%; height: 130px; border-radius: 14px; }
.gate-card h2 { margin: 0 0 8px; font-size: 20px; }
.gate-sub { margin: 0 0 18px; color: var(--text-dim); font-size: 14px; line-height: 1.9; }
.gate-foot { margin: 10px 0 0; color: var(--text-faint); font-size: 12px; }
/* پشتِ پرده اسکرول نشود — وگرنه انگشت روی گوشی تابلوی خالی را تکان می‌دهد */
body.gated { overflow: hidden; }

/* ═══ احرازِ هویت ═══════════════════════════════════════════════════ */
.kycbar {
  display: block; width: calc(100% - 24px); margin: 0 12px 10px;
  padding: 11px 12px; border-radius: 12px; text-align: start;
  font: inherit; font-size: 13px; line-height: 1.8;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  cursor: pointer;
}
.kycbar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (pointer: coarse) { .kycbar { min-height: 44px; } }

.msg.wait { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }

/* دو خانه‌ی نام کنارِ هم — «نام» و «نام خانوادگی» با هم یک جمله‌اند */
.field.two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.field.two.need input { border-color: var(--down-line); }

/* ── برگه‌ی احراز، دورِ دوم (۲۵ سپ ۲۰۲۶): دو راهِ عکس، تاریخِ انتخابی، کدِ ملی، کارتِ «رسید» ── */

/* دو راهِ عکس کنارِ هم: کاشیِ نرم با آیکون، بی خطِ دور */
.kyc-picks { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; }
.kyc-pick {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 84px; padding: 12px 8px; border: 0; border-radius: 18px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.kyc-pick svg { width: 26px; height: 26px; color: var(--gold-ink); }
.kyc-pick:active { transform: scale(.96); }
.kyc-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.kyc-thumb { position: relative; }
/* عکس که آمد، دو کاشیِ بزرگ کنار می‌روند و فقط «عوض کردن» می‌ماند */
.kyc-picks[hidden] { display: none; }
.kyc-thumb-acts { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.kyc-thumb-acts .kyc-link { margin: 0; }
.kyc-thumb img {
  display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
  border-radius: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.08);
}
.kyc-thumb-ok {
  position: absolute; inset-block-end: 10px; inset-inline-start: 10px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px;
  background: var(--up-bg); color: var(--up-ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

.kyc-name-hint { margin: -6px 0 18px; }
#kycNid { letter-spacing: .5px; }

/* تاریخ: سه فهرستِ انتخابی — روز باریک، ماه پهن (نامِ ماه)، سال متوسط */
.kyc-date { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.4fr) minmax(0,1fr); gap: 8px; }

/* حالتِ «رسید / تأیید شد»: کارتِ آرام با آیکون، خلاصه‌ی فرستاده‌ها، یک دکمه */
.kyc-done { text-align: center; padding: 6px 4px 2px; }
.kyc-done-ico {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px;
  display: grid; place-items: center; font-size: 30px;
  background: var(--warn-bg); color: var(--warn-ink);
}
.kyc-done.ok .kyc-done-ico { background: var(--up-bg); color: var(--up-ink); }
.kyc-done h3 { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.kyc-done p { margin: 0 0 14px; color: var(--text-dim); font-size: 13.5px; line-height: 1.9; }
.kyc-sum {
  margin: 0 0 16px; padding: 4px 14px; border-radius: 16px; background: var(--surface-2);
  text-align: start;
}
.kyc-sum div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13.5px; }
.kyc-sum div + div { box-shadow: 0 -1px 0 var(--line-soft); }
.kyc-sum dt { color: var(--text-dim); }
.kyc-sum dd { margin: 0; font-weight: 500; }
.kyc-link {
  display: block; margin: 10px auto 0; padding: 10px 16px; min-height: 44px;
  background: none; border: 0; color: var(--text-dim); font: inherit; font-size: 13.5px;
  cursor: pointer; text-decoration: underline; text-underline-offset: 4px;
}

/* خانه‌ای که از روی کارت پر شد: تهِ‌رنگِ طلاییِ محو تا چشم رویش بایستد */
/* ⚠️ تمِ آیفونی سایه‌ی خودش را روی خانه‌ها می‌گذارد ⇒ شناسه‌دار و !important تا قابِ طلایی دیده شود */
#kycForm .field input.kyc-auto, #kycForm .field select.kyc-auto {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent) !important;
}
.kyc-auto-note { margin: -6px 0 13px; color: var(--gold-ink); }
/* خانه‌ی مقصرِ خطا: قابِ قرمز + پیامِ کوتاه درست زیرِ همان خانه (نه بالای کلِ فرم) */
#kycForm .field .kyc-bad {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--down, #d93025) 75%, transparent) !important;
}
#kycForm .kyc-picks.kyc-bad { border-radius: 16px; }
.kyc-ferr { margin: 7px 2px 0; color: var(--down, #d93025); font-size: 13.5px; font-weight: 500; }

.kyc-thumb-ok { position: static; backdrop-filter: none; -webkit-backdrop-filter: none; }
.kyc-thumb-ok.busy { background: var(--surface-2); color: var(--text-dim); }
.kyc-thumb-ok.busy::before {
  content: ''; display: inline-block; width: 11px; height: 11px; margin-inline-end: 6px; vertical-align: -1px;
  border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: kyc-spin .8s linear infinite;
}
@keyframes kyc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kyc-thumb-ok.busy::before { animation: none; } }
.kyc-thumb-acts { align-items: center; justify-content: space-between; margin-top: 8px; }
/* هشدارِ نرمِ «عکس تار/تاریک است» — کهربایی و آرام، نه قرمز: خطا نیست، پیشنهاد است */
.kyc-warn {
  margin: 8px 0 0; padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.8;
  background: var(--warn-bg); color: var(--warn-ink);
}
.kyc-warn::before { content: '⚠'; margin-inline-end: 6px; }
#kycDone .btn-primary { width: 100%; }

#kycAddr {
  width: 100%; font: inherit; font-size: 16px; resize: vertical;
  padding: 11px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
#kycAddr:focus { outline: none; border-color: var(--gold); }
.hint { margin: 6px 0 0; font-size: 12px; color: var(--text-faint); line-height: 1.8; }

/* «این قلم امروز چقدر نوسان داشته» — بی این عدد، مشتری درصدِ حدش را شانسی
   می‌گذارد: یا آن‌قدر دور که هیچ‌وقت نمی‌خورد، یا آن‌قدر نزدیک که همان روز می‌خورد. */
.as-swing {
  margin: 8px 0 0; padding: 7px 10px; border-radius: 9px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  font-size: 11.5px; line-height: 1.8; color: var(--text-dim);
}
.as-swing b { color: var(--gold-ink); font-weight: 700; }
.as-swing[hidden] { display: none; }

/* ⚡ «حدهای فعالِ من» در نمای دارایی — نمای مرکزیِ همه‌ی حدها */
.pf-rules { margin-top: 22px; }
.pf-rules[hidden] { display: none; }
.pf-rules-h {
  display: flex; align-items: center; margin: 0 0 9px;
  font-size: 13px; color: var(--text-dim); font-weight: 600;
}
.pfr {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px;
  padding: 11px 13px; margin-bottom: 8px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line-soft); box-shadow: var(--px-shadow);
}
.pfr-l { min-width: 0; }
.pfr-t { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.pfr-s { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.8; color: var(--text-dim); }
.pfr-s b { font-weight: 700; }
.pfr-s b.up { color: var(--up-ink); }
.pfr-s b.down { color: var(--down-ink); }
/* فاصله‌ی «چقدر مانده تا خوردنِ حد» — همان چیزی که مشتری واقعاً می‌خواهد بداند */
.pfr-gap { display: inline-block; margin-inline-start: 7px; color: var(--text-faint); font-style: normal; }
/* قابِ دورِ ✕ روی موبایل یک مربعِ بزرگِ خالی می‌ساخت؛ ناحیه‌ی لمس می‌ماند،
   قاب فقط هنگامِ hover/فوکوس دیده می‌شود. */
.pfr-x {
  inline-size: 34px; block-size: 34px; border-radius: 9px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--text-faint); font-size: 14px;
}
.pfr-x:hover { border-color: var(--down-ink); }
.pfr-x:hover { color: var(--down-ink); }
.pfr-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
@media (pointer: coarse) { .pfr-x { inline-size: 44px; block-size: 44px; } }

/* تورِ آشناییِ اولین بار */
.sheet.tour { text-align: start; }
.sheet.tour h2 { margin-bottom: 10px; }
.sheet.tour p { margin: 0 0 9px; font-size: 13.5px; line-height: 2; color: var(--text); }
.sheet.tour b { font-weight: 700; }
.sheet.tour .hq-eg {
  display: block; margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--text-dim); font-size: 12px; line-height: 1.9;
}
.tour-dots { display: flex; gap: 6px; justify-content: center; margin: 0 0 14px; }
.tour-dots i {
  inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: var(--line); transition: background .18s, inline-size .18s;
}
.tour-dots i.on { background: var(--gold); inline-size: 20px; border-radius: 4px; }

/* ⚡ برگه‌ی حد — «ثبت شد» روی خودِ دکمه.
   ⚠️ پیامِ موفقیت بالای برگه است و کاربرِ گوشی پایینِ برگه کنارِ دکمه ایستاده؛
   بی این حالت، «انگار هیچ اتفاقی نیفتاد» و دوباره می‌زند (باگِ ۲۰ سپتامبر ۲۰۲۶). */
#asSave.done,
#asSave.done:disabled {
  background: var(--up-bg);
  color: var(--up-ink);
  border: 1px solid var(--up-line);
  opacity: 1;
  cursor: default;
}

/* ضربه‌ی اولِ ✕ فقط می‌پرسد (به‌جای پنجره‌ی بدریختِ خودِ مرورگر) */
.al-del.arm {
  width: auto;
  padding: 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--down-ink);
  background: var(--down-bg);
  border: 1px solid var(--down-line);
  border-radius: 999px;
}

/* ⭐⭐ کارتِ «اگر … آن‌وقت …» — بازطراحیِ ساده‌ی برگه‌ی حد (۲۰ سپتامبر ۲۰۲۶).
   هدف: کسی که با عدد و فرم راحت نیست، با یک نگاه بفهمد و با دو لمس تمامش کند. */
.ac {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
  margin-top: 10px;
  overflow: hidden;
}
.ac[data-on="1"].up   { border-color: var(--up-line);   background: var(--up-bg); }
.ac[data-on="1"].down { border-color: var(--down-line); background: var(--down-bg); }

.ac-head {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: var(--text);
}
.ac-ico { font-size: 17px; line-height: 1; }
.ac.up   .ac-ico { color: var(--up-ink); }
.ac.down .ac-ico { color: var(--down-ink); }
.ac-t { flex: 1; font-size: 17px; font-weight: 800; }

/* کلیدِ روشن/خاموش — همان چیزی که هر کسی روی گوشی‌اش دیده است */
.ac-sw {
  flex: 0 0 auto; width: 46px; height: 27px; border-radius: 999px;
  background: var(--line); position: relative; transition: background .15s;
}
.ac-sw > i {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .15s;
}
.ac[data-on="1"] .ac-sw > i { transform: translateX(-19px); }
[dir="ltr"] .ac[data-on="1"] .ac-sw > i { transform: translateX(19px); }
.ac[data-on="1"].up   .ac-sw { background: var(--up); }
.ac[data-on="1"].down .ac-sw { background: var(--down); }

.ac-body { padding: 0 14px 14px; }
.ac-lab { margin: 0 0 8px; font-size: 13.5px; color: var(--text-faint); }

/* − عدد + : تنها کاری که لازم است انجام شود */
.ac-step { display: flex; align-items: center; gap: 8px; }
.ac-pm {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px;
  font-size: 26px; font-weight: 700; line-height: 1; cursor: pointer;
  background: var(--surface-solid); color: var(--text);
  border: 1px solid var(--line);
}
.ac-pm:active { transform: scale(.94); }
.ac-step > input {
  flex: 1; min-width: 0; height: 52px; text-align: center;
  font-size: 21px; font-weight: 800; letter-spacing: .2px;
  border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface-solid); color: var(--text);
}
.ac-res { margin: 9px 0 0; font-size: 15px; font-weight: 700; min-height: 1.2em; }
.ac-res.up   { color: var(--up-ink); }
.ac-res.down { color: var(--down-ink); }
.ac-res.warn { color: var(--down-ink); font-weight: 600; font-size: 13.5px; }

/* «چقدرش» — یک خط، چون مقدار رفته زیرِ تنظیماتِ بیشتر. کم‌رنگ بود و دیده نمی‌شد،
   در حالی که «چه مقداری جابه‌جا می‌شود» جزوِ خودِ تصمیم است ⇒ حالا دیده می‌شود و
   با یک ضربه همان‌جا قابلِ تغییر است. */
.as-howmuch {
  display: block; width: 100%; margin: 12px 0 0; padding: 10px 12px; text-align: start;
  font-size: 14px; font-weight: 600; color: var(--text-dim); font-family: inherit;
  background: var(--surface-solid); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer;
}
.as-howmuch[hidden] { display: none; }
.as-howmuch b { color: var(--text); font-weight: 800; }
.as-howmuch i { font-style: normal; color: var(--gold-ink); font-weight: 700; float: inline-end; }
.as-howmuch:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* تنظیماتِ بیشتر: هر چیزی که ۹۵٪ مردم لازم ندارند */
.as-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 6px; }
.as-more > summary {
  list-style: none; cursor: pointer; padding: 10px 2px;
  font-size: 14px; font-weight: 700; color: var(--text-faint);
}
.as-more > summary::-webkit-details-marker { display: none; }
.as-more > summary::before { content: '▾'; display: inline-block; margin-inline-end: 7px; transition: transform .15s; }
.as-more[open] > summary::before { transform: rotate(180deg); }

/* یک جمله‌ی آدمیزاد بالای برگه‌ی حد — «اصلاً این‌جا چه کار می‌کنم؟» */
.as-lead {
  margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--text-dim);
}
.pfr-x.arm {
  width: auto; padding: 0 10px; font-size: 12.5px; font-weight: 700;
  color: var(--down-ink); background: var(--down-bg);
  border: 1px solid var(--down-line); border-radius: 999px;
}

/* ⭐ قیمتِ مرجع باید از دور دیده شود — تصمیمِ کاربر مقایسه با همین عدد است
   (خواسته‌ی علیرضا، ۲۰ سپتامبر ۲۰۲۶). */
.as-now-num {
  font-size: 18px; font-weight: 800; color: var(--gold-ink);
  letter-spacing: .2px; white-space: nowrap;
}
.as-now-chip {
  display: inline-block; white-space: nowrap;
  padding: 2px 8px; margin-inline-start: 4px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800;
  color: var(--gold-ink); background: var(--gold-soft, rgba(211,175,55,.14));
  border: 1px solid var(--gold-line, rgba(211,175,55,.32));
}

/* ⭐ نوارِ «برگردان» بعد از پاک‌کردنِ حد — همان الگوی کارهای گروهیِ پنل */
.as-undo {
  position: fixed; z-index: 95; inset-inline: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 14px;
  background: var(--navy, #141C4D); color: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,.34);
  font-size: 14px; font-weight: 600;
}
.as-undo-b {
  background: none; border: 0; cursor: pointer;
  color: var(--gold, #D3AF37); font: inherit; font-weight: 800;
  min-height: 34px; padding: 0 6px;
}

/* ⭐ مهم‌ترین عددِ برگه‌ی سفارش («چقدر باید بدهم») باید درشت‌ترین باشد، نه ریزترین */
.ord-conv b.big { font-size: 22px; font-weight: 800; color: var(--gold-ink); letter-spacing: .2px; }
.ord-conv { font-size: 14px; }
/* قرصِ قفل حالا یک جمله است، نه یک عدد ⇒ جا لازم دارد */
.ord-price .ord-lock b { min-width: 0; white-space: nowrap; }
.ord-price { flex-wrap: wrap; }
/* «؟» کنارِ برچسبِ مقدار روی خطِ خودش تنها می‌افتاد (برچسب `display:block` است) */
.ord-field > label { display: inline-block; margin-inline-end: 4px; vertical-align: middle; }
.ord-field > label + .hq { vertical-align: middle; }

/* ═══ 👛 کیفِ پول (۲۰ سپتامبر ۲۰۲۶) ══════════════════════════════
   ⚠️ هیچ رنگِ ثابتی — همه توکن، وگرنه در تمِ روشن تاریک می‌مانند.
   سلیقه‌ی علیرضا: کم‌ترین عنصر، ردیفی نه کارت‌درکارت، بی برچسبِ تکراری. */
.wal-sub { margin: 0; font-size: 12.5px; line-height: 1.9; }
.wal-sub:empty { display: none; }
.wal-reqs:empty { display: none; }
.wal-req {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12.5px; padding: 7px 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft, var(--line));
}
.wal-req + .wal-req { margin-top: 6px; }
.wal-req i { font-style: normal; color: var(--text-dim); }

/* خطِ موجودی داخلِ برگه‌ی سفارش — خودش کلیدِ شارژ است، بی متنِ اضافه */
.ord-wal {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft, var(--line));
  color: inherit; font: inherit; text-align: start; cursor: pointer;
  /* حداقلِ ناحیه‌ی لمسیِ پروژه */
  min-height: 44px;
}
.ord-wal span { font-size: 12.5px; color: var(--text-dim); }
.ord-wal b { font-size: 15px; margin-inline-start: auto; }
.ord-wal b small { font-size: 11.5px; font-weight: 400; color: var(--text-dim); }
.ord-wal i { font-style: normal; font-size: 12.5px; color: var(--gold-ink); }

/* برگه‌ی شارژ — کارتِ مقصد */
.wd-card {
  margin: 0 0 14px; padding: 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line-soft, var(--line));
}
.wd-card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* شماره‌ی کارت لاتین و چپ‌به‌راست است؛ فاصله‌ی حروف خواندنش را آسان می‌کند */
.wd-card-row b { font-size: 18px; letter-spacing: 1px; overflow-wrap: anywhere; }
.wd-card p { margin: 6px 0 0; font-size: 12.5px; }
.wd-card p:empty { display: none; }
.wd-note { margin: 0 0 12px; font-size: 12.5px; }
.wd-note[hidden] { display: none; }
.wd-foot { margin: 10px 0 0; font-size: 12px; text-align: center; }
.wd-all { margin-top: 8px; }
#wdAmountHint:empty { display: none; }
.wd-big { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.8;
  background: var(--surface-2); border: 1px solid var(--gold-ink, var(--line)); }
.wd-big[hidden], .wd-contact[hidden], .wd-contact a[hidden] { display: none; }
.wd-contact { display: flex; gap: 8px; margin: 0 0 14px; }
.wd-contact a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; text-decoration: none; }
.wd-contact .wd-wa { color: #1a9e55; }
.wd-contact .wd-tg { color: #2a8bc9; }

/* ── گزارشِ ایراد ───────────────────────────────────────────────── */
#ibNote {
  width: 100%; margin: 10px 0 8px; padding: 12px; border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 16px;
  border: 1px solid var(--line); resize: vertical; min-height: 84px;
}
#ibNote:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.ib-pick { width: 100%; }
.ib-pick[hidden], .ib-kinds[hidden], .ib-mine[hidden], #ibSub[hidden] { display: none; }
/* نوعِ پیام — سه دکمه‌ی هم‌عرض؛ انتخاب‌شده طلایی */
.ib-kinds { display: flex; gap: 6px; margin: 4px 0 0; }
.ib-kinds button {
  flex: 1; min-height: 40px; border-radius: 12px; font: inherit; font-size: 14px; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
}
.ib-kinds button[aria-checked="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); font-weight: 700; }
/* پیام‌های قبلیِ مشتری — ردیفی، وضعیت سمتِ چپ */
.ib-mine { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.ib-mine h3 { margin: 0 0 6px; font-size: 13px; color: var(--text-dim); font-weight: 600; }
.ib-m { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; font-size: 13px; line-height: 1.7; }
.ib-m + .ib-m { border-top: 1px solid var(--line); }
.ib-m-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ib-m-t small { display: block; color: var(--text-dim); font-size: 12px; }
.ib-m-s { flex: none; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-dim); }
.ib-m-r { display: block; margin-top: 4px; padding: 6px 9px; border-radius: 10px; font-size: 12.5px;
  background: var(--surface-2); border-inline-start: 3px solid var(--gold); }
#fbHint.fb-new { color: var(--gold-ink); font-weight: 700; }
.ib-m.fixed .ib-m-s { background: var(--up-bg); color: var(--up-ink); }
.ib-spot {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  background: var(--surface-2); border: 1px dashed var(--line); font-size: 13px;
}
/* حالتِ «روی ایراد بزن»: کلِ صفحه هدف است، پس نشانگر و یک قابِ ملایم لازم است
   تا کاربر بفهمد الان کلیکش معامله نمی‌کند، فقط نشانه می‌گذارد. */
body.ib-picking { cursor: crosshair; }
body.ib-picking * { cursor: crosshair !important; }
body.ib-picking::after {
  content: ''; position: fixed; inset: 0; z-index: 70; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--gold);
}


/* ═══ حسابِ من — کارتِ واحد + ردیف‌ها (۲۱ سپتامبر ۲۰۲۶) ══════════════
   چرا بازنویسی شد: نمای قبلی هفت کارتِ هم‌وزن و پنج دکمه‌ی طلاییِ هم‌وزن
   داشت؛ مهم‌ترین عددِ صفحه (بدهی/موجودی) کوچک و کم‌رنگ بود و «خروج» کنارِ
   نام، هم‌وزنِ دکمه‌های اصلی. حالا: یک کارت با همه‌ی عددها، یک دکمه‌ی پُر،
   بقیه ردیفِ ساده. ⚠️ هیچ رنگِ ثابتی — همه توکن، وگرنه تمِ روشن می‌شکند. */

.acct { display: grid; gap: 13px; padding: 14px;
        background: var(--surface); border: 1px solid var(--line-soft, var(--line));
        border-radius: var(--radius); }

.acct-id { display: flex; align-items: center; gap: 11px; }
.acct-av {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
  background: var(--surface-2); color: var(--gold-ink, var(--gold));
  border: 1px solid var(--line-soft, var(--line));
}
.acct-who { flex: 1; min-width: 0; }
.acct-who > div { font-weight: 700; font-size: 15.5px; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.acct-who small { color: var(--text-dim); font-size: 12.5px;
                  font-variant-numeric: tabular-nums; }
.acct-id .btn-sm { min-height: 44px; flex: 0 0 auto; }

/* عددها: کیفِ پول تمام‌عرض و قهرمان، دوتای بعدی کنارِ هم */
.acct-nums {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px 14px;
  padding-top: 12px; border-top: 1px solid var(--line-soft, var(--line));
}
.acct-num { display: grid; gap: 3px; min-width: 0; }
.acct-num.big { grid-column: 1 / -1; }
.acct-lab { font-size: 12.5px; color: var(--text-dim); display: flex;
            align-items: center; gap: 5px; }
.acct-num b { font-size: 17px; font-weight: 700; overflow-wrap: anywhere;
              font-variant-numeric: tabular-nums; }
.acct-num.big b { font-size: 26px; letter-spacing: -.2px; }
.acct-num b small { font-size: 12.5px; font-weight: 500; color: var(--text-dim); }
.acct-num.big b small { font-size: 14px; }
.acct-num b bdi, .bal-chip bdi { unicode-bidi: isolate; }
/* ⚠️ `.acct-lab` رنگ و اندازه‌ی برچسب‌هاست؛ عددِ داخلِ b نباید از آن ارث ببرد */
.acct-num b > span { font-size: inherit; }
.bal-pos { color: var(--up-ink); }
.bal-neg { color: var(--down-ink); }
/* بدهی = خبرِ بد؛ باید اول از همه دیده شود، نه هم‌رنگِ بقیه */
.acct-num.big b .bal-neg { color: var(--down-ink); }

.acct .bal-chips:empty, .acct .wal-sub:empty { display: none; }
.acct-acts { display: grid; gap: 8px; }
.acct-acts .btn-ghost { margin-top: 0; justify-self: start; }

/* ── ردیف‌ها: یک ستونِ ساده، بی جعبه‌درجعبه ───────────────────── */
.arows {
  margin-top: 14px; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-soft, var(--line));
}
.arow {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px 14px; min-height: 56px; text-align: start;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.arows > * + *, .arow-d + .arow, .arow + .arow-d { border-top: 1px solid var(--line-soft, var(--line)); }
.arow-ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--text-dim);
            fill: none; stroke-width: 1.6; }
.push-ico { fill: var(--text-dim); stroke: none; }
.push-box.on .push-ico { fill: var(--up-ink); }
.arow-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.arow-txt b { font-size: 14.5px; font-weight: 600; }
.arow-txt small { font-size: 12px; line-height: 1.6; display: block; }
.arow-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            justify-content: flex-end; }
.arow-act .btn { margin-top: 0; min-height: 44px; padding: 7px 14px; font-size: 13px; }
.arow-link { background: none; border: 0; padding: 6px 2px; cursor: pointer;
             color: var(--text-dim); font: inherit; font-size: 12.5px;
             text-decoration: underline; text-underline-offset: 3px; }
/* کشو = پیکانِ پایین · ردیفِ کاری = پیکانِ رو‌به‌جلو (در راست‌به‌چپ: چپ) */
.arow-chev { flex: 0 0 auto; width: 9px; height: 9px; border-inline-start: 1.7px solid var(--text-faint);
             border-block-end: 1.7px solid var(--text-faint); transform: rotate(45deg);
             margin-inline-end: 3px; }
button.arow > .arow-chev { transform: rotate(45deg) translate(-2px, -2px); }
[dir="rtl"] button.arow > .arow-chev, html:not([dir]) button.arow > .arow-chev {
  border-inline-start: 0; border-block-end: 0;
  border-inline-end: 1.7px solid var(--text-faint); border-block-start: 1.7px solid var(--text-faint);
  transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) {
  button.arow:hover, .arow-d > summary:hover { background: var(--surface-2); }
}
button.arow:active, .arow-d > summary:active { background: var(--surface-2); }

/* کشو */
.arow-d > summary { list-style: none; }
.arow-d > summary::-webkit-details-marker { display: none; }
.arow-d[open] > summary .arow-chev { transform: rotate(-135deg); margin-block-start: 5px; }
.arow-body { padding: 2px 14px 15px; }
/* کشو جعبه‌ی دوم نگیرد — خودِ ردیف قاب است */
.arow-body.look-box, .arow-body.info-card, .arow-body.shop-card {
  background: none; border: 0; box-shadow: none; padding-inline: 0; backdrop-filter: none; }
.arow-body .btn-ghost { margin-top: 10px; }
.arow-d[open] > summary { padding-bottom: 6px; }

/* خروج: تهِ فهرست، کم‌رنگ — خطرناک‌ترین دکمه نباید برجسته باشد */
.arow-quiet .arow-txt b { font-weight: 500; color: var(--text-dim); }
.arow-quiet .arow-ico { color: var(--text-faint); }

/* دسکتاپ: صفحه‌ی حساب لازم نیست تمامِ پهنا را بگیرد */
@media (min-width: 900px) {
  .acct-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acct-num.big { grid-column: 1 / 2; }
  .acct-acts { justify-items: start; }
  .acct-acts .btn-primary { width: auto; padding-inline: 28px; }
}


/* ═══ 🧾 ریزحسابِ من — داخلِ خودِ اپ (۲۱ سپتامبر ۲۰۲۶) ═══
   ردیفی، نه جدول: جدولِ ۶ستونه روی ۳۹۰ پیکسل خواندنی نیست. */
.st-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
          gap: 8px 16px; font-size: 13px;
          padding: 11px 13px; margin-bottom: 12px; border-radius: 12px;
          background: var(--surface-2); border: 1px solid var(--line-soft, var(--line)); }
.st-sum b { font-variant-numeric: tabular-nums; }
.st-row { padding: 11px 0; border-top: 1px solid var(--line-soft, var(--line)); }
.st-row:first-child { border-top: 0; }
.st-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.st-top b { font-size: 14px; }
.st-top i { font-style: normal; font-size: 12px; color: var(--text-dim); }
.st-note { margin: 3px 0 0; font-size: 12.5px; }
.st-mid { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px;
          font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.st-mid:empty { display: none; }
.st-bot { margin-top: 3px; font-size: 11.5px; color: var(--text-faint); }
.st-sheet #stPrint { margin-top: 16px; }

/* ⏰ تعهداتِ پیشِ‌رو (فردایی/پس‌فردایی) — کارتِ بالای «درخواست‌های من» */
.setl-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px; margin: 0 0 12px;
}
.setl-head { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.setl-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
  padding: 7px 0; border-top: 1px solid var(--line-soft);
}
.setl-row:first-of-type { border-top: 0; }
.setl-when { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.setl-row.today .setl-when { color: var(--gold-ink); font-weight: 700; }
.setl-row.over .setl-when { color: var(--down-ink); font-weight: 700; }
.setl-txt { font-size: 12.5px; color: var(--text-dim); }
.setl-amt { font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.setl-amt.p { color: var(--down-ink); }   /* باید بپردازید */
.setl-amt.o { color: var(--up-ink); }     /* به شما پرداخت می‌شود */

/* شبای اختصاصیِ یک شارژِ درشت در «حساب من» */
.wal-sheba { margin: 6px 0 10px; }
.wal-sheba .wal-rcp { width: 100%; margin-top: 8px; min-height: 42px; }
#wdRefBox[hidden], #wdFileBox[hidden] { display: none; }

/* دوربینِ داخلِ اپ با قابِ کارت (احراز، ۲۵ سپ) — همیشه تیره مثلِ دوربینِ گوشی */
#kycCamUi{position:fixed;inset:0;z-index:9999;background:#000;color:#fff;font-family:inherit}
#kycCamUi video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#kycCamUi .kc-frame{position:absolute;left:50%;top:50%;width:min(88vw,520px);aspect-ratio:85.6/54;transform:translate(-50%,-50%);
  border-radius:18px;box-shadow:0 0 0 3px #e6b422,0 0 0 100vmax rgba(0,0,0,.62)}
#kycCamUi .kc-top,#kycCamUi .kc-bot{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
#kycCamUi .kc-top{top:0;padding:calc(env(safe-area-inset-top) + 14px) 18px 12px;font-size:16px}
#kycCamUi .kc-top i{width:38px}
#kycCamUi .kc-x{width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:18px}
#kycCamUi .kc-tip{position:absolute;left:0;right:0;bottom:calc(50% + min(88vw,520px)*.315 + 18px);text-align:center;font-size:17px}
#kycCamUi .kc-tip small{display:block;opacity:.7;font-size:14px;margin-top:6px}
#kycCamUi .kc-bot{bottom:0;padding:24px 30px calc(env(safe-area-inset-bottom) + 30px)}
#kycCamUi .kc-shut{width:74px;height:74px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 5px rgba(0,0,0,.5),0 0 0 8px #fff}
#kycCamUi .kc-shut:active{transform:scale(.92)}
#kycCamUi .kc-side{width:70px;border:0;background:none;color:#fff;font:inherit;font-size:14px}
#kycCamUi .kc-torch.on{color:#e6b422}

/* خروج از حساب در برگه‌ی احرازِ اجباری */
#kycOut{display:block;margin:4px auto 0;background:none;border:0;color:var(--muted,#8e8e93);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px 10px}
#kycOut[hidden]{display:none}

/* کاهشِ حرکت: برگه بی‌انیمیشن باز شود (بعد از قاعده‌ی دسکتاپ تا بر آن برنده شود) */
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } }