/* ============================================================
   سامانه تحلیل بورس تهران — سیستم طراحی اپ (RTL)
   DNA: true-black + mint #23f7dd + کارت‌های شیشه‌ای + Vazirmatn
   ============================================================ */

@font-face{font-family:'Vazirmatn';src:url('../../assets/fonts/Vazirmatn-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../../assets/fonts/Vazirmatn-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../../assets/fonts/Vazirmatn-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../../assets/fonts/Vazirmatn-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('../../assets/fonts/Vazirmatn-Black.woff2') format('woff2');font-weight:900;font-display:swap}

/* ---------- تم‌ها ----------
   همه رنگ‌ها از همین متغیرها می‌آیند. هیچ رنگ ثابتی در قاعده‌ها نباید بماند،
   وگرنه تم روشن نصفه‌کاره می‌شود. رنگ‌های داخل JS هم با getComputedStyle از
   همین‌جا خوانده می‌شوند، نه ثابت.
   پنل مدیریت تم جدا ندارد؛ همین‌ها را می‌گیرد. */
:root{
  --bg:#0b1016; --bg2:#101720;
  --card:rgba(18,26,35,.88); --card-solid:#121a23;
  --line:#22313d; --line2:#314452;
  --chip:#17222d; --hover:#202f3b;
  --txt:#f7fafc; --sub:#b4c0ca; --dim:#8596a5;
  --mint:#2ee6c5; --mint-soft:#79f0dc; --mint-dark:#0b2924;
  --violet:#9a8cff; --amber:#f2c45a;
  --up:#39d98d; --dn:#ff6f7f; --flat:#8795a3;
  --r-sm:.7rem; --r:1.15rem; --r-lg:1.65rem;
  --side:15.5rem; --top:4.2rem;
  --glow:0 0 34px -8px rgba(35,247,221,.16);
  /* سایه، شیشه کارت، و پس‌زمینه بدنه — این‌ها بین دو تم فرق می‌کنند */
  --shadow:rgba(0,0,0,.8); --shadow-soft:rgba(0,0,0,.6);
  --topbar-bg:rgba(11,16,22,.88);
  --glass-a:rgba(255,255,255,.05); --glass-b:rgba(255,255,255,.012);
  --glass-edge:rgba(255,255,255,.2); --glass-edge2:rgba(255,255,255,.05);
  --glass-edge3:rgba(255,255,255,.04);
  --glass-mint:rgba(35,247,221,.1);
  --grid:rgba(255,255,255,.05);
  --scroll:#344755;
  /* پنج پله شفافیت رنگ نعناع: هایلایت ردیف، حالت فعال، لبه، فوکوس، درخشش */
  --tint:rgba(35,247,221,.045); --tint2:rgba(35,247,221,.12);
  --tint3:rgba(35,247,221,.22); --tint4:rgba(35,247,221,.36);
  --tint5:rgba(35,247,221,.8);
  /* خانه خنثای نقشه بازار: باید در هر دو تم متن سفید رویش خوانده شود */
  --tm-flat:#3a3d42;
  --accent-txt:var(--mint);          /* رنگ لهجه وقتی متن است */
  /* نام‌های مستعار: این چهار نام در قاعده‌ها به کار رفته بود بدون تعریف،
     پس هر پس‌زمینه‌ای که به آن‌ها تکیه داشت شفاف رندر می‌شد */
  --panel2:var(--chip);              /* پنل داخلی کارت: task، pg، v-chip، lay-item */
  --mute:var(--sub);                 /* متن کم‌رنگ کامپوننت ⓘ */
  --mint-dim:var(--tint2);           /* پس‌زمینه نعناعی کم‌رنگ (هاور ⓘ، کد فرمول) */
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --thead-bg:rgba(16,17,20,.96);     /* سر جدول چسبان — در تم روشن عوض می‌شود */
  --violet-soft:#c9c0ff;             /* متن بنفش روی پس‌زمینه بنفش کم‌رنگ */
  --body-bg:
    radial-gradient(54rem 34rem at 88% -8%, rgba(46,230,197,.10), transparent 62%),
    radial-gradient(48rem 34rem at 6% 6%, rgba(154,140,255,.08), transparent 64%),
    radial-gradient(62rem 44rem at 50% 112%, rgba(60,164,255,.055), transparent 64%);
  --side-bg:linear-gradient(175deg, rgba(18,27,36,.96), rgba(10,15,21,.98));
  color-scheme:dark;
}

/* تم روشن — همان DNA، با کنتراست معکوس. نعناع تیره‌تر می‌شود چون
   #23f7dd روی سفید عملا خوانده نمی‌شود. */
:root[data-theme="light"]{
  --bg:#f3f7fa; --bg2:#ffffff;
  --card:rgba(255,255,255,.96); --card-solid:#ffffff;
  --line:#dce6ec; --line2:#c7d5de;
  --chip:#edf3f6; --hover:#e4edf2;
  /* کنتراست روی --bg #f3f7fa سنجیده شد (فرمول WCAG 2.1). مقادیر پیشین همه
     زیر ۴٫۵:۱ بودند و متن ریز فارسی را خاکستری و بی‌جان می‌کردند:
     dim 3.59 · flat 3.69 · mint 3.74 · amber 3.95 · up 4.15 · dn 4.47.
     هیو دست‌نخورده مانده تا DNA نعنایی عوض نشود، فقط تیره‌تر شده‌اند. */
  --txt:#10212d; --sub:#4f6473; --dim:#5f6f7d;        /* min 4.62:1 on --chip */
  --mint:#057866; --mint-soft:#067563; --mint-dark:#d9f7f1;   /* min 4.83:1 on --chip */
  --violet:#6655d8; --amber:#946104;                  /* min 4.72:1 on --chip */
  --up:#067a44; --dn:#c23549; --flat:#606f7c;         /* min 4.84 · 4.81 · 4.62 on --chip */
  --glow:0 0 30px -10px rgba(7,168,146,.28);
  --shadow:rgba(35,59,78,.18); --shadow-soft:rgba(35,59,78,.12);
  --topbar-bg:rgba(248,251,253,.92);
  --glass-a:rgba(255,255,255,.9); --glass-b:rgba(255,255,255,.6);
  --glass-edge:rgba(15,23,42,.1); --glass-edge2:rgba(15,23,42,.05);
  --glass-edge3:rgba(15,23,42,.04);
  --glass-mint:rgba(7,168,146,.22);
  --grid:rgba(15,23,42,.07);
  --scroll:#b8c7d1;
  --tint:rgba(7,168,146,.07); --tint2:rgba(7,168,146,.16);
  --tint3:rgba(7,168,146,.28); --tint4:rgba(7,168,146,.45);
  --tint5:rgba(7,168,146,.55);
  --tm-flat:#8d959d;
  --accent-txt:#04695a;              /* نعناع تیره‌تر، تا متن ریز هم خوانده شود */
  --thead-bg:rgba(244,246,248,.96);  /* بدون این، سر جدول در تم روشن نوار سیاه می‌شد */
  --violet-soft:#4a3ac2;
  --body-bg:
    radial-gradient(54rem 34rem at 88% -8%, rgba(7,143,121,.11), transparent 62%),
    radial-gradient(48rem 34rem at 6% 6%, rgba(102,85,216,.075), transparent 64%),
    radial-gradient(62rem 44rem at 50% 112%, rgba(60,140,220,.06), transparent 64%);
  --side-bg:linear-gradient(175deg, #ffffff, #f4f8fb);
  color-scheme:light;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:clamp(13.5px,.55vw + 9px,16px)}
body{
  font-family:'Vazirmatn',system-ui,sans-serif;
  background:var(--body-bg), var(--bg);
  color:var(--txt); min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-weight:500;
  overflow-x:clip; /* ضامن نهایی: هیچ صفحه‌ای اسکرول افقی نگیرد (clip اسکرول‌کانتینر نمی‌سازد پس sticky سالم می‌ماند) */
}
::selection{background:var(--tint3)}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:9px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- شل: سایدبار + تاپ‌بار + محتوا ---------- */
.shell{display:flex;min-height:100vh}
.side{
  position:fixed;inset-block:0;inset-inline-start:0;width:var(--side);z-index:50;
  display:flex;flex-direction:column;gap:.25rem;padding:1rem .9rem;
  background:var(--side-bg);
  border-inline-end:1px solid var(--line);backdrop-filter:blur(14px);
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:.65rem;padding:.4rem .5rem 1.1rem}
.brand .mark{width:2.1rem;height:2.1rem;border-radius:50%;flex:none;
  background:conic-gradient(from 200deg, #23f7dd, #6ae9ff, #8b7cf8, #23f7dd);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 42%, #000 46%);
          mask:radial-gradient(circle at 50% 50%, transparent 42%, #000 46%)}
.brand b{font-size:1.1rem;font-weight:900;letter-spacing:-.02em}
.brand span{color:var(--mint)}
.nav-group{margin-top:.9rem}
.nav-group>.ng-title{font-size:.68rem;color:var(--dim);letter-spacing:.14em;padding:0 .7rem .35rem}
/* پرسش گروه: نام گروه می‌گوید چه هست، این می‌گوید کی به درد می‌خورد.
   ریزتر و کم‌رنگ‌تر از نام گروه تا سلسله‌مراتب به هم نریزد. */
.nav-group>.ng-title>.ng-q{display:block;font-size:.63rem;letter-spacing:0;font-style:normal;
  color:var(--dim);opacity:.62;margin-top:.12rem;line-height:1.5}

/* ---- صفحه راهنمای مسیر ---- */
.lead{font-size:.95rem;line-height:2;color:var(--sub)}
/* میان‌برهای «می‌خواهم …» — کارت‌های کوچک، دو ستون در دسکتاپ و یک ستون در موبایل */
.tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.6rem}
.task{display:block;padding:.7rem .85rem;border:1px solid var(--line);border-radius:.6rem;
  background:var(--panel2);transition:border-color .2s,transform .2s}
.task:hover{border-color:var(--mint);transform:translateY(-2px)}
.task b{display:block;font-size:.85rem;color:var(--txt)}
.task span{display:block;font-size:.72rem;color:var(--dim);margin-top:.25rem;line-height:1.7}
/* فهرست صفحه‌های هر گروه */
.pages{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:.55rem}
.pg{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem .8rem;border-radius:.6rem;
  border:1px solid transparent;transition:background .2s,border-color .2s}
.pg:hover{background:var(--hover);border-color:var(--line)}
.pgic{flex:0 0 auto;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.5rem;
  background:var(--panel2);color:var(--mint)}
.pgtx{min-width:0}
.pgtx b{display:block;font-size:.85rem;color:var(--txt)}
.pgtx i{display:block;font-style:normal;font-size:.72rem;color:var(--dim);margin-top:.2rem;line-height:1.75}
/* ============================================================
   آشکارسازی مرحله‌ای
   لایه صفر (برآیند) همیشه دیده می‌شود؛ لایه‌های عمیق‌تر با کلید «حرفه‌ای» یا
   با کلیک روی «چرا؟» باز می‌شوند. هیچ داده‌ای حذف نمی‌شود، فقط یک قدم دورتر است.
   ============================================================ */

/* برآیند — نخستین چیزی که کاربر می‌بیند. یک جمله، چند شاهد، یک راه به جزئیات. */
.verdict{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
  padding:1rem 1.2rem;margin-bottom:1.1rem;border-radius:.9rem;
  background:linear-gradient(180deg,var(--panel2),transparent);border:1px solid var(--line)}
.verdict .v-main{flex:1 1 20rem;min-width:0}
.verdict .v-txt{font-size:1.02rem;line-height:1.95;color:var(--txt);font-weight:600}
.verdict .v-note{font-size:.75rem;color:var(--dim);margin-top:.35rem;line-height:1.8}
.verdict .v-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.v-chip{padding:.45rem .7rem;border-radius:.55rem;background:var(--panel2);
  border:1px solid var(--line);min-width:6.5rem}
.v-chip .v-k{display:flex;align-items:center;gap:.25rem;font-size:.68rem;color:var(--dim)}
.v-chip b{display:block;font-size:1.05rem;margin-top:.15rem}
.v-chip i{display:block;font-style:normal;font-size:.66rem;color:var(--dim);margin-top:.1rem}
.verdict .v-more{flex:0 0 auto}

/* نشان «چرا؟» — ریز و کم‌رنگ تا مزاحم خواندن عدد نشود، ولی همیشه در دسترس */
.whyq{width:1.05rem;height:1.05rem;line-height:1;padding:0;border-radius:50%;
  border:1px solid var(--line2);background:transparent;color:var(--dim);
  font-size:.62rem;cursor:pointer;flex:0 0 auto;transition:color .2s,border-color .2s}
.whyq:hover{color:var(--mint);border-color:var(--mint)}

/* حباب توضیح: تعریف، فرمول، ورودی همین لحظه، مرجع */
.whybox{position:absolute;z-index:60;max-width:24rem;padding:.85rem 1rem;
  border-radius:.7rem;background:var(--card-solid);border:1px solid var(--line2);
  box-shadow:0 18px 44px -14px var(--shadow-soft);direction:rtl;font-size:.78rem;line-height:1.9}
.whybox .why-h{font-weight:700;color:var(--txt);margin-bottom:.4rem}
.whybox .why-h i{font-style:normal;color:var(--mint);font-size:.74rem}
.whybox p{color:var(--sub);margin-bottom:.6rem}
.whybox .why-f,.whybox .why-in{border-top:1px dashed var(--line);padding-top:.5rem;margin-top:.5rem}
.whybox .why-f>span,.whybox .why-in>span{display:block;font-size:.66rem;color:var(--dim);margin-bottom:.25rem}
.whybox code{display:block;font-size:.72rem;color:var(--mint);background:var(--panel2);
  padding:.35rem .5rem;border-radius:.4rem;line-height:1.8}
.whybox .why-u{display:block;font-size:.66rem;color:var(--dim);margin-top:.25rem}
.whybox .why-in>div{display:flex;justify-content:space-between;gap:.6rem;padding:.12rem 0}
.whybox .why-in b{font-weight:500;color:var(--sub)}
.whybox .why-r{border-top:1px dashed var(--line);padding-top:.45rem;margin-top:.5rem;
  font-size:.66rem;color:var(--dim)}

/* ناوبری درون‌صفحه‌ای برای صفحه‌های بلند مثل کارت نماد. روی موبایل مانند
   نوار بخش‌های یک اپ افقی اسکرول می‌شود و مقصدها را نزدیک انگشت نگه می‌دارد. */
.page-subnav{display:flex;align-items:center;gap:.35rem;overflow-x:auto;scrollbar-width:none;
  margin:0 0 1rem;padding:.35rem;border:1px solid var(--line);border-radius:.9rem;background:var(--panel)}
.page-subnav::-webkit-scrollbar{display:none}
.page-subnav a{flex:0 0 auto;padding:.5rem .8rem;border-radius:.65rem;font-size:.76rem;font-weight:800;color:var(--sub)}
.page-subnav a:hover,.page-subnav a:focus-visible{color:var(--text);background:var(--panel2)}
@media(max-width:760px){
  .page-subnav{position:sticky;top:.45rem;z-index:15;margin-inline:-.15rem;padding:.35rem;
    background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .page-subnav a{min-height:2.6rem;display:inline-flex;align-items:center;padding-inline:.9rem}
}

/* سوییچر دو داشبورد اصلی. مطابق سند محصول، بنیادی و چارت/تابلو دو فضای
   مستقل‌اند؛ این نوار جابه‌جایی بینشان را بدون برگشت به منوی اصلی ممکن می‌کند. */
.dash-switcher{display:inline-flex;align-items:center;gap:.28rem;padding:.3rem;margin:0 0 1rem;
  border:1px solid var(--line);border-radius:.9rem;background:var(--panel);box-shadow:var(--shadow-sm)}
.dash-switcher a{display:inline-flex;align-items:center;justify-content:center;min-height:2.35rem;
  padding:.45rem .9rem;border-radius:.65rem;color:var(--sub);font-size:.8rem;font-weight:800}
.dash-switcher a:hover{color:var(--text);background:var(--panel2)}
.dash-switcher a.on{color:var(--text);background:var(--tint);box-shadow:inset 0 0 0 1px var(--line2)}
@media(max-width:760px){
  /* top باید ارتفاع نوار بالا را حساب کند. با top:.45rem این نوار زیر
     .topbar می‌چسبید (آن sticky با top:0 و z-index:40 است، این z-index:16)
     و موقع اسکرول دو کادر می‌رفتند داخل هم — همان چیزی که مالک دید. */
  .dash-switcher{display:grid;grid-template-columns:1fr 1fr;width:100%;position:sticky;top:calc(var(--top) + .45rem);z-index:16;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  .dash-switcher a{min-height:2.75rem;font-size:.82rem}
}

/* آیکون راهنما — همیشه روی صفحه، چون بنرِ intro یک‌بار بسته می‌شد و دیگر
   هیچ راهی برای بازگرداندنش نبود. گوشهٔ پایینِ سمتِ شروع، زیرِ نوارِ بالا
   (z-index:40) تا با آن رقابت نکند. */
.introdot{
  position:fixed;inset-inline-start:1rem;bottom:1rem;z-index:30;
  width:2.6rem;height:2.6rem;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  background:var(--card-solid);color:var(--mint);
  border:1px solid var(--line2);box-shadow:0 .35rem 1.1rem -.45rem var(--shadow);
  transition:transform .15s ease, color .15s ease, border-color .15s ease;
}
.introdot:hover{transform:translateY(-2px);border-color:var(--mint)}
.introdot:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.introdot svg{width:1.35rem;height:1.35rem}
@media print{.introdot{display:none}}

/* کلید ساده و حرفه‌ای */
.lvlbtn{white-space:nowrap}
.lvlbtn.on{border-color:var(--mint);color:var(--mint)}
/* لینکِ ورود که جای دکمه را برای مهمان می‌گیرد (rw3-fix، پ۱): همان اندازهٔ
   دکمه، ولی رنگش «روشن» است تا با یک ردیفِ خنثی در نوارِ بالا اشتباه نشود. */
.lvl-loginlink{border-color:var(--mint);color:var(--mint)}

/* بلوکِ قفل، از جریانِ صفحه بیرون.
   پیش‌تر هر بلوکِ قفل جعبهٔ هم‌اندازهٔ خودش را نگه می‌داشت و یک تیزرِ
   تکراری نشان می‌داد؛ در صفحه‌هایی مثل techsignals همین یک جمله یازده بار
   تکرار می‌شد. حالا بلوکِ قفل کاملا از جریان بیرون می‌رود و نامش در یک
   فهرستِ واحدِ پایانِ صفحه می‌آید (`.lvl-summary` پایین‌تر). چیزی حذف
   نمی‌شود — با باز شدنِ نما یا ورود، همین کلاس برداشته می‌شود و بلوک
   بی‌هیچ ساختِ دوباره برمی‌گردد. */
.lvl-locked{display:none !important}

/* نشانِ قفل — سراسری. قفل هر جا که باشد (بلوکِ تک، یا حالا یک ردیفِ فهرستِ
   تجمیعی) باید یک شکل و یک زبان داشته باشد؛ `.chatgate` در chat.html هم
   همین کلاس را برای درِ گفتگوی مهمان به کار می‌برد. */
.lvl-teaser{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  padding:.9rem 1rem;border:1px dashed var(--line2);border-radius:.7rem;
  background:var(--panel2)}
.lvl-teaser .lvl-ico{display:inline-flex;color:var(--dim);flex:0 0 auto}
.lvl-teaser .lvl-ico svg{width:20px;height:20px}
.lvl-teaser .lvl-txt{flex:1 1 12rem;min-width:0}
.lvl-teaser .lvl-txt b{display:block;font-size:.86rem;font-weight:600;color:var(--sub)}
.lvl-teaser .lvl-txt p{margin:.2rem 0 0;font-size:.74rem;color:var(--dim);line-height:1.7}
.lvl-teaser .lvl-cta{flex:0 0 auto}

/* بخشِ تجمیعیِ پایانِ صفحه: به‌جای یک جعبهٔ هم‌اندازه به ازای هر بلوکِ
   قفل، یک فهرست با یک دکمه — هر دسته همان قالبِ `.lvl-teaser` بالا را
   می‌گیرد، فقط به‌جای یک پاراگراف یک فهرستِ چندستونه دارد. */
.lvl-summary{margin-top:1.4rem;display:flex;flex-direction:column;gap:.9rem}
.lvl-summary .lvl-teaser{align-items:flex-start}
.lvl-summary .lvl-teaser .lvl-ico{margin-top:.15rem}
.lvl-summary .lvl-teaser .lvl-txt{flex-basis:16rem}
.lvl-summary-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.3rem .9rem}
.lvl-summary-list li{font-size:.76rem;color:var(--dim);line-height:1.7}
.lvl-summary-list li b{display:inline;font-size:inherit;font-weight:500;color:var(--sub)}
.lvl-summary-list li span{display:block;font-size:.7rem;color:var(--dim)}

/* صفحه‌ای که همهٔ بلوک‌هایش حرفه‌ای است: به‌جای صفحهٔ خالی، یک پیام روشن. */
.lvl-pagelock{padding:1.4rem 1.2rem;margin-bottom:1rem;text-align:center;
  border:1px solid var(--line);border-radius:.9rem;background:var(--panel)}
.lvl-pagelock b{display:block;font-size:1rem;font-weight:600;margin-bottom:.4rem}
.lvl-pagelock p{margin:0 auto .9rem;max-width:34rem;font-size:.82rem;
  color:var(--sub);line-height:1.9}

@media (max-width:760px){
  .verdict{padding:.85rem .9rem;gap:.75rem}
  .verdict .v-txt{font-size:.92rem}
  .whybox{max-width:calc(100vw - 1.5rem)}
}

/* ============================================================
   سامانه بلوک
   هر بلوک یک کارت مستقل است که جای ثابتی در کد ندارد؛ چیدمان فقط یک فهرست
   شناسه است. اندازه‌ها روی شبکه دوازده‌ستونی می‌نشینند تا جابه‌جایی هر بلوک
   چیدمان بقیه را نشکند.
   ============================================================ */
.blkgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:start}
.blk{margin:0}
.blk-sm{grid-column:span 4}
.blk-md{grid-column:span 6}
.blk-lg{grid-column:span 12}
/* بلوکی که داده‌اش نیست: دیده می‌شود ولی کم‌رنگ، تا کاربر بداند هست و چرا خالی است */
.blk-off{opacity:.62}
.blk-off .hd h3{color:var(--dim)}
.blk .hd .blk-act{display:flex;gap:.4rem;align-items:center;margin-inline-start:auto}

/* پنجره شخصی‌سازی چیدمان */
.lay-list{display:flex;flex-direction:column;gap:.4rem;max-height:60vh;overflow:auto}
.lay-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;
  border:1px solid var(--line);border-radius:.55rem;background:var(--panel2)}
.lay-item.off{opacity:.5}
.lay-item b{font-size:.84rem;font-weight:600}
.lay-item .lay-why{font-size:.68rem;color:var(--dim)}
.lay-item .lay-mv{margin-inline-start:auto;display:flex;gap:.25rem}
.lay-mv button{width:1.7rem;height:1.7rem;padding:0;border-radius:.4rem;
  border:1px solid var(--line2);background:transparent;color:var(--sub);cursor:pointer}
.lay-mv button:hover{color:var(--mint);border-color:var(--mint)}
.lay-g{font-size:.68rem;color:var(--dim);letter-spacing:.1em;margin:.5rem 0 .15rem}

@media (max-width:1100px){
  .blk-sm{grid-column:span 6}
  .blk-md{grid-column:span 12}
}
@media (max-width:760px){
  .blkgrid{grid-template-columns:1fr;gap:.8rem}
  .blk-sm,.blk-md,.blk-lg{grid-column:span 1}
}

/* ---- نردبان حمایت و مقاومت در صفحه نماد ----
   ترتیب عمودی خودش معنا دارد: مقاومت‌ها بالا، قیمت کنونی وسط، حمایت‌ها پایین.
   پس چیدمان نباید عوض شود حتی اگر در موبایل جا تنگ باشد. */
.lvl{display:flex;align-items:center;gap:.55rem;padding:.4rem .1rem;border-bottom:1px dashed var(--line)}
.lvl:last-child{border-bottom:0}
.lvl b{margin-inline-start:auto;font-size:.9rem}
.lvl>span.num{min-width:3.6rem;text-align:end;font-size:.78rem}
.lvl i{font-size:.68rem;min-width:4.2rem;text-align:end}
.lvlnow{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin:.35rem 0;padding:.45rem .6rem;border-radius:.5rem;
  background:var(--panel2);border:1px solid var(--mint)}
.lvlnow span{font-size:.75rem;color:var(--dim)}
.lvlnow b{font-size:.95rem;color:var(--mint)}

/* واژه‌نامه */
.terms{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.75rem}
.term b{display:block;font-size:.82rem;color:var(--mint);margin-bottom:.2rem}
.term span{font-size:.75rem;color:var(--sub);line-height:1.9}
.nav a{display:flex;align-items:center;gap:.6rem;padding:.56rem .72rem;border-radius:.68rem;
  color:var(--sub);font-size:.86rem;font-weight:600;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s}
.nav a:hover{background:var(--hover);color:var(--txt);transform:translateX(-2px)}
.nav a.on{background:linear-gradient(120deg, var(--tint2), var(--tint));
  color:var(--mint-soft);border-color:var(--tint2)}
.nav a .ic{width:1.15rem;height:1.15rem;flex:none;opacity:.9}
/* نشانِ صفحه‌های «دیوار» برای مهمان (rw3-fix، پ۶): پیش از کلیک بگوید این
   صفحه بیشترِ محتوایش پشتِ ورود است. */
.nav-lock{margin-inline-start:auto;flex:none;display:inline-flex;opacity:.6}
.nav-lock svg{width:14px;height:14px}
.side .foot{margin-top:auto;padding:.8rem .5rem 0;font-size:.7rem;color:var(--dim);border-top:1px solid var(--line)}
.main{flex:1;margin-inline-start:var(--side);display:flex;flex-direction:column;min-width:0}
/* پوسته پشتِ صحنه (پنل مدیریت): بدون سایدبار بازار، تمام‌عرض. */
body.bare .main{margin-inline-start:0}
/* نوار بالای پوسته پشت صحنه: برند، عنوان، میان‌بر بخش‌ها، ساعت، تم، بازگشت */
.topbar .topbrand{display:flex;align-items:center;gap:.5rem;font-size:.95rem;text-decoration:none;white-space:nowrap;padding:0}
.topbar .topbrand .mark{width:1.7rem;height:1.7rem}
.topbar .topbrand b{font-size:1rem}
.topbar-bare{gap:.75rem}
.topbar .barnav{display:flex;gap:.25rem;flex:1;overflow-x:auto;scrollbar-width:none;min-width:0}
.topbar .barnav::-webkit-scrollbar{display:none}
.topbar .barnav button{background:transparent;border:1px solid transparent;border-radius:999px;
  color:var(--sub);font:inherit;font-size:.78rem;padding:.32rem .7rem;cursor:pointer;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s}
.topbar .barnav button:hover{background:var(--hover);color:var(--txt);border-color:var(--line)}
.topbar .barclock{font-size:.78rem;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.topbar .backapp{font-size:.78rem;color:var(--dim);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;white-space:nowrap}
.topbar .backapp:hover{color:var(--txt);border-color:var(--line2)}
/* دکمه آیکونی (تعویض تم) */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;flex:none;
  background:var(--chip);border:1px solid var(--line);border-radius:50%;color:var(--sub);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s}
.iconbtn:hover{color:var(--mint);border-color:var(--tint3);background:var(--hover)}
.iconbtn svg{width:1.05rem;height:1.05rem}
/* ---------- فوتر صفحه ---------- */
.pagefoot{margin-top:auto;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:1.1rem 1.6rem;border-top:1px solid var(--line);background:var(--topbar-bg);
  font-size:.74rem;color:var(--dim)}
.pagefoot .pf-brand{display:flex;align-items:center;gap:.5rem}
.pagefoot .pf-brand .mark{width:1.3rem;height:1.3rem;border-radius:50%;flex:none;
  background:conic-gradient(from 200deg, #23f7dd, #6ae9ff, #8b7cf8, #23f7dd);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 42%, #000 46%);
          mask:radial-gradient(circle at 50% 50%, transparent 42%, #000 46%)}
.pagefoot .pf-brand b{font-size:.82rem;font-weight:800;color:var(--sub)}
.pagefoot .pf-brand b span{color:var(--mint)}
.pagefoot .pf-brand i{font-style:normal;color:var(--dim);border-inline-start:1px solid var(--line);padding-inline-start:.7rem;margin-inline-start:.2rem}
.pagefoot .pf-data{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.pagefoot .pf-nav{display:flex;gap:.9rem;flex-wrap:wrap}
.pagefoot .pf-nav a{color:var(--dim)}
.pagefoot .pf-nav a:hover{color:var(--mint)}
@media (max-width:700px){.pagefoot{gap:.6rem;padding:.9rem 1rem}.pagefoot .pf-data{flex-basis:100%}}
.topbar{
  position:sticky;top:0;z-index:40;height:var(--top);display:flex;align-items:center;gap:1rem;
  padding:0 1.4rem;background:var(--topbar-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar .pagetitle{font-size:1rem;font-weight:800;white-space:nowrap}
/* نوار شاخص وقتی جا کم می‌آورد، بریده نمی‌شود — می‌لغزد.
   با overflow:hidden و justify-content:center، هر وقت پهنای لازم از پهنای
   موجود بیشتر می‌شد (مثلا صفحهٔ کارت نماد که عنوانش بلند است: ۵۲۷ پیکسل لازم،
   ۴۷۷ پیکسل موجود) چیپ‌های دو سر از وسطِ متن قیچی می‌شدند و نوار خراب به نظر
   می‌رسید. حالا افقی می‌لغزد (نوار لغزش هم پایین‌تر پنهان شده) و
   `safe center` وقتی جا تنگ است به‌جای وسط‌چین، از ابتدا می‌چیند تا هیچ چیپی
   از لبهٔ شروع بیرون نیفتد. */
.topbar .idx-strip{display:flex;gap:.5rem;overflow-x:auto;overflow-y:hidden;flex:1;
  min-width:0;justify-content:safe center}
.topbar .idxchip{display:flex;align-items:center;gap:.45rem;font-size:.74rem;color:var(--sub);
  background:var(--chip);border:1px solid var(--line);border-radius:999px;padding:.28rem .7rem;white-space:nowrap}
.topbar .idxchip b{color:var(--txt);font-weight:600}

/* ── جمع شدنِ پله‌ای نوار شاخص با پهنای صفحه ──
   قاعدهٔ مالک: نوار باید با اندازهٔ صفحه هماهنگ شود و کادرها در صورت لزوم
   آیکون شوند. پس به‌جای بریدن، هر پله چیزی را کنار می‌گذارد و کم‌ارزش‌ترین
   جزء اول می‌رود. متن کامل همیشه در `title` می‌ماند، پس چیزی گم نمی‌شود.

     ≥۵۶۰px نوار   برچسب کامل: «شاخص کل ۷٬۲۹۱٬۸۲۵ −۲٫۱۱٪»
     ۴۳۰–۵۶۰      برچسب کوتاه: «کل ۷٬۲۹۱٬۸۲۵ −۲٫۱۱٪»
     ۳۲۰–۴۳۰      بی‌برچسب: «۷٬۲۹۱٬۸۲۵ −۲٫۱۱٪»
     <۳۲۰         فقط درصد، و چیپ زنده فقط نقطه — همان «کادر آیکون شود».

   معیار **پهنای خود نوار** است نه پهنای صفحه، و این عمدی است: تنگی از
   پهنای پنجره نمی‌آید، از چیزی می‌آید که کنارش نشسته. صفحهٔ کارت نماد
   عنوان بلندی دارد، پس روی همان ۱۴۴۰ پیکسلی که داشبورد راحت جا می‌شود،
   این‌جا نوار فقط ۴۷۷ پیکسل می‌گیرد در حالی که ۵۷۸ لازم دارد. با
   media query این تفاوت دیده نمی‌شد — سنجیده شد و همان‌جا هم بریده ماند.
   container query دقیقا همان چیزی را می‌سنجد که مهم است. */
.idx-strip{container-type:inline-size}
.topbar .idxchip .ab{display:none}
@container (max-width:560px){
  .topbar .idxchip .lab{display:none}
  .topbar .idxchip .ab{display:inline}
}
@container (max-width:430px){
  .topbar .idxchip .lab,.topbar .idxchip .ab{display:none}
  .topbar .idxchip{padding:.28rem .5rem}
}
@container (max-width:320px){
  .topbar .idxchip b{display:none}
  /* ارزش معاملات درصد ندارد؛ اگر عددش هم برود، چیپ خالی می‌ماند. */
  .topbar .idxchip.val-chip b{display:inline}
  .topbar .idxchip.live-chip{padding:.3rem .42rem}
}
.live-dot{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:var(--dim);margin-inline-end:.15rem}
.live-dot.on{background:var(--mint);box-shadow:0 0 8px var(--tint5);animation:livepulse 2s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
/* ذره‌بین به **کادر جست‌وجو** لنگر دارد، پس کادر و ورودی باید یک اندازه باشند.
   پیش از این `.search` پهنا نداشت و به‌عنوان آیتم فلکس جمع می‌شد، ولی ورودی
   پهنای ثابت ۱۵rem داشت؛ وقتی نوار تنگ می‌شد، لبهٔ `.search` می‌آمد داخل
   ورودی و ذره‌بین روی متنِ «جستجوی نماد» می‌نشست. حالا ورودی همیشه ۱۰۰٪ کادر
   است و هرچه کادر جمع شود، آیکون هم با لبه‌اش می‌آید. */
.search{position:relative;flex:0 1 15rem;min-width:8rem}
/* padding منطقی، نه فیزیکی.
   آیکون با `inset-inline-end` می‌نشیند و در RTL آن یعنی **چپ**؛ ولی padding
   فیزیکیِ قبلی (`.42rem 2.2rem .42rem 1rem`) فضای ۲٫۲rem را سمت **راست**
   رزرو می‌کرد، یعنی سمتی که آیکون آن‌جا نیست. پس ذره‌بین روی متن می‌افتاد.
   با padding-inline همیشه همان سمتی باز می‌شود که آیکون ایستاده، در هر دو
   جهت صفحه. */
.search input{
  width:100%;background:var(--chip);border:1px solid var(--line);border-radius:999px;
  color:var(--txt);font:inherit;font-size:.8rem;outline:0;transition:border .2s;
  padding-block:.42rem;padding-inline-start:1rem;padding-inline-end:2.2rem}
.search input:focus{border-color:var(--tint)}
.search .mag{position:absolute;inset-inline-end:.8rem;top:50%;transform:translateY(-50%);opacity:.5;width:.95rem;height:.95rem}
.search .drop{position:absolute;top:110%;inset-inline:0;min-width:16rem;max-height:19rem;overflow:auto;z-index:60;
  background:var(--card-solid);border:1px solid var(--line2);border-radius:.8rem;box-shadow:0 18px 44px -12px var(--shadow);display:none}
.search .drop.open{display:block}
.search .drop a{display:flex;justify-content:space-between;gap:.6rem;padding:.5rem .8rem;font-size:.8rem}
.search .drop a:hover{background:var(--hover)}
.search .drop a .nm{color:var(--dim);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userbtn{display:flex;align-items:center;gap:.5rem;background:var(--chip);border:1px solid var(--line);
  border-radius:999px;padding:.3rem .85rem;font-size:.78rem;color:var(--sub);cursor:pointer;transition:border .2s}
.userbtn:hover{border-color:var(--line2);color:var(--txt)}
.content{padding:1.65rem 1.7rem 4rem;max-width:94rem;width:100%;margin-inline:auto;min-width:0;overflow-x:clip}
.crumb{font-size:.75rem;color:var(--dim);margin-bottom:1rem}
.crumb b{color:var(--sub)}

/* ---------- کارت شیشه‌ای (سیستم مشترک) ---------- */
.card{
  position:relative;overflow:hidden;border:1px solid transparent;border-radius:var(--r);
  background:
    linear-gradient(160deg, var(--glass-a), var(--glass-b) 40%, var(--card)) padding-box,
    linear-gradient(168deg, var(--glass-edge), var(--glass-edge2) 28%, var(--glass-mint) 68%, var(--glass-edge3)) border-box;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 32px -26px var(--shadow);
  transition:transform .35s cubic-bezier(.165,.84,.44,1),box-shadow .35s,border-color .35s;
}
.card.hoverable:hover{transform:translateY(-3px);box-shadow:0 22px 48px -20px var(--shadow),var(--glow)}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1rem 1.2rem .4rem}
.card .hd h3{font-size:.98rem;font-weight:800;letter-spacing:-.01em}
.card .hd .sub{font-size:.73rem;color:var(--dim);font-weight:500}
.card .bd{padding:.8rem 1.2rem 1.2rem}
.card.flat .bd{padding-top:1.1rem}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:1rem;margin-bottom:1.2rem}
.kpi{padding:1rem 1.2rem}
.kpi .lbl{font-size:.75rem;color:var(--dim);font-weight:600}
.kpi .num{font-size:1.55rem;font-weight:900;letter-spacing:-.02em;margin-top:.3rem;direction:rtl;text-align:right}
.kpi .num small{font-size:.72rem;font-weight:500;color:var(--sub);margin-inline-start:.3rem}
.kpi .delta{font-size:.74rem;margin-top:.2rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- گرید ---------- */
/* min-width:0 الزامی است: بدون آن، جدول‌های nowrap داخل کارت، خود کارت را پهن می‌کنند و کل صفحه سرریز افقی می‌گیرد */
.grid{display:grid;gap:1rem;align-items:start}
.grid>*,.kpis>*{min-width:0}
.card{min-width:0}
.tblwrap{max-width:100%}
.g-2{grid-template-columns:1fr 1fr}.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.sp-2{grid-column:span 2}.sp-3{grid-column:span 3}.sp-4{grid-column:span 4}
@media (max-width:1100px){.g-3,.g-4{grid-template-columns:1fr 1fr}.sp-3,.sp-4{grid-column:span 2}}
@media (max-width:760px){.g-2,.g-3,.g-4{grid-template-columns:1fr}.sp-2,.sp-3,.sp-4{grid-column:span 1}}

/* ---------- جدول ---------- */
.tblwrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:.82rem;font-weight:500;white-space:nowrap}
.tbl thead th{position:sticky;top:0;background:var(--thead-bg);backdrop-filter:blur(10px);
  color:var(--dim);font-weight:700;font-size:.72rem;text-align:right;padding:.55rem .8rem;
  border-bottom:1px solid var(--line2);cursor:pointer;user-select:none;z-index:5}
.tbl thead th.nosort{cursor:default}
.tbl thead th .arr{opacity:.8;color:var(--mint);font-size:.66rem}
.tbl tbody td{padding:.5rem .8rem;border-bottom:1px solid var(--line);text-align:right;vertical-align:middle}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover{background:var(--tint)}
.tbl .sym{font-weight:800;color:var(--txt)}
/* ردیف جمع: از ردیف‌های داده جدا می‌شود و با اسکرول افقی هم گم نمی‌شود */
.tbl tbody tr.sumrow td{background:rgba(35,247,221,.06);border-top:1px solid var(--line2);border-bottom:none}
.tbl .sym a:hover{color:var(--mint-soft)}
/* سلول عددی: ترتیب ارقام LTR ولی تراز راست، هم‌راستا با تیتر ستون در RTL */
.tbl td.num,.tbl th.num{direction:ltr;text-align:right;font-variant-numeric:tabular-nums}
/* جدول فشرده برای کارت‌های نیم‌عرض (مثل صف‌های خرید و فروش کنار هم) */
.tbl.compact th,.tbl.compact td{padding-inline:.45rem}
.tbl.compact{font-size:.78rem}
.tbl .nm30{color:var(--dim);font-size:.7rem;max-width:11rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.up{color:var(--up)}.dn{color:var(--dn)}.flat{color:var(--flat)}
/* رنگ لهجه وقتی «متن» است نه پس‌زمینه: باید روی زمینه صفحه خوانده شود.
   نعناعِ خالص روی سفید نسبت کنتراست ۲٫۸ می‌دهد که برای متن ریز کم است. */
.mintc{color:var(--accent-txt)}.violetc{color:var(--violet)}.amberc{color:var(--amber)}

/* نوار درصدی داخل سلول (قدرت، سهم) */
.meter{position:relative;background:var(--chip);border-radius:999px;height:.45rem;min-width:4.5rem;overflow:hidden}
.meter>i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:999px;background:var(--mint)}
.meter.dn>i{background:var(--dn)}.meter.up>i{background:var(--up)}

/* ---------- چیپ / بج / دکمه ---------- */
.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--chip);border:1px solid var(--line);font-weight:600;
  color:var(--sub);border-radius:999px;padding:.28rem .8rem;font-size:.74rem;cursor:pointer;transition:all .2s;user-select:none}
.chip:hover{border-color:var(--line2);color:var(--txt)}
.chip.on{background:linear-gradient(120deg, var(--tint2), var(--tint));
  color:var(--mint-soft);border-color:var(--tint4)}
.chiprow{display:flex;flex-wrap:wrap;gap:.45rem}
.badge{display:inline-block;padding:.14rem .55rem;border-radius:999px;font-size:.68rem;font-weight:600}
.badge.up{background:rgba(47,217,128,.12);color:var(--up)}
.badge.dn{background:rgba(255,93,108,.12);color:var(--dn)}
.badge.mint{background:var(--tint2);color:var(--mint-soft)}
.badge.violet{background:rgba(139,124,248,.14);color:var(--violet-soft)}
.badge.amber{background:rgba(247,192,74,.12);color:var(--amber)}
/* warn: blocks.js نشان «کهنه» را با همین کلاس می‌فرستد (ستون اعلام NAV صندوق‌ها)؛
   تا امروز تعریف نداشت و بی‌رنگ رندر می‌شد. هم‌رنگ amber چون هر دو یعنی «احتیاط». */
.badge.warn{background:rgba(247,192,74,.12);color:var(--amber)}
.badge.dim{background:var(--chip);color:var(--dim)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;cursor:pointer;
  font:inherit;font-size:.84rem;font-weight:700;border-radius:.75rem;padding:.6rem 1.3rem;
  transition:transform .25s,box-shadow .25s,background .2s;user-select:none}
.btn.primary{background:var(--mint);color:#04110f}
.btn.primary:not(:disabled):hover{background:var(--mint-soft);transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(35,247,221,.5)}
.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line2)}
.btn.ghost:not(:disabled):hover{border-color:var(--sub);transform:translateY(-2px)}
.btn.danger{background:rgba(255,93,108,.14);color:var(--dn)}
.btn.sm{padding:.35rem .9rem;font-size:.76rem;border-radius:.55rem}
/* دکمه از کار افتاده. تا امروز هیچ نشانه دیداری نداشت: «ثبت سفارش» در مودال
   خرید، «امتیاز کافی نیست» در باشگاه و «طرح پایه، همیشه فعال» در اشتراک‌ها
   همگی مثل دکمه سالم دیده می‌شدند و کاربر رویشان کلیک می‌کرد بی آنکه چیزی
   رخ دهد. فقط opacity و cursor عوض می‌شود (قاعده حرکت: بی‌سایه، بی‌فیلتر). */
.btn:disabled{cursor:not-allowed;opacity:.42;transform:none;box-shadow:none}

/* ---------- تب ---------- */
.tabs{display:flex;gap:.3rem;border-bottom:1px solid var(--line);margin-bottom:1.1rem;overflow-x:auto}
.tabs .tab{padding:.58rem 1.05rem;font-size:.84rem;font-weight:600;color:var(--sub);cursor:pointer;border-bottom:2px solid transparent;
  white-space:nowrap;transition:color .2s,border-color .2s;user-select:none}
.tabs .tab:hover{color:var(--txt)}
.tabs .tab.on{color:var(--mint);border-bottom-color:var(--mint);font-weight:700}
.tabpanel{display:none}.tabpanel.on{display:block}

/* ---------- فرم ---------- */
.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.9rem}
.field label{font-size:.76rem;color:var(--sub)}
.inp,select.inp,textarea.inp{background:var(--chip);border:1px solid var(--line);border-radius:.6rem;color:var(--txt);
  font:inherit;font-size:.84rem;padding:.55rem .9rem;outline:0;transition:border .2s;width:100%;text-align:right}
.inp:focus{border-color:var(--tint)}
select.inp{appearance:none;cursor:pointer}
.switch{position:relative;width:2.6rem;height:1.4rem;background:var(--chip);border:1px solid var(--line2);
  border-radius:999px;cursor:pointer;transition:background .2s;flex:none}
.switch::after{content:'';position:absolute;top:.14rem;inset-inline-start:.16rem;width:1rem;height:1rem;border-radius:50%;
  background:var(--sub);transition:transform .2s,background .2s}
.switch.on{background:var(--tint3);border-color:var(--tint)}
.switch.on::after{transform:translateX(-1.2rem);background:var(--mint)}
[dir=ltr] .switch.on::after{transform:translateX(1.2rem)}

/* ---------- مودال / توست ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,5,6,.7);backdrop-filter:blur(4px);z-index:90;display:none;
  align-items:center;justify-content:center;padding:1.5rem}
.overlay.open{display:flex}
.modal{width:min(34rem,94vw);max-height:86vh;overflow:auto;padding:1.4rem 1.5rem;border-radius:var(--r-lg)}
.modal h3{font-size:1.05rem;margin-bottom:1rem}
.toasts{position:fixed;bottom:1.2rem;inset-inline-start:1.2rem;z-index:99;display:flex;flex-direction:column;gap:.5rem}
.toast{background:var(--card-solid);border:1px solid var(--tint4);border-radius:.7rem;
  padding:.6rem 1rem;font-size:.8rem;box-shadow:0 12px 30px -10px var(--shadow-soft);animation:toastin .3s}
.toast.err{border-color:rgba(255,93,108,.4)}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- دکمهٔ شناور دستیار پرسش‌وپاسخ ---------- */
/* گوشهٔ مقابل toasts (inset-inline-end = چپ در rtl) تا روی هم نیفتند. */
.fab-chat{position:fixed;bottom:1.2rem;inset-inline-end:1.2rem;z-index:44;
  width:3.1rem;height:3.1rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--mint);color:#04110f;box-shadow:0 14px 30px -10px rgba(35,247,221,.55);
  transition:transform .2s,box-shadow .2s}
.fab-chat:hover{transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(35,247,221,.65)}
.fab-chat svg{width:1.4rem;height:1.4rem}
@media (max-width:760px){
  /* روی موبایل بالاتر می‌آید تا جلوی نوار پایین صفحه یا محتوای چسبیده به لبه را نگیرد */
  .fab-chat{width:2.8rem;height:2.8rem;bottom:1rem;inset-inline-end:1rem}
  .fab-chat svg{width:1.25rem;height:1.25rem}
}

/* ---------- راهنمای نخستین بازدید ---------- */
/* یک بار روی داشبورد. سه پرسش اصلی، بعد کنار می‌رود و برنمی‌گردد.
   با var نوشته شده نه رنگ ثابت، تا در تم روشن هم درست بخواند. */
.intro{position:relative;margin-bottom:1rem;padding:1rem 1rem .9rem;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,var(--tint),transparent);box-shadow:var(--glow)}
.introx{position:absolute;top:.45rem;inset-inline-end:.55rem;width:1.75rem;height:1.75rem;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:.45rem;
  background:transparent;color:var(--dim);font-size:1.2rem;line-height:1;cursor:pointer}
.introx:hover{background:var(--hover);color:var(--txt)}
/* سه ستون در دسکتاپ. minmax(0,1fr) لازم است وگرنه متن بلند ستون را پهن
   می‌کند و در ۱۴۴۰ اسکرول افقی می‌سازد. */
.introq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.introq a{display:flex;align-items:center;gap:.55rem;min-width:0;
  padding:.75rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel2);color:var(--txt);transition:border-color .2s,transform .2s}
.introq a:hover{border-color:var(--mint);transform:translateY(-2px)}
.introq svg{width:1.15rem;height:1.15rem;flex:0 0 auto;color:var(--mint)}
.introq b{font-weight:600;font-size:.9rem;min-width:0;overflow-wrap:anywhere}
.introg{display:inline-flex;align-items:center;gap:.35rem;margin-top:.7rem;
  color:var(--accent-txt);font-size:.85rem}
.introg svg{width:1rem;height:1rem}
@media (max-width:760px){
  /* در ۳۹۰ سه ستون کنار هم جا نمی‌شود و پرسش‌ها را می‌شکند؛ روی هم می‌روند. */
  .introq{grid-template-columns:1fr}
  .intro{padding:.9rem .85rem .8rem}
  .introq b{font-size:.88rem}
}

/* ---------- هشدار تعریف‌ها / خطای JS مرئی ---------- */
#defswarn{position:fixed;top:0;inset-inline:0;z-index:998;background:#6b4a05;color:#fff2bf;
  font-size:.78rem;padding:.4rem 1rem;display:none;white-space:pre-wrap;text-align:center}
#jserr{position:fixed;top:0;inset-inline:0;z-index:999;background:#7a1220;color:#ffd7db;
  font-size:.78rem;padding:.4rem 1rem;display:none;white-space:pre-wrap}

/* ---------- نقشه بازار / heatmap ---------- */
.treemap{position:relative;width:100%;border-radius:var(--r);overflow:hidden}
/* حاشیه سلول = رنگ زمینه صفحه، تا شیار بین خانه‌ها در هر دو تم طبیعی باشد */
.tm-cell{position:absolute;overflow:hidden;border:1px solid var(--bg);border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;
  transition:filter .15s;color:#fff;text-shadow:0 1px 6px var(--shadow-soft)}
.tm-cell:hover{filter:brightness(1.25);z-index:3}
/* متن باید داخل کادر بماند: نام‌های بلند گروه صنعت از سلول بیرون می‌زدند.
   min-width:0 لازم است چون فرزند فلکس به‌صورت پیش‌فرض min-width:auto دارد و
   با ellipsis هم کوچک‌تر از محتوایش نمی‌شود. */
.tm-cell b,.tm-cell i{display:block;width:100%;min-width:0;padding:0 .25rem;box-sizing:border-box;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25;text-align:center}
.tm-cell b{font-weight:800}.tm-cell i{font-style:normal;opacity:.9}

/* ---------- عمق بازار ---------- */
.dom{display:grid;grid-template-columns:1fr auto 1fr;gap:.15rem .8rem;font-size:.78rem;direction:rtl}
.dom .h{color:var(--dim);font-size:.68rem;padding-bottom:.25rem}
.dom .r{position:relative;padding:.28rem .5rem;border-radius:.35rem;overflow:hidden;font-variant-numeric:tabular-nums}
.dom .r>i{position:absolute;inset-block:0;width:var(--w,0%);opacity:.14;border-radius:.35rem}
.dom .bid>i{inset-inline-start:0;background:var(--up)}
.dom .ask>i{inset-inline-end:0;background:var(--dn)}
.dom .px{text-align:center;color:var(--sub)}

/* ---------- گیج (حال بازار) ---------- */
.gauge{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}
/* میزبان بوم یک آیتم فلکس زیر align-items:center است و در لحظهٔ نخستین رسم هنوز
   خالی؛ پس clientWidth آن صفر می‌شود و charts.js به عرض پیش‌فرض ۶۰۰ برمی‌گردد.
   بوم بعد تا عرض کارت کوچک می‌شود و کمان گیج بیضی و فشرده درمی‌آید. با تمام‌عرض
   کردن میزبان، همان بار اول عرض واقعی خوانده می‌شود. .val و .cap مثل قبل وسط‌چین‌اند. */
.gauge>div:first-child{width:100%}
.gauge canvas{max-width:100%}
.gauge .val{font-size:1.3rem;font-weight:800;margin-top:-1.6rem}
.gauge .cap{font-size:.74rem;color:var(--dim)}

/* ---------- روایت / AI ---------- */
.ai-line{display:flex;gap:.7rem;align-items:flex-start;padding:.55rem 0;border-bottom:1px dashed var(--line)}
.ai-line:last-child{border-bottom:0}
.ai-line .dot{width:.55rem;height:.55rem;border-radius:50%;margin-top:.4rem;flex:none;
  background:radial-gradient(circle at 35% 35%, #cfd8ff, var(--violet))}
.ai-line p{font-size:.84rem;color:var(--sub);line-height:1.9}
.ai-line p b{color:var(--txt)}
.iris{background:linear-gradient(100deg,#23f7dd,#6ae9ff 30%,#8b7cf8 60%,#f7a8d8 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* score ring */
.ring-score{position:relative;width:7.5rem;height:7.5rem;flex:none}
.ring-score svg{transform:rotate(-90deg)}
.ring-score .v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-score .v b{font-size:1.6rem;font-weight:900}
.ring-score .v span{font-size:.64rem;color:var(--dim)}

/* ---------- چت ---------- */
.chatbox{display:flex;flex-direction:column;height:calc(100vh - 14rem);min-height:26rem}
.chatlog{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.8rem;padding:1rem .4rem}
.msg{max-width:78%;padding:.7rem 1rem;border-radius:1rem;font-size:.85rem;line-height:1.9}
.msg.me{align-self:flex-start;background:var(--tint2);border:1px solid var(--tint3);border-end-start-radius:.3rem}
.msg.bot{align-self:flex-end;background:var(--chip);border:1px solid var(--line);border-end-end-radius:.3rem}
.msg.bot .tag{font-size:.66rem;color:var(--violet);margin-bottom:.3rem}
.chatin{display:flex;gap:.6rem;padding-top:.8rem;border-top:1px solid var(--line)}
.chatin .inp{flex:1}
/* درِ چت برای مهمان: جای همان ردیفِ ورودی می‌نشیند تا کارت بالا و پایین
   نپرد. نشانِ داخلش همان `.lvl-teaser` سراسری است — قفل، هر جا که باشد،
   باید یک شکل و یک زبان داشته باشد. */
.chatgate{padding-top:.8rem;border-top:1px solid var(--line)}
[hidden]{display:none !important}

/* ---------- لاگین / پلن ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.auth-card{width:min(26rem,92vw);padding:2.2rem 2rem}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.plan{padding:1.6rem 1.4rem;text-align:center}
.plan.hot{border-radius:var(--r);box-shadow:0 0 0 1px var(--tint4), var(--glow)}
.plan .nm{font-size:1rem;font-weight:800}
.plan .pr{font-size:1.7rem;font-weight:900;margin:.8rem 0 .2rem}
.plan .pr small{font-size:.7rem;color:var(--dim);font-weight:500}
.plan ul{list-style:none;margin:1rem 0 1.3rem;display:flex;flex-direction:column;gap:.5rem;font-size:.8rem;color:var(--sub)}
.plan ul li::before{content:'✓ ';color:var(--mint)}
.plan ul li.no{opacity:.45}.plan ul li.no::before{content:'✕ ';color:var(--dn)}

/* ---------- utilities ---------- */
.row{display:flex;align-items:center;gap:.8rem}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}
.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mb2{margin-bottom:1rem}
.small{font-size:.76rem}.tiny{font-size:.68rem}.dimc{color:var(--dim)}.subc{color:var(--sub)}
.w100{width:100%}.center{text-align:center}.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.hint{font-size:.7rem;color:var(--dim);line-height:1.8}
.empty{padding:2.2rem;text-align:center;color:var(--dim);font-size:.82rem}
.legend{display:flex;gap:1rem;flex-wrap:wrap;font-size:.7rem;color:var(--dim)}
.legend i{display:inline-block;width:.7rem;height:.7rem;border-radius:.2rem;margin-inline-end:.3rem;vertical-align:-.08rem}

/* ---------- موبایل ---------- */
.idx-strip{scrollbar-width:none}
.idx-strip::-webkit-scrollbar{display:none}
@media (max-width:980px){
  :root{--side:0rem}
  /* پنهان‌سازی با transform (نه inset منفی) تا در RTL سرریز افقی نسازد */
  .side{position:fixed;inset-inline-start:0;width:15.5rem;box-shadow:0 0 60px var(--shadow-soft);
    transform:translateX(110%);transition:transform .3s,visibility .3s;visibility:hidden}
  .side.open{transform:none;visibility:visible}
  [dir=ltr] .side{transform:translateX(-110%)}
  [dir=ltr] .side.open{transform:none}
  .main{margin-inline-start:0}
  .burger{display:inline-flex}
  /* نوار بالا روی موبایل **یک ردیف** می‌ماند.
     پیش از این wrap بود و نوار شاخص سطر دوم را می‌گرفت؛ دو ردیفه بودنش
     ارتفاع نوار چسبان را تقریبا دو برابر می‌کرد و بد به نظر می‌رسید. حالا
     به‌جای شکستن، اجزا جمع می‌شوند: عنوان با سه‌نقطه کوتاه می‌شود، چیپ‌های
     شاخص با container query به درصد و نقطه می‌رسند، و جست‌وجو روی صفحهٔ تنگ
     کنار می‌رود (از داخل صفحه‌ها در دسترس است). */
  .topbar{flex-wrap:nowrap;height:var(--top);padding:.5rem .8rem;gap:.5rem}
  .topbar .pagetitle{font-size:.92rem;flex:1 1 auto;min-width:2.5rem;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* min-width تضمین می‌کند نوار شاخص در رقابت با عنوان و جست‌وجو و دکمه‌ها
     به صفر نرسد. بدون آن، روی ۷۶۸ و ۳۹۰ هر دو پهنای صفر می‌گرفت و نبض بازار
     بی‌صدا از نوار حذف می‌شد — هر دو سنجیده شدند. */
  .topbar .idx-strip{flex:1 1 auto;width:auto;min-width:7.2rem;
    justify-content:flex-end;overflow-x:auto}
  .search{flex:0 1 9.5rem;min-width:7rem}
  .search input{padding-block:.35rem}
  .userbtn{padding:.28rem .6rem;max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* ابزار ستون‌های واکنش‌گرا: صفحه‌ها با این دو کلاس ستون کم‌اهمیت را در موبایل حذف می‌کنند */
@media (max-width:760px){ .hide-sm{display:none!important} }
@media (min-width:761px){ .only-sm{display:none!important} }
/* سلولی که باید بشکند (جمله‌های بلند) */
.tbl td.wrap,.tbl th.wrap{white-space:normal;max-width:22rem}
/* KPI: چیدمان قطعی برای ۵ و ۶ کارتی تا ردیف ناقص نماند */
@media (min-width:1100px){
  .kpis:has(>:nth-child(5):last-child){grid-template-columns:repeat(5,1fr)}
  .kpis:has(>:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}
  /* هفت‌تایی ۴+۳ می‌شکند نه ۵+۲ — قاعده داخلی، دنباله همان دو خط بالا؛
     در دیده‌بان صنایع ردیف دوم ۲کارته آویزان دیده شد */
  .kpis:has(>:nth-child(7):last-child){grid-template-columns:repeat(4,1fr)}
}
@media (max-width:760px){
  .content{padding:1rem .8rem 3rem}
  /* جدول فشرده + راهنمای اسکرول افقی، چون جدول‌ها ستون زیاد دارند */
  table.tbl{font-size:.74rem}
  .tbl thead th,.tbl tbody td{padding:.4rem .5rem}
  .tbl .nm30{max-width:7rem}
  .tblwrap{position:relative}
  .tblwrap::before{content:'برای دیدن ستون‌های بیشتر، جدول را افقی بکشید';
    display:block;font-size:.68rem;color:var(--dim);padding:.1rem 0 .4rem}
  /* ریزمتن‌ها در موبایل خواناتر */
  .hint,.tiny{font-size:.78rem}
  .hint{color:var(--sub)}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem}
  .kpi{padding:.8rem .9rem}
  .kpi .num{font-size:1.2rem}
  .card .hd{padding:.85rem .9rem .3rem;flex-wrap:wrap;row-gap:.3rem}
  .card .bd{padding:.7rem .9rem 1rem}
  .grid{gap:.7rem}
  .tabs .tab{padding:.5rem .8rem;font-size:.8rem}
  .tblwrap{-webkit-overflow-scrolling:touch}
  .chiprow{gap:.35rem}
  .chip{padding:.24rem .65rem;font-size:.72rem}
  /* کلید سطح (ساده/حرفه‌ای): کنشی پرتکرار در نوار بالا، نه یک چیپ معمولی —
     باید کف ۴۴ پیکسل هدف لمسی را با پیکسل مطلق برآورده کند، چون
     html{font-size} در این عرض جمع‌وجور می‌شود و rem خودش کوچک می‌ماند.
     گزینشگر عمدا دو-کلاسه است (`.chip.lvlbtn` نه `.lvlbtn`): پایین‌تر در
     همین پرونده، زیر media (pointer:coarse)، قاعدهٔ `.chip{min-height:24px}`
     می‌آید که با یک کلاس هم‌رتبه است و با ترتیب منبع می‌برد؛ دو کلاس این
     رقابت را با ویژگی بالاتر، نه شانس ترتیب، حل می‌کند. */
  .chip.lvlbtn{min-height:44px;min-width:44px;padding-inline:.9rem}
  .plan .pr{font-size:1.4rem}
  .chatbox{height:calc(100vh - 17rem)}
  .msg{max-width:88%}
  .auth-card{padding:1.6rem 1.2rem}
  .row.wrap>.inp,.row.wrap>select.inp{width:100%!important;flex:1 1 100%!important}
}
/* دکمه منو: پیش‌فرض نمایان است و فقط در دسکتاپ پنهان می‌شود.
   (اگر برعکس نوشته شود، همین قانون بعدی، قانون داخل media را خنثی می‌کند و منوی موبایل از دسترس خارج می‌شود.) */
.burger{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;min-width:44px;min-height:44px;margin-inline-start:-.4rem;flex:none;
  background:none;border:0;color:var(--txt);font-size:1.35rem;cursor:pointer;border-radius:.6rem}
.burger:active{background:var(--hover)}
@media (min-width:981px){ .burger{display:none} }
/* پرده پشت منو در موبایل: هم منو را برجسته می‌کند، هم لمس بیرون یعنی بستن */
.scrim{position:fixed;inset:0;z-index:45;background:rgba(4,5,6,.55);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.on{opacity:1;visibility:visible}
@media (min-width:981px){ .scrim{display:none} }

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ═══ کشوی توضیحات (ⓘ) ═══
   جای جعبه های همیشه-روی-صفحه را گرفت. سنجیده شد ۵۷ جعبه در ۳۶ صفحه،
   مجموعا حدود ۱۳ هزار نویسه که همیشه دیده می شد.

   حرکت فقط با transform و opacity است — قاعده ثبت شده در docs/MOTION.md،
   چون هر چیز دیگری هر فریم رنگ آمیزی دوباره می خواهد. */

.info-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.35rem; height:1.35rem; margin-inline-start:.4rem; padding:0;
  border-radius:50%;
  /* رنگ لهجه به جای خاکستری: پیش از این color:var(--mute) و
     border-color:var(--line) بود و روی زمینه تیره عملا دیده نمی شد. */
  border:1px solid color-mix(in srgb, var(--mint) 55%, transparent);
  background:color-mix(in srgb, var(--mint) 10%, transparent);
  color:var(--mint);
  font-family:inherit; font-size:.78rem; font-weight:700; line-height:1;
  cursor:pointer; vertical-align:middle; flex:none;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.info-dot:hover,.info-dot:focus-visible{
  color:var(--bg); border-color:var(--mint); background:var(--mint);
}
/* روی موبایل هدف لمس باید دست کم ۲۴ پیکسل باشد؛ خودِ دایره کوچک می ماند و
   ناحیه لمس با شبه عنصر بزرگ می شود تا چیدمان جابه جا نشود. */
@media (pointer: coarse){
  .info-dot{ position:relative; }
  .info-dot::after{
    content:''; position:absolute; inset:-6px; border-radius:50%;
  }
}
.info-dot:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

.info-wrap{ position:fixed; inset:0; z-index:3000; }
.info-back{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  animation:info-fade .2s ease both;
}
/* پس زمینه پنل عمدا --card-solid است نه شیشه نیم شفاف --card: پشت کشو هر
   محتوایی می تواند باشد و با شیشه، کنتراست متن بلند تضمین شدنی نیست.
   سایه ندارد چون کل پنل انیمیت می شود (قاعده docs/MOTION.md) — جداسازی از
   صفحه با پرده و خط لبه انجام می شود.
   دو رنگ لهجه بخش ها با متن مخلوط می شوند چون mint و amber خام روی سفیدِ
   تم روشن حدود ۳:۱ اند؛ مخلوط ۷۰/۳۰ در هر دو تم از ۴٫۵:۱ می گذرد. */
.info-panel{
  --info-mint:color-mix(in srgb, var(--mint) 70%, var(--txt) 30%);
  --info-amber:color-mix(in srgb, var(--amber) 70%, var(--txt) 30%);
  position:absolute; inset-block:0; inset-inline-start:0;
  width:min(32rem,94vw); display:flex; flex-direction:column;
  background:var(--card-solid); border-inline-end:1px solid var(--line2);
  animation:info-in .26s var(--ease-out,cubic-bezier(.2,.8,.3,1)) both;
}
.info-panel:focus{ outline:none; }
.info-panel header{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:1.2rem 1.4rem 1.05rem; border-bottom:1px solid var(--line); flex:none;
}
.info-head{ flex:1; min-width:0; }
/* برچسب ریز بالای عنوان: می گوید این پنجره چیست و نقطه نعنایی، DNA نشان ⓘ
   را تکرار می کند */
.info-kick{
  display:flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:600; color:var(--info-mint);
  margin-bottom:.3rem;
}
.info-kick::before{
  content:''; width:.35rem; height:.35rem; border-radius:50%;
  background:var(--mint); flex:none;
}
.info-panel h3{ font-size:1.28rem; font-weight:700; line-height:1.55; margin:0; }
.info-x{
  flex:none; width:2.1rem; height:2.1rem; margin-top:.15rem; border-radius:.6rem;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:transparent; color:var(--sub);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.info-x svg{ width:1rem; height:1rem; }
.info-x:hover,.info-x:focus-visible{ color:var(--txt); border-color:var(--line2); background:var(--hover); }
.info-x:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

.info-body{ padding:1.3rem 1.4rem 1.6rem; overflow-y:auto; overscroll-behavior:contain; }
/* متن اصلی: لایه یک. بخش ها عمدا یک پله کوچک تر و کم رنگ ترند (لایه دو) */
.info-d{ font-size:.97rem; line-height:2.05; color:var(--txt); margin:0; }

/* سربرگ مشترک بخش ها: آیکون + برچسب */
.info-h{
  display:flex; align-items:center; gap:.45rem;
  font-size:.76rem; font-weight:700; margin:0 0 .45rem;
}
.info-h svg{ width:.95rem; height:.95rem; flex:none; }

/* «چطور حساب می شود» — بخش آرام با ریل کناری نعنایی */
.info-s{
  margin-top:1.4rem; padding-inline-start:.95rem;
  border-inline-start:2px solid var(--tint3);
}
.info-s .info-h{ color:var(--info-mint); }
.info-s p{ margin:0; font-size:.885rem; line-height:1.95; color:var(--sub); }
.info-s code{
  display:block; font-size:.86rem; color:var(--accent-txt);
  background:var(--mint-dim); border-radius:.5rem; padding:.55rem .7rem;
  direction:ltr; text-align:right; overflow-x:auto;
}
.info-s em{ display:block; font-style:normal; font-size:.8rem; color:var(--sub); margin-top:.4rem; }

/* «حد اعتبار» و «مرجع» — تمایز اصلی سایت اند و کارت نشان دار می گیرند،
   نه سطرهای گم شونده ته متن */
.info-c{
  margin-top:1.05rem; padding:.9rem 1.05rem .95rem; border-radius:.8rem;
  border:1px solid transparent;
}
.info-d + .info-c, .info-s + .info-c{ margin-top:1.4rem; }
.info-c + .info-c{ margin-top:.75rem; }
.info-c p{ margin:0; font-size:.885rem; line-height:1.95; color:var(--sub); }
.info-limits{
  background:color-mix(in srgb, var(--amber) 7%, transparent);
  border-color:color-mix(in srgb, var(--amber) 26%, transparent);
}
.info-limits .info-h{ color:var(--info-amber); }
.info-ref{
  background:color-mix(in srgb, var(--mint) 6%, transparent);
  border-color:color-mix(in srgb, var(--mint) 22%, transparent);
}
.info-ref .info-h{ color:var(--info-mint); }
.info-ref p{ font-size:.84rem; }

/* دسته کشیدنی — فقط در حالت bottom sheet دیده می شود */
.info-grip{ display:none; }

@keyframes info-fade{ from{ opacity:0 } to{ opacity:1 } }
/* RTL: پنل به لبه inline-start (راست) چسبیده، پس +100% یعنی بیرون صفحه */
@keyframes info-in{ from{ transform:translateX(100%) } }
@keyframes info-out-x{ to{ transform:translateX(100%) } }

/* خروج نرم: openInfo کلاس info-out را می گذارد، انیمیشن برمی گردد و بعد
   closeInfo واقعی DOM را برمی دارد */
.info-out .info-back{ animation:info-fade .2s ease both reverse; }
.info-out .info-panel{ animation:info-out-x .22s ease both; }

/* موبایل: از پایین بالا می آید، نه از کنار — پهنای ۳۹۰ برای کشوی کناری کم است.
   ارتفاع به اندازه محتواست (flex ستونی + max-height)؛ متن کوتاه، کشوی کوتاه. */
@media (max-width:600px){
  .info-panel{
    inset:auto 0 0 0; width:auto; max-height:86vh;
    border-inline-end:none; border-top:1px solid var(--line2);
    border-radius:1.1rem 1.1rem 0 0;
    animation-name:info-up;
  }
  .info-grip{ display:block; flex:none; padding:.55rem 0 .3rem; cursor:grab; touch-action:none; }
  .info-grip::before{
    content:''; display:block; width:2.6rem; height:.3rem; border-radius:99px;
    background:var(--line2); margin:0 auto;
  }
  .info-panel header{ padding-top:.4rem; touch-action:none; }
  .info-body{ padding:1.15rem 1.15rem 1.5rem; }
  @keyframes info-up{ from{ transform:translateY(100%) } }
  @keyframes info-out-y{ to{ transform:translateY(100%) } }
  .info-out .info-panel{ animation-name:info-out-y; }
}

/* وقتی کشو باز است صفحه پشتش نلغزد */
html.info-open{ overflow:hidden; }

/* ============================================================
   مهر زمان داده — browser.data-freshness در freshness.js
   ------------------------------------------------------------
   یک نشان کوچک که می گوید داده کنارش مال چه زمانی است. سه پله
   دارد و هر پله رنگش را از توکن های همین پرونده می گیرد، پس در
   هر دو تم خوانده می شود و رنگ خام تازه ای وارد سایت نمی کند:
     stamp-live    امروز و ساعت دار  → رنگ لهجه
     stamp-recent  تا سه روز         → کم رنگ
     stamp-stale   کهنه تر           → نشان amber موجود
     stamp-none    برچسب زمانی ندارد → کم رنگ، متن «—»
   چرا nowrap و tabular-nums: این نشان بیشتر داخل سلول جدول
   می نشیند و بدون این دو، ساعت و تاریخ در ستون بالا و پایین
   می پرند و ستون هر ردیف پهنای دیگری می گیرد.
   حرکت ندارد و سایه هم نمی گیرد (قاعده docs/MOTION.md).
   ============================================================ */
.stamp{
  display:inline-flex; align-items:center; gap:.32rem;
  font-size:.72rem; line-height:1.5; white-space:nowrap;
  font-variant-numeric:tabular-nums; vertical-align:middle;
}
.stamp>b{ font-weight:500; }
.stamp-l{ font-style:normal; color:var(--dim); font-size:.68rem; }
.stamp-live{ color:var(--accent-txt); }
.stamp-recent,.stamp-none{ color:var(--dim); }
.stamp-stale{ color:var(--amber); }
.stamp-stale>b{ font-weight:600; }
/* نشان کهنه داخل مهر: همان قرص badge سایت، فقط کمی جمع تر تا در
   سلول جدول ارتفاع ردیف را بلند نکند */
.stamp .badge{ padding:.1rem .45rem; font-size:.64rem; }

/* موبایل ۳۹۰: نشان کهنه کنار تاریخ، دو تکه است و در ستون باریک
   جدول می تواند پهنای ردیف را بشکند. متن نشان کوتاه نمی شود
   (کاربر باید همان کلمه را ببیند)، ولی اندازه یک پله کوچک تر
   می شود تا داخل قاب overflow-x جا بگیرد. */
@media (max-width:600px){
  .stamp{ font-size:.68rem; gap:.26rem; }
  .stamp .badge{ padding:.08rem .38rem; font-size:.6rem; }
}

/* ===== موبایل/لمس — کف اندازه ورودی و هدف لمس (سنجش m1-mobile، ۱۴۰۵/۰۶/۰۹ خ) =====
   فقط روی دستگاه لمسی اعمال می شود؛ دسکتاپ دست نخورده می ماند. */
@media (pointer: coarse){
  /* سافاری iOS روی ورودی با فونت زیر ۱۶ پیکسل هنگام فوکوس زوم می کند */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea,
  /* important لازم است: چند صفحه استایل درون خطی font-size روی همین کنترل ها
     دارند (fundamental#shSel و indexcompare) و درون خطی بر هر انتخابگری مقدم
     است، پس بدون این، قاعده روی آن ها اجرا نمی شد و سافاری iOS هنگام فوکوس
     زوم می کرد. سنجیده شد ۱۴۰۵/۰۶/۱۴ با شبیه سازی لمس واقعی iPhone. */
  .search input, .inp, select.inp, textarea.inp{ font-size:16px !important; }
  /* کف ۲۴ پیکسل هدف لمس؛ تا جای ممکن بدون جابه جایی چیدمان */
  .chip{ min-height:24px; }
  .topbar .topbrand{ min-height:24px; }
  .pagefoot .pf-nav a{ display:inline-flex; align-items:center; min-height:28px; }
  .whyq{ position:relative; }
  .whyq::after{ content:''; position:absolute; inset:-6px; border-radius:50%; }
  /* لینک درون جدول: گسترش ناحیه لمس بدون تغییر ارتفاع سطر یا عرض ستون —
     فضای padding خودِ سلول (که از قبل هست) قرض گرفته می شود، نه فضای اضافه. */
  td a, th a{ display:inline-block; padding:5px 7px; margin:-5px -7px; }
  .search .drop a{ padding-block:.6rem; }
  /* لینک تنها-در-سطر (مثل «تعریف کامل ›»)، هدفش فقط ارتفاعِ خط متن است */
  a.small, a.tiny, a.mintc{ display:inline-block; padding-block:6px; margin-block:-6px; }
}


/* ===== v72 — comfort theme + app-like mobile shell =====
   هدف: محیط مالی حرفه‌ای بماند، اما خواندن طولانی خسته‌کننده نباشد.
   وزن متن یک پله بالاتر، سطح‌ها نرم‌تر و رنگ‌ها زنده‌تر شده‌اند. */
:root{
  --card-shadow:0 14px 38px -28px var(--shadow);
  --focus-ring:0 0 0 3px var(--tint2);
}
:root[data-theme="light"]{
  --card-shadow:0 16px 42px -28px rgba(38,70,92,.28);
}
body{line-height:1.72}
strong,b{font-weight:800}
.subc,.dimc,.hint,.small,.tiny{font-weight:500}
.side{box-shadow:10px 0 36px -34px var(--shadow)}
.nav-group>.ng-title{font-weight:700;color:var(--dim)}
.nav-group>.ng-title>.ng-q{font-weight:500;opacity:.78}
.topbar{box-shadow:0 8px 28px -28px var(--shadow)}
.iconbtn,.userbtn,.search input,.chip,.btn,.inp,select.inp,textarea.inp{box-shadow:0 7px 18px -18px var(--shadow)}
.iconbtn:focus-visible,.userbtn:focus-visible,.search input:focus-visible,.chip:focus-visible,.btn:focus-visible,.inp:focus-visible,select.inp:focus-visible,textarea.inp:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.card{box-shadow:var(--card-shadow)}
.card::after{content:"";position:absolute;inset-inline:1.1rem;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--glass-mint),transparent);opacity:.8;pointer-events:none}
.kpi{background:linear-gradient(150deg,var(--tint),transparent 58%)}
.kpi .delta{font-weight:600}
.tbl tbody tr:last-child td{border-bottom:0}
.btn.primary{box-shadow:0 10px 28px -18px var(--mint)}
.tabs .tab.on{font-weight:800}
.empty{font-weight:600}

/* ناوبری پایین موبایل: چهار مقصد پرتکرار + منوی کامل. */
.mobile-appnav{display:none}
.mobile-appnav a,.mobile-appnav button{font-family:inherit}
@media (max-width:980px){
  body:not(.bare) .main{padding-bottom:calc(5.25rem + env(safe-area-inset-bottom))}
  .mobile-appnav{
    position:fixed;z-index:90;inset-inline:.65rem;bottom:max(.55rem,env(safe-area-inset-bottom));
    display:grid;grid-template-columns:repeat(5,1fr);align-items:stretch;gap:.25rem;
    padding:.45rem;border:1px solid var(--line);border-radius:1.15rem;
    background:color-mix(in srgb,var(--card-solid) 92%,transparent);
    backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 16px 44px -18px var(--shadow);
  }
  .mobile-appnav a,.mobile-appnav button{
    position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
    min-width:0;min-height:3.55rem;padding:.35rem .2rem;border:0;border-radius:.82rem;
    background:transparent;color:var(--dim);font-size:.66rem;font-weight:700;cursor:pointer;
  }
  .mobile-appnav svg{width:1.28rem;height:1.28rem;stroke-width:1.9}
  .mobile-appnav .on{color:var(--accent-txt);background:var(--tint2)}
  .mobile-appnav .on::after{content:"";position:absolute;top:.2rem;width:1.15rem;height:.16rem;border-radius:99px;background:var(--mint)}
  .mobile-appnav a:active,.mobile-appnav button:active{background:var(--hover)}
  .fab-chat{bottom:calc(5.65rem + env(safe-area-inset-bottom))}
}
@media (max-width:760px){
  .content{padding:1rem .72rem 3rem}
  .topbar{padding:.5rem .72rem .6rem;background:color-mix(in srgb,var(--topbar-bg) 94%,transparent)}
  .topbar .pagetitle{font-size:.96rem}
  .topbar .idx-strip{gap:.4rem}
  .topbar .idxchip{padding:.34rem .62rem;font-size:.72rem}
  .search{flex:1 1 10rem;order:5}
  .search input{width:100%;max-width:none;min-height:44px;background:var(--card-solid)}
  .userbtn{min-height:44px;font-weight:700}
  .card{border-radius:1.05rem}
  .card .hd{padding:.95rem 1rem .35rem}
  .card .hd h3{font-size:1rem}
  .card .bd{padding:.75rem 1rem 1.05rem}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .kpi{padding:.88rem .92rem}
  .kpi .lbl{font-size:.72rem;line-height:1.6}
  .kpi .num{font-size:1.28rem}
  .tabs{gap:.2rem;padding-bottom:.1rem;scroll-snap-type:x proximity}
  .tabs .tab{min-height:42px;display:flex;align-items:center;scroll-snap-align:start}
  .chip{min-height:36px;padding:.38rem .72rem}
  .btn{min-height:44px;padding:.62rem 1rem}
  .pagefoot{padding-bottom:1rem}
}
@media (max-width:390px){
  .mobile-appnav{inset-inline:.45rem;padding:.35rem;gap:.12rem}
  .mobile-appnav a,.mobile-appnav button{font-size:.62rem;min-height:3.45rem}
  .kpis{gap:.5rem}
}

/* v72 — حالت قفل‌شدهٔ گزینه‌ای که ادمین برای کاربر باز نکرده است. */
.switch.is-locked{opacity:.42;cursor:not-allowed;filter:saturate(.65)}

/* phase7 — حساب کاربری: رفتار نزدیک‌تر به اپ روی موبایل، بدون تغییر منطق دسکتاپ. */
.account-page .tabs{position:sticky;top:calc(var(--top-h,0px) + .35rem);z-index:28;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:14px}
.account-page .tab{font-weight:800}
.account-page #msChips{position:sticky;top:calc(var(--top-h,0px) + 3.65rem);z-index:24;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding-block:.45rem}
.account-page .card .hd h3{font-weight:850;letter-spacing:-.015em}
@media(max-width:720px){
  .account-page .content{padding-inline:.75rem;padding-bottom:calc(6.5rem + env(safe-area-inset-bottom))}
  .account-page .tabs{margin-inline:-.75rem;padding:.45rem .75rem;border-radius:0;overflow-x:auto;overflow-y:hidden;display:flex;flex-wrap:nowrap;scrollbar-width:none;box-shadow:0 8px 24px color-mix(in srgb,var(--bg) 74%,transparent)}
  .account-page .tabs::-webkit-scrollbar{display:none}
  .account-page .tab{flex:0 0 auto;min-height:44px;display:flex;align-items:center;padding-inline:.85rem;white-space:nowrap}
  .account-page #msChips{margin-inline:-.75rem;padding-inline:.75rem;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .account-page #msChips::-webkit-scrollbar{display:none}
  .account-page #msChips .chip{flex:0 0 auto;min-height:40px;display:flex;align-items:center;font-weight:800}
  .account-page .card{border-radius:18px}
  .account-page .card .hd{padding:.9rem 1rem}
  .account-page .card .bd{padding:1rem}
  .account-page .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
  .account-page .kpi .num{font-size:1.15rem;font-weight:900}
  .account-page .btn.sm{min-height:42px}
}
@media(max-width:430px){
  .account-page .kpis{grid-template-columns:1fr 1fr}
  .account-page .kpi{min-width:0}
  .account-page .kpi .lbl,.account-page .kpi .delta{font-size:.72rem}
}
.account-page .mytier-sep{height:1px;background:var(--line);margin:1rem 0;opacity:.75}

/* ===== phase8 — notification center + community club + denser mobile backoffice ===== */
.shell-notify-btn{position:relative;flex:0 0 auto}
.shell-notify-btn svg{width:1.15rem;height:1.15rem}
.shell-notify-count{position:absolute;inset-inline-start:-.22rem;top:-.2rem;min-width:1.18rem;height:1.18rem;padding:0 .22rem;border-radius:99px;background:var(--dn);color:#fff;font-size:.62rem;font-weight:900;display:grid;place-items:center;border:2px solid var(--topbar-bg)}
.shell-notify-pop{position:fixed;z-index:115;top:calc(var(--top-h,64px) + .55rem);inset-inline-end:1rem;width:min(24rem,calc(100vw - 1.4rem));max-height:min(70vh,36rem);overflow:hidden;border:1px solid var(--line2);border-radius:1rem;background:color-mix(in srgb,var(--card-solid) 96%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 70px -30px var(--shadow)}
.shell-notify-pop[hidden]{display:none}
.shell-notify-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.shell-notify-head b{font-weight:900}.shell-notify-head a{font-size:.75rem;color:var(--accent-txt);font-weight:750}
.shell-notify-body{max-height:calc(min(70vh,36rem) - 3.2rem);overflow:auto;padding:.45rem}
.shell-notify-item{width:100%;display:grid;gap:.3rem;text-align:right;border:0;border-radius:.8rem;background:transparent;color:var(--txt);padding:.75rem .8rem;font-family:inherit;cursor:pointer}
.shell-notify-item:hover,.shell-notify-item:focus-visible{background:var(--hover);outline:none}
.shell-notify-item.is-new{background:color-mix(in srgb,var(--mint) 7%,transparent)}
.shell-notify-title{display:flex;align-items:center;gap:.4rem;font-weight:850}.shell-notify-title i{font-style:normal;font-size:.62rem;border-radius:99px;padding:.08rem .4rem;background:var(--mint-dim);color:var(--accent-txt)}
.shell-notify-text{font-size:.76rem;line-height:1.75;color:var(--sub);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shell-notify-date{font-size:.68rem;color:var(--dim)}
.club-community-grid{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:1rem}
.club-community-grid>section{min-width:0}
.hot-symbol-list{display:grid;gap:.38rem}
.hot-symbol-row{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.45rem .65rem;padding:.65rem .7rem;border:1px solid var(--line);border-radius:.8rem;background:var(--card2);color:var(--txt);text-decoration:none}
.hot-symbol-row:hover{border-color:var(--line2);background:var(--hover)}
.hot-symbol-row .tiny{grid-column:2/4}.hot-rank{width:1.55rem;height:1.55rem;border-radius:.55rem;display:grid;place-items:center;background:var(--tint2);color:var(--accent-txt);font-size:.7rem;font-weight:900}
.community-comment{padding:.7rem 0;border-bottom:1px solid var(--line)}.community-comment:last-child{border-bottom:0}.community-comment-body{line-height:1.75;margin:.35rem 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:760px){
  body.bare .main{padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .topbar-bare{position:sticky;top:0;z-index:70;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:.45rem;padding:.55rem .65rem;background:color-mix(in srgb,var(--topbar-bg) 96%,transparent);backdrop-filter:blur(16px)}
  .topbar-bare .topbrand{grid-column:1}.topbar-bare .pagetitle{grid-column:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-bare .barnav{grid-column:1/-1;display:flex;overflow-x:auto;flex-wrap:nowrap;gap:.35rem;padding:.2rem 0;scrollbar-width:none}.topbar-bare .barnav::-webkit-scrollbar{display:none}
  .topbar-bare .barclock,.topbar-bare .backapp{display:none}
  .topbar-bare .iconbtn,.topbar-bare .userbtn{min-height:42px}
  .shell-notify-pop{top:4.25rem;inset-inline:.5rem;width:auto;max-height:72vh}
  .club-community-grid{grid-template-columns:1fr}.hot-symbol-row{min-height:48px}
}
@media(max-width:430px){.shell-notify-btn{min-width:42px}.shell-notify-count{top:.05rem;inset-inline-start:.05rem}.club-community-grid{gap:.7rem}.hot-symbol-row{grid-template-columns:auto auto 1fr;padding:.6rem}.hot-symbol-row .small{font-size:.72rem}}


/* Phase 11 — پروفایل تحلیل‌گر و تعامل اجتماعی */
.analyst-hero{overflow:hidden;position:relative}
.analyst-hero:before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--mint),var(--gold))}
.analyst-follow-card{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.9rem 1rem;margin-bottom:.55rem;text-decoration:none;color:inherit;transition:transform .15s ease,border-color .15s ease}
.analyst-follow-card:hover{transform:translateY(-1px);border-color:var(--mint)}
.analyst-page .kpis{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.blk-act{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
@media(max-width:640px){.analyst-page .content{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}.analyst-page .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.analyst-follow-card{min-height:3.25rem}.blk-act .btn{min-height:2.45rem;padding-inline:.7rem}}

/* Phase 12 — reputation/following feed */
.analyst-mini-metrics{margin-top:.35rem;font-weight:650}
.following-feed-card .hd{align-items:flex-start}
.analyst-follow-card{padding:.8rem 1rem;margin-bottom:.65rem}
@media(max-width:720px){
  .analyst-mini-metrics{font-size:.72rem;line-height:1.7}
  .analyst-follow-card .row{gap:.7rem}
  .analyst-follow-card .btn{min-height:40px}
}


/* Phase 13 — unified notification center */
.notify-status-grid{align-items:stretch}
.notify-channel{height:100%;min-height:5rem}
.notify-rule-grid{align-items:start}
.notify-hour-field,.notify-cap-field{margin:0;min-width:6.5rem}
.notify-hour-field .inp,.notify-cap-field .inp{min-height:42px}
.notify-pref-row{gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
.notify-pref-row:last-child{border-bottom:0}
.notify-center-card .soft-sep{height:1px;background:var(--line);margin:1.1rem 0;opacity:.78}
@media(max-width:760px){
  .notify-status-grid{grid-template-columns:1fr}
  .notify-rule-grid{grid-template-columns:1fr}
  .notify-center-card .grid.g-2{grid-template-columns:1fr}
  .notify-center-card .grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .notify-cap-field{min-width:0}
  .notify-pref-row{min-height:54px}
}
@media(max-width:430px){
  .notify-center-card .grid.g-3{grid-template-columns:1fr}
  .notify-hour-field{flex:1;min-width:7rem}
}
/* Phase 14 — per-analyst notification routes + delivery history */
.analyst-notify-box{padding:.8rem;border:1px solid var(--line);border-radius:.9rem;background:var(--card2)}
.analyst-notify-grid{display:flex;gap:.45rem;flex-wrap:wrap}
.delivery-history-list{display:grid;gap:.45rem}
.delivery-history-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem .8rem;padding:.72rem .8rem;border:1px solid var(--line);border-radius:.8rem;background:var(--card2)}
.delivery-history-item .meta{grid-column:1/-1;font-size:.72rem;color:var(--dim);line-height:1.7}
.delivery-matrix{overflow:auto;border:1px solid var(--line);border-radius:.8rem}
.delivery-matrix table{min-width:760px}
@media(max-width:640px){.analyst-notify-grid{display:grid;grid-template-columns:1fr}.analyst-notify-grid .btn{width:100%;min-height:42px}.delivery-history-item{grid-template-columns:1fr}.delivery-history-item .badge{justify-self:start}}


/* ---------- Phase 15: delivery operations / history ---------- */
.delivery-ops-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.delivery-ops-kpis>div{border:1px solid var(--line);border-radius:12px;padding:.55rem .65rem;background:color-mix(in srgb,var(--card) 88%,transparent);min-width:0}
.delivery-ops-kpis b{display:block;font-size:1rem;font-weight:900}
.delivery-ops-kpis span{display:block;margin-top:.12rem;font-size:.67rem;color:var(--dim);font-weight:650}
.delivery-history-filters{gap:.6rem;align-items:end}
.delivery-history-filters .field{min-width:9.5rem;flex:1 1 10rem}
@media(max-width:640px){
  .delivery-ops-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .delivery-history-filters{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .delivery-history-filters .field{min-width:0;width:100%}
  #p-deliveryops .tblwrap2{margin-inline:-.15rem}
  #p-deliveryops .atbl th,#p-deliveryops .atbl td{padding:.55rem .5rem}
}

/* ========================================================================
   phase25 — full-site 390px + accessibility hardening
   این قواعد عمومی‌اند تا صفحه‌های قدیمی و تازه یک رفتار موبایل مشترک داشته باشند.
   ======================================================================== */
.skip-link{position:fixed;z-index:5000;inset-inline-start:.75rem;top:.5rem;transform:translateY(-180%);padding:.65rem .9rem;border-radius:.65rem;background:var(--card-solid);border:1px solid var(--mint);color:var(--txt);font-weight:800;box-shadow:0 14px 34px -20px var(--shadow)}
.skip-link:focus{transform:none}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.a11y-scroll-region:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:.45rem}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

@media(max-width:760px){
  /* iOS/Safari: ورودی ریزتر از 16px باعث zoom ناخواسته می‌شود. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:16px!important}
  .overlay{padding:max(.5rem,env(safe-area-inset-top)) .5rem max(.5rem,env(safe-area-inset-bottom));align-items:flex-end}
  .modal{width:100%;max-width:none;max-height:calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:1.15rem 1.15rem .8rem .8rem;padding:1.05rem 1rem;overscroll-behavior:contain}
  .modal>.row:first-child,.card>.hd{min-width:0;flex-wrap:wrap}
  .card>.hd>*{min-width:0}
  .card>.hd .sub{white-space:normal}
  .row:not(.nowrap){min-width:0}
  .row.between{row-gap:.5rem}
  .grid,.g-2,.g-3,.g-4{min-width:0}
  .card,.blk,.kpi,.pane,.chart,.plot{min-width:0;max-width:100%}
  canvas,svg,img,video,iframe{max-width:100%}
  pre,code{max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
  .tblwrap{max-width:100%;overscroll-behavior-inline:contain;scrollbar-gutter:stable}
  table.tbl{min-width:max-content}
  .tabs,.chiprow,.page-subnav{overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
  .btn-group,.actions,.toolbar{max-width:100%;flex-wrap:wrap}
  .btn-group>.btn,.actions>.btn{max-width:100%}
  .search .drop{min-width:0;width:min(100%,calc(100vw - 1.44rem))}
}
@media(max-width:390px){
  .content{padding-inline:.62rem}
  .card .hd{padding-inline:.88rem}.card .bd{padding-inline:.88rem}
  .kpi{padding:.8rem .82rem}
  .topbar{padding-inline:.62rem}
  .page-subnav{margin-inline:-.15rem;padding-inline:.15rem}
  .mobile-appnav{bottom:max(.4rem,env(safe-area-inset-bottom))}
}
@media(forced-colors:active){
  .card,.btn,.chip,.inp,.modal,.mobile-appnav{border:1px solid CanvasText}
  .up,.dn,.mintc,.violetc{color:CanvasText!important}
}

/* CP29 — shared Media Picker + Page CMS media */
.mpick-backdrop{position:fixed;inset:0;z-index:4900;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:1rem}
.mpick-dialog{width:min(68rem,100%);max-height:min(88dvh,54rem);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:1rem;background:var(--card-solid);box-shadow:0 24px 80px var(--shadow)}
.mpick-head,.mpick-tools,.mpick-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.mpick-head h3{margin:0}.mpick-head p{margin:.2rem 0 0;color:var(--dim);font-size:.78rem}.mpick-tools .inp{flex:1;min-width:0}.mpick-status{padding:.45rem 1rem 0;color:var(--dim);font-size:.72rem}
.mpick-grid{padding:1rem;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.7rem;min-height:12rem}
.mpick-card{appearance:none;border:1px solid var(--line);border-radius:.8rem;background:var(--card2);color:var(--txt);padding:.45rem;text-align:start;cursor:pointer;display:flex;flex-direction:column;gap:.45rem;min-width:0}
.mpick-card:hover{border-color:var(--tint4)}.mpick-card.is-selected{outline:2px solid var(--mint);outline-offset:1px}.mpick-thumb{display:block;aspect-ratio:16/10;border-radius:.55rem;overflow:hidden;background:var(--bg2)}.mpick-thumb img{width:100%;height:100%;object-fit:cover;display:block}.mpick-meta{display:grid;gap:.12rem;min-width:0}.mpick-meta b,.mpick-meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mpick-meta b{font-size:.78rem}.mpick-meta small{color:var(--dim);font-size:.66rem}.mpick-empty{grid-column:1/-1;padding:2.5rem 1rem;text-align:center;color:var(--dim)}.mpick-error{color:var(--dn)}.mpick-foot{border-top:1px solid var(--line);border-bottom:0}.cms-media{margin:.75rem 0 1rem}.cms-media picture,.cms-media img{display:block}.cms-media img{width:min(100%,48rem);max-height:22rem;object-fit:cover;border-radius:.85rem;border:1px solid var(--line);margin-inline:auto}.cms-media.compact img{width:min(100%,22rem);max-height:12rem}
@media(max-width:640px){.mpick-backdrop{padding:.45rem;align-items:end}.mpick-dialog{max-height:94dvh;border-radius:1rem 1rem .65rem .65rem}.mpick-head,.mpick-tools,.mpick-foot{padding:.75rem;flex-wrap:wrap}.mpick-tools .inp{flex-basis:100%}.mpick-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:.75rem}.mpick-foot>span:last-child{width:100%}.mpick-foot .btn{flex:1}}

/* ── بلوک‌های متنِ ساختاریافته (noteblocks.js) ─────────────────────────────
   این قاعده‌ها تا امروز فقط داخلِ notesedit.html بودند، چون تنها جایی بود که
   بلوک رندر می‌شد. حالا تحلیلِ کاربران هم بلوکی است و روی هر صفحه‌ای که فهرست
   تحلیل دارد نمایش داده می‌شود، پس جایشان این‌جاست.

   یک تعریف، نه دو تا: نسخهٔ درونِ notesedit.html برداشته شد. دو تعریف از یک
   چیز دیر یا زود دو رفتار می‌شود، و آن روز کسی نمی‌فهمد چرا یادداشت و تحلیل
   شبیه هم نیستند.

   رنگ‌ها به توکن‌های خود سایت وصل‌اند تا در تم روشن هم خوانا بمانند. */
.nb-h{margin:1.1em 0 .5em;line-height:1.5}
.nb-p{margin:0 0 .9em;line-height:2}
.nb-list{margin:0 0 .9em;padding-inline-start:1.4em;line-height:2}
.nb-quote{margin:0 0 .9em;padding:.6em 1em;border-inline-start:3px solid var(--mint);
          background:var(--tint);border-radius:6px}
.nb-quote cite{display:block;margin-top:.4em;font-size:.9em;opacity:.75;font-style:normal}
.nb-code{background:var(--chip);color:var(--txt);padding:.8em 1em;border-radius:8px;overflow:auto;
         font-size:.9em;margin:0 0 .9em;border:1px solid var(--line)}
.nb-hr{border:0;border-top:2px dashed var(--line);margin:1.4em 0}
.nb-warn{border:1px solid var(--amber);background:rgba(153,101,5,.08);border-radius:8px;
         padding:.7em 1em;margin:0 0 .9em}
.nb-warn-t{font-weight:700;margin-bottom:.25em}
.nb-tablewrap{overflow-x:auto;margin:0 0 .9em}
.nb-table{border-collapse:collapse;width:100%;min-width:320px}
.nb-table td,.nb-table th{border:1px solid var(--line);padding:.45em .6em;text-align:right}
.nb-table th{background:var(--chip);font-weight:700}
.nb-fig{margin:0 0 1em}
.nb-fig picture,.nb-fig img{max-width:100%;height:auto;border-radius:8px;display:block}
.nb-fig figcaption{font-size:.88em;opacity:.75;margin-top:.4em;text-align:center}

/* ── حالت embed: صفحه داخل iframe صفحهٔ دیگری نشسته است ──
   پوسته اصلا ساخته نمی‌شود (app.js، initShell)، پس این‌جا فقط فاصله‌های
   بیرونی برداشته می‌شوند تا نمودار تمام عرض تب را بگیرد و اسکرول دوم
   نسازد. جدا از .bare است: آن نوار بالای کامل دارد و مال پنل مدیریت است. */
body.embed{background:transparent}
body.embed .content{padding:.5rem;max-width:none}
body.embed .topbar,body.embed .side,body.embed .foot,body.embed .skip-link{display:none}

/* روی صفحهٔ باریک، جست‌وجوی نماد از نوار بالا کنار می‌رود.
   یک‌ردیفه ماندنِ نوار مهم‌تر است و جست‌وجو از داخل خود صفحه‌ها در دسترس
   است. آستانه ۶۴۰ است چون تا همان‌جا کادر جست‌وجو بدون فشار جا می‌شود. */
@media (max-width:640px){
  .topbar .search{display:none}
  /* جا از جایی می‌آید که کم‌ارزش‌تر است: «ارزش معاملات» (که درصد ندارد و در
     صفحه‌های بازار هست) می‌رود و نام کاربر کوتاه می‌شود. دو درصدِ شاخص کل و
     هم‌وزن می‌مانند، چون همان چیزی‌اند که در یک نگاه لازم است. */
  .topbar .idxchip.val-chip{display:none}
  .userbtn{max-width:4.6rem}
}