/* ==========================================================================
   OptionAi — تم مشترک همهٔ تب‌ها
   همهٔ رنگ‌ها از توکن خوانده می‌شوند تا لایت‌مود در هر چهار تب یکدست باشد.
   حالت روشن با [data-theme="light"] روی <html> فعال می‌شود.
   شکل ارقام با [data-numerals="fa|en"] روی <html> عوض می‌شود.
   ========================================================================== */

/* -------------------------------- فونت‌ها -------------------------------- */
/* فونت پایه؛ ارقامش لاتین است.
   وزن باید دقیقاً ۴۰۰ اعلام شود: این فایل تک‌وزن است و اگر بازهٔ ۱۰۰..۹۰۰
   اعلام شود مرورگر خیال می‌کند همهٔ وزن‌ها را دارد و دیگر بولد نمی‌سازد.
   با اعلام ۴۰۰، وزن‌های سنگین‌تر را خودِ مرورگر شبیه‌سازی می‌کند. (اگر فایل
   IRANSansWeb_Medium را برگرداندی، یک @font-face با font-weight:500 700
   برایش اضافه کن تا بولد واقعی جای شبیه‌سازی را بگیرد.) */
@font-face{
  font-family:'IRANSansWeb';
  src:url('fonts/IRANSansWeb.ttf') format('truetype');
  font-weight:400;
  font-display:swap;
}
/* نسخهٔ FaNum همان فونت است با این تفاوت که ارقام لاتین (U+0030..0039) را با
   شکل فارسی می‌کشد. با unicode-range فقط ارقام از این فایل خوانده می‌شود و
   بقیهٔ نویسه‌ها از فونت پایه می‌آید، پس متن در هر دو حالت یکسان می‌ماند. */
@font-face{
  font-family:'IRANSansFaNum';
  src:url('fonts/IRANSansWeb(FaNum).ttf') format('truetype');
  font-weight:400;
  unicode-range:U+0030-0039;
  font-display:swap;
}

/* ------------------------------ تم تیره (پیش‌فرض) ------------------------ */
:root,
:root[data-theme="dark"]{
  --bg:#000000;
  --body-glow-1:rgba(255,197,49,.10);
  --body-glow-2:rgba(139,92,246,.07);

  --frame-a:#0a0a0b;          /* گرادیان پوستهٔ پنجره */
  --frame-b:#060607;
  --frame-shadow:0 40px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02);

  --surface:#0b0b0c;          /* کارت‌ها */
  --surface-2:#0d0d10;        /* پاپ‌آور، ریل، نوار برند */
  --surface-3:#111114;        /* آیتم‌ها، ورودی‌ها، دکمه‌های خنثی */
  --surface-4:#17171c;        /* حالت هاور */
  --elev:#0e0e11;             /* سربرگ جدول */
  --sidebar-bg:#08080a;
  --card-sheen:rgba(255,255,255,.028);
  --card-inset:rgba(255,255,255,.03);
  --card-shadow:0 24px 50px -34px rgba(0,0,0,1);
  --pop-shadow:0 30px 70px -25px rgba(0,0,0,1), 0 0 0 1px rgba(255,255,255,.02);

  --line:#1c1c20;
  --line-soft:#141417;
  --line-strong:#33333b;
  --track:#1c1c20;            /* شیار نوار درصد */

  --txt:#F4F4F5;
  --txt-dim:#A1A1AA;
  --txt-mute:#6B6B73;
  --txt-strong:#FFFFFF;

  --gold:#FFC531;             /* پرکننده و حاشیه */
  --gold-2:#F5B60F;
  --gold-ink:#FFC531;         /* متنِ طلایی */
  --on-gold:#181203;
  --gold-soft:rgba(255,197,49,.07);
  --gold-ring:rgba(255,197,49,.25);

  --up:#22C55E;
  --down:#EF4444;

  --grid:#141417;             /* خطوط شبکهٔ نمودار */
  --axis:#5A5A63;             /* برچسب محورها */
  --chart-bg:#0b0b0c;         /* دورِ نقطه‌های نمودار */
  --donut-track:#141417;

  --sidebar-w:250px;
  --sidebar-w-collapsed:58px;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  color-scheme:dark;
}

/* ------------------------------- تم روشن -------------------------------- */
:root[data-theme="light"]{
  --bg:#F4F5F7;
  --body-glow-1:rgba(255,197,49,.16);
  --body-glow-2:rgba(139,92,246,.07);

  --frame-a:#FFFFFF;
  --frame-b:#FCFCFD;
  --frame-shadow:0 30px 90px -40px rgba(24,28,36,.30), 0 0 0 1px rgba(24,28,36,.05);

  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --surface-3:#F7F8FA;
  --surface-4:#EEF0F4;
  --elev:#FAFBFC;
  --sidebar-bg:#FFFFFF;
  --card-sheen:rgba(24,28,36,.012);
  --card-inset:rgba(255,255,255,.9);
  --card-shadow:0 18px 40px -30px rgba(24,28,36,.35);
  --pop-shadow:0 24px 60px -22px rgba(24,28,36,.28), 0 0 0 1px rgba(24,28,36,.05);

  --line:#E6E8EC;
  --line-soft:#EFF1F4;
  --line-strong:#C8CCD4;
  --track:#E6E8EC;

  --txt:#1B2029;
  --txt-dim:#5B6270;
  --txt-mute:#8A909C;
  --txt-strong:#0F131A;

  --gold:#FFC531;
  --gold-2:#F5B60F;
  --gold-ink:#B07A08;         /* طلاییِ خوانا روی سفید (کنتراست ≈۴.۶:۱) */
  --on-gold:#181203;
  --gold-soft:#FEF6E2;
  --gold-ring:rgba(255,197,49,.42);

  --up:#12934A;               /* سبز تیره‌تر برای کنتراست روی سفید */
  --down:#D22C2C;

  --grid:#EDEFF2;
  --axis:#8A909C;
  --chart-bg:#FFFFFF;
  --donut-track:#EFF1F4;

  color-scheme:light;
}

/* ---------------------- توکن‌های مستقل از تم ------------------------------ */
:root{
  /* اندازهٔ عکس پروفایل؛ ارتفاع لوگو از روی همین حساب می‌شود */
  --avatar-size:70px;
  --brand-logo-h:calc(var(--avatar-size) + 2em);

  /* پیش‌فرض: ارقام فارسی */
  --font-ui:'IRANSansFaNum','IRANSansWeb','Vazirmatn','Segoe UI',Tahoma,sans-serif;
}
/* با خاموش شدن کلید «ارقام فارسی»، فقط فونت ارقام کنار می‌رود */
:root[data-numerals="en"]{
  --font-ui:'IRANSansWeb','Vazirmatn','Segoe UI',Tahoma,sans-serif;
}

html,body{ height:100% }

body{
  font-family:var(--font-ui);
  background-color:var(--bg);
  background-image:radial-gradient(1200px 620px at 88% -8%, var(--body-glow-1), transparent 62%), radial-gradient(900px 520px at 6% 104%, var(--body-glow-2), transparent 60%);
  color:var(--txt);
  font-feature-settings:"ss01","ss02";
  overflow:hidden;
  transition:background-color .35s var(--ease-soft), color .35s var(--ease-soft);
}

.num{ font-variant-numeric:tabular-nums; letter-spacing:.01em }

/* ---------------------------- اسکرول‌بار ---------------------------------- */
.scroll-thin{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent }
.scroll-thin::-webkit-scrollbar{ width:7px; height:7px }
.scroll-thin::-webkit-scrollbar-track{ background-color:transparent }
.scroll-thin::-webkit-scrollbar-thumb{ background-color:var(--line-strong); border-radius:99px; opacity:.6 }
.scroll-thin::-webkit-scrollbar-thumb:hover{ background-color:var(--txt-mute) }

/* ---------------------------- پوستهٔ برنامه ------------------------------- */
.app-frame{
  border:1px solid var(--line);
  background-image:linear-gradient(180deg, var(--frame-a), var(--frame-b) 70%);
  box-shadow:var(--frame-shadow);
  transition:background .35s var(--ease-soft), border-color .35s var(--ease-soft);
}

/* لوگوی نوار برند — فایلش با تم عوض می‌شود و ارتفاعش ۰.۱em بیشتر از عکس
   پروفایلِ سایدبار است. نسبت عرض به ارتفاعِ هر فایل با --brand-logo-ar می‌آید،
   چون دو لوگو ترکیب‌بندی متفاوتی دارند. */
.brand-mark{
  display:block;
  height:var(--brand-logo-h);
  width:calc(var(--brand-logo-h) * var(--brand-logo-ar));
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
:root .brand-mark,
:root[data-theme="dark"] .brand-mark{
  --brand-logo-ar:3.5;
  background-image:url('logo/Logo_DarkMod.svg?v=7c8722d769');
  /* فایل تیره پس‌زمینهٔ مشکیِ توکار دارد؛ screen آن را روی نوار برند نامرئی
     می‌کند و فقط نقشِ روشن و طلایی می‌ماند. */
  mix-blend-mode:screen;
}
:root[data-theme="light"] .brand-mark{
  --brand-logo-ar:3.5;
  background-image:url('logo/Logo_LightMod.svg?v=b059d83a7c');
  mix-blend-mode:normal;
}
/* نوار برند به نسبت عرض صفحه بزرگ و کوچک می‌شود: --bb-scale را core.js
   (applyBrandScale) روی <html> می‌گذارد — ۱ روی ۱۹۲۰ پیکسل (مانیتور ۲۲
   اینچ)، کف ۰٫۷ (سرفیس) و سقف ۱٫۵. لوگوی صفحه‌های دیگر (ورود، لندینگ، پنل)
   داخل .brand-bar نیست و دست نمی‌خورد. */
.brand-bar{
  --bb-s:var(--bb-scale, 1);
  background-color:var(--surface-2);
  border-bottom:1px solid var(--line-soft);
  min-height:calc((var(--brand-logo-h) + 10px) * var(--bb-s));
}
.brand-bar .brand-mark{
  height:calc(var(--brand-logo-h) * var(--bb-s));
  width:calc(var(--brand-logo-h) * var(--bb-s) * var(--brand-logo-ar));
}

/* ------------------------------ کارت‌ها ---------------------------------- */
.card{
  background-color:var(--surface);
  background-image:linear-gradient(180deg, var(--card-sheen), transparent);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 1px 0 0 var(--card-inset) inset, var(--card-shadow);
  transition:border-color .3s var(--ease-soft), transform .4s var(--ease-out),
             box-shadow .4s var(--ease-out), background .35s var(--ease-soft);
}
.card:hover{ border-color:var(--line-strong) }

/* ------------------------------ انیمیشن‌ها -------------------------------- */
@keyframes riseIn    { from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none} }
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes slideStart{ from{opacity:0; transform:translateX(22px)} to{opacity:1; transform:none} }
@keyframes popIn     { from{opacity:0; transform:scale(.82)} to{opacity:1; transform:scale(1)} }
@keyframes frameIn   { from{opacity:0; transform:scale(.965) translateY(14px)} to{opacity:1; transform:none} }
@keyframes modalIn   { from{opacity:0; transform:translateY(14px) scale(.94)} to{opacity:1; transform:none} }
@keyframes drawerIn  { from{opacity:0; transform:translateX(-100%)} to{opacity:1; transform:none} }
@keyframes shake     { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
                       30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }

.anim-rise { animation:riseIn .62s var(--ease-out) both }
.anim-slide{ animation:slideStart .5s var(--ease-out) both }
.anim-pop  { animation:popIn .45s cubic-bezier(.34,1.56,.64,1) both }
.anim-frame{ animation:frameIn .8s var(--ease-out) both }
.anim-fade { animation:fadeIn .5s ease both }

/* ------------------------------ سایدبار ---------------------------------- */
/* <aside class="sidebar"> جعبهٔ چیدمان است: پیش‌فرض به پهنای ریل، و فقط با
   سنجاق (.pinned) به پهنای کامل — یعنی عرض محتوای صفحه فقط با دکمهٔ سه‌خط
   عوض می‌شود. نمای واقعی .side-panel است که absolute روی همین جعبه می‌نشیند
   و در حالت .is-open (ماوس روی ریل یا سنجاق) تا پهنای کامل باز می‌شود؛ در
   حالت شناور از جعبه بیرون می‌زند و روی محتوا می‌افتد. */
.sidebar{
  position:relative;
  width:var(--sidebar-w-collapsed);
  flex:none;
  transition:width .45s var(--ease-out);
}
.sidebar.pinned{ width:var(--sidebar-w) }

.side-panel{
  position:absolute; inset-block:0; inset-inline-start:0;
  z-index:50;
  width:var(--sidebar-w-collapsed);
  display:flex; flex-direction:column;
  overflow:hidden;
  background-color:var(--sidebar-bg);
  border-inline-start:1px solid var(--line-soft);
  transition:width .45s var(--ease-out), background .35s var(--ease-soft),
             border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.sidebar.is-open .side-panel{ width:var(--sidebar-w) }
/* شناور (باز ولی سنجاق‌نشده) روی محتوا سایه می‌اندازد تا معلوم باشد لایه است */
.sidebar.is-open:not(.pinned) .side-panel{
  box-shadow:-18px 0 48px -22px rgba(0,0,0,.75), -1px 0 0 var(--line);
}
.side-top{ display:flex; justify-content:flex-start; padding:12px 11px 0 11px }

.side-content{ flex:1; min-height:0; display:flex; flex-direction:column }
.side-divider{ height:1px; background-color:var(--line-soft); margin:.5rem .25rem }
.side-foot{ border-top:1px solid var(--line-soft); color:var(--txt-mute) }
.side-profile{ border-bottom:1px solid var(--line-soft) }

/* ریل: هر سطر فقط آیکونش را نشان می‌دهد. آیکون سر جای همیشگی‌اش (سمت آغاز
   سطر) می‌ماند و نوشته‌ها با پهنای صفر و شفاف کنار می‌روند، پس هنگام باز
   شدنِ پنل چیزی نمی‌پرد و نوشته‌ها از پشت لبهٔ پنل بیرون می‌آیند. */
.sidebar:not(.is-open) .nav-label,
.sidebar:not(.is-open) .nav-item .chev,
.sidebar:not(.is-open) .nav-item > .flex-1{
  width:0; min-width:0; flex:none; opacity:0; overflow:hidden; white-space:nowrap;
  pointer-events:none;
}
.nav-label{ white-space:nowrap; transition:opacity .25s var(--ease-soft) }
.sidebar:not(.is-open) .nav-item{ gap:0 }
.sidebar:not(.is-open) .acc-panel{ display:none }

/* ساعت و تاریخ تهران، زیر سه گزینهٔ پایین منو.
   ریل: ساعت:دقیقه روی ثانیه و زیرش روز روی ماه؛ ستون ساعت پهنای ثابت دارد
        و مرکزش روی محور آیکون‌های تب‌هاست.
   باز: پهنای منو دو نیمه است — نیمهٔ آغاز ساعت (ثانیه کنار ساعت:دقیقه)، نیمهٔ
        دیگر تاریخ. ستون ساعت از ۴۲px تا نیمه نرم پهن می‌شود، تاریخِ کناری مثل
        نوشتهٔ تب‌ها از پشت لبه بیرون می‌آید و ردیفِ تاریخِ زیرین مثل آکاردئون
        جمع می‌شود. */
.side-clock{
  --sc-col:42px; --sc-pad:calc((var(--sidebar-w-collapsed) - var(--sc-col)) / 2 + 1px);   /* هم‌محورِ آیکون‌های تب‌ها */
  padding:.6rem 0 .7rem; line-height:1.15; font-variant-numeric:tabular-nums; user-select:none; cursor:default;
}
.sc-row{ display:flex; align-items:center; padding-inline:var(--sc-pad) 0; transition:padding .45s var(--ease-out) }
.sidebar.is-open .sc-row{ padding-inline-end:var(--sc-pad) }
.sc-time, .sc-date-stack{ width:var(--sc-col); flex:none; display:flex; flex-direction:column; align-items:center; text-align:center }
/* ltr: در حالت باز ثانیه سمت راستِ دقیقه می‌نشیند (۱۵:۲۰ ۳۴)، نه پیش از ساعت */
.sc-time{ direction:ltr; transition:width .45s var(--ease-out) }
.sidebar.is-open .sc-time{ width:50%; flex-direction:row; justify-content:center; align-items:baseline; gap:.3rem }
.sc-hm { font-size:16px; font-weight:800; color:var(--txt-strong) }
.sc-sec{ font-size:12px; font-weight:600; color:var(--txt-dim) }
.sc-day{ font-size:16px; font-weight:800; color:var(--gold-ink) }
.sc-mon{ font-size:11.5px; font-weight:600; color:var(--txt-mute) }

.sc-date-side{
  flex:1; min-width:0; display:flex; justify-content:center; align-items:baseline; gap:.3rem; white-space:nowrap;
  border-inline-start:1px solid var(--line-soft);
  transition:opacity .25s var(--ease-soft);
}
.sc-date-side .sc-day{ font-size:18px }
.sc-date-side .sc-mon{ font-size:13.5px; color:var(--txt-dim) }
.sidebar:not(.is-open) .sc-date-side{
  flex:none; width:0; border:0; opacity:0; overflow:hidden; pointer-events:none;
}

.sc-under{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .42s var(--ease-out), opacity .3s ease }
.sc-under-in{ overflow:hidden; min-height:0 }
.sidebar.is-open .sc-under{ grid-template-rows:0fr; opacity:0 }
.sc-date-stack{ margin-inline-start:var(--sc-pad); margin-top:.55rem; padding-top:.5rem; border-top:1px solid var(--line-soft) }

/* عکس کوچک و بی‌نام در ریل؛ اندازه‌اش با باز شدن پنل نرم بزرگ می‌شود */
.profile-avatar{ transition:width .35s var(--ease-out), height .35s var(--ease-out) }
.sidebar:not(.is-open) .profile-avatar{ width:34px; height:34px }
.sidebar:not(.is-open) .profile-name,
.sidebar:not(.is-open) .profile-role{ display:none }
.sidebar:not(.is-open) .side-profile{ padding-inline:.4rem }
.sidebar:not(.is-open) .profile-link{ padding:.35rem 0 }

/* عکس و نام کاربر کلیک‌پذیرند و به تب «مدیریت حساب» می‌روند */
.profile-link{
  display:block; border-radius:16px; padding:.5rem .25rem; cursor:pointer;
  border:1px solid transparent;
  transition:background .25s var(--ease-soft), border-color .25s var(--ease-soft),
             transform .3s var(--ease-out);
}
.profile-link:hover{ background-color:var(--surface-4); border-color:var(--line); transform:translateY(-2px) }
.profile-link:active{ transform:translateY(0) scale(.985) }
.profile-link:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:2px }
.profile-link.active{ background-color:var(--gold-soft); border-color:var(--gold-ring) }
.profile-link.active .profile-name{ color:var(--gold-ink) }
.profile-avatar{ width:var(--avatar-size); height:var(--avatar-size) }
.profile-name{ color:var(--txt); font-weight:700; font-size:14px }
.profile-role{ color:var(--txt-mute); font-size:11.5px; margin-top:.12rem }

.burger{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:11px;
  color:var(--txt); cursor:pointer;
  background-color:var(--surface-3); border:1px solid var(--line);
  transition:background .2s var(--ease-soft), transform .25s var(--ease-out), border-color .2s, color .2s;
}
.burger:hover{ background-color:var(--surface-4); border-color:var(--line-strong) }
.burger:active{ transform:scale(.92) }
.burger .bl{ transition:transform .4s var(--ease-out), opacity .25s ease; transform-origin:center }
/* سه‌خط = خودکار (با ماوس باز می‌شود)، ضربدر = سنجاق‌شده. باز شدنِ شناور شکل
   دکمه را عوض نمی‌کند تا معلوم بماند که با کلیک سنجاق می‌شود. */
.sidebar.pinned .burger .bl-1{ transform:translateY(5px) rotate(45deg) }
.sidebar.pinned .burger .bl-2{ opacity:0; transform:scaleX(.3) }
.sidebar.pinned .burger .bl-3{ transform:translateY(-5px) rotate(-45deg) }
.sidebar.pinned .burger{ color:var(--gold-ink); border-color:var(--gold-ring); background-color:var(--gold-soft) }

.nav-item{
  position:relative; display:flex; align-items:center; gap:.65rem;
  border-radius:11px; padding:.6rem .7rem; cursor:pointer;
  color:var(--txt-dim); font-size:13.5px; font-weight:500;
  transition:background .22s var(--ease-soft), color .22s, transform .22s var(--ease-out);
}
.nav-item:hover{ background-color:var(--surface-4); color:var(--txt); transform:translateX(-3px) }
.nav-item:active{ transform:translateX(-3px) scale(.985) }
.nav-item.active{ color:var(--gold-ink); background-color:var(--gold-soft) }
.nav-item.active::before{
  content:''; position:absolute; inset-inline-end:-9px; top:50%; translate:0 -50%;
  width:3px; height:60%; border-radius:99px; background-color:var(--gold);
  box-shadow:0 0 12px rgba(255,197,49,.8);
  animation:popIn .35s var(--ease-out) both;
}
.nav-label{ font-size:1.18em; font-weight:700; color:var(--txt-strong); letter-spacing:.005em }
.nav-item.active .nav-label{ color:var(--gold-ink) }

/* در تب‌های دارای زیرمنو فقط خودِ نوشته لینک است و بقیهٔ کادر آکاردئون را
   باز و بسته می‌کند؛ hover فقط رنگ را طلایی می‌کند — بدون زیرخط. */
.nav-link{
  border-radius:6px;
  transition:color .2s var(--ease-soft);
}
.nav-link:hover{ color:var(--gold-ink) }
.nav-link:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:2px }

.sub-item{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  border-radius:9px; padding:.44rem .8rem .44rem .6rem; cursor:pointer;
  color:var(--txt-dim); font-size:13.5px;
  transition:background .2s var(--ease-soft), color .2s, padding-inline-end .25s var(--ease-out);
}
.sub-item:hover{ background-color:var(--surface-4); color:var(--txt); padding-inline-end:1rem }
.sub-item.active{ color:var(--txt); background-color:var(--surface-4); font-weight:600 }
.sub-item.is-basket.active{ color:var(--gold-ink); background-color:var(--gold-soft) }

/* سبدها و دسته بندی‌ها: نقطهٔ رنگی پشت نام (سمت آغاز سطر)، نه در انتهای کادر */
.sub-item.has-dot{ justify-content:flex-start; gap:.6rem }
.sub-item.has-dot .dot{ width:8px; height:8px }

/* وقتی هنوز سبدی ثبت (یا دسته بندی‌ای تعریف) نشده — کلیکش به تب مربوط می‌برد */
.sub-item.is-basket-empty, .sub-item.is-sub-empty{
  color:var(--txt-mute); font-size:12.5px; font-style:italic;
  justify-content:flex-start;
}
.sub-rule{ border-inline-start:1px solid var(--line) }

/* آکاردئون — نام کلاس عمداً «acc-panel» است نه «collapse»:
   کلاس collapse در Tailwind یک ابزار داخلی با visibility:collapse است
   و محتوای زیرمنو را نامرئی می‌کند. */
.acc-panel{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:grid-template-rows .42s var(--ease-out), opacity .3s ease;
}
.acc-panel > .acc-inner{ overflow:hidden; min-height:0 }
.acc-panel.open{ grid-template-rows:1fr; opacity:1 }
.chev{ transition:transform .42s var(--ease-out) }
.chev.open{ transform:rotate(-180deg) }

/* -------------------------------- تب‌ها ---------------------------------- */
.tab{
  position:relative; display:flex; align-items:center; gap:.5rem;
  padding:.62rem 1.15rem; border-radius:12px 12px 0 0; cursor:pointer;
  font-size:13.5px; font-weight:600; color:var(--txt-mute); white-space:nowrap;
  border:1px solid transparent; border-bottom:none;
  transition:color .25s var(--ease-soft), background .25s var(--ease-soft), transform .3s var(--ease-out);
}
.tab:hover{ color:var(--txt-dim); background-color:var(--surface-3) }
.tab.active{
  color:var(--gold-ink);
  background-image:linear-gradient(180deg, var(--surface-3), var(--surface));
  border-color:var(--line);
}
.tabs-bar{ border-bottom:1px solid var(--line) }

.tab-ink{
  position:absolute; bottom:0; height:2px; width:0; border-radius:99px;
  background-image:linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow:0 0 14px rgba(255,197,49,.75);
  transition:transform .45s var(--ease-out), width .45s var(--ease-out);
  pointer-events:none;
}

/* ------------------------------- دکمه‌ها --------------------------------- */
.btn-gold{
  background-image:linear-gradient(180deg,#FFD65A,#F5B60F);
  color:var(--on-gold); font-weight:800; cursor:pointer;
  box-shadow:0 6px 22px -8px rgba(255,197,49,.7), 0 1px 0 rgba(255,255,255,.4) inset;
  transition:transform .25s var(--ease-out), box-shadow .3s var(--ease-out), filter .25s;
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(255,197,49,.85); filter:brightness(1.05) }
.btn-gold:active{ transform:translateY(0) scale(.97) }

.btn-ghost{
  border:1px solid var(--line); background-color:var(--surface-3); color:var(--txt-dim); cursor:pointer;
  transition:border-color .25s, background .25s, color .25s, transform .25s var(--ease-out);
}
.btn-ghost:hover{ border-color:var(--line-strong); background-color:var(--surface-4); color:var(--txt) }
.btn-ghost:active{ transform:scale(.97) }

/* دکمهٔ کار برگشت‌ناپذیر (حذف) در مودال تأیید */
.btn-danger{
  border:1px solid rgba(239,68,68,.4); background-color:rgba(239,68,68,.14); color:var(--down);
  font-weight:800; cursor:pointer;
  transition:background .25s var(--ease-soft), color .25s, border-color .25s, transform .25s var(--ease-out), box-shadow .3s;
}
.btn-danger:hover{ background-color:var(--down); border-color:transparent; color:#fff; box-shadow:0 10px 26px -10px rgba(239,68,68,.8) }
.btn-danger:active{ transform:scale(.97) }
.btn-danger:focus-visible{ outline:2px solid rgba(239,68,68,.6); outline-offset:2px }

.icon-btn{
  display:grid; place-items:center; border-radius:8px; color:var(--txt-mute); cursor:pointer;
  transition:background .18s var(--ease-soft), color .18s, transform .18s var(--ease-out);
}
.icon-btn:hover{ background-color:var(--surface-4); color:var(--txt) }
.icon-btn:active{ transform:scale(.9) }

/* ستون «عملیات» جدول‌های جزئیات سبد و دیدبان استراتژی‌ها (جای منوی سه‌نقطه):
   هر کار یک دکمهٔ آیکنیِ جدا که با هاور رنگِ کار خودش را می‌گیرد */
.ops-cell{ display:flex; align-items:center; justify-content:center; gap:.25rem }
.op-btn{
  display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px; cursor:pointer;
  color:var(--txt-mute); background-color:transparent; border:1px solid transparent;
  transition:background .18s var(--ease-soft), color .18s, border-color .18s, transform .18s var(--ease-out);
}
.op-btn svg{ width:16px; height:16px }
.op-btn:hover{ color:var(--txt); background-color:var(--surface-4); border-color:var(--line) }
.op-btn:active{ transform:scale(.9) }
.op-btn:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:1px }
.op-btn.op-send:hover { color:var(--gold-ink); background-color:var(--gold-soft); border-color:var(--gold-ring) }
.op-btn.op-close:hover{ color:var(--down); background-color:rgba(239,68,68,.12); border-color:rgba(239,68,68,.28) }
/* زنگولهٔ «هشدار یادآوری» (shared/alerts.js): با شرطِ روشن طلایی می‌ماند و
   شمارِ شرط‌های روشن گوشه‌اش می‌نشیند */
.op-btn.op-bell{ position:relative }
.op-btn.op-bell:hover,
.op-btn.op-bell.on{ color:var(--gold-ink); background-color:var(--gold-soft); border-color:var(--gold-ring) }
.op-badge{
  position:absolute; top:-5px; inset-inline-start:-5px;
  min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  display:grid; place-items:center;
  font-size:9.5px; font-weight:800; line-height:1; color:var(--on-gold);
  background-image:linear-gradient(180deg,#FFD65A,#F5B60F);
  box-shadow:0 0 0 2px var(--surface);
}
.op-badge[hidden]{ display:none }

.ripple{ position:relative; overflow:hidden }
.ripple > .rp{
  position:absolute; border-radius:99px; transform:scale(0); pointer-events:none;
  background-image:radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0) 65%);
  animation:rippleGo .62s var(--ease-out) forwards;
}
:root[data-theme="light"] .ripple > .rp{
  background-image:radial-gradient(circle, rgba(24,28,36,.18), rgba(24,28,36,0) 65%);
}
@keyframes rippleGo{ to{ transform:scale(2.6); opacity:0 } }

/* -------------------------------- جدول ----------------------------------- */
.tbl{ width:100%; border-collapse:separate; border-spacing:0 }
.tbl th{
  font-size:12.5px; font-weight:600; color:var(--txt-dim);
  background-color:var(--elev); padding:.7rem .9rem; white-space:nowrap;
  border-bottom:1px solid var(--line); border-inline-start:1px solid var(--line-soft);
}
.tbl th:last-child{ border-inline-start:none }
.tbl td{
  font-size:13px; padding:.72rem .9rem; white-space:nowrap; color:var(--txt-dim);
  border-bottom:1px solid var(--line-soft); border-inline-start:1px solid var(--line-soft);
  transition:background .22s var(--ease-soft);
}
.tbl td:last-child{ border-inline-start:none }
.tbl tbody tr{ transition:background .22s var(--ease-soft), transform .3s var(--ease-out) }
.tbl tbody tr:hover td{ background-color:var(--surface-3) }
.tbl tbody tr:hover{ transform:translateX(-2px) }
.tbl-wrap{ border:1px solid var(--line); border-radius:12px; overflow:hidden }

/* تراکم روان با عرض مانیتور: جدول‌های پرستون (جزئیات سبد ۲۲ ستون، دیدبان،
   پاهای ساخت استراتژی) روی ۲۴ اینچ (۱۹۲۰، یا ۱۵۳۶ با بزرگ‌نمایی ۱۲۵٪ ویندوز)
   و سرفیس (۱۲۸۰) جا نمی‌شدند. فاصلهٔ افقی خانه‌ها و قلمشان با عرض صفحه نرم
   کم و زیاد می‌شود — ۱۲۸۰≈۷px، ۱۵۳۶≈۸.۵px، ۱۹۲۰≈۱۰.۵px، و از ۲۵۶۰ به بالا
   همان ۱۴.۴px قبلی؛ قلم ۱۲ تا ۱۳px. مانیتور بزرگ همان چیدمان قبلی را دارد. */
.tbl th{ padding-inline:clamp(.45rem, .55vw, .9rem); font-size:clamp(11.5px, 10px + .13vw, 12.5px) }
.tbl td{ padding-inline:clamp(.45rem, .55vw, .9rem); font-size:clamp(12px, 10.4px + .13vw, 13px) }

/* ستون اول ثابت: در جدولی که افقی می‌لغزد (.tbl-sticky) نام نماد/قرارداد
   سر جایش می‌ماند تا معلوم باشد هر عدد مال کدام ردیف است. سایت راست‌به‌چپ
   است، پس «شروع» = راست و خط جداکننده سمت چپ همان خانه. */
.tbl-sticky th:first-child,
.tbl-sticky td:first-child{
  position:sticky; inset-inline-start:0; z-index:1;
  box-shadow:inset 1px 0 0 var(--line);
}
.tbl-sticky td:first-child{ background-color:var(--surface) }
.tbl-sticky th:first-child{ background-color:var(--elev) }
.tbl.tbl-sticky thead th:first-child{ z-index:3 }          /* بالای سربرگ‌های چسبان دیگر */
.tbl.tbl-sticky tbody tr:hover td:first-child{ background-color:var(--surface-3) }

/* حالت فشرده (از تنظیمات) — همیشه از تراکم روانِ همان عرض فشرده‌تر */
:root.compact .tbl th{ padding:.5rem clamp(.4rem, .45vw, .7rem) }
:root.compact .tbl td{ padding:.46rem clamp(.4rem, .45vw, .7rem); font-size:min(12.5px, clamp(11.5px, 10px + .13vw, 12.5px)) }

.cell-strong{ color:var(--txt); font-weight:600 }
.chip{
  display:inline-flex; align-items:center; gap:.34rem;
  padding:.2rem .58rem; border-radius:7px; font-size:11.5px; font-weight:700;
  border:1px solid transparent;
}
.dot{ width:9px; height:9px; border-radius:99px; flex:none }

/* ------------------------------ پاپ‌آورها -------------------------------- */
.pop{
  position:absolute; z-index:60; transform-origin:top center;
  background-color:var(--surface-2); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--pop-shadow);
  animation:popIn .26s var(--ease-out) both;
}
.pop.hidden{ display:none }
.pop-row{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.4rem .5rem; border-radius:9px; font-size:12.5px; color:var(--txt-dim);
  transition:background .18s var(--ease-soft), color .18s;
}
.pop-row:hover{ background-color:var(--surface-4); color:var(--txt) }
.pop-head{ padding:.35rem .5rem; font-size:11px; color:var(--txt-mute) }

/* -------------------------- مودال نام‌گذاری ------------------------------ */
.modal-backdrop{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background-color:rgba(0,0,0,.72);
  backdrop-filter:blur(6px);
  animation:fadeIn .22s ease both;
}
:root[data-theme="light"] .modal-backdrop{ background-color:rgba(27,32,41,.35) }
.modal-backdrop.hidden{ display:none }

/* پشتِ پردهٔ تار هیچ انیمیشنی نمی‌چرخد. backdrop-filter یک بار حساب نمی‌شود:
   هر فریمی که زیرش چیزی عوض شود کل پرده (تمام صفحه) از نو تار می‌شود. سنجش
   ۱۴۰۵/۰۷/۱۲ (Edge بی شتاب سخت‌افزاری، DPR 2، صفحهٔ builder): مودال تار با نوار
   قیمتِ در حرکت ۳٫۷ فریم در ثانیه، با نوار ایستاده ولی یک نقطهٔ ۷ پیکسلیِ
   چشمک‌زن پشتش ۸٫۶، بی هیچ حرکتی ۵۹. پس تا پرده باز است هر انیمیشنِ داخل
   appFrame می‌ایستد و با بسته شدنش از همان‌جا ادامه می‌دهد. پرده‌ها روی body
   می‌نشینند، بیرون appFrame؛ جز پنجرهٔ نمودار در حالت تمام‌صفحه که داخل
   همان عنصر تمام‌صفحه باز می‌شود — :not برای اوست. !important برای
   انیمیشن‌هایی است که JS در style خود عنصر می‌گذارد. */
:root:has(.modal-backdrop:not(.hidden), .drawer-backdrop:not(.hidden), .adm-drawer-wrap:not(.hidden), .tc-modal-back, .oa-maint)
  #appFrame :not(.tc-modal-back, .tc-modal-back *){
  animation-play-state:paused !important;
}

.modal{
  width:min(92vw, 420px);
  background-color:var(--surface);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--pop-shadow);
  padding:1.4rem 1.4rem 1.15rem;
  animation:modalIn .34s var(--ease-out) both;
}
.modal.shake{ animation:shake .42s both }
.modal-title{ font-size:17px; font-weight:800; color:var(--txt-strong); margin-bottom:.5rem }
.modal-desc{ font-size:12.8px; line-height:1.85; color:var(--txt-dim); margin-bottom:1.15rem }
.field-label{ display:block; font-size:12.5px; font-weight:600; color:var(--txt); margin-bottom:.45rem }

.field-input{
  width:100%; border-radius:11px; padding:.65rem .85rem;
  background-color:var(--surface-3); border:1px solid var(--line); color:var(--txt);
  font-size:13.5px; font-family:inherit; outline:none;
  transition:border-color .22s var(--ease-soft), box-shadow .22s var(--ease-soft), background .22s;
}
.field-input::placeholder{ color:var(--txt-mute) }
.field-input:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ring) }
.field-input.invalid{ border-color:var(--down); box-shadow:0 0 0 3px rgba(239,68,68,.14) }

.field-error{
  min-height:1rem; margin-top:.4rem;
  font-size:11.5px; color:var(--down); opacity:0;
  transition:opacity .2s ease;
}
.field-error.show{ opacity:1 }
.modal-actions{ display:flex; gap:.6rem; margin-top:1.1rem }
.modal-actions > *{ flex:1; border-radius:11px; padding:.62rem 1rem; font-size:13px }

/* ========================================================================== */
/*                     کارت «روز اعمال» (مشترک همهٔ تب‌ها)                      */
/* ========================================================================== */
/* نصفِ عرض و نصفِ ارتفاع صفحه، وسط — روی همان .modal-backdrop می‌نشیند. */
.ex-modal{
  width:50vw; height:50vh; min-width:0;
  display:flex; flex-direction:column;
  background-color:var(--surface);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--pop-shadow);
  animation:modalIn .34s var(--ease-out) both;
  overflow:hidden;
}
.ex-head{
  display:flex; align-items:center; gap:.8rem;
  padding:.95rem 1.15rem; border-bottom:1px solid var(--line);
}
.ex-ico{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:12px;
  color:var(--gold-ink); background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.ex-ico svg{ width:20px; height:20px }
.ex-head-txt{ flex:1; min-width:0 }
.ex-title{ font-size:15.5px; font-weight:800; color:var(--txt-strong) }
.ex-sub{
  display:block; margin-top:.15rem;
  font-size:11.5px; color:var(--txt-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.ex-body{ flex:1; min-height:0; overflow:auto; padding:.9rem 1.15rem 1rem }

/* هر سبد یک بلوک: نام سبد و قدرت خریدش بالا، نمادهای امروزش زیرش */
.ex-basket{ margin-bottom:1rem }
.ex-basket:last-child{ margin-bottom:0 }
.ex-basket-head{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding-bottom:.45rem; margin-bottom:.55rem;
  border-bottom:1px dashed var(--line);
  font-size:12.5px; color:var(--txt-dim);
}
.ex-basket-name{ font-weight:700; color:var(--txt) }
.ex-basket-power{
  display:inline-flex; align-items:center; gap:.3rem;
  margin-inline-start:auto; white-space:nowrap;
}
.ex-basket-power .num{ font-variant-numeric:tabular-nums; color:var(--txt) }
.ex-basket-power.bad .num{ color:var(--down) }
/* نشانِ «زنده» کنار قدرت خریدی که همین حالا از کارگزاری آمده */
.ex-live{ display:inline-grid; place-items:center; color:var(--up); margin-inline-start:.15rem }
.ex-live svg{ width:12px; height:12px }

/* هر نماد یک سطر: متن سمت راست، موشک کاغذیِ همان نماد سمت چپ */
.ex-item{ display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0 }
.ex-item + .ex-item{ border-top:1px solid var(--line-soft) }
.ex-item-txt{ flex:1; min-width:0 }
.ex-lead{ font-size:13.5px; line-height:1.95; color:var(--txt) }
.ex-lead b{ font-weight:800; color:var(--gold-ink) }
.ex-detail{ font-size:11.5px; line-height:1.9; color:var(--txt-mute) }
/* وضعیتِ کارگزاری زیر هر نماد: «در سود» سبز، حالت درخواست و حجم قابل تسویه خنثی */
.ex-status{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.3rem }
.ex-badge{
  display:inline-flex; align-items:center;
  padding:.1rem .5rem; border-radius:999px;
  font-size:10.5px; line-height:1.7;
  color:var(--txt-dim); background-color:var(--surface-3); border:1px solid var(--line);
}
.ex-badge.itm{ color:var(--up); border-color:rgba(34,197,94,.35); background-color:rgba(34,197,94,.08) }
/* فهرست تسویه‌پذیرها از کارگزاری نیامد — سطرهای این سبد تأییدنشده‌اند */
.ex-basket-warn{
  margin:-.2rem 0 .5rem; padding:.4rem .6rem; border-radius:9px;
  font-size:11px; line-height:1.8; color:var(--gold-ink);
  background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.ex-item-send{
  flex:none; width:34px; height:34px; margin-top:.2rem;
  border:1px solid var(--line); border-radius:10px;
  background-color:var(--surface-3); color:var(--gold-ink);
}
.ex-item-send svg{ width:16px; height:16px }
.ex-item-send:hover{ border-color:var(--gold); background-color:var(--gold-soft); color:var(--gold-ink) }
.ex-item-send[disabled]{ opacity:.4; pointer-events:none }
.ex-item-send.busy{ opacity:.9 }
.ex-item-send.busy svg{ animation:exPulse 1s ease-in-out infinite }
@keyframes exPulse{ 50%{ opacity:.3 } }

/* جمعِ سبد: کسری قرمز، کفایت سبز */
.ex-sum{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin-top:.55rem; font-size:12.5px; color:var(--txt-dim);
}
.ex-sum b{ font-weight:800 }
.ex-sum.short b{ color:var(--down) }
.ex-sum.okay  b{ color:var(--up) }

/* پابرگ: یادداشت سمت راست، دکمهٔ «اعمال حداکثری» سمت چپ (flex-end در RTL) */
.ex-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.15rem; border-top:1px solid var(--line);
}
.ex-note{
  flex:1; min-width:0; font-size:11.5px; color:var(--txt-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ex-send{ flex:none; display:flex; align-items:center; gap:.45rem; border-radius:12px; padding:.6rem 1.1rem; font-size:13px }
.ex-send svg{ width:16px; height:16px }
.ex-send[disabled]{ opacity:.55; pointer-events:none }

/* ========================================================================== */
/*        کارت «هشدار یادآوری» (shared/alerts.js — مدیریت سبد و ساخت استراتژی)   */
/* ========================================================================== */
/* همان شکلِ کارت «فیلترهای استراتژی» دیدبان (.flt-*): سر کارت .ex-head، هر
   سطر یک شرط — کلید، شماره، ستون، عملگر، عدد، «اکنون»، حذف. کلاس‌ها جدا
   نام گرفته‌اند چون .flt-* مال استایل خودِ دیدبان (و پنل مدیریت) است. */
.al-modal{
  width:min(94vw, 900px); height:min(84vh, 640px); min-width:0;
  display:flex; flex-direction:column;
  background-color:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--pop-shadow); overflow:hidden;
  animation:modalIn .34s var(--ease-out) both;
}
.al-tools{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; padding:.75rem 1.15rem .55rem }
.al-hint{ flex:1; min-width:0; font-size:11.5px; color:var(--txt-mute); line-height:1.8 }
.al-add{ border-radius:11px; padding:.5rem 1.05rem; font-size:12.5px; flex:none }

.al-list{
  flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:.5rem; padding:.3rem 1.15rem 1rem;
}
.al-empty{ margin:auto; text-align:center; color:var(--txt-mute); font-size:13px; line-height:2; padding:2rem 1rem }

.al-row{
  display:grid;
  grid-template-columns:auto auto minmax(150px,1.4fr) minmax(80px,.5fr) minmax(130px,1fr) minmax(120px,.9fr) auto;
  align-items:center; gap:.7rem;
  padding:.6rem .75rem; border-radius:13px;
  background-color:var(--surface-3); border:1px solid var(--line);
  transition:background .2s var(--ease-soft), border-color .2s var(--ease-soft), opacity .2s;
}
.al-row.on{ background-color:var(--gold-soft); border-color:var(--gold-ring) }
.al-row:not(.on) .al-idx, .al-row:not(.on) .al-field, .al-row:not(.on) .al-now{ opacity:.6 }
.al-idx{
  width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  font-size:11.5px; font-weight:800; color:var(--txt-dim); background-color:var(--surface-4);
  transition:opacity .2s;
}
.al-row.on .al-idx{ color:var(--gold-ink); background-color:var(--surface) }
.al-row .switch{ width:42px; height:24px }
.al-row .switch .knob{ width:17px; height:17px; inset-inline-end:3px }
.al-row .switch[aria-checked="true"] .knob{ inset-inline-end:calc(100% - 20px) }

.al-field{
  width:100%; border-radius:10px; padding:.5rem .75rem;
  background-color:var(--surface); border:1px solid var(--line); color:var(--txt);
  font-size:12.8px; font-weight:600; font-family:inherit; outline:none;
  transition:border-color .22s var(--ease-soft), box-shadow .22s var(--ease-soft), opacity .2s;
}
.al-field:focus{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ring) }
select.al-field{
  cursor:pointer; appearance:none; padding-inline-end:1.9rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-size:14px; background-position:left .6rem center;
}
select.al-op{ text-align:center; font-size:15px; font-weight:800; padding-inline:.5rem 1.6rem }
.al-val{ position:relative; display:flex; align-items:center }
.al-val input{ direction:ltr; text-align:left; padding-inline-end:2.8rem }
.al-val input::-webkit-outer-spin-button, .al-val input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.al-val input[type=number]{ -moz-appearance:textfield }
.al-unit{
  position:absolute; inset-inline-start:.7rem; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; color:var(--txt-mute); pointer-events:none;
}
.al-val input:placeholder-shown ~ .al-unit{ opacity:.6 }
.al-field.invalid{ border-color:var(--down); box-shadow:0 0 0 3px rgba(239,68,68,.14) }

/* مقدار همین لحظهٔ همان ستون — تا کاربر بداند عددش نسبت به کجای بازار است;
   سبز یعنی شرط همین حالا برقرار است (با بستن کارت اعلان می‌آید) */
.al-now{
  display:flex; align-items:baseline; justify-content:center; gap:.4rem; min-width:0;
  padding:.45rem .6rem; border-radius:10px; white-space:nowrap; overflow:hidden;
  background-color:var(--surface); border:1px dashed var(--line);
  transition:border-color .2s, background .2s, opacity .2s;
}
.al-now-lbl{ font-size:10.5px; font-weight:700; color:var(--txt-mute) }
.al-now-v{ font-size:12.5px; font-weight:700; color:var(--txt); overflow:hidden; text-overflow:ellipsis }
.al-now .al-u{ font-size:10.5px; font-weight:600; color:var(--txt-mute) }
.al-now.hit{ border-style:solid; border-color:rgba(34,197,94,.45); background-color:rgba(34,197,94,.08) }
.al-now.hit .al-now-v{ color:var(--up) }

.al-del{ color:var(--txt-mute) }
.al-del:hover{ color:var(--down); background-color:rgba(239,68,68,.12) }

/* «برقرار شد …» زیر سطر، هم‌عرض کل سطر */
.al-meta{
  grid-column:1 / -1; display:flex; align-items:center; gap:.4rem;
  margin-top:-.15rem; font-size:11px; color:var(--txt-mute);
}
.al-meta svg{ width:12px; height:12px; flex:none; color:var(--gold-ink) }

.al-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem 1.15rem; border-top:1px solid var(--line);
}
.al-foot-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.2rem }
.al-count{ font-size:12px; color:var(--txt-dim) }
.al-count b{ color:var(--gold-ink); font-weight:800 }
.al-perm{ font-size:11px; line-height:1.7; color:var(--txt-mute) }
.al-perm::before{
  content:''; display:inline-block; width:7px; height:7px; border-radius:99px;
  margin-inline-end:.4rem; vertical-align:middle; background-color:var(--txt-mute);
}
.al-perm.ok::before{ background-color:var(--up); box-shadow:0 0 6px rgba(34,197,94,.7) }
.al-perm.off{ color:var(--gold-ink) }
.al-perm.off::before{ background-color:var(--down) }
.al-perm-btn{
  margin-inline-start:.3rem; padding:.12rem .55rem; border-radius:7px; cursor:pointer;
  font-size:11px; font-weight:700; font-family:inherit;
  color:var(--gold-ink); background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.al-perm-btn:hover{ background-color:var(--gold); color:var(--on-gold) }
.al-done{ flex:none; border-radius:11px; padding:.55rem 1.4rem; font-size:13px }

/* اعلانِ داخل صفحه — از توستِ معمولی ماندگارتر و با دکمهٔ بستن */
.toast.al-toast{
  align-items:flex-start; max-width:min(420px, calc(100vw - 44px)); cursor:pointer;
  border-color:var(--gold-ring); box-shadow:var(--pop-shadow), 0 0 0 1px var(--gold-ring);
}
.al-toast-ico{
  display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px;
  color:var(--gold-ink); background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.al-toast-ico svg{ width:16px; height:16px }
.al-toast-txt{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; line-height:1.75 }
.al-toast-txt b{ font-size:12.8px; font-weight:800; color:var(--txt-strong) }
.al-toast-txt span{ font-size:12px; color:var(--txt-dim); white-space:pre-line }
.al-toast-x{ flex:none; margin-inline-start:.2rem }
.al-toast-x svg{ width:14px; height:14px }

/* باریک: ردیف اول کلید · شماره · ستون · حذف، ردیف دوم عملگر · عدد، بعد «اکنون» */
@media (max-width: 900px){
  .al-modal{ width:94vw; height:88vh }
  .al-row{ grid-template-columns:auto auto 1fr auto; gap:.55rem }
  .al-row .al-del{ grid-row:1; grid-column:4 }
  .al-row .al-op { grid-column:1 / 3 }
  .al-row .al-val{ grid-column:3 / 5 }
  .al-row .al-now{ grid-column:1 / -1; justify-content:flex-start }
}

/* ========================================================================== */
/*               پاپ‌آپ «تمدید با ۱۰٪ تخفیف» (core.js، یک بار در هر ورود)       */
/* ========================================================================== */
.rn-modal{
  width:min(92vw, 470px);
  display:flex; flex-direction:column;
  background-color:var(--surface);
  border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--pop-shadow);
  animation:modalIn .34s var(--ease-out) both;
  overflow:hidden;
}
.rn-head{
  display:flex; align-items:center; gap:.8rem;
  padding:.95rem 1.15rem; border-bottom:1px solid var(--line);
}
.rn-ico{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:12px;
  color:var(--gold-ink); background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.rn-ico svg{ width:20px; height:20px }
.rn-head-txt{ flex:1; min-width:0 }
.rn-title{ font-size:15.5px; font-weight:800; color:var(--txt-strong) }
.rn-sub{ display:block; margin-top:.15rem; font-size:11.5px; color:var(--txt-mute) }
.rn-body{ padding:1rem 1.15rem .9rem }
.rn-desc{ margin:0; font-size:13px; line-height:1.95; color:var(--txt-dim) }
.rn-facts{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.85rem }
.rn-fact{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.3rem .65rem; border-radius:999px;
  font-size:11.5px; background-color:var(--surface-3); border:1px solid var(--line-soft);
}
.rn-fact-k{ color:var(--txt-mute) }
.rn-fact-v{ color:var(--txt); font-weight:700 }
.rn-off{
  padding:.3rem .7rem; border-radius:999px;
  font-size:11.5px; font-weight:800;
  color:var(--up); background-color:color-mix(in srgb, var(--up) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--up) 35%, transparent);
}
/* دکمه پایین-چپ: در صفحهٔ راست‌به‌چپ flex-end یعنی لبهٔ چپ */
.rn-foot{
  display:flex; justify-content:flex-end;
  padding:.8rem 1.15rem; border-top:1px solid var(--line);
}
.rn-go{
  display:inline-flex; align-items:center; gap:.45rem;
  border-radius:12px; padding:.6rem 1.2rem; font-size:13px; text-decoration:none;
}

/* پاپ‌آپِ پاسخ کارگزاری — روی خودِ کارت باز می‌شود و فقط پیام را می‌گوید */
.ex-pop-wrap{
  position:fixed; inset:0; z-index:210;
  display:grid; place-items:center;
  background-color:rgba(0,0,0,.5);
  animation:fadeIn .18s ease both;
}
:root[data-theme="light"] .ex-pop-wrap{ background-color:rgba(27,32,41,.3) }
.ex-pop-wrap.hidden{ display:none }
.ex-pop{
  width:min(92vw, 440px); max-height:70vh;
  display:flex; flex-direction:column;
  background-color:var(--surface-2);
  border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--pop-shadow);
  padding:1.1rem 1.2rem 1rem;
  animation:modalIn .28s var(--ease-out) both;
}
.ex-pop-title{ font-size:14.5px; font-weight:800; color:var(--txt-strong); margin-bottom:.7rem }
.ex-pop-list{ overflow:auto; min-height:0; display:flex; flex-direction:column; gap:.55rem }
.ex-pop-row{
  padding:.6rem .75rem; border-radius:11px;
  background-color:var(--surface-3); border:1px solid var(--line);
}
.ex-pop-row.ok { border-color:rgba(34,197,94,.35) }
.ex-pop-row.bad{ border-color:rgba(239,68,68,.35) }
.ex-pop-who{ font-size:11.5px; color:var(--txt-mute); margin-bottom:.2rem }
.ex-pop-msg{ font-size:13px; line-height:1.9; color:var(--txt) }
.ex-pop-actions{ display:flex; justify-content:flex-end; margin-top:.9rem }
.ex-pop-actions button{ border-radius:11px; padding:.55rem 1.3rem; font-size:13px }

@media (max-width: 860px){
  .ex-modal{ width:92vw; height:auto; max-height:86vh }
}

/* ========================================================================== */
/*                            کشوی تنظیمات                                    */
/* ========================================================================== */
.drawer-backdrop{
  position:fixed; inset:0; z-index:220;
  background-color:rgba(0,0,0,.6); backdrop-filter:blur(4px);
  animation:fadeIn .22s ease both;
}
:root[data-theme="light"] .drawer-backdrop{ background-color:rgba(27,32,41,.28) }
.drawer-backdrop.hidden{ display:none }

/* در RTL از سمت راست باز می‌شود */
.drawer{
  position:absolute; inset-block:0; inset-inline-start:0;
  width:min(92vw, 380px); display:flex; flex-direction:column;
  background-color:var(--surface); border-inline-end:1px solid var(--line);
  box-shadow:var(--pop-shadow);
  animation:drawerIn .38s var(--ease-out) both;
}
.drawer-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:1.05rem 1.15rem; border-bottom:1px solid var(--line-soft);
}
.drawer-title{ font-size:15px; font-weight:800; color:var(--txt-strong) }
.drawer-body{ flex:1; overflow-y:auto; padding:.85rem }
.drawer-foot{
  padding:.85rem 1.15rem; border-top:1px solid var(--line-soft);
  font-size:11px; color:var(--txt-mute); display:flex; justify-content:space-between;
}

.set-group-title{
  font-size:11px; font-weight:700; color:var(--txt-mute);
  padding:.55rem .55rem .35rem; letter-spacing:.02em;
}
.set-row{
  display:flex; align-items:center; gap:.85rem;
  padding:.8rem .75rem; border-radius:13px;
  border:1px solid var(--line); background-color:var(--surface-3);
  margin-bottom:.5rem;
  transition:border-color .22s var(--ease-soft), background .22s var(--ease-soft), transform .22s var(--ease-out);
}
.set-row:hover{ border-color:var(--line-strong); transform:translateX(-2px) }
.set-ico{
  display:grid; place-items:center; width:34px; height:34px; flex:none;
  border-radius:10px; color:var(--gold-ink);
  background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.set-text{ flex:1; min-width:0 }
.set-name{ font-size:13.5px; font-weight:700; color:var(--txt) }
.set-desc{ font-size:11.5px; color:var(--txt-mute); margin-top:.15rem; line-height:1.7 }

/* --------------------------- کلید روشن/خاموش ----------------------------- */
.switch{
  position:relative; flex:none; cursor:pointer;
  width:52px; height:29px; border-radius:99px; padding:0; border:1px solid var(--line-strong);
  background-color:var(--surface-4);
  transition:background .28s var(--ease-soft), border-color .28s var(--ease-soft), box-shadow .28s;
}
.switch .knob{
  position:absolute; top:50%; translate:0 -50%;
  inset-inline-end:3px;                       /* خاموش: سمت راست (RTL) */
  width:21px; height:21px; border-radius:99px;
  background-color:var(--txt-mute);
  transition:inset-inline-end .32s var(--ease-out), background .28s var(--ease-soft), transform .28s var(--ease-out);
}
.switch:hover .knob{ transform:translateY(-50%) scale(1.06) }
.switch[aria-checked="true"]{
  background-image:linear-gradient(180deg,#FFD65A,#F5B60F);
  border-color:transparent;
  box-shadow:0 6px 18px -6px rgba(255,197,49,.75);
}
.switch[aria-checked="true"] .knob{
  inset-inline-end:calc(100% - 24px);          /* روشن: سمت چپ */
  background-color:#141006;
}
.switch:active .knob{ transform:translateY(-50%) scale(.92) }

/* -------------------------------- توست ---------------------------------- */
#toastWrap{ position:fixed; bottom:22px; inset-inline-start:22px; z-index:300; display:flex; flex-direction:column; gap:.5rem }
.toast{
  display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; border-radius:12px;
  background-color:var(--surface-2); border:1px solid var(--line); color:var(--txt); font-size:13px;
  box-shadow:var(--pop-shadow); animation:slideStart .4s var(--ease-out) both;
}

/* ------------------------------- تقویم ----------------------------------- */
.cal-day{
  width:30px; height:28px; display:grid; place-items:center; border-radius:8px;
  font-size:12px; color:var(--txt-dim); cursor:pointer;
  transition:background .18s, color .18s, transform .18s var(--ease-out);
}
.cal-day:hover{ background-color:var(--surface-4); color:var(--txt); transform:scale(1.08) }
.cal-day.sel{ background-color:var(--gold); color:var(--on-gold); font-weight:800 }
.cal-day.mute{ opacity:.22; pointer-events:none }
.cal-head{ color:var(--txt); font-weight:700; font-size:12.5px }
.cal-dow{ color:var(--txt-mute); font-size:10px }
.cal-foot{ border-top:1px solid var(--line); color:var(--txt-mute); font-size:11px }

/* ------------------------ حالت خالی (تب‌های آماده‌نشده) ------------------ */
.empty-state{ flex:1; display:grid; place-items:center; padding:2rem }
.empty-card{
  text-align:center; max-width:430px; padding:2.6rem 2rem;
  border:1px dashed var(--line-strong); border-radius:18px; background-color:var(--surface-3);
}
.empty-icon{
  display:grid; place-items:center; width:62px; height:62px; margin:0 auto 1.1rem;
  border-radius:18px; color:var(--gold-ink);
  background-color:var(--gold-soft); border:1px solid var(--gold-ring);
}
.empty-title{ font-size:16px; font-weight:800; color:var(--txt-strong); margin-bottom:.55rem }
.empty-desc { font-size:12.8px; line-height:1.95; color:var(--txt-dim) }

/* --------------------------- کمکی‌های متن -------------------------------- */
.t-strong{ color:var(--txt-strong) }
.t      { color:var(--txt) }
.t-dim  { color:var(--txt-dim) }
.t-mute { color:var(--txt-mute) }
.t-gold { color:var(--gold-ink) }
.t-up   { color:var(--up) }
.t-down { color:var(--down) }
.bg-up-solid  { background-color:var(--up) }
.bg-down-solid{ background-color:var(--down) }

/* پل ارتباطی با ابزارهای رنگی Tailwind که در نشانه‌گذاری استفاده شده‌اند.
   ویژگی [data-theme] باعث می‌شود بدون !important بر آن‌ها مقدم شوند. */
:root[data-theme="light"] .text-zinc-50,
:root[data-theme="light"] .text-zinc-100,
:root[data-theme="light"] .text-zinc-200{ color:var(--txt) }
:root[data-theme="light"] .text-zinc-300,
:root[data-theme="light"] .text-zinc-400{ color:var(--txt-dim) }
:root[data-theme="light"] .text-zinc-500,
:root[data-theme="light"] .text-zinc-600{ color:var(--txt-mute) }
:root[data-theme="light"] .text-gold-500{ color:var(--gold-ink) }

/* ------------------------- دسترسی‌پذیری / فوکوس -------------------------- */
:where(button,[tabindex],input,a):focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:10px;
}

/* هنگام تعویض تم، گذارها لحظه‌ای خاموش می‌شوند.
   اگر background-color در حال گذار باشد و همان لحظه توکن رنگ عوض شود،
   مقدار قدیمی گیر می‌کند و پس‌زمینه تغییر نمی‌کند؛ ضمناً بدون این کار
   نیمی از صفحه با تأخیر رنگ عوض می‌کند و پرش دیده می‌شود. */
:root.theme-switching *,
:root.theme-switching *::before,
:root.theme-switching *::after{
  transition:none !important;
}

/* خاموش کردن انیمیشن‌ها از تنظیمات، یا خواستهٔ سیستم کاربر */
:root.no-anim *,
:root.no-anim *::before,
:root.no-anim *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ==========================================================================
   کارت نماد — کادر اطلاعات قرارداد / دارایی پایه
   ساخت استراتژی (#infoPanel) و کارت نمادِ بقیهٔ تب‌ها (shared/symbol-card.js)
   ========================================================================== */
.info-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem;
  padding-bottom:.8rem; margin-bottom:.85rem; border-bottom:1px solid var(--line-soft);
}
.info-title{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:14px; font-weight:800; color:var(--txt-strong) }
/* عنوان کارت («مشخصات قرارداد») و بعد از خط جداکننده نماد */
.info-cap{ font-size:14px; font-weight:800; color:var(--txt-strong) }
.info-cap + .info-sym{
  padding-inline-start:.6rem; border-inline-start:1px solid var(--line);
  color:var(--gold-ink); font-size:13.5px;
}
.info-sub{ font-size:11.5px; color:var(--txt-mute); font-weight:500 }
/* واحدِ کنار عدد در یک خانه («۲۵ تقویمی | ۱۷ معاملاتی») و خط بینشان */
.info-u{ font-size:10.5px; font-weight:500; color:var(--txt-mute) }
.info-sep{ display:inline-block; width:1px; height:.85em; margin:0 .45rem; vertical-align:-.1em; background-color:var(--line) }
.info-part{ white-space:nowrap }       /* خانهٔ باریک فقط سرِ خطِ جداکننده می‌شکند */

/* نوار وضعیت قرارداد کنار عنوان */
.info-badges{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem }
.info-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.24rem .6rem; border-radius:8px;
  font-size:11px; font-weight:700;
  border:1px solid var(--line); background-color:var(--surface-3); color:var(--txt-dim);
}
.info-badge.itm { color:var(--up);   background-color:rgba(34,197,94,.12);  border-color:rgba(34,197,94,.3) }
.info-badge.otm { color:var(--down); background-color:rgba(239,68,68,.12);  border-color:rgba(239,68,68,.3) }
.info-badge.atm { color:var(--gold-ink); background-color:var(--gold-soft); border-color:var(--gold-ring) }
.info-badge.ime { color:var(--gold-ink); background-color:var(--gold-soft); border-color:var(--gold-ring) }

/* گروه‌های اطلاعاتی — عنوان رنگی و زیرش شبکهٔ کلید/مقدار */
.info-groups{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:.9rem }
.info-group{ border:1px solid var(--line-soft); border-radius:12px; background-color:var(--surface-3); padding:.75rem .8rem }
.info-group-title{
  font-size:12px; font-weight:800; color:var(--gold-ink);
  padding-bottom:.5rem; margin-bottom:.55rem; border-bottom:1px solid var(--line-soft);
}
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); gap:.45rem }
.info-item{
  display:flex; flex-direction:column; gap:.22rem;
  padding:.48rem .6rem; border-radius:9px;
  background-color:var(--surface); border:1px solid var(--line-soft);
}
.info-k{ font-size:10.5px; color:var(--txt-mute) }
.info-v{ font-size:12.5px; font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums }
.info-v.up  { color:var(--up) }
.info-v.down{ color:var(--down) }
/* خانهٔ «مشاهده چارت» (symbol-card.js: chartBox) — هم‌اندازهٔ بقیه، ولی پیوند */
.info-item.info-act{
  flex-direction:row; align-items:center; justify-content:center; gap:.4rem;
  font-size:12.5px; font-weight:800; color:var(--gold-ink); text-decoration:none;
  border-color:var(--gold-ring); background-color:var(--gold-soft);
  transition:background-color .15s ease, border-color .15s ease;
}
.info-item.info-act svg{ width:16px; height:16px; flex:none }
.info-item.info-act:hover{ border-color:var(--gold); background-color:var(--surface-4) }
.info-item.info-act:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:1px }

/* حقیقی و حقوقی (symbol-card.js: clientTypeGroup) — طرح کاربر: خرید راست،
   فروش چپ، نوع وسط؛ از وسط به بیرون درصد، حجم، تعداد. کادرِ باریک همان
   عددها را دو جدولِ زیرِ هم نشان می‌دهد. اندازهٔ حروف با پهنای خودِ کادر
   (cqi) کمی کوچک می‌شود تا عددهای پنج‌رقمی هم در سه ستونِ کارت جا شوند. */
.ct-group{ container-type:inline-size }
.ct-wide{
  display:grid; grid-template-columns:auto 1fr auto auto auto 1fr auto;
  row-gap:.4rem; align-items:stretch; font-variant-numeric:tabular-nums;
}
.ct-narrow{ display:none }
.ct-h{ font-size:10.5px; font-weight:700; padding:0 .4rem .1rem }
.ct-wide .ct-h{ grid-column:span 3 }
.ct-h.ct-b{ color:var(--up) }
.ct-h.ct-s{ color:var(--down); text-align:left }
.ct-c{
  display:flex; align-items:center; white-space:nowrap;
  padding:.42rem .25rem; font-size:clamp(9.5px, 3.1cqi, 11px); color:var(--txt-mute);
}
.ct-c.ct-b{ background-color:rgba(34,197,94,.07) }
.ct-c.ct-s{ background-color:rgba(239,68,68,.07) }
.ct-c.ct-p{ font-weight:800; color:var(--txt-strong); font-size:clamp(10.5px, 3.5cqi, 12px) }
.ct-wide .ct-v{ justify-content:center }
.ct-wide .ct-b.ct-n{ padding-inline-start:.45rem }
.ct-wide .ct-s.ct-n{ padding-inline-end:.45rem }
.ct-wide .ct-b.ct-p{ padding-inline-end:.4rem }
.ct-wide .ct-s.ct-p{ padding-inline-start:.4rem }
/* هر نیمه یک نوارِ گرد: خرید از تعداد (راست) تا درصد، فروش از درصد تا تعداد (چپ) */
.ct-wide .ct-b.ct-n{ border-start-start-radius:9px; border-end-start-radius:9px }
.ct-wide .ct-b.ct-p{ border-start-end-radius:9px; border-end-end-radius:9px }
.ct-wide .ct-s.ct-p{ border-start-start-radius:9px; border-end-start-radius:9px }
.ct-wide .ct-s.ct-n{ border-start-end-radius:9px; border-end-end-radius:9px; justify-content:flex-end }
.ct-l{
  display:flex; align-items:center; justify-content:center;
  padding:0 .35rem; font-size:clamp(10px, 3.4cqi, 11.5px); font-weight:700; color:var(--txt-dim);
}
@container (max-width: 300px){
  .ct-wide{ display:none }
  .ct-narrow{ display:flex; flex-direction:column; gap:.65rem }
  .ct-side{ display:grid; grid-template-columns:auto auto 1fr auto; row-gap:.35rem }
  .ct-side .ct-h{ grid-column:1 / -1; text-align:start; padding-inline:0 }
  .ct-side .ct-l{ justify-content:flex-start; padding-inline:0 .7rem }
  .ct-side .ct-p{ border-start-start-radius:9px; border-end-start-radius:9px }
  .ct-side .ct-v{ justify-content:center }
  .ct-side .ct-n{ border-start-end-radius:9px; border-end-end-radius:9px; justify-content:flex-end }
}

/* «تابلو معاملات» (symbol-card.js: bookHtml) — مثل تابلوی TSETMC: خرید راست،
   فروش چپ، دو قیمت وسط کنار هم؛ از وسط به بیرون قیمت، حجم، تعداد. نوارِ پشتِ
   هر سطر (--w) حجمِ آن پله است نسبت به بزرگ‌ترین پلهٔ هر دو سمت و از وسط
   (قیمت) به بیرون کشیده می‌شود. حقیقی و حقوقی زیرش، با همان جدول .ct-* .
   خودِ گروه ظرفِ container query است تا هر دو جدول با پهنای کادر کوچک شوند. */
.ob-group{ container-type:inline-size }
.ob{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem; font-variant-numeric:tabular-nums }
.ob-side{ display:flex; flex-direction:column; gap:.22rem; min-width:0 }
.ob-h, .ob-r{ display:grid; align-items:center; column-gap:.3rem; padding:0 .45rem; white-space:nowrap }
.ob-b .ob-h, .ob-b .ob-r{ grid-template-columns:minmax(1.4em, auto) 1fr auto }
.ob-s .ob-h, .ob-s .ob-r{ grid-template-columns:auto 1fr minmax(1.4em, auto) }
.ob.no-n .ob-b .ob-h, .ob.no-n .ob-b .ob-r{ grid-template-columns:1fr auto }
.ob.no-n .ob-s .ob-h, .ob.no-n .ob-s .ob-r{ grid-template-columns:auto 1fr }
.ob.no-n .ob-n{ display:none }
.ob-h{ font-size:10.5px; font-weight:700; color:var(--txt-mute); padding-bottom:.05rem }
.ob-b .ob-h .ob-p{ color:var(--up) }
.ob-s .ob-h .ob-p{ color:var(--down) }
.ob-r{
  position:relative; isolation:isolate; min-height:26px; border-radius:8px;
  font-size:clamp(9.5px, 3.1cqi, 11px); color:var(--txt-mute);
}
.ob-b .ob-r{ background-color:rgba(34,197,94,.06) }
.ob-s .ob-r{ background-color:rgba(239,68,68,.06) }
.ob-r::before{ content:''; position:absolute; inset-block:0; width:var(--w, 0%); z-index:-1; border-radius:8px }
.ob-b .ob-r::before{ inset-inline-end:0; background-color:rgba(34,197,94,.17) }
.ob-s .ob-r::before{ inset-inline-start:0; background-color:rgba(239,68,68,.17) }
.ob-r.empty{ opacity:.55 }
.ob-v{ text-align:center; color:var(--txt) }
.ob-r .ob-p{ font-weight:800; font-size:clamp(10.5px, 3.4cqi, 12px) }
.ob-b .ob-r .ob-p{ color:var(--up) }
.ob-s .ob-r .ob-p{ color:var(--down) }
.ob-b .ob-n, .ob-s .ob-p{ text-align:start }
.ob-b .ob-p, .ob-s .ob-n{ text-align:end }
.ob-note{ margin-top:.4rem; font-size:10.5px; color:var(--txt-mute) }
/* کارت قرارداد: آخرین/پایانی، حجم و ارزش زیرِ پنج خط سفارش */
.ob-facts{ margin-top:.7rem }
/* زیرعنوانِ «حقیقی و حقوقی» داخل همان گروه (.info-sub نامِ کنار نمادِ سرِ کارت است) */
.info-subhead{
  font-size:11px; font-weight:800; color:var(--txt-dim);
  margin:.75rem 0 .5rem; padding-top:.6rem; border-top:1px dashed var(--line-soft);
}
@container (max-width: 250px){
  .ob{ grid-template-columns:1fr }
}

/* خط قیمت پایین کارت (symbol-card.js: priceLine) — چپ‌به‌راست: کمترین چپ،
   بیشترین راست. زیرِ قیمت دیروز قرمز، بالایش سبز (--pl-y جای دیروز است). */
.info-line{ margin-top:1.1rem; direction:ltr }
.pl-track{
  /* کم‌رنگِ هر سمت: بخشی از آستانهٔ روز که امروز معامله‌ای در آن نشده */
  --pl-up:var(--up); --pl-down:var(--down);
  --pl-up-soft:color-mix(in srgb, var(--up) 30%, var(--surface));
  --pl-down-soft:color-mix(in srgb, var(--down) 30%, var(--surface));
  position:relative; height:6px; border-radius:99px; margin:1rem 0 .5rem;
  background-image:linear-gradient(90deg, var(--down) 0 var(--pl-y), var(--up) var(--pl-y) 100%);
}
.pl-track.pl-band{ background-image:var(--pl-bg) }      /* دو سر = آستانهٔ روز */
.pl-track.pl-flat{ background-image:none; background-color:var(--line) }   /* قیمت دیروز نداریم */

/* هر علامت یک جعبهٔ بزرگ‌تر از شکلش است تا موس راحت رویش بنشیند */
.pl-mk{
  position:absolute; top:50%; translate:-50% -50%;
  display:grid; place-items:center; cursor:default;
}
.pl-mk:hover{ z-index:4 }
.pl-yday{ width:12px; height:24px }
.pl-yday::before{ content:''; width:2px; height:18px; border-radius:2px; background-color:var(--txt-strong) }
/* کمترین و بیشترینِ روز، وقتی دو سرِ خط آستانه است — مرزِ پررنگ و کم‌رنگ */
.pl-day{ width:10px; height:16px }
.pl-day::before{ content:''; width:2px; height:12px; border-radius:2px; background-color:var(--txt-mute) }
.pl-br{ width:12px; height:26px; color:var(--txt-strong) }
.pl-br svg{ width:8px; height:20px; overflow:visible }
.pl-last{
  width:13px; height:13px; border-radius:99px; z-index:2;
  background-color:var(--chart-bg); border:2.5px solid var(--gold);
  box-shadow:0 0 10px rgba(255,197,49,.75);
}
.pl-ends{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--txt-mute) }
.pl-ends > span{ position:relative; cursor:default }

/* راهنمای نام و عدد با نگه داشتن موس — بی‌درنگ، نه title مرورگر */
.info-line [data-tip]:hover::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; translate:-50% 0;
  direction:rtl; white-space:nowrap; pointer-events:none; z-index:5;
  padding:.28rem .55rem; border-radius:7px;
  font-size:11px; font-weight:700; line-height:1.5; color:var(--txt-strong);
  background-color:var(--surface); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.info-line .pl-l[data-tip]:hover::after{ left:0; translate:0 0 }
.info-line .pl-r[data-tip]:hover::after{ left:auto; right:0; translate:0 0 }
.info-line .pl-mk.pl-l[data-tip]:hover::after{ left:-2px }
.info-line .pl-mk.pl-r[data-tip]:hover::after{ right:-2px }

/* نامِ قابل کلیکِ دارایی پایه یا قرارداد (OptionAi.symLink) */
.sym-link{ cursor:pointer; border-radius:4px; transition:color .15s ease }
.sym-link:hover{ color:var(--gold-ink) }
.sym-link:focus-visible{ outline:2px solid var(--gold-ring); outline-offset:1px }

.sym-card{ margin-top:1rem; flex:none }
.sym-card.sym-card-in{ animation:riseIn .45s var(--ease-out) both }
.sym-card-note{ padding:.4rem .2rem; font-size:12.5px; color:var(--txt-mute) }
.sym-card-note.err{ color:var(--down) }