/* ═══════════════════════════════════════════════════════════════════════════
   ۵) سبکِ اپل — تمِ پنجمِ تابلو (۱۹ سپتامبر ۲۰۲۶، خواسته‌ی علیرضا)

   «از زبانِ طراحیِ اپل و iOS الهام بگیر.» الگو = برنامه‌های خودِ آیفون (تنظیمات،
   سهام، کیف پول). اصولی که این‌جا پیاده شده‌اند:
   · فهرستِ گروه‌بندی‌شده‌ی قاب‌دار (inset grouped): هر دسته یک قابِ گردِ ۱۲پیکسلیِ
     کدر روی زمینه‌ی تخت؛ ردیف‌ها با خطِ موییِ نیم‌پیکسلی جدا می‌شوند که از لبه‌ی
     آغاز ۱۶ پیکسل فاصله دارد — نه جعبه‌درجعبه، نه سایه، نه حاشیه.
   · تیترِ دسته کوچک و کم‌رنگ بالای قاب (مثلِ تیترِ بخش‌های «تنظیمات»).
   · نوارِ بالا و نوارِ زبانه‌ی پایین «مادّه»ی نیمه‌شفاف با بلور و یک خطِ مویی.
   · دکمه‌ها «رنگی‌کم‌رنگ» (tinted): زمینه‌ی ۱۴٪ِ همان رنگ و متنِ پررنگ؛ دکمه‌ی اصلیِ
     برگه پرِ رنگِ برند با گوشه‌ی ۱۲.
   · خانه‌های ورودی بی‌حاشیه با زمینه‌ی خاکستریِ «پرکننده»؛ برگه‌ی پایین با دستگیره‌ی
     ۳۶×۵ و گوشه‌ی گرد.
   ⚠️ فقط ظاهر: هیچ ساختارِ HTML و هیچ منطقی عوض نمی‌شود؛ `data-board` که برگردد همه‌چیز می‌رود.
   ⚠️ رنگ‌ها همه از پالت‌اند (--gold* ، --bg ، --surface …) تا «سبز» و بقیه روی این تم هم
      کلِ زمینه را رنگ کنند. فقط پالتِ طلایی خاکستری‌های خودِ iOS را می‌گیرد.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-board="ios"] {
  --ios-cell:    var(--surface);
  --ios-sep:     rgba(84, 84, 88, .55);
  --ios-fill:    rgba(118, 118, 128, .24);
  --ios-fill-2:  rgba(118, 118, 128, .16);
  --ios-press:   rgba(255, 255, 255, .06);
  --ios-mat:     color-mix(in srgb, var(--bg) 72%, transparent);
  --ios-radius:  12px;
  --ios-tint-buy:  color-mix(in srgb, var(--up) 17%, transparent);
  --ios-tint-sell: color-mix(in srgb, var(--down) 17%, transparent);
}
html[data-board="ios"][data-theme="light"] {
  /* ⚠️ سطحِ پایه‌ی تمِ روشن شیشه‌ی ۷۴٪ است؛ قابِ iOS کدرِ سفید است (عددها از پشتِ شیشه
     روی هم نیفتند و خطِ مویی دیده شود). */
  --ios-cell:    #FFFFFF;
  --ios-sep:     rgba(60, 60, 67, .22);
  --ios-fill:    rgba(118, 118, 128, .12);
  --ios-fill-2:  rgba(118, 118, 128, .08);
  --ios-press:   rgba(0, 0, 0, .05);
  --ios-mat:     color-mix(in srgb, var(--bg) 78%, transparent);
  --ios-tint-buy:  color-mix(in srgb, var(--up) 11%, #FFFFFF);
  --ios-tint-sell: color-mix(in srgb, var(--down) 10%, #FFFFFF);
}
/* پالتِ طلایی (پیش‌فرض) = خاکستری‌های خودِ iOS؛ بقیه‌ی پالت‌ها زمینه‌ی رنگیِ خودشان را دارند */
html[data-board="ios"][data-pal="gold"]:not([data-theme="light"]) {
  /* ۲۰ سپتامبر ۲۰۲۶ — خواسته‌ی علیرضا: «حالت شب زیادی سیاه است» (نمونه: تابلوی کوینکس).
     مشکیِ خالصِ iOS جای خودش را به همان زغالیِ خنثای پالت داد؛ سلسله‌مراتبِ سطح‌ها همان ماند. */
  --bg: #0F1216; --surface: #1B1E24; --surface-2: #242831; --surface-3: #2D323C;
  --line: #343943; --line-soft: #24272E; --text: #F4F5F7; --text-dim: #A6AEBB; --text-faint: #8A93A1;
  --surface-solid: #1B1E24; --row-well: #0B0E12;
}
html[data-board="ios"][data-pal="gold"][data-theme="light"] {
  --bg: #F2F2F7; --text: #000000; --text-dim: #636366; --text-faint: #6C6C70; --surface-solid: #FFFFFF;
}

/* ── زمینه: تخت، بی هاله ─────────────────────────────────────────────── */
html[data-board="ios"] body,
html[data-board="ios"][data-theme="light"] body { background: var(--bg); }

/* ── نوارِ بالا: مادّه‌ی نیمه‌شفاف + خطِ مویی ─────────────────────────────── */
html[data-board="ios"] .topbar,
html[data-board="ios"][data-theme="light"] .topbar {
  background: var(--ios-mat);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--ios-sep); box-shadow: none; color: var(--text);
}
html[data-board="ios"] .brand-txt b { color: var(--text); letter-spacing: -.3px; }
html[data-board="ios"] .brand-txt small { color: var(--text-dim); }
html[data-board="ios"] .brand .mark { box-shadow: none; border-radius: 9px; }
html[data-board="ios"] .theme-btn,
html[data-board="ios"][data-theme="light"] .theme-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: var(--ios-fill-2); color: var(--gold-ink); box-shadow: none;
}

/* ── نوارِ چسبانِ زیرِ سربرگ (جستجو + سرتیترِ ستون‌ها) ───────────────────── */
html[data-board="ios"] .stickybar,
html[data-board="ios"][data-theme="light"] .stickybar {
  background: var(--ios-mat);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding-inline: 16px;
}
html[data-board="ios"] .bh-grp { border-bottom: 0; font-weight: 500; color: var(--text-dim); padding-inline: 16px; }
/* فهرستِ این تم در دسکتاپ هم تک‌ستونه است ⇒ سرتیترِ دوم (ستونِ چپِ تابلوی ردیفی) نباید بیاید */
html[data-board="ios"] .boardhead { grid-template-columns: minmax(0, 1fr); }
html[data-board="ios"] .boardhead .bh-grp.dup { display: none; }
html[data-board="ios"] .search input,
html[data-board="ios"] .stickybar input[type="search"] {
  background: var(--ios-fill); border: 0; border-radius: 10px; min-height: 36px;
}

/* ── فهرستِ گروه‌بندی‌شده ─────────────────────────────────────────────── */
html[data-board="ios"] .list { padding: 4px 16px 12px; gap: 0; }
@media (min-width: 900px) {
  /* مثلِ «تنظیمات»ِ آیپد: یک ستونِ خوانا وسطِ صفحه، نه جدولِ دوتاییِ کشیده */
  html[data-board="ios"] .list,
  html[data-board="ios"] .stickybar,
  html[data-board="ios"] .banner,
  html[data-board="ios"] .notice,
  html[data-board="ios"] .pad,
  html[data-board="ios"] .listfoot,
  html[data-board="ios"] .updbar,
  html[data-board="ios"] .bnrs { max-width: 760px; margin-inline: auto; }
}
html[data-board="ios"] .grouphead,
html[data-board="ios"][data-theme="light"] .grouphead {
  background: var(--bg); border: 0; box-shadow: none;
  padding: 20px 16px 7px; margin-top: 0; gap: 6px;
}
html[data-board="ios"] .grouphead::before { display: none; }
html[data-board="ios"] .gh-name,
html[data-board="ios"][data-theme="light"] .gh-name {
  font-size: 13.5px; font-weight: 500; color: var(--text-dim); letter-spacing: 0;
}
html[data-board="ios"] .grouphead .gh-ico { width: 18px; height: 18px; }

html[data-board="ios"] .list .cat-group {
  background: var(--ios-cell); border: 0; border-radius: var(--ios-radius);
  padding: 0; gap: 0; overflow: hidden;
  grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none;
}
html[data-board="ios"] .list .cat-group > .card,
html[data-board="ios"][data-theme="light"] .list .cat-group > .card {
  position: relative; background: none; border: 0; border-radius: 0; box-shadow: none;
  padding: 8px 10px; min-height: 60px;
  transition: background .2s;
}
/* خطِ موییِ جداکننده — از لبه‌ی آغاز ۱۶ پیکسل تو، مثلِ فهرست‌های iOS */
html[data-board="ios"] .list .cat-group > .card + .card::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 16px; inset-inline-end: 0;
  height: .5px; background: var(--ios-sep); pointer-events: none;
}
html[data-board="ios"] .list .cat-group > .card:has(> .drawer:not([hidden])) { background: var(--ios-fill-2); }
html[data-board="ios"][data-theme="light"] .list .card:has(.drawer:not([hidden])) { border-color: transparent; box-shadow: none; }

html[data-board="ios"] .list .card .card-title { font-size: 14.5px; font-weight: 600; letter-spacing: -.3px; }
/* اولین تیتر زیرِ نوارِ چسبان است — فاصله‌ی ۲۰پیکسلیِ بینِ گروه‌ها این‌جا فقط جای خالی بود */
html[data-board="ios"] .list > .grouphead:first-child,
html[data-board="ios"] .list > :first-child > .grouphead:first-child { padding-top: 6px; }
html[data-board="ios"] .list .card .card-unit { color: var(--text-faint); font-size: 12px; }
html[data-board="ios"] .chg { border-radius: 6px; }

/* ── دکمه‌های قیمت: رنگیِ کم‌رنگ، بی حاشیه و سایه ─────────────────────────── */
html[data-board="ios"] .list .card > .px,
html[data-board="ios"][data-theme="light"] .list .card > .px {
  border: 0; box-shadow: none; border-radius: 10px; min-height: 42px; padding: 5px 4px;
}
html[data-board="ios"] .list .card > .px.buy  { background: var(--ios-tint-buy);  color: var(--up-ink); }
html[data-board="ios"] .list .card > .px.sell { background: var(--ios-tint-sell); color: var(--down-ink); }
html[data-board="ios"] .list .card > .px .val { font-weight: 650; letter-spacing: -.3px; }
html[data-board="ios"] .px:active:not(.off) { transform: scale(.97); filter: brightness(.96); }
@media (hover: hover) {
  html[data-board="ios"] .list .card > .px:hover:not(.off) { filter: brightness(1.06); }
}
/* خاموش: خاکستریِ «پرکننده»، بی خط‌چین — iOS دکمه‌ی غیرفعال را فقط کم‌رنگ می‌کند.
   نشانه‌ی غیرِرنگی همان رنگِ مرده‌ی عدد است (--*-ink-off، کنتراستِ ≥۵٫۷). */
html[data-board="ios"] .list .card > .px.off,
html[data-board="ios"][data-theme="light"] .list .card > .px.off {
  background: var(--ios-fill-2); border: 0;
}
html[data-board="ios"] .list .card > .px.off::after { display: none; }
/* 🐞 ۲۶ سپ ۲۰۲۶: رنگِ زنده‌ی `.px.buy/.sell` بالا (۰،۴،۱) رنگِ مرده‌ی style.css (۰،۳،۰) را می‌پوشاند ⇒
   عددِ خاموش (بازارِ بسته / قیمتِ کهنه) همان سبز و قرمزِ پُرِ زنده می‌ماند و فقط زمینه‌اش خاکستری می‌شد. */
html[data-board="ios"] .list .card > .px.off.buy  { color: var(--up-ink-off); }
html[data-board="ios"] .list .card > .px.off.sell { color: var(--down-ink-off); }

/* ── کشوی جزئیات ─────────────────────────────────────────────────────── */
html[data-board="ios"] .drawer,
html[data-board="ios"][data-theme="light"] .drawer {
  background: var(--ios-cell); border: 0; border-radius: 10px; box-shadow: none;
}
html[data-board="ios"] .dr-grid { border-radius: 10px; }

/* ── بنر و اطلاعیه = یک قابِ گردِ ساده ──────────────────────────────────── */
html[data-board="ios"] .banner,
html[data-board="ios"] .notice,
html[data-board="ios"][data-theme="light"] .banner,
html[data-board="ios"][data-theme="light"] .notice {
  border: 0; border-radius: var(--ios-radius); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-board="ios"] .banner.info,
html[data-board="ios"][data-theme="light"] .banner.info { background: var(--ios-cell); color: var(--text-dim); }

/* ── نوارِ زبانه‌ی پایین ─────────────────────────────────────────────── */
html[data-board="ios"] .bottomnav,
html[data-board="ios"][data-theme="light"] .bottomnav {
  background: var(--ios-mat);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: .5px solid var(--ios-sep); box-shadow: none; border-radius: 0;
}
html[data-board="ios"] .bnav { font-size: 10.5px; font-weight: 500; color: var(--text-faint); gap: 2px; }
html[data-board="ios"] .bnav.active,
html[data-board="ios"][data-theme="light"] .bnav.active { color: var(--gold-ink); }
html[data-board="ios"] .bnav:active { background: none; opacity: .6; }
html[data-board="ios"] .bnav svg { width: 24px; height: 24px; }

/* نوارِ زبانه‌ی پایین سرمه‌ای با نشانِ طلایی (۱۹ سپتامبر ۲۰۲۶، انتخابِ علیرضا — «سایت رنگ و روح بگیرد») */
html[data-board="ios"] .bottomnav, html[data-board="ios"][data-theme="light"] .bottomnav {
  background: linear-gradient(180deg, var(--navy-mid, #1B2562) 0%, var(--navy-lo, #111842) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-top: 1px solid rgba(211, 175, 55, .35); box-shadow: 0 -6px 20px rgba(20, 28, 77, .18);
}
html[data-board="ios"] .bnav, html[data-board="ios"][data-theme="light"] .bnav { color: rgba(226, 224, 240, .78); }
html[data-board="ios"] .bnav.active, html[data-board="ios"][data-theme="light"] .bnav.active { color: #F0CF6A; font-weight: 700; }
html[data-board="ios"] .bnav.active svg { filter: drop-shadow(0 0 6px rgba(240, 207, 106, .45)); }
html[data-board="ios"] .bnav.active::before { content: ''; position: absolute; top: 0; width: 34px; height: 3px;
  border-radius: 0 0 3px 3px; background: linear-gradient(90deg, #C39A2A, #F3D77A, #C39A2A); }

/* ── برگه‌ی پایین (خرید/فروش، ورود، …) ───────────────────────────────── */
html[data-board="ios"] .sheet-bg { background: rgba(0, 0, 0, .40); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-board="ios"] .sheet,
html[data-board="ios"][data-theme="light"] .sheet {
  background: var(--bg); border: 0; border-radius: 14px 14px 0 0;
  box-shadow: 0 -2px 30px rgba(0, 0, 0, .18);
  animation: ios-sheet .42s cubic-bezier(.32, .72, 0, 1);
}
@keyframes ios-sheet { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { html[data-board="ios"] .sheet { animation: none; } }
/* دسکتاپ: برگه وسطِ صفحه شناور است، نه چسبیده به پایین — هر چهار گوشه گرد و سایه دورتادور */
@media (min-width: 900px) {
  html[data-board="ios"] .sheet,
  html[data-board="ios"][data-theme="light"] .sheet { border-radius: 20px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    animation: sheet-pop .34s cubic-bezier(.2, .9, .3, 1.12); }
}
html[data-board="ios"] .grabber { width: 36px; height: 5px; background: var(--ios-fill); margin-top: 2px; }
html[data-board="ios"] .sheet h2 { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }

html[data-board="ios"] .btn { border-radius: 12px; font-weight: 600; }
html[data-board="ios"] .btn-primary { background: var(--gold); color: var(--on-gold); }
html[data-board="ios"] .btn:active:not(:disabled) { transform: none; opacity: .75; }
html[data-board="ios"] .btn-ghost,
html[data-board="ios"][data-theme="light"] .btn-ghost {
  background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold-ink); border: 0;
}

html[data-board="ios"] .field input,
html[data-board="ios"] .field select,
html[data-board="ios"] .field textarea,
html[data-board="ios"][data-theme="light"] .field input,
html[data-board="ios"][data-theme="light"] .field select,
html[data-board="ios"][data-theme="light"] .field textarea {
  background: var(--ios-cell); border: 0; border-radius: 10px; box-shadow: none;
}
html[data-board="ios"] .field input:focus,
html[data-board="ios"] .field select:focus,
html[data-board="ios"] .field textarea:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
html[data-board="ios"] .field label { font-weight: 500; padding-inline: 4px; }

/* شمارنده‌ی مقدار: دو دکمه‌ی گرد کنارِ عدد، مثلِ Stepperِ iOS */
html[data-board="ios"] .step-btn { border: 0; background: var(--ios-fill); border-radius: 9px; }

/* ── زبانه‌ها و چیپ‌ها (صفحه‌ی درخواست‌ها و بیشتر) ────────────────────────── */
html[data-board="ios"] .tab,
html[data-board="ios"][data-theme="light"] .tab { background: var(--ios-fill-2); border: 0; color: var(--text); font-weight: 500; }
html[data-board="ios"] .tab.active,
html[data-board="ios"][data-theme="light"] .tab.active {
  background: var(--gold); color: var(--on-gold); border: 0;
}
html[data-board="ios"] .chip-btn,
html[data-board="ios"][data-theme="light"] .chip-btn { background: var(--ios-fill-2); border: 0; color: var(--text); }
html[data-board="ios"] .badge,
html[data-board="ios"][data-theme="light"] .badge { border: 0; background: var(--ios-fill-2); }

/* ── کارت‌های درخواست و «بیشتر» = قابِ ساده ─────────────────────────────── */
html[data-board="ios"] .ord,
html[data-board="ios"] .profile-card,
html[data-board="ios"] .summary-card,
html[data-board="ios"] .acct,
html[data-board="ios"] .arows,
html[data-board="ios"][data-theme="light"] .acct,
html[data-board="ios"][data-theme="light"] .arows,
html[data-board="ios"][data-theme="light"] .ord,
html[data-board="ios"][data-theme="light"] .profile-card,
html[data-board="ios"][data-theme="light"] .summary-card {
  background: var(--ios-cell); border: 0; border-radius: var(--ios-radius); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-board="ios"] .sec-title { font-size: 13.5px; font-weight: 500; color: var(--text-dim); padding-inline: 16px; }
html[data-board="ios"] .look-card,
html[data-board="ios"][data-theme="light"] .look-card { background: var(--ios-fill-2); border: 2px solid transparent; }
html[data-board="ios"] .look-card.on { border-color: var(--gold); background: var(--ios-cell); }

/* ── پیام‌ها ─────────────────────────────────────────────────────────── */
html[data-board="ios"] .toast.ok,
html[data-board="ios"] .toast.err { border-radius: 14px; border: 0; }

/* ── بازارِ جهانی: کارتِ سرمه‌ای‌وطلاییِ بالای تابلو (فقط نمایش، ۱۹ سپتامبر ۲۰۲۶) ──────
   مثلِ کارتِ کیف‌پولِ iOS با رنگِ برندِ حسن (انتخابِ علیرضا از بینِ سه رنگ‌بندی). */
/* ⭐ ۲۰ سپتامبر ۲۰۲۶: این کارت قبلاً فقط در چیدمانِ «ios» دیده می‌شد، ولی تابلوی زنده
   روی چیدمانِ دیگری بود ⇒ انس و دلار **اصلاً** به چشمِ مشتری نمی‌رسید (علیرضا:
   «قیمت جهانی اونس طلا و نقره و دلار اتومات نیست»). حالا در همه‌ی چیدمان‌ها می‌آید؛
   رنگ‌هایش از توکن‌های برند می‌آیند پس با هر تمی جور است. */
.wtick:not([hidden]) {
  display: block; position: relative; overflow: hidden;
  margin: 12px 16px 14px; padding: 14px 18px 12px; border-radius: 20px;
  background: radial-gradient(110% 90% at 100% 0%, var(--navy-glow, rgba(211, 175, 55, .28)) 0%, transparent 55%),
              linear-gradient(135deg, var(--navy-hi, #22307A) 0%, var(--navy-core, #141C4D) 55%, var(--navy-deep, #0B1030) 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgba(20, 28, 77, .30), inset 0 0 0 1px rgba(211, 175, 55, .35);
}
@media (min-width: 900px) { .wtick:not([hidden]) { max-width: 728px; margin-inline: auto; } }
.wtick .wt-head { display: flex; justify-content: space-between; align-items: baseline; position: relative; z-index: 1; }
.wtick .wt-t  { font-size: 15px; font-weight: 700; color: #F3DC8E; }
.wtick .wt-at { font-size: 11.5px; font-weight: 500; color: rgba(236, 226, 196, .82); }
/* هر دو منبعِ جهانی مدتی نرسیده‌اند: عدد سرِ جایش می‌ماند ولی کهنه بودنش گفته می‌شود. */
.wtick .wt-at.old { color: var(--warn-ink, #F3DFA4); }
.wtick .wt-big { display: flex; align-items: baseline; gap: 6px; margin: 2px 0 10px; position: relative; z-index: 1; }
.wtick .wt-big b {
  font-size: 34px; font-weight: 800; letter-spacing: -.5px; line-height: 1.15;
  background: linear-gradient(180deg, #FFF1C2 0%, #E6C257 55%, #C39A2A 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wtick .wt-big small { font-size: 13px; font-weight: 600; color: rgba(236, 226, 196, .82); }
.wtick .wt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; position: relative; z-index: 1; }
.wtick .wt-mini {
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(211, 175, 55, .28);
  border-radius: 12px; padding: 6px 10px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0;
}
.wtick .wt-mini span { font-size: 12px; font-weight: 500; color: rgba(236, 226, 196, .82); white-space: nowrap; }
.wtick .wt-mini b { font-size: 14px; font-weight: 700; white-space: nowrap; color: #F6E4A6; }
.wtick .wt-mini b small { font-size: 10px; font-weight: 500; margin-inline-start: 3px; color: rgba(236, 226, 196, .82); }
.wtick .wt-wave { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 60px; pointer-events: none; }
.wtick .wt-wave path { fill: none; stroke: rgba(211, 175, 55, .45); stroke-width: 1.6; }

/* نمونه‌ی کوچکِ چیدمان در انتخابگر: قابِ گرد با سه ردیف و خطِ مویی */
.lt-ios { grid-template-rows: repeat(3, 1fr); gap: 0; background: var(--surface-3, var(--surface-2));
          border-radius: 6px; padding: 3px 4px; }
.lt-ios i { height: 1px; align-self: end; opacity: .5; }
.lt-ios i:last-child { opacity: 0; }

/* «راهنمای معامله» در پایه هیچ فاصله‌ای نداشت و متن به لبه‌ی قاب می‌چسبید */
html[data-board="ios"] .info-card { padding: 12px 16px; }

/* کنترلِ بخش‌بندی‌شده (segmented control) — ریلِ خاکستری و انتخابِ سفیدِ شناور، نه پرِ طلایی */
html[data-board="ios"] .mc-tabs { background: var(--ios-fill); border: 0; border-radius: 9px; padding: 2px; }
html[data-board="ios"] .mc-tab { border-radius: 7px; color: var(--text); font-weight: 500; }
html[data-board="ios"] .mc-tab.on {
  background: var(--ios-cell); color: var(--text); font-weight: 600;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04);
}
html[data-board="ios"]:not([data-theme="light"]) .mc-tab.on { background: #636366; }
html[data-board="ios"]:not([data-theme="light"])[data-pal]:not([data-pal="gold"]) .mc-tab.on { background: var(--surface-3); }

/* پنج چیدمان ⇒ سه‌تایی تا کارتِ تنها ته نماند */
.look-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) { .look-boards { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════════════════
   پاسِ «خلوت‌تر و خوشگل‌تر» (۱۹ سپتامبر ۲۰۲۶، شاخه‌ی feature/board-prettier)
   ۱) جعبه‌های سبز/صورتیِ قیمت **می‌مانند** — علیرضا نسخه‌ی بی‌جعبه را دید و رد کرد («قبل خوشگل‌تر بود»)
   ۲) رقم‌های جدولیِ وزیرمتن فاصله‌دار دیده می‌شوند («۱ ۰ ۳ ٬ ۱ ۲ ۰») ⇒ tabular-nums برداشته شد
   ۳) واحدِ هم‌شکلِ گروه یک‌بار در سرگروه؛ ردیف تک‌خطی و کوتاه‌تر (۶۰ ← ۵۲)
   ۴) عددِ ریزِ زیرِ قیمتِ آب‌شده برچسبِ «هر گرم» گرفت
   ۵) کارتِ بازارِ جهانی کوتاه‌تر؛ موج دیگر از روی دو قرص رد نمی‌شود
   ═══════════════════════════════════════════════════════════════════════════ */
/* ستون‌های قیمت همان ۹۵px پایه می‌مانند — با ۱۰۰px «شمش طلا (عیار ۹۹۵)» دوخطی می‌شد */
html[data-board="ios"] .list .card .card-title { text-wrap: balance; }

/* ۱ + ۲ */
html[data-board="ios"] .list .card > .px,
html[data-board="ios"][data-theme="light"] .list .card > .px { min-height: 44px; padding: 3px 2px; border-radius: 10px; }
html[data-board="ios"] .list .card > .px .val {
  font-size: clamp(13px, 3.9vw, 15.5px); font-weight: 700; letter-spacing: 0;
  font-variant-numeric: normal; line-height: 1.2;
}
html[data-board="ios"] .px .gram,
html[data-board="ios"] .chg, html[data-board="ios"] .chg .num,
html[data-board="ios"] .ref-price { font-variant-numeric: normal; letter-spacing: 0; }

/* ۴ */
html[data-board="ios"] .list .card > .px .gram { font-size: 10.5px; font-weight: 500; margin-top: 0; }
/* برچسبِ «هر گرم» برداشته شد (۱۹ سپتامبر، علیرضا: «شلوغ کرده») — توضیح در title خودِ عدد هست */

/* ۳ */
html[data-board="ios"] .list .cat-group > .card,
html[data-board="ios"][data-theme="light"] .list .cat-group > .card { padding: 5px 8px; min-height: 54px; }
/* «واحد یک‌بار در سرگروه» از ۲۰ سپتامبر ۲۰۲۶ سراسری شد (style.css) — این‌جا فقط فاصله‌ها می‌مانند. */
html[data-board="ios"] .list .card .card-unit { margin-top: 2px; }
html[data-board="ios"] .list .card .card-unit:not(:has(> :not(.u):not(.flat))) { margin-top: 0; }
html[data-board="ios"] .list .cat-group:not(.uni) .card-unit:not(:has(> :not(.u):not(.flat))) { margin-top: 1px; }

/* سرتیترِ ستون‌ها دقیقاً بالای ستونِ قیمت‌ها (کارت ۸px تو رفته) */
html[data-board="ios"] .bh-grp { padding-inline: 8px; font-size: 11.5px; }

/* ۵ */
html[data-board="ios"] .wtick:not([hidden]) {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px;
  margin: 10px 16px 10px; padding: 11px 16px 12px; border-radius: 18px;
}
html[data-board="ios"] .wtick .wt-head { flex-direction: column; align-items: flex-start; gap: 1px; }
html[data-board="ios"] .wtick .wt-big { margin: 0; flex-direction: row-reverse; }
html[data-board="ios"] .wtick .wt-big b { font-size: 29px; font-variant-numeric: normal; letter-spacing: 0; }
html[data-board="ios"] .wtick .wt-row { grid-column: 1 / -1; }
html[data-board="ios"] .wtick .wt-mini { background: rgba(10, 14, 44, .55); }
html[data-board="ios"] .wtick .wt-wave { bottom: auto; top: 4px; height: 44px; }
html[data-board="ios"] .wtick .wt-wave path { stroke: rgba(211, 175, 55, .28); }
/* نام وسطِ ردیف بنشیند (دکمه‌ی نام روی گوشی ۴۴ است و ردیف‌هایش کش می‌آمدند) */
html[data-board="ios"] .list .card button.ci { align-content: center; }
/* موج از روی عددِ درشت رد می‌شد؛ هاله‌ی طلاییِ گوشه برای «روح» کافی است */
html[data-board="ios"] .wtick .wt-wave { display: none; }
/* فاصله‌ی خالیِ بینِ کارتِ بالا، سرتیترِ ستون‌ها و اولین گروه */
html[data-board="ios"] .wtick:not([hidden]) { margin-bottom: 2px; }
html[data-board="ios"] .stickybar { padding-block: 6px 4px; }
html[data-board="ios"] .boardhead { margin-top: 4px; }
html[data-board="ios"] .grouphead, html[data-board="ios"][data-theme="light"] .grouphead { padding-top: 16px; }
html[data-board="ios"] .list > .grouphead:first-child,
html[data-board="ios"] .list > :first-child > .grouphead:first-child { padding-top: 4px; }

/* دسکتاپ: کارتِ بازارِ جهانی هم‌ترازِ ستونِ قیمت‌ها. ⚠️ باید آخرِ فایل بماند —
   قاعده‌ی «۵» بالا `margin: 10px 16px` می‌نویسد و با هم‌اختصاصیتی، `margin-inline: auto`ِ
   مدیا-کوئریِ قبلی را می‌بُرد ⇒ کارت در دسکتاپ به لبه‌ی راستِ صفحه می‌چسبید (۱۹ سپتامبر). */
@media (min-width: 900px) {
  html[data-board="ios"] .wtick:not([hidden]) { max-width: 728px; margin-inline: auto; }
  /* نوارِ سرتیترِ ستون‌ها هم‌عرضِ کارت‌ها (قبلاً ۱۶ پیکسل از هر طرف بیرون می‌زد) */
  html[data-board="ios"] .stickybar,
  html[data-board="ios"][data-theme="light"] .stickybar { max-width: 728px; padding-inline: 0; }
  /* نوارِ پایین هم‌عرضِ ستونِ قیمت‌ها (قرصِ ۴۲۰پیکسلی کنارِ ستونِ ۷۲۸ کوچک و بی‌تناسب بود) */
  html[data-board="ios"] .bottomnav,
  html[data-board="ios"][data-theme="light"] .bottomnav { max-width: 728px; margin-inline: auto; border-radius: 18px 18px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   پاسِ سلیقه‌ی علیرضا روی تابلوی مشتری (۲۵ سپتامبر ۲۰۲۶، از روی عکسِ ۱۹۲۰ِ خودش)
   ۱) ردیف‌های جدا و گرد با سایه‌ی نرم، نه خطِ مویی (سلیقه‌ی مشتری‌محور ×۶)
   ۲) عددِ ریزِ زیرِ قیمت و فلشِ ▾ کنارِ نام پنهان — شلوغی؛ توضیح در title/کشو
   ۳) کارتِ انس: قرص‌های داخلی بی‌قاب (جعبه‌درجعبه نه)
   ۴) ≥۱۲۰۰: ستونِ ۱۱۸۰پیکسلیِ دوستونه (نه ستونِ ۷۶۰ و دو حاشیه‌ی خالی)
   ۵) ≥۱۴۴۰: منوی پایین ⇐ منوی کناریِ شیشه‌ایِ شناور (سبکِ مک)
   ⚠️ فقط ظاهر؛ هیچ HTML و منطقی عوض نشد. همه زیرِ data-board="ios".
   ═══════════════════════════════════════════════════════════════════════════ */
/* ۱ */
html[data-board="ios"] .list .cat-group,
html[data-board="ios"][data-theme="light"] .list .cat-group {
  background: none; overflow: visible; row-gap: 7px;
}
html[data-board="ios"] .list .cat-group > .card,
html[data-board="ios"][data-theme="light"] .list .cat-group > .card {
  background: var(--ios-cell); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(20, 28, 77, .05), 0 4px 14px rgba(20, 28, 77, .06);
}
html[data-board="ios"]:not([data-theme="light"]) .list .cat-group > .card { box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
html[data-board="ios"] .list .cat-group > .card + .card::before { display: none; }
html[data-board="ios"][data-theme="light"] body {
  background: radial-gradient(1200px 520px at 85% -120px, rgba(211, 175, 55, .13), transparent 70%), var(--bg);
  background-attachment: fixed;
}
/* ۲ */
html[data-board="ios"] .list .card > .px .gram { display: none; }
html[data-board="ios"] .list .card:not(.ref) button.ci > .caret { display: none !important; }
/* ۳ */
html[data-board="ios"] .wtick .wt-mini { box-shadow: none; background: rgba(255, 255, 255, .07); }

/* ۴ */
@media (min-width: 1200px) {
  html[data-board="ios"] {
    --board-cols: 132px minmax(0, 1fr) 132px;
    --desk-w: min(1180px, calc(100vw - 48px));
  }
  html[data-board="ios"] .list,
  html[data-board="ios"] .stickybar,
  html[data-board="ios"][data-theme="light"] .stickybar,
  html[data-board="ios"] .banner,
  html[data-board="ios"] .notice,
  html[data-board="ios"] .listfoot,
  html[data-board="ios"] .updbar,
  html[data-board="ios"] .bnrs,
  html[data-board="ios"] .wtick:not([hidden]),
  html[data-board="ios"] .hero,
  html[data-board="ios"] .trust-line { max-width: var(--desk-w); margin-inline: auto; }
  html[data-board="ios"] .list .cat-group,
  html[data-board="ios"][data-theme="light"] .list .cat-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 1), auto);
    column-gap: 16px; align-items: start;
  }
  html[data-board="ios"] .list .cat-group.uni > .card:not(.ref) { max-width: none; margin-inline: 0; }
  html[data-board="ios"] .boardhead { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  html[data-board="ios"] .boardhead .bh-grp.dup { display: grid; }
  html[data-board="ios"] .list .card > .px .val { font-size: 16px; }
  html[data-board="ios"] .list .card .card-title { font-size: 15px; font-weight: 500; }
  html[data-board="ios"] .bottomnav,
  html[data-board="ios"][data-theme="light"] .bottomnav {
    max-width: var(--desk-w); border-radius: 22px 22px 0 0;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border: 0; box-shadow: 0 -6px 24px rgba(20, 28, 77, .08);
  }
  html[data-board="ios"] .bnav, html[data-board="ios"][data-theme="light"] .bnav { color: var(--text-dim); }
  html[data-board="ios"] .bnav.active, html[data-board="ios"][data-theme="light"] .bnav.active { color: var(--gold-ink); }
  html[data-board="ios"] .bnav.active svg { filter: none; }
  html[data-board="ios"] .bnav.active::before { display: none; }
}
/* ۵ */
@media (min-width: 1440px) {
  html[data-board="ios"] .bottomnav,
  html[data-board="ios"][data-theme="light"] .bottomnav {
    inset: 50% 20px auto auto; transform: translateY(-50%);
    width: 88px; height: auto; max-width: none; margin: 0; padding: 10px 0;
    display: flex; flex-direction: column; gap: 4px; border-radius: 26px;
    box-shadow: 0 10px 36px rgba(20, 28, 77, .14);
  }
  html[data-board="ios"] .bnav { min-height: 64px; margin-inline: 8px; border-radius: 18px; }
  html[data-board="ios"] .bnav.active { background: color-mix(in srgb, var(--gold) 16%, transparent); }
  html[data-board="ios"] .bnav:hover:not(.active) { background: var(--ios-fill-2); }
  html[data-board="ios"] .bnav .nav-badge { top: 10px; inset-inline-end: 22px; }
  html[data-board="ios"] main, html[data-board="ios"] .view { padding-bottom: 24px; }
}

/* سرگروه‌ها جدا از ردیف‌ها دیده شوند (کم‌رنگِ ۱۳٫۵ لای ردیف‌ها گم بود) */
html[data-board="ios"] .gh-name,
html[data-board="ios"][data-theme="light"] .gh-name { font-size: 15px; font-weight: 700; color: var(--text); }
html[data-board="ios"] .grouphead .gh-ico { width: 22px; height: 22px; }
/* فلشِ ▾ کنارِ نام (themes.css، ::after) — کلِ نام خودش دکمه‌ی کشوست؛ ستاره‌دارها ستاره‌شان می‌ماند */
html[data-board="ios"] .list .card:not(.ref):not(.is-star) .card-title::after { display: none; }
html[data-board="ios"] .list .card:not(.ref) button.ci > .card-title { padding-inline-end: 0; }
/* ۶۴۰–۱۱۹۹: ردیف‌های هم‌واحد تمام‌عرضِ ستون (۵۶۰پیکسلیِ وسط‌چین ردیف‌های کج‌وکوله می‌ساخت) */
@media (min-width: 640px) {
  html[data-board="ios"] .list .cat-group.uni > .card:not(.ref) { max-width: none; margin-inline: 0; }
  html[data-board="ios"] { --board-cols: 124px minmax(0, 1fr) 124px; }
}
/* کارتِ انس در دسکتاپ: یک نوارِ باریکِ یک‌خطی، نه کارتِ ۱۱۰پیکسلیِ قهرمان (۲۵ سپ) */
@media (min-width: 1200px) {
  html[data-board="ios"] .wtick:not([hidden]) {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
    column-gap: 22px; padding: 10px 20px; border-radius: 22px;
  }
  html[data-board="ios"] .wtick .wt-head { flex-direction: column; }
  html[data-board="ios"] .wtick .wt-big b { font-size: 26px; }
  html[data-board="ios"] .wtick .wt-row { grid-column: auto; max-width: 560px; justify-self: end; width: 100%; }
  html[data-board="ios"] .wtick .wt-wave { display: none; }
  html[data-board="ios"] .trust-line { justify-content: center; margin-top: 4px; }
}
/* ۹۰۰–۱۱۹۹ (لپ‌تاپِ ۱۰۲۴ و ۱۳۶۶@۱۲۵٪): نوارِ پایین هم شیشه‌ای، هم‌شکلِ ≥۱۲۰۰ (سرمه‌ایِ پُر فقط گوشی) */
@media (min-width: 900px) and (max-width: 1199px) {
  html[data-board="ios"] .bottomnav,
  html[data-board="ios"][data-theme="light"] .bottomnav {
    border-radius: 22px 22px 0 0; border: 0;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: 0 -6px 24px rgba(20, 28, 77, .08);
  }
  html[data-board="ios"] .bnav, html[data-board="ios"][data-theme="light"] .bnav { color: var(--text-dim); }
  html[data-board="ios"] .bnav.active, html[data-board="ios"][data-theme="light"] .bnav.active { color: var(--gold-ink); }
  html[data-board="ios"] .bnav.active svg { filter: none; }
  html[data-board="ios"] .bnav.active::before { display: none; }
}

/* ═══ پاسِ «بلوغ» (۲۵ سپ ۲۰۲۶، دورِ ۱) — از روی عکسِ ۱۶۰۰ِ لپ‌تاپِ علیرضا ═══ */
@media (min-width: 900px) {
  /* پیامِ مدیر: یک نوارِ باریک، نه کارتِ ۱۵۰پیکسلی */
  html[data-board="ios"] .notice {
    display: flex; align-items: center; gap: 14px; padding: 6px 18px;
    border: 0; border-radius: 18px; background: var(--ios-cell);
    box-shadow: 0 1px 2px rgba(20, 28, 77, .05), 0 4px 14px rgba(20, 28, 77, .06);
  }
  html[data-board="ios"] .notice summary { min-height: 36px; padding: 0; white-space: nowrap; }
  html[data-board="ios"] .notice summary::after { content: '✕'; font-size: 12px; color: var(--text-faint); margin-inline-start: 10px; }
  html[data-board="ios"] .notice[open] summary::after { transform: none; }
  html[data-board="ios"] .notice summary { order: 2; margin-inline-start: auto; }
  html[data-board="ios"] .notice .notice-body { order: 1; }
  html[data-board="ios"] .notice summary .notice-ico { order: -1; }
  html[data-board="ios"] .notice-body { padding: 0; font-size: 13px; line-height: 1.7; color: var(--text-dim); }
  /* «آخرین به‌روزرسانی» تکرارِ «… ثانیه پیش» راهنمای ستون‌هاست */
  html[data-board="ios"]:has(#liveAge:not([hidden])) .updbar:not(.stale) { display: none; }
  /* سرستون‌ها: یک راهنمای رنگیِ وسط‌چین، نه چهار برچسبِ پراکنده روی نوارِ خاکستری */
  html[data-board="ios"] .boardhead,
  html[data-board="ios"][data-theme="light"] .boardhead { display: flex; justify-content: center; background: transparent; }
  html[data-board="ios"] .stickybar,
  html[data-board="ios"][data-theme="light"] .stickybar { background: transparent; box-shadow: none; }
  html[data-board="ios"] .boardhead .bh-grp.dup { display: none; }
  html[data-board="ios"] .bh-grp {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    border: 0; padding: 4px 0 2px; font-size: 12.5px; font-weight: 500;
  }
  html[data-board="ios"] .bh-buy { order: 1; } html[data-board="ios"] .bh-sell { order: 2; } html[data-board="ios"] .bh-cur { order: 3; }
  html[data-board="ios"] .bh-buy::before, html[data-board="ios"] .bh-sell::before {
    content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px;
    margin-inline-end: 6px; background: currentColor; vertical-align: 1px;
  }
  /* نام و نشانِ تغییر در یک خط ⇒ همه‌ی ردیف‌ها هم‌قد */
  html[data-board="ios"] .list .card:not(.ref) button.ci {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap;
  }
  html[data-board="ios"] .list .card:not(.ref) button.ci > .card-unit { margin: 0; }
  /* ⚠️ نشانِ «آخرین قیمت» (قیمتِ کهنه) حتی با تغییرِ صفر باید دیده شود — وگرنه در دسکتاپ کلِ ردیف پنهان می‌شد */
  html[data-board="ios"] .list .card:not(.ref) button.ci > .card-unit:not(:has(.chg:not(.flat), .badge.old)) { display: none; }
  html[data-board="ios"] .list .card .card-title { -webkit-line-clamp: 1; }
  /* عدد یک پله سبک‌تر */
  html[data-board="ios"] .list .card > .px .val { font-weight: 600; }
}
@media (min-width: 1200px) {
  /* خانه‌ی قیمت پهن‌تر، ستونِ نام تنگ‌تر ⇒ قیمت کنارِ نام، نه ۱۵۰ پیکسل آن‌طرف */
  html[data-board="ios"] { --board-cols: 172px minmax(0, 1fr) 172px; }
  html[data-board="ios"] .list .card > .px .val { font-size: 17px; }
  html[data-board="ios"] .list .cat-group > .card { min-height: 60px; }
  /* نوارِ انس: یک خطِ یک‌دست، بی جعبه‌های داخلی */
  html[data-board="ios"] .wtick .wt-row { display: flex; gap: 28px; justify-content: flex-start; max-width: none; }
  html[data-board="ios"] .wtick .wt-mini { background: none; padding: 0; gap: 8px; }
  html[data-board="ios"] .wtick .wt-mini + .wt-mini { padding-inline-start: 28px; box-shadow: inset 1px 0 0 rgba(236, 226, 196, .22); }
}
/* ═══ پاسِ «بلوغ»، دورِ ۲ ═══ */
@media (min-width: 900px) {
  /* راهنمای ستون‌ها: قرصِ شیشه‌ایِ شناورِ وسط‌چین (چسبان می‌ماند)، نه نوارِ خاکستریِ تمام‌عرض */
  html[data-board="ios"] .stickybar,
  html[data-board="ios"][data-theme="light"] .stickybar {
    width: fit-content; max-width: calc(100vw - 32px); margin: 6px auto 0; padding: 3px 20px;
    border-radius: 999px; background: var(--ios-mat);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 2px 12px rgba(20, 28, 77, .07);
  }
  /* پیامِ مدیر: عنوان سرِ خط (راست)، متن کنارش، ✕ ته خط (چپ) */
  html[data-board="ios"] .notice { position: relative; padding-inline-end: 44px; }
  html[data-board="ios"] .notice summary { order: 0; margin-inline-start: 0; position: static; }
  html[data-board="ios"] .notice .notice-body { order: 1; padding-inline-start: 14px; box-shadow: inset -1px 0 0 var(--ios-sep); }
  html[data-board="ios"] .notice summary::after {
    position: absolute; inset-inline-end: 12px; top: 50%; margin: 0; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ios-fill-2);
  }
  html[data-board="ios"] .notice[open] summary::after { transform: translateY(-50%); }
  /* گروه‌ها نزدیک‌تر؛ سرگروه به ردیف‌های خودش بچسبد */
  html[data-board="ios"] .grouphead,
  html[data-board="ios"][data-theme="light"] .grouphead { padding-top: 12px; padding-bottom: 6px; }
  /* نشانِ تغییر خواناتر */
  html[data-board="ios"] .list .card .chg { font-size: 11.5px; padding: 2px 7px; }
  html[data-board="ios"] .list .card .chg .arw { font-size: 9px; }
  /* نوارِ انس از ۹۰۰ به بالا هم یک‌خطی */
  html[data-board="ios"] .wtick:not([hidden]) {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
    column-gap: 22px; padding: 10px 20px; border-radius: 22px;
  }
  html[data-board="ios"] .wtick .wt-big b { font-size: 26px; }
  html[data-board="ios"] .wtick .wt-wave { display: none; }
  html[data-board="ios"] .wtick .wt-row { grid-column: auto; display: flex; gap: 24px; justify-content: flex-start; }
  html[data-board="ios"] .wtick .wt-mini { background: none; box-shadow: none; padding: 0; gap: 8px; }
  html[data-board="ios"] .wtick .wt-mini + .wt-mini { padding-inline-start: 24px; box-shadow: inset 1px 0 0 rgba(236, 226, 196, .22); }
}
/* ═══ پاسِ «بلوغ»، دورِ ۳ ═══ */
@media (min-width: 900px) {
  /* جداکننده‌ی دو عددِ نوارِ انس صاف (سایه‌ی درونی روی گوشه‌ی گرد کمان می‌ساخت) و عددها ته نوار، روبه‌روی انس */
  html[data-board="ios"] .wtick .wt-mini { border-radius: 0; }
  html[data-board="ios"] .wtick .wt-mini + .wt-mini { box-shadow: none; border-inline-start: 1px solid rgba(236, 226, 196, .22); }
  html[data-board="ios"] .wtick .wt-row { justify-content: flex-end; }
}
/* ═══ پاسِ «بلوغ»، دورِ ۴: آیکونِ سرگروه = مربعِ گردِ رنگیِ پُر (سلیقه‌ی ثابتِ علیرضا) ═══ */
html[data-board="ios"] .grouphead .gh-ico {
  box-sizing: content-box; width: 18px; height: 18px; padding: 4px; border-radius: 8px;
  background: color-mix(in srgb, var(--gold) 20%, var(--ios-cell));
}
/* ═══ پاسِ «بلوغ»، دورِ ۵: گوشی (سربرگِ گوشی مالِ cust-calm.css است) ═══ */
/* «آخرین به‌روزرسانی» تکرارِ «… ثانیه پیش» است (همه‌ی اندازه‌ها) */
html[data-board="ios"]:has(#liveAge:not([hidden])) .updbar:not(.stale) { display: none; }
@media (max-width: 899px) {
  /* ستونِ وسطِ سرتیتر دوخطی و درهم بود ⇒ فقط «؟» و «… ثانیه پیش» در یک خط؛ «به تومان» در راهنمای «؟» هست */
  html[data-board="ios"] .bh-cur { font-size: 0; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
  html[data-board="ios"] .bh-cur > * { font-size: 11px; }
  html[data-board="ios"] .bh-cur .live-age { margin: 0; }
}

/* ═══ چشمکِ تغییرِ قیمت — دیدنی و فنری (۲۵ سپ ۲۰۲۶، انتخابِ علیرضا) ═══
   قبلی ۱۴٪ و ۱٫۱ ثانیه بود و روی خانه‌ی سبز، چشمکِ سبز عملاً دیده نمی‌شد.
   حالا: پرشِ فنریِ کوچک + حلقه‌ی رنگیِ جهت (بالا سبز، پایین قرمز، مستقل از رنگِ خانه)
   + فلشِ ▲/▼ که ۲ ثانیه گوشه‌ی خانه می‌ماند و محو می‌شود. همچنان فقط box-shadow و
   transform — به background دست نمی‌زند (درسِ چشمکِ سفیدِ تمِ شب). */
html[data-board="ios"] .list .card > .px { position: relative; }
@keyframes mcPopUp {
  0%   { transform: scale(1);    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--up) 26%, transparent), 0 0 0 2px var(--up); }
  14%  { transform: scale(1.05); }
  40%  { transform: scale(.99); }
  60%  { transform: scale(1); }
  100% { transform: scale(1);    box-shadow: inset 0 0 0 999px transparent, 0 0 0 2px transparent; }
}
@keyframes mcPopDown {
  0%   { transform: scale(1);    box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--down) 24%, transparent), 0 0 0 2px var(--down); }
  14%  { transform: scale(1.05); }
  40%  { transform: scale(.99); }
  60%  { transform: scale(1); }
  100% { transform: scale(1);    box-shadow: inset 0 0 0 999px transparent, 0 0 0 2px transparent; }
}
@keyframes mcArrow { 0% { opacity: 0; transform: translateY(3px); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
html[data-board="ios"] .list .card > .px.flash-up   { animation: mcPopUp 1.8s cubic-bezier(.22, 1, .36, 1); }
html[data-board="ios"] .list .card > .px.flash-down { animation: mcPopDown 1.8s cubic-bezier(.22, 1, .36, 1); }
html[data-board="ios"] .list .card > .px.flash-up::before,
html[data-board="ios"] .list .card > .px.flash-down::before {
  position: absolute; top: 3px; inset-inline-end: 6px; font-size: 9px; line-height: 1;
  animation: mcArrow 2s ease-out forwards; pointer-events: none;
}
html[data-board="ios"] .list .card > .px.flash-up::before   { content: '▲'; color: var(--up); }
html[data-board="ios"] .list .card > .px.flash-down::before { content: '▼'; color: var(--down); }
@media (prefers-reduced-motion: reduce) {
  html[data-board="ios"] .list .card > .px.flash-up,
  html[data-board="ios"] .list .card > .px.flash-down { animation-name: none; box-shadow: 0 0 0 2px currentColor; }
}

/* کاهشِ حرکت: بعد از قاعده‌ی دسکتاپ تا بر آن برنده شود */
@media (prefers-reduced-motion: reduce) {
  html[data-board="ios"] .sheet, html[data-board="ios"][data-theme="light"] .sheet { animation: none; }
}
/* «۱۲ نفر» کنارِ «… ثانیه پیش» در سرتیترِ فشرده‌ی گوشی (۲۶ سپ ۲۰۲۶) */
@media (max-width: 899px) {
  html[data-board="ios"] .bh-cur:has(.live-watch:not([hidden])) { flex-wrap: wrap; row-gap: 1px; }
  html[data-board="ios"] .bh-cur .live-watch { margin: 0; flex-basis: 100%; justify-content: center; font-size: 11px; }
}