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

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

  /* سطوح — ته‌رنگِ سرمه‌ای دارند تا با برند یکی باشند */
  --bg:          #0A0E1C;
  --surface:     #131A32;
  --surface-2:   #1B2342;
  --surface-3:   #232C50;
  --line:        #2C3763;
  --line-soft:   #212A4E;

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

  --up:          #3ED07E;
  --up-bg:       #0F2E20;
  --down:        #FF6B5E;
  --down-bg:     #351A19;

  --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;

  /* رنگِ متن و حاشیه‌ی حالت‌ها. توکن شدند تا تمِ روشن بتواند عوضشان کند —
     قبلاً رنگِ ثابت بودند و روی زمینه‌ی روشن ناخوانا می‌شدند. */
  --up-ink:      #8FE3B4;
  --up-line:     #1E5A3C;
  --down-ink:    #F5A9A2;
  --down-line:   #6A3029;
  --warn-bg:     #38300F;
  --warn-line:   #5F5220;
  --warn-ink:    #F3DFA4;
  --info-bg:     #10263A;
  --info-line:   #1F4763;
  --info-ink:    #A8D3EE;
  --badge-ink:   #A9BEDE;
  --gold-ink:    var(--gold-lite);

  --buy-bg:      linear-gradient(180deg, #12291F 0%, var(--surface-2) 100%);
  --buy-line:    #23503A;
  --buy-off:     #101F19;
  --sell-bg:     linear-gradient(180deg, #2B1615 0%, var(--surface-2) 100%);
  --sell-line:   #5A2B27;
  --sell-off:    #201312;

  --topbar-grad: linear-gradient(180deg, var(--navy) 0%, #101736 100%);

  --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"] {
  --bg:          #F4F1E9;
  --surface:     #FFFFFF;
  --surface-2:   #F7F4EC;
  --surface-3:   #EFEBE1;
  --line:        #DED8C9;
  --line-soft:   #EAE5D9;

  --text:        #14183A;   /* ۱۷.۲:۱ روی کارت */
  --text-dim:    #5A6180;   /* ۶.۱:۱ */
  --text-faint:  #5F6582;   /* ۴.۸:۱ روی روشن‌ترین زمینه */

  --gold-ink:    #7A5F14;   /* طلایی که می‌تواند متن باشد */
  --gold-lite:   #7A5F14;   /* هرجا قبلاً طلاییِ روشن متن بود */

  --up:          #0E5A34;
  --up-bg:       #E6F5EC;
  --down:        #8C1F17;
  --down-bg:     #FCEBE9;

  --shadow:      0 2px 10px rgba(20,24,58,.10);

  --up-ink:      #0E5A34;
  --up-line:     #A8D8BE;
  --down-ink:    #8C1F17;
  --down-line:   #F0BDB6;
  --warn-bg:     #FBF3D9;
  --warn-line:   #E2CE8A;
  --warn-ink:    #6B4E07;
  --info-bg:     #E4F1F9;
  --info-line:   #B5D6E8;
  --info-ink:    #154A6B;
  --badge-ink:   #3C4568;

  --buy-bg:      linear-gradient(180deg, #E6F5EC 0%, #F2FAF5 100%);
  --buy-line:    #A8D8BE;
  --buy-off:     #F1F4F0;
  --sell-bg:     linear-gradient(180deg, #FCEBE9 0%, #FEF5F4 100%);
  --sell-line:   #F0BDB6;
  --sell-off:    #F5F0EF;

  /* سرتیترِ سرمه‌ای می‌ماند: برند بلند بماند و چشم لبه‌ی صفحه را پیدا کند */
  --topbar-grad: linear-gradient(180deg, var(--navy) 0%, #1B2454 100%);

  /* نوارِ رنگیِ دسته‌ها روی زمینه‌ی سفید تیره‌تر می‌شود وگرنه محو است */
  --cat-melted:      #B8860B;
  --cat-gold-coin:   #A0522D;
  --cat-jewelry:     #9B4F97;
  --cat-silver:      #5A7DA6;
  --cat-silver-coin: #3D6E9E;
  --cat-reference:   #5C6890;

  color-scheme: light;
}

* { 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 } }

/* ═══ نوارِ وضعیت ══════════════════════════════════════════ */
.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: 12px; padding: 8px 11px; }
.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 { display: flex; gap: 7px; margin-top: 9px; overflow-x: auto; scrollbar-width: none;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: 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: minmax(0, 1fr) 95px 95px;
  --board-gap:  5px;
}
@media (max-width: 359px) {
  :root { --board-cols: minmax(0, 1fr) 86px 86px; }
}

/* سرتیترِ ستون‌ها — برچسب‌ها فقط یک بار */
.boardhead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-top: 9px; }
.bh-grp {
  display: grid; grid-template-columns: var(--board-cols); gap: var(--board-gap);
  align-items: end; padding: 0 5px 5px 11px;
  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; }
.bh-buy  { color: var(--up-ink); text-align: center; }
.bh-sell { color: var(--down-ink); text-align: center; }

.list { padding: 6px 14px 8px; display: grid; gap: 5px; grid-template-columns: minmax(0, 1fr); }

.list > .card {
  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-inline-start: 3px solid var(--line);
  border-radius: 10px; padding: 5px 5px 5px 8px;
}
/* ریسمانِ رنگیِ دسته — سکه از شمش و نقره در نگاه جدا شود */
.list > .card[data-cat="melted"]      { border-inline-start-color: var(--cat-melted); }
.list > .card[data-cat="gold_coin"]   { border-inline-start-color: var(--cat-gold-coin); }
.list > .card[data-cat="jewelry"]     { border-inline-start-color: var(--cat-jewelry); }
.list > .card[data-cat="silver"]      { border-inline-start-color: var(--cat-silver); }
.list > .card[data-cat="silver_coin"] { border-inline-start-color: var(--cat-silver-coin); }
.list > .card[data-cat="reference"]   { border-inline-start-color: var(--cat-reference); }

.ci { min-width: 0; }
.card-title {
  font-size: 13px; font-weight: 700; line-height: 1.3;
  overflow-wrap: anywhere; hyphens: none;
}
.card-unit {
  font-size: 10px; color: var(--text-dim); display: flex; align-items: center;
  gap: 3px; flex-wrap: nowrap; margin-top: 1px; min-width: 0; overflow: hidden;
}
.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; }
.card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* تغییرِ قیمت — وقتی تغییری نیست هیچ نشان نده.
   دایره‌ی «—» قبلی شبیهِ دکمه‌ی حذف دیده می‌شد و جا می‌گرفت. */
.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 {
  min-height: 40px; padding: 5px 4px; border-radius: 8px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; font-family: inherit; color: var(--text);
  transition: transform .12s, border-color .15s, background .15s;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; overflow: hidden;
}
.px:active:not(:disabled) { transform: scale(.97); }
/* ⚠ عمداً opacity ندارد: خارج از ساعتِ کاری قیمت باید کامل خوانده شود.
   قیمت «اطلاعات» است، نه دکمه — فقط قاب کم‌جان می‌شود. */
.px:disabled { cursor: default; background: var(--surface); border-color: var(--line-soft); }
.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.buy  { border-color: var(--buy-line); background: var(--buy-bg); }
.px.sell { border-color: var(--sell-line); background: var(--sell-bg); }
.px.buy:disabled  { background: var(--buy-off); border-color: var(--line); }
.px.sell:disabled { background: var(--sell-off); border-color: var(--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-lite); }
}

/* ردیفِ مرجع (فقط نمایش) */
.list > .card.ref { background: transparent; border-style: dashed; border-inline-start-style: solid; }
.ref-price {
  grid-column: span 2; text-align: center; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--gold-lite);
}
.ref-price .cur { display: none; }
.ref-price.empty { font-size: 10px; color: var(--text-faint); font-weight: 400; }

.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); }

.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: 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; }

.profile-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 14px; display: flex; align-items: center; gap: 12px;
}
.profile-card > div { flex: 1; min-width: 0; }
.profile-card > div > div { font-weight: 700; font-size: 15px; }
.profile-card small { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

.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 } }
.grabber { width: 38px; height: 4px; border-radius: 999px; background: var(--line);
           margin: 0 auto 12px; }

/* دکمه‌ی ثبت همیشه دیده شود — روی گوشیِ کوتاه با کیبوردِ باز نباید زیرِ اسکرول گم شود */
.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: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; }
.field input {
  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; /* زیرِ ۱۶ ⇒ زومِ خودکارِ آیفون */
}
.field input: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: 38px; 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 #1E5A3C; color: #9BE5BC; }

.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: #133A26; border: 1px solid #1E5A3C; color: #9BE5BC; }
.toast.err { background: #3A1D1B; border: 1px solid #6A3029; color: #F5B8B2; }
@keyframes rise { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

/* ═══ صفحه‌های بزرگ‌تر ═════════════════════════════════════ */
@media (min-width: 640px) {
  .list      { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 9px; }
  .boardhead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bh-grp.dup { display: grid; }
}
@media (min-width: 900px) {
  .list, .stickybar, .banner, .notice, .pad, .listfoot {
    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; }
  .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;
  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;
}
.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"] .theme-btn { border-color: rgba(255,255,255,.22); }

/* ═══ چیزهایی که در تمِ روشن باید عوض شوند ══════════════════ */
/* سربرگ در تمِ روشن هم سرمه‌ای می‌ماند، پس متنش باید سفید شود —
   وگرنه رنگِ متنِ تمِ روشن (سرمه‌ای) روی سرمه‌ای می‌نشیند و ناخوانا می‌شود. */
[data-theme="light"] .topbar { color: var(--on-navy); border-bottom-color: transparent; }
[data-theme="light"] .brand,
[data-theme="light"] .brand-txt b { color: var(--on-navy); }
[data-theme="light"] .brand-txt small { color: rgba(255,255,255,.75); }
[data-theme="light"] .bottomnav {
  background: rgba(255,255,255,.97);
  border-top-color: var(--line);
}
[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"] .card { box-shadow: 0 1px 2px rgba(20,24,58,.06); }
[data-theme="light"] .notice { border-color: var(--warn-line); background: var(--warn-bg); }
[data-theme="light"] .notice summary { color: var(--warn-ink); }
[data-theme="light"] .step-btn,
[data-theme="light"] .chip-btn { background: var(--surface-2); }
[data-theme="light"] .sw-box span { background: #C9C3B4; }