/* ═══════════════════════════════════════════════════════════════
   EduVerse 2.0 — Premium Design System
   Aurora Glassmorphism · Cinematic · Mobile-first
   ═══════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━ 1. DESIGN TOKENS ━━━━━━━━━━━━━━━━ */
:root {
  /* Aurora — Default Theme (Purple/Pink/Cyan) */
  --brand-50: #faf5ff;
  --brand-100: #f3e8ff;
  --brand-200: #e9d5ff;
  --brand-300: #d8b4fe;
  --brand-400: #c084fc;
  --brand-500: #a855f7;
  --brand-600: #9333ea;
  --brand-700: #7e22ce;
  --brand-800: #6b21a8;
  --brand-900: #581c87;

  --accent-500: #ec4899;
  --accent-600: #db2777;
  --cyan-500:   #06b6d4;
  --cyan-400:   #22d3ee;

  /* Core gradients */
  --g-aurora:  linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #06b6d4 100%);
  --g-cosmic:  linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  --g-sunrise: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
  --g-success: linear-gradient(135deg, #10b981, #059669);
  --g-danger:  linear-gradient(135deg, #ef4444, #dc2626);
  --g-mesh:    radial-gradient(at 40% 20%, rgba(168,85,247,0.35) 0, transparent 50%),
               radial-gradient(at 80% 0%, rgba(236,72,153,0.30) 0, transparent 50%),
               radial-gradient(at 0% 50%, rgba(6,182,212,0.25) 0, transparent 50%),
               radial-gradient(at 80% 80%, rgba(251,191,36,0.20) 0, transparent 50%);

  /* Surfaces (Light mode) */
  --bg:             #fafafa;
  --bg-elev:        #ffffff;
  --bg-sunken:      #f5f5f7;
  --surface:        rgba(255,255,255,0.70);
  --surface-strong: rgba(255,255,255,0.92);
  --border:         rgba(168,85,247,0.14);
  --border-strong:  rgba(168,85,247,0.28);
  --ring:           rgba(168,85,247,0.45);

  /* Text */
  --text:     #0f172a;
  --text-2:   #334155;
  --text-3:   #64748b;
  --text-4:   #94a3b8;
  --text-inv: #ffffff;

  /* Elevations */
  --sh-xs:  0 1px 2px rgba(15,23,42,0.04);
  --sh-sm:  0 2px 8px rgba(15,23,42,0.06);
  --sh-md:  0 8px 24px rgba(15,23,42,0.08);
  --sh-lg:  0 20px 50px rgba(168,85,247,0.18);
  --sh-xl:  0 30px 80px rgba(168,85,247,0.28);
  --sh-glow:0 0 40px rgba(168,85,247,0.35);

  /* Radii */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 32px; --r-2xl: 42px; --r-full: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms; --t-base: 260ms; --t-slow: 450ms;

  /* Layout */
  --nav-h: 68px;
  --max-w: 1280px;

  /* Fonts */
  --font-sans: 'Tajawal', 'Cairo', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Cairo', 'Tajawal', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, monospace;
}

/* ━━━━━━━━━━━━━━━━ 2. THEMES ━━━━━━━━━━━━━━━━ */
[data-theme="dark"] {
  --bg:             #05050f;
  --bg-elev:        #0b0b1f;
  --bg-sunken:      #030308;
  --surface:        rgba(25,25,55,0.55);
  --surface-strong: rgba(25,25,55,0.85);
  --border:         rgba(168,85,247,0.22);
  --border-strong:  rgba(168,85,247,0.42);
  --text:     #f8fafc;
  --text-2:   #cbd5e1;
  --text-3:   #94a3b8;
  --text-4:   #64748b;
  --sh-md:  0 8px 24px rgba(0,0,0,0.5);
  --sh-lg:  0 20px 50px rgba(0,0,0,0.6);
  --sh-xl:  0 30px 80px rgba(0,0,0,0.7);
}

[data-theme="ocean"] {
  --brand-500: #0ea5e9; --brand-600: #0284c7; --brand-700: #0369a1;
  --accent-500: #14b8a6; --accent-600: #0d9488;
  --cyan-500: #6366f1;
  --g-aurora: linear-gradient(135deg,#0ea5e9 0%,#14b8a6 50%,#6366f1 100%);
  --g-cosmic: linear-gradient(135deg,#0284c7 0%,#14b8a6 50%,#0ea5e9 100%);
  --g-mesh: radial-gradient(at 40% 20%, rgba(14,165,233,0.35) 0, transparent 50%),
            radial-gradient(at 80% 0%, rgba(20,184,166,0.30) 0, transparent 50%),
            radial-gradient(at 0% 50%, rgba(99,102,241,0.25) 0, transparent 50%);
  --bg: #f0f9ff; --bg-elev:#ffffff; --bg-sunken:#e0f2fe;
  --text:#0c4a6e; --text-2:#164e63;
  --border: rgba(14,165,233,0.18);
}

[data-theme="sunset"] {
  --brand-500:#f97316; --brand-600:#ea580c; --brand-700:#c2410c;
  --accent-500:#ef4444; --accent-600:#dc2626; --cyan-500:#fbbf24;
  --g-aurora: linear-gradient(135deg,#f97316 0%,#ef4444 50%,#fbbf24 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(249,115,22,0.35) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(239,68,68,0.30) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(251,191,36,0.25) 0,transparent 50%);
  --bg:#fff7ed; --bg-elev:#ffffff; --bg-sunken:#ffedd5;
  --text:#7c2d12; --text-2:#9a3412;
  --border: rgba(249,115,22,0.18);
}

[data-theme="forest"] {
  --brand-500:#16a34a; --brand-600:#15803d; --brand-700:#14532d;
  --accent-500:#84cc16; --accent-600:#65a30d; --cyan-500:#0891b2;
  --g-aurora: linear-gradient(135deg,#16a34a 0%,#84cc16 50%,#0891b2 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(22,163,74,0.35) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(132,204,22,0.30) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(8,145,178,0.25) 0,transparent 50%);
  --bg:#f0fdf4; --bg-elev:#ffffff; --bg-sunken:#dcfce7;
  --text:#14532d; --text-2:#166534;
  --border: rgba(22,163,74,0.18);
}

[data-theme="galaxy"] {
  --brand-500:#6366f1; --brand-600:#4f46e5; --brand-700:#4338ca;
  --accent-500:#a855f7; --accent-600:#9333ea; --cyan-500:#ec4899;
  --g-aurora: linear-gradient(135deg,#6366f1 0%,#a855f7 50%,#ec4899 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(99,102,241,0.45) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(168,85,247,0.40) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(236,72,153,0.35) 0,transparent 50%);
  --bg:#030014; --bg-elev:#0a0220; --bg-sunken:#000000;
  --surface: rgba(30,18,70,0.55); --surface-strong: rgba(30,18,70,0.85);
  --text:#f8fafc; --text-2:#cbd5e1; --text-3:#94a3b8;
  --border: rgba(168,85,247,0.3);
}

[data-theme="rose"] {
  --brand-500:#f43f5e; --brand-600:#e11d48; --brand-700:#be123c;
  --accent-500:#ec4899; --accent-600:#db2777; --cyan-500:#a855f7;
  --g-aurora: linear-gradient(135deg,#f43f5e 0%,#ec4899 50%,#a855f7 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(244,63,94,0.35) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(236,72,153,0.30) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(168,85,247,0.25) 0,transparent 50%);
  --bg:#fff1f2; --bg-elev:#ffffff; --bg-sunken:#ffe4e6;
  --text:#881337; --text-2:#9f1239;
  --border: rgba(244,63,94,0.18);
}

/* NEW THEME: Midnight — rich dark blue/purple */
[data-theme="midnight"] {
  --brand-500:#8b5cf6; --brand-600:#7c3aed; --brand-700:#6d28d9;
  --accent-500:#3b82f6; --accent-600:#2563eb; --cyan-500:#60a5fa;
  --g-aurora: linear-gradient(135deg,#8b5cf6 0%,#3b82f6 50%,#06b6d4 100%);
  --g-cosmic: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#4338ca 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(139,92,246,0.45) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(59,130,246,0.40) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(6,182,212,0.30) 0,transparent 50%);
  --bg:#0a0e27; --bg-elev:#11162e; --bg-sunken:#060913;
  --surface: rgba(30,27,75,0.55); --surface-strong: rgba(30,27,75,0.88);
  --text:#f8fafc; --text-2:#cbd5e1; --text-3:#94a3b8; --text-4:#64748b;
  --border: rgba(139,92,246,0.25); --border-strong: rgba(139,92,246,0.45);
  --sh-md:0 8px 24px rgba(0,0,0,0.5); --sh-lg:0 20px 50px rgba(0,0,0,0.6);
}

/* NEW THEME: Candy — playful pink/yellow/mint (student-friendly) */
[data-theme="candy"] {
  --brand-500:#f472b6; --brand-600:#ec4899; --brand-700:#db2777;
  --accent-500:#fbbf24; --accent-600:#f59e0b; --cyan-500:#34d399;
  --g-aurora: linear-gradient(135deg,#f472b6 0%,#fbbf24 50%,#34d399 100%);
  --g-cosmic: linear-gradient(135deg,#ec4899 0%,#f472b6 50%,#c084fc 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(244,114,182,0.35) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(251,191,36,0.30) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(52,211,153,0.28) 0,transparent 50%);
  --bg:#fff7fb; --bg-elev:#ffffff; --bg-sunken:#fce7f3;
  --text:#831843; --text-2:#9d174d;
  --border: rgba(244,114,182,0.22);
}

/* NEW THEME: Nordic — calm, minimal, cold */
[data-theme="nordic"] {
  --brand-500:#64748b; --brand-600:#475569; --brand-700:#334155;
  --accent-500:#38bdf8; --accent-600:#0284c7; --cyan-500:#7dd3fc;
  --g-aurora: linear-gradient(135deg,#64748b 0%,#38bdf8 50%,#7dd3fc 100%);
  --g-cosmic: linear-gradient(135deg,#1e293b 0%,#475569 50%,#64748b 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(100,116,139,0.25) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(56,189,248,0.20) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(125,211,252,0.18) 0,transparent 50%);
  --bg:#f1f5f9; --bg-elev:#ffffff; --bg-sunken:#e2e8f0;
  --text:#0f172a; --text-2:#334155;
  --border: rgba(100,116,139,0.20);
}

/* NEW THEME: Gold — luxury premium look */
[data-theme="gold"] {
  --brand-500:#d4a017; --brand-600:#b8860b; --brand-700:#9a6f0a;
  --accent-500:#dc2626; --accent-600:#b91c1c; --cyan-500:#92400e;
  --g-aurora: linear-gradient(135deg,#d4a017 0%,#f59e0b 40%,#b91c1c 100%);
  --g-cosmic: linear-gradient(135deg,#78350f 0%,#b8860b 50%,#d4a017 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(212,160,23,0.30) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(245,158,11,0.25) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(185,28,28,0.20) 0,transparent 50%);
  --bg:#fefce8; --bg-elev:#ffffff; --bg-sunken:#fef3c7;
  --text:#451a03; --text-2:#78350f;
  --border: rgba(212,160,23,0.25);
}

/* NEW THEME: Mono — professional grayscale */
[data-theme="mono"] {
  --brand-500:#1f2937; --brand-600:#111827; --brand-700:#030712;
  --accent-500:#374151; --accent-600:#1f2937; --cyan-500:#6b7280;
  --g-aurora: linear-gradient(135deg,#111827 0%,#374151 50%,#6b7280 100%);
  --g-cosmic: linear-gradient(135deg,#030712 0%,#1f2937 50%,#374151 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(31,41,55,0.20) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(55,65,81,0.15) 0,transparent 50%);
  --bg:#fafafa; --bg-elev:#ffffff; --bg-sunken:#f3f4f6;
  --text:#030712; --text-2:#1f2937;
  --border: rgba(31,41,55,0.15);
}

/* NEW THEME: Mint — fresh teal/green */
[data-theme="mint"] {
  --brand-500:#14b8a6; --brand-600:#0d9488; --brand-700:#0f766e;
  --accent-500:#22c55e; --accent-600:#16a34a; --cyan-500:#06b6d4;
  --g-aurora: linear-gradient(135deg,#14b8a6 0%,#22c55e 50%,#06b6d4 100%);
  --g-cosmic: linear-gradient(135deg,#134e4a 0%,#0d9488 50%,#14b8a6 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(20,184,166,0.32) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(34,197,94,0.26) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(6,182,212,0.22) 0,transparent 50%);
  --bg:#f0fdfa; --bg-elev:#ffffff; --bg-sunken:#ccfbf1;
  --text:#134e4a; --text-2:#115e59;
  --border: rgba(20,184,166,0.20);
}

/* ━━━━━━━━━━━━ NEW THEMES (v2) ━━━━━━━━━━━━ */

/* NEW THEME: Cyber — neon purple/green on black (hacker vibe) */
[data-theme="cyber"] {
  --brand-500:#a855f7; --brand-600:#9333ea; --brand-700:#7e22ce;
  --accent-500:#22ff88; --accent-600:#10b981; --cyan-500:#00d4ff;
  --g-aurora: linear-gradient(135deg,#a855f7 0%,#00d4ff 50%,#22ff88 100%);
  --g-cosmic: linear-gradient(135deg,#0f0518 0%,#2d0a5e 50%,#a855f7 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(168,85,247,0.45) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(0,212,255,0.40) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(34,255,136,0.30) 0,transparent 50%);
  --bg:#05010f; --bg-elev:#0d0420; --bg-sunken:#000000;
  --surface: rgba(25,10,55,0.55); --surface-strong: rgba(25,10,55,0.88);
  --text:#eeff; --text-2:#d4c9ff; --text-3:#a78bfa; --text-4:#6d28d9;
  --border: rgba(168,85,247,0.35); --border-strong: rgba(168,85,247,0.6);
  --sh-md:0 8px 24px rgba(168,85,247,0.25); --sh-lg:0 20px 50px rgba(168,85,247,0.4);
  --sh-glow:0 0 40px rgba(34,255,136,0.4);
}

/* NEW THEME: Coffee — warm brown/cream (cozy reading mode) */
[data-theme="coffee"] {
  --brand-500:#8b5e3c; --brand-600:#6f4a2f; --brand-700:#553922;
  --accent-500:#d97706; --accent-600:#b45309; --cyan-500:#a16207;
  --g-aurora: linear-gradient(135deg,#8b5e3c 0%,#d97706 50%,#a16207 100%);
  --g-cosmic: linear-gradient(135deg,#3c2414 0%,#6f4a2f 50%,#8b5e3c 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(139,94,60,0.28) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(217,119,6,0.22) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(161,98,7,0.18) 0,transparent 50%);
  --bg:#faf5ee; --bg-elev:#ffffff; --bg-sunken:#f3ead9;
  --text:#3c2414; --text-2:#553922;
  --border: rgba(139,94,60,0.20);
}

/* NEW THEME: Emerald — luxury dark green/gold */
[data-theme="emerald"] {
  --brand-500:#059669; --brand-600:#047857; --brand-700:#065f46;
  --accent-500:#fbbf24; --accent-600:#f59e0b; --cyan-500:#10b981;
  --g-aurora: linear-gradient(135deg,#059669 0%,#10b981 50%,#fbbf24 100%);
  --g-cosmic: linear-gradient(135deg,#022c22 0%,#047857 50%,#059669 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(5,150,105,0.4) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(16,185,129,0.30) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(251,191,36,0.25) 0,transparent 50%);
  --bg:#022c22; --bg-elev:#0a3d2e; --bg-sunken:#001e17;
  --surface: rgba(6,95,70,0.55); --surface-strong: rgba(6,95,70,0.85);
  --text:#ecfdf5; --text-2:#a7f3d0; --text-3:#6ee7b7; --text-4:#34d399;
  --border: rgba(16,185,129,0.28); --border-strong: rgba(16,185,129,0.5);
  --sh-md:0 8px 24px rgba(0,0,0,0.5); --sh-lg:0 20px 50px rgba(0,0,0,0.6);
}

/* NEW THEME: Lavender — soft purple/lilac (calm study mode) */
[data-theme="lavender"] {
  --brand-500:#a78bfa; --brand-600:#8b5cf6; --brand-700:#7c3aed;
  --accent-500:#c4b5fd; --accent-600:#a78bfa; --cyan-500:#e0e7ff;
  --g-aurora: linear-gradient(135deg,#a78bfa 0%,#c4b5fd 50%,#e0e7ff 100%);
  --g-cosmic: linear-gradient(135deg,#4c1d95 0%,#7c3aed 50%,#a78bfa 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(167,139,250,0.28) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(196,181,253,0.22) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(224,231,255,0.22) 0,transparent 50%);
  --bg:#faf7ff; --bg-elev:#ffffff; --bg-sunken:#ede9fe;
  --text:#2e1065; --text-2:#4c1d95;
  --border: rgba(167,139,250,0.22);
}

/* NEW THEME: Oman — inspired by Omani flag (red/white/green) */
[data-theme="oman"] {
  --brand-500:#c8102e; --brand-600:#a40b24; --brand-700:#7f0a1c;
  --accent-500:#009739; --accent-600:#007730; --cyan-500:#d4a017;
  --g-aurora: linear-gradient(135deg,#c8102e 0%,#d4a017 50%,#009739 100%);
  --g-cosmic: linear-gradient(135deg,#7f0a1c 0%,#c8102e 50%,#d4a017 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(200,16,46,0.25) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(212,160,23,0.22) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(0,151,57,0.20) 0,transparent 50%);
  --bg:#fffaf5; --bg-elev:#ffffff; --bg-sunken:#fef3e2;
  --text:#7f0a1c; --text-2:#a40b24;
  --border: rgba(200,16,46,0.20);
}

/* NEW THEME: Aurora-Borealis — deep night sky with northern lights */
[data-theme="aurora"] {
  --brand-500:#10b981; --brand-600:#059669; --brand-700:#047857;
  --accent-500:#8b5cf6; --accent-600:#7c3aed; --cyan-500:#22d3ee;
  --g-aurora: linear-gradient(135deg,#10b981 0%,#22d3ee 40%,#8b5cf6 100%);
  --g-cosmic: linear-gradient(135deg,#030712 0%,#064e3b 50%,#10b981 100%);
  --g-mesh: radial-gradient(at 40% 20%,rgba(16,185,129,0.5) 0,transparent 50%),
            radial-gradient(at 80% 0%,rgba(34,211,238,0.45) 0,transparent 50%),
            radial-gradient(at 0% 50%,rgba(139,92,246,0.40) 0,transparent 50%),
            radial-gradient(at 80% 80%,rgba(236,72,153,0.25) 0,transparent 50%);
  --bg:#030712; --bg-elev:#0a1020; --bg-sunken:#000000;
  --surface: rgba(15,23,42,0.55); --surface-strong: rgba(15,23,42,0.88);
  --text:#f0fdf4; --text-2:#a7f3d0; --text-3:#6ee7b7; --text-4:#4ade80;
  --border: rgba(16,185,129,0.28); --border-strong: rgba(16,185,129,0.5);
  --sh-md:0 8px 24px rgba(0,0,0,0.5); --sh-lg:0 20px 50px rgba(16,185,129,0.25);
  --sh-glow:0 0 40px rgba(16,185,129,0.35);
}

/* ━━━━━━━━━━━━━━━━ 3. RESET & BASE ━━━━━━━━━━━━━━━━ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--g-mesh);
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--t-slow);
}

img, svg, video { max-width: 100%; display: block; }
a { color: var(--brand-600); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-700); }

h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.1; }
h2 { font-size: clamp(26px, 3.5vw, 40px); line-height: 1.2; }
h3 { font-size: clamp(18px, 2vw, 22px); }
p { margin: 0 0 1em; color: var(--text-2); }

::selection { background: var(--brand-500); color: #fff; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: var(--r-xs); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-sunken); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }

/* ━━━━━━━━━━━━━━━━ 4. LAYOUT UTILITIES ━━━━━━━━━━━━━━━━ */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.gradient-text {
  background: var(--g-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.glass {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.glass-strong {
  background: var(--surface-strong);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid var(--border-strong);
}

/* ━━━━━━━━━━━━━━━━ 5. NAVBAR ━━━━━━━━━━━━━━━━ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: var(--surface-strong);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: all var(--t-base);
}
.nav-inner {
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 20px;
  color: var(--text);
}
.nav-logo .logo-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--g-aurora);
  color: #fff;
  font-size: 20px;
  box-shadow: var(--sh-glow);
  position: relative;
  overflow: hidden;
}
.nav-logo .logo-mark::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  animation: shine 3s infinite;
}
@keyframes shine {
  0% { transform: translateX(-100%); }
  60%,100% { transform: translateX(200%); }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.nav-link {
  padding: 10px 16px;
  border-radius: var(--r-md);
  color: var(--text-2);
  font-weight: 600;
  font-size: 14.5px;
  transition: all var(--t-fast);
  position: relative;
}
.nav-link:hover {
  background: var(--bg-sunken);
  color: var(--brand-600);
}
.nav-link.active {
  color: var(--brand-600);
  background: var(--bg-sunken);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 3px;
  background: var(--g-aurora);
  border-radius: var(--r-full);
}
.nav-actions { display: flex; gap: 8px; align-items: center; }

.nav-btn {
  height: 40px; width: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--text);
  transition: all var(--t-fast);
  font-size: 18px;
}
.nav-btn:hover {
  border-color: var(--brand-500);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.nav-burger { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed;
  top: var(--nav-h);
  right: 0; left: 0;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 99;
  box-shadow: var(--sh-lg);
}
.mobile-drawer.open { display: flex; }
.mobile-drawer a {
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-weight: 700;
  color: var(--text);
}
.mobile-drawer a:hover { background: var(--bg-sunken); }

/* ━━━━━━━━━━━━━━━━ 6. BUTTONS ━━━━━━━━━━━━━━━━ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-base) var(--ease-spring);
  text-decoration: none;
  line-height: 1;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary {
  background: var(--g-aurora);
  color: #fff;
  box-shadow: 0 10px 25px rgba(168,85,247,0.35);
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 40px rgba(168,85,247,0.5);
  color: #fff;
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent);
  opacity: 0;
  transition: opacity var(--t-base);
}
.btn-primary:hover::before { opacity: 1; }

.btn-outline {
  background: var(--bg-elev);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-outline:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
}
.btn-ghost:hover {
  background: var(--bg-sunken);
  color: var(--text);
}

.btn-success { background: var(--g-success); color: #fff; }
.btn-danger  { background: var(--g-danger);  color: #fff; }

.btn-lg { padding: 16px 28px; font-size: 16px; border-radius: var(--r-lg); }
.btn-sm { padding: 8px 14px;  font-size: 13px; }
.btn-icon { padding: 12px; width: 44px; height: 44px; justify-content: center; }
.btn-block { width: 100%; justify-content: center; }

/* Ripple */
.btn { -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(0) scale(0.98); }

/* ━━━━━━━━━━━━━━━━ 7. CARDS ━━━━━━━━━━━━━━━━ */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lg);
  border-color: var(--border-strong);
}

.card-glass {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Subject card with premium hover */
.subject-card {
  display: block;
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: all var(--t-base) var(--ease-out);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  position: relative;
}
.subject-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--g-aurora);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--t-base);
  filter: blur(12px);
}
.subject-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-xl);
  border-color: transparent;
}
.subject-card:hover::before { opacity: 0.6; }

.subject-header {
  padding: 28px 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.subject-header::after {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transition: all var(--t-slow);
}
.subject-card:hover .subject-header::after { transform: scale(1.5); }
.subject-header-content {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.subject-header .subject-icon {
  font-size: 56px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.subject-info h3 { font-size: 22px; color: #fff; margin-bottom: 2px; }
.subject-info p { font-size: 13px; color: rgba(255,255,255,0.8); margin: 0; }
.subject-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.subject-body { padding: 20px 22px; }
.unit-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-600);
  margin-bottom: 8px;
  margin-top: 12px;
}
.unit-title:first-child { margin-top: 0; }
.lesson-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
  font-size: 13.5px;
}
.lesson-link:hover { background: var(--bg-sunken); }
.lesson-link-title {
  display: flex; align-items: center; gap: 8px;
  color: var(--text);
}
.lesson-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.lesson-meta { font-size: 11px; color: var(--text-3); font-weight: 700; }

/* ━━━━━━━━━━━━━━━━ 8. INPUTS ━━━━━━━━━━━━━━━━ */
.input, textarea.input, select.input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  transition: all var(--t-fast);
}
.input:focus, textarea.input:focus, select.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--ring);
}
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 14px; color: var(--text-2); }

/* ━━━━━━━━━━━━━━━━ 9. BADGES / CHIPS / PILLS ━━━━━━━━━━━━━━━━ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 800;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  color: var(--text-2);
}
.badge-primary { background: var(--brand-100); color: var(--brand-700); }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .badge-primary { background: rgba(168,85,247,0.15); color: var(--brand-300); }
[data-theme="dark"] .badge-success { background: rgba(16,185,129,0.15); color: #6ee7b7; }
[data-theme="dark"] .badge-warning { background: rgba(245,158,11,0.15); color: #fbbf24; }
[data-theme="dark"] .badge-danger  { background: rgba(239,68,68,0.15);  color: #fca5a5; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.chip:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
}
.chip.active {
  background: var(--g-aurora);
  color: #fff;
  border-color: transparent;
}

/* ━━━━━━━━━━━━━━━━ 10. HERO ━━━━━━━━━━━━━━━━ */
.hero {
  padding: 40px 0 60px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 20px;
}
.hero-content h1 {
  font-size: clamp(36px, 6vw, 68px);
  margin-bottom: 20px;
  font-weight: 900;
}
.hero-content h1 .line-2 { display: block; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 20px;
}
.hero-eyebrow .dot {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--g-aurora);
  display: grid; place-items: center;
  color: #fff;
  font-size: 13px;
}
.hero-desc {
  font-size: 18px;
  line-height: 1.75;
  color: var(--text-2);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 22px;
  background: var(--surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  max-width: 620px;
}
.stat-item { text-align: center; }
.stat-value {
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 900;
  background: var(--g-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stat-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-3);
  margin-top: 6px;
}

/* Hero visual — orbit */
.hero-visual {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 520px;
  margin: 0 auto;
  animation: floaty 6s ease-in-out infinite;
}
.orbit-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  display: grid; place-items: center;
  font-size: 60px;
  border-radius: 50%;
  background: var(--g-aurora);
  box-shadow: 0 0 80px rgba(168,85,247,0.6), inset 0 0 40px rgba(255,255,255,0.2);
  z-index: 5;
}
.orbit-ring {
  position: absolute;
  top: 50%; left: 50%;
  border: 2px dashed var(--border-strong);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit-ring-1 {
  width: 300px; height: 300px;
  animation: rotate 30s linear infinite;
}
.orbit-ring-2 {
  width: 460px; height: 460px;
  animation: rotate 50s linear infinite reverse;
}
.orbit-item {
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  display: grid; place-items: center;
  font-size: 30px;
  background: var(--bg-elev);
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  box-shadow: var(--sh-lg);
  transition: transform var(--t-base) var(--ease-spring);
  cursor: pointer;
}
.orbit-item:hover { transform: scale(1.25); z-index: 10; }
@keyframes rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rotate-reverse { to { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* 8 positions for orbit items (4 on inner ring, 4 on outer) */
.orbit-item-1 { transform: translate(150px, 0); }
.orbit-item-2 { transform: translate(0, 150px); }
.orbit-item-3 { transform: translate(-150px, 0); }
.orbit-item-4 { transform: translate(0, -150px); }
.orbit-item-5 { transform: translate(163px, -163px); }
.orbit-item-6 { transform: translate(163px, 163px); }
.orbit-item-7 { transform: translate(-163px, 163px); }
.orbit-item-8 { transform: translate(-163px, -163px); }

/* counter-rotate items to keep emoji upright */
.orbit-ring-1, .orbit-ring-2 { animation-play-state: running; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { max-width: 360px; }
  .orbit-ring-1 { width: 240px; height: 240px; }
  .orbit-ring-2 { width: 340px; height: 340px; }
  .orbit-item-1 { transform: translate(120px, 0); }
  .orbit-item-2 { transform: translate(0, 120px); }
  .orbit-item-3 { transform: translate(-120px, 0); }
  .orbit-item-4 { transform: translate(0, -120px); }
  .orbit-item-5 { transform: translate(120px, -120px); }
  .orbit-item-6 { transform: translate(120px, 120px); }
  .orbit-item-7 { transform: translate(-120px, 120px); }
  .orbit-item-8 { transform: translate(-120px, -120px); }
  .orbit-core { width: 90px; height: 90px; font-size: 46px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ━━━━━━━━━━━━━━━━ 11. SECTION HEADERS ━━━━━━━━━━━━━━━━ */
.section-head {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 48px;
}
.section-eyebrow {
  display: inline-block;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--brand-100);
  color: var(--brand-700);
  border-radius: var(--r-full);
  margin-bottom: 16px;
}
[data-theme="dark"] .section-eyebrow { background: rgba(168,85,247,0.15); color: var(--brand-300); }
.section-head h2 { margin-bottom: 14px; }
.section-head p { font-size: 17px; color: var(--text-3); line-height: 1.7; }

/* ━━━━━━━━━━━━━━━━ 12. FEATURE GRID ━━━━━━━━━━━━━━━━ */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}

.feature-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: all var(--t-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: var(--g-aurora);
  opacity: 0;
  filter: blur(40px);
  transition: opacity var(--t-slow);
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: var(--border-strong);
}
.feature-card:hover::before { opacity: 0.35; }
.feature-icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  font-size: 28px;
  border-radius: var(--r-md);
  background: var(--g-aurora);
  color: #fff;
  margin-bottom: 18px;
  box-shadow: var(--sh-md);
  position: relative;
}
.feature-card h3 { margin-bottom: 8px; }
.feature-card p { color: var(--text-3); font-size: 15px; margin: 0; }

/* ━━━━━━━━━━━━━━━━ 13. TOASTS ━━━━━━━━━━━━━━━━ */
.toast-wrap {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.toast {
  min-width: 260px;
  max-width: 380px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  box-shadow: var(--sh-lg);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideIn var(--t-base) var(--ease-spring);
  pointer-events: auto;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.toast .icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.toast.success .icon { background: var(--g-success); color: #fff; }
.toast.error .icon { background: var(--g-danger); color: #fff; }
.toast.info .icon { background: var(--g-aurora); color: #fff; }
.toast.warn .icon { background: var(--g-sunrise); color: #fff; }
.toast.hide { animation: slideOut var(--t-base) forwards; }

@keyframes slideIn {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
  to { transform: translateX(30px); opacity: 0; }
}

/* ━━━━━━━━━━━━━━━━ 14. MODAL ━━━━━━━━━━━━━━━━ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 20px;
  animation: fadeIn var(--t-base);
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--sh-xl);
  animation: popIn var(--t-base) var(--ease-spring);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* ━━━━━━━━━━━━━━━━ 15. FOOTER ━━━━━━━━━━━━━━━━ */
.footer {
  margin-top: 80px;
  padding: 60px 20px 32px;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-col h4 { margin-bottom: 16px; font-size: 15px; }
.footer-col a {
  display: block;
  padding: 6px 0;
  color: var(--text-3);
  font-size: 14px;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--brand-600); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}
@media (max-width: 780px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ━━━━━━━━━━━━━━━━ 16. ANIMATIONS ━━━━━━━━━━━━━━━━ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.in { animation: fadeUp 0.7s var(--ease-out) forwards; }
.reveal-2 { animation-delay: 0.1s !important; }
.reveal-3 { animation-delay: 0.2s !important; }
.reveal-4 { animation-delay: 0.3s !important; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(168,85,247,0.5); }
  100% { box-shadow: 0 0 0 20px rgba(168,85,247,0); }
}
.pulse { animation: pulse-ring 1.8s infinite; }

@keyframes confetti {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ━━━━━━━━━━━━━━━━ 17. PROGRESS BARS ━━━━━━━━━━━━━━━━ */
.progress {
  height: 10px;
  background: var(--bg-sunken);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}
.progress-bar {
  height: 100%;
  background: var(--g-aurora);
  border-radius: inherit;
  transition: width 800ms var(--ease-out);
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Circular progress */
.ring-progress {
  --size: 140px;
  --thickness: 12px;
  --pct: 0;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background:
    conic-gradient(var(--brand-500) calc(var(--pct) * 1%), var(--bg-sunken) 0);
  display: grid;
  place-items: center;
  position: relative;
}
.ring-progress::before {
  content: '';
  position: absolute;
  inset: var(--thickness);
  background: var(--bg-elev);
  border-radius: 50%;
}
.ring-progress > * { position: relative; z-index: 1; text-align: center; }

/* ━━━━━━━━━━━━━━━━ 18. UTILITIES ━━━━━━━━━━━━━━━━ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.text-center { text-align: center; }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
.p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; }
.w-full { width: 100%; }
.rounded { border-radius: var(--r-md); }
.hidden { display: none !important; }
.sm-hidden { }
@media (max-width: 640px) { .sm-hidden { display: none !important; } }

/* prose for lesson content */
.prose h2 { font-size: 26px; margin: 28px 0 14px; color: var(--brand-700); }
.prose h3 { font-size: 20px; margin: 20px 0 10px; color: var(--text); }
.prose p { margin-bottom: 14px; line-height: 1.85; font-size: 16px; color: var(--text-2); }
.prose ul, .prose ol { margin: 10px 0 16px; padding-right: 24px; }
.prose li { margin-bottom: 6px; line-height: 1.8; }
.prose strong { color: var(--brand-600); font-weight: 800; }
.prose code {
  background: var(--bg-sunken);
  padding: 2px 8px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 0.9em;
  color: var(--brand-700);
}
.prose table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: 16px 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--border);
}
.prose th, .prose td {
  padding: 12px 14px; text-align: right;
  border-bottom: 1px solid var(--border);
}
.prose th {
  background: var(--bg-sunken);
  font-weight: 800;
  color: var(--text);
}
.prose tr:last-child td { border-bottom: none; }
.prose blockquote {
  border-right: 4px solid var(--brand-500);
  padding: 12px 18px;
  margin: 16px 0;
  background: var(--bg-sunken);
  border-radius: var(--r-md);
  font-style: italic;
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--border) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
  border-radius: var(--r-sm);
}
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .orbit-ring-1, .orbit-ring-2, .hero-visual { animation: none; }
}

/* ━━━━━━━━━━ Accessibility: Skip-to-content link ━━━━━━━━━━ */
.skip-link {
  position: fixed;
  top: -100px;
  inset-inline-start: 8px;
  z-index: 9999;
  background: var(--brand-600);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--sh-lg);
  transition: top 200ms cubic-bezier(.22, 1, .36, 1);
}
.skip-link:focus {
  top: 8px;
  outline: 3px solid var(--ring);
}

/* Honor data-reduced-motion (set by inline script before paint) */
html[data-reduced-motion="1"] *,
html[data-reduced-motion="1"] *::before,
html[data-reduced-motion="1"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}