/* ============================================================================
   FLIGHT DECK 2030 — SATs Superstars MAX design system
   Dark-first junior-mission-control aesthetic. OKLCH tokens. Amber-tinted neutrals.
   ============================================================================ */

/* Fonts loaded via <link> in index.html */

:root {
  /* ── SURFACES (OKLCH, neutrals tinted toward amber hue 78) ── */
  --bg:           oklch(0.155 0.012 78);     /* deep graphite with warm hint */
  --bg-2:         oklch(0.185 0.015 78);     /* raised panel */
  --surface:      oklch(0.21 0.016 78 / 0.62);
  --surface-2:    oklch(0.26 0.018 78 / 0.72);
  --border:       oklch(0.92 0.01 78 / 0.10);
  --border-2:     oklch(0.92 0.01 78 / 0.18);

  /* ── TEXT ── */
  --text-1:       oklch(0.97 0.015 78);      /* warm white — primary */
  --text-2:       oklch(0.74 0.02 78);       /* meta text */
  --text-3:       oklch(0.60 0.025 78);      /* WCAG AA verified ≥5:1 on --bg */

  /* ── TYPOGRAPHY — Boldonse (display) + Nunito (body, rounded+friendly) + Geist Mono (data) ── */
  --font-main:    'Nunito', 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Boldonse', ui-sans-serif, sans-serif;
  --font-working: 'Nunito', 'General Sans', ui-sans-serif, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display-tracking: 0.01em;    /* Boldonse is geometric; slight open tracking reads well */
  --font-mono-tracking: 0.01em;

  /* ── ACCENTS (one dominant + one success + one alert) ── */
  --accent:       oklch(0.78 0.17 78);       /* championship amber */
  --accent-2:     oklch(0.86 0.15 82);       /* lit amber (hovers) */
  --accent-ink:   oklch(0.22 0.06 78);       /* for text on amber */
  --accent-glow:  oklch(0.78 0.17 78 / 0.22);

  --success:      oklch(0.76 0.17 150);      /* victory green — reserved for earned wins */
  --success-2:    oklch(0.84 0.14 150);
  --success-glow: oklch(0.76 0.17 150 / 0.22);

  --alert:        oklch(0.66 0.22 27);       /* precision crimson */
  --alert-2:      oklch(0.74 0.20 25);
  --alert-glow:   oklch(0.66 0.22 27 / 0.22);

  --info:         oklch(0.74 0.13 232);      /* signal blue — links/info */

  /* ── LEGACY TOKEN ALIASES (prevent breakage in existing inline styles) ── */
  --sky:          oklch(0.74 0.13 232);
  --emerald:      var(--success);
  --amber:        var(--accent);
  --rose:         var(--alert);

  /* ── RADII — crisper corners, engineered feel ── */
  --r-xl:         20px;
  --r-lg:         16px;
  --r-md:         12px;
  --r-sm:         8px;

  /* ── SPACING (4pt scale, semantic) ── */
  --space-xs:     4px;
  --space-sm:     8px;
  --space-md:     12px;
  --space-lg:     16px;
  --space-xl:     24px;
  --space-2xl:    32px;
  --space-3xl:    48px;
  --space-4xl:    64px;
  --space-5xl:    96px;

  --sidebar-w:    260px;

  /* ── MOTION — sharp, confident, sub-300ms ── */
  --ease-out:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);          /* ease-out-expo */
  --ease-quart:   cubic-bezier(0.25, 1, 0.5, 1);          /* ease-out-quart */
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);      /* kept for accent moments only */
  --dur-fast:     120ms;
  --dur-med:      200ms;
  --dur-slow:     320ms;

  /* ── SHADOWS — crisp, not glowy ── */
  --card-shadow:  0 1px 0 oklch(1 0 0 / 0.04) inset, 0 8px 24px -12px oklch(0 0 0 / 0.60);
  --card-shadow-lg: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 24px 60px -20px oklch(0 0 0 / 0.70);

  --glass-bg:     oklch(0.185 0.015 78 / 0.85);
  --glass-border: oklch(1 0 0 / 0.08);

  /* ── GRADIENTS — retained as legacy aliases; prefer solid colors for new work ── */
  --grad-primary: linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-emerald: linear-gradient(135deg, var(--success), var(--success-2));
  --grad-amber:   linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-rose:    linear-gradient(135deg, var(--alert), var(--alert-2));
  --grad-sky:     linear-gradient(135deg, var(--info), oklch(0.82 0.10 232));

  --shimmer:      linear-gradient(90deg, transparent, oklch(1 0 0 / 0.05), transparent);

  /* Accent palette variants for backwards-compat */
  --accent-glow: oklch(0.78 0.17 78 / 0.22);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Global typography defaults */
html { font-family: var(--font-main); letter-spacing: -0.005em; }
body { color: var(--text-1); background: var(--bg); font-feature-settings: "ss01", "cv11"; }

/* Display headings — Boldonse is a single-weight geometric display face */
h1, h2, h3, .page-title, .hero-title {
  font-family: var(--font-heading);
  letter-spacing: var(--font-display-tracking);
  font-weight: 400;  /* Boldonse has no weight axis — 400 renders its designed weight */
  line-height: 1.08;
}

/* Data should feel engineered */
.mono, .metric, .telemetry, [data-font="mono"] {
  font-family: var(--font-mono);
  letter-spacing: var(--font-mono-tracking);
  font-variant-numeric: tabular-nums;
}

/* CSP-safe replacement for onmouseover inline hover scale */
.wizard-cta-scale:hover { transform: scale(1.02); }

/* ───────────────────────────────────────────────────────────────────────────
   FLIGHT DECK 2030 — new component styles
   ─────────────────────────────────────────────────────────────────────────── */

/* Telemetry tile — leading mono label, big number, corner status dot.
   Replaces the banned border-left stripe pattern. */
.tele-tile {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-med) var(--ease-quart),
              transform var(--dur-med) var(--ease-quart);
}
.tele-tile::after {
  /* Corner bracket — flight-deck panel corner, not a stripe */
  content: "";
  position: absolute;
  top: 8px; right: 8px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
  opacity: 0.7;
}
.tele-tile:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
}

/* MAX badge — used in splash and anywhere we need the "ultimate edition" mark */
.max-badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-heading);
  font-size: 0.72em;
  letter-spacing: 0.04em;
  border-radius: 5px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Small status dot (flight-deck motif) */
.status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.status-dot--on     { background: var(--success); box-shadow: 0 0 8px var(--success-glow); }
.status-dot--warn   { background: var(--accent);  box-shadow: 0 0 8px var(--accent-glow); }
.status-dot--alert  { background: var(--alert);   box-shadow: 0 0 8px var(--alert-glow); }
.status-dot--info   { background: var(--info);    box-shadow: 0 0 8px oklch(0.74 0.13 232 / 0.5); }

/* Mono eyebrow label (flight-deck category text) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--text-3);
  text-transform: uppercase;
  font-weight: 500;
}

/* Sharp primary button — replaces gradient-heavy CTAs */
.btn-deck {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 22px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quart),
              transform var(--dur-fast) var(--ease-quart);
}
.btn-deck:hover  { background: var(--accent-2); }
.btn-deck:active { transform: scale(0.98); }
.btn-deck--success { background: var(--success); color: oklch(0.18 0.04 150); }
.btn-deck--success:hover { background: var(--success-2); }

/* Divider with centered label — "panel header" look */
.deck-divider {
  display: flex; align-items: center; gap: 12px;
  margin: var(--space-xl) 0 var(--space-lg);
}
.deck-divider::before,
.deck-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.deck-divider span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--text-3);
  text-transform: uppercase;
}

/* ── STUDIO.IO V4: QUEST MODE (ENERGY & TOKENS) ── */
.energy-bar-wrap {
  width: 140px;
  height: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.energy-bar-fill {
  height: 100%;
  background: var(--grad-emerald);
  border-radius: 100px;
  transition: width 0.6s var(--ease-out);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.energy-icon {
  position: absolute;
  left: 8px;
  font-size: 14px;
  color: #fff;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
}

.token-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 215, 0, 0.1);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 100px;
  color: #ffd700;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* ── STUDIO.IO V4: BUS STOP METHOD (CSS GRID) ── */
.bus-stop-grid {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 0;
  margin: 24px 0;
  font-family: var(--font-working);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  color: var(--text-1);
  background: rgba(255,255,255,0.02);
  padding: 20px;
  border-radius: var(--r-md);
  border: 1px dashed var(--border);
}

.divisor-cell {
  grid-row: 2;
  grid-column: 1;
  padding: 8px 16px;
  border-right: 2px solid var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
}

.dividend-container {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 2px solid var(--text-1);
}

.quotient-row {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  gap: 16px;
  padding: 4px 16px;
  color: var(--emerald);
  font-weight: 800;
}

.digit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
}

.remainder-small {
  font-size: 13px;
  color: var(--rose);
  font-weight: 700;
  margin-bottom: -4px;
}

/* ── STUDIO.IO PREMIUM ANIMATIONS ── */
@keyframes anim-in {
  from { opacity: 0; transform: translateY(30px) scale(0.96); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0px); }
}

@keyframes anim-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 oklch(0.78 0.17 78 / 0.40); }
  70% { box-shadow: 0 0 0 10px oklch(0.78 0.17 78 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.78 0.17 78 / 0); }
}

@keyframes premium-shimmer {
  0% { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(200%) skewX(-20deg); }
}

.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--surface);
}

.shimmer::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: premium-shimmer 2.5s infinite var(--ease-expo);
}

.stagger > * {
  opacity: 0;
  animation: anim-in 0.8s var(--ease-expo) forwards;
}

.stagger > *:nth-child(1) { animation-delay: 0.1s; }
.stagger > *:nth-child(2) { animation-delay: 0.2s; }
.stagger > *:nth-child(3) { animation-delay: 0.3s; }
.stagger > *:nth-child(4) { animation-delay: 0.4s; }
.stagger > *:nth-child(5) { animation-delay: 0.5s; }
.stagger > *:nth-child(6) { animation-delay: 0.6s; }
.stagger > *:nth-child(7) { animation-delay: 0.7s; }
.stagger > *:nth-child(8) { animation-delay: 0.8s; }

/* fadeSlideIn — used by XP animation in app.js */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-10px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)     scale(1);    }
}

/* k2sFeedbackIn — bouncy entrance for correct/wrong feedback boxes */
@keyframes k2sFeedbackIn {
  from { opacity: 0; transform: scale(0.82) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* Session end card entrance */
@keyframes k2sEndCardIn {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Badge pop — used when a new badge is earned */
@keyframes k2sBadgePop {
  0%   { transform: scale(0.5);  opacity: 0; }
  60%  { transform: scale(1.2);  opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}

.anim-in { animation: anim-in 0.5s var(--ease-out) forwards; }
.anim-fade { animation: anim-fade 0.4s ease-out forwards; }

@keyframes timerPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); color: var(--rose); }
  100% { transform: scale(1); }
}

/* ── K2S SESSION COMPONENTS ── */
.session-btn {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 18px 12px;
  border-radius: 20px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.18s var(--ease-quart), box-shadow 0.18s ease;
  text-align: center;
  line-height: 1.3;
}
.session-btn:hover  { transform: translateY(-3px) scale(1.03); }
.session-btn:active { transform: translateY(0)    scale(0.97); }
.session-btn-q5  { background: var(--success); color: oklch(0.18 0.04 150); box-shadow: 0 8px 24px -6px oklch(0.76 0.17 150 / 0.40); }
.session-btn-q10 { background: var(--accent);  color: var(--accent-ink);    box-shadow: 0 8px 24px -6px oklch(0.78 0.17 78 / 0.40); }
.session-btn-q20 { background: var(--accent-2); color: var(--accent-ink);   box-shadow: 0 8px 24px -6px oklch(0.86 0.15 82 / 0.40); }

.session-end-card {
  animation: k2sEndCardIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 40px 32px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

/* ── K2S SESSION PROGRESS BAR ── */
.session-progress-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 20px;
}
.session-progress-bar-fill {
  height: 100%;
  border-radius: 100px;
  transition: width 0.4s var(--ease-out);
}

/* ── K2S TROPHY ROOM — HOME HEADER ── */
.trophy-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 8px 28px rgba(0,0,0,0.4);
}

/* Rank badge — rounded square with glow */
.rank-hex {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: var(--rank-bg, rgba(161,98,7,0.2));
  border: 2px solid var(--rank-color, #a16207);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 0 24px var(--rank-bg, rgba(161,98,7,0.3));
  transition: transform 0.2s ease;
}
.rank-hex:hover { transform: scale(1.05); }

.xp-bar-wrap {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.07);
  border-radius: 100px;
  overflow: hidden;
  margin: 6px 0 4px;
}
.xp-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: var(--accent);
  transition: width 0.8s var(--ease-out);
  box-shadow: 0 0 10px oklch(0.78 0.17 78 / 0.45);
}

.streak-flame {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  color: #f97316;
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.25);
  padding: 6px 12px;
  border-radius: 50px;
  white-space: nowrap;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  animation: k2sBadgePop 0.4s var(--ease-bounce) forwards;
}

/* ── K2S PULSING CHECK BUTTON — amber pulse, no banned purple gradient ── */
@keyframes k2sCheckPulse {
  0%   { box-shadow: 0 0 0 0   oklch(0.78 0.17 78 / 0.55), 0 6px 20px oklch(0.78 0.17 78 / 0.30); }
  60%  { box-shadow: 0 0 0 10px oklch(0.78 0.17 78 / 0),   0 6px 20px oklch(0.78 0.17 78 / 0.30); }
  100% { box-shadow: 0 0 0 0   oklch(0.78 0.17 78 / 0),   0 6px 20px oklch(0.78 0.17 78 / 0.30); }
}
.k2s-check-btn {
  transition: transform 0.15s var(--ease-quart), box-shadow 0.15s ease, background 0.2s ease;
}
.k2s-check-btn:active { transform: scale(0.96); }
.k2s-check-ready {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: transparent !important;
  animation: k2sCheckPulse 1.6s ease-in-out infinite;
  transform: scale(1.02);
}

/* ── TT ROCKSTARS — TABLE BUTTONS ── */
.tt-table-btn {
  padding: 16px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 2px solid var(--tt-col, var(--accent));
  text-align: center;
  cursor: pointer;
  color: var(--tt-col, var(--accent));
  transition: transform 0.15s var(--ease-quart), box-shadow 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.tt-table-btn:hover {
  transform: scale(1.08) translateY(-2px);
  background: color-mix(in srgb, var(--tt-col, var(--accent)) 15%, transparent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--tt-col, var(--accent)) 30%, transparent);
}
.tt-table-btn:active { transform: scale(0.95); }

/* ── K2S MUTE BUTTON ── */
.k2s-mute-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.k2s-mute-btn:hover  { transform: scale(1.1); background: var(--surface-2); }
.k2s-mute-btn:active { transform: scale(0.93); }

/* ── K2S QUESTION CARD ENHANCEMENTS ── */
.question-card-k2s {
  border-radius: 24px !important;
  font-size: 20px !important;
  line-height: 1.65 !important;
}
.question-card-k2s .question-text-main {
  font-size: 20px;
  line-height: 1.65;
  font-weight: 600;
}
[data-subject="maths"] .question-subject-badge { color: #fb923c; }
[data-subject="english"] .question-subject-badge { color: #ec4899; }

/* === STUDIO.IO FLAGSHIP: ANIMATIONS & OVERLAYS === */
#grain-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C%2Ffilter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C%2Fsvg%3E");
  pointer-events: none;
  z-index: 9999;
  opacity: 0.5;
}

body {
  background: var(--bg);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* Duplicate body::before definition removed — canonical version is in MESH BACKGROUND section above */

@keyframes mesh-drift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* NOTE: The canonical .card definition lives below (GLASS CARD section).
   Only the hover/hover-related helpers remain here. */
.card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: var(--border-2);
  box-shadow:
    0 50px 120px rgba(0,0,0,0.7),
    0 0 0 1px var(--accent-glow),
    0 0 80px var(--accent-glow),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Fluid view transition */
.view-fade-in {
  animation: viewFadeIn 0.3s var(--ease-out) forwards;
}

/* ─── ARITHMETIC VISUALISERS ────────────────────────────────────────── */
.math-method-container { margin: 24px 0; font-family: var(--font-working); color: var(--text-2); }
.math-column { border-collapse: collapse; margin: 10px 0; font-size: 24px; font-weight: 800; color: var(--text-1); letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.math-column td { padding: 8px 14px; text-align: right; min-width: 44px; position: relative; }
.math-column .op-cell { text-align: left; padding-right: 24px; color: var(--accent); font-size: 28px; }
.math-column .result-row { border-top: 3px solid var(--text-1); border-bottom: 3px solid var(--text-1); color: var(--accent-2); }
.math-column .carry-digit { position: absolute; top: -4px; right: 4px; font-size: 14px; color: #fb923c; font-weight: 900; opacity: 0.9; }
.math-column .partial-product { color: var(--text-3); font-size: 18px; opacity: 0.7; }

.math-bus-stop { position: relative; display: inline-flex; align-items: flex-end; font-size: 26px; font-weight: 800; color: var(--text-1); margin: 30px 0 10px 10px; }
.math-bus-stop .divisor { padding-right: 16px; border-right: 3px solid var(--text-1); margin-right: 6px; padding-bottom: 6px; }
.math-bus-stop .dividend { padding: 0 16px 6px 16px; border-top: 3px solid var(--text-1); position: relative; }
.math-bus-stop .dividend::before { content: ''; position: absolute; left: -3px; top: -3px; width: 14px; height: 14px; border-left: 3px solid var(--text-1); border-radius: 100% 0 0 0; }
.math-bus-stop .quotient { position: absolute; top: -38px; left: 16px; color: var(--accent); font-size: 22px; }
.math-bus-stop .mini-remainder { position: absolute; top: 0; left: 2px; font-size: 12px; color: #fb923c; font-weight: 900; }

/* ─── CONFIDENCE METER ──────────────────────────────────────────────── */
.confidence-meter { display: flex; gap: 12px; margin: 20px 0; animation: anim-in 0.4s var(--ease-out); }
.conf-btn { 
  flex: 1; padding: 16px; border-radius: 20px; border: 2px solid var(--border); 
  background: rgba(255,255,255,0.02); cursor: pointer; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.conf-btn:hover { border-color: var(--accent); transform: translateY(-4px); background: oklch(0.78 0.17 78 / 0.06); }
.conf-btn.active { border-color: var(--accent); background: var(--accent); box-shadow: 0 10px 30px var(--accent-glow); }
.conf-btn.active span { color: var(--accent-ink) !important; }
.conf-btn .emoji { font-size: 24px; }
.conf-btn .label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); }
.conf-btn.active .label { color: var(--accent-ink); }

/* ─── MASTERY POWER BAR ─────────────────────────────────────────────── */
.mastery-container { display: flex; align-items: center; gap: 12px; background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15); padding: 4px 12px; border-radius: 100px; height: 32px; }
.mastery-bar-bg { width: 80px; height: 6px; background: rgba(255,255,255,0.05); border-radius: 100px; overflow: hidden; }
.mastery-bar-fill { height: 100%; background: var(--success); width: 0%; transition: width 1s var(--ease-expo); box-shadow: 0 0 10px oklch(0.76 0.17 150 / 0.45); }
.mastery-level { font-size: 11px; font-weight: 800; color: var(--success); text-transform: uppercase; letter-spacing: 0.05em; }

@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Material Symbols — hide text until the icon font has loaded, then reveal. */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  /* Before the icon font arrives, collapse the element so the literal word
     (e.g. "home", "search") never shows as fallback text. */
  visibility: hidden;
}
html.material-loaded .material-symbols-rounded,
html.material-loading-timeout .material-symbols-rounded {
  visibility: visible;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text-1);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── MESH BACKGROUND — amber-tinted graphite, no banned purple/pink ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 8% 0%, oklch(0.78 0.17 78 / 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 92% 100%, oklch(0.60 0.10 78 / 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 50%, oklch(0.92 0.01 78 / 0.025) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: meshPulse 14s ease-in-out infinite alternate;
}

@keyframes meshPulse {
  0% { opacity: 0.7; transform: scale(1) translate(0,0); }
  50% { opacity: 1; transform: scale(1.1) translate(1%, 2%); }
  100% { opacity: 0.8; transform: scale(1.05) translate(-1%, 1%); }
}

/* Grain texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}

/* ── APP SHELL ── */
#app-shell {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* ── SIDEBAR ── */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgba(13, 15, 24, 0.8);
  backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid var(--border);
  z-index: 100;
  padding: 28px 16px;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none; /* Firefox */
}
#sidebar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

.sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-logo-img {
  width: 140px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.nav-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 4px 16px;
  margin-top: 14px;
  margin-bottom: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px 9px 16px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quart),
              color var(--dur-fast) var(--ease-quart),
              border-color var(--dur-fast) var(--ease-quart);
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  position: relative;
  width: 100%;
  text-align: left;
}

/* Keyboard focus ring for nav items */
.nav-item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -2px;
}

/* Suppress sticky focus highlight on mouse-click for nav items */
.nav-item:focus:not(:focus-visible) {
  background: transparent;
  border-color: transparent;
  outline: none;
}

@media (hover: hover) {
  .nav-item:hover {
    color: var(--text-1);
    background: var(--surface);
  }
}

.nav-item.active {
  color: var(--text-1);
  background: oklch(0.78 0.17 78 / 0.1);
  border-radius: var(--r-sm);
  border-color: oklch(0.78 0.17 78 / 0.3);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-glow);
}

.nav-item .material-symbols-rounded {
  font-size: 20px;
  flex-shrink: 0;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s;
}

.user-pill:hover { background: var(--surface-2); }

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--sky));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.user-info { flex: 1; overflow: hidden; }
.user-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-sub  { font-size: 11px; color: var(--text-3); }

/* ── MAIN CONTENT ── */
#main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: calc(100% - var(--sidebar-w));
}

#content {
  flex: 1;
  padding: 40px;
  width: 100%;
}

#topbar {
  position: sticky;
  top: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: rgba(7, 8, 13, 0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 50;
  flex-shrink: 0;
}

/* ── V4 DASHBOARD COMPONENTS ── */
.v4-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 2fr);
  gap: 24px;
  margin-top: 8px;
  align-items: stretch;
}
.v4-grid > .glass {
  min-width: 0;
}
@media (max-width: 900px) {
  .v4-grid {
    grid-template-columns: 1fr;
  }
}

/* ── V4 ACTION CARDS (Launch Pad) ── */
.action-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), background 0.2s, box-shadow 0.2s;
}
.action-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.3);
  filter: brightness(1.1);
}
.action-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.action-icon .material-symbols-rounded { font-size: 22px; }

/* ── V4 SUBJECT CARDS ── */
.subject-card-v4 {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  cursor: pointer;
  transition: transform 0.3s var(--ease-quart), border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.subject-card-v4:hover {
  transform: translateY(-8px) scale(1.025);
  border-color: var(--accent);
  background: rgba(255,255,255,0.05);
  box-shadow: 0 20px 40px -12px oklch(0.78 0.17 78 / 0.25);
}

/* Notepad and scratchpad are now surfaced during sessions (see features.js initNotepad).
   Floating session-timer-widget stays hidden — the exam-view timer is inline. */
#session-timer-widget { display: none !important; }

.v4-card-main {
  grid-column: span 8;
  padding: 40px;
  background: linear-gradient(135deg, oklch(0.78 0.17 78 / 0.05), transparent);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.v4-card-side {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.v4-card-full {
  grid-column: span 12;
}

.v4-grid-overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle at top right, oklch(0.78 0.17 78 / 0.07), transparent 70%);
  pointer-events: none;
}

.stat-puck {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all 0.3s var(--ease-out);
}

.stat-puck:hover {
  transform: translateY(-2px);
  background: var(--surface-2);
  border-color: var(--border-2);
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4);
}

.puck-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: var(--surface-2);
  color: var(--accent-2);
}

.puck-info { display: flex; flex-direction: column; }
.puck-label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.puck-value { font-family: var(--font-heading); font-size: 24px; font-weight: 800; color: var(--text-1); }

/* Progress Circle */
.progress-ring-container {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.8s var(--ease-out);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.progress-ring-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.ring-val { font-size: 32px; font-weight: 900; font-family: var(--font-heading); display: block; line-height: 1; }
.ring-lab { font-size: 10px; font-weight: 700; color: var(--text-3); text-transform: uppercase; }

/* Streak Flame V4 */
.streak-flame-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 100px;
  color: #f59e0b;
}

.streak-flame-wrap .material-symbols-rounded {
  font-size: 18px;
  animation: flameWobble 2s ease-in-out infinite;
}

@keyframes flameWobble {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 2px #f59e0b); }
  50% { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 0 8px #f59e0b); }
}

/* NILE AI ASSISTANT */
#nile-assistant {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.nile-bubble {
  max-width: 280px;
  padding: 16px 20px;
  background: #fff;
  color: #07080d;
  border-radius: 20px 20px 4px 20px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
  transform-origin: bottom right;
  animation: bubbleIn 0.4s var(--ease-bounce);
  pointer-events: auto;
}

.nile-avatar-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--grad-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 8px 16px var(--accent-glow);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.2s;
}

.nile-avatar-wrap:hover { transform: scale(1.1); }

@keyframes bubbleIn {
  from { opacity: 0; transform: scale(0.8) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}


.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-3);
}

.breadcrumb span { cursor: pointer; transition: color 0.2s; }
.breadcrumb span:hover { color: var(--text-1); }
.breadcrumb .crumb-active { color: var(--text-1); font-weight: 600; cursor: default; }
.breadcrumb .crumb-sep { opacity: 0.3; cursor: default !important; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
  width: 260px;
  transition: all 0.3s var(--ease-out);
}

.search-bar:focus-within {
  width: 340px;
  border-color: var(--accent);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-bar input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 13px;
  width: 100%;
  font-family: var(--font-main);
}

.search-bar input::placeholder { color: var(--text-3); }

.search-bar .material-symbols-rounded { font-size: 18px; color: var(--text-3); }

.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-2); }
.icon-btn .material-symbols-rounded { font-size: 20px; }

/* ── FOCUS INDICATORS (keyboard accessibility) ── */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* ── PAGE CONTENT ── */
#content {
  padding: 48px 40px;
  flex: 1;
  width: 100%;
  box-sizing: border-box;
}

/* ── GLASS CARD ── */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative;
  overflow: visible;
  transition: border-color var(--dur-med) var(--ease-quart),
              transform var(--dur-med) var(--ease-quart),
              box-shadow var(--dur-med) var(--ease-quart);
  box-shadow: var(--card-shadow);
}
/* kill the glassmorphism double-border pseudo — too AI-slop */
.card::after { content: none; }

.card-hover { cursor: pointer; }
.card-hover:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: var(--card-shadow-lg);
}
.card-hover:active { transform: translateY(0); }

/* ── BUTTONS (Flight Deck) — crisp, no glow, confident ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quart),
              color var(--dur-fast) var(--ease-quart),
              border-color var(--dur-fast) var(--ease-quart),
              transform var(--dur-fast) var(--ease-quart);
  white-space: nowrap;
  user-select: none;
  /* WCAG 2.5.5 — minimum 44×44px touch target */
  min-height: 44px;
  min-width: 44px;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  padding: 11px 22px;
}
.btn-primary:hover  { background: var(--accent-2); }
.btn-primary:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--text-1);
  padding: 11px 22px;
}
.btn-ghost:hover {
  background: var(--surface);
  border-color: var(--text-3);
}
.btn-ghost:active { transform: scale(0.98); }

.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  padding: 0;
}
.btn-icon .material-symbols-rounded { font-size: 20px; }

/* ── BUTTON FOCUS STYLES (WCAG 2.4.7 / 2.4.11) ── */
/* Keyboard focus rings — visible to screen readers and keyboard users */
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.btn-primary:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.btn-ghost:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Suppress outline on mouse clicks only — keyboard users still see the ring */
.btn:focus:not(:focus-visible) {
  outline: none;
}

/* ── TYPOGRAPHY ── */
.page-title {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--text-1);
  text-transform: uppercase;
}
.page-title::after {
  /* subtle status dot — flight-deck touch */
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  vertical-align: middle;
  transform: translateY(-0.4em);
}

.page-sub {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.6;
  margin-top: 12px;
}

/* ── STUDIO.IO MODALS ── */
.sh-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 8, 13, 0.75);
  backdrop-filter: blur(12px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: anim-fade 0.3s ease-out;
}

.sh-modal {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  max-width: 440px;
  width: 100%;
  padding: 40px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  transform-origin: center;
  animation: anim-in 0.4s var(--ease-bounce);
}

.pin-digit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 32px;
}

.pin-btn {
  height: 64px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.pin-btn:active { transform: scale(0.92); background: var(--accent); }

.pin-display {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.pin-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-2);
  transition: all 0.2s var(--ease-bounce);
}

.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.2);
  box-shadow: 0 0 15px var(--accent-glow);
}

.label-xs {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 4px;                /* squarer — flight-deck tag */
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── STAT CARDS ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

.stat-card {
  padding: 24px;
}

.stat-card .stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 20px;
}

.stat-card .stat-value {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.stat-card .stat-label { font-size: 12px; color: var(--text-2); }

/* ── SUBJECT GRID ── */
.subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.subject-card {
  padding: 28px;
  cursor: pointer;
}

.subject-card .sc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.subject-card .sc-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.subject-card .sc-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.subject-card .sc-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}

.progress-bar .fill {
  height: 100%;
  border-radius: 100px;
  transition: width 1.2s var(--ease-out);
}

/* ── TOPIC GRID — 2 columns side by side ── */
.topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 600px) {
  .topic-grid { grid-template-columns: 1fr; }
}

/* Flight Deck topic card — crisp, panel-like, indicator in top-left corner */
.topic-card {
  padding: 22px 22px 18px;
  cursor: pointer;
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur-med) var(--ease-quart),
              transform var(--dur-med) var(--ease-quart),
              background var(--dur-med) var(--ease-quart);
}
.topic-card::before {
  /* Flight-deck corner bracket — top-left */
  content: "";
  position: absolute;
  top: 10px; left: 10px;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--accent);
  border-left: 1.5px solid var(--accent);
  opacity: 0.35;
  transition: opacity var(--dur-med) var(--ease-quart);
}
.topic-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  background: color-mix(in oklch, var(--bg-2) 88%, var(--accent) 12%);
}
.topic-card:hover::before { opacity: 1; }

.topic-card .tc-name {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  margin-top: 6px;
  text-transform: uppercase;
}
.topic-card .tc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.topic-card .tc-footer .mono,
.topic-card .tc-footer .badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* ── QUESTION VIEW ── */
.question-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  max-width: 1200px;
}

.question-card {
  padding: 36px 36px 32px;
  position: relative;
}
.question-card::before {
  /* Flight-deck top corner brackets */
  content: "";
  position: absolute;
  top: 12px; left: 12px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--border-2);
  border-left: 1px solid var(--border-2);
  opacity: 0.6;
  pointer-events: none;
}
.question-card::after {
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 14px; height: 14px;
  border-top: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
  opacity: 0.6;
  pointer-events: none;
}

.question-text {
  font-family: var(--font-working);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-1);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 28px;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  overflow-x: auto;
}

.question-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.question-img-grid img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  display: block;
}

.question-img-wrap {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 12px;
  border: 1px solid var(--border);
}

/* Responsive images with minimal cropping for watermarks */
.question-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.marks-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: oklch(0.78 0.17 78 / 0.12);
  border: 1px solid oklch(0.78 0.17 78 / 0.28);
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
}

.divider {
  height: 1px;
  background: var(--border);
  margin: 40px 0;
}

/* ── MATH & TABLES ── */
.math-frac {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  font-size: 0.9em;
  padding: 0 2px;
}
.math-frac .num {
  display: block;
  border-bottom: 1.5px solid currentColor;
  padding: 0 4px;
  line-height: 1.1;
}
.math-frac .den {
  display: block;
  padding: 0 4px;
  line-height: 1.1;
}

.math-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--table-border);
  background: var(--math-bg);
}

.math-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text-2);
}

.math-table th {
  background: var(--table-header);
  color: var(--text-1);
  font-weight: 700;
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--table-border);
}

.math-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--table-border);
}

.math-table tr:last-child td {
  border-bottom: none;
}

.math-table tr:hover {
  background: rgba(255,255,255,0.02);
}

/* ── PREMIUM GLASS ── */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.solution-area { display: none; }

.solution-content {
  background: rgba(16,185,129,0.04);
  border: 1px solid rgba(16,185,129,0.2);
  border-radius: var(--r-lg);
  padding: 24px 28px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-1);
}

.solution-step {
  padding: 16px 20px;
  background: oklch(0.78 0.17 78 / 0.06);
  border-radius: var(--r-md);
  border: 1px solid oklch(0.78 0.17 78 / 0.15);
  margin-top: 12px;
}

.solution-step .step-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 6px;
}

.question-actions {
  display: flex;
  gap: 12px;
  margin-top: 40px;
}

/* Sidebar panel */
.q-sidebar { display: flex; flex-direction: column; gap: 16px; }

.q-sidebar-card { padding: 24px; }

.q-sidebar-card .sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 16px;
}

.difficulty-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  margin-bottom: 6px;
}

.difficulty-btn:hover { background: var(--surface-2); color: var(--text-1); }
.difficulty-btn.active-diff {
  background: oklch(0.78 0.17 78 / 0.10);
  border-color: oklch(0.78 0.17 78 / 0.28);
  color: var(--accent-2);
}

.diff-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.diff-dot[data-diff="medium"] { border-radius: 2px; }
.diff-dot[data-diff="hard"]   { clip-path: polygon(50% 0%, 100% 100%, 0% 100%); border-radius: 0; }

/* ── SCRATCHPAD ── */
.scratchpad-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(12px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
}

.scratchpad-overlay.open { display: flex; }

.scratchpad-panel {
  width: 100%;
  max-width: 800px;
  height: 60vh;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.4s var(--ease-out);
  overflow: hidden;
}

@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.scratchpad-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.scratchpad-header h3 { font-size: 15px; font-weight: 700; }

.scratchpad-textarea {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  resize: none;
  color: var(--text-1);
  font-family: var(--font-working);
  font-size: 16px;
  line-height: 1.7;
  padding: 24px;
}

.scratchpad-textarea::placeholder { color: var(--text-3); }

/* ── ANIMATIONS ── */
/* NOTE: fadeSlideIn is defined once earlier in this file (line ~189).
   This duplicate definition is removed to avoid cascade confusion. */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-in { animation: fadeSlideIn 0.15s var(--ease-out) forwards; }
.anim-fade { animation: fadeIn 0.15s ease forwards; }

/* Stagger children */
.stagger > *:nth-child(1) { animation: fadeSlideIn 0.15s var(--ease-out) 0.03s forwards; opacity: 0; }
.stagger > *:nth-child(2) { animation: fadeSlideIn 0.15s var(--ease-out) 0.06s forwards; opacity: 0; }
.stagger > *:nth-child(3) { animation: fadeSlideIn 0.15s var(--ease-out) 0.09s forwards; opacity: 0; }
.stagger > *:nth-child(4) { animation: fadeSlideIn 0.15s var(--ease-out) 0.12s forwards; opacity: 0; }
.stagger > *:nth-child(5) { animation: fadeSlideIn 0.15s var(--ease-out) 0.15s forwards; opacity: 0; }
.stagger > *:nth-child(6) { animation: fadeSlideIn 0.15s var(--ease-out) 0.18s forwards; opacity: 0; }
.stagger > *:nth-child(n+7) { animation: fadeSlideIn 0.15s var(--ease-out) 0.21s forwards; opacity: 0; }

/* Skip-to-content link (visually hidden until focused) */
.skip-to-content {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 99999;
  padding: 10px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-to-content:focus { top: 0; }

/* Accessibility: honour the OS "reduce motion" preference */
@media (prefers-reduced-motion: reduce) {
  /* Blanket kill on all animations and transitions.
     Using 0.01ms (not 0) so JS animationend callbacks still fire. */
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
  .stagger > *, .anim-in, .anim-fade { opacity: 1 !important; }
}

/* ── PAGE TRANSITION ── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  opacity: 0;
  animation: fadeIn 0.08s ease forwards;
}

.page-transition.out {
  animation: fadeOut 0.15s ease forwards;
}

@keyframes fadeOut { to { opacity: 0; } }


/* ── SPLASH SCREEN ── */
#splash {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  transition: opacity 0.8s ease;
}

.splash-logo {
  width: 160px;
  height: auto;
  object-fit: contain;
  margin-bottom: 32px;
  border-radius: 12px;
}

.splash-bar-wrap {
  width: 240px;
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 20px;
}

#splash-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--accent), var(--sky));
  border-radius: 100px;
  transition: width 0.4s var(--ease-out);
}

#splash-status {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ── QUICK ACTIONS ── */
.quick-action-row {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}

/* ── ERROR STATE ── */
.error-card {
  padding: 48px;
  text-align: center;
  border-radius: var(--r-xl);
  background: rgba(244, 63, 94, 0.05);
  border: 1px solid rgba(244, 63, 94, 0.15);
  color: var(--rose);
}
.error-card .material-symbols-rounded { font-size: 48px; margin-bottom: 16px; }

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:        #f4f6fb;
  --bg-2:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f1f3f9;
  --border:    rgba(0,0,0,0.08);
  --border-2:  rgba(0,0,0,0.14);
  --text-1:    #0f1225;
  --text-2:    #4b5278;
  --text-3:    #555d7a; /* WCAG fix: was #6b7290 (4.36:1 fail) → 5.87:1 ✓ */
  --accent:      oklch(0.68 0.16 75);      /* amber-gold — readable on light bg */
  --accent-2:    oklch(0.74 0.14 80);
  --accent-glow: oklch(0.68 0.16 75 / 0.12);
  --accent-ink:  oklch(0.18 0.04 75);
  --glass-bg:  #ffffff;
  --glass-border: rgba(0,0,0,0.08);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(15,18,37,0.06);
}

/* ── CANDY THEME (light pink) ── */
[data-theme="candy"] {
  --bg: #fdf0ff; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #f7e8ff;
  --border: rgba(217,70,239,0.12); --border-2: rgba(217,70,239,0.22);
  --text-1: #1a001f; --text-2: #8b3a9f; --text-3: #7a3a8a; /* WCAG fix: was #a060b0 (3.92:1 fail) → 6.7:1 ✓ */
  --accent: #d946ef; --accent-2: #e879f9; --accent-glow: rgba(217,70,239,0.22);
  --glass-bg: #ffffff; --glass-border: rgba(217,70,239,0.15);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

/* ── SKY THEME (light blue) ── */
[data-theme="sky"] {
  --bg: #f0f8ff; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #e4f3ff;
  --border: rgba(14,165,233,0.12); --border-2: rgba(14,165,233,0.22);
  --text-1: #001a30; --text-2: #2a6090; --text-3: #1a5580; /* WCAG fix: was #5090c0 (3.06:1 fail) → 6.8:1 ✓ */
  --accent: #0ea5e9; --accent-2: #38bdf8; --accent-glow: rgba(14,165,233,0.22);
  --glass-bg: #ffffff; --glass-border: rgba(14,165,233,0.15);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

/* ── MINT THEME (light green) ── */
[data-theme="mint"] {
  --bg: #f0fff8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #e4fff4;
  --border: rgba(16,185,129,0.12); --border-2: rgba(16,185,129,0.22);
  --text-1: #001a10; --text-2: #227850; --text-3: #1a6040; /* WCAG fix: was #50a878 (2.55:1 fail) → 6.6:1 ✓ */
  --accent: #10b981; --accent-2: #34d399; --accent-glow: rgba(16,185,129,0.22);
  --glass-bg: #ffffff; --glass-border: rgba(16,185,129,0.15);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

/* ── SUNSHINE THEME (light amber) ── */
[data-theme="sunshine"] {
  --bg: #fffbf0; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #fff6e0;
  --border: rgba(245,158,11,0.14); --border-2: rgba(245,158,11,0.24);
  --text-1: #1a1200; --text-2: #8b6020; --text-3: #705010; /* WCAG fix: was #b08840 (2.91:1 fail) → 7.1:1 ✓ */
  --accent: #f59e0b; --accent-2: #fbbf24; --accent-glow: rgba(245,158,11,0.22);
  --glass-bg: #ffffff; --glass-border: rgba(245,158,11,0.15);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

/* ── MIDNIGHT THEME ── */
[data-theme="midnight"] {
  --bg: #0a0e1a; --bg-2: #0f1628;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.14);
  --text-1: #e2e8ff; --text-2: #7b88bb; --text-3: #7080b0;
  --accent: #3b82f6; --accent-2: #60a5fa; --accent-glow: rgba(59,130,246,0.2);
  --glass-bg: rgba(15,22,40,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── FOREST THEME ── */
[data-theme="forest"] {
  --bg: #060d0a; --bg-2: #0a1710;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13);
  --text-1: #e0ffe8; --text-2: #6d9b7a; --text-3: #5a9070;
  --accent: #22c55e; --accent-2: #4ade80; --accent-glow: rgba(34,197,94,0.2);
  --glass-bg: rgba(10,23,16,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── OCEAN THEME ── */
[data-theme="ocean"] {
  --bg: #030d14; --bg-2: #071522;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13);
  --text-1: #e0f7ff; --text-2: #5b8faa; --text-3: #4888a8;
  --accent: #06b6d4; --accent-2: #22d3ee; --accent-glow: rgba(6,182,212,0.2);
  --glass-bg: rgba(7,21,34,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── ROSE THEME ── */
[data-theme="rose"] {
  --bg: #0d0509; --bg-2: #180a10;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13);
  --text-1: #ffe4ed; --text-2: #d090a0; --text-3: #c08090; /* WCAG fix: was both #a06070 (4.47:1 fail + duplicate) */
  --accent: #f43f5e; --accent-2: #fb7185; --accent-glow: rgba(244,63,94,0.2);
  --glass-bg: rgba(24,10,16,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── SUNSET THEME ── */
[data-theme="sunset"] {
  --bg: #0d0804; --bg-2: #1a100a;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13);
  --text-1: #fff1e0; --text-2: #b07848; --text-3: #a07050;
  --accent: #f59e0b; --accent-2: #fbbf24; --accent-glow: rgba(245,158,11,0.2);
  --glass-bg: rgba(26,16,10,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── LAVENDER THEME ── */
[data-theme="lavender"] {
  --bg: #0a070d; --bg-2: #140e1a;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13);
  --text-1: #f0e4ff; --text-2: #9070b0; --text-3: #9060b8;
  --accent: #a855f7; --accent-2: #c084fc; --accent-glow: rgba(168,85,247,0.2);
  --glass-bg: rgba(20,14,26,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── PINK THEME (V4 STORE) ── */
[data-theme="theme_pink"] {
  --bg: #10050e; --bg-2: #1a0a18;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13);
  --text-1: #ffe4f5; --text-2: #b06090; --text-3: #a05585;
  --accent: #ec4899; --accent-2: #f472b6; --accent-glow: rgba(236,72,153,0.2);
  --glass-bg: rgba(26,10,24,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── GOLD THEME (V4 STORE) ── */
[data-theme="theme_gold"] {
  --bg: #0d0a04; --bg-2: #1a1408;
  --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.08); --border-2: rgba(255,255,255,0.13);
  --text-1: #fff8e0; --text-2: #b09040; --text-3: #a08030;
  --accent: #eab308; --accent-2: #facc15; --accent-glow: rgba(234,179,8,0.2);
  --glass-bg: rgba(26,20,8,0.75); --glass-border: rgba(255,255,255,0.1);
}

/* ── NILE ACADEMY THEME — exact match to nile-academy.pages.dev ──
   Primary: gold #d4af37 · Secondary: cyan #00e0ff · BG: near-black #010208
   Fonts: Unbounded (display) + JetBrains Mono (mono) + Inter (body) */
[data-theme="nile"] {
  --bg:        #010208;                              /* near-black with blue tint */
  --bg-2:      #0b1324;                              /* dark navy surface */
  --surface:   rgba(15, 23, 42, 0.72);               /* slate-900 translucent */
  --surface-2: rgba(30, 41, 59, 0.78);               /* slate-800 translucent */
  --border:    #334155;                              /* slate-700 */
  --border-2:  #475569;                              /* slate-600 */
  --text-1:    #f8fafc;                              /* slate-50 */
  --text-2:    #cbd5e1;                              /* slate-300 */
  --text-3:    #94a3b8;                              /* slate-400 */
  --accent:       #d4af37;                           /* rich gold — primary */
  --accent-2:     #f4d03f;                           /* lit gold — hover */
  --accent-ink:   #010208;                           /* dark text on gold */
  --accent-glow:  rgba(212, 175, 55, 0.22);
  --info:         #00e0ff;                           /* cyan — secondary accent */
  --sky:          #00e0ff;
  --amber:        #d4af37;
  --secondary-blue: #2148c4;
  --glass-bg:     rgba(11, 19, 36, 0.82);
  --glass-border: rgba(212, 175, 55, 0.18);
  --card-shadow:  0 1px 0 rgba(212, 175, 55, 0.06) inset, 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --r-xl: 12px; --r-lg: 8px; --r-md: 6px; --r-sm: 4px;
  --grad-primary: linear-gradient(135deg, #d4af37, #f4d03f);
  --grad-amber:   linear-gradient(135deg, #d4af37, #c99a1e);
  --font-main:    'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-heading: 'Unbounded', ui-sans-serif, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Nile mesh/grid backdrop — subtle grid over deep bg */
html[data-theme="nile"] body::before {
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(212, 175, 55, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(0, 224, 255, 0.06) 0%, transparent 60%);
  mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, black 30%, transparent 100%);
}
html[data-theme="nile"] body::after { display: none; }

/* Replace the amber-tinted mesh background with cool cyan glow for Nile */
html[data-theme="nile"] body::before {
  background:
    radial-gradient(ellipse 80% 50% at 10% 0%, oklch(0.82 0.16 210 / 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 90% 100%, oklch(0.68 0.14 245 / 0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 50%, oklch(0.82 0.16 210 / 0.03) 0%, transparent 65%);
}

/* Monospace section labels + sharper buttons when Nile is active */
html[data-theme="nile"] .mk-section__title,
html[data-theme="nile"] .k2s-section-label,
html[data-theme="nile"] .chip,
html[data-theme="nile"] .hud-brackets { letter-spacing: 0.08em; text-transform: uppercase; }
html[data-theme="nile"] .btn,
html[data-theme="nile"] .k2s-login-btn,
html[data-theme="nile"] .k2s-role-btn { border-radius: 6px; }
html[data-theme="nile"] .card,
html[data-theme="nile"] .glass-card { border-radius: 10px; }
html[data-theme="nile"] .k2s-input-group input { border-radius: 6px; }


/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .question-layout { grid-template-columns: 1fr; }
  .q-sidebar { flex-direction: row; flex-wrap: wrap; }
  .q-sidebar-card { flex: 1 1 200px; }
}

/* ── NVR DIAGRAM SVG BASELINE ─────────────────────���────────────────────────
   NVR questions render inline SVG. Generator fills are designed for a white
   paper background — enforce that so diagrams are readable in every theme.
   The outer <div> scroll wrapper gets a card-like appearance; the SVG itself
   gets white paper + a border so the folding stages are always distinct.
─────────────────────────────���───────────────────────────────────────────── */
.question-text div[style*="overflow-x:auto"] {
  background: #ffffff !important;
  border-radius: 10px;
  padding: 12px 0;
  border: 1px solid rgba(0,0,0,0.1);
  margin: 14px 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.question-text div[style*="overflow-x:auto"] svg {
  display: block;
  margin: 0 auto;
  background: transparent;
}
/* Force dark strokes / text on the forced-white NVR paper, regardless of theme.
   Generators use stroke="var(--text-1,#222)" etc. — in dark themes --text-1 is
   near-white, which vanishes on our white paper. Override to always-dark. */
.question-text div[style*="overflow-x:auto"] svg [stroke*="var(--text-1"],
.question-text div[style*="overflow-x:auto"] svg [stroke*="var(--text-2"] {
  stroke: #1e293b !important;   /* slate-800 — high contrast on white */
}
.question-text div[style*="overflow-x:auto"] svg [stroke*="var(--text-3"],
.question-text div[style*="overflow-x:auto"] svg [stroke*="var(--border"] {
  stroke: #94a3b8 !important;   /* slate-400 — option cell borders */
}
.question-text div[style*="overflow-x:auto"] svg [fill*="var(--text-1"] {
  fill: #1e293b !important;
}
.question-text div[style*="overflow-x:auto"] svg [fill*="var(--text-2"] {
  fill: #475569 !important;     /* slate-600 — option labels */
}
.question-text div[style*="overflow-x:auto"] svg [fill*="var(--text-3"] {
  fill: #64748b !important;     /* slate-500 — muted labels */
}
/* Tables / text rendered as SVG <text> should also stay readable on white */
.question-text div[style*="overflow-x:auto"] svg text {
  fill: #1e293b;                /* default — specific fills above win via specificity */
}
/* Options row wrapper */
.question-text div[style*="margin:6px 0"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── THEME SWATCH HOVER ──────────────────────────────────────────────────────
   Settings > Colour Scheme cards. Hover overlay via ::after — doesn't fight
   the inline transform/box-shadow set by JS for the active-state glow.
   overflow:hidden on the card clips the overlay neatly.
──────────────────────────────────────────────────────────────────────────── */
[data-k2s-click="k2sSetTheme"]::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(255,255,255,0.07);
  transition: opacity .14s;
  pointer-events: none;
  z-index: 1;
}
[data-k2s-click="k2sSetTheme"]:hover::after {
  opacity: 1;
}
[data-k2s-click="k2sSetTheme"]:active::after {
  background: rgba(0,0,0,0.09);
  opacity: 1;
}

/* ── HAMBURGER BUTTON (hidden on desktop) ── */
.hamburger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  cursor: pointer;
  color: var(--text-2);
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  padding: 0;
}
.hamburger-btn:hover { color: var(--text-1); background: var(--surface); }

/* ── SIDEBAR OVERLAY (mobile tap-to-close) ── */
#sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  backdrop-filter: blur(2px);
}
#sidebar-overlay.active { display: block; }

/* ── EXAM NAV ROW ── */
.exam-nav-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.exam-q-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  max-width: 60vw;
  padding: 4px;
}
.exam-q-buttons::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* Sidebar: hidden by default, slides in when .sidebar-open is set */
  #sidebar {
    transform: translateX(-260px);
    transition: transform 0.3s var(--ease-out);
    z-index: 1000;
  }
  #sidebar.sidebar-open { transform: translateX(0); }

  #main { margin-left: 0; }
  #content { padding: 24px 20px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: 36px; }

  /* Hamburger visible on mobile, sized to Apple's 44px minimum touch target */
  .hamburger-btn { display: flex; width: 44px; height: 44px; }
  .hamburger-btn .material-symbols-rounded { font-size: 26px; }

  /* Topbar: give search room to breathe */
  .topbar-right { flex: 1; min-width: 0; max-width: 210px; justify-content: flex-end; }
  .search-bar { width: auto; flex: 1; min-width: 80px; }
  .search-bar:focus-within { width: auto; }

  /* Question text: reduce from 22px to avoid horizontal scroll */
  .question-text { font-size: 16px; line-height: 1.6; }
  .question-card { padding: 24px; }

  /* Exam nav row: wrap buttons onto their own line on narrow screens */
  .exam-nav-row { flex-wrap: wrap; gap: 8px; }
  .exam-q-buttons { order: 3; flex-basis: 100%; }
  .exam-nav-row > .btn { flex: 1; min-width: 100px; justify-content: center; }

  /* Lift floating elements above the 60px bottom nav — stagger so they don't overlap */
  #session-timer-widget { bottom: 80px !important; right: 16px !important; }
  #notepad-float-btn    { bottom: 148px !important; right: 16px !important; }
  .notepad-fab          { bottom: 148px; }

  /* Session timer: move below topbar on mobile (no sidebar offset) */
  .session-timer-pill { top: 72px; right: 8px; }
}

/* ============================================================================
   STUDYHUB V3 MIGRATED FEATURES
   ============================================================================ */

/* ── 1. TOAST NOTIFICATIONS ── */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  animation: fadeSlideIn 0.3s var(--ease-out) forwards;
  pointer-events: none;
}

/* ── 2. CONFETTI ── */
.confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  top: -10px;
  z-index: 9999;
  animation: confetti-fall 2s ease-out forwards;
  pointer-events: none;
}

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

/* ── 3. FLASHCARDS ── */
.flashcard {
  perspective: 1000px;
  cursor: pointer;
  margin: 16px 0;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  min-height: 200px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  width: 100%;
  min-height: 200px;
  backface-visibility: hidden;
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.flashcard-front {
  background: var(--surface);
  border: 2px solid var(--accent);
}

.flashcard-back {
  background: var(--surface);
  border: 2px solid var(--emerald);
  transform: rotateY(180deg);
}

/* ── 4. HINT BOX ── */
.hint-box {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--amber);
  margin-top: 12px;
}

/* ── 5. EXAM BANNER ── */
.exam-banner {
  background: rgba(244,63,94,0.08);
  border: 1px solid rgba(244,63,94,0.2);
  padding: 16px 20px;
  border-radius: var(--r-xl);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.exam-banner .info {
  font-size: 14px;
  font-weight: 600;
}

.exam-banner .q-num {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}

.exam-timer {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px;
  font-weight: 800;
  color: var(--rose);
}

/* ── 6. SELF-MARK BUTTONS ── */
.mark-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.btn-success {
  background: var(--emerald);
  color: #fff;
  padding: 14px 24px;
  border: none;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-success:hover {
  background: #059669;
  transform: translateY(-1px);
}

.btn-danger {
  background: var(--rose);
  color: #fff;
  padding: 14px 24px;
  border: none;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-danger:hover {
  background: #e11d48;
  transform: translateY(-1px);
}

/* ── 7. SOLUTION STEPS (V3 ENHANCED) ── */
.solution-step.hidden {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.solution-step.visible {
  display: block;
  opacity: 1;
}

.solution-step label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
}

.solution-step input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--emerald);
}

.step-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--emerald);
  margin-bottom: 6px;
}

.mark-count {
  font-size: 14px;
  font-weight: 700;
  padding: 8px 0;
}

/* ── 8. ANSWER INPUT ── */
.answer-input {
  width: 100%;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s;
}

.answer-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ── 9. MASTERY BADGES ── */
.mastery-diamond {
  background: linear-gradient(135deg, oklch(0.88 0.05 220), oklch(0.72 0.09 240));
  color: oklch(0.14 0.04 240);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mastery-gold {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  color: #1a1a1a;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
}

.mastery-silver {
  background: linear-gradient(135deg, #94a3b8, #cbd5e1);
  color: #1a1a1a;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
}

.mastery-bronze {
  background: linear-gradient(135deg, #d97706, #92400e);
  color: #fff;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
}

/* ── 10. FEATURE CARDS GRID ── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.feature-card {
  padding: 20px;
  cursor: pointer;
  text-align: center;
}

.feature-card .fc-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.feature-card .fc-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

.feature-card .fc-sub {
  font-size: 11px;
  color: var(--text-3);
}

/* ── 11. XP BAR ── */
.xp-bar-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}

.xp-badge {
  background: linear-gradient(135deg, var(--amber), var(--rose));
  color: #fff;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.xp-progress {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  overflow: hidden;
}

.xp-progress .fill {
  height: 100%;
  background: linear-gradient(to right, var(--accent), var(--sky));
  border-radius: 100px;
  transition: width 0.5s var(--ease-out);
}

.xp-text {
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── 12. ACHIEVEMENT CARDS ── */
.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.achievement-card {
  padding: 20px;
  text-align: center;
  position: relative;
}

.achievement-card.locked {
  opacity: 0.4;
}

.achievement-card .ach-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.achievement-card .ach-name {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.achievement-card .ach-desc {
  font-size: 11px;
  color: var(--text-3);
}

.achievement-card .ach-check {
  position: absolute;
  top: 12px;
  right: 12px;
  color: var(--emerald);
  font-size: 18px;
}

/* ── 13. STREAK FIRE ANIMATION ── */
.streak-fire {
  animation: pulse-fire 1s ease-in-out infinite alternate;
}

@keyframes pulse-fire {
  from { text-shadow: 0 0 8px rgba(245,158,11,0.4); }
  to   { text-shadow: 0 0 16px rgba(245,158,11,0.8); }
}

/* ── 14. SESSION TIMER (FLOATING) ── */
.session-timer-pill {
  position: fixed;
  top: 72px;
  right: 12px;
  font-size: 11px;
  color: var(--text-2);
  font-family: 'IBM Plex Mono', monospace;
  z-index: 200;
  background: var(--surface);
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(12px);
  transition: all 0.2s;
}

.session-timer-pill:hover {
  border-color: var(--accent);
}

/* ── 15. NOTEPAD FAB ── */
.notepad-fab {
  position: fixed;
  right: 20px;
  bottom: 84px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  z-index: 200;
  box-shadow: 0 4px 16px oklch(0.78 0.17 78 / 0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s var(--ease-quart), box-shadow 0.2s ease;
}

.notepad-fab:hover {
  transform: scale(1.1);
}

/* ── 16. FORMULA SHEET ── */
.formula-sheet {
  max-height: 70vh;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.8;
}

.formula-sheet .section {
  margin-bottom: 24px;
}

.formula-sheet .section h4 {
  color: var(--accent-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.formula-sheet code {
  background: oklch(0.78 0.17 78 / 0.10);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--sky);
  font-size: 13px;
}

/* ── 17. MISTAKE / HISTORY CARDS ── */
.mistake-card {
  border-color: oklch(0.66 0.22 27 / 0.40);
  background: oklch(0.66 0.22 27 / 0.06);
}

.history-card.correct {
  border-color: oklch(0.76 0.17 150 / 0.35);
  background: oklch(0.76 0.17 150 / 0.05);
}

.history-card.wrong {
  border-color: oklch(0.66 0.22 27 / 0.35);
  background: oklch(0.66 0.22 27 / 0.05);
}

/* ── 18. SETTINGS CARDS ── */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.setting-row:last-child {
  border-bottom: none;
}

.setting-label {
  font-size: 14px;
  font-weight: 500;
}

.setting-btns {
  display: flex;
  gap: 8px;
}

.setting-btn {
  padding: 6px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.setting-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ── 19. TOPIC CARD ENHANCEMENTS ── */
.topic-card .tc-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.topic-card .tc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.topic-card .tc-accuracy {
  font-size: 11px;
  color: var(--text-3);
}

/* ── 20. (light overrides consolidated into section 41) ── */

/* ============================================================================
   21. BOTTOM NAVIGATION (MOBILE)
   ============================================================================ */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: rgba(7,8,13,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 200;
  padding: 0 8px;
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 768px) {
  /* NOTE: do NOT set #sidebar { display:none } here — the earlier @media block
     at line ~1707 turns the sidebar into a slide-in drawer (transform-based)
     that the hamburger button reveals. Hiding it would break that gesture. */
  .bottom-nav { display: flex; align-items: center; justify-content: space-around; }
  #main { margin-left: 0; }
  #content { padding-bottom: 80px; }
  #topbar { padding: 0 16px; }
}
.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.bottom-nav-item.active { color: var(--accent-2); }
.bottom-nav-item .material-symbols-rounded { font-size: 22px; }

/* ============================================================================
   22. LEVEL / SUBJECT / BOARD SELECTION CARDS
   ============================================================================ */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.selection-card {
  padding: 28px;
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-med) var(--ease-quart),
              border-color var(--dur-fast) var(--ease-quart),
              box-shadow var(--dur-med) var(--ease-quart);
}
.selection-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 16px 48px -12px oklch(0.78 0.17 78 / 0.28);
}
.selection-card .sel-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}
.selection-card .sel-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.selection-card .sel-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
}
.tier-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 24px;
}
.tier-btn {
  padding: 10px 24px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tier-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============================================================================
   23. SPEED ROUND TIMER
   ============================================================================ */
.speed-timer {
  font-size: 64px;
  font-weight: 900;
  font-family: var(--font-heading);
  text-align: center;
  letter-spacing: -0.04em;
}
.speed-timer.warning { color: var(--amber); }
.speed-timer.danger { color: var(--rose); animation: pulse-fire 0.5s ease-in-out infinite alternate; }

/* ============================================================================
   24. QUICK 10 PROGRESS
   ============================================================================ */
.quick10-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 16px 0;
}
.quick10-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: all 0.3s;
}
.quick10-dot.correct { background: var(--emerald); border-color: var(--emerald); }
.quick10-dot.wrong { background: var(--rose); border-color: var(--rose); }
.quick10-dot.current { border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* ============================================================================
   25. TIMES TABLES
   ============================================================================ */
.times-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 400px;
  margin: 24px auto;
}
.times-btn {
  padding: 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-1);
  font-size: 24px;
  font-weight: 800;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: transform 0.2s var(--ease-quart), background 0.2s, border-color 0.2s, color 0.2s;
}
.times-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  transform: scale(1.05);
}

/* ============================================================================
   26. SPEC CHECKLIST
   ============================================================================ */
.spec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.spec-row:last-child { border-bottom: none; }
.spec-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.spec-status.done { background: rgba(16,185,129,0.15); color: var(--emerald); }
.spec-status.progress { background: rgba(245,158,11,0.15); color: var(--amber); }
.spec-status.weak { background: rgba(244,63,94,0.15); color: var(--rose); }
.spec-status.empty { background: var(--surface-2); color: var(--text-3); }
.spec-name { flex: 1; font-size: 14px; font-weight: 500; }
.spec-stats { font-size: 12px; color: var(--text-3); text-align: right; }

/* ============================================================================
   27. EXAM COUNTDOWN
   ============================================================================ */
.countdown-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}
.countdown-days {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
}
.countdown-label {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* ============================================================================
   28. BOOKMARK STAR
   ============================================================================ */
.bookmark-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: 22px;
  transition: all 0.2s;
  padding: 4px;
}
.bookmark-btn.active { color: var(--amber); }
.bookmark-btn:hover { color: var(--amber); transform: scale(1.2); }

/* ============================================================================
   29. ESSAY TOOLS
   ============================================================================ */
.technique-card {
  padding: 16px 20px;
  margin-bottom: 8px;
}
.technique-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-2);
  margin-bottom: 4px;
}
.technique-def {
  font-size: 13px;
  color: var(--text-2);
  margin-bottom: 6px;
}
.technique-example {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  padding: 6px 12px;
  background: oklch(0.78 0.17 78 / 0.05);
  border-radius: var(--r-sm);
  border: 1px solid oklch(0.78 0.17 78 / 0.12);
}

/* ── 30. (light overrides consolidated into section 41) ── */

/* ============================================================================
   31. AI CHAT INTERFACE
   ============================================================================ */
.chat-container { display:flex; flex-direction:column; height:60vh; max-height:600px; }
.chat-messages { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
.chat-bubble { max-width:80%; padding:12px 16px; border-radius:var(--r-lg); font-size:14px; line-height:1.6; word-wrap:break-word; }
.chat-bubble.user { align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:4px; }
.chat-bubble.assistant { align-self:flex-start; background:var(--surface-2); color:var(--text-1); border-bottom-left-radius:4px; }
.chat-input-row { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); background:var(--surface); border-radius:0 0 var(--r-xl) var(--r-xl); }
.chat-input { flex:1; padding:10px 16px; background:var(--bg); border:1px solid var(--border); border-radius:100px; color:var(--text-1); font-size:14px; }
.chat-input:focus { outline:none; border-color:var(--accent); }
.chat-send { width:40px; height:40px; border-radius:50%; background:var(--accent); color:var(--accent-ink); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s var(--ease-quart), transform 0.15s var(--ease-quart); }
.chat-send:hover { background:var(--accent-2); transform:scale(1.05); }
.chat-typing { align-self:flex-start; padding:12px 16px; background:var(--surface-2); border-radius:var(--r-lg); }
.chat-typing .dots { display:flex; gap:4px; }
.chat-typing .dot { width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:chatDot 1.4s ease-in-out infinite; }
.chat-typing .dot:nth-child(2) { animation-delay:0.2s; }
.chat-typing .dot:nth-child(3) { animation-delay:0.4s; }
@keyframes chatDot { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-4px); } }

/* ============================================================================
   32. FIVE-A-DAY
   ============================================================================ */
.five-a-day-dots { display:flex; gap:8px; justify-content:center; margin:20px 0; }
.five-a-day-dot { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; border:2px solid var(--border); background:var(--surface); transition:all 0.3s; }
.five-a-day-dot.correct { background:rgba(16,185,129,0.15); border-color:var(--emerald); color:var(--emerald); }
.five-a-day-dot.wrong { background:rgba(244,63,94,0.15); border-color:var(--rose); color:var(--rose); }
.five-a-day-dot.current { border-color:var(--accent); box-shadow:0 0 12px var(--accent-glow); }

/* ============================================================================
   33. TIMETABLE
   ============================================================================ */
.timetable-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; }
@media (max-width:768px) { .timetable-grid { grid-template-columns:1fr; } }
.timetable-day { padding:16px; text-align:center; }
.timetable-day.today { border-color:var(--accent); background: oklch(0.78 0.17 78 / 0.06); }
.timetable-day h4 { font-size:12px; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-3); margin-bottom:8px; }
.timetable-input { width:100%; padding:8px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); color:var(--text-1); font-size:13px; text-align:center; resize:none; min-height:60px; }
.timetable-input:focus { outline:none; border-color:var(--accent); }

/* ============================================================================
   34. TEACH BACK
   ============================================================================ */
.teachback-prompt { font-size:20px; font-weight:700; text-align:center; margin:32px 0 16px; }
.teachback-textarea { width:100%; min-height:200px; padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); color:var(--text-1); font-size:15px; line-height:1.8; resize:vertical; font-family: var(--font-main); }
.teachback-textarea:focus { outline:none; border-color:var(--accent); }
.teachback-rating { display:flex; gap:12px; justify-content:center; margin-top:20px; }

/* ============================================================================
   35. ESSAY PREDICTOR
   ============================================================================ */
.ao-slider-row { display:flex; align-items:center; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
.ao-slider-row:last-child { border-bottom:none; }
.ao-label { width:60px; font-size:13px; font-weight:700; color:var(--accent-2); }
.ao-slider { flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:100px; background:var(--surface-2); outline:none; }
.ao-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--accent); cursor:pointer; }
.ao-value { width:40px; text-align:right; font-size:14px; font-weight:700; font-family:'IBM Plex Mono',monospace; }
.essay-grade-display { font-size:72px; font-weight:900; font-family: var(--font-heading); text-align:center; line-height:1; margin:24px 0; }

/* ============================================================================
   36. PAST PAPERS
   ============================================================================ */
.papers-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px; }
.paper-card { padding:24px; cursor:pointer; display:flex; align-items:center; gap:16px; }
.paper-card:hover { border-color:var(--accent); }
.paper-logo { width:48px; height:48px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; color:#fff; flex-shrink:0; }

/* ============================================================================
   37. ENGLISH TEXT SELECTION
   ============================================================================ */
.text-select-group { margin-bottom:24px; }
.text-select-group h3 { font-size:14px; font-weight:700; color:var(--accent-2); margin-bottom:12px; text-transform:uppercase; letter-spacing:0.08em; }
.text-toggle { display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:var(--r-md); cursor:pointer; transition:all 0.2s; margin-bottom:4px; }
.text-toggle:hover { background:var(--surface); }
.text-toggle input[type="checkbox"] { accent-color:var(--accent); width:18px; height:18px; }
.text-toggle .text-name { font-size:14px; font-weight:500; }

/* ============================================================================
   38. ACCESSIBILITY
   ============================================================================ */
/* Force font-display: swap for OpenDyslexic loaded from CDN */
@font-face {
  font-family: 'OpenDyslexic';
  font-display: swap;
}

/* === ACCESSIBILITY: DYSLEXIA MODE === */
.dyslexia, .dyslexia *:not(.material-symbols-rounded) { 
  font-family: 'OpenDyslexic', 'OpenDyslexic Regular', 'Comic Sans MS', cursive !important; 
  line-height: 1.8 !important;
  letter-spacing: 0.05em !important;
}
.dyslexia .card { border-width: 2px !important; border-color: var(--border-2) !important; }
.dyslexia p, .dyslexia span, .dyslexia div { font-weight: 500 !important; }
.highcontrast { --bg:#000; --surface:#111; --surface-2:#222; --border:#444; --text-1:#fff; --text-2:#ddd; --text-3:#aaa; }

/* ============================================================================
   38b. KS2 READING PASSAGE SCROLLBAR
   ============================================================================ */
.reading-passage-wrap::-webkit-scrollbar { width:8px; }
.reading-passage-wrap::-webkit-scrollbar-track { background:var(--surface-2); border-radius:4px; }
.reading-passage-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.reading-passage-wrap::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ============================================================================
   39. CALCULATOR BADGE
   ============================================================================ */
.calc-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:100px; font-size:10px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.calc-badge.calc { background:rgba(16,185,129,0.12); color:var(--emerald); }
.calc-badge.non-calc { background:rgba(244,63,94,0.12); color:var(--rose); }

/* ============================================================================
   40. SESSION SUMMARY
   ============================================================================ */
.session-stat-big { text-align:center; padding:24px; }
.session-stat-big .value { font-size:48px; font-weight:900; font-family: var(--font-heading); letter-spacing:-0.04em; line-height:1; }
.session-stat-big .label { font-size:12px; color:var(--text-3); margin-top:8px; text-transform:uppercase; letter-spacing:0.1em; }

/* ============================================================================
   41. LIGHT THEME — NEW COMPONENT OVERRIDES
   ============================================================================ */
[data-theme="light"] .card, [data-theme="light"] .glass {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(15,18,37,0.06);
}
[data-theme="light"] .action-card { background: rgba(0,0,0,0.02); }
[data-theme="light"] #sidebar { background: #ffffff; border-right: 1px solid rgba(0,0,0,0.08); }
[data-theme="light"] #topbar { background: rgba(244,246,251,0.97); border-bottom: 1px solid rgba(0,0,0,0.08); }
[data-theme="light"] .nav-item:hover { background: oklch(0.68 0.16 75 / 0.08); }
[data-theme="light"] .nav-item.active { background: oklch(0.78 0.17 78 / 0.12); color: var(--text-1); border-color: oklch(0.78 0.17 78 / 0.35); }
[data-theme="light"] .search-bar input { color: var(--text-1); }
[data-theme="light"] body::before { opacity: 0.4; }
[data-theme="light"] .chat-bubble.user { background:oklch(0.68 0.16 75); color:oklch(0.98 0.01 78); }
[data-theme="light"] .chat-input { background:#f4f5f7; color: var(--text-1); }
[data-theme="light"] .timetable-input { background:#f4f5f7; color: var(--text-1); }
[data-theme="light"] .teachback-textarea { background:#fff; color: var(--text-1); }
[data-theme="light"] .answer-input { background: #fff; color: #1a1a1a; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .session-timer-pill { background: #fff; color: var(--text-1); }
[data-theme="light"] .bottom-nav { background: rgba(255,255,255,0.95); }
[data-theme="light"] .times-btn { background: #fff; color: var(--text-1); }
[data-theme="light"] .tier-btn { background: #fff; color: var(--text-1); }
[data-theme="light"] .selection-card:hover { box-shadow: 0 16px 48px -12px oklch(0.78 0.17 78 / 0.20); }
[data-theme="light"] .question-img-wrap { background: #f0f2f7; border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .scratchpad-textarea { color: var(--text-1); }
[data-theme="light"] .scratchpad-panel { background: #fff; }
[data-theme="light"] .toast { color: #fff; }

/* ── BRIGHT THEME VARIANTS — shared light-background overrides ── */
[data-theme="candy"] .card, [data-theme="sky"] .card,
[data-theme="mint"] .card, [data-theme="sunshine"] .card,
[data-theme="candy"] .glass, [data-theme="sky"] .glass,
[data-theme="mint"] .glass, [data-theme="sunshine"] .glass {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(15,18,37,0.06);
}
[data-theme="candy"] .action-card, [data-theme="sky"] .action-card,
[data-theme="mint"] .action-card, [data-theme="sunshine"] .action-card { background: rgba(0,0,0,0.02); }

[data-theme="candy"] #sidebar, [data-theme="sky"] #sidebar,
[data-theme="mint"] #sidebar, [data-theme="sunshine"] #sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.08);
}
[data-theme="candy"] #topbar, [data-theme="sky"] #topbar,
[data-theme="mint"] #topbar, [data-theme="sunshine"] #topbar {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
[data-theme="candy"] .nav-item:hover, [data-theme="sky"] .nav-item:hover,
[data-theme="mint"] .nav-item:hover, [data-theme="sunshine"] .nav-item:hover { background: rgba(0,0,0,0.04); }
[data-theme="candy"] .nav-item.active, [data-theme="sky"] .nav-item.active,
[data-theme="mint"] .nav-item.active, [data-theme="sunshine"] .nav-item.active {
  background: rgba(0,0,0,0.06);
  color: var(--accent);
}
[data-theme="candy"] body::before, [data-theme="sky"] body::before,
[data-theme="mint"] body::before, [data-theme="sunshine"] body::before { opacity: 0.35; }

[data-theme="candy"] .search-bar input, [data-theme="sky"] .search-bar input,
[data-theme="mint"] .search-bar input, [data-theme="sunshine"] .search-bar input { color: var(--text-1); }

[data-theme="candy"] .question-img-wrap, [data-theme="sky"] .question-img-wrap,
[data-theme="mint"] .question-img-wrap, [data-theme="sunshine"] .question-img-wrap { background: #f0f2f7; border-color: rgba(0,0,0,0.15); }
[data-theme="candy"] .scratchpad-textarea, [data-theme="sky"] .scratchpad-textarea,
[data-theme="mint"] .scratchpad-textarea, [data-theme="sunshine"] .scratchpad-textarea { color: var(--text-1); }
[data-theme="candy"] .scratchpad-panel, [data-theme="sky"] .scratchpad-panel,
[data-theme="mint"] .scratchpad-panel, [data-theme="sunshine"] .scratchpad-panel { background: #fff; }

[data-theme="candy"] .toast, [data-theme="sky"] .toast,
[data-theme="mint"] .toast, [data-theme="sunshine"] .toast { color: #fff; }
[data-theme="candy"] .answer-input, [data-theme="sky"] .answer-input,
[data-theme="mint"] .answer-input, [data-theme="sunshine"] .answer-input { background: #fff; color: #1a1a1a; }
[data-theme="candy"] .session-timer-pill, [data-theme="sky"] .session-timer-pill,
[data-theme="mint"] .session-timer-pill, [data-theme="sunshine"] .session-timer-pill { background: #fff; }

[data-theme="candy"] .bottom-nav, [data-theme="sky"] .bottom-nav,
[data-theme="mint"] .bottom-nav, [data-theme="sunshine"] .bottom-nav { background: rgba(255,255,255,0.95); }
[data-theme="candy"] .selection-card:hover, [data-theme="sky"] .selection-card:hover,
[data-theme="mint"] .selection-card:hover, [data-theme="sunshine"] .selection-card:hover { box-shadow: 0 16px 48px -12px oklch(0 0 0 / 0.18); }
[data-theme="candy"] .times-btn, [data-theme="sky"] .times-btn,
[data-theme="mint"] .times-btn, [data-theme="sunshine"] .times-btn { background: #fff; }
[data-theme="candy"] .tier-btn, [data-theme="sky"] .tier-btn,
[data-theme="mint"] .tier-btn, [data-theme="sunshine"] .tier-btn { background: #fff; }

[data-theme="candy"] .chat-bubble.user { background: var(--accent); }
[data-theme="sky"] .chat-bubble.user { background: var(--accent); }
[data-theme="mint"] .chat-bubble.user { background: var(--accent); }
[data-theme="sunshine"] .chat-bubble.user { background: var(--accent); }
[data-theme="candy"] .chat-input, [data-theme="sky"] .chat-input,
[data-theme="mint"] .chat-input, [data-theme="sunshine"] .chat-input { background: #f4f5f7; }
[data-theme="candy"] .timetable-input, [data-theme="sky"] .timetable-input,
[data-theme="mint"] .timetable-input, [data-theme="sunshine"] .timetable-input { background: #f4f5f7; }
[data-theme="candy"] .teachback-textarea, [data-theme="sky"] .teachback-textarea,
[data-theme="mint"] .teachback-textarea, [data-theme="sunshine"] .teachback-textarea { background: #fff; }

/* ============================================================================
   42. LOADING SPINNER
   ============================================================================ */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.2; transform: scale(0.8); }
  30%           { opacity: 1;   transform: scale(1.2); }
}

/* ============================================================================
   43. STUDIO.IO PREMIUM ENHANCEMENTS
   ============================================================================ */

/* Shimmer loading skeleton - Consolidated in Step 43 */

/* Question card glow on focus-within */
.question-card:focus-within {
  border-color: oklch(0.78 0.17 78 / 0.25);
  box-shadow: 0 0 0 1px oklch(0.78 0.17 78 / 0.12), 0 20px 60px -10px oklch(0 0 0 / 0.50);
}

/* Marks badge subtle pulse */
.marks-badge { animation: marksPulse 3.5s ease-in-out infinite; }
@keyframes marksPulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.78 0.17 78 / 0); }
  50%       { box-shadow: 0 0 0 4px oklch(0.78 0.17 78 / 0.10); }
}

/* Answer textarea focus ring */
#user-answer:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow);
  outline: none;
}

/* Solution content — top hairline in success green */
.solution-content {
  position: relative;
  overflow: hidden;
}
.solution-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--success);
  opacity: 0.5;
}

.nav-item .material-symbols-rounded { transition: color var(--dur-fast) var(--ease-quart); opacity: 0.7; }
.nav-item:hover .material-symbols-rounded { opacity: 1; }
.nav-item.active .material-symbols-rounded { color: var(--accent); opacity: 1; }
.topic-card:hover {
  transform: translateX(4px);
  box-shadow: -4px 0 20px oklch(0.78 0.17 78 / 0.10);
}

/* Card hover: subtler glass tint */
.card-hover:hover { background: rgba(255,255,255,0.055); }

/* Active difficulty glow */
.difficulty-btn.active-diff {
  box-shadow: 0 0 0 1px oklch(0.78 0.17 78 / 0.20), 0 4px 14px oklch(0.78 0.17 78 / 0.08);
}

/* Q sidebar quick actions micro-animation */
.q-sidebar .btn-ghost {
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
}
.q-sidebar .btn-ghost:hover {
  transform: translateX(3px);
  border-color: oklch(0.78 0.17 78 / 0.20);
  color: var(--accent-2);
}

/* Progress bar gradient fill */
.progress-bar .fill {
  background: linear-gradient(90deg, var(--accent), #a78bfa);
}

/* Solution reveal animation */
@keyframes revealSlide {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
#solution-area { animation: revealSlide 0.25s var(--ease-out) forwards; }

/* Self-mark button elevated hover */
#self-mark-area .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0,0,0,0.28);
}

/* Flight Deck: primary buttons don't shimmer — they just respond with weight */
.btn-primary { position: relative; }

/* XP pop animation */
#xp-animation > div { animation: xpPop 0.45s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes xpPop {
  0%   { opacity: 0; transform: scale(0.5) translateY(10px); }
  65%  { transform: scale(1.18) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Search bar focus glow */
.search-bar:focus-within {
  box-shadow: 0 0 0 3px var(--accent-glow), 0 4px 16px rgba(0,0,0,0.2);
}

/* Toast polish */
#toast-container > div {
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06) !important;
}

/* ── ULTIMATE PERFECTION PASS (V4) ── */

/* Confetti Particles */
.confetti-particle {
  position: fixed;
  z-index: 2000;
  width: 10px;
  height: 10px;
  pointer-events: none;
  animation: confettiFall 3s var(--ease-out) forwards;
}

@keyframes confettiFall {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(720deg); opacity: 0; }
}

/* Security Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 8, 13, 0.85);
  backdrop-filter: blur(12px);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.modal-card {
  width: 100%;
  max-width: 400px;
  padding: 40px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  box-shadow: 0 32px 64px rgba(0,0,0,0.6);
  text-align: center;
}

.pin-input-grid {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 32px 0;
}

.pin-digit {
  width: 54px;
  height: 64px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pin-digit.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  box-shadow: 0 0 15px var(--accent-glow);
}

/* Parent Readiness Gauge */
.readiness-track {
  height: 12px;
  background: var(--surface-2);
  border-radius: 100px;
  position: relative;
  overflow: hidden;
  margin-top: 12px;
}

.readiness-fill {
  height: 100%;
  background: var(--grad-primary);
  border-radius: 100px;
  transition: width 1.5s var(--ease-expo);
}

.readiness-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: #fff;
  border: 4px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  z-index: 2;
}

/* SATS Countdown Widget */
.countdown-card {
  background: linear-gradient(135deg, rgba(56,189,248,0.1), transparent);
  border-color: rgba(56,189,248,0.2);
}

.countdown-timer {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.timer-unit {
  text-align: center;
}

.timer-val {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: var(--sky);
  display: block;
  line-height: 1;
}

.timer-lab {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
}

/* Milestone Modal (Level Up) */
.milestone-modal {
  text-align: center;
  padding: 40px;
}

.milestone-icon {
  font-size: 80px;
  color: var(--amber);
  margin-bottom: 24px;
  display: block;
  animation: trophyBounce 1s var(--ease-bounce) infinite alternate;
}

@keyframes trophyBounce {
  from { transform: scale(1) rotate(-5deg); }
  to   { transform: scale(1.1) rotate(5deg); }
}

/* ============================================================================
   GLOBAL MOBILE OVERRIDES — last in the file so they win the cascade.
   The app uses a lot of inline style="font-size:42px" / "padding:48px"
   declarations on titles and cards. Inline styles beat normal CSS, so we use
   !important on a small number of *attribute selectors* and class targets to
   tame the worst offenders without touching the JS templates.
   ============================================================================ */

/* ─── STUDIO.IO V4 COMPREHENSIVE RESPONSIVE ENGINE ─── */

/* 1. Viewport-Height Fix for Mobile Browsers */
:root { --vh: 1vh; }

@media (max-width: 1024px) {
  :root {
    --sidebar-w: 0px;
    --r-xl: 24px;
    --r-lg: 20px;
  }

  html, body {
    overflow-x: hidden !important;
    width: 100vw !important;
    position: relative;
  }

  #app-shell {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  #sidebar {
    transform: translateX(-100%);
    transition: transform 0.4s var(--ease-expo);
    box-shadow: 20px 0 60px rgba(0,0,0,0.5);
    z-index: 2000;
    width: 280px !important;
  }
  #sidebar.sidebar-open { transform: translateX(0); }

  #main {
    margin-left: 0 !important;
    width: 100% !important;
  }

  #content {
    padding: 24px 20px 100px 20px !important;
  }

  /* Cap oversized inline-styled titles */
  .page-title {
    font-size: clamp(24px, 8vw, 32px) !important;
    margin-bottom: 8px !important;
  }
  .page-sub {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Hamburger logic */
  .hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    transition: transform 0.2s;
  }
  .hamburger-btn:active { transform: scale(0.9); }
}

/* 2. Tablet (iPad) Refinements (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .v4-grid, #content .grid-2, #content .grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* 3. Phone Refinements (≤767px) */
@media (max-width: 767px) {
  .v4-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .action-card {
    padding: 12px 16px !important;
  }

  /* Ensure grids with 1fr 1fr collapse */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }

  /* Fix for horizontal scrolling on question cards */
  .card, .glass {
    padding: 20px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Mobile bottom nav visibility */
  .bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 72px;
    background: rgba(13, 15, 24, 0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    z-index: 1500;
    padding: 0 12px;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* 4. Touch Target & Windowed Friendly Utilities */
.btn, .nav-item, .action-card, .topic-chip, .wizard-count-btn {
  min-height: 44px; /* Apple HCI Standard */
}

/* Prevent text selection on interaction elements for app-like feel */
.btn, .nav-item, .hamburger-btn, .topic-chip {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Handle narrow desktop windows */
@media (max-width: 500px) {
  .topbar-right .search-bar {
    display: none !important;
  }
  .sats-tab-label {
    display: none !important;
  }
}


/* ── Delegated event replacements (CSP-safe, replaces inline handlers) ─────── */

/* Card hover lift — replaces onmouseover/onmouseout translateY on .card-hover */
.card-hover:hover { transform: translateY(-2px); }

/* Answer textarea focus ring — replaces inline onfocus/onblur */
#user-answer:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px oklch(0.78 0.17 78 / 0.20) !important;
}

/* Times table input focus — replaces inline onfocus/onblur */
#tt-answer:focus { border-color: #f97316 !important; }

/* Times table submit button press — replaces inline onmousedown/onmouseup */
[data-k2s-click="submitTimesTable"]:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════
   PRINT STYLES — SATs Paper Mode + Parent Dashboard reports
   Strips app chrome; shows clean question/answer content.
   ═══════════════════════════════════════════════════════════ */
@media print {
  /* Hide all navigation, buttons, sidebars, footers */
  .nav-bar, .bottom-nav, .q-sidebar, #nile-panel, #notepad-panel,
  #scratchpad-panel, .toast-container, .modal-overlay,
  [data-k2s-click], .btn, .session-progress-bar-wrap,
  #pre-reveal-actions, #post-mark-area, #self-mark-area,
  #step-reveal-bar, #inline-scratch-area,
  .k2s-mute-btn, #scratch-toggle-btn {
    display: none !important;
  }

  /* Reset backgrounds to white, text to black */
  body, .card, .question-card, .solution-area, #content {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Ensure full page width */
  body { margin: 12mm; font-family: serif; font-size: 12pt; }
  #content, .wrap, .stagger { max-width: none !important; padding: 0 !important; }

  /* Show solution area regardless of state */
  .solution-area { display: block !important; }
  [id^="sol-step-"] { display: block !important; }

  /* Question text readable */
  .question-text, .question-text-main { font-size: 13pt !important; line-height: 1.6 !important; }

  /* Page breaks between questions in paper mode */
  .exam-question-block { page-break-inside: avoid; margin-bottom: 20pt; }

  /* Paper mode header stands alone on first page */
  .exam-header { page-break-after: avoid; }

  /* Parent dashboard: readable table */
  .card { border: 1px solid #ccc !important; margin-bottom: 12pt; padding: 8pt !important; }
  h1, h2 { color: #000 !important; }
}

/* ─── CUSTOM PAPER WIZARD ─── */
.wizard-topic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}
.topic-chip {
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topic-chip:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--border-2);
  transform: translateY(-2px);
}
.topic-chip.selected {
  background: oklch(0.78 0.17 78 / 0.10);
  border-color: var(--accent);
  color: var(--accent-2);
  box-shadow: 0 4px 15px oklch(0.78 0.17 78 / 0.20);
}
.topic-chip.selected .material-symbols-rounded {
  color: var(--accent);
  font-variation-settings: 'FILL' 1;
}
.wizard-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 20px 0 10px;
}
.wizard-count-btn {
  flex: 1;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.1);
  color: var(--text-2);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s var(--ease-expo);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wizard-count-btn.active {
  background: oklch(0.78 0.17 78 / 0.12);
  border-color: var(--accent);
  color: var(--text-1);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px oklch(0.78 0.17 78 / 0.20);
}

/* ── TOPBAR STREAK BADGE (always-on flame) ── */
.topbar-streak {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 100px;
  background: oklch(0.78 0.17 78 / 0.10);
  border: 1px solid oklch(0.78 0.17 78 / 0.30);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.topbar-streak .material-symbols-rounded { color: var(--accent); }
.topbar-streak.active {
  background: oklch(0.66 0.22 27 / 0.12);
  border-color: oklch(0.66 0.22 27 / 0.40);
  color: var(--alert);
  box-shadow: 0 0 12px oklch(0.66 0.22 27 / 0.25);
}
.topbar-streak.active .material-symbols-rounded { color: var(--alert); }

/* ── CEM SECTION DIVIDER + INTERMISSION (WS-6) ──────────────────────────────
   Section-boundary visual indicator that appears inline with the question-
   number grid when a sectioned paper (CEM, GL NVR multi-section) is running.
   The locked variant appears for sections the student has already left —
   they cannot return (examPrev guard). */
.section-divider {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  margin: 0 6px;
  border-radius: 8px;
  background: oklch(0.78 0.17 78 / 0.10);
  border: 1px dashed oklch(0.78 0.17 78 / 0.45);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
  white-space: nowrap;
}
.section-divider .material-symbols-rounded { font-size: 13px; color: var(--accent); }
.section-divider-label { font-size: 10px; }
.section-divider-locked {
  background: oklch(0.22 0.02 78 / 0.60);
  border-color: oklch(0.50 0.02 78 / 0.40);
  color: var(--text-3);
}
.section-divider-locked .material-symbols-rounded { color: var(--text-3); }

/* Questions outside the current section are dimmed and non-interactive. */
.exam-q-btn-other-section {
  pointer-events: none;
  filter: saturate(0.3);
}
.exam-q-btn-active {
  box-shadow: 0 0 0 2px oklch(0.78 0.17 78 / 0.35);
}

/* Intermission screen — rendered by _renderSectionTransition between sections.
   Kept minimal: the existing inline styles on the transition DOM provide layout,
   these add polish + an attention-grabbing state change. */
.section-intermission-card {
  animation: intermissionIn 0.5s var(--ease-expo) forwards;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 40px;
  box-shadow: 0 24px 60px -20px oklch(0 0 0 / 0.65);
}
@keyframes intermissionIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsive: on narrow screens the question grid scrolls horizontally; keep
   dividers visible as flex items. */
@media (max-width: 600px) {
  .section-divider { padding: 4px 7px; font-size: 9px; gap: 3px; }
  .section-divider-label { font-size: 9px; }
  .section-divider .material-symbols-rounded { font-size: 11px; }
}

/* ── TRAP-PILL PEDAGOGY (WS-14) ─────────────────────────────────────────────
   Rendered after a wrong-answer submission when the student's response matches
   a trap-tagged distractor. Each trap gets its own tint so patterns repeat
   visually and students learn to recognise them across questions. */
.trap-pill {
  transition: all .2s var(--ease-quart);
  animation: trap-pill-in 0.4s var(--ease-quart);
}
@keyframes trap-pill-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.trap-pill-partial_completion      { background: oklch(0.70 0.18 50 / 0.10) !important; border-color: oklch(0.70 0.18 50 / 0.40) !important; }
.trap-pill-partial_completion strong { color: oklch(0.70 0.18 50) !important; }
.trap-pill-operation_confusion     { background: oklch(0.66 0.22 27 / 0.10) !important; border-color: oklch(0.66 0.22 27 / 0.40) !important; }
.trap-pill-operation_confusion strong { color: oklch(0.66 0.22 27) !important; }
.trap-pill-unit_mismatch           { background: oklch(0.76 0.17 150 / 0.10) !important; border-color: oklch(0.76 0.17 150 / 0.40) !important; }
.trap-pill-unit_mismatch strong    { color: oklch(0.76 0.17 150) !important; }
.trap-pill-precedence_violation    { background: oklch(0.74 0.13 232 / 0.10) !important; border-color: oklch(0.74 0.13 232 / 0.40) !important; }
.trap-pill-precedence_violation strong { color: oklch(0.74 0.13 232) !important; }
.trap-pill-place_value_slip        { background: oklch(0.60 0.10 78 / 0.10) !important; border-color: oklch(0.60 0.10 78 / 0.40) !important; }
.trap-pill-place_value_slip strong { color: oklch(0.60 0.10 78) !important; }
.trap-pill-scope_shifter           { background: oklch(0.68 0.18 300 / 0.10) !important; border-color: oklch(0.68 0.18 300 / 0.40) !important; }
.trap-pill-scope_shifter strong    { color: oklch(0.68 0.18 300) !important; }
.trap-pill-same_theme_twin         { background: oklch(0.72 0.14 190 / 0.10) !important; border-color: oklch(0.72 0.14 190 / 0.40) !important; }
.trap-pill-same_theme_twin strong  { color: oklch(0.72 0.14 190) !important; }
.trap-pill-near_synonym_overstatement      { background: oklch(0.70 0.16 350 / 0.10) !important; border-color: oklch(0.70 0.16 350 / 0.40) !important; }
.trap-pill-near_synonym_overstatement strong { color: oklch(0.70 0.16 350) !important; }

/* ─── Submit-in-progress lock (WS-A1) ────────────────────────────────────────
   Applied to finish-exam / submit-paper buttons the instant the user confirms.
   Visual feedback + hard lockout so a rapid double-click can never double-fire. */
.submitting,
button.submitting,
[disabled].submitting {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: saturate(0.6);
}

/* ─── Writing task renderer (WS-8) ─────────────────────────────────────────── */
.writing-task {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 16px);
}
.writing-task textarea {
  width: 100%;
  min-height: 300px;
  padding: 1rem;
  font-family: var(--font-body, inherit);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-1);
  background: var(--bg-1, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s ease;
}
.writing-task textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15);
}
.writing-rubric {
  background: var(--bg-2, var(--surface-2));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}
.writing-rubric summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-1);
  list-style: none;
}
.writing-rubric summary::-webkit-details-marker { display: none; }
.writing-rubric summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s ease;
  color: var(--text-3);
}
.writing-rubric[open] summary::before { transform: rotate(90deg); }
.writing-wc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted, var(--text-3));
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.writing-wc.ok     { color: oklch(0.62 0.17 150); }   /* on-target: green */
.writing-wc.under  { color: oklch(0.68 0.16 60); }    /* under minimum: amber */
.writing-wc.over   { color: oklch(0.66 0.22 27); }    /* over maximum: red */

/* ─── AI quota pill (Dr Nile chat header) ──────────────────────────────────── */
#ai-quota-pill {
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#ai-quota-pill.low {
  background: oklch(0.68 0.16 60 / 0.12) !important;
  border-color: oklch(0.68 0.16 60 / 0.40) !important;
  color: oklch(0.55 0.18 40) !important;
}
#ai-quota-pill.empty {
  background: oklch(0.66 0.22 27 / 0.12) !important;
  border-color: oklch(0.66 0.22 27 / 0.40) !important;
  color: oklch(0.55 0.22 27) !important;
}



/* ============================================================================
   CLOUD-ERA POLISH (2026-04) — responsive, accessibility, print, motion.
   Runs on top of every existing theme (works across all 12 data-theme values).
   ============================================================================ */

/* WCAG 2.2 AA — visible focus ring on every interactive element.
   Previous :focus { outline: none } patterns are replaced here.
   We use a two-layer ring (inset + outset) so it shows on both light and dark
   backgrounds without having to override per-theme. */
:where(button, a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
  box-shadow: 0 0 0 4px oklch(0.78 0.17 78 / 0.20);
}

/* Skip-to-content link — appears on Tab for keyboard users. */
.skip-to-content {
  position: absolute;
  top: -40px;
  left: 8px;
  z-index: 100000;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s var(--ease-quart);
}
.skip-to-content:focus {
  top: 8px;
}

/* Ensure minimum tap target size of 44x44 (WCAG 2.5.5).
   Applied only where buttons are small (icon buttons etc.) — doesn't break
   existing large CTAs. */
button, [role="button"], a.btn, .btn {
  min-height: 44px;
  min-width: 44px;
}
/* Allow genuinely small inline buttons (the "here"/"link" style) to opt out */
.btn-inline, button.btn-inline {
  min-height: auto;
  min-width: auto;
}

/* ── RESPONSIVE BREAKPOINTS ────────────────────────────────────────────────
   iPhone SE (375px) → iPhone 15 Pro Max (430px) → iPad (768px) → laptop (1024+) */

/* Mobile first — tighten paddings on small screens so content doesn't scroll
   horizontally or waste real estate */
@media (max-width: 640px) {
  :root {
    --space-xl: 16px;
    --space-2xl: 20px;
    --space-3xl: 28px;
  }
  h1, .page-title { font-size: clamp(22px, 6vw, 32px) !important; }
  h2 { font-size: clamp(18px, 4.5vw, 24px) !important; }
  .card { padding: 18px !important; }
  /* Reduce multi-column grids to 1 column on phones to avoid cramped layouts */
  .v4-grid { grid-template-columns: 1fr !important; }
  /* Touch-friendly sidebar: hide by default, show as overlay when toggled */
  #sidebar { width: 80vw !important; max-width: 320px; }
  /* Reduce horizontal padding on page containers */
  .stagger { padding-left: 12px; padding-right: 12px; }
}

/* Tablet — 2-column layouts where desktop uses 3 */
@media (min-width: 641px) and (max-width: 1023px) {
  .v4-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Small desktop — keep 3 but tighter gaps */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --space-2xl: 24px; --space-3xl: 36px; }
}

/* Ultrawide — cap content width so lines stay readable (max 75ch) */
@media (min-width: 1440px) {
  .stagger, main, #content { max-width: 1280px; margin-left: auto; margin-right: auto; }
}

/* ── PRINT STYLES (for parent reports / progress print-outs) ─────────────── */
@media print {
  /* Hide every non-content UI chrome */
  #sidebar, #topbar, .bottom-nav, .btn, button, #k2s-sw-update, #k2s-pwa-banner,
  #k2s-mig-dialog, .nile-companion, .toast { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card, .glass {
    background: #fff !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
  a { color: #000 !important; text-decoration: underline !important; }
  h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
  .eyebrow, .mono { color: #333 !important; }
  /* Print URL after external links so reader sees the destination */
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* ── REDUCED MOTION — respects prefers-reduced-motion: reduce ─────────────
   Already handled at the top of main.css, but this block adds app-specific
   belt-and-braces for newly-added animations. */
@media (prefers-reduced-motion: reduce) {
  .anim-in, .stagger > *, .shimmer::after, .wizard-cta-scale {
    animation: none !important;
    transition: none !important;
  }
  html { scroll-behavior: auto; }
}

/* ── FORCED-COLORS MODE (Windows High Contrast) ──────────────────────────── */
@media (forced-colors: active) {
  .card, .glass, .tele-tile, .btn, .btn-deck {
    border: 1px solid CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
  .status-dot { forced-color-adjust: none; }
}

/* ── DYSLEXIA-FRIENDLY FONT OVERRIDE ────────────────────────────────────── */
html.dyslexia,
html.dyslexia body,
html.dyslexia * {
  font-family: 'Open Dyslexic', 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
  letter-spacing: 0.03em;
  line-height: 1.75;
}

/* ── HIGH CONTRAST PUPIL TOGGLE (settings) ──────────────────────────────── */
html.highcontrast {
  --bg: #000;
  --bg-2: #0a0a0a;
  --surface: #0f0f0f;
  --surface-2: #1a1a1a;
  --text-1: #fff;
  --text-2: #e0e0e0;
  --text-3: #c0c0c0;
  --border: #ffffff44;
  --border-2: #ffffff88;
  --accent: #ffd500;
  --accent-ink: #000;
}
html.highcontrast .card,
html.highcontrast .glass {
  border: 2px solid var(--border-2) !important;
}

/* ── CONSISTENT CARD HOVER (works on every theme) ────────────────────────── */
.card {
  transition: transform var(--dur-med) var(--ease-quart),
              border-color var(--dur-med) var(--ease-quart),
              box-shadow var(--dur-med) var(--ease-quart);
}
.card-hover:hover, .tele-tile:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
  box-shadow: var(--card-shadow-lg);
}

/* ── SMOOTHER LINK STATES ───────────────────────────────────────────────── */
a {
  transition: color var(--dur-fast) var(--ease-quart);
}
a:hover { color: var(--accent-2); }

/* ── PRICING CARDS — subtle scale hover to signal interactivity ─────────── */
#pricing-grid > div:hover {
  transform: translateY(-4px);
  transition: transform var(--dur-med) var(--ease-expo);
}

/* ── BETTER SCROLLBAR STYLING (WebKit) ───────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--accent); background-clip: padding-box; }

/* ── MIGRATE DIALOG FADE (matches migrate_local.js keyframe) ──────────────── */
#k2s-migrate-dialog { will-change: opacity, transform; }

/* ── ACCESSIBILITY: LARGER CLICKABLE AREAS FOR SMALL ICONS ──────────────── */
.btn-icon {
  padding: 10px;
}

/* ── FAQ <details> SMOOTH OPEN ───────────────────────────────────────────── */
details[open] summary span.material-symbols-rounded {
  transform: rotate(180deg);
}

/* ── TOUCH DEVICE HINTS ─────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* On touch screens, hover states are useless and can cause "sticky" hover.
     Disable them so the UI feels native on mobile. */
  .card-hover:hover, .tele-tile:hover, #pricing-grid > div:hover {
    transform: none;
  }
}

/* ── OFFLINE BANNER (reachable via JS when navigator.onLine === false) ──── */
.k2s-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 20px;
  background: var(--alert);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  z-index: 99999;
  animation: slide-down 0.3s var(--ease-out);
}
@keyframes slide-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
/* =========================================================================
   END CLOUD-ERA POLISH
   ========================================================================= */

/* ============================================================================
   ELITE-KIT POLISH (2026-04) — matches tuition-site aesthetic.
   Adds the championship-amber "Studio.io" look on top of Flight Deck 2030.
   Applies ONLY to the landing page + marketing-style sections via opt-in class.
   Existing dashboard/in-app views unchanged — this is additive.
   ============================================================================ */

/* Aurora background — animated radial glow behind hero sections */
.elite-aurora {
  position: relative;
  isolation: isolate;
}
.elite-aurora::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 70% 50% at 20% 30%, oklch(0.78 0.17 78 / 0.12), transparent 55%),
    radial-gradient(ellipse 60% 45% at 80% 70%, oklch(0.74 0.13 232 / 0.08), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 100%, oklch(0.76 0.17 150 / 0.06), transparent 55%);
  filter: blur(40px);
  z-index: -1;
  animation: elite-aurora-drift 30s ease-in-out infinite alternate;
}
@keyframes elite-aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, -2%) scale(1.05); }
  66%  { transform: translate(-2%, 3%) scale(0.98); }
  100% { transform: translate(0, 0) scale(1); }
}

/* HUD corner brackets — apply to any element with .hud-panel */
.hud-panel {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 24px;
  background: var(--bg-2);
}
.hud-panel::before,
.hud-panel::after,
.hud-panel > .hud-brackets::before,
.hud-panel > .hud-brackets::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent);
}
.hud-panel::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.hud-panel::after  { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.hud-panel > .hud-brackets::before { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.hud-panel > .hud-brackets::after  { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

/* Gold shimmer overlay (one-shot, reveal on mount) */
.gold-shimmer {
  position: relative;
  overflow: hidden;
}
.gold-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, oklch(0.86 0.15 82 / 0.25) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: gold-sweep 2.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  pointer-events: none;
}
@keyframes gold-sweep {
  to { transform: translateX(100%); }
}

/* Terminal-style typography for data readouts (matches tuition site HUD) */
.terminal-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--accent-2);
  text-transform: uppercase;
  opacity: 0.9;
}
.terminal-text::before { content: "> "; opacity: 0.6; }

/* Scan-line accent — thin gold line running top of hero */
.scan-accent {
  position: relative;
}
.scan-accent::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.5;
  animation: scan-pulse 4s ease-in-out infinite;
}
@keyframes scan-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.7; }
}

/* Data-tile large number — matches Hero stat tiles */
.data-num {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.data-num--success { color: var(--success); }
.data-num--alert   { color: var(--alert); }
.data-num--info    { color: var(--info); }

/* Badge label pill — used for "LIVE" dot, "BETA", etc. */
.elite-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: oklch(0.78 0.17 78 / 0.10);
  border: 1px solid oklch(0.78 0.17 78 / 0.35);
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.elite-badge__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px oklch(0.76 0.17 150 / 0.5);
  animation: elite-pulse 2s ease-in-out infinite;
}
@keyframes elite-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.7; }
}

/* Honour prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .elite-aurora::before, .gold-shimmer::after, .scan-accent::before, .elite-badge__dot {
    animation: none !important;
  }
}
/* =========================================================================
   END ELITE-KIT POLISH
   ========================================================================= */


/* ============================================================================
   MISSION-DECK KIT (2026-04) — in-app screen components
   Re-usable atoms/molecules used by every redesigned view (Home, Topics,
   Question, Exam, Progress, Achievements, Mistakes, Notes, Flashcards, etc.)
   Every class uses theme tokens so the 12 themes continue to work.
   ============================================================================ */

/* ── Hero panel — top of each view ────────────────────────────────────────── */
.mk-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(20px, 4vw, 40px);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, oklch(0.22 0.02 78 / 0.55), oklch(0.185 0.015 78 / 0.75));
  overflow: hidden;
  margin-bottom: 24px;
}
[data-theme="light"] .mk-hero {
  background: linear-gradient(180deg, oklch(0.98 0.01 78), oklch(0.95 0.015 78));
}
.mk-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 60% 45% at 15% 25%, var(--accent-glow), transparent 55%),
    radial-gradient(ellipse 55% 40% at 85% 75%, oklch(0.74 0.13 232 / 0.10), transparent 55%);
  filter: blur(28px);
  z-index: -1;
  opacity: 0.9;
}
.mk-hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.45;
}
.mk-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 8px;
}
.mk-hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px oklch(0.76 0.17 150 / 0.55);
}
.mk-hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-1);
  margin: 0 0 8px;
}
.mk-hero__sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 62ch;
  margin: 0;
}
.mk-hero__row {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}

/* ── Stat grid — one-row KPI tiles (XP, streak, questions, time) ───────── */
.mk-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.mk-stat {
  position: relative;
  padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.mk-stat:hover {
  transform: translateY(-2px);
  border-color: var(--border-2);
}
.mk-stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
.mk-stat__value {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 4px;
}
.mk-stat__value .mk-stat__unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-left: 4px;
}
.mk-stat__delta {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
}
.mk-stat--accent .mk-stat__value  { color: var(--accent); }
.mk-stat--success .mk-stat__value { color: var(--success); }
.mk-stat--alert .mk-stat__value   { color: var(--alert); }
.mk-stat--info .mk-stat__value    { color: var(--info); }
.mk-stat__icon {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--accent-glow);
  display: grid; place-items: center;
  color: var(--accent);
  font-size: 16px;
}

/* ── Section title bar ─────────────────────────────────────────────────── */
.mk-section {
  margin: 28px 0 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.mk-section__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
}
.mk-section__title::before {
  content: "";
  display: inline-block;
  width: 3px; height: 18px;
  background: var(--accent);
  border-radius: 2px;
}
.mk-section__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ── Action tile grid (subjects, quick actions) ────────────────────────── */
.mk-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.mk-tile {
  position: relative;
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out),
              background-color var(--dur-med) var(--ease-out);
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
}
.mk-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-glow), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-out);
  z-index: -1;
  pointer-events: none;
}
.mk-tile:hover {
  transform: translateY(-3px);
  border-color: oklch(0.78 0.17 78 / 0.4);
}
.mk-tile:hover::after { opacity: 1; }
.mk-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mk-tile__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--accent-glow);
  display: grid; place-items: center;
  color: var(--accent);
  font-size: 22px;
  margin-bottom: 14px;
}
.mk-tile__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-1);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.mk-tile__sub {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0;
}
.mk-tile__arrow {
  position: absolute;
  top: 20px; right: 20px;
  color: var(--text-3);
  transition: transform var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out);
}
.mk-tile:hover .mk-tile__arrow {
  color: var(--accent);
  transform: translate(3px, -3px);
}
.mk-tile__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.mk-tile__foot-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
}
.mk-tile__foot-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── List rows (progress / mistakes / bookmarks / notes / chat items) ──── */
.mk-list {
  display: flex; flex-direction: column; gap: 8px;
}
.mk-list__row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.mk-list__row:hover {
  border-color: var(--border-2);
  background: var(--surface-2);
}
.mk-list__icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mk-list__body { flex: 1; min-width: 0; }
.mk-list__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-1);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-list__sub {
  font-size: 12px;
  color: var(--text-2);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mk-list__right {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
}

/* ── Chip / tag pill ───────────────────────────────────────────────────── */
.mk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  background: oklch(0.78 0.17 78 / 0.10);
  border: 1px solid oklch(0.78 0.17 78 / 0.25);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 500;
}
.mk-chip--success {
  background: oklch(0.76 0.17 150 / 0.10);
  border-color: oklch(0.76 0.17 150 / 0.30);
  color: var(--success-2);
}
.mk-chip--alert {
  background: oklch(0.66 0.22 27 / 0.10);
  border-color: oklch(0.66 0.22 27 / 0.30);
  color: var(--alert-2);
}
.mk-chip--info {
  background: oklch(0.74 0.13 232 / 0.10);
  border-color: oklch(0.74 0.13 232 / 0.30);
  color: var(--info);
}
.mk-chip--muted {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-2);
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
.mk-progress {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.mk-progress__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--dur-slow) var(--ease-out);
  box-shadow: 0 0 10px var(--accent-glow);
}
.mk-progress--success .mk-progress__fill {
  background: linear-gradient(90deg, var(--success), var(--success-2));
  box-shadow: 0 0 10px var(--success-glow);
}

/* ── CTA buttons (in-app) ──────────────────────────────────────────────── */
.mk-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-main);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid var(--accent);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  min-height: 44px;
}
.mk-cta:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px var(--accent-glow);
}
.mk-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mk-cta--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid oklch(0.78 0.17 78 / 0.45);
}
.mk-cta--ghost:hover {
  background: oklch(0.78 0.17 78 / 0.1);
}
.mk-cta--danger {
  background: transparent;
  color: var(--alert);
  border: 1px solid oklch(0.66 0.22 27 / 0.45);
}
.mk-cta--danger:hover {
  background: oklch(0.66 0.22 27 / 0.10);
}

/* ── Empty state ──────────────────────────────────────────────────────── */
.mk-empty {
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--border-2);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.mk-empty__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--accent-glow);
  color: var(--accent);
  display: inline-grid; place-items: center;
  font-size: 28px;
  margin-bottom: 14px;
}
.mk-empty__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-1);
  margin: 0 0 6px;
}
.mk-empty__sub {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 0 16px;
}

/* ── Subject / exam-board cards (large, glowing) ───────────────────────── */
.mk-subject-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.mk-subject {
  position: relative;
  padding: 22px;
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  text-align: left;
  color: inherit;
  font: inherit;
  width: 100%;
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.mk-subject::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-glow), transparent 60%);
  opacity: 0.4;
  z-index: -1;
}
.mk-subject:hover {
  transform: translateY(-3px);
  border-color: oklch(0.78 0.17 78 / 0.45);
}
.mk-subject__emoji {
  font-size: 36px;
  margin-bottom: 12px;
  display: inline-block;
}
.mk-subject__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  color: var(--text-1);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.mk-subject__sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 14px;
  line-height: 1.5;
}
.mk-subject__bar { margin-top: 12px; }

/* ── HUD-style terminal header (mission brief banner) ──────────────────── */
.mk-terminal {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 12px;
  border: 1px solid oklch(0.78 0.17 78 / 0.30);
  border-radius: 99px;
  background: oklch(0.78 0.17 78 / 0.06);
}
.mk-terminal::before {
  content: ">";
  color: var(--accent);
  font-weight: 700;
}

/* ── Grid texture background (subtle) ──────────────────────────────────── */
.mk-grid-bg {
  position: relative;
}
.mk-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}
.mk-grid-bg > * { position: relative; z-index: 1; }

/* ── Question card (practice + exam) ──────────────────────────────────── */
.mk-qcard {
  padding: clamp(20px, 3.5vw, 36px);
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  isolation: isolate;
}
.mk-qcard__meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.mk-qcard__title {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  line-height: 1.3;
}
.mk-qcard__options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.mk-qcard__option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  min-height: 56px;
  color: var(--text-1);
  font-size: 15px;
  font-family: var(--font-main);
  width: 100%;
  text-align: left;
}
.mk-qcard__option:hover {
  border-color: oklch(0.78 0.17 78 / 0.4);
  background: oklch(0.78 0.17 78 / 0.08);
  transform: translateX(3px);
}
.mk-qcard__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.mk-qcard__option .mk-qcard__letter {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent-glow);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.mk-qcard__option.is-correct {
  background: oklch(0.76 0.17 150 / 0.15);
  border-color: oklch(0.76 0.17 150 / 0.45);
}
.mk-qcard__option.is-correct .mk-qcard__letter {
  background: var(--success);
  color: var(--accent-ink);
}
.mk-qcard__option.is-wrong {
  background: oklch(0.66 0.22 27 / 0.12);
  border-color: oklch(0.66 0.22 27 / 0.45);
}
.mk-qcard__option.is-wrong .mk-qcard__letter {
  background: var(--alert);
  color: oklch(1 0 0);
}

/* ── Small utility spacers ─────────────────────────────────────────────── */
.mk-spacer-sm { height: 12px; }
.mk-spacer-md { height: 24px; }
.mk-spacer-lg { height: 40px; }

/* ── Responsive refinements ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mk-hero { padding: 18px; border-radius: var(--r-lg); }
  .mk-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .mk-tile-grid, .mk-subject-grid { grid-template-columns: 1fr; }
  .mk-tile__arrow { display: none; }
}
@media (min-width: 1280px) {
  .mk-stat-grid { gap: 18px; }
}

/* ── Light theme adjustments ──────────────────────────────────────────── */
[data-theme="light"] .mk-stat,
[data-theme="light"] .mk-tile,
[data-theme="light"] .mk-subject,
[data-theme="light"] .mk-qcard,
[data-theme="light"] .mk-list__row,
[data-theme="light"] .mk-empty {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .mk-qcard__option {
  background: #fafafa;
  border-color: rgba(0,0,0,0.08);
  color: #1f1f1f;
}
[data-theme="light"] .mk-progress { background: rgba(0,0,0,0.06); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mk-tile, .mk-stat, .mk-subject, .mk-list__row,
  .mk-progress__fill, .mk-tile__arrow, .mk-cta, .mk-hero::before {
    transition: none !important;
    animation: none !important;
  }
}
/* =========================================================================
   END MISSION-DECK KIT
   ========================================================================= */

/* ============================================================================
   GLOBAL LIGHT-MODE FIX + RESPONSIVE POLISH (2026-04)
   Covers all 5 bright themes: light, candy, sky, mint, sunshine.
   Uses :is() to keep the selector list short.
   ============================================================================ */

/* ── 0. Colour-scheme hint so browser scrollbar + inputs match ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) {
  color-scheme: light;
}

/* ── 1. Subject cards (rgba white almost invisible on light bg) ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .subject-card-v4 {
  background: rgba(0,0,0,0.025);
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .subject-card-v4:hover {
  background: rgba(0,0,0,0.05);
}

/* ── 2. V4 card main + side (gradient was hardcoded dark) ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .v4-card-main {
  background: linear-gradient(135deg, rgba(0,0,0,0.02), transparent) !important;
}

/* ── 3. Mission-deck hero for candy/sky/mint/sunshine ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .mk-hero {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--bg) 40%, white 60%),
    var(--bg));
  border-color: var(--border);
}

/* ── 4. Mission-deck stat/tile/subject for candy/sky/mint/sunshine ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) :is(.mk-stat, .mk-tile, .mk-subject,
    .mk-qcard, .mk-list__row, .mk-empty) {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .mk-qcard__option {
  background: #fafafa;
  border-color: rgba(0,0,0,0.08);
  color: var(--text-1);
}
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .mk-progress {
  background: rgba(0,0,0,0.07);
}

/* ── 5. HUD panel ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .hud-panel {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.05);
}

/* ── 6. Selection cards ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .selection-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

/* ── 7. Answer input ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .answer-input {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-color: rgba(0,0,0,0.15) !important;
}

/* ── 8. Pricing cards ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .pricing-card {
  background: #ffffff;
  border-color: rgba(0,0,0,0.08);
}

/* ── 9. Aurora background — reduce on light (too garish) ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .elite-aurora::before {
  opacity: 0.25;
}

/* ── 10. Hover shadow on light should be lighter ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .action-card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.10) !important;
}

/* ── 11. Sidebar + topbar for candy/sky/mint/sunshine (use bg-2) ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) #sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.07);
}
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) #topbar {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* ── 12. Bottom nav for candy/sky/mint/sunshine ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .bottom-nav {
  background: rgba(255,255,255,0.96);
}

/* ── 13. Chat + inputs ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) :is(.chat-input, .timetable-input,
    .teachback-textarea) {
  background: #f4f5f7;
  color: var(--text-1);
}
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) :is(.scratchpad-panel, .scratchpad-textarea) {
  background: #ffffff;
  color: var(--text-1);
}
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .session-timer-pill {
  background: #ffffff;
  color: var(--text-1);
}
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) :is(.times-btn, .tier-btn) {
  background: #ffffff;
  color: var(--text-1);
}

/* ── 14. Question image wrap ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .question-img-wrap {
  background: #f0f2f7;
  border-color: rgba(0,0,0,0.12);
}

/* ── 15. Chat user bubble ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .chat-bubble.user {
  background: var(--accent);
  color: oklch(0.98 0.01 78);
}

/* ── 16. Generic card / glass for candy/sky/mint/sunshine ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) :is(.card, .glass) {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* ── 17. Toast stays readable ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .toast { color: #ffffff; }

/* ── 18. Search input text ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .search-bar input { color: var(--text-1); }

/* ── 19. Nav active state for candy/sky/mint/sunshine ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .nav-item:hover { background: rgba(0,0,0,0.04); }
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .nav-item.active {
  background: rgba(0,0,0,0.06);
  color: var(--accent);
}

/* ── 20. Input fields on all light themes ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) input:not([type="range"]),
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) textarea,
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) select {
  background: #ffffff;
  color: var(--text-1);
  border-color: rgba(0,0,0,0.14);
}


/* ============================================================================
   TYPOGRAPHY — fluid scale + Nunito everywhere, Boldonse for page titles only
   ============================================================================ */

html { font-size: clamp(14px, 1.4vw + 10px, 16px); }

/* Page-level display headings only */
h1, .page-title { font-family: var(--font-heading); font-size: clamp(21px, 3.5vw + 8px, 34px); letter-spacing: 0.01em; }
h2 { font-family: var(--font-heading); font-size: clamp(17px, 2.5vw + 6px, 26px); letter-spacing: 0.01em; }

/* h3 and below — stay Nunito (used inside cards like "Mark Scheme") */
h3 { font-family: var(--font-main); font-size: clamp(14px, 1.4vw + 5px, 18px); font-weight: 700; }

/* Question text */
.question-text { font-size: clamp(16px, 1.8vw + 8px, 22px) !important; line-height: 1.72; }

/* Dashboard stat display numbers */
.mk-stat__value { font-size: clamp(20px, 2.5vw + 6px, 32px); font-family: var(--font-heading); }
.mk-tile__title { font-size: clamp(13px, 1.2vw + 5px, 16px); }

/* Nunito on ALL interactive + text elements — but NEVER on icon fonts */
body, p, li, div, input, textarea, select, button, label, td, th {
  font-family: var(--font-main);
}
/* Leave span alone — many contain Material Symbols icons. Apply Nunito
   only to non-icon spans via :not(). */
span:not([class*="material-symbols"]):not(.material-icons):not([class*="icon"]) {
  font-family: var(--font-main);
}

/* Material Symbols (icon font) must keep their font intact */
.material-symbols-rounded,
.material-symbols-outlined,
.material-symbols-sharp,
.material-icons {
  font-family: 'Material Symbols Rounded', 'Material Icons' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga' !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Monospace stays Geist Mono */
code, pre, .mono, [class*="font-mono"], kbd { font-family: var(--font-mono) !important; }


/* ============================================================================
   LIGHT THEMES — comprehensive token + component overrides
   Targets: light · candy · sky · mint · sunshine
   ============================================================================ */
:where([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
       [data-theme="mint"],[data-theme="sunshine"]) {
  color-scheme: light; /* native browser chrome (scrollbars, select, etc.) */
}

/* Tone down the animated mesh — it looks heavy on a pale background */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) body::before {
  opacity: 0.1 !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) body::after {
  opacity: 0.01 !important;
}

/* ── Surfaces ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #sidebar {
  background: #ffffff;
  border-right: 1px solid rgba(0,0,0,0.07);
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #topbar {
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  backdrop-filter: blur(12px);
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .bottom-nav {
  background: rgba(255,255,255,0.97) !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
}

/* ── Cards and glass ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) :is(.card, .glass, .action-card) {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06) !important;
}

/* ── Answer textarea ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #user-answer,
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #exam-answer {
  background: #ffffff !important;
  color: var(--text-1) !important;
  border-color: rgba(0,0,0,0.18) !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #user-answer:focus,
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #exam-answer:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #user-answer:disabled {
  background: #f0f2f7 !important;
  color: var(--text-2) !important;
  border-color: rgba(0,0,0,0.1) !important;
}

/* ── AI feedback box ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #ai-feedback-box {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.1) !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #ai-feedback-box .feedback-header,
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #ai-feedback-content {
  color: var(--text-1) !important;
}

/* ── Solution / mark scheme area ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .solution-area {
  background: transparent !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .solution-step {
  background: #f4f6fc !important;
  border: 1px solid rgba(0,0,0,0.07) !important;
  border-radius: var(--r-md);
  padding: 12px 14px;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .step-label {
  color: var(--accent) !important;
  font-weight: 800;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .solution-content {
  color: var(--text-1) !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .divider {
  background: rgba(0,0,0,0.08) !important;
  height: 1px;
  margin: 20px 0;
}

/* ── Fraction input container ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .fraction-input-container {
  background: #f1f4fc !important;
  border-color: rgba(0,0,0,0.1) !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .fraction-input-container input {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: var(--text-1) !important;
}

/* ── Bar model ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #barmodel-container {
  background: #f1f4fc !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── Difficulty toggle buttons ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .difficulty-btn {
  background: #f0f2f8 !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: var(--text-2) !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .difficulty-btn.active-diff {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}

/* ── Sidebar question stats card ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .q-sidebar-card {
  background: #ffffff !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* ── Mastery bar background ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .mastery-bar-bg {
  background: rgba(0,0,0,0.08) !important;
}

/* ── Shimmer skeleton on light backgrounds ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .shimmer {
  background: linear-gradient(90deg, #e4e7f0 0%, #f4f6fb 50%, #e4e7f0 100%) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.4s linear infinite !important;
}

/* ── Code / formula blocks ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) code,
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .mono {
  background: #eef0f8 !important;
  color: var(--text-1) !important;
  border-radius: 4px;
  padding: 1px 4px;
}

/* ── Search bar input ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .search-bar {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .search-bar input {
  color: var(--text-1) !important;
  background: transparent !important;
}

/* ── Toasts stay white text (they're coloured) ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .toast { color: #ffffff; }

/* ── Nav items ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .nav-item { color: var(--text-2); }
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .nav-item:hover { background: rgba(0,0,0,0.04); }
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .nav-item.active {
  background: rgba(0,0,0,0.06);
  color: var(--accent);
}

/* ── Notepad ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) :is(.notepad-panel, #k2s-notepad) {
  background: #ffffff;
  border-color: rgba(0,0,0,0.09);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* ── Session timer pill ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .session-timer-pill {
  background: #ffffff;
  color: var(--text-1);
  border: 1px solid rgba(0,0,0,0.1);
}

/* ── Various button variants ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) :is(.times-btn, .tier-btn) {
  background: #ffffff;
  color: var(--text-1);
  border: 1px solid rgba(0,0,0,0.1);
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .btn-ghost {
  color: var(--text-1);
  border-color: rgba(0,0,0,0.12);
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .btn-ghost:hover {
  background: rgba(0,0,0,0.04);
}

/* ── Chat bubbles ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .chat-bubble.user {
  background: var(--accent);
  color: oklch(0.98 0.01 78);
}
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .chat-input,
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .timetable-input,
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .teachback-textarea {
  background: #f4f6fb;
  color: var(--text-1);
  border-color: rgba(0,0,0,0.1);
}

/* ── Question image wrap ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .question-img-wrap {
  background: #f0f2f7;
  border-color: rgba(0,0,0,0.12);
}

/* ── Hero gradient on light (avoid dark overlay bleed) ── */
:is([data-theme="candy"],[data-theme="sky"],[data-theme="mint"],
    [data-theme="sunshine"]) .mk-hero {
  background: linear-gradient(180deg,
    color-mix(in oklch, var(--bg) 40%, white 60%),
    var(--bg)
  );
}

/* ── Scratchpad ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) :is(.scratchpad-panel, .scratchpad-textarea) {
  background: #ffffff;
  color: var(--text-1);
}

/* ── Answer / practice inputs ── */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) .answer-input {
  background: #ffffff;
  color: var(--text-1);
  border-color: rgba(0,0,0,0.15);
}


/* ============================================================================
   RESPONSIVE LAYOUT — Mobile (<=640px) and iPad (641–1024px)
   ============================================================================ */

/* Question layout: 2-col → 1-col below 768px */
@media (max-width: 768px) {
  .question-layout {
    grid-template-columns: 1fr !important;
  }
  .question-card { padding: 18px 16px !important; }
}

/* Topic grid: 2-col on iPad */
@media (min-width: 641px) and (max-width: 1024px) {
  .topic-grid, .mk-tile-grid, .mk-subject-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .topic-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* V4 grid: single col on tablet + mobile */
@media (max-width: 1024px) {
  .v4-grid { grid-template-columns: 1fr !important; }
  .v4-card-main, .v4-card-side { grid-column: span 1 !important; }
}

/* Stats: always 2-col on phones */
@media (max-width: 640px) {
  .mk-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .puck-row { flex-wrap: wrap !important; gap: 8px !important; }
}

/* Touch targets — WCAG 2.5.5 min 44×44 */
@media (max-width: 768px) {
  .btn, .icon-btn, .nav-item, .action-card, .topic-card { min-height: 44px; }
  .conf-btn, .mk-qcard__option { min-height: 52px !important; padding: 12px 16px !important; }
}

/* Main content padding */
@media (max-width: 640px) {
  .main-content, #main-content { padding: 12px !important; }
  .hud-panel { padding: 16px !important; }
  .mk-hero { padding: 16px !important; border-radius: var(--r-lg) !important; }
  .mk-section { margin-top: 20px !important; }
  .question-text img { max-width: 100% !important; height: auto !important; }
  .math-column { font-size: 17px !important; }
  .math-bus-stop { font-size: 19px !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .main-content, #main-content { padding: 20px !important; }
}

/* Pricing grid */
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr !important; }
  .pricing-detail-layout { grid-template-columns: 1fr !important; }
  .pricing-detail-sticky { position: static !important; }
}

/* Notepad panel */
.notepad-panel, #k2s-notepad {
  min-height: 200px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 32px -8px rgba(0,0,0,0.25);
}
.notepad-panel textarea, #k2s-notepad textarea {
  font-family: var(--font-main);
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.7;
  color: var(--text-1);
  background: transparent;
  border: none;
  resize: none;
  width: 100%;
  padding: 16px;
  outline: none;
}

/* ============================================================================
   END — TYPOGRAPHY + LIGHT-MODE + RESPONSIVE POLISH
   ============================================================================ */


/* ============================================================================
   REBRAND — clean tutoring-site style (blue primary, no glows, no slop)
   This block overrides the earlier amber/Flight-Deck look. Keep it last.
   ============================================================================ */

/* Professional primary — restrained navy blue (UK tutoring-site feel). */
:root {
  --accent:       oklch(0.56 0.16 255);   /* deep educational blue */
  --accent-2:     oklch(0.66 0.16 255);   /* hover */
  --accent-ink:   #ffffff;
  --accent-glow:  oklch(0.56 0.16 255 / 0.14);

  --success:      oklch(0.65 0.17 155);
  --success-2:    oklch(0.72 0.15 155);
  --success-glow: oklch(0.65 0.17 155 / 0.12);

  --alert:        oklch(0.62 0.22 25);
  --alert-2:      oklch(0.70 0.20 25);
  --alert-glow:   oklch(0.62 0.22 25 / 0.12);

  --info:         oklch(0.66 0.15 230);
  --amber:        var(--accent);
  --emerald:      var(--success);
  --rose:         var(--alert);

  --card-shadow:  0 1px 2px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06);
}

/* Light-theme token override so blue reads right on white */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) {
  --bg:           #f7f9fc;
  --bg-2:         #ffffff;
  --surface:      #ffffff;
  --surface-2:    #eef2f8;
  --border:       rgba(15,23,42,0.08);
  --border-2:     rgba(15,23,42,0.14);
  --text-1:       #0f172a;
  --text-2:       #475569;
  --text-3:       #64748b;
  --accent:       oklch(0.52 0.16 255);
  --accent-2:     oklch(0.60 0.16 255);
  --accent-ink:   #ffffff;
  --accent-glow:  oklch(0.52 0.16 255 / 0.14);
  --glass-bg:     #ffffff;
  --glass-border: rgba(15,23,42,0.08);
  --card-shadow:  0 1px 2px rgba(15,23,42,0.04), 0 4px 14px rgba(15,23,42,0.06);
}

/* Keep dark as "midnight-ish" calm, not amber-graphite */
:is([data-theme="dark"],[data-theme="midnight"],[data-theme="forest"],
    [data-theme="ocean"],[data-theme="rose"],[data-theme="sunset"],
    [data-theme="lavender"]) {
  --bg:           #0b1020;
  --bg-2:         #111831;
  --surface:      rgba(255,255,255,0.04);
  --surface-2:    rgba(255,255,255,0.07);
  --border:       rgba(255,255,255,0.08);
  --border-2:     rgba(255,255,255,0.14);
  --text-1:       #e6eefc;
  --text-2:       #9aa7c3;
  --text-3:       #7f8bad;
  --accent:       oklch(0.66 0.16 255);
  --accent-2:     oklch(0.74 0.16 255);
  --accent-ink:   #0b1020;
  --accent-glow:  oklch(0.66 0.16 255 / 0.18);
  --glass-bg:     rgba(17,24,49,0.75);
  --glass-border: rgba(255,255,255,0.08);
}

/* Strip out "Flight Deck" mesh + grain — quieter canvas */
body::before, body::after { display: none !important; }

/* Nuke every neon glow shadow. Keep only crisp card shadows. */
.status-dot,
.status-dot--on, .status-dot--warn, .status-dot--alert, .status-dot--info,
.pulse-glow, .nile-avatar-wrap,
.energy-bar-fill, .token-badge,
[class*="glow"] {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Remove pulse-glow animation from Dr Nile avatar and all pulse elements */
.pulse-glow, .nile-avatar-wrap {
  animation: none !important;
}

/* Unify card surfaces */
.card, .glass {
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.card:hover, .card-hover:hover {
  transform: translateY(-1px);
  border-color: var(--border-2);
  box-shadow: 0 2px 4px rgba(15,23,42,0.05), 0 8px 20px rgba(15,23,42,0.08);
}

/* Unify buttons */
.btn, .btn-primary, .btn-deck, .mk-cta,
.session-btn-q5, .session-btn-q10, .session-btn-q20 {
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 10px;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  cursor: pointer;
}
.btn-primary, .btn-deck, .mk-cta {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  box-shadow: 0 1px 2px rgba(15,23,42,0.1);
}
.btn-primary:hover, .btn-deck:hover, .mk-cta:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
}
.btn-primary:active, .btn-deck:active, .mk-cta:active {
  transform: translateY(1px);
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: rgba(15,23,42,0.04); }

/* Fix the stubborn hardcoded #ecc06a (amber text) — make it match theme */
[style*="#ecc06a"], [style*="ecc06a"] { color: var(--accent) !important; }

/* "Book a Demo" or any .btn that disappears on hover due to colour:white rules */
.btn:hover, .btn-ghost:hover, .card:hover {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Boot splash — quieter, no "FLIGHT DECK / SEQ 001" vibe */
#k2s-loading::before { display: none !important; }
#k2s-loading .boot-id { display: none !important; }
#k2s-loading .label .max {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: none !important;
}
#k2s-loading .status::before {
  background: var(--accent) !important;
  box-shadow: none !important;
}
#k2s-loading .progress::after {
  background: linear-gradient(90deg, transparent, var(--accent), transparent) !important;
}
#k2s-loading .logo {
  filter: none !important;
  animation: none !important;
}

/* Question card — centred, clean, no amber accents */
.question-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--card-shadow) !important;
}

/* Answer textarea — clear focus ring in blue */
#user-answer:focus, #exam-answer:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
  outline: none;
}

/* Solution area divider + headings */
.solution-area h3 {
  font-family: var(--font-main) !important;
  font-weight: 800;
  color: var(--text-1);
  font-size: 18px !important;
}

/* Mark scheme steps — clean numbered list look */
.solution-step {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin: 8px 0 !important;
}
.step-label {
  font-family: var(--font-main) !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  color: var(--accent) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* Feedback boxes (correct/wrong tint) — ensure dark-text inside on light */
:is([data-theme="light"],[data-theme="candy"],[data-theme="sky"],
    [data-theme="mint"],[data-theme="sunshine"]) #ai-feedback-box * {
  color: var(--text-1) !important;
}

/* Ensure headings on question view aren't stretched huge in clamp */
.question-card h1, .question-card h2, .question-card h3,
.question-text h1, .question-text h2, .question-text h3 {
  font-family: var(--font-main) !important;
  font-size: inherit !important;
}

/* Remove Boldonse from non-title h2 where clamp made it too big */
.card h2, .q-sidebar h2, .solution-area h2 {
  font-family: var(--font-main) !important;
  font-size: 18px !important;
  letter-spacing: 0 !important;
}

/* Pricing tier cards — clean, consistent */
.pricing-tier-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--card-shadow) !important;
}

/* ============================================================================
   END REBRAND
   ============================================================================ */

/* ============================================================================
   NILE THEME — GLOBAL COMPONENT OVERRIDES
   Applies tech/premium navy+cyan look across every screen when data-theme=nile.
   ============================================================================ */

html[data-theme="nile"] {
  /* Sharper radii across the board */
  --r-xl: 10px; --r-lg: 8px; --r-md: 6px; --r-sm: 4px;
}

/* ── TYPOGRAPHY ── */
html[data-theme="nile"] body {
  font-family: 'Inter', 'Nunito', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.005em;
}
html[data-theme="nile"] h1,
html[data-theme="nile"] h2,
html[data-theme="nile"] .mk-hero__title,
html[data-theme="nile"] .hero-title {
  font-family: var(--font-heading), 'Inter', sans-serif;
  letter-spacing: 0.01em;
}
html[data-theme="nile"] .mk-section__title,
html[data-theme="nile"] .section-title,
html[data-theme="nile"] .k2s-section-label,
html[data-theme="nile"] .sidebar-heading,
html[data-theme="nile"] .nav-label {
  font-family: var(--font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.14em !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: rgba(212,175,55,0.85) !important;
}

/* ── BUTTONS — sharp corners, cyan fill, arrow cue ── */
html[data-theme="nile"] .btn,
html[data-theme="nile"] .btn-deck,
html[data-theme="nile"] button.btn {
  border-radius: 6px !important;
  font-family: var(--font-main);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s;
}
html[data-theme="nile"] .btn-primary,
html[data-theme="nile"] .btn-deck {
  background: #d4af37 !important;
  color: oklch(0.16 0.04 255) !important;
  border: 1px solid #d4af37 !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.25), 0 8px 20px -10px rgba(212,175,55,0.60);
}
html[data-theme="nile"] .btn-primary:hover,
html[data-theme="nile"] .btn-deck:hover {
  background: #f4d03f !important;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(244,208,63,0.45), 0 12px 28px -12px rgba(212,175,55,0.80);
}
html[data-theme="nile"] .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .btn-ghost:hover {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.50) !important;
}
html[data-theme="nile"] .btn-success {
  background: oklch(0.76 0.17 150) !important;
  color: oklch(0.16 0.04 150) !important;
}
html[data-theme="nile"] .btn-danger {
  background: oklch(0.66 0.22 27) !important;
  color: #fff !important;
}

/* ── CARDS ── */
html[data-theme="nile"] .card,
html[data-theme="nile"] .glass-card {
  background: oklch(0.20 0.035 252 / 0.72) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 0 rgba(212,175,55,0.06) inset, 0 10px 30px -14px oklch(0 0 0 / 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="nile"] .card:hover {
  border-color: rgba(212,175,55,0.35) !important;
  transform: translateY(-2px);
}

/* ── INPUTS ── */
html[data-theme="nile"] input[type="text"],
html[data-theme="nile"] input[type="email"],
html[data-theme="nile"] input[type="password"],
html[data-theme="nile"] input[type="number"],
html[data-theme="nile"] textarea,
html[data-theme="nile"] select {
  background: oklch(0.20 0.035 252 / 0.55) !important;
  border: 1px solid rgba(212,175,55,0.20) !important;
  border-radius: 6px !important;
  color: oklch(0.97 0.02 215) !important;
}
html[data-theme="nile"] input:focus,
html[data-theme="nile"] textarea:focus,
html[data-theme="nile"] select:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.20) !important;
}

/* ── SIDEBAR ── */
html[data-theme="nile"] #sidebar {
  background: linear-gradient(180deg, oklch(0.10 0.025 255) 0%, oklch(0.14 0.03 252) 100%) !important;
  border-right: 1px solid rgba(212,175,55,0.14) !important;
}
html[data-theme="nile"] .sidebar-logo strong {
  background: linear-gradient(120deg, #fff 0%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="nile"] .nav-item.active {
  background: rgba(212,175,55,0.12) !important;
  color: #d4af37 !important;
  border-left: 2px solid #d4af37;
}

/* ── TOPBAR ── */
html[data-theme="nile"] .topbar,
html[data-theme="nile"] .mk-topbar {
  background: oklch(0.14 0.03 252 / 0.85) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(212,175,55,0.14) !important;
}

/* ── CHIPS / PILLS ── */
html[data-theme="nile"] .chip,
html[data-theme="nile"] .pill,
html[data-theme="nile"] .tag {
  background: rgba(212,175,55,0.1) !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: #d4af37 !important;
  border-radius: 4px !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  font-weight: 700;
}

/* ── PROGRESS BARS ── */
html[data-theme="nile"] .progress-bar {
  background: oklch(0.22 0.035 250 / 0.6) !important;
  border-radius: 2px !important;
  height: 6px;
  overflow: hidden;
}
html[data-theme="nile"] .progress-bar .fill {
  background: linear-gradient(90deg, #d4af37, #f4d03f) !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.50);
}

/* ── HUD PANELS (gold shimmer → cyan scan) ── */
html[data-theme="nile"] .hud-panel {
  border: 1px solid rgba(212,175,55,0.22) !important;
  background: oklch(0.18 0.03 250 / 0.65) !important;
}
html[data-theme="nile"] .hud-brackets::before,
html[data-theme="nile"] .hud-brackets::after,
html[data-theme="nile"] .hud-panel::before,
html[data-theme="nile"] .hud-panel::after {
  border-color: #d4af37 !important;
}
html[data-theme="nile"] .gold-shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.25), transparent) !important;
}

/* ── MK DASHBOARD SECTIONS ── */
html[data-theme="nile"] .mk-hero {
  background: linear-gradient(135deg, oklch(0.14 0.035 255) 0%, oklch(0.10 0.03 250) 100%) !important;
  border: 1px solid rgba(212,175,55,0.20) !important;
  border-radius: 10px !important;
  position: relative;
  overflow: hidden;
}
html[data-theme="nile"] .mk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(212,175,55,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 90% 100%, rgba(0,224,255,0.12) 0%, transparent 60%);
  pointer-events: none;
}
html[data-theme="nile"] .mk-hero > * { position: relative; }

/* ── ACCENT TEXT / LINKS ── */
html[data-theme="nile"] a,
html[data-theme="nile"] .link {
  color: #d4af37;
}

/* ── BADGES / XP ── */
html[data-theme="nile"] .xp-badge,
html[data-theme="nile"] .streak-badge {
  background: rgba(212,175,55,0.14) !important;
  border: 1px solid rgba(212,175,55,0.30) !important;
  color: #d4af37 !important;
  font-family: var(--font-mono) !important;
}

/* ── LOADING / SPINNERS ── */
html[data-theme="nile"] .spinner,
html[data-theme="nile"] .loader {
  border-color: rgba(212,175,55,0.20) !important;
  border-top-color: #d4af37 !important;
}

/* ── MODALS ── */
html[data-theme="nile"] .modal,
html[data-theme="nile"] .modal-content {
  background: oklch(0.16 0.03 255) !important;
  border: 1px solid rgba(212,175,55,0.20) !important;
  border-radius: 10px !important;
}

/* ── QUESTION / EXAM ── */
html[data-theme="nile"] .question-card,
html[data-theme="nile"] .exam-card {
  background: oklch(0.20 0.035 252 / 0.72) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
}
html[data-theme="nile"] .answer-option {
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 6px !important;
}
html[data-theme="nile"] .answer-option:hover {
  border-color: #d4af37 !important;
  background: rgba(212,175,55,0.08) !important;
}
html[data-theme="nile"] .answer-option.correct {
  border-color: oklch(0.76 0.17 150) !important;
  background: oklch(0.76 0.17 150 / 0.12) !important;
}
html[data-theme="nile"] .answer-option.wrong {
  border-color: oklch(0.66 0.22 27) !important;
  background: oklch(0.66 0.22 27 / 0.12) !important;
}

/* ── SCROLLBAR ── */
html[data-theme="nile"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme="nile"] ::-webkit-scrollbar-track {
  background: oklch(0.14 0.03 252);
}
html[data-theme="nile"] ::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.20);
  border-radius: 4px;
}
html[data-theme="nile"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.40);
}

/* ── SELECTION ── */
html[data-theme="nile"] ::selection {
  background: rgba(212,175,55,0.35);
  color: #fff;
}

/* ── FOCUS RING ── */
html[data-theme="nile"] :focus-visible {
  outline-color: #d4af37 !important;
}


/* ============================================================================
   NILE — MOTION + LIFE
   ============================================================================ */

html[data-theme="nile"] #app-shell::before {
  content: '';
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(212,175,55,0.10) 0%, transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(0,224,255,0.08) 0%, transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(33,72,196,0.10) 0%, transparent 35%);
  pointer-events: none;
  z-index: 0;
  animation: nile-aurora 28s ease-in-out infinite alternate;
  filter: blur(60px);
}
@keyframes nile-aurora {
  0%   { transform: translate(0,0) rotate(0deg) scale(1); }
  50%  { transform: translate(3%,-2%) rotate(5deg) scale(1.08); }
  100% { transform: translate(-2%,3%) rotate(-4deg) scale(1.05); }
}

html[data-theme="nile"] .card,
html[data-theme="nile"] .glass-card,
html[data-theme="nile"] .mk-section {
  animation: nile-rise 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes nile-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="nile"] .card:nth-child(1){animation-delay:.04s}
html[data-theme="nile"] .card:nth-child(2){animation-delay:.08s}
html[data-theme="nile"] .card:nth-child(3){animation-delay:.12s}
html[data-theme="nile"] .card:nth-child(4){animation-delay:.16s}
html[data-theme="nile"] .card:nth-child(5){animation-delay:.20s}
html[data-theme="nile"] .card:nth-child(6){animation-delay:.24s}

html[data-theme="nile"] .btn-primary,
html[data-theme="nile"] .btn-deck { position: relative; overflow: hidden; }
html[data-theme="nile"] .btn-primary::before,
html[data-theme="nile"] .btn-deck::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s cubic-bezier(0.2,0.8,0.2,1);
  pointer-events: none;
}
html[data-theme="nile"] .btn-primary:hover::before,
html[data-theme="nile"] .btn-deck:hover::before { left: 120%; }

html[data-theme="nile"] .logo-dot,
html[data-theme="nile"] .pulse-dot {
  animation: nile-pulse 2.4s ease-in-out infinite;
}
@keyframes nile-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.55); }
  50%     { box-shadow: 0 0 0 8px rgba(212,175,55,0); }
}

html[data-theme="nile"] .mk-section__title,
html[data-theme="nile"] .section-title {
  animation: nile-fade-right 0.5s ease-out both;
}
@keyframes nile-fade-right {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

html[data-theme="nile"] .card:hover,
html[data-theme="nile"] .card-hover:hover {
  transform: translateY(-3px) scale(1.004);
  border-color: rgba(212,175,55,0.40) !important;
  box-shadow:
    0 1px 0 rgba(212,175,55,0.10) inset,
    0 18px 40px -18px rgba(212,175,55,0.25),
    0 10px 30px -14px rgba(0,0,0,0.7) !important;
  transition: transform 0.18s ease, border-color 0.18s, box-shadow 0.22s;
}

html[data-theme="nile"] .nav-item {
  transition: background 0.18s, color 0.18s, padding-left 0.22s cubic-bezier(0.2,0.8,0.2,1);
}
html[data-theme="nile"] .nav-item:hover { padding-left: 14px; color: #d4af37 !important; }

html[data-theme="nile"] .progress-bar .fill {
  position: relative; overflow: hidden;
}
html[data-theme="nile"] .progress-bar .fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: nile-bar-shimmer 2.2s ease-in-out infinite;
}
@keyframes nile-bar-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

html[data-theme="nile"] .xp-badge,
html[data-theme="nile"] .streak-badge {
  animation: nile-breathe 3.2s ease-in-out infinite;
}
@keyframes nile-breathe {
  0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0); }
  50%     { box-shadow: 0 0 22px -4px rgba(212,175,55,0.4); }
}

html[data-theme="nile"] .big-num,
html[data-theme="nile"] .stat-value,
html[data-theme="nile"] .mk-stat__value {
  animation: nile-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes nile-pop {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}

html[data-theme="nile"] .answer-option {
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
html[data-theme="nile"] .answer-option:hover { transform: translateX(4px); }

html[data-theme="nile"] .answer-option.correct {
  animation: nile-correct 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
html[data-theme="nile"] .answer-option.wrong {
  animation: nile-wrong 0.4s ease-out;
}
@keyframes nile-correct {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.04); box-shadow: 0 0 30px rgba(34,197,94,0.4); }
  100% { transform: scale(1); }
}
@keyframes nile-wrong {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

html[data-theme="nile"] .mk-hero { position: relative; overflow: hidden; }
html[data-theme="nile"] .mk-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(212,175,55,0.04) 50%, transparent 100%);
  animation: nile-scan 8s linear infinite;
  pointer-events: none;
}
@keyframes nile-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="nile"] *,
  html[data-theme="nile"] *::before,
  html[data-theme="nile"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ============================================================================
   NILE — PER-SCREEN LAYOUT TRANSFORMS (cascade via shared class hooks)
   ============================================================================ */

/* ── MK HERO — data-telemetry mission brief ── */
html[data-theme="nile"] .mk-hero {
  border: 1px solid rgba(212,175,55,0.24) !important;
  border-radius: 12px !important;
  padding: 32px 36px !important;
  margin-bottom: 28px !important;
  background:
    linear-gradient(155deg, rgba(10,20,40,0.72), rgba(1,2,8,0.9)) !important;
  position: relative;
  overflow: hidden;
}
html[data-theme="nile"] .mk-hero__eyebrow {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #d4af37 !important;
  padding: 4px 10px;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 18px !important;
  background: rgba(212,175,55,0.06);
}
html[data-theme="nile"] .mk-hero__title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 3.2vw, 40px) !important;
  letter-spacing: 0.005em !important;
  line-height: 1.1 !important;
  background: linear-gradient(120deg, #f8fafc 0%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  margin: 0 0 10px !important;
}
html[data-theme="nile"] .mk-hero__sub {
  font-size: 14px !important;
  color: #cbd5e1 !important;
  font-family: 'Inter', var(--font-main) !important;
}

/* ── SECTION TITLE ROW — corner ticks + divider ── */
html[data-theme="nile"] .mk-section {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 32px 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(212,175,55,0.12) !important;
  position: relative;
}
html[data-theme="nile"] .mk-section::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 40px;
  height: 2px;
  background: #d4af37;
}
html[data-theme="nile"] .mk-section__title {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #d4af37 !important;
  margin: 0 !important;
  display: inline-flex; align-items: center; gap: 8px;
}
html[data-theme="nile"] .mk-section__title::before {
  content: counter(nile-sec, decimal-leading-zero) ' ›';
  counter-increment: nile-sec;
  color: rgba(212,175,55,0.55);
  font-weight: 800;
}
html[data-theme="nile"] #content { counter-reset: nile-sec; }
html[data-theme="nile"] .mk-section__meta {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── STAT CARDS — data-telemetry ── */
html[data-theme="nile"] .mk-stat {
  background: rgba(11,19,36,0.72) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  position: relative;
  overflow: hidden;
}
html[data-theme="nile"] .mk-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  opacity: 0.5;
}
html[data-theme="nile"] .mk-stat__icon {
  border-radius: 8px !important;
  width: 40px !important; height: 40px !important;
}
html[data-theme="nile"] .mk-stat__label {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  margin-top: 12px !important;
}
html[data-theme="nile"] .mk-stat__value {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  margin-top: 4px !important;
  font-variant-numeric: tabular-nums;
}
html[data-theme="nile"] .mk-stat__unit {
  font-size: 14px !important;
  color: #94a3b8 !important;
  font-weight: 500;
  margin-left: 4px;
}

/* ── PROGRESS BARS ── */
html[data-theme="nile"] .mk-progress {
  background: rgba(212,175,55,0.10) !important;
  border-radius: 2px !important;
  height: 4px !important;
  overflow: hidden;
  border: none !important;
}
html[data-theme="nile"] .mk-progress__fill {
  background: linear-gradient(90deg, #d4af37, #f4d03f) !important;
  border-radius: 2px !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.6);
}

/* ── SUBJECT / TILE / LIST ── */
html[data-theme="nile"] .mk-subject,
html[data-theme="nile"] .mk-tile {
  background: rgba(11,19,36,0.72) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.22s;
  text-align: left;
}
html[data-theme="nile"] .mk-subject:hover,
html[data-theme="nile"] .mk-tile:hover {
  border-color: rgba(212,175,55,0.45) !important;
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -18px rgba(212,175,55,0.25), 0 1px 0 rgba(212,175,55,0.08) inset !important;
}
html[data-theme="nile"] .mk-subject__title,
html[data-theme="nile"] .mk-tile__title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f8fafc !important;
}
html[data-theme="nile"] .mk-tile__sub {
  font-size: 13px !important;
  color: #94a3b8 !important;
}
html[data-theme="nile"] .mk-tile__arrow {
  color: #d4af37 !important;
  transition: transform 0.18s;
}
html[data-theme="nile"] .mk-tile:hover .mk-tile__arrow { transform: translateX(6px); }

html[data-theme="nile"] .mk-tile__foot {
  border-top: 1px solid rgba(212,175,55,0.1) !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
}
html[data-theme="nile"] .mk-tile__foot-meta { color: #94a3b8 !important; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
html[data-theme="nile"] .mk-tile__foot-val { font-size: 13px; letter-spacing: -0.01em; }

/* ── LIST ROWS (launch pad / resource centre) ── */
html[data-theme="nile"] .mk-list {
  background: rgba(11,19,36,0.72) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
html[data-theme="nile"] .mk-list__row {
  padding: 16px 20px !important;
  gap: 14px !important;
  border-bottom: 1px solid rgba(212,175,55,0.08) !important;
  transition: background 0.15s, padding-left 0.2s;
}
html[data-theme="nile"] .mk-list__row:last-child { border-bottom: none !important; }
html[data-theme="nile"] .mk-list__row:hover {
  background: rgba(212,175,55,0.05) !important;
  padding-left: 26px !important;
}
html[data-theme="nile"] .mk-list__icon {
  border-radius: 8px !important;
  width: 38px !important; height: 38px !important;
}
html[data-theme="nile"] .mk-list__title {
  font-family: 'Inter', var(--font-main) !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  font-size: 15px !important;
}
html[data-theme="nile"] .mk-list__sub {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  letter-spacing: 0.04em;
}

/* ── TERMINAL / CHIP ── */
html[data-theme="nile"] .mk-terminal,
html[data-theme="nile"] .mk-chip {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
}

/* ── CTAs ── */
html[data-theme="nile"] .mk-cta,
html[data-theme="nile"] .mk-cta--ghost {
  border-radius: 6px !important;
  font-family: 'Inter', var(--font-main) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
html[data-theme="nile"] .mk-cta:not(.mk-cta--ghost) {
  background: #d4af37 !important;
  color: #010208 !important;
  border: 1px solid #d4af37 !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.25), 0 8px 20px -10px rgba(212,175,55,0.6);
}
html[data-theme="nile"] .mk-cta--ghost {
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .mk-cta--ghost:hover {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.5) !important;
}

/* ── HUD COUNTDOWN PANEL ── */
html[data-theme="nile"] .hud-panel {
  background: rgba(11,19,36,0.72) !important;
  border: 1px solid rgba(212,175,55,0.24) !important;
  border-radius: 10px !important;
  position: relative;
}
html[data-theme="nile"] .hud-brackets::before,
html[data-theme="nile"] .hud-brackets::after {
  border-color: #d4af37 !important;
}

/* ── BADGE PILLS ── */
html[data-theme="nile"] .badge-pill {
  padding: 4px 10px !important;
  border-radius: 3px !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  font-weight: 700 !important;
}

/* ── ANSWER OPTIONS (question screen) ── */
html[data-theme="nile"] .option,
html[data-theme="nile"] .answer-option,
html[data-theme="nile"] .mcq-option {
  background: rgba(11,19,36,0.6) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 15px !important;
  color: #f8fafc !important;
  transition: all 0.18s ease;
  cursor: pointer;
}
html[data-theme="nile"] .option:hover,
html[data-theme="nile"] .answer-option:hover,
html[data-theme="nile"] .mcq-option:hover {
  border-color: #d4af37 !important;
  background: rgba(212,175,55,0.08) !important;
  transform: translateX(4px);
}

/* ── QUESTION TEXT ── */
html[data-theme="nile"] .question-text {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: #f8fafc !important;
}

/* ── EXAM TIMER / HEADER ── */
html[data-theme="nile"] .exam-timer,
html[data-theme="nile"] .timer-display {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  color: #d4af37 !important;
  letter-spacing: 0.08em !important;
  font-variant-numeric: tabular-nums;
}

/* ── RANK HEX ── */
html[data-theme="nile"] .rank-hex {
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.3));
}

/* ── TOP BAR XP STRIP ── */
html[data-theme="nile"] .topbar-xp,
html[data-theme="nile"] .xp-display {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  letter-spacing: 0.08em;
  color: #d4af37 !important;
}

/* ── SIDEBAR NAV LABELS ── */
html[data-theme="nile"] .sidebar-heading {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.6) !important;
  padding: 16px 16px 8px !important;
}

/* ── MODALS / DIALOGS ── */
html[data-theme="nile"] .modal-backdrop,
html[data-theme="nile"] .dialog-backdrop {
  background: rgba(1,2,8,0.82) !important;
  backdrop-filter: blur(8px);
}
html[data-theme="nile"] .modal,
html[data-theme="nile"] .dialog {
  background: linear-gradient(155deg, rgba(10,20,40,0.95), rgba(1,2,8,0.98)) !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8), 0 0 0 1px rgba(212,175,55,0.1) !important;
}

/* ── TEACHER DASHBOARD STAT / STUDENT CARDS ── */
html[data-theme="nile"] .k2s-stat-card,
html[data-theme="nile"] .k2s-student-card {
  background: rgba(11,19,36,0.72) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
}
html[data-theme="nile"] .k2s-stat-value,
html[data-theme="nile"] .k2s-sc-stat-val {
  font-family: 'Unbounded', var(--font-heading) !important;
  background: linear-gradient(120deg, #f8fafc 0%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
html[data-theme="nile"] .k2s-stat-label,
html[data-theme="nile"] .k2s-sc-stat-lbl,
html[data-theme="nile"] .k2s-section-label {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  color: #94a3b8 !important;
}
html[data-theme="nile"] .k2s-t-tab.active {
  background: rgba(212,175,55,0.12) !important;
  color: #d4af37 !important;
  border-color: rgba(212,175,55,0.28) !important;
}

/* ── FLASHCARD FACES ── */
html[data-theme="nile"] .flashcard,
html[data-theme="nile"] .flashcard-face {
  background: linear-gradient(155deg, rgba(10,20,40,0.95), rgba(1,2,8,0.98)) !important;
  border: 1px solid rgba(212,175,55,0.24) !important;
  border-radius: 12px !important;
}

/* ── TOAST / NOTIFICATIONS ── */
html[data-theme="nile"] .toast,
html[data-theme="nile"] .notification {
  background: rgba(11,19,36,0.95) !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  border-radius: 8px !important;
  backdrop-filter: blur(12px);
}

/* ── SKELETON LOADERS ── */
html[data-theme="nile"] .skeleton {
  background: linear-gradient(90deg,
    rgba(212,175,55,0.05) 25%,
    rgba(212,175,55,0.12) 50%,
    rgba(212,175,55,0.05) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: nile-skeleton 1.4s ease-in-out infinite !important;
}
@keyframes nile-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   NILE — INSTRUMENT PANEL COMPONENTS
   (auto-applied to cards/heroes so every screen gets the live-site flourishes)
   ============================================================================ */

/* Studio-dot subtle background on hero + sidebar */
html[data-theme="nile"] .mk-hero,
html[data-theme="nile"] .k2s-login-panel,
html[data-theme="nile"] #sidebar {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(212,175,55,0.06) 1px, transparent 0) !important;
  background-size: 22px 22px !important;
  background-attachment: local !important;
}
html[data-theme="nile"] .mk-hero {
  background:
    radial-gradient(circle at 1px 1px, rgba(212,175,55,0.06) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(155deg, rgba(10,20,40,0.72), rgba(1,2,8,0.9)) !important;
}

/* Scan-divider — 2px horizontal line with gold→transparent gradient, animates sweep */
html[data-theme="nile"] .mk-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.7), transparent);
  z-index: 2;
}

/* Cyan scan-sweep — thin moving bar across hero */
html[data-theme="nile"] .mk-hero::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(0,224,255,0.12), transparent);
  animation: nile-scan-sweep 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes nile-scan-sweep {
  0%   { left: -30%; }
  100% { left: 130%; }
}

/* Data-readout corner labels (tiny 9px monospace bottom-corner HUD labels) */
html[data-theme="nile"] .card,
html[data-theme="nile"] .mk-tile,
html[data-theme="nile"] .mk-subject,
html[data-theme="nile"] .mk-stat,
html[data-theme="nile"] .hud-panel {
  position: relative;
}
html[data-theme="nile"] .card::after,
html[data-theme="nile"] .mk-tile::after,
html[data-theme="nile"] .mk-subject::after,
html[data-theme="nile"] .mk-stat::after {
  content: attr(data-readout, 'REC › 001');
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(212,175,55,0.35);
  pointer-events: none;
  font-weight: 700;
}

/* Corner cyan status LED on top-right of heroes and stat cards */
html[data-theme="nile"] .mk-hero > *:first-child,
html[data-theme="nile"] .mk-stat > *:first-child {
  position: relative;
}
html[data-theme="nile"] .mk-hero::before,
html[data-theme="nile"] .mk-stat > *:first-child::before {
  /* already used for scan divider on hero — skip */
}

/* Top scan-divider on all cards */
html[data-theme="nile"] .card {
  position: relative;
  overflow: visible;
}
html[data-theme="nile"] .card::before {
  content: '';
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
  z-index: 1;
}

/* Hero corner ticks — L-shaped gold brackets in all 4 corners */
html[data-theme="nile"] .mk-hero {
  --tick: 14px;
  --tickw: 1.5px;
  --tickc: rgba(212,175,55,0.55);
}
html[data-theme="nile"] .mk-hero > .hero-tick-tl,
html[data-theme="nile"] .mk-hero > .hero-tick-tr,
html[data-theme="nile"] .mk-hero > .hero-tick-bl,
html[data-theme="nile"] .mk-hero > .hero-tick-br { display: none; }

/* Gold-underline grow on subject/tile titles (like nav links on live site) */
html[data-theme="nile"] .mk-subject__title,
html[data-theme="nile"] .mk-tile__title {
  position: relative;
  display: inline-block;
}
html[data-theme="nile"] .mk-subject__title::after,
html[data-theme="nile"] .mk-tile__title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0;
  height: 2px;
  background: #d4af37;
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-theme="nile"] .mk-subject:hover .mk-subject__title::after,
html[data-theme="nile"] .mk-tile:hover .mk-tile__title::after {
  width: 100%;
}

/* Corner cyan LED — top-right of every card */
html[data-theme="nile"] .mk-tile,
html[data-theme="nile"] .mk-subject,
html[data-theme="nile"] .mk-stat,
html[data-theme="nile"] .hud-panel {
  padding-top: 24px !important;
}
html[data-theme="nile"] .mk-tile > .nile-led,
html[data-theme="nile"] .mk-subject > .nile-led,
html[data-theme="nile"] .mk-stat > .nile-led { display: none; }
html[data-theme="nile"] .mk-stat > *:first-child {
  position: relative;
}
html[data-theme="nile"] .mk-stat::before {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e0ff;
  box-shadow: 0 0 8px rgba(0,224,255,0.7), 0 0 0 1.5px #010208;
  animation: nile-led 2.4s ease-in-out infinite;
  z-index: 3;
}
@keyframes nile-led {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}

/* Holo overlay on modals (gradient grid lines) */
html[data-theme="nile"] .modal,
html[data-theme="nile"] .dialog,
html[data-theme="nile"] .k2s-login-panel {
  position: relative;
}
html[data-theme="nile"] .modal::before,
html[data-theme="nile"] .dialog::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(212,175,55,0.04) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(212,175,55,0.04) 1px, transparent 1px) 0 0 / 48px 100%;
  pointer-events: none;
  border-radius: inherit;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 90%);
}

/* Gradient-radial ambient glows in background of main content */
html[data-theme="nile"] #content,
html[data-theme="nile"] #main-content {
  position: relative;
}
html[data-theme="nile"] #content::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(212,175,55,0.03), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="nile"] #content::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0,224,255,0.025), transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="nile"] #content > * { position: relative; z-index: 1; }

/* Gold nav-link underline grow — match live site nav hover */
html[data-theme="nile"] .nav-item,
html[data-theme="nile"] a {
  position: relative;
}
html[data-theme="nile"] .nav-links a,
html[data-theme="nile"] .topbar-links a {
  position: relative;
  padding-bottom: 3px;
}
html[data-theme="nile"] .nav-links a::after,
html[data-theme="nile"] .topbar-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: #d4af37;
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html[data-theme="nile"] .nav-links a:hover::after,
html[data-theme="nile"] .topbar-links a:hover::after {
  width: 100%;
}

/* Data readout helper class pupil can apply manually */
html[data-theme="nile"] .data-readout,
html[data-theme="nile"] .data-readout-gold {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: rgba(148,163,184,0.6);
  text-transform: uppercase;
}
html[data-theme="nile"] .data-readout-gold { color: rgba(212,175,55,0.6); }

/* Glass-strong helper */
html[data-theme="nile"] .glass-strong {
  background: rgba(11,19,36,0.82) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
}

/* Question screen holographic panel wrapper */
html[data-theme="nile"] .question-card,
html[data-theme="nile"] .exam-card,
html[data-theme="nile"] .flashcard {
  position: relative;
}
html[data-theme="nile"] .question-card::before,
html[data-theme="nile"] .exam-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(212,175,55,0.03) 1px, transparent 1px) 0 0 / 100% 36px,
    linear-gradient(90deg, rgba(0,224,255,0.03) 1px, transparent 1px) 0 0 / 36px 100%;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 40%, transparent 90%);
}

/* Exam timer panel — instrument-style */
html[data-theme="nile"] .exam-timer,
html[data-theme="nile"] .timer-display {
  background: rgba(1,2,8,0.8);
  border: 1px solid rgba(212,175,55,0.28);
  border-radius: 6px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
html[data-theme="nile"] .exam-timer::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e0ff;
  box-shadow: 0 0 6px rgba(0,224,255,0.7);
  animation: nile-led 1.2s ease-in-out infinite;
}

/* Login panel — add holo grid overlay (already exists in auth.css, enhance) */
html[data-theme="nile"] .k2s-login-panel {
  background:
    radial-gradient(circle at 1px 1px, rgba(212,175,55,0.06) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(155deg, #010208 0%, #0b1324 100%) !important;
}

/* ============================================================================
   NILE — SIDEBAR + TOPBAR CHROME
   ============================================================================ */

/* ── Sidebar logo block ── */
html[data-theme="nile"] .sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px !important;
  border-bottom: 1px solid rgba(212,175,55,0.14);
  position: relative;
}
html[data-theme="nile"] .sidebar-logo-img {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
html[data-theme="nile"] .sidebar-logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html[data-theme="nile"] .sidebar-logo-text strong {
  font-family: 'Unbounded', var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, #f8fafc 0%, #d4af37 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.1;
}
html[data-theme="nile"] .sidebar-logo-sub {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(212,175,55,0.55);
  text-transform: uppercase;
  margin-top: 3px;
}
html[data-theme="nile"] .sidebar-status-led {
  margin-left: auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00e0ff;
  box-shadow: 0 0 8px rgba(0,224,255,0.7);
  animation: nile-led 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Sidebar system readout ── */
html[data-theme="nile"] .sidebar-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 12px;
  background: rgba(212,175,55,0.04);
  border: 1px solid rgba(212,175,55,0.14);
  border-radius: 6px;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-theme="nile"] .sidebar-readout-label { color: #94a3b8; }
html[data-theme="nile"] .sidebar-readout-val {
  color: #00e0ff;
  font-weight: 700;
  position: relative;
  padding-left: 12px;
}
html[data-theme="nile"] .sidebar-readout-val::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #00e0ff;
  box-shadow: 0 0 5px rgba(0,224,255,0.7);
  animation: nile-led 2.4s ease-in-out infinite;
}

/* ── Sidebar nav labels ── */
html[data-theme="nile"] .nav-label {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.55) !important;
  padding: 14px 16px 6px !important;
  margin: 0 !important;
  font-weight: 700 !important;
  position: relative;
}
html[data-theme="nile"] .nav-label::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, rgba(212,175,55,0.2), transparent);
}

html[data-theme="nile"] .nav-item {
  padding: 10px 16px !important;
  font-family: 'Inter', var(--font-main) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #cbd5e1 !important;
  background: transparent !important;
  border: none !important;
  border-left: 2px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer;
}
html[data-theme="nile"] .nav-item:hover {
  background: rgba(212,175,55,0.06) !important;
  color: #d4af37 !important;
  padding-left: 22px !important;
}
html[data-theme="nile"] .nav-item.active {
  background: rgba(212,175,55,0.1) !important;
  color: #d4af37 !important;
  border-left-color: #d4af37 !important;
  font-weight: 700 !important;
}
html[data-theme="nile"] .nav-item .material-symbols-rounded { font-size: 20px !important; }

/* ── Sidebar footer ── */
html[data-theme="nile"] .sidebar-footer {
  border-top: 1px solid rgba(212,175,55,0.14);
  padding: 14px 12px !important;
}
html[data-theme="nile"] .user-pill {
  background: rgba(11,19,36,0.72) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html[data-theme="nile"] .user-pill:hover {
  border-color: rgba(212,175,55,0.35) !important;
}
html[data-theme="nile"] .user-avatar {
  background: linear-gradient(135deg, #d4af37, #c99a1e) !important;
  color: #010208 !important;
  border-radius: 6px !important;
}
html[data-theme="nile"] .user-name {
  font-family: 'Inter', var(--font-main) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #f8fafc !important;
}
html[data-theme="nile"] .user-sub {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(212,175,55,0.6) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Topbar ── */
html[data-theme="nile"] #topbar {
  background: rgba(1,2,8,0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(212,175,55,0.14) !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}
html[data-theme="nile"] #topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
}

html[data-theme="nile"] .hamburger-btn {
  background: rgba(212,175,55,0.06) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  color: #d4af37 !important;
  border-radius: 6px !important;
}
html[data-theme="nile"] .hamburger-btn:hover {
  background: rgba(212,175,55,0.12) !important;
}

html[data-theme="nile"] .topbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0,224,255,0.06);
  border: 1px solid rgba(0,224,255,0.24);
  border-radius: 4px;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #00e0ff;
}
html[data-theme="nile"] .topbar-status-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e0ff;
  box-shadow: 0 0 6px rgba(0,224,255,0.7);
  animation: nile-led 1.6s ease-in-out infinite;
}

html[data-theme="nile"] .breadcrumb {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #94a3b8 !important;
  flex: 1;
}

html[data-theme="nile"] .topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-theme="nile"] .topbar-clock {
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(212,175,55,0.65);
  padding: 6px 12px;
  background: rgba(212,175,55,0.04);
  border: 1px solid rgba(212,175,55,0.14);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

html[data-theme="nile"] .topbar-streak {
  background: rgba(244,63,94,0.08) !important;
  border: 1px solid rgba(244,63,94,0.28) !important;
  color: #fb7185 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-weight: 700 !important;
}

html[data-theme="nile"] .search-bar {
  background: rgba(11,19,36,0.72) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 6px !important;
}
html[data-theme="nile"] .search-bar input {
  background: transparent !important;
  border: none !important;
  color: #f8fafc !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 13px !important;
}
html[data-theme="nile"] .search-bar input::placeholder {
  color: rgba(148,163,184,0.55) !important;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
html[data-theme="nile"] .search-bar .material-symbols-rounded {
  color: rgba(212,175,55,0.55) !important;
}
html[data-theme="nile"] .search-bar:focus-within {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.2) !important;
}

/* Hide clock on small screens */
@media (max-width: 900px) {
  html[data-theme="nile"] .topbar-clock { display: none !important; }
}
@media (max-width: 640px) {
  html[data-theme="nile"] .topbar-status { display: none !important; }
}

/* ── Bottom nav ── */
html[data-theme="nile"] #bottom-nav {
  background: rgba(1,2,8,0.95) !important;
  border-top: 1px solid rgba(212,175,55,0.18) !important;
  backdrop-filter: blur(16px);
}
html[data-theme="nile"] .bnav-item {
  color: #94a3b8 !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-theme="nile"] .bnav-item.active {
  color: #d4af37 !important;
}
html[data-theme="nile"] .bnav-item.active .material-symbols-rounded {
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.5));
}

/* ═══════════════════════════════════════════════════════════════════════════
   NILE SCREENS — Full instrument-panel rebuild for every view
   Scope: html[data-theme="nile"] only. Zero regressions on other themes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL CONTENT AREA ────────────────────────────────────────────── */
html[data-theme="nile"] #content {
  padding: 24px 28px 48px !important;
}
@media (max-width: 640px) {
  html[data-theme="nile"] #content { padding: 16px 14px 40px !important; }
}

/* Section headers — gold numbered labels */
html[data-theme="nile"] .mk-section {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(212,175,55,0.12) !important;
  counter-increment: nile-section;
}
html[data-theme="nile"] .mk-section__title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: #d4af37 !important;
  margin: 0 !important;
}
html[data-theme="nile"] .mk-section__title::before {
  content: counter(nile-section, decimal-leading-zero) "  ";
  color: rgba(212,175,55,0.4);
  font-variant-numeric: tabular-nums;
}
html[data-theme="nile"] .mk-section__meta {
  margin-left: auto !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(148,163,184,0.55) !important;
  letter-spacing: 0.1em !important;
}

/* ── 2. HOME HERO BLOCK ─────────────────────────────────────────────────── */
html[data-theme="nile"] .mk-hero {
  background: linear-gradient(135deg, rgba(11,19,36,0.97) 0%, rgba(7,10,20,0.97) 100%) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 16px !important;
  padding: 28px 28px 24px !important;
  margin-bottom: 0 !important;
  position: relative;
  overflow: hidden;
}
html[data-theme="nile"] .mk-hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(0,224,255,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(212,175,55,0.06) 0%, transparent 60%);
  pointer-events: none;
}
html[data-theme="nile"] .mk-hero::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.6), rgba(0,224,255,0.4), transparent);
}
html[data-theme="nile"] .mk-hero__eyebrow {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.55) !important;
  margin-bottom: 10px !important;
}
html[data-theme="nile"] .mk-hero__title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: clamp(20px, 2.5vw, 28px) !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 6px !important;
  line-height: 1.15 !important;
}
html[data-theme="nile"] .mk-hero__sub {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 13px !important;
  color: rgba(148,163,184,0.8) !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}
html[data-theme="nile"] .mk-progress {
  height: 6px !important;
  background: rgba(212,175,55,0.08) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .mk-progress__fill {
  height: 100% !important;
  background: linear-gradient(90deg, #d4af37, #f0d060) !important;
  border-radius: 3px !important;
  box-shadow: 0 0 8px rgba(212,175,55,0.5) !important;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
}
html[data-theme="nile"] .mk-progress__fill::after {
  content: "";
  position: absolute; top: 0; right: -1px; bottom: 0; width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35));
  animation: nile-sweep 1.8s ease-in-out infinite;
}

/* Stat grid cards */
html[data-theme="nile"] .mk-stat-grid {
  display: grid !important;
  gap: 12px !important;
}
html[data-theme="nile"] .mk-stat {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
html[data-theme="nile"] .mk-stat:hover {
  border-color: rgba(212,175,55,0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
html[data-theme="nile"] .mk-stat::before {
  content: attr(data-label, "TELEMETRY");
  position: absolute; top: 8px; right: 10px;
  font-family: 'JetBrains Mono', var(--font-mono);
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(148,163,184,0.3);
}
html[data-theme="nile"] .mk-stat__icon {
  width: 36px; height: 36px;
  background: rgba(212,175,55,0.1) !important;
  color: #d4af37 !important;
  border-radius: 8px;
  display: grid; place-items: center;
  margin-bottom: 12px;
}
html[data-theme="nile"] .mk-stat__label {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(148,163,184,0.6) !important;
  margin-bottom: 4px !important;
}
html[data-theme="nile"] .mk-stat__value {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #d4af37 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .mk-stat__unit {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: rgba(148,163,184,0.5) !important;
  margin-left: 2px !important;
}

/* Subject progress tiles */
html[data-theme="nile"] .mk-subject-grid {
  display: grid !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
}
html[data-theme="nile"] .mk-subject {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .mk-subject::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 100% 0%, rgba(0,224,255,0.04) 0%, transparent 70%);
  pointer-events: none;
}
html[data-theme="nile"] .mk-subject:hover {
  border-color: rgba(212,175,55,0.4) !important;
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45) !important;
}
html[data-theme="nile"] .mk-subject__title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}
html[data-theme="nile"] .mk-tile__foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html[data-theme="nile"] .mk-tile__foot-meta {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(148,163,184,0.55) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
html[data-theme="nile"] .mk-tile__foot-val {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Quick session tiles + feature grid */
html[data-theme="nile"] .mk-tile-grid {
  display: grid !important;
  gap: 12px !important;
}
html[data-theme="nile"] .mk-tile {
  background: rgba(11,19,36,0.88) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
html[data-theme="nile"] .mk-tile:hover {
  border-color: rgba(212,175,55,0.38) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}
html[data-theme="nile"] .mk-tile__icon {
  width: 40px; height: 40px;
  background: rgba(212,175,55,0.1) !important;
  color: #d4af37 !important;
  border-radius: 10px !important;
  display: grid; place-items: center;
}
html[data-theme="nile"] .mk-tile__title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
}
html[data-theme="nile"] .mk-tile__sub {
  font-size: 12px !important;
  color: rgba(148,163,184,0.6) !important;
  margin: 0 !important;
  font-family: 'Inter', var(--font-main) !important;
  line-height: 1.4 !important;
}
html[data-theme="nile"] .mk-tile__arrow {
  margin-top: auto !important;
  color: rgba(212,175,55,0.5) !important;
  font-size: 18px !important;
  transition: transform 0.2s, color 0.2s !important;
}
html[data-theme="nile"] .mk-tile:hover .mk-tile__arrow {
  transform: translateX(4px) !important;
  color: #d4af37 !important;
}

/* Launch Pad + Resource Center list rows */
html[data-theme="nile"] .mk-list {
  background: rgba(11,19,36,0.75) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 4px 0 !important;
}
html[data-theme="nile"] .mk-list__row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(212,175,55,0.06) !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
}
html[data-theme="nile"] .mk-list__row:last-child { border-bottom: none !important; }
html[data-theme="nile"] .mk-list__row:hover {
  background: rgba(212,175,55,0.05) !important;
}
html[data-theme="nile"] .mk-list__icon {
  width: 38px; height: 38px;
  background: rgba(212,175,55,0.1) !important;
  color: #d4af37 !important;
  border-radius: 9px !important;
  display: grid; place-items: center;
  flex-shrink: 0;
}
html[data-theme="nile"] .mk-list__body { flex: 1; min-width: 0; }
html[data-theme="nile"] .mk-list__title {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-theme="nile"] .mk-list__sub {
  font-size: 11px !important;
  color: rgba(148,163,184,0.55) !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  letter-spacing: 0.04em !important;
  margin-top: 1px !important;
}
html[data-theme="nile"] .mk-list__right .material-symbols-rounded {
  color: rgba(212,175,55,0.4) !important;
  transition: color 0.2s, transform 0.2s !important;
}
html[data-theme="nile"] .mk-list__row:hover .mk-list__right .material-symbols-rounded {
  color: #d4af37 !important;
  transform: translateX(2px) !important;
}

/* HUD panels (countdown) */
html[data-theme="nile"] .hud-panel {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
}
html[data-theme="nile"] .hud-brackets::before,
html[data-theme="nile"] .hud-brackets::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(212,175,55,0.45);
  border-style: solid;
}
html[data-theme="nile"] .hud-brackets::before {
  top: 6px; left: 6px;
  border-width: 1px 0 0 1px;
}
html[data-theme="nile"] .hud-brackets::after {
  bottom: 6px; right: 6px;
  border-width: 0 1px 1px 0;
}

/* Terminal label */
html[data-theme="nile"] .mk-terminal {
  display: inline-block;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(0,224,255,0.7) !important;
  border: 1px solid rgba(0,224,255,0.2) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
}

/* Chips / badges */
html[data-theme="nile"] .mk-chip,
html[data-theme="nile"] .badge-pill {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
}

/* CTA buttons */
html[data-theme="nile"] .mk-cta {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  border: 1px solid #d4af37 !important;
  background: linear-gradient(135deg, #d4af37 0%, #f0d060 100%) !important;
  color: #0a0c10 !important;
  transition: all 0.2s !important;
  cursor: pointer !important;
}
html[data-theme="nile"] .mk-cta:hover {
  background: linear-gradient(135deg, #f0d060 0%, #d4af37 100%) !important;
  box-shadow: 0 4px 18px rgba(212,175,55,0.4) !important;
  transform: translateY(-1px) !important;
}
html[data-theme="nile"] .mk-cta--ghost {
  background: rgba(212,175,55,0.06) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .mk-cta--ghost:hover {
  background: rgba(212,175,55,0.15) !important;
  box-shadow: none !important;
}

/* Rank hex badge */
html[data-theme="nile"] .rank-hex {
  border-radius: 10px !important;
  display: grid; place-items: center;
}

/* ── 3. TOPICS GRID ─────────────────────────────────────────────────────── */
html[data-theme="nile"] .topic-grid,
html[data-theme="nile"] [class*="topics-grid"],
html[data-theme="nile"] .topics-list {
  display: grid !important;
  gap: 10px !important;
}
html[data-theme="nile"] .topic-card,
html[data-theme="nile"] .topic-btn,
html[data-theme="nile"] [class*="topic-item"],
html[data-theme="nile"] button[data-k2s-click="setTopic"] {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
}
html[data-theme="nile"] button[data-k2s-click="setTopic"]:hover {
  border-color: rgba(212,175,55,0.4) !important;
  background: rgba(212,175,55,0.07) !important;
  transform: translateX(3px) !important;
}
html[data-theme="nile"] button[data-k2s-click="setTopic"]:hover::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #d4af37, #00e0ff);
  border-radius: 2px 0 0 2px;
}

/* Topic accuracy badges */
html[data-theme="nile"] .topic-acc-badge {
  margin-left: auto;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  color: rgba(212,175,55,0.7) !important;
}

/* ── 4. QUESTION SCREEN ─────────────────────────────────────────────────── */
html[data-theme="nile"] .q-shell,
html[data-theme="nile"] .question-shell,
html[data-theme="nile"] #question-shell {
  max-width: 780px !important;
  margin: 0 auto !important;
}

/* Question card */
html[data-theme="nile"] .q-card,
html[data-theme="nile"] .question-card,
html[data-theme="nile"] .card.q-card,
html[data-theme="nile"] [class*="q-card"] {
  background: rgba(11,19,36,0.95) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .q-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #d4af37 40%, #00e0ff 70%, transparent 100%);
}

/* Question text */
html[data-theme="nile"] .q-text,
html[data-theme="nile"] .question-text {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  line-height: 1.65 !important;
  letter-spacing: -0.005em !important;
}

/* Answer options — MCQ */
html[data-theme="nile"] .answer-opts,
html[data-theme="nile"] .answer-options,
html[data-theme="nile"] .mk-answer-grid {
  display: grid !important;
  gap: 10px !important;
  margin-top: 20px !important;
}
html[data-theme="nile"] .answer-opt,
html[data-theme="nile"] button.answer-btn,
html[data-theme="nile"] [class*="answer-option"] {
  background: rgba(11,19,36,0.8) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  text-align: left !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  position: relative !important;
}
html[data-theme="nile"] .answer-opt:hover:not(:disabled),
html[data-theme="nile"] button.answer-btn:hover:not(:disabled) {
  border-color: rgba(212,175,55,0.45) !important;
  background: rgba(212,175,55,0.07) !important;
  transform: translateX(4px) !important;
}
html[data-theme="nile"] .answer-opt.correct,
html[data-theme="nile"] button.answer-btn.correct,
html[data-theme="nile"] [class*="answer"].is-correct {
  border-color: rgba(16,185,129,0.55) !important;
  background: rgba(16,185,129,0.1) !important;
  color: #6ee7b7 !important;
}
html[data-theme="nile"] .answer-opt.wrong,
html[data-theme="nile"] button.answer-btn.wrong,
html[data-theme="nile"] [class*="answer"].is-wrong {
  border-color: rgba(239,68,68,0.45) !important;
  background: rgba(239,68,68,0.08) !important;
  color: #fca5a5 !important;
  animation: nile-shake 0.38s ease !important;
}

/* Option letter badge */
html[data-theme="nile"] .answer-opt__letter {
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.2);
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #d4af37 !important;
  flex-shrink: 0;
}

/* Written answer input */
html[data-theme="nile"] .answer-input,
html[data-theme="nile"] input[name="answer"],
html[data-theme="nile"] #answer-input,
html[data-theme="nile"] .written-answer-input {
  background: rgba(11,19,36,0.8) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 16px !important;
  color: #f1f5f9 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
html[data-theme="nile"] .answer-input:focus,
html[data-theme="nile"] input[name="answer"]:focus,
html[data-theme="nile"] #answer-input:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
}

/* Submit / check button */
html[data-theme="nile"] .q-submit,
html[data-theme="nile"] #submit-btn,
html[data-theme="nile"] button.check-btn,
html[data-theme="nile"] [data-k2s-click="submitAnswer"] {
  background: linear-gradient(135deg, #d4af37, #f0d060) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #0a0c10 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  box-shadow: 0 4px 18px rgba(212,175,55,0.3) !important;
}
html[data-theme="nile"] .q-submit:hover,
html[data-theme="nile"] [data-k2s-click="submitAnswer"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(212,175,55,0.45) !important;
}

/* Feedback banners */
html[data-theme="nile"] .feedback-correct,
html[data-theme="nile"] .result-correct,
html[data-theme="nile"] [class*="feedback"].correct {
  background: rgba(16,185,129,0.1) !important;
  border: 1px solid rgba(16,185,129,0.3) !important;
  border-radius: 10px !important;
  color: #6ee7b7 !important;
  padding: 14px 18px !important;
}
html[data-theme="nile"] .feedback-wrong,
html[data-theme="nile"] .result-wrong,
html[data-theme="nile"] [class*="feedback"].wrong {
  background: rgba(239,68,68,0.08) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  border-radius: 10px !important;
  color: #fca5a5 !important;
  padding: 14px 18px !important;
}

/* Question progress strip at top */
html[data-theme="nile"] .q-progress-bar,
html[data-theme="nile"] .session-progress-bar {
  height: 3px !important;
  background: rgba(212,175,55,0.08) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-bottom: 18px !important;
}
html[data-theme="nile"] .q-progress-bar__fill,
html[data-theme="nile"] .session-progress-bar__fill {
  height: 100% !important;
  background: linear-gradient(90deg, #d4af37, #00e0ff) !important;
  box-shadow: 0 0 8px rgba(212,175,55,0.5) !important;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Streak / XP micro-rewards on question screen */
html[data-theme="nile"] .xp-pop,
html[data-theme="nile"] .combo-pop {
  font-family: 'Unbounded', var(--font-heading) !important;
  color: #d4af37 !important;
  text-shadow: 0 0 12px rgba(212,175,55,0.6) !important;
  animation: nile-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── 5. EXAM RUNNER ─────────────────────────────────────────────────────── */
html[data-theme="nile"] .exam-header,
html[data-theme="nile"] #exam-header {
  background: rgba(11,19,36,0.97) !important;
  border-bottom: 1px solid rgba(212,175,55,0.15) !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
html[data-theme="nile"] .exam-timer,
html[data-theme="nile"] #exam-timer {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #00e0ff !important;
  letter-spacing: 0.1em !important;
  text-shadow: 0 0 12px rgba(0,224,255,0.45) !important;
  font-variant-numeric: tabular-nums !important;
  background: rgba(0,224,255,0.04) !important;
  border: 1px solid rgba(0,224,255,0.15) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
}
html[data-theme="nile"] .exam-timer.warning {
  color: #f97316 !important;
  border-color: rgba(249,115,22,0.35) !important;
  animation: nile-blink-warn 1s ease-in-out infinite !important;
}
@keyframes nile-blink-warn {
  0%,100% { opacity: 1; } 50% { opacity: 0.5; }
}
html[data-theme="nile"] .exam-q-counter {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(148,163,184,0.6) !important;
}
html[data-theme="nile"] .exam-q-counter strong {
  color: #d4af37 !important;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 16px !important;
}

/* Exam question area */
html[data-theme="nile"] .exam-body,
html[data-theme="nile"] #exam-body {
  max-width: 820px !important;
  margin: 24px auto !important;
  padding: 0 24px !important;
}

/* Marks / point indicator */
html[data-theme="nile"] .q-marks,
html[data-theme="nile"] .marks-badge {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.6) !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
  border-radius: 4px !important;
  padding: 2px 8px !important;
  display: inline-block !important;
}

/* ── 6. EXAM RESULTS ─────────────────────────────────────────────────────── */
html[data-theme="nile"] .results-hero,
html[data-theme="nile"] .exam-results-header,
html[data-theme="nile"] [class*="results-header"] {
  background: linear-gradient(135deg, rgba(11,19,36,0.97) 0%, rgba(7,10,20,0.97) 100%) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  margin-bottom: 24px !important;
}
html[data-theme="nile"] .results-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(212,175,55,0.08) 0%, transparent 70%);
  pointer-events: none;
}
html[data-theme="nile"] .results-score,
html[data-theme="nile"] .score-big,
html[data-theme="nile"] [class*="score-display"] {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: clamp(48px, 8vw, 72px) !important;
  font-weight: 900 !important;
  color: #d4af37 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  text-shadow: 0 0 40px rgba(212,175,55,0.4) !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .results-grade,
html[data-theme="nile"] .grade-label {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: rgba(0,224,255,0.7) !important;
  margin-top: 8px !important;
}
html[data-theme="nile"] .results-breakdown,
html[data-theme="nile"] .score-breakdown {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}
html[data-theme="nile"] .breakdown-card {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
}
html[data-theme="nile"] .breakdown-val {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.02em !important;
}
html[data-theme="nile"] .breakdown-lbl {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(148,163,184,0.5) !important;
  margin-top: 4px !important;
}

/* Q review rows in results */
html[data-theme="nile"] .q-review-row,
html[data-theme="nile"] [class*="q-review"] {
  background: rgba(11,19,36,0.75) !important;
  border: 1px solid rgba(212,175,55,0.08) !important;
  border-radius: 9px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
html[data-theme="nile"] .q-review-row.correct { border-color: rgba(16,185,129,0.2) !important; }
html[data-theme="nile"] .q-review-row.wrong   { border-color: rgba(239,68,68,0.18) !important; }

/* ── 7. PROGRESS SCREEN ─────────────────────────────────────────────────── */
html[data-theme="nile"] .progress-xp-ring {
  width: 140px; height: 140px;
  margin: 0 auto 20px;
}
html[data-theme="nile"] .progress-xp-ring circle[class*="track"] {
  stroke: rgba(212,175,55,0.1) !important;
}
html[data-theme="nile"] .progress-xp-ring circle[class*="fill"],
html[data-theme="nile"] .progress-xp-ring circle[class*="progress"] {
  stroke: #d4af37 !important;
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.5)) !important;
}
html[data-theme="nile"] .progress-stat-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}
html[data-theme="nile"] .progress-stat {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
}
html[data-theme="nile"] .progress-stat__n {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #d4af37 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .progress-stat__lbl {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(148,163,184,0.55) !important;
  margin-top: 4px !important;
}

/* Topic accuracy table */
html[data-theme="nile"] .topic-table,
html[data-theme="nile"] table.progress-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
html[data-theme="nile"] .topic-table th,
html[data-theme="nile"] table.progress-table th {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.55) !important;
  padding: 10px 12px !important;
  border-bottom: 1px solid rgba(212,175,55,0.12) !important;
  text-align: left !important;
}
html[data-theme="nile"] .topic-table td,
html[data-theme="nile"] table.progress-table td {
  padding: 11px 12px !important;
  border-bottom: 1px solid rgba(212,175,55,0.05) !important;
  color: #e2e8f0 !important;
  font-family: 'Inter', var(--font-main) !important;
}
html[data-theme="nile"] .topic-table tr:hover td,
html[data-theme="nile"] table.progress-table tr:hover td {
  background: rgba(212,175,55,0.04) !important;
}

/* ── 8. ACHIEVEMENTS SCREEN ─────────────────────────────────────────────── */
html[data-theme="nile"] .achievement-grid,
html[data-theme="nile"] .badge-grid,
html[data-theme="nile"] [class*="achievement-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}
html[data-theme="nile"] .achievement-card,
html[data-theme="nile"] .badge-card,
html[data-theme="nile"] [class*="achievement-card"] {
  background: rgba(11,19,36,0.88) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 14px !important;
  padding: 20px 16px !important;
  text-align: center !important;
  transition: all 0.22s !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .achievement-card:hover {
  border-color: rgba(212,175,55,0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.5) !important;
}
html[data-theme="nile"] .achievement-card.locked {
  opacity: 0.4 !important;
  filter: grayscale(0.6) !important;
}
html[data-theme="nile"] .achievement-card .ach-emoji {
  font-size: 36px !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  filter: drop-shadow(0 0 8px rgba(212,175,55,0.3)) !important;
}
html[data-theme="nile"] .achievement-card .ach-name {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 4px !important;
}
html[data-theme="nile"] .achievement-card .ach-desc {
  font-size: 11px !important;
  color: rgba(148,163,184,0.55) !important;
  line-height: 1.4 !important;
}
html[data-theme="nile"] .achievement-card.unlocked::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

/* Rank display on achievements */
html[data-theme="nile"] .rank-display,
html[data-theme="nile"] .rank-card {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .rank-name {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* ── 9. MISTAKES REVIEW ──────────────────────────────────────────────────── */
html[data-theme="nile"] .mistake-card,
html[data-theme="nile"] [class*="mistake-row"],
html[data-theme="nile"] [class*="mistake-item"] {
  background: rgba(11,19,36,0.88) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
  position: relative !important;
  transition: border-color 0.2s !important;
}
html[data-theme="nile"] .mistake-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgba(239,68,68,0.8), rgba(239,68,68,0.2));
  border-radius: 3px 0 0 3px;
}
html[data-theme="nile"] .mistake-card:hover {
  border-color: rgba(239,68,68,0.4) !important;
}
html[data-theme="nile"] .mistake-resolved {
  border-color: rgba(16,185,129,0.25) !important;
  opacity: 0.6 !important;
}
html[data-theme="nile"] .mistake-resolved::before {
  background: linear-gradient(180deg, rgba(16,185,129,0.8), rgba(16,185,129,0.2)) !important;
}
html[data-theme="nile"] .mistake-q-text {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  color: #e2e8f0 !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin-bottom: 10px !important;
}
html[data-theme="nile"] .mistake-correct-ans {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 12px !important;
  color: #6ee7b7 !important;
  background: rgba(16,185,129,0.07) !important;
  border: 1px solid rgba(16,185,129,0.2) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  display: inline-block !important;
}
html[data-theme="nile"] .mistake-your-ans {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 12px !important;
  color: #fca5a5 !important;
  background: rgba(239,68,68,0.07) !important;
  border: 1px solid rgba(239,68,68,0.18) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  display: inline-block !important;
  margin-right: 8px !important;
}

/* ── 10. REVISION NOTES ──────────────────────────────────────────────────── */
html[data-theme="nile"] .notes-list,
html[data-theme="nile"] [class*="revision-notes"] {
  display: grid !important;
  gap: 10px !important;
}
html[data-theme="nile"] .note-card,
html[data-theme="nile"] [class*="note-item"] {
  background: rgba(11,19,36,0.88) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] .note-card:hover {
  border-color: rgba(212,175,55,0.35) !important;
  transform: translateY(-2px) !important;
}
html[data-theme="nile"] .note-title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin-bottom: 6px !important;
}
html[data-theme="nile"] .note-body {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 13px !important;
  color: rgba(148,163,184,0.75) !important;
  line-height: 1.55 !important;
}
html[data-theme="nile"] .note-editor,
html[data-theme="nile"] textarea[class*="note"],
html[data-theme="nile"] .revision-editor {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  color: #e2e8f0 !important;
  resize: vertical !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s !important;
}
html[data-theme="nile"] .note-editor:focus,
html[data-theme="nile"] textarea[class*="note"]:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}

/* ── 11. FLASHCARDS ──────────────────────────────────────────────────────── */
html[data-theme="nile"] .flashcard-scene,
html[data-theme="nile"] [class*="flashcard-scene"],
html[data-theme="nile"] .flashcard-container {
  perspective: 1000px !important;
  margin: 0 auto !important;
}
html[data-theme="nile"] .flashcard,
html[data-theme="nile"] [class*="flash-card"],
html[data-theme="nile"] .fc-card {
  background: rgba(11,19,36,0.95) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  text-align: center !important;
  min-height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: transform 0.5s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .flashcard::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, #00e0ff, transparent);
}
html[data-theme="nile"] .flashcard:hover {
  border-color: rgba(212,175,55,0.45) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(212,175,55,0.08) !important;
}
html[data-theme="nile"] .flashcard__front,
html[data-theme="nile"] .fc-front {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  line-height: 1.5 !important;
}
html[data-theme="nile"] .flashcard__back,
html[data-theme="nile"] .fc-back {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 16px !important;
  color: #d4af37 !important;
  background: rgba(212,175,55,0.05) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 10px !important;
  padding: 14px 20px !important;
  margin-top: 16px !important;
}

/* SM-2 quality buttons */
html[data-theme="nile"] .fc-quality-btns {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
}
html[data-theme="nile"] .fc-q-btn {
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
  border: 1px solid !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] .fc-q-btn.hard {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #fca5a5 !important;
}
html[data-theme="nile"] .fc-q-btn.good {
  background: rgba(212,175,55,0.08) !important;
  border-color: rgba(212,175,55,0.3) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .fc-q-btn.easy {
  background: rgba(16,185,129,0.08) !important;
  border-color: rgba(16,185,129,0.3) !important;
  color: #6ee7b7 !important;
}
html[data-theme="nile"] .fc-q-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.2) !important;
}

/* ── 12. DAILY / FIVE-A-DAY ─────────────────────────────────────────────── */
html[data-theme="nile"] .daily-hero,
html[data-theme="nile"] [class*="daily-card"] {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .daily-hero::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 50%, transparent);
}
html[data-theme="nile"] .daily-streak-display {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  color: #d4af37 !important;
  text-shadow: 0 0 28px rgba(212,175,55,0.5) !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .five-a-day-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin: 20px 0 !important;
}
html[data-theme="nile"] .five-slot {
  aspect-ratio: 1 !important;
  border-radius: 10px !important;
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  display: grid !important;
  place-items: center !important;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: rgba(212,175,55,0.3) !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] .five-slot.done {
  background: rgba(212,175,55,0.12) !important;
  border-color: rgba(212,175,55,0.4) !important;
  color: #d4af37 !important;
  box-shadow: 0 0 12px rgba(212,175,55,0.2) !important;
}

/* ── 13. SPEED ROUND / QUICK 10 / TIMES TABLES ──────────────────────────── */
html[data-theme="nile"] .speed-header,
html[data-theme="nile"] .timed-header {
  background: rgba(11,19,36,0.97) !important;
  border-bottom: 1px solid rgba(0,224,255,0.15) !important;
  padding: 14px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}
html[data-theme="nile"] .speed-timer,
html[data-theme="nile"] .timed-timer {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #00e0ff !important;
  text-shadow: 0 0 16px rgba(0,224,255,0.5) !important;
  letter-spacing: 0.06em !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .speed-score,
html[data-theme="nile"] .timed-score {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #d4af37 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .tt-grid,
html[data-theme="nile"] .times-table-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)) !important;
  gap: 8px !important;
}
html[data-theme="nile"] .tt-cell {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 8px !important;
  padding: 12px 8px !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
}
html[data-theme="nile"] .tt-cell:hover {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.35) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .tt-cell.correct {
  background: rgba(16,185,129,0.1) !important;
  border-color: rgba(16,185,129,0.35) !important;
  color: #6ee7b7 !important;
}
html[data-theme="nile"] .tt-cell.wrong {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.25) !important;
  color: #fca5a5 !important;
}

/* Results splash for timed modes */
html[data-theme="nile"] .speed-results,
html[data-theme="nile"] .timed-results {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .speed-results::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(212,175,55,0.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── 14. BOOKMARKS ───────────────────────────────────────────────────────── */
html[data-theme="nile"] .bookmark-card,
html[data-theme="nile"] [class*="bookmark-item"],
html[data-theme="nile"] [class*="bookmark-row"] {
  background: rgba(11,19,36,0.88) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  transition: border-color 0.2s !important;
}
html[data-theme="nile"] .bookmark-card:hover {
  border-color: rgba(212,175,55,0.35) !important;
}
html[data-theme="nile"] .bookmark-icon {
  color: #d4af37 !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
html[data-theme="nile"] .bookmark-q-text {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  color: #e2e8f0 !important;
  line-height: 1.5 !important;
  flex: 1 !important;
  min-width: 0 !important;
}
html[data-theme="nile"] .bookmark-answer {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  color: #d4af37 !important;
  opacity: 0.7 !important;
  margin-top: 6px !important;
}
html[data-theme="nile"] .bookmark-remove-btn {
  background: rgba(239,68,68,0.07) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  border-radius: 6px !important;
  color: #fca5a5 !important;
  padding: 6px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  flex-shrink: 0 !important;
  display: grid; place-items: center;
}
html[data-theme="nile"] .bookmark-remove-btn:hover {
  background: rgba(239,68,68,0.15) !important;
  border-color: rgba(239,68,68,0.4) !important;
}

/* ── 15. DR NILE AI CHAT ─────────────────────────────────────────────────── */
html[data-theme="nile"] .ai-chat-wrap,
html[data-theme="nile"] #ai-chat-container,
html[data-theme="nile"] [class*="chat-container"] {
  background: rgba(4,6,14,0.97) !important;
  border-radius: 16px !important;
  border: 1px solid rgba(212,175,55,0.15) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 160px) !important;
  min-height: 480px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}
html[data-theme="nile"] .chat-header,
html[data-theme="nile"] .ai-chat-header {
  background: rgba(11,19,36,0.97) !important;
  border-bottom: 1px solid rgba(212,175,55,0.12) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}
html[data-theme="nile"] .chat-avatar,
html[data-theme="nile"] .ai-avatar {
  width: 42px; height: 42px;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(0,224,255,0.1)) !important;
  border: 1px solid rgba(212,175,55,0.3) !important;
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
}
html[data-theme="nile"] .chat-avatar::after {
  content: "";
  position: absolute; bottom: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #10b981;
  border: 2px solid rgba(4,6,14,0.97);
  box-shadow: 0 0 8px rgba(16,185,129,0.6);
}
html[data-theme="nile"] .chat-name {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}
html[data-theme="nile"] .chat-status {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #10b981 !important;
}

/* Message thread */
html[data-theme="nile"] .chat-messages,
html[data-theme="nile"] .ai-messages,
html[data-theme="nile"] #chat-messages {
  flex: 1 !important;
  overflow-y: auto !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(212,175,55,0.2) transparent !important;
}
html[data-theme="nile"] .chat-msg,
html[data-theme="nile"] [class*="chat-message"] {
  max-width: 80% !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  animation: nile-rise 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
html[data-theme="nile"] .chat-msg.user,
html[data-theme="nile"] [class*="chat-message"].user,
html[data-theme="nile"] [class*="msg-user"] {
  align-self: flex-end !important;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.08)) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  color: #f1f5f9 !important;
  border-bottom-right-radius: 4px !important;
}
html[data-theme="nile"] .chat-msg.assistant,
html[data-theme="nile"] [class*="chat-message"].assistant,
html[data-theme="nile"] [class*="msg-assistant"] {
  align-self: flex-start !important;
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(0,224,255,0.12) !important;
  color: #e2e8f0 !important;
  border-bottom-left-radius: 4px !important;
}

/* Chat input bar */
html[data-theme="nile"] .chat-input-bar,
html[data-theme="nile"] .ai-input-row,
html[data-theme="nile"] #chat-input-bar {
  border-top: 1px solid rgba(212,175,55,0.1) !important;
  background: rgba(11,19,36,0.97) !important;
  padding: 14px 16px !important;
  display: flex !important;
  gap: 10px !important;
  align-items: flex-end !important;
  flex-shrink: 0 !important;
}
html[data-theme="nile"] .chat-input,
html[data-theme="nile"] #chat-input,
html[data-theme="nile"] textarea[class*="chat-input"] {
  flex: 1 !important;
  background: rgba(11,19,36,0.8) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  color: #f1f5f9 !important;
  resize: none !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  line-height: 1.5 !important;
}
html[data-theme="nile"] .chat-input:focus,
html[data-theme="nile"] #chat-input:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}
html[data-theme="nile"] .chat-send-btn,
html[data-theme="nile"] #chat-send {
  background: linear-gradient(135deg, #d4af37, #f0d060) !important;
  border: none !important;
  border-radius: 10px !important;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer !important;
  color: #0a0c10 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] .chat-send-btn:hover,
html[data-theme="nile"] #chat-send:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(212,175,55,0.4) !important;
}

/* Typing indicator */
html[data-theme="nile"] .chat-typing {
  display: flex; gap: 5px; align-items: center; padding: 12px 16px;
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(0,224,255,0.12) !important;
  border-radius: 14px !important;
  border-bottom-left-radius: 4px !important;
  align-self: flex-start !important;
  width: fit-content !important;
}
html[data-theme="nile"] .chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(212,175,55,0.5);
  animation: nile-bounce 1.2s ease-in-out infinite;
}
html[data-theme="nile"] .chat-typing span:nth-child(2) { animation-delay: 0.2s; }
html[data-theme="nile"] .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nile-bounce {
  0%,80%,100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ── 16. LEADERBOARD ─────────────────────────────────────────────────────── */
html[data-theme="nile"] .leaderboard-table,
html[data-theme="nile"] [class*="leaderboard-list"] {
  background: rgba(11,19,36,0.75) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .lb-row,
html[data-theme="nile"] [class*="leaderboard-row"],
html[data-theme="nile"] [class*="lb-item"] {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(212,175,55,0.06) !important;
  transition: background 0.18s !important;
}
html[data-theme="nile"] .lb-row:last-child { border-bottom: none !important; }
html[data-theme="nile"] .lb-row:hover { background: rgba(212,175,55,0.04) !important; }
html[data-theme="nile"] .lb-row.lb-mine {
  background: rgba(212,175,55,0.07) !important;
  border-color: rgba(212,175,55,0.18) !important;
}
html[data-theme="nile"] .lb-rank {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: rgba(148,163,184,0.5) !important;
  width: 32px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
html[data-theme="nile"] .lb-row:nth-child(1) .lb-rank { color: #d4af37 !important; text-shadow: 0 0 8px rgba(212,175,55,0.5) !important; }
html[data-theme="nile"] .lb-row:nth-child(2) .lb-rank { color: #94a3b8 !important; }
html[data-theme="nile"] .lb-row:nth-child(3) .lb-rank { color: #f97316 !important; }
html[data-theme="nile"] .lb-name {
  flex: 1 !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
}
html[data-theme="nile"] .lb-xp {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #d4af37 !important;
  letter-spacing: 0.04em !important;
}

/* ── 17. SETTINGS ────────────────────────────────────────────────────────── */
html[data-theme="nile"] .settings-section,
html[data-theme="nile"] [class*="settings-group"] {
  background: rgba(11,19,36,0.82) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
}
html[data-theme="nile"] .settings-row,
html[data-theme="nile"] [class*="setting-row"],
html[data-theme="nile"] [class*="settings-item"] {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid rgba(212,175,55,0.06) !important;
}
html[data-theme="nile"] .settings-row:last-child { border-bottom: none !important; }
html[data-theme="nile"] .settings-row:hover { background: rgba(212,175,55,0.04) !important; }
html[data-theme="nile"] .settings-label,
html[data-theme="nile"] [class*="setting-label"] {
  flex: 1 !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e2e8f0 !important;
}
html[data-theme="nile"] .settings-sub {
  font-size: 12px !important;
  color: rgba(148,163,184,0.55) !important;
  margin-top: 2px !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  letter-spacing: 0.04em !important;
}

/* Toggle switches */
html[data-theme="nile"] .toggle,
html[data-theme="nile"] input[type="checkbox"].toggle {
  accent-color: #d4af37 !important;
}
html[data-theme="nile"] .toggle-switch {
  width: 44px; height: 24px;
  background: rgba(212,175,55,0.12) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: background 0.2s !important;
  flex-shrink: 0 !important;
}
html[data-theme="nile"] .toggle-switch.on {
  background: rgba(212,175,55,0.3) !important;
  border-color: #d4af37 !important;
}
html[data-theme="nile"] .toggle-switch::after {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(148,163,184,0.5);
  transition: transform 0.2s, background 0.2s;
}
html[data-theme="nile"] .toggle-switch.on::after {
  transform: translateX(20px) !important;
  background: #d4af37 !important;
  box-shadow: 0 0 8px rgba(212,175,55,0.5) !important;
}

/* Theme picker grid */
html[data-theme="nile"] .theme-grid,
html[data-theme="nile"] [class*="theme-picker"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
  gap: 8px !important;
  padding: 14px !important;
}
html[data-theme="nile"] .theme-swatch,
html[data-theme="nile"] [class*="theme-option"] {
  border-radius: 10px !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: all 0.2s !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(148,163,184,0.6) !important;
}
html[data-theme="nile"] .theme-swatch:hover {
  border-color: rgba(212,175,55,0.4) !important;
  background: rgba(212,175,55,0.06) !important;
}
html[data-theme="nile"] .theme-swatch.active,
html[data-theme="nile"] [class*="theme-option"].active {
  border-color: #d4af37 !important;
  background: rgba(212,175,55,0.1) !important;
  color: #d4af37 !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.25) !important;
}

/* Font size / select dropdowns */
html[data-theme="nile"] select,
html[data-theme="nile"] .settings-select {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  padding: 8px 12px !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 12px !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
}
html[data-theme="nile"] select:focus,
html[data-theme="nile"] .settings-select:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}

/* ── 18. PARENT DASHBOARD ────────────────────────────────────────────────── */
html[data-theme="nile"] .parent-header,
html[data-theme="nile"] [class*="parent-dash-header"] {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .parent-header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 40%, #00e0ff 70%, transparent);
}
html[data-theme="nile"] .parent-stat-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 10px !important;
  margin: 16px 0 !important;
}
html[data-theme="nile"] .parent-stat {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  text-align: center !important;
}
html[data-theme="nile"] .parent-stat__n {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #d4af37 !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .parent-stat__l {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(148,163,184,0.55) !important;
  margin-top: 4px !important;
}

/* PIN entry modal */
html[data-theme="nile"] .pin-modal,
html[data-theme="nile"] [class*="parent-pin"] {
  background: rgba(7,10,20,0.97) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
html[data-theme="nile"] .pin-display {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 20px 0 !important;
}
html[data-theme="nile"] .pin-dot {
  width: 16px; height: 16px;
  border-radius: 50% !important;
  border: 2px solid rgba(212,175,55,0.3) !important;
  background: transparent !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] .pin-dot.filled {
  background: #d4af37 !important;
  border-color: #d4af37 !important;
  box-shadow: 0 0 10px rgba(212,175,55,0.5) !important;
}
html[data-theme="nile"] .pin-keypad {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  max-width: 240px !important;
  margin: 0 auto !important;
}
html[data-theme="nile"] .pin-key {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 10px !important;
  padding: 16px !important;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  cursor: pointer !important;
  transition: all 0.18s !important;
}
html[data-theme="nile"] .pin-key:hover {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.4) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .pin-key:active {
  transform: scale(0.95) !important;
}

/* ── 19. TEACHER DASHBOARD ───────────────────────────────────────────────── */
html[data-theme="nile"] .teacher-header,
html[data-theme="nile"] [class*="teacher-dash-header"] {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(0,224,255,0.18) !important;
  border-radius: 16px !important;
  padding: 24px !important;
  margin-bottom: 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .teacher-header::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #00e0ff 40%, #d4af37 70%, transparent);
}
html[data-theme="nile"] .student-row,
html[data-theme="nile"] [class*="student-item"],
html[data-theme="nile"] [class*="pupil-row"] {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px !important;
  background: rgba(11,19,36,0.75) !important;
  border: 1px solid rgba(212,175,55,0.08) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  transition: all 0.18s !important;
}
html[data-theme="nile"] .student-row:hover {
  border-color: rgba(212,175,55,0.25) !important;
  background: rgba(212,175,55,0.04) !important;
}
html[data-theme="nile"] .student-avatar {
  width: 38px; height: 38px;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(0,224,255,0.1)) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  display: grid; place-items: center;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #d4af37 !important;
  flex-shrink: 0 !important;
}
html[data-theme="nile"] .student-name {
  flex: 1 !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
}
html[data-theme="nile"] .student-xp {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 12px !important;
  color: #d4af37 !important;
}

/* Safeguarding flags */
html[data-theme="nile"] .flag-card,
html[data-theme="nile"] [class*="safeguard"],
html[data-theme="nile"] [class*="flag-row"] {
  background: rgba(239,68,68,0.06) !important;
  border: 1px solid rgba(239,68,68,0.25) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
html[data-theme="nile"] .flag-card::before {
  content: "⚑";
  color: #ef4444;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── 20. SATS PAPERS PICKER ──────────────────────────────────────────────── */
html[data-theme="nile"] .paper-grid,
html[data-theme="nile"] [class*="papers-grid"],
html[data-theme="nile"] [class*="paper-picker"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}
html[data-theme="nile"] .paper-card,
html[data-theme="nile"] [class*="paper-card"],
html[data-theme="nile"] button[data-k2s-click="startExam"],
html[data-theme="nile"] button[data-k2s-click="startPaper"] {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .paper-card::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #d4af37, rgba(212,175,55,0.2));
  border-radius: 3px 0 0 3px;
  opacity: 0;
  transition: opacity 0.2s;
}
html[data-theme="nile"] .paper-card:hover {
  border-color: rgba(212,175,55,0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}
html[data-theme="nile"] .paper-card:hover::before {
  opacity: 1;
}
html[data-theme="nile"] .paper-title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin-bottom: 6px !important;
}
html[data-theme="nile"] .paper-meta {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.55) !important;
}

/* ── 21. EXAM COUNTDOWN PAGE ─────────────────────────────────────────────── */
html[data-theme="nile"] .countdown-hero {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  text-align: center !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .countdown-days {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: clamp(64px, 12vw, 100px) !important;
  font-weight: 900 !important;
  color: #d4af37 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  text-shadow: 0 0 60px rgba(212,175,55,0.4) !important;
  font-variant-numeric: tabular-nums !important;
}
html[data-theme="nile"] .countdown-label {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: rgba(148,163,184,0.55) !important;
  margin-top: 8px !important;
}

/* ── 22. FORMULAS PAGE ───────────────────────────────────────────────────── */
html[data-theme="nile"] .formula-card,
html[data-theme="nile"] [class*="formula-item"] {
  background: rgba(11,19,36,0.88) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 12px !important;
  padding: 18px !important;
  margin-bottom: 10px !important;
}
html[data-theme="nile"] .formula-name {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #d4af37 !important;
  letter-spacing: 0.04em !important;
  margin-bottom: 6px !important;
}
html[data-theme="nile"] .formula-expr,
html[data-theme="nile"] [class*="formula-math"] {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 15px !important;
  color: #f1f5f9 !important;
  background: rgba(0,224,255,0.04) !important;
  border: 1px solid rgba(0,224,255,0.1) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  display: block !important;
  margin-top: 6px !important;
}

/* ── 23. MODALS & OVERLAYS ───────────────────────────────────────────────── */
html[data-theme="nile"] .modal-overlay,
html[data-theme="nile"] [class*="modal-backdrop"] {
  background: rgba(1,2,8,0.8) !important;
  backdrop-filter: blur(8px) !important;
}
html[data-theme="nile"] .modal,
html[data-theme="nile"] [class*="modal-box"],
html[data-theme="nile"] [class*="modal-panel"] {
  background: rgba(7,10,20,0.98) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7) !important;
}
html[data-theme="nile"] .modal::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 40%, #00e0ff 70%, transparent);
}
html[data-theme="nile"] .modal-title,
html[data-theme="nile"] [class*="modal-heading"] {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 16px !important;
}

/* ── 24. CARDS (general .card class) ─────────────────────────────────────── */
html[data-theme="nile"] .card {
  background: rgba(11,19,36,0.88) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
html[data-theme="nile"] .card:hover {
  border-color: rgba(212,175,55,0.25) !important;
}

/* ── 25. EMPTY STATES ────────────────────────────────────────────────────── */
html[data-theme="nile"] .empty-state,
html[data-theme="nile"] [class*="empty-state"] {
  text-align: center !important;
  padding: 48px 24px !important;
  color: rgba(148,163,184,0.55) !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}
html[data-theme="nile"] .empty-state .material-symbols-rounded {
  font-size: 48px !important;
  opacity: 0.25 !important;
  display: block !important;
  margin-bottom: 12px !important;
}

/* ── 26. NOTIFICATION TOASTS ─────────────────────────────────────────────── */
html[data-theme="nile"] .toast,
html[data-theme="nile"] [class*="notification"],
html[data-theme="nile"] [class*="toast-msg"] {
  background: rgba(7,10,20,0.97) !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 13px !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}
html[data-theme="nile"] .toast.success { border-color: rgba(16,185,129,0.4) !important; }
html[data-theme="nile"] .toast.error   { border-color: rgba(239,68,68,0.35) !important; }

/* ── 27. ADDITIONAL MOTION KEYFRAMES ─────────────────────────────────────── */
@keyframes nile-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nile-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes nile-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
@keyframes nile-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@keyframes nile-pulse-led {
  0%,100% { box-shadow: 0 0 6px rgba(0,224,255,0.6); }
  50%     { box-shadow: 0 0 14px rgba(0,224,255,1); }
}

/* View entrance animation for every screen */
html[data-theme="nile"] .anim-in,
html[data-theme="nile"] .view-fade-in {
  animation: nile-rise 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── 28. SUBJECT LEVEL SELECT ─────────────────────────────────────────────── */
html[data-theme="nile"] .level-card,
html[data-theme="nile"] [class*="level-option"],
html[data-theme="nile"] button[data-k2s-click*="Level"] {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
  text-align: center !important;
}
html[data-theme="nile"] .level-card:hover,
html[data-theme="nile"] button[data-k2s-click*="Level"]:hover {
  border-color: rgba(212,175,55,0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}

/* ── 29. WEEK/DAY HISTORY CALENDAR ──────────────────────────────────────── */
html[data-theme="nile"] .history-day,
html[data-theme="nile"] [class*="day-cell"],
html[data-theme="nile"] [class*="calendar-day"] {
  background: rgba(11,19,36,0.8) !important;
  border: 1px solid rgba(212,175,55,0.08) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  text-align: center !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
}
html[data-theme="nile"] .history-day.active,
html[data-theme="nile"] [class*="day-cell"].has-activity {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.3) !important;
  color: #d4af37 !important;
}

/* ── 30. INPUTS (global) ─────────────────────────────────────────────────── */
html[data-theme="nile"] input[type="text"],
html[data-theme="nile"] input[type="email"],
html[data-theme="nile"] input[type="password"],
html[data-theme="nile"] input[type="number"],
html[data-theme="nile"] textarea {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 8px !important;
  color: #f1f5f9 !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html[data-theme="nile"] input[type="text"]:focus,
html[data-theme="nile"] input[type="email"]:focus,
html[data-theme="nile"] input[type="password"]:focus,
html[data-theme="nile"] input[type="number"]:focus,
html[data-theme="nile"] textarea:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}
html[data-theme="nile"] input::placeholder,
html[data-theme="nile"] textarea::placeholder {
  color: rgba(148,163,184,0.4) !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* ── 31. BUTTONS (global utility) ────────────────────────────────────────── */
html[data-theme="nile"] button.btn,
html[data-theme="nile"] button.btn-primary,
html[data-theme="nile"] .btn-gold {
  background: linear-gradient(135deg, #d4af37, #f0d060) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #0a0c10 !important;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] button.btn:hover,
html[data-theme="nile"] button.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(212,175,55,0.4) !important;
}
html[data-theme="nile"] button.btn-secondary,
html[data-theme="nile"] .btn-ghost {
  background: rgba(212,175,55,0.07) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 8px !important;
  color: #d4af37 !important;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] button.btn-secondary:hover {
  background: rgba(212,175,55,0.15) !important;
}

/* ── 32. SCROLLBAR ───────────────────────────────────────────────────────── */
html[data-theme="nile"] ::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
html[data-theme="nile"] ::-webkit-scrollbar-track { background: transparent !important; }
html[data-theme="nile"] ::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.2) !important;
  border-radius: 2px !important;
}
html[data-theme="nile"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.4) !important;
}

/* ── 33. REDUCED MOTION GUARD ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="nile"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1ms !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   NILE PRECISION PATCH — exact class names from every render function
   Fixes gaps between generic selectors and the actual JS HTML output.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page typography ─────────────────────────────────────────────────────── */
html[data-theme="nile"] .page-title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: clamp(24px, 3.5vw, 36px) !important;
  font-weight: 800 !important;
  color: #f8fafc !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin: 0 0 8px !important;
}
html[data-theme="nile"] .page-sub {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  color: rgba(148,163,184,0.7) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
html[data-theme="nile"] .label-xs,
html[data-theme="nile"] .section-title {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}
html[data-theme="nile"] .mono {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
}

/* ── Stagger animation wrapper ───────────────────────────────────────────── */
html[data-theme="nile"] .stagger > * {
  animation: nile-rise 0.32s cubic-bezier(0.4,0,0.2,1) both;
}
html[data-theme="nile"] .stagger > *:nth-child(1) { animation-delay: 0ms; }
html[data-theme="nile"] .stagger > *:nth-child(2) { animation-delay: 40ms; }
html[data-theme="nile"] .stagger > *:nth-child(3) { animation-delay: 80ms; }
html[data-theme="nile"] .stagger > *:nth-child(4) { animation-delay: 120ms; }
html[data-theme="nile"] .stagger > *:nth-child(5) { animation-delay: 160ms; }
html[data-theme="nile"] .stagger > *:nth-child(6) { animation-delay: 200ms; }

/* ── Empty state (mk-empty) ─────────────────────────────────────────────── */
html[data-theme="nile"] .mk-empty {
  text-align: center !important;
  padding: 56px 24px !important;
  background: rgba(11,19,36,0.6) !important;
  border: 1px dashed rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  margin: 16px 0 !important;
}
html[data-theme="nile"] .mk-empty__icon {
  font-size: 48px !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  opacity: 0.7 !important;
  display: block !important;
}
html[data-theme="nile"] .mk-empty__icon .material-symbols-rounded {
  font-size: 48px !important;
  color: rgba(212,175,55,0.3) !important;
}
html[data-theme="nile"] .mk-empty__title {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}
html[data-theme="nile"] .mk-empty__sub {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 13px !important;
  color: rgba(148,163,184,0.55) !important;
  line-height: 1.6 !important;
  max-width: 40ch !important;
  margin: 0 auto 20px !important;
}

/* ── Inline badge pills ──────────────────────────────────────────────────── */
html[data-theme="nile"] .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  border: 1px solid currentColor !important;
  opacity: 0.9 !important;
}
html[data-theme="nile"] .mk-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: rgba(212,175,55,0.1) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .mk-chip--success {
  background: rgba(16,185,129,0.1) !important;
  border-color: rgba(16,185,129,0.25) !important;
  color: #6ee7b7 !important;
}
html[data-theme="nile"] .mk-chip--alert {
  background: rgba(249,115,22,0.1) !important;
  border-color: rgba(249,115,22,0.25) !important;
  color: #fdba74 !important;
}
html[data-theme="nile"] .mk-chip--muted {
  background: rgba(148,163,184,0.07) !important;
  border-color: rgba(148,163,184,0.18) !important;
  color: rgba(148,163,184,0.6) !important;
}
html[data-theme="nile"] .mk-chip--danger,
html[data-theme="nile"] .mk-cta--danger {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #fca5a5 !important;
}
html[data-theme="nile"] .gold-shimmer {
  position: relative;
  overflow: hidden;
}
html[data-theme="nile"] .gold-shimmer::after {
  content: "";
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.06), transparent);
  animation: nile-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

/* ── Question layout (two-col on desktop) ───────────────────────────────── */
html[data-theme="nile"] .question-layout {
  max-width: 860px !important;
  margin: 0 auto !important;
}
@media (min-width: 900px) {
  html[data-theme="nile"] .question-layout {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 20px !important;
    align-items: start !important;
  }
  html[data-theme="nile"] .question-layout .mk-progress { grid-column: 1 / -1; }
  html[data-theme="nile"] .question-layout .mk-terminal[style*="SESSION LIVE"] { grid-column: 1 / -1; }
}

/* ── Question card (actual class used in renderQuestion) ────────────────── */
html[data-theme="nile"] .question-card,
html[data-theme="nile"] .question-card-k2s {
  background: rgba(7,10,20,0.96) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .question-card::before,
html[data-theme="nile"] .question-card-k2s::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, #d4af37 40%, #00e0ff 70%, transparent 100%);
}

/* Question text */
html[data-theme="nile"] .question-text,
html[data-theme="nile"] .question-text-main {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 19px !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  line-height: 1.7 !important;
  letter-spacing: -0.005em !important;
}

/* Solution steps */
html[data-theme="nile"] .solution-step {
  background: rgba(11,19,36,0.7) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-bottom: 6px !important;
}
html[data-theme="nile"] .step-label {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.55) !important;
  margin-bottom: 4px !important;
}

/* Reading passage */
html[data-theme="nile"] .reading-passage-wrap {
  background: rgba(11,19,36,0.7) !important;
  border: 1px solid rgba(0,224,255,0.12) !important;
  border-radius: 10px !important;
  padding: 20px 24px !important;
  font-family: Georgia, serif !important;
  line-height: 1.85 !important;
  color: #e2e8f0 !important;
  max-height: 380px !important;
  overflow-y: auto !important;
}

/* Question images */
html[data-theme="nile"] .question-img-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  margin-bottom: 20px !important;
}
html[data-theme="nile"] .question-img-wrap {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  background: rgba(11,19,36,0.6) !important;
}
html[data-theme="nile"] .question-img-wrap img {
  border-radius: 10px !important;
}

/* ── Marks badge (used in question + exam) ──────────────────────────────── */
html[data-theme="nile"] .marks-badge {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(212,175,55,0.7) !important;
  background: rgba(212,175,55,0.07) !important;
  border: 1px solid rgba(212,175,55,0.2) !important;
  border-radius: 5px !important;
  padding: 3px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ── Flashcard qcard ────────────────────────────────────────────────────── */
html[data-theme="nile"] .mk-qcard {
  background: rgba(7,10,20,0.96) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 18px !important;
  padding: 36px 28px !important;
  cursor: pointer !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .mk-qcard::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 40%, #00e0ff 70%, transparent);
}
html[data-theme="nile"] .mk-qcard:hover {
  border-color: rgba(212,175,55,0.5) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.1) !important;
  transform: translateY(-3px) !important;
}

/* ── Speed Round progress bar (progress-bar / fill) ─────────────────────── */
html[data-theme="nile"] .progress-bar {
  width: 100% !important;
  height: 4px !important;
  background: rgba(212,175,55,0.08) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .progress-bar > .fill {
  height: 100% !important;
  background: linear-gradient(90deg, #d4af37, #00e0ff) !important;
  border-radius: 2px !important;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Speed Round timer element */
html[data-theme="nile"] #speed-timer {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 14px currentColor !important;
}

/* Exam timer element */
html[data-theme="nile"] #exam-timer {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #00e0ff !important;
  text-shadow: 0 0 10px rgba(0,224,255,0.5) !important;
  font-variant-numeric: tabular-nums !important;
}

/* ── Exam MCQ options (card card-hover style in renderExam) ─────────────── */
html[data-theme="nile"] .exam-mcq-grid button.card,
html[data-theme="nile"] .exam-mcq-grid .card-hover {
  background: rgba(11,19,36,0.85) !important;
  border-color: rgba(212,175,55,0.12) !important;
  border-radius: 12px !important;
  transition: all 0.18s !important;
}
html[data-theme="nile"] .exam-mcq-grid button.card:hover {
  border-color: rgba(212,175,55,0.4) !important;
  background: rgba(212,175,55,0.06) !important;
}

/* ── AI chat — #chat-messages inline bubbles ─────────────────────────────── */
html[data-theme="nile"] #chat-messages {
  background: rgba(4,6,14,0.97) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 16px !important;
}
/* User bubble */
html[data-theme="nile"] #chat-messages > div > div[style*="flex-end"] > div {
  background: linear-gradient(135deg, rgba(212,175,55,0.22), rgba(212,175,55,0.12)) !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: #f8fafc !important;
}
/* Assistant bubble */
html[data-theme="nile"] #chat-messages > div > div[style*="flex-start"] > div:last-child {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(0,224,255,0.12) !important;
  color: #e2e8f0 !important;
}
/* Dr Nile avatar */
html[data-theme="nile"] #chat-messages > div > div[style*="flex-start"] > div[style*="background:var(--accent)"] {
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(0,224,255,0.12)) !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
}
/* AI input */
html[data-theme="nile"] #ai-input,
html[data-theme="nile"] .input[id="ai-input"] {
  background: rgba(11,19,36,0.9) !important;
  border: none !important;
  color: #f1f5f9 !important;
  font-family: 'Inter', var(--font-main) !important;
  font-size: 15px !important;
}
/* AI input wrap */
html[data-theme="nile"] #chat-messages + div {
  background: rgba(11,19,36,0.97) !important;
  border: 1px solid rgba(212,175,55,0.12) !important;
  border-radius: 14px !important;
  margin-top: 14px !important;
}

/* ── Spinner ────────────────────────────────────────────────────────────── */
html[data-theme="nile"] .spinner {
  border-color: rgba(212,175,55,0.2) transparent transparent transparent !important;
}

/* ── Card card-hover variant ────────────────────────────────────────────── */
html[data-theme="nile"] .card-hover {
  cursor: pointer !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
html[data-theme="nile"] .card-hover:hover {
  border-color: rgba(212,175,55,0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}

/* ── btn btn-primary / btn-ghost in Nile ────────────────────────────────── */
html[data-theme="nile"] .btn {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 9px !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html[data-theme="nile"] .btn-primary {
  background: linear-gradient(135deg, #d4af37, #f0d060) !important;
  border: none !important;
  color: #0a0c10 !important;
  box-shadow: 0 4px 16px rgba(212,175,55,0.28) !important;
}
html[data-theme="nile"] .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(212,175,55,0.42) !important;
}
html[data-theme="nile"] .btn-ghost {
  background: rgba(212,175,55,0.06) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  color: #d4af37 !important;
}
html[data-theme="nile"] .btn-ghost:hover {
  background: rgba(212,175,55,0.14) !important;
  border-color: rgba(212,175,55,0.4) !important;
}
html[data-theme="nile"] .btn-icon {
  width: 40px !important; height: 40px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
}

/* ── Settings cards (renderSettings uses .card .anim-in) ───────────────── */
html[data-theme="nile"] .card.anim-in {
  animation: nile-rise 0.32s cubic-bezier(0.4,0,0.2,1) both !important;
}
/* Settings icon circles */
html[data-theme="nile"] .card > div > div[style*="border-radius:12px"] {
  border-radius: 10px !important;
}

/* ── mk-grid-bg (scanner grid texture on hero) ──────────────────────────── */
html[data-theme="nile"] .mk-grid-bg {
  background-image:
    linear-gradient(rgba(212,175,55,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.03) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
}

/* ── Session end screen / showSessionEnd ─────────────────────────────────── */
html[data-theme="nile"] .session-end-card {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 18px !important;
  padding: 36px !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .session-end-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 40%, #00e0ff 70%, transparent);
}

/* ── Diff dots (Normal / Challenge buttons on topics screen) ─────────────── */
html[data-theme="nile"] .diff-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
html[data-theme="nile"] button[data-k2s-click="setDiff"] {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  border-radius: 8px !important;
  transition: all 0.18s !important;
}

/* ── Consent / Privacy / Terms (plain text screens) ─────────────────────── */
html[data-theme="nile"] .privacy-content,
html[data-theme="nile"] .terms-content,
html[data-theme="nile"] [class*="legal-body"] {
  font-family: 'Inter', var(--font-main) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: rgba(226,232,240,0.85) !important;
  max-width: 720px !important;
  margin: 0 auto !important;
}
html[data-theme="nile"] .privacy-content h2,
html[data-theme="nile"] .terms-content h2 {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 15px !important;
  color: #d4af37 !important;
  letter-spacing: 0.04em !important;
  margin-top: 28px !important;
}

/* ── Exam type select + board selector ──────────────────────────────────── */
html[data-theme="nile"] .exam-type-card,
html[data-theme="nile"] .board-card,
html[data-theme="nile"] [class*="exam-type-option"],
html[data-theme="nile"] [class*="board-option"] {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  padding: 24px !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
  text-align: center !important;
}
html[data-theme="nile"] .exam-type-card:hover,
html[data-theme="nile"] .board-card:hover {
  border-color: rgba(212,175,55,0.4) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}
html[data-theme="nile"] .exam-type-card.selected,
html[data-theme="nile"] .board-card.selected {
  border-color: #d4af37 !important;
  background: rgba(212,175,55,0.1) !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.25) !important;
}

/* ── History / past sessions list ───────────────────────────────────────── */
html[data-theme="nile"] .history-row,
html[data-theme="nile"] [class*="history-item"] {
  background: rgba(11,19,36,0.8) !important;
  border: 1px solid rgba(212,175,55,0.08) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
  transition: border-color 0.18s !important;
}
html[data-theme="nile"] .history-row:hover {
  border-color: rgba(212,175,55,0.25) !important;
}

/* ── Revision notes (renderRevisionNotes uses card + textarea) ──────────── */
html[data-theme="nile"] .notes-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}
html[data-theme="nile"] #notes-title-input,
html[data-theme="nile"] #notes-body-input {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font-family: 'Inter', var(--font-main) !important;
  outline: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
html[data-theme="nile"] #notes-title-input:focus,
html[data-theme="nile"] #notes-body-input:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}

/* ── Daily challenge (renderDaily) ─────────────────────────────────────── */
html[data-theme="nile"] .daily-challenges-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
html[data-theme="nile"] .daily-challenge-card {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
}
html[data-theme="nile"] .daily-challenge-card:hover {
  border-color: rgba(212,175,55,0.4) !important;
  transform: translateY(-2px) !important;
}
html[data-theme="nile"] .daily-challenge-card.completed {
  border-color: rgba(16,185,129,0.3) !important;
  background: rgba(16,185,129,0.05) !important;
}

/* ── Five-a-Day slots ───────────────────────────────────────────────────── */
html[data-theme="nile"] .fad-slot {
  background: rgba(11,19,36,0.85) !important;
  border: 1px solid rgba(212,175,55,0.1) !important;
  border-radius: 12px !important;
  display: grid; place-items: center;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  transition: all 0.2s !important;
}
html[data-theme="nile"] .fad-slot.done {
  background: rgba(212,175,55,0.12) !important;
  border-color: rgba(212,175,55,0.45) !important;
  box-shadow: 0 0 14px rgba(212,175,55,0.2) !important;
}

/* ── Quick 10 + results ─────────────────────────────────────────────────── */
html[data-theme="nile"] .q10-header {
  background: rgba(11,19,36,0.95) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  margin-bottom: 20px !important;
}
html[data-theme="nile"] .q10-results-card {
  background: linear-gradient(135deg, rgba(11,19,36,0.97), rgba(7,10,20,0.97)) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  text-align: center !important;
}

/* ── Times Tables header inputs ─────────────────────────────────────────── */
html[data-theme="nile"] input[id="tt-answer"] {
  background: rgba(11,19,36,0.9) !important;
  border: 2px solid rgba(212,175,55,0.2) !important;
  border-radius: 10px !important;
  color: #f1f5f9 !important;
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-align: center !important;
  transition: border-color 0.2s !important;
}
html[data-theme="nile"] input[id="tt-answer"]:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,0.18) !important;
  outline: none !important;
}

/* ── SATs paper picker grid ─────────────────────────────────────────────── */
html[data-theme="nile"] .sats-paper-grid,
html[data-theme="nile"] [class*="paper-list"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
}
html[data-theme="nile"] .sats-paper-card {
  background: rgba(11,19,36,0.9) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  cursor: pointer !important;
  transition: all 0.22s !important;
  position: relative !important;
}
html[data-theme="nile"] .sats-paper-card:hover {
  border-color: rgba(212,175,55,0.42) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}

/* ── SATs exam paper (full paper runner: _renderSatsExam) ────────────────── */
html[data-theme="nile"] .sats-exam-container {
  max-width: 900px !important;
  margin: 0 auto !important;
}
html[data-theme="nile"] .sats-exam-header {
  background: rgba(11,19,36,0.97) !important;
  border: 1px solid rgba(212,175,55,0.16) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* ── Nile companion (renderNileCompanion) ───────────────────────────────── */
html[data-theme="nile"] .nile-companion,
html[data-theme="nile"] [class*="nile-companion"] {
  background: linear-gradient(135deg, rgba(11,19,36,0.95), rgba(7,10,20,0.95)) !important;
  border: 1px solid rgba(0,224,255,0.18) !important;
  border-radius: 16px !important;
  padding: 22px !important;
  position: relative !important;
  overflow: hidden !important;
  margin-top: 20px !important;
}
html[data-theme="nile"] .nile-companion::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #00e0ff 50%, transparent);
}

/* ── Teacher dashboard tables ───────────────────────────────────────────── */
html[data-theme="nile"] .teacher-table,
html[data-theme="nile"] table[class*="teacher"] {
  width: 100% !important;
  border-collapse: collapse !important;
}
html[data-theme="nile"] .teacher-table th {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(0,224,255,0.5) !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(0,224,255,0.1) !important;
  text-align: left !important;
}
html[data-theme="nile"] .teacher-table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(212,175,55,0.05) !important;
  color: #e2e8f0 !important;
  font-size: 13px !important;
}
html[data-theme="nile"] .teacher-table tr:hover td {
  background: rgba(0,224,255,0.03) !important;
}

/* ── Pricing screen ─────────────────────────────────────────────────────── */
html[data-theme="nile"] .pricing-card {
  background: rgba(11,19,36,0.92) !important;
  border: 1px solid rgba(212,175,55,0.14) !important;
  border-radius: 18px !important;
  padding: 28px !important;
  transition: all 0.22s !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme="nile"] .pricing-card.featured {
  border-color: rgba(212,175,55,0.5) !important;
  background: rgba(212,175,55,0.06) !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.15), 0 16px 40px rgba(0,0,0,0.5) !important;
}
html[data-theme="nile"] .pricing-price {
  font-family: 'Unbounded', var(--font-heading) !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #d4af37 !important;
  letter-spacing: -0.04em !important;
}
html[data-theme="nile"] .pricing-period {
  font-family: 'JetBrains Mono', var(--font-mono) !important;
  font-size: 11px !important;
  color: rgba(148,163,184,0.55) !important;
  letter-spacing: 0.1em !important;
}
html[data-theme="nile"] .pricing-feature {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: #e2e8f0 !important;
  padding: 6px 0 !important;
  font-family: 'Inter', var(--font-main) !important;
}
html[data-theme="nile"] .pricing-feature::before {
  content: "✓";
  color: #d4af37;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Topic shimmer (loading states) ─────────────────────────────────────── */
html[data-theme="nile"] .shimmer {
  background: linear-gradient(90deg,
    rgba(11,19,36,0.9) 25%,
    rgba(212,175,55,0.06) 50%,
    rgba(11,19,36,0.9) 75%) !important;
  background-size: 400% 100% !important;
  animation: nile-shimmer 1.6s ease-in-out infinite !important;
  border: 1px solid rgba(212,175,55,0.06) !important;
  border-radius: 14px !important;
}
@keyframes nile-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ── Accent accent-2 references → remap to Nile palette ─────────────────── */
html[data-theme="nile"] [style*="color:var(--accent)"],
html[data-theme="nile"] [style*="color: var(--accent)"] {
  color: #d4af37 !important;
}
html[data-theme="nile"] [style*="background:var(--accent)"],
html[data-theme="nile"] [style*="background: var(--accent)"] {
  background: #d4af37 !important;
}

/* ── Focus / accessibility ───────────────────────────────────────────────── */
html[data-theme="nile"] :focus-visible {
  outline: 2px solid #d4af37 !important;
  outline-offset: 2px !important;
}
html[data-theme="nile"] ::selection {
  background: rgba(212,175,55,0.25) !important;
  color: #f8fafc !important;
}

/* ── Reduced motion final guard ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="nile"] .stagger > *,
  html[data-theme="nile"] .shimmer,
  html[data-theme="nile"] .gold-shimmer::after {
    animation: none !important;
    transition-duration: 0.05ms !important;
  }
}