/* ==========================================================================
   THE NIGHT CLUB — Student Area Theme System (Day / Night)

   ONE stylesheet, ONE set of tokens, ZERO duplicated components.

   HOW IT WORKS
   1. theme-init.js (blocking, in <head>) sets  <html data-theme="dark|light">.
   2. This file defines the student tokens for each value of that attribute.
   3. The few places student.css / learn.css / orders.css / auth.css hardcoded
      a colour (mostly white-tint overlays and purple rgba()) are re-pointed at
      those tokens here, in ONE section, instead of editing those files.

   WHY IT IS SAFE FOR THE PUBLIC SITE
   Every rule below is under  html[data-theme=...]. Public pages never load
   theme-init.js, so <html> has no data-theme and NONE of this applies.
   tokens.css :root is not modified, so public pages are byte-identical.

   WHY NIGHT IS UNCHANGED
   The [data-theme="dark"] block restates the CURRENT values (copied from
   tokens.css / student.css) so Night renders exactly as before. Where a
   component used an inline rgba() that we now express as a token, the token's
   Night value IS that same rgba() — no visual change.

   LOAD ORDER: after tokens/theme/base/auth/site/orders/student (or learn).
   ========================================================================== */


/* ==========================================================================
   A. TOKENS
   ========================================================================== */

/* ---- NIGHT (default) — restates the existing dark identity ---------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Re-declared with their CURRENT values, so the brand palette is explicit
     and lives next to its Day counterpart. Identical to tokens.css. */
  --color-bg: #0a0714;
  --color-surface: #140f24;
  --color-surface-alt: #17112a;
  --color-surface-2: #1c1533;
  --color-text: #f5f3fb;
  --color-text-muted: #a79fc0;
  --color-border: #2b2347;

  /* Accent used as TEXT / icon colour (legible on dark). */
  --accent-text: #a78bfa;
  --accent-text-strong: #c4b5fd;       /* hover state for accent text */

  /* Neutral overlays: white-on-dark. Names describe the ROLE, not the value. */
  --tint-1: rgba(255, 255, 255, 0.015);   /* barely-there panel wash */
  --tint-2: rgba(255, 255, 255, 0.03);    /* pill / trigger background */
  --tint-3: rgba(255, 255, 255, 0.05);    /* hover fill */
  --tint-4: rgba(255, 255, 255, 0.08);    /* progress track */
  --tint-5: rgba(255, 255, 255, 0.12);    /* count badge */
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));

  /* Purple overlays (brand accent at various strengths). */
  --accent-a08: rgba(124, 58, 237, 0.08);
  --accent-a10: rgba(124, 58, 237, 0.10);
  --accent-a12: rgba(124, 58, 237, 0.12);
  --accent-a16: rgba(124, 58, 237, 0.16);
  --accent-a18: rgba(124, 58, 237, 0.18);
  --accent-a20: rgba(124, 58, 237, 0.20);
  --accent-line: rgba(139, 92, 246, 0.50);   /* card hover border */
  --accent-line-strong: rgba(139, 92, 246, 0.55);
  --accent-dash: rgba(139, 92, 246, 0.35);   /* dashed empty-state border */

  /* Header / overlay / elevation */
  --header-bg: rgba(10, 7, 20, 0.78);
  --overlay-scrim: rgba(4, 2, 10, 0.72);
  --overlay-scrim-learn: rgba(10, 7, 20, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-hover: 0 14px 40px rgba(124, 58, 237, 0.2);
  --shadow-hover-lg: 0 18px 44px rgba(124, 58, 237, 0.22);
  --shadow-order-hover: 0 12px 34px rgba(124, 58, 237, 0.16);
  --shadow-panel: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(124, 58, 237, 0.08);
  --shadow-drawer: -24px 0 60px rgba(0, 0, 0, 0.5);
  --shadow-toast: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-hero: 0 24px 70px rgba(0, 0, 0, 0.35);
  --shadow-feature: 0 16px 50px rgba(0, 0, 0, 0.3);

  /* Hero / profile gradient stops (were literal #17112a / #110c20). */
  --hero-from: #17112a;
  --hero-to: #110c20;
  --hero-glow-a: rgba(168, 85, 247, 0.3);
  --hero-glow-b: rgba(124, 58, 237, 0.18);
  --page-glow: rgba(124, 58, 237, 0.2);
  --page-glow-2: rgba(167, 139, 250, 0.05);

  /* Buttons */
  --btn-grad-from: #7c3aed;
  --btn-grad-to: #a855f7;
  --btn-grad-from-hover: #8b45f0;
  --btn-grad-to-hover: #b968f8;
  --btn-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
  --btn-shadow-hover: 0 6px 28px rgba(124, 58, 237, 0.55);
  --stat-grad: linear-gradient(135deg, #fff, #a78bfa);

  /* Progress */
  --progress-track: rgba(255, 255, 255, 0.08);
  --progress-glow: 0 0 12px rgba(168, 85, 247, 0.6);

  /* Semantic colours — TEXT/ICON on the surface, and their soft fills/lines. */
  --success: #34d399;  --success-bg: rgba(52, 211, 153, 0.12);  --success-line: rgba(52, 211, 153, 0.35);
  --info:    #60a5fa;  --info-bg:    rgba(96, 165, 250, 0.12);  --info-line:    rgba(96, 165, 250, 0.35);
  --danger:  #f87171;  --danger-bg:  rgba(248, 113, 113, 0.10); --danger-line:  rgba(248, 113, 113, 0.35);
  --warning: #fbbf24;
  --neutral-bg: rgba(167, 159, 192, 0.10);  --neutral-line: rgba(167, 159, 192, 0.30);
  --ribbon-bg: rgba(6, 40, 30, 0.85);

  /* Form controls */
  --input-bg: #1c1533;
  --input-border: #2b2347;
  --input-border-hover: #9d7ee8;
  --input-placeholder: #a79fc0;
  --focus-ring: rgba(124, 58, 237, 0.2);
  --field-error-bg-ring: rgba(248, 113, 113, 0.18);

  /* Learning page */
  --video-glow: rgba(124, 58, 237, 0.35);
  --lesson-current-bg: #2f2150;
  --lesson-hover-bg: #241a3d;
}

/* ---- DAY — the premium light counterpart ----------------------------------- */
html[data-theme="light"] {
  color-scheme: light;

  /* Warm-tinted off-white page; pure white is reserved for raised surfaces so
     cards visibly lift off the background (hierarchy, not a flat white page). */
  --color-bg: #f6f4fb;
  --color-surface: #ffffff;
  --color-surface-alt: #ffffff;
  --color-surface-2: #f1edfa;          /* thumbnails, skeleton base, wells */
  --color-text: #1a1530;
  --color-text-muted: #5d5675;
  --color-border: #e3dcf3;

  /* Accent as TEXT needs to be darker than the brand fill to clear 4.5:1. */
  --accent-text: #6d28d9;
  --accent-text-strong: #5b21b6;

  /* Neutral overlays flip to INK-on-light so hover/track fills stay visible. */
  --tint-1: rgba(26, 21, 48, 0.02);
  --tint-2: rgba(26, 21, 48, 0.03);
  --tint-3: rgba(26, 21, 48, 0.05);
  --tint-4: rgba(26, 21, 48, 0.08);
  --tint-5: rgba(26, 21, 48, 0.08);
  --glass-sheen: none;

  /* Brand purple, same hue, tuned strength for a light surface. */
  --accent-a08: rgba(124, 58, 237, 0.06);
  --accent-a10: rgba(124, 58, 237, 0.08);
  --accent-a12: rgba(124, 58, 237, 0.09);
  --accent-a16: rgba(124, 58, 237, 0.10);
  --accent-a18: rgba(124, 58, 237, 0.13);
  --accent-a20: rgba(124, 58, 237, 0.14);
  --accent-line: rgba(124, 58, 237, 0.45);
  --accent-line-strong: rgba(124, 58, 237, 0.55);
  --accent-dash: rgba(124, 58, 237, 0.35);

  --header-bg: rgba(255, 255, 255, 0.82);
  --overlay-scrim: rgba(26, 21, 48, 0.45);
  --overlay-scrim-learn: rgba(26, 21, 48, 0.4);
  /* Restrained, cool-purple shadows — soft and low, never heavy. */
  --shadow-card: 0 1px 2px rgba(60, 40, 120, 0.06), 0 1px 1px rgba(60, 40, 120, 0.04);
  --shadow-hover: 0 12px 32px rgba(76, 29, 149, 0.12);
  --shadow-hover-lg: 0 14px 34px rgba(76, 29, 149, 0.13);
  --shadow-order-hover: 0 10px 26px rgba(76, 29, 149, 0.10);
  --shadow-panel: 0 16px 44px rgba(60, 40, 120, 0.16), 0 0 0 1px rgba(124, 58, 237, 0.06);
  --shadow-drawer: -20px 0 48px rgba(60, 40, 120, 0.18);
  --shadow-toast: 0 10px 30px rgba(60, 40, 120, 0.18);
  --shadow-hero: 0 18px 50px rgba(76, 29, 149, 0.12);
  --shadow-feature: 0 12px 34px rgba(76, 29, 149, 0.10);

  /* Hero / profile: soft lavender wash rather than a dark slab. */
  --hero-from: #ffffff;
  --hero-to: #f3eefc;
  --hero-glow-a: rgba(168, 85, 247, 0.18);
  --hero-glow-b: rgba(124, 58, 237, 0.08);
  --page-glow: rgba(124, 58, 237, 0.10);
  --page-glow-2: rgba(167, 139, 250, 0.06);

  /* Buttons: same purple; gradient END darkened so white text clears 4.5:1
     (#a855f7 gave only 3.96:1). Hover goes deeper, not lighter. */
  --btn-grad-from: #7c3aed;
  --btn-grad-to: #6d28d9;
  --btn-grad-from-hover: #6d28d9;
  --btn-grad-to-hover: #5b21b6;
  --btn-shadow: 0 4px 14px rgba(109, 40, 217, 0.28);
  --btn-shadow-hover: 0 6px 20px rgba(109, 40, 217, 0.36);
  /* A white->lavender gradient would vanish on white; use ink->purple. */
  --stat-grad: linear-gradient(135deg, #1a1530, #6d28d9);

  --progress-track: rgba(26, 21, 48, 0.09);
  --progress-glow: 0 0 0 rgba(0, 0, 0, 0);   /* no neon glow in Day */

  /* Semantic: darker text tones; fills stay ~10% tint. All >=4.5:1 on their fill. */
  --success: #047857;  --success-bg: rgba(5, 150, 105, 0.10);  --success-line: rgba(5, 150, 105, 0.35);
  --info:    #1d4ed8;  --info-bg:    rgba(37, 99, 235, 0.10);  --info-line:    rgba(37, 99, 235, 0.32);
  --danger:  #b91c1c;  --danger-bg:  rgba(220, 38, 38, 0.08);  --danger-line:  rgba(220, 38, 38, 0.35);
  --warning: #92400e;
  --neutral-bg: rgba(107, 100, 136, 0.10);  --neutral-line: rgba(107, 100, 136, 0.30);
  --ribbon-bg: rgba(236, 253, 245, 0.95);

  /* Inputs sit on WHITE; border is the stronger 3:1 tone (WCAG 1.4.11),
     not the decorative hairline. Placeholder #736b8c = 4.99:1 on white. */
  --input-bg: #ffffff;
  --input-border: #8f86ac;
  --input-border-hover: #6d28d9;
  --input-placeholder: #736b8c;
  --focus-ring: rgba(124, 58, 237, 0.22);
  --field-error-bg-ring: rgba(220, 38, 38, 0.16);

  --video-glow: rgba(124, 58, 237, 0.22);
  --lesson-current-bg: #ede9fe;
  --lesson-hover-bg: #f5f1fd;

  /* Re-map the accent scale that base/site/learn use for *surfaces*
     (accent-50/100 are "soft purple wash" in both themes). */
  --color-accent-50: #f3eefc;
  --color-accent-100: #e4dbfb;
  --color-accent-300: #7c3aed;
  --color-accent-600: #6d28d9;   /* base.css link colour on light */
  --color-accent-700: #5b21b6;
  --color-lavender: #6d28d9;     /* learn.css eyebrows */
  --color-border-soft: rgba(124, 58, 237, 0.16);
  --color-border-strong: rgba(124, 58, 237, 0.34);
  --color-glass: rgba(255, 255, 255, 0.7);
  --shadow-sm: var(--shadow-card);
  --shadow-md: 0 8px 24px rgba(76, 29, 149, 0.10);
  --shadow-lg: 0 14px 38px rgba(76, 29, 149, 0.16);
  --glow-accent: 0 12px 34px rgba(76, 29, 149, 0.14);
  --border-soft: rgba(124, 58, 237, 0.16);
  --shadow-float: 0 24px 60px -20px rgba(60, 40, 120, 0.25);
}


/* ==========================================================================
   B. RE-POINT HARDCODED VALUES AT TOKENS
   Same selectors as student.css, loaded after it. In Night each token equals
   the value it replaces, so nothing changes; in Day the token differs.
   Scoped to html[data-theme] so it can never leak to public pages.
   ========================================================================== */

/* ---- Page + shell ---------------------------------------------------------- */
html[data-theme] .student-page {
  background:
    radial-gradient(1100px 520px at 50% -140px, var(--page-glow), transparent 70%),
    radial-gradient(700px 400px at 100% 40%, var(--page-glow-2), transparent 70%),
    var(--color-bg);
}
html[data-theme] body { background-color: var(--color-bg); }
html[data-theme] .learn-page { background: var(--color-bg); }
html[data-theme] ::selection { background: var(--color-accent-500); color: #fff; }

html[data-theme] .student-header { background: var(--header-bg); }
html[data-theme] .student-nav-link:hover { background: var(--tint-3); }
html[data-theme] .student-nav-link.is-active { background: var(--accent-a18); }
html[data-theme="light"] .student-nav-link.is-active { color: var(--accent-text-strong); }

html[data-theme] .account-trigger { background: var(--tint-2); }
html[data-theme] .account-trigger:hover,
html[data-theme] .account-trigger.is-open { background: var(--accent-a10); }
html[data-theme] .account-panel { box-shadow: var(--shadow-panel); }
html[data-theme] .account-item:hover,
html[data-theme] .mobile-link:hover { background: var(--accent-a12); }
html[data-theme] .account-item.is-active,
html[data-theme] .mobile-link.is-active { background: var(--accent-a20); }
html[data-theme="light"] .account-item.is-active,
html[data-theme="light"] .mobile-link.is-active { color: var(--accent-text-strong); }
html[data-theme="light"] .account-signout:hover,
html[data-theme="light"] .mobile-signout:hover { color: var(--danger); background: var(--danger-bg); }
html[data-theme] .mobile-backdrop { background: var(--overlay-scrim); }
html[data-theme] .mobile-drawer { box-shadow: var(--shadow-drawer); }
html[data-theme] .mobile-close:hover { background: var(--tint-3); }
html[data-theme] .avatar { color: #fff; }   /* white on purple in both themes */

html[data-theme] .student-footer { background: var(--color-surface); }

/* Brand wordmark: dark text in Day is inherited from --color-text; the span
   keeps the brand purple. Nothing to override. */

/* ---- Text links / accent text ---------------------------------------------
   .btn-ghost colour now lives in buttons.css (single source of truth) —
   excluded from this group so it isn't shadowed there. ---------------------- */
html[data-theme] .eyebrow,
html[data-theme] .text-link,
html[data-theme] .toggle-password,
html[data-theme] .order-card-coupon,
html[data-theme] .activity-dot,
html[data-theme] .shortcut-icon,
html[data-theme] .setting-icon,
html[data-theme] .empty-state-icon { color: var(--accent-text); }
html[data-theme] .text-link:hover { color: var(--accent-text-strong); }

/* ---- Buttons ----------------------------------------------------------------
   Colour now lives entirely in buttons.css, which already reads the
   --btn-grad-* tokens defined above in this file (section A) for both
   Night and Day. Do not re-add .btn-primary/.btn-outline colour here. ---- */
html[data-theme="light"] .btn[disabled] { opacity: 0.55; }   /* Night keeps auth.css's .65 */

/* ---- Cards ------------------------------------------------------------------- */
html[data-theme] .s-card,
html[data-theme] .stat-card,
html[data-theme] .learn-card,
html[data-theme] .order-card,
html[data-theme] .continue-feature {
  background: var(--glass-sheen), var(--color-surface-alt);
  box-shadow: var(--shadow-card);
}
html[data-theme] .continue-feature { box-shadow: var(--shadow-feature); }
html[data-theme] .s-card.is-interactive:hover { border-color: var(--accent-line); box-shadow: var(--shadow-hover); }
html[data-theme] .learn-card:hover { border-color: var(--accent-line-strong); box-shadow: var(--shadow-hover-lg); }
html[data-theme] .order-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-order-hover); }

html[data-theme] .hero-card {
  background:
    radial-gradient(600px 260px at 88% 0%, var(--hero-glow-a), transparent 70%),
    radial-gradient(500px 240px at 0% 100%, var(--hero-glow-b), transparent 70%),
    linear-gradient(180deg, var(--hero-from), var(--hero-to));
  box-shadow: var(--shadow-hero);
}
html[data-theme] .profile-header {
  background:
    radial-gradient(500px 220px at 100% 0%, var(--hero-glow-a), transparent 70%),
    linear-gradient(180deg, var(--hero-from), var(--hero-to));
}
html[data-theme] .stat-value { background: var(--stat-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Progress ----------------------------------------------------------------- */
html[data-theme] .progress-track { background: var(--progress-track); }
html[data-theme] .progress-fill { box-shadow: var(--progress-glow); }
html[data-theme] .course-progress-bar { background: var(--color-surface-2); }

/* ---- Tabs / chips -------------------------------------------------------------- */
html[data-theme="light"] .tab-bar { background: var(--color-surface-2); }   /* Night: student.css as-is */
html[data-theme] .tab[aria-selected="true"] {
  background: linear-gradient(135deg, var(--btn-grad-from), var(--btn-grad-to));
  box-shadow: var(--btn-shadow);
  color: #fff;
}
html[data-theme] .tab-count { background: var(--tint-5); }
html[data-theme="light"] .tab[aria-selected="true"] .tab-count { background: rgba(255, 255, 255, 0.22); }

/* ---- Card internals -------------------------------------------------------------- */
html[data-theme] .activity-dot,
html[data-theme] .shortcut-icon,
html[data-theme] .setting-icon,
html[data-theme] .empty-state-icon { background: var(--accent-a16); }
html[data-theme] .learn-card-ribbon { background: var(--ribbon-bg); border-color: var(--success-line); color: var(--success); }
html[data-theme] .is-completed .learn-card-pct { color: var(--success); }
html[data-theme] .kv-row.is-discount dd { color: var(--success); }

/* ---- Status pills — tokenised; glyph + text label already convey state ----------- */
html[data-theme] .status-CAPTURED,
html[data-theme] .receipt-status.status-CAPTURED   { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-line); }
html[data-theme] .status-AUTHORIZED,
html[data-theme] .receipt-status.status-AUTHORIZED { background: var(--info-bg);    color: var(--info);    border: 1px solid var(--info-line); }
html[data-theme] .status-CREATED,
html[data-theme] .status-EXPIRED,
html[data-theme] .receipt-status.status-CREATED,
html[data-theme] .receipt-status.status-EXPIRED    { background: var(--neutral-bg); color: var(--color-text-muted); border: 1px solid var(--neutral-line); }
html[data-theme] .status-FAILED,
html[data-theme] .status-CANCELLED,
html[data-theme] .receipt-status.status-FAILED,
html[data-theme] .receipt-status.status-CANCELLED  { background: var(--danger-bg);  color: var(--danger);  border: 1px solid var(--danger-line); }
/* Pills are rounded-full in orders.css; keep that for the list badge. */
html[data-theme] .status-badge { border-radius: var(--radius-full); }

/* ---- Forms ---------------------------------------------------------------------------- */
html[data-theme] .input,
html[data-theme] input[type="text"],
html[data-theme] input[type="email"],
html[data-theme] input[type="password"],
html[data-theme] input[type="search"],
html[data-theme] select,
html[data-theme] textarea {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--color-text);
}
html[data-theme="light"] .input,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="search"],
html[data-theme="light"] select,
html[data-theme="light"] textarea { border-color: var(--input-border); }
html[data-theme] .input:hover { border-color: var(--input-border-hover); }
html[data-theme] .input::placeholder,
html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder { color: var(--input-placeholder); opacity: 1; }
html[data-theme] .input:focus,
html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
html[data-theme] .field-error { color: var(--danger); }
html[data-theme] .field.has-error .input { border-color: var(--danger); box-shadow: 0 0 0 3px var(--field-error-bg-ring); }
html[data-theme] .toggle-password:hover { background: var(--accent-a18); }
html[data-theme] .password-tips { border-color: var(--color-border); }
html[data-theme="light"] .password-tips { background: var(--color-surface-2); border-style: solid; }
/* Browser autofill would otherwise paint its own (often blue/white) fill. */
html[data-theme] input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  transition: background-color 9999s ease-in-out 0s;
}
html[data-theme="light"] input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; }
html[data-theme="dark"]  input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #1c1533 inset; }

/* Checkbox / radio: let the browser draw them for the active color-scheme,
   tinted with the brand purple. */
html[data-theme] input[type="checkbox"],
html[data-theme] input[type="radio"] { accent-color: var(--color-accent-500); }

/* ---- Alerts ---------------------------------------------------------------------------- */
html[data-theme] .alert-error   { background: var(--danger-bg);  border-color: var(--danger-line);  color: var(--danger); }
html[data-theme] .alert-success { background: var(--success-bg); border-color: var(--success-line); color: var(--success); }
html[data-theme="light"] .alert-info { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text); }

/* ---- Empty / error states ------------------------------------------------------------------ */
html[data-theme] .empty-state {
  border-color: var(--accent-dash);
  background: radial-gradient(400px 200px at 50% 0%, var(--accent-a12), transparent 70%), var(--tint-1);
}
html[data-theme="light"] .empty-state {
  background: radial-gradient(400px 200px at 50% 0%, var(--accent-a12), transparent 70%), var(--color-surface);
}
html[data-theme] .empty-state.is-error { border-color: var(--danger-line); }
html[data-theme] .empty-state.is-error .empty-state-icon { background: var(--danger-bg); color: var(--danger); }
html[data-theme] .state-panel { background: var(--color-surface-alt); }

/* ---- Skeleton loaders — must stay VISIBLE in Day ------------------------------------------- */
/* Night skeleton stays exactly as theme.css defines it. */
html[data-theme="light"] .skeleton {
  background: linear-gradient(90deg, #ece7f7 25%, #f7f4fd 37%, #ece7f7 63%);
  background-size: 400% 100%;
}
html[data-theme="light"] .learn-card-skeleton { background: var(--color-surface); }

/* ---- Toasts (also the success/error signal for form saves) ---------------------------------- */
html[data-theme] .toast { box-shadow: var(--shadow-toast); }
html[data-theme="light"] .toast { background: var(--color-surface); }
/* Day: coloured left bar so success/error is not colour-hue-alone AND is clearly
   visible on a light surface. Night keeps student.css's border-only look. */
html[data-theme="light"] .toast-success { border-color: var(--success-line); border-left: 4px solid var(--success); }
html[data-theme="light"] .toast-error   { border-color: var(--danger-line);  border-left: 4px solid var(--danger); }

/* ---- Thumbnails / media wells ---------------------------------------------------------------- */
html[data-theme] .thumb-fallback {
  background: linear-gradient(135deg, var(--color-accent-50), var(--color-surface-2));
  color: var(--accent-text);
}
html[data-theme="dark"] .thumb-fallback { color: #9d7ee8; }   /* exact existing value */
html[data-theme] .continue-feature-thumb,
html[data-theme] .learn-card-thumb,
html[data-theme] .order-card-thumb,
html[data-theme] .receipt-course-thumb { background: var(--color-surface-2); }


/* ==========================================================================
   C. COURSE LEARNING PAGE (learn.html)
   Only the SURROUNDING interface is themed. The video frame, its aspect
   ratio, controls, playback, fullscreen and the Bunny.net iframe are NOT
   touched. `.lesson-video-wrap` keeps its black letterbox background and
   `.lesson-video-frame` is not referenced anywhere in this file.
   ========================================================================== */

html[data-theme="light"] .learn-header { background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
/* Night .learn-header stays learn.css's opaque --color-surface, unchanged. */
html[data-theme] .learn-main { background: var(--color-bg); }
html[data-theme] .learn-sidebar { background: var(--color-surface-alt); }
html[data-theme="light"] .learn-sidebar { background: #fbfaff; }   /* a hair off the page so the rail reads as a panel */
html[data-theme] .learn-sidebar-backdrop { background: var(--overlay-scrim-learn); }
html[data-theme] .lesson-video-glow { background: radial-gradient(closest-side, var(--video-glow), transparent 70%); }
html[data-theme="light"] .lesson-video-wrap { box-shadow: 0 18px 44px rgba(76, 29, 149, 0.22); }

/* Curriculum states — distinguishable WITHOUT relying on colour alone:
   current  = filled background + 2px accent bar + bold weight  (+ aria-current)
   complete = checkmark ICON (swapped in by learn.js)           (+ accent icon)
   locked   = padlock ICON                                       (+ muted text)
   normal   = plain type icon                                                     */
html[data-theme] .curriculum-module-header:hover,
html[data-theme] .curriculum-lesson-btn:hover { background: var(--lesson-hover-bg); }
html[data-theme] .curriculum-lesson-btn[aria-current="true"] {
  background: var(--lesson-current-bg);
  border-left-color: var(--color-accent-500);
}
html[data-theme="light"] .curriculum-lesson-btn[aria-current="true"] { font-weight: 500; }
html[data-theme="light"] .curriculum-lesson-btn[aria-current="true"] { color: var(--accent-text-strong); }
html[data-theme="light"] .curriculum-lesson-icon--completed { color: var(--success); }
html[data-theme="light"] .lesson-completed-badge,
html[data-theme="light"] .course-complete-banner { color: var(--accent-text-strong); }
html[data-theme="light"] .lesson-locked { background: var(--color-surface-alt); border-color: var(--accent-dash); }
html[data-theme="light"] .lesson-locked-icon { background: var(--lesson-current-bg); color: var(--accent-text); }
html[data-theme="light"] .up-next-card { background: linear-gradient(135deg, #f3eefc, #ffffff); }
html[data-theme] .learn-header-nav a:not(.btn) { color: var(--color-text-muted); }
html[data-theme] .learn-header-nav a:not(.btn):hover { color: var(--accent-text-strong); }

/* The learn header is not the student shell; give its toggle a stable slot. */
.learn-header-nav .theme-toggle { flex-shrink: 0; }


/* ==========================================================================
   D. THEME TOGGLE  (rendered by theme-toggle.js)
   Minimal 40px ghost icon button — the sun/moon glyph is the only ornament.
   ========================================================================== */

/* Right cluster in the student header. margin-left:auto moved here from
   .account-menu so the toggle and account menu travel together. */
.student-header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.student-header-actions .account-menu { margin-left: 0; }
@media (max-width: 768px) {
  /* Mirrors the existing `.account-menu { display:none }` rule: on phones the
     toggle lives in the drawer, and the burger takes the right edge. */
  .student-header-actions { display: none; }
}

.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--tint-2, transparent);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease, ease), border-color 0.15s var(--ease, ease), background-color 0.15s var(--ease, ease);
}
.theme-toggle:hover { color: var(--color-text); border-color: var(--color-accent-500); background: var(--accent-a10, transparent); }
.theme-toggle:active { transform: scale(0.96); }
.theme-toggle:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }

/* Icon rule: Night shows the SUN ("go to Day"); Day shows the MOON ("go to Night").
   Both are in the DOM, so first paint is correct with no JS timing. */
.theme-toggle .theme-icon { position: absolute; transition: opacity 0.18s ease, transform 0.25s var(--ease, ease); }
.theme-toggle .theme-icon-moon { opacity: 0; transform: rotate(-40deg) scale(0.6); }
html[data-theme="light"] .theme-toggle .theme-icon-sun  { opacity: 0; transform: rotate(40deg) scale(0.6); }
html[data-theme="light"] .theme-toggle .theme-icon-moon { opacity: 1; transform: none; }
html:not([data-theme="light"]) .theme-toggle .theme-icon-sun { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle:hover { color: var(--accent-text-strong); }

/* Drawer (phones): a full-width, 48px row — a comfortable touch target. */
.mobile-appearance { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); }
.mobile-appearance-label { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-muted); }
.theme-toggle--drawer { width: 48px; height: 48px; }

/* learn.html header: keep it compact and aligned with the other nav items. */
.theme-toggle--learn { width: 36px; height: 36px; }


/* ==========================================================================
   E. THEME-SWITCH TRANSITION  (+ reduced motion)
   Only colour-ish properties, only on the surfaces that change, ~200ms.
   We deliberately do NOT use a blanket `* { transition: ... }`: that would
   also animate layout/transform, fight existing hover/entry animations and
   janks large pages. `.theme-transition` is added by JS for the duration of a
   manual switch only, so normal hover behaviour is untouched the rest of the
   time and initial page load never animates.
   ========================================================================== */

html.theme-transition body,
html.theme-transition .student-header,
html.theme-transition .learn-header,
html.theme-transition .student-footer,
html.theme-transition .s-card,
html.theme-transition .stat-card,
html.theme-transition .learn-card,
html.theme-transition .order-card,
html.theme-transition .continue-feature,
html.theme-transition .hero-card,
html.theme-transition .profile-header,
html.theme-transition .account-trigger,
html.theme-transition .account-panel,
html.theme-transition .mobile-drawer,
html.theme-transition .learn-sidebar,
html.theme-transition .learn-main,
html.theme-transition .input,
html.theme-transition .btn,
html.theme-transition .tab-bar,
html.theme-transition .empty-state,
html.theme-transition .status-badge,
html.theme-transition .theme-toggle,
html.theme-transition .kv-row,
html.theme-transition .curriculum-lesson-btn {
  transition:
    background-color 0.22s ease,
    border-color 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition *,
  .theme-toggle,
  .theme-toggle .theme-icon { transition: none !important; }
}