/* ═══════════════════════════════════════════════════════════════
   ACT PREP COMMAND CENTER — Premium CSS
   Uses CSS custom properties so themes swap instantly client-side
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Theme variables (overridden by JS clientside callback) */
  --bg-primary:     #0d1117;
  --bg-secondary:   #161b22;
  --bg-tertiary:    #21262d;
  --border:         #30363d;
  --text-primary:   #f0f6fc;
  --text-secondary: #c9d1d9;
  --text-muted:     #8b949e;
  --accent-primary: #e8612c;
  --accent-hover:   #cc5225;
  --card-shadow:    0 4px 24px rgba(0,0,0,0.4);
  --font-heading:   'Segoe UI', system-ui, sans-serif;
  --font-body:      'Segoe UI', system-ui, sans-serif;

  /* Section accent colors — fixed, not theme-dependent */
  --c-english:  #58a6ff;
  --c-math:     #f0a500;
  --c-reading:  #3fb950;
  --c-science:  #bc8cff;
  --c-planning: #e8612c;
  --c-success:  #3fb950;
  --c-warning:  #e3b341;
  --c-danger:   #f85149;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  color: var(--text-primary) !important;
}

/* ── Header ─────────────────────────────────────────────────── */
.app-header {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border-bottom: 1px solid var(--border);
  padding: 14px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--card-shadow);
}

/* ── Nav bar ────────────────────────────────────────────────── */
.nav-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 4px 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* short now — wrap to full width instead of scrolling */
  gap: 6px;
  overflow: visible;        /* let dropdown menus float OVER the content below */
  position: relative;
  z-index: 50;
}
.nav-btn {
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  color: var(--text-muted) !important;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: var(--font-body);
}
.nav-btn:hover { color: var(--text-primary) !important; }
.nav-btn.active {
  color: var(--accent-primary) !important;
  border-bottom-color: var(--accent-primary) !important;
}

/* ── Grouped nav dropdowns ── */
.nav-dd { display: inline-flex; }
.nav-dd .btn.nav-btn { box-shadow: none !important; }
/* caret colour follows the button text */
.nav-dd .dropdown-toggle::after { vertical-align: middle; opacity: 0.7; }
/* the menu panel — themed dark */
.nav-bar .dropdown-menu {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55) !important;
  padding: 8px !important; margin-top: 6px !important;
  min-width: 230px !important;
  z-index: 1200 !important;          /* float above the tab content */
}
.nav-bar .dropdown-item {
  color: var(--text-secondary) !important;
  border-radius: 8px !important;
  font-size: 14px; font-weight: 600; padding: 11px 16px !important;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.nav-bar .dropdown-item:hover, .nav-bar .dropdown-item:focus {
  background: var(--bg-tertiary) !important; color: var(--text-primary) !important;
}
.nav-bar .dropdown-item.active {
  background: var(--accent-primary) !important; color: #fff !important;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  box-shadow: var(--card-shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.card-header {
  background: var(--bg-tertiary) !important;
  border-bottom: 1px solid var(--border) !important;
  font-weight: 700;
  font-family: var(--font-heading);
  border-radius: 12px 12px 0 0 !important;
}
.card-body { padding: 16px; }

/* ── Hero section ───────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 60%);
  border-bottom: 1px solid var(--border);
  padding: 40px 32px 32px;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(232,97,44,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-section::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: 20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(88,166,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.hero-title span { color: var(--accent-primary); }
.hero-subtitle {
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

/* ── Score chips (header) ───────────────────────────────────── */
.score-chip {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  text-align: center;
  min-width: 64px;
  transition: border-color 0.2s;
}
.score-chip:hover { border-color: var(--accent-primary); }
.score-chip .value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.score-chip .label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── Stat cards (big numbers) ───────────────────────────────── */
.stat-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.stat-card .stat-value {
  font-size: 52px;
  font-weight: 900;
  font-family: var(--font-heading);
  line-height: 1;
  color: var(--accent-primary);
}
.stat-card .stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.stat-card .stat-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* ── Today's mission card ───────────────────────────────────── */
.mission-card {
  background: linear-gradient(135deg, rgba(232,97,44,0.08) 0%, var(--bg-secondary) 100%);
  border: 1px solid rgba(232,97,44,0.3);
  border-left: 4px solid var(--accent-primary);
  border-radius: 12px;
  padding: 20px;
}
.mission-card .mission-week {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 4px;
}
.mission-card .mission-date {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

/* ── Competitor comparison table ────────────────────────────── */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--border);
}
.compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  vertical-align: middle;
}
.compare-table tr:hover td { background: var(--bg-tertiary); }
.compare-table .our-row td {
  background: rgba(232,97,44,0.06);
  color: var(--text-primary);
  font-weight: 600;
}
.compare-table .our-row td:first-child {
  border-left: 3px solid var(--accent-primary);
}
.price-tag {
  font-weight: 700;
  color: var(--c-danger);
}
.price-tag.good { color: var(--c-success); }
.check { color: var(--c-success); font-size: 16px; }
.cross { color: var(--c-danger); font-size: 16px; }

/* ── Section gap cards ──────────────────────────────────────── */
.gap-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  height: 100%;
  transition: transform 0.15s;
}
.gap-card:hover { transform: translateY(-2px); }

/* ── Progress rings / bars ──────────────────────────────────── */
.progress {
  background: var(--bg-tertiary) !important;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar { border-radius: 4px !important; transition: width 0.6s ease; }

/* ── Streak display ─────────────────────────────────────────── */
.streak-display {
  text-align: center;
  padding: 16px;
}
.streak-number {
  font-size: 64px;
  font-weight: 900;
  font-family: var(--font-heading);
  color: var(--accent-primary);
  line-height: 1;
}
.streak-label { color: var(--text-muted); font-size: 13px; }

/* ── Accordion ──────────────────────────────────────────────── */
.accordion-button {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: none !important;
  font-weight: 600;
  font-family: var(--font-heading);
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  color: var(--accent-primary) !important;
  background: var(--bg-secondary) !important;
  box-shadow: none !important;
}
.accordion-button::after { filter: invert(0.7); }
.accordion-item {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  margin-bottom: 6px;
  border-radius: 10px !important;
  overflow: hidden;
}
.accordion-body { background: var(--bg-secondary) !important; padding: 16px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn-primary {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  font-weight: 600;
}
.btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}
.btn-outline-secondary {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.btn-outline-secondary:hover {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
}

/* ── Inputs ─────────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 8px !important;
}
.form-control:focus, .form-select:focus {
  box-shadow: 0 0 0 2px rgba(232,97,44,0.3) !important;
  border-color: var(--accent-primary) !important;
}
.form-label { color: var(--text-secondary) !important; font-size: 13px; font-weight: 600; }

/* ── Modals ─────────────────────────────────────────────────── */
.modal-content {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
}
.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 20px 24px;
}
.modal-body { padding: 24px; }
.modal-footer { border-top: 1px solid var(--border) !important; padding: 16px 24px; }
.modal-title { font-family: var(--font-heading); font-weight: 700; font-size: 18px; }
.btn-close { filter: invert(0.7) !important; }

/* ── AI Chat ────────────────────────────────────────────────── */
.chat-container {
  height: 420px;
  overflow-y: auto;
  background: var(--bg-tertiary);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  scroll-behavior: smooth;
}
.chat-user {
  background: var(--accent-primary);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  padding: 10px 16px;
  margin: 8px 0 8px 80px;
  font-size: 14px;
  line-height: 1.5;
}
.chat-assistant {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 18px 18px 18px 4px;
  padding: 10px 16px;
  margin: 8px 80px 8px 0;
  font-size: 14px;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ── Hockey quote / motivational ────────────────────────────── */
.hockey-quote {
  color: var(--text-muted);
  font-style: italic;
  font-size: 13px;
  border-left: 3px solid var(--accent-primary);
  padding: 8px 12px;
  margin: 8px 0;
  background: rgba(232,97,44,0.04);
  border-radius: 0 8px 8px 0;
}

/* ── This-week card ─────────────────────────────────────────── */
.this-week-card {
  background: linear-gradient(135deg, rgba(232,97,44,0.08) 0%, var(--bg-secondary) 100%);
  border: 1px solid rgba(232,97,44,0.25) !important;
  border-radius: 14px;
  padding: 22px;
}

/* ── Theme swatch buttons ───────────────────────────────────── */
.theme-swatch {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.theme-swatch:hover { transform: scale(1.15); }
.theme-swatch.active { border-color: var(--accent-primary); box-shadow: 0 0 0 2px var(--accent-primary); }

/* ── Competitor badge ───────────────────────────────────────── */
.competitor-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
}

/* ── Countdown display ──────────────────────────────────────── */
.countdown {
  font-variant-numeric: tabular-nums;
  font-size: 36px;
  font-weight: 900;
  font-family: var(--font-heading);
  color: var(--accent-primary);
  line-height: 1;
}
.countdown-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* ── Score history table ────────────────────────────────────── */
.score-table { font-size: 13px; width: 100%; border-collapse: collapse; }
.score-table th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--border);
  padding: 8px 12px;
  text-align: left;
}
.score-table td { border-bottom: 1px solid var(--border); padding: 8px 12px; }
.score-table tr:hover td { background: var(--bg-tertiary); }

/* ── Formula card ───────────────────────────────────────────── */
.formula-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 13px;
  color: var(--c-math);
  margin-bottom: 4px;
}

/* ── Timer ──────────────────────────────────────────────────── */
.timer-display {
  font-size: 36px;
  font-weight: 900;
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  color: var(--accent-primary);
}

/* ── Difficulty badges ──────────────────────────────────────── */
.badge-easy   { background: rgba(63,185,80,0.15); color: #3fb950; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.badge-medium { background: rgba(240,165,0,0.15); color: #f0a500; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.badge-hard   { background: rgba(248,81,73,0.15); color: #f85149; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Tab content wrapper ────────────────────────────────────── */
#tab-content { transition: opacity 0.15s ease; }

/* ── Alert overrides ────────────────────────────────────────── */
.alert { border-radius: 10px !important; }
.alert-success { background: rgba(63,185,80,0.12) !important; border-color: rgba(63,185,80,0.3) !important; color: #3fb950 !important; }
.alert-warning { background: rgba(227,179,65,0.12) !important; border-color: rgba(227,179,65,0.3) !important; color: #e3b341 !important; }
.alert-danger  { background: rgba(248,81,73,0.12) !important; border-color: rgba(248,81,73,0.3) !important; color: #f85149 !important; }
.alert-info    { background: rgba(88,166,255,0.12) !important; border-color: rgba(88,166,255,0.3) !important; color: #58a6ff !important; }

/* ── Utility ────────────────────────────────────────────────── */
.text-accent   { color: var(--accent-primary) !important; }
.bg-card       { background: var(--bg-secondary) !important; }
.border-subtle { border-color: var(--border) !important; }
.text-muted-theme { color: var(--text-muted) !important; }

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC HERO (Notre Dame-style video hero + grading effect)
   ═══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

.hero-stage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
}

/* ── Background video ── */
.hero-video {
  position: absolute;
  top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

/* ── Animated gradient fallback (when no video) ── */
.hero-gradient-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg,
      var(--bg-primary) 0%,
      var(--bg-secondary) 25%,
      var(--accent-primary) 55%,
      var(--bg-secondary) 80%,
      var(--bg-primary) 100%);
  background-size: 300% 300%;
  animation: heroAurora 18s ease infinite;
  opacity: 0.55;
}
@keyframes heroAurora {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* floating glow orbs over the gradient */
.hero-gradient-bg::before,
.hero-gradient-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
}
.hero-gradient-bg::before {
  width: 600px; height: 600px;
  background: var(--accent-primary);
  top: -10%; right: -5%;
  animation: heroFloat 14s ease-in-out infinite;
}
.hero-gradient-bg::after {
  width: 500px; height: 500px;
  background: var(--c-english);
  bottom: -15%; left: -5%;
  animation: heroFloat 18s ease-in-out infinite reverse;
}
@keyframes heroFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.1); }
}

/* ── The "grading" effect: vignette + bottom fade ── */
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 35%,
      rgba(0,0,0,0.35) 75%,
      rgba(0,0,0,0.65) 100%);
}
.hero-bottom-fade {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.15) 25%,
      transparent 45%,
      transparent 62%,
      var(--bg-primary) 100%);
}

/* ── Foreground content ── */
.hero-content {
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 0 24px;
  animation: heroFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo / crest */
.hero-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
}
.hero-crest {
  width: 86px; height: 86px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, var(--accent-primary), var(--accent-hover));
  /* shield / crest shape */
  clip-path: polygon(50% 0%, 100% 18%, 100% 65%, 50% 100%, 0% 65%, 0% 18%);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 2px 8px rgba(255,255,255,0.2);
  margin-bottom: 14px;
}
.hero-crest-letter {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 40px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.hero-wordmark {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 5px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  opacity: 0.92;
}

/* Headline */
.hero-headline-top {
  color: #fff;
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 1px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
  margin-bottom: 2px;
}
.hero-headline-main {
  display: flex; align-items: baseline; justify-content: center;
  gap: 6px;
  line-height: 1;
}
.hero-big-act {
  font-family: var(--font-heading);
  font-size: 96px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -2px;
  text-shadow: 0 4px 30px rgba(0,0,0,0.7);
}
.hero-big-num {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 900;
  color: var(--accent-primary);
  letter-spacing: -4px;
  text-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 0 60px var(--accent-primary);
}

/* Tagline */
.hero-tagline {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.8);
  margin-top: 12px;
  opacity: 0.95;
}

/* Stat strip */
.hero-stat-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 24px;
  margin-top: 36px;
}
.hero-stat { text-align: center; }
.hero-stat-value {
  color: var(--accent-primary);
  font-size: 28px;
  font-weight: 900;
  font-family: var(--font-heading);
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
  line-height: 1;
}
.hero-stat-label {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
  margin-top: 4px;
}
.hero-stat-divider {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.25);
}

/* Scroll-down indicator */
.hero-scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.hero-scroll-label {
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.8;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  margin-bottom: 4px;
}
.hero-scroll-chevron {
  color: var(--accent-primary);
  font-size: 34px;
  line-height: 1;
  animation: heroBounce 2s infinite;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
@keyframes heroBounce {
  0%,100%  { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(10px); opacity: 0.5; }
}

/* Content section below hero reveals on scroll */
.content-reveal {
  animation: heroFadeUp 0.8s ease both;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-big-act { font-size: 56px; }
  .hero-big-num { font-size: 72px; }
  .hero-headline-top { font-size: 18px; }
  .hero-stat-strip { gap: 14px; }
}

/* Hero logo image (Road to Dream mark) */
.hero-logo-img {
  width: 96px; height: 96px;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5));
  margin-bottom: 8px;
}
.hero-wordmark-tag {
  color: var(--accent-primary);
  font-size: 12px;
  font-style: italic;
  letter-spacing: 1px;
  margin-top: 4px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* Hero PNG logo (full crest with wordmark) */
.hero-logo-png {
  width: 220px; height: auto;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.55));
  margin-bottom: 6px;
}
@media (max-width: 768px) {
  .hero-logo-png { width: 150px; }
}

/* ═══════════════════════════════════════════════════════════════
   REPORT PAPER — force dark, high-contrast text on the white sheet
   (overrides the global heading !important rule via higher specificity)
   ═══════════════════════════════════════════════════════════════ */
.report-paper h1,
.report-paper h2,
.report-paper h3,
.report-paper h4,
.report-paper h5 {
  color: #1e3a5f !important;     /* deep navy ink — elegant, readable, easy on the eyes */
}
/* default body ink so any uncolored text is a soft blue-slate */
.report-paper { color: #3f5169; }

/* animated per-subject completion bars in the Report */
.report-bar-fill { animation: barGrow 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes barGrow { from { width: 0 !important; } }

/* ═══════════════════════════════════════════════════════════════
   CONCEPT LAB — animated concept explainers
   ═══════════════════════════════════════════════════════════════ */

/* Concept selector pills */
.concept-pill {
  display: block; width: 100%;
  text-align: left;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
}
.concept-pill:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.concept-pill.active {
  border-left-color: var(--accent-primary);
  color: var(--accent-primary);
  background: var(--bg-tertiary);
  font-weight: 700;
}

/* Animated grammar demo */
.clause-box {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  margin: 4px;
  opacity: 0;
  animation: clauseIn 0.6s ease forwards;
}
.clause-a { background: rgba(88,166,255,0.18); color: #58a6ff; border: 1px solid #58a6ff; animation-delay: 0.2s; }
.clause-b { background: rgba(63,185,80,0.18); color: #3fb950; border: 1px solid #3fb950; animation-delay: 0.8s; }
@keyframes clauseIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splice-error {
  display: inline-block;
  font-size: 22px; font-weight: 900;
  color: #f85149;
  margin: 0 4px;
  opacity: 0;
  animation: spliceFlash 0.5s ease 1.4s forwards;
}
@keyframes spliceFlash {
  0%   { opacity: 0; transform: scale(0.4); }
  60%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

.fix-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid #3fb950;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  opacity: 0;
  animation: fixSlide 0.5s ease forwards;
}
.fix-card:nth-child(1) { animation-delay: 2.0s; }
.fix-card:nth-child(2) { animation-delay: 2.3s; }
.fix-card:nth-child(3) { animation-delay: 2.6s; }
.fix-card:nth-child(4) { animation-delay: 2.9s; }
@keyframes fixSlide {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Trap cards (reading) */
.trap-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  height: 100%;
  opacity: 0;
  animation: fixSlide 0.6s ease forwards;
  border-top: 3px solid #f85149;
}
.trap-card:nth-child(1) { animation-delay: 0.1s; }
.trap-card:nth-child(2) { animation-delay: 0.3s; }
.trap-card:nth-child(3) { animation-delay: 0.5s; }
.trap-card:nth-child(4) { animation-delay: 0.7s; }

/* Highlight sweep for subject-verb */
.sv-sentence { font-size: 18px; line-height: 2.2; }
.sv-subject { color: #58a6ff; font-weight: 800; border-bottom: 2px solid #58a6ff; }
.sv-verb    { color: #e8612c; font-weight: 800; border-bottom: 2px solid #e8612c; }
.sv-strike {
  color: var(--text-muted);
  position: relative;
}
.sv-strike::after {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 0; height: 2px; background: #f85149;
  animation: strikeThrough 0.8s ease 1s forwards;
}
@keyframes strikeThrough { to { width: 100%; } }

/* Concept "aha" callout */
.aha-box {
  background: linear-gradient(135deg, rgba(232,97,44,0.1), var(--bg-secondary));
  border: 1px solid var(--accent-primary);
  border-radius: 10px;
  padding: 16px 18px;
  margin-top: 16px;
}
.replay-btn {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--accent-primary); border-radius: 8px; padding: 4px 12px;
  font-size: 12px; cursor: pointer;
}

/* Step-by-step solution cards */
.step-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid #f0a500;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
  animation: stepIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes stepIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Draggable, non-blocking helper modals ── */
.draggable-modal .modal-header {
  cursor: grab;
  user-select: none;
}
.draggable-modal .modal-header:active { cursor: grabbing; }
/* keep the floating panel readable when there's no backdrop dimming */
.draggable-modal .modal-content {
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
  border: 1px solid var(--accent-primary) !important;
}
/* allow clicking the page behind a backdrop-less modal */
.draggable-modal { pointer-events: none; }
.draggable-modal .modal-dialog { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   SLIDERS (rc-slider) — theme-matched, readable marks & value boxes
   ═══════════════════════════════════════════════════════════════ */

/* Min / max / midpoint labels under the slider → light & readable.
   No !important, so per-mark inline styles (e.g. Math Lab white marks) win. */
.rc-slider-mark-text {
  color: var(--text-secondary);
  font-size: 11px;
}
.rc-slider-mark-text-active {
  color: var(--text-primary);
}

/* The value tooltip / box that floats by the handle → dark, not white */
.rc-slider-tooltip-inner {
  background-color: var(--bg-tertiary) !important;
  color: var(--accent-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
  font-weight: 700;
}
.rc-slider-tooltip-arrow {
  border-top-color: var(--bg-tertiary) !important;
  border-bottom-color: var(--bg-tertiary) !important;
}

/* Any number-input editor a slider exposes → dark to match */
.rc-slider input,
.ml-slider input,
input[type="number"] {
  background: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}

/* Track / rail / handle in brand colors */
.rc-slider-rail   { background-color: var(--border) !important; }
.rc-slider-track  { background-color: var(--accent-primary) !important; }
.rc-slider-handle {
  border-color: var(--accent-primary) !important;
  background-color: var(--accent-primary) !important;
  opacity: 1;
}
.rc-slider-handle:hover,
.rc-slider-handle:focus,
.rc-slider-handle-dragging {
  border-color: var(--accent-hover) !important;
  box-shadow: 0 0 0 5px rgba(232,97,44,0.25) !important;
}
.rc-slider-dot { background-color: var(--bg-tertiary) !important; border-color: var(--border) !important; }
.rc-slider-dot-active { border-color: var(--accent-primary) !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — phones (any size) & tablets
   The viewport meta tag (set in app.py) makes the page scale to the
   device; these rules keep it tidy and tap-friendly at small widths.
   ═══════════════════════════════════════════════════════════════ */

/* Never let media or charts force horizontal page scroll */
img, svg, video, canvas { max-width: 100%; }
.js-plotly-plot, .plotly, .main-svg { max-width: 100% !important; }
.dash-graph { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Smooth, momentum scrolling for the tab bar (it scrolls sideways on small screens) */
.nav-bar { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

/* Wide tables → let them scroll inside their card instead of overflowing the page */
table { max-width: 100%; }

/* ── Tablets / small laptops (≤ 992px) ── */
@media (max-width: 992px) {
  .app-header { padding: 10px 14px; }
  .nav-bar    { padding: 0 10px; }
  .hero-section { padding: 28px 18px 22px; }
  .hero-title { font-size: 32px; }
  .stat-card .stat-value { font-size: 40px; }
  .streak-number { font-size: 48px; }
}

/* ── Phones (≤ 576px) ── */
@media (max-width: 576px) {
  .app-header { padding: 8px 12px; position: sticky; }
  .app-logo-img { height: 40px !important; margin-right: 8px !important; }

  /* Tab bar: tighter, tappable, snaps as you swipe */
  .nav-bar { gap: 2px; padding: 0 8px; scroll-snap-type: x proximity; }
  .nav-btn { font-size: 12px; padding: 10px 11px; scroll-snap-align: start; }

  /* Dial down the oversized display type so it fits a narrow screen */
  .hero-title { font-size: 26px; }
  .stat-card { padding: 14px; }
  .stat-card .stat-value { font-size: 34px; }
  .streak-number { font-size: 40px; }
  .countdown, .timer-display { font-size: 28px; }

  /* Comfortable reading + spacing in cards/modals on a phone */
  .card-body { padding: 13px; }
  .modal-body { padding: 16px; }
  .modal-header { padding: 14px 16px; }
  .chat-container { height: 320px; }
  .chat-user { margin-left: 36px; }
  .chat-assistant { margin-right: 36px; }

  /* Tables read better a touch smaller; keep them scrollable */
  .score-table, .compare-table, .score-table td, .compare-table td { font-size: 12px; }
  td, th { padding-left: 8px !important; padding-right: 8px !important; }

  /* Bootstrap gutters were tuned for desktop; trim side padding so content
     uses the full phone width instead of wasting it on margins */
  .container, .container-fluid { padding-left: 10px; padding-right: 10px; }
}

/* Larger default tap targets for buttons on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 38px; }
  .nav-btn { min-height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════
   DROPDOWNS (dcc.Dropdown) — dark theme so options are readable
   ═══════════════════════════════════════════════════════════════ */
.Select-control, .Select.is-focused > .Select-control {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}
.Select-menu-outer {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 36px rgba(0,0,0,0.5) !important;
  z-index: 1200 !important;
}
.Select-value-label, .Select-placeholder, .Select-input > input,
.Select--single > .Select-control .Select-value .Select-value-label {
  color: var(--text-primary) !important;
}
.Select-option {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
}
.Select-option.is-focused { background: var(--bg-tertiary) !important; color: var(--text-primary) !important; }
.Select-option.is-selected { background: var(--accent-primary) !important; color: #fff !important; }
.Select-arrow { border-color: var(--text-muted) transparent transparent !important; }
.Select.is-open .Select-arrow { border-color: transparent transparent var(--text-muted) !important; }
/* dropdowns that use the newer dash class */
.dash-dropdown .Select-control { background: var(--bg-tertiary) !important; }

/* ═══════════════════════════════════════════════════════════════
   DAILY PRACTICE — lively reveal + surprise dice
   ═══════════════════════════════════════════════════════════════ */
.daily-q-reveal { animation: dailyReveal 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes dailyReveal {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.daily-surprise {
  text-align: center; padding: 8px 0 14px; margin-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.daily-dice {
  display: inline-block; font-size: 34px;
  animation: diceRoll 0.9s cubic-bezier(0.16,1,0.3,1);
}
@keyframes diceRoll {
  0%   { transform: rotate(0deg) scale(0.5); opacity: 0; }
  60%  { transform: rotate(380deg) scale(1.25); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 1; }
}
.daily-surprise-text {
  color: var(--accent-primary); font-weight: 800; font-size: 15px; margin-top: 4px;
  animation: dailyReveal 0.6s ease 0.2s both;
}

/* ═══════════════════════════════════════════════════════════════
   QUESTION RENDERING — professional data tables + math
   ═══════════════════════════════════════════════════════════════ */
.q-line {
  color: var(--text-primary); line-height: 1.65; margin: 3px 0;
}
.q-line sup, .q-td sup, .q-th sup { font-size: 0.72em; vertical-align: super; }

.q-table {
  border-collapse: collapse; margin: 12px 0 16px; max-width: 100%;
  font-variant-numeric: tabular-nums; overflow-x: auto; display: block;
}
.q-table tbody { display: table; width: auto; }
.q-table td {
  border: 1px solid var(--border); padding: 7px 16px; text-align: center;
  color: var(--text-primary); font-size: 14px; white-space: nowrap;
}
.q-table .q-th {
  text-align: left; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-tertiary); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   AI Q&A CARD — "Ask the Tutor" (premium, aesthetic)
   ═══════════════════════════════════════════════════════════════ */
.aiqa-card {
  margin-top: 26px;
  border-radius: 18px;
  padding: 22px 22px 18px;
  background:
    radial-gradient(1200px 200px at 0% 0%, rgba(232,97,44,0.10), transparent 60%),
    var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0,0,0,0.28);
  position: relative;
  overflow: hidden;
}
.aiqa-card::before {            /* slim accent rail on the left edge */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent-primary), transparent);
}
.aiqa-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.aiqa-title {
  font-family: var(--font-heading);
  font-weight: 800; font-size: 19px; letter-spacing: -0.2px;
  color: var(--text-primary);
}
.aiqa-badge {
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent-primary);
  background: rgba(232,97,44,0.12);
  border: 1px solid rgba(232,97,44,0.35);
  padding: 4px 11px; border-radius: 20px;
}

/* Quick-question chips */
.aiqa-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.aiqa-chip {
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 20px;
  font-size: 12px; font-weight: 600; padding: 6px 13px; cursor: pointer;
  transition: all 0.15s ease;
}
.aiqa-chip:hover {
  color: var(--accent-primary); border-color: var(--accent-primary);
  transform: translateY(-1px);
}

/* Conversation thread */
.aiqa-thread {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  min-height: 140px; max-height: 460px; overflow-y: auto;
  scroll-behavior: smooth;
}

/* The AI answer — clean, readable, professional typography */
.aiqa-answer {
  color: var(--text-primary);
  font-size: 15px; line-height: 1.72;
  margin: 0 0 6px 0;
  animation: aiqaFade 0.45s cubic-bezier(0.16,1,0.3,1);
}
.aiqa-greeting { color: var(--text-secondary); }
.aiqa-answer p { margin: 0 0 10px; }
.aiqa-answer strong { color: var(--accent-primary); font-weight: 700; }
.aiqa-answer h1, .aiqa-answer h2, .aiqa-answer h3, .aiqa-answer h4 {
  color: var(--text-primary); font-family: var(--font-heading);
  font-size: 15.5px; font-weight: 800; margin: 14px 0 6px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.aiqa-answer ul, .aiqa-answer ol { margin: 4px 0 10px; padding-left: 22px; }
.aiqa-answer li { margin-bottom: 5px; }
.aiqa-answer code {
  font-family: 'Consolas','Courier New',monospace; font-size: 13.5px;
  background: var(--bg-tertiary); color: var(--c-math);
  padding: 1px 6px; border-radius: 6px; border: 1px solid var(--border);
}
.aiqa-answer blockquote {
  border-left: 3px solid var(--accent-primary); margin: 8px 0;
  padding: 2px 0 2px 14px; color: var(--text-secondary);
}
@keyframes aiqaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The student's own message — accent bubble, right aligned */
.aiqa-user {
  background: var(--accent-primary); color: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: 9px 15px; margin: 12px 0 12px 18%;
  font-size: 14px; line-height: 1.5; font-weight: 500;
  box-shadow: 0 2px 10px rgba(232,97,44,0.25);
}

/* Input row */
.aiqa-inputrow { display: flex; gap: 8px; margin-top: 14px; }
.aiqa-input.form-control {
  background: var(--bg-tertiary) !important; color: var(--text-primary) !important;
  border: 1px solid var(--border) !important; border-radius: 12px !important;
  font-size: 14px; padding: 10px 14px;
}
.aiqa-input.form-control:focus { box-shadow: 0 0 0 2px rgba(232,97,44,0.30) !important; }
.aiqa-send {
  background: var(--accent-primary); color: #fff; border: none;
  border-radius: 12px; font-weight: 700; font-size: 14px;
  padding: 0 20px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.aiqa-send:hover { background: var(--accent-hover); }

/* Save row */
.aiqa-saverow { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.aiqa-savebtn {
  background: none; border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 20px; font-size: 12px; font-weight: 700; padding: 5px 14px; cursor: pointer;
  transition: all 0.15s;
}
.aiqa-savebtn:hover { color: #f0a500; border-color: #f0a500; }
.aiqa-savemsg { color: var(--c-success); font-size: 12px; font-weight: 700; }

/* Saved bookmarks */
.aiqa-saved-wrap { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.aiqa-saved-summary {
  cursor: pointer; color: var(--text-secondary); font-size: 13px; font-weight: 700;
  list-style: none; padding: 4px 0;
}
.aiqa-saved-summary:hover { color: var(--accent-primary); }
.aiqa-saved-empty { color: var(--text-muted); font-size: 12px; padding: 8px 0; }
.aiqa-saved-item {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-left: 3px solid #f0a500; border-radius: 10px;
  padding: 12px 14px; margin: 8px 0;
}
.aiqa-saved-q { color: var(--text-primary); font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.aiqa-saved-a { color: var(--text-secondary); font-size: 13.5px; line-height: 1.6; }
.aiqa-saved-a strong { color: var(--accent-primary); }

@media (max-width: 576px) {
  .aiqa-card { padding: 16px 14px; }
  .aiqa-user { margin-left: 8%; }
  .aiqa-send { padding: 0 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   CODING LAB — beginner Python (runs in the browser via Pyodide)
   ═══════════════════════════════════════════════════════════════ */
.code-section-h {
  color: var(--text-muted); font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; margin: 16px 0 8px;
}
.code-lesson-btn {
  display: block !important; width: 100%; text-align: left !important;
  font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px;
  border-radius: 8px !important;
}
.code-status {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; line-height: 1.4;
}
.code-explain {
  color: var(--text-secondary); font-size: 14px; line-height: 1.65;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-left: 3px solid var(--accent-primary);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 6px;
}
.code-explain strong, .code-challenge strong { color: var(--accent-primary); }
.code-explain code, .code-challenge code {
  font-family: 'Consolas','Courier New',monospace; font-size: 13px;
  background: var(--bg-tertiary); color: var(--c-math);
  padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border);
}
.code-editor, textarea.code-editor {
  display: block; width: 100%; min-height: 240px; resize: vertical;
  font-family: 'Consolas','JetBrains Mono','Courier New',monospace !important;
  font-size: 13.5px !important; line-height: 1.55;
  background: #0b1020 !important; color: #e6edf3 !important;
  border: 1px solid var(--border) !important; border-radius: 10px !important;
  padding: 14px !important; tab-size: 4;
}
.code-editor:focus { outline: none; box-shadow: 0 0 0 2px rgba(232,97,44,0.30) !important; }
.code-btn-row { display: flex; gap: 10px; margin-top: 10px; }
.code-run-btn {
  background: #3fb950; color: #fff; border: none; border-radius: 9px;
  font-weight: 800; font-size: 14px; padding: 8px 22px; cursor: pointer;
  transition: filter 0.15s;
}
.code-run-btn:hover { filter: brightness(1.1); }
.code-reset-btn {
  background: none; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 9px; font-weight: 600; font-size: 13px; padding: 8px 16px; cursor: pointer;
}
.code-reset-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.code-output {
  font-family: 'Consolas','Courier New',monospace; font-size: 13.5px; line-height: 1.55;
  background: #0b1020; color: #9fe6a0; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; min-height: 70px; max-height: 320px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.code-challenge {
  color: var(--text-secondary); font-size: 14px; line-height: 1.6;
  background: linear-gradient(135deg, rgba(240,165,0,0.08), var(--bg-secondary));
  border: 1px solid rgba(240,165,0,0.3); border-radius: 10px; padding: 12px 16px;
}
.code-sol-wrap { margin-top: 12px; }
.code-sol-summary {
  cursor: pointer; color: var(--text-muted); font-size: 13px; font-weight: 700; padding: 4px 0;
}
.code-sol-summary:hover { color: var(--accent-primary); }
.code-solution {
  font-family: 'Consolas','Courier New',monospace; font-size: 13px; line-height: 1.55;
  background: var(--bg-tertiary); color: #c9d1d9; border: 1px solid var(--border);
  border-radius: 10px; padding: 14px; white-space: pre-wrap; margin-top: 8px;
}