/* ==========================================================================
   دانشکده فیزیک — Samim Learning Platform
   Modern, elegant, RTL-first design system for Persian physics courses.
   Inspired by Coursera, Maven, Brilliant — refined, warm, professional.
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Neutral — warm stone palette (modern, not sterile) */
  --bg:           #faf9f7;     /* page background — warm off-white */
  --bg-soft:      #f4f2ee;     /* slightly darker sections */
  --surface:      #ffffff;     /* cards */
  --surface-2:    #fbfaf8;     /* subtle surface */
  --surface-3:    #f4f2ee;     /* hover surface */

  /* Ink — text */
  --ink:          #1c1917;     /* primary text — stone-900 */
  --ink-2:        #44403c;     /* secondary — stone-700 */
  --ink-3:        #78716c;     /* tertiary — stone-500 */
  --ink-4:        #a8a29e;     /* quaternary — stone-400 */
  --ink-5:        #d6d3d1;     /* disabled — stone-300 */

  /* Borders */
  --border:       #e7e5e4;     /* stone-200 */
  --border-soft:  #f0eeec;
  --border-strong:#d6d3d1;

  /* Brand — deep indigo (trustworthy, modern, academic) */
  --brand:        #1e3a8a;     /* indigo-900 */
  --brand-deep:   #1e2a5a;
  --brand-soft:   #eef2ff;     /* indigo-50 */
  --brand-tint:   #f5f7ff;

  /* Accent — blue (هماهنگ با brand،不再 نارنجی) */
  --accent:       #1d4ed8;     /* blue-700 — vibrant, distinct from brand indigo */
  --accent-deep:  #1e40af;     /* blue-800 */
  --accent-soft:  #eff6ff;     /* blue-50 */

  /* Semantic */
  --success:      #15803d;     /* green-700 */
  --success-soft: #f0fdf4;
  --warning:      #b45309;     /* amber-700 */
  --warning-soft: #fffbeb;
  --info:         #0e7490;     /* cyan-700 */
  --info-soft:    #ecfeff;

  /* Premium */
  --gold:         #b45309;
  --gold-soft:    #fef3c7;

  /* Danger / Error — برای پیام‌های خطا (همراه با -soft و -border) */
  --danger:       #991b1b;      /* red-800 — متن پررنگ قابل‌خواندن روی پس‌زمینه‌ی روشن */
  --danger-soft:  #fef2f2;      /* red-50 */
  --danger-border:#fca5a5;      /* red-300 — حاشیه‌ی واضح‌تر */
  --danger-accent:#dc2626;      /* red-600 — نوار کناری تاکیدی */

  /* Typography */
  --font-fa:      "Vazirmatn", "Vazir", -apple-system, system-ui, sans-serif;
  --font-en:      "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Vazirmatn", monospace;
  --font-display: "Vazirmatn", "Inter", system-ui, sans-serif;

  /* Type scale — 1.25 ratio, modern sizes */
  --fs-2xs: 0.6875rem;   /* 11px */
  --fs-xs:  0.75rem;     /* 12px */
  --fs-sm:  0.8125rem;   /* 13px */
  --fs-base:0.875rem;    /* 14px — base for dense UI */
  --fs-md:  1rem;        /* 16px */
  --fs-lg:  1.125rem;    /* 18px */
  --fs-xl:  1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;      /* 24px */
  --fs-3xl: 1.875rem;    /* 30px */
  --fs-4xl: 2.25rem;     /* 36px */
  --fs-5xl: 3rem;        /* 48px */
  --fs-6xl: 3.75rem;     /* 60px */

  /* Spacing — 4px base, modern scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px;

  /* Radii — modern, softer */
  --r-sm: 6px;
  --r:    8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-full: 9999px;

  /* Shadows — layered, subtle (not flat, not heavy) */
  --sh-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
  --sh-sm: 0 1px 3px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
  --sh:    0 2px 8px -2px rgba(28, 25, 23, 0.08), 0 1px 3px rgba(28, 25, 23, 0.04);
  --sh-md: 0 4px 12px -2px rgba(28, 25, 23, 0.08), 0 2px 6px -2px rgba(28, 25, 23, 0.04);
  --sh-lg: 0 12px 32px -4px rgba(28, 25, 23, 0.10), 0 4px 12px -2px rgba(28, 25, 23, 0.05);
  --sh-xl: 0 24px 48px -8px rgba(28, 25, 23, 0.14), 0 8px 20px -4px rgba(28, 25, 23, 0.06);
  --sh-brand: 0 8px 24px -6px rgba(30, 58, 138, 0.25);

  /* Layout */
  --container: 1280px;
  --header-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur: 160ms;
  --dur-slow: 280ms;

  /* Switch track (theme toggle) — default = light */
  --switch-track: var(--surface-3);
  --switch-thumb: #fff;
  --switch-thumb-shadow: 0 1px 3px rgba(0,0,0,0.2);
  --sun-icon: var(--warning);
  --moon-icon: var(--ink-4);
}

/* ==========================================================================
   Dark Mode — خاکستری خیلی تیره، رو به سیاهی
   رنگ آبی brand روشن‌تر می‌شود تا روی پس‌زمینه‌ی تیره کنتراست بهتری داشته باشد.
   ========================================================================== */
[data-theme="dark"] {
  /* Neutral — خاکستری خیلی تیره رو به سیاهی */
  --bg:           #0f0f12;
  --bg-soft:      #16161a;
  --surface:      #1a1a1f;
  --surface-2:    #1f1f25;
  --surface-3:    #25252c;

  /* Ink — متن روشن */
  --ink:          #f5f5f7;
  --ink-2:        #d4d4d8;
  --ink-3:        #a1a1aa;
  --ink-4:        #71717a;
  --ink-5:        #52525b;

  /* Borders — تیره */
  --border:       #2a2a32;
  --border-soft:  #232328;
  --border-strong:#3a3a44;

  /* Brand — آبی روشن‌تر برای کنتراست روی تیره */
  --brand:        #3b82f6;      /* blue-500 */
  --brand-deep:   #2563eb;      /* blue-600 */
  --brand-soft:   rgba(59, 130, 246, 0.14);
  --brand-tint:   rgba(59, 130, 246, 0.07);

  /* Accent — آبی روشن‌تر */
  --accent:       #60a5fa;      /* blue-400 */
  --accent-deep:  #3b82f6;      /* blue-500 */
  --accent-soft:  rgba(96, 165, 250, 0.12);

  /* Semantic — روشن‌تر برای کنتراست روی تیره */
  --success:      #22c55e;
  --success-soft: rgba(34, 197, 94, 0.12);
  --warning:      #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.12);
  --info:         #06b6d4;
  --info-soft:    rgba(6, 182, 212, 0.12);

  /* Premium */
  --gold:         #f59e0b;
  --gold-soft:    rgba(245, 158, 11, 0.12);

  /* Danger / Error — پس‌زمینه‌ی قرمز تیره‌ی جامد + متن بسیار روشن برای کنتراست حداکثری */
  --danger:       #fecaca;      /* red-200 — متن بسیار روشن روی پس‌زمینه‌ی تیره */
  --danger-soft:  #3b0d10;      /* قرمز بسیار تیره جامد (نه rgba با opacity پایین) */
  --danger-border:#dc2626;      /* red-600 — حاشیه‌ی پررنگ واضح */
  --danger-accent:#ef4444;      /* red-500 — نوار کناری تاکیدی */

  /* Shadows — تیره‌تر روی تم تیره */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --sh:    0 2px 8px -2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --sh-md: 0 4px 12px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
  --sh-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
  --sh-xl: 0 24px 48px -8px rgba(0, 0, 0, 0.6), 0 8px 20px -4px rgba(0, 0, 0, 0.4);
  --sh-brand: 0 8px 24px -6px rgba(59, 130, 246, 0.4);

  /* Switch track (theme toggle) — dark */
  --switch-track: var(--surface-3);
  --switch-thumb: var(--ink);
  --switch-thumb-shadow: 0 2px 6px rgba(0,0,0,0.4);
  --sun-icon: var(--ink-4);
  --moon-icon: #fbbf24;
}

/* Smooth transition between themes (بدون فلش) */
html {
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
body, .site-header, .course-card, .professor-hero, .section, .container,
.btn, .nav-primary a, .episode-item, .search-btn, input, textarea, select {
  transition: background-color var(--dur-slow) var(--ease),
              color var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-fa);
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02";
  font-variant-numeric: tabular-nums;
  /* Sticky footer: body fills viewport, footer sticks to bottom */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Main content takes the remaining space, pushing footer down naturally */
main, .page-wrap { flex: 1 0 auto; width: 100%; }
.site-footer { flex-shrink: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent); }
button { font: inherit; cursor: pointer; font-family: var(--font-fa); }
ul, ol { list-style: none; padding: 0; }
input, textarea, select { font-family: var(--font-fa); }
::selection { background: var(--brand); color: #fff; }

/* Numbers in Persian context — keep Latin for stats/codes */
.num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h1 { font-size: var(--fs-4xl); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-3xl); font-weight: 700; }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); font-weight: 600; }

p { line-height: 1.75; color: var(--ink-2); }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 60ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: none;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-full);
}

.text-muted { color: var(--ink-3); }
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-lg { font-size: var(--fs-lg); }

/* ---------- 4. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-right: var(--s-6);
  padding-left: var(--s-6);
}
.section { padding-top: var(--s-20); padding-bottom: var(--s-20); }
.section-sm { padding-top: var(--s-12); padding-bottom: var(--s-12); }
.section-tight { padding-top: var(--s-16); padding-bottom: var(--s-16); }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .site-header {
  background: rgba(15, 15, 18, 0.85);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--header-h);
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--brand) 0%, #2d4ba8 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.25);
  position: relative;
  overflow: hidden;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
}
.brand-mark span { position: relative; z-index: 1; font-family: Georgia, serif; font-style: italic; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.brand-sub { font-size: var(--fs-2xs); color: var(--ink-3); margin-top: 2px; font-weight: 500; }

/* Nav */
.nav-primary { display: flex; gap: 4px; flex: 1; justify-content: center; }
.nav-primary a {
  padding: 8px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r);
  transition: all var(--dur) var(--ease);
  position: relative;
}
.nav-primary a:hover { color: var(--ink); background: var(--surface-3); }
.nav-primary a.is-active { color: var(--brand); background: var(--brand-soft); }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.search-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink-3);
  font-size: var(--fs-sm);
  transition: all var(--dur) var(--ease);
  min-width: 180px;
}
.search-btn:hover { border-color: var(--border-strong); background: var(--surface); color: var(--ink-2); }
.search-btn .kbd {
  margin-right: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-3);
}

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: var(--sh-sm);
}
.btn-primary:hover {
  background: var(--brand-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--sh-md), var(--sh-brand);
}
.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
}
.btn-accent:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3); }
.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
  box-shadow: var(--sh-xs);
}
.btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--ink); }
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn-link {
  background: none;
  border: none;
  color: var(--brand);
  padding: 0;
  font-weight: 600;
  font-size: var(--fs-sm);
  border-radius: 0;
}
.btn-link:hover { color: var(--accent); }
.btn-link svg { transition: transform var(--dur) var(--ease); }
.btn-link:hover svg { transform: translateX(2px); }
/* RTL: arrow should point left */
[dir="rtl"] .btn-link svg { transition: transform var(--dur) var(--ease); }
[dir="rtl"] .btn-link:hover svg { transform: translateX(-2px); }

.btn-lg { padding: 13px 24px; font-size: var(--fs-md); }
.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn-block { width: 100%; }
.btn-icon { width: 40px; height: 40px; padding: 0; }

/* ---------- 7. Badges & Tags ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-full);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.badge-free { background: var(--success-soft); color: var(--success); }
.badge-new { background: var(--accent-soft); color: var(--accent); }
.badge-premium { background: linear-gradient(135deg, #fef3c7, #fde68a); color: var(--gold); }
.badge-popular { background: var(--brand-soft); color: var(--brand); }
.badge-cert { background: var(--surface-3); color: var(--ink-2); border: 1px solid var(--border); }
.badge-live { background: #fee2e2; color: #dc2626; }
.badge-live::before { content: ""; width: 6px; height: 6px; background: #dc2626; border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-radius: var(--r-sm);
}
.tag-brand { background: var(--brand-soft); border-color: transparent; color: var(--brand); }
.tag-accent { background: var(--accent-soft); border-color: transparent; color: var(--accent); }

/* ---------- 8. Section Heading ---------- */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: var(--s-8);
}
.section-head .head-left { display: flex; flex-direction: column; gap: 8px; }
.section-head h2 { font-size: var(--fs-3xl); letter-spacing: -0.025em; }
.section-head .head-meta { font-size: var(--fs-sm); color: var(--ink-3); max-width: 56ch; line-height: 1.6; }
.section-head .head-right { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; flex-shrink: 0; }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  padding: var(--s-16) 0 var(--s-20);
  background: var(--bg);
  overflow: hidden;
}
/* Subtle grid background pattern */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top right, black 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.6;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-16);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-left { display: flex; flex-direction: column; gap: var(--s-6); }
.hero-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--ink);
}
.hero-title em {
  color: var(--brand);
  font-style: normal;
  position: relative;
  display: inline-block;
}
.hero-title em::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 0;
  left: 0;
  height: 10px;
  background: linear-gradient(90deg, transparent, rgba(30, 58, 138, 0.15), transparent);
  z-index: -1;
  border-radius: var(--r-full);
}
.hero-lead { font-size: var(--fs-lg); line-height: 1.7; color: var(--ink-2); max-width: 50ch; }
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.hero-stat .label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 6px;
  font-weight: 500;
}

/* Hero featured course card */
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease);
  text-decoration: none;
  color: inherit;
  display: block;
}
.hero-card:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); color: inherit; }
.hero-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--ink);
  overflow: hidden;
}
.hero-card-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; transition: transform var(--dur-slow) var(--ease); }
.hero-card:hover .hero-card-thumb img { transform: scale(1.05); }
.hero-card-thumb .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  place-items: center;
  color: #1c1917;            /* آیکون تیره‌ی ثابت — همیشه روی دایره‌ی سفید قابل‌مشاهده */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transition: transform var(--dur) var(--ease);
}
.hero-card:hover .play-btn { transform: translate(-50%, -50%) scale(1.1); background: #fff; }
.hero-card-thumb .duration {
  position: absolute;
  bottom: 12px; left: 12px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-family: var(--font-mono);
}
.hero-card-thumb .featured-tag {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--accent);
  color: #fff;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.hero-card-body { padding: var(--s-5) var(--s-5) var(--s-5); }
.hero-card-body .h-cat { font-size: var(--fs-xs); color: var(--accent); font-weight: 700; }
.hero-card-body h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.hero-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-soft);
}
.hero-card-meta .instructor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-weight: 500;
}
.hero-card-meta .instructor img {
  width: 28px; height: 28px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid var(--border);
}
.hero-card-meta .stats {
  margin-right: auto;
  display: flex;
  gap: 12px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.hero-card-meta .stats span { display: inline-flex; align-items: center; gap: 4px; }
.hero-card-meta .stats .rating { color: var(--gold); font-weight: 700; }

/* ---------- 10. Category Pills Bar ---------- */
.cat-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.9);
}
.cat-bar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.cat-bar-inner::-webkit-scrollbar { display: none; }
.cat-bar-inner .label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.cat-pill {
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
  flex-shrink: 0;
}
.cat-pill:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--ink); }
.cat-pill.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.cat-bar-link {
  margin-right: auto;
  font-size: var(--fs-sm);
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- 11. Course Card — Vertical: image TOP, details BOTTOM ---------- */
.course-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.course-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.course-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }

/* ★ کارت دوره: چیدمان عمودی — تصویر بالا، محتوا پایین */
/* flex + column => تصویر و بدنه حتماً زیر هم چیده می‌شوند (نه کنار هم) */
.course-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;            /* برای stretched-link (لینک روی کل کارت) */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
  box-shadow: var(--sh-xs);
}
.course-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--border-strong);
}

/* ★ Stretched-link: کل کارت قابل‌کلیک است، بدون نیاز به <a> تو در تو.
   کارت دیگر <a> نیست (<article> است)؛ این لینک روی کل کارت کشیده می‌شود.
   لینک استاد با z-index بالاتر، روی این لینک قرار می‌گیرد تا جداگانه کلیک‌پذیر بماند. */
.course-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  text-decoration: none;
  color: inherit;
}
.course-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ★ تصویر: تمام عرض بالا، نسبت ۱۶:۹ */
.course-thumb {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--bg-soft);
  overflow: hidden;
  position: relative;
}
.course-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.course-card:hover .course-thumb img { transform: scale(1.06); }
.course-thumb .play-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.4));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.course-card:hover .play-overlay { opacity: 1; }
.course-thumb .play-btn {
  width: 52px; height: 52px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  place-items: center;
  color: #1c1917;            /* آیکون تیره‌ی ثابت — همیشه روی دایره‌ی سفید قابل‌مشاهده (در لایت و دارک) */
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
  transform: scale(0.85);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.course-card:hover .play-btn { transform: scale(1); box-shadow: 0 8px 26px rgba(0,0,0,0.34); }
.course-thumb .badges {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  gap: 6px;
  flex-direction: column;
  align-items: flex-end;
}

/* ★ بدنه‌ی کارت: زیر تصویر، چیدمان بلوکی ساده */
.course-body {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.course-body h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.4em * 2);
}
.course-card:hover .course-body h3 { color: var(--brand); }

/* نام استاد (قابل کلیک) */
.course-body .c-instructor {
  display: block;
  margin: 0 0 8px 0;
}
.course-body .c-instructor a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  position: relative;            /* بالای stretched-link قرار گیرد تا جداگانه کلیک‌پذیر بماند */
  z-index: 2;
}
.course-body .c-instructor a:hover { color: var(--brand); }
.course-body .c-instructor a img {
  width: 20px; height: 20px;
  border-radius: var(--r-full);
  object-fit: cover;
}

/* ردیف متادیتا: مدت دوره (یک سمت) | تعداد جلسات (سمت مقابل) */
.course-body .c-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.course-body .c-meta .meta-duration,
.course-body .c-meta .meta-sessions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  font-weight: 500;
}
.course-body .c-meta .meta-duration svg,
.course-body .c-meta .meta-sessions svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}
.course-body .c-meta .meta-duration { color: var(--ink-2); }
.course-body .c-meta .meta-sessions { color: var(--ink-3); }

/* ---------- 12. Continue Learning ---------- */
/* ★ کارت «ادامه یادگیری»: چیدمان عمودی — تصویر بالا، محتوا و دکمه پایین
   (مشابه کارت دوره: عکس تمام‌عرض بالای کارت، سپس توضیحات و دکمه در زیر آن) */
.continue-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
.continue-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;                 /* تصویر لبه‌به‌لبه بالای کارت می‌چسبد */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
  box-shadow: var(--sh-xs);
}
.continue-card:hover { box-shadow: var(--sh-lg); border-color: var(--border-strong); transform: translateY(-4px); }

/* ★ تصویر: تمام عرض بالا، نسبت ۱۶:۹، بدون شعاع گوشه (لبه‌به‌لبه) */
.continue-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--bg-soft);
  overflow: hidden;
}
.continue-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.continue-card:hover .continue-thumb img { transform: scale(1.06); }
.continue-thumb .play-mini {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.continue-card:hover .play-mini { opacity: 1; }
.continue-thumb .play-mini svg { color: #fff; }
.continue-thumb .progress-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,0.25);
}
.continue-thumb .progress-bar .fill { height: 100%; background: var(--accent); }

/* ★ بدنه: زیر تصویر — دسته، عنوان، اطلاعات قسمت و نوار پیشرفت */
.continue-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  padding: var(--s-4) var(--s-4) var(--s-3);
}
.continue-body .c-cat { font-size: var(--fs-2xs); font-weight: 700; color: var(--accent); }
.continue-body h4 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.continue-card:hover .continue-body h4 { color: var(--brand); }
.continue-body .c-ep { font-size: var(--fs-xs); color: var(--ink-3); }
.continue-body .progress-info { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 10px; }
.continue-body .progress-info .pbar { flex: 1; height: 5px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.continue-body .progress-info .pbar .fill { height: 100%; background: var(--brand); border-radius: var(--r-full); }
.continue-body .progress-info .ptext { font-size: var(--fs-2xs); color: var(--ink-3); font-family: var(--font-mono); white-space: nowrap; }

/* ★ دکمه: تمام‌عرض پایین کارت، چسبیده به بدنه */
.continue-cta { display: flex; flex-direction: column; padding: 0 var(--s-4) var(--s-4); }
.continue-cta .btn { width: 100%; justify-content: center; }

/* Generic progress bar */
.progress { height: 6px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.progress .fill { height: 100%; background: var(--brand); border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease); }
.progress.success .fill { background: var(--success); }
.progress.accent .fill { background: var(--accent); }

/* ---------- 13. Category Cards ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.cat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: all var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sh-xs);
}
.cat-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.cat-card .cat-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  display: grid;
  place-items: center;
  color: var(--brand);
}
.cat-card.accent .cat-icon { background: var(--accent-soft); color: var(--accent); }
.cat-card.success .cat-icon { background: var(--success-soft); color: var(--success); }
.cat-card.info .cat-icon { background: var(--info-soft); color: var(--info); }
.cat-card.warning .cat-icon { background: var(--warning-soft); color: var(--warning); }
.cat-card h4 { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.cat-card .cat-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  margin-top: auto;
}
.cat-card .cat-meta .count { font-weight: 600; color: var(--ink-2); }

/* ---------- 14. Instructor Card ---------- */
.instructor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.instructor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: all var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: var(--sh-xs);
}
.instructor-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--border-strong); }
.instructor-card .i-portrait {
  width: 88px; height: 88px;
  border-radius: var(--r-full);
  overflow: hidden;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.instructor-card .i-portrait img { width: 100%; height: 100%; object-fit: cover; }
.instructor-card .i-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.instructor-card .i-title { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.instructor-card .i-stats {
  display: flex;
  gap: var(--s-4);
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  width: 100%;
  justify-content: center;
}
.instructor-card .i-stat .num { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.instructor-card .i-stat .lbl { font-size: 10px; color: var(--ink-3); margin-top: 2px; }

/* ---------- 15. Video Player ---------- */
.video-player {
  position: relative;
  aspect-ratio: 16/9;
  background: #0c0a09;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.video-player img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.video-player .play-btn-xl {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.95);
  border: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.video-player .play-btn-xl:hover { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
.video-player .v-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.video-player .v-controls .v-progress {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: var(--r-full);
  position: relative;
  cursor: pointer;
}
.video-player .v-controls .v-progress .v-fill {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: var(--r-full);
  width: 32%;
}
.video-player .v-controls .v-progress .v-thumb {
  position: absolute;
  right: 32%;
  top: 50%;
  transform: translate(50%, -50%);
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: var(--r-full);
  box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.3);
}
.video-player .v-controls .v-time { font-family: var(--font-mono); font-size: var(--fs-2xs); color: rgba(255,255,255,0.9); }
.video-player .v-controls button {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px;
  display: grid;
  place-items: center;
  opacity: 0.9;
  transition: opacity var(--dur) var(--ease);
}
.video-player .v-controls button:hover { opacity: 1; }
.video-player .v-title {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: var(--s-4);
  background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
}
.video-player .v-title .v-eyebrow { font-size: var(--fs-2xs); color: rgba(255,255,255,0.85); font-weight: 600; }
.video-player .v-title h2 { color: #fff; font-size: var(--fs-lg); margin-top: 4px; }

/* ---------- 16. Episode List ---------- */
.episode-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xs);
}
.episode-list .el-head {
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.episode-list .el-head h4 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.episode-list .el-head .el-meta { font-size: var(--fs-xs); color: var(--ink-3); font-family: var(--font-mono); }

.episode-item {
  display: grid;
  grid-template-columns: 32px 64px 1fr auto;
  gap: 12px;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  text-decoration: none;
  color: inherit;
}
.episode-item:last-child { border-bottom: none; }
.episode-item:hover { background: var(--surface-2); }
.episode-item.is-current { background: var(--brand-soft); }
.episode-item.is-current .ep-title { color: var(--brand); font-weight: 700; }
.episode-item.is-watched .ep-num { color: var(--success); }
.episode-item.is-locked { opacity: 0.55; }
.episode-item .ep-num { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; text-align: center; }
.episode-item .ep-thumb {
  width: 64px; height: 40px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-soft);
  position: relative;
}
.episode-item .ep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.episode-item .ep-thumb .ep-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.episode-item:hover .ep-thumb .ep-play { opacity: 1; }
.episode-item .ep-thumb .ep-play svg { color: #fff; }
.episode-item.is-watched .ep-thumb::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 20px; height: 20px;
  background: var(--success);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
}
.episode-item.is-watched .ep-thumb::before {
  content: "✓";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
}
.episode-item .ep-info .ep-title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.4; }
.episode-item .ep-info .ep-meta { font-size: var(--fs-2xs); color: var(--ink-3); margin-top: 2px; }
.episode-item .ep-duration { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--ink-3); }

/* ---------- 17. Course Info Sidebar ---------- */
.course-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-md);
  position: sticky;
  top: calc(var(--header-h) + 16px);
}
.course-info-card .ci-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-soft);
}
.course-info-card .ci-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-info-card .ci-thumb .ci-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
}
.course-info-card .ci-thumb .ci-play button {
  width: 56px; height: 56px;
  border-radius: var(--r-full);
  background: rgba(255,255,255,0.95);
  border: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--dur) var(--ease);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.course-info-card .ci-thumb .ci-play button:hover { transform: scale(1.08); }
.course-info-card .ci-body { padding: var(--s-5); }
.course-info-card .ci-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--border-soft);
}
.course-info-card .ci-price .now { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.course-info-card .ci-price .free { color: var(--success); }
.course-info-card .ci-price .old { font-size: var(--fs-sm); color: var(--ink-4); text-decoration: line-through; font-family: var(--font-mono); }
.course-info-card .ci-price .tag { margin-right: auto; }
.course-info-card .ci-actions { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-5); }
.course-info-card .ci-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.course-info-card .ci-stat { display: flex; flex-direction: column; gap: 2px; }
.course-info-card .ci-stat .lbl { font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 600; }
.course-info-card .ci-stat .val { font-size: var(--fs-sm); color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.course-info-card .ci-stat .val svg { color: var(--ink-3); }
.course-info-card .ci-features { margin-top: var(--s-4); display: flex; flex-direction: column; gap: 10px; }
.course-info-card .ci-features li { font-size: var(--fs-sm); color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.course-info-card .ci-features li svg { color: var(--success); flex-shrink: 0; }

/* ---------- 18. Tabs ---------- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-8);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 12px 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--dur) var(--ease);
  margin-bottom: -1px;
  white-space: nowrap;
  position: relative;
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--brand); }
.tab .count {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  background: var(--surface-3);
  color: var(--ink-3);
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.tab.is-active .count { background: var(--brand-soft); color: var(--brand); }

/* ---------- 19. Filter Sidebar ---------- */
.filter-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: sticky;
  top: calc(var(--header-h) + 16px);
  box-shadow: var(--sh-xs);
}
.filter-group { padding: var(--s-4) 0; border-bottom: 1px solid var(--border-soft); }
.filter-group:first-of-type { padding-top: 0; }
.filter-group:last-of-type { border-bottom: none; padding-bottom: 0; }
.filter-group .fg-title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
}
.filter-option input { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }
.filter-option:hover { color: var(--ink); }
.filter-option .count { margin-right: auto; font-size: var(--fs-2xs); color: var(--ink-4); font-family: var(--font-mono); }
.filter-option.is-active { color: var(--brand); font-weight: 600; }

/* ---------- 20. Dashboard ---------- */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-bottom: var(--s-10); }
.dash-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-xs);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.dash-stat .ds-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  display: grid;
  place-items: center;
  color: var(--brand);
  margin-bottom: 4px;
}
.dash-stat.accent .ds-icon { background: var(--accent-soft); color: var(--accent); }
.dash-stat.success .ds-icon { background: var(--success-soft); color: var(--success); }
.dash-stat.warning .ds-icon { background: var(--warning-soft); color: var(--warning); }
.dash-stat .ds-num { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 800; color: var(--ink); line-height: 1; letter-spacing: -0.02em; }
.dash-stat .ds-label { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 500; }
.dash-stat .ds-trend { font-size: var(--fs-2xs); color: var(--success); display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }

/* ---------- 21. Forms & Inputs ---------- */
.input, .textarea, .select-input {
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--ink);
  transition: all var(--dur) var(--ease);
  width: 100%;
}
.input:focus, .textarea:focus, .select-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}
.search-input-wrap { position: relative; display: inline-flex; align-items: center; }
.search-input-wrap svg { position: absolute; right: 12px; color: var(--ink-3); pointer-events: none; }
.search-input-wrap input {
  padding: 10px 36px 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  min-width: 260px;
  color: var(--ink);
}
.search-input-wrap input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12); }

.select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  padding: 9px 32px 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: var(--r);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: left 10px center;
  transition: all var(--dur) var(--ease);
}
.select:hover { border-color: var(--border-strong); }

/* ---------- 22. Toolbar ---------- */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) 0;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.toolbar .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  padding: 7px 14px;
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-2);
  cursor: pointer;
  border-radius: var(--r-full);
  transition: all var(--dur) var(--ease);
  font-family: var(--font-fa);
}
.filter-chip:hover { background: var(--surface-3); border-color: var(--border-strong); color: var(--ink); }
.filter-chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- 23. Search Overlay ---------- */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.4);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: none;
  padding-top: 14vh;
}
.search-overlay.is-open { display: block; }
.search-panel {
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  margin: 0 var(--s-6);
}
.search-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.search-input-row svg { color: var(--ink-3); flex-shrink: 0; }
.search-input-row input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-fa);
  font-size: var(--fs-lg);
  color: var(--ink);
  outline: none;
}
.search-input-row input::placeholder { color: var(--ink-4); }
.search-input-row .close-x {
  background: var(--surface-3);
  border: none;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all var(--dur) var(--ease);
}
.search-input-row .close-x:hover { background: var(--border); color: var(--ink); }
.search-suggest { padding: var(--s-4) var(--s-5); }
.search-suggest .ss-label { font-size: var(--fs-2xs); font-weight: 700; color: var(--ink-3); margin-bottom: 10px; letter-spacing: 0.02em; }
.search-suggest .ss-items { display: flex; flex-wrap: wrap; gap: 8px; }
.search-suggest .ss-items a {
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
}
.search-suggest .ss-items a:hover { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

/* ---------- 24. Layout helpers ---------- */
.layout-with-sidebar { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-8); align-items: start; }
.layout-course-detail { display: grid; grid-template-columns: 1fr 340px; gap: var(--s-8); align-items: start; }
.course-detail-main { display: flex; flex-direction: column; gap: var(--s-8); }
.course-detail-main h2 { font-size: var(--fs-2xl); letter-spacing: -0.02em; }
.course-detail-main h3 { font-size: var(--fs-lg); margin-top: var(--s-4); margin-bottom: var(--s-3); }
.course-detail-main p { font-size: var(--fs-md); line-height: 1.8; color: var(--ink-2); margin-bottom: var(--s-3); }
.course-detail-main ul.bullet { margin: var(--s-3) 0; display: flex; flex-direction: column; gap: 10px; }
.course-detail-main ul.bullet li {
  position: relative;
  padding-right: 24px;
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.7;
}
.course-detail-main ul.bullet li::before {
  content: "";
  position: absolute;
  right: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--brand);
  border-radius: 50%;
}

/* Instructor block in course detail */
.instructor-block {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  align-items: center;
  box-shadow: var(--sh-xs);
}
.instructor-block img { width: 80px; height: 80px; border-radius: var(--r-full); object-fit: cover; border: 2px solid var(--border); }
.instructor-block .ib-name { font-size: var(--fs-lg); font-weight: 700; color: var(--ink); }
.instructor-block .ib-title { font-size: var(--fs-sm); color: var(--ink-3); margin-top: 2px; }
.instructor-block .ib-bio { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 8px; line-height: 1.65; }
.instructor-block .ib-link { margin-top: 8px; display: inline-block; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); }

/* ==========================================================================
   24b. کارت اینفوگرافی استاد (professor.php) — نسخه‌ی کامل و نفس‌دار
   ========================================================================== */
.professor-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-6);
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  align-items: start;
  box-shadow: var(--sh-sm);
  margin-bottom: var(--s-10);
}

/* ستون عکس */
.professor-hero .ph-photo-col {
  display: flex;
  justify-content: center;
}
.professor-hero .ph-photo-col img,
.professor-hero .ph-photo-col .ph-photo-fallback {
  width: 112px;
  height: 112px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 3px solid var(--surface-2);
  box-shadow: 0 8px 22px -6px rgba(0,0,0,0.18);
}
.professor-hero .ph-photo-col .ph-photo-fallback {
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
}

/* ستون محتوا */
.professor-hero .ph-content-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}
.professor-hero .ph-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.professor-hero .ph-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.professor-hero .ph-name {
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0;
}
.professor-hero .ph-rank-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.professor-hero .ph-subtitle {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  font-weight: 500;
}
.professor-hero .ph-bio {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.8;
}

/* مشخصات کلیدی — لیست تمیز با auto-fit (هر تعداد آیتم، بدون خانه‌ی خالی) */
.professor-hero .ph-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px 28px;
  margin: 4px 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.professor-hero .ph-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.professor-hero .ph-fact dt {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--ink-3);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.professor-hero .ph-fact dd {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
  word-break: break-word;
}

/* حوزه‌های پژوهشی — متن یکپارچه و خوانا (نه برچسب) */
.professor-hero .ph-research {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.professor-hero .ph-research-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.professor-hero .ph-research-text {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.9;
}

/* ---------- 25. Page Header ---------- */
.page-header {
  padding: var(--s-12) 0 var(--s-8);
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.page-header .breadcrumb {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-bottom: var(--s-4);
  display: flex;
  gap: 8px;
  align-items: center;
}
.page-header .breadcrumb a { color: var(--ink-3); text-decoration: none; }
.page-header .breadcrumb a:hover { color: var(--brand); }
.page-header .breadcrumb .sep { color: var(--ink-4); }
.page-header h1 { font-size: var(--fs-4xl); letter-spacing: -0.03em; margin-bottom: 8px; }
.page-header .lead { margin-top: var(--s-3); }

/* ---------- 26. CTA Strip ---------- */
.cta-strip {
  background: linear-gradient(135deg, var(--brand) 0%, #2d4ba8 100%);
  color: #fff;
  padding: var(--s-16) 0;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  top: -50%; left: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}
.cta-strip::after {
  content: "";
  position: absolute;
  bottom: -50%; right: -10%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(29, 78, 216, 0.15), transparent 60%);
  pointer-events: none;
}
.cta-strip .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-12);
  align-items: center;
  position: relative;
  z-index: 1;
}
.cta-strip h3 { color: #fff; font-size: var(--fs-3xl); line-height: 1.2; max-width: 30ch; letter-spacing: -0.025em; }
.cta-strip p { color: rgba(255,255,255,0.85); margin-top: 12px; font-size: var(--fs-md); max-width: 50ch; line-height: 1.7; }
.cta-strip .btn-secondary { background: #fff; color: var(--brand); border-color: #fff; }
.cta-strip .btn-secondary:hover { background: rgba(255,255,255,0.95); transform: translateY(-1px); }
.cta-strip .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.cta-strip .btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }

/* ---------- 27. Footer ---------- */
.site-footer {
  background: #1c1917;
  color: #d6d3d1;
  padding: var(--s-16) 0 var(--s-6);
  position: relative;
}
[data-theme="dark"] .site-footer {
  background: #08080a;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: var(--s-12);
  padding-bottom: var(--s-10);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand { margin-bottom: var(--s-4); }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: #a8a29e; }
.footer-brand p { font-size: var(--fs-sm); color: #a8a29e; line-height: 1.7; max-width: 36ch; margin-top: 12px; }
.footer-col h5 { font-size: var(--fs-xs); font-weight: 700; color: #fff; margin-bottom: 16px; letter-spacing: 0.02em; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: var(--fs-sm); color: #a8a29e; text-decoration: none; transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-contact .line { font-size: var(--fs-sm); color: #a8a29e; margin-bottom: 8px; line-height: 1.7; }
.footer-contact .line strong { color: #fff; font-weight: 600; }
.footer-contact .line.mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: #d6d3d1; direction: ltr; text-align: right; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-6);
  font-size: var(--fs-xs);
  color: #78716c;
}
.footer-bottom .links { display: flex; gap: 20px; }
.footer-bottom a { color: #78716c; text-decoration: none; }
.footer-bottom a:hover { color: #d6d3d1; }

/* ---------- 28. Pagination ---------- */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-8);
  border-top: 1px solid var(--border);
  margin-top: var(--s-8);
}
.pagination .pg-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.pagination .pg-numbers { display: flex; gap: 4px; align-items: center; }
.pagination .pg-btn {
  min-width: 36px; height: 36px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-radius: var(--r-sm);
  font-weight: 600;
  transition: all var(--dur) var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pagination .pg-btn:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pagination .pg-btn.is-current { background: var(--brand); color: #fff; border-color: var(--brand); }
.pagination .pg-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination .pg-ellipsis { padding: 0 8px; color: var(--ink-3); }

/* ---------- 29. News / Editorial ---------- */
.news-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-10); }
.news-featured { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.news-featured .news-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); aspect-ratio: 16/9; }
.news-featured .news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.news-featured:hover .news-img img { transform: scale(1.04); }
.news-featured .news-tag { font-size: var(--fs-xs); font-weight: 700; color: var(--accent); margin-top: 4px; }
.news-featured h3 { font-size: var(--fs-xl); font-weight: 700; line-height: 1.35; letter-spacing: -0.02em; }
.news-featured:hover h3 { color: var(--brand); }
.news-featured p { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.7; }
.news-featured .byline { font-size: var(--fs-xs); color: var(--ink-3); }

.news-list { display: flex; flex-direction: column; }
.news-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
  transition: padding var(--dur) var(--ease);
}
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: none; }
.news-item .news-date { font-size: var(--fs-2xs); color: var(--ink-3); font-family: var(--font-mono); padding-top: 2px; }
.news-item .news-cat { font-size: var(--fs-2xs); font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.news-item h4 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); line-height: 1.5; }
.news-item:hover h4 { color: var(--brand); }

/* ---------- 30. Events ---------- */
.events-list { display: flex; flex-direction: column; gap: 0; }
.event-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--s-5);
  padding: 14px var(--s-4);
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all var(--dur) var(--ease);
  border-radius: var(--r);
}
.event-item:first-child { border-top: 1px solid var(--border-soft); }
.event-item:hover { background: var(--surface); transform: translateX(-2px); }
.event-date {
  text-align: center;
  border: 1px solid var(--border);
  padding: 8px 0;
  background: var(--surface);
  border-radius: var(--r);
}
.event-date .day { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; line-height: 1; color: var(--accent); }
.event-date .month { font-size: var(--fs-2xs); color: var(--ink-3); margin-top: 4px; font-weight: 600; }
.event-body h4 { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.event-body .event-meta { font-size: var(--fs-xs); color: var(--ink-3); }
.event-body .event-meta .dot { margin: 0 6px; color: var(--ink-4); }

/* ---------- 31. Timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border-soft);
  position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item .year { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
.timeline-item .content h4 { font-size: var(--fs-md); font-weight: 700; margin-bottom: 6px; }
.timeline-item .content p { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.7; }

/* ---------- 32. Info Card ---------- */
.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.info-card .card-title { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-3); margin-bottom: 12px; }
.info-card .info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-soft);
}
.info-card .info-row:last-child { border-bottom: none; }
.info-card .info-row .k { color: var(--ink-3); }
.info-card .info-row .v { color: var(--ink); font-weight: 600; }

/* ---------- 33. Pullquote ---------- */
.pullquote {
  border-right: 3px solid var(--accent);
  padding: 8px 20px 8px 0;
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: var(--s-5) 0;
}
.pullquote cite { display: block; font-size: var(--fs-sm); color: var(--ink-3); margin-top: 12px; font-weight: 500; font-style: normal; }

/* ---------- 34. Misc utilities ---------- */
.divider { height: 1px; background: var(--border); border: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }

/* ---------- 35. Mobile Nav ---------- */
/* ---------- 35. Hamburger Button (mobile only) ---------- */
.nav-toggle {
  display: none;                       /* desktop: hidden */
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--ink);
  padding: 0;
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--surface-3); border-color: var(--border-strong); }
.nav-toggle-bar {
  display: block;
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 14px; }
.nav-toggle-bar:nth-child(2) { top: 21px; }
.nav-toggle-bar:nth-child(3) { top: 28px; }
/* حالت باز (X) */
.nav-toggle.is-active .nav-toggle-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(2) { opacity: 0; transform: translateX(-6px); }
.nav-toggle.is-active .nav-toggle-bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- 36. Responsive ---------- */
@media (max-width: 1100px) {
  .course-grid { grid-template-columns: repeat(3, 1fr); }
  .course-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .continue-list { grid-template-columns: repeat(2, 1fr); }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .instructor-grid { grid-template-columns: repeat(3, 1fr); }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .layout-with-sidebar { grid-template-columns: 1fr; }
  .filter-card { position: static; }
  .layout-course-detail { grid-template-columns: 1fr; }
  .course-info-card { position: static; }
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .hero::before { display: none; }
  .news-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* موبایل: ناوبری وسط مخفی، به‌جای آن منوی کشویی */
  .nav-primary { display: none; }
  .nav-toggle { display: inline-flex; }
  /* گرید دوره‌ها روی تبلت/موبایل بزرگ: ۲ ستونه */
  .course-grid { grid-template-columns: repeat(2, 1fr); }
  .course-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .continue-list { grid-template-columns: repeat(2, 1fr); }
  .search-btn { min-width: auto; padding: 8px 10px; }
  .search-btn span { display: none; }
  .header-actions .btn-primary span { display: none; }
  .header-actions .btn-primary { width: 40px; padding: 0; }
  .cta-strip .container { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .container { padding-right: 16px; padding-left: 16px; }
  .section { padding-top: var(--s-12); padding-bottom: var(--s-12); }
  .course-grid, .course-grid-2, .course-grid-4 { grid-template-columns: 1fr; }
  .continue-list { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .instructor-grid { grid-template-columns: 1fr 1fr; }
  .dash-stats { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr; gap: 16px; }
  .hero-title { font-size: 1.75rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .pagination { flex-direction: column; gap: 12px; }
  .instructor-block { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .professor-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .professor-hero .ph-content-col { width: 100%; align-items: center; text-align: center; }
  .professor-hero .ph-name-row { justify-content: center; }
  .professor-hero .ph-facts { grid-template-columns: 1fr 1fr; text-align: center; }
  .professor-hero .ph-fact { align-items: center; }
  .professor-hero .ph-research { text-align: center; align-items: center; }
  .episode-item { grid-template-columns: 28px 56px 1fr auto; }
  .page-header h1 { font-size: var(--fs-3xl); }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-head .head-right { width: 100%; }
}

@media print { .site-header, .cat-bar, .site-footer, .cta-strip { display: none; } body { background: #fff; } }

/* ==========================================================================
   بخش ۳۷ — استایل‌های نسخه‌ی جدید (هدر ساده‌شده، هرو مینیمال، فوتر ساده)
   Added for the simplified private Physics Department platform.
   ========================================================================== */

/* ---------- 37a. Header 3-column layout ----------
   نوار ناوبری جدید:
   - یک سمت: فقط دکمه‌ی ورود (در RTL = چپ)
   - وسط: دوره‌ها | خانه | اساتید (خانه در مرکز)
   - سمت دیگر: خالی (لوگو و متن حذف شد)
*/
.header-3col {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-4);
}
.header-side { display: flex; align-items: center; min-width: 0; gap: 10px; }
/* در RTL: flex-end = لبه‌ی چپ، flex-start = لبه‌ی راست */
.header-side--start { justify-content: flex-end; }   /* سوییچ تم + دکمه‌ی ورود → لبه‌ی چپ */
.header-side--end   { justify-content: flex-start; } /* ستون خالی → لبه‌ی راست */
.header-side--end:empty { min-height: 1px; }          /* حفظ ارتفاع ستون خالی */

/* Nav centralized — فقط ۳ آیتم، خانه در مرکز */
.nav-centered {
  flex: none;
  justify-content: center;
  gap: 6px;
}
.nav-centered a {
  padding: 9px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* ---------- 37b. Minimal Hero ----------
   هرو تمیز و آکادمیک: عنوان + نوار جستجوی بزرگ.
   بدون آمار، بدون کارت دوره‌ی منتخب، بدون دکمه‌های CTA مارکتینگ.
*/
.hero-minimal {
  position: relative;
  padding: var(--s-20) 0 var(--s-16);
  background: var(--bg);
  overflow: hidden;
  flex-shrink: 0;
}
/* الگوی شبکه‌ی ظریف به‌سبک آکادمیک */
.hero-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 75%);
  pointer-events: none;
  opacity: 0.55;
}
.hero-minimal-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-8);
  max-width: 760px;
  margin: 0 auto;
}
.hero-minimal-title {
  font-size: clamp(1.85rem, 3.6vw, 2.85rem);
  line-height: 1.22;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
  font-family: var(--font-display);
}
/* زیرعنوان ظریف آکادمیک */
.hero-minimal-eyebrow {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-minimal-eyebrow::before,
.hero-minimal-eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent);
  border-radius: var(--r-full);
  opacity: 0.6;
}

/* ---------- 37c. Hero Search Bar ----------
   نوار جستجوی بزرگ و تمیز.
*/
.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 7px 7px 7px 7px;
  box-shadow: var(--sh-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero-search:focus-within {
  border-color: var(--brand);
  box-shadow: var(--sh-lg), 0 0 0 4px var(--brand-soft);
}
.hero-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  flex-shrink: 0;
  margin-right: 6px;
}
[dir="rtl"] .hero-search-icon { margin-right: 0; margin-left: 6px; }
.hero-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-fa);
  font-size: var(--fs-md);
  color: var(--ink);
  outline: none;
  padding: 8px 4px;
  min-width: 0;
}
.hero-search-input::placeholder { color: var(--ink-4); }
.hero-search .btn { flex-shrink: 0; }

/* ---------- 37d. Simple Footer ----------
   فوتر مینیمال: فقط نام دانشکده و کپی‌رایت.
   بدون لینک‌های مارکتینگ، بدون قیمت‌گذاری، بدون تبلیغات.
*/
.footer-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.footer-simple .footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-simple .footer-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.footer-simple .footer-sub {
  font-size: var(--fs-2xs);
  color: #a8a29e;
  margin-top: 2px;
}
.footer-simple .footer-contact p {
  font-size: var(--fs-xs);
  color: #a8a29e;
  line-height: 1.7;
  margin: 0;
}
.footer-simple .footer-contact .mono {
  color: #d6d3d1;
  direction: ltr;
  text-align: left;
}
.site-footer .footer-bottom {
  padding-top: var(--s-5);
  justify-content: center;
  text-align: center;
}

/* ---------- 37e. Page wrap (sticky footer helper) ---------- */
.page-wrap { display: flex; flex-direction: column; }

/* ---------- 37f. Responsive برای هرو مینیمال ---------- */
@media (max-width: 640px) {
  .hero-minimal { padding: var(--s-12) 0 var(--s-10); }
  .hero-search { flex-wrap: wrap; border-radius: var(--r-xl); padding: 10px; }
  .hero-search-input { width: 100%; padding: 6px 4px; }
  .hero-search .btn { width: 100%; }
  .footer-simple { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   بخش ۳۸ — اصلاحات جدید (هدر، کارت دوره، استاد، صفحه‌بندی، جستجوی زنده)
   ========================================================================== */

/* ---------- 38a. دکمه‌ی ورود در هدر — رنگ brand blue ----------
   دکمه‌ی ورود در لبه‌ی چپ، هماهنگ با رنگ دکمه‌ی جستجو (btn-primary).
*/
.header-login-btn {
  /* از btn-primary ارث می‌برد؛ فقط تخصصی‌سازی ظریف */
  padding: 7px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
}
.header-login-btn:hover { color: #fff; }

/* در موبایل: همبرگری در لبه‌ی راست، تم+ورود در لبه‌ی چپ، ناوبری وسط مخفی */
@media (max-width: 880px) {
  .header-3col {
    grid-template-columns: 1fr auto;
    gap: var(--s-3);
  }
  .header-side--end   { display: flex; justify-content: flex-start; }   /* همبرگری در لبه‌ی راست */
  .header-side--start { display: flex; justify-content: flex-end; }    /* تم + ورود در لبه‌ی چپ */
  /* ناوبری وسط در موبایل مخفی است (display:none در بخش ۳۶)؛ منوی کشویی جایگزین آن می‌شود */
  .header-login-btn .header-login-name { display: none; }               /* فقط آواتار/آیکون بماند */
}

/* ---------- 38c. صفحه‌بندی ----------
*/
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--s-12);
  padding-top: var(--s-8);
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.page-link {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  text-decoration: none;
  transition: all var(--dur) var(--ease);
  font-family: var(--font-mono);
}
.page-link:hover:not(.disabled) {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.page-link.is-current {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.page-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
.page-link.nav-btn { font-family: var(--font-fa); }
.page-ellipsis {
  padding: 0 8px;
  color: var(--ink-4);
  font-weight: 600;
}
.page-info {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: var(--s-4);
}

/* ---------- 38d. جستجوی زنده (Live Filter) ----------
   فیلتر بلادرنگ کارت‌های موجود در صفحه — نه dropdown.
*/
/* حالت «بدون نتیجه» هنگام فیلتر */
.filter-empty-state {
  display: none;
  text-align: center;
  padding: var(--s-20) var(--s-4);
  color: var(--ink-3);
}
.filter-empty-state.is-visible { display: block; }
.filter-empty-state svg {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  opacity: 0.4;
  stroke: var(--ink-3);
  fill: none;
  stroke-width: 1.5;
}
.filter-empty-state p { font-size: var(--fs-md); }

/* وقتی جستجو فعال است، صفحه‌بندی مخفی شود */
.is-searching .pagination-bar,
.is-searching .page-info { display: none !important; }

/* ---------- 38e. صفحه اساتید — کارت با عکس دایره‌ای ----------
*/
.professor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}
.professor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-4);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  box-shadow: var(--sh-xs);
  transition: all var(--dur) var(--ease);
}
.professor-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-lg);
  border-color: var(--border-strong);
}
.professor-portrait {
  width: 96px;
  height: 96px;
  border-radius: var(--r-full);
  overflow: hidden;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--sh-sm);
  background: var(--bg-soft);
}
.professor-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.professor-portrait-placeholder {
  width: 96px;
  height: 96px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  display: grid;
  place-items: center;
  color: var(--brand);
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}
.professor-portrait-placeholder svg { width: 38px; height: 38px; }
.professor-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.professor-card:hover .professor-name { color: var(--brand); }
.professor-title {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.5;
}

/* ---------- 38f. نوار جستجوی صفحه دوره‌ها ----------
*/
.page-search-bar {
  padding: var(--s-10) 0 var(--s-8);
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}
.page-search-bar .hero-search {
  margin: 0 auto;
  box-shadow: var(--sh);
}

/* ---------- 38g. Responsive برای کارت‌های جدید ---------- */
@media (max-width: 1100px) {
  .professor-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .professor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .professor-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   بلوک دفاعی — کارت دوره حتماً عمودی (image TOP, details BOTTOM)
   توجه: از !important روی display استفاده نمی‌کنیم چون صفحه‌بندی سمت کلاینت
   با item.style.display = "none" کار می‌کند و !important آن را break می‌کند.
   فقط flex-direction با !important ایمن است چون display را تغییر نمی‌دهد.
   ========================================================================== */
.course-card,
.course-card:hover,
.course-card:focus,
.course-card:active {
  flex-direction: column !important;
}
.course-card > .course-thumb,
.course-card > .course-body {
  width: 100% !important;
}
.course-card > .course-thumb {
  flex: 0 0 auto !important;
  aspect-ratio: 16 / 9 !important;
}

/* ==========================================================================
   بخش ۳۹ — صفحه‌ی جزئیات دوره (course-detail.php)
   - نوار تب چسبان (sticky) با ۳ گزینه: درباره دوره / درباره استاد / محتوای دوره
   - اسکرول‌اسپای: تب فعال بر اساس موقعیت اسکرول آپدیت می‌شود
   - کارت کناری (سمت چپ در RTL): عکس، عنوان، دکمه ذخیره، مشخصات داینامیک
   - دکمه ذخیره: حالت توخالی (پیش‌فرض) → پررنگ (ذخیره‌شده)
   ========================================================================== */

/* ---------- 39a. فاصله‌ی بالا برای جبران هدر چسبان + نوار تب ---------- */
.course-detail-section {
  padding-top: var(--s-10);
}

/* ---------- 39b. نوار تب چسبان ---------- */
.course-tabs-bar {
  position: sticky;
  top: var(--header-h);        /* زیر هدر اصلی می‌چسبد */
  z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .course-tabs-bar {
  background: rgba(15, 15, 18, 0.92);
}
.course-tabs-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.course-tabs-inner::-webkit-scrollbar { display: none; }

.course-tab {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
  position: relative;
  flex-shrink: 0;
}
.course-tab:hover {
  color: var(--ink);
  background: var(--surface-3);
}
.course-tab.is-active {
  color: var(--brand);
  background: var(--brand-soft);
}
/* خط زیرین فعال (اختیاری، در کنار پس‌زمینه) */
.course-tab.is-active::after {
  content: "";
  position: absolute;
  right: 18px;
  left: 18px;
  bottom: -11px;
  height: 2px;
  background: var(--brand);
  border-radius: var(--r-full);
}

/* ---------- 39c. بخش‌های قابل اسکرول ----------
   scroll-margin-top برای جبران ارتفاع هدر + نوار تب هنگام anchor jump.
   این عدد باید با (header-h + نوار تب) برابر باشد.
*/
.course-section {
  scroll-margin-top: calc(var(--header-h) + 56px);
  padding: var(--s-10) 0;
  border-bottom: 1px solid var(--border-soft);
}
.course-section:first-of-type { padding-top: 0; }
.course-section:last-of-type { border-bottom: none; }

.course-section .section-head { margin-bottom: var(--s-6); }

/* توضیحات دوره */
.course-description {
  font-size: var(--fs-md);
  line-height: 1.9;
  color: var(--ink-2);
  margin-bottom: var(--s-6);
}
.course-subtitle {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: var(--s-6) 0 var(--s-4);
  color: var(--ink);
}

/* سرفصل‌ها — لیست شماره‌دار */
.course-topics {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.course-topics li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.7;
  transition: all var(--dur) var(--ease);
}
.course-topics li:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}
.course-topics .topic-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.course-topics .topic-text {
  flex: 1;
  padding-top: 3px;
}

/* placeholder بخش محتوای دوره */
.course-content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--s-12) var(--s-6);
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--ink-3);
}
.course-content-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.5;
  color: var(--ink-3);
}
.course-content-placeholder p { font-size: var(--fs-sm); margin: 0; }

/* ---------- 39d. کارت کناری صفحه‌ی دوره ----------
   بازنویسی فشرده‌ی course-info-card برای صفحه‌ی جزئیات:
   عکس بالا، عنوان، دکمه ذخیره، مشخصات.
*/
.course-detail-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.course-detail-sidebar .ci-thumb {
  aspect-ratio: 16/9;
  background: var(--bg-soft);
}
.course-detail-sidebar .ci-body {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* عنوان دوره در کارت */
.ci-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 39e. دکمه‌ی ذخیره دوره ----------
   حالت پیش‌فرض: توخالی (outline با border)
   حالت ذخیره‌شده: پررنگ (پس‌زمینه brand، آیکن پر)
*/
.btn-save-course {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  font-weight: 600;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  line-height: 1.2;
}
.btn-save-course:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.btn-save-course .icon-bookmark {
  width: 18px;
  height: 18px;
  fill: none;
  transition: fill var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* حالت ذخیره‌شده: پررنگ */
.btn-save-course.is-saved {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn-save-course.is-saved:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
  color: #fff;
}
.btn-save-course.is-saved .icon-bookmark {
  fill: currentColor;          /* نشان پر می‌شود */
  transform: scale(1.05);
}

/* حالت loading */
.btn-save-course.is-loading {
  pointer-events: none;
  opacity: 0.7;
}

/* ---------- 39f. لیست مشخصات دوره ---------- */
.course-specs {
  display: flex;
  flex-direction: column;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-soft);
}
.spec-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.spec-row:last-child { border-bottom: none; }
.spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink-3);
  flex-shrink: 0;
}
.spec-icon svg {
  width: 17px;
  height: 17px;
}
.spec-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.spec-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.spec-value {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.spec-link {
  color: var(--brand);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}
.spec-link:hover { color: var(--accent); }

/* ---------- 39g. fallback عکس استاد ---------- */
.instructor-photo-fallback {
  width: 80px;
  height: 80px;
  border-radius: var(--r-full);
  background: var(--brand-soft);
  display: grid;
  place-items: center;
  color: var(--brand);
  border: 2px solid var(--border);
}

/* ---------- 39h. Responsive ---------- */
@media (max-width: 1100px) {
  .layout-course-detail {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .course-detail-sidebar {
    position: static;
    order: -1;              /* کارت کناری در موبایل بالای محتوا می‌آید */
  }
  .course-detail-sidebar .ci-thumb { aspect-ratio: 16/9; }
}
@media (max-width: 640px) {
  .course-detail-section { padding-top: var(--s-6); }
  .course-section { padding: var(--s-6) 0; }
  .course-tab { padding: 8px 14px; font-size: var(--fs-xs); }
  .course-tab.is-active::after { right: 14px; left: 14px; bottom: -10px; }
  .ci-title { font-size: var(--fs-md); }
  .course-topics li { padding: 12px 14px; font-size: var(--fs-sm); }
}

/* ==========================================================================
   بخش ۴۰ — پلیر ویدیوی دوره + نوار ناوبری جلسه + آکاردئون محتوا
   ==========================================================================
   - پلیر idle: تا کاربر روی جلسه کلیک نکند، ویدیویی پخش نمی‌شود
   - دسکتاپ: پلیر سفارشی مدرن (شبیه یوتیوب) با سرعت تا ۳x، کلیدهای کیبورد،
     دبل‌کلیک تمام‌صفحه، کلیک=stop/play، نوار seek با تول‌تیپ زمان
   - موبایل: پلیر نیتیو مرورگر با controls پیش‌فرض
   - نوار ناوبری جلسه (زیر پلیر): جلسه X از Y + قبل/بعد
   - آکاردئون: کشوی «رفنس‌ها و مراجع» + کشوی «جلسات» (ویدیو/جزوه)
   ========================================================================== */

.player-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- 40a. صحنه‌ی پلیر ---------- */
.player-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0a0d;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  isolation: isolate;
  user-select: none;
}
/* تا کاربر روی یک جلسه کلیک نکند، صحنه‌ی پلیر اصلاً نمایش داده نمی‌شود */
.player-stage:not(.is-active) { display: none; }
.player-stage video.player-video {
  width: 100%;
  height: 100%;
  display: block;
  background: #0b0a0d;
  object-fit: contain;
}
/* تا ویدیویی بارگذاری نشده، عنصر ویدیو پنهان است تا لایه‌ی idle دیده شود */
.player-stage:not(.is-active) video.player-video { opacity: 0; }
.player-stage.is-active video.player-video { opacity: 1; }

/* ---------- 40b. لایه‌ی idle: پوستر + دکمه‌ی پخش بزرگ ---------- */
.player-idle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--dur-slow) var(--ease);
}
.player-stage.is-active .player-idle { opacity: 0; pointer-events: none; }
.player-idle .player-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.55);
}
.player-idle .player-idle-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(11,10,13,0.25) 0%, rgba(11,10,13,0.78) 100%),
    linear-gradient(180deg, rgba(11,10,13,0.4), rgba(11,10,13,0.55));
}
.player-idle .player-idle-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  color: #fff;
  text-align: center;
  padding: var(--s-6);
}
.player-big-play {
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.85);
  border-radius: var(--r-full);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: 0 8px 30px -6px rgba(0,0,0,0.5);
}
.player-big-play svg { width: 34px; height: 34px; margin-right: -4px; }
.player-big-play:hover {
  background: var(--brand);
  border-color: var(--brand);
  transform: scale(1.06);
  box-shadow: 0 12px 36px -6px rgba(30,58,138,0.6);
}
.player-idle-hint {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.92);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
  max-width: 420px;
  line-height: 1.6;
}

/* ---------- 40c. Toast نیاز به ورود (برای کاربران مهمان هنگام کلیک روی ویدیو) ---------- */
.login-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 480px);
  padding: 14px 14px 14px 16px;
  background: var(--ink, #1c1917);
  color: #fff;
  border-radius: var(--r-md, 12px);
  box-shadow: 0 18px 44px -10px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translate(-50%, -16px);
  transition: opacity var(--dur, .2s) var(--ease, ease), transform var(--dur, .2s) var(--ease, ease);
  font-family: var(--font-fa, inherit);
}
.login-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.login-toast .lt-icon { width: 26px; height: 26px; color: rgba(255,255,255,0.92); flex-shrink: 0; }
.login-toast .lt-body { flex: 1; min-width: 0; }
.login-toast .lt-title { font-size: var(--fs-sm, 14px); font-weight: 700; margin: 0 0 2px; line-height: 1.4; }
.login-toast .lt-desc { font-size: var(--fs-xs, 12px); color: rgba(255,255,255,0.75); margin: 0; line-height: 1.55; }
.login-toast .lt-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--brand, #1e3a8a);
  color: #fff;
  border-radius: var(--r-full, 999px);
  font-size: var(--fs-sm, 14px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: filter var(--dur, .2s) var(--ease, ease);
}
.login-toast .lt-btn:hover { filter: brightness(1.12); }
.login-toast .lt-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  transition: color var(--dur, .2s) var(--ease, ease);
}
.login-toast .lt-close:hover { color: #fff; }
@media (max-width: 480px) {
  .login-toast { top: 12px; gap: 10px; padding: 12px 12px 12px 14px; }
  .login-toast .lt-desc { display: none; }
}

/* ---------- 40d. دکمه‌ی پخش مرکزی (هنگام توقف، پس از بارگذاری) ---------- */
.player-center-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 66px;
  height: 66px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: var(--r-full);
  color: #fff;
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), background var(--dur) var(--ease);
  backdrop-filter: blur(4px);
}
.player-center-play svg { width: 30px; height: 30px; margin-right: -3px; }
.player-stage.is-active.is-paused .player-center-play {
  display: inline-flex;
  opacity: 0.96;
  transform: translate(-50%, -50%) scale(1);
}
.player-center-play:hover { background: var(--brand); border-color: var(--brand); }

/* ---------- 40e. اسپینر بارگذاری ---------- */
.player-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  display: none;
  z-index: 3;
  pointer-events: none;
}
.player-spinner svg {
  width: 100%;
  height: 100%;
  animation: pc-spin 0.9s linear infinite;
}
.player-spinner circle {
  fill: none;
  stroke: rgba(255,255,255,0.92);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 42 100;
}
.player-stage.is-loading .player-spinner { display: block; }
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* ---------- 40f. عنوان جلسه روی پلیر ---------- */
.player-title-bar {
  position: absolute;
  top: 0; right: 0; left: 0;
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(180deg, rgba(0,0,0,0.78), transparent);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 3;
}
.player-stage:hover .player-title-bar,
.player-stage.is-paused .player-title-bar,
.player-stage:not(.is-active) .player-title-bar { opacity: 1; }
.player-title-bar .ptb-eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.02em;
}
.player-title-bar .ptb-title {
  font-size: var(--fs-md);
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

/* ---------- 40g. کنترل‌های سفارشی (دسکتاپ) ---------- */
.player-controls {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  padding: var(--s-6) var(--s-3) var(--s-2);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
  color: #fff;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: 4;
  direction: ltr;   /* کنترل‌ها LTR می‌مانند چون زمان/seek به انگلیسی است */
}
.player-stage:hover .player-controls,
.player-stage.is-paused .player-controls,
.player-controls.is-visible { opacity: 1; }

/* نوار seek با تول‌تیپ زمان هنگام هاور */
.player-controls .pc-seek {
  position: relative;
  height: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 0 var(--s-2);
}
.player-controls .pc-seek::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 5px;
  background: rgba(255,255,255,0.22);
  border-radius: var(--r-full);
  transition: height var(--dur) var(--ease);
}
.player-controls .pc-seek:hover::before,
.player-controls .pc-seek.is-dragging::before { height: 8px; }
.player-controls .pc-seek .pc-seek-buffer {
  position: absolute;
  left: 0;
  height: 5px;
  background: rgba(255,255,255,0.4);
  border-radius: var(--r-full);
  width: 0%;
  transition: height var(--dur) var(--ease);
}
.player-controls .pc-seek:hover .pc-seek-buffer,
.player-controls .pc-seek.is-dragging .pc-seek-buffer { height: 8px; }
.player-controls .pc-seek .pc-seek-fill {
  position: absolute;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: var(--r-full);
  width: 0%;
  transition: height var(--dur) var(--ease);
}
.player-controls .pc-seek:hover .pc-seek-fill,
.player-controls .pc-seek.is-dragging .pc-seek-fill { height: 8px; }
.player-controls .pc-seek .pc-seek-thumb {
  position: absolute;
  left: 0;
  width: 15px;
  height: 15px;
  background: var(--accent);
  border-radius: var(--r-full);
  transform: translateX(-50%);
  box-shadow: 0 0 0 5px rgba(29, 78, 216, 0.22);
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.player-controls .pc-seek:hover .pc-seek-thumb,
.player-controls .pc-seek.is-dragging .pc-seek-thumb { opacity: 1; }
.player-controls .pc-seek .pc-seek-hover {
  position: absolute;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: rgba(0,0,0,0.9);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  padding: 3px 7px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.player-controls .pc-seek:hover .pc-seek-hover { opacity: 1; }

/* ردیف کنترل‌ها */
.player-controls .pc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px var(--s-2) 2px;
  gap: var(--s-1);
}
.player-controls .pc-left,
.player-controls .pc-right {
  display: flex;
  align-items: center;
  gap: 2px;
}
.player-controls .pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
  font-family: var(--font-fa);
  font-size: var(--fs-xs);
  font-weight: 600;
  min-width: 34px;
  position: relative;
}
.player-controls .pc-btn:hover { background: rgba(255,255,255,0.16); }
.player-controls .pc-btn:active { transform: scale(0.92); }
.player-controls .pc-btn svg { width: 20px; height: 20px; display: block; }

/* play/pause */
.player-controls .pc-play .ic-pause { display: none; }
.player-stage.is-playing .player-controls .pc-play .ic-play { display: none; }
.player-stage.is-playing .player-controls .pc-play .ic-pause { display: block; }

/* دکمه‌های جلو/عقب ۱۰ ثانیه — هم‌سطح و هم‌اندازه با دکمه‌ی پخش */
.player-controls .pc-back,
.player-controls .pc-fwd {
  padding: 7px 8px;
  min-width: 34px;
}
.player-controls .pc-back svg,
.player-controls .pc-fwd svg { width: 20px; height: 20px; }

/* mute و آیکن‌های صدا */
.player-controls .pc-mute .ic-vol-low,
.player-controls .pc-mute .ic-mute { display: none; }
.player-stage.is-muted .player-controls .pc-mute .ic-vol,
.player-stage.is-muted .player-controls .pc-mute .ic-vol-low { display: none; }
.player-stage.is-muted .player-controls .pc-mute .ic-mute { display: block; }
/* صدای کم (۰ < vol < 0.5): آیکن ولوم کم */
.player-stage.is-low-vol .player-controls .pc-mute .ic-vol { display: none; }
.player-stage.is-low-vol .player-controls .pc-mute .ic-vol-low { display: block; }

/* volume bar — جمع‌شده، هنگام هاور باز می‌شود (شبیه یوتیوب) */
.player-controls .pc-volume { display: flex; align-items: center; gap: 0; }
.player-controls .pc-volume-bar {
  width: 0;
  height: 16px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width var(--dur) var(--ease);
}
.player-controls .pc-volume:hover .pc-volume-bar,
.player-controls .pc-volume.is-active .pc-volume-bar { width: 64px; }
.player-controls .pc-volume-bar::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 4px;
  background: rgba(255,255,255,0.28);
  border-radius: var(--r-full);
}
.player-controls .pc-volume-fill {
  position: absolute;
  left: 0;
  height: 4px;
  background: #fff;
  border-radius: var(--r-full);
  width: 100%;
}
.player-controls .pc-volume-bar::after {
  content: "";
  position: absolute;
  left: var(--vol, 100%);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: var(--r-full);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.player-controls .pc-volume:hover .pc-volume-bar::after,
.player-controls .pc-volume.is-active .pc-volume-bar::after { opacity: 1; }

/* زمان */
.player-controls .pc-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: rgba(255,255,255,0.92);
  padding: 0 6px;
  direction: ltr;
  white-space: nowrap;
}
.player-controls .pc-sep { opacity: 0.5; }

/* سرعت — popover منو */
.player-controls .pc-speed-wrap { position: relative; }
.player-controls .pc-speed {
  min-width: 40px;
  padding: 6px 8px;
}
.player-controls .pc-speed-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px;
  padding: 6px;
  background: rgba(15, 14, 18, 0.97);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 6;
}
.player-controls .pc-speed-wrap.is-open .pc-speed-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.player-controls .pc-speed-opt {
  display: block;
  width: 100%;
  padding: 7px 10px;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: rgba(255,255,255,0.88);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.player-controls .pc-speed-opt:hover { background: rgba(255,255,255,0.12); color: #fff; }
.player-controls .pc-speed-opt.is-active { background: var(--brand); color: #fff; }

/* fullscreen: آیکن ورود/خروج */
.player-controls .pc-fullscreen .ic-fs-exit { display: none; }
.player-stage:fullscreen .player-controls .pc-fullscreen .ic-fs-enter { display: none; }
.player-stage:fullscreen .player-controls .pc-fullscreen .ic-fs-exit { display: block; }
.player-stage:-webkit-full-screen .player-controls .pc-fullscreen .ic-fs-enter { display: none; }
.player-stage:-webkit-full-screen .player-controls .pc-fullscreen .ic-fs-exit { display: block; }

/* ---------- 40h. نوار ناوبری جلسه (زیر پلیر): جلسه X از Y + قبل/بعد ----------
   به‌طور پیش‌فرض مخفی است؛ تنها زمانی نمایش داده می‌شود که یک ویدیو بارگذاری شده
   باشد (یعنی .player-stage کلاس is-active گرفته باشد). برای کاربر مهمان یا
   جلسات جزوه‌ای، این نوار هرگز نمایش داده نمی‌شود. */
.session-nav {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.player-stage.is-active ~ .session-nav { display: flex; }
.session-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-family: var(--font-fa);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.session-nav-btn:hover:not(:disabled) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.session-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* در RTL «جلسه قبل» با فلش چپ منطقی است؛ جهت آیکن‌ها در HTML تنظیم شده */
.session-nav-btn svg { flex-shrink: 0; }
.session-nav-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
}
.session-nav-info .snf-label { font-weight: 500; }
.session-nav-info .snf-current {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--brand);
  font-size: var(--fs-md);
  min-width: 18px;
  text-align: center;
}
.session-nav-info .snf-sep { opacity: 0.6; }
.session-nav-info .snf-total {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink-2);
}

/* ---------- 40i. پیشرفت دوره + ادامه تماشا (در کارت کناری) ---------- */
.course-progress-bar {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.course-progress-bar .cpb-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.course-progress-bar .cpb-info--login {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.course-progress-bar .cpb-info--login p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  line-height: 1.5;
}
.course-progress-bar .cpb-label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 500;
}
.course-progress-bar .cpb-percent {
  font-weight: 700;
  color: var(--brand);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
}
.course-progress-bar .cpb-progress {
  height: 8px;
  background: var(--border);
  border-radius: var(--r-full);
}
.course-progress-bar .cpb-progress .fill {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width var(--dur-slow) var(--ease);
  border-radius: var(--r-full);
}
.course-progress-bar .cpb-resume {
  width: 100%;
  justify-content: center;
  gap: 6px;
}
.course-progress-bar .cpb-resume svg { margin-left: 0; }

/* ==========================================================================
   40j. آکاردئون محتوای دوره — کشوهای «رفنس‌ها و مراجع» + «جلسات»
   ========================================================================== */
.content-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.acc-drawer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.acc-drawer.is-open { border-color: var(--border-strong); box-shadow: var(--sh-sm); }
.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: right;
  font-family: var(--font-fa);
  transition: background var(--dur) var(--ease);
}
.acc-head:hover { background: var(--surface-3); }
.acc-lead { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.acc-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.acc-icon svg { width: 20px; height: 20px; }
.acc-icon-ref { background: var(--info-soft); color: var(--info); }
.acc-icon-video { background: var(--brand-soft); color: var(--brand); }
.acc-titles { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.acc-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.acc-sub { font-size: var(--fs-2xs); color: var(--ink-3); font-weight: 500; }
.acc-meta { display: flex; align-items: center; gap: var(--s-3); flex-shrink: 0; }
.acc-count {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
}
.acc-chevron {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.acc-chevron svg { width: 18px; height: 18px; }
.acc-drawer.is-open .acc-chevron { transform: rotate(180deg); color: var(--brand); }

.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease);
}
.acc-drawer.is-open .acc-body { max-height: 2400px; }

/* ---------- 40k. لیست مراجع ---------- */
.ref-list { list-style: none; padding: 0 var(--s-3) var(--s-3); margin: 0; }
.ref-list li { border-top: 1px solid var(--border-soft); }
.ref-list li:first-child { border-top: none; }
.ref-item {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 12px var(--s-2);
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease);
  cursor: pointer;
}
.ref-item:hover { background: var(--surface-3); }
.ref-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.ref-icon {
  position: relative;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-3);
}
.ref-icon svg { width: 22px; height: 22px; }
.ref-icon-pdf { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.ref-icon-doc, .ref-icon-ppt, .ref-icon-xls { background: var(--info-soft); border-color: #bae6fd; color: var(--info); }
.ref-icon-archive { background: var(--warning-soft); border-color: #fde68a; color: var(--warning); }
.ref-icon-image { background: var(--success-soft); border-color: #bbf7d0; color: var(--success); }
.ref-icon-video { background: var(--brand-soft); border-color: #c7d2fe; color: var(--brand); }
.ref-icon-link { background: var(--surface-2); border-color: var(--border); color: var(--ink-3); }
.ref-type-tag {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-3);
  line-height: 1.3;
}
.ref-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ref-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ref-host {
  font-size: var(--fs-2xs);
  color: var(--ink-4);
  font-family: var(--font-mono);
  direction: ltr;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ref-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: color var(--dur) var(--ease);
}
.ref-action svg { width: 16px; height: 16px; }
.ref-item:hover .ref-action { color: var(--brand); }

/* دکمه‌ی دانلود جداگانه برای هر مرجع */
.ref-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.ref-download:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.ref-download:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.ref-download svg { width: 18px; height: 18px; }

/* ---------- 40l. لیست جلسات داخل کشو ---------- */
.acc-body .episode-list { margin: 0; padding: 0 var(--s-3) var(--s-3); }

/* نشانه‌گذاری: شماره + نوع + اطلاعات + مدت + دانلود (۵ ستون) */
.player-wrap .episode-item,
.content-accordion .episode-item {
  display: grid;
  grid-template-columns: 32px 24px 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 11px var(--s-2);
  border: none;
  border-top: 1px solid var(--border-soft);
  background: transparent;
  width: 100%;
  text-align: right;
  font-family: var(--font-fa);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  text-decoration: none;
  color: inherit;
}
.player-wrap .episode-item:focus-visible,
.content-accordion .episode-item:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}
.content-accordion .episode-list .episode-item:first-child { border-top: none; }
.player-wrap .episode-item:hover,
.content-accordion .episode-item:hover { background: var(--surface-3); }
.player-wrap .episode-item.is-current,
.content-accordion .episode-item.is-current { background: var(--brand-soft); }
.player-wrap .episode-item.is-current .ep-title,
.content-accordion .episode-item.is-current .ep-title { color: var(--brand); }

/* شماره جلسه */
.player-wrap .episode-item .ep-num,
.content-accordion .episode-item .ep-num {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-3);
  transition: all var(--dur) var(--ease);
}
.player-wrap .episode-item:hover .ep-num,
.content-accordion .episode-item:hover .ep-num { border-color: var(--border-strong); color: var(--ink); }
.player-wrap .episode-item.is-current .ep-num,
.content-accordion .episode-item.is-current .ep-num { background: var(--brand); color: #fff; border-color: var(--brand); }
/* نشان تماشا شده روی ep-num */
.player-wrap .episode-item.is-watched .ep-num,
.content-accordion .episode-item.is-watched .ep-num {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
  font-size: 0;
}
.player-wrap .episode-item.is-watched .ep-num::after,
.content-accordion .episode-item.is-watched .ep-num::after {
  content: "✓";
  font-family: var(--font-fa);
  font-size: 15px;
  color: #fff;
}

/* آیکن نوع جلسه (ویدیو/جزوه) */
.ep-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ink-3);
}
.ep-kind svg { width: 18px; height: 18px; }
.ep-kind-doc { color: var(--info); }
.episode-item--doc .ep-kind-doc { color: var(--info); }

.player-wrap .episode-item .ep-info,
.content-accordion .episode-item .ep-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.player-wrap .episode-item .ep-title,
.content-accordion .episode-item .ep-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.player-wrap .episode-item .ep-meta,
.content-accordion .episode-item .ep-meta {
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.player-wrap .episode-item .ep-meta-watched,
.content-accordion .episode-item .ep-meta-watched { color: var(--success); font-weight: 600; }
.player-wrap .episode-item .ep-meta-progress,
.content-accordion .episode-item .ep-meta-progress { color: var(--accent); font-weight: 500; }
.player-wrap .episode-item .ep-meta-new,
.content-accordion .episode-item .ep-meta-new { color: var(--ink-4); font-weight: 500; }
.player-wrap .episode-item .ep-meta-doc,
.content-accordion .episode-item .ep-meta-doc { color: var(--info); font-weight: 500; }
.player-wrap .episode-item .ep-duration,
.content-accordion .episode-item .ep-duration {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  font-weight: 500;
  flex-shrink: 0;
}

/* دکمه‌ی دانلود جداگانه برای هر جلسه (ویدیو یا جزوه) */
.player-wrap .episode-item .ep-download,
.content-accordion .episode-item .ep-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all var(--dur) var(--ease);
}
.player-wrap .episode-item .ep-download:hover,
.content-accordion .episode-item .ep-download:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--sh-brand);
}
.player-wrap .episode-item .ep-download:focus-visible,
.content-accordion .episode-item .ep-download:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.player-wrap .episode-item .ep-download svg,
.content-accordion .episode-item .ep-download svg { width: 16px; height: 16px; }

/* ---------- 40m. موبایل: پلیر نیتیو ----------
   روی صفحه‌های لمسی کنترل‌های سفارشی مخفی و controls نیتیو فعال می‌شود.
*/
@media (pointer: coarse), (max-width: 768px) {
  .player-controls { display: none !important; }
  .player-title-bar { display: none; }
  .player-center-play { display: none !important; }
  .player-stage video.player-video { object-fit: contain; }
  .player-stage video.player-video::-webkit-media-controls-panel { direction: ltr; }
  .player-login-card p { font-size: var(--fs-sm); }
  .player-big-play { width: 64px; height: 64px; }
  .player-big-play svg { width: 28px; height: 28px; }
  /* idle hint در موبایل کوچک‌تر */
  .player-idle-hint { font-size: var(--fs-xs); }
}

/* روی دسکتاپ، controls نیتیو مخفی است (چون سفارشی داریم) */
@media (hover: hover) and (pointer: fine) {
  .player-stage video.player-video::-webkit-media-controls,
  .player-stage video.player-video::-webkit-media-controls-enclosure {
    display: none !important;
  }
  .player-stage video.player-video { outline: none; }
}

/* ---------- 40n. حالت تمام‌صفحه ---------- */
.player-stage:fullscreen,
.player-stage:-webkit-full-screen {
  border-radius: 0;
  aspect-ratio: auto;
  height: 100vh;
}
.player-stage:fullscreen video.player-video,
.player-stage:-webkit-full-screen video.player-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- 40p. Responsive ---------- */
@media (max-width: 768px) {
  .session-nav { padding: 8px var(--s-3); gap: var(--s-2); }
  .session-nav-btn { padding: 7px 10px; font-size: var(--fs-xs); }
  .session-nav-btn span { display: none; }
  .session-nav-info { font-size: var(--fs-xs); }
  .acc-head { padding: var(--s-3) var(--s-4); }
  .acc-icon { width: 36px; height: 36px; }
  .acc-sub { display: none; }
  .ref-item { grid-template-columns: 40px 1fr auto; }
  .ref-item .ref-action { display: none; }
  .ref-download { width: 34px; height: 34px; }
  .ref-download svg { width: 16px; height: 16px; }
}
@media (max-width: 640px) {
  .player-stage { border-radius: var(--r-md); }
  .player-wrap .episode-item,
  .content-accordion .episode-item {
    grid-template-columns: 28px 20px 1fr auto auto;
    gap: var(--s-2);
    padding: 10px var(--s-2);
  }
  .player-wrap .episode-item .ep-num,
  .content-accordion .episode-item .ep-num { width: 28px; height: 28px; font-size: 10px; }
  .player-wrap .episode-item .ep-title,
  .content-accordion .episode-item .ep-title { font-size: var(--fs-xs); }
  .player-wrap .episode-item .ep-download,
  .content-accordion .episode-item .ep-download { width: 30px; height: 30px; }
  .player-wrap .episode-item .ep-download svg,
  .content-accordion .episode-item .ep-download svg { width: 14px; height: 14px; }
}
@media (max-width: 380px) {
  /* روی صفحه‌های خیلی کوچک: مدت پنهان می‌شود تا فضا برای دانلود باز شود */
  .player-wrap .episode-item .ep-duration,
  .content-accordion .episode-item .ep-duration { display: none; }
  .player-wrap .episode-item,
  .content-accordion .episode-item {
    grid-template-columns: 28px 20px 1fr auto;
  }
}

/* ==========================================================================
   بخش ۴۱ — صفحه‌ی ورود (login.php)
   - کارت وسط‌چین، برند در بالا، فرم با input + remember-me
   - پیام خطا با رنگ accent
   ========================================================================== */

.auth-section {
  padding: var(--s-16) 0 var(--s-20);
  min-height: calc(100vh - var(--header-h) - 200px);
  display: flex;
  align-items: center;
  background: var(--bg);
}
.auth-card {
  max-width: 440px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: var(--s-10) var(--s-8);
  box-shadow: var(--sh-lg);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border-soft);
}
.auth-brand .brand-mark { width: 44px; height: 44px; font-size: 24px; }
.auth-brand-text { display: flex; flex-direction: column; }
.auth-brand-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.auth-brand-sub { font-size: var(--fs-2xs); color: var(--ink-3); margin-top: 2px; }

.auth-head { margin-bottom: var(--s-6); }
.auth-head h1 { font-size: var(--fs-3xl); letter-spacing: -0.025em; margin-bottom: 8px; }
.auth-head p { font-size: var(--fs-sm); color: var(--ink-3); line-height: 1.7; }

.auth-error {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px 18px;
  background: var(--danger-soft);       /* پس‌زمینه‌ی قرمز — هم در لایت و هم دارک خوانا */
  border: 1px solid var(--danger-border);
  border-radius: var(--r-md);
  border-right: 4px solid var(--danger-accent);  /* نوار تاکیدی سمت راست (RTL) */
  color: var(--danger);                 /* متن قرمز قابل‌خواندن در هر دو تم */
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: var(--s-5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.auth-error svg {
  color: var(--danger-accent);
  flex-shrink: 0;
  margin-top: 2px;
  stroke-width: 2.2;
}
.auth-error span { flex: 1; min-width: 0; }

.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}
.auth-input { font-size: var(--fs-md); padding: 12px 14px; }
.auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-1);
}
.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.auth-check input { accent-color: var(--brand); width: 16px; height: 16px; cursor: pointer; }

.auth-submit { margin-top: var(--s-2); }

.auth-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border-soft);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.7;
}
.auth-hint svg { color: var(--ink-4); flex-shrink: 0; margin-top: 2px; }

@media (max-width: 640px) {
  .auth-section { padding: var(--s-10) 0; }
  .auth-card { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); }
  .auth-head h1 { font-size: var(--fs-2xl); }
}

/* ==========================================================================
   بخش ۴۲ — داشبورد (dashboard.php)
   - دیزاین هماهنگ با بقیه‌ی سایت: کارت‌های سفید، border ظریف، بدون گرادیانت
   - آمار، ادامه‌ی یادگیری، دوره‌های ذخیره‌شده
   ========================================================================== */

/* ---------- 42a. آمار کلی (۴ کارت) ----------
   هماهنگ با بقیه‌ی سایت: surface سفید، border، shadow ظریف.
   چیدمان: آیکن در یک سمت، عدد + برچسب در سمت دیگر.
*/
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
.dash-stat {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dash-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--border-strong);
}
.dash-stat .ds-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  display: grid;
  place-items: center;
  color: var(--brand);
  flex-shrink: 0;
}
.dash-stat .ds-icon svg { width: 20px; height: 20px; }
.dash-stat .ds-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dash-stat .ds-num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.dash-stat .ds-label {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 42b. گرید ادامه یادگیری ----------
   از continue-list پایه استفاده می‌کنیم (همان کارت‌های homepage).
   فقط یک wrapper اضافه می‌کنیم تا چیدمان ۳ ستونه باشد.
*/
.dash-continue-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

/* اضافه‌کردن .c-instructor (همان سبک homepage) به کارت ادامه داشبورد */
.dash-continue-grid .continue-card .c-instructor {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  margin-top: 4px;
}
.dash-continue-grid .continue-card .c-instructor img {
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid var(--border);
}

/* استایل مشترک c-instructor در همه‌ی کارت‌های continue-card-sm
   (homepage + dashboard) — عکس استاد دایره‌ای و خوانا. */
.continue-card-sm .c-instructor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  margin-top: 6px;
}
.continue-card-sm .c-instructor img {
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  flex-shrink: 0;
}
.continue-card-sm .c-instructor span {
  font-weight: 600;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ردیف جلسه: «جلسه سوم · [عنوان]» */
.dash-continue-grid .continue-card .c-ep {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  margin-top: 8px;
  line-height: 1.5;
}
.dash-continue-grid .continue-card .c-ep-num {
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}
.dash-continue-grid .continue-card .c-ep-sep { color: var(--ink-4); }
.dash-continue-grid .continue-card .c-ep-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* متن «ادامه از دقیقه X» */
.dash-continue-grid .continue-card .c-resume-text {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 4px;
}
.dash-continue-grid .continue-card .c-resume-text svg { color: var(--ink-3); }

/* عنوان داخل continue-card لینک‌پذیر است */
.dash-continue-grid .continue-card h4 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.dash-continue-grid .continue-card:hover h4 a { color: var(--brand); }

/* ---------- 42c. گرید دوره‌های ذخیره‌شده ----------
   از course-grid پایه (همان homepage courses.php) استفاده می‌کنیم.
   فقط چند استایل اضافی برای نشون‌دادن وضعیت پیشرفت روی کارت.
*/
.dash-saved-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

/* badge «کامل شده» روی عکس */
.course-badges {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}
.badge-completed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--success);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  border-radius: var(--r-full);
  box-shadow: 0 2px 8px rgba(21, 128, 61, 0.3);
}
.badge-completed svg { color: #fff; }

/* نوار پیشرفت روی عکس (کارت ذخیره‌شده) */
.course-thumb-progress {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
}
.course-thumb-progress .fill {
  height: 100%;
  background: var(--brand);
  transition: width var(--dur-slow) var(--ease);
}

/* بدنه‌ی کارت ذخیره‌شده — فضای بیشتر برای اطلاعات پیشرفت */
.dash-saved-card .dash-saved-body {
  padding-bottom: var(--s-2);
}
.dash-saved-card.is-completed {
  border-color: rgba(21, 128, 61, 0.25);
}
.dash-saved-card.is-completed:hover {
  border-color: rgba(21, 128, 61, 0.45);
}

/* ردیف جلسه در کارت ذخیره‌شده */
.dash-saved-card .c-ep {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  margin-top: 6px;
  line-height: 1.5;
}
.dash-saved-card .c-ep-num {
  color: var(--brand);
  font-weight: 700;
  flex-shrink: 0;
}
.dash-saved-card .c-ep-sep { color: var(--ink-4); }
.dash-saved-card .c-ep-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* متن «ادامه از دقیقه X» در کارت ذخیره‌شده */
.dash-saved-card .c-resume-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 4px;
}
.dash-saved-card .c-resume-text svg { color: var(--ink-3); }

/* نوار پیشرفت در کارت ذخیره‌شده */
.dash-saved-card .c-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.dash-saved-card .c-progress .pbar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
}
.dash-saved-card .c-progress .pbar .fill {
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease);
}
.is-completed .c-progress .pbar .fill { background: var(--success); }
.dash-saved-card .c-progress .ptext {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
  font-weight: 700;
  white-space: nowrap;
}

/* دکمه‌ی پایین کارت ذخیره‌شده */
.dash-saved-cta {
  padding: 0 var(--s-4) var(--s-4);
}
.dash-saved-cta .btn { width: 100%; justify-content: center; }

/* ---------- 42d. حالت خالی (empty state) ---------- */
.dash-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: var(--s-16) var(--s-6);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--ink-3);
}
.dash-empty-state svg {
  width: 48px;
  height: 48px;
  color: var(--ink-4);
  opacity: 0.6;
}
.dash-empty-state h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.dash-empty-state p {
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin: 0;
  max-width: 40ch;
  line-height: 1.7;
}
.dash-empty-state .btn { margin-top: var(--s-3); }

/* ---------- 42e. Responsive ---------- */
@media (max-width: 1100px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-continue-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-saved-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .dash-saved-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dash-stats { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .dash-stat { padding: var(--s-4); }
  .dash-stat .ds-icon { width: 38px; height: 38px; }
  .dash-stat .ds-num { font-size: var(--fs-xl); }
  .dash-continue-grid { grid-template-columns: 1fr; }
  .dash-saved-grid { grid-template-columns: 1fr; }
  .dash-empty-state { padding: var(--s-10) var(--s-4); }
}

/* ==========================================================================
   بخش ۴۳ — اصلاحات نهایی (گرید ۴ ستونه، btn-danger، کارت کوچک، breadcrumb)
   ========================================================================== */

/* ---------- 43a. دکمه‌ی خروج قرمز (btn-danger) ---------- */
.btn-danger {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}
.btn-danger:hover {
  background: #b91c1c;
  color: #fff;
  border-color: #b91c1c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* ---------- 43b. گرید ۴ ستونه برای «ادامه یادگیری» ----------
   هم در homepage و هم در dashboard استفاده می‌شود.
   کارت‌ها کوچک‌تر از continue-list پایه (که ۳ ستونه است).
*/
.continue-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
}

/* کارت کوچک‌تر برای گرید ۴ ستونه */
.continue-card-sm {
  border-radius: var(--r-md);
}
.continue-card-sm .continue-thumb { aspect-ratio: 16/9; }
.continue-card-sm .continue-body {
  padding: var(--s-3) var(--s-3) var(--s-2);
  gap: 3px;
}
.continue-card-sm .continue-body .c-cat { font-size: var(--fs-2xs); }
.continue-card-sm .continue-body h4 {
  font-size: var(--fs-sm);
  line-height: 1.4;
  -webkit-line-clamp: 2;
}
.continue-card-sm .continue-body .c-ep {
  font-size: var(--fs-2xs);
  margin-top: 4px;
}
.continue-card-sm .continue-body .c-resume-text {
  font-size: 10px;
  margin-top: 2px;
}
.continue-card-sm .continue-body .progress-info {
  padding-top: 6px;
  gap: 8px;
}
.continue-card-sm .continue-body .progress-info .pbar { height: 4px; }
.continue-card-sm .continue-body .progress-info .ptext { font-size: 10px; }
.continue-card-sm .continue-cta { padding: 0 var(--s-3) var(--s-3); }
.continue-card-sm .continue-cta .btn { font-size: var(--fs-xs); padding: 7px 12px; }

/* responsive برای گرید ۴ ستونه */
@media (max-width: 1100px) {
  .continue-grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px) {
  .continue-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .continue-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 43c. breadcrumb ساده ---------- */
.page-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.page-breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.page-breadcrumb a:hover { color: var(--brand); }
.page-breadcrumb .sep { color: var(--ink-4); }

/* ---------- 43d. نوار جستجوی inline (در my-courses.php) ---------- */
.page-search-inline {
  max-width: 480px;
  margin-bottom: var(--s-6);
  box-shadow: var(--sh);
}
.page-search-inline .hero-search-input { font-size: var(--fs-sm); }

/* ---------- 43e. عنوان h1 در صفحه‌ی کامل ---------- */
.section-head h1 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}

/* ==========================================================================
   بخش ۴۴ — سوییچ تم (دارک مود / لایت مود)
   - دکمه‌ی pill-style با track + thumb متحرک
   - آیکون خورشید (لایت) و ماه (دارک) داخل thumb
   - در هر دو تم و در همه‌ی صفحات قابل دسترس
   ========================================================================== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: var(--r-full);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* track (بدنه‌ی سوییچ) */
.theme-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 26px;
  padding: 3px;
  background: var(--switch-track);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* thumb (دایره‌ی متحرک) */
.theme-toggle-thumb {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--switch-thumb);
  box-shadow: var(--switch-thumb-shadow);
  transform: translateX(0);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* در RTL، حالت لایت = thumb در سمت راست، حالت دارک = thumb به سمت چپ حرکت می‌کند */
/* (در RTL، translateX مثبت = حرکت به چپ، منفی = راست) */
[data-theme="light"] .theme-toggle-thumb,
.theme-toggle:not([data-state="dark"]) .theme-toggle-thumb {
  transform: translateX(0);
}
[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(-22px);
}

/* آیکون‌ها: در هر لحظه فقط آیکون متناسب با تم فعلی نمایش داده شود */
.theme-toggle-icon {
  position: absolute;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.theme-toggle-icon--sun  { color: var(--sun-icon); }
.theme-toggle-icon--moon { color: var(--moon-icon); }

/* در حالت لایت: خورشید فعال، ماه پنهان */
[data-theme="light"] .theme-toggle-icon--sun  { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle-icon--moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
/* در حالت دارک: ماه فعال، خورشید پنهان */
[data-theme="dark"] .theme-toggle-icon--sun  { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="dark"] .theme-toggle-icon--moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* حالت پیش‌فرض (قبل از اجرای اسکریپت) — لایت فرض می‌شود */
.theme-toggle-icon--moon { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle-icon--sun  { opacity: 1; transform: rotate(0deg) scale(1); }

/* موبایل: سوییچ کمی کوچک‌تر */
@media (max-width: 880px) {
  .theme-toggle-track { width: 44px; height: 24px; }
  .theme-toggle-thumb { width: 18px; height: 18px; }
  [data-theme="dark"] .theme-toggle-thumb { transform: translateX(-20px); }
}

/* احترام به prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-track,
  .theme-toggle-thumb,
  .theme-toggle-icon {
    transition: none !important;
  }
}

/* ==========================================================================
   بخش ۴۴ — منوی کشویی موبایل (Hamburger Drawer)
   - فقط در موبایل (≤880px) فعال است
   - از لبه‌ی راست باز می‌شود (در RTL، راست = ابتدای صفحه)
   - سه گزینه: اساتید، دوره‌ها، خانه
   - بک‌دراپ نیمه‌شفاف برای بستن با ضربه‌ی خارج
   ========================================================================== */

.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  z-index: 200;
  transition: opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease);
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;                       /* لبه‌ی راست — در RTL ابتدای صفحه */
  height: 100dvh;
  height: 100vh;                   /* fallback */
  width: min(320px, 86vw);
  background: var(--surface);
  color: var(--ink);
  z-index: 201;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-xl);
  transform: translateX(100%);    /* بسته: بیرون از لبه‌ی راست */
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  border-left: 1px solid var(--border);   /* مرز سمت چپ (لبه‌ی داخل) */
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease);
}

/* هدر درآور: برند + دکمه‌ی بستن */
.mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}
.mobile-menu-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mobile-menu-brand .brand-mark {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  font-size: 18px;
}
.mobile-menu-brand-name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mobile-menu-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mobile-menu-close:hover {
  background: var(--surface-3);
  color: var(--ink);
  border-color: var(--border-strong);
}

/* بدنه‌ی ناوبری */
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  padding: var(--s-3);
  gap: 4px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.mobile-menu-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  min-height: 48px;                /* هدف لمسی ≥۴۸px */
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mobile-menu-nav a svg {
  flex-shrink: 0;
  color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.mobile-menu-nav a:hover {
  background: var(--surface-3);
  color: var(--ink);
}
.mobile-menu-nav a:hover svg { color: var(--brand); }
.mobile-menu-nav a.is-active {
  background: var(--brand-soft);
  color: var(--brand);
}
.mobile-menu-nav a.is-active svg { color: var(--brand); }

/* قفل اسکرول بدنه وقتی منو باز است */
body.mobile-menu-open {
  overflow: hidden;
}

/* فقط موبایل: drawer نمایش داده شود (در دسکتاپ скрыт — به‌هرحال با JS کنترل می‌شود) */
@media (min-width: 881px) {
  .mobile-menu,
  .mobile-menu-backdrop { display: none !important; }
}

@media (max-width: 640px) {
  .mobile-menu { width: min(300px, 88vw); }
  .mobile-menu-nav a { font-size: var(--fs-md); padding: 13px 14px; }
}

/* ==========================================================================
   بخش ۴۵ — بهینه‌سازی جامع موبایل
   - اهداف لمسی ≥۴۴px برای دکمه‌های صفحه‌بندی و کارت‌ها
   - کاهش padding بخش‌ها و نوار جستجو روی صفحه‌های کوچک
   - هماهنگی هدر و فاصله‌گذاری‌ها
   ========================================================================== */
@media (max-width: 880px) {
  /* نوار جستجوی صفحات (courses/professors): padding کمتر روی موبایل */
  .page-search-bar { padding: var(--s-6) 0 var(--s-5); }
  /* بخش‌ها کمی فشرده‌تر */
  .section { padding-top: var(--s-10); padding-bottom: var(--s-10); }
  .section-sm { padding-top: var(--s-8); padding-bottom: var(--s-8); }
}

@media (max-width: 640px) {
  /* هرو: padding کمتر */
  .hero-minimal { padding: var(--s-10) 0 var(--s-8); }
  .hero-minimal-inner { gap: var(--s-6); }

  /* نوار جستجو: input و دکمه تمام‌عرض روی موبایل */
  .hero-search {
    flex-wrap: wrap;
    border-radius: var(--r-xl);
    padding: 8px;
    gap: 8px;
  }
  .hero-search-input { width: 100%; padding: 8px 6px; }
  .hero-search .btn { width: 100%; }

  /* دکمه‌های صفحه‌بندی: هدف لمسی ≥۴۴px */
  .page-link { min-width: 44px; height: 44px; }

  /* عنوان صفحه‌ها کمی کوچک‌تر */
  .page-header h1 { font-size: var(--fs-2xl); }

  /* کارت‌ها: padding بدنه کمی بیشتر برای خوانایی بهتر */
  .course-body { padding: var(--s-4) var(--s-4) var(--s-4); }

  /* فاصله‌ی بخش‌ها روی موبایل */
  .section { padding-top: var(--s-8); padding-bottom: var(--s-8); }
}

@media (max-width: 380px) {
  /* صفحه‌های خیلی کوچک: عنوان هرو کوچک‌تر */
  .hero-minimal-title { font-size: 1.6rem; }
  .container { padding-right: 14px; padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-backdrop,
  .nav-toggle-bar {
    transition: none !important;
  }
}


/* ==========================================================================
   Toast Notifications + Form Loading States (UX improvements)
   ========================================================================== */

/* ---- Toast container ---- */
.toast-container {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - 40px);
}

/* ---- Toast ---- */
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--stroke, rgba(0,0,0,0.08));
  box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  color: var(--ink, #1a1a1a);
  font-size: 0.88rem;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .25s ease, transform .25s ease;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .toast {
  background: #161b22;
  border-color: rgba(255,255,255,0.12);
  color: #e6edf3;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.toast.is-visible { opacity: 1; transform: translateX(0); }
.toast.is-hiding  { opacity: 0; transform: translateX(-30px); }

.toast-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  margin-top: 1px;
}
.toast-icon svg { width: 14px; height: 14px; }

.toast-body { flex: 1; min-width: 0; line-height: 1.55; }
.toast-title { font-weight: 700; margin-bottom: 2px; font-size: 0.92rem; }
.toast-msg { color: var(--muted, #6b7280); font-size: 0.82rem; font-weight: 400; }
[data-theme="dark"] .toast-msg { color: #9aa4b2; }

.toast-close {
  background: transparent;
  border: none;
  color: var(--muted, #6b7280);
  cursor: pointer;
  padding: 2px 6px;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.toast-close:hover { color: currentColor; background: rgba(0,0,0,0.06); }
[data-theme="dark"] .toast-close:hover { background: rgba(255,255,255,0.08); }

/* Toast variants */
.toast--success .toast-icon { background: rgba(34,197,94,.18); color: #16a34a; }
.toast--success { border-right: 3px solid #16a34a; }
[data-theme="dark"] .toast--success .toast-icon { color: #4ade80; }
[data-theme="dark"] .toast--success { border-right-color: #4ade80; }

.toast--error   .toast-icon { background: rgba(239,68,68,.18); color: #dc2626; }
.toast--error   { border-right: 3px solid #dc2626; }
[data-theme="dark"] .toast--error .toast-icon { color: #f87171; }
[data-theme="dark"] .toast--error { border-right-color: #f87171; }

.toast--info    .toast-icon { background: rgba(59,130,246,.18); color: #2563eb; }
.toast--info    { border-right: 3px solid #2563eb; }
[data-theme="dark"] .toast--info .toast-icon { color: #60a5fa; }
[data-theme="dark"] .toast--info { border-right-color: #60a5fa; }

.toast--warning .toast-icon { background: rgba(245,158,11,.18); color: #d97706; }
.toast--warning { border-right: 3px solid #d97706; }
[data-theme="dark"] .toast--warning .toast-icon { color: #fbbf24; }
[data-theme="dark"] .toast--warning { border-right-color: #fbbf24; }

/* Toast progress bar */
.toast-progress {
  position: absolute;
  bottom: 0; right: 0;
  height: 3px;
  background: rgba(0,0,0,0.15);
  width: 100%;
  transform-origin: right;
  animation: toast-progress-shrink linear forwards;
}
[data-theme="dark"] .toast-progress { background: rgba(255,255,255,0.18); }
.toast--success .toast-progress { background: rgba(34,197,94,.4); }
.toast--error   .toast-progress { background: rgba(239,68,68,.4); }
.toast--info    .toast-progress { background: rgba(59,130,246,.4); }
.toast--warning .toast-progress { background: rgba(245,158,11,.4); }
@keyframes toast-progress-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- Form loading state ---- */
form.is-submitting button[type="submit"] {
  pointer-events: none;
  opacity: 0.75;
}
form.is-submitting button[type="submit"] .btn-spinner {
  display: inline-block !important;
}
form.is-submitting button[type="submit"] .btn-label-text {
  opacity: 0.7;
}

.btn-spinner {
  display: none;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---- Submit button loading state (login pages) ---- */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.8;
  position: relative;
}
.btn.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}

/* ---- Input error state ---- */
.input-error, input.input-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important;
}