/* ═══════════════════════════════════════════════════════════════════════════
   VigilForge Design System — main.css
   Complete semantic token system. Tailwind CDN handles utilities.
   Theme: dark (flagship) | light (premium) | system (auto)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Brand Primitives ────────────────────────────────────────────────────
   Raw brand palette. Never use directly in components — go through tokens.   */
:root {
  --vf-electric-blue:  #22B5FF;
  --vf-cyber-green:    #8BFF1A;
  --vf-deep-space:     #050816;
  --vf-dark-surface:   #0E1628;
  --vf-elevated:       #162238;
  --vf-light-surface:  #F5F8FC;
  --vf-neutral:        #94A3B8;
  --vf-white:          #FFFFFF;
  --vf-danger:         #EF4444;
  --vf-warning:        #F59E0B;
  --vf-purple:         #A855F7;

  /* Typography */
  --font:      'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Border radii */
  --r-sm:  0.5rem;
  --r-md:  0.75rem;
  --r-lg:  1rem;
  --r-xl:  1.25rem;
  --r-2xl: 1.5rem;
}

/* ── 1. Dark Mode Tokens (default / flagship) ───────────────────────────── */
:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-base:     #050816;
  --bg-surface:  #0E1628;
  --bg-card:     #162238;
  --bg-elevated: #1A2A44;
  --bg-overlay:  rgba(5,8,22,0.96);
  --bg-input:    rgba(5,8,22,0.8);
  --bg-glass:    rgba(14,22,40,0.85);

  /* Borders */
  --border:         rgba(255,255,255,0.08);
  --border-emphasis: rgba(34,181,255,0.28);
  --border-success:  rgba(139,255,26,0.28);
  --border-warning:  rgba(245,158,11,0.28);
  --border-danger:   rgba(239,68,68,0.28);

  /* Text */
  --text-primary:   #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted:     #7B8CA6; /* was #475569 — failed WCAG AA (2.1-2.6:1); this hits 4.6-5.8:1 */
  --text-inverted:  #050816;

  /* Primary — Electric Blue */
  --color-primary:       #22B5FF;
  --color-primary-hover: #5ACAFF;
  --color-primary-muted: rgba(34,181,255,0.1);
  --color-primary-border:rgba(34,181,255,0.3);
  --color-primary-text:  #22B5FF;

  /* Success — Cyber Green */
  --color-success:       #8BFF1A;
  --color-success-hover: #A3FF4D;
  --color-success-muted: rgba(139,255,26,0.1);
  --color-success-border:rgba(139,255,26,0.3);
  --color-success-text:  #8BFF1A;
  --color-success-dim:   #6ee7b7;  /* softer green for body text */

  /* Warning */
  --color-warning:       #F59E0B;
  --color-warning-muted: rgba(245,158,11,0.1);
  --color-warning-border:rgba(245,158,11,0.3);
  --color-warning-text:  #FCD34D;

  /* Danger */
  --color-danger:        #EF4444;
  --color-danger-muted:  rgba(239,68,68,0.1);
  --color-danger-border: rgba(239,68,68,0.3);
  --color-danger-text:   #FCA5A5;

  /* Purple (Knowledge Graph accent) */
  --color-purple:        #A855F7;
  --color-purple-muted:  rgba(168,85,247,0.1);
  --color-purple-border: rgba(168,85,247,0.3);

  /* Orange (resource-type badges, CTF accent) */
  --color-orange:        #FB923C;
  --color-orange-muted:  rgba(251,146,60,0.1);
  --color-orange-border: rgba(251,146,60,0.3);
  --color-orange-text:   #FDBA74;

  /* Shadows & Glows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.7);
  --glow-primary: 0 0 20px rgba(34,181,255,0.28), 0 0 60px rgba(34,181,255,0.07);
  --glow-success: 0 0 20px rgba(139,255,26,0.28), 0 0 60px rgba(139,255,26,0.07);
  --glow-warning: 0 0 20px rgba(245,158,11,0.28), 0 0 60px rgba(245,158,11,0.07);

  /* Navigation */
  --nav-bg:           rgba(5,8,22,0.88);
  --nav-bg-scroll:    rgba(5,8,22,0.97);
  --nav-border:       rgba(34,181,255,0.1);
  --nav-border-scroll:rgba(34,181,255,0.15);
  --nav-link:         #6B7280;
  --nav-link-hover:   var(--color-primary);
  --dropdown-bg:      rgba(8,12,28,0.98);
  --dropdown-border:  rgba(34,181,255,0.15);
  --dropdown-shadow:  0 16px 48px rgba(0,0,0,0.6), 0 0 24px rgba(34,181,255,0.06);

  /* Grid overlay */
  --grid-color: rgba(34,181,255,0.022);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(34,181,255,0.25);

  /* Scrollbar */
  --scrollbar-thumb: rgba(34,181,255,0.22);
  --scrollbar-hover: rgba(34,181,255,0.42);

  /* Selection */
  --selection-bg: rgba(34,181,255,0.2);

  /* Terminal (always dark, same in both themes) */
  --term-bg:         #050816;
  --term-header-bg:  #0D1520;
  --term-body-bg:    #030812;
  --term-status-bg:  #070C14;
  --term-primary:    #22B5FF;
  --term-success:    #8BFF1A;
  --term-danger:     #EF4444;
  --term-muted:      #374151;
  --term-muted-dim:  #4B5563;
  --term-border:     rgba(34,181,255,0.2);
  --term-border-dim: rgba(34,181,255,0.12);

  /* Ambient orbs — visible in dark mode */
  --orb-1: rgba(34,181,255,0.06);
  --orb-2: rgba(168,85,247,0.05);
  --orb-3: rgba(139,255,26,0.04);

  /* Legacy aliases (keep graph.css & old template refs working) */
  --bg-primary:    var(--bg-base);
  --accent-cyan:   var(--color-primary);
  --accent-green:  var(--color-success);
  --accent-red:    var(--color-danger);
  --accent-amber:  var(--color-warning);
  --accent-purple: var(--color-purple);
}

/* ── 2. Light Mode Tokens ────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-base:     #F5F8FC;
  --bg-surface:  #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-elevated: #EEF2F7;
  --bg-overlay:  rgba(255,255,255,0.97);
  --bg-input:    #FFFFFF;
  --bg-glass:    rgba(255,255,255,0.9);

  /* Borders */
  --border:          #E2E8F0;
  --border-emphasis: rgba(0,140,220,0.35);
  --border-success:  rgba(22,163,74,0.35);
  --border-warning:  rgba(217,119,6,0.35);
  --border-danger:   rgba(220,38,38,0.35);

  /* Text */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #5B6B82; /* was #94A3B8 — failed WCAG AA (2.4:1); this hits 4.8-5.1:1 */
  --text-inverted:  #FFFFFF;

  /* Primary — accessible Electric Blue on white */
  --color-primary:       #0084D4;
  --color-primary-hover: #006BB0;
  --color-primary-muted: rgba(0,132,212,0.08);
  --color-primary-border:rgba(0,132,212,0.3);
  --color-primary-text:  #0068AA;

  /* Success — accessible green */
  --color-success:       #16A34A;
  --color-success-hover: #15803D;
  --color-success-muted: rgba(22,163,74,0.08);
  --color-success-border:rgba(22,163,74,0.3);
  --color-success-text:  #15803D;
  --color-success-dim:   #166534;

  /* Warning */
  --color-warning:       #D97706;
  --color-warning-muted: rgba(217,119,6,0.08);
  --color-warning-border:rgba(217,119,6,0.3);
  --color-warning-text:  #92400E;

  /* Danger */
  --color-danger:        #DC2626;
  --color-danger-muted:  rgba(220,38,38,0.08);
  --color-danger-border: rgba(220,38,38,0.3);
  --color-danger-text:   #991B1B;

  /* Purple */
  --color-purple:        #7C3AED;
  --color-purple-muted:  rgba(124,58,237,0.08);
  --color-purple-border: rgba(124,58,237,0.3);

  /* Orange (resource-type badges, CTF accent) */
  --color-orange:        #C2410C;
  --color-orange-muted:  rgba(194,65,12,0.08);
  --color-orange-border: rgba(194,65,12,0.3);
  --color-orange-text:   #9A3412;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.1);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.15);
  --glow-primary: 0 2px 8px rgba(0,132,212,0.2);
  --glow-success: 0 2px 8px rgba(22,163,74,0.2);
  --glow-warning: 0 2px 8px rgba(217,119,6,0.2);

  /* Navigation */
  --nav-bg:           rgba(255,255,255,0.92);
  --nav-bg-scroll:    rgba(255,255,255,0.98);
  --nav-border:       rgba(0,0,0,0.08);
  --nav-border-scroll:rgba(0,0,0,0.1);
  --nav-link:         #6B7280;
  --nav-link-hover:   var(--color-primary);
  --dropdown-bg:      #FFFFFF;
  --dropdown-border:  #E2E8F0;
  --dropdown-shadow:  0 16px 48px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

  /* Grid overlay — off in light mode */
  --grid-color: transparent;

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(0,132,212,0.2);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0,132,212,0.2);
  --scrollbar-hover: rgba(0,132,212,0.4);

  /* Selection */
  --selection-bg: rgba(0,132,212,0.15);

  /* Terminal always dark */
  --term-bg:         #050816;
  --term-header-bg:  #0D1520;
  --term-body-bg:    #030812;
  --term-status-bg:  #070C14;
  --term-primary:    #22B5FF;
  --term-success:    #8BFF1A;
  --term-danger:     #EF4444;
  --term-muted:      #374151;
  --term-muted-dim:  #4B5563;
  --term-border:     rgba(34,181,255,0.2);
  --term-border-dim: rgba(34,181,255,0.12);

  /* Ambient orbs — off in light mode */
  --orb-1: transparent;
  --orb-2: transparent;
  --orb-3: transparent;

  /* Legacy aliases */
  --bg-primary:    var(--bg-base);
  --accent-cyan:   var(--color-primary);
  --accent-green:  var(--color-success);
  --accent-red:    var(--color-danger);
  --accent-amber:  var(--color-warning);
  --accent-purple: var(--color-purple);
}

/* ── 3. Base Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background-color: var(--bg-base);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

h1 { font-size: 2rem;    font-weight: 700; }
h2 { font-size: 1.5rem;  font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1rem;    font-weight: 600; }
code, pre { font-family: var(--font-mono); }

/* Scrollbar */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb        { background: var(--scrollbar-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover  { background: var(--scrollbar-hover); }
::selection                      { background: var(--selection-bg); color: var(--text-primary); }
*:focus-visible                  { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── 4. Ambient Backgrounds (dark mode only) ────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.3s ease;
}

.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.glow-orb-1 {
  width: 520px; height: 520px;
  top: -180px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--orb-1) 0%, transparent 70%);
  animation: floatOrb1 9s ease-in-out infinite;
}
.glow-orb-2 {
  width: 360px; height: 360px;
  bottom: 20%; right: -120px;
  background: radial-gradient(circle, var(--orb-2) 0%, transparent 70%);
  animation: floatOrb2 11s ease-in-out 2s infinite;
}
.glow-orb-3 {
  width: 300px; height: 300px;
  top: 45%; left: -100px;
  background: radial-gradient(circle, var(--orb-3) 0%, transparent 70%);
  animation: floatOrb3 8s ease-in-out 4s infinite;
}

/* Scanline removed — replaced with clean professional design */

/* ── 5. Glass Surfaces ──────────────────────────────────────────────────── */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}
.glass-strong {
  background: var(--bg-overlay);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--border-emphasis);
}
.surface { background: var(--bg-surface);  border: 1px solid var(--border); border-radius: var(--r-lg); }
.card    { background: var(--bg-card);     border: 1px solid var(--border); border-radius: var(--r-lg); }

/* Light-mode card elevation */
[data-theme="light"] .card    { box-shadow: var(--shadow-sm); }
[data-theme="light"] .surface { box-shadow: var(--shadow-sm); }

/* ── 5b. Brand Wordmark ─────────────────────────────────────────────────── */
.brand-vigil {
  color: #FFFFFF;
  font-family: var(--font-display, var(--font-mono));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.brand-forge {
  color: var(--vf-cyber-green);
  font-family: var(--font-display, var(--font-mono));
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-theme="light"] .brand-vigil { color: #0F172A; }
[data-theme="light"] .brand-forge { color: var(--color-success-text); }

.brand-tagline {
  font-size: 0.6rem;
  font-family: var(--font-display, var(--font-mono));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(34,181,255,0.45);
}
[data-theme="light"] .brand-tagline { color: rgba(0,132,212,0.5); }

/* ── 6. Typography Helpers ──────────────────────────────────────────────── */
.grad-text {
  background: linear-gradient(135deg, var(--color-primary), var(--color-success));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.shimmer-text {
  background: linear-gradient(90deg,
    var(--color-primary) 0%, var(--color-success) 30%,
    var(--color-purple) 50%, var(--color-success) 70%, var(--color-primary) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: shimmer 4s linear infinite;
}
.brand-blue  { color: var(--color-primary); }
.brand-green { color: var(--color-success); }

/* Legacy neon helpers — now properly themed */
/* Softened from 16px/0.5 — that halo sat around inline emphasis text on every
   read, which adds up over a full lesson. Color still reads as "neon". */
.neon-cyan   { color: var(--color-primary);  text-shadow: 0 0 6px rgba(34,181,255,0.22); }
.neon-green  { color: var(--color-success);  text-shadow: 0 0 6px rgba(139,255,26,0.22); }
.neon-amber  { color: var(--color-warning);  text-shadow: 0 0 6px rgba(245,158,11,0.22); }
.neon-purple { color: var(--color-purple);   text-shadow: 0 0 6px rgba(168,85,247,0.22); }
.cursor-blink { animation: blink 1s step-end infinite; }

[data-theme="light"] .neon-cyan,
[data-theme="light"] .neon-green,
[data-theme="light"] .neon-amber,
[data-theme="light"] .neon-purple { text-shadow: none; }

/* ── 7. Badges ──────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 700;
  padding: .2rem .65rem;
  border-radius: 9999px;
  text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid;
}
.badge-beginner     { color: var(--color-primary); background: var(--color-primary-muted); border-color: var(--color-primary-border); }
.badge-intermediate { color: var(--color-success); background: var(--color-success-muted); border-color: var(--color-success-border); }
.badge-advanced     { color: var(--color-warning); background: var(--color-warning-muted); border-color: var(--color-warning-border); }
.badge-expert       { color: var(--color-purple);  background: var(--color-purple-muted);  border-color: var(--color-purple-border); }
.badge-easy         { color: var(--color-success); background: var(--color-success-muted); border-color: var(--color-success-border); }
.badge-medium       { color: var(--color-warning); background: var(--color-warning-muted); border-color: var(--color-warning-border); }
.badge-hard         { color: var(--color-danger);  background: var(--color-danger-muted);  border-color: var(--color-danger-border); }
.badge-enrolled     { color: var(--color-primary); background: var(--color-primary-muted); border-color: var(--color-primary-border); }

/* ── 8. Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: linear-gradient(135deg, var(--vf-electric-blue), #0095D4);
  color: #050816; font-weight: 700; font-size: .9rem;
  padding: .75rem 1.75rem; border-radius: var(--r-md);
  border: none; cursor: pointer; text-decoration: none;
  transition: all .2s ease;
  box-shadow: 0 4px 20px rgba(34,181,255,0.25);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34,181,255,0.38);
  filter: brightness(1.06); color: #050816;
}
[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, #22B5FF, #0084D4);
  color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0,132,212,0.3);
}
[data-theme="light"] .btn-primary:hover { color: #FFFFFF; box-shadow: 0 8px 24px rgba(0,132,212,0.4); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,0.04); color: var(--text-primary);
  font-weight: 600; font-size: .9rem;
  padding: .75rem 1.75rem; border-radius: var(--r-md);
  border: 1px solid var(--border); cursor: pointer; text-decoration: none;
  transition: all .2s ease;
}
.btn-secondary:hover {
  background: rgba(34,181,255,0.06);
  border-color: var(--color-primary-border);
  color: var(--color-primary); transform: translateY(-2px);
}
[data-theme="light"] .btn-secondary { background: #FFFFFF; }
[data-theme="light"] .btn-secondary:hover { background: var(--color-primary-muted); }

/* Destructive-action button (e.g. "Disable MFA") — auth pages previously
   used raw Tailwind bg-red-700/hover:bg-red-600, unrelated to --color-danger. */
.btn-danger {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--color-danger); color: #FFFFFF;
  font-weight: 700; font-size: .9rem;
  padding: .75rem 1.75rem; border-radius: var(--r-md);
  border: none; cursor: pointer; text-decoration: none;
  transition: all .2s ease;
}
.btn-danger:hover { filter: brightness(1.1); transform: translateY(-2px); }

.btn-complete {
  width: 100%; padding: .625rem 1rem; border-radius: var(--r-md);
  font-size: .85rem; font-weight: 600; cursor: pointer;
  background: var(--color-success-muted);
  border: 1px solid var(--color-success-border);
  color: var(--color-success); transition: all .2s;
}
.btn-complete:hover  { background: rgba(139,255,26,0.18); box-shadow: 0 0 18px rgba(139,255,26,0.18); }
.btn-complete:disabled { opacity: .4; cursor: default; pointer-events: none; }

[data-theme="light"] .btn-complete { color: var(--color-success-text); }
[data-theme="light"] .btn-complete:hover { box-shadow: 0 2px 8px rgba(22,163,74,0.2); }

/* ── 9. Input Fields ────────────────────────────────────────────────────── */
.input-field {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--r-md);
  padding: .625rem .875rem;
  font-size: .875rem;
  font-family: var(--font);
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input-field::placeholder { color: var(--text-muted); }
.input-field:focus {
  border-color: var(--color-primary-border);
  box-shadow: var(--focus-ring);
}

/* ── 10. Navigation Bar ─────────────────────────────────────────────────── */
.nav-bg { background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); }
.nav-bg.scrolled { background: var(--nav-bg-scroll); border-bottom-color: var(--nav-border-scroll); }

.nav-link {
  position: relative; font-size: .875rem; font-weight: 500;
  color: var(--nav-link); transition: color .2s; text-decoration: none;
}
.nav-link:hover { color: var(--nav-link-hover); }
.nav-link.active { color: var(--color-primary); }
.nav-link.active::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; right: 0; height: 1px;
  background: var(--color-primary);
  box-shadow: 0 0 6px rgba(34,181,255,0.6);
}

/* Nav-item hover overlay — replaces the Tailwind `hover:bg-white/5` used
   throughout navbar.html, which had no light-theme equivalent (a 5% white
   tint is invisible on a light background, so nav/dropdown items had no
   visible hover feedback at all in light theme). */
.nav-item-hover:hover { background: rgba(255,255,255,0.05); }
[data-theme="light"] .nav-item-hover:hover { background: var(--color-primary-muted); }
.nav-item-hover-danger:hover { background: var(--color-danger-muted); }

/* Same problem as .nav-item-hover but for a persistent (non-hover) "this is
   the current page" background in the Lessons dropdown. */
.nav-item-active-bg { background: rgba(255,255,255,0.05); }
[data-theme="light"] .nav-item-active-bg { background: var(--color-primary-muted); }

/* Footer section-heading micro-labels — same dark-theme-only rgba() pattern,
   used inline in footer.html with no light-theme equivalent. */
.footer-heading-primary { color: rgba(34,181,255,0.5); font-family: var(--font-mono); }
[data-theme="light"] .footer-heading-primary { color: rgba(0,132,212,0.5); }
.footer-heading-success { color: rgba(139,255,26,0.5); font-family: var(--font-mono); }
[data-theme="light"] .footer-heading-success { color: rgba(22,163,74,0.5); }

/* Footer link hover — was onmouseover/onmouseout inline handlers, which
   production's CSP (script-src 'self', no 'unsafe-inline') silently blocks;
   these links currently have zero hover feedback in production. */
.footer-link { color: var(--text-muted); }
.footer-link:hover { color: var(--text-primary); }

/* Dashboard "My Roadmaps" card hover — was onmouseover/onmouseout inline
   (blocked by production CSP, same class of bug as the footer links). */
.dashboard-roadmap-card:hover {
  border-color: rgba(34,181,255,0.2);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 16px rgba(34,181,255,0.06);
}

/* Filter chip (resource library category filters) — was Tailwind fixed
   bg-cyan-600/border-cyan-600/text-cyan-300, which don't match the brand
   blue (#22B5FF / #0084D4) in either theme. */
.filter-chip {
  background: var(--bg-card); border-color: var(--border); color: var(--text-secondary);
}
.filter-chip:hover { border-color: var(--color-primary-border); color: var(--color-primary-text); }
.filter-chip.active {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--text-inverted);
}
[data-theme="light"] .filter-chip.active { color: #FFFFFF; }

/* Small numbered lesson-preview dot (roadmap card footer) — same invisible-
   in-light-theme translucent-white pattern as .nav-item-hover. */
.lesson-dot { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--text-muted); }
[data-theme="light"] .lesson-dot { background: var(--bg-elevated); border-color: var(--border); }

/* Lesson sidebar "back to roadmap" link — was onmouseover/onmouseout inline
   (blocked by production CSP, same as the footer links) plus the stale
   pre-rebrand cyan (0,212,255 instead of 34,181,255). */
.sidebar-back-link { color: rgba(34,181,255,.7); }
[data-theme="light"] .sidebar-back-link { color: rgba(0,132,212,.7); }
.sidebar-back-link:hover { color: var(--color-primary); }

/* Sidebar quiz-link card — same inline onmouseover/onmouseout problem,
   plus a dark-theme-only purple (--color-purple's hex differs per theme). */
.quiz-sidebar-link {
  background: rgba(168,85,247,.06); border: 1px solid rgba(168,85,247,.2);
  transition: border-color .2s, box-shadow .2s;
}
.quiz-sidebar-link:hover { border-color: rgba(168,85,247,.4); box-shadow: 0 0 20px rgba(168,85,247,.1); }
[data-theme="light"] .quiz-sidebar-link { background: var(--color-purple-muted); border-color: var(--color-purple-border); }
[data-theme="light"] .quiz-sidebar-link:hover { border-color: var(--color-purple); box-shadow: 0 0 12px rgba(124,58,237,.15); }

.quiz-sidebar-label { color: rgba(168,85,247,.8); }
[data-theme="light"] .quiz-sidebar-label { color: var(--color-purple); }

/* Dropdown menu */
.nav-dropdown {
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  box-shadow: var(--dropdown-shadow);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Hover-dropdown grace period — JS (navbar.html) adds/removes .force-open
   with a short delay on mouseleave so a diagonal mouse path crossing the
   corner between a trigger and its (wider) panel doesn't close it early. */
.hover-menu.force-open .nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Theme switcher button */
.theme-switcher {
  display: flex; align-items: center;
  background: var(--color-primary-muted);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  font-size: .75rem; transition: all .15s;
}
.theme-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.theme-btn.active { background: var(--color-primary); color: var(--text-inverted); }
[data-theme="light"] .theme-btn.active { color: #050816; }

/* Text-size switcher — same recipe as .theme-switcher/.theme-btn, kept as its
   own class so the markup stays legible as a distinct control. */
.text-scale-switcher {
  display: flex; align-items: center;
  background: var(--color-primary-muted);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
}
.text-scale-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: none;
  color: var(--text-muted); cursor: pointer;
  font-family: var(--font); font-weight: 700; line-height: 1;
  transition: all .15s;
}
.text-scale-btn:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.text-scale-btn.active { background: var(--color-primary); color: var(--text-inverted); }
[data-theme="light"] .text-scale-btn.active { color: #050816; }

/* Focus mode toggle button — standalone (2-state, not a group like the two above) */
.focus-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--color-primary-muted);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--r-md);
  color: var(--text-muted); cursor: pointer;
  transition: all .15s; flex-shrink: 0;
}
.focus-toggle-btn:hover { color: var(--text-primary); }
.focus-toggle-btn.active { background: var(--color-primary); color: var(--text-inverted); }
[data-theme="light"] .focus-toggle-btn.active { color: #050816; }

/* Focus mode — dims chrome that isn't the content you're reading. Dims
   immediately and unconditionally: an earlier version restored full opacity
   on hover/focus, but a real click leaves the cursor sitting on the toggle
   button, so the "restore" exception fired instantly and the effect looked
   like it did nothing. 45% opacity keeps nav links legible/clickable, so
   there's no accessibility need for the exception either. */
body.focus-mode #main-nav {
  opacity: .45;
  transition: opacity var(--duration-base, .2s) var(--ease-standard, ease);
}
body.focus-mode .glow-orb { opacity: .35; }

/* XP badge — the progress line replaces the old full-width .xp-bar-strip
   (deleted from base.html); same underlying XP/level values, just rendered
   as a 2px fill clipped to the badge's own rounded corners. */
.xp-badge {
  /* display intentionally NOT set here — controlled by the template's
     Tailwind classes (hidden sm:flex). main.css loads after
     tailwind-built.css, so a display rule here would win the cascade at
     equal specificity and silently defeat the responsive hide/show. */
  position: relative; overflow: hidden;
  align-items: center; gap: 6px;
  border-radius: var(--r-lg); padding: .375rem .75rem;
  background: var(--color-primary-muted);
  border: 1px solid var(--color-primary-border);
  cursor: pointer; transition: all .2s;
}
.xp-badge:hover { transform: scale(1.04); box-shadow: var(--glow-primary); }
.xp-badge-level {
  width: 24px; height: 24px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; font-family: var(--font-mono);
  background: linear-gradient(135deg, var(--vf-electric-blue), var(--vf-cyber-green));
  color: #050816;
}
.xp-badge-xp { font-size: .75rem; font-weight: 700; font-family: var(--font-mono); color: var(--color-primary); }
.xp-badge-label { font-size: .65rem; color: rgba(34,181,255,0.55); }
[data-theme="light"] .xp-badge-label { color: rgba(0,132,212,0.55); }

.xp-badge-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,0.08);
}
[data-theme="light"] .xp-badge-progress { background: rgba(0,0,0,0.06); }
.xp-badge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  box-shadow: 0 0 6px rgba(34,181,255,0.35);
}
[data-theme="light"] .xp-badge-progress-fill { box-shadow: none; }

/* Same dim-primary-tint treatment as .xp-badge-label, for the dropdown's XP
   figure — was hardcoded dark-theme-only rgba() inline in navbar.html. */
.xp-dim-text { color: rgba(34,181,255,0.55); }
[data-theme="light"] .xp-dim-text { color: rgba(0,132,212,0.55); }

/* User avatar */
.user-avatar {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; font-family: var(--font-mono);
  background: linear-gradient(135deg, var(--color-primary-muted), var(--color-purple-muted));
  border: 1px solid var(--color-primary-border);
  color: var(--color-primary); overflow: hidden;
}

/* ── 11. Navbar — icon buttons, settings popover, overflow "More" ────────── */

/* Guide / settings gear — same 20px icon-button recipe, square hit target */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-md);
  color: var(--text-muted); cursor: pointer; transition: all .15s;
}
.icon-btn:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
[data-theme="light"] .icon-btn:hover { background: var(--color-primary-muted); }

.settings-popover-wrap { position: relative; }
.settings-popover {
  display: none; flex-direction: column; gap: .875rem;
  position: absolute; right: 0; top: 42px; width: 236px;
  padding: .875rem; border-radius: var(--r-lg); z-index: 50;
}
.settings-popover.open { display: flex; }
.settings-section-title {
  font-size: .65rem; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted); margin-bottom: .375rem;
}
.settings-section-row { display: flex; align-items: center; justify-content: space-between; }
.settings-section-row .settings-section-title { margin-bottom: 0; }

/* Overflow "More" — mirrors each center-nav pill; nav-overflow.js toggles
   .is-overflowed on pills and [hidden] on the matching dropdown entry once
   the row no longer fits (priority+ pattern). */
.nav-pill.is-overflowed { display: none; }
.nav-more-dropdown { display: none; }
.nav-more-dropdown.open { display: block; }
/* The entries use Tailwind's `flex` utility for internal layout, which
   otherwise wins the display cascade over the browser default [hidden]
   style (same specificity, but [hidden] is user-agent-origin so any
   author rule of equal specificity beats it) — force it back off. */
.nav-more-dropdown [hidden] { display: none !important; }

/* ── 12. Stat Card ──────────────────────────────────────────────────────── */
.stat-card {
  text-align: center; padding: 1rem 1.5rem;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
}
[data-theme="light"] .stat-card { background: var(--bg-surface); box-shadow: var(--shadow-sm); }

/* ── 13. Progress Bar ───────────────────────────────────────────────────── */
.progress-bar-track {
  height: 5px; background: rgba(255,255,255,0.06);
  border-radius: 9999px; overflow: hidden;
}
[data-theme="light"] .progress-bar-track { background: #E2E8F0; }
.progress-bar-fill {
  height: 100%; border-radius: 9999px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-success));
  box-shadow: 0 0 8px rgba(34,181,255,0.4);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] .progress-bar-fill { box-shadow: none; }

/* ── 14. SVG Progress Ring ──────────────────────────────────────────────── */
.ring-wrap {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.ring-svg   { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--border); stroke-width: 4; }
.ring-fill  {
  fill: none; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 157; stroke-dashoffset: 157;
  transition: stroke-dashoffset 1s ease;
  stroke: var(--color-primary);
}
.ring-fill.green  { stroke: var(--color-success); }
.ring-fill.amber  { stroke: var(--color-warning); }
.ring-text {
  position: absolute;
  font-size: .6rem; font-weight: 700;
  font-family: var(--font-mono); color: var(--color-primary);
  line-height: 1; text-align: center; pointer-events: none;
}

/* ── 15. Theme/Roadmap Cards ────────────────────────────────────────────── */
.themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}
.theme-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
  cursor: pointer; overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.theme-card::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at 20% 10%, rgba(34,181,255,0.06) 0%, transparent 65%);
  pointer-events: none; transition: opacity .3s ease;
}
.theme-card:hover { transform: translateY(-4px); }
.theme-card:hover::before { opacity: 1; }
.theme-card.diff-beginner:hover     { border-color: var(--color-primary-border); box-shadow: var(--glow-primary), var(--shadow-lg); }
.theme-card.diff-intermediate:hover { border-color: var(--color-success-border); box-shadow: var(--glow-success), var(--shadow-lg); }
.theme-card.diff-advanced:hover     { border-color: var(--color-warning-border); box-shadow: var(--glow-warning), var(--shadow-lg); }

[data-theme="light"] .theme-card { box-shadow: var(--shadow-sm); }
[data-theme="light"] .theme-card:hover { box-shadow: var(--shadow-md) !important; }

.theme-card-top    { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.theme-card-icon   {
  width: 3rem; height: 3rem; flex-shrink: 0;
  border-radius: var(--r-md); font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary-muted); border: 1px solid var(--color-primary-border);
}
.theme-card-info   { flex: 1; min-width: 0; }
.theme-card-name   { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-bottom: .25rem; }
.theme-card-desc   { font-size: .8rem; color: var(--text-secondary); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.theme-card-meta   { display: flex; align-items: center; gap: .875rem; font-size: .75rem; color: var(--text-muted); flex-wrap: wrap; }
.theme-card-meta span { display: flex; align-items: center; gap: .25rem; }
.theme-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

/* Phase section headers */
.phase-section  { margin-bottom: 3rem; }
.phase-header   {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem; padding-bottom: .875rem;
  border-bottom: 1px solid var(--border);
}
.phase-label {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; padding: .25rem .75rem; border-radius: 9999px;
}
.phase-label.beginner     { color: var(--color-primary); background: var(--color-primary-muted); border: 1px solid var(--color-primary-border); }
.phase-label.intermediate { color: var(--color-success); background: var(--color-success-muted); border: 1px solid var(--color-success-border); }
.phase-label.advanced     { color: var(--color-warning); background: var(--color-warning-muted); border: 1px solid var(--color-warning-border); }

/* ── 16. Lesson Sidebar ─────────────────────────────────────────────────── */
.lesson-sidebar {
  position: sticky; top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto; scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}
.lesson-sidebar::-webkit-scrollbar       { width: 3px; }
.lesson-sidebar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 99px; }

.lesson-nav-item {
  display: flex; align-items: center; gap: .625rem;
  padding: .5rem .75rem; border-radius: var(--r-md);
  font-size: .8rem; text-decoration: none;
  color: var(--text-muted);
  border: 1px solid transparent;
  transition: all .2s ease;
}
.lesson-nav-item:hover { background: var(--color-primary-muted); color: var(--text-primary); }
.lesson-nav-item.active {
  background: var(--color-primary-muted);
  border-color: var(--color-primary-border);
  color: var(--color-primary);
  border-left: 2px solid var(--color-primary);
  padding-left: calc(.75rem - 1px);
}
.lesson-nav-item.done   { color: var(--color-success-text); }
.lesson-nav-item.locked { color: var(--text-muted); opacity: .5; pointer-events: none; }

.lesson-domain-group { border: 1px solid transparent; border-radius: var(--r-md); }
.lesson-domain-summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .6rem; border-radius: var(--r-md);
  font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text-secondary); cursor: pointer;
  transition: background .15s, color .15s;
}
/* Native <summary> markers vary too much across browsers to trust (Firefox's
   list-item marker in particular breaks the flex row below at narrow widths)
   — suppress every mechanism and drive our own .lesson-domain-chevron span
   instead, so alignment is consistent everywhere. */
.lesson-domain-summary { list-style: none; }
.lesson-domain-summary::marker { content: ""; display: none; }
.lesson-domain-summary::-webkit-details-marker { display: none; }
.lesson-domain-summary:hover { background: var(--color-primary-muted); color: var(--text-primary); }
.lesson-domain-group[open] > .lesson-domain-summary { color: var(--color-primary-text); }
.lesson-domain-chevron {
  flex-shrink: 0; font-size: .55rem; color: var(--text-muted);
  transition: transform .15s ease;
}
.lesson-domain-group[open] > .lesson-domain-summary .lesson-domain-chevron { transform: rotate(90deg); }
.lesson-domain-count {
  flex-shrink: 0; font-family: var(--font-mono); font-size: .65rem; font-weight: 600;
  color: var(--text-muted);
}

.lesson-status-icon { flex-shrink: 0; width: 1.1rem; text-align: center; font-size: .85rem; }
.lesson-nav-num {
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; font-family: var(--font-mono);
  flex-shrink: 0; background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  color: var(--text-muted); transition: all .2s;
}
.lesson-nav-item.active .lesson-nav-num {
  background: var(--color-primary-muted); border-color: var(--color-primary-border);
  color: var(--color-primary); box-shadow: 0 0 5px rgba(34,181,255,0.15);
}
.lesson-nav-item.done .lesson-nav-num {
  background: var(--color-success-muted); border-color: var(--color-success-border);
  color: var(--color-success-text);
}
[data-theme="light"] .lesson-nav-num { background: var(--bg-elevated); }

/* Mobile sidebar */
.sidebar-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; color: var(--text-muted); transition: all .2s; flex-shrink: 0;
}
.sidebar-toggle:hover { border-color: var(--color-primary-border); color: var(--color-primary); }

.sidebar-drawer {
  position: fixed; top: 0; left: -100%; width: 280px; height: 100vh;
  z-index: 200; background: var(--bg-surface); border-right: 1px solid var(--border);
  padding: 1rem; overflow-y: auto; transition: left .3s ease;
}
.sidebar-drawer.open { left: 0; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 199;
}
.sidebar-overlay.visible { display: block; }

@media (max-width: 768px) {
  .sidebar-toggle  { display: flex; }
  .sidebar-desktop { display: none !important; }
  .themes-grid     { grid-template-columns: 1fr; }
}

/* Resource preview panel (references page) — slides in from the right so an
   external resource can be previewed without navigating away from the site.
   Deliberately non-modal: no backdrop, so the rest of the page stays
   clickable and scrollable while the panel is open. */
.resource-preview-panel {
  position: fixed; top: 0; right: -100%; width: min(420px, 100vw); height: 100vh;
  z-index: var(--z-modal); background: var(--bg-surface); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transition: right .3s ease;
}
.resource-preview-panel.open { right: 0; }

.resource-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: 1.25rem 1.25rem 0;
}
.resource-preview-badge {
  font-size: .75rem; padding: .25rem .625rem; border-radius: var(--r-sm);
  background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary);
}
.resource-preview-close {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer; transition: all .15s;
}
.resource-preview-close:hover { color: var(--text-primary); border-color: var(--color-primary-border); }

.resource-preview-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.resource-preview-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin-bottom: .5rem; }
.resource-preview-meta { display: flex; gap: .75rem; font-size: .8rem; color: var(--text-muted); margin-bottom: 1rem; }
.resource-preview-description { color: var(--text-secondary); line-height: 1.6; }

.resource-preview-footer {
  padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .625rem;
}
.resource-preview-roadmap-link {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  width: 100%; padding: .625rem 1rem; border-radius: var(--r-md);
  background: transparent; border: 1px solid var(--color-primary-border);
  color: var(--color-primary-text); font-weight: 600; font-size: .875rem; text-decoration: none;
  transition: background .15s;
}
.resource-preview-roadmap-link:hover { background: var(--bg-elevated); }
.resource-preview-roadmap-link[hidden] { display: none; }
.resource-preview-open-btn {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  width: 100%; padding: .75rem 1rem; border-radius: var(--r-md);
  background: var(--color-primary); color: #fff; font-weight: 600; text-decoration: none;
  transition: opacity .15s;
}
.resource-preview-open-btn:hover { opacity: .9; }

/* ── 17. Breadcrumb ─────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; color: var(--text-muted);
  margin-bottom: 1.5rem; flex-wrap: wrap;
}
.breadcrumb a          { color: var(--text-muted); text-decoration: none; transition: color .15s; }
.breadcrumb a:hover    { color: var(--text-primary); }
.breadcrumb .sep       { color: var(--border); }
.breadcrumb .current   { color: var(--text-secondary); }

/* ── 18. Task Cards ─────────────────────────────────────────────────────── */
.task-card {
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--border);
  margin-bottom: .75rem;
  transition: border-color .25s, box-shadow .25s;
}
[data-theme="light"] .task-card { box-shadow: var(--shadow-sm); }
.task-card.active  { border-color: var(--color-primary-border); box-shadow: 0 0 14px rgba(34,181,255,0.035); }
.task-card.done    { background: rgba(139,255,26,0.02); border-color: var(--color-success-border); }
.task-card.locked  { opacity: .5; pointer-events: none; filter: grayscale(.3); }
.task-card.exercise-card {
  border-color: var(--color-warning-border);
  background: rgba(245,158,11,0.02);
}
.task-card.exercise-card.active {
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 24px rgba(245,158,11,0.06);
}
.task-card.exercise-card.locked { border-color: var(--color-warning-muted); }

.task-card.exercise-card::before {
  content: ''; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-warning), transparent);
}

.task-header {
  width: 100%; display: flex; align-items: center; gap: .875rem;
  padding: 1rem 1.25rem; cursor: pointer; text-align: left;
  background: none; border: none; color: inherit; transition: background .2s;
}
.task-header:hover { background: rgba(255,255,255,0.02); }
[data-theme="light"] .task-header:hover { background: var(--color-primary-muted); }

.task-num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; font-family: var(--font-mono);
  background: rgba(255,255,255,0.04); border: 1.5px solid var(--border);
  color: var(--text-muted); transition: all .3s;
}
[data-theme="light"] .task-num { background: var(--bg-elevated); }
.task-num.done {
  background: var(--color-success); border-color: var(--color-success);
  color: #050816; box-shadow: 0 0 10px rgba(139,255,26,0.35);
}
[data-theme="light"] .task-num.done { box-shadow: 0 2px 6px rgba(22,163,74,0.3); }
.task-num.exercise        { border-color: var(--color-warning); color: var(--color-warning); }
.task-num.exercise.done   {
  background: var(--color-warning); border-color: var(--color-warning);
  color: #050816; box-shadow: 0 0 10px rgba(245,158,11,0.35);
}

.task-label {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; font-family: var(--font-mono); flex-shrink: 0;
  color: rgba(34,181,255,0.6); transition: color .2s;
}
.task-card.done          .task-label { color: rgba(139,255,26,0.6); }
.task-card.exercise-card .task-label { color: rgba(245,158,11,0.7); }
.task-card.locked        .task-label { color: var(--text-muted); }

.task-title {
  font-weight: 600; font-size: .9rem; flex: 1;
  color: var(--text-primary); transition: color .2s;
}
.task-card.done .task-title { color: var(--color-success-dim); }

.task-chevron { transition: transform .25s ease; color: var(--text-muted); flex-shrink: 0; }
.task-chevron.open { transform: rotate(180deg); }

.task-body { border-top: 1px solid var(--border); display: none; }
.task-body.open { display: block; }

.exercise-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; padding: .2rem .6rem; border-radius: 4px;
  background: var(--color-warning-muted); border: 1px solid var(--color-warning-border);
  color: var(--color-warning); font-family: var(--font-mono);
}

/* ── 19. Task Dots ──────────────────────────────────────────────────────── */
.task-dots { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .5rem; }
.task-dot  {
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--text-muted);
  cursor: pointer; transition: all .3s ease;
}
.task-dot.done   { background: var(--color-success); border-color: var(--color-success); box-shadow: 0 0 6px rgba(139,255,26,0.4); }
.task-dot.active { background: var(--color-primary-muted); border-color: var(--color-primary); }
.task-dot.exercise-dot             { border-radius: 3px; border-color: var(--color-warning); }
.task-dot.exercise-dot.done        { background: var(--color-warning); box-shadow: 0 0 6px rgba(245,158,11,0.4); }
.task-dot.exercise-dot.active      { background: var(--color-warning-muted); }
[data-theme="light"] .task-dot.done { box-shadow: none; }
[data-theme="light"] .task-dot.active { box-shadow: none; }

/* ── 20. Sidebar Mini Task List ─────────────────────────────────────────── */
.mini-task {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0; cursor: pointer;
  font-size: .75rem; color: var(--text-muted); transition: color .15s;
}
.mini-task:hover { color: var(--text-primary); }
.mini-task.done  { color: var(--color-success-dim); }
.mini-dot {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--text-muted);
  display: flex; align-items: center; justify-content: center; transition: all .3s;
}
.mini-dot.done {
  background: var(--color-success); border-color: var(--color-success);
  box-shadow: 0 0 6px rgba(139,255,26,0.35);
}
[data-theme="light"] .mini-dot.done { box-shadow: none; }

/* ── 21. Quiz / Question Panel ──────────────────────────────────────────── */
.quiz-panel {
  margin: 0 1.25rem 1.25rem;
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border);
}
.quiz-panel-hd {
  background: var(--color-primary-muted);
  border-bottom: 1px solid var(--color-primary-border);
  padding: .625rem 1rem;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(34,181,255,0.7);
}
[data-theme="light"] .quiz-panel-hd { color: var(--color-primary-text); }

.quiz-q-wrap  { padding: 1rem 1.25rem; }
.quiz-q-text  { font-size: .875rem; color: var(--text-primary); margin-bottom: .875rem; line-height: 1.6; }
.quiz-row     { display: flex; gap: .5rem; align-items: stretch; }

.quiz-input {
  flex: 1;
  background: var(--bg-input); border: 1px solid var(--border);
  color: var(--text-primary); border-radius: var(--r-sm);
  padding: .5rem .875rem; font-size: .875rem;
  font-family: var(--font-mono); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.quiz-input::placeholder { color: var(--text-muted); }
.quiz-input:focus  { border-color: var(--color-primary-border); box-shadow: var(--focus-ring); }
.quiz-input.wrong  { border-color: var(--color-danger-border); animation: shake .4s ease; }
.quiz-input.correct{ border-color: var(--color-success-border); background: var(--color-success-muted); }
.quiz-input[readonly] {
  background: var(--color-success-muted); border-color: var(--color-success-border);
  color: var(--color-success-dim); cursor: default;
}

.btn-quiz-submit {
  background: var(--color-primary-muted); border: 1px solid var(--color-primary-border);
  color: var(--color-primary); padding: .5rem 1rem;
  border-radius: var(--r-sm); font-size: .85rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: all .2s;
}
.btn-quiz-submit:hover { background: rgba(34,181,255,0.18); box-shadow: 0 0 14px rgba(34,181,255,0.18); }

.quiz-feedback { display: flex; align-items: center; justify-content: space-between; margin-top: .5rem; }
.quiz-wrong    { font-size: .78rem; color: var(--color-danger);  display: flex; align-items: center; gap: .375rem; }
.quiz-correct  {
  font-size: .85rem; color: var(--color-success);
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; animation: pulseCorrect .5s ease;
}
[data-theme="light"] .quiz-correct { color: var(--color-success-text); }
.quiz-sep { height: 1px; background: var(--border); margin: .75rem 1.25rem 0; }

/* Hints */
.hint-box {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--color-warning-muted); border: 1px solid var(--color-warning-border);
  border-radius: var(--r-sm); padding: .5rem .75rem;
  font-size: .78rem; color: var(--color-warning-text); margin-bottom: .5rem;
}
.hint-label { color: var(--color-warning); font-weight: 700; white-space: nowrap; margin-top: .05rem; }

/* Multiple choice grid */
.choice-grid { display: grid; gap: .5rem; margin: .75rem 0; }
.choice-btn {
  text-align: left; padding: .625rem .875rem;
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--r-sm);
  font-size: .85rem; font-family: var(--font-mono);
  cursor: pointer; transition: all .15s;
}
[data-theme="light"] .choice-btn { background: var(--bg-elevated); }
.choice-btn:hover    { background: var(--color-primary-muted); border-color: var(--color-primary-border); color: var(--text-primary); }
.choice-btn.selected { background: var(--color-primary-muted); border-color: var(--color-primary); color: var(--color-primary); }

/* ── 22. Lesson Body Prose ──────────────────────────────────────────────── */
.lesson-body {
  color: var(--text-secondary); line-height: 1.9; font-size: 1rem;
  max-width: 42rem; /* ~72ch at this size — the readable-measure limit;
                        tables/pre below opt back out to full width */
}
.lesson-body h2 {
  font-size: 1.4rem; font-weight: 700; color: var(--text-primary);
  margin: 2.75rem 0 1.1rem; padding-left: .75rem;
  border-left: 3px solid var(--color-primary);
}
.lesson-body > h2:first-child { margin-top: 0; }
.lesson-body h3 { font-size: 1.1rem;  font-weight: 600; color: var(--color-success-text); margin: 1.75rem 0 .75rem; }
.lesson-body h4 { font-size: .95rem;  font-weight: 600; color: var(--color-purple);       margin: 1.25rem 0 .5rem; }
[data-theme="light"] .lesson-body h3 { color: var(--color-success-text); }
[data-theme="light"] .lesson-body h4 { color: var(--color-purple); }
.lesson-body p  { margin-bottom: 1.15rem; }
.lesson-body ul, .lesson-body ol { padding-left: 1.5rem; margin-bottom: 1.15rem; }
.lesson-body li  { margin-bottom: .4rem; }
.lesson-body ul li { list-style-type: disc; }
.lesson-body ol li { list-style-type: decimal; }
.lesson-body strong { color: var(--text-primary); font-weight: 600; }
.lesson-body em     { color: var(--color-purple); font-style: italic; }
.lesson-body a      { color: var(--color-primary); text-decoration: underline; }
.lesson-body a:hover{ color: var(--color-success); }

/* Blockquotes double as this content's recurring "scenario" device (every
   lesson opens its closing contrast with one) — styled as a distinct
   callout card, not a plain indent, so it reads as "pay attention here"
   at a glance rather than blending into the surrounding prose. */
.lesson-body blockquote {
  position: relative; margin: 1.75rem 0; padding: 1.1rem 1.25rem 1.1rem 3rem;
  background: var(--color-primary-muted); border: 1px solid var(--color-primary-border);
  border-radius: var(--r-md); color: var(--text-primary); font-size: .975rem;
  box-shadow: var(--shadow-md);
}
.lesson-body blockquote::before {
  content: "❝"; position: absolute; left: 1rem; top: .6rem;
  font-size: 1.5rem; line-height: 1; color: var(--color-primary); opacity: .6;
}
.lesson-body blockquote p:last-child { margin-bottom: 0; }

.lesson-body table, .lesson-body pre { max-width: none; } /* opt out of the prose measure */
.lesson-body table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: .875rem; box-shadow: var(--shadow-md); border-radius: var(--r-md); overflow: hidden; }
.lesson-body th {
  background: var(--color-primary-muted); color: var(--color-primary-text);
  padding: .7rem .875rem; text-align: left;
  border: 1px solid var(--color-primary-border); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .03em;
}
.lesson-body td { border: 1px solid var(--border); padding: .7rem .875rem; color: var(--text-secondary); }
.lesson-body tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
[data-theme="light"] .lesson-body tr:nth-child(even) td { background: var(--bg-elevated); }
.lesson-body code:not(pre code) {
  font-family: var(--font-mono); font-size: .8rem;
  background: var(--color-primary-muted); color: var(--color-primary-text);
  padding: .15em .4em; border-radius: .3em;
  border: 1px solid var(--color-primary-border);
}
.lesson-body pre {
  margin: 1.25rem 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(34,181,255,0.12); box-shadow: var(--shadow-md);
}
.lesson-body pre code { border: none !important; background: none !important; padding: 0 !important; font-size: .82rem !important; }

/* ── 23. Security Callout ───────────────────────────────────────────────── */
.sec-note {
  background: var(--color-warning-muted);
  border: 1px solid var(--color-warning-border);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--r-md); padding: .875rem 1.1rem;
  margin: 1rem 0; font-size: .85rem; color: var(--color-warning-text); line-height: 1.6;
  box-shadow: 0 2px 10px rgba(245,158,11,0.05);
}
.sec-note strong { color: var(--color-warning); }

.info-note {
  background: var(--color-primary-muted); border: 1px solid var(--color-primary-border);
  border-radius: var(--r-md); padding: .875rem 1.1rem;
  margin: 1rem 0; font-size: .875rem; color: var(--text-secondary);
}
.info-note strong { color: var(--color-primary-text); }

/* ── 24. Objectives Box ─────────────────────────────────────────────────── */
.objectives-box {
  background: var(--color-primary-muted); border: 1px solid var(--color-primary-border);
  border-radius: var(--r-xl); padding: 1.25rem 1.5rem; margin-bottom: 2rem;
}

/* ── 25. Prev/Next Nav Buttons ──────────────────────────────────────────── */
.nav-btn {
  display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0;
  padding: .75rem 1rem; border-radius: var(--r-lg); font-size: .825rem;
  text-decoration: none; transition: all .2s;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); max-width: 280px;
}
/* .truncate (overflow:hidden + ellipsis) only engages once the flex child is
   actually allowed to shrink — without min-width:0 a long lesson title (e.g.
   CISSP's longer titles) just grows the span past nav-btn's own box instead
   of truncating, which is real layout, not just visual bleed: it widens the
   whole page and forces horizontal scroll at narrow viewports. */
.nav-btn .truncate { min-width: 0; }
.nav-btn:hover { border-color: var(--color-primary-border); color: var(--text-primary); background: var(--color-primary-muted); }
.nav-btn.next-btn {
  background: var(--color-primary-muted); border-color: var(--color-primary-border);
  color: var(--color-primary); font-weight: 600; margin-left: auto;
}
.nav-btn.next-btn:hover { background: rgba(34,181,255,0.15); box-shadow: 0 0 18px rgba(34,181,255,0.1); }

/* ── 26. Completion Modal ───────────────────────────────────────────────── */
.completion-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.8); backdrop-filter: blur(8px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.completion-modal.visible { opacity: 1; pointer-events: auto; }
.completion-card {
  background: var(--bg-card); border: 1px solid var(--color-success-border);
  border-radius: var(--r-2xl); padding: 2.5rem; text-align: center;
  max-width: 420px; width: 90%; position: relative; overflow: hidden;
  animation: scaleIn .4s cubic-bezier(.175,.885,.32,1.275) both;
  box-shadow: 0 0 50px rgba(139,255,26,0.1), var(--shadow-xl);
}
.completion-check {
  width: 72px; height: 72px; margin: 0 auto 1.5rem;
  background: var(--color-success-muted); border: 2px solid var(--color-success-border);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  animation: checkPop .6s ease .2s both;
  box-shadow: 0 0 28px rgba(139,255,26,0.25);
}
[data-theme="light"] .completion-check { box-shadow: 0 4px 12px rgba(22,163,74,0.25); }
.completion-banner { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: .5rem; }
.completion-xp     { font-size: 1.25rem; font-weight: 700; color: var(--color-primary); font-family: var(--font-mono); margin-bottom: 1.5rem; }

/* Jargon with a native-tooltip definition on first use (XP, operator, ...) */
.glossary-hint { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Confetti */
.confetti-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.cp {
  position: absolute; opacity: 0;
  animation: confettiFall var(--cd, 1.5s) ease var(--delay, 0s) both;
}

/* ── 27. Rich Task Content Components ──────────────────────────────────── */
.type-badge {
  display: inline-block; font-size: .65rem; font-weight: 800;
  letter-spacing: .12em; padding: 2px 9px; border-radius: 4px;
  margin-right: .5rem; vertical-align: middle; font-family: var(--font-mono);
}
.type-badge.concept   { background: var(--color-purple-muted);  border: 1px solid var(--color-purple-border);  color: var(--color-purple); }
.type-badge.protocol  { background: var(--color-primary-muted); border: 1px solid var(--color-primary-border); color: var(--color-primary-text); }
.type-badge.practical { background: var(--color-success-muted); border: 1px solid var(--color-success-border); color: var(--color-success-text); }
.type-badge.challenge { background: var(--color-danger-muted);  border: 1px solid var(--color-danger-border);  color: var(--color-danger-text); }

.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .875rem; }
@media (max-width: 480px) { .pros-cons { grid-template-columns: 1fr; } }
.pros { background: var(--color-success-muted); border: 1px solid var(--color-success-border); border-radius: var(--r-md); padding: .875rem; }
.cons { background: var(--color-danger-muted);  border: 1px solid var(--color-danger-border);  border-radius: var(--r-md); padding: .875rem; }
.pros h5 { color: var(--color-success-text); font-size: .78rem; font-weight: 700; margin-bottom: .5rem; }
.cons h5 { color: var(--color-danger-text);  font-size: .78rem; font-weight: 700; margin-bottom: .5rem; }
.pros ul, .cons ul { margin: 0; padding: 0; list-style: none; font-size: .82rem; color: var(--text-muted); }
.pros li, .cons li { margin-bottom: .25rem; padding-left: 1.1rem; position: relative; }
.pros li::before { content: '✓'; position: absolute; left: 0; color: var(--color-success-text); }
.cons li::before { content: '✗'; position: absolute; left: 0; color: var(--color-danger-text); }

.flow-step {
  display: flex; align-items: flex-start; gap: .875rem;
  padding: .75rem .875rem; border-radius: var(--r-md); margin-bottom: .5rem;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .flow-step { background: var(--bg-elevated); border-color: var(--border); }
.flow-num {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; font-family: var(--font-mono);
}
.flow-content strong { font-size: .85rem; color: var(--text-primary); display: block; margin-bottom: .2rem; }
.flow-content p { font-size: .8rem; color: var(--text-muted); margin: 0; line-height: 1.5; }

.device-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin: 1rem 0; }
@media (max-width: 540px) { .device-grid { grid-template-columns: 1fr; } }
.device-card { border-radius: var(--r-lg); padding: 1rem; text-align: center; transition: transform .2s; }
.device-card:hover { transform: translateY(-2px); }
.dc-hub    { background: rgba(107,114,128,0.08); border: 1px solid rgba(107,114,128,0.22); }
.dc-switch { background: var(--color-primary-muted);  border: 1px solid var(--color-primary-border); }
.dc-router { background: var(--color-success-muted);  border: 1px solid var(--color-success-border); }

.chip-row  { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem;
  border-radius: var(--r-sm); font-size: .75rem; font-family: var(--font-mono);
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: var(--text-muted);
}
[data-theme="light"] .chip { background: var(--bg-elevated); border-color: var(--border); }
.chip span { font-weight: 700; }

.code-note {
  font-family: var(--font-mono); font-size: .8rem;
  background: rgba(0,0,0,.4); padding: 1rem; border-radius: var(--r-md);
  border: 1px solid var(--color-primary-border); color: var(--color-primary-text); line-height: 1.8;
  margin: 1rem 0; overflow-x: auto; white-space: pre;
}
[data-theme="light"] .code-note { background: var(--bg-elevated); }

.diagram-box { background: rgba(0,0,0,.25); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; margin: 1rem 0; }
[data-theme="light"] .diagram-box { background: var(--bg-elevated); }
.diagram-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--text-muted); margin-bottom: .75rem; }

.task-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: 1rem 0; }
.task-table th { background: var(--color-primary-muted); color: var(--color-primary-text); padding: .5rem .875rem; text-align: left; font-size: .75rem; border: 1px solid var(--color-primary-border); }
.task-table td { border: 1px solid var(--border); padding: .5rem .875rem; color: var(--text-secondary); }
.task-table tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
[data-theme="light"] .task-table tr:nth-child(even) td { background: var(--bg-elevated); }

.task-section-h {
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; margin: 1.5rem 0 .75rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border); color: var(--text-muted);
}

/* ── 28. Glossary Tooltip ───────────────────────────────────────────────── */
.gloss-term { border-bottom: 1px dashed var(--color-primary-border); cursor: help; }
#gloss-tooltip {
  display: none; position: fixed;
  background: var(--bg-overlay); border: 1px solid var(--color-primary-border);
  color: var(--text-secondary); font-size: .775rem; line-height: 1.5;
  padding: .625rem .875rem; border-radius: var(--r-sm);
  width: 280px; max-width: calc(100vw - 24px); z-index: 9999;
  box-shadow: var(--shadow-lg), 0 0 16px rgba(34,181,255,0.08);
  pointer-events: none;
}
#gloss-tooltip.visible { display: block; }
#gloss-tooltip strong  { display: block; color: var(--color-primary); margin-bottom: 4px; font-size: .8rem; }

/* ── 29. HTMX Loading ───────────────────────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity .2s ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ── 30. Flash Messages ─────────────────────────────────────────────────── */
.flash-msg {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: 1rem; border-radius: var(--r-xl);
  background: var(--bg-glass); border: 1px solid var(--border);
  backdrop-filter: blur(16px); box-shadow: var(--shadow-md);
}
.flash-msg.success { border-color: var(--color-success-border); background: var(--color-success-muted); color: var(--color-success-text); }
.flash-msg.error   { border-color: var(--color-danger-border);  background: var(--color-danger-muted);  color: var(--color-danger-text); }
.flash-msg.warning { border-color: var(--color-warning-border); background: var(--color-warning-muted); color: var(--color-warning-text); }
.flash-msg.info    { border-color: var(--color-primary-border); color: var(--color-primary-text); }

/* ── 30b. Cookie Consent Banner ─────────────────────────────────────────── */
.cookie-consent-banner {
  position: fixed; left: 1rem; right: 1rem; bottom: -6rem;
  z-index: var(--z-toast, 1100);
  max-width: 42rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem; border-radius: var(--r-xl);
  background: var(--bg-glass); border: 1px solid var(--border);
  backdrop-filter: blur(16px); box-shadow: var(--shadow-lg);
  transition: bottom .35s ease;
}
.cookie-consent-banner.cookie-consent-visible { bottom: 1rem; }
.cookie-consent-text { flex: 1 1 16rem; font-size: .875rem; color: var(--text-secondary); }
.cookie-consent-text a { color: var(--color-primary-text); text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: .625rem; flex-shrink: 0; }

/* ── 31. Animations ─────────────────────────────────────────────────────── */
@keyframes fadeInUp  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn   { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
@keyframes pulseCorrect {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); box-shadow: 0 0 18px rgba(139,255,26,0.35); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
@keyframes checkPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes floatOrb1 {
  0%,100% { transform: translateY(0)    translateX(-50%); }
  50%     { transform: translateY(-22px) translateX(-50%); }
}
@keyframes floatOrb2 {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-16px); }
}
@keyframes floatOrb3 {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(13px); }
}
@keyframes blink     { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 1; }
  100% { transform: translateY(300px) rotate(720deg); opacity: 0; }
}

.animate-fade-in-up { animation: fadeInUp .4s ease both; }
.delay-1 { animation-delay: .06s; }
.delay-2 { animation-delay: .12s; }
.delay-3 { animation-delay: .18s; }
.delay-4 { animation-delay: .24s; }
.delay-5 { animation-delay: .30s; }

/* ── 32. Accessibility — Reduced Motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .glow-orb { display: none; }
}

/* ── 33. Light Mode — Navbar & Navigation Overrides ────────────────────── */
[data-theme="light"] .nav-link { color: #6B7280; }
[data-theme="light"] .nav-link:hover { color: var(--color-primary); }
[data-theme="light"] .nav-link.active { color: var(--color-primary-text); }
[data-theme="light"] .nav-link.active::after { box-shadow: none; }

/* ── 34. Light Mode — Body Background Pattern ───────────────────────────── */
[data-theme="light"] body::before { opacity: 0; }
[data-theme="light"] .glow-orb    { display: none; }

/* ── 35. Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .themes-grid     { grid-template-columns: 1fr; }
  .sidebar-toggle  { display: flex; }
  .sidebar-desktop { display: none !important; }
  /* Fixed-position orbs (520px/360px) extend past narrow viewports and
     inflate document scrollWidth in Chromium, causing horizontal scroll. */
  .glow-orb        { display: none; }
}