/* ═══════════════════════════════════════════════════════════
   theme.css — هویت بصری FIT PLAN
   ═══════════════════════════════════════════════════════════
   پایه: سیستم طراحی Nocturne (زمینهٔ آبی‌خاکستریِ کم‌اشباع،
   اکسنت بنفش، تراکم بالا، گوشهٔ ۸px، دکمهٔ خط‌دار).

   چیزهایی که نسبت به طرح اولیه تقویت شد — و چرا:

   ۱. تایپوگرافی فارسی‌محور. طرح اصلی Inter را پایه گرفته بود؛
      Inter فارسی ندارد. وزیرمتن پایه شد و نظمِ وزنیِ سیستم
      («تیتر از ۵۰۰ پررنگ‌تر نشود») روی وزن‌های وزیرمتن نگاشت
      شد — فارسی در وزن ۵۰۰ کم‌جان دیده می‌شود، پس تیتر ۶۰۰.

   ۲. عدد به‌عنوان محتوا. محتوای واقعی این اپ عدد است، نه متن:
      وزنه، تکرار، حجم، کالری. همهٔ مقادیر اندازه‌گیری‌شده
      مونواسپیسِ tabular می‌شوند تا ستون‌ها روی هم بیفتند و
      عوض‌شدن رقم، متن را نلرزاند.

   ۳. قاعدهٔ ارقام. طرح اولیه «۲۷۳ حرکت» و «92.5 kg» را کنار هم
      داشت — دو زبانِ عددی در یک قاب. قاعده: ارقام فارسی برای
      متن و شمارش، ارقام لاتینِ مونو برای هر چیزی که واحد دارد.

   ۴. رنگ معنایی. Nocturne تک‌اکسنت است، ولی این اپ حالت‌های
      واقعی دارد: رکورد، پلاتو، دیلود، خستگی، آمادگی. یک طیف
      معنایی کم‌اشباع اضافه شد که در همان دنیای تُنیِ بنفش
      می‌نشیند و آرامش صفحه را نمی‌شکند.

   ۵. یک کنشِ پُر. قاعدهٔ Nocturne می‌گوید دکمه‌ها خط‌دار باشند.
      در باشگاه، «شروع تمرین» و «ثبت ست» باید از فاصلهٔ یک متر و
      با دست عرق‌کرده پیدا شوند. فقط همین یک نقش پُر می‌ماند؛
      بقیه خط‌دار و شبح.

   ۶. هدف لمسی ۴۴px روی هر چیزی که وسط تمرین زده می‌شود.

   ۷. خطوطی که در دو سر محو می‌شوند — امضای Nocturne — به‌جای
      کادرکشیِ همه‌چیز.
   ═══════════════════════════════════════════════════════════ */

/* ═══ ۱. زمین و طیف‌ها ═════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* بنفشِ Nocturne (#9184d9) — زاویهٔ ۲۸۹ در OKLCH */
  --hue: 289;
  --hue-ground: 276;   /* زمینه هم‌خانوادهٔ اکسنت، با اشباع بسیار کم */
  /* اشباع زمینه، جدا از زاویه. «تیره» عمداً تقریباً خنثی است
     تا با «آبی تیره» اشتباه گرفته نشود. */
  --ground-c: 0.006;
}
[data-theme="dark-blue"]  { --hue: 242; --hue-ground: 252; --ground-c: 0.034; }
[data-theme="dark-green"] { --hue: 155; --hue-ground: 172; --ground-c: 0.030; }
[data-theme="dark-purple"]{ --hue: 318; --hue-ground: 312; --ground-c: 0.036; }
[data-theme="light"]      { --hue: 289; --hue-ground: 276; --ground-c: 0.004; }
[data-theme="light-blue"] { --hue: 242; --hue-ground: 252; --ground-c: 0.018; }
[data-theme="light-green"]{ --hue: 155; --hue-ground: 172; --ground-c: 0.016; }
[data-theme="light-warm"] { --hue: 42; --hue-ground: 66; --ground-c: 0.022; }

/* ── تم‌های تیره ──────────────────────────────────────────
   هر تم فقط زاویهٔ رنگ را عوض می‌کند؛ ساختار تُنی یکی است، پس
   هر هشت تم یک شخصیت دارند نه هشت شخصیت. */
:root,
[data-theme="dark"],
[data-theme="dark-blue"],
[data-theme="dark-green"],
[data-theme="dark-purple"] {
  color-scheme: dark;

  --bg-0: oklch(16.5% var(--ground-c) var(--hue-ground));
  --bg-1: oklch(20.5% calc(var(--ground-c) * 1.15) var(--hue-ground));
  --bg-2: oklch(24.5% calc(var(--ground-c) * 1.3) var(--hue-ground));
  --bg-3: oklch(29.5% calc(var(--ground-c) * 1.4) var(--hue-ground));
  --bg-4: oklch(35.0% calc(var(--ground-c) * 1.5) var(--hue-ground));

  --border:   oklch(31% calc(var(--ground-c) * 1.25) var(--hue-ground));
  --border-b: oklch(42% 0.028 var(--hue-ground));

  --accent:     oklch(69% 0.125 var(--hue));
  --accent-fg:  oklch(17% 0.02  var(--hue-ground));
  --accent-bg:  oklch(69% 0.125 var(--hue) / .11);
  --accent-bgh: oklch(69% 0.125 var(--hue) / .19);
  --accent-dim: oklch(56% 0.095 var(--hue));

  --text-1: oklch(94% 0.006 var(--hue-ground));
  --text-2: oklch(72% 0.014 var(--hue-ground));
  /* ۶۲٪ نه ۵۵٪: ریزبرچسب‌ها روی کارت با ۵۵٪ نسبت ۳٫۳ می‌دادند
     که برای متنِ ۰٫۶۶rem کم است. حالا حدود ۴٫۶ است. */
  --text-3: oklch(62% 0.016 var(--hue-ground));

  /* طیف معنایی — همگی روی یک پلهٔ روشنایی، اشباع پایین، تا
     کنار هم بنشینند بدون اینکه کدام یکی جیغ بزند */
  --green:  oklch(72% 0.105 158);
  --red:    oklch(66% 0.135 22);
  --amber:  oklch(76% 0.115 72);
  --blue:   oklch(70% 0.105 235);
  --teal:   oklch(74% 0.095 192);
  --purple: oklch(70% 0.115 300);
  --orange: oklch(72% 0.125 48);
  --pink:   oklch(72% 0.115 350);
  --cyan:   oklch(76% 0.090 205);
  --indigo: oklch(68% 0.110 272);
  --lime:   oklch(80% 0.110 128);

  /* شیشه‌ها هم باید از --ground-c بخوانند، وگرنه در تم خنثی
     نوار بالا رنگی‌تر از خود صفحه می‌شود. */
  --glass:      oklch(20.5% calc(var(--ground-c) * 1.15) var(--hue-ground) / .9);
  --glass-2:    oklch(29.5% calc(var(--ground-c) * 1.4) var(--hue-ground) / .5);
  --glass-brd:  oklch(31% calc(var(--ground-c) * 1.25) var(--hue-ground));
  --glass-hi:   transparent;
  --glass-blur: 18px;

  /* ارتفاع روی زمینِ تیره = یک لبه + تاریکیِ محیطی، نه سایهٔ سنگین */
  --shadow:   0 1px 2px oklch(0% 0 0 / .5), 0 8px 24px -12px oklch(0% 0 0 / .6);
  --shadow-a: none;
}

/* ── تم‌های روشن ─────────────────────────────────────────── */
[data-theme="light"],
[data-theme="light-warm"],
[data-theme="light-blue"],
[data-theme="light-green"] {
  color-scheme: light;

  --bg-0: oklch(96.5% var(--ground-c) var(--hue-ground));
  --bg-1: oklch(99% calc(var(--ground-c) * .6) var(--hue-ground));
  --bg-2: oklch(100% 0 0);
  --bg-3: oklch(96% calc(var(--ground-c) * 1.4) var(--hue-ground));
  --bg-4: oklch(92% calc(var(--ground-c) * 2) var(--hue-ground));

  --border:   oklch(90% 0.010 var(--hue-ground));
  --border-b: oklch(80% 0.016 var(--hue-ground));

  --accent:     oklch(52% 0.150 var(--hue));
  --accent-fg:  oklch(99% 0 0);
  --accent-bg:  oklch(52% 0.150 var(--hue) / .09);
  --accent-bgh: oklch(52% 0.150 var(--hue) / .16);
  --accent-dim: oklch(62% 0.110 var(--hue));

  --text-1: oklch(23% 0.012 var(--hue-ground));
  --text-2: oklch(48% 0.014 var(--hue-ground));
  --text-3: oklch(54% 0.016 var(--hue-ground));

  --green:  oklch(54% 0.125 158);
  --red:    oklch(55% 0.165 22);
  --amber:  oklch(62% 0.135 72);
  --blue:   oklch(54% 0.135 235);
  --teal:   oklch(56% 0.105 192);
  --purple: oklch(52% 0.145 300);
  --orange: oklch(58% 0.150 48);
  --pink:   oklch(56% 0.145 350);
  --cyan:   oklch(58% 0.105 205);
  --indigo: oklch(50% 0.140 272);
  --lime:   oklch(62% 0.130 128);

  --glass:     oklch(99% calc(var(--ground-c) * .6) var(--hue-ground) / .92);
  --glass-2:   oklch(96% calc(var(--ground-c) * 1.4) var(--hue-ground) / .6);
  --glass-brd: oklch(90% calc(var(--ground-c) * 2) var(--hue-ground));
  --glass-hi:  transparent;

  --shadow:   0 1px 2px oklch(30% 0.02 var(--hue-ground) / .08),
              0 10px 28px -14px oklch(30% 0.02 var(--hue-ground) / .18);
  --shadow-a: none;
}

/* ═══ ۲. شکل ═══════════════════════════════════════════════ */
:root {
  --radius:    8px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  /* هدف لمسی — وسط تمرین با دست عرق‌کرده زده می‌شود */
  --touch: 44px;
}

/* ═══ ۳. تایپوگرافی ════════════════════════════════════════ */
:root {
  /* وزیرمتن داخل پشتهٔ عددی می‌ماند: اگر واحد فارسی در همان
     عنصرِ عدد بنشیند، مونو گلیفش را ندارد و فارسی کشیده و
     بی‌ریخت رندر می‌شود. */
  --font-num: 'JetBrainsMono', 'IBMPlexMono', 'Vazirmatn', ui-monospace, monospace;
  --w-normal: 400;
  --w-medium: 500;
  --w-bold:   600;   /* سقف وزن تیتر — فارسی زیر ۶۰۰ کم‌جان دیده می‌شود */
  --w-black:  700;   /* فقط برای عدد قهرمان */
}

@font-face {
  font-family: 'JetBrainsMono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMono';
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

body {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
}

h1, h2, h3, h4,
.page-title, .section-title, .card-title, .modal-title {
  font-weight: var(--w-bold);
  letter-spacing: -.006em;
  line-height: 1.35;
}
/* سلسله‌مراتب از اندازه و فضا می‌آید، نه از ضخامت */
h1, .page-title    { font-size: 1.5rem; }
h2, .section-title { font-size: 1.12rem; }
h3, .card-title    { font-size: .95rem; }

/* ── عدد ──────────────────────────────────────────────────
   هر مقدار اندازه‌گیری‌شده: مونو، tabular، کمی فشرده. ستون‌ها
   روی هم می‌افتند و با عوض‌شدن رقم، چیدمان نمی‌لرزد. */
.num, .num-lg, .num-hero,
.stat-value, .stat .stat-val,
.metric-value, .kpi-value,
[data-num] {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: -.015em;
  font-weight: var(--w-medium);
  direction: ltr;
  unicode-bidi: isolate;
}
.stat-value  { font-size: 1.85rem; line-height: 1.1; }
.num-hero    { font-size: 2.4rem;  line-height: 1.05; font-weight: var(--w-black); }
.num-lg      { font-size: 1.35rem; }
/* واحد همیشه تابعِ عدد است، نه هم‌وزنش */
.num-unit, .stat-unit {
  font-family: var(--font-fa);
  font-size: .62em;
  font-weight: var(--w-normal);
  color: var(--text-3);
  letter-spacing: 0;
  margin-inline-start: .25em;
}

/* ریزبرچسب‌ها */
.stat-label, .label, .field-label, .card-kicker {
  font-size: .66rem;
  font-weight: var(--w-medium);
  letter-spacing: .04em;
  text-transform: none;   /* uppercase روی فارسی بی‌اثر است */
  color: var(--text-3);
}

/* ═══ ۴. سطح‌ها ════════════════════════════════════════════ */
.card, .stat-card, .info-box, .ex-card, .modal, .modal-content {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.card:hover, .ex-card:hover { border-color: var(--border-b); }
.stat-card { padding: 14px 16px; }
.stat-card::after { display: none; }   /* نوار اکسنت بالای کارت — حذف */
.card-header { background: transparent; border-bottom: 1px solid var(--border); }

/* خطِ Nocturne: در دو سر محو می‌شود، نه اینکه ناگهان قطع شود */
.divider, .sep, hr.divider {
  height: 1px; border: 0; background: linear-gradient(
    to left, transparent, var(--border) 48px,
    var(--border) calc(100% - 48px), transparent);
}

/* ═══ ۵. دکمه‌ها ═══════════════════════════════════════════
   یک نقشِ پُر (کنش اصلی) و بقیه خط‌دار یا شبح. */
.btn {
  border-radius: var(--radius);
  font-weight: var(--w-medium);
  letter-spacing: 0;
  box-shadow: none !important;
  min-height: 38px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg) !important;
  border: 1px solid var(--accent);
}
.btn-primary:hover  { background: var(--accent-dim); border-color: var(--accent-dim); filter: none; }
.btn-primary:active { background: var(--accent-dim); }

.btn-secondary {
  background: transparent;
  color: var(--accent) !important;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn-secondary:hover { background: var(--accent-bg); border-color: var(--accent); }

.btn-ghost {
  background: transparent;
  color: var(--text-2) !important;
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--bg-3); color: var(--text-1) !important; }

.btn-danger {
  background: transparent;
  color: var(--red) !important;
  border: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
}
.btn-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); }

.btn-sm { min-height: 30px; padding: 4px 11px; font-size: .78rem; }

/* هرچه وسط تمرین زده می‌شود، هدف لمسی کامل دارد */
#page-session .btn,
#page-session .set-done-btn,
.set-done-btn,
.modal-actions .btn {
  min-height: var(--touch);
}
.set-done-btn { min-width: var(--touch); }

/* ═══ ۶. چیپ، بج، ورودی ═══════════════════════════════════ */
.chip, .badge, .rp-chip, .ptab {
  border-radius: var(--radius-sm);
  font-weight: var(--w-medium);
  letter-spacing: 0;
}
.chip, .rp-chip { min-height: 30px; }

.form-input, .form-select, .form-textarea,
input:not([type=checkbox]):not([type=radio]), select, textarea {
  border-radius: var(--radius);
  background: var(--bg-1);
  border: 1px solid var(--border);
  color: var(--text-1);
  min-height: 38px;
  transition: border-color .15s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: none;
  outline: none;
}
/* ورودی‌های عددی وسط تمرین: بزرگ، مونو، لمسی */
#page-session input[type=number],
#page-session input[inputmode=decimal],
.set-input {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  min-height: var(--touch);
  text-align: center;
}

/* فوکوس صفحه‌کلید — هرگز حلقهٔ آبی پیش‌فرض مرورگر */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection { background: var(--accent-bg); color: var(--text-1); }

/* ═══ ۷. ناوبری ═══════════════════════════════════════════ */
#sidebar {
  background: var(--bg-1);
  border-inline-start: 1px solid var(--border);
  box-shadow: none;
}
.nav-group-head {
  border-radius: var(--radius);
  font-size: .78rem;
  font-weight: var(--w-medium);
  color: var(--text-3);
  letter-spacing: .03em;
}
.nav-group-head:hover { background: var(--bg-3); color: var(--text-2); }
.nav-group.has-active > .nav-group-head {
  background: transparent;
  border-color: transparent;
  color: var(--text-3);
}
.nav-item {
  border-radius: var(--radius);
  min-height: 38px;
  font-size: .87rem;
  font-weight: var(--w-normal);
}
.nav-item.active {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: var(--w-medium);
}
/* نشانگر: یک خطِ کوتاهِ توپر، بدون درخشش */
.nav-item.active::before {
  inset-inline-start: -8px;
  width: 2px; height: 16px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: none;
}

#topbar {
  /* مات، نه شیشه‌ای: با backdrop-filter رنگ نوار با صفحه یکی
     درنمی‌آمد. و خط دور با سایهٔ داخلی کشیده می‌شود نه border:
     حاشیهٔ بیرونیِ یک عنصر sticky داخل ظرفِ اسکرول‌دار، در لبهٔ
     بالا رندر نمی‌شد. inset shadow داخل خود عنصر است و بریده
     نمی‌شود. */
  background: var(--bg-1);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: var(--radius-xl);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ═══ ۸. نمودارها ═════════════════════════════════════════ */
:root {
  --chart-line: var(--accent);
  --chart-fill: color-mix(in srgb, var(--accent) 16%, transparent);
  --chart-grid: var(--border);
  --chart-axis: var(--text-3);
}

/* ═══ ۹. بندانگشتی حرکت ═══════════════════════════════════ */
.ex-icon { border-radius: var(--radius-sm); }

/* ═══ ۱۰. حرکت ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   مؤلفه‌های طرح — آناتومی از فایل طراحی درآمده، نه بازسازیِ
   حدسی. این‌ها ساختارند نه رنگ؛ چیزی که در پاس قبلی جا ماند.
   ═══════════════════════════════════════════════════════════ */

/* ── کاشی KPI ─────────────────────────────────────────────
   سه طبقه: ردیف عنوان+آیکون · عدد · خط دلتا.
   کارت آمار قبلی فقط دو طبقه داشت و آیکون و دلتا نداشت، برای
   همین همهٔ کاشی‌ها یک‌شکل و بی‌صدا بودند. */
.kpi {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  padding: 18px;
  display: flex; flex-direction: column;
}
.kpi-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.kpi-label { font-size: 12px; color: var(--text-3); }
.kpi-head .icon { color: var(--text-3); }
.kpi-val {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 30px; font-weight: 500; line-height: 1.1;
  letter-spacing: -.015em;
  direction: ltr; unicode-bidi: isolate;
  align-self: flex-start;
}
.kpi-val .u {
  font-family: var(--font-fa);
  font-size: 14px; font-weight: 400;
  color: var(--text-3);
  margin-inline-start: .3em;
}
.kpi-delta { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.kpi-delta.up   { color: var(--green); }
.kpi-delta.down { color: var(--red); }
.kpi.accent .kpi-val { color: var(--accent); }
.kpi.warn   .kpi-val, .kpi.warn .kpi-head .icon { color: var(--amber); }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

/* ── پنل ──────────────────────────────────────────────────
   ظرف بخش‌های بزرگ: نمودار، فهرست، جدول. عنوان و زیرعنوان
   دارد، برخلاف کارت خالی قبلی. */
.panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  padding: 20px;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin-bottom: 18px;
}
.panel-title { font-size: 15px; font-weight: var(--w-bold); }
.panel-sub   { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.panel-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 860px) { .panel-split { grid-template-columns: 1fr; } }

/* ── ردیف حرکت ────────────────────────────────────────────
   کارت عمودیِ ۱۲۰px‌تصویر جای خود را به ردیف افقی می‌دهد:
   در یک ارتفاع، سه برابر حرکت دیده می‌شود و نام — که چیزی است
   کاربر دنبالش می‌گردد — بزرگ‌تر و زودتر خوانده می‌شود. */
.ex-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
}
.ex-row:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.ex-row-icon {
  width: 46px; height: 46px; flex: 0 0 auto;
  border-radius: var(--radius-xl);
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ex-row-icon img { width: 100%; height: 100%; object-fit: cover; }
.ex-row-body { flex: 1; min-width: 0; }
.ex-row-name {
  font-size: 14px; font-weight: var(--w-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-row-en {
  font-size: 11px; color: var(--text-3); margin-top: 2px;
  font-family: var(--font-num); direction: ltr;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-row-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ex-row-chips span {
  font-size: 10px; padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-3); color: var(--text-2);
}
.ex-row-lvl { font-size: 11px; white-space: nowrap; flex-shrink: 0; }
.ex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* ── چیپ فیلتر ────────────────────────────────────────────
   کپسولِ ۲۲px با حاشیهٔ نازک — نه مستطیلِ کوچکِ قبلی. */
.fchip {
  padding: 7px 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: all .16s ease;
  min-height: 34px;
  display: inline-flex; align-items: center; gap: 6px;
}
.fchip:hover { border-color: var(--border-b); color: var(--text-1); }
.fchip.on {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-bg);
  color: var(--accent);
}
.fchip-row { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── چیپ فیلتر موجود، با شکل طرح ─────────────────────────
   .filter-tag در همهٔ صفحه‌ها استفاده می‌شود، پس به‌جای ساختن
   کلاس تازه، همین را به کپسول ۲۲px طرح می‌بریم. */
.filter-tag {
  padding: 7px 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: var(--w-normal);
  cursor: pointer;
  transition: all .16s ease;
  min-height: 34px;
  display: inline-flex; align-items: center; gap: 6px;
}
.filter-tag:hover { border-color: var(--border-b); color: var(--text-1); }
.filter-tag.active {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: var(--accent-bg);
  color: var(--accent);
}

/* ── نوار بالا با نسبت‌های طرح ───────────────────────────── */
#topbar { height: 58px; padding: 0 18px; }
.topbar-title { font-size: 15px; font-weight: var(--w-bold); }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
#theme-toggle-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-3);
}
#theme-toggle-btn:hover { color: var(--text-1); border-color: var(--border-b); }

/* ── کارت برنامه ──────────────────────────────────────────
   یک خط متای واحد بالا، ردیف روزها با خط جداکننده، و یک
   ردیف کنش پایین با تنها یک دکمهٔ پُر. */
.prog-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--s4);
  display: flex; flex-direction: column;
}
.prog-card:hover { border-color: var(--border-b); }
.prog-card-head { display: flex; align-items: flex-start; gap: var(--s3); }
.prog-card-title { font-size: 15px; font-weight: var(--w-bold); }
.prog-card-meta  { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.prog-card-tools { display: flex; gap: 2px; flex-shrink: 0; }
.prog-card-tools .btn { min-height: 30px; padding: 5px 7px; }

.prog-card-days { margin-top: var(--s3); }
.prog-day {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  font-size: 12px; color: var(--text-2);
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.prog-day:last-child { border-bottom: 0; }
.prog-day.muted { color: var(--text-3); font-size: 11px; }
.prog-day-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prog-day-count { color: var(--text-3); flex-shrink: 0; font-size: 11px; }

.prog-card-acts {
  display: flex; gap: var(--s2); align-items: center;
  margin-top: var(--s3); flex-wrap: wrap;
}

/* ── کارت آمار موجود، با آناتومی KPI ──────────────────────
   .stat-card در اورلود، نمودار، بدن، تغذیه و تاریخچه استفاده
   می‌شود. به‌جای وصله‌زدن به هر محل رندر، خودِ کلاس به ساختار
   سه‌طبقهٔ طرح می‌رسد — همان برچسب/عدد/زیرنویس که از قبل دارد،
   فقط با نسبت‌های درست. */
.stat-card {
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--bg-2);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.stat-card .stat-label {
  font-size: 11px;
  font-weight: var(--w-normal);
  letter-spacing: 0;
  color: var(--text-3);
  margin-bottom: 9px;
  display: flex; align-items: center; gap: 6px;
}
.stat-card .stat-value {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.05;
  align-self: flex-start;
}
/* زیرنویس کاشی: هر عنصری بعد از عدد */
.stat-card .stat-value + * {
  font-size: 10.5px !important;
  color: var(--text-3) !important;
  margin-top: 5px !important;
}

/* شبکهٔ کاشی‌ها — مثل kpi-grid، تا در عرض کم نشکند */
.stats-grid, .grid-4, .grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px;
}

/* ── صفحهٔ نمودار: هم‌زبان با بقیه ────────────────────────
   این صفحه مؤلفه‌های یکتای خودش را داشت (.an-mini-*) با
   نسبت‌ها و وزن‌هایی که هیچ‌جای دیگر اپ نبود. حالا همان
   آناتومی سه‌طبقهٔ کاشی را می‌گیرد. */
.an-mini-stat {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 13px 15px;
  text-align: start;
}
.an-mini-label {
  font-size: 11px;
  font-weight: var(--w-normal);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  margin-bottom: 7px;
}
.an-mini-val {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 21px;
  font-weight: 500;
  color: var(--text-1);
  line-height: 1.05;
  letter-spacing: -.02em;
  direction: ltr; unicode-bidi: isolate;
}
.an-mini-change {
  font-size: 11px;
  font-family: var(--font-num);
  color: var(--text-3);
  margin-top: 5px;
  direction: ltr; unicode-bidi: isolate;
}

/* نمودارها: شبکه و محور از توکن‌ها، نه رنگ دلخواه */
#page-analytics svg text { font-family: var(--font-fa); fill: var(--text-3); }
#page-analytics svg line[stroke-dasharray] { stroke: var(--chart-grid); }

/* کاشی رکورد شخصی — تنها کاشی اکسنت‌دار صفحهٔ نمودار */
.an-pr {
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  flex-shrink: 0;
}
.an-pr .an-mini-val { color: var(--accent); }

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

   قاعدهٔ درست: **سطح‌ها بی‌رنگ، داده رنگی.**
   زمینه و کارت و حاشیه کم‌اشباع می‌مانند؛ رنگ فقط جایی می‌آید
   که معنا دارد — وضعیت، گروه عضلانی، سری نمودار، سطح دشواری.
   ═══════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"], [data-theme="dark-blue"],
[data-theme="dark-green"], [data-theme="dark-purple"] {
  /* معنایی — اشباع واقعی، روی یک پلهٔ روشنایی تا کنار هم آرام بنشینند */
  --green:  oklch(74% 0.165 152);
  --red:    oklch(66% 0.205 25);
  --amber:  oklch(79% 0.165 78);
  --blue:   oklch(70% 0.155 245);
  --teal:   oklch(76% 0.130 190);
  --purple: oklch(70% 0.170 305);
  --orange: oklch(74% 0.175 55);
  --pink:   oklch(72% 0.175 355);
  --cyan:   oklch(79% 0.125 215);
  --indigo: oklch(66% 0.165 275);
  --lime:   oklch(83% 0.165 130);

  /* سری‌های نمودار — یک پلهٔ روشنایی، زاویه‌های فاصله‌دار.
     تفاوت از «زاویه» می‌آید نه از پررنگی، پس هیچ سری بر بقیه
     غالب نمی‌شود و همه در یک قاب خوانا می‌مانند. */
  --cat-1: oklch(70% 0.150 289);   /* اکسنت */
  --cat-2: oklch(72% 0.140 205);
  --cat-3: oklch(74% 0.150 145);
  --cat-4: oklch(78% 0.150 85);
  --cat-5: oklch(70% 0.160 25);
  --cat-6: oklch(70% 0.150 330);

  /* گروه عضلانی — پررنگ‌تر از قبل تا در بندانگشتی واقعاً تفکیک کند */
  --mg-chest:    oklch(66% 0.175 25);
  --mg-back:     oklch(68% 0.155 245);
  --mg-shoulder: oklch(75% 0.160 65);
  --mg-biceps:   oklch(68% 0.165 295);
  --mg-triceps:  oklch(68% 0.160 335);
  --mg-legs:     oklch(72% 0.160 150);
  --mg-glutes:   oklch(72% 0.165 45);
  --mg-core:     oklch(80% 0.150 100);
  --mg-cardio:   oklch(76% 0.130 195);
}

[data-theme="light"], [data-theme="light-warm"],
[data-theme="light-blue"], [data-theme="light-green"] {
  --green:  oklch(52% 0.165 152);
  --red:    oklch(53% 0.205 25);
  --amber:  oklch(60% 0.160 78);
  --blue:   oklch(52% 0.180 245);
  --teal:   oklch(54% 0.130 190);
  --purple: oklch(50% 0.190 305);
  --orange: oklch(56% 0.180 55);
  --pink:   oklch(54% 0.185 355);
  --cyan:   oklch(56% 0.125 215);
  --indigo: oklch(48% 0.180 275);
  --lime:   oklch(58% 0.155 130);

  --cat-1: oklch(52% 0.170 289);
  --cat-2: oklch(54% 0.140 205);
  --cat-3: oklch(52% 0.160 145);
  --cat-4: oklch(58% 0.155 85);
  --cat-5: oklch(53% 0.190 25);
  --cat-6: oklch(52% 0.170 330);

  --mg-chest:    oklch(52% 0.185 25);
  --mg-back:     oklch(50% 0.170 245);
  --mg-shoulder: oklch(57% 0.165 65);
  --mg-biceps:   oklch(50% 0.180 295);
  --mg-triceps:  oklch(52% 0.170 335);
  --mg-legs:     oklch(52% 0.165 150);
  --mg-glutes:   oklch(55% 0.170 45);
  --mg-core:     oklch(60% 0.150 100);
  --mg-cardio:   oklch(55% 0.130 195);
}

/* ── رنگ به جایی که معنا دارد برگردد ──────────────────────
   چیپ‌های ردیف حرکت همه خاکستری بودند؛ حالا چیپ گروه عضلانی
   رنگ همان گروه را می‌گیرد و بندانگشتی هم پررنگ‌تر می‌شود. */
.ex-row-chips .mg-chip {
  background: color-mix(in srgb, var(--mg, var(--text-3)) 16%, transparent);
  color: var(--mg, var(--text-2));
}
.ex-icon {
  background: color-mix(in srgb, var(--mg, var(--text-3)) 20%, transparent);
  border-color: color-mix(in srgb, var(--mg, var(--text-3)) 38%, transparent);
}

/* سطح دشواری — سه وضعیت، سه رنگ */
.ex-row-lvl.lvl-beginner     { color: var(--green); }
.ex-row-lvl.lvl-intermediate { color: var(--amber); }
.ex-row-lvl.lvl-advanced     { color: var(--red); }

/* بج‌ها با اشباع واقعی */
.badge-green  { background: color-mix(in srgb, var(--green) 16%, transparent);  color: var(--green); }
.badge-red    { background: color-mix(in srgb, var(--red) 16%, transparent);    color: var(--red); }
.badge-amber  { background: color-mix(in srgb, var(--amber) 16%, transparent);  color: var(--amber); }
.badge-blue   { background: color-mix(in srgb, var(--blue) 16%, transparent);   color: var(--blue); }
.badge-purple { background: color-mix(in srgb, var(--purple) 16%, transparent); color: var(--purple); }
.badge-teal   { background: color-mix(in srgb, var(--teal) 16%, transparent);   color: var(--teal); }

/* ── کتابخانهٔ برنامه‌های آماده ───────────────────────────
   این صفحه CSS خودش را داخل فایل JS تزریق می‌کرد، با نسبت‌ها و
   وزن‌هایی که هیچ‌جای دیگر اپ نبود — برای همین «یک صفحهٔ دیگر»
   دیده می‌شد. حالا از همان توکن‌ها و همان آناتومی بقیه می‌آید. */
.rp-filter-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }

.rp-chip {
  padding: 7px 14px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px; font-weight: var(--w-normal);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: all .16s ease;
  min-height: 34px;
  display: inline-flex; align-items: center; gap: 6px;
}
.rp-chip:hover  { border-color: var(--border-b); color: var(--text-1); }
.rp-chip.active {
  background: var(--accent-bg);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  font-weight: var(--w-medium);
}

.rp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px; margin-top: 14px;
}

/* کارت برنامهٔ آماده — همان آناتومی .prog-card */
.rp-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.rp-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-2px);
  box-shadow: none;
}
.rp-card-header { padding: 16px 16px 12px; position: relative; }
.rp-card-emoji  { display: flex; margin-bottom: 10px; color: var(--accent); }
.rp-badge {
  display: inline-block;
  font-size: 10px; font-weight: var(--w-medium);
  padding: 2px 8px; border-radius: var(--radius-sm);
  margin-bottom: 7px;
  text-transform: none; letter-spacing: 0;
}
.rp-card-title    { font-size: 15px; font-weight: var(--w-bold); margin-bottom: 2px; }
.rp-card-subtitle { font-size: 11.5px; color: var(--text-3); }

.rp-card-body {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--border);
  background: transparent;
}
.rp-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.65; margin-bottom: 11px; }

.rp-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.rp-meta-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--text-3);
}
.rp-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-tag {
  font-size: 10px; padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-3); color: var(--text-2);
}

/* یادداشت مربی — تنها بلوک اکسنت‌دار کارت */
.rp-why {
  font-size: 12px; color: var(--accent);
  background: var(--accent-bg);
  border-radius: var(--radius);
  padding: 9px 11px; margin-bottom: 11px;
  border-inline-start: 2px solid var(--accent);
  line-height: 1.6;
}

.rp-btn {
  width: 100%;
  min-height: 38px;
  padding: 9px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: var(--w-medium); font-size: 13px;
  cursor: pointer; font-family: var(--font-fa);
  transition: background .15s ease;
}
.rp-btn:hover { background: var(--accent-dim); border-color: var(--accent-dim); filter: none; }

.rp-search {
  width: 100%;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-1);
  color: var(--text-1);
  font-family: var(--font-fa); font-size: 13px;
  margin-bottom: 12px; outline: none;
}
.rp-search:focus { border-color: var(--accent); }

/* نشانگر نسخه — کوچک و بی‌صدا، فقط برای تشخیص کش کهنه */
.build-tag {
  font-family: var(--font-num);
  font-size: 10px;
  color: var(--text-3);
  opacity: .55;
  padding: 6px var(--s3) 2px;
  text-align: start;
  direction: rtl;
}

/* ═══════════════════════════════════════════════════════════
   سایدبار جمع‌شونده + پوششی که سایدبار را نمی‌خورد
   ═══════════════════════════════════════════════════════════ */

/* ── ۱. کتابخانه سایدبار را پنهان نکند ────────────────────
   این صفحه یک پوشش تمام‌صفحه بود (inset:0) و روی سایدبار
   می‌افتاد؛ تنها جای اپ که منو ناپدید می‌شد. حالا فقط ناحیهٔ
   محتوا را می‌گیرد، مثل بقیهٔ صفحه‌ها. */

/* فضای خالی زیاد این صفحه: هدر فشرده‌تر و شبکهٔ متراکم‌تر */
#page-library .rp-grid {
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 12px; margin-top: 12px;
}
#page-library .rp-filter-bar { margin-bottom: 8px; gap: 6px; }
#page-library .rp-chip { padding: 6px 12px; min-height: 30px; font-size: 12.5px; }
#page-library .rp-search { margin-bottom: 10px; }
#page-library .rp-card-header { padding: 13px 14px 10px; }
#page-library .rp-card-body   { padding: 10px 14px 13px; }
#page-library .rp-card-emoji  { margin-bottom: 7px; }

/* ── ۲. سایدبار جمع‌شونده ─────────────────────────────────
   دکمه‌اش کنار لوگو می‌نشیند. در حالت جمع، فقط آیکون‌ها
   می‌مانند و عرض از ۲۵۲ به ۶۴ می‌رسد. */
.sidebar-collapse {
  margin-inline-start: auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s ease, border-color .15s ease;
}
.sidebar-collapse:hover { color: var(--text-1); border-color: var(--border-b); }
.sidebar-logo { display: flex; align-items: center; gap: var(--s2); }
.sidebar-logo > div { min-width: 0; }

#sidebar.collapsed { width: 64px; }
#sidebar.collapsed .sidebar-logo h1,
#sidebar.collapsed .sidebar-logo span,
#sidebar.collapsed .g-title,
#sidebar.collapsed .g-chev,
#sidebar.collapsed .nav-item > *:not(.nav-icon):not(svg),
#sidebar.collapsed .nav-account-name,
#sidebar.collapsed .nav-account-arrow,
#sidebar.collapsed .nav-sub-menu,
#sidebar.collapsed .build-tag,
#sidebar.collapsed .nav-badge { display: none; }

/* متن مستقیمِ داخل آیتم (بدون عنصر) هم باید برود */
#sidebar.collapsed .nav-item { font-size: 0; justify-content: center; padding: 9px 0; }
#sidebar.collapsed .nav-item .nav-icon { font-size: 1rem; width: auto; }
#sidebar.collapsed .nav-group-head { justify-content: center; padding: 9px 0; }
#sidebar.collapsed .nav-group-body { max-height: none; opacity: 1; }
#sidebar.collapsed .sidebar-nav { padding: 6px; }
#sidebar.collapsed .sidebar-logo { justify-content: center; padding: 10px 0; }
#sidebar.collapsed .sidebar-collapse { margin: 0; }
#sidebar.collapsed .nav-item.active::before { inset-inline-start: -6px; }
#sidebar.collapsed .sidebar-admin { padding: 6px; }

/* محتوا و پوشش کتابخانه با سایدبارِ جمع‌شده جا باز می‌کنند */
@media (max-width: 768px) {
  #sidebar.collapsed { width: 252px; }   /* روی موبایل کشویی است، جمع‌شدن معنا ندارد */
  #sidebar.collapsed .nav-item { font-size: .87rem; justify-content: flex-start; padding: 9px 12px; }
  #sidebar.collapsed .g-title, #sidebar.collapsed .sidebar-logo h1,
  #sidebar.collapsed .sidebar-logo span, #sidebar.collapsed .g-chev { display: revert; }
  .sidebar-collapse { display: none; }
}

/* ── حالت جمع: ستون مرتب ──────────────────────────────────
   نسخهٔ اول فقط برچسب‌ها را پنهان می‌کرد و بقیه را به حال خود
   رها؛ نتیجه ستونی نامنظم شد — دایرهٔ «؟» حساب کاربری بیرون
   می‌زد، فاصله‌ها ناهمسان بودند و اسکرول‌بار ظاهر می‌شد.

   قاعده: در حالت جمع هر آیتم یک مربع هم‌اندازه است، گروه‌ها با
   فاصله (نه با عنوان) از هم جدا می‌شوند، و هیچ چیزِ دیگری
   دیده نمی‌شود. */

/* عنوان گروه در حالت جمع اصلاً نمی‌ماند؛ جدایی از فاصله می‌آید */
#sidebar.collapsed .nav-group-head { display: none; }
#sidebar.collapsed .nav-group { margin-bottom: 14px; }
#sidebar.collapsed .nav-group:last-of-type { margin-bottom: 0; }

/* هر آیتم یک مربع هم‌اندازه، وسط‌چین */
#sidebar.collapsed .nav-item {
  width: 40px; height: 40px;
  min-height: 40px;
  margin: 3px auto;
  padding: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0;
}
#sidebar.collapsed .nav-item .nav-icon {
  width: auto; margin: 0;
  display: flex; align-items: center; justify-content: center;
}
/* نشانگر کناری در عرض ۶۴px جا نمی‌شود؛ خود کاشی روشن می‌شود */
#sidebar.collapsed .nav-item.active::before { display: none; }
#sidebar.collapsed .nav-item.active {
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* حساب کاربری: کل بلوکش می‌رود — دایرهٔ آواتار ستون را می‌شکست */
#sidebar.collapsed .nav-group[data-group="account"] { display: none; }

/* لوگو: فقط دکمهٔ جمع/باز می‌ماند */
#sidebar.collapsed .sidebar-logo {
  justify-content: center;
  padding: 12px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* اسکرول‌بار در ستون ۶۴px بیش از نصف عرض آیکون را می‌گیرد */
#sidebar.collapsed .sidebar-nav {
  padding: 8px 0;
  scrollbar-width: none;
  overflow-x: hidden;
}
#sidebar.collapsed .sidebar-nav::-webkit-scrollbar { width: 0; display: none; }

/* پنل مدیریت پایین، با خط جدا مثل طرح */
#sidebar.collapsed .sidebar-admin {
  padding: 8px 0;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
#sidebar.collapsed .sidebar-admin .nav-item { margin: 0 auto; }

/* جلسهٔ فعال هم مربع می‌شود */
#sidebar.collapsed .sidebar-session {
  width: 40px; height: 40px; min-height: 40px;
  margin: 3px auto; padding: 0;
  justify-content: center; font-size: 0;
  border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════
   عرض ناوبری، یک متغیر واحد
   ═══════════════════════════════════════════════════════════
   قبلاً هر مصرف‌کننده عدد خودش را داشت (۲۸۰ اینجا، ۹۲ آنجا،
   ۲۳۸ در media query). با جمع‌شدن منو، بعضی‌ها حرکت می‌کردند و
   بعضی نه. حالا همه از --nav-w می‌خوانند و با هم جابه‌جا
   می‌شوند — با انیمیشن، نه پرش. */
:root { --nav-w: 280px; }
@media (max-width: 1024px) { :root { --nav-w: 238px; } }
@media (max-width: 768px)  { :root { --nav-w: 0px; } }

body.nav-collapsed { --nav-w: 92px; }
@media (max-width: 768px) { body.nav-collapsed { --nav-w: 0px; } }

#main {
  margin-inline-start: var(--nav-w) !important;
  transition: margin-inline-start .22s cubic-bezier(.32,.72,0,1);
}
#sidebar { transition: width .22s cubic-bezier(.32,.72,0,1); }

/* پوشش تمام‌صفحه حذف شد: کتابخانه حالا صفحهٔ واقعی است. */

/* ── درون کتابخانه: تمام‌عرض، بدون حاشیهٔ الکی ───────────── */
.lib-inner {
  max-width: none;
  margin: 0;
  padding: var(--s4) var(--s5) var(--s6);
}
@media (max-width: 768px) { .lib-inner { padding: var(--s3) var(--s4) var(--s5); } }

.lib-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3);
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-0);
  padding: var(--s3) 0;
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
}

/* شبکه واقعاً رسپانسیو — با عرضِ موجود پر می‌شود، نه با عدد ثابت */
#page-library .rp-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  gap: var(--s3);
  margin-top: var(--s3);
}

/* ── آیکون دقیقاً وسط کاشی ────────────────────────────────
   .nav-item یک gap دارد و متنِ صفر-اندازه هنوز یک آیتم فلکس
   است، پس آیکون به اندازهٔ نصف gap به کنار هل می‌خورد و در
   هایلایت وسط دیده نمی‌شد. */
#sidebar.collapsed .nav-item,
#sidebar.collapsed .sidebar-session { gap: 0; }
#sidebar.collapsed .nav-item > :not(.nav-icon):not(svg) { display: none; }

/* ── راهنمای شناور در حالت جمع ────────────────────────────
   در ستون ۶۴px نام دیده نمی‌شود؛ با نگه‌داشتن موس، نام کنارش
   ظاهر می‌شود. data-label را همان تابعِ جمع‌کردن پر می‌کند. */
#sidebar.collapsed .nav-item[data-label],
#sidebar.collapsed .sidebar-session[data-label] { position: relative; }

#sidebar.collapsed .nav-item[data-label]::after,
#sidebar.collapsed .sidebar-session[data-label]::after {
  content: attr(data-label);
  position: absolute;
  inset-inline-end: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: var(--w-normal);
  font-family: var(--font-fa);
  color: var(--text-1);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 200;
}
#sidebar.collapsed .nav-item[data-label]:hover::after,
#sidebar.collapsed .sidebar-session[data-label]:hover::after { opacity: 1; }

/* سایدبار نباید راهنما را ببرد */
#sidebar.collapsed { overflow: visible; }
#sidebar.collapsed .sidebar-nav { overflow-y: auto; overflow-x: visible; }

/* ── پنل صفحه‌ای ──────────────────────────────────────────
   ساختار openPanel: بدنه + پاورقی کنش‌ها، داخل جریان صفحه.
   جای مودالِ شناور را می‌گیرد تا نوار بالا و سایدبار بمانند. */
.panel-page { display: flex; flex-direction: column; gap: var(--s4); }
.panel-page-body { display: flex; flex-direction: column; gap: var(--s4); }
.panel-page-foot {
  display: flex; gap: var(--s2); justify-content: flex-start;
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  position: sticky; bottom: 0;
  background: var(--bg-0);
  padding-bottom: var(--s3);
}
.panel-page-foot .btn { min-height: 40px; }

/* ── صفحهٔ کتابخانه ───────────────────────────────────────
   دیگر پوشش نیست؛ مثل بقیهٔ صفحه‌ها در جریان محتوا می‌نشیند. */
#page-library .lib-inner { padding: 0; max-width: none; margin: 0; }
#page-library .lib-head {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg-0);
  padding: var(--s3) 0;
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}

/* ── تقویم فشرده‌تر ───────────────────────────────────────
   سلول ۶۸px یعنی یک ماه در صفحه جا نمی‌شد و باید اسکرول
   می‌کردی. ۴۶px کافی است و کل ماه یک‌جا دیده می‌شود. */
.cal-cell { min-height: 46px; padding: 5px 3px 4px; gap: 3px; }
.cal-day-num { font-size: .72rem; }
@media (max-width: 768px) { .cal-cell { min-height: 40px; } }
@media (max-width: 480px) { .cal-cell { min-height: 36px; padding: 4px 2px; } }

/* ── سلول روز تقویم ───────────────────────────────────────
   قبلاً aspect-ratio:1 درون‌خطی داشت، یعنی در عرض زیاد هر سلول
   یک‌هفتمِ عرض صفحه قد می‌کشید و کل ماه در صفحه جا نمی‌شد.
   مربع می‌ماند تا وقتی به سقف برسد. */
.cal-day-cell {
  aspect-ratio: 1;
  max-height: 54px;
  min-height: 34px;
}
@media (max-width: 480px) { .cal-day-cell { max-height: 44px; min-height: 30px; } }

/* ── سایدبار تخت ──────────────────────────────────────────
   عنوان گروه فقط برچسب است، نه دکمهٔ بازوبسته. آکاردئون یک
   کلیک اضافه بین کاربر و هر صفحه می‌گذاشت. */
.nav-group-head {
  cursor: default;
  pointer-events: none;
  padding: 10px 11px 5px;
  font-size: .68rem;
  font-weight: var(--w-medium);
  letter-spacing: .06em;
  color: var(--text-3);
  background: transparent !important;
  border-color: transparent !important;
}
.nav-group-head .g-icon,
.nav-group-head .g-chev { display: none; }
.nav-group.has-active > .nav-group-head { color: var(--text-3); }
.nav-group-body { max-height: none !important; opacity: 1 !important; }
.nav-group { margin-bottom: 6px; }

/* ── راهنمای شناور (حالت جمع) ─────────────────────────────
   بیرون از سایدبار ساخته می‌شود؛ داخل ظرفِ اسکرول‌دار بریده
   می‌شد و اصلاً دیده نمی‌شد. */
.nav-tip {
  position: fixed;
  z-index: 300;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-fa);
  font-size: 12.5px;
  color: var(--text-1);
  background: var(--bg-3);
  border: 1px solid var(--border-b);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
.nav-tip.on { opacity: 1; }

/* راهنمای CSSیِ قبلی دیگر لازم نیست */
#sidebar.collapsed .nav-item[data-label]::after,
#sidebar.collapsed .sidebar-session[data-label]::after { content: none; }

/* ── فلش‌های اسکرول (حالت جمع) ────────────────────────────
   بدون این، تنها راهِ رسیدن به منوهای پایین غلتک موس بود. */
.nav-arrow { display: none; }
#sidebar.has-arrows .nav-arrow {
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  inset-inline-start: 50%;
  transform: translateX(50%);
  width: 32px; height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--text-3);
  cursor: pointer;
  z-index: 20;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
#sidebar.has-arrows .nav-arrow .icon { width: 13px; height: 13px; }
#sidebar.has-arrows .nav-arrow:hover { color: var(--text-1); border-color: var(--border-b); }
/* ۸px فاصله از خط زیرِ لوگو، وگرنه به آن می‌چسبد */
#sidebar.has-arrows .nav-arrow-up   { top: 60px; }
#sidebar.has-arrows .nav-arrow-down { bottom: 8px; }
#sidebar.has-arrows .nav-arrow.off  { opacity: .25; pointer-events: none; }

/* جا برای فلش‌ها تا روی آیتم‌ها نیفتند */
#sidebar.has-arrows .sidebar-nav { padding-block: 30px 28px; }

/* ═══════════════════════════════════════════════════════════
   جستجوی سراسری و اعلان‌ها
   ═══════════════════════════════════════════════════════════ */

#tb-search-wrap {
  position: relative;
  flex: 0 1 260px;
  min-width: 0;
  display: flex; align-items: center; gap: var(--s2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 var(--s3);
  height: 36px;
  transition: border-color .15s ease;
}
#tb-search-wrap:focus-within { border-color: var(--accent); }
.tb-search-icon { display: flex; color: var(--text-3); flex-shrink: 0; }
#tb-search {
  flex: 1; min-width: 0;
  background: transparent;
  border: 0; outline: 0;
  color: var(--text-1);
  font-family: var(--font-fa);
  font-size: 13px;
  min-height: auto; height: 100%;
  padding: 0;
}
#tb-search::placeholder { color: var(--text-3); }
#tb-search::-webkit-search-cancel-button { display: none; }
.tb-kbd {
  font-family: var(--font-num);
  font-size: 10px;
  color: var(--text-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  flex-shrink: 0;
  direction: ltr;
}

/* نتایج */
#tb-results {
  display: none;
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  width: min(340px, calc(100vw - 32px));
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 120;
  padding: var(--s1);
}
#tb-results.on { display: block; }
.tb-res {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%;
  padding: 8px 10px;
  border: 0; background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: start;
  font-family: var(--font-fa);
  color: var(--text-1);
}
.tb-res:hover, .tb-res.on { background: var(--bg-3); }
.tb-res-icon { display: flex; color: var(--text-3); flex-shrink: 0; }
.tb-res-body { flex: 1; min-width: 0; }
.tb-res-title {
  display: block; font-size: 13px; font-weight: var(--w-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-res-sub {
  display: block; font-size: 11px; color: var(--text-3);
  font-family: var(--font-num); direction: ltr;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-res-kind {
  font-size: 10px; color: var(--text-3);
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 2px 7px; flex-shrink: 0;
}
.tb-empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* زنگ */
#tb-notif-wrap { position: relative; flex-shrink: 0; }
#tb-notif {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: color .15s ease, border-color .15s ease;
}
#tb-notif:hover { color: var(--text-1); border-color: var(--border-b); }
#tb-notif-dot {
  display: none;
  position: absolute; top: -3px; inset-inline-start: -3px;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 9.5px; font-weight: var(--w-bold);
  align-items: center; justify-content: center;
  padding: 0 4px;
  border: 2px solid var(--bg-1);
}
#tb-notif-dot.on { display: flex; }

#tb-notif-panel {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  /* به لبهٔ مقابل چسبیده: با inset-inline-start در RTL از زنگ به
     چپ کشیده می‌شد و چون زنگ نزدیک لبهٔ چپ است، بیرون می‌زد. */
  inset-inline-end: 0;
  width: min(300px, calc(100vw - 32px));
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 120;
  padding: var(--s1);
}
#tb-notif-panel.on { display: block; }
.tb-note {
  display: flex; align-items: flex-start; gap: var(--s3);
  width: 100%; padding: 10px;
  border: 0; background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: start;
  font-family: var(--font-fa);
  color: var(--text-1);
}
.tb-note:hover { background: var(--bg-3); }
.tb-note-icon { display: flex; flex-shrink: 0; margin-top: 1px; }
.tb-note.tone-ok     .tb-note-icon { color: var(--green); }
.tb-note.tone-warn   .tb-note-icon { color: var(--amber); }
.tb-note.tone-bad    .tb-note-icon { color: var(--red); }
.tb-note.tone-accent .tb-note-icon { color: var(--accent); }
.tb-note-body { flex: 1; min-width: 0; }
.tb-note-title {
  display: block; font-size: 12.5px; font-weight: var(--w-medium);
  line-height: 1.5;
  overflow-wrap: anywhere; word-break: break-word;
}
.tb-note-sub {
  display: block; font-size: 11px; color: var(--text-3); margin-top: 2px;
  overflow-wrap: anywhere; word-break: break-word;
}

/* ── جستجو روی موبایل ─────────────────────────────────────
   فیلد کامل در نوار ۳۷۵px جا نمی‌شود. قبلاً کلاً پنهانش کردم که
   یعنی جستجو روی گوشی وجود نداشت. حالا یک دکمهٔ گرد است که با
   زدن، تمام‌عرض باز می‌شود. */
@media (max-width: 720px) {
  #tb-search-wrap {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    overflow: visible;
  }
  #tb-search-wrap .tb-search-icon { color: var(--text-3); }
  #tb-search-wrap #tb-search,
  #tb-search-wrap .tb-kbd { display: none; }

  /* باز: روی کل نوار می‌نشیند */
  #tb-search-wrap.open {
    position: absolute;
    inset-inline: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto; height: 36px;
    border-radius: 999px;
    padding: 0 12px;
    justify-content: flex-start;
    z-index: 60;
    background: var(--bg-2);
  }
  #tb-search-wrap.open #tb-search { display: block; flex: 1; }
  #tb-search-wrap.open .tb-search-icon { color: var(--accent); }
  #tb-search-wrap.open #tb-results { inset-inline: 0; width: auto; }
}

/* ═══════════════════════════════════════════════════════════
   موبایل: تراکم
   ═══════════════════════════════════════════════════════════
   روی گوشی، کاشی‌های KPI تک‌ستونی می‌شدند و هرکدام تقریباً
   یک‌سوم صفحه را می‌گرفتند — چهار کاشی یعنی یک صفحهٔ کامل
   اسکرول، فقط برای چهار عدد. منو هم فاصله‌های دسکتاپ را
   نگه می‌داشت.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* دو ستون به‌جای یک — چهار کاشی در دو ردیف جا می‌شوند */
  .kpi-grid,
  .stats-grid, .grid-4, .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .kpi, .stat-card { padding: 13px; }
  .kpi-head { margin-bottom: 7px; }
  .kpi-val { font-size: 24px; }
  .stat-card .stat-value { font-size: 24px; }
  .kpi-label, .stat-card .stat-label { font-size: 10.5px; }
  .kpi-delta { font-size: 10px; margin-top: 3px; }
  .kpi-val .u { font-size: 12px; }

  /* نوار بالا و محتوا هم جمع‌تر */
  #topbar { height: 52px; padding: 0 12px; }
  .topbar-title { font-size: 14px; }
  .topbar-actions { gap: 6px; }
  #theme-toggle-btn, #tb-notif { width: 32px; height: 32px; }
}

/* ── منوی موبایل: فاصله‌های دسکتاپ اینجا زیادی‌اند ────────── */
@media (max-width: 768px) {
  #sidebar { width: 268px; }
  .sidebar-logo { padding: 12px 12px 10px; }
  .sidebar-logo h1 { font-size: 17px; }
  .sidebar-logo span { font-size: 10.5px; }

  .sidebar-nav { padding: 6px; }
  .nav-group { margin-bottom: 2px; }
  .nav-group-head { padding: 9px 10px 4px; font-size: .64rem; }
  .nav-item {
    min-height: 40px;
    padding: 8px 10px;
    margin: 0;
    font-size: .85rem;
    gap: 9px;
  }
  .nav-account-header { padding: 8px 10px; }
  .nav-account-avatar { width: 30px; height: 30px; }
  .nav-sub-item { padding: 7px 10px; font-size: .8rem; }
  .sidebar-admin { padding: 6px; }
  .build-tag { padding: 4px 10px 2px; }
}

/* ═══════════════════════════════════════════════════════════
   موبایل: اصلاحات بازرسی
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── ردیف‌های چیپ و تب ───────────────────────────────────
     همه‌شان nowrap + overflow-x:auto بودند، یعنی یک اسکرولر
     افقی که آخرین آیتم را وسط کلمه می‌برید و هیچ نشانه‌ای هم
     نداشت که می‌شود کشیدش. روی گوشی شکستن بهتر از اسکرول
     مخفی است: همه‌چیز یک‌جا دیده و لمس می‌شود. */
  .filter-bar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding-bottom: 0;
    gap: 6px;
  }
  .filter-tag { flex-shrink: 1; }

  /* ردیف تب (آنالیز بدن) */
  #page-body .tab-btn { flex-shrink: 1; white-space: normal; }
  #page-body .tab-btn + .tab-btn { margin-inline-start: 0; }

  /* دکمه‌های بازهٔ نمودار */
  .range-btn { flex: 0 0 auto; }

  /* ── هدف لمسی ───────────────────────────────────────────
     btn-sm روی دسکتاپ ۳۰px است؛ روی گوشی زیر حداقلِ راحتِ
     لمس می‌افتد و خطای کلیک زیاد می‌شود. */
  .btn-sm { min-height: 36px; padding: 7px 12px; }
  .btn-icon.btn-sm { min-width: 36px; }

  /* ── نمودارها ───────────────────────────────────────────
     SVG با عرض ثابت از قاب بیرون می‌زد. */
  #page-analytics svg,
  #page-body svg,
  #page-overload svg,
  #page-profile svg { max-width: 100%; height: auto; }

  /* ── عنوان و کنش‌های بالای صفحه ─────────────────────────
     در عرض کم، عنوان و دکمه‌ها به هم فشرده می‌شدند. */
  .section-header {
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
  }
  .section-header > :last-child { flex-wrap: wrap; }
}

/* اسکرولر افقی، هرجا ماند: دست‌کم آخرین آیتم بریده نشود */
@media (max-width: 640px) {
  [style*="overflow-x:auto"],
  [style*="overflow-x: auto"] { scroll-padding-inline-end: 12px; }
}

/* ── ردیف تب و بازه ───────────────────────────────────────
   هر دو استایل درون‌خطی داشتند (overflow-x:auto و nowrap) که
   بر CSS مقدم بود، پس هیچ قاعده‌ای نمی‌توانست روی موبایل
   بشکندشان. حالا کلاس دارند. */
.tab-row {
  display: flex; gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.range-row { display: flex; gap: 4px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .tab-row, .range-row { gap: 5px; }
  .tab-row .tab-btn { flex: 1 1 auto; min-width: 0; text-align: center; }
  .range-row .btn { flex: 1 1 auto; }

  /* ابزار کارت برنامه: روی گوشی هدف لمسی کامل */
  .prog-card-tools .btn,
  .btn.btn-icon { min-height: 36px; min-width: 36px; }
}

@media (max-width: 640px) {
  /* دکمه‌های افزودن سریع آب باریک‌تر از حد لمس بودند */
  #page-nutrition .btn-sm { min-width: 52px; }
}

/* SVG نمودار: محتوای داخلی نباید از قاب بیرون بزند */
#page-analytics svg, #page-body svg,
#page-overload svg, #page-profile svg { overflow: hidden; }

/* ── آواتار ───────────────────────────────────────────────
   یک دایرهٔ واحد برای همهٔ شکل‌ها (آیکون، ایموجی، تصویر، حرف
   اول). قبلاً هر محل رندر استایل درون‌خطی خودش را داشت. */
.avatar-circle {
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: var(--accent-bg);
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
  line-height: 1;
}
.avatar-circle img { width: 100%; height: 100%; object-fit: cover; }

/* انتخابگر آواتار */
.av-sec {
  font-size: 12px; font-weight: var(--w-medium);
  color: var(--text-3);
  margin: 14px 0 8px;
}
.av-sec:first-child { margin-top: 0; }
.av-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.av-pick {
  width: 46px; height: 46px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.av-pick:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent);
}
.av-emoji { font-size: 22px; line-height: 1; }

/* ── سوئیچ تم ─────────────────────────────────────────────── */
.theme-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: border-color .15s ease, transform .12s ease;
}
.theme-btn:hover { border-color: var(--border-b); }
.theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.theme-btn-dot {
  display: block;
  width: 13px; height: 13px;
  border-radius: 50%;
}

/* ── پنل مدیریت ───────────────────────────────────────────
   تب‌های پنل هیچ استایلی نداشتند — دکمه‌های لخت مرورگر بودند
   و از بقیهٔ سایت بیرون می‌زدند. */
.adm-tabs {
  display: flex; gap: 4px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.adm-tab {
  font: inherit;
  font-size: .8rem; font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.adm-tab:hover { color: var(--text-1); background: var(--bg-2); }
.adm-tab.active {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: var(--accent-border, var(--accent));
}

/* نشانِ سطح دسترسی روی آیتم‌های سایدبار */
.feat-lock {
  margin-inline-start: auto;
  display: inline-flex; align-items: center;
  color: var(--amber);
  flex-shrink: 0;
}
.feat-lock-adm { opacity: .45; color: var(--text-3); }
#sidebar.collapsed .feat-lock { display: none; }

@media (max-width: 640px) {
  .adm-tabs { gap: 3px; padding-bottom: 10px; margin-bottom: 12px; }
  .adm-tab  { font-size: .74rem; padding: 7px 10px; flex: 1 1 auto; text-align: center; }
}

/* ── فیلد تاریخ شمسی ──────────────────────────────────────
   ورودی اصلی type=date سر جایش می‌ماند تا کدهایی که .value را
   ISO می‌خوانند نشکنند؛ فقط از چشم پنهان می‌شود. */
.jdate { position: relative; }
.jdate-native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
  inset-inline-start: 0; top: 0;
}
.jdate-face { cursor: pointer; width: 100%; }

.jdate-pop {
  position: absolute;
  z-index: 60;
  inset-inline-start: 0;
  top: calc(100% + 6px);
  width: min(290px, calc(100vw - 32px));
  background: var(--bg-1);
  border: 1px solid var(--border-b, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,.42);
  padding: 10px;
}
.jdate-row { display: flex; gap: 6px; margin-bottom: 8px; }
.jdate-row .form-select { flex: 1; font-size: .78rem; padding: 6px 8px; height: auto; }

.jdate-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.jd-day {
  font: inherit; font-size: .76rem;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 6px);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.jd-day:hover { background: var(--bg-3, var(--bg-2)); color: var(--text-1); }
.jd-day.on {
  background: var(--accent);
  color: var(--accent-fg, #fff);
  font-weight: 700;
}
.jdate-foot {
  display: flex; gap: 6px; justify-content: space-between;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .jdate-pop { width: min(300px, calc(100vw - 24px)); }
  .jd-day { font-size: .8rem; }
}