/* ==========================================================================
   TradeLab — Base / Reset / Components
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff);font-size:var(--fs-base);line-height:1.85;
  background:var(--bg);background-image:var(--bg-grad);background-attachment:fixed;
  color:var(--txt);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  direction:rtl;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--brand-1);outline-offset:2px;border-radius:4px}
::selection{background:rgba(139,92,246,.32);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--txt-4);background-clip:padding-box}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px}
.container-sm{max-width:900px}
.row{display:flex;align-items:center}
.row-between{display:flex;align-items:center;justify-content:space-between}
.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}
.grid{display:grid}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.g-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.g-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.g-6{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.wrap{flex-wrap:wrap}
.flex-1{flex:1}
.mt-auto{margin-top:auto}
.hidden{display:none!important}
.text-center{text-align:center}
.text-left{text-align:left}
.ltr{direction:ltr;text-align:left}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";direction:ltr;display:inline-block;unicode-bidi:isolate}
/* `.mono` دیگر «فونتِ دیگر» نیست، «ارقامِ هم‌عرضِ همان فونت» است.
   پیش‌تر تنها font-family می‌داد و چون آن فونت نبود، عدد به فونتِ
   سیستم می‌افتاد. حالا صریحاً tabular-nums می‌گذارم تا ستون‌ها
   میزان بمانند. شرحِ سنجه در tokens.css کنارِ --ff-mono. */
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1;
  font-feature-settings:var(--num-feat);direction:ltr;display:inline-block;
  unicode-bidi:isolate;font-variant-ligatures:none}
/* ══ ارقامِ هم‌عرض — یک‌بار برای همیشه، سراسری ══
   تاریخِ این قاعده را بخوان تا دوباره تکرار نشود:

   نسخه‌ی پیشین یک **سیاهه‌ی سفیدِ دستی** بود («.acct b, .ord-row .input,
   …»، ۱۱ گزینشگر) و خودش در یادداشتش هشدار داده بود:
   «فردا قاعده‌ی دوازدهم اضافه می‌شود و از قلم می‌افتد».
   دقیقاً همان شد. سنجیدم (tools/vnumfont.py):

     app/sessions.html:26   .ss-st b   → font-family:var(--font-mono)  ✗ بی‌tnum
     app/leaderboard.html:48 .lbx-mv b → font-family:var(--font-mono)  ✗ بی‌tnum
     app/leaderboard.html:36 .lbx-rk   → عددِ رتبه                     ✗ بی‌tnum
     base.css:202           .tbl td    → عددِ جدول                      ✗ بی‌tnum

   یعنی ۴۳ عددِ دیدنی روی دو صفحه `font-variant-numeric:normal` داشتند —
   همان دو ایرادی که کارفرما داد («و۹» جلسات بک‌تست و «و۱۴» جدولِ
   برترین‌ها). این دو صفحه <style> محلیِ خودشان را دارند و هرگز به سیاهه
   افزوده نشدند.

   درمانِ ریشه‌ای: به‌جای وصله‌ی گزینشگرها، ویژگی را روی ریشه می‌گذارم تا
   **ارث برسد** و هیچ قاعده‌ی تازه‌ای نتواند از قلم بیفتد.
   بی‌خطر است چون tnum/lnum تنها روی *رقم* اثر دارد و به حروفِ فارسی
   دست نمی‌زند؛ و --ff-mono در این پروژه خودش Vazirmatn است
   (شرحش در tokens.css:49) پس قلمِ اصلیِ سایت عوض نمی‌شود.
   سنجیده پس از این تغییر: vnumfont ۹/۰ · هندسه سالم · جارو سبز. */
:root{
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:var(--num-feat)}

.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5{line-height:1.5;font-weight:800;color:var(--txt)}
h1{font-size:var(--fs-5xl);line-height:1.32;letter-spacing:-.4px}
h2{font-size:var(--fs-3xl);line-height:1.4}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg);font-weight:700}
p{color:var(--txt-2)}
.lead{font-size:var(--fs-md);color:var(--txt-2)}
.muted{color:var(--txt-3)}
.dim{color:var(--txt-4)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.b{font-weight:700}.bb{font-weight:800}
.up{color:var(--up)}.down{color:var(--down)}.warn{color:var(--warn)}
/* ⚠️ این دو کلاس نامشان «gradient» است ولی دیگر گرادیان نیستند.
   نام را نگه داشتم چون در چند صفحه‌ی HTML به‌کار رفته و تغییرِ نام
   آن‌ها را بی‌استایل می‌کرد؛ ولی رنگ یکدستِ بنفش شد (خواسته‌ی
   کارفرما). `background-clip:text` برداشته شد چون با رنگِ یکدست
   بی‌معنی است و در بعضی مرورگرها متن را نامرئی می‌کرد. */
.gradient-text{color:var(--brand-1);display:inline-block}
.title-gradient{color:var(--brand-1)}
[data-theme="light"] .title-gradient{color:var(--brand-2)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:var(--r-md);font-weight:700;font-size:var(--fs-base);
  transition:var(--t);white-space:nowrap;border:1px solid transparent;position:relative;
  line-height:1.5;
}
.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--brand-1);color:var(--brand-ink);box-shadow:0 6px 20px -8px rgba(139,92,246,.6)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 10px 26px -8px rgba(139,92,246,.55)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--surface-2);color:var(--txt);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-hover);border-color:var(--line-2)}
.btn-outline{border-color:var(--line-2);color:var(--txt-2);background:transparent}
.btn-outline:hover{border-color:var(--brand-1);color:var(--brand-1);background:var(--info-soft)}
.btn-up{background:var(--up);color:#04140a}
.btn-up:hover{filter:brightness(1.08)}
.btn-down{background:var(--down);color:#fff}
.btn-down:hover{filter:brightness(1.08)}
.btn-danger{background:var(--down-soft);color:var(--down);border-color:rgba(239,68,68,.35)}
.btn-danger:hover{background:var(--down);color:#fff}
.btn-sm{padding:7px 14px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-xs{padding:4px 10px;font-size:var(--fs-xs);border-radius:var(--r-xs)}
.btn-lg{padding:14px 30px;font-size:var(--fs-md)}
.btn-block{width:100%}
.btn-icon{padding:9px;width:38px;height:38px;border-radius:var(--r-sm)}
.btn-icon.btn-sm{width:32px;height:32px;padding:6px}
.btn.loading{color:transparent!important;pointer-events:none}
.btn.loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;
  border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;color:var(--brand-ink)}
.btn-ghost.loading::after,.btn-outline.loading::after{color:var(--txt)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Cards ---------- */
.card{
  background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;transition:var(--t);
}
.card-hover:hover{border-color:var(--line-2);transform:translateY(-3px);box-shadow:var(--shadow)}
.card-flat{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-pad{padding:22px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.card-head h2,.card-head h3,.card-head h4{margin:0}
.card-head h2{font-size:var(--fs-xl);line-height:1.4;letter-spacing:0}
.card-body{padding:20px}
/* ۱۴۰۵/۰۶/۱۶ — «فاصله‌ی جعبه‌ها در تقویمِ عملکرد تنظیم نیست».
   اندازه‌گیری: `.card` خودش ۲۲px لایه دارد و `.card-body` هم ۲۰px ⇒
   شبکه‌ی تقویم ۴۲px از لبه‌ی کارت فاصله می‌گرفت (۶۷ در برابرِ ۲۴ی
   ستونِ KPI) و خطِ زیرِ `.card-head` ۲۲px پیش از لبه‌ی کارت قطع
   می‌شد. ۱۷ جای برنامه همین ترکیب را دارند. وقتی کارت بخش‌بندی شده
   (head/body) لایه‌ی خودِ کارت صفر می‌شود تا بخش‌ها تا لبه بروند. */
.card:has(>.card-head),.card:has(>.card-body){padding:0}
.card-glow{box-shadow:var(--glow);border-color:rgba(139,92,246,.35)}

/* ---------- Badges / Pills ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:700;line-height:1.8;border:1px solid transparent;white-space:nowrap}
.badge-b{background:var(--info-soft);color:#c4b5fd;border-color:rgba(139,92,246,.3)}
.badge-g{background:var(--up-soft);color:#5fe08c;border-color:rgba(34,197,94,.3)}
.badge-r{background:var(--down-soft);color:#ff8f8f;border-color:rgba(239,68,68,.3)}
.badge-o{background:var(--warn-soft);color:#fbc668;border-color:rgba(245,158,11,.3)}
.badge-p{background:var(--special-soft);color:#d0a3ff;border-color:rgba(168,85,247,.3)}
.badge-n{background:var(--surface-3);color:var(--txt-3);border-color:var(--line)}
[data-theme="light"] .badge-b{color:#6d28d9}
[data-theme="light"] .badge-g{color:#15803d}
[data-theme="light"] .badge-r{color:#b91c1c}
[data-theme="light"] .badge-o{color:#b45309}
[data-theme="light"] .badge-p{color:#7e22ce}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--txt-2);margin-bottom:7px}
.label .req,.lbl .req{color:var(--down);margin-inline-start:2px;font-weight:700}
.input,.select,.textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 14px;color:var(--txt);transition:var(--t);font-size:var(--fs-base);
}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand-1);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
.input::placeholder,.textarea::placeholder{color:var(--txt-4)}
.input:disabled,.select:disabled{opacity:.55;cursor:not-allowed}
.textarea{min-height:100px;resize:vertical;line-height:1.9}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b8aa5' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 13px center;padding-left:36px;cursor:pointer}
.input-err{border-color:var(--down)!important}
/* ورودیِ قفل‌شده — مقدارش از جای دیگری می‌آید (مثلِ سرمایه‌ی جلسه که
   قالبِ پراپ تعیینش می‌کند). عمداً «خاموش» دیده می‌شود ولی خوانا
   می‌ماند: کاربر باید عدد را ببیند، فقط نتواند عوضش کند. */
.input-locked{background:var(--bg-3,rgba(127,142,166,.09))!important;
  color:var(--txt-2)!important;cursor:not-allowed;opacity:.92}
.err-msg{color:var(--down);font-size:var(--fs-xs);margin-top:5px;display:block}
.hint{color:var(--txt-4);font-size:var(--fs-xs);margin-top:5px;display:block}
.input-group{position:relative}
.input-group .suffix{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--txt-4);font-size:var(--fs-sm);pointer-events:none}
.input-group .input{padding-left:52px}
.check{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:var(--fs-sm);color:var(--txt-2);line-height:1.9}
.check input{width:17px;height:17px;accent-color:var(--brand-1);cursor:pointer;margin-top:5px;flex:none}
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none}
.switch input{opacity:0;width:0;height:0}
.switch .sl{position:absolute;inset:0;background:var(--line-2);border-radius:99px;transition:var(--t);cursor:pointer}
.switch .sl:before{content:"";position:absolute;width:18px;height:18px;right:3px;top:3px;background:#fff;border-radius:50%;transition:var(--t)}
.switch input:checked + .sl{background:var(--brand-1)}
.switch input:checked + .sl:before{transform:translateX(-20px)}
.seg{display:inline-flex;background:var(--surface-3);border:1px solid var(--line);border-radius:var(--r-md);padding:3px;gap:2px}
.seg button{padding:7px 15px;border-radius:var(--r-sm);font-size:var(--fs-sm);font-weight:600;color:var(--txt-3);transition:var(--t)}
.seg button:hover{color:var(--txt)}
.seg button.on{background:var(--brand-1);color:var(--brand-ink);font-weight:700}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
/* هیچ کفِ پهنای ثابتی نمی‌گذاریم و پهنای طبیعی محتوا را می‌پذیریم.
   پیش‌تر `min-width:600px` ثابت بود و در کارت‌های نصف‌عرض (فضای ۴۷۵
   پیکسل) ۱۲۵ پیکسل از جدول همیشه پنهان می‌ماند — حتی جدول‌های ۳ ستونی
   که اصلاً پهن نبودند. کاربر ستون آخر را نمی‌دید و نشانه‌ای هم برای
   اسکرول نبود.
   کفِ «به‌ازای هر ستون» را هم آزمودم و بد بود: ۱۱ ستونِ ژورنال کف
   ۱۲۱۰ پیکسل می‌گرفت در حالی که پهنای طبیعی ستون‌ها کمتر بود، پس
   جدولی که جا داشت هم بریده می‌شد.
   راه درست: `table-layout:auto` خودش ستون‌ها را به اندازه‌ی محتوا
   می‌چیند؛ `white-space:nowrap` روی سرستون‌ها تضمین می‌کند عنوان‌ها
   نشکنند و اگر مجموعِ واقعی از فضا بیشتر شد، `.table-wrap` اسکرول
   می‌دهد. یعنی اسکرول تنها وقتی پیدا می‌شود که واقعاً لازم باشد. */
.tbl{width:100%;font-size:var(--fs-sm)}
.tbl thead th{background:var(--surface-3);color:var(--txt-2);font-weight:700;padding:12px 14px;
  text-align:right;border-bottom:1px solid var(--line-2);white-space:nowrap;position:sticky;top:0;z-index:2}
.tbl tbody td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--txt-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--t-fast)}
.tbl tbody tr:hover{background:var(--surface-hover)}
.tbl .sortable{cursor:pointer;user-select:none}
.tbl .sortable:hover{color:var(--txt)}

/* ---------- Alerts ---------- */
/* دو قاعده‌ی زیر با هم جمله‌های هشدار را تکه‌تکه می‌کردند و هرگز خطایی
   در کنسول نمی‌دادند. `display:flex` هر فرزند را «آیتمِ فلکس» می‌کند و
   `.alert b{display:block}` آن `<b>` را ستونِ جداگانه می‌کرد. نتیجه:
   جمله‌ی «پس از تأیید، به درگاه <b>درگاه تست</b> منتقل می‌شوید.» در سه
   ستونِ جدا و با ترتیبِ خواندنِ به‌هم‌ریخته دیده می‌شد.
   اندازه‌گیری‌شده: جعبه ۴۷۴ پیکسل، `<b>` ستونِ میانی، متنِ پس از آن در
   ستونِ چپ — یعنی کاربر «منتقل می‌شوید» را پیش از نامِ درگاه می‌خواند.
   پنج جا این الگو را دارند: billing ۱۹۰ و ۳۳۸، analytics ۴۷۶،
   referral ۱۵۸ و import.
   درمان: جریانِ متنِ معمولی. حالتِ «نشان + متن» که به فلکس نیاز دارد،
   با `alert-row` صریح گرفته می‌شود (billing:127 از آن استفاده می‌کند)،
   پس دستِ کسی که آگاهانه ستون می‌خواهد بسته نیست. */
.alert{border-radius:var(--r-md);padding:14px 16px;border-right:3px solid;font-size:var(--fs-sm);line-height:1.85}
.alert.alert-row{display:flex;gap:10px;align-items:flex-start}
.alert.alert-row>b{display:block;margin-bottom:3px}
.alert-info{background:var(--info-soft);border-color:var(--brand-1);color:var(--txt)}
.alert-ok{background:var(--up-soft);border-color:var(--up);color:var(--txt)}
.alert-warn{background:var(--warn-soft);border-color:var(--warn);color:var(--txt)}
.alert-err{background:var(--down-soft);border-color:var(--down);color:var(--txt)}

/* ---------- Toast ---------- */
#toasts{position:fixed;top:18px;left:18px;z-index:var(--z-toast);display:flex;flex-direction:column;gap:10px;max-width:min(380px,92vw)}
.toast{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px 16px;
  box-shadow:var(--shadow-lg);display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);
  animation:toastIn .28s cubic-bezier(.4,0,.2,1);border-right:3px solid var(--brand-1)}
.toast.ok{border-right-color:var(--up)}
.toast.err{border-right-color:var(--down)}
.toast.warn{border-right-color:var(--warn)}
.toast .ti{flex:none;width:20px;height:20px}
.toast .tx{flex:1;line-height:1.75}
.toast .tc{color:var(--txt-4);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.toast.out{animation:toastOut .22s forwards}
@keyframes toastIn{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateX(-24px);opacity:0}}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(6px);z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .18s}
.modal{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-xl);
  width:100%;max-width:520px;max-height:88vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);
  animation:modalIn .24s cubic-bezier(.4,0,.2,1)}
.modal.w-lg{max-width:760px}
.modal.w-xl{max-width:1000px}
.modal-h{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal-h h3{font-size:var(--fs-lg);margin:0}
.modal-b{padding:22px;overflow-y:auto;flex:1}
.modal-f{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-start}
.modal-x{width:32px;height:32px;border-radius:var(--r-sm);color:var(--txt-3);display:grid;place-items:center;font-size:20px;transition:var(--t)}
.modal-x:hover{background:var(--surface-hover);color:var(--txt)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}

/* ---------- Skeleton ---------- */
.sk{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-hover) 50%,var(--surface-3) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm)}
.sk-line{height:12px;margin-bottom:9px}
.sk-title{height:20px;width:45%;margin-bottom:14px}
.sk-card{height:110px;border-radius:var(--r-lg)}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- Empty / Error state ---------- */
.empty{text-align:center;padding:52px 20px;color:var(--txt-3)}
.empty .ei{width:66px;height:66px;margin:0 auto 16px;border-radius:var(--r-lg);display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--line);color:var(--txt-4)}
.empty h4{color:var(--txt-2);margin-bottom:6px}
.empty p{font-size:var(--fs-sm);margin-bottom:18px;max-width:380px;margin-inline:auto}

/* ---------- Tooltip ---------- */
[data-tip]{position:relative}
[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);right:50%;transform:translateX(50%);
  background:var(--surface-3);color:var(--txt);border:1px solid var(--line-2);padding:6px 11px;
  border-radius:var(--r-sm);font-size:var(--fs-xs);white-space:nowrap;z-index:var(--z-tip);
  box-shadow:var(--shadow);pointer-events:none;font-weight:500;animation:fadeIn .14s}

/* ---------- Progress ---------- */
.prog{height:7px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--brand-grad);border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.prog.up i{background:var(--up)}
.prog.down i{background:var(--down)}
.prog.warn i{background:var(--warn)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:3px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:11px 17px;font-size:var(--fs-sm);font-weight:600;color:var(--txt-3);
  border-bottom:2px solid transparent;transition:var(--t);white-space:nowrap;margin-bottom:-1px}
.tabs button:hover{color:var(--txt)}
.tabs button.on{color:var(--brand-1);border-bottom-color:var(--brand-1)}
.tab-panel{display:none}
.tab-panel.on{display:block;animation:fadeIn .22s}

/* ---------- Dropdown ---------- */
.dd{position:relative}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:190px;background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-md);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);
  padding:6px;display:none;animation:ddIn .16s}
.dd-menu.on{display:block}
.dd-menu.right{left:auto;right:0}
.dd-menu a,.dd-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 12px;
  border-radius:var(--r-sm);font-size:var(--fs-sm);color:var(--txt-2);transition:var(--t-fast);text-align:right}
.dd-menu a:hover,.dd-menu button:hover{background:var(--surface-hover);color:var(--txt)}
.dd-menu hr{border:0;height:1px;background:var(--line);margin:5px 0}
@keyframes ddIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- Misc ---------- */
.divider{height:1px;background:var(--line);margin:24px 0;border:0}
.divider-grad{height:1px;border:0;margin:32px 0;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--brand-grad);color:var(--brand-ink);
  display:grid;place-items:center;font-weight:800;font-size:var(--fs-sm);flex:none}
/* اصلاحِ ۶ — آدمکِ داخلِ آواتار. بی این مهار، SVG تمامِ ۳۸px دایره را
   پر می‌کند و به لبه می‌چسبد. */
.avatar-ic svg{width:21px;height:21px;stroke-width:1.9}
.icon-box{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;
  background:var(--info-soft);border:1px solid rgba(139,92,246,.25);color:var(--brand-1);flex:none}
.icon-box svg{width:22px;height:22px}
.kbd{display:inline-block;padding:2px 7px;background:var(--surface-3);border:1px solid var(--line-2);
  border-bottom-width:2px;border-radius:5px;font-size:var(--fs-xs);font-family:var(--ff-mono);color:var(--txt-2);min-width:24px;text-align:center}
.scroll-y{overflow-y:auto}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}

/* ═══════════════════════════════════════════════════════════════════════
   آیکونِ اختصاصیِ برند — بندهای ۲/۳/۶ و اصلاحِ ۲۴
   شرحِ کاملِ «چرا SVGِ درون‌خطی» در سرِ `assets/js/icons.js` است.

   قرار: هر <svg class="ic"> رنگش را از `currentColor` می‌گیرد و
   اندازه‌اش را از `font-size`ِ والد (با یکای `em`). پس یک آیکون در
   عنوانِ ۲۵ پیکسلی بزرگ و در برچسبِ ۱۱ پیکسلی کوچک درمی‌آید، بی هیچ
   قاعده‌ی جداگانه — و در تمِ روشن/تیره هم خودبه‌خود درست است.
   ═══════════════════════════════════════════════════════════════════ */
svg.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.16em;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* در دکمه‌ها و جاهایی که آیکون تنهاست، اندازه‌ی ثابت خوانا‌تر است. */
.btn > svg.ic{width:1.05em;height:1.05em}
.btn-icon > svg.ic{width:17px;height:17px;vertical-align:0}
svg.ic.lg{width:1.6em;height:1.6em}
svg.ic.xl{width:2.1em;height:2.1em}
svg.ic.thin{stroke-width:1.45}
svg.ic.bold{stroke-width:2.1}

/* جعبه‌ی آیکون — الگوی «آیکون در مربعِ رنگی» که در کارت‌های امکانات،
   فهرستِ کنارِ لاگین و جعبه‌های پراپ‌فرم تکرار می‌شود. */
.ic-box{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  flex:none;font-size:17px;color:var(--brand-1);
  background:color-mix(in srgb,var(--brand-1) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--brand-1) 28%,transparent)}
.ic-box.sm{width:30px;height:30px;border-radius:9px;font-size:14px}
.ic-box.lg{width:48px;height:48px;border-radius:14px;font-size:22px}
.ic-box.t-up{color:var(--up);background:color-mix(in srgb,var(--up) 14%,transparent);
  border-color:color-mix(in srgb,var(--up) 30%,transparent)}
.ic-box.t-down{color:var(--down);background:color-mix(in srgb,var(--down) 14%,transparent);
  border-color:color-mix(in srgb,var(--down) 30%,transparent)}
.ic-box.t-warn{color:#f59e0b;background:color-mix(in srgb,#f59e0b 14%,transparent);
  border-color:color-mix(in srgb,#f59e0b 32%,transparent)}
.ic-box.t-info{color:#38bdf8;background:color-mix(in srgb,#38bdf8 14%,transparent);
  border-color:color-mix(in srgb,#38bdf8 30%,transparent)}
.ic-box.t-mute{color:var(--tx-3);background:var(--bg-3);border-color:var(--ln-1)}

/* ⚠️ اصلاحِ بندِ ۲ — «آیکون چشمک بهتر بشه و در یک خط قرار بگیره».
   ریشه‌ی سنجیده‌ی ایراد: `.input-group` تنها `position:relative` داشت
   و برای دکمه‌ی درونش هیچ قاعده‌ای نبود؛ پس دکمه یک عنصرِ block‌مانند
   در جریانِ معمولی می‌ماند و **زیرِ** جعبه‌ی متن می‌افتاد (تصویرِ
   کارفرما همین را نشان می‌داد). قاعده‌ی `.suffix` مطلق بود ولی به
   دکمه نمی‌خورد.
   حالا دکمه‌ی درونِ گروه مطلق و چسبیده به لبه‌ی چپ می‌نشیند و متن هم
   جا برایش باز می‌کند. `inset-inline-*` نه `left/right` — تا در
   RTL و LTR هر دو درست باشد. */
.input-group{position:relative;display:block}
.input-group > .btn-icon{position:absolute;inset-inline-end:auto;inset-inline-start:6px;
  top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;
  border-radius:8px;background:transparent;border:0;color:var(--tx-3);z-index:2;
  /* ۱۴۰۵/۰۶/۱۶ — کارفرما: «آیکونِ چشم وسطِ مربع نیست». اندازه‌گیری:
     دکمه display:block بود و SVGِ ۱۷px به لبه‌ی آغازین می‌چسبید ⇒
     ۷٫۵px انحرافِ افقی (dx=-7.5، dy=0). این دکمه کلاسِ `.btn` را
     ندارد که فلکس بدهد، پس همین‌جا وسط‌چین می‌شود. */
  display:inline-flex;align-items:center;justify-content:center;line-height:0}
.input-group > .btn-icon:hover{color:var(--tx-1);background:var(--bg-3)}
.input-group:has(> .btn-icon) > .input{padding-inline-start:46px}