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

/* Fonts are local/system-first; icons are self-hosted in material-symbols-fallback.css. */

: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 */

  /* ── SCROLLBARS ── */
  --sb-track:     oklch(0.18 0.015 78);
  --sb-thumb:     oklch(1 0 0 / 0.1);
  --sb-thumb-hover: oklch(0.78 0.17 78 / 0.4);

  /* ── TYPOGRAPHY - system-first for reliable first paint and offline use ── */
  --font-main:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-main);
  --font-working: var(--font-main);
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-display-tracking: 0;
  --font-mono-tracking: 0.0em;

  /* ── 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"; }

button {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
}
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Display headings */
h1, h2, h3, .page-title, .hero-title {
  font-family: var(--font-heading);
  letter-spacing: var(--font-display-tracking);
  font-weight: 800;
  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); }

/* ── CUSTOM SCROLLBARS ── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--sb-track); }
*::-webkit-scrollbar-thumb { background: var(--sb-thumb); border: 2px solid var(--sb-track); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }

/* ── FLASHCARD 3D ENGINE ── */
.fc-scene {
  perspective: 1000px;
  width: 100%;
}
.fc-card {
  width: 100%;
  position: relative;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}
.fc-card.is-flipped {
  transform: rotateY(180deg);
}
.fc-front, .fc-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-radius: var(--r-xl);
  border: 2px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.fc-back {
  transform: rotateY(180deg);
  background: oklch(0.78 0.17 78 / 0.06);
  border-color: oklch(0.78 0.17 78 / 0.4);
}

/* ───────────────────────────────────────────────────────────────────────────
   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); }

/* ── MCQ TAP-TO-SELECT OPTION BUTTONS (NVR / Multiple Choice) ── */
.k2s-mcq-btn {
  transition: transform 0.15s var(--ease-quart), border-color 0.15s ease,
              background 0.15s ease, box-shadow 0.15s ease;
}
.k2s-mcq-btn:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--accent, #e0b34a) !important;
  background: oklch(0.78 0.17 78 / 0.08) !important;
  box-shadow: 0 8px 24px -6px oklch(0.78 0.17 78 / 0.25);
}
.k2s-mcq-btn:active {
  transform: scale(0.96);
}
.k2s-mcq-btn:focus-visible {
  outline: 3px solid var(--accent, #e0b34a);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .k2s-mcq-options { gap: 8px !important; }
  .k2s-mcq-btn {
    min-width: 56px !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
}

/* ── 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: 0;
  opacity: 0.18;
}

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 - always visible with display:swap on the Google Fonts link.
   Font variation settings enable FILL/weight axis for filled style at xl sizes. */
.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;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  /* Smooth transition when font swaps in from fallback */
  transition: opacity 0.15s ease;
}

.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;
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
}

/* ── 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: flex-start;
  gap: 10px;
  padding: 14px 14px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.sidebar-logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}

.sidebar-logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
  flex: 1;
}

.sidebar-logo-text strong {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text-1);
}

.sidebar-logo-text .sl-max {
  color: var(--accent);
  font-weight: 900;
}

.sidebar-logo-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 2px;
}

.sidebar-status-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
  flex-shrink: 0;
}

.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(100vw - var(--sidebar-w));
  max-width: calc(100vw - var(--sidebar-w));
  min-width: 0;
  box-sizing: border-box;
}

#content {
  flex: 1 1 0;
  padding: 16px 20px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

#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;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* ── 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); }
}

/* SATs Superstars MAX ASSISTANT */
#sats-superstars-assistant {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
}

.sats-superstars-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;
}

.sats-superstars-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;
}

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

@media (max-width: 768px) {
  #sats-superstars-assistant .sats-superstars-avatar-wrap {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
  }

  #sats-superstars-assistant #sats-superstars-bubble {
    bottom: calc(152px + env(safe-area-inset-bottom)) !important;
    right: 16px !important;
  }
}

@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;
  max-width: 320px;
  width: 100%;
  transition: all 0.3s var(--ease-out);
}

.search-bar:focus-within {
  max-width: 440px;
  width: 100%;
  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: 16px 20px;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  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: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}
@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 340px;
  gap: 24px;
  max-width: 1600px;  /* Increased from 1200px for wide screens */
  margin: 0 auto;
}

.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 - matches satsuperstars.com landing (cream + amber) ── */
[data-theme="light"],
[data-theme="amber"] {
  --bg:        #faf7f2;
  --bg-2:      #fff7ea;
  --surface:   #ffffff;
  --surface-2: #fff7ea;
  --border:    rgba(0,0,0,0.08);
  --border-2:  rgba(253, 176, 61, 0.25);
  --text-1:    #1a1612;
  --text-2:    #3a3428;
  --text-3:    #574f3f;
  --accent:      #fdb03d;                 /* landing-page amber */
  --accent-2:    #e89a28;
  --accent-glow: rgba(253, 176, 61, 0.20);
  --accent-ink:  #1c1917;
  --glass-bg:  #ffffff;
  --glass-border: rgba(0,0,0,0.08);
  --card-shadow: 0 2px 10px rgba(0,0,0,0.03), 0 12px 34px rgba(253, 176, 61, 0.10);
}

/* v72: zero out #content padding on light/amber themes - .home-stage paints its
   own edge-to-edge amber gradient, and the outer 16px/20px would otherwise leave
   a plain grey gutter between the sidebar and the cream backdrop. Other themes
   keep the default #content padding so dark views still look correct. */
[data-theme="light"] #content,
[data-theme="amber"] #content {
  padding: 0;
}

/* v73: shared stage for EVERY top-level view wrapper. Fills full content width
   (no max-width cap, no centering margins), paints the active theme's bg -
   light/amber/sunshine get the cream gradient, every other theme falls back
   to var(--bg) so dark themes actually show through (the v72 inline cream
   gradient was overriding dark themes on /home). Renders on all views. */
.k2s-stage {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px 24px 32px;
  min-height: calc(100vh - 64px);
  background: var(--bg);
  box-sizing: border-box;
}
[data-theme="light"] .k2s-stage,
[data-theme="amber"] .k2s-stage,
[data-theme="sunshine"] .k2s-stage {
  background: linear-gradient(180deg, #fff7ea 0%, #faf2df 48%, #fef3e0 100%);
}
/* Zero #content padding for every theme when a .k2s-stage child is present.
   Avoids double-padding the dark themes too - the stage paints its own. */
#content:has(.k2s-stage) { padding: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   v78 shared layout primitives - used by every secondary view so each one
   fills the viewport without reinventing CSS. All colours use CSS vars so
   the 12 themes keep working (light gets cream gradients, dark gets surface
   tones). Responsive: 2/3/4-col desktop → 2-col tablet → 1-col mobile.
   ═══════════════════════════════════════════════════════════════════════ */
.k2s-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.k2s-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.k2s-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 900px) {
  .k2s-grid-2, .k2s-grid-3, .k2s-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .k2s-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .k2s-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.k2s-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.k2s-card--accent {
  border-color: color-mix(in oklch, var(--border-2) 45%, var(--accent) 55%);
  box-shadow: var(--card-shadow), 0 0 0 1px color-mix(in oklch, transparent 72%, var(--accent) 28%);
}
.k2s-card--clickable { cursor: pointer; }
.k2s-card--clickable:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(253,176,61,0.14);
}

.k2s-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all .15s ease;
}
.k2s-stat--clickable { cursor: pointer; }
.k2s-stat--clickable:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(253,176,61,0.12);
}
.k2s-stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.k2s-stat__value {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.k2s-stat__delta { font-size: 11px; color: var(--accent); }

.k2s-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 14px;
  gap: 16px;
}
.k2s-section-head__title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-1);
}
.k2s-section-head__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.k2s-section-head__more {
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: none;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* Richer empty state: 2-col illustration + actionable CTA block */
.k2s-empty--rich {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 32px;
  align-items: center;
  padding: 40px;
  background: linear-gradient(135deg, rgba(253,176,61,0.08), rgba(253,176,61,0.02));
  border: 1px dashed var(--border-2);
  border-radius: 20px;
  margin: 20px 0;
}
.k2s-empty--rich__illust {
  width: 100%;
  aspect-ratio: 1;
  max-height: 240px;
  background: rgba(253,176,61,0.12);
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 96px;
}
.k2s-empty--rich__body h3 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--text-1);
}
.k2s-empty--rich__body p {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0 0 18px;
}
.k2s-empty--rich__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(253,176,61,0.28);
  margin-right: 10px;
  transition: transform .15s;
}
.k2s-empty--rich__cta:hover { transform: translateY(-1px); }
.k2s-empty--rich__cta--ghost {
  background: transparent;
  color: var(--text-2);
  box-shadow: none;
  border: 1px solid var(--border);
}
@media (max-width: 900px) {
  .k2s-empty--rich { grid-template-columns: 1fr; text-align: center; padding: 28px; }
  .k2s-empty--rich__illust { max-height: 180px; margin: 0 auto; max-width: 180px; }
}

/* Horizontal CSS bar chart for weekly activity (no Chart.js dep) */
.k2s-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 140px;
  padding: 12px 6px 8px;
}
.k2s-bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
}
.k2s-bars__fill {
  width: 100%;
  background: linear-gradient(180deg, var(--accent), oklch(0.65 0.17 50));
  border-radius: 6px 6px 2px 2px;
  min-height: 4px;
  transition: height .35s ease;
}
.k2s-bars__fill--empty {
  background: rgba(253,176,61,0.14);
}

/* Missing theme definitions wired up so every Settings tile actually applies */
[data-theme="theme_gold"] {
  --bg: #110d00; --bg-2: #1c1600; --surface: #1c1600; --surface-2: #241d00;
  --border: rgba(245,158,11,0.22); --border-2: rgba(245,158,11,0.35);
  --text-1: #fef3c7; --text-2: #fde68a; --text-3: #d6b874;
  --accent: #f59e0b; --accent-2: #fbbf24; --accent-glow: rgba(245,158,11,0.25); --accent-ink: #1a1200;
  --glass-bg: #1c1600; --glass-border: rgba(245,158,11,0.25);
  --card-shadow: 0 2px 10px rgba(0,0,0,0.4), 0 12px 34px rgba(245,158,11,0.12);
}

[data-theme="theme_pink"],
[data-theme="blossom"] {
  --bg: #fdf2f8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #fce7f3;
  --border: rgba(219,39,119,0.12); --border-2: rgba(219,39,119,0.24);
  --text-1: #500724; --text-2: #831843; --text-3: #9d174d;
  --accent: #db2777; --accent-2: #ec4899; --accent-glow: rgba(219,39,119,0.22); --accent-ink: #ffffff;
  --glass-bg: #ffffff; --glass-border: rgba(219,39,119,0.18);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

[data-theme="sunshine"] {
  --bg: #fffbeb; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #fef3c7;
  --border: rgba(217,119,6,0.14); --border-2: rgba(217,119,6,0.26);
  --text-1: #3b1f00; --text-2: #78350f; --text-3: #92400e;
  --accent: #d97706; --accent-2: #f59e0b; --accent-glow: rgba(217,119,6,0.22); --accent-ink: #ffffff;
  --glass-bg: #ffffff; --glass-border: rgba(217,119,6,0.18);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

/* Force cream/amber hero background on ALL light-family themes so the hero
   looks consistent across the palette family. */
html[data-theme="light"] .mk-hero,
html[data-theme="sunshine"] .mk-hero {
  background: linear-gradient(180deg, #fff7ea 0%, #faf2df 100%);
  border-color: rgba(253, 176, 61, 0.25);
}
html[data-theme="candy"] .mk-hero,
html[data-theme="theme_pink"] .mk-hero { background: linear-gradient(180deg, #fff0f5 0%, #fce7f3 100%); border-color: rgba(219,39,119,0.2); }
html[data-theme="sky"] .mk-hero { background: linear-gradient(180deg, #f0f8ff 0%, #dbeafe 100%); border-color: rgba(14,165,233,0.2); }
html[data-theme="mint"] .mk-hero { background: linear-gradient(180deg, #f0fff8 0%, #d1fae5 100%); border-color: rgba(16,185,129,0.2); }

/* ── 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), now 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), now 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), now 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), now 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: #a070c8; /* was #9060b8 (4.34:1) - lifted to pass WCAG AA */
  --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: #fdf2f8; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #fce7f3;
  --border: rgba(219,39,119,0.12); --border-2: rgba(219,39,119,0.24);
  --text-1: #500724; --text-2: #831843; --text-3: #9d174d;
  --accent: #db2777; --accent-2: #ec4899; --accent-glow: rgba(219,39,119,0.22); --accent-ink: #ffffff;
  --glass-bg: #ffffff; --glass-border: rgba(219,39,119,0.18);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

/* ── 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);
}

/* ── SATs Superstars MAX THEME - exact match to sats-superstars-academy.pages.dev ──
   Primary: gold #d4af37 · Secondary: cyan #00e0ff · BG: near-black #010208
   Fonts: local/system stack for reliable first paint */
[data-theme="SATs Superstars"] {
  --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:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: var(--font-main);
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

/* SATs Superstars mesh/grid backdrop - subtle grid over deep bg */
html[data-theme="SATs Superstars"] 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="SATs Superstars"] body::after { display: none; }

/* Replace the amber-tinted mesh background with cool cyan glow for SATs Superstars */
html[data-theme="SATs Superstars"] 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 SATs Superstars is active */
html[data-theme="SATs Superstars"] .mk-section__title,
html[data-theme="SATs Superstars"] .k2s-section-label,
html[data-theme="SATs Superstars"] .chip,
html[data-theme="SATs Superstars"] .hud-brackets { letter-spacing: 0.08em; text-transform: uppercase; }
html[data-theme="SATs Superstars"] .btn,
html[data-theme="SATs Superstars"] .k2s-login-btn,
html[data-theme="SATs Superstars"] .k2s-role-btn { border-radius: 6px; }
html[data-theme="SATs Superstars"] .card,
html[data-theme="SATs Superstars"] .glass-card { border-radius: 10px; }
html[data-theme="SATs Superstars"] .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 */
  font-family: 'General Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── SVG TEXT GLOBAL FALLBACK ──────────────────────────────────────────────
   11+ NVR generators (counting cubes, counting squares, sequences, matrices,
   etc.) emit inline <text> elements without font-family. If 'General Sans'
   is still loading, browsers fall back to a serif (Times) which makes
   number labels and option letters render visibly inconsistent inside
   shape grids. Setting a body-font fallback here means SVG text always
   matches the rest of the question - even before webfonts resolve. */
.question-text svg text,
.exam-stage svg text,
.k2s-card svg text,
svg.q-figure text,
svg.q-options text {
  font-family: 'General Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* 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; }

.exam-progress-strip {
  display: flex;
  gap: 4px;
  margin-top: 14px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.exam-progress-dot {
  flex: 0 0 44px;
  min-width: 44px;
  max-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: transform .15s ease, background .15s ease;
}

.exam-progress-dot::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--dot-bg, var(--surface-2));
}

.exam-progress-dot:hover,
.exam-progress-dot:focus-visible {
  background: var(--surface-2);
}

.exam-progress-dot:focus-visible::after {
  height: 10px;
}

@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; }
}

/* ============================================================================
   SATs Superstars MAX 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 - removed v72 (dead CSS; see app.js renderHomeFeatures removal) ── */

/* ── 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: 100% !important;
    max-width: 100% !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 0.3s ease;
    /* Shadow only when the drawer is open - otherwise the off-screen drawer's
       heavy shadow bleeds a dark vignette onto the left edge of the content. */
    box-shadow: none;
    z-index: 2000;
    width: 280px !important;
  }
  #sidebar.sidebar-open { transform: translateX(0); box-shadow: 20px 0 60px rgba(0,0,0,0.5); }

  #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, #sats-superstars-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);
}

/* Transition 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 (SATs Superstars MAX 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;
}

/* Final skip-link contract: fully hidden offscreen until focused, then a
   WCAG-friendly 44px target for keyboard/touch users. */
.skip-to-content {
  top: -72px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
}
.skip-to-content:focus {
  top: max(8px, env(safe-area-inset-top));
}

/* 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 - let content breathe into the available space. Previously we
   capped at 1280px for readability, but with the 260px sidebar that left a
   huge dead zone on wide monitors. Now we cap at 1600px and add 32px side
   padding so the dashboard actually uses the page. */
@media (min-width: 1440px) {
  .stagger, main, #content { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 20px !important; padding-right: 20px !important; }
}
@media (min-width: 1920px) {
  .stagger, main, #content { max-width: none !important; padding-left: 28px !important; padding-right: 28px !important; }
}

/* ── 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, .sats-superstars-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(16px, 2.2vw, 24px);
  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: 12px;
}
[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: 14px 0 8px;
  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%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  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%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  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; }

/* ── Hero + Tactical HUD 2-col row ─────────────────────────────────────── */
/* Strong class-based rule (with !important) to beat any stale inline style
   or theme override. The inline style on the rendered element uses the same
   grid template, but this guarantees it wins. */
.mk-hero-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: stretch !important;
  margin-bottom: 20px !important;
}
/* Cancel .mk-hero's own margin-bottom when it lives inside the new row
   (otherwise the hero pushes the section below the HUD). */
.mk-hero-row > .mk-hero { margin-bottom: 0 !important; }
.mk-hero-hud { align-self: stretch; }
.mk-hero-hud > .mk-stat { height: 100%; }

/* Collapse to single column only on genuine tablet/phone widths. Keep the
   2-col layout all the way down to narrow laptops so we don't lose the HUD
   on a 1280px MacBook Air. */
@media (max-width: 820px) {
  .mk-hero-row { grid-template-columns: 1fr !important; }
  .mk-hero-hud { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  .mk-hero-hud { grid-template-columns: 1fr !important; }
}
@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-mode hero background: soft cream gradient + amber border so the
   dashboard hero visually matches the landing + sign-in pages. */
html[data-theme="light"] .mk-hero {
  background: linear-gradient(180deg, #fff7ea 0%, #faf2df 100%) !important;
  border-color: rgba(253, 176, 61, 0.28) !important;
}

/* ── 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 + General Sans 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 General Sans (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); }

/* General Sans 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 General Sans
   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 {
  font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', 'Material Icons' !important;
}
.material-symbols-outlined,
.material-symbols-sharp {
  font-family: 'Material Symbols Outlined', 'Material Symbols Rounded', 'Material Icons' !important;
}
.material-icons {
  font-family: 'Material Icons' !important;
}
.material-symbols-rounded,
.material-symbols-outlined,
.material-symbols-sharp,
.material-icons {
  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, .bnav-item { 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
   ============================================================================ */


/* ============================================================================
   POLISH BLOCK - keep the amber championship brand (SATs Superstars MAX logo
   is warm amber/gold). Previous blue REBRAND override removed 2026-04-23: the
   blue primary fought with the amber logo + "MAX" badge, producing mismatched
   branding. Only structural polish (unified cards, cleaner buttons, boot-splash
   quieting) is kept below. Theme colours cascade from the earlier amber
   [data-theme="light"|"amber"] block (~line 2234).
   ============================================================================ */

/* Success / alert / info kept here so every theme has consistent semantic tokens.
   --card-shadow is the only non-amber visual token we keep: soft slate shadow
   reads well on both cream (light) and graphite (dark) surfaces. */
:root {
  --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);
  --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);
}

/* 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, .sats-superstars-avatar-wrap,
.energy-bar-fill, .token-badge,
[class*="glow"] {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Remove pulse-glow animation from SATs Superstars MAX avatar and all pulse elements */
.pulse-glow, .sats-superstars-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
   ============================================================================ */

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

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

/* ── TYPOGRAPHY ── */
html[data-theme="SATs Superstars"] body {
  font-family: 'General Sans', 'General Sans', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.005em;
}
html[data-theme="SATs Superstars"] h1,
html[data-theme="SATs Superstars"] h2,
html[data-theme="SATs Superstars"] .mk-hero__title,
html[data-theme="SATs Superstars"] .hero-title {
  font-family: var(--font-heading), 'General Sans', sans-serif;
  letter-spacing: 0.01em;
}
html[data-theme="SATs Superstars"] .mk-section__title,
html[data-theme="SATs Superstars"] .section-title,
html[data-theme="SATs Superstars"] .k2s-section-label,
html[data-theme="SATs Superstars"] .sidebar-heading,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .btn,
html[data-theme="SATs Superstars"] .btn-deck,
html[data-theme="SATs Superstars"] 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="SATs Superstars"] .btn-primary,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .btn-primary:hover,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .btn-ghost:hover {
  background: rgba(212,175,55,0.1) !important;
  border-color: rgba(212,175,55,0.50) !important;
}
html[data-theme="SATs Superstars"] .btn-success {
  background: oklch(0.76 0.17 150) !important;
  color: oklch(0.16 0.04 150) !important;
}
html[data-theme="SATs Superstars"] .btn-danger {
  background: oklch(0.66 0.22 27) !important;
  color: #fff !important;
}

/* ── CARDS ── */
html[data-theme="SATs Superstars"] .card,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .card:hover {
  border-color: rgba(212,175,55,0.35) !important;
  transform: translateY(-2px);
}

/* ── INPUTS ── */
html[data-theme="SATs Superstars"] input[type="text"],
html[data-theme="SATs Superstars"] input[type="email"],
html[data-theme="SATs Superstars"] input[type="password"],
html[data-theme="SATs Superstars"] input[type="number"],
html[data-theme="SATs Superstars"] textarea,
html[data-theme="SATs Superstars"] 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="SATs Superstars"] input:focus,
html[data-theme="SATs Superstars"] textarea:focus,
html[data-theme="SATs Superstars"] select:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.20) !important;
}

/* ── SIDEBAR ── */
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .sidebar-logo strong {
  color: #d4af37;
}
html[data-theme="SATs Superstars"] .nav-item.active {
  background: rgba(212,175,55,0.12) !important;
  color: #d4af37 !important;
}

/* ── TOPBAR ── */
html[data-theme="SATs Superstars"] .topbar,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .chip,
html[data-theme="SATs Superstars"] .pill,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .progress-bar {
  background: oklch(0.22 0.035 250 / 0.6) !important;
  border-radius: 2px !important;
  height: 6px;
  overflow: hidden;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .hud-brackets::before,
html[data-theme="SATs Superstars"] .hud-brackets::after,
html[data-theme="SATs Superstars"] .hud-panel::before,
html[data-theme="SATs Superstars"] .hud-panel::after {
  border-color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .gold-shimmer::after {
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.25), transparent) !important;
}

/* ── MK DASHBOARD SECTIONS ── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-hero > * { position: relative; }

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

/* ── BADGES / XP ── */
html[data-theme="SATs Superstars"] .xp-badge,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .spinner,
html[data-theme="SATs Superstars"] .loader {
  border-color: rgba(212,175,55,0.20) !important;
  border-top-color: #d4af37 !important;
}

/* ── MODALS ── */
html[data-theme="SATs Superstars"] .modal,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .question-card,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .answer-option {
  border: 1px solid rgba(212,175,55,0.18) !important;
  border-radius: 6px !important;
}
html[data-theme="SATs Superstars"] .answer-option:hover {
  border-color: #d4af37 !important;
  background: rgba(212,175,55,0.08) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html[data-theme="SATs Superstars"] ::-webkit-scrollbar-track {
  background: oklch(0.14 0.03 252);
}
html[data-theme="SATs Superstars"] ::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.20);
  border-radius: 4px;
}
html[data-theme="SATs Superstars"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(212,175,55,0.40);
}

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

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


/* ============================================================================
   SATs Superstars - MOTION + LIFE
   ============================================================================ */

html[data-theme="SATs Superstars"] #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: sats-superstars-aurora 28s ease-in-out infinite alternate;
  filter: blur(60px);
}
@keyframes sats-superstars-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="SATs Superstars"] .card,
html[data-theme="SATs Superstars"] .glass-card,
html[data-theme="SATs Superstars"] .mk-section {
  animation: sats-superstars-rise 0.55s cubic-bezier(0.2,0.8,0.2,1) both;
}
@keyframes sats-superstars-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
html[data-theme="SATs Superstars"] .card:nth-child(1){animation-delay:.04s}
html[data-theme="SATs Superstars"] .card:nth-child(2){animation-delay:.08s}
html[data-theme="SATs Superstars"] .card:nth-child(3){animation-delay:.12s}
html[data-theme="SATs Superstars"] .card:nth-child(4){animation-delay:.16s}
html[data-theme="SATs Superstars"] .card:nth-child(5){animation-delay:.20s}
html[data-theme="SATs Superstars"] .card:nth-child(6){animation-delay:.24s}

html[data-theme="SATs Superstars"] .btn-primary,
html[data-theme="SATs Superstars"] .btn-deck { position: relative; overflow: hidden; }
html[data-theme="SATs Superstars"] .btn-primary::before,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .btn-primary:hover::before,
html[data-theme="SATs Superstars"] .btn-deck:hover::before { left: 120%; }

html[data-theme="SATs Superstars"] .logo-dot,
html[data-theme="SATs Superstars"] .pulse-dot {
  animation: sats-superstars-pulse 2.4s ease-in-out infinite;
}
@keyframes sats-superstars-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="SATs Superstars"] .mk-section__title,
html[data-theme="SATs Superstars"] .section-title {
  animation: sats-superstars-fade-right 0.5s ease-out both;
}
@keyframes sats-superstars-fade-right {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

html[data-theme="SATs Superstars"] .card:hover,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .nav-item:hover { padding-left: 14px; color: #d4af37 !important; }

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

html[data-theme="SATs Superstars"] .xp-badge,
html[data-theme="SATs Superstars"] .streak-badge {
  animation: sats-superstars-breathe 3.2s ease-in-out infinite;
}
@keyframes sats-superstars-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="SATs Superstars"] .big-num,
html[data-theme="SATs Superstars"] .stat-value,
html[data-theme="SATs Superstars"] .mk-stat__value {
  animation: sats-superstars-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes sats-superstars-pop {
  0%   { opacity: 0; transform: scale(0.8); }
  60%  { opacity: 1; transform: scale(1.06); }
  100% { transform: scale(1); }
}

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

html[data-theme="SATs Superstars"] .answer-option.correct {
  animation: sats-superstars-correct 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
html[data-theme="SATs Superstars"] .answer-option.wrong {
  animation: sats-superstars-wrong 0.4s ease-out;
}
@keyframes sats-superstars-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 sats-superstars-wrong {
  0%,100% { transform: translateX(0); }
  25%     { transform: translateX(-6px); }
  75%     { transform: translateX(6px); }
}

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

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

/* ============================================================================
   SATs Superstars - PER-SCREEN LAYOUT TRANSFORMS (cascade via shared class hooks)
   ============================================================================ */

/* ── MK HERO - data-telemetry mission brief ── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-hero__eyebrow {
  font-family: 'Geist 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="SATs Superstars"] .mk-hero__title {
  font-family: 'Boldonse', 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;
  color: #d4af37 !important;
  margin: 0 0 10px !important;
}
html[data-theme="SATs Superstars"] .mk-hero__sub {
  font-size: 14px !important;
  color: #cbd5e1 !important;
  font-family: 'General Sans', var(--font-main) !important;
}

/* ── SECTION TITLE ROW - corner ticks + divider ── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-section::before {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 40px;
  height: 2px;
  background: #d4af37;
}
html[data-theme="SATs Superstars"] .mk-section__title {
  font-family: 'Geist 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="SATs Superstars"] .mk-section__title::before {
  content: counter(sats-superstars-sec, decimal-leading-zero) ' ›';
  counter-increment: sats-superstars-sec;
  color: rgba(212,175,55,0.55);
  font-weight: 800;
}
html[data-theme="SATs Superstars"] #content { counter-reset: sats-superstars-sec; }
html[data-theme="SATs Superstars"] .mk-section__meta {
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-stat__icon {
  border-radius: 8px !important;
  width: 40px !important; height: 40px !important;
}
html[data-theme="SATs Superstars"] .mk-stat__label {
  font-family: 'Geist 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="SATs Superstars"] .mk-stat__value {
  font-family: 'Boldonse', 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="SATs Superstars"] .mk-stat__unit {
  font-size: 14px !important;
  color: #94a3b8 !important;
  font-weight: 500;
  margin-left: 4px;
}

/* ── PROGRESS BARS ── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-subject,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-subject:hover,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-subject__title,
html[data-theme="SATs Superstars"] .mk-tile__title {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f8fafc !important;
}
html[data-theme="SATs Superstars"] .mk-tile__sub {
  font-size: 13px !important;
  color: #94a3b8 !important;
}
html[data-theme="SATs Superstars"] .mk-tile__arrow {
  color: #d4af37 !important;
  transition: transform 0.18s;
}
html[data-theme="SATs Superstars"] .mk-tile:hover .mk-tile__arrow { transform: translateX(6px); }

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

/* ── LIST ROWS (launch pad / resource centre) ── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-list__row:last-child { border-bottom: none !important; }
html[data-theme="SATs Superstars"] .mk-list__row:hover {
  background: rgba(212,175,55,0.05) !important;
  padding-left: 26px !important;
}
html[data-theme="SATs Superstars"] .mk-list__icon {
  border-radius: 8px !important;
  width: 38px !important; height: 38px !important;
}
html[data-theme="SATs Superstars"] .mk-list__title {
  font-family: 'General Sans', var(--font-main) !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  font-size: 15px !important;
}
html[data-theme="SATs Superstars"] .mk-list__sub {
  font-size: 12px !important;
  color: #94a3b8 !important;
  font-family: 'Geist Mono', var(--font-mono) !important;
  letter-spacing: 0.04em;
}

/* ── TERMINAL / CHIP ── */
html[data-theme="SATs Superstars"] .mk-terminal,
html[data-theme="SATs Superstars"] .mk-chip {
  font-family: 'Geist 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="SATs Superstars"] .mk-cta,
html[data-theme="SATs Superstars"] .mk-cta--ghost {
  border-radius: 6px !important;
  font-family: 'General Sans', var(--font-main) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-cta--ghost {
  background: transparent !important;
  border: 1px solid rgba(212,175,55,0.28) !important;
  color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .hud-brackets::before,
html[data-theme="SATs Superstars"] .hud-brackets::after {
  border-color: #d4af37 !important;
}

/* ── BADGE PILLS ── */
html[data-theme="SATs Superstars"] .badge-pill {
  padding: 4px 10px !important;
  border-radius: 3px !important;
  font-family: 'Geist 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="SATs Superstars"] .option,
html[data-theme="SATs Superstars"] .answer-option,
html[data-theme="SATs Superstars"] .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: 'General Sans', var(--font-main) !important;
  font-size: 15px !important;
  color: #f8fafc !important;
  transition: all 0.18s ease;
  cursor: pointer;
}
html[data-theme="SATs Superstars"] .option:hover,
html[data-theme="SATs Superstars"] .answer-option:hover,
html[data-theme="SATs Superstars"] .mcq-option:hover {
  border-color: #d4af37 !important;
  background: rgba(212,175,55,0.08) !important;
  transform: translateX(4px);
}

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

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

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

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

/* ── SIDEBAR NAV LABELS ── */
html[data-theme="SATs Superstars"] .sidebar-heading {
  font-family: 'Geist 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="SATs Superstars"] .modal-backdrop,
html[data-theme="SATs Superstars"] .dialog-backdrop {
  background: rgba(1,2,8,0.82) !important;
  backdrop-filter: blur(8px);
}
html[data-theme="SATs Superstars"] .modal,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .k2s-stat-card,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .k2s-stat-value,
html[data-theme="SATs Superstars"] .k2s-sc-stat-val {
  font-family: 'Boldonse', var(--font-heading) !important;
  color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .k2s-stat-label,
html[data-theme="SATs Superstars"] .k2s-sc-stat-lbl,
html[data-theme="SATs Superstars"] .k2s-section-label {
  font-family: 'Geist Mono', var(--font-mono) !important;
  color: #94a3b8 !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .flashcard,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .toast,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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: sats-superstars-skeleton 1.4s ease-in-out infinite !important;
}
@keyframes sats-superstars-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   SATs Superstars - 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="SATs Superstars"] .mk-hero,
html[data-theme="SATs Superstars"] .k2s-login-panel,
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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: sats-superstars-scan-sweep 6s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes sats-superstars-scan-sweep {
  0%   { left: -30%; }
  100% { left: 130%; }
}

/* Data-readout corner labels (tiny 9px monospace bottom-corner HUD labels) */
html[data-theme="SATs Superstars"] .card,
html[data-theme="SATs Superstars"] .mk-tile,
html[data-theme="SATs Superstars"] .mk-subject,
html[data-theme="SATs Superstars"] .mk-stat,
html[data-theme="SATs Superstars"] .hud-panel {
  position: relative;
}
html[data-theme="SATs Superstars"] .card::after,
html[data-theme="SATs Superstars"] .mk-tile::after,
html[data-theme="SATs Superstars"] .mk-subject::after,
html[data-theme="SATs Superstars"] .mk-stat::after {
  content: attr(data-readout, 'REC › 001');
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: 'Geist 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="SATs Superstars"] .mk-hero > *:first-child,
html[data-theme="SATs Superstars"] .mk-stat > *:first-child {
  position: relative;
}
html[data-theme="SATs Superstars"] .mk-hero::before,
html[data-theme="SATs Superstars"] .mk-stat > *:first-child::before {
  /* already used for scan divider on hero - skip */
}

/* Top scan-divider on all cards */
html[data-theme="SATs Superstars"] .card {
  position: relative;
  overflow: visible;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-hero {
  --tick: 14px;
  --tickw: 1.5px;
  --tickc: rgba(212,175,55,0.55);
}
html[data-theme="SATs Superstars"] .mk-hero > .hero-tick-tl,
html[data-theme="SATs Superstars"] .mk-hero > .hero-tick-tr,
html[data-theme="SATs Superstars"] .mk-hero > .hero-tick-bl,
html[data-theme="SATs Superstars"] .mk-hero > .hero-tick-br { display: none; }

/* Gold-underline grow on subject/tile titles (like nav links on live site) */
html[data-theme="SATs Superstars"] .mk-subject__title,
html[data-theme="SATs Superstars"] .mk-tile__title {
  position: relative;
  display: inline-block;
}
html[data-theme="SATs Superstars"] .mk-subject__title::after,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-subject:hover .mk-subject__title::after,
html[data-theme="SATs Superstars"] .mk-tile:hover .mk-tile__title::after {
  width: 100%;
}

/* Corner cyan LED - top-right of every card */
html[data-theme="SATs Superstars"] .mk-tile,
html[data-theme="SATs Superstars"] .mk-subject,
html[data-theme="SATs Superstars"] .mk-stat,
html[data-theme="SATs Superstars"] .hud-panel {
  padding-top: 24px !important;
}
html[data-theme="SATs Superstars"] .mk-tile > .sats-superstars-led,
html[data-theme="SATs Superstars"] .mk-subject > .sats-superstars-led,
html[data-theme="SATs Superstars"] .mk-stat > .sats-superstars-led { display: none; }
html[data-theme="SATs Superstars"] .mk-stat > *:first-child {
  position: relative;
}
html[data-theme="SATs Superstars"] .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: sats-superstars-led 2.4s ease-in-out infinite;
  z-index: 3;
}
@keyframes sats-superstars-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="SATs Superstars"] .modal,
html[data-theme="SATs Superstars"] .dialog,
html[data-theme="SATs Superstars"] .k2s-login-panel {
  position: relative;
}
html[data-theme="SATs Superstars"] .modal::before,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] #content,
html[data-theme="SATs Superstars"] #main-content {
  position: relative;
}
html[data-theme="SATs Superstars"] #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="SATs Superstars"] #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="SATs Superstars"] #content > * { position: relative; z-index: 1; }

/* Gold nav-link underline grow - match live site nav hover */
html[data-theme="SATs Superstars"] .nav-item,
html[data-theme="SATs Superstars"] a {
  position: relative;
}
html[data-theme="SATs Superstars"] .nav-links a,
html[data-theme="SATs Superstars"] .topbar-links a {
  position: relative;
  padding-bottom: 3px;
}
html[data-theme="SATs Superstars"] .nav-links a::after,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .nav-links a:hover::after,
html[data-theme="SATs Superstars"] .topbar-links a:hover::after {
  width: 100%;
}

/* Data readout helper class pupil can apply manually */
html[data-theme="SATs Superstars"] .data-readout,
html[data-theme="SATs Superstars"] .data-readout-gold {
  font-family: 'Geist 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="SATs Superstars"] .data-readout-gold { color: rgba(212,175,55,0.6); }

/* Glass-strong helper */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .question-card,
html[data-theme="SATs Superstars"] .exam-card,
html[data-theme="SATs Superstars"] .flashcard {
  position: relative;
}
html[data-theme="SATs Superstars"] .question-card::before,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .exam-timer,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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: sats-superstars-led 1.2s ease-in-out infinite;
}

/* Login panel - add holo grid overlay (already exists in auth.css, enhance) */
html[data-theme="SATs Superstars"] .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;
}

/* ============================================================================
   SATs Superstars - SIDEBAR + TOPBAR CHROME
   ============================================================================ */

/* ── Sidebar logo block ── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .sidebar-logo-img {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
}
html[data-theme="SATs Superstars"] .sidebar-logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
html[data-theme="SATs Superstars"] .sidebar-logo-text strong {
  font-family: 'Boldonse', var(--font-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #d4af37;
  line-height: 1.1;
}
html[data-theme="SATs Superstars"] .sidebar-logo-sub {
  font-family: 'Geist 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="SATs Superstars"] .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: sats-superstars-led 2.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ── Sidebar system readout ── */
html[data-theme="SATs Superstars"] .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: 'Geist Mono', var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html[data-theme="SATs Superstars"] .sidebar-readout-label { color: #94a3b8; }
html[data-theme="SATs Superstars"] .sidebar-readout-val {
  color: #00e0ff;
  font-weight: 700;
  position: relative;
  padding-left: 12px;
}
html[data-theme="SATs Superstars"] .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: sats-superstars-led 2.4s ease-in-out infinite;
}

/* ── Sidebar nav labels ── */
html[data-theme="SATs Superstars"] .nav-label {
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .nav-item {
  padding: 10px 16px !important;
  font-family: 'General Sans', 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="SATs Superstars"] .nav-item:hover {
  background: rgba(212,175,55,0.06) !important;
  color: #d4af37 !important;
  padding-left: 22px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .nav-item .material-symbols-rounded { font-size: 20px !important; }

/* ── Sidebar footer ── */
html[data-theme="SATs Superstars"] .sidebar-footer {
  border-top: 1px solid rgba(212,175,55,0.14);
  padding: 14px 12px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .user-pill:hover {
  border-color: rgba(212,175,55,0.35) !important;
}
html[data-theme="SATs Superstars"] .user-avatar {
  background: linear-gradient(135deg, #d4af37, #c99a1e) !important;
  color: #010208 !important;
  border-radius: 6px !important;
}
html[data-theme="SATs Superstars"] .user-name {
  font-family: 'General Sans', var(--font-main) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #f8fafc !important;
}
html[data-theme="SATs Superstars"] .user-sub {
  font-family: 'Geist 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="SATs Superstars"] #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="SATs Superstars"] #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="SATs Superstars"] .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="SATs Superstars"] .hamburger-btn:hover {
  background: rgba(212,175,55,0.12) !important;
}

html[data-theme="SATs Superstars"] .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: 'Geist Mono', var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #00e0ff;
}
html[data-theme="SATs Superstars"] .topbar-status-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00e0ff;
  box-shadow: 0 0 6px rgba(0,224,255,0.7);
  animation: sats-superstars-led 1.6s ease-in-out infinite;
}

html[data-theme="SATs Superstars"] .breadcrumb {
  font-family: 'Geist 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="SATs Superstars"] .topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

html[data-theme="SATs Superstars"] .topbar-clock {
  font-family: 'Geist 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="SATs Superstars"] .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: 'Geist Mono', var(--font-mono) !important;
  font-weight: 700 !important;
}

html[data-theme="SATs Superstars"] .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="SATs Superstars"] .search-bar input {
  background: transparent !important;
  border: none !important;
  color: #f8fafc !important;
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 13px !important;
}
html[data-theme="SATs Superstars"] .search-bar input::placeholder {
  color: rgba(148,163,184,0.55) !important;
  font-family: 'Geist Mono', var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
html[data-theme="SATs Superstars"] .search-bar .material-symbols-rounded {
  color: rgba(212,175,55,0.55) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .topbar-clock { display: none !important; }
}
@media (max-width: 640px) {
  html[data-theme="SATs Superstars"] .topbar-status { display: none !important; }
}

/* ── Bottom nav ── */
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .bnav-item {
  color: #94a3b8 !important;
  font-family: 'Geist Mono', var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html[data-theme="SATs Superstars"] .bnav-item.active {
  color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .bnav-item.active .material-symbols-rounded {
  filter: drop-shadow(0 0 6px rgba(212,175,55,0.5));
}

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

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

/* Section headers - gold numbered labels */
html[data-theme="SATs Superstars"] .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: sats-superstars-section;
}
html[data-theme="SATs Superstars"] .mk-section__title {
  font-family: 'Boldonse', 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="SATs Superstars"] .mk-section__title::before {
  content: counter(sats-superstars-section, decimal-leading-zero) "  ";
  color: rgba(212,175,55,0.4);
  font-variant-numeric: tabular-nums;
}
html[data-theme="SATs Superstars"] .mk-section__meta {
  margin-left: auto !important;
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-hero__eyebrow {
  font-family: 'Geist 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="SATs Superstars"] .mk-hero__title {
  font-family: 'Boldonse', 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="SATs Superstars"] .mk-hero__sub {
  font-family: 'General Sans', 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="SATs Superstars"] .mk-progress {
  height: 6px !important;
  background: rgba(212,175,55,0.08) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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: sats-superstars-sweep 1.8s ease-in-out infinite;
}

/* Stat grid cards */
html[data-theme="SATs Superstars"] .mk-stat-grid {
  display: grid !important;
  gap: 12px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-stat::before {
  content: attr(data-label, "TELEMETRY");
  position: absolute; top: 8px; right: 10px;
  font-family: 'Geist Mono', var(--font-mono);
  font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(148,163,184,0.3);
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-stat__label {
  font-family: 'Geist 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="SATs Superstars"] .mk-stat__value {
  font-family: 'Boldonse', 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="SATs Superstars"] .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="SATs Superstars"] .mk-subject-grid {
  display: grid !important;
  gap: 14px !important;
  margin-bottom: 8px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-subject__title {
  font-family: 'Boldonse', 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="SATs Superstars"] .mk-tile__foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html[data-theme="SATs Superstars"] .mk-tile__foot-meta {
  font-family: 'Geist 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="SATs Superstars"] .mk-tile__foot-val {
  font-family: 'Boldonse', 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="SATs Superstars"] .mk-tile-grid {
  display: grid !important;
  gap: 12px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-tile__title {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
}
html[data-theme="SATs Superstars"] .mk-tile__sub {
  font-size: 12px !important;
  color: rgba(148,163,184,0.6) !important;
  margin: 0 !important;
  font-family: 'General Sans', var(--font-main) !important;
  line-height: 1.4 !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-tile:hover .mk-tile__arrow {
  transform: translateX(4px) !important;
  color: #d4af37 !important;
}

/* Launch Pad + Resource Center list rows */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-list__row:last-child { border-bottom: none !important; }
html[data-theme="SATs Superstars"] .mk-list__row:hover {
  background: rgba(212,175,55,0.05) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-list__body { flex: 1; min-width: 0; }
html[data-theme="SATs Superstars"] .mk-list__title {
  font-family: 'General Sans', 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="SATs Superstars"] .mk-list__sub {
  font-size: 11px !important;
  color: rgba(148,163,184,0.55) !important;
  font-family: 'Geist Mono', var(--font-mono) !important;
  letter-spacing: 0.04em !important;
  margin-top: 1px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .mk-list__row:hover .mk-list__right .material-symbols-rounded {
  color: #d4af37 !important;
  transform: translateX(2px) !important;
}

/* HUD panels (countdown) */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .hud-brackets::before,
html[data-theme="SATs Superstars"] .hud-brackets::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border-color: rgba(212,175,55,0.45);
  border-style: solid;
}
html[data-theme="SATs Superstars"] .hud-brackets::before {
  top: 6px; left: 6px;
  border-width: 1px 0 0 1px;
}
html[data-theme="SATs Superstars"] .hud-brackets::after {
  bottom: 6px; right: 6px;
  border-width: 0 1px 1px 0;
}

/* Terminal label */
html[data-theme="SATs Superstars"] .mk-terminal {
  display: inline-block;
  font-family: 'Geist 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="SATs Superstars"] .mk-chip,
html[data-theme="SATs Superstars"] .badge-pill {
  font-family: 'Geist 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="SATs Superstars"] .mk-cta {
  font-family: 'Boldonse', 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="SATs Superstars"] .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="SATs Superstars"] .mk-cta--ghost {
  background: rgba(212,175,55,0.06) !important;
  color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .mk-cta--ghost:hover {
  background: rgba(212,175,55,0.15) !important;
  box-shadow: none !important;
}

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

/* ── 3. TOPICS GRID ─────────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .topic-grid,
html[data-theme="SATs Superstars"] [class*="topics-grid"],
html[data-theme="SATs Superstars"] .topics-list {
  display: grid !important;
  gap: 10px !important;
}
html[data-theme="SATs Superstars"] .topic-card,
html[data-theme="SATs Superstars"] .topic-btn,
html[data-theme="SATs Superstars"] [class*="topic-item"],
html[data-theme="SATs Superstars"] 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: 'General Sans', 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="SATs Superstars"] 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="SATs Superstars"] 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="SATs Superstars"] .topic-acc-badge {
  margin-left: auto;
  font-family: 'Geist 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="SATs Superstars"] .q-shell,
html[data-theme="SATs Superstars"] .question-shell,
html[data-theme="SATs Superstars"] #question-shell {
  max-width: 780px !important;
  margin: 0 auto !important;
}

/* Question card */
html[data-theme="SATs Superstars"] .q-card,
html[data-theme="SATs Superstars"] .question-card,
html[data-theme="SATs Superstars"] .card.q-card,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .q-text,
html[data-theme="SATs Superstars"] .question-text {
  font-family: 'General Sans', 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="SATs Superstars"] .answer-opts,
html[data-theme="SATs Superstars"] .answer-options,
html[data-theme="SATs Superstars"] .mk-answer-grid {
  display: grid !important;
  gap: 10px !important;
  margin-top: 20px !important;
}
html[data-theme="SATs Superstars"] .answer-opt,
html[data-theme="SATs Superstars"] button.answer-btn,
html[data-theme="SATs Superstars"] [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: 'General Sans', 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="SATs Superstars"] .answer-opt:hover:not(:disabled),
html[data-theme="SATs Superstars"] 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="SATs Superstars"] .answer-opt.correct,
html[data-theme="SATs Superstars"] button.answer-btn.correct,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .answer-opt.wrong,
html[data-theme="SATs Superstars"] button.answer-btn.wrong,
html[data-theme="SATs Superstars"] [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: sats-superstars-shake 0.38s ease !important;
}

/* Option letter badge */
html[data-theme="SATs Superstars"] .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: 'Geist 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="SATs Superstars"] .answer-input,
html[data-theme="SATs Superstars"] input[name="answer"],
html[data-theme="SATs Superstars"] #answer-input,
html[data-theme="SATs Superstars"] .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: 'General Sans', 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="SATs Superstars"] .answer-input:focus,
html[data-theme="SATs Superstars"] input[name="answer"]:focus,
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .q-submit,
html[data-theme="SATs Superstars"] #submit-btn,
html[data-theme="SATs Superstars"] button.check-btn,
html[data-theme="SATs Superstars"] [data-k2s-click="submitAnswer"] {
  background: linear-gradient(135deg, #d4af37, #f0d060) !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  font-family: 'Boldonse', 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="SATs Superstars"] .q-submit:hover,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .feedback-correct,
html[data-theme="SATs Superstars"] .result-correct,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .feedback-wrong,
html[data-theme="SATs Superstars"] .result-wrong,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .q-progress-bar,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .q-progress-bar__fill,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .xp-pop,
html[data-theme="SATs Superstars"] .combo-pop {
  font-family: 'Boldonse', var(--font-heading) !important;
  color: #d4af37 !important;
  text-shadow: 0 0 12px rgba(212,175,55,0.6) !important;
  animation: sats-superstars-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
}

/* ── 5. EXAM RUNNER ─────────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .exam-header,
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .exam-timer,
html[data-theme="SATs Superstars"] #exam-timer {
  font-family: 'Geist 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="SATs Superstars"] .exam-timer.warning {
  color: #f97316 !important;
  border-color: rgba(249,115,22,0.35) !important;
  animation: sats-superstars-blink-warn 1s ease-in-out infinite !important;
}
@keyframes sats-superstars-blink-warn {
  0%,100% { opacity: 1; } 50% { opacity: 0.5; }
}
html[data-theme="SATs Superstars"] .exam-q-counter {
  font-family: 'Geist 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="SATs Superstars"] .exam-q-counter strong {
  color: #d4af37 !important;
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 16px !important;
}

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

/* Marks / point indicator */
html[data-theme="SATs Superstars"] .q-marks,
html[data-theme="SATs Superstars"] .marks-badge {
  font-family: 'Geist 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="SATs Superstars"] .results-hero,
html[data-theme="SATs Superstars"] .exam-results-header,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .results-score,
html[data-theme="SATs Superstars"] .score-big,
html[data-theme="SATs Superstars"] [class*="score-display"] {
  font-family: 'Boldonse', 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="SATs Superstars"] .results-grade,
html[data-theme="SATs Superstars"] .grade-label {
  font-family: 'Geist 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="SATs Superstars"] .results-breakdown,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .breakdown-val {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #f1f5f9 !important;
  letter-spacing: -0.02em !important;
}
html[data-theme="SATs Superstars"] .breakdown-lbl {
  font-family: 'Geist 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="SATs Superstars"] .q-review-row,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .q-review-row.correct { border-color: rgba(16,185,129,0.2) !important; }
html[data-theme="SATs Superstars"] .q-review-row.wrong   { border-color: rgba(239,68,68,0.18) !important; }

/* ── 7. PROGRESS SCREEN ─────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .progress-xp-ring {
  width: 140px; height: 140px;
  margin: 0 auto 20px;
}
html[data-theme="SATs Superstars"] .progress-xp-ring circle[class*="track"] {
  stroke: rgba(212,175,55,0.1) !important;
}
html[data-theme="SATs Superstars"] .progress-xp-ring circle[class*="fill"],
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .progress-stat__n {
  font-family: 'Boldonse', 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="SATs Superstars"] .progress-stat__lbl {
  font-family: 'Geist 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="SATs Superstars"] .topic-table,
html[data-theme="SATs Superstars"] table.progress-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}
html[data-theme="SATs Superstars"] .topic-table th,
html[data-theme="SATs Superstars"] table.progress-table th {
  font-family: 'Geist 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="SATs Superstars"] .topic-table td,
html[data-theme="SATs Superstars"] table.progress-table td {
  padding: 11px 12px !important;
  border-bottom: 1px solid rgba(212,175,55,0.05) !important;
  color: #e2e8f0 !important;
  font-family: 'General Sans', var(--font-main) !important;
}
html[data-theme="SATs Superstars"] .topic-table tr:hover td,
html[data-theme="SATs Superstars"] table.progress-table tr:hover td {
  background: rgba(212,175,55,0.04) !important;
}

/* ── 8. ACHIEVEMENTS SCREEN ─────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .achievement-grid,
html[data-theme="SATs Superstars"] .badge-grid,
html[data-theme="SATs Superstars"] [class*="achievement-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 12px !important;
}
html[data-theme="SATs Superstars"] .achievement-card,
html[data-theme="SATs Superstars"] .badge-card,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .achievement-card.locked {
  opacity: 0.4 !important;
  filter: grayscale(0.6) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .achievement-card .ach-name {
  font-family: 'Boldonse', 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="SATs Superstars"] .achievement-card .ach-desc {
  font-size: 11px !important;
  color: rgba(148,163,184,0.55) !important;
  line-height: 1.4 !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .rank-display,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .rank-name {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* ── 9. MISTAKES REVIEW ──────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .mistake-card,
html[data-theme="SATs Superstars"] [class*="mistake-row"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .mistake-card:hover {
  border-color: rgba(239,68,68,0.4) !important;
}
html[data-theme="SATs Superstars"] .mistake-resolved {
  border-color: rgba(16,185,129,0.25) !important;
  opacity: 0.6 !important;
}
html[data-theme="SATs Superstars"] .mistake-resolved::before {
  background: linear-gradient(180deg, rgba(16,185,129,0.8), rgba(16,185,129,0.2)) !important;
}
html[data-theme="SATs Superstars"] .mistake-q-text {
  font-family: 'General Sans', 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="SATs Superstars"] .mistake-correct-ans {
  font-family: 'Geist 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="SATs Superstars"] .mistake-your-ans {
  font-family: 'Geist 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="SATs Superstars"] .notes-list,
html[data-theme="SATs Superstars"] [class*="revision-notes"] {
  display: grid !important;
  gap: 10px !important;
}
html[data-theme="SATs Superstars"] .note-card,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .note-card:hover {
  border-color: rgba(212,175,55,0.35) !important;
  transform: translateY(-2px) !important;
}
html[data-theme="SATs Superstars"] .note-title {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin-bottom: 6px !important;
}
html[data-theme="SATs Superstars"] .note-body {
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 13px !important;
  color: rgba(148,163,184,0.75) !important;
  line-height: 1.55 !important;
}
html[data-theme="SATs Superstars"] .note-editor,
html[data-theme="SATs Superstars"] textarea[class*="note"],
html[data-theme="SATs Superstars"] .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: 'General Sans', 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="SATs Superstars"] .note-editor:focus,
html[data-theme="SATs Superstars"] 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="SATs Superstars"] .flashcard-scene,
html[data-theme="SATs Superstars"] [class*="flashcard-scene"],
html[data-theme="SATs Superstars"] .flashcard-container {
  perspective: 1000px !important;
  margin: 0 auto !important;
}
html[data-theme="SATs Superstars"] .flashcard,
html[data-theme="SATs Superstars"] [class*="flash-card"],
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .flashcard::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, #00e0ff, transparent);
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .flashcard__front,
html[data-theme="SATs Superstars"] .fc-front {
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #f1f5f9 !important;
  line-height: 1.5 !important;
}
html[data-theme="SATs Superstars"] .flashcard__back,
html[data-theme="SATs Superstars"] .fc-back {
  font-family: 'Geist 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="SATs Superstars"] .fc-quality-btns {
  display: flex !important;
  gap: 8px !important;
  justify-content: center !important;
  margin-top: 20px !important;
  flex-wrap: wrap !important;
}
html[data-theme="SATs Superstars"] .fc-q-btn {
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .fc-q-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.2) !important;
}

/* ── 12. DAILY / FIVE-A-DAY ─────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .daily-hero,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .daily-streak-display {
  font-family: 'Boldonse', 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="SATs Superstars"] .five-a-day-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin: 20px 0 !important;
}
html[data-theme="SATs Superstars"] .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: 'Boldonse', 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="SATs Superstars"] .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="SATs Superstars"] .speed-header,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .speed-timer,
html[data-theme="SATs Superstars"] .timed-timer {
  font-family: 'Geist 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="SATs Superstars"] .speed-score,
html[data-theme="SATs Superstars"] .timed-score {
  font-family: 'Boldonse', 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="SATs Superstars"] .tt-grid,
html[data-theme="SATs Superstars"] .times-table-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)) !important;
  gap: 8px !important;
}
html[data-theme="SATs Superstars"] .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: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .speed-results,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .bookmark-card,
html[data-theme="SATs Superstars"] [class*="bookmark-item"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .bookmark-card:hover {
  border-color: rgba(212,175,55,0.35) !important;
}
html[data-theme="SATs Superstars"] .bookmark-icon {
  color: #d4af37 !important;
  font-size: 20px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
html[data-theme="SATs Superstars"] .bookmark-q-text {
  font-family: 'General Sans', 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="SATs Superstars"] .bookmark-answer {
  font-family: 'Geist Mono', var(--font-mono) !important;
  font-size: 11px !important;
  color: #d4af37 !important;
  opacity: 0.7 !important;
  margin-top: 6px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .bookmark-remove-btn:hover {
  background: rgba(239,68,68,0.15) !important;
  border-color: rgba(239,68,68,0.4) !important;
}

/* ── 15. DR SATs Superstars MAX CHAT ─────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .ai-chat-wrap,
html[data-theme="SATs Superstars"] #ai-chat-container,
html[data-theme="SATs Superstars"] [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: 1200px !important;
  margin: 0 auto !important;
}
html[data-theme="SATs Superstars"] .chat-header,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .chat-avatar,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .chat-name {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
}
html[data-theme="SATs Superstars"] .chat-status {
  font-family: 'Geist 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="SATs Superstars"] .chat-messages,
html[data-theme="SATs Superstars"] .ai-messages,
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .chat-msg,
html[data-theme="SATs Superstars"] [class*="chat-message"] {
  max-width: 80% !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  animation: sats-superstars-rise 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
html[data-theme="SATs Superstars"] .chat-msg.user,
html[data-theme="SATs Superstars"] [class*="chat-message"].user,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .chat-msg.assistant,
html[data-theme="SATs Superstars"] [class*="chat-message"].assistant,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .chat-input-bar,
html[data-theme="SATs Superstars"] .ai-input-row,
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .chat-input,
html[data-theme="SATs Superstars"] #chat-input,
html[data-theme="SATs Superstars"] 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: 'General Sans', 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="SATs Superstars"] .chat-input:focus,
html[data-theme="SATs Superstars"] #chat-input:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}
html[data-theme="SATs Superstars"] .chat-send-btn,
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .chat-send-btn:hover,
html[data-theme="SATs Superstars"] #chat-send:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(212,175,55,0.4) !important;
}

/* Typing indicator */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .chat-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(212,175,55,0.5);
  animation: sats-superstars-bounce 1.2s ease-in-out infinite;
}
html[data-theme="SATs Superstars"] .chat-typing span:nth-child(2) { animation-delay: 0.2s; }
html[data-theme="SATs Superstars"] .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sats-superstars-bounce {
  0%,80%,100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-6px); opacity: 1; }
}

/* ── 16. LEADERBOARD ─────────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .leaderboard-table,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .lb-row,
html[data-theme="SATs Superstars"] [class*="leaderboard-row"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .lb-row:last-child { border-bottom: none !important; }
html[data-theme="SATs Superstars"] .lb-row:hover { background: rgba(212,175,55,0.04) !important; }
html[data-theme="SATs Superstars"] .lb-row.lb-mine {
  background: rgba(212,175,55,0.07) !important;
  border-color: rgba(212,175,55,0.18) !important;
}
html[data-theme="SATs Superstars"] .lb-rank {
  font-family: 'Boldonse', 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="SATs Superstars"] .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="SATs Superstars"] .lb-row:nth-child(2) .lb-rank { color: #94a3b8 !important; }
html[data-theme="SATs Superstars"] .lb-row:nth-child(3) .lb-rank { color: #f97316 !important; }
html[data-theme="SATs Superstars"] .lb-name {
  flex: 1 !important;
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
}
html[data-theme="SATs Superstars"] .lb-xp {
  font-family: 'Geist 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="SATs Superstars"] .settings-section,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .settings-row,
html[data-theme="SATs Superstars"] [class*="setting-row"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .settings-row:last-child { border-bottom: none !important; }
html[data-theme="SATs Superstars"] .settings-row:hover { background: rgba(212,175,55,0.04) !important; }
html[data-theme="SATs Superstars"] .settings-label,
html[data-theme="SATs Superstars"] [class*="setting-label"] {
  flex: 1 !important;
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e2e8f0 !important;
}
html[data-theme="SATs Superstars"] .settings-sub {
  font-size: 12px !important;
  color: rgba(148,163,184,0.55) !important;
  margin-top: 2px !important;
  font-family: 'Geist Mono', var(--font-mono) !important;
  letter-spacing: 0.04em !important;
}

/* Toggle switches */
html[data-theme="SATs Superstars"] .toggle,
html[data-theme="SATs Superstars"] input[type="checkbox"].toggle {
  accent-color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .toggle-switch.on {
  background: rgba(212,175,55,0.3) !important;
  border-color: #d4af37 !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .theme-grid,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .theme-swatch,
html[data-theme="SATs Superstars"] [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: 'Geist Mono', var(--font-mono) !important;
  font-size: 10px !important;
  color: rgba(148,163,184,0.6) !important;
}
html[data-theme="SATs Superstars"] .theme-swatch:hover {
  border-color: rgba(212,175,55,0.4) !important;
  background: rgba(212,175,55,0.06) !important;
}
html[data-theme="SATs Superstars"] .theme-swatch.active,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] select,
html[data-theme="SATs Superstars"] .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: 'Geist Mono', var(--font-mono) !important;
  font-size: 12px !important;
  outline: none !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
}
html[data-theme="SATs Superstars"] select:focus,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .parent-header,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .parent-stat__n {
  font-family: 'Boldonse', 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="SATs Superstars"] .parent-stat__l {
  font-family: 'Geist 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="SATs Superstars"] .pin-modal,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .pin-display {
  display: flex !important;
  gap: 12px !important;
  justify-content: center !important;
  margin: 20px 0 !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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: 'Boldonse', 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="SATs Superstars"] .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="SATs Superstars"] .pin-key:active {
  transform: scale(0.95) !important;
}

/* ── 19. TEACHER DASHBOARD ───────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .teacher-header,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .student-row,
html[data-theme="SATs Superstars"] [class*="student-item"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .student-row:hover {
  border-color: rgba(212,175,55,0.25) !important;
  background: rgba(212,175,55,0.04) !important;
}
html[data-theme="SATs Superstars"] .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: 'Boldonse', var(--font-heading) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #d4af37 !important;
  flex-shrink: 0 !important;
}
html[data-theme="SATs Superstars"] .student-name {
  flex: 1 !important;
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
}
html[data-theme="SATs Superstars"] .student-xp {
  font-family: 'Geist Mono', var(--font-mono) !important;
  font-size: 12px !important;
  color: #d4af37 !important;
}

/* Safeguarding flags */
html[data-theme="SATs Superstars"] .flag-card,
html[data-theme="SATs Superstars"] [class*="safeguard"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .flag-card::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ef4444;
  flex-shrink: 0;
  margin-top: 6px;
}

/* ── 20. SATS PAPERS PICKER ──────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .paper-grid,
html[data-theme="SATs Superstars"] [class*="papers-grid"],
html[data-theme="SATs Superstars"] [class*="paper-picker"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 14px !important;
}
html[data-theme="SATs Superstars"] .paper-card,
html[data-theme="SATs Superstars"] [class*="paper-card"],
html[data-theme="SATs Superstars"] button[data-k2s-click="startExam"],
html[data-theme="SATs Superstars"] 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .paper-card:hover::before {
  opacity: 1;
}
html[data-theme="SATs Superstars"] .paper-title {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f1f5f9 !important;
  margin-bottom: 6px !important;
}
html[data-theme="SATs Superstars"] .paper-meta {
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .countdown-days {
  font-family: 'Boldonse', 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="SATs Superstars"] .countdown-label {
  font-family: 'Geist 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="SATs Superstars"] .formula-card,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .formula-name {
  font-family: 'Boldonse', 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="SATs Superstars"] .formula-expr,
html[data-theme="SATs Superstars"] [class*="formula-math"] {
  font-family: 'Geist 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="SATs Superstars"] .modal-overlay,
html[data-theme="SATs Superstars"] [class*="modal-backdrop"] {
  background: rgba(1,2,8,0.8) !important;
  backdrop-filter: blur(8px) !important;
}
html[data-theme="SATs Superstars"] .modal,
html[data-theme="SATs Superstars"] [class*="modal-box"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .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="SATs Superstars"] .modal-title,
html[data-theme="SATs Superstars"] [class*="modal-heading"] {
  font-family: 'Boldonse', 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="SATs Superstars"] .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="SATs Superstars"] .card:hover {
  border-color: rgba(212,175,55,0.25) !important;
}

/* ── 25. EMPTY STATES ────────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .empty-state,
html[data-theme="SATs Superstars"] [class*="empty-state"] {
  text-align: center !important;
  padding: 48px 24px !important;
  color: rgba(148,163,184,0.55) !important;
  font-family: 'Geist Mono', var(--font-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .toast,
html[data-theme="SATs Superstars"] [class*="notification"],
html[data-theme="SATs Superstars"] [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: 'General Sans', 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="SATs Superstars"] .toast.success { border-color: rgba(16,185,129,0.4) !important; }
html[data-theme="SATs Superstars"] .toast.error   { border-color: rgba(239,68,68,0.35) !important; }

/* ── 27. ADDITIONAL MOTION KEYFRAMES ─────────────────────────────────────── */
@keyframes sats-superstars-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sats-superstars-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.15); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes sats-superstars-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-3px); }
  80%     { transform: translateX(3px); }
}
@keyframes sats-superstars-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@keyframes sats-superstars-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="SATs Superstars"] .anim-in,
html[data-theme="SATs Superstars"] .view-fade-in {
  animation: sats-superstars-rise 0.35s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── 28. SUBJECT LEVEL SELECT ─────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .level-card,
html[data-theme="SATs Superstars"] [class*="level-option"],
html[data-theme="SATs Superstars"] 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="SATs Superstars"] .level-card:hover,
html[data-theme="SATs Superstars"] 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="SATs Superstars"] .history-day,
html[data-theme="SATs Superstars"] [class*="day-cell"],
html[data-theme="SATs Superstars"] [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: 'Geist Mono', var(--font-mono) !important;
  font-size: 11px !important;
}
html[data-theme="SATs Superstars"] .history-day.active,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] input[type="text"],
html[data-theme="SATs Superstars"] input[type="email"],
html[data-theme="SATs Superstars"] input[type="password"],
html[data-theme="SATs Superstars"] input[type="number"],
html[data-theme="SATs Superstars"] 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: 'General Sans', 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="SATs Superstars"] input[type="text"]:focus,
html[data-theme="SATs Superstars"] input[type="email"]:focus,
html[data-theme="SATs Superstars"] input[type="password"]:focus,
html[data-theme="SATs Superstars"] input[type="number"]:focus,
html[data-theme="SATs Superstars"] textarea:focus {
  border-color: #d4af37 !important;
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
}
html[data-theme="SATs Superstars"] input::placeholder,
html[data-theme="SATs Superstars"] textarea::placeholder {
  color: rgba(148,163,184,0.4) !important;
  font-family: 'Geist Mono', var(--font-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}

/* ── 31. BUTTONS (global utility) ────────────────────────────────────────── */
html[data-theme="SATs Superstars"] button.btn,
html[data-theme="SATs Superstars"] button.btn-primary,
html[data-theme="SATs Superstars"] .btn-gold {
  background: linear-gradient(135deg, #d4af37, #f0d060) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #0a0c10 !important;
  font-family: 'Boldonse', 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="SATs Superstars"] button.btn:hover,
html[data-theme="SATs Superstars"] button.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(212,175,55,0.4) !important;
}
html[data-theme="SATs Superstars"] button.btn-secondary,
html[data-theme="SATs Superstars"] .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: 'Boldonse', 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="SATs Superstars"] button.btn-secondary:hover {
  background: rgba(212,175,55,0.15) !important;
}

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

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


/* ═══════════════════════════════════════════════════════════════════════════
   SATs Superstars 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="SATs Superstars"] .page-title {
  font-family: 'Boldonse', 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="SATs Superstars"] .page-sub {
  font-family: 'General Sans', 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="SATs Superstars"] .label-xs,
html[data-theme="SATs Superstars"] .section-title {
  font-family: 'Geist 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="SATs Superstars"] .mono {
  font-family: 'Geist Mono', var(--font-mono) !important;
}

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

/* ── Empty state (mk-empty) ─────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-empty__icon .material-symbols-rounded {
  font-size: 48px !important;
  color: rgba(212,175,55,0.3) !important;
}
html[data-theme="SATs Superstars"] .mk-empty__title {
  font-family: 'Boldonse', 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="SATs Superstars"] .mk-empty__sub {
  font-family: 'General Sans', 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="SATs Superstars"] .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: 'Geist 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="SATs Superstars"] .mk-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .mk-chip--danger,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .gold-shimmer {
  position: relative;
  overflow: hidden;
}
html[data-theme="SATs Superstars"] .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: sats-superstars-sweep 3s ease-in-out infinite;
  pointer-events: none;
}

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

/* ── Question card (actual class used in renderQuestion) ────────────────── */
html[data-theme="SATs Superstars"] .question-card,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .question-card::before,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .question-text,
html[data-theme="SATs Superstars"] .question-text-main {
  font-family: 'General Sans', 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="SATs Superstars"] .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="SATs Superstars"] .step-label {
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .question-img-wrap img {
  border-radius: 10px !important;
}

/* ── Marks badge (used in question + exam) ──────────────────────────────── */
html[data-theme="SATs Superstars"] .marks-badge {
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] #speed-timer {
  font-family: 'Geist 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="SATs Superstars"] #exam-timer {
  font-family: 'Geist 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="SATs Superstars"] .exam-mcq-grid button.card,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] #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="SATs Superstars"] #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="SATs Superstars"] #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;
}
/* SATs Superstars MAX avatar */
html[data-theme="SATs Superstars"] #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="SATs Superstars"] #ai-input,
html[data-theme="SATs Superstars"] .input[id="ai-input"] {
  background: rgba(11,19,36,0.9) !important;
  border: none !important;
  color: #f1f5f9 !important;
  font-family: 'General Sans', var(--font-main) !important;
  font-size: 15px !important;
}
/* AI input wrap */
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .spinner {
  border-color: rgba(212,175,55,0.2) transparent transparent transparent !important;
}

/* ── Card card-hover variant ────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .card-hover {
  cursor: pointer !important;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
html[data-theme="SATs Superstars"] .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 SATs Superstars ────────────────────────────────── */
html[data-theme="SATs Superstars"] .btn {
  font-family: 'Boldonse', 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="SATs Superstars"] .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="SATs Superstars"] .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(212,175,55,0.42) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .btn-ghost:hover {
  background: rgba(212,175,55,0.14) !important;
  border-color: rgba(212,175,55,0.4) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .card.anim-in {
  animation: sats-superstars-rise 0.32s cubic-bezier(0.4,0,0.2,1) both !important;
}
/* Settings icon circles */
html[data-theme="SATs Superstars"] .card > div > div[style*="border-radius:12px"] {
  border-radius: 10px !important;
}

/* ── mk-grid-bg (scanner grid texture on hero) ──────────────────────────── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .diff-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
html[data-theme="SATs Superstars"] button[data-k2s-click="setDiff"] {
  font-family: 'Geist 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="SATs Superstars"] .privacy-content,
html[data-theme="SATs Superstars"] .terms-content,
html[data-theme="SATs Superstars"] [class*="legal-body"] {
  font-family: 'General Sans', 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="SATs Superstars"] .privacy-content h2,
html[data-theme="SATs Superstars"] .terms-content h2 {
  font-family: 'Boldonse', 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="SATs Superstars"] .exam-type-card,
html[data-theme="SATs Superstars"] .board-card,
html[data-theme="SATs Superstars"] [class*="exam-type-option"],
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .exam-type-card:hover,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .exam-type-card.selected,
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .history-row,
html[data-theme="SATs Superstars"] [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="SATs Superstars"] .history-row:hover {
  border-color: rgba(212,175,55,0.25) !important;
}

/* ── Revision notes (renderRevisionNotes uses card + textarea) ──────────── */
html[data-theme="SATs Superstars"] .notes-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}
html[data-theme="SATs Superstars"] #notes-title-input,
html[data-theme="SATs Superstars"] #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: 'General Sans', 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="SATs Superstars"] #notes-title-input:focus,
html[data-theme="SATs Superstars"] #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="SATs Superstars"] .daily-challenges-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .daily-challenge-card:hover {
  border-color: rgba(212,175,55,0.4) !important;
  transform: translateY(-2px) !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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: 'Boldonse', var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  transition: all 0.2s !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] 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: 'Boldonse', 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="SATs Superstars"] 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="SATs Superstars"] .sats-paper-grid,
html[data-theme="SATs Superstars"] [class*="paper-list"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 14px !important;
}
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .sats-exam-container {
  max-width: 900px !important;
  margin: 0 auto !important;
}
html[data-theme="SATs Superstars"] .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;
}

/* ── SATs Superstars companion (renderNileCompanion) ───────────────────────────────── */
html[data-theme="SATs Superstars"] .sats-superstars-companion,
html[data-theme="SATs Superstars"] [class*="sats-superstars-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="SATs Superstars"] .sats-superstars-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="SATs Superstars"] .teacher-table,
html[data-theme="SATs Superstars"] table[class*="teacher"] {
  width: 100% !important;
  border-collapse: collapse !important;
}
html[data-theme="SATs Superstars"] .teacher-table th {
  font-family: 'Geist 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="SATs Superstars"] .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="SATs Superstars"] .teacher-table tr:hover td {
  background: rgba(0,224,255,0.03) !important;
}

/* ── Pricing screen ─────────────────────────────────────────────────────── */
html[data-theme="SATs Superstars"] .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="SATs Superstars"] .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="SATs Superstars"] .pricing-price {
  font-family: 'Boldonse', var(--font-heading) !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: #d4af37 !important;
  letter-spacing: -0.04em !important;
}
html[data-theme="SATs Superstars"] .pricing-period {
  font-family: 'Geist 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="SATs Superstars"] .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: 'General Sans', var(--font-main) !important;
}
html[data-theme="SATs Superstars"] .pricing-feature::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d4af37;
  margin-top: 0.42em;
  flex-shrink: 0;
}

/* ── Topic shimmer (loading states) ─────────────────────────────────────── */
html[data-theme="SATs Superstars"] .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: sats-superstars-shimmer 1.6s ease-in-out infinite !important;
  border: 1px solid rgba(212,175,55,0.06) !important;
  border-radius: 14px !important;
}
@keyframes sats-superstars-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

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

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

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

/* ═══════════════════════════════════════════════════════════════════════════
   MINIMAL HOME v59 - compact HUD + Progress panel + Quick Actions + modals
   Appended Oct 2026 as part of the progressive-disclosure home refactor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero eyebrow countdown icon button */
.hero-countdown-btn {
  position: relative;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
}
.hero-countdown-btn:hover {
  background: var(--accent);
  color: var(--accent-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 176, 61, 0.3);
}
.hero-countdown-btn__badge {
  position: absolute;
  top: -6px; right: -6px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 9px;
  font-weight: 800;
  background: var(--alert-2, #f97316);
  color: #fff;
  padding: 2px 5px;
  border-radius: 6px;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* Compact HUD stat tiles - now clickable buttons */
.mk-hero-hud .mk-stat--compact {
  padding: 12px 14px !important;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 76px;
}
.mk-hero-hud .mk-stat--compact:hover {
  transform: translateY(-2px);
  border-color: var(--accent) !important;
  box-shadow: 0 6px 16px rgba(253, 176, 61, 0.22);
}
.mk-hero-hud .mk-stat--compact:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* HUD column compact missions block */
.mk-hero-hud__missions {
  margin-top: 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mk-hero-hud__missions > button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  text-align: left;
  width: 100%;
  transition: all .15s ease;
}
.mk-hero-hud__missions > button:hover {
  border-color: var(--accent);
  transform: translateX(2px);
}

/* Progress panel (2 compact subject rows) */
.home-progress { margin-top: 20px; }
.home-progress__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.home-progress__row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all .15s ease;
  font: inherit;
  text-align: left;
  width: 100%;
}
.home-progress__row:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 176, 61, 0.15);
}

/* Quick Actions - 4 small cards */
.home-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 12px;
}
.home-quick-actions > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: all .15s ease;
  min-height: 120px;
}
.home-quick-actions > button:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px rgba(253, 176, 61, 0.2);
}
.home-quick-actions > button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .home-progress__row { padding: 12px 14px; }
  .mk-hero-hud .mk-stat--compact { min-height: 66px; padding: 10px 12px !important; }
}

/* Modal system - used by countdown + all-missions drilldowns */
.k2s-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 28, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: k2sModalFade .15s ease-out;
}
.k2s-modal {
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: k2sModalSlide .2s ease-out;
}
@keyframes k2sModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes k2sModalSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
#k2s-modal-close:hover { background: var(--surface-2); color: var(--text-1); }

/* Production hardening: ambient SATs Superstars glows must never create horizontal scroll. */
html[data-theme="SATs Superstars"],
html[data-theme="SATs Superstars"] body,
html[data-theme="SATs Superstars"] #app-shell,
html[data-theme="SATs Superstars"] #content,
html[data-theme="SATs Superstars"] #main-content {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html[data-theme="SATs Superstars"],
  html[data-theme="SATs Superstars"] body,
  html[data-theme="SATs Superstars"] #app-shell,
  html[data-theme="SATs Superstars"] #content,
  html[data-theme="SATs Superstars"] #main-content {
    overflow-x: hidden;
  }
}
html[data-theme="SATs Superstars"] #app-shell::before {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}
html[data-theme="SATs Superstars"] #content::before {
  right: 0 !important;
  width: min(600px, 50vw) !important;
}
html[data-theme="SATs Superstars"] #content::after {
  left: 0 !important;
  width: min(600px, 50vw) !important;
}

/* Keep the app canvas crisp after programmatic route changes. Inner cards can
   animate, but the focused content shell itself should never screenshot faded. */
#content:focus {
  outline: none;
  box-shadow: none;
}
#content.anim-in,
#content > .k2s-stage.anim-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Tap-target hardening for Safari fractional pixels and mobile zoom rounding. */
html body .hero-countdown-btn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  flex: 0 0 52px !important;
  padding: 0 !important;
}

/* Every icon-only app control must meet the 44px WCAG/touch target floor. */
html body .btn-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
@media (max-width: 480px) {
  html body .btn-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}

html body .btn:not(.btn-icon),
html body .btn-primary,
html body .btn-deck,
html body .mk-cta,
html body .k2s-empty--rich__cta,
html body button[data-k2s-click]:not(.btn-icon) {
  min-height: 44px !important;
}
@media (max-width: 480px) {
  html body .btn:not(.btn-icon),
  html body .btn-primary,
  html body .btn-deck,
  html body .mk-cta,
  html body .k2s-empty--rich__cta,
  html body button[data-k2s-click]:not(.btn-icon) {
    min-height: 48px !important;
  }
}

/* Mobile form controls must remain finger-sized even when inherited styles strip padding. */
@media (max-width: 480px) {
  html body input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html body select,
  html body textarea {
    min-height: 48px !important;
    box-sizing: border-box !important;
  }

  html body .search-bar {
    min-height: 52px !important;
  }

  html body .search-bar input {
    height: 48px !important;
    min-height: 48px !important;
  }

  html body input[type="checkbox"],
  html body input[type="radio"] {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  html body input[type="range"] {
    min-height: 44px !important;
    padding-block: 12px !important;
  }
}

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

/* Keep mobile hit boxes stable while content fades in. */
@media (max-width: 480px) {
  html body .stagger > *,
  html body .anim-in {
    animation-name: k2sMobileFadeIn !important;
    transform: none !important;
  }
}

/* v81: app real-estate pass. Dashboards and builders should use the full
   product canvas; only dense prose and single-question text keep readable caps. */
@media (min-width: 1024px) {
  #content > .stagger,
  .k2s-stage > .stagger,
  #sats-tab-content,
  .k2s-board-select-stage {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[data-theme="SATs Superstars"] .ai-chat-wrap,
  html[data-theme="SATs Superstars"] #ai-chat-container,
  html[data-theme="SATs Superstars"] [class*="chat-container"] {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[data-theme="SATs Superstars"] .question-layout,
  html[data-theme="SATs Superstars"] .sats-exam-container {
    max-width: 1280px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[data-theme="SATs Superstars"] .q-shell,
  html[data-theme="SATs Superstars"] .question-shell,
  html[data-theme="SATs Superstars"] #question-shell,
  html[data-theme="SATs Superstars"] .exam-body,
  html[data-theme="SATs Superstars"] #exam-body {
    max-width: min(100%, 1180px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 900px) {
  .k2s-board-select-stage [style*="grid-template-columns"],
  [style*="grid-template-columns:minmax(300px,0.8fr)"] {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}