/* ==========================================================================
   مداد سیاه — سامانه آزمون
   Design system مشترک — تم تیره (Dark / Premium)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. فونت
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/fonts/webfonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/fonts/webfonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/fonts/webfonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* نسخه‌ی «ارقام فارسی»: رقم‌های لاتین را با گلیف فارسی نمایش می‌دهد.
   برای بخش‌هایی لازم است که متنشان را جاوااسکریپت می‌سازد و رقم‌ها لاتین می‌مانند —
   با این فونت بدون دست‌زدن به منطق، ارقام با بقیه‌ی سایت هم‌شکل می‌شوند. */
@font-face {
  font-family: 'Vazirmatn FD';
  src: url('../fonts/misc/Farsi-Digits/fonts/webfonts/Vazirmatn-FD-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn FD';
  src: url('../fonts/misc/Farsi-Digits/fonts/webfonts/Vazirmatn-FD-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn FD';
  src: url('../fonts/misc/Farsi-Digits/fonts/webfonts/Vazirmatn-FD-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn FD';
  src: url('../fonts/misc/Farsi-Digits/fonts/webfonts/Vazirmatn-FD-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* روی هر عنصری که متنش را JS می‌سازد بگذارید تا ارقامش فارسی دیده شود */
.fa-digits {
  font-family: 'Vazirmatn FD', 'Vazirmatn', Tahoma, sans-serif;
}

/* --------------------------------------------------------------------------
   2. توکن‌های طراحی — تیره
   -------------------------------------------------------------------------- */
:root {
  /* توجه: color-scheme اینجا نیست و روی body است. روی :root، بومِ چاپ
     را ‎#121212‎ می‌کرد و دور هر برگه یک قاب تیره چاپ می‌شد — و داخل
     ‎@media print‎ هم نمی‌شد خنثی‌اش کرد. */

  /* بوم و سطوح */
  --bg: #04040a;
  --surface-1: #101018;
  --surface-2: #16161f;
  --surface-3: #1d1d28;
  --surface-4: #262633;

  /* شیشه — سطحِ شناور روی بوم */
  --glass: rgba(255, 255, 255, .045);
  --glass-strong: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .09);
  --glass-border-hi: rgba(255, 255, 255, .16);

  /* متن — همه‌ی مقادیر روی سطحِ کارت‌ها حداقل ۴.۵:۱ کنتراست دارند (WCAG AA).
     ink-4 دو بار اصلاح شده: ‎#61617a‎ (۲.۷۸) و بعد ‎#8585a0‎ که با روشن‌تر
     شدنِ سطح کارت‌ها به ۴.۲۶ رسید و باز زیر حد بود. */
  --ink: #f3f3f8;
  --ink-2: #c2c2d4;
  --ink-3: #9595ae;
  --ink-4: #9797b2;

  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);

  /* برند — بنفش درخشان */
  --brand-1: #8b5cf6;
  --brand-2: #6366f1;
  --brand-3: #a78bfa;
  --brand-ink: #b9a5fb;
  --brand-soft: rgba(139, 92, 246, .14);
  --brand-soft-2: rgba(139, 92, 246, .09);
  --brand-grad: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(139, 92, 246, .12) 0%, rgba(99, 102, 241, .08) 100%);

  /* وضعیت‌ها — نسخه‌ی روشن‌تر، چون روی زمینه‌ی تیره خوانده می‌شوند */
  --ok-1: #34d399;
  --ok-2: #2dd4bf;
  --ok-ink: #6ee7b7;
  --ok-soft: rgba(52, 211, 153, .13);
  --ok-line: rgba(52, 211, 153, .3);
  --ok-grad: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);

  --warn-ink: #fcd34d;
  --warn-soft: rgba(251, 191, 36, .12);
  --warn-line: rgba(251, 191, 36, .3);

  --bad-1: #f87171;
  --bad-2: #ef4444;
  --bad-ink: #fca5a5;
  --bad-soft: rgba(248, 113, 113, .12);
  --bad-line: rgba(248, 113, 113, .3);
  --bad-grad: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  --info-ink: #93c5fd;
  --info-soft: rgba(96, 165, 250, .12);
  --info-line: rgba(96, 165, 250, .3);

  /* شعاع گوشه */
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* سایه — در تم تیره عمق از «درخشش» می‌آید نه از سایه‌ی سیاه */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --sh-md: 0 8px 24px rgba(0, 0, 0, .5);
  --sh-lg: 0 16px 48px rgba(0, 0, 0, .55);
  --sh-xl: 0 24px 70px rgba(0, 0, 0, .65);

  --glow-brand: 0 6px 24px rgba(139, 92, 246, .40);
  --glow-brand-lg: 0 10px 40px rgba(139, 92, 246, .55);
  --glow-ok: 0 6px 24px rgba(16, 185, 129, .35);
  --glow-bad: 0 6px 24px rgba(239, 68, 68, .35);

  /* لبه‌ی نورانی بالای سطوح — کلید حس «premium» */
  --edge: inset 0 1px 0 rgba(255, 255, 255, .07);
  --edge-btn: inset 0 1px 0 rgba(255, 255, 255, .22);

  /* حرکت */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .16s var(--ease);
  --t: .24s var(--ease);
  --t-slow: .4s var(--ease-out);

  --font: 'Vazirmatn', Tahoma, system-ui, sans-serif;

  /* ریتم فاصله‌ی کارت‌ها — همه‌ی کارت‌ها (نوار بالا، ریل، محتوا)
     با همین عدد از هم و از لبه‌ی صفحه فاصله می‌گیرند. */
  --gap: 20px;   /* ≈ ۰٫۵ سانتی‌متر */

  /* سطح مشترک سه کارتِ بزرگ (نوار بالا، ریل، محتوا).
     عمداً روشن‌تر و مات‌تر از بوم است تا مرزِ کارت/پس‌زمینه در
     فاصله‌های بین کارت‌ها و زیر لوگو به‌روشنی دیده شود. */
  --card-bg: rgba(26, 26, 40, .86);
  --card-bg-2: rgba(21, 21, 33, .84);
  --card-line: rgba(255, 255, 255, .14);
  --card-sh: 0 18px 44px rgba(0, 0, 0, .62);

  /* ریل ناوبری: عرض کارت و فضایی که بدنه باید از سمت راست خالی بگذارد */
  --sidenav-w: 276px;
  --sidenav-gap: var(--gap);
  --sidenav-space: calc(var(--sidenav-w) + var(--gap));
}

/* --------------------------------------------------------------------------
   3. پایه
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  /* چون color-scheme از :root برداشته شد، اسکرول‌بار صفحه را صریح تیره می‌کنیم */
  scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border: 3px solid var(--bg);
  border-radius: var(--r-pill);
}
html::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .26); }

body {
  color-scheme: dark;          /* کنترل‌های فرم و ویجت‌ها تیره بمانند */
  font-family: var(--font);
  direction: rtl;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}

a {
  color: var(--brand-ink);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-3);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection {
  background: rgba(139, 92, 246, .35);
  color: #fff;
}

.tnum {
  font-variant-numeric: tabular-nums;
}

/* لوگوی مشکی روی زمینه‌ی تیره دیده نمی‌شود — سفیدش می‌کنیم */
.logo-invert {
  filter: brightness(0) invert(1);
  opacity: .95;
}

/* --------------------------------------------------------------------------
   4. بوم — نور محیطی بنفش روی مشکی
   -------------------------------------------------------------------------- */
.bg-brand {
  background:
    radial-gradient(900px 620px at 82% -12%, rgba(139, 92, 246, .30), transparent 62%),
    radial-gradient(760px 520px at 8% 104%, rgba(99, 102, 241, .22), transparent 58%),
    radial-gradient(600px 400px at 50% 50%, rgba(167, 139, 250, .05), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

.bg-ok {
  background:
    radial-gradient(900px 620px at 82% -12%, rgba(16, 185, 129, .28), transparent 62%),
    radial-gradient(760px 520px at 8% 104%, rgba(45, 212, 191, .18), transparent 58%),
    var(--bg);
  background-attachment: fixed;
}

/* هاله‌های شناور */
.orbs {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.orbs::before,
.orbs::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.orbs::before {
  width: 520px;
  height: 520px;
  top: -220px;
  inset-inline-end: -180px;
  background: rgba(139, 92, 246, .22);
  animation: float 11s ease-in-out infinite;
}

.orbs::after {
  width: 440px;
  height: 440px;
  bottom: -200px;
  inset-inline-start: -160px;
  background: rgba(99, 102, 241, .18);
  animation: float 14s ease-in-out infinite reverse;
}

/* --------------------------------------------------------------------------
   5. اسکرول‌بار
   -------------------------------------------------------------------------- */
.scroll-y {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.scroll-y::-webkit-scrollbar {
  width: 8px;
}

.scroll-y::-webkit-scrollbar-track {
  background: transparent;
}

.scroll-y::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
}

.scroll-y::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .26);
}

.scroll-y--dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .12);
}

/* --------------------------------------------------------------------------
   6. چیدمان
   -------------------------------------------------------------------------- */
.center-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.app {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.app__main {
  min-width: 0;
  max-height: calc(100vh - 48px);
  padding-inline-end: 6px;
}

/* --------------------------------------------------------------------------
   7. کارت / سطح شیشه‌ای
   -------------------------------------------------------------------------- */
.card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md), var(--edge);
}

.card--glass {
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-color: var(--glass-border);
  box-shadow: var(--sh-lg), var(--edge);
}

.card--pad {
  padding: 28px;
}

.card--accent {
  position: relative;
  overflow: hidden;
}

.card--accent::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--brand-grad);
  box-shadow: 0 0 18px rgba(139, 92, 246, .8);
}

.card--accent-ok::before {
  background: var(--ok-grad);
  box-shadow: 0 0 18px rgba(16, 185, 129, .8);
}

/* --------------------------------------------------------------------------
   8. نوار کناری
   -------------------------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 24px;
  text-align: center;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg), var(--edge);
}

.avatar {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  font-size: 2.3rem;
  border-radius: 50%;
  color: #fff;
  background: var(--brand-grad);
  box-shadow: var(--glow-brand), var(--edge-btn);
  border: 1px solid var(--glass-border-hi);
}

.sidebar__name {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}

.meta-line {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  font-size: .87rem;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.meta-line:last-child {
  margin-bottom: 0;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--brand-grad-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t), transform var(--t), background var(--t);
}

.stat:hover {
  transform: translateX(-3px);
  border-color: rgba(139, 92, 246, .35);
  background: var(--brand-soft);
}

.stat__label {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-3);
}

.stat__value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

.stat__value--sm {
  font-size: .93rem;
}

.sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   9. دکمه‌ها
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn--block { width: 100%; }

.btn--sm {
  padding: 9px 16px;
  font-size: .85rem;
  border-radius: var(--r-sm);
}

.btn--lg {
  padding: 15px 28px;
  font-size: 1.05rem;
}

.btn--primary {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--glow-brand), var(--edge-btn);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-brand-lg), var(--edge-btn);
}

.btn--ok {
  background: var(--ok-grad);
  color: #fff;
  box-shadow: var(--glow-ok), var(--edge-btn);
}

.btn--ok:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(16, 185, 129, .5), var(--edge-btn);
}

.btn--bad {
  background: var(--bad-grad);
  color: #fff;
  box-shadow: var(--glow-bad), var(--edge-btn);
}

.btn--bad:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(239, 68, 68, .5), var(--edge-btn);
}

/* خنثی — سطح شیشه‌ای */
.btn--muted {
  background: var(--glass-strong);
  color: var(--ink-2);
  border-color: var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--muted:hover {
  background: rgba(255, 255, 255, .11);
  border-color: var(--glass-border-hi);
  color: var(--ink);
  transform: translateY(-2px);
}

/* خطی — لبه‌ی بنفش نورانی */
.btn--outline {
  background: var(--brand-soft-2);
  color: var(--brand-ink);
  border-color: rgba(139, 92, 246, .40);
}

.btn--outline:hover {
  background: var(--brand-soft);
  border-color: var(--brand-1);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(139, 92, 246, .3);
}

.btn--ghost {
  background: var(--glass-strong);
  color: var(--ink);
  border-color: var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, .13);
  transform: translateY(-2px);
}

.btn--corner {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  z-index: 2;
  padding: 8px 14px;
  font-size: .82rem;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   10. نشان‌ها
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge--brand {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--glow-brand);
}

.badge--ok {
  background: var(--ok-grad);
  color: #fff;
  box-shadow: var(--glow-ok);
}

.badge--soft {
  background: var(--brand-soft);
  color: var(--brand-ink);
  border: 1px solid rgba(139, 92, 246, .3);
}

.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: .84rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}

.pill--correct { background: var(--ok-soft);   color: var(--ok-ink);   border-color: var(--ok-line); }
.pill--wrong   { background: var(--bad-soft);  color: var(--bad-ink);  border-color: var(--bad-line); }
.pill--blank   { background: var(--surface-3); color: var(--ink-3);    border-color: var(--line); }
.pill--taraz   { background: var(--info-soft); color: var(--info-ink); border-color: var(--info-line); }
.pill--rank    { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn-line); }

/* --------------------------------------------------------------------------
   11. فرم‌ها
   -------------------------------------------------------------------------- */
.field {
  margin-bottom: 20px;
}

.field > label,
.field__label {
  display: block;
  margin-bottom: 8px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink-2);
}

.field input[type="text"],
.field input[type="password"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field input[type="email"],
.field input[type="file"],
.field select,
.field textarea,
.input {
  width: 100%;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: .95rem;
  color: var(--ink);
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}

.field input::placeholder,
.field textarea::placeholder,
.input::placeholder {
  color: var(--ink-4);
}

.field input:hover,
.field select:hover,
.field textarea:hover,
.input:hover {
  border-color: rgba(255, 255, 255, .22);
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.input:focus {
  outline: none;
  background: var(--surface-3);
  border-color: var(--brand-1);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .22), 0 0 24px rgba(139, 92, 246, .18);
}

.field textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.8;
}

.field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b8ba3' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 16px center;
  padding-inline-start: 40px;
}

/* گزینه‌های select در تم تیره باید صریح رنگ بگیرند */
.field select option {
  background: var(--surface-3);
  color: var(--ink);
}

.field input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 8px 16px;
  border: 1px solid rgba(139, 92, 246, .35);
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-family: var(--font);
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}

.field input[type="file"]::file-selector-button:hover {
  background: rgba(139, 92, 246, .28);
  color: #fff;
}

.input--ltr {
  direction: ltr;
  text-align: right;
  letter-spacing: .02em;
}

.field small,
.helptext {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  color: var(--ink-3);
  line-height: 1.7;
}

.req {
  color: var(--bad-1);
  font-weight: 700;
}

ul.errorlist {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  font-size: .84rem;
  font-weight: 500;
  color: var(--bad-ink);
}

.field:has(ul.errorlist) input,
.field:has(ul.errorlist) select,
.field:has(ul.errorlist) textarea {
  border-color: var(--bad-line);
  background: var(--bad-soft);
}

.field:has(ul.errorlist) input:focus,
.field:has(ul.errorlist) select:focus,
.field:has(ul.errorlist) textarea:focus {
  border-color: var(--bad-1);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, .22);
}

/* --------------------------------------------------------------------------
   12. پیام‌ها
   -------------------------------------------------------------------------- */
.alert {
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  border-inline-start-width: 3px;
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.8;
}

.alert--bad {
  background: var(--bad-soft);
  border-color: var(--bad-line);
  border-inline-start-color: var(--bad-1);
  color: var(--bad-ink);
}

.alert--ok {
  background: var(--ok-soft);
  border-color: var(--ok-line);
  border-inline-start-color: var(--ok-1);
  color: var(--ok-ink);
}

.alert--warn {
  background: var(--warn-soft);
  border-color: var(--warn-line);
  border-inline-start-color: #fbbf24;
  color: var(--warn-ink);
}

.alert--info {
  background: var(--info-soft);
  border-color: var(--info-line);
  border-inline-start-color: #60a5fa;
  color: var(--info-ink);
}

.alert ul { list-style: none; padding: 0; }
.alert li + li { margin-top: 4px; }

/* --------------------------------------------------------------------------
   13. حالت خالی
   -------------------------------------------------------------------------- */
.empty {
  display: grid;
  place-items: center;
  gap: 6px;
  text-align: center;
  padding: 72px 40px;
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg), var(--edge);
  color: var(--ink-3);
}

.empty__icon {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  border-radius: 50%;
  background: var(--brand-grad-soft);
  border: 1px solid var(--glass-border);
  margin-bottom: 8px;
}

.empty__title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
}

.empty__text {
  font-size: .92rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   14. جدول
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
}

.table thead th {
  padding: 14px 12px;
  font-size: .86rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--brand-grad);
  white-space: nowrap;
}

.table thead th:first-child {
  border-start-start-radius: var(--r-md);
  border-end-start-radius: var(--r-md);
}

.table thead th:last-child {
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
}

.table tbody tr {
  background: var(--surface-2);
  transition: background var(--t), box-shadow var(--t);
}

.table tbody tr:hover {
  background: var(--surface-3);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .25);
}

.table tbody td {
  padding: 13px 12px;
  text-align: center;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  border-block: 1px solid var(--line);
  white-space: nowrap;
}

.table tbody td:first-child {
  border-start-start-radius: var(--r-md);
  border-end-start-radius: var(--r-md);
  border-inline-start: 1px solid var(--line);
  font-weight: 700;
}

.table tbody td:last-child {
  border-start-end-radius: var(--r-md);
  border-end-end-radius: var(--r-md);
  border-inline-end: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   15. مودال
   -------------------------------------------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(3, 3, 6, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 24px;
  overflow-y: auto;
}

.modal.is-open { display: block; }

.modal__box {
  max-width: 480px;
  width: 100%;
  margin: 12vh auto 0;
  padding: 30px;
  background: var(--surface-1);
  border: 1px solid var(--glass-border-hi);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl), var(--edge);
  animation: pop .28s var(--ease-out);
}

.modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--bad-ink);
  margin-bottom: 14px;
}

.modal__body {
  color: var(--ink-2);
  font-size: .98rem;
  line-height: 1.9;
  margin-bottom: 24px;
}

.modal__foot {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   16. انیمیشن‌ها
   -------------------------------------------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(26px) rotate(4deg); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop {
  from { opacity: 0; transform: translateY(-18px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pulse {
  50% { opacity: .55; }
}

.rise { animation: rise .55s var(--ease-out) both; }
.rise-1 { animation-delay: .04s; }
.rise-2 { animation-delay: .08s; }
.rise-3 { animation-delay: .12s; }
.rise-4 { animation-delay: .16s; }
.rise-5 { animation-delay: .20s; }
.rise-6 { animation-delay: .24s; }

/* --------------------------------------------------------------------------
   17. واکنش‌گرا
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .app {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }

  .sidebar { position: static; }

  .app__main {
    max-height: none;
    padding-inline-end: 0;
  }
}

@media (max-width: 560px) {
  body { line-height: 1.7; }
  .center-shell { padding: 16px; }
  .card--pad { padding: 22px; }
  .sidebar { padding: 24px 18px; }
  .empty { padding: 52px 24px; }
  .btn { padding: 12px 18px; }
  .orbs { display: none; }

  .table thead th,
  .table tbody td {
    padding: 10px 8px;
    font-size: .8rem;
  }
}

/* --------------------------------------------------------------------------
   18. دسترس‌پذیری و چاپ
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* چاپ همیشه روشن — کارنامه روی کاغذ نباید سیاه در بیاید */
@media print {
  html, body {
    background: #fff !important;
    color: #111 !important;
  }

  .orbs,
  .sidenav,
  .sidenav__backdrop,
  .no-print {
    display: none !important;
  }

  .shell,
  .topbar,
  .card,
  .card--glass,
  .sidebar,
  .empty {
    background: #fff !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }

  /* کارتِ محتوا روی کاغذ قاب نمی‌خواهد؛ بعد از گروه بالا می‌آید تا
     ‎border: 0‎ بر ‎1px solid #ccc‎ همان گروه بچربد. */
  .shell {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .table tbody tr,
  .table tbody td {
    background: #fff !important;
    color: #111 !important;
    border-color: #ccc !important;
  }

  .logo-invert { filter: none !important; }

  h1, h2, h3, h4, p, span, div, td, th { color: #111 !important; }

  /* برچسب‌های کارنامه پس‌زمینه‌ی تیره دارند؛ روی کاغذ باید روشن شوند
     وگرنه با رنگِ متنِ تیره‌ی بالا، لکه‌ی سیاه چاپ می‌شوند. */
  .pill {
    border-color: #d4d4d8 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .pill--correct { background: #dcfce7 !important; color: #166534 !important; }
  .pill--wrong   { background: #fee2e2 !important; color: #991b1b !important; }
  .pill--blank   { background: #f1f5f9 !important; color: #334155 !important; }
  .pill--taraz   { background: #dbeafe !important; color: #1e40af !important; }
  .pill--rank    { background: #fef3c7 !important; color: #854d0e !important; }

  /* سربرگ بنفش و متن سفیدش باید حفظ شوند */
  .karnameh__head,
  .karnameh__head *,
  .table thead th {
    color: #fff !important;
  }
}

/* ==========================================================================
   19. پوسته‌ی اپلیکیشن — نوار بالا به‌جای کارت شناور کناری
   ========================================================================== */
/* نوار بالا هم یک کارت شناور است، نه نواری چسبیده به لبه‌ی صفحه.
   width: min(...) به‌جای margin افقی، تا هم وسط‌چین بماند و هم در
   عرض‌های کم به لبه نچسبد. */
.topbar {
  position: sticky;
  top: var(--gap);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: var(--gap);
  padding: 0 20px;
  height: 64px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(100deg,
      rgba(167, 139, 250, .17) 0%,
      rgba(109, 106, 245, .09) 44%,
      rgba(255, 255, 255, .03) 100%),
    var(--card-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--card-sh), var(--edge);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
}

/* بوم لوگو ۱۴۰۸×۷۶۸ است و طرح داخلش حاشیه‌ی شفاف زیادی دارد،
   پس برای دیده‌شدن باید بلندتر از حد معمولِ یک نوار بالا باشد. */
.topbar__brand img {
  height: 44px;
  width: auto;
  margin-inline-end: -6px;
}

.topbar__brand b {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ناوبری اصلی — به‌شکل یک کنترل بخش‌بندی‌شده، تا از دکمه‌های کناری
   متمایز و در نگاه اول پیدا باشد. */
.topbar__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  padding: 4px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--r-sm);
  font-size: .97rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}

.topbar__link i {
  font-style: normal;
  font-size: 1.02em;
  opacity: .85;
}

.topbar__link:hover {
  background: var(--glass-strong);
  color: var(--ink);
}

.topbar__link.is-active {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--glow-brand), var(--edge-btn);
}

.topbar__link.is-active i { opacity: 1; }

/* تراشه‌ی کاربر */
/* تراشه‌ی کاربر یک لینک است و به صفحه‌ی حساب کاربری می‌رود */
.userchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 6px 5px 14px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  color: inherit;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t-fast);
}

a.userchip:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--glass-border-hi);
  transform: translateY(-1px);
}

a.userchip:hover .userchip__name { color: #fff; }

.userchip__av {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .9rem;
  background: var(--brand-grad);
  box-shadow: var(--glow-brand);
}

.userchip__name {
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ناحیه‌ی محتوا — آن هم یک کارت است. سطحش عمداً از کاشی‌های داخلش
   کم‌رنگ‌تر است تا شیشه‌روی‌شیشه گِل‌آلود نشود. */
.shell {
  position: relative;
  z-index: 1;
  margin: 0 var(--gap) var(--gap);
  padding: 30px 30px 40px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background: var(--card-bg-2);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--card-sh), var(--edge);
}

/* سربرگ صفحه */
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 32px;
}

.page-head__title {
  font-size: 1.8rem;
  letter-spacing: -.02em;
  margin-bottom: 4px;
}

.page-head__sub {
  font-size: .93rem;
  color: var(--ink-3);
}

/* عنوان بخش با خط راهنما */
.section-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 36px 0 18px;
}

.section-head__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ink-3);
  white-space: nowrap;
}

.section-head__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.section-head__count {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  font-size: .78rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   20. کاشی آمار (KPI)
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.tile {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge);
  transition: border-color var(--t), transform var(--t);
}

.tile:hover {
  transform: translateY(-3px);
  border-color: var(--glass-border-hi);
}

.tile::after {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 42%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-3));
}

.tile__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 8px;
}

.tile__value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.tile__value--brand { color: var(--brand-ink); }
.tile__value--ok    { color: var(--ok-ink); }

.tile__foot {
  margin-top: 6px;
  font-size: .78rem;
  color: var(--ink-4);
}

/* --------------------------------------------------------------------------
   21. ردیف فهرست — جایگزین کارت‌های تکراری
   -------------------------------------------------------------------------- */
.rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.row-item {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 0;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  box-shadow: var(--edge);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), background var(--t);
}

.row-item:hover {
  transform: translateX(-4px);
  border-color: var(--glass-border-hi);
  background: var(--glass-strong);
}

/* نوار وضعیت عمودی سمت راست */
.row-item__bar {
  align-self: stretch;
  background: var(--ink-4);
}

.row-item--live    .row-item__bar { background: var(--ok-grad);   box-shadow: 0 0 16px rgba(16,185,129,.7); }
.row-item--soon    .row-item__bar { background: var(--brand-grad); box-shadow: 0 0 16px rgba(139,92,246,.7); }
.row-item--done    .row-item__bar { background: var(--ink-4); }

.row-item__body {
  padding: 20px 0;
  min-width: 0;
}

.row-item__title {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 7px;
}

.row-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: .85rem;
  color: var(--ink-3);
}

.row-item__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.row-item__side {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-inline-end: 20px;
}

/* نشان وضعیت */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}

.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status--live {
  color: var(--ok-ink);
  background: var(--ok-soft);
  border-color: var(--ok-line);
}

.status--live::before {
  animation: blip 1.6s ease-in-out infinite;
}

.status--soon {
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-color: rgba(139, 92, 246, .3);
}

.status--done {
  color: var(--ink-3);
  background: var(--surface-3);
  border-color: var(--line);
}

@keyframes blip {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50%      { opacity: .55; box-shadow: 0 0 0 4px transparent; }
}

/* --------------------------------------------------------------------------
   22. نمودار میله‌ای افقی (کارنامه)
   -------------------------------------------------------------------------- */
/* راهنمای رنگ‌ها — بدون آن، میله‌ی پس‌زمینه برای کاربر بی‌معنی است */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  color: var(--ink-2);
}

.chart-legend__swatch {
  width: 22px;
  height: 10px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}

.chart-legend__swatch--you {
  background: var(--brand-grad);
  box-shadow: 0 0 10px rgba(139, 92, 246, .6);
}

.chart-legend__swatch--best {
  background: rgba(255, 255, 255, .22);
  border: 1px solid var(--line-2);
}

.bars {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ستون اعداد: درصد شما + بیشترین درصد، هر دو دیده شوند */
.bar-row__nums {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 104px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}

.bar-row__you {
  font-size: .98rem;
  font-weight: 700;
  color: var(--ink);
}

.bar-row__best {
  font-size: .79rem;
  color: var(--ink-4);
  white-space: nowrap;
}

.bar-row__name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-2);
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bar-row__track {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  overflow: hidden;
}

.bar-row__fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: var(--r-pill);
  background: var(--brand-grad);
  box-shadow: 0 0 14px rgba(139, 92, 246, .55);
  animation: grow .9s var(--ease-out) both;
}

/* میله‌ی «بالاترین درصد» پشت میله‌ی کاربر.
   رنگش باید دقیقاً با نمونه‌رنگِ راهنما یکی باشد وگرنه راهنما گمراه‌کننده می‌شود. */
.bar-row__ghost {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
}

.bar-row__val {
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

@keyframes grow {
  from { transform: scaleX(0); transform-origin: right; }
  to   { transform: scaleX(1); transform-origin: right; }
}

/* --------------------------------------------------------------------------
   23. چیدمان دو ستونه‌ی ورود (split screen)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.split__brand {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  padding: 64px 56px;
  border-inline-end: 1px solid var(--glass-border);
}

.split__brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 500px at 30% 20%, rgba(139, 92, 246, .28), transparent 62%),
    radial-gradient(600px 460px at 80% 90%, rgba(99, 102, 241, .20), transparent 60%);
  pointer-events: none;
}

/* شبکه‌ی ظریف پس‌زمینه */
.split__brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 40% 40%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 40% 40%, #000 10%, transparent 72%);
  pointer-events: none;
}

.split__brand > * { position: relative; z-index: 1; }

.split__logo {
  height: 104px;
  width: auto;
  align-self: flex-start;
  margin-inline-start: -16px;
}

.split__head {
  font-size: 2.3rem;
  line-height: 1.4;
  letter-spacing: -.03em;
}

.split__lead {
  font-size: 1.02rem;
  line-height: 2;
  color: var(--ink-2);
  max-width: 44ch;
}

.split__points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.split__point {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: .93rem;
  color: var(--ink-2);
}

.split__point i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background: var(--brand-soft);
  border: 1px solid rgba(139, 92, 246, .28);
  font-style: normal;
  font-size: .9rem;
}

.split__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
}

.split__formInner {
  width: 100%;
  max-width: 380px;
}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; min-height: auto; }
  .split__brand {
    padding: 40px 26px 34px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--glass-border);
  }
  .split__head { font-size: 1.6rem; }
  .split__lead { font-size: .95rem; }
  .split__points { display: none; }
  .split__form { padding: 32px 22px 48px; }
}

/* --------------------------------------------------------------------------
   24. واکنش‌گرای پوسته
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 10px;
  }

  .topbar__nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .topbar__nav::-webkit-scrollbar { display: none; }

  .shell { padding: 22px 16px 48px; }
  .page-head__title { font-size: 1.4rem; }

  .row-item {
    grid-template-columns: 4px 1fr;
    gap: 12px;
  }

  .row-item__side {
    grid-column: 2;
    padding: 0 0 18px;
    flex-wrap: wrap;
  }

  /* دو عدد کنار هم در عرض موبایل از صفحه بیرون می‌زدند (سرریز افقی)،
     پس زیر هم می‌روند و ستون با محتوا اندازه می‌گیرد. */
  .bar-row {
    grid-template-columns: 78px 1fr auto;
    gap: 10px;
  }

  .bar-row__nums {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    line-height: 1.5;
  }

  .bar-row__you { font-size: .9rem; }
  .bar-row__best { font-size: .72rem; }
}

/* ==========================================================================
   25. نوار کناری ناوبری
   دسکتاپ: ریلِ عمودی سمت راست، قابل باز/بسته شدن.
   موبایل: کشوی روی صفحه؛ لینک‌ها هم‌زمان در نوار بالا باقی می‌مانند.
   ========================================================================== */
.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t), border-color var(--t);
}

.nav-toggle:hover {
  background: rgba(255, 255, 255, .13);
  border-color: var(--glass-border-hi);
}

/* آیکون همبرگری با سه خط */
.nav-toggle span {
  position: relative;
  display: block;
  width: 17px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}

.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t);
}

.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }

/* وقتی باز است، به ضربدر تبدیل می‌شود */
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- خود نوار کناری ---------- */
/* ریل، خودش کارت نیست: یک ستون شفاف است که دو کارتِ شناور را نگه می‌دارد —
   کارت لوگو و کارت منو. هر دو کمی از لبه‌ی راست و از هم فاصله دارند. */
.sidenav {
  position: fixed;
  inset-block: var(--sidenav-gap);
  inset-inline-start: var(--sidenav-gap);   /* در RTL یعنی لبه‌ی راست */
  z-index: 95;
  display: flex;
  flex-direction: column;
  gap: var(--sidenav-gap);
  width: var(--sidenav-w);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

/* حالتِ اولیه را سرور می‌نویسد و JS تصحیحش می‌کند؛ تا آن لحظه هیچ‌چیز
   نباید انیمیت شود، وگرنه هر بار که صفحه باز می‌شود ریل و محتوا می‌پرند. */
body.nav-ready { transition: padding .28s var(--ease); }
body.nav-ready .sidenav { transition: transform .28s var(--ease); }

.sidenav::-webkit-scrollbar { display: none; }

/* ---------- لوگو ----------
   کارت نیست: مستقیم روی پس‌زمینه می‌نشیند، بدون قاب و سایه — همان
   جایی که کنتراستِ کارت‌ها با بوم دیده می‌شود. */
.sidenav__brand {
  position: relative;
  flex-shrink: 0;
  padding: 10px 0 16px;
  text-align: center;
}

.brandmark {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* logo-medadsiah-mark.png نسخه‌ی برش‌خورده‌ی لوگوست (۳۷۲×۴۳۵).
   فایل اصلی ۱۴۰۸×۷۶۸ بود و طرح فقط ۳۷۲×۴۳۵ وسطش؛ بقیه بومِ خالی به‌علاوه‌ی
   چند لکه‌ی پرت در گوشه‌ها. برای همین هرچه ارتفاع می‌دادیم، نشانه کوچک و
   کمی کج دیده می‌شد. حالا ارتفاعِ عنصر = ارتفاعِ خودِ نشانه. */
.brandmark img {
  display: block;
  height: 100px;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  transition: transform var(--t);
}

.brandmark:hover img { transform: scale(1.03); }

/* دکمه‌ی بستن — فقط روی موبایل، چون آنجا کشو روی نوار بالا می‌افتد */
.sidenav__close {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-end: 12px;
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: .9rem;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}

.sidenav__close:hover { background: rgba(255, 255, 255, .13); color: var(--ink); }

/* ---------- کارت منو ----------
   گرادیان بنفش روی سطحِ مشترکِ کارت‌ها.
   تا پایین صفحه کشیده می‌شود (رشد می‌کند ولی زیر ارتفاع محتوایش
   جمع نمی‌شود؛ اگر لینک‌ها زیاد شوند، خودِ ریل اسکرول می‌خورد).
   لینک‌ها بالای کارت می‌مانند. */
.sidenav__menu {
  position: relative;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--card-line);
  border-radius: var(--r-xl);
  background:
    linear-gradient(158deg,
      rgba(167, 139, 250, .30) 0%,
      rgba(109, 106, 245, .17) 38%,
      rgba(80, 70, 160, .08) 66%,
      rgba(255, 255, 255, .04) 100%),
    var(--card-bg);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--card-sh), var(--edge);
}

/* لینک ناوبری — در نوار کناری تمام‌عرض، در نوار بالا فشرده */
.navlink {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--r-md);
  font-size: .96rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--t), color var(--t), box-shadow var(--t);
}

.navlink i { font-style: normal; font-size: 1.05em; opacity: .85; }

.navlink:hover { background: var(--glass-strong); color: var(--ink); }

.navlink.is-active {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: var(--glow-brand), var(--edge-btn);
}

.navlink.is-active i { opacity: 1; }

/* پرده‌ی پشت کشو (فقط موبایل) — بالاتر از نوار بالا، پایین‌تر از خود کشو */
.sidenav__backdrop {
  position: fixed;
  inset: 0;
  z-index: 92;
  background: rgba(3, 3, 6, .6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t), visibility var(--t);
}

/* ---------- دسکتاپ ---------- */
@media (min-width: 981px) {
  /* لینک‌ها در نوار کناری‌اند، پس از نوار بالا برداشته می‌شوند.
     فقط روی صفحه‌هایی که ریل دارند — کلاس nav-open/nav-closed را همان
     اسکریپت ریل می‌گذارد. صفحه‌ی فرود و کارنامه ریل ندارند و از
     .topbar__nav برای لینک‌های دیگر استفاده می‌کنند؛ آن‌ها باید بمانند. */
  body.nav-open .topbar__nav,
  body.nav-closed .topbar__nav { display: none; }

  /* جا برای ریل را خودِ بدنه باز می‌کند، نه تک‌تک کارت‌ها — این‌طور
     کارت‌ها وسط فضای باقی‌مانده می‌مانند و ریتم ۱۴px همه‌جا یکی است. */
  body.nav-open { padding-inline-start: var(--sidenav-space); }

  /* لوگو در کارت بالای ریل است؛ نسخه‌ی کوچکِ نوار بالا فقط وقتی
     ریل بسته است دیده می‌شود تا برند بی‌جا تکرار نشود. */
  body.nav-open .topbar__brand { display: none; }

  .topbar .userchip { margin-inline-start: auto; }

  /* کارت شناور است، پس باید کمی بیشتر از عرض خودش بیرون برود */
  body.nav-closed .sidenav {
    transform: translateX(calc(100% + var(--sidenav-gap)));
  }

  .sidenav__backdrop { display: none; }
}

/* ---------- موبایل ---------- */
@media (max-width: 980px) {
  /* کشو بسته است مگر باز شود */
  .sidenav {
    width: min(288px, 84vw);
    transform: translateX(calc(100% + var(--sidenav-gap)));
  }

  body.nav-open .sidenav { transform: none; }

  body.nav-open .sidenav__backdrop { opacity: 1; visibility: visible; }

  /* پشت کشو صفحه نباید اسکرول شود */
  body.nav-open { overflow: hidden; }

  /* کشو روی نوار بالا می‌افتد، پس دکمه‌ی همبرگری در دسترس نیست */
  .sidenav__close { display: grid; }

  /* محتوا هیچ‌وقت کنار نمی‌رود؛ کشو روی صفحه می‌آید */
  body.nav-open { padding-inline-start: 0; }

  .shell { padding: 22px 18px 32px; }

  /* لینک‌ها همچنان در نوار بالا در دسترس‌اند */
  .topbar__nav { display: flex; }

  .topbar__nav .navlink {
    padding: 9px 14px;
    font-size: .9rem;
  }

  .brandmark img { height: 84px; }
}