/* ————————————————————————————————————————————————
   دو پوسته: «دفتر» روشن برای کار طولانی، «تابلو» تیره برای ساعت بازار.
   رنگ‌ها فقط از همین متغیرها می‌آیند تا افزودن پوسته سوم یک بلوک باشد.
   ———————————————————————————————————————————————— */

:root {
  /* ————— خنثی‌های آبی‌ته —————
     خاکستری خالص نیست: هر سطح و هر خط یک ته‌رنگ آبی دارد. روی صفحه‌ای که
     تمامش عدد و جدول است، این ته‌رنگ کاغذ را «سرد و مالی» می‌کند به‌جای
     «خاکستری اداری». مقادیر از تحلیل استرایپ در awesome-design-md آمده. */
  --ground: #f6f9fc;
  --panel: #ffffff;
  --panel-2: #eef3f9;
  /* دو وزن خط: `--line` مویی است و فقط کارت و جدول را از هم جدا می‌کند؛
     `--line-input` پررنگ‌تر و آبی‌تر است چون کادر ورودی باید *پیدا* باشد.
     پیش از این هر دو یک رنگ بودند و ورودی از یک باکس ساده جدا نمی‌شد. */
  --line: #e3e8ee;
  --line-soft: #eef1f6;
  --line-input: #a8c3de;
  --ink: #0d253d;
  --ink-2: #273951;
  --muted: #5f6e86;
  /* چهار پله بنفش، نه یکی: پایه برای پرکردن، `hover` و `active` برای دو
     حالت فشار، و `ink` برای وقتی که خودِ بنفش *متن* است. پیش از این حالت‌ها
     با `filter: brightness()` ساخته می‌شدند — که رنگ را از توکن جدا می‌کرد
     و در پوسته تیره برعکس عمل می‌کرد (روشن‌تر باید می‌شد، تیره‌تر می‌شد). */
  --accent: #533afd;
  --accent-hover: #4434d4;
  --accent-active: #2e2b8c;
  --accent-ink: #4434d4;
  --accent-soft: #f0eefe;
  --accent-2: #665efd;
  --on-accent: #ffffff;
  --gain: #059669;
  --gain-soft: #ecfdf5;
  --loss: #e11d48;
  --loss-soft: #fff1f2;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  /* منحنی‌های اضافه روی نمودار — نامزد رول، یا موقعیت مقایسه‌ای */
  --cmp1: #8b5cf6;
  --cmp2: #f97316;
  --cmp3: #0284c7;
  --cmp4: #65a30d;
  /* ————— رنگ سری‌های دسته‌ای —————
     شش اسلات، نه ده. ده اسلات ادعای جداپذیری‌ای بود که برقرار نبود: در
     مجموعه قبلی «قرمز و نارنجی» با اختلاف ΔE ۸٫۷ و «بنفش و آبی» با ΔE ۰٫۴
     در دید کوررنگ، عملاً یک رنگ دیده می‌شدند — همان «سه رنگ شبیه هم در یک
     نمودار» که کاربر گزارش کرد.

     این شش، با ابزار سنجش رنگ (`validate_palette.js` از راهنمای dataviz)
     روی **همه جفت‌ها** سنجیده شده‌اند و هر پنج آزمون را در هر دو پوسته
     می‌گذرانند: باند روشنایی، کف اشباع، جداپذیری کوررنگی (بدترین جفت
     ΔE ۹٫۶ در برابر هدف ۸)، کف دید عادی (ΔE ۱۷٫۲ در برابر کف ۱۵) و
     کنتراست ۳:۱ با هر دو زمینه.

     عمداً در هر دو پوسته یکی‌اند: با دو مجموعه متفاوت، یک سری با عوض‌کردن
     پوسته رنگش عوض می‌شد و هویتش گم. روشنایی هر شش در باند مشترک دو پوسته
     است، پس یک مجموعه برای هر دو کافی است. */
  --series-1: #2c84ff;
  --series-2: #c52012;
  --series-3: #008362;
  --series-4: #9937b4;
  --series-5: #a78e11;
  --series-6: #e54d97;
  /* کال و پوت یک جفت ثابت‌اند، نه «سری n». رنگ معنایی می‌گیرند تا در همه
     نمودارها یکی بماند — پیش از این IV کال و سربه‌سر کال دو رنگ داشتند. */
  --call: var(--series-1);
  --put: var(--series-6);
  /* نمودار میله‌ای رتبه‌ای، سنجه «اندازه» است نه «هویت»: طولِ میله خودش
     مقدار را می‌گوید و رنگِ متفاوت برای هر میله، معنی‌ای اضافه نمی‌کند —
     فقط ده رنگ بی‌ربط کنار هم می‌گذارد. یک فام، برای همه میله‌ها. */
  --bar-fill: #2c84ff;

  /* فلش انتخابگر. data URI هیچ var() نمی‌خواند، پس رنگش نمی‌تواند از داخل
     SVG به توکن وصل شود؛ به‌جایش خود تصویر برای هر پوسته یک‌بار نوشته شده
     تا رنگ باز هم از `--muted` همان پوسته بیاید، نه از یک خاکستری ثابت. */
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f6e86' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* ——— مقیاس فاصله‌گذاری سیستماتیک ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ——— ارتفاع استاندارد کنترل‌ها ——— */
  --control-h-sm: 34px;
  --control-h: 40px;
  --control-h-lg: 44px;

  /* سایه از سرمه‌ای #003770 ساخته می‌شود نه از خاکستری. سایه خاکستری روی
     زمینه آبی‌ته کثیف دیده می‌شود؛ هم‌فام که باشد، فقط «عمق» می‌دهد و رنگ
     اضافه نمی‌کند. دامنه‌ها هم نرم‌تر شد: بلندی زیاد با محو کم، لبه‌ای
     می‌سازد که در کارت‌های کنار هم مثل خط دوم دیده می‌شود. */
  --shadow: 0 1px 3px rgba(0, 55, 112, .08), 0 8px 24px rgba(0, 55, 112, .08);
  --shadow-2xs: 0 1px 2px rgba(0, 55, 112, .06);
  /* ——— سایه، فقط جایی که چیزی واقعاً «رو»ی چیزی است ———
     در پوستهٔ مینیمال، جداکنندهٔ سطح‌ها خط است نه سایه. سایه فقط برای
     چیزهای شناور می‌ماند — منوی بازشو، کارت هشدار، پنل ستون‌ها — و آنجا
     هم نرم و بی‌رنگ. کارت و جدول با یک خطِ مویی از زمینه جدا می‌شوند. */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px rgba(13, 37, 61, .07);
  --shadow-lg: 0 10px 32px rgba(13, 37, 61, .1);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  /* پله گردی سفت‌تر شد. گردی زیاد روی کنترل ریز، فضای داخلی را می‌خورد و
     کادر را «بادکرده» نشان می‌دهد؛ روی صفحه‌ای با ده‌ها کنترل، همان چند
     پیکسل جمع می‌شود. ورودی ۶، جعبه فشرده ۸، کارت ۱۲، پوسته ۱۶. دکمه در
     هیچ‌کدام نیست — دکمه قرص است. */
  /* ——— گردی، یک پله بازتر از نسخهٔ پیشین ———
     پوستهٔ شیشه‌ای بدون گردیِ کافی کار نمی‌کند: لبهٔ تیز، شفافیت را «شیشهٔ
     شکسته» نشان می‌دهد نه «شیشهٔ صیقلی». چون همهٔ اجزا از همین شش توکن
     می‌خوانند، این هفت خط کلِ زبانِ شکلیِ برنامه را جابه‌جا می‌کند و هیچ
     جزئی جا نمی‌ماند. */
  /* ——— گردی، جمع‌تر از پوستهٔ شیشه‌ای ———
     گردیِ زیاد لازمهٔ شیشه بود (لبهٔ تیز، شفافیت را «شکسته» نشان می‌داد).
     روی سطحِ مات لازم نیست، و روی کنترلِ ریز فضای داخلی را می‌خورد. */
  --radius: 10px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  /* ——— گردیِ کنترل ———
     دکمه پیش از این «قرص» بود. در پوستهٔ مینیمال، دکمهٔ قرصی با کادرِ
     ورودیِ گوشه‌دار در یک نوار کنار هم نمی‌نشیند — دو زبانِ شکلی در یک
     ردیف. یک توکن، تا هر دکمه‌ای یک‌جا عوض شود؛ نشان و برچسبِ وضعیت
     همچنان قرص می‌مانند، چون آن‌ها دکمه نیستند. */
  --radius-control: 6px;
  --transition-fast: .15s cubic-bezier(.4, 0, .2, 1);
  --transition-med: .25s cubic-bezier(.4, 0, .2, 1);
  --transition-smooth: .3s cubic-bezier(.16, 1, .3, 1);
  /* ——— پشتهٔ عدد، فارسی‌اول ———
     گزارش صاحب پروژه: «جدول قابل خوندن نیست و به هم ریختگی ایجاد شده.»
     ریشه‌اش همین توکن بود. پشتهٔ قبلی با «JetBrains Mono» شروع می‌شد و
     آن فونت حرف فارسی ندارد؛ مرورگر برای هر حرفِ نداشته به فونت بعدی
     می‌افتد و پیوندِ خط فارسی می‌شکند — «باقی‌مانده» می‌شد «با قیما نده»،
     دقیقاً همان خرابی‌ای که نگهبان ۵ سال‌ها پیش برای «ثانیه» ثبت کرده بود
     و راهِ حلش (پشتیبانِ فارسی داشتن) کافی نبود: پشتیبان **آخرِ** صف بود.

     هم‌عرضیِ رقم‌ها از فونت نمی‌آید، از `font-variant-numeric: tabular-nums`
     می‌آید و وزیرمتن آن را دارد. پس ستون‌ها هم‌تراز می‌مانند و متنِ فارسیِ
     کنارشان هم نمی‌شکند.

     کد لاتین (`code`, `pre`) توکنِ خودش را دارد؛ آنجا متنِ فارسی نیست و
     تک‌عرضیِ واقعی لازم است. */
  --mono: Vazirmatn, "Vazirmatn RD", "IRANSansX", "IRANSans", Sahel, Shabnam,
          Tahoma, "Segoe UI", system-ui, sans-serif;
  --mono-code: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
          Vazirmatn, Tahoma, monospace;
  /* پشته فارسی: اول وزیرمتن، بعد فونت‌هایی که روی دستگاه‌های ایرانی واقعاً
     نصب‌اند. تاهوما پیش از Segoe UI می‌آید — پوشش فارسی Segoe UI ناقص است و
     مرورگر برای حرف‌های نداشته‌اش باز به فونت دیگری می‌افتد، یعنی یک متن با
     دو فونت. تاهوما همه‌جا هست و کل الفبا را دارد. */
  --sans: Vazirmatn, "Vazirmatn RD", "IRANSansX", "IRANSans", Sahel, Shabnam,
          Tahoma, "Segoe UI", system-ui, sans-serif;

  /* ——— مقیاس اندازه قلم ———
     یک پله بزرگ‌تر از نسخهٔ پیشین. دلیلش گزارش خوانایی بود، نه سلیقه:
     متن فارسی در همان اندازه‌ای که لاتین راحت خوانده می‌شود سخت‌تر است،
     چون نقطه‌ها و سرکش‌ها بار معنایی دارند و اول از همه له می‌شوند.
     چون همهٔ شیوه‌نامه از همین توکن‌ها می‌خواند، تغییر مقیاس یک‌جاست. */
  --fs-3xs: 12px;
  --fs-2xs: 12.5px;
  --fs-xs: 13.5px;
  --fs-sm: 14.5px;
  --fs-small: 14.5px;
  --fs-md: 15.5px;
  --fs-lg: 17px;
  --fs-xl: 18px;
  --fs-2xl: 20.5px;
  --fs-3xl: 24px;
  --fs-4xl: 29px;
  --fs-hero: clamp(27px, 3.4vw, 40px);
  --fs-chart-sm: 14px;
  --fs-chart: 16px;
  --fs-chart-lg: 18.5px;
  --fs-axis: 17px;

  /* ═══════════════════ پوستهٔ شیشه‌ای ═══════════════════

     سه چیز شیشه را می‌سازد و هر سه باید توکن باشند، وگرنه هر جزء نسخهٔ
     خودش را سرِ هم می‌کند و صفحه از چند شیشهٔ ناهم‌جنس درمی‌آید:

       سطح    نیمه‌شفاف، تا آنچه زیرش است کم‌رنگ دیده شود
       تاری   `backdrop-filter`، تا آن «زیر» خوانا نماند و نویز نشود
       لبه    یک خطِ روشن در بالای هر سطح — همان چیزی که مغز آن را
              «ضخامتِ شیشه» می‌خواند. بی این خط، سطحِ نیمه‌شفاف فقط
              «کم‌رنگ» است، نه شیشه‌ای.

     شدتِ تاری یک توکن است چون روی سخت‌افزار ضعیف باید بشود پایینش آورد،
     و چون در پوستهٔ تیره عدد دیگری لازم دارد. */
  /* ═══ از شیشه به کاغذ ═══

     درخواست صاحب پروژه: «ui سایت رو تغییر بده … المانهای جدید و مینیمال.»

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

     پس این توکن‌ها نگه داشته شدند ولی خنثی: هیچ جزئی نمی‌شکند، ولی سطح
     دیگر شیشه نیست — کاغذِ مات است. تاری صفر یعنی `backdrop-filter`
     در همان ۱۱۶ نقطه بی‌اثر می‌ماند بی آنکه لازم باشد همه‌شان دست بخورند.

     تنها رنگی که روی این صفحه معنی دارد، رنگِ داده است. */
  --glass: var(--panel);
  --glass-2: var(--panel);
  --glass-edge: transparent;
  --glass-sheen: transparent;
  --glass-blur: 0px;
  --glass-blur-lg: 0px;
  --ambient-1: transparent;
  --ambient-2: transparent;
  --ambient-3: transparent;

  /* دکمهٔ اصلی سایهٔ رنگی نمی‌گیرد؛ خودِ رنگش کافی است. */
  --glow-accent: none;

  --lh-tight: 1.5;
  --lh-normal: 1.75;
  --lh-loose: 1.95;
}

body[data-theme="board"] {
  --ground: #0a0f1c;
  --panel: #121a2e;
  --panel-2: #1b2440;
  --line: #2c3855;
  --line-soft: #1c2640;
  --line-input: #3d5578;
  --ink: #f6f9fc;
  --ink-2: #c3ceda;
  --muted: #8c9bb1;
  /* در پوسته تیره، فشار دکمه باید *روشن‌تر* کند نه تیره‌تر — روی زمینه
     سیاه، تیره‌ترشدن یعنی ناپدیدشدن. پس `hover` اینجا روشن‌تر از پایه است،
     خلاف پوسته روشن. همین دلیلِ توکن‌شدن این دو حالت است.
     `--accent-ink` از پایه روشن‌تر است چون متن به کنتراست بیشتری از سطحِ
     پرشده نیاز دارد؛ با خود `--accent` زیر کف ۴٫۵ می‌ماند. */
  --accent: #665efd;
  --accent-hover: #7b74ff;
  --accent-active: #5348e8;
  --accent-ink: #8781ff;
  --accent-soft: #1c1e54;
  --accent-2: #8781ff;
  --on-accent: #ffffff;
  --gain: #10b981;
  --gain-soft: #064e3b;
  --loss: #f43f5e;
  --loss-soft: #4c0519;
  --warn: #f59e0b;
  --warn-soft: #451a03;
  --cmp1: #c084fc;
  --cmp2: #fb923c;
  --cmp3: #38bdf8;
  --cmp4: #a3e635;
  /* همان شش رنگ پوسته روشن، عیناً: هر شش در باند روشنایی پوسته تیره هم
     می‌نشینند و کنتراست ۳:۱ با زمینه تیره دارند، پس تکرارشان تنبلی نیست —
     تصمیم است تا سریِ «حجم کال» با عوض‌شدن پوسته، رنگش عوض نشود. */
  --series-1: #2c84ff;
  --series-2: #c52012;
  --series-3: #008362;
  --series-4: #9937b4;
  --series-5: #a78e11;
  --series-6: #e54d97;
  --call: var(--series-1);
  --put: var(--series-6);
  --bar-fill: #2c84ff;
  --shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 12px 30px rgba(0, 0, 0, .4);
  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .45);
  --shadow-lg: 0 10px 32px rgba(0, 0, 0, .55);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* پوستهٔ تیره هم مات است. تیره‌بودن خودش عمق می‌سازد؛ شیشه رویش فقط
     کنتراستِ متن را بی‌ثبات می‌کرد. */
  --glass: var(--panel);
  --glass-2: var(--panel);
  --glass-edge: transparent;
  --glass-sheen: transparent;
  --glass-blur: 0px;
  --glass-blur-lg: 0px;
  --ambient-1: transparent;
  --ambient-2: transparent;
  --ambient-3: transparent;
  --glow-accent: none;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238c9bb1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--ground); color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-xl); line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  /* optimizeLegibility در فارسی جوش‌خوردگی‌های ناخواسته می‌سازد و در متن پرشمار
     کند هم هست. آنچه واقعاً لازم است kern و liga است، نه کل بستهٔ آن کلیدواژه. */
  text-rendering: optimizeSpeed;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  /* خط فارسی وصل است؛ فاصله‌انداختن بین حرف‌ها پیوند را می‌شکند و کلمه را به
     تکه‌های بی‌معنی تبدیل می‌کند. هیچ عنصری نباید tracking لاتین بگیرد. */
  letter-spacing: normal;
}
html { direction: ltr; height: 100%; }
body { direction: rtl; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

b, strong { font-weight: 700; }
code, pre { font-family: var(--mono-code); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ——— اسکرول‌بار مدرن ——— */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--ink) 32%, transparent); }
@supports (scrollbar-width: thin) {
  * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
}

/* ——— سقف سررسید ———
   یک `details` در نوار بالا. پنل مطلق است تا باز شدنش ارتفاع نوار را عوض
   نکند؛ نوار `sticky` است و تکان‌خوردنش کل صفحه را می‌پراند. */
.capacity { position: relative; flex: none; }
.capacity > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--panel); color: var(--muted); font-size: var(--fs-sm); font-weight: 800; white-space: nowrap;
}
.capacity > summary::-webkit-details-marker { display: none; }
.capacity > summary:hover { border-color: var(--accent); color: var(--accent); }
.capacity > summary[data-active="1"] { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.capacity-panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40;
  width: min(560px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto;
  padding: 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); box-shadow: var(--shadow-lg);
}
.capacity-note { margin: 0 0 10px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.85; }
.capacity-note[data-error="true"] { color: var(--loss); }
.capacity-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.capacity-list section { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); }
.capacity-list h4 { margin: 0 0 7px; font-size: var(--fs-md); }
.capacity-list label { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 8px; align-items: center; padding: 4px 2px; cursor: pointer; }
.capacity-list span { font-family: var(--mono); font-size: var(--fs-sm); }
.capacity-list small { color: var(--muted); font-size: var(--fs-2xs); text-align: end; }
.capacity-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--line); }
.capacity-actions span { color: var(--muted); font-size: var(--fs-xs); }
.capacity-actions button { cursor: pointer; }
.capacity-actions button[disabled] { cursor: default; opacity: 0.5; }
.capacity-note button { margin-inline-start: 6px; cursor: pointer; }
/* علامت‌خورده‌ای که در زنجیره نیست همچنان در محاسبه اثر دارد، پس باید از
   بقیه جدا دیده شود — وگرنه شبیه یک بخش عادیِ دیگر می‌ماند. */
.capacity-list [data-capacity-stranded] { border-color: var(--warn); background: var(--warn-soft); }
.capacity-list [data-capacity-stranded] h4 { color: var(--warn); }

/* ——— نوار بالا ——— */
.top {
  position: sticky; top: 0; z-index: 20;
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 4%, transparent);
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.brand-mark {
  width: 10px; height: 24px; border-radius: var(--radius-sm); align-self: center;
  background: linear-gradient(180deg, var(--accent) 0 55%, var(--accent-2) 55% 100%);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
}
.brand-name { font-weight: 800; font-size: var(--fs-3xl); }
.brand-sub { color: var(--muted); font-size: var(--fs-md); white-space: nowrap; }
@media (max-width: 900px) { .brand-sub { display: none; } }

/* ——— بک‌تست سریع ——— */
.backtest-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: var(--space-4, 16px); padding: 22px 24px; border: 1px solid var(--line);
  border-radius: var(--radius-lg); background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel-2));
  box-shadow: var(--shadow-sm);
}
.backtest-hero h1 { margin: 0 0 6px; font-size: var(--fs-3xl); line-height: var(--lh-tight); font-weight: 800; }
.backtest-hero p { max-width: 820px; margin: 0; color: var(--muted); line-height: var(--lh-normal); }
.backtest-hero > span { flex: none; padding: 6px 14px; border: 1px solid var(--gain); border-radius: var(--radius-pill); color: var(--gain); background: var(--gain-soft); font-size: var(--fs-sm); font-weight: 800; }
.backtest-setup { margin-bottom: var(--space-4, 16px); }
.backtest-setup #bt-status { color: var(--muted); font-size: var(--fs-md); font-weight: 600; }
.backtest-setup #bt-status[data-error] { color: var(--loss); }
.backtest-form { display: grid; grid-template-columns: 1.2fr 1.2fr .65fr auto; gap: var(--space-3, 12px); align-items: end; }
.backtest-form label, .backtest-combo { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.backtest-form select, .backtest-form input, .backtest-combo select {
  width: 100%; min-height: var(--control-h, 40px); padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background-color: var(--panel); color: var(--ink); font: inherit;
}
.backtest-date-grid, .backtest-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4, 16px); margin-bottom: var(--space-4, 16px); }
.backtest-date-grid > *, .backtest-chart-grid > * { min-width: 0; }
/* انتخابگر تاریخ مشترک — تقویم شمسی ماهانه.
   ارتفاع ثابت است تا با عوض‌شدن ماه (۲۹ تا ۳۱ روز، و صفر تا شش خانه خالی
   در ابتدا) چیدمان اطرافش بالا و پایین نپرد. */
.date-cal {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px;
  /* قد از یک ماه کامل درمی‌آید، نه از چشم: بلندترین ماه جلالی با ردیفِ
     پیش‌رو، شش سطر می‌شود — ۶×۳۰ خانه + ۵×۳ فاصله = ۱۹۵، به‌اضافهٔ سر و
     نوار هفته و نوار وضعیت و حاشیه. با ۲۷۲ پیکسل دو سطر آخر پشت اسکرول
     می‌ماندند و روزهای پایان ماه دیده نمی‌شدند. */
  width: 100%; max-width: 100%; min-width: 0; height: 326px; padding: 12px 12px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-2xs);
}
.date-cal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.date-cal-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
.date-cal-head b { text-align: center; font-size: var(--fs-md); }
.date-cal-nav {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  color: var(--muted); font: inherit; font-size: var(--fs-lg); line-height: 1; cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.date-cal-nav:hover:not(:disabled) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.date-cal-nav:disabled { opacity: .35; cursor: default; }
.date-cal-week, .date-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.date-cal-week span { color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.date-cal-grid { align-content: start; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.date-cal-grid::-webkit-scrollbar { width: 7px; }
.date-cal-grid::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--line-strong); }
.date-cal-grid > * {
  display: grid; place-items: center; min-height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: 8px;
  font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
/* روزی که تابلو نداشته، خانهٔ خاموش است نه خانهٔ غایب — «آن روز معامله
   نشده» خودش اطلاعات است و حذفش، تقویم را دروغ‌گو می‌کند. */
.date-cal-off { color: var(--muted); opacity: .32; }
.date-cal-pad { visibility: hidden; }
.date-cal-grid button {
  border-color: var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.date-cal-grid button:hover { border-color: var(--accent); background: var(--accent-soft); }
.date-cal-grid button[aria-selected="true"] {
  color: var(--panel); border-color: var(--accent); background: var(--accent); font-weight: 700;
}
.date-cal-status { padding: 5px 4px 0; border-top: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-xs); text-align: center; }
.date-cal-empty { margin: auto; color: var(--muted); font-size: var(--fs-sm); text-align: center; }
.date-wheel-field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.date-wheel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 11px; }
.backtest-legs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; margin-top: 13px; }
.backtest-legs article { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.backtest-legs span, .backtest-legs small { color: var(--muted); font-size: var(--fs-xs); }
.backtest-legs b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backtest-basis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; padding: 4px; margin-bottom: 13px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel-2); }
.backtest-basis button { min-height: 36px; border: 0; border-radius: var(--radius-pill); color: var(--muted); background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 800; cursor: pointer; }
.backtest-basis button[aria-checked="true"] { color: var(--panel); background: var(--accent); box-shadow: var(--shadow-sm); }
.backtest-price-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.backtest-price-grid > div { display: grid; gap: 3px; padding: 9px 6px; border: 1px solid var(--line); border-radius: 9px; text-align: center; background: var(--panel-2); }
.backtest-price-grid > div[data-active="true"] { border-color: var(--accent); background: var(--accent-soft); }
.backtest-price-grid span { color: var(--muted); font-size: var(--fs-2xs); }
.backtest-price-grid b { font-family: var(--mono); font-size: var(--fs-sm); direction: ltr; }
.backtest-market-strip { display: flex; flex-wrap: wrap; gap: 7px 18px; margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 6%, var(--panel)); color: var(--muted); font-size: var(--fs-xs); }
.backtest-market-strip b { color: var(--ink); font-family: var(--mono); }
.backtest-leg-markets { display: grid; gap: 10px; }
.backtest-leg-markets > article { padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--panel-2) 72%, var(--panel)); }
.backtest-leg-market-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.backtest-leg-market-head > div { display: grid; gap: 3px; min-width: 0; }
.backtest-leg-market-head small { color: var(--muted); }
.backtest-leg-market-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backtest-leg-market-head > span { flex: none; padding: 4px 8px; border-radius: var(--radius-pill); background: var(--panel); color: var(--muted); font-size: var(--fs-2xs); }
.backtest-manual-price { display: grid; gap: 5px; margin-top: 10px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.backtest-manual-price input { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; font-family: var(--mono); }
.backtest-manual-price input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* بیرون بودن از بازه روز، خطا نیست — هشدار است. رنگش هم باید همین را بگوید:
   نه قرمزِ «نشد»، نه سکوتِ خاکستری. */
.backtest-manual-note { margin: 6px 0 0; font-size: var(--fs-2xs); line-height: 1.75; color: var(--muted); }
.backtest-manual-note[data-state="outside"], .backtest-manual-note[data-state="unknown"] { color: var(--warn); }
.backtest-manual-note[data-state="inside"] { color: var(--gain); }
.backtest-manual-note[data-state="empty"] { display: none; }
.backtest-runbar { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin: 14px 0; border-inline-start: 4px solid var(--accent); }
.backtest-runbar p { margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.8; }
.backtest-run-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.backtest-run-actions button[data-active="true"] { border-color: var(--gain); background: var(--gain-soft); color: var(--gain); }
.backtest-kpis {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 14px 0 18px;
}
.backtest-kpis article {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-lg); padding: 14px 16px;
  box-shadow: var(--shadow-2xs);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.backtest-kpis article.gain { border-top-color: var(--gain); }
.backtest-kpis article.loss { border-top-color: var(--loss); }
.backtest-kpis span { display: block; margin-bottom: 8px; color: var(--muted); font-size: var(--fs-xs); }
.backtest-kpis b { font-size: var(--fs-lg); line-height: 1.7; }
.backtest-kpis .gain b, .backtest-kpis b.gain { color: var(--gain); }
.backtest-kpis .loss b, .backtest-kpis b.loss { color: var(--loss); }
.backtest-chart { min-height: 280px; }
.backtest-chart-stage { position: relative; }
.backtest-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.backtest-chart svg text { fill: var(--ink-2); font-family: inherit; font-size: var(--fs-chart); font-weight: 700; direction: ltr; }
/* عنوان محورها. جدا از برچسب‌های عددی، چون کارشان فرق دارد: عدد را
   می‌خوانی، عنوان را یک بار می‌بینی و می‌فهمی واحد چیست. */
.axis-title { fill: var(--muted); font-size: var(--fs-axis); font-weight: 800; }
.backtest-chart svg text.axis-title,
.portfolio-line-chart svg text.axis-title,
.history-svg text.axis-title { fill: var(--muted); font-size: var(--fs-axis); font-weight: 800; }

.backtest-chart polyline, .backtest-chart path { stroke-width: 2.7; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.backtest-grid { stroke: color-mix(in srgb, var(--line) 80%, transparent); stroke-width: 1; }
.backtest-zero { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 4; opacity: .55; }
/* مرز تغییر مقیاس زمان: چپ آن هر نقطه یک روز است، راست آن یک معامله. */
.backtest-hit { fill: transparent; cursor: crosshair; }
.backtest-cursor line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.backtest-cursor circle { stroke: var(--panel); stroke-width: 2; }
.backtest-chart-legend { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-bottom: 6px; color: var(--muted); font-size: var(--fs-xs); }
.backtest-chart-legend span, .backtest-tip span { display: flex; align-items: center; gap: 5px; }
.backtest-chart-legend i, .backtest-tip i { width: 9px; height: 9px; border-radius: 50%; background: var(--series); flex: none; }
.backtest-tip {
  position: absolute; z-index: 25; display: grid; gap: 5px; min-width: 180px; max-width: 270px;
  padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: var(--shadow-lg); pointer-events: none; font-size: var(--fs-xs);
}
.backtest-tip[hidden] { display: none; }
.backtest-tip b { color: var(--ink); font-family: var(--mono); }
.backtest-tip strong.gain { color: var(--gain); }
.backtest-tip strong.loss { color: var(--loss); }
/* ——— تلاطم ضمنی پاها در بک‌تست ——— */
.backtest-iv-params {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3, 12px); align-items: end;
  margin: var(--space-3, 12px) 0 var(--space-4, 16px);
  padding: var(--space-3, 12px); border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--panel-2);
}
.backtest-iv-params label { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.backtest-iv-params input { width: 100%; min-height: var(--control-h, 40px); }
.backtest-iv-params button { justify-self: start; }
.backtest-iv .history-table-wrap { margin-bottom: var(--space-4, 16px); }

.backtest-matrix-link { margin-top: 14px; background: linear-gradient(145deg, var(--panel), color-mix(in srgb, var(--accent) 6%, var(--panel))); }
.backtest-matrix-kpis { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 9px; }
.backtest-matrix-kpis article { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.backtest-matrix-kpis span { color: var(--muted); font-size: var(--fs-xs); }
.backtest-matrix-link p { margin: 13px 0 0; color: var(--muted); line-height: 1.9; }
.backtest-intraday-panel { margin: 14px 0; border-top: 4px solid var(--accent); }
.backtest-head-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; color: var(--muted); font-size: var(--fs-sm); }
.backtest-head-actions button { min-height: 34px; padding: 6px 11px; border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font: inherit; font-weight: 800; cursor: pointer; }
.backtest-intraday-panel > .backtest-chart-grid > section, .backtest-analysis-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 70%, var(--panel)); }
.backtest-intraday-panel > .backtest-chart-grid { margin-top: 14px; }
.backtest-intraday-panel .backtest-chart { min-height: 250px; }
.backtest-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 14px; margin-top: 14px; }
.backtest-analysis-grid > * { min-width: 0; }
.backtest-compact-table th, .backtest-compact-table td, .backtest-correlation th, .backtest-correlation td, .backtest-tape-table th, .backtest-tape-table td { white-space: nowrap; }
/* ماتریس یک مربع کوچک است، نه جدول پهنِ تاریخچه. کف ۹۲۰ پیکسلیِ
   history-table آن را در ستون باریکِ تحلیل همیشه افقی می‌کرد. دو کلاس لازم
   است: قاعده history-table پایین‌تر در همین فایل می‌آید و با وزن برابر
   برنده می‌شد. */
.history-table.backtest-correlation { min-width: 0; }
.backtest-correlation td { min-width: 72px; text-align: center; font-family: var(--mono); background: color-mix(in srgb, var(--accent) 4%, transparent); }
.backtest-correlation td.gain { color: var(--gain); background: color-mix(in srgb, var(--gain) 8%, transparent); }
.backtest-correlation td.loss { color: var(--loss); background: color-mix(in srgb, var(--loss) 8%, transparent); }
.backtest-overview { margin-bottom: 14px; }
.backtest-overview > .backtest-chart-grid { margin-top: 14px; }
.backtest-overview > .backtest-chart-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 70%, var(--panel)); }
/* ردیف روز، دروازه ورود به ریزمعامله همان روز است؛ باید مثل دکمه دیده شود. */
.history-table tbody tr[data-day] { cursor: pointer; }
.history-table tbody tr[data-day]:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.history-table tbody tr[data-day][aria-selected="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.backtest-timeframe { margin: 14px 0; border-top: 4px solid var(--cmp1); }
.backtest-tf-field { display: grid; gap: 5px; color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.backtest-tf-field select { min-height: 34px; padding: 5px 9px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.backtest-timeframe > #bt-tf-body > .backtest-chart-grid { margin-top: 14px; }
.backtest-timeframe > #bt-tf-body > .backtest-chart-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel-2) 70%, var(--panel)); }
/* شدت رنگ خانه ماتریس ورود×خروج با قدر مطلق میانه، تا چشم بزرگی را ببیند
   نه فقط علامت را. `--weight` را خودِ رندر روی هر خانه می‌گذارد. */
.backtest-tf-matrix td.gain { background: color-mix(in srgb, var(--gain) calc(var(--weight, 0) * 45%), transparent); }
.backtest-tf-matrix td.loss { background: color-mix(in srgb, var(--loss) calc(var(--weight, 0) * 45%), transparent); }
.backtest-table-note { margin: 9px 2px 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.8; }
.backtest-export-size { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.backtest-export-size:empty { display: none; }

/* ── نوار زیرتب بک‌تست ──
   نوار افقی و کشویی است، نه چند سطر پیچیده: شانزده تب در چند سطر، هر بار
   که یکی انتخاب می‌شود ارتفاعش عوض می‌شود و محتوای زیرش بالا و پایین
   می‌پرد. */
.subtabs {
  display: flex; gap: 4px; padding: 5px; margin: 0 0 14px;
  overflow-x: auto; scrollbar-width: thin;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel-2);
}
.subtabs button {
  flex: 0 0 auto; min-height: 36px; padding: 6px 14px;
  border: 0; border-radius: var(--radius-pill);
  color: var(--muted); background: transparent;
  font: inherit; font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; cursor: pointer;
}
.subtabs button:hover { color: var(--ink-2); background: var(--panel); }
.subtabs button[aria-selected="true"] { color: var(--on-accent); background: var(--accent); box-shadow: none; }
.subtabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bt-panel:focus { outline: none; }
.bt-panel[hidden] { display: none; }

/* ریل انتخاب با تعداد دلخواه دکمه — نه پنج ستون ثابتِ ریل مبنای قیمت. */
.backtest-rail-auto { display: inline-flex; grid-template-columns: none; margin-bottom: 0; }
.backtest-rail-auto button { padding: 0 14px; }
.backtest-frame-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: 13px; color: var(--muted); font-size: var(--fs-sm);
}
.backtest-frame-bar .backtest-tf-field { margin: 0; }

/* حکم پنل الگو: چند جملهٔ کوتاه که هرکدام یک عدد را می‌گویند. */
.backtest-verdict { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.backtest-verdict ul { margin: 0; padding-inline-start: 18px; }
.backtest-verdict li { margin: 4px 0; line-height: 1.9; font-size: var(--fs-sm); }
.backtest-verdict b { color: var(--ink-2); }

/* شدت خانهٔ شبکهٔ حساسیت. رنگ از توکن سود و زیان می‌آید، نه از رنگ ثابت. */
.heat-up-1 { background: color-mix(in srgb, var(--gain) 8%, transparent); }
.heat-up-2 { background: color-mix(in srgb, var(--gain) 16%, transparent); }
.heat-up-3 { background: color-mix(in srgb, var(--gain) 26%, transparent); }
.heat-up-4 { background: color-mix(in srgb, var(--gain) 38%, transparent); }
.heat-down-1 { background: color-mix(in srgb, var(--loss) 8%, transparent); }
.heat-down-2 { background: color-mix(in srgb, var(--loss) 16%, transparent); }
.heat-down-3 { background: color-mix(in srgb, var(--loss) 26%, transparent); }
.heat-down-4 { background: color-mix(in srgb, var(--loss) 38%, transparent); }
.backtest-tape { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.backtest-tape .section-head p { margin-top: 4px; color: var(--muted); font-size: var(--fs-xs); font-weight: 400; }
.backtest-tape .history-table-wrap { max-height: 480px; }
.backtest-tape-table tr[data-fresh="false"] { background: color-mix(in srgb, var(--warn) 5%, transparent); }
.backtest-time-grid { stroke: color-mix(in srgb, var(--line) 55%, transparent); stroke-width: 1; stroke-dasharray: 2 6; }

/* آزمون هم‌زمان همه استراتژی‌ها — گزارش فشرده، جزئیات روی تقاضا. */
.portfolio-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
  margin-bottom: var(--space-4, 16px); padding: 22px 24px; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel-2));
  box-shadow: var(--shadow-sm);
}
.portfolio-hero h1 { margin: 0 0 6px; font-size: var(--fs-3xl); font-weight: 800; }
.portfolio-hero p { max-width: 850px; margin: 0; color: var(--muted); line-height: var(--lh-normal); }
.portfolio-hero > span { padding: 6px 14px; border: 1px solid var(--accent); border-radius: var(--radius-pill); color: var(--accent); background: var(--accent-soft); font-weight: 800; white-space: nowrap; font-size: var(--fs-sm); }
.portfolio-controls { margin-bottom: var(--space-4, 16px); }
.portfolio-form { display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: var(--space-3, 12px); align-items: end; }
.portfolio-form label, .portfolio-manual label, .portfolio-shock-controls label { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.portfolio-form input, .portfolio-form select, .portfolio-manual input, .portfolio-shock-controls input { width: 100%; min-height: var(--control-h, 40px); padding: 8px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.portfolio-form button { min-height: var(--control-h, 40px); }
.portfolio-note { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.portfolio-run { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: 14px 0; border-inline-start: 4px solid var(--accent); }
.portfolio-run h2, .portfolio-run p { margin: 0; }
.portfolio-run p { max-width: 760px; margin-top: 5px; color: var(--muted); line-height: var(--lh-normal); }
.portfolio-report-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-4, 16px); margin: 14px 0; }
.portfolio-bars { display: grid; gap: 8px; max-height: 420px; overflow: auto; }
.portfolio-bar { display: grid; grid-template-columns: minmax(145px, .8fr) minmax(120px, 1.4fr) 70px; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--ink); text-align: right; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); }
.portfolio-bar:hover, .portfolio-bar.selected { border-color: var(--line); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.portfolio-bar-track { position: relative; display: block; height: 11px; overflow: hidden; border-radius: var(--radius-pill); background: var(--panel-2); }
.portfolio-bar-track::after { content: ''; position: absolute; inset-block: 0; left: 50%; width: 1px; background: var(--line); }
.portfolio-bar-fill { position: absolute; inset-block: 0; width: var(--bar); border-radius: inherit; background: var(--muted); }
.portfolio-bar-fill.gain { left: 50%; background: var(--gain); }
.portfolio-bar-fill.loss { right: 50%; background: var(--loss); }
.portfolio-bar > strong { font-family: var(--mono); text-align: left; }
.portfolio-small-table { min-width: 660px; }
.portfolio-timeline-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-4, 16px); margin: 14px 0; }
.portfolio-timeline-grid > .card, #pb-heatmap, #pb-rank-chart { min-width: 0; }
.portfolio-viz-scroll { width: 100%; max-width: 100%; min-width: 0; overflow: auto; scrollbar-gutter: stable; }
.portfolio-heatmap { display: grid; width: max-content; min-width: 100%; gap: 3px; padding-bottom: 4px; }
.portfolio-heat-row { display: grid; grid-template-columns: minmax(145px, 180px) repeat(var(--days), 34px); gap: 3px; align-items: center; }
.portfolio-heat-row > b { position: sticky; z-index: 2; right: 0; overflow: hidden; padding: 5px 8px; background: var(--panel); text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
.portfolio-heat-row > button, .portfolio-heat-row > i { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: var(--panel-2); color: var(--ink); font: inherit; cursor: pointer; }
.portfolio-heat-row > button:hover, .portfolio-heat-row > button:focus-visible, .portfolio-heat-row > button.selected { position: relative; z-index: 1; border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.portfolio-heat-row > button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.portfolio-heat-row > .gain.heat-1 { background: color-mix(in srgb, var(--gain) 14%, var(--panel)); }
.portfolio-heat-row > .gain.heat-2 { background: color-mix(in srgb, var(--gain) 28%, var(--panel)); }
.portfolio-heat-row > .gain.heat-3 { background: color-mix(in srgb, var(--gain) 44%, var(--panel)); }
.portfolio-heat-row > .gain.heat-4 { background: color-mix(in srgb, var(--gain) 62%, var(--panel)); }
.portfolio-heat-row > .loss.heat-1 { background: color-mix(in srgb, var(--loss) 14%, var(--panel)); }
.portfolio-heat-row > .loss.heat-2 { background: color-mix(in srgb, var(--loss) 28%, var(--panel)); }
.portfolio-heat-row > .loss.heat-3 { background: color-mix(in srgb, var(--loss) 44%, var(--panel)); }
.portfolio-heat-row > .loss.heat-4 { background: color-mix(in srgb, var(--loss) 62%, var(--panel)); }
.portfolio-heat-row > .flat { background: color-mix(in srgb, var(--muted) 18%, var(--panel)); }
.portfolio-heat-row > .missing { cursor: default; opacity: .36; }
.portfolio-heat-head { position: sticky; z-index: 3; top: 0; background: var(--panel); }
.portfolio-heat-head span { overflow: hidden; color: var(--muted); font-size: var(--fs-3xs); text-align: center; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; }
.portfolio-rank-chart { display: block; width: 100%; min-width: 720px; height: auto; }
.portfolio-rank-chart line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.portfolio-rank-chart text { fill: var(--muted); font-family: inherit; font-size: var(--fs-chart); }
.portfolio-rank-chart g { cursor: pointer; outline: none; }
.portfolio-rank-chart .portfolio-rank-hit { fill: none; stroke: transparent; stroke-width: 14; opacity: 1; pointer-events: stroke; vector-effect: non-scaling-stroke; }
.portfolio-rank-chart .portfolio-rank-line { fill: none; stroke: var(--muted); stroke-width: 1.8; opacity: .35; pointer-events: none; vector-effect: non-scaling-stroke; transition: opacity var(--transition-fast), stroke-width var(--transition-fast); }
.portfolio-rank-chart circle { fill: var(--muted); opacity: .35; }
.portfolio-rank-chart g:hover .portfolio-rank-line, .portfolio-rank-chart g:focus .portfolio-rank-line,
.portfolio-rank-chart g.selected .portfolio-rank-line { stroke: var(--accent); stroke-width: 3; opacity: 1; }
.portfolio-rank-chart g:hover circle, .portfolio-rank-chart g:focus circle,
.portfolio-rank-chart g.selected circle { fill: var(--accent); opacity: 1; }
.portfolio-rank-chart g:hover text, .portfolio-rank-chart g:focus text,
.portfolio-rank-chart g.selected text { fill: var(--accent); font-weight: 800; }
.portfolio-detail { display: grid; gap: var(--space-4, 16px); margin-top: 14px; scroll-margin-top: 12px; }
.portfolio-detail-kpis { display: grid; grid-template-columns: repeat(4, minmax(125px, 1fr)); gap: 8px; margin: 12px 0; }
.portfolio-detail-kpis article { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-2xs); }
.portfolio-detail-kpis span { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; }
.portfolio-detail-kpis b { font-family: var(--mono); font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.portfolio-manual { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); gap: 10px; }
.portfolio-line-chart { min-height: 270px; margin: 10px 0 14px; }
.portfolio-chart-stage { position: relative; }
.portfolio-line-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.portfolio-line-chart svg text { fill: var(--ink-2); font-family: inherit; font-size: var(--fs-chart); font-weight: 700; direction: ltr; }
.portfolio-line-chart polyline { stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.portfolio-grid { stroke: color-mix(in srgb, var(--line) 78%, transparent); stroke-width: 1; }
.portfolio-hit { fill: transparent; cursor: crosshair; }
.portfolio-cursor line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.portfolio-cursor circle { stroke: var(--panel); stroke-width: 2; }
.portfolio-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-bottom: 5px; color: var(--muted); font-size: var(--fs-xs); }
.portfolio-chart-legend span { display: flex; align-items: center; gap: 5px; }
.portfolio-chart-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--series); }
.portfolio-shock-controls { display: flex; gap: 8px; }
.portfolio-shock-controls label { grid-template-columns: auto 70px; align-items: center; }
.portfolio-sensitivity-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 14px; }
.portfolio-sensitivity-grid h3 { margin: 0 0 9px; }
.portfolio-cell { width: 100%; min-width: 64px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); cursor: pointer; }
.portfolio-cell.gain, .portfolio-basis-matrix .gain { color: var(--gain); }
.portfolio-cell.loss, .portfolio-basis-matrix .loss { color: var(--loss); }
.portfolio-basis-matrix { display: grid; grid-template-columns: repeat(5, minmax(72px, 1fr)); gap: 6px; }
.portfolio-basis-matrix button { display: grid; gap: 5px; min-height: 58px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--ink); cursor: pointer; }
.portfolio-basis-matrix button:hover, .portfolio-cell:hover { border-color: var(--accent); }
.portfolio-basis-matrix small { color: var(--muted); font-size: var(--fs-3xs); }
.portfolio-basis-matrix b { font-family: var(--mono); }
.history-table tbody tr[data-strategy], .history-table tbody tr[data-result] { cursor: pointer; }
.history-table tbody tr[data-strategy]:hover, .history-table tbody tr[data-result]:hover,
.history-table tbody tr[data-strategy].selected, .history-table tbody tr[data-result].selected { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* استودیوی سفر زمانی سبد — wizard مرحله‌ای، با تمرکز روی یک تصمیم در هر قاب. */
.pt-studio { display: grid; gap: var(--space-4); max-width: 1500px; margin: 0 auto; }
.pt-hero {
  position: relative; isolation: isolate; overflow: hidden; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-6);
  min-height: 178px; padding: var(--space-8); border: 1px solid var(--line);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel-2));
}
.pt-hero::after { content: ''; position: absolute; z-index: -1; inset: auto -5% -80% auto; width: 360px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 50%; box-shadow: 0 0 0 38px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 78px color-mix(in srgb, var(--accent) 4%, transparent); }
.pt-hero h1 { margin: 0 0 var(--space-2); font-size: var(--fs-4xl); line-height: var(--lh-tight); }
.pt-hero p { max-width: 800px; margin: 0; color: var(--muted); line-height: var(--lh-normal); }
.pt-hero-orbit { display: grid; grid-template-columns: auto auto; align-items: center; gap: 6px 9px; min-width: 150px; padding: 14px 18px; border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel) 84%, transparent); box-shadow: var(--shadow-sm); }
.pt-hero-orbit b { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--mono); }
.pt-hero-orbit span { color: var(--ink-2); font-weight: 800; }
.pt-hero-orbit i { grid-column: 1; justify-self: center; width: 1px; height: 14px; background: var(--accent); }

.pt-progress { display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: var(--space-2); }
.pt-progress > div { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center; min-height: 66px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); color: var(--muted); }
.pt-progress b { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--mono); }
.pt-progress span { color: var(--ink-2); font-weight: 800; }
.pt-progress small { font-size: var(--fs-3xs); }
.pt-progress > .active { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-xs); }
.pt-progress > .active b { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.pt-progress > .active small { color: var(--accent-ink); }
.pt-progress > .done { border-color: color-mix(in srgb, var(--gain) 40%, var(--line)); background: var(--gain-soft); }
.pt-progress > .done b { border-color: var(--gain); color: var(--gain); }
.pt-progress > .done small { color: var(--gain); }

.pt-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .32fr); gap: var(--space-4); align-items: start; }
.pt-main { display: grid; gap: var(--space-4); min-width: 0; }
/* ── پنل‌های پنج‌تبی استودیو ──
   هر پنل یک خانهٔ `.pt-main` است، پس فاصلهٔ میان بخش‌هایش باید خودش را
   داشته باشد؛ وگرنه با تب‌دارشدن، کارت‌های داخل یک تب به هم می‌چسبند.
   `[hidden]` بعد از `display` می‌آید تا بر آن غالب باشد. */
/* ── مسیر سود و زیان ──
   رنگِ ردیف از بزرگیِ خودِ عدد می‌آید (سه پله در هر سمت)، نه از نوبت ردیف.
   `data-tone` جهت را می‌گوید و `data-level` شدت را؛ مقیاسش کنار جدول
   نوشته می‌شود تا «پررنگ» معنی داشته باشد. */
.pt-series-mode { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 700; }
.pt-series-chart { margin: var(--space-3) 0; min-height: 120px; }
.pt-series-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pt-series-table th, .pt-series-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: start; }
.pt-series-table td.n { font-variant-numeric: tabular-nums; }
.pt-series-table tr[data-tone="gain"][data-level="1"] { background: color-mix(in srgb, var(--gain) 6%, transparent); }
.pt-series-table tr[data-tone="gain"][data-level="2"] { background: color-mix(in srgb, var(--gain) 14%, transparent); }
.pt-series-table tr[data-tone="gain"][data-level="3"] { background: color-mix(in srgb, var(--gain) 24%, transparent); }
.pt-series-table tr[data-tone="loss"][data-level="1"] { background: color-mix(in srgb, var(--loss) 6%, transparent); }
.pt-series-table tr[data-tone="loss"][data-level="2"] { background: color-mix(in srgb, var(--loss) 14%, transparent); }
.pt-series-table tr[data-tone="loss"][data-level="3"] { background: color-mix(in srgb, var(--loss) 24%, transparent); }
/* صفر پلهٔ خودش را دارد: نه سبزِ کم‌رنگ، نه قرمزِ کم‌رنگ. */
.pt-series-table tr[data-tone="flat"] { background: var(--panel-2); }
.pt-series-empty td { color: var(--muted); text-align: center; }
.pt-series-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.pt-series-pick { min-width: 200px; }

/* ── کنترل پخش خودکار تایم‌لاین ── */
.pt-play { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }
.pt-play-speed { min-width: 120px; }
.pt-play-step { color: var(--muted); font-size: var(--fs-sm); font-weight: 800; }
.pt-play-halt { margin: var(--space-2) 0 0; padding-inline-start: 1.2em; color: var(--loss); font-size: var(--fs-sm); }
.pt-play-halt li { margin: 2px 0; }
.pt-panel { display: grid; gap: var(--space-4); min-width: 0; }
.pt-panel[hidden] { display: none; }
.pt-panel:focus { outline: none; }
.pt-card { margin: 0; }
.pt-card .section-head b[role="status"] { color: var(--muted); font-size: var(--fs-sm); }
.pt-card .section-head b[data-error] { color: var(--loss); }
.pt-form-grid { display: grid; gap: var(--space-3); }
.pt-money-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.pt-form-grid .field > span, .pt-symbol-row .field > span { color: var(--ink-2); font-weight: 800; }
.pt-form-grid input, .pt-form-grid select, .pt-symbol-row select, .pt-date-title select { width: 100%; min-height: var(--control-h-lg); padding: 9px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.pt-form-grid input[aria-invalid="true"], .pt-form-grid select[aria-invalid="true"], .pt-symbol-row select[aria-invalid="true"], .pt-date-title select[aria-invalid="true"] { border-color: var(--loss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--loss) 14%, transparent); }
.pt-field-error { color: var(--loss); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-capital-board { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); }
.pt-capital-board article { display: grid; gap: 4px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.pt-capital-board article.accent { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: var(--accent-soft); }
.pt-capital-board span, .pt-capital-board small { color: var(--muted); font-size: var(--fs-xs); }
.pt-capital-board b { font-family: var(--mono); font-size: var(--fs-xl); direction: ltr; text-align: right; }
.pt-capital-source { min-width: 0; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid color-mix(in srgb, var(--gain) 35%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--gain) 7%, var(--panel)); }
.pt-capital-source[hidden] { display: none; }
.pt-capital-source b { color: var(--gain); font-size: var(--fs-xs); }
.pt-capital-source p { margin: 4px 0 0; color: var(--ink-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.pt-symbol-row { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); }
.pt-date-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.pt-date-grid > section { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-2); }
.pt-date-title { display: flex; justify-content: space-between; align-items: end; gap: var(--space-3); margin-bottom: var(--space-2); }
.pt-date-title > div { display: grid; gap: 3px; }
.pt-date-title span, .pt-date-title label { color: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.pt-date-title label { display: grid; gap: 4px; min-width: 110px; }
.pt-date-title b { color: var(--ink-2); }
.pt-grain-row { grid-template-columns: minmax(220px, 360px); margin-top: var(--space-4); }

.pt-stage-badge { padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-xs); font-weight: 800; }
.pt-fieldset { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: 0; border: 0; }
.pt-fieldset legend { margin-bottom: var(--space-2); color: var(--ink-2); font-weight: 900; }
.pt-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(125px, 1fr)); gap: var(--space-2); }
.pt-volatility-grid { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
.pt-choice { position: relative; display: block; cursor: pointer; }
.pt-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pt-choice span { display: grid; gap: 5px; min-height: 82px; padding: 13px 14px; border: 1px solid var(--line-input); border-radius: var(--radius-lg); background: var(--panel-2); transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
.pt-choice.compact span { min-height: 54px; place-items: center; }
.pt-choice b { color: var(--ink-2); }
.pt-choice small { color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-choice:hover span { border-color: var(--accent); transform: translateY(-1px); }
.pt-choice input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pt-choice input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 2px; }
.pt-choice-grid[aria-invalid="true"] .pt-choice span { border-color: var(--loss); }
.pt-outlook-price-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.pt-scenario { display: grid; gap: var(--space-3); margin: var(--space-5) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--accent) 6%, var(--panel))); }
.pt-scenario h3 { margin: 0; }
.pt-scenario-track { position: relative; height: 36px; margin: 0 var(--space-3); }
.pt-scenario-track i { position: absolute; inset: 16px 0 auto; height: 4px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--loss), var(--warn), var(--gain)); opacity: .72; }
.pt-scenario-track span { position: absolute; top: 10px; width: 16px; height: 16px; border: 4px solid var(--panel); border-radius: 50%; box-shadow: 0 0 0 2px var(--accent); background: var(--accent); }
.pt-scenario-track .low { right: 8%; box-shadow: 0 0 0 2px var(--loss); background: var(--loss); }
.pt-scenario-track .target { right: calc(50% - 8px); }
.pt-scenario-track .high { left: 8%; box-shadow: 0 0 0 2px var(--gain); background: var(--gain); }
.pt-scenario-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.pt-scenario-values span { display: grid; gap: 3px; color: var(--muted); font-size: var(--fs-xs); }
.pt-scenario-values b { color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-md); }
.pt-scenario-values span:nth-child(2) { text-align: center; }
.pt-scenario-values span:last-child { text-align: left; }
.pt-scenario > p { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-outlook-detail-grid { display: grid; grid-template-columns: minmax(180px, .5fr) minmax(260px, 1fr); gap: var(--space-3); }
.pt-outlook-detail-grid input, .pt-thesis textarea { width: 100%; min-height: var(--control-h-lg); padding: 9px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; }
.pt-confidence > span { display: flex; justify-content: space-between; gap: var(--space-3); }
.pt-confidence output { color: var(--accent-ink); font-family: var(--mono); }
.pt-confidence input[type="range"] { padding: 0; accent-color: var(--accent); }
.pt-thesis { margin-top: var(--space-4); }
.pt-thesis textarea { min-height: 112px; resize: vertical; line-height: var(--lh-normal); }
.pt-outlook-detail-grid input[aria-invalid="true"], .pt-thesis textarea[aria-invalid="true"] { border-color: var(--loss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--loss) 14%, transparent); }
.pt-stage-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.pt-stage-actions .pt-save-state { margin: 0; }
.pt-risk-input-grid, .pt-liquidity-grid { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: var(--space-3); }
.pt-liquidity-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.pt-risk-input-grid input, .pt-liquidity-grid input { width: 100%; min-height: var(--control-h-lg); padding: 9px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; }
.pt-risk-input-grid input[aria-invalid="true"], .pt-liquidity-grid input[aria-invalid="true"] { border-color: var(--loss); box-shadow: 0 0 0 3px color-mix(in srgb, var(--loss) 14%, transparent); }
.pt-binary-field { margin-top: var(--space-4); }
.pt-binary { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: var(--space-2); }
.pt-binary label { position: relative; cursor: pointer; }
.pt-binary input { position: absolute; opacity: 0; pointer-events: none; }
.pt-binary span { display: grid; place-items: center; min-height: 52px; padding: 10px 13px; border: 1px solid var(--line-input); border-radius: var(--radius-lg); background: var(--panel-2); color: var(--ink-2); font-weight: 800; text-align: center; transition: border-color var(--transition-fast), background var(--transition-fast); }
.pt-binary input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.pt-binary input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 25%, transparent); outline-offset: 2px; }
.pt-binary[aria-invalid="true"] span { border-color: var(--loss); }
.pt-budget { display: grid; gap: var(--space-3); margin: var(--space-5) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--gain) 5%, var(--panel))); }
.pt-budget h3, .pt-subhead h3 { margin: 0; }
.pt-budget-track { display: flex; overflow: hidden; min-height: 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel); }
.pt-budget-track i { flex: 0 0 0; min-width: 0; transition: flex-basis var(--transition-fast); }
.pt-budget-track .free { background: var(--gain); }
.pt-budget-track .margin { background: var(--warn); }
.pt-budget-track .flex { background: var(--accent); opacity: .45; }
.pt-budget-values { display: grid; grid-template-columns: repeat(3, minmax(140px, 1fr)); gap: var(--space-2); }
.pt-budget-values article { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel) 85%, transparent); }
.pt-budget-values span, .pt-budget-values small, .pt-budget > p { color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-budget-values b { color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-lg); }
.pt-budget > p { margin: 0; }
.pt-subhead { margin-top: var(--space-6); }
.pt-allocation-intro { margin: 0 0 var(--space-4); color: var(--muted); line-height: var(--lh-relaxed); }
.pt-allocation-head, .pt-allocation-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(160px, .8fr) minmax(150px, .8fr) auto; gap: var(--space-2); align-items: end; }
.pt-allocation-head { padding: 0 10px 8px; color: var(--muted); font-size: var(--fs-xs); font-weight: 800; }
.pt-allocation-rows { display: grid; gap: var(--space-2); }
.pt-allocation-row { padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.pt-allocation-row label { display: grid; gap: 6px; }
.pt-allocation-row label > span { color: var(--muted); font-size: var(--fs-2xs); }
.pt-allocation-row select, .pt-allocation-row input { width: 100%; min-height: var(--control-h-lg); padding: 9px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.pt-allocation-budget { display: grid; align-items: center; min-height: var(--control-h-lg); padding: 9px 12px; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-2); font-family: var(--mono); }
.pt-allocation-rows[aria-invalid="true"] .pt-allocation-row { border-color: var(--loss); }
.pt-add-allocation { margin-top: var(--space-3); }
.pt-allocation-summary { display: grid; gap: var(--space-3); margin: var(--space-5) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--accent) 6%, var(--panel))); }
.pt-allocation-summary h3 { margin: 0; }
.pt-allocation-totals { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: var(--space-2); }
.pt-allocation-totals article { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel) 88%, transparent); }
.pt-allocation-totals span, .pt-allocation-totals small { color: var(--muted); font-size: var(--fs-xs); }
.pt-allocation-totals b { color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-lg); }
.pt-allocation-totals b[data-error] { color: var(--loss); }
.pt-mission-objective-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
.pt-final-review, .pt-snapshot { display: grid; gap: var(--space-3); margin: var(--space-5) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--accent) 6%, var(--panel))); }
.pt-final-review h3, .pt-snapshot h3 { margin: 0; }
.pt-final-review-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: var(--space-2); }
.pt-final-review-grid article { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-2); align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: color-mix(in srgb, var(--panel) 88%, transparent); }
.pt-final-review-grid article:last-child { grid-column: 1 / -1; }
.pt-final-review-grid span { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); }
.pt-final-review-grid b { color: var(--ink-2); line-height: var(--lh-normal); }
.pt-final-review-grid button { min-height: var(--control-h-sm); padding: 5px 9px; }
.pt-snapshot { background: linear-gradient(135deg, var(--panel-2), color-mix(in srgb, var(--warn) 6%, var(--panel))); }
.pt-snapshot-grid { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: var(--space-2); }
.pt-snapshot-grid article { display: grid; gap: 5px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-snapshot-grid span { color: var(--muted); font-size: var(--fs-xs); }
.pt-snapshot-grid b { color: var(--ink-2); overflow-wrap: anywhere; }
.pt-snapshot[data-quality="missing"] .pt-snapshot-grid article:first-child b,
.pt-snapshot[data-quality="estimated"] .pt-snapshot-grid article:first-child b { color: var(--warn); }
.pt-snapshot ul { display: grid; gap: 6px; margin: 0; padding: 0 20px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-eligibility, .pt-proposals, .pt-ledger, .pt-positions, .pt-clock, .pt-watch, .pt-closeout { min-width: 0; display: grid; gap: var(--space-3); margin: var(--space-5) 0; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--panel-2); }
.pt-eligibility[hidden], .pt-proposals[hidden], .pt-ledger[hidden], .pt-positions[hidden],
.pt-clock[hidden], .pt-watch[hidden], .pt-closeout[hidden] { display: none; }
.pt-eligibility-head, .pt-proposals-head, .pt-ledger-head, .pt-positions-head,
.pt-clock-head, .pt-watch-head, .pt-closeout-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-3); }
.pt-eligibility-head h3, .pt-proposals-head h3, .pt-ledger-head h3, .pt-positions-head h3,
.pt-clock-head h3, .pt-watch-head h3, .pt-closeout-head h3 { margin: 0; }
.pt-eligibility-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pt-eligibility-filters button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.pt-eligibility-table, .pt-proposals-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-eligibility-table th, .pt-eligibility-table td,
.pt-proposals-table th, .pt-proposals-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; overflow-wrap: anywhere; }
.pt-eligibility-table th, .pt-proposals-table th { color: var(--muted); background: var(--panel-2); font-size: var(--fs-xs); }
.pt-eligibility-table td, .pt-proposals-table td { color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-eligibility-table th:nth-child(1) { width: 16%; }
.pt-eligibility-table th:nth-child(2), .pt-eligibility-table th:nth-child(3), .pt-eligibility-table th:nth-child(6) { width: 10%; }
.pt-eligibility-table th:nth-child(4) { width: 34%; }
.pt-eligibility-table th:nth-child(5) { width: 20%; }
.pt-eligibility-table tr[data-verdict="accepted"] td:nth-child(3) b { color: var(--gain); }
.pt-eligibility-table tr[data-verdict="rejected"] td:nth-child(3) b { color: var(--loss); }
.pt-eligibility-empty td, .pt-proposals-empty td { text-align: center; color: var(--muted); }

/* پیشنهادها: رتبه و امتیاز باریک، «چرا این جایگاه» پهن. */
.pt-proposals-table th:nth-child(1) { width: 6%; }
.pt-proposals-table th:nth-child(2) { width: 18%; }
.pt-proposals-table th:nth-child(3), .pt-proposals-table th:nth-child(4),
.pt-proposals-table th:nth-child(5), .pt-proposals-table th:nth-child(6) { width: 11%; }
.pt-proposals-table th:nth-child(7) { width: 22%; }
.pt-proposals-table tbody b { color: var(--gain); }
.pt-proposals-table th:nth-child(8), .pt-proposals-table th:nth-child(9) { width: 10%; }
.pt-proposals-table .pt-committed { color: var(--accent-ink); }
.pt-proposal-commit { display: grid; gap: var(--space-2); }
.pt-proposal-commit label { display: grid; gap: 4px; color: var(--muted); font-size: var(--fs-xs); }
.pt-proposal-commit input { width: 100%; min-width: 0; }
.pt-proposals-aside-table th:nth-child(1) { width: 24%; }
.pt-proposals-aside-table th:nth-child(2) { width: 16%; }
.pt-proposals-aside[data-kind="unknownScore"] b { color: var(--muted); }
.pt-ledger-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin: 0; }
.pt-ledger-figures > div { min-width: 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-ledger-figures dt { color: var(--muted); font-size: var(--fs-xs); }
.pt-ledger-figures dd { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.pt-ledger-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-ledger-table th, .pt-ledger-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; overflow-wrap: anywhere; }
.pt-ledger-table th { color: var(--muted); background: var(--panel-2); font-size: var(--fs-xs); }
.pt-ledger-table td { color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-ledger-table th:nth-child(1) { width: 22%; }
.pt-ledger-table th:nth-child(5) { width: 12%; }
.pt-ledger-table tr[data-state="clear"] b { color: var(--gain); }
.pt-ledger-table tr[data-state="breached"] b { color: var(--loss); }
.pt-ledger-empty td { text-align: center; color: var(--muted); }
.pt-ledger-families { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.pt-ledger-families:empty { display: none; }
.pt-positions-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-positions-table th, .pt-positions-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; overflow-wrap: anywhere; }
.pt-positions-table th { color: var(--muted); background: var(--panel-2); font-size: var(--fs-xs); }
.pt-positions-table td { color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-positions-table th:nth-child(1) { width: 15%; }
.pt-positions-table th:nth-child(2), .pt-positions-table th:nth-child(3) { width: 5%; }
.pt-positions-table th:nth-child(4) { width: 8%; }
.pt-positions-table th:nth-child(5), .pt-positions-table th:nth-child(6),
.pt-positions-table th:nth-child(7) { width: 9%; }
.pt-positions-table th:nth-child(8) { width: 15%; }
.pt-positions-table th:nth-child(9) { width: 7%; }
.pt-positions-table th:nth-child(10) { width: 18%; }
.pt-position-manage { display: grid; gap: var(--space-2); }
.pt-position-manage label { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-2); color: var(--muted); }
.pt-position-manage input { min-width: 0; width: 100%; }
.pt-position-manage > div { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pt-positions-table td.gain { color: var(--gain); }
.pt-positions-table td.loss { color: var(--loss); }
.pt-clock-now { font-family: var(--mono); font-size: var(--fs-lg); color: var(--accent-ink); direction: ltr; }
.pt-clock-steps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pt-clock-steps button[disabled] { opacity: .45; cursor: not-allowed; }
/* جمع‌شدن مراحل پس از قفل مأموریت. سرِ مرحله می‌ماند تا کاربر بداند چه
   قفل کرده؛ بخش‌های زندهٔ جلسه (`.pt-live`) جمع نمی‌شوند چون خودشان
   دلیلِ وجودِ صفحه‌اند. */
.pt-card[data-collapsed="true"] > *:not(.section-head):not(.pt-live) { display: none; }
.pt-card[data-collapsed="true"] { gap: 0; }
.pt-card[data-collapsed="true"] > .section-head { margin: 0; }
.pt-expand { margin-inline-start: auto; }
.section-head .pt-expand { align-self: center; }
.pt-watch[data-tone="loss"] { border-color: color-mix(in srgb, var(--loss) 45%, var(--line)); }
.pt-watch[data-tone="warn"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pt-watch-headline { font-size: var(--fs-sm); }
.pt-watch-headline.gain { color: var(--gain); }
.pt-watch-headline.warn { color: var(--accent-ink); }
.pt-watch-headline.loss { color: var(--loss); }
.pt-watch-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-watch-table[hidden] { display: none; }
.pt-watch-table th, .pt-watch-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; overflow-wrap: anywhere; }
.pt-watch-table th { color: var(--muted); background: var(--panel-2); font-size: var(--fs-xs); }
.pt-watch-table td { color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-watch-table th:nth-child(1) { width: 24%; }
.pt-watch-table th:nth-child(2) { width: 12%; }
.pt-watch-table tr[data-state="clear"] b { color: var(--gain); }
.pt-watch-table tr[data-state="near"] b { color: var(--accent-ink); }
.pt-watch-table tr[data-state="breached"] b { color: var(--loss); }
.pt-watch-table tr[data-state="unknown"] b { color: var(--muted); }
.pt-watch-table tr[data-state="breached"] { background: color-mix(in srgb, var(--loss) 8%, transparent); }
.pt-watch-table tr[data-state="near"] { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.pt-closeout-dossier { display: grid; gap: var(--space-3); }
.pt-closeout-dossier[hidden] { display: none; }
.pt-closeout-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); margin: 0; }
.pt-closeout-figures > div { min-width: 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-closeout-figures dt { color: var(--muted); font-size: var(--fs-xs); }
.pt-closeout-figures dd { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pt-closeout-figures dd.gain { color: var(--gain); }
.pt-closeout-figures dd.loss { color: var(--loss); }
.pt-dossier-analysis { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.pt-dossier-analysis h4 { margin: 0; color: var(--ink); font-size: var(--fs-sm); }
.pt-dossier-analysis-figures { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-2); margin: 0; }
.pt-dossier-analysis-figures > div { min-width: 0; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--panel); }
.pt-dossier-analysis-figures dt { color: var(--muted); font-size: var(--fs-xs); }
.pt-dossier-analysis-figures dd { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pt-dossier-analysis-figures dd.gain { color: var(--gain); }
.pt-dossier-analysis-figures dd.loss { color: var(--loss); }
.pt-dossier-analysis-state { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); }
.pt-dossier-analysis-issues { display: grid; gap: 4px; margin: 0; padding-inline-start: var(--space-4); color: var(--loss); font-size: var(--fs-xs); }
.pt-dossier-analysis-issues[hidden] { display: none; }
.pt-capital-continuity { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--line)); border-radius: var(--radius-md); background: var(--panel-2); }
.pt-capital-continuity-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pt-capital-continuity-head h4, .pt-capital-continuity-head p { margin: 0; }
.pt-capital-continuity-head h4 { color: var(--ink); font-size: var(--fs-sm); }
.pt-capital-continuity-head > b { color: var(--accent-ink); font-family: var(--mono); font-size: var(--fs-lg); overflow-wrap: anywhere; }
.pt-capital-continuity-source { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin: 0; }
.pt-capital-continuity-source > div { min-width: 0; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--panel); }
.pt-capital-continuity-source dt { color: var(--muted); font-size: var(--fs-xs); }
.pt-capital-continuity-source dd { margin: 2px 0 0; color: var(--ink-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.pt-capital-continuity-state { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.pt-capital-continuity-state[data-error] { color: var(--loss); }
.pt-capital-continuity button { justify-self: start; max-width: 100%; }
.pt-capital-growth { min-width: 0; display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.pt-capital-growth-head { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pt-capital-growth-head h5, .pt-capital-growth-head b, .pt-capital-growth > p { margin: 0; }
.pt-capital-growth-head h5 { color: var(--ink); font-size: var(--fs-sm); }
.pt-capital-growth-head b { color: var(--muted); font-family: var(--mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pt-capital-growth-head b.gain { color: var(--gain); }
.pt-capital-growth-head b.loss { color: var(--loss); }
.pt-capital-growth > p { color: var(--muted); font-size: var(--fs-xs); }
.pt-capital-growth > p[data-error] { color: var(--loss); }
.pt-capital-growth-rows { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-2); }
.pt-capital-growth-rows article { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.pt-capital-growth-rows article[data-state="growth"] { border-color: color-mix(in srgb, var(--gain) 42%, var(--line)); }
.pt-capital-growth-rows article[data-state="decline"] { border-color: color-mix(in srgb, var(--loss) 42%, var(--line)); }
.pt-capital-growth-rows article > header { min-width: 0; display: flex; justify-content: space-between; gap: var(--space-2); }
.pt-capital-growth-rows article > header b { color: var(--ink-2); }
.pt-capital-growth-rows article > header span, .pt-capital-growth-rows article > p { color: var(--muted); font-size: var(--fs-xs); }
.pt-capital-growth-rows article > header span.gain, .pt-capital-growth-rows dd.gain { color: var(--gain); }
.pt-capital-growth-rows article > header span.loss, .pt-capital-growth-rows dd.loss { color: var(--loss); }
.pt-capital-growth-rows article > p { margin: 0; overflow-wrap: anywhere; }
.pt-capital-growth-rows dl { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; }
.pt-capital-growth-rows dl > div { min-width: 0; padding: 6px; border-radius: var(--radius-sm); background: var(--panel-2); }
.pt-capital-growth-rows dt, .pt-capital-growth-rows small { color: var(--muted); font-size: var(--fs-xs); }
.pt-capital-growth-rows dd { margin: 2px 0 0; color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.pt-capital-growth-rows small { display: block; margin-top: 3px; }
.pt-dossier-weakness { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.pt-dossier-weakness-head { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pt-dossier-weakness-head h4 { margin: 0; color: var(--ink); font-size: var(--fs-sm); }
.pt-dossier-weakness-head b { color: var(--muted); font-size: var(--fs-xs); }
.pt-dossier-weakness-rows { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-2); }
.pt-dossier-weakness-rows:empty { display: none; }
.pt-dossier-weakness-rows article { min-width: 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.pt-dossier-weakness-rows article[data-severity="critical"] { border-color: var(--loss); background: color-mix(in srgb, var(--loss) 7%, var(--panel)); }
.pt-dossier-weakness-rows article[data-severity="warning"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.pt-dossier-weakness-rows article[data-severity="notice"] { border-color: var(--muted); }
.pt-dossier-weakness-rows header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pt-dossier-weakness-rows h5 { margin: 0; color: var(--ink); font-size: var(--fs-xs); }
.pt-dossier-weakness-rows header span { color: var(--muted); font-size: var(--fs-xs); }
.pt-dossier-weakness-rows article[data-severity="critical"] header span { color: var(--loss); }
.pt-dossier-weakness-rows article[data-severity="warning"] header span { color: var(--accent-ink); }
.pt-dossier-weakness-rows p { margin: var(--space-1) 0; color: var(--ink-2); font-size: var(--fs-xs); }
.pt-dossier-weakness-rows dl { display: grid; gap: 4px; margin: 0; }
.pt-dossier-weakness-rows dl > div { min-width: 0; display: flex; justify-content: space-between; gap: var(--space-2); }
.pt-dossier-weakness-rows dt { color: var(--muted); font-size: var(--fs-xs); }
.pt-dossier-weakness-rows dd { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.pt-dossier-export { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-dossier-export button { flex: 0 0 auto; max-width: 100%; }
.pt-dossier-export p { min-width: 0; margin: 0; color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.pt-dossier-export p[data-error] { color: var(--loss); }
.pt-dossier-compare { min-width: 0; display: grid; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); }
.pt-dossier-compare-head { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pt-dossier-compare-head h4 { margin: 0; color: var(--ink); font-size: var(--fs-sm); }
.pt-dossier-compare-head b, .pt-dossier-compare-state { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.pt-dossier-compare-identities, .pt-dossier-compare-metrics, .pt-dossier-compare-findings { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-2); }
.pt-dossier-compare-identities[hidden], .pt-dossier-compare-metrics:empty, .pt-dossier-compare-findings:empty { display: none; }
.pt-dossier-compare article { min-width: 0; padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); }
.pt-dossier-compare-identities article { display: grid; gap: 3px; }
.pt-dossier-compare-identities span, .pt-dossier-compare-identities small { color: var(--muted); font-size: var(--fs-xs); }
.pt-dossier-compare-identities b { color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.pt-dossier-compare h5 { margin: 0 0 var(--space-1); color: var(--ink); font-size: var(--fs-xs); }
.pt-dossier-compare-metrics dl { display: grid; gap: 4px; margin: 0; }
.pt-dossier-compare-metrics dl > div { min-width: 0; display: flex; justify-content: space-between; gap: var(--space-2); }
.pt-dossier-compare-metrics dt, .pt-dossier-compare-metrics dd { color: var(--ink-2); font-size: var(--fs-xs); }
.pt-dossier-compare-metrics dt { color: var(--muted); }
.pt-dossier-compare-metrics dd { margin: 0; overflow-wrap: anywhere; }
.pt-dossier-compare-findings ul { display: grid; gap: 4px; margin: 0; padding-inline-start: var(--space-4); color: var(--ink-2); font-size: var(--fs-xs); }
.pt-dossier-compare-findings p { margin: 0; color: var(--muted); font-size: var(--fs-xs); }
.pt-closeout-open { margin: 0; color: var(--loss); font-size: var(--fs-xs); }
.pt-closeout-table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-closeout-table[hidden] { display: none; }
.pt-closeout-table th, .pt-closeout-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; overflow-wrap: anywhere; }
.pt-closeout-table th { color: var(--muted); background: var(--panel-2); font-size: var(--fs-xs); }
.pt-closeout-table td { color: var(--ink-2); font-size: var(--fs-xs); }
.pt-closeout-table td.gain { color: var(--gain); }
.pt-closeout-table td.loss { color: var(--loss); }
.pt-payoff { min-width: 0; display: grid; gap: var(--space-2); }
.pt-payoff-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.pt-payoff-head b { color: var(--ink-2); font-size: var(--fs-xs); }
.pt-payoff-chart { min-width: 0; min-height: 220px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.pt-payoff-chart svg { display: block; width: 100%; height: auto; }
.pt-table-scroll { min-width: 0; overflow-x: auto; }
.pt-positions-total { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); }
.pt-positions-total.gain { color: var(--gain); }
.pt-positions-total.loss { color: var(--loss); }
.pt-positions-total:empty { display: none; }
.pt-positions-table tr[data-status="open"] b { color: var(--gain); }
.pt-positions-table tr[data-status="closed"] b { color: var(--muted); }
.pt-positions-table tr[data-documented="false"] td:nth-child(5) { color: var(--loss); }
.pt-positions-empty td { text-align: center; color: var(--muted); }
.pt-positions-why { color: var(--loss); }


.pt-studio[data-mission-active="true"] .pt-mission-card { border-color: color-mix(in srgb, var(--gain) 45%, var(--line)); }

.pt-review { position: sticky; top: var(--space-3); margin: 0; border-top: 4px solid var(--accent); }
.pt-review h2 { margin: 0 0 var(--space-4); }
.pt-review dl { display: grid; gap: 0; margin: 0; }
.pt-review dl > div { display: grid; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.pt-review dt { color: var(--muted); font-size: var(--fs-xs); }
.pt-review dd { margin: 0; color: var(--ink-2); font-weight: 800; line-height: var(--lh-normal); }
.pt-honesty { margin: var(--space-4) 0; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); border-radius: var(--radius-md); background: var(--warn-soft); }
.pt-honesty b { color: var(--warn); }
.pt-honesty p { margin: 5px 0 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-review .primary { width: 100%; }
.pt-save-state { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }
.pt-save-state[data-error] { color: var(--loss); }

@media (max-width: 1100px) {
  .backtest-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backtest-kpis {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 14px 0 18px;
}
  .portfolio-form { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
  .portfolio-manual { grid-template-columns: repeat(2, minmax(155px, 1fr)); }
  .portfolio-sensitivity-grid { grid-template-columns: 1fr; }
  .portfolio-timeline-grid { grid-template-columns: 1fr; }
  .pt-layout { grid-template-columns: 1fr; }
  .pt-review { position: static; }
}
@media (max-width: 760px) {
  /* نوار بلند موبایل sticky نیست تا هنگام پیمایش روی عنوان و کنترل‌های
     صفحه نیفتد. پنل ظرفیت هم درون جریان باز می‌شود: ارتفاع نوار را زیاد
     می‌کند و به‌جای بیرون‌زدن از لبه RTL، محتوای بعدی را پایین می‌برد. */
  .top { position: relative; align-items: flex-start; gap: var(--space-2); padding: 10px 12px; }
  .brand { padding-top: 4px; }
  .brand-name { font-size: var(--fs-xl); }
  .health { min-width: 0; justify-content: flex-end; gap: var(--space-2); }
  .health > * { max-width: 100%; }
  .metric { min-width: 44px; }
  .capacity[open] { flex: 1 0 100%; order: 10; min-width: 0; }
  .capacity-panel {
    position: static; width: 100%; max-height: min(55vh, 440px); margin-top: var(--space-2);
  }
  .capacity-list { grid-template-columns: minmax(0, 1fr); }
  .capacity-list section, .capacity-list label { min-width: 0; }
  .capacity-note, .capacity-list h4, .capacity-list small,
  .capacity-actions span { overflow-wrap: anywhere; }
  .capacity-actions { align-items: stretch; flex-direction: column; }
  .capacity-actions button { width: 100%; }
  .backtest-hero, .backtest-date-grid, .backtest-chart-grid, .backtest-analysis-grid { grid-template-columns: 1fr; display: grid; }
  .backtest-hero > span { justify-self: start; }
  .backtest-form, .backtest-runbar { grid-template-columns: 1fr; }
  .backtest-run-actions { justify-content: stretch; }
  .backtest-kpis, .backtest-matrix-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .backtest-price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .portfolio-hero, .portfolio-report-grid { grid-template-columns: 1fr; }
  .portfolio-hero > span { justify-self: start; }
  .portfolio-form, .portfolio-manual { grid-template-columns: 1fr; }
  .portfolio-run { align-items: stretch; flex-direction: column; }
  .portfolio-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portfolio-basis-matrix { grid-template-columns: repeat(2, minmax(90px, 1fr)); }
  .portfolio-shock-controls { width: 100%; flex-direction: column; }
  .pt-hero { grid-template-columns: 1fr; padding: var(--space-5); }
  .pt-hero-orbit { justify-self: stretch; }
  .pt-progress { grid-template-columns: 1fr; }
  .pt-progress > div:not(.active) { display: none; }
  .pt-money-grid, .pt-capital-board, .pt-date-grid { grid-template-columns: 1fr; }
  .pt-choice-grid, .pt-volatility-grid, .pt-outlook-price-grid, .pt-outlook-detail-grid,
  .pt-risk-input-grid, .pt-liquidity-grid, .pt-binary, .pt-budget-values { grid-template-columns: 1fr; }
  .pt-allocation-totals, .pt-mission-objective-grid, .pt-final-review-grid, .pt-snapshot-grid { grid-template-columns: 1fr; }
  .pt-final-review-grid article:last-child { grid-column: auto; }
  .pt-allocation-head { display: none; }
  .pt-allocation-row { grid-template-columns: 1fr; align-items: stretch; }
  .pt-allocation-row .pt-remove-allocation { justify-self: start; }
  .pt-stage-actions { grid-template-columns: 1fr; }
  .pt-eligibility-head, .pt-proposals-head, .pt-ledger-head,
  .pt-positions-head, .pt-clock-head, .pt-watch-head,
  .pt-closeout-head { align-items: stretch; flex-direction: column; }
  .pt-dossier-analysis-figures { grid-template-columns: minmax(0, 1fr); }
  .pt-capital-continuity-head { align-items: stretch; flex-direction: column; }
  .pt-capital-continuity-source { grid-template-columns: minmax(0, 1fr); }
  .pt-capital-continuity button { justify-self: stretch; width: 100%; }
  .pt-capital-growth-head { align-items: stretch; flex-direction: column; }
  .pt-capital-growth-rows, .pt-capital-growth-rows dl { grid-template-columns: minmax(0, 1fr); }
  .pt-dossier-weakness-head { align-items: stretch; flex-direction: column; }
  .pt-dossier-weakness-rows { grid-template-columns: minmax(0, 1fr); }
  .pt-dossier-export { align-items: stretch; flex-direction: column; }
  .pt-dossier-export button { width: 100%; }
  .pt-dossier-compare-head { align-items: stretch; flex-direction: column; }
  .pt-dossier-compare-identities, .pt-dossier-compare-metrics,
  .pt-dossier-compare-findings { grid-template-columns: minmax(0, 1fr); }
  .pt-eligibility-table, .pt-eligibility-table tbody,
  .pt-proposals-table, .pt-proposals-table tbody,
  .pt-ledger-table, .pt-ledger-table tbody,
  .pt-positions-table, .pt-positions-table tbody,
  .pt-watch-table, .pt-watch-table tbody,
  .pt-closeout-table, .pt-closeout-table tbody { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; background: transparent; }
  .pt-eligibility-table thead, .pt-proposals-table thead, .pt-ledger-table thead,
  .pt-positions-table thead, .pt-watch-table thead, .pt-closeout-table thead { display: none; }
  .pt-eligibility-table tr, .pt-proposals-table tr, .pt-ledger-table tr,
  .pt-positions-table tr, .pt-watch-table tr, .pt-closeout-table tr { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); overflow: hidden; }
  .pt-eligibility-table td, .pt-proposals-table td, .pt-ledger-table td,
  .pt-positions-table td, .pt-watch-table td, .pt-closeout-table td { min-width: 0; display: grid; grid-template-columns: minmax(82px, .38fr) minmax(0, 1fr); gap: var(--space-2); padding: 9px 11px; }
  .pt-eligibility-table td::before, .pt-proposals-table td::before,
  .pt-ledger-table td::before, .pt-positions-table td::before,
  .pt-watch-table td::before, .pt-closeout-table td::before { content: attr(data-label); color: var(--muted); font-weight: 700; }
  .pt-eligibility-table .pt-eligibility-empty td { display: block; }
  .pt-eligibility-table .pt-eligibility-empty td::before { content: none; }
  .pt-symbol-row { grid-template-columns: 1fr; }
  .pt-date-title { align-items: stretch; flex-direction: column; }
  .pt-date-title label { width: 100%; }
}

.health { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.metric { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.metric b { font-family: var(--mono); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.metric i { font-style: normal; font-size: var(--fs-2xs); color: var(--muted); }
/* داده کهنه باید به چشم بیاید، وگرنه ساعتِ ثابت شبیه ساعتِ درست است */
.metric b[data-stale] { color: var(--warn); }
.metric b[data-stale]::after { content: " ▲"; font-size: var(--fs-3xs); }
.warn-metric b { color: var(--loss); }

.pill {
  padding: 5px 13px; border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700;
  background: var(--panel-2); border: 1px solid var(--line-soft); color: var(--ink-2);
  box-shadow: var(--shadow-2xs);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.pill.open { background: var(--gain-soft); border-color: var(--gain); color: var(--gain); }
.pill.shut { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.pill.down { background: var(--loss-soft); border-color: var(--loss); color: var(--loss); }

/* حباب اتصال: نقطه‌ای که در حالت زنده نبض می‌زند. حرکت، تنها چیزی است که
   «الان دارد کار می‌کند» را بدون خواندن متن می‌رساند. */
.pill.link { display: inline-flex; align-items: center; gap: 6px; }
.pill.link::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none;
}
.pill.link.open::before { animation: pulse 1.8s ease-in-out infinite; }
.pill.link.wait { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.pill.link.wait::before { animation: pulse .7s ease-in-out infinite; }
.pill.link.idle { color: var(--muted); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .pill.link::before { animation: none !important; } }

/* ——— قالب ———
   فهرست سمت راست است: در راست‌به‌چپ، ستون اول شبکه همان سمت راست است و
   چشم از همان‌جا شروع می‌کند. مرز جداکننده هم روی لبه رو به متن می‌نشیند. */
.shell { display: flex; flex-direction: row; min-height: 0; flex: 1; overflow: hidden; }
.rail {
  position: relative; align-self: stretch; height: auto; min-height: 0;
  margin: 12px;
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  box-shadow: var(--shadow-lg);
  padding: 0 0 16px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; direction: ltr;
  transition: width var(--transition-med), opacity var(--transition-med),
              margin var(--transition-med), padding var(--transition-med),
              min-width var(--transition-med);
  min-width: 290px;
  width: 290px;
  flex: none;
  --rail-stub: 46px;
}
.rail > * { direction: rtl; }

.rail-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 10px; margin: 0;
  background: transparent; border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
  color: var(--muted); font: inherit; font-size: var(--fs-xs); cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.rail-toggle:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.rail-toggle svg { transition: transform var(--transition-med); }
/* پنل سمت راست است: باز یعنی به چپ می‌رود، جمع یعنی به راست. پیکان همان را می‌گوید. */
.rail-toggle[aria-expanded="true"] .rail-toggle-ic { transform: rotate(180deg); }
.rail-toggle-text { font-size: var(--fs-xs); }

.rail-search {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
}
.rail-search input {
  flex: 1; min-width: 0;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  padding: 7px 12px; font: inherit; font-size: var(--fs-md);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 3%, transparent);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rail-search input:focus {
  border-color: var(--accent); outline: none;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.rail-search input::-webkit-search-cancel-button { cursor: pointer; }
.rail-count { font-size: var(--fs-xs); color: var(--muted); font-family: var(--mono); white-space: nowrap; }

.rail-list { padding: 8px 8px 0; --sec: var(--accent); }
.rail-none { padding: 18px 10px; color: var(--muted); font-size: var(--fs-md); text-align: center; }

/* هر بخش منوی سمت راست */
.rail-group {
  margin-bottom: 5px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.rail-group[data-open="1"] {
  background: color-mix(in srgb, var(--sec) 10%, transparent);
  border-color: color-mix(in srgb, var(--sec) 25%, transparent);
}
.rail-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; margin: 0;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 700;
  text-align: start; cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.rail-head:hover { color: var(--ink); background: color-mix(in srgb, var(--sec) 6%, var(--panel-2)); }
.rail-group[data-open="1"] .rail-head { color: var(--sec); font-weight: 800; }

.rail-head-grip {
  flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; cursor: grab;
  color: var(--muted); opacity: .35;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}
.rail-head:hover .rail-head-grip { opacity: .85; color: var(--ink); }
.rail-head-grip:active { cursor: grabbing; }

.rail-head-chip {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 8px; color: var(--sec);
  background: color-mix(in srgb, var(--sec) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--sec) 22%, transparent);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.rail-group[data-open="1"] .rail-head-chip {
  color: var(--panel); background: var(--sec); border-color: var(--sec);
}
.rail-head .caret { flex: none; opacity: .7; transition: transform .18s ease; }
.rail-group[data-open="1"] .caret { transform: rotate(-90deg); }
.rail-head-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-head-n {
  font-family: var(--mono); font-size: var(--fs-xs);
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 0 6px;
}
.rail-group[data-open="1"] .rail-head-n {
  color: var(--sec); background: color-mix(in srgb, var(--sec) 12%, transparent);
  border-color: color-mix(in srgb, var(--sec) 28%, transparent);
}

/* آیتم‌های درون خطی در ریل مخفی هستند (در زیرمنوی افقی نمایش داده می‌شوند) */
.rail-items { display: none; }

/* دراگ ردیف‌های گروه */
.rail-group.dragging { opacity: .35; transform: scale(.97); }
.rail-group.drag-over {
  border-top: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ——— حالت جمع‌شده ———
   ریل ناپدید نمی‌شود؛ به یک نوار باریک در همان سمت راست می‌نشیند و همان
   دکمهٔ بالا سرش را نگه می‌دارد. یک دکمه، هر دو جهت، همیشه سر جای خودش. */
.shell[data-rail-collapsed="true"] .rail {
  width: var(--rail-stub); min-width: var(--rail-stub);
  padding-bottom: 8px; overflow: hidden;
}
.shell[data-rail-collapsed="true"] .rail-search,
.shell[data-rail-collapsed="true"] .rail-list { display: none; }
.shell[data-rail-collapsed="true"] .rail-toggle {
  /* تنها راه بازگشت است، پس باید دیده شود — نه به رنگ متن کم‌رنگ */
  padding: 12px 0; border-bottom: 0; color: var(--accent);
}
.shell[data-rail-collapsed="true"] .rail-toggle-text { display: none; }

/* ——— زیرمنوی افقی شناور ———
   وقتی بخشی باز می‌شود، آیتم‌هایش به صورت پنل افقی شناور از کنار ریل باز می‌شوند */
.rail-submenu {
  position: fixed; z-index: 50;
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px;
  min-width: 220px;
  max-width: min(580px, calc(100vw - 340px));
  max-height: min(75vh, 480px);
  overflow-y: auto; overflow-x: hidden;
  background: color-mix(in srgb, var(--panel) 75%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.8);
  border: 1px solid color-mix(in srgb, var(--sec, var(--line)) 40%, var(--line-soft));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg), 0 16px 36px -4px color-mix(in srgb, var(--ink) 18%, transparent);
  direction: rtl;
  animation: submenu-in .2s cubic-bezier(.2, 0, 0, 1);
}
.rail-submenu[hidden] { display: none; }
@keyframes submenu-in {
  from { opacity: 0; transform: translateX(12px) scale(.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.rail-submenu-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 35%, transparent);
}
.rail-submenu-chip {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  color: var(--sec);
  background: color-mix(in srgb, var(--sec) 15%, transparent);
}
.rail-submenu-title {
  font-size: var(--fs-sm); font-weight: 800;
  color: var(--sec, var(--ink));
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-submenu-count {
  font-size: var(--fs-2xs); font-family: var(--mono);
  color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 0 6px;
}
.rail-submenu-close {
  flex: none; width: 22px; height: 22px;
  display: grid; place-items: center; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--muted); cursor: pointer; font-size: var(--fs-xs);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.rail-submenu-close:hover { background: var(--panel-2); color: var(--loss); }

.rail-submenu-list {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px;
  align-items: center;
}

/* آیتم‌های افقی (Pills / Chips) داخل زیرمنو */
.rail-submenu .tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; margin: 0;
  background: color-mix(in srgb, var(--sec, var(--accent)) 7%, var(--panel-2));
  border: 1px solid color-mix(in srgb, var(--sec, var(--accent)) 20%, transparent);
  border-radius: var(--radius-pill);
  color: var(--ink-2); font: inherit; font-size: var(--fs-sm); text-align: start;
  cursor: pointer; position: relative; white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast),
              transform var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast);
}
.rail-submenu .tab-btn:hover {
  background: color-mix(in srgb, var(--sec, var(--accent)) 16%, var(--panel-2));
  border-color: color-mix(in srgb, var(--sec, var(--accent)) 40%, transparent);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--sec, var(--accent)) 18%, transparent);
}
.tab-btn[aria-current="true"] {
  background: color-mix(in srgb, var(--sec) 18%, transparent);
  border-color: var(--sec);
  color: var(--sec); font-weight: 800;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sec) 20%, transparent);
}
.rail-submenu .tab-btn[aria-current="true"] {
  background: var(--sec, var(--accent));
  border-color: var(--sec, var(--accent));
  color: var(--panel); font-weight: 800;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--sec, var(--accent)) 45%, transparent);
}
.rail-submenu .tab-btn[aria-current="true"] .tab-ic { opacity: 1; filter: brightness(10); }
.rail-submenu .tab-btn[aria-current="true"] .tone-dot { border-color: var(--panel); }

.rail-submenu .tab-btn[draggable="true"] { cursor: grab; }
.rail-submenu .tab-btn[draggable="true"]:active { cursor: grabbing; }
.rail-submenu .tab-btn.dragging { opacity: .35; transform: scale(.92); }
.rail-submenu .tab-btn.drag-over {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

.stage { padding: 22px 26px 60px; min-width: 0; min-height: 0; flex: 1; height: 100%; overflow: auto; direction: ltr; background: var(--ground); }
.stage > * { direction: rtl; }
@media (max-width: 820px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  body { display: block; }
  .shell { flex-direction: column; }
  .rail {
    position: static; max-height: none; height: auto; overflow: visible; direction: rtl;
    width: auto !important; min-width: 0 !important; flex: none;
    margin: 8px; border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
  }
  .shell { min-height: 0; overflow: visible; }
  .stage { height: auto; overflow: visible; direction: rtl; }
  .shell[data-rail-collapsed="true"] .rail { padding-bottom: 0; }
  .shell[data-rail-collapsed="true"] .rail-toggle { padding: 8px 10px; }
  .shell[data-rail-collapsed="true"] .rail-toggle-text { display: inline; }
}

/* ——————————————————————— تحلیل تاریخی ——————————————————————— */
.history-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 16px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel));
}
.history-hero h1 { margin: 2px 0 8px; font-size: clamp(24px, 3vw, 38px); }
.history-hero p { max-width: 820px; margin: 0; color: var(--muted); line-height: 1.9; }
.history-local {
  flex: none;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: 700;
}
.eyebrow { margin: 0; color: var(--accent); font-size: var(--fs-sm); font-weight: 800; }
.history-controls { margin-bottom: 14px; }
.history-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}
.history-liquidity-controls {
  display: grid;
  grid-template-columns: minmax(210px, 1.35fr) repeat(4, minmax(145px, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}
.history-liquidity-controls label { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.history-liquidity-controls input {
  width: 100%; min-height: 38px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: var(--ink); font: inherit;
}
.history-control-grid label,
.history-range label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 700;
}
.history-expiry-field { display: grid; gap: 7px; color: var(--muted); font-size: var(--fs-md); font-weight: 700; position: relative; }
.history-expiry-field details { position: relative; }
.history-expiry-field summary {
  min-height: 40px; display: flex; align-items: center; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2);
  color: var(--ink); cursor: pointer; list-style-position: inside;
}
.history-expiry-field summary.warn { color: var(--warn); border-color: var(--warn); }
.expiry-picker-popover {
  position: absolute; z-index: 12; inset-inline: 0; top: calc(100% + 5px);
  padding: 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); box-shadow: var(--shadow); min-width: 260px;
}
.expiry-picker-tools { display: flex; gap: 7px; margin-bottom: 8px; }
.expiry-picker-list { display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.expiry-picker-list label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 6px; border-radius: 6px; cursor: pointer; }
.expiry-picker-list label:hover { background: var(--panel-2); }
.history-control-grid .expiry-picker-list input { width: auto; min-height: auto; padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
.expiry-picker-list small { color: var(--muted); font-weight: 500; white-space: nowrap; }
.history-control-grid select,
.history-control-grid input,
.history-leg select,
.history-leg input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background-color: var(--panel-2);
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
}
.history-control-grid select:focus,
.history-control-grid input:focus,
.history-leg select:focus,
.history-leg input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 1px; }
.history-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.history-actions #h-status { color: var(--muted); font-size: var(--fs-md); }
.history-actions #h-status[data-error] { color: var(--loss); }
.history-caveat { margin: 13px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: var(--fs-md); }

/* یادداشت دامنهٔ داده. رنگش از توکن می‌آید نه ثابت، و حالت «نچسبید» با
   همان توکن هشدار برنامه دیده می‌شود تا با «خطای فاجعه» اشتباه نشود. */
.live-scope-note { margin: 10px 0 0; padding: 8px 11px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line));
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--text); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.live-scope-note[data-error] { border-color: color-mix(in oklab, var(--warn) 45%, var(--line));
  background: color-mix(in oklab, var(--warn) 8%, transparent); color: var(--muted); }
.history-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-bottom: 14px; }
.range-head { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.range-head h2 { margin: 0; }
.range-head b { color: var(--accent); }
.history-range input[type="range"] { width: 100%; accent-color: var(--accent); }
.base-liquidity-snapshot {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--panel-2); color: var(--muted); font-size: var(--fs-md);
}
.base-liquidity-snapshot b { color: var(--ink); }
.base-liquidity-snapshot small { flex-basis: 100%; color: var(--warn); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.section-head h2, .section-head h3, .section-head p { margin: 0; }
.section-head > span { color: var(--muted); font-size: var(--fs-md); }
.history-leg-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; }
.history-leg { display: grid; gap: 8px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.history-leg > span { color: var(--muted); font-size: var(--fs-md); }
.history-auto-manual { margin-top: 14px; padding: 14px; border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 11px; background: color-mix(in srgb, var(--accent) 5%, var(--panel)); }
.history-auto-manual > button { margin-top: 12px; }
/* مشخصات موقعیت — ثابت در بالای تب.
   قبلاً کشیدنی بود؛ کشیدن جای جعبه را از دست کاربر می‌گرفت و تا بازنشانی
   همان‌جا می‌ماند. حالا اولین فرزند تب است و با `sticky` بالای ناحیه پیمایش
   می‌چسبد، پس در هر ارتفاعی از صفحه دیده می‌شود. */
.history-frozen {
  position: sticky; top: 0; z-index: 20;
  display: grid; gap: 9px; margin: 0 0 14px; padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 8px 26px rgba(22, 32, 44, .14);
  backdrop-filter: blur(var(--glass-blur));
}
.history-frozen[data-folded="1"] .frozen-facts,
.history-frozen[data-folded="1"] .frozen-legs { display: none; }
.history-frozen[data-empty="true"] { border-style: dashed; box-shadow: none; }
.frozen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.frozen-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 7px; }
.frozen-actions .primary { min-height: 34px; padding: 6px 14px; border-radius: var(--radius-pill); white-space: nowrap; }
.frozen-actions .primary:disabled { cursor: not-allowed; opacity: .55; }
.frozen-head .ghost {
  background: var(--panel); border: 1px solid var(--line-soft); color: var(--ink-2);
  box-shadow: var(--shadow-2xs);
  border-radius: var(--radius-md); padding: 6px 14px; font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.frozen-summary { display: grid; align-content: center; gap: 3px; min-width: 0; }
.frozen-summary span { color: var(--accent); font-size: var(--fs-md); font-weight: 800; }
.frozen-summary b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-3xl); }
.frozen-summary small { color: var(--muted); font-size: var(--fs-md); line-height: 1.75; }
.frozen-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 6px; }
.frozen-facts > div { display: grid; gap: 3px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.frozen-facts span { color: var(--muted); font-size: var(--fs-xs); }
.frozen-facts b { font-family: var(--mono); font-size: var(--fs-md); }
.frozen-facts b.gain { color: var(--gain); }
.frozen-facts b.loss { color: var(--loss); }
.frozen-legs { display: flex; gap: 7px; min-width: 0; overflow-x: auto; direction: rtl; scrollbar-width: thin; }
.frozen-leg {
  flex: 1 0 285px; display: grid; grid-template-columns: repeat(3, auto); gap: 4px 12px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2);
}
.frozen-leg > b { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-lg); }
.frozen-leg span { color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; }
.frozen-leg strong { color: var(--ink-2); font-family: var(--mono); font-weight: 600; }
.history-kpis {
  display: grid; gap: var(--space-3, 12px); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: var(--space-3, 12px) 0 var(--space-4, 16px);
}
.history-kpi {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-lg); padding: 14px 16px;
  box-shadow: var(--shadow-2xs);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.history-kpi:hover { box-shadow: var(--shadow-md); }
.history-kpi span { display: block; margin-bottom: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.history-kpi b { font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.4; }
.history-kpi.gain { border-top-color: var(--gain); }
.history-kpi.loss { border-top-color: var(--loss); }
.history-chart-grid,
.history-analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4, 16px); margin: var(--space-4, 16px) 0; }
.history-chart { min-height: 220px; min-width: 0; overflow: visible; }
.history-svg { display: block; width: 100%; min-width: 0; height: auto; overflow: visible; }
.history-svg text { fill: var(--ink-2); font-family: inherit; font-size: var(--fs-chart); font-weight: 700; direction: ltr; unicode-bidi: isolate; }
.history-svg .history-axis-title { fill: var(--ink); font-size: var(--fs-axis); font-weight: 800; font-family: inherit; }
.history-grid { stroke: color-mix(in srgb, var(--line) 75%, transparent); stroke-width: 1; }
.history-grid-x { opacity: .55; }
.history-axis { stroke: var(--line-strong, var(--line)); stroke-width: 1.2; }
.history-line { stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.history-chartbox { display: grid; gap: 7px; min-width: 0; }
.history-chart-legend { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px; }
.history-chart-legend button {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel-2);
  color: var(--ink-2); font: inherit; font-size: var(--fs-2xs); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.history-chart-legend button:hover { border-color: var(--accent); }
.history-chart-legend button[aria-pressed="false"] { opacity: .48; text-decoration: line-through; }
.history-chart-legend i, .history-tooltip i { width: 9px; height: 9px; border-radius: 50%; background: var(--series); flex: none; }
.history-chart-stage { position: relative; min-width: 0; }
.history-tooltip {
  position: absolute; z-index: 25; width: max-content; max-width: 260px; display: grid; gap: 5px;
  padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: var(--shadow-lg);
  color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); pointer-events: none;
}
.history-tooltip[hidden] { display: none; }
.history-tooltip b { color: var(--ink); font-family: var(--mono); }
.history-tooltip span { display: flex; align-items: center; gap: 6px; }
.history-tooltip strong.gain { color: var(--gain); }
.history-tooltip strong.loss { color: var(--loss); }
.history-cursor line { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; opacity: .72; }
.history-cursor circle { stroke: var(--panel); stroke-width: 2; }
.chart-zero { stroke: var(--line-strong, var(--line)); stroke-width: 1; stroke-dasharray: 4 4; }
.scatter-gain { fill: color-mix(in srgb, var(--gain) 70%, transparent); }
.scatter-loss { fill: color-mix(in srgb, var(--loss) 70%, transparent); }
.history-table-wrap { width: 100%; overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.history-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-md);
  background: var(--panel);
}
.history-table th,
.history-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); border-left: 1px solid color-mix(in srgb, var(--line) 65%, transparent); text-align: right; white-space: nowrap; }
.history-table th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); color: var(--muted); font-size: var(--fs-sm); }
.history-table tbody tr:last-child td { border-bottom: 0; }
.history-table tbody tr[data-combo] { cursor: pointer; }
.history-table tbody tr[data-combo]:hover,
.history-table tbody tr[data-combo]:focus { background: color-mix(in srgb, var(--accent) 8%, transparent); outline: none; }
.history-table tbody tr[data-combo].selected { background: color-mix(in srgb, var(--accent) 15%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.history-sort {
  width: 100%; display: inline-flex; align-items: center; justify-content: space-between; gap: 7px;
  padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
  font-weight: inherit; white-space: nowrap; cursor: pointer; text-align: inherit;
}
.history-sort::after { content: "↕"; color: var(--muted); font-size: var(--fs-sm); opacity: .65; }
.history-table th[aria-sort="ascending"] .history-sort::after { content: "↑"; color: var(--accent); opacity: 1; }
.history-table th[aria-sort="descending"] .history-sort::after { content: "↓"; color: var(--accent); opacity: 1; }
.history-sort:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 3px; }
.history-table td small,
.history-table td b { display: block; }
.history-table td small { margin-top: 4px; color: var(--muted); font-size: var(--fs-2xs); }
.history-table .gain, .leg-contrib .gain { color: var(--gain); }
.history-table .loss, .leg-contrib .loss { color: var(--loss); }
.history-missing { color: var(--muted); background: color-mix(in srgb, var(--muted) 6%, transparent); }
.history-liquidity { color: var(--muted); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.history-table tbody tr:has(td:last-child:not(:empty)) td:last-child { max-width: 260px; }
.history-histogram {
  height: 220px; display: flex; direction: ltr; align-items: end; gap: 6px;
  padding: 24px 12px 34px; border-bottom: 1px solid var(--line); position: relative;
}
.hist-bin { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 4px; position: relative; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: help; }
.hist-bin:hover, .hist-bin:focus-visible { background: color-mix(in srgb, var(--accent) 7%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 6px; }
.hist-bin b { width: min(42px, 86%); min-height: 5px; border-radius: 5px 5px 1px 1px; background: var(--muted); }
.hist-bin.gain b { background: var(--gain); }
.hist-bin.loss b { background: var(--loss); }
.hist-bin span { font-size: var(--fs-2xs); font-weight: 700; }
.hist-bin small { position: absolute; top: calc(100% + 7px); color: var(--muted); font-size: var(--fs-3xs); white-space: nowrap; transform: rotate(-25deg); }
.hist-y-title { position: absolute; inset-inline-start: 1px; top: 45%; transform: rotate(-90deg); color: var(--muted); font-size: var(--fs-3xs); }
.hist-x-title { position: absolute; inset-inline-end: 8px; bottom: 2px; color: var(--muted); font-size: var(--fs-3xs); }
.margin-summary { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 8px; padding: 10px; }
.margin-summary div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); }
.margin-summary span { display: block; color: var(--muted); font-size: var(--fs-2xs); margin-bottom: 5px; }
.optimal-observed, .optimal-policy { padding: 12px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.optimal-observed { border-inline-start: 3px solid var(--gain); }
.optimal-policy { border-inline-start: 3px solid var(--accent); }
.optimal-observed > span, .optimal-policy > span { display: block; color: var(--muted); font-size: var(--fs-sm); margin-bottom: 6px; }
.optimal-observed ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 5px; }
.optimal-observed li { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-sm); }
.optimal-policy p { margin: 7px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.8; }
#h-optimal { overflow: auto; }
.leg-contrib { display: grid; gap: 10px; }
.leg-contrib > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.leg-contrib small { grid-column: 1 / -1; color: var(--muted); }
.rolling-wrap { max-height: 640px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.rolling-controls {
  display: grid; grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(135px, 1fr));
  gap: 9px; margin: 0 0 12px; padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 4%, var(--panel));
}
.rolling-controls label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: var(--fs-2xs); font-weight: 700; }
.rolling-controls select, .rolling-controls input {
  width: 100%; min-width: 0; min-height: 37px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 8px; background-color: var(--panel-2); color: var(--ink); font: inherit;
}
.rolling-strategy-field { grid-column: span 2; }
.rolling-table { border-collapse: separate; border-spacing: 1px; min-width: 100%; font-size: var(--matrix-font, 12.5px); }
.rolling-table th { position: sticky; top: 0; z-index: 2; padding: var(--matrix-head-pad, 7px); background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.rolling-table tbody th { right: 0; z-index: 1; }
.rolling-table td { min-width: var(--matrix-cell-width, 68px); height: var(--matrix-cell-height, 36px); padding: 3px; text-align: center; color: var(--ink); }
.return-matrix td { padding: 0; }
.return-matrix td button { width: 100%; min-width: var(--matrix-cell-width, 68px); height: var(--matrix-cell-height, 36px); padding: 3px 6px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: inherit; font-weight: 700; cursor: pointer; }
.return-matrix td button:hover, .return-matrix td button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--panel) 25%, transparent); }
.return-matrix .matrix-empty { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--line) 38%, transparent) 5px 6px); }
.matrix-mode { display: flex; flex-wrap: wrap; gap: 6px; }
.matrix-mode button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.matrix-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2);
}
.matrix-zoom, .matrix-exports { display: flex; align-items: center; gap: 6px; }
.matrix-zoom { direction: ltr; }
.matrix-zoom .ghost { min-width: 38px; min-height: 36px; font-size: var(--fs-3xl); font-weight: 900; }
.matrix-zoom #h-matrix-zoom-reset { min-width: 74px; font-size: var(--fs-md); }
.matrix-exports { margin-inline-start: auto; }
.export-btn::before { content: "⇩"; margin-inline-end: 6px; font-weight: 900; }
.trade-detail { margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); }
.trade-detail[hidden] { display: none; }
.trade-detail-kpis { display: grid; grid-template-columns: repeat(5, minmax(145px, 1fr)); gap: 8px; margin-bottom: 14px; }
.trade-detail-kpis > div { min-height: 68px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.trade-detail-kpis span { display: block; color: var(--muted); font-size: var(--fs-2xs); margin-bottom: 6px; }
.trade-detail-kpis b { font-size: var(--fs-sm); line-height: 1.7; }
.holding-head { margin-top: 18px; }
.holding-best { display: grid; gap: 4px; padding: 11px 13px; background: color-mix(in srgb, var(--accent) 9%, var(--panel)); border-bottom: 1px solid var(--line); }
.holding-best span, .holding-best small { color: var(--muted); font-size: var(--fs-2xs); }
.holding-best b { color: var(--accent); }
.holding-picked { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.history-payoff-card { margin: 14px 0; }
.payoff-day-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 16px; margin: 13px 0; }
.payoff-day-controls > label { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-sm); }
.payoff-day-controls input[type="range"] { width: 100%; accent-color: var(--accent); }
.payoff-layer-controls { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.payoff-layer-controls label { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-size: var(--fs-2xs); cursor: pointer; }
.payoff-layer-controls input { accent-color: var(--accent); }
.history-payoff-shell { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.history-payoff-shell .chart-box { position: relative; border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-xs); overflow: hidden; }
.payoff-decision-strip { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.payoff-decision-strip > div { min-height: 58px; padding: 9px 11px; background: var(--panel-2); }
.payoff-decision-strip span { display: block; color: var(--muted); font-size: var(--fs-3xs); margin-bottom: 5px; }
.payoff-decision-strip b { font-size: var(--fs-2xs); line-height: var(--lh-normal); }
.empty-note { color: var(--muted); text-align: center; padding: 28px 12px; }

@media (max-width: 1100px) {
  .history-control-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .history-liquidity-controls { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .history-liquidity-controls > div { grid-column: 1 / -1; }
  .history-kpis {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 14px 0 18px;
}
  .trade-detail-kpis { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .payoff-decision-strip { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .rolling-controls { grid-template-columns: repeat(3, minmax(145px, 1fr)); }
  .rolling-strategy-field { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .history-hero { display: block; }
  .history-local { display: inline-block; margin-top: 14px; }
  .history-control-grid,
  .history-liquidity-controls,
  .history-range,
  .history-leg-grid,
  .history-chart-grid,
  .history-analysis-grid { grid-template-columns: 1fr; }
  .history-liquidity-controls > div { grid-column: auto; }
  .range-head { align-items: flex-start; flex-direction: column; }
  .history-kpis {
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 14px 0 18px;
}
  .trade-detail-kpis { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .payoff-day-controls { grid-template-columns: 1fr; }
  .frozen-legs { max-height: 150px; }
  .rolling-controls { grid-template-columns: 1fr; }
  .rolling-strategy-field { grid-column: auto; }
  .matrix-toolbar { align-items: stretch; }
  .matrix-mode, .matrix-exports { width: 100%; }
  .matrix-mode > button, .matrix-exports > button { flex: 1; }
  .matrix-exports { margin-inline-start: 0; }
}

.empty { max-width: 460px; margin: 12vh auto; text-align: center; color: var(--muted); }
.empty h1 { font-size: var(--fs-4xl); color: var(--ink); margin-bottom: 6px; }

/* ——— اجزای مشترک ——— */
.page-head { margin-bottom: 18px; }
.page-head h2 { margin: 0; font-size: var(--fs-4xl); font-weight: 800; line-height: var(--lh-tight); }
.page-head p { margin: 4px 0 0; color: var(--muted); max-width: 74ch; }

/* کارت روی کاغذِ آبی‌ته می‌نشیند: سفیدِ سطح، خطِ مویی، و یک سایه کم‌رمق.
   کادر دیگر نیمه‌شفاف نیست — با `--line` تازه که خودش روشن است،
   `color-mix` تا ۷۵٪ آن را چنان محو می‌کرد که کارت لبه‌اش را از دست می‌داد
   و فقط سایه نگهش می‌داشت. */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  padding: 20px 22px; margin-bottom: var(--space-4, 16px);
  transition: box-shadow var(--transition-med), border-color var(--transition-med);
}
.card:hover { box-shadow: var(--shadow-md); }
.card > h3 {
  margin: 0 0 6px; font-size: var(--fs-xl); font-weight: 800;
  display: flex; align-items: center; gap: 8px;
}
.card > h3 .scope {
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 7px;
  background: var(--panel-2);
}
.card > .note { margin: 0 0 14px; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }

/* ——— تب تنظیمات: نوار پرش و سلسله‌مراتب تایپوگرافی ——— */
.settings-nav {
  position: sticky; top: 46px; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px; margin-bottom: 16px;
  background: color-mix(in srgb, var(--ground) 85%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
}
.settings-card { scroll-margin-top: 108px; }
.settings-card > h3 {
  font-size: var(--fs-2xl); padding-inline-start: 10px;
  border-inline-start: 3px solid var(--accent);
}
.grid { display: grid; gap: 12px 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.field { display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.field label, .field .field-label { font-size: var(--fs-md); color: var(--ink-2); font-weight: 700; }
.field .hint { font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-normal); margin-top: 2px; }
/* ورودی سفید است و کادر آبی دارد، نه خاکستریِ پرشده.
   پیش از این ورودی با زمینهٔ `--panel-2` ساخته می‌شد — یعنی همان رنگی که
   جعبه‌های اطلاعاتیِ غیرقابل‌ویرایش دارند. نتیجه این بود که در یک کارت،
   ورودی و برچسبِ فقط‌خواندنی یک‌شکل دیده می‌شدند. حالا برعکس است: ورودی
   روشن‌ترین سطح صفحه است و کادرش تنها کادر آبیِ صفحه — «اینجا می‌شود
   نوشت» را خودِ شکل می‌گوید، بی‌آنکه لازم باشد کاربر امتحان کند. */
.field input, .field select,
select, input[type="text"], input[type="search"], input[type="number"], input[type="date"] {
  background-color: var(--panel); color: var(--ink);
  border: 1px solid var(--line-input); border-radius: var(--radius-sm);
  min-height: var(--control-h, 40px);
  padding: 8px 12px; font: inherit; font-size: var(--fs-md); width: 100%;
  box-shadow: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: var(--select-arrow);
  background-repeat: no-repeat;
  background-position: left 12px center;
  padding-inline-end: 12px;
  padding-inline-start: 32px;
  cursor: pointer;
}
.field input[type="number"] { font-family: var(--mono); direction: ltr; text-align: start; }
.field input:focus, .field select:focus,
select:focus, input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="date"]:focus {
  border-color: var(--accent); outline: none;
  background-color: var(--panel);
  box-shadow: var(--focus-ring);
}
/* غیرفعال حالا با *پرشدن* گفته می‌شود نه فقط با کم‌رنگی: چون ورودی فعال
   سفید است، خاکستری‌شدنِ زمینه خودش پیام «این را نمی‌شود عوض کرد» را
   می‌دهد و دیگر لازم نیست فقط به شفافیت تکیه کرد. */
.field input:disabled, .field select:disabled,
select:disabled, input:disabled {
  opacity: 0.6; cursor: not-allowed;
  background-color: var(--panel-2); border-color: var(--line);
}

/* فیلد بولی: تیک و برچسب کنار هم، توضیح زیر هر دو. با `flex` ساده، توضیح
   هم هم‌ردیف برچسب می‌نشست و ستون برچسب آن‌قدر باریک می‌شد که «یونانی در
   مرحله یک» کلمه‌به‌کلمه می‌شکست. */
.field.row {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 6px 10px;
}
.field.row input[type="checkbox"], input[type="checkbox"], input[type="radio"] {
  width: 17px; height: 17px; margin: 0;
  accent-color: var(--accent); cursor: pointer;
  border-radius: 4px;
}
.field.row .hint { grid-column: 1 / -1; }
.unit { font-size: var(--fs-sm); color: var(--muted); }

.num-ctl { display: flex; align-items: center; gap: 6px; }
.num-ctl input[type="number"] { text-align: center; }
.step-btn {
  flex: none; width: 30px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 50%;
  font: inherit; font-size: var(--fs-xl); line-height: 1; cursor: pointer;
  box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}
.step-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.step-btn:active { background: var(--accent-soft); border-color: var(--accent-active); color: var(--accent-active); }
.step-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.num-range { width: 100%; margin-top: 4px; accent-color: var(--accent); cursor: pointer; }

.scan-progress {
  height: 5px; margin-top: 12px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--line-soft);
}
.scan-progress-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: var(--radius-pill);
  transition: width var(--transition-med), opacity var(--transition-med);
}

/* ——— سلسله‌مراتب دکمه‌ها ———
   هر دکمه قرص است، در هر اندازه. این تنها شکلی است که با هیچ باکس دیگری
   اشتباه نمی‌شود: در این صفحه ده‌ها مستطیل گردِ ۸ و ۱۲ پیکسلی هست — کارت،
   ورودی، سلول، پنل — و دکمهٔ گردگوشه یکی از همان‌ها به نظر می‌رسید. قرص،
   با یک نگاه، «این را می‌شود زد» را می‌گوید.

   بازخورد از **رنگ** می‌آید نه از حرکت. پیش از این هر دکمه در `hover` یک
   پیکسل بالا می‌پرید و `filter: brightness()` می‌خورد. دو ایراد داشت: در
   نوار ابزارِ پرِ دکمه، بالاپریدن‌های پیاپی صفحه را می‌لرزاند؛ و
   `brightness` رنگ را از توکن جدا می‌کرد، پس در پوسته تیره «روشن‌تر» را
   با ضرب در عددی می‌ساخت که برای پوسته روشن تنظیم شده بود. حالا هر حالت
   توکن خودش را دارد و در هر دو پوسته درست است. */
.btn, .primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h, 40px);
  background: var(--accent);
  color: var(--on-accent); border: 1px solid transparent; border-radius: var(--radius-control);
  padding: 8px 18px; font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
  box-shadow: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.btn:hover, .primary:hover { background: var(--accent-hover); }
.btn:active, .primary:active { background: var(--accent-active); }
.btn:disabled, .primary:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }

/* دکمه دوم: کادرِ هم‌رنگِ دکمه اول، نه خاکستری. کادر خاکستری دکمه دوم را
   به «باکس غیرفعال» نزدیک می‌کرد؛ با کادر بنفش پیداست که هم‌خانوادهٔ دکمه
   اصلی است، فقط یک پله پایین‌تر در تأکید. */
.btn.sec, .btn-sec {
  background: var(--panel); color: var(--accent-ink); border: 1px solid var(--accent);
  box-shadow: none;
}
.btn.sec:hover, .btn-sec:hover { background: var(--accent-soft); border-color: var(--accent-hover); }
.btn.sec:active, .btn-sec:active { background: var(--accent-soft); border-color: var(--accent-active); color: var(--accent-active); }
.btn.sec:disabled, .btn-sec:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn.danger, .btn.destructive, .btn-danger {
  background: var(--loss-soft); color: var(--loss); border: 1px solid color-mix(in srgb, var(--loss) 40%, transparent);
  box-shadow: none;
}
/* «خطرناک» تا پیش از فشار، پرنشده است: پرکردنِ قرمز پیش از قصدِ کاربر،
   یک دکمهٔ عادی را شبیه هشدارِ در حال وقوع نشان می‌داد. */
.btn.danger:hover, .btn.destructive:hover, .btn-danger:hover {
  background: var(--loss); color: var(--on-accent); border-color: var(--loss);
}
.btn.danger:active, .btn.destructive:active, .btn-danger:active { background: var(--loss); color: var(--on-accent); border-color: color-mix(in srgb, var(--loss) 60%, var(--ink)); }

.ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-h-sm, 34px);
  background: var(--panel); border: 1px solid var(--line); color: var(--ink-2);
  box-shadow: none;
  border-radius: var(--radius-control); padding: 6px 12px; font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.ghost:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.ghost:active { background: var(--accent-soft); border-color: var(--accent-active); color: var(--accent-active); }
.ghost[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; font-weight: 800; }
.ghost:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.ghost:disabled:hover { border-color: var(--line); color: var(--ink-2); background: var(--panel); }
.bar { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; }
.bar .sp { flex: 1; }
.saved { color: var(--gain); font-size: var(--fs-md); font-weight: 700; }

/* ——— جدول ——— */
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
table.data th, table.data td {
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft); text-align: start; white-space: nowrap;
}
table.data thead th {
  position: sticky; top: 46px; z-index: 2;
  background: color-mix(in srgb, var(--panel-2) 94%, transparent);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  font-size: var(--fs-sm); font-weight: 800; color: var(--ink-2);
  border-bottom: 2px solid var(--line); cursor: pointer; user-select: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}
table.data thead th:hover { color: var(--accent); }
table.data tbody tr { transition: background var(--transition-fast); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, var(--panel-2)); }
/* راه‌راه ملایم ردیف‌ها. ردیف‌های نشان‌دار (نزدیک‌به‌پول، نامزد انتخاب‌شده)
   صریحاً کنار گذاشته می‌شوند: اولویت `tr:nth-child(even)` با `tr.atm` دقیقاً
   برابر است، پس اگر فقط به ترتیب نوشتن تکیه کنیم، هر جابه‌جایی قواعد همان
   باگ دورهای ۲۴ و ۴۶ را بی‌صدا برمی‌گرداند. */
table.data tbody tr:nth-child(even):not(.atm):not(.picked) { background: color-mix(in srgb, var(--panel-2) 35%, transparent); }
table.data tbody tr:nth-child(even):not(.atm):not(.picked):hover { background: color-mix(in srgb, var(--accent) 6%, var(--panel-2)); }
/* ردیف نزدیک‌به‌پول دیده‌بان زنجیره (chain.mjs) قبلاً با style این‌لاین رنگ
   می‌گرفت که همیشه بر :hover بالا می‌زد — هاور روی همان ردیف هیچ بازخوردی
   نداشت، برخلاف بقیه ردیف‌های همان جدول. کلاس با اولویت برابر :hover را
   شکست نمی‌دهد. */
table.data tbody tr.atm { background: var(--accent-soft); }
table.data tbody tr.atm:hover { background: var(--panel-2); }
/* نامزد انتخاب‌شده جدول مقایسه رول (roll.mjs) — همان مشکل ردیف نزدیک‌به‌پول
   دور ۲۴، این‌بار پیش‌گیرانه با کلاس نه style این‌لاین. */
table.data tbody tr.picked { background: var(--accent-soft); }
table.data tbody tr.picked:hover { background: var(--panel-2); }

/* ردیف برجسته با فلش بالا/پایین (table.mjs) — .tbl-body خودش tabindex="0"
   دارد، این فقط می‌گوید صفحه‌کلید الان کدام ردیف را می‌بیند. همان نشانه
   inset که فهرست کناری (rail) برای برجستگی صفحه‌کلیدش دارد. */
table.data tbody tr[data-kbd-active="1"] { box-shadow: inset 0 0 0 1px var(--accent); }
table.data td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }

.skel-row td { padding: 7px 8px; }
.skel-bar {
  display: block; height: 12px; border-radius: 3px; background: var(--line-soft);
  animation: pulse 1.4s ease-in-out infinite;
}
.skel-row:nth-child(2n) .skel-bar { animation-delay: .15s; }
@media (prefers-reduced-motion: reduce) { .skel-bar { animation: none; opacity: .6; } }
.scroll { overflow: auto; max-height: 62vh; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
/* همان مشکل tbl-body: این جدول‌ها (دفتر بازه‌ها، رول، زنجیره، فهرست موقعیت‌ها)
   قاب پیمایش خودشان را دارند، نه کل صفحه. top:46px قاعده عمومی برای سرستونی
   است که زیر نوار بالای صفحه می‌چسبد؛ اینجا همان ۴۶ پیکسل سرستون را داخل قاب
   پایین می‌انداخت و ردیف اول زیرش گم می‌شد. */
.scroll table.data thead th { top: 0; }
/* دیده‌بان زنجیره دو ردیف سرستون دارد (گروه خرید/فروش، بعد برچسب ستون‌ها).
   اگر هر th مستقل بچسبد، هر دو ردیف روی هم سعی می‌کنند در همان top:0 بنشینند —
   موقع اسکرول ردیف دوم روی اول می‌نشیند و ردیف اول از دید گم می‌شود. چسباندن
   خودِ thead هر دو ردیف را یک واحد نگه می‌دارد. */
#chain thead { position: sticky; top: 0; z-index: 2; }
#chain thead th { position: static; }

/* ——— سورت و جابه‌جایی ستون روی جدول‌های رشته‌ای ———
   نشانگر جهت با ::after می‌آید نه با نویسه داخل متن، تا خروجی اکسل که متن
   خانه را می‌خواند، «▲» را با عنوان ستون قاطی نکند. */
table.history-table th[data-col],
table.rolling-table th[data-col] { cursor: pointer; user-select: none; position: relative; }
table th[data-col]:hover { color: var(--accent); }
table th[data-col]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table th[aria-sort="ascending"]::after { content: "▲"; margin-inline-start: 5px; font-size: var(--fs-2xs); color: var(--accent); }
table th[aria-sort="descending"]::after { content: "▼"; margin-inline-start: 5px; font-size: var(--fs-2xs); color: var(--accent); }
table th.th-dragging { opacity: .45; }
table th.th-drop { box-shadow: inset 3px 0 var(--accent); }

.tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: 700; border: 1px solid transparent;
}
.tag.gain { background: var(--gain-soft); color: var(--gain); border-color: color-mix(in srgb, var(--gain) 35%, transparent); }
.tag.loss { background: var(--loss-soft); color: var(--loss); border-color: color-mix(in srgb, var(--loss) 35%, transparent); }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.tag.flat { background: var(--panel-2); color: var(--muted); border-color: var(--line); }

/* ——— نوار تشخیص ——— */
.funnel { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; background: var(--panel-2); margin: 10px 0 8px; border: 1px solid var(--line-soft); }
.funnel span { display: block; height: 100%; }
.funnel-key { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.funnel-key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-inline-end: 4px; }

/* ——— بازهٔ تحلیل: کنترل مشترک همهٔ تب‌های تاریخ‌دار ——— */
/* در تب تحلیل تاریخی، کنترل داخل یک شبکهٔ چهارستونی می‌نشیند و در یک
   ستونِ ۱۵۰ پیکسلی له می‌شد: جمله ستونی و باریک می‌شد و تقویم‌ها روی هم
   می‌افتادند. کنترل، تصمیمِ کلِ صفحه است نه یک فیلد کنارِ بقیه. */
.history-control-grid > .history-range-cell { grid-column: 1 / -1; }
.hrange { margin: var(--space-3, 12px) 0 0; }
.hrange-row { display: flex; align-items: end; gap: var(--space-3, 12px); flex-wrap: wrap; }
.hrange-pick { display: flex; flex-direction: column; gap: var(--space-1, 4px); min-width: 0; }
.hrange-span {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--panel-2); color: var(--ink-2);
  font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.hrange-cals { display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; margin-top: var(--space-3, 12px); }
.hrange-cals[hidden] { display: none; }
.hrange-direct { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-3); flex-basis: 100%; }
.hrange-direct label { display: grid; gap: var(--space-1); flex: 1 1 160px; }
.hrange-direct-error { flex-basis: 100%; color: var(--loss); }
.hrange-market-details { margin-top: var(--space-3); color: var(--muted); }
.gap-data { margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius); }
.gap-data p { margin: var(--space-2) 0; }
.gap-data summary { cursor: pointer; }
.hrange-cal { display: flex; flex-direction: column; gap: var(--space-1, 4px); flex: 1 1 280px; min-width: 0; }
.hrange-note { margin: var(--space-2, 8px) 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.hrange-note[data-error] { color: var(--loss); }
/* پیشرفتِ ساخت لحن هشدار دارد نه خطا: چیزی خراب نشده، فقط هنوز تمام
   نشده — و کاربر باید فرق این دو را از رنگ بفهمد. */
.hrange-build {
  margin: var(--space-2, 8px) 0 0; padding: 7px 11px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--warn-soft); color: var(--warn);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}
.hrange-build[hidden] { display: none; }

/* ——— دفتر قراردادها: دو تقویم کنار هم ———
   `[hidden]` **بعد** از `display` می‌آید و باید بیاید: `display:flex` روی
   خودِ عنصر، `display:none`ِ ضمنیِ `[hidden]` را می‌بازد و فیلدِ پنهان‌شده
   همچنان دیده می‌شود. دقیقاً همین در حالت «یک روز» رخ داد. */
.or-when { display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; margin-top: var(--space-4, 16px); }
.or-cal { display: flex; flex-direction: column; gap: var(--space-1, 4px); flex: 1 1 280px; min-width: 0; }
.or-cal[hidden] { display: none; }

/* ——— بلوک دستورِ ترمینال ———
   تنها جای برنامه که کاربر باید چیزی را عیناً کپی کند، پس شکستنِ خط و
   انتخابِ متن مهم‌ترند تا زیبایی. */
.code-block {
  margin: 10px 0 0; padding: 12px 14px;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow-x: auto;
  font-family: var(--mono); font-size: var(--fs-sm); line-height: var(--lh-normal);
  color: var(--ink-2); white-space: pre; user-select: all;
}

/* ——— شاخص‌های کلیدی ——— */
.kpis { display: grid; gap: var(--space-3, 12px); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); margin-bottom: var(--space-4, 16px); }
.kpi {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-lg); padding: 14px 16px;
  box-shadow: var(--shadow-2xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.kpi:hover { box-shadow: var(--shadow-md); }
/* مرز رنگی سمت شروع، همان جهت سود/زیان کارت را از فاصله چشم می‌رساند،
   بی‌آنکه رنگ‌آمیزی کل کارت ادعای اجرا یا داده کیفی دیگر را رنگ کند. */
.kpi:has(.v.gain) { border-inline-start-color: var(--gain); }
.kpi:has(.v.loss) { border-inline-start-color: var(--loss); }
.kpi .k { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.kpi .v { font-family: var(--mono); font-size: var(--fs-3xl); font-weight: 900; font-variant-numeric: tabular-nums; direction: ltr; line-height: 1.3; }
.kpi .v.gain { color: var(--gain); }
.kpi .v.loss { color: var(--loss); }
.kpi .s { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }

/* ——— نمودار بازده: امضای صفحه ——— */
.payoff { width: 100%; height: auto; display: block; }
.payoff .grid-line { stroke: var(--line-soft); stroke-width: 1; }
.payoff .axis { stroke: var(--line); stroke-width: 1; }
.payoff .zero { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 3 3; }
.payoff .curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.payoff .fill-gain { fill: var(--gain); opacity: .13; }
.payoff .fill-loss { fill: var(--loss); opacity: .13; }
.payoff .strike { stroke: var(--accent-2); stroke-width: 1; stroke-dasharray: 2 4; }
.payoff .be { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.payoff .spot { stroke: var(--warn); stroke-width: 1.5; }
.payoff .spot-pnl { fill: var(--warn); stroke: var(--panel); stroke-width: 2.5; }
.payoff text.axis-title { fill: var(--ink); font-size: var(--fs-chart-lg); font-weight: 800; }
.payoff path.curve-today { fill: none; stroke: var(--accent-2); stroke-width: 1.75; stroke-dasharray: 5 4; stroke-linejoin: round; }
.curve2-legend line.curve-today { stroke: var(--accent-2); stroke-width: 1.75; stroke-dasharray: 5 4; }
.curve2-legend line.curve { stroke: var(--accent); stroke-width: 2.5; }

/* منحنی‌های اضافه، هم‌زمان روی یک نمودار — نامزدهای دیگر رول روی نمودار
   تفاضل، یا موقعیت‌های مقایسه‌ای روی نمودار بازده. رنگ و الگوی خط‌چین هر دو
   جدا، چون شناسه هرگز فقط رنگ نیست — legend اسم را هم می‌گوید. */
.payoff path.curve-extra1 { fill: none; stroke: var(--cmp1); stroke-width: 1.75; stroke-dasharray: 4 3; opacity: .85; }
.payoff path.curve-extra2 { fill: none; stroke: var(--cmp2); stroke-width: 1.75; stroke-dasharray: 1 3; stroke-linecap: round; opacity: .85; }
.payoff path.curve-extra3 { fill: none; stroke: var(--cmp3); stroke-width: 1.75; stroke-dasharray: 7 3; opacity: .85; }
.payoff path.curve-extra4 { fill: none; stroke: var(--cmp4); stroke-width: 1.75; stroke-dasharray: 2 2 6 2; opacity: .85; }
.curve2-legend line.curve-extra1 { stroke: var(--cmp1); stroke-width: 1.75; stroke-dasharray: 4 3; }
.curve2-legend line.curve-extra2 { stroke: var(--cmp2); stroke-width: 1.75; stroke-dasharray: 1 3; }
.curve2-legend line.curve-extra3 { stroke: var(--cmp3); stroke-width: 1.75; stroke-dasharray: 7 3; }
.curve2-legend line.curve-extra4 { stroke: var(--cmp4); stroke-width: 1.75; stroke-dasharray: 2 2 6 2; }

/* فهرست تیک موقعیت‌های مقایسه‌ای زیر نمودار بازده */
.cmp-list { display: flex; flex-direction: column; gap: 2px; max-height: 150px; overflow-y: auto; }
.cmp-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); padding: 4px 6px; border-radius: 4px; cursor: pointer; }
.cmp-row:hover { background: var(--panel-2); }
.cmp-row input { accent-color: var(--accent); flex: none; }
.cmp-row input:disabled { accent-color: var(--muted); }
.cmp-row:has(input:disabled) { color: var(--muted); cursor: not-allowed; }
/* عدد محور باید چپ‌به‌راست خوانده شود، وگرنه در صفحه راست‌به‌چپ علامت منفی
   به انتهای عدد می‌پرد و «−۴۰M» به شکل «۴۰M−» دیده می‌شود. */
/* برچسب محور «−۴۱ م» هم رقم دارد هم واژه فارسی. جهت پاراگراف چپ‌به‌راست
   لازم است تا نشانه منفی جلوی عدد بماند، ولی «bidi-override» واژه فارسی را
   حرف‌به‌حرف وارونه می‌کرد. «isolate» جهت را می‌بندد بی‌آنکه دستور دوسویه
   داخل رشته را زیر پا بگذارد. */
.payoff text { font-family: var(--mono); font-size: var(--fs-chart); font-weight: 700; fill: var(--ink-2); direction: ltr; unicode-bidi: isolate; }
.payoff text.lbl { font-family: var(--sans); font-size: var(--fs-chart); font-weight: 700; unicode-bidi: plaintext; }
.payoff text.lbl.axis-title { fill: var(--ink); font-size: var(--fs-axis); font-weight: 800; }
.payoff text.strike-lbl { font-family: var(--mono); font-size: var(--fs-chart); font-weight: 800; fill: var(--accent); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; }

/* ——— نمودار تعامل‌پذیر ——— */
.chart-box { position: relative; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); overflow: hidden; }
.chart-canvas { cursor: crosshair; touch-action: none; }
.chart-canvas.dragging { cursor: grabbing; }
.chart-canvas .payoff { user-select: none; }
.chart-tools {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  border-top: 1px solid var(--line); background: var(--panel-2);
  font-size: var(--fs-sm); color: var(--muted);
}
.chart-tools .sp { flex: 1; }
.chart-tools .ghost { padding: 2px 9px; }
.chart-read b { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
.chart-hover-tooltip {
  position: absolute; z-index: 25; display: grid; gap: 6px; width: max-content; max-width: 260px;
  padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: var(--shadow-lg);
  color: var(--ink-2); font-size: var(--fs-xs); line-height: var(--lh-normal); pointer-events: none;
}
.chart-hover-tooltip[hidden] { display: none; }
.chart-hover-tooltip span { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chart-hover-tooltip b { font-family: var(--mono); color: var(--ink); direction: ltr; unicode-bidi: isolate; }
.chart-hover-tooltip b.gain { color: var(--gain); }
.chart-hover-tooltip b.loss { color: var(--loss); }
.payoff .cur-x { stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.payoff .cur-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 2; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 5px 13px; font-size: var(--fs-sm); cursor: pointer; color: var(--ink-2); font: inherit; font-weight: 700;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.chip:hover:not([aria-pressed="true"]) { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.chip:active:not([aria-pressed="true"]) { border-color: var(--accent-active); color: var(--accent-active); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: none; }

dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin: 0; font-size: var(--fs-lg); }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }

/* ——— جدول مجازی‌سازی‌شده ———
   سرستون باید روی لبه بالای همین قاب پیمایش بچسبد. قاعده عمومی
   `table.data thead th` مشخصیت بالاتری داشت و top آن ۴۶ پیکسل بود — همان
   فاصله نوار بالای صفحه — پس سرستون این جدول ۴۶ پیکسل پایین‌تر می‌افتاد و
   دو ردیف اول زیرش پنهان می‌شد. انتخابگر اینجا با نام جدول بالا برده شده
   تا مشخصیتش قطعی باشد. */
.tbl-wrap { border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; }
.tbl-body table.data { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl-body table.data thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--panel-2); padding: 7px 8px;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink-2);
  white-space: nowrap; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
}
.tbl-body table.data thead th:hover { color: var(--accent); background: var(--panel); }
.tbl-body table.data thead th[data-sorted="desc"]::after { content: " ↓"; color: var(--accent); }
.tbl-body table.data thead th[data-sorted="asc"]::after { content: " ↑"; color: var(--accent); }
.tbl-body table.data thead th[data-sorted="desc"],
.tbl-body table.data thead th[data-sorted="asc"] { color: var(--accent); }
.tbl-body { overflow: auto; height: 56vh; position: relative; }

/* ——— دفتر خطاها ——— */
.log-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.log-filter { display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted); }
.log-filter select {
  min-height: 34px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background-color: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-sm);
}
.log-actions button { cursor: pointer; }
.log-actions button:hover { border-color: var(--accent); color: var(--accent); }
/* پشتهٔ خطا باید کامل خوانده شود، پس پیچیده نمی‌شود و خودش پیمایش می‌گیرد. */
.log-detail pre {
  margin: 6px 0 0; padding: 8px 10px; max-height: 220px; overflow: auto;
  border-radius: var(--radius-sm); background: var(--panel-2);
  font-family: var(--mono); font-size: var(--fs-xs); direction: ltr; text-align: start;
  white-space: pre-wrap; word-break: break-word;
}
.log-detail summary { cursor: pointer; color: var(--accent); font-size: var(--fs-sm); }

/* نوار خروجی — خواهرِ ظرف جدول، نه داخلش: داخلِ ظرف با هر بازنویسی
   `innerHTML` پاک می‌شود. */
.export-bar { display: flex; justify-content: flex-start; margin: 0 0 6px; }
.export-btn { cursor: pointer; font-size: var(--fs-sm); padding: 5px 12px; }
.export-btn:hover { border-color: var(--accent); color: var(--accent); }
.tbl-export-btn { cursor: pointer; }
.tbl-export-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ——— پنل سناریو، حساسیت، و عمق دفتر ——— */
.scen-card { margin: 16px 0; }
.scen-note { color: var(--muted); font-size: var(--fs-sm); }
.scen-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.scen-controls label, .scen-units {
  display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--muted);
}
.scen-controls select, .scen-controls input, .scen-units input {
  min-height: 36px; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background-color: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-sm);
}
.scen-units input { width: 108px; }
/* دو ردیف کنترل حساسیت: بالا شکل جدول، پایین فرض‌های بازار. */
.scen-row { margin-top: 10px; }
.scen-row + .scen-row { padding-top: 10px; border-top: 1px dashed var(--line); }
.scen-controls input[type="number"] { width: 104px; }
.scen-controls button { min-height: 36px; cursor: pointer; align-self: end; }
.scen-hint { color: var(--muted); font-weight: 400; }
/* «دستی» یعنی این فرض دیگر فرضِ بازار نیست — باید به چشم بیاید. */
.warn-ink { color: var(--warn); }
.scen-caption { caption-side: top; text-align: start; padding: 8px 10px; color: var(--muted); font-size: var(--fs-sm); }
/* ردیف «قیمت امروز» مرزِ خوانش است: بالای آن سناریوهای بدتر، پایینش بهترها. */
.history-table tr.scen-spot > td { background: var(--accent-soft); font-weight: 700; }
/* خانه‌های ماتریس حساسیت — شدت از --weight که جاوااسکریپت روی خود خانه می‌گذارد */
.scen-matrix td.gain { background: color-mix(in srgb, var(--gain) calc(var(--weight, 0) * 40%), transparent); }
.scen-matrix td.loss { background: color-mix(in srgb, var(--loss) calc(var(--weight, 0) * 40%), transparent); }
.scen-sum { margin: 0 0 10px; font-size: var(--fs-md); color: var(--ink-2); line-height: 1.9; }
.history-table tr.scen-short > td { background: var(--warn-soft); }

/* دکمهٔ انتقال به بک‌تست، در پنل جزئیات یک ترکیب زنده. */
.detail-actions { display: flex; gap: 8px; margin: 12px 0 4px; }
.handoff-btn { cursor: pointer; font-weight: 700; }
.handoff-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ——— نمودار میله‌ای رصد بازار ——— */
.market-chart-card { margin: 16px 0; }
.market-metric { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.market-metric select {
  min-height: 34px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background-color: var(--panel); color: var(--ink); font: inherit; font-size: var(--fs-sm);
}
.market-bars { display: grid; gap: 7px; margin-top: 10px; }
.market-bar { display: grid; grid-template-columns: 128px 1fr 116px; gap: 12px; align-items: center; }
.market-bar > b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-md); font-weight: 700;
}
.market-bar > i { display: block; height: 15px; border-radius: var(--radius-pill); background: var(--panel-2); overflow: hidden; }
.market-bar-fill { display: flex; height: 100%; border-radius: var(--radius-pill); overflow: hidden; }
.market-bar-fill .seg-call { background: var(--gain); }
.market-bar-fill .seg-put { background: var(--loss); }
.market-bar-fill .seg-one { background: var(--accent); }
.market-bar-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr;
  font-size: var(--fs-sm); color: var(--ink-2); text-align: start;
}

/* ——— طیف رنگی ردیف بر پایهٔ ستون مرتب‌شده ———
   شدت از `--heat-t` می‌آید که جاوااسکریپت روی خود ردیف می‌گذارد. رنگ در CSS
   می‌ماند تا با پوسته عوض شود، و عدد در جاوااسکریپت تا با داده. */
/* ── ردیفِ داغ: یک ته‌رنگ، نه یک تختهٔ رنگی ───────────────────────────
   رنگِ سراسریِ ردیف با رنگِ سلولِ داغ روی هم می‌افتاد و متن را می‌بلعید.
   حالا هر دو لایه به یک‌چهارمِ شدتِ قبلی رفته‌اند: ترتیب همچنان دیده
   می‌شود، ولی هیچ متنی روی رنگی که کنتراستش را نمی‌دانیم نمی‌نشیند. */
.tbl-body tr[data-heat] { background: color-mix(in srgb, var(--accent) calc(var(--heat-t) * 6%), transparent); }
.tbl-body tr[data-heat="gain"] { background: color-mix(in srgb, var(--gain) calc(var(--heat-t) * 6%), transparent); }
.tbl-body tr[data-heat="loss"] { background: color-mix(in srgb, var(--loss) calc(var(--heat-t) * 6%), transparent); }
.tbl-body tr[data-heat]:hover { background: var(--panel-2); }

/* راهنمای طیف. بدون آن رنگ فقط تزیین است و کسی نمی‌داند کم یعنی چه. */
.heat-legend { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); }
.heat-legend b { color: var(--ink-2); font-weight: 700; }
.heat-legend i { font-style: normal; font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; }
.heat-legend .heat-ramp {
  width: 92px; height: 10px; border-radius: var(--radius-pill); border: 1px solid var(--line-soft);
  background: linear-gradient(to left, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
}
.heat-legend[data-kind="gain"] .heat-ramp { background: linear-gradient(to left, color-mix(in srgb, var(--gain) 28%, transparent), transparent); }
.heat-legend[data-kind="loss"] .heat-ramp { background: linear-gradient(to left, color-mix(in srgb, var(--loss) 28%, transparent), transparent); }
/* واگرا: منفی سرخ، صفر بی‌رنگ، مثبت سبز — و در راست‌به‌چپ کمینه سمت راست است */
.heat-legend[data-kind="div"] .heat-ramp {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--loss) 28%, transparent), transparent 50%,
    color-mix(in srgb, var(--gain) 28%, transparent));
}
.heat-legend .heat-lo { color: var(--muted); }

/* ——— نوار ابزار جدول و انتخابگر ستون ——— */
/* ——— جابه‌جایی ستون با کشیدن ——— */
.tbl-body table.data thead th { cursor: grab; user-select: none; }
.tbl-body table.data thead th:active { cursor: grabbing; }
.tbl-body table.data thead th.dragging { opacity: .4; }
/* مقصد انداختن، روی لبه رو به کاربر خط می‌گیرد تا معلوم باشد کجا می‌نشیند */
.tbl-body table.data thead th.drop-into {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tbl-tools {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: var(--panel);
  font-size: var(--fs-xs); color: var(--muted);
}
.tbl-tools .sp { flex: 1; }
.tbl-cols-btn b { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; }

.col-panel { border-bottom: 1px solid var(--line); background: var(--panel); padding: 10px 12px 12px; }
.col-panel-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-sm); color: var(--muted); margin-bottom: 10px;
}
.col-panel-head .sp { flex: 1; }
.col-search {
  min-width: 220px; min-height: 34px; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel-2); color: var(--ink); font: inherit;
}
.col-search:focus { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); border-color: var(--accent); }
.col-groups { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.col-group h5 {
  margin: 0 0 4px; font-size: var(--fs-2xs); font-weight: 700;
  color: var(--muted);
}
.col-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 4px; border-radius: 4px; font-size: var(--fs-md); cursor: pointer;
}
.col-opt:hover { background: var(--panel-2); }
.col-opt[hidden], .col-group[hidden] { display: none; }
.col-opt input { accent-color: var(--accent); }
.col-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl-body td { padding: 7px 10px; font-size: var(--fs-sm); white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
/* رنگ سلول عددی منفی — قبلاً style این‌لاین بود که همیشه بر .stale td
   (زیر) برنده می‌شد، دقیقاً همان مشکل دورهای ۲۴/۳۰؛ اینجا با کلاس، سلول
   زیانِ همان ردیفی که کاربر باید کمتر از همه بهش اعتماد کند (مظنه کهنه)
   درست خاکستری می‌ماند، نه قرمز عادی. */
/* عدد منفی، هرجای برنامه. رنگ نشانه است نه تزیین: علامت منها در عدد فارسی
   ریز است و در یک ستون پرِ عدد اصلاً به چشم نمی‌آید.

   `signTone()` از قدیم کلاس loss/gain را روی ده‌ها سلول می‌گذاشت، ولی هیچ
   قاعدهٔ سراسری‌ای آن را رنگ نمی‌کرد — فقط چند قاعدهٔ موضعی (جدول تاریخچه،
   ماتریس همبستگی). یعنی بیشتر آن کلاس‌ها بی‌اثر بودند.
   دامنه عمداً به سلول و مقدار محدود است: `.loss` روی کارت و نوار و برچسب
   هم به کار می‌رود و آن‌جا رنگِ حاشیه است، نه رنگِ متن. */
.neg, td.neg, dd.neg { color: var(--loss); }
td.loss, dd.loss { color: var(--loss); }
td.gain, dd.gain { color: var(--gain); }
.tbl-body tr { height: 27px; cursor: pointer; }
.tbl-body tr:hover td { background: var(--panel-2) !important; }
.tbl-body tr.unexec td { opacity: .55; font-style: italic; }
.tbl-body tr.risky td:first-child { box-shadow: inset 3px 0 0 var(--loss); }
.tbl-body tr.soon td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.tbl-body tr.stale td { color: var(--muted); }
/* نشان «تغییر کرد» اسکن پیوسته (table.mjs → changedIds): ردیفی که مبنای
   رتبه‌بندی‌اش نسبت به تیک قبلی عوض شده، یک‌بار پررنگ می‌شود و محو می‌رود —
   بدون این، تغییر رتبه وسط اسکن زنده گم می‌شد. */
@keyframes row-flash { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
.tbl-body tr.flash { animation: row-flash 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) { .tbl-body tr.flash { animation: none; background: var(--accent-soft); } }
.tbl-foot {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-top: 1px solid var(--line); background: var(--panel-2);
  font-size: var(--fs-sm); color: var(--muted);
}
.tbl-foot .sp { flex: 1; }

/* ——— انتخابگر نماد ——— */
.picker { display: grid; grid-template-columns: 1fr; gap: 8px; }
.picker-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.picker-tools input[type="search"] {
  flex: 1; min-width: 140px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 8px 12px; font: inherit; font-size: var(--fs-lg);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.picker-tools input[type="search"]:focus {
  border-color: var(--accent); outline: none;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 4%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.picker-list {
  max-height: 260px; overflow: auto; border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--panel-2);
}
.picker-row {
  display: grid; grid-template-columns: 22px 1fr auto auto auto; gap: 8px; align-items: center;
  padding: 5px 8px; font-size: var(--fs-md); border-bottom: 1px solid var(--line-soft); cursor: pointer;
  transition: background var(--transition-fast);
}
.picker-row:hover { background: var(--panel); }
.picker-row[aria-selected="true"] { background: var(--accent-soft); }
.picker-row input { accent-color: var(--accent); }
.picker-row .m { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); direction: ltr; }
.picker-sum { font-size: var(--fs-md); color: var(--muted); }

/* جعبه خالی، با دلیل. تا وقتی این نبود، فهرست بی‌نماد یک مستطیل ساکت بود. */
.picker-empty { padding: 14px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.9; }
.picker-empty-act { display: flex; gap: 8px; padding: 0 14px 14px; }
.picker-empty-act .ghost { font-size: var(--fs-sm); text-decoration: none; }

/* ——— پانل جزئیات ——— */
.detail { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .detail { grid-template-columns: 1fr; } }
.mini { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.mini td, .mini th { padding: 3px 6px; border-bottom: 1px solid var(--line-soft); text-align: start; }
.mini th { color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
/* خانهٔ عددی «direction: ltr» می‌گیرد تا رقم و علامت منفی درست بنشینند —
   ولی همان با «text-align: start» یعنی چسبیدن به چپ، در حالی که سرستونِ
   راست‌به‌چپ به راست می‌چسبد. نتیجه‌اش عددی بود که زیر ستون خودش نبود.
   «end» در بافت چپ‌به‌راست همان لبهٔ راست است — یعنی همان لبهٔ سرستون. */
.mini td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.split { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* راهنمای نوار تشخیص — وقتی جدول خالی است، شمردن کافی نیست */
.funnel-hint {
  margin: 8px 0 0; padding: 8px 10px;
  background: var(--warn-soft); border: 1px solid var(--warn);
  border-radius: var(--radius-md); font-size: var(--fs-md); color: var(--ink-2); line-height: 1.7;
}

/* ——— کاهش حرکت ———
   بلوک‌های موضعی بالاتر فقط سه انیمیشن مشخص را خاموش می‌کنند. این قاعده
   عمومی، ترنزیشن‌ها و جابه‌جایی‌های تازه (دکمه، چیپ، کارت، KPI) را هم
   می‌پوشاند. آخر فایل است تا بر همه بالا بزند. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .primary:hover, .ghost:hover, .chip:hover, .step-btn:hover,
  .kpi:hover, .btn:active, .primary:active, .ghost:active { transform: none; }
}

/* ——— مرجع فرمول‌ها ———
   رابطه‌ها با فونت فارسی نوشته می‌شوند، نه تک‌عرض. وسوسه‌اش هست — ستون‌بندی
   با فونت تک‌عرض مرتب‌تر درمی‌آید — ولی این رابطه‌ها بیشترشان کلمه فارسی‌اند
   («میانه»، «پریمیوم»، «اندازه») و فونت تک‌عرض لاتین حرف فارسی ندارد؛
   مرورگر حرف‌به‌حرف به فونت دیگری می‌افتد و «میانه» به «میا نه» می‌شکند.
   ستون‌بندی با `white-space: pre` نگه داشته می‌شود، که برای این رابطه‌ها کافی
   است. عدد تک‌عرض هم اینجا لازم نیست، چون عددی در رابطه‌ها نیست. */
.fx-head { margin-top: 30px; }
.fx-list { display: grid; gap: 16px; }
.fx-item { padding: 13px 15px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--panel-2); }
.fx-item h4 { margin: 0 0 9px; font-size: var(--fs-lg); }
.fx-expr {
  margin: 0; padding: 11px 13px; overflow-x: auto;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--panel);
  font-family: var(--sans); font-size: var(--fs-sm); line-height: var(--lh-loose);
  direction: rtl; text-align: start; white-space: pre; tab-size: 2;
}
.fx-note { margin: 9px 0 0; color: var(--muted); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.fx-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 11px; }
.fx-keys > span { color: var(--muted); font-size: var(--fs-xs); }
.fx-key {
  padding: 3px 10px; border: 1px dashed var(--line); border-radius: var(--radius-pill);
  background: var(--panel); color: var(--accent); font: inherit; font-size: var(--fs-xs); cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.fx-key:hover { background: var(--accent-soft); border-style: solid; border-color: var(--accent); }

.fx-rows { width: 100%; border-collapse: collapse; }
.fx-rows th, .fx-rows td { padding: 7px 9px; border-bottom: 1px solid var(--line-soft); text-align: start; vertical-align: top; }
.fx-rows th { width: 30%; min-width: 140px; color: var(--ink-2); font-weight: 700; font-size: var(--fs-sm); }
.fx-rows td { color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-normal); }
.fx-rows tr:last-child th, .fx-rows tr:last-child td { border-bottom: 0; }

.fx-strategies { display: grid; gap: 20px; }
.fx-strategy-group > h4 { margin: 0 0 9px; color: var(--accent); font-size: var(--fs-md); }
.fx-strategy { border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--panel-2); margin-bottom: 7px; }
.fx-strategy > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; cursor: pointer; user-select: none; list-style: none;
}
.fx-strategy > summary::-webkit-details-marker { display: none; }
.fx-strategy > summary:hover { color: var(--accent); }
.fx-strategy > summary span { color: var(--muted); font-size: var(--fs-xs); }
.fx-strategy[open] > summary { border-bottom: 1px solid var(--line-soft); }
.fx-strategy-body { padding: 11px 13px 13px; }
.fx-capital { margin: 0 0 11px; font-size: var(--fs-sm); }
.fx-capital > span { color: var(--muted); margin-inline-end: 7px; }
.fx-walk { margin: 12px 0 0; padding-inline-start: 20px; color: var(--ink-2); font-size: var(--fs-sm); line-height: var(--lh-loose); }
.fx-walk li { margin-bottom: 5px; }
.fx-watch {
  margin: 12px 0 0; padding: 9px 11px;
  border-inline-start: 3px solid var(--warn); border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--ink-2);
  font-size: var(--fs-sm); line-height: var(--lh-normal);
}

/* پرش از نام یک عدد در فرمول به خود کنترلش: بدون این نشانه کوتاه، در فرم
   بلند تنظیمات معلوم نمی‌ماند مقصد کدام بود. */
.field.flash { animation: fx-flash 1.4s var(--transition-med); border-radius: var(--radius-sm); }
@keyframes fx-flash {
  0%, 55% { background: var(--accent-soft); box-shadow: 0 0 0 5px var(--accent-soft); }
  100% { background: transparent; box-shadow: none; }
}

/* سررسیدی که سقف موقعیت بازش پر است: دیده می‌شود ولی انتخاب‌شدنی نیست.
   پنهان‌کردنش گیج‌کننده بود («سررسیدم کو؟») و انتخاب‌پذیر گذاشتنش یعنی
   عددی ساخته شود که کاربر نمی‌تواند اجرایش کند. */
.expiry-blocked { opacity: .62; cursor: not-allowed; }
.expiry-blocked small { color: var(--warn); }

/* ——— نوار فرض‌های منحنی امروز ———
   منحنی سررسید با هیچ فرضی تکان نمی‌خورد؛ منحنی امروز ارزش‌گذاری مدل است و
   سه ورودی دارد. این نوار همان سه را دست کاربر می‌دهد تا به‌جای پرسیدن
   «اگر…» بتواند ببیندش. */
.payoff-assume {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px;
  margin-bottom: 10px; padding: 9px 12px;
  border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  background: var(--panel-2);
}
.payoff-assume[data-dirty="1"] { border-color: var(--warn); background: var(--warn-soft); }
.assume-row { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 200px; }
.assume-name { flex: none; color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.assume-row input[type="range"] { flex: 1; min-width: 70px; accent-color: var(--accent); }
.assume-val {
  flex: none; min-width: 62px; text-align: start;
  font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.payoff-assume [data-assume-reset] { flex: none; }

/* ——— نگاه باز ——— */
.open-view-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 22px;
  margin-bottom: var(--space-4, 16px); padding: 22px 24px; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel-2));
  box-shadow: var(--shadow-sm);
}
.open-view-hero h1 { margin: 0 0 6px; font-size: var(--fs-3xl); font-weight: 800; }
.open-view-hero p { margin: 0; color: var(--muted); line-height: var(--lh-normal); }
.open-view-hero > span { flex: none; padding: 6px 14px; border: 1px solid var(--accent); border-radius: var(--radius-pill); color: var(--accent); background: var(--accent-soft); font-weight: 800; font-size: var(--fs-sm); }
.open-view-controls { margin-bottom: var(--space-4, 16px); }
.open-view-form { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: var(--space-3, 12px); align-items: end; }
.open-view-form label { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.open-view-form select { width: 100%; min-height: var(--control-h, 40px); padding: 8px 12px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.open-view-form button { min-height: var(--control-h, 40px); }
.open-view-model-settings { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(520px, 2fr) auto; gap: 14px; align-items: end; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.open-view-model-settings h3 { margin: 2px 0 4px; }
.open-view-model-settings small { color: var(--muted); }
.open-view-model-grid { display: grid; grid-template-columns: repeat(5, minmax(105px, 1fr)); gap: 9px; }
.open-view-model-grid label { display: grid; gap: 5px; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; }
.open-view-model-grid input, .open-view-model-grid select { width: 100%; min-height: 40px; padding: 6px 9px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.open-view-model-grid input { direction: ltr; text-align: start; font-family: var(--mono); }
.open-view-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.open-view-chart { min-height: 245px; min-width: 0; }
.open-view-chart-stage { position: relative; min-width: 0; }
.open-view-chart-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.open-view-chart-stage svg text { fill: var(--ink-2); font-family: inherit; font-size: var(--fs-chart); font-weight: 700; direction: ltr; }
.open-view-chart-stage path { stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.open-view-chart-bar { opacity: .72; }
.open-view-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 8px; color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; }
.open-view-chart-legend span, .open-view-chart-legend button { display: inline-flex; align-items: center; gap: 6px; }
.open-view-chart-legend button { padding: 4px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: inherit; font: inherit; cursor: pointer; }
.open-view-chart-legend button:hover { border-color: var(--accent); }
.open-view-chart-legend button.is-off { opacity: .48; text-decoration: line-through; }
.open-view-chart-legend button small { color: var(--muted); font-size: var(--fs-xs); }
.open-view-chart-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--series); }
/* سری هم‌فامِ خط‌چین: نشان راهنما هم خط‌چین می‌شود تا میانگین ۵روزه از
   سری پایه‌اش جدا دیده شود، بدون اینکه رنگ تازه‌ای مصرف کند. */
.open-view-chart-legend .is-dashed i { width: 16px; height: 4px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--series) 0 6px, transparent 6px 9px); }
.open-view-wide-card { grid-column: 1 / -1; }
.open-view-daily-table { min-width: 1680px; }
.open-view-daily-table tbody tr { cursor: pointer; }
.open-view-daily-table tbody tr[aria-selected="true"] { box-shadow: inset 3px 0 var(--accent); background: var(--accent-soft); }
.open-view-daily-table td small, .open-view-contract-table td small { display: block; margin-top: 4px; color: var(--muted); }
.open-view-row-action { color: var(--accent); font-weight: 800; white-space: nowrap; }
.open-view-day-detail { margin-top: 16px; scroll-margin-top: 16px; }
.open-view-formula-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 20px; }
.open-view-formula { display: grid; gap: 7px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.open-view-formula.gain { border-inline-start: 3px solid var(--gain); }
.open-view-formula.loss { border-inline-start: 3px solid var(--loss); }
.open-view-formula.cmp1 { border-inline-start: 3px solid var(--cmp1); }
.open-view-formula.cmp4 { border-inline-start: 3px solid var(--cmp4); }
.open-view-formula > span, .open-view-formula > small { color: var(--muted); }
.open-view-formula > b { font-size: var(--fs-xl); }
.open-view-formula code { overflow-wrap: anywhere; color: var(--ink-2); font-family: var(--sans); font-size: var(--fs-sm); }
.open-view-contract-head { margin-top: 10px; }
.open-view-contract-head p { margin: 4px 0 0; color: var(--muted); }
.open-view-contract-table { min-width: 1480px; }
.open-view-contract-table td { position: relative; }
.open-view-weight-cell { isolation: isolate; font-weight: 800; }
.open-view-weight-cell::before { content: ""; position: absolute; z-index: -1; inset-block: 4px; inset-inline-start: 3px; width: var(--weight); max-width: calc(100% - 6px); border-radius: 7px; background: var(--weight-tone); opacity: .18; }
.open-view-contract-call .open-view-weight-cell { --weight-tone: var(--gain); }
.open-view-contract-put .open-view-weight-cell { --weight-tone: var(--loss); }
.open-view-contract-call .open-view-iv-weight { --weight-tone: var(--cmp1); }
.open-view-contract-put .open-view-iv-weight { --weight-tone: var(--cmp4); }
.open-view-intraday-controls { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, .4fr) minmax(140px, .35fr) auto minmax(190px, .5fr); gap: 12px; align-items: end; margin: 20px 0 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.open-view-intraday-controls h3 { margin: 2px 0 0; }
.open-view-intraday-controls label { display: grid; gap: 5px; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.open-view-intraday-controls select { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.open-view-day-detail .open-view-chart-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }

@media (max-width: 900px) {
  .open-view-hero { align-items: flex-start; flex-direction: column; }
  .open-view-form { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .open-view-chart-grid { grid-template-columns: 1fr; }
  .open-view-model-settings { grid-template-columns: 1fr; }
  .open-view-model-grid { grid-template-columns: repeat(3, minmax(105px, 1fr)); }
  .open-view-formula-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-view-intraday-controls { grid-template-columns: 1fr 1fr; }
  .open-view-wide-card { grid-column: auto; }
}

@media (max-width: 560px) {
  .open-view-form { grid-template-columns: 1fr; }
  .open-view-model-grid { grid-template-columns: 1fr 1fr; }
  .open-view-formula-grid, .open-view-intraday-controls { grid-template-columns: 1fr; }
}

/* ═══════════════════ رصد لحظه‌ای بازار ═══════════════════ */
.live-market-controls { display: grid; gap: 12px; margin-bottom: 16px; }
.live-market-control-head, .live-market-pick-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; }
.live-market-control-head { justify-content: space-between; }
.live-market-control-head > label { display: grid; gap: 5px; min-width: min(420px, 100%); color: var(--ink-2); font-size: var(--fs-sm); font-weight: 800; }
.live-market-control-head select, .live-market-pick-tools input { min-height: 42px; padding: 7px 10px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.live-market-pick-tools input { min-width: 220px; }
.live-market-pick-tools > span { margin-inline-start: auto; color: var(--muted); font-size: var(--fs-sm); font-weight: 700; }
.live-market-model { padding: 10px 12px; border-inline-start: 3px solid var(--cmp1); border-radius: 9px; background: var(--panel-2); color: var(--ink-2); font-size: var(--fs-sm); }
.live-market-contracts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 260px; overflow: auto; padding: 4px; }
.live-market-contract { display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); cursor: pointer; }
.live-market-contract:has(input:checked) { border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); background: var(--accent-soft); }
.live-market-contract input { margin-top: 3px; accent-color: var(--accent); }
.live-market-contract span { display: grid; gap: 3px; min-width: 0; }
.live-market-contract b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-market-contract small { color: var(--muted); font-size: var(--fs-xs); line-height: 1.55; }
.live-market-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0; }
.live-market-chart-grid > section { min-width: 0; }
.live-market-wide { grid-column: 1 / -1; }
.live-market-chart-stage { position: relative; min-width: 0; }
.live-market-chart-stage svg { display: block; width: 100%; height: auto; overflow: visible; }
.live-market-chart-stage svg text { fill: var(--ink-2); font-family: inherit; font-size: var(--fs-chart); font-weight: 700; direction: ltr; }
.live-market-grid-line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.live-market-series { fill: none; stroke: var(--series); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.live-market-series-end { fill: var(--series); stroke: var(--panel); stroke-width: 2; vector-effect: non-scaling-stroke; }
.live-market-cursor { stroke: var(--warn); stroke-width: 1.4; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.live-market-legend { display: flex; flex-wrap: wrap; gap: 7px 13px; margin: 4px 0 8px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700; }
.live-market-legend span { display: inline-flex; align-items: center; gap: 5px; }
.live-market-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--series); }
.live-market-tip {
  position: absolute; z-index: 25; inset-block-start: 10px; display: grid; gap: 5px;
  min-width: 160px; max-width: 270px; padding: 10px 14px; transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: var(--shadow-lg); color: var(--ink-2); font-size: var(--fs-xs); pointer-events: none;
}
.live-market-tip b { color: var(--ink); font-family: var(--mono); }
.live-dashboard-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: var(--space-4, 16px); padding: 22px 24px; border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--panel)), var(--panel-2));
  box-shadow: var(--shadow-sm);
}
.live-dashboard-hero h1 { margin: 0 0 6px; font-size: var(--fs-3xl); font-weight: 800; }
.live-dashboard-hero p { max-width: 760px; margin: 0; color: var(--muted); line-height: var(--lh-normal); }
.live-dashboard-hero > div:last-child { display: grid; justify-items: end; gap: 8px; min-width: 220px; }
.live-dashboard-hero span { color: var(--muted); font-size: var(--fs-sm); text-align: end; }
.market-pulse-shell { margin: 18px 0; }
.pulse-head { align-items: end; margin-bottom: 12px; }
.pulse-head h2 { margin: 2px 0 0; }
.pulse-head > span { color: var(--muted); font-size: var(--fs-sm); }
.market-pulse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pulse-card { min-width: 0; overflow: hidden; }
.pulse-card > .section-head { align-items: flex-start; margin-bottom: 8px; }
.pulse-card > .section-head h3 { margin: 0; }
.pulse-card > .section-head span { max-width: 48%; color: var(--muted); font-size: var(--fs-xs); text-align: end; }
.pulse-wide { grid-column: 1 / -1; }
.pulse-price-range { display: grid; gap: 10px; padding-top: 6px; }
.pulse-range-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-xs); font-weight: 800; direction: ltr; }
.pulse-range-axis b { color: var(--ink-2); }
.pulse-range-field { position: relative; height: 116px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: linear-gradient(90deg, color-mix(in srgb, var(--loss) 17%, var(--panel)), var(--panel-2) 46%, var(--panel-2) 54%, color-mix(in srgb, var(--gain) 17%, var(--panel))); direction: ltr; }
.pulse-range-zero { position: absolute; inset-block: 0; left: 50%; width: 1px; background: var(--line-strong); }
.pulse-range-field button { position: absolute; top: calc(14px + var(--range-lane) * 23px); left: var(--range-at); width: 18px; height: 18px; padding: 0; transform: translateX(-50%); border: 3px solid var(--panel); border-radius: 50%; background: var(--muted); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--motion-fast), box-shadow var(--motion-fast); }
.pulse-range-field button.gain { background: var(--gain); }
.pulse-range-field button.loss { background: var(--loss); }
.pulse-range-field button:hover, .pulse-range-field button:focus-visible, .pulse-range-field button[aria-pressed="true"] { z-index: 2; transform: translateX(-50%) scale(1.35); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-md); outline: none; }
.pulse-range-readout { display: grid; grid-template-columns: minmax(70px, 1fr) auto auto auto; align-items: center; gap: 8px 14px; min-height: 42px; padding: 9px 11px; border-radius: var(--radius-md); background: var(--panel-2); color: var(--ink-2); font-size: var(--fs-xs); }
.pulse-range-readout b { color: var(--ink); font-size: var(--fs-md); }
.pulse-range-readout strong { font-size: var(--fs-lg); direction: ltr; }
.pulse-range-readout strong.gain { color: var(--gain); }
.pulse-range-readout strong.loss { color: var(--loss); }
.pulse-intensity-summary, .pulse-oi-sides { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.pulse-oi-sides { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.pulse-stat { display: grid; gap: 4px; padding: 10px 11px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--panel-2); }
.pulse-stat small, .pulse-stat span { color: var(--muted); font-size: var(--fs-xs); }
.pulse-stat strong { overflow: hidden; color: var(--ink); font-size: var(--fs-lg); text-overflow: ellipsis; white-space: nowrap; }
.pulse-stat.gain span { color: var(--gain); }
.pulse-stat.loss span { color: var(--loss); }
.pulse-stat.call { border-block-start: 3px solid var(--call); }
.pulse-stat.put { border-block-start: 3px solid var(--put); }
.pulse-oi-balance { display: grid; gap: 13px; padding-top: 8px; }
.pulse-oi-rail { display: flex; width: 100%; height: 18px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line-soft); direction: ltr; }
.pulse-oi-rail i { display: block; width: var(--share); min-width: 0; transition: width var(--motion-normal); }
.pulse-oi-rail .call { background: var(--call); }
.pulse-oi-rail .put { background: var(--put); }
.lmm-map-card, .lmm-summary, .lmm-explorer { margin-bottom: var(--space-4, 16px); }
.lmm-head { align-items: flex-start; gap: 18px; }
.lmm-head h2, .lmm-head p { margin-bottom: 0; }
.lmm-head p { max-width: 650px; color: var(--muted); line-height: 1.8; }
.lmm-map-controls { display: grid; justify-items: end; gap: 9px; max-width: 720px; }
.lmm-map-modes, .lmm-metrics, .lmm-range-sort { display: flex; flex-wrap: wrap; gap: 6px; }
.lmm-map-modes button, .lmm-metrics button, .lmm-range-sort button {
  min-height: 36px; padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--panel-2); color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 800; cursor: pointer;
}
.lmm-map-modes button[aria-pressed="true"], .lmm-metrics button[aria-pressed="true"], .lmm-range-sort button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent); color: var(--on-accent);
}
.lmm-map { height: 520px; min-height: 360px; margin-top: 12px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--panel-2); }
.lmm-map > .empty-note { display: grid; place-items: center; height: 100%; margin: 0; }
.lmm-map-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 10px; color: var(--muted); font-size: var(--fs-xs); }
.lmm-map-foot span { display: inline-flex; align-items: center; gap: 5px; }
.lmm-map-foot i { width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.lmm-map-foot i.gain { background: var(--gain); }
.lmm-map-foot i.loss { background: var(--loss); }
.lmm-map-foot b { margin-inline-start: auto; color: var(--ink-2); }
.lmm-map-foot b span.gain, .lmm-stat.gain strong { color: var(--gain); }
.lmm-map-foot b span.loss, .lmm-stat.loss strong { color: var(--loss); }
.lmm-summary > .section-head { margin-bottom: 12px; }
.lmm-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 9px; }
.lmm-stat-grid.compact { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
.lmm-stat { display: grid; gap: 5px; min-width: 0; padding: 12px 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--panel-2); }
.lmm-stat small { color: var(--muted); font-size: var(--fs-xs); font-weight: 800; }
.lmm-stat strong { overflow: hidden; color: var(--ink); font-size: var(--fs-lg); text-overflow: ellipsis; white-space: nowrap; }
.lmm-stat span { color: var(--ink-2); font-size: var(--fs-xs); }
.lmm-explorer > .section-head { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.lmm-underlying { margin-top: 12px; }
.lmm-expiry-step, .lmm-chain-step, .lmm-day-range { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.lmm-step-head, .lmm-scope-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.lmm-step-head h3, .lmm-scope-title h3 { margin: 0; }
.lmm-step-head span, .lmm-scope-title > span { color: var(--muted); font-size: var(--fs-sm); }
.lmm-expiries { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.lmm-expiries button { display: grid; flex: 0 0 auto; gap: 4px; min-width: 170px; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-2); color: var(--ink); text-align: start; cursor: pointer; }
.lmm-expiries button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -3px var(--accent); }
.lmm-expiries small { color: var(--muted); font-size: var(--fs-xs); }
.lmm-expiry-info { margin-top: 12px; }
.lmm-chain-step .tbl-body { max-height: 520px; }
.lmm-contract-detail { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.lmm-contract-prompt { margin: 0; padding: 14px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-ink); }
.lmm-range-sort { justify-content: end; }
.lmm-range-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; color: var(--muted); font-size: var(--fs-xs); }
.lmm-range-legend span { display: inline-flex; align-items: center; gap: 7px; }
.lmm-range-legend i.rail { width: 26px; height: 2px; background: var(--muted); }
.lmm-range-legend i.body { width: 26px; height: 8px; border-radius: 4px; background: var(--accent); }
.lmm-range-legend i.last { width: 9px; height: 9px; border: 2px solid var(--on-accent); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.lmm-range-legend i.close { width: 8px; height: 8px; transform: rotate(45deg); background: var(--warn); }
.lmm-range-legend > small { margin-inline-start: auto; color: var(--muted); }
.lmm-range-list { display: grid; gap: 7px; max-height: 620px; overflow: auto; padding-inline-end: 4px; }
.lmm-range-list article { display: grid; grid-template-columns: minmax(170px, .7fr) minmax(310px, 1.6fr); gap: 6px 14px; align-items: center; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: linear-gradient(100deg, color-mix(in srgb, var(--panel-2) 94%, transparent), var(--panel)); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
.lmm-range-list article:hover, .lmm-range-list article:focus-within { border-color: var(--accent); box-shadow: var(--shadow-sm); opacity: 1; transform: translateY(-1px); }
.lmm-range-list article header { display: flex; align-items: center; justify-content: space-between; gap: 8px; grid-row: 1 / span 2; }
.lmm-range-list article header button { display: grid; gap: 3px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.lmm-range-list article header small { color: var(--muted); font-size: var(--fs-3xs); }
.lmm-range-list article header strong { color: var(--ink-2); font-size: var(--fs-xs); }
.lmm-range-stats { display: grid; justify-items: end; gap: 3px; white-space: nowrap; font-size: var(--fs-3xs); }
.lmm-range-stats .gain, .lmm-range-popover .gain { color: var(--gain); }
.lmm-range-stats .loss, .lmm-range-popover .loss { color: var(--loss); }
.lmm-range-track { position: relative; display: block; width: auto; height: 30px; margin-inline: 9px; padding: 0; border: 0; background: none; color: inherit; cursor: crosshair; }
.lmm-range-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: var(--radius-sm); }
.lmm-range-track i { position: absolute; display: block; }
.lmm-range-rail { inset-inline: 0; top: 14px; height: 3px; border-radius: 2px; background: var(--line-strong); opacity: .75; }
.lmm-range-body { inset-inline-start: var(--range-left); top: 7px; width: var(--range-width); height: 17px; border: 2px solid color-mix(in srgb, var(--on-accent) 70%, transparent); border-radius: 3px; background: var(--accent); box-shadow: var(--shadow-xs); }
.lmm-range-list article.gain .lmm-range-body { background: var(--gain); }
.lmm-range-list article.loss .lmm-range-body { background: var(--loss); }
.lmm-range-first, .lmm-range-last { top: 7px; inset-inline-start: var(--range-at); width: 3px; height: 17px; transform: translateX(50%); background: var(--ink); }
.lmm-range-last { width: 11px; height: 11px; top: 10px; border: 2px solid var(--on-accent); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--panel); }
.lmm-range-close { top: 10px; inset-inline-start: var(--range-at); width: 10px; height: 10px; transform: translateX(50%) rotate(45deg); background: var(--warn); box-shadow: 0 0 0 2px var(--panel); }
.lmm-range-popover { position: absolute; z-index: 8; inset-block-end: calc(100% + 8px); left: var(--tip-at, 50%); display: grid; gap: 4px; min-width: 265px; padding: 9px 11px; transform: translateX(-50%) translateY(5px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-lg); color: var(--ink-2); font-size: var(--fs-xs); text-align: start; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--motion-fast), transform var(--motion-fast); }
.lmm-range-popover b { color: var(--ink); }
.lmm-range-popover small { color: var(--muted); }
.lmm-range-track:hover .lmm-range-popover, .lmm-range-track:focus-visible .lmm-range-popover, .lmm-range-track[aria-expanded="true"] .lmm-range-popover { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.lmm-range-list article footer { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; color: var(--muted); font-size: var(--fs-3xs); text-align: center; }
.decision-advanced { margin-top: 18px; }
.decision-advanced > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-2xs); cursor: pointer; list-style: none; }
.decision-advanced > summary::-webkit-details-marker { display: none; }
.decision-advanced > summary span { display: grid; gap: 4px; }
.decision-advanced > summary small { color: var(--muted); }
.decision-advanced > summary i { color: var(--accent); font-style: normal; font-weight: 900; }
.decision-advanced[open] > summary { margin-bottom: 14px; border-color: var(--accent); background: var(--accent-soft); }
.decision-advanced[open] > summary i { font-size: 0; }
.decision-advanced[open] > summary i::after { content: 'بستن'; font-size: var(--fs-sm); }
.decision-advanced-body { min-width: 0; }
.live-dashboard-kpis { margin-bottom: var(--space-4, 16px); }
.live-dashboard-overview { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(440px, 1.15fr); gap: 14px; }
.live-breadth-donut { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(210px, 1fr); align-items: center; gap: 12px; }
.live-breadth-donut svg { width: 100%; max-height: 240px; overflow: visible; }
.live-breadth-track, .live-breadth-segment { fill: none; stroke-width: 18; }
.live-breadth-track { stroke: var(--line); }
.live-breadth-segment { stroke: var(--segment); stroke-dasharray: var(--dash); stroke-dashoffset: var(--offset); stroke-linecap: butt; transform: rotate(-90deg); transform-origin: center; }
.live-breadth-donut svg text:first-of-type { fill: var(--ink); font-size: var(--fs-3xl); font-weight: 900; }
.live-breadth-donut svg text:last-of-type { fill: var(--muted); font-size: var(--fs-xs); font-weight: 700; }
.live-breadth-donut > div { display: grid; gap: 8px; }
.live-breadth-donut span { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; color: var(--ink-2); }
.live-breadth-donut span i { width: 9px; height: 9px; border-radius: 50%; background: var(--segment); }
.live-breadth-donut span strong { color: var(--ink); }
.live-breadth-donut span small { min-width: 66px; color: var(--muted); text-align: end; }
.live-breadth-bars { display: grid; gap: 14px; padding-top: 8px; }
.live-breadth-bars article { display: grid; gap: 7px; }
.live-breadth-bars header, .live-breadth-bars footer { display: flex; justify-content: space-between; gap: 10px; }
.live-breadth-bars header strong { color: var(--ink); }
.live-breadth-bars footer { color: var(--muted); font-size: var(--fs-xs); }
.live-breadth-bars article > i, .live-mover-bars article > i { display: block; height: 9px; overflow: hidden; border-radius: 999px; background: var(--line-soft); }
.live-breadth-bars article > i b, .live-mover-bars article > i b { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: var(--accent); }
.live-breadth-bars article.gain > i b, .live-mover-bars article.gain > i b { background: var(--gain); }
.live-breadth-bars article.loss > i b, .live-mover-bars article.loss > i b { background: var(--loss); }
.live-breadth-bars article.warn > i b { background: var(--warn); }
.live-dashboard-charts { align-items: stretch; }
.live-dashboard-charts > .card { display: flex; flex-direction: column; }
.live-dashboard-charts > .card > div:last-child { flex: 1; }
.live-mover-bars { display: grid; gap: 8px; padding-top: 5px; }
.live-mover-bars article { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(100px, 2fr) auto auto; align-items: center; gap: 8px; }
.live-mover-bars article span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 800; }
.live-mover-bars article strong { min-width: 58px; text-align: end; }
.live-mover-bars article small { color: var(--muted); }
.live-market-picker { display: grid; gap: 14px; margin-top: 14px; }
.live-market-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.live-base-search { display: grid; gap: 5px; max-width: 340px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 800; }
.live-base-search input { min-height: 42px; padding: 7px 10px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); font: inherit; }
.live-base-rail, .live-expiry-rail { display: flex; gap: 8px; overflow: auto; padding: 3px 2px 8px; scrollbar-width: thin; }
.live-base-rail button, .live-expiry-rail button { display: grid; flex: 0 0 auto; gap: 3px; min-width: 150px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-2); color: var(--ink); text-align: start; cursor: pointer; }
.live-base-rail button[aria-pressed="true"], .live-expiry-rail button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 -3px var(--accent); }
.live-base-rail small, .live-expiry-rail small { color: var(--muted); font-size: var(--fs-xs); }
.live-selection-step { display: grid; gap: 8px; }
.live-selection-step > span { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 900; }
.live-contract-table tr[data-contract] { cursor: pointer; }
.live-contract-table tr[data-contract][aria-selected="true"] { background: var(--accent-soft); box-shadow: inset -3px 0 var(--accent); }
.live-contract-table td:first-child b, .live-contract-table td:first-child small { display: block; }
.live-contract-table td:first-child small { margin-top: 3px; color: var(--muted); font-size: var(--fs-xs); direction: ltr; }

/* مجموعه داشبورد تصمیم‌گیری */
.decision-toolbar { display: grid; gap: 14px; margin-bottom: 14px; }
.decision-refresh-control { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(170px, auto); align-items: center; gap: 12px; }
.decision-refresh-control label { color: var(--ink-2); font-weight: 900; }
.decision-refresh-control input { width: 100%; accent-color: var(--accent); }
.decision-refresh-control output { color: var(--accent); font-weight: 900; text-align: end; }
.decision-scope-controls { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
.decision-scope-controls label { display: grid; gap: 5px; color: var(--muted); font-size: var(--fs-sm); font-weight: 800; }
.decision-scope-controls select { width: 100%; min-height: 42px; padding: 7px 9px; border: 1px solid var(--line-input); border-radius: var(--radius-sm); background-color: var(--panel); color: var(--ink); font: inherit; }
.decision-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; gap: 14px; direction: ltr; }
.decision-mode-rail, .decision-main { direction: rtl; }
.decision-mode-rail { position: sticky; top: 12px; display: grid; gap: 9px; }
.decision-mode-rail button {
  display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); color: var(--ink); text-align: start; box-shadow: var(--shadow-2xs); cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}
.decision-mode-rail button:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--shadow-xs); }
.decision-mode-rail button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 4px 0 var(--accent); font-weight: 800; }
.decision-mode-rail small { color: var(--muted); line-height: 1.6; }
.decision-mode-rail span { color: var(--accent); font-size: var(--fs-xs); font-weight: 900; }
.decision-mode > .section-head { margin-bottom: 12px; }
.decision-view-buttons { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
/* بیست کلید انتخاب نما. تا پیش از این جعبه خاکستری بودند و در شبکه‌ای که
   خودش پر از جعبه است گم می‌شدند؛ حالا قرص‌اند مثل هر کلید دیگر و کلید
   فعال پر می‌شود، نه اینکه فقط زیرش خط بیفتد — خطِ ۳ پیکسلیِ داخلی روی
   لبهٔ گرد بریده می‌شد و در ردیف پایین اصلاً دیده نمی‌شد. */
.decision-view-buttons button {
  min-height: var(--control-h, 40px); padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--panel); color: var(--ink-2); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-align: start; cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.decision-view-buttons button:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.decision-view-buttons button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 800; }
.decision-view-card { min-width: 0; min-height: 360px; }
.decision-table { min-width: 1500px; }
.decision-table td:nth-child(2) small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.decision-bars { display: grid; gap: 12px; }
.decision-bars article { display: grid; gap: 6px; }
.decision-bars header { display: flex; justify-content: space-between; gap: 12px; }
.decision-bars article > i { display: block; height: 11px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line-soft); }
.decision-bars article > i b { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: var(--series); }

/* ————— تابلوی اختیارهای پرمعامله ————— */
.decision-board-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 10px 0 14px; padding: 10px 12px; border: 1px solid var(--line-soft);
  border-radius: var(--radius-md); background: var(--panel-2); }
.decision-board-controls label { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.decision-board-controls .note { flex: 1 1 100%; margin: 0; }
.decision-side-switch { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.decision-side-switch button { border: 0; background: var(--panel); color: var(--ink-2);
  padding: 6px 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.decision-side-switch button + button { border-inline-start: 1px solid var(--line); }
.decision-side-switch button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* میله انباشته: کال و پوت روی یک میله، با فاصله ۲ پیکسلی زمینه بینشان تا
   دو بخش هم‌مرز به هم نچسبند و مرزشان دیده شود. */
.decision-stack { display: flex; gap: 2px; }
.decision-stack b { display: block; width: var(--bar); height: 100%; background: var(--series); border-radius: 3px; }
.decision-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: var(--fs-xs); color: var(--muted); }
.decision-legend span { display: inline-flex; align-items: center; gap: 6px; }
.decision-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--series); }
.decision-legend-marker i { width: 16px; height: 0; border-radius: 0; background: none;
  border-top: 2px dashed var(--muted); }
.decision-dot { fill: var(--series); fill-opacity: .75; stroke: var(--panel); stroke-width: 1.5; }

/* ————— گرمانما، نردبان اعمال و هیستوگرام ————— */
.decision-heatmap th[scope="row"] { text-align: start; white-space: nowrap; font-weight: 600; }
.decision-heatmap td { text-align: center; font-variant-numeric: tabular-nums; }

/* نردبان: کال از مرکز به یک سمت، پوت به سمت دیگر، و قیمت اعمال وسط. */
.decision-ladder { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.decision-ladder article { display: grid; grid-template-columns: 1fr 132px 1fr auto;
  align-items: center; gap: 8px; padding: 2px 4px; border-radius: var(--radius-sm); }
.decision-ladder article.is-atm { background: var(--accent-soft); }
.decision-ladder article > span { text-align: center; font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--ink-2); }
.decision-ladder article > span small { display: block; font-size: var(--fs-3xs); color: var(--accent); }
.decision-ladder .ladder-side { display: flex; justify-content: flex-end; height: 14px;
  background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.decision-ladder .ladder-put { justify-content: flex-start; }
.decision-ladder .ladder-side b { display: block; width: var(--bar); height: 100%; background: var(--series); }
.decision-ladder .ladder-value { font-size: var(--fs-3xs); color: var(--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums; }

.decision-histogram { display: flex; align-items: flex-end; gap: 4px; margin-top: 12px;
  min-height: 180px; overflow-x: auto; }
.decision-histogram article { display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 4px; min-width: 54px; flex: 1; }
.decision-histogram article > i { display: flex; align-items: flex-end; width: 100%; height: 140px; }
.decision-histogram article > i b { display: block; width: 100%; height: var(--bar);
  background: var(--bar-fill); border-radius: 4px 4px 0 0; }
.decision-histogram article > span { font-size: var(--fs-3xs); color: var(--muted);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.decision-histogram article > strong { font-size: var(--fs-xs); color: var(--ink-2); }
.decision-marker { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 4; }
.decision-bars small { color: var(--muted); font-size: var(--fs-xs); }
.decision-open-view .open-view-hero { display: none; }
.decision-open-view .open-view-controls { margin-top: 0; }

@media (max-width: 980px) {
  .market-pulse-grid { grid-template-columns: 1fr; }
  .pulse-wide { grid-column: auto; }
  .lmm-head { align-items: stretch; flex-direction: column; }
  .lmm-map-controls { justify-items: start; max-width: none; }
  .lmm-stat-grid, .lmm-stat-grid.compact { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .lmm-range-list article { grid-template-columns: 1fr; }
  .lmm-range-list article header { grid-row: auto; }
  .live-market-contracts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-market-chart-grid { grid-template-columns: 1fr; }
  .live-market-wide { grid-column: auto; }
  .live-dashboard-overview { grid-template-columns: 1fr; }
  .decision-shell { grid-template-columns: 1fr; }
  .decision-mode-rail { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .decision-view-buttons { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .decision-scope-controls { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
}

@media (max-width: 560px) {
  .pulse-head { align-items: flex-start; flex-direction: column; }
  .pulse-head > span, .pulse-card > .section-head span { max-width: none; text-align: start; }
  .pulse-range-readout { grid-template-columns: 1fr auto; }
  .pulse-range-readout span { grid-column: 1 / -1; }
  .pulse-intensity-summary, .pulse-oi-sides { grid-template-columns: 1fr 1fr; }
  .lmm-map { height: 430px; }
  .lmm-stat-grid, .lmm-stat-grid.compact { grid-template-columns: 1fr; }
  .lmm-map-foot b { width: 100%; margin-inline-start: 0; }
  .lmm-step-head, .lmm-scope-title { align-items: flex-start; flex-direction: column; }
  .lmm-range-list article { min-width: 570px; }
  .lmm-range-list { overflow: auto; }
  .live-market-contracts { grid-template-columns: 1fr; }
  .live-market-control-head > label, .live-market-pick-tools input { min-width: 100%; width: 100%; }
  .live-market-pick-tools > span { margin-inline-start: 0; width: 100%; }
  .live-dashboard-hero { align-items: stretch; flex-direction: column; padding: 16px; }
  .live-dashboard-hero > div:last-child { justify-items: stretch; min-width: 0; }
  .live-dashboard-hero span { text-align: start; }
  .live-breadth-donut { grid-template-columns: 1fr; }
  .live-mover-bars article { grid-template-columns: minmax(65px, 1fr) minmax(80px, 1.5fr) auto; }
  .live-mover-bars article small { display: none; }
  .decision-refresh-control, .decision-scope-controls, .decision-mode-rail, .decision-view-buttons { grid-template-columns: 1fr; }
}

/* ═══════════ آزمون همه استراتژی‌ها — صفحهٔ تب‌بندی‌شده ═══════════
   دکمه‌ها و کنترل‌ها عمداً کم‌جلوه‌اند: در صفحه‌ای که ده نمودار دارد، هر
   کنترلِ پررنگ یک رقیب برای داده است. رنگ فقط جایی می‌آید که خودِ عدد
   رنگ داشته باشد. */
.pb-panel { display: flex; flex-direction: column; gap: var(--space-5); }
.pb-panel[hidden] { display: none !important; }

/* عدسی جمع‌شونده: بسته که باشد یک نوار باریک است، نه یک کارت تمام‌قد.
   خلاصه روی خودِ نوار می‌ماند تا کاربر بدون بازکردنش بداند عددها روی چه
   مبنایی‌اند. */
.pb-lens { position: sticky; top: 0; z-index: 3; padding: 0; overflow: hidden; }
.pb-lens[data-open="false"] { box-shadow: var(--shadow-2xs); }
.pb-lens-toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%;
  padding: 6px var(--space-3); background: none; border: 0; cursor: pointer;
  font-size: var(--fs-xs); color: var(--muted); text-align: start; }
.pb-lens-toggle:hover { background: var(--panel-2); }
.pb-lens-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pb-lens-toggle b { flex: 1; font-weight: 600; color: var(--ink); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pb-lens-chip { padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-soft);
  color: var(--accent-ink); font-weight: 700; font-size: var(--fs-3xs); flex: none; }
/* پیکان کوچک — همان دکمهٔ «خیلی کوچک» که خواسته شده. */
.pb-lens-toggle i { flex: none; width: 14px; height: 14px; border-inline-end: 2px solid var(--muted);
  border-block-end: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease; }
.pb-lens[data-open="true"] .pb-lens-toggle i { transform: rotate(-135deg) translate(-3px, -3px); }
.pb-lens-body { padding: 0 var(--space-4) var(--space-4); }
.pb-lens-body[hidden] { display: none !important; }
.pb-lens-why { margin: 0 0 var(--space-3); }
.pb-lens-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.pb-lens-grid label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.pb-lens-grid select { height: var(--control-h-sm); }
.pb-lens-grid button { height: var(--control-h-sm); }

/* ظرف نمودار: ارتفاع صریح لازم است — ECharts از ظرفِ بی‌ارتفاع، بومِ صفر
   می‌سازد و بی‌صدا خالی درمی‌آید. */
.pb-chart { width: 100%; min-width: 0; height: 320px; }
/* دستهٔ درونیِ پنل سبد — همان چیدمان پنل، یک پله تودرتو. */
.pb-sub { display: flex; flex-direction: column; gap: var(--space-5); }
.pb-sub[hidden] { display: none !important; }
.pb-chart-none { display: none; }
.pb-chart-lg { height: 420px; }
.pb-chart-xl { height: 560px; }

.pb-inline-pick { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.pb-inline-pick select { height: var(--control-h-sm); min-width: 160px; }
.pb-toggle-row { display: flex; gap: var(--space-4); font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.pb-toggle-row label { display: flex; align-items: center; gap: 6px; }

.pb-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.pb-chip { padding: 4px 10px; border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; }
.pb-chip:hover { border-color: var(--line-input); color: var(--ink); }
.pb-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.pb-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.pb-weights { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pb-weight { display: grid; grid-template-columns: 1fr 120px 34px; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px solid var(--line-soft); }
.pb-weight span { display: flex; flex-direction: column; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.pb-weight small { font-weight: 400; color: var(--muted); font-size: var(--fs-2xs); }
.pb-weight b { text-align: end; font-variant-numeric: tabular-nums; color: var(--muted); }

.pb-basket-rows { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0; }
.pb-basket-row { display: grid; gap: var(--space-3); align-items: end;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) minmax(200px, 2fr) 110px auto; }
.pb-basket-row label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.pb-basket-row select, .pb-basket-row input { height: var(--control-h-sm); }
.pb-basket-row button { height: var(--control-h-sm); }

/* هشدارِ سطر و مجموع درصدها — پیش از فشردن دکمه، نه بعدش. */
/* تیک روشن/خاموشِ هر سطر سبد. */
.pb-basket-on { flex-direction: row !important; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.pb-basket-on input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: none; }
.pb-basket-row[data-off] { opacity: .55; }
.pb-basket-row[data-off] .pb-basket-on { opacity: 1; }
.pb-basket-warn { grid-column: 1 / -1; margin: 0; font-size: var(--fs-2xs); font-weight: 600; color: var(--warn); }
.pb-basket-warn[data-kind="over"], .pb-basket-warn[data-kind="zero"] { color: var(--loss); }
.pb-basket-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.pb-basket-tally { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2);
  margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.pb-basket-tally b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pb-basket-tally[data-tone="over"] b { color: var(--loss); }
.pb-basket-tally em { flex-basis: 100%; font-style: normal; color: var(--accent-ink); }

/* شش پله در هر جهت — رنگِ ردیف به عدد حساس است، نه فقط به علامتش. */
.pb-panel tr[data-tone="gain"][data-level="1"] { background: color-mix(in srgb, var(--gain) 4%, transparent); }
.pb-panel tr[data-tone="gain"][data-level="2"] { background: color-mix(in srgb, var(--gain) 8%, transparent); }
.pb-panel tr[data-tone="gain"][data-level="3"] { background: color-mix(in srgb, var(--gain) 13%, transparent); }
.pb-panel tr[data-tone="gain"][data-level="4"] { background: color-mix(in srgb, var(--gain) 19%, transparent); }
.pb-panel tr[data-tone="gain"][data-level="5"] { background: color-mix(in srgb, var(--gain) 26%, transparent); }
.pb-panel tr[data-tone="gain"][data-level="6"] { background: color-mix(in srgb, var(--gain) 34%, transparent); }
.pb-panel tr[data-tone="loss"][data-level="1"] { background: color-mix(in srgb, var(--loss) 4%, transparent); }
.pb-panel tr[data-tone="loss"][data-level="2"] { background: color-mix(in srgb, var(--loss) 8%, transparent); }
.pb-panel tr[data-tone="loss"][data-level="3"] { background: color-mix(in srgb, var(--loss) 13%, transparent); }
.pb-panel tr[data-tone="loss"][data-level="4"] { background: color-mix(in srgb, var(--loss) 19%, transparent); }
.pb-panel tr[data-tone="loss"][data-level="5"] { background: color-mix(in srgb, var(--loss) 26%, transparent); }
.pb-panel tr[data-tone="loss"][data-level="6"] { background: color-mix(in srgb, var(--loss) 34%, transparent); }
.pb-panel tr[data-tone="flat"] { background: var(--panel-2); }

@media (max-width: 900px) {
  .pb-chart { height: 260px; }
  .pb-chart-lg { height: 320px; }
  .pb-chart-xl { height: 420px; }
  .pb-basket-row { grid-template-columns: 1fr; }
  .pb-weight { grid-template-columns: 1fr 90px 30px; }
  .pb-lens { position: static; }
}

/* سرخط‌ها — هر کارت یک سؤال با جوابش و دلیلش. کلیک‌شونده، چون هر سرخط
   دروازهٔ همان استراتژی است. */
.pb-highlights { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pb-highlight { display: flex; flex-direction: column; gap: 3px; align-items: stretch; text-align: start;
  padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); cursor: pointer; }
.pb-highlight:hover { border-color: var(--accent); background: var(--accent-soft); }
.pb-highlight:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pb-highlight-label { font-size: var(--fs-3xs); font-weight: 700; color: var(--accent-ink);
  text-transform: none; letter-spacing: normal; }
.pb-highlight b { font-size: var(--fs-sm); color: var(--ink); }
.pb-highlight-value { font-size: var(--fs-2xs); color: var(--muted); }
.pb-highlight-value em { font-style: normal; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pb-highlight small { font-size: var(--fs-3xs); color: var(--muted); line-height: 1.5; }

/* توضیح یک‌خطیِ هر کارت — «این نمودار چه می‌گوید». بدون این، نمودارِ
   خوش‌ظاهر هم گنگ می‌ماند. */
.pb-hint { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--fs-xs); line-height: 1.7; }

/* دکمهٔ دفترچهٔ کامل — بالای عدسی، چون خروجیِ کلِ گزارش است نه یک جدول. */
.pb-workbook { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius-md); background: var(--panel); }
.pb-workbook[hidden] { display: none !important; }
.pb-workbook p { flex: 1; min-width: 240px; margin: 0; }

/* اجرای درون‌روزی — هزینه‌اش پیش از دکمه نوشته می‌شود، نه بعدش. */
.pb-grain-run { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.pb-grain-run[hidden] { display: none !important; }
.pb-grain-run p { flex: 1; min-width: 240px; margin: 0; }

/* کشوی جزئیات — از هر تبی باز می‌شود و جای کاربر را در همان تب نگه می‌دارد.
   پریدن به تب دیگر برای دیدن یک عدد، رشتهٔ فکر را پاره می‌کند. */
.pb-drawer { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; max-height: 62vh;
  display: flex; flex-direction: column; background: var(--panel);
  border-top: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.pb-drawer[hidden] { display: none !important; }
.pb-drawer-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line-soft); }
.pb-drawer-head b { font-size: var(--fs-sm); color: var(--ink); }
.pb-drawer-tabs { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.pb-drawer-tabs button { padding: 3px 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: 600; cursor: pointer; }
.pb-drawer-tabs button[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.pb-drawer-tabs button:focus-visible, .pb-drawer-head button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pb-drawer-body { overflow: auto; padding: var(--space-3) var(--space-4) var(--space-4); }
@media (max-width: 900px) { .pb-drawer { max-height: 74vh; } }

/* ═══════════════════════════════════════════════════════════════════════
   پوستهٔ «آزمون همه استراتژی‌ها» — تابلوی ابزار

   چرا یک پوستهٔ جداگانه و نه دست‌بردن در کنترل‌های سراسری: این صفحه
   چگالی‌اش با بقیهٔ برنامه فرق دارد — ده تب، سی نمودار و جدول‌های بلند
   در یک جا. آنچه اینجا لازم است (سطح‌های تخت، مرز مویی، عدد تک‌عرض،
   کنترل‌های قطعه‌ای) اگر سراسری شود، صفحه‌های ساده‌تر را شلوغ می‌کند.
   `.pb-skin` روی ریشهٔ همین تب می‌نشیند، پس ویژگی‌اش یک پله بالاتر از
   قاعده‌های پایه است و بی‌نیاز از `!important` بر آن‌ها می‌چربد.

   هیچ رنگ خامی اینجا نیست؛ همه از توکن می‌آید تا پوستهٔ روشن و تیره
   هر دو با یک تعریف کار کنند.
   ═══════════════════════════════════════════════════════════════════ */

/* ————————————————————————————————————————————————
   اجرای بی‌سقف: پیشرفت زنده و دکمهٔ توقف.
   سقف ترکیب برداشته شد، پس اجرا می‌تواند دقیقه‌ها طول بکشد. این دو، جای
   آن سقف‌اند: کاربر می‌بیند کجای کار است و خودش می‌بُرد.
   ———————————————————————————————————————————————— */
.pb-run-actions {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.pb-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: .82rem;
  color: var(--muted);
}

.pb-progress-track {
  flex: 1 1 200px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  overflow: hidden;
}

.pb-progress-track > b {
  display: block;
  height: 100%;
  width: var(--done, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--transition-med);
}

.pb-progress > span { font-variant-numeric: tabular-nums; }

button.ghost.danger { color: var(--loss); border-color: color-mix(in srgb, var(--loss) 35%, transparent); }
button.ghost.danger:hover:not(:disabled) { background: var(--loss-soft); }

/* ————————————————————————————————————————————————
   گام یک، گام دو — تاریخ پیش از نماد پایه.
   فهرست نماد پایه از خودِ بازه ساخته می‌شود، پس بازه اول است. شمارهٔ گام
   این ترتیب را می‌گوید بی آنکه جمله‌ای لازم باشد، و کشویی نمادِ غیرفعال
   خودش دلیلِ غیرفعال‌بودنش را در متنش دارد.
   ———————————————————————————————————————————————— */
.step-first,
.step-next { position: relative; }

.step-first::before,
.step-next::before {
  content: attr(data-step);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -1.9rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
}

/* زیر ۹۰۰ پیکسل جای حاشیه نیست، پس شماره داخل جریان می‌آید. */
@media (max-width: 900px) {
  .step-first::before,
  .step-next::before { position: static; margin-bottom: var(--space-2); }
}

.step-next select:disabled {
  opacity: 1;
  color: var(--muted);
  background-color: var(--panel-2);
  cursor: not-allowed;
}

/* ————————————————————————————————————————————————
   رادار فاصله — پوستهٔ تب و اجزای مشترکِ فاصله.
   قاعده‌ها زیر `.gap-skin` بسته می‌شوند تا چگالیِ این صفحه به صفحه‌های
   ساده‌تر سرایت نکند؛ همان قاعده‌ای که `.pb-skin` دارد. استثنا سه چیزِ
   قابل‌استفادهٔ مجدد است — اسپارک‌لاین، نوار پرشدگی و کارت هشدار — که
   عمداً سراسری‌اند چون در تب‌های دیگر هم می‌نشینند.
   ———————————————————————————————————————————————— */

/* ——— اسپارک‌لاین: یک path، بی عمر و بی ناظر ——— */
.spark { display: block; overflow: visible; }
.spark-empty { color: var(--muted); font-variant-numeric: tabular-nums; }
.spark-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.spark.up .spark-line { stroke: var(--gain); }
.spark.down .spark-line { stroke: var(--loss); }
.spark.up .spark-dot { fill: var(--gain); }
.spark.down .spark-dot { fill: var(--loss); }
.spark-band { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; vector-effect: non-scaling-stroke; }

/* ——— نوار پرشدگی: عدد بالا، نوار زیرش ———
   پیش از این متن **روی** نوار می‌نشست و نوار پس‌زمینه‌اش بود. در عرض‌های
   واقعیِ جدول دو برچسبِ فارسی به هم می‌رسیدند و کلمه وسطش می‌شکست. حالا
   متن و نگاره دو سطرِ جدا هستند؛ هیچ متنی روی رنگِ متغیر نمی‌افتد. */
.gap-bar {
  display: grid;
  gap: 3px;
  min-width: 96px;
  font-variant-numeric: tabular-nums;
}
.gap-bar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2); min-width: 0;
}
.gap-bar-head b { flex: none; color: var(--ink); font-weight: 600; font-size: var(--fs-2xs); }
/* متنِ دوم اول کوتاه می‌شود، نه عدد. `min-width: 0` لازم است وگرنه آیتمِ
   فلکس به عرضِ محتوایش می‌ماند و به‌جای سه‌نقطه، از جعبه بیرون می‌زند. */
.gap-bar-head i {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  font-size: var(--fs-3xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gap-bar > s {
  display: block;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  text-decoration: none;
}
.gap-bar > s > i {
  display: block;
  width: var(--fill, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--transition-med);
}
.gap-bar.over > s > i { background: var(--warn); }
.gap-bar.over .gap-bar-head i { color: var(--warn); }
.gap-bar-empty { color: var(--muted); font-size: var(--fs-3xs); }

/* ——— کارت هشدار: کفِ تضمین‌شده وقتی اعلان مرورگر نیست ——— */
.gap-alarm-host {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-start: var(--space-5);
  z-index: 60;
  display: grid;
  gap: var(--space-2);
  width: min(340px, calc(100vw - 2 * var(--space-5)));
  pointer-events: none;
}
.gap-alarm-card {
  pointer-events: auto;
  position: relative;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--warn);
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  animation: gap-alarm-in var(--transition-smooth);
}
@keyframes gap-alarm-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gap-alarm-card { animation: none; }
}
.gap-alarm-card header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.gap-alarm-card header b { font-size: .9rem; }
.gap-alarm-card time { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.gap-alarm-card p { margin: var(--space-2) 0 0; font-size: .82rem; }
.gap-alarm-card p strong { color: var(--accent-ink); }
.gap-alarm-card small { display: block; margin-top: var(--space-1); color: var(--muted); font-size: .74rem; }
.gap-alarm-close {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.gap-alarm-close:hover { color: var(--ink); }

/* ——— پوستهٔ خودِ تب ——— */
.gap-skin {
  --gap-hair: color-mix(in srgb, var(--line) 70%, transparent);
  --gap-tile: color-mix(in srgb, var(--panel-2) 60%, transparent);
  display: grid;
  gap: var(--space-5);
}
.gap-skin .gap-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.gap-skin .gap-hero h1 { margin: var(--space-1) 0; font-size: 1.5rem; }
.gap-skin .gap-hero p:last-child { max-width: 62ch; color: var(--muted); font-size: .88rem; }
.gap-skin .gap-hero-tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  /* سطحِ خودش را دارد، نه شفافیتِ روی لکهٔ رنگی. سنجش نشان داد روی لکهٔ
     آبیِ سرصفحه نسبت کنتراست به ۳٫۶۶ می‌رسید — زیر کف ۴٫۵. */
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  color: var(--ink-2);
  font-size: .76rem;
  white-space: nowrap;
}
.gap-skin .gap-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3);
  align-items: end;
  margin-top: var(--space-4);
}
.gap-skin .gap-form label { display: grid; gap: var(--space-1); font-size: .78rem; color: var(--muted); }
.gap-skin .gap-form label.check { display: flex; align-items: center; gap: var(--space-2); }
.gap-skin .gap-note { margin-top: var(--space-3); color: var(--muted); font-size: .78rem; line-height: 1.75; }
.gap-skin .gap-verdict { margin: var(--space-3) 0 0; font-size: .84rem; line-height: 1.9; }
.gap-skin .gap-toolbar { display: flex; align-items: end; gap: var(--space-3); flex-wrap: wrap; }
.gap-skin .gap-toolbar label { display: grid; gap: var(--space-1); font-size: .76rem; color: var(--muted); }
.gap-skin .gap-toolbar label.check { display: flex; align-items: center; gap: var(--space-2); }
.gap-skin .gap-live-state { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }

.gap-skin .gap-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
}
.gap-skin .gap-kpi {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--gap-hair);
  border-radius: var(--radius-lg);
  background: var(--panel);
}
.gap-skin .gap-kpi b { color: var(--muted); font-size: .74rem; font-weight: 500; }
.gap-skin .gap-kpi strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.gap-skin .gap-kpi small { color: var(--muted); font-size: .7rem; line-height: 1.6; }

.gap-skin .gap-table-wrap { overflow-x: auto; margin-top: var(--space-3); }
.gap-skin .gap-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.gap-skin .gap-table th {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-weight: 500;
  text-align: start;
  white-space: nowrap;
}
.gap-skin .gap-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gap-hair);
  vertical-align: middle;
}
.gap-skin .gap-table tbody tr { cursor: pointer; transition: background var(--transition-fast); }
.gap-skin .gap-table tbody tr:hover { background: var(--gap-tile); }
.gap-skin .gap-table tbody tr.live { background: color-mix(in srgb, var(--gain) 5%, transparent); }
.gap-skin .gap-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gap-skin .gap-table td small { display: block; color: var(--muted); font-size: .68rem; }
.gap-skin .gap-table td.spark-cell { width: 100px; }

/* نمادهای ترکیب — خرید و فروش در یک ستون، از هم جدا. */
.gap-syms { display: flex; flex-direction: column; gap: 3px; }
.gap-sym {
  display: flex; align-items: baseline; gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-xs);
  border-inline-start: 3px solid var(--muted);
  background: var(--gap-tile);
  white-space: nowrap;
}
.gap-sym[data-side="buy"] { border-inline-start-color: var(--gain); }
.gap-sym[data-side="sell"] { border-inline-start-color: var(--loss); }
.gap-sym i { font-style: normal; color: var(--muted); font-size: .66rem; }
.gap-sym b { font-family: var(--mono); font-size: .74rem; }
.gap-sym u { text-decoration: none; color: var(--muted); font-size: .66rem; }

/* شناسنامهٔ ترکیبِ باز — بالای نمودارهای تاریخچه. */
.gap-skin .gap-ident {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gap-hair);
  border-radius: var(--radius-sm);
  background: var(--gap-tile);
}
.gap-skin .gap-ident .gap-syms { flex-direction: row; flex-wrap: wrap; }
.gap-skin .gap-ident span { color: var(--muted); font-size: var(--fs-2xs); }

.gap-skin .gap-hint { margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--fs-2xs); line-height: var(--lh-normal); }

/* ═══ سلول‌های نگاره‌دارِ جدول رادار ═══
   «جداول ویژوال و رنگی و نمودار داخل جداول». هر سه سلولِ زیر در
   ui/radar-columns.mjs ساخته می‌شوند و فقط اینجا شکل می‌گیرند. */
td.rich { padding-block: var(--space-1); }
.rad-dim { color: var(--muted); }
.rad-boundless { font-style: normal; color: var(--warn); font-size: var(--fs-3xs); }

/* ——— سود در برابر زیان: نوار کشسان، عدد بیرونِ آن ———
   عدد پیش از این داخلِ نواری بود که `overflow: hidden` داشت و عرضش از
   خودِ درصد می‌آمد؛ نوارِ کوتاه عددش را می‌برید و «۱۲٫۰۰٪» می‌شد «۰۰…».
   دو ستون: نوار کشسان، عدد با عرضِ خودش و بیرون از ناحیهٔ بریده‌شونده. */
.rad-risk { display: grid; gap: 3px; min-width: 104px; }
.rad-risk-row {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  gap: var(--space-2);
}
.rad-risk-row > s {
  display: block;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  text-decoration: none;
}
.rad-risk-row > s > i {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
}
.rad-risk-row.gain > s > i { background: var(--gain); }
.rad-risk-row.loss > s > i { background: var(--loss); }
/* زیانِ بی‌سقف: نوارِ راه‌راه، تا در یک نگاه از زیانِ «زیاد ولی محدود»
   جدا باشد — رنگ به تنهایی این تفاوت را نمی‌رساند. */
.rad-risk-row.loss.boundless > s > i {
  background: repeating-linear-gradient(45deg,
    var(--loss) 0 3px,
    color-mix(in srgb, var(--loss) 28%, transparent) 3px 6px);
}
.rad-risk-row > b {
  font-size: var(--fs-3xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rad-risk-row.gain > b { color: var(--gain); }
.rad-risk-row.loss > b { color: var(--loss); }

.gap-skin .gap-grid { margin-top: var(--space-3); }
.gap-skin .gap-grid .tbl-body { max-height: 62vh; }

.gap-skin .gap-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: var(--space-4);
}
.gap-skin .gap-chart-wide { grid-column: 1 / -1; }
/* ── نمودارها بزرگ‌تر ──────────────────────────────────────────────────
   گزارش صاحب پروژه: «نمودارها کوچک شده‌اند، بعضی‌ها نیاز دارن فضای
   بیشتری داشته باشن.» ارتفاع پایه بالا رفت، و نمودارِ عریض — که دو خط و
   ناحیهٔ میانشان دارد و بیشترین جزئیات را حمل می‌کند — ارتفاع خودش را
   گرفت. ستون‌های شبکه هم پهن‌تر شدند تا محور افقی برچسب‌هایش را جا بدهد. */
.gap-skin .gap-chart { min-height: 340px; margin-top: var(--space-3); }
.gap-skin .gap-chart-lg { min-height: 440px; }
.gap-skin .gap-chart-wide .gap-chart-lg { min-height: 520px; }
@media (max-width: 900px) {
  .gap-skin .gap-chart { min-height: 280px; }
  .gap-skin .gap-chart-lg,
  .gap-skin .gap-chart-wide .gap-chart-lg { min-height: 340px; }
}

/* ═══ دیده‌بان شرطی ═══
   دو ستونِ انتخاب کنار هم، چون «کدام نمادها» و «کدام استراتژی‌ها» یک
   تصمیم‌اند و پشت سر هم گذاشتنشان، بالا و پایین رفتن می‌خواهد. */
.gap-skin .wt-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.gap-skin .wt-pick {
  border: 1px solid var(--gap-hair);
  border-radius: var(--radius-sm);
  background: var(--gap-tile);
  overflow: hidden;
}
.gap-skin .wt-pick header {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--gap-hair);
}
.gap-skin .wt-pick header b { font-size: var(--fs-xs); }
.gap-skin .wt-pick header span { color: var(--muted); font-size: var(--fs-3xs); margin-inline-end: auto; }
.gap-skin .wt-pick header button { padding: 2px var(--space-2); font-size: var(--fs-3xs); }
/* فهرست بلند، ولی صفحه را بی‌انتها نمی‌کند: دو ستونِ انتخاب باید هر دو
   در یک نگاه دیده شوند، وگرنه تصمیم دو تکه می‌شود. */
.gap-skin .wt-list {
  max-height: 220px;
  overflow-y: auto;
  padding: var(--space-2) var(--space-3);
  display: grid;
  gap: var(--space-1);
}
.gap-skin .wt-list label.check { font-size: var(--fs-2xs); }
.gap-skin .wt-list small { color: var(--muted); font-size: var(--fs-3xs); }

.gap-skin .wt-conds { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.gap-skin .wt-cond {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--gap-hair);
  border-radius: var(--radius-sm);
  background: var(--gap-tile);
}
.gap-skin .wt-cond b { font-size: var(--fs-2xs); font-weight: 600; margin-inline-end: auto; }

/* کارتِ هشدارِ چندشرطی: هر شرط یک سطر، با عددی که دیده شد و آستانه‌ای
   که سنجیده شد. بی آستانه، عدد در شرطِ نسبی بی‌معنی است. */
.gap-alarm-parts { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.gap-alarm-parts li { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--fs-3xs); }
.gap-alarm-parts li span { color: var(--muted); margin-inline-end: auto; }
.gap-alarm-parts li strong { font-variant-numeric: tabular-nums; }
.gap-alarm-parts li small { color: var(--muted); }

.gap-skin .gap-rule-form { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.gap-skin .gap-alarm-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.gap-skin .gap-rule-list { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.gap-skin .gap-rule {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--gap-hair);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.gap-skin .gap-rule.off { opacity: .55; }
.gap-skin .gap-rule header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.gap-skin .gap-rule header b { font-size: .84rem; }
.gap-skin .gap-rule header span { color: var(--muted); font-size: .72rem; }
.gap-skin .gap-rule footer { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }
.gap-skin .gap-rule footer small { flex: 1 1 auto; color: var(--muted); font-size: .72rem; }

.gap-skin .gap-log { display: grid; gap: var(--space-1); margin-top: var(--space-3); }
.gap-skin .gap-log-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2) var(--space-3);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--gap-tile);
  font-size: .78rem;
}
.gap-skin .gap-log-row time { color: var(--muted); font-variant-numeric: tabular-nums; }
.gap-skin .gap-log-row span { font-variant-numeric: tabular-nums; }
.gap-skin .gap-log-row small { grid-column: 1 / -1; color: var(--muted); font-size: .7rem; }

/* ═══════════════════════════════════════════════════════════════════════
   پوستهٔ شیشه‌ای — بازطراحی ظاهر (خواستهٔ ۱۴۰۵/۰۶/۱۳)

   این بلوک عمداً **آخر** است و عمداً بر پایه‌ها می‌نشیند. جایگزین‌کردنِ
   خودِ قاعده‌های پایه، چهارهزار خط شیوه‌نامه را دست می‌زد که هر کدامشان
   یک باگِ حل‌شده پشتش دارد. یک لایه روی همان‌ها، همان ظاهر را عوض می‌کند
   بی آنکه هیچ‌کدام از آن تصمیم‌ها را دور بریزد — و برگرداندنش هم حذفِ
   همین یک بلوک است.

   قاعده‌های این لایه سه چیزند و بس: سطح، لبه، و نور. هر چیز دیگری —
   چیدمان، فاصله، ترتیب — دست‌نخورده می‌ماند.
   ═══════════════════════════════════════════════════════════════════════ */

/* ——— نورِ محیط ———
   لایه‌های تصویرِ پس‌زمینهٔ خودِ `body`، نه یک شبه‌عنصر.
   نسخهٔ اول `body::before` با `z-index: -1` بود. شبه‌عنصرِ منفی **پشتِ
   زمینهٔ والدش** می‌نشیند، پس تا وقتی body رنگ داشت لکه‌ها دیده نمی‌شدند.
   رنگ به `html` منتقل شد و لکه‌ها ظاهر شدند — و یک اشکالِ بدتر ساختند که
   فقط با سنجش پیدا شد: `--ground` پوستهٔ تیره روی
   `body[data-theme="board"]` تعریف شده، پس `html` هرگز آن را نمی‌بیند و
   زمینه در پوستهٔ تیره **روشن** می‌ماند. عنوانِ سفیدِ صفحه روی آن به
   نسبت کنتراست ۱٫۱۸ رسید؛ یعنی عملاً نامرئی.
   لایه‌بندی روی خودِ body هر دو را با هم حل می‌کند: تصویر روی رنگ می‌نشیند
   و هر دو از یک عنصر خوانده می‌شوند، پس پوسته درست کار می‌کند و هیچ
   ترتیبِ لایه‌ای هم لازم نیست.
   `fixed` است تا با پیمایشِ صحنه حرکت نکند. */
body {
  background-color: var(--ground);
  background-image:
    radial-gradient(58vw 46vh at 82% -6%, var(--ambient-1), transparent 62%),
    radial-gradient(52vw 40vh at 8% 12%, var(--ambient-2), transparent 60%),
    radial-gradient(46vw 44vh at 50% 108%, var(--ambient-3), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* صحنه و پوسته باید بگذارند آن نور دیده شود. */
.stage,
.shell { background: transparent; }

/* ——— `hidden` باید مخفی کند ———
   `.subtabs` مقدار `display: flex` می‌گذارد و همان، `display: none` که
   مرورگر برای صفت `hidden` می‌دهد را می‌شکند. نتیجه‌اش در «رادار فاصله»
   یک جعبهٔ خالیِ شیشه‌ای بود که پیش از هر بارگذاری وسط صفحه می‌نشست و
   هیچ‌چیز داخلش نبود — نماگرفت نشانش داد.
   قاعده عمداً سراسری است: هر جزء دیگری هم که روزی `display` بگیرد، همین
   دام را دارد. `!important` اینجا درست است چون `hidden` یک ادعای صریحِ
   نشانه‌گذاری است، نه سلیقهٔ شیوه‌نامه. */
[hidden] { display: none !important; }

/* ——— نوار بالا ——— */
.top {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}

/* ——— ستون استراتژی‌ها ——— */
.rail {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-sheen);
}

/* ——— کارت ———
   دو سایه، نه یکی: بیرونی عمق می‌دهد و درونیِ بالا، ضخامتِ لبه را. با یک
   سایه، کارت «شناور» می‌شود ولی شیشه‌ای نه. */
.card {
  /* دو لایه: نوارِ نورِ کوتاه در بالای کارت، روی سطحِ نیمه‌شفاف. سطحِ
     یکدست، حتی نیمه‌شفاف، باز هم «کاغذ» خوانده می‌شود؛ نورِ جهت‌دار است
     که شیشه‌اش می‌کند.
     نوار با **پیکسل** تمام می‌شود نه با درصد. نسخهٔ اول درصدی بود
     (`transparent 42%`) و در کارتِ بلند، آن ۴۲٪ روی متن می‌افتاد: در
     پوستهٔ تیره کلِ ردیفِ برچسب‌ها زیر یک مهِ خاکستری رفت و «حالت بررسی»
     و «سررسیدهای قابل بررسی» خاکستری‌روی‌خاکستری شدند. نماگرفتِ پوستهٔ
     تیره همان را نشان داد. با واحد ثابت، نوار همیشه بالای کارت می‌ماند و
     به متن نمی‌رسد، کارت هر چه بلند باشد. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--glass-sheen) 42%, transparent),
      transparent 72px),
    var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-sheen);
  transition: box-shadow var(--transition-med), border-color var(--transition-med),
              transform var(--transition-med);
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-edge));
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-sheen);
}

/* ——— دکمهٔ اصلی ———
   شیب، نه رنگِ تخت. و درخششی هم‌رنگِ خودش، نه سایهٔ خاکستری: سایهٔ خاکستری
   زیر یک دکمهٔ بنفش، رنگ را کدر می‌کند. */
.btn, .primary {
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  border: 1px solid color-mix(in srgb, var(--accent-active) 55%, transparent);
  box-shadow: var(--glow-accent), inset 0 1px 0 color-mix(in srgb, var(--on-accent) 28%, transparent);
  transition: background var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover, .primary:hover {
  background: linear-gradient(160deg, var(--accent), var(--accent-hover));
  box-shadow: var(--glow-accent), inset 0 1px 0 color-mix(in srgb, var(--on-accent) 38%, transparent);
  transform: translateY(-1px);
}
.btn:active, .primary:active {
  background: linear-gradient(160deg, var(--accent-active), var(--accent));
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--accent-active) 55%, transparent);
  transform: none;
}
.btn:disabled, .primary:disabled { box-shadow: none; transform: none; }

/* ——— دکمهٔ دوم و دکمهٔ سبک: شیشه، نه سطحِ پر ——— */
.ghost, .btn.sec, .btn-sec {
  background: var(--glass-2);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.ghost:hover, .btn.sec:hover, .btn-sec:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-2));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.ghost[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 18%, var(--glass-2));
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.ghost:disabled:hover { background: var(--glass-2); border-color: var(--glass-edge); }

/* ——— ورودی و کشویی ———
   ورودی تنها جایی است که شیشه **فرو رفته** است نه برجسته: سایهٔ درونی
   به‌جای لبهٔ روشن. همین یک وارونگی، «اینجا می‌شود نوشت» را از «اینجا
   می‌شود فشرد» جدا می‌کند، بی آنکه رنگی اضافه شود. */
.field input, .field select,
select, input[type="text"], input[type="search"], input[type="number"], input[type="date"],
textarea {
  background-color: var(--glass-2);
  border: 1px solid color-mix(in srgb, var(--line-input) 60%, transparent);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 7%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
}
.field input:focus, .field select:focus,
select:focus, input[type="text"]:focus, input[type="search"]:focus,
input[type="number"]:focus, input[type="date"]:focus, textarea:focus {
  background-color: var(--glass);
  border-color: var(--accent);
  box-shadow: var(--focus-ring), inset 0 1px 3px color-mix(in srgb, var(--ink) 5%, transparent);
}
.field input:disabled, .field select:disabled,
select:disabled, input:disabled {
  background-color: color-mix(in srgb, var(--panel-2) 55%, transparent);
  box-shadow: none;
}

/* ——— نشان و تراشه ——— */
.pill {
  background: var(--glass-2);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.capacity > summary {
  background: var(--glass-2);
  border-color: var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
}
.capacity-panel {
  background: var(--glass);
  border-color: var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-sheen);
}

/* ——— نوار زیرتب: کنترلِ قطعه‌ای ——— */
.subtabs {
  padding: 4px;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: var(--glass-2);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent);
}
.subtabs button[aria-selected="true"] {
  background: linear-gradient(160deg, var(--accent-2), var(--accent));
  box-shadow: var(--glow-accent), inset 0 1px 0 color-mix(in srgb, var(--on-accent) 28%, transparent);
}

/* ——— سرستون جدول: نوارِ مه‌آلود ———
   ردیف‌ها زیرش رد می‌شوند و کم‌رنگ دیده می‌شوند؛ همان چیزی که «این ستون
   ثابت است» را بی خطِ اضافه می‌گوید. */
table.data thead th {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ——— خانهٔ راستِ سرِ بخش، جای بی‌نهایت متن نیست ———
   `#gr-status` جمله‌های بلند می‌نویسد («۰ نماد پایه در این بازه؛ …») و در
   یک `flex` بی‌مهار، عنوان را می‌بلعد و از کارت بیرون می‌زند. سقفِ عرض و
   اجازهٔ شکستن، هر دو لازم است: بی دومی، جمله در یک خط از کارت می‌زند
   بیرون. */
.section-head { flex-wrap: wrap; }
.section-head > b,
.section-head > span {
  flex: 0 1 auto;
  max-width: min(52ch, 55%);
  text-align: start;
  overflow-wrap: anywhere;
}
/* زیر ۱۱۰۰ پیکسل، خانهٔ راست زیرِ عنوان می‌رود نه کنارش: در آن عرض،
   ۵۵٪ برای یک جملهٔ وضعیت هنوز باریک است و کلمه‌ها تک‌تک می‌شکنند. */
@media (max-width: 1100px) {
  .section-head > b,
  .section-head > span { max-width: 100%; }
}

/* پیوندِ هشدار در تب رصد زنده — دکمه‌نما، ولی پیوند است.
   `a` با کلاس `.ghost` ارتفاع دکمه را از `min-height` می‌گیرد ولی
   `inline-flex` را نه، چون قاعدهٔ `.ghost` روی `button` نوشته شده بود. */
.live-market-alert-link a.ghost {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-3);
  text-decoration: none;
}

/* ——— اجزای رادار فاصله، بر همان زبان ——— */
.gap-skin .gap-kpi,
.gap-skin .gap-rule {
  background: var(--glass-2);
  border-color: var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-sheen);
}
.gap-skin .gap-table th {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.6);
  border-bottom: 1px solid var(--glass-edge);
}
.gap-alarm-card {
  background: var(--glass);
  border-color: var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.7);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--glass-sheen);
}

/* ——— سه احتیاط ———

   ۱. `backdrop-filter` روی سخت‌افزار ضعیف گران است. کاربری که «حرکت کمتر»
      را در سیستم‌عاملش خواسته، معمولاً همان کاربر است؛ پس تاری برداشته
      می‌شود و سطح‌ها پر می‌شوند. خواناییِ متن هیچ تغییری نمی‌کند.
   ۲. چاپ، شیشه ندارد. سطحِ نیمه‌شفاف روی کاغذ سفید یعنی متنِ کم‌رنگ.
   ۳. مرورگری که `backdrop-filter` ندارد، سطحِ نیمه‌شفاف را روی هر چیزی
      که پشتش باشد نشان می‌دهد — یعنی متن روی متن. برای آن، سطح‌ها پرند. */
@media (prefers-reduced-motion: reduce) {
  .top, .rail, .card, .ghost, .btn.sec, .btn-sec, .pill, .subtabs,
  table.data thead th, .capacity > summary, .capacity-panel,
  .gap-skin .gap-kpi, .gap-skin .gap-rule, .gap-skin .gap-table th, .gap-alarm-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .card, .top, .rail, .capacity-panel, .gap-alarm-card { background: var(--panel); }
  .ghost, .btn.sec, .btn-sec, .pill, .subtabs, .capacity > summary,
  .gap-skin .gap-kpi, .gap-skin .gap-rule { background: var(--panel-2); }
  table.data thead th, .gap-skin .gap-table th { background: var(--panel-2); }
  .btn:hover, .primary:hover { transform: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .top, .rail, .card, .capacity-panel, .gap-alarm-card { background: var(--panel); }
  .ghost, .btn.sec, .btn-sec, .pill, .subtabs, .capacity > summary,
  .gap-skin .gap-kpi, .gap-skin .gap-rule { background: var(--panel-2); }
  table.data thead th, .gap-skin .gap-table th { background: var(--panel-2); }
  /* ورودی‌ها جدا، و با `background-color` نه `background`.
     میان‌بر `background` تصویرِ پس‌زمینه را هم صفر می‌کند، و فلشِ کشویی
     دقیقاً یک `background-image` است — پس همین یک خط، در هر مرورگرِ بدونِ
     `backdrop-filter` فلشِ همهٔ کشویی‌ها را بی‌صدا پاک می‌کرد. نگهبان ۱۱
     برای همین هست و همین را گرفت. */
  .field input, .field select, select, input[type="text"], input[type="search"],
  input[type="number"], input[type="date"], textarea { background-color: var(--panel-2); }
}

@media print {
  body { background-image: none; }
  .top, .rail, .card, .ghost, .btn, .primary, .pill, .subtabs,
  table.data thead th, .gap-skin .gap-kpi, .gap-skin .gap-rule {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--panel);
    box-shadow: none;
  }
}

.pb-skin {
  --pb-rail: 3px;                                   /* نوار رنگی سرِ کارت */
  --pb-hair: 1px solid var(--line-soft);            /* مرز مویی مشترک */
  --pb-tile: color-mix(in srgb, var(--panel-2) 60%, var(--panel));
  --pb-sunk: color-mix(in srgb, var(--ground) 55%, var(--panel));
}

/* ─── سرصفحه ─────────────────────────────────────────────────────── */
.pb-skin .pb-hero {
  position: relative; padding-inline-start: var(--space-5);
  border-radius: var(--radius-lg); background: var(--pb-tile);
  border: var(--pb-hair); box-shadow: none;
}
.pb-skin .pb-hero::before {
  content: ""; position: absolute; inset-block: var(--space-4); inset-inline-start: 0;
  width: var(--pb-rail); border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--accent), var(--accent-2));
}
.pb-skin .pb-hero h1 { font-size: var(--fs-3xl); line-height: var(--lh-tight); }
.pb-skin .pb-hero > span { font-variant-numeric: tabular-nums; }

/* ─── کارت‌ها ────────────────────────────────────────────────────── */
.pb-skin .card {
  border: var(--pb-hair); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-2xs);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.pb-skin .card:hover { border-color: var(--line); box-shadow: var(--shadow-xs); }
.pb-skin .section-head {
  align-items: flex-start; gap: var(--space-3);
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: var(--pb-hair);
}
/* «ابرو» نشانه‌دار می‌شود تا در صفحه‌ای با ده کارت، سرِ هر کارت با یک
   نگاه پیدا شود و لازم نباشد عنوان را خواند. */
.pb-skin .section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent-ink); font-size: var(--fs-3xs); font-weight: 700;
}
.pb-skin .section-head .eyebrow::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.pb-skin .section-head h2 { font-size: var(--fs-lg); line-height: var(--lh-tight); }

/* ─── دکمه‌ها ────────────────────────────────────────────────────── */
.pb-skin .primary, .pb-skin .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-h-sm); padding: 0 var(--space-4);
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: normal; white-space: nowrap; cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast);
}
.pb-skin .primary {
  border: 1px solid var(--accent); background: var(--accent);
  color: var(--on-accent); box-shadow: var(--shadow-2xs);
}
.pb-skin .primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* فرورفتن در فشار، تنها بازخوردی است که پیش از رسیدنِ پاسخ دیده می‌شود. */
.pb-skin .primary:active { background: var(--accent-active); border-color: var(--accent-active); transform: translateY(1px); }
.pb-skin .ghost {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); box-shadow: none;
}
.pb-skin .ghost:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.pb-skin .ghost:active { transform: translateY(1px); }
.pb-skin .ghost[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.pb-skin .primary:focus-visible, .pb-skin .ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pb-skin .primary:disabled, .pb-skin .ghost:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ─── ورودی‌ها ───────────────────────────────────────────────────── */
.pb-skin label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); }
.pb-skin select,
.pb-skin input[type="text"], .pb-skin input[type="search"],
.pb-skin input[type="number"], .pb-skin input[type="date"] {
  min-height: var(--control-h-sm);
  padding-block: 6px; padding-inline: var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background-color: var(--pb-sunk); color: var(--ink);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
/* فلشِ `select` روی زمینه کشیده می‌شود، پس جای خودش را از `padding`
   می‌گیرد. با `padding` کوتاه‌نویس، آن جا پاک می‌شد و نام بلندِ ترکیب
   می‌رفت زیر فلش. سه‌نقطه هم لازم است: متنی که در قاب نمی‌گنجد باید
   بریده به نظر برسد، نه اینکه بی‌صدا زیر فلش گم شود. */
.pb-skin select {
  padding-inline-start: 34px; padding-inline-end: var(--space-3);
  text-overflow: ellipsis;
}
/* عدد در ورودی هم باید تک‌عرض باشد؛ وگرنه «۱۱۱» و «۹۹۹» دو پهنا دارند و
   موقع تایپ، قاب می‌لرزد. */
.pb-skin input[type="number"] { font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; text-align: end; }
.pb-skin select:hover,
.pb-skin input[type="text"]:hover, .pb-skin input[type="number"]:hover { border-color: var(--line-input); }
.pb-skin select:focus,
.pb-skin input[type="text"]:focus, .pb-skin input[type="search"]:focus,
.pb-skin input[type="number"]:focus, .pb-skin input[type="date"]:focus {
  outline: none; border-color: var(--accent); background-color: var(--panel); box-shadow: var(--focus-ring);
}
.pb-skin select:disabled, .pb-skin input:disabled { opacity: .5; cursor: not-allowed; }
.pb-skin input[type="range"] { accent-color: var(--accent); }

/* پنج ستونِ ثابتِ ۱۴۵ پیکسلی برای مقیاسِ قلمِ پیشین بسته شده بود. با
   قلم بزرگ‌تر و جای فلش، «فقط استراتژی‌های قابل اجرا» در آن پهنا جا
   نمی‌شد. حالا شبکه خودش می‌شکند تا هر فیلد پهنای خواندنی داشته باشد. */
.pb-skin .portfolio-form {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-3) var(--space-4);
}
.pb-skin .portfolio-form label { font-size: var(--fs-xs); font-weight: 600; }
.pb-skin .pb-basket-row { grid-template-columns: auto minmax(150px, 1fr) minmax(180px, 1.2fr) minmax(230px, 2.2fr) 96px auto; }
.pb-skin .pb-basket-row[data-single-run] { grid-template-columns: auto minmax(200px, 1.2fr) minmax(270px, 2.4fr) 96px auto; }

/* ─── نوار تب ────────────────────────────────────────────────────── */
.pb-skin #pb-tabs {
  position: sticky; top: 0; z-index: 4;
  gap: 2px; padding: 4px; border: var(--pb-hair);
  border-radius: var(--radius-pill); background: var(--pb-tile);
  box-shadow: var(--shadow-2xs); overflow-x: auto; scrollbar-width: thin;
}
.pb-skin #pb-tabs button {
  min-height: var(--control-h-sm); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  background: transparent; color: var(--muted);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.pb-skin #pb-tabs button:hover { background: var(--panel); color: var(--ink); }
.pb-skin #pb-tabs button[aria-selected="true"] {
  background: var(--accent); border-color: var(--accent);
  color: var(--on-accent); box-shadow: var(--shadow-2xs);
}
.pb-skin #pb-tabs button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ─── عدسی ──────────────────────────────────────────────────────── */
.pb-skin .pb-lens { border-radius: var(--radius-lg); background: var(--pb-tile); }
.pb-skin .pb-lens[data-open="true"] { border-color: var(--accent); }
.pb-skin .pb-lens-toggle { padding: var(--space-2) var(--space-4); }
.pb-skin .pb-lens-chip {
  border: 1px solid var(--accent); color: var(--accent-ink);
  font-size: var(--fs-3xs); font-weight: 700;
}
.pb-skin .pb-lens-toggle b { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-skin .pb-lens-grid { gap: var(--space-3) var(--space-4); }
.pb-skin .pb-lens-grid label { gap: 5px; }

/* ─── تراشه‌ها ───────────────────────────────────────────────────── */
.pb-skin .pb-chip {
  min-height: 28px; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); background: var(--pb-sunk);
  font-size: var(--fs-xs); font-weight: 600;
}
.pb-skin .pb-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* ─── جدول‌ها ────────────────────────────────────────────────────── */
.pb-skin .history-table-wrap { border: var(--pb-hair); border-radius: var(--radius-md); overflow: auto; }
.pb-skin .history-table { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pb-skin .history-table thead th {
  position: sticky; top: 0; z-index: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--pb-tile); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 700; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.pb-skin .history-table td { padding: var(--space-2) var(--space-3); border-bottom: var(--pb-hair); }
.pb-skin .history-table tbody tr:last-child td { border-bottom: 0; }
.pb-skin .history-table tbody tr { transition: background var(--transition-fast); }
.pb-skin .history-table tbody tr:hover { background: var(--accent-soft); }
/* ستون نخست لنگرِ چشم است؛ باقی سطر عدد است و باید سبک‌تر بخواند. */
.pb-skin .history-table tbody td:first-child { font-weight: 700; color: var(--ink); }

/* ─── کارت‌های عدد ──────────────────────────────────────────────── */
.pb-skin .backtest-kpis { gap: var(--space-3); }
.pb-skin .backtest-kpis article {
  padding: var(--space-3) var(--space-4);
  border: var(--pb-hair); border-radius: var(--radius-md);
  background: var(--pb-tile); box-shadow: none;
}
.pb-skin .backtest-kpis span { margin-bottom: 4px; font-size: var(--fs-2xs); font-weight: 600; }
.pb-skin .backtest-kpis b {
  font-family: var(--mono); font-size: var(--fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; direction: ltr; display: block; text-align: start;
}
.pb-skin .backtest-kpis article.gain { border-inline-start: var(--pb-rail) solid var(--gain); }
.pb-skin .backtest-kpis article.loss { border-inline-start: var(--pb-rail) solid var(--loss); }

/* ─── سرخط‌ها ────────────────────────────────────────────────────── */
.pb-skin .pb-highlight {
  padding: var(--space-3); border: var(--pb-hair); border-radius: var(--radius-md);
  background: var(--panel); transition: border-color var(--transition-fast),
    background var(--transition-fast), transform var(--transition-fast);
}
.pb-skin .pb-highlight:hover { transform: translateY(-2px); border-color: var(--accent); }
.pb-skin .pb-highlight b { font-size: var(--fs-md); }
.pb-skin .pb-highlight-value em { font-family: var(--mono); direction: ltr; }

/* ─── سطرهای سبد ────────────────────────────────────────────────── */
.pb-skin .pb-basket-row {
  padding: var(--space-3); border: var(--pb-hair);
  border-radius: var(--radius-md); background: var(--pb-tile);
}
.pb-skin .pb-basket-row:focus-within { border-color: var(--accent); }
.pb-skin .pb-basket-row[data-warn] { border-color: var(--warn); background: var(--warn-soft); }
.pb-skin .pb-weight {
  padding: var(--space-3); border: var(--pb-hair);
  border-radius: var(--radius-md); background: var(--pb-tile);
}
.pb-skin .pb-weight b { font-family: var(--mono); }

/* ─── نمودارها و یادداشت‌ها ─────────────────────────────────────── */
.pb-skin .pb-chart { border: var(--pb-hair); border-radius: var(--radius-md); background: var(--panel); }
.pb-skin .pb-hint, .pb-skin .portfolio-note {
  font-size: var(--fs-xs); line-height: 1.85; color: var(--muted);
}
.pb-skin .pb-workbook, .pb-skin .pb-grain-run {
  padding: var(--space-3) var(--space-4); border: var(--pb-hair);
  border-radius: var(--radius-md); background: var(--pb-tile); margin-top: 0;
}

/* ─── کشوی جزئیات ───────────────────────────────────────────────── */
.pb-skin .pb-drawer { border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); }
.pb-skin .pb-drawer-head { padding: var(--space-3) var(--space-4); }
.pb-skin .pb-drawer-head b { font-size: var(--fs-md); }
.pb-skin .pb-drawer-tabs button { min-height: 28px; padding: 0 var(--space-3); font-size: var(--fs-xs); background: var(--pb-sunk); }
.pb-skin .pb-drawer-tabs button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

@media (max-width: 560px) {
  .pb-skin #pb-tabs { border-radius: var(--radius-md); }
  .pb-skin .pb-hero { padding-inline-start: var(--space-4); }
}

/* سرشماری قرارداد — جمله‌ای که پیش از هر عدد ترکیبی خوانده می‌شود.
   بالای پنل قرار دارد چون «شش استرانگل» بدون «از چند قرارداد» قابل
   قضاوت نیست، و کاربر نباید برای دیدنش تا برگ آخر اکسل برود. */
.pb-skin .pb-census {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--pb-hair);
  border-radius: var(--radius-md);
  background: var(--pb-tile);
  color: var(--fg);
  font-size: var(--fs-xs);
  line-height: 1.95;
}
.pb-skin .pb-census:empty { display: none; }

/* پالایهٔ ترکیب — شبکهٔ قیدها.
   دو ورودی در هر خانه («از» و «تا») چون قید یک‌طرفه هم لازم است: «حداکثر
   زیان تا صد میلیون» بی کف معنی دارد. */
.pb-skin .pb-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.pb-skin .pb-filter-cell { display: flex; flex-direction: column; gap: var(--space-1); }
.pb-skin .pb-filter-cell > label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--fg);
}
.pb-skin .pb-filter-cell > label small { font-weight: 500; color: var(--muted); }
.pb-skin .pb-filter-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.pb-skin .pb-filter-pair input {
  min-width: 0; padding: var(--space-2) var(--space-3);
  border: var(--pb-hair); border-radius: var(--radius-sm);
  background: var(--pb-tile); color: var(--fg); font-size: var(--fs-xs);
}
.pb-skin .pb-filter-hint {
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.7;
}
.pb-skin .pb-filter-note {
  margin: 0; padding: var(--space-3) var(--space-4);
  border: var(--pb-hair); border-radius: var(--radius-md);
  background: var(--pb-tile); color: var(--fg);
  font-size: var(--fs-xs); line-height: 1.95;
}
.pb-skin .pb-filter-note:empty { display: none; }