/* ═══════════════════════════════════════════════════════════════════════════
   ۶) «سفید و نرم» — تمِ ششمِ تابلو (۱۹ سپتامبر ۲۰۲۶، خواسته‌ی علیرضا)

   مرجع: زبانِ اپ‌های طلای مدرنِ ایرانی که علیرضا روی گوشی نشان داد (نه کپیِ دارایی،
   فقط زبان): زمینه‌ی سفیدِ تمیز · کارت‌های انتخابِ دسته با آیکونِ سه‌بعدیِ فلز
   (انتخاب = کرمی با لبه‌ی طلایی) · نوارِ کرمیِ «قیمتِ لحظه‌ای» با نقطه‌ی قرمزِ زنده ·
   کارت‌های سفیدِ ۲۰پیکسلی با سایه‌ی نرم · در هر ردیف نام راست و دو قرصِ کم‌رنگِ
   «خرید/فروش» زیرِ هم · دکمه‌ی اصلیِ پررنگِ ۱۶پیکسلی · نوارِ پایینِ شناورِ گرد.
   ⚠️ رنگِ اصلی = `--navy` پالت (طلایی ⇒ سرمه‌ایِ برندِ حسن، سبز ⇒ سبزِ تیره، …)
      تا انتخابِ رنگ همچنان کلِ ظاهر را عوض کند.
   ⚠️ فقط ظاهر + دو جزءِ نمایشیِ `#softTop` (app.js ← renderSoft)؛ هیچ منطقِ پول و سفارش.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-board="soft"] {
  --sf-page:   var(--bg);
  --sf-card:   var(--surface);
  --sf-line:   var(--line-soft);
  --sf-brand:  var(--gold);
  --sf-on:     var(--on-gold);
  --sf-cream:  color-mix(in srgb, var(--gold) 13%, var(--surface));
  --sf-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  --sf-buy-bg:  color-mix(in srgb, var(--up) 16%, transparent);
  --sf-sell-bg: color-mix(in srgb, var(--down) 16%, transparent);
  --sf-mute:   rgba(128, 128, 140, .16);
}
html[data-board="soft"][data-theme="light"] {
  --sf-page:   color-mix(in srgb, var(--bg) 30%, #FFFFFF);
  --sf-card:   #FFFFFF;
  --sf-line:   #EEF0F3;
  --sf-brand:  var(--navy);
  --sf-on:     #FFFFFF;
  --sf-cream:  color-mix(in srgb, var(--gold) 13%, #FFFFFF);
  --sf-shadow: 0 2px 14px rgba(20, 24, 40, .07), 0 0 0 1px #F1F2F5;
  --sf-buy-bg:  #EAF6EF;
  --sf-sell-bg: #FDEDEB;
  --sf-mute:   #F3F4F6;
}

/* ── زمینه و سربرگ: سفید و ساده ─────────────────────────────────────── */
html[data-board="soft"] body,
html[data-board="soft"][data-theme="light"] body { background: var(--sf-page); }
html[data-board="soft"] .topbar,
html[data-board="soft"][data-theme="light"] .topbar {
  background: var(--sf-page); border-bottom: 0; box-shadow: none; color: var(--text);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-board="soft"] .brand-txt b { color: var(--text); }
html[data-board="soft"] .theme-btn,
html[data-board="soft"][data-theme="light"] .theme-btn {
  border: 1.5px solid var(--sf-line); background: var(--sf-card); color: var(--text); border-radius: 14px; box-shadow: none;
}

/* ── نوارِ چسبان: کارت‌های دسته + قیمتِ لحظه‌ای؛ سرتیترِ ستون‌ها لازم نیست ── */
html[data-board="soft"] .stickybar,
html[data-board="soft"][data-theme="light"] .stickybar {
  background: var(--sf-page); padding: 6px 16px 8px; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-board="soft"] .boardhead { display: none; }

.soft-top[hidden] { display: none; }
.soft-cats {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78px, 1fr); gap: 8px;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.soft-cats::-webkit-scrollbar { display: none; }
.soft-cat {
  height: 76px; border-radius: 16px; border: 1.5px solid var(--sf-line); background: var(--sf-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font: inherit; color: var(--text-dim); cursor: pointer; padding: 0 4px;
  transition: border-color .15s, background .15s;
}
.soft-cat svg { width: 44px; height: 33px; display: block; }
.soft-cat b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.soft-cat.on { border-color: var(--gold); background: linear-gradient(180deg, var(--sf-card), var(--sf-cream)); color: var(--text); }
.soft-cat.on b { font-weight: 700; }
.soft-cat:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.soft-live {
  margin-top: 10px; min-height: 44px; border-radius: 12px; background: var(--sf-cream);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 14px;
  font-size: 13px; color: var(--text-dim);
}
.soft-live > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soft-live i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #EF4444;
  margin-inline-end: 7px; vertical-align: 1px; box-shadow: 0 0 0 4px rgba(239, 68, 68, .15);
  animation: sf-pulse 1.8s ease-in-out infinite;
}
@keyframes sf-pulse { 50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .soft-live i { animation: none; } }
.soft-live b { font-size: 16.5px; font-weight: 800; color: var(--text); }
.soft-live > span:last-child { white-space: nowrap; flex: none; }

/* ── فهرست: هر دسته یک کارتِ سفیدِ نرم ─────────────────────────────── */
html[data-board="soft"] .list { padding: 2px 16px 14px; gap: 0; }
@media (min-width: 900px) {
  html[data-board="soft"] .list,
  html[data-board="soft"] .stickybar,
  html[data-board="soft"] .banner,
  html[data-board="soft"] .notice,
  html[data-board="soft"] .pad,
  html[data-board="soft"] .listfoot,
  html[data-board="soft"] .updbar,
  html[data-board="soft"] .bnrs { max-width: 760px; margin-inline: auto; }
}
html[data-board="soft"] .grouphead,
html[data-board="soft"][data-theme="light"] .grouphead {
  background: var(--sf-page); border: 0; box-shadow: none; padding: 16px 6px 8px; margin-top: 0;
}
html[data-board="soft"] .grouphead::before { display: none; }
html[data-board="soft"] .gh-name,
html[data-board="soft"][data-theme="light"] .gh-name { font-size: 15px; font-weight: 700; color: var(--text); }
html[data-board="soft"] .gh-n { display: none; }

html[data-board="soft"] .list .cat-group {
  background: var(--sf-card); border: 0; border-radius: 20px; box-shadow: var(--sf-shadow);
  padding: 0; gap: 0; overflow: hidden;
  grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none;
}
/* ردیف: نام راست (دو خط)، دو قرصِ خرید/فروش زیرِ هم در چپ */
html[data-board="soft"] .list .cat-group > .card:not(.ref),
html[data-board="soft"][data-theme="light"] .list .cat-group > .card:not(.ref) {
  grid-template-columns: minmax(0, 1fr) 152px; grid-template-rows: auto auto; column-gap: 10px; row-gap: 5px;
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 11px 14px; min-height: 66px;
}
html[data-board="soft"] .list .cat-group > .card + .card { border-top: 1px solid var(--sf-line); }
html[data-board="soft"] .list .card:not(.ref) > .ci { grid-column: 1; grid-row: 1 / span 2; align-self: center; text-align: start; }
html[data-board="soft"] .list .card:not(.ref) > .px.buy  { grid-column: 2; grid-row: 1; }
html[data-board="soft"] .list .card:not(.ref) > .px.sell { grid-column: 2; grid-row: 2; }
html[data-board="soft"] .list .card:not(.ref) > .drawer  { grid-column: 1 / -1; grid-row: 3; }
html[data-board="soft"] .list .card:not(.ref) button.ci > .card-title {
  justify-self: start; font-size: 15px; font-weight: 700;
}
html[data-board="soft"] .list .card:not(.ref) .card-unit { justify-content: flex-start; font-size: 12px; color: var(--text-faint); }
html[data-board="soft"][data-theme="light"] .list .card:has(.drawer:not([hidden])) { border-color: var(--sf-line); box-shadow: none; }

/* قرصِ قیمت: یک خط، برچسبِ کوتاهِ «خرید/فروش» سمتِ راست و عددِ پررنگ سمتِ چپ */
html[data-board="soft"] .list .card:not(.ref) > .px,
html[data-board="soft"][data-theme="light"] .list .card:not(.ref) > .px {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 6px;
  min-height: 29px; height: 29px; padding: 0 10px; border: 0; border-radius: 9px; box-shadow: none;
}
html[data-board="soft"] .list .card > .px.buy  { background: var(--sf-buy-bg);  color: var(--up-ink); }
html[data-board="soft"] .list .card > .px.sell { background: var(--sf-sell-bg); color: var(--down-ink); }
html[data-board="soft"] .px .lbl { display: block; font-size: 0; line-height: 1; }
html[data-board="soft"] .px .lbl::after { font-size: 11px; font-weight: 500; opacity: .85; }
html[data-board="soft"] .px.buy  .lbl::after { content: 'خرید'; }
html[data-board="soft"] .px.sell .lbl::after { content: 'فروش'; }
html[data-board="soft"] .list .card > .px .val { font-size: 14px; font-weight: 800; letter-spacing: -.2px; font-variant-numeric: normal; }
/* قیمتِ گرمیِ زیرِ عدد در قرصِ یک‌خطی جا نمی‌شود — داخلِ کشوی جزئیات هست */
html[data-board="soft"] .list .card > .px .gram { display: none; }
html[data-board="soft"] .px:active:not(.off) { transform: scale(.97); }
html[data-board="soft"] .list .card > .px.off,
html[data-board="soft"][data-theme="light"] .list .card > .px.off { background: var(--sf-mute); border: 0; }
html[data-board="soft"] .list .card > .px.off::after { display: none; }
html[data-board="soft"] .px.off .lbl::after { content: 'بسته'; }
/* ⚠️ ۲۰ سپتامبر ۲۰۲۶ (دیده‌شده روی گوشی): برچسب «بسته» می‌شد ولی **عدد سبز/قرمزِ
   پررنگ سرِ جایش می‌ماند** — مشتری نمی‌فهمید آن عدد یعنی چه. حالا عدد هم مثلِ
   بقیه‌ی حالت‌های خاموشِ پروژه کم‌جان می‌شود. `opacity` عمداً نه: کنتراست را
   زیرِ ۳ می‌اندازد؛ توکن‌های `*-ink-off` بالای ۵٫۷ می‌مانند. */
html[data-board="soft"] .list .card > .px.off.buy,
html[data-board="soft"][data-theme="light"] .list .card > .px.off.buy  { color: var(--up-ink-off); }
html[data-board="soft"] .list .card > .px.off.sell,
html[data-board="soft"][data-theme="light"] .list .card > .px.off.sell { color: var(--down-ink-off); }

html[data-board="soft"] .drawer,
html[data-board="soft"][data-theme="light"] .drawer { background: var(--sf-mute); border: 0; border-radius: 14px; }
html[data-board="soft"] .mc-tabs { background: var(--sf-mute); border: 0; }
html[data-board="soft"] .mc-tab.on { background: var(--sf-card); color: var(--sf-brand); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
html[data-board="soft"]:not([data-theme="light"]) .mc-tab.on { color: var(--gold-ink); }

/* کارتِ مرجع (انس) — همان کارتِ نرم */
html[data-board="soft"] .list .cat-group > .card.ref { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 11px 14px; }

/* ── بنرها ─────────────────────────────────────────────────────────── */
html[data-board="soft"] .banner,
html[data-board="soft"] .notice,
html[data-board="soft"][data-theme="light"] .banner,
html[data-board="soft"][data-theme="light"] .notice {
  border: 0; border-radius: 14px; box-shadow: var(--sf-shadow); backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-board="soft"] .banner.info,
html[data-board="soft"][data-theme="light"] .banner.info { background: var(--sf-card); }

/* ── نوارِ پایینِ شناور ───────────────────────────────────────────────── */
html[data-board="soft"] .bottomnav,
html[data-board="soft"][data-theme="light"] .bottomnav {
  inset-inline: 14px; bottom: calc(12px + var(--safe-b)); height: 66px; padding-bottom: 0;
  border-radius: 24px; border: 0; background: var(--sf-card);
  box-shadow: 0 6px 24px rgba(20, 24, 40, .14), 0 0 0 1px var(--sf-line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-board="soft"] body { padding-bottom: calc(96px + var(--safe-b)); }
html[data-board="soft"] .bnav { font-size: 12px; color: var(--text-faint); border-radius: 24px; }
html[data-board="soft"] .bnav.active,
html[data-board="soft"][data-theme="light"] .bnav.active { color: var(--sf-brand); font-weight: 700; }
html[data-board="soft"]:not([data-theme="light"]) .bnav.active { color: var(--gold-ink); }
html[data-board="soft"] .bnav:active { background: none; opacity: .6; }
@media (min-width: 900px) {
  html[data-board="soft"] .bottomnav { max-width: 520px; margin-inline: auto; }
}

/* ── برگه‌ی پایین، دکمه‌ها و خانه‌ها ─────────────────────────────────────── */
html[data-board="soft"] .sheet,
html[data-board="soft"][data-theme="light"] .sheet {
  background: var(--sf-card); border: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
}
/* دسکتاپ: برگه وسطِ صفحه شناور است، نه چسبیده به پایین — هر چهار گوشه گرد و سایه دورتادور */
@media (min-width: 900px) {
  html[data-board="soft"] .sheet,
  html[data-board="soft"][data-theme="light"] .sheet { border-radius: 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); }
}
html[data-board="soft"] .btn { border-radius: 16px; min-height: 54px; }
html[data-board="soft"] .btn-primary { background: var(--sf-brand); color: var(--sf-on); }
html[data-board="soft"] .btn-ghost,
html[data-board="soft"][data-theme="light"] .btn-ghost {
  background: color-mix(in srgb, var(--sf-brand) 9%, var(--sf-card)); color: var(--sf-brand); border: 0;
}
html[data-board="soft"]:not([data-theme="light"]) .btn-ghost { color: var(--gold-ink); }
html[data-board="soft"] .field input,
html[data-board="soft"] .field select,
html[data-board="soft"] .field textarea,
html[data-board="soft"][data-theme="light"] .field input,
html[data-board="soft"][data-theme="light"] .field select,
html[data-board="soft"][data-theme="light"] .field textarea {
  background: var(--sf-card); border: 1.5px solid var(--sf-line); border-radius: 16px; min-height: 54px; box-shadow: none;
}
html[data-board="soft"] .field input:focus,
html[data-board="soft"] .field select:focus,
html[data-board="soft"] .field textarea:focus { border-color: var(--gold); }
html[data-board="soft"] .tab,
html[data-board="soft"] .chip-btn,
html[data-board="soft"][data-theme="light"] .tab,
html[data-board="soft"][data-theme="light"] .chip-btn { background: var(--sf-mute); border: 0; border-radius: 12px; color: var(--text); }
html[data-board="soft"] .tab.active,
html[data-board="soft"][data-theme="light"] .tab.active { background: var(--sf-card); color: var(--sf-brand); box-shadow: 0 1px 4px rgba(0, 0, 0, .1); }

/* ── صفحه‌های «درخواست‌ها» و «بیشتر» ────────────────────────────────── */
html[data-board="soft"] .ord,
html[data-board="soft"] .card.info-card,
html[data-board="soft"] .profile-card,
html[data-board="soft"] .acct,
html[data-board="soft"] .arows,
html[data-board="soft"][data-theme="light"] .acct,
html[data-board="soft"][data-theme="light"] .arows,
html[data-board="soft"] .summary-card,
html[data-board="soft"] .card.push-box,
html[data-board="soft"] .card.look-box,
html[data-board="soft"][data-theme="light"] .ord,
html[data-board="soft"][data-theme="light"] .profile-card,
html[data-board="soft"][data-theme="light"] .summary-card {
  background: var(--sf-card); border: 0; border-radius: 20px; box-shadow: var(--sf-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-board="soft"] .card.info-card { padding: 12px 16px; }
html[data-board="soft"] .sec-title { font-size: 15px; font-weight: 700; color: var(--text); }

/* نمونه‌ی کوچکِ چیدمان: نوارِ کرمی بالا + دو ردیفِ سفید */
.lt-soft { grid-template-rows: 8px 1fr 1fr; }
.lt-soft .lt-h { background: var(--gold); opacity: .45; border-radius: 3px; }
.lt-soft i:not(.lt-h) { border-radius: 4px; }

/* بعد از اسکرول کارت‌های دسته جمع می‌شوند و فقط نوارِ قیمتِ لحظه‌ای چسبیده می‌ماند —
   وگرنه ۱۵۰ پیکسل از بالای گوشی همیشه زیرِ نوارِ چسبان می‌رفت */
html[data-board="soft"] body.scrolled .soft-cats { display: none; }
html[data-board="soft"] body.scrolled .soft-live { margin-top: 0; }

/* ناحیه‌ی لمس ≥۴۴ بدونِ بلندکردنِ ردیف: قرصِ بالا به سمتِ بالا و قرصِ پایین به سمتِ پایین
   با شبه‌عنصرِ نامرئی بزرگ می‌شوند (قانونِ پروژه: هر هدفِ لمسی ≥ ۴۴px) */
html[data-board="soft"] .list .card:not(.ref) > .px { height: 34px; min-height: 34px; overflow: visible; }
html[data-board="soft"] .list .card:not(.ref) > .px::before { content: ''; position: absolute; inset-inline: 0; }
html[data-board="soft"] .list .card:not(.ref) > .px.buy::before  { top: -8px; bottom: -2px; }
html[data-board="soft"] .list .card:not(.ref) > .px.sell::before { top: -2px; bottom: -8px; }
html[data-board="soft"] .list .cat-group > .card:not(.ref) { row-gap: 4px; padding-block: 10px; }