/* ══════════════════════════════════════════════════
       DESIGN TOKENS — Light Mode (default)
    ══════════════════════════════════════════════════ */
    :root {
      --bg:          #f6f7fb;
      --surface:     #ffffff;
      --surface-2:   #f1f3f9;
      --surface-3:   #e8ebf4;
      --border:      #e2e6f0;
      --border-sub:  #eaecf5;

      --text-1:  #0f172a;
      --text-2:  #1e293b;
      --text-3:  #475569;
      --text-4:  #94a3b8;

      --sidebar-bg:      #111418;
      --sidebar-surface: #171b21;
      --sidebar-border:  rgba(255,255,255,0.09);
      --sidebar-text:    #e2e8f0;
      --sidebar-muted:   #8993a1;

      --brand:         #4f46e5;
      --brand-hover:   #4338ca;
      --brand-dim:     #eef2ff;
      --gold:          #f59e0b;
      --gold-dim:      #fef3c7;
      --success:       #10b981;
      --danger:        #ef4444;
      --warning:       #f59e0b;
    }

    /* ══════════════════════════════════════════════════
       DESIGN TOKENS — Dark Mode
    ══════════════════════════════════════════════════ */
    .dark {
      --bg:          #0a0f1e;
      --surface:     #111827;
      --surface-2:   #1f2937;
      --surface-3:   #374151;
      --border:      #374151;
      --border-sub:  #2d3748;

      --text-1:  #f1f5f9;
      --text-2:  #e2e8f0;
      --text-3:  #94a3b8;
      --text-4:  #64748b;

      --sidebar-bg:      #0d1117;
      --sidebar-surface: #151b23;
      --sidebar-border:  rgba(255,255,255,0.09);
    }

    /* ══════════════════════════════════════════════════
       BASE STYLES
    ══════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: var(--bg);
      color: var(--text-1);
      background-image:
        radial-gradient(ellipse at 15% 0%, rgba(99,102,241,0.07) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 100%, rgba(139,92,246,0.05) 0%, transparent 50%);
      background-attachment: fixed;
    }

    h1, h2, h3, h4, h5, .font-display {
      font-family: 'Plus Jakarta Sans', sans-serif;
      letter-spacing: -0.025em;
    }

    /* ══════════════════════════════════════════════════
       CSS TOKEN OVERRIDES (classes Tailwind can't JIT)
    ══════════════════════════════════════════════════ */
    .bg-background  { background-color: var(--bg) !important; }
    .bg-surface     { background-color: var(--surface) !important; }
    .bg-surface-2   { background-color: var(--surface-2) !important; }
    .bg-surface-3   { background-color: var(--surface-3) !important; }
    .border-base-border { border-color: var(--border) !important; }
    .border-sub-border  { border-color: var(--border-sub) !important; }
    .text-t-1 { color: var(--text-1) !important; }
    .text-t-2 { color: var(--text-2) !important; }
    .text-t-3 { color: var(--text-3) !important; }
    .text-t-4 { color: var(--text-4) !important; }

    .dark [class~="dark:bg-surface"] { background-color: var(--surface) !important; }
    .dark [class~="dark:bg-surface-3"] { background-color: var(--surface-3) !important; }
    .dark [class~="dark:bg-slate-950"] { background-color: #020617 !important; }
    .dark [class~="dark:bg-slate-900"] { background-color: #0f172a !important; }
    .dark [class~="dark:bg-slate-900/90"] { background-color: rgba(15,23,42,0.9) !important; }
    .dark [class~="dark:bg-slate-800"] { background-color: #1e293b !important; }
    .dark [class~="dark:bg-slate-800/80"] { background-color: rgba(30,41,59,0.8) !important; }
    .dark [class~="dark:bg-slate-700"] { background-color: #334155 !important; }
    .dark [class~="dark:bg-indigo-900/20"] { background-color: rgba(49,46,129,0.22) !important; }
    .dark [class~="dark:bg-indigo-900/30"] { background-color: rgba(49,46,129,0.32) !important; }
    .dark [class~="dark:bg-indigo-900/40"] { background-color: rgba(49,46,129,0.42) !important; }
    .dark [class~="dark:bg-violet-900/20"] { background-color: rgba(76,29,149,0.24) !important; }
    .dark [class~="dark:bg-violet-900/30"] { background-color: rgba(76,29,149,0.34) !important; }
    .dark [class~="dark:bg-sky-900/20"] { background-color: rgba(12,74,110,0.24) !important; }
    .dark [class~="dark:bg-sky-900/30"] { background-color: rgba(12,74,110,0.34) !important; }
    .dark [class~="dark:bg-emerald-900/20"] { background-color: rgba(6,78,59,0.24) !important; }
    .dark [class~="dark:bg-emerald-900/30"] { background-color: rgba(6,78,59,0.34) !important; }
    .dark [class~="dark:bg-orange-900/20"] { background-color: rgba(124,45,18,0.24) !important; }
    .dark [class~="dark:bg-orange-900/30"] { background-color: rgba(124,45,18,0.34) !important; }
    .dark [class~="dark:bg-amber-900/20"] { background-color: rgba(120,53,15,0.24) !important; }
    .dark [class~="dark:bg-amber-900/30"] { background-color: rgba(120,53,15,0.34) !important; }
    .dark [class~="dark:bg-red-900/20"] { background-color: rgba(127,29,29,0.24) !important; }
    .dark [class~="dark:bg-pink-900/20"] { background-color: rgba(131,24,67,0.24) !important; }
    .dark [class~="dark:bg-lime-900/20"] { background-color: rgba(54,83,20,0.24) !important; }
    .dark [class~="dark:bg-blue-900/20"] { background-color: rgba(30,58,138,0.24) !important; }

    .dark [class~="dark:border-slate-800"] { border-color: #1e293b !important; }
    .dark [class~="dark:border-slate-700"] { border-color: #334155 !important; }
    .dark [class~="dark:border-indigo-800/30"],
    .dark [class~="dark:border-indigo-800/40"],
    .dark [class~="dark:border-indigo-800/50"] { border-color: rgba(55,48,163,0.48) !important; }
    .dark [class~="dark:border-violet-800/30"],
    .dark [class~="dark:border-violet-800/40"] { border-color: rgba(91,33,182,0.48) !important; }
    .dark [class~="dark:border-sky-800/30"],
    .dark [class~="dark:border-sky-800/40"] { border-color: rgba(7,89,133,0.48) !important; }
    .dark [class~="dark:border-emerald-800/30"],
    .dark [class~="dark:border-emerald-800/40"] { border-color: rgba(6,95,70,0.48) !important; }
    .dark [class~="dark:border-orange-800/30"],
    .dark [class~="dark:border-orange-800/40"] { border-color: rgba(154,52,18,0.48) !important; }
    .dark [class~="dark:border-amber-800/30"] { border-color: rgba(146,64,14,0.48) !important; }
    .dark [class~="dark:border-red-800/30"] { border-color: rgba(153,27,27,0.48) !important; }
    .dark [class~="dark:border-pink-800/30"] { border-color: rgba(157,23,77,0.48) !important; }
    .dark [class~="dark:border-lime-800/30"] { border-color: rgba(77,124,15,0.48) !important; }
    .dark [class~="dark:border-blue-800/30"] { border-color: rgba(30,64,175,0.48) !important; }

    .dark [class~="dark:text-white"] { color: #ffffff !important; }
    .dark [class~="dark:text-slate-300"] { color: #cbd5e1 !important; }
    .dark [class~="dark:text-slate-400"] { color: #94a3b8 !important; }
    .dark [class~="dark:text-indigo-300"] { color: #c7d2fe !important; }
    .dark [class~="dark:text-indigo-400"] { color: #a5b4fc !important; }
    .dark [class~="dark:text-violet-300"] { color: #ddd6fe !important; }
    .dark [class~="dark:text-violet-400"] { color: #c4b5fd !important; }
    .dark [class~="dark:text-sky-300"] { color: #7dd3fc !important; }
    .dark [class~="dark:text-sky-400"] { color: #38bdf8 !important; }
    .dark [class~="dark:text-emerald-300"] { color: #6ee7b7 !important; }
    .dark [class~="dark:text-emerald-400"] { color: #34d399 !important; }
    .dark [class~="dark:text-orange-300"] { color: #fdba74 !important; }
    .dark [class~="dark:text-orange-400"] { color: #fb923c !important; }
    .dark [class~="dark:text-amber-400"] { color: #fbbf24 !important; }
    .dark [class~="dark:text-red-400"] { color: #f87171 !important; }
    .dark [class~="dark:text-pink-400"] { color: #f472b6 !important; }
    .dark [class~="dark:text-lime-400"] { color: #a3e635 !important; }
    .dark [class~="dark:text-blue-400"] { color: #60a5fa !important; }

    /* ══════════════════════════════════════════════════
       SIDEBAR
    ══════════════════════════════════════════════════ */
    aside {
      background: var(--sidebar-bg) !important;
      border-right: 1px solid var(--sidebar-border);
    }

    /* ══════════════════════════════════════════════════
       CARD SYSTEM
    ══════════════════════════════════════════════════ */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 0.75rem;
      box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 20px rgba(79,70,229,0.05);
      transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
    }
    .card:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 16px 40px rgba(79,70,229,0.09);
      border-color: rgba(79,70,229,0.15);
    }
    .card-clickable { transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s cubic-bezier(0.22,1,0.36,1), border-color 0.22s ease; }
    .card-clickable:hover {
      transform: translateY(-4px);
      cursor: pointer;
      border-color: rgba(99,102,241,0.38);
      box-shadow: 0 10px 22px rgba(15,23,42,0.07), 0 24px 55px rgba(79,70,229,0.14);
    }
    .card-clickable:active { transform: translateY(-1px) scale(0.99); }
    .dark .card-clickable:hover {
      border-color: rgba(129,140,248,0.4);
      box-shadow: 0 10px 26px rgba(0,0,0,0.42), 0 24px 65px rgba(79,70,229,0.2);
    }

    /* Dragon-themed card accent */
    .card-dragon {
      background: linear-gradient(135deg, var(--surface) 0%, rgba(238,242,255,0.5) 100%);
      border: 1px solid rgba(79,70,229,0.15);
      box-shadow: 0 2px 12px rgba(79,70,229,0.08);
    }
    .dark .card {
      box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 18px 45px rgba(0,0,0,0.16);
    }
    .dark .card:hover {
      border-color: rgba(129,140,248,0.26);
      box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 22px 55px rgba(0,0,0,0.22);
    }
    .dark .card-dragon {
      background: linear-gradient(135deg, rgba(49,46,129,0.28) 0%, rgba(15,23,42,0.92) 100%);
      border-color: rgba(129,140,248,0.24);
      box-shadow: 0 18px 48px rgba(0,0,0,0.2);
    }

    /* Module-colored cards — subtle left accent */
    .card-reading   { border-left: 3px solid rgba(14,165,233,0.45) !important; }
    .card-writing   { border-left: 3px solid rgba(139,92,246,0.45) !important; }
    .card-listening { border-left: 3px solid rgba(16,185,129,0.45) !important; }
    .card-speaking  { border-left: 3px solid rgba(249,115,22,0.45) !important; }
    .card-grammar   { border-left: 3px solid rgba(236,72,153,0.45) !important; }
    .card-vocab     { border-left: 3px solid rgba(99,102,241,0.45) !important; }

    /* ══════════════════════════════════════════════════
       BUTTONS
    ══════════════════════════════════════════════════ */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.04em;
      padding: 0.625rem 1.25rem; border-radius: 0.75rem;
      transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
      cursor: pointer; border: none; white-space: nowrap;
    }
    .btn:active { transform: scale(0.96); }
    button:disabled {
      cursor: not-allowed;
      filter: saturate(0.78);
    }

    .btn-primary {
      background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
      color: #ffffff;
      box-shadow: 0 4px 14px rgba(79,70,229,0.35);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
      box-shadow: 0 6px 20px rgba(79,70,229,0.45);
      transform: translateY(-1px);
    }

    .btn-ghost {
      background: transparent;
      color: var(--text-3);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover {
      background: var(--surface-2);
      color: var(--text-1);
      border-color: rgba(79,70,229,0.2);
    }

    .btn-dragon {
      background: linear-gradient(135deg, #1e3a8a 0%, #4f46e5 60%, #6366f1 100%);
      color: white;
      box-shadow: 0 4px 20px rgba(30,58,138,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    .btn-dragon:hover {
      box-shadow: 0 8px 32px rgba(30,58,138,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
      transform: translateY(-2px);
    }

    .bg-indigo-600 {
      background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
      box-shadow: 0 4px 14px rgba(79,70,229,0.35) !important;
    }
    .bg-indigo-600:hover {
      background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%) !important;
      box-shadow: 0 6px 20px rgba(79,70,229,0.45) !important;
    }

    /* ══════════════════════════════════════════════════
       INPUTS
    ══════════════════════════════════════════════════ */
    input, textarea, select {
      background: var(--surface);
      border: 1.5px solid var(--border);
      color: var(--text-1);
      border-radius: 0.75rem;
      font-family: 'Inter', sans-serif;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    input:focus, textarea:focus, select:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
    }

    /* ══════════════════════════════════════════════════
       MODULE ICON CHIPS
    ══════════════════════════════════════════════════ */
    .module-chip {
      display: inline-flex; align-items: center; gap: 0.375rem;
      padding: 0.25rem 0.625rem; border-radius: 9999px;
      font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════════════
       DRAGON BRAND ELEMENTS
    ══════════════════════════════════════════════════ */
    .dragon-badge {
      background: linear-gradient(135deg, #1e3a8a, #4f46e5);
      border: 1px solid rgba(99,102,241,0.4);
      box-shadow: 0 4px 16px rgba(30,58,138,0.3), inset 0 1px 0 rgba(165,180,252,0.2);
    }

    .dragon-glow {
      filter: drop-shadow(0 0 8px rgba(99,102,241,0.6));
    }

    .xp-badge {
      background: linear-gradient(135deg, #d97706, #f59e0b);
      color: white;
      box-shadow: 0 2px 8px rgba(217,119,6,0.35);
    }

    /* ══════════════════════════════════════════════════
       PROGRESS BARS
    ══════════════════════════════════════════════════ */
    .progress-bar {
      height: 6px;
      background: var(--surface-3);
      border-radius: 9999px;
      overflow: hidden;
    }
    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #4f46e5, #6366f1);
      border-radius: 9999px;
      transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
    }
    .progress-bar-gold .progress-bar-fill {
      background: linear-gradient(90deg, #d97706, #f59e0b);
    }

    /* ══════════════════════════════════════════════════
       LEVEL BADGE
    ══════════════════════════════════════════════════ */
    .level-ring {
      border: 2px solid transparent;
      background-clip: padding-box;
      position: relative;
    }
    .level-ring::before {
      content: '';
      position: absolute; inset: -2px;
      border-radius: inherit;
      background: linear-gradient(135deg, #f59e0b, #4f46e5, #f59e0b);
      z-index: -1;
    }

    /* ══════════════════════════════════════════════════
       ANIMATIONS
    ══════════════════════════════════════════════════ */
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fade-slide-in { animation: fadeSlideIn 0.45s cubic-bezier(0.16,1,0.3,1) both; }
    .animate-fade-in { animation: fadeIn 0.4s ease both; }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    @keyframes dragonFloat {
      0%,100% { transform: translateY(0px) rotate(0deg); }
      33%  { transform: translateY(-6px) rotate(1deg); }
      66%  { transform: translateY(-3px) rotate(-0.5deg); }
    }
    .animate-dragon-float { animation: dragonFloat 5s ease-in-out infinite; }

    @keyframes xpFloat {
      0%   { opacity: 0; transform: translateY(14px) scale(0.85); }
      15%  { opacity: 1; transform: translateY(0) scale(1); }
      75%  { opacity: 1; transform: translateY(-6px) scale(1); }
      100% { opacity: 0; transform: translateY(-16px) scale(0.9); }
    }
    .xp-toast { animation: xpFloat 2.8s cubic-bezier(.22,.68,0,1.2) forwards; }

    @keyframes correctBounce {
      0%,100% { transform: scale(1); }
      40%  { transform: scale(1.07); }
      70%  { transform: scale(0.97); }
    }
    .answer-correct { animation: correctBounce 0.45s ease forwards; background-color: #d1fae5 !important; border-color: #10b981 !important; }
    .dark .answer-correct { background-color: rgba(6,95,70,0.32) !important; border-color: #10b981 !important; color: #d1fae5 !important; }

    @keyframes wrongShake {
      0%,100% { transform: translateX(0); }
      20%  { transform: translateX(-8px); }
      40%  { transform: translateX(8px); }
      60%  { transform: translateX(-5px); }
      80%  { transform: translateX(4px); }
    }
    .answer-wrong { animation: wrongShake 0.45s ease forwards; background-color: #fee2e2 !important; border-color: #ef4444 !important; }
    .dark .answer-wrong { background-color: rgba(127,29,29,0.36) !important; border-color: #ef4444 !important; color: #fee2e2 !important; }

    @keyframes shimmer {
      0%   { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }
    .skeleton-shimmer {
      background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.6s infinite linear;
    }

    @keyframes spin360 { to { transform: rotate(360deg); } }
    .animate-spin-slow { animation: spin360 8s linear infinite; }

    /* ══════════════════════════════════════════════════
       3D CARD FLIP
    ══════════════════════════════════════════════════ */
    .flip-card { perspective: 1200px; }
    .flip-card-inner {
      position: relative; width: 100%; height: 100%;
      transition: transform 0.6s cubic-bezier(.4,.2,.2,1);
      transform-style: preserve-3d;
    }
    .flip-card-inner.is-flipped { transform: rotateY(180deg); }
    .flip-card-front, .flip-card-back {
      position: absolute; width: 100%; height: 100%;
      backface-visibility: hidden; -webkit-backface-visibility: hidden;
    }
    .flip-card-back { transform: rotateY(180deg); }

    /* ══════════════════════════════════════════════════
       SCROLLBAR
    ══════════════════════════════════════════════════ */
    *::-webkit-scrollbar { width: 5px; height: 5px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.2); border-radius: 10px; }
    *::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.35); }
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

    /* ══════════════════════════════════════════════════
       TYPOGRAPHY UTILITIES
    ══════════════════════════════════════════════════ */
    .text-gradient {
      background: linear-gradient(135deg, #4f46e5, #8b5cf6, #6366f1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .text-gradient-gold {
      background: linear-gradient(135deg, #d97706, #f59e0b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .text-gradient-fire {
      background: linear-gradient(135deg, #ef4444, #f97316, #f59e0b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ══════════════════════════════════════════════════
       MODULE HERO GRADIENTS
    ══════════════════════════════════════════════════ */
    .hero-reading   { background: linear-gradient(135deg, #0369a1 0%, #0ea5e9 100%); }
    .hero-writing   { background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%); }
    .hero-listening { background: linear-gradient(135deg, #065f46 0%, #10b981 100%); }
    .hero-speaking  { background: linear-gradient(135deg, #c2410c 0%, #f97316 100%); }
    .hero-grammar   { background: linear-gradient(135deg, #9d174d 0%, #ec4899 100%); }
    .hero-vocab     { background: linear-gradient(135deg, #3730a3 0%, #6366f1 100%); }
    .hero-dragon    { background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #4f46e5 100%); }

    /* Shared premium texture on every module hero: soft radial highlights
       below the content, crisp top hairline above it. */
    .hero-reading, .hero-writing, .hero-listening, .hero-speaking,
    .hero-grammar, .hero-vocab, .hero-dragon {
      position: relative;
      overflow: hidden;
    }
    .hero-reading::before, .hero-writing::before, .hero-listening::before,
    .hero-speaking::before, .hero-grammar::before, .hero-vocab::before,
    .hero-dragon::before {
      content: '';
      position: absolute; inset: 0;
      pointer-events: none;
      background-image:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,0.16), transparent 42%),
        radial-gradient(circle at 90% 0%, rgba(255,255,255,0.10), transparent 40%),
        radial-gradient(circle at 50% 130%, rgba(0,0,0,0.16), transparent 55%);
    }
    .hero-reading::after, .hero-writing::after, .hero-listening::after,
    .hero-speaking::after, .hero-grammar::after, .hero-vocab::after,
    .hero-dragon::after {
      content: '';
      position: absolute; inset-inline: 0; top: 0; height: 1px;
      pointer-events: none;
      background: rgba(255,255,255,0.4);
    }

    /* ══════════════════════════════════════════════════
       TOAST NOTIFICATIONS
    ══════════════════════════════════════════════════ */
    .toast {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    /* ══════════════════════════════════════════════════
       BUTTON MICRO-INTERACTIONS
    ══════════════════════════════════════════════════ */
    button { transition: all 0.18s ease; }
    button:active { transform: scale(0.97); }

    /* ══════════════════════════════════════════════════
       LANDING PAGE MESH BG
    ══════════════════════════════════════════════════ */
    .landing-hero-bg {
      background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.16) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(14,165,233,0.10) 0%, transparent 50%),
        linear-gradient(160deg, #eef0ff 0%, #f4f0ff 50%, #edf6ff 100%);
    }
    .dark .landing-hero-bg {
      background:
        radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 20%, rgba(14,165,233,0.12) 0%, transparent 50%),
        linear-gradient(160deg, #08111f 0%, #111827 55%, #0b1220 100%);
    }

    /* ══════════════════════════════════════════════════
       BAND SCORE DISPLAY
    ══════════════════════════════════════════════════ */
    .band-score {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 900;
      background: linear-gradient(135deg, #4f46e5, #6366f1);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* ══════════════════════════════════════════════════
       HEATMAP CELLS
    ══════════════════════════════════════════════════ */
    .heatmap-cell {
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .heatmap-cell:hover {
      transform: scale(1.3);
      box-shadow: 0 0 6px rgba(99,102,241,0.4);
      z-index: 10;
      position: relative;
    }

    /* ══════════════════════════════════════════════════
       POMODORO TIMER (floating)
    ══════════════════════════════════════════════════ */
    .pomodoro-float {
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      background: rgba(15,23,42,0.92);
      border: 1px solid rgba(99,102,241,0.3);
      box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(99,102,241,0.1);
    }

    /* ══════════════════════════════════════════════════
       GLASSMORPHISM OVERLAYS
    ══════════════════════════════════════════════════ */
    .glass {
      background: rgba(255,255,255,0.85);
      backdrop-filter: blur(12px) saturate(160%);
      -webkit-backdrop-filter: blur(12px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.3);
    }
    .dark .glass {
      background: rgba(15,23,42,0.85);
      border: 1px solid rgba(255,255,255,0.08);
    }

    /* ══════════════════════════════════════════════════
       SPEAKING WAVEFORM ANIMATION
    ══════════════════════════════════════════════════ */
    @keyframes waveBar {
      0%,100% { transform: scaleY(0.4); }
      50%     { transform: scaleY(1); }
    }
    .wave-bar { animation: waveBar 0.8s ease-in-out infinite; }
    .wave-bar:nth-child(2) { animation-delay: 0.1s; }
    .wave-bar:nth-child(3) { animation-delay: 0.2s; }
    .wave-bar:nth-child(4) { animation-delay: 0.3s; }
    .wave-bar:nth-child(5) { animation-delay: 0.15s; }

    /* ══════════════════════════════════════════════════
       COLLAPSIBLE TRANSITIONS
    ══════════════════════════════════════════════════ */
    .expand-enter { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .expand-enter-active { max-height: 500px; }

    /* ══════════════════════════════════════════════════
       PREMIUM v2 — ACCESSIBLE FOCUS
    ══════════════════════════════════════════════════ */
    :focus-visible {
      outline: 2px solid rgba(99,102,241,0.85);
      outline-offset: 2px;
      border-radius: 0.5rem;
    }

    /* ══════════════════════════════════════════════════
       PREMIUM v2 — INTERACTIVE CARD LIFT
       Use on any clickable card for a tactile hover.
    ══════════════════════════════════════════════════ */
    .card-lift {
      transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
                  box-shadow 0.25s cubic-bezier(0.22,1,0.36,1),
                  border-color 0.25s ease;
      will-change: transform;
    }
    .card-lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 22px rgba(15,23,42,0.08), 0 24px 60px rgba(79,70,229,0.16);
      border-color: rgba(99,102,241,0.4);
    }
    .card-lift:active { transform: translateY(-1px) scale(0.995); }
    .dark .card-lift:hover {
      box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 0 1px rgba(129,140,248,0.22), 0 24px 70px rgba(79,70,229,0.22);
      border-color: rgba(129,140,248,0.45);
    }

    /* ══════════════════════════════════════════════════
       PREMIUM v2 — GAME CARD
       Gradient hairline ring + sheen sweep + icon pop.
       Markup: <div class="game-card"> … <div class="game-icon">…
    ══════════════════════════════════════════════════ */
    .game-card {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 1.125rem;
      transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
                  box-shadow 0.28s cubic-bezier(0.22,1,0.36,1),
                  border-color 0.28s ease;
      will-change: transform;
    }
    /* gradient hairline ring (fades in on hover) */
    .game-card::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: inherit;
      padding: 1.5px;
      background: linear-gradient(135deg,
        var(--game-accent, #6366f1) 0%,
        transparent 45%, transparent 60%,
        var(--game-accent, #6366f1) 100%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      opacity: 0;
      transition: opacity 0.28s ease;
      pointer-events: none;
      z-index: 2;
    }
    /* sheen sweep */
    .game-card::after {
      content: '';
      position: absolute; top: 0; bottom: 0; left: -80%;
      width: 55%;
      background: linear-gradient(105deg, transparent, rgba(255,255,255,0.16), transparent);
      transform: skewX(-18deg);
      transition: left 0.6s cubic-bezier(0.22,1,0.36,1);
      pointer-events: none;
      z-index: 1;
    }
    .game-card:hover {
      transform: translateY(-5px);
      border-color: transparent;
      box-shadow:
        0 12px 24px rgba(15,23,42,0.10),
        0 28px 70px color-mix(in srgb, var(--game-accent, #6366f1) 22%, transparent);
    }
    .game-card:hover::before { opacity: 1; }
    .game-card:hover::after  { left: 130%; }
    .game-card:active { transform: translateY(-2px) scale(0.99); }
    .dark .game-card { background: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 86%, var(--game-accent, #6366f1) 7%) 100%); }
    .dark .game-card:hover {
      box-shadow:
        0 14px 30px rgba(0,0,0,0.5),
        0 30px 80px color-mix(in srgb, var(--game-accent, #6366f1) 30%, transparent);
    }
    /* soft accent bloom in the icon corner */
    .game-card .game-bloom {
      position: absolute; top: -3rem; left: -3rem;
      width: 9rem; height: 9rem;
      border-radius: 9999px;
      background: radial-gradient(circle, color-mix(in srgb, var(--game-accent, #6366f1) 22%, transparent) 0%, transparent 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .game-card:hover .game-bloom { opacity: 1; }
    .game-card .game-icon {
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .game-card:hover .game-icon { transform: scale(1.12) rotate(-5deg); }
    .game-card .game-cta-arrow { transition: transform 0.25s ease; }
    .game-card:hover .game-cta-arrow { transform: translateX(4px); }

    /* ══════════════════════════════════════════════════
       PREMIUM v2 — IN-GAME ANSWER OPTION
    ══════════════════════════════════════════════════ */
    .stage-option {
      position: relative;
      display: flex; align-items: center; gap: 0.875rem;
      width: 100%;
      text-align: left;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 0.875rem;
      padding: 0.875rem 1.125rem;
      font-weight: 600;
      color: var(--text-2);
      transition: transform 0.18s cubic-bezier(0.22,1,0.36,1),
                  border-color 0.18s ease, box-shadow 0.18s ease,
                  background-color 0.18s ease;
      cursor: pointer;
    }
    .stage-option:hover:not(:disabled) {
      border-color: rgba(99,102,241,0.55);
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(79,70,229,0.14);
      background: color-mix(in srgb, var(--surface) 94%, #6366f1 6%);
    }
    .dark .stage-option:hover:not(:disabled) {
      box-shadow: 0 6px 22px rgba(0,0,0,0.4), 0 0 0 1px rgba(129,140,248,0.25);
      background: color-mix(in srgb, var(--surface) 90%, #818cf8 10%);
    }
    .stage-option .opt-key {
      display: inline-flex; align-items: center; justify-content: center;
      flex: none;
      width: 1.75rem; height: 1.75rem;
      border-radius: 0.5rem;
      font-size: 0.75rem; font-weight: 800;
      font-family: 'JetBrains Mono', monospace;
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--text-3);
      transition: all 0.18s ease;
    }
    .stage-option:hover:not(:disabled) .opt-key {
      background: #6366f1; border-color: #6366f1; color: #fff;
      box-shadow: 0 2px 8px rgba(99,102,241,0.4);
    }

    /* ══════════════════════════════════════════════════
       PREMIUM v2 — MISC UTILITIES
    ══════════════════════════════════════════════════ */
    /* hover-raise for buttons / chips */
    .raise { transition: transform 0.18s ease, box-shadow 0.18s ease; }
    .raise:hover { transform: translateY(-2px); }

    /* slow conic ring spin (for premium emblems) */
    @keyframes conicSpin { to { transform: rotate(360deg); } }
    .animate-conic-spin { animation: conicSpin 14s linear infinite; }

    /* gentle pop-in for grid items */
    @keyframes popIn {
      from { opacity: 0; transform: translateY(14px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .pop-in { animation: popIn 0.5s cubic-bezier(0.22,1,0.36,1) both; }