@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* ═══ Welcome / Quick-5 greeting card ═══ */
.welcome-card {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, rgba(232,97,44,0.16), rgba(188,140,255,0.14) 45%, rgba(63,185,80,0.14));
  border: 1px solid rgba(232,97,44,0.35); border-radius: 18px;
  padding: 18px 22px; margin: 14px 18px;
  animation: wcRise 0.6s cubic-bezier(0.16,1,0.3,1);
}
@keyframes wcRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wc-wave { position: absolute; top: 10px; right: 18px; font-size: 30px;
           animation: wcBounce 2.4s ease-in-out infinite; }
@keyframes wcBounce { 0%,100% { transform: translateY(0) rotate(-8deg);} 50% { transform: translateY(-8px) rotate(8deg);} }
.wc-hi { font-size: 22px; font-weight: 800; color: var(--text-primary); }

/* ═══ Bruno the St Bernard — mascot greeter ═══ */
@keyframes brunoBob { 0%,100% { transform: translateY(0) rotate(-1.5deg); }
                      50% { transform: translateY(-7px) rotate(1.5deg); } }
/* Bruno's frame + glow follow the chosen dream-school accent (var(--accent-primary)) —
   same Bruno, the student's colours. */
.wc-wave-bruno { position: absolute; top: 12px; right: 16px; width: 56px; height: 56px;
                 border-radius: 14px; object-fit: cover; border: 2px solid var(--accent-primary);
                 box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 16px -4px var(--accent-primary);
                 animation: brunoBob 2.6s ease-in-out infinite; }
.wc-bruno { width: 116px; height: 116px; border-radius: 22px; object-fit: cover;
            border: 3px solid var(--accent-primary);
            box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 26px -4px var(--accent-primary);
            animation: brunoBob 2.6s ease-in-out infinite; }
.bruno-cheer { display: block; margin: 0 auto 12px; width: 110px; height: 110px; border-radius: 22px;
               object-fit: cover; border: 3px solid var(--accent-primary);
               box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 26px -4px var(--accent-primary);
               animation: brunoPop 0.5s cubic-bezier(0.34,1.4,0.5,1); }
@keyframes brunoPop { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } }
.landing-bruno-wrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.landing-bruno { width: 132px; height: 132px; border-radius: 26px; object-fit: cover;
                 border: 3px solid var(--accent-primary);
                 box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 30px -4px var(--accent-primary);
                 animation: brunoBob 2.6s ease-in-out infinite; }
.landing-bruno-bubble { position: relative; margin-top: 12px; background: #fff; color: #1a1f2e;
                        font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 16px;
                        box-shadow: 0 6px 18px rgba(0,0,0,0.35); max-width: 320px; text-align: center; }
.landing-bruno-bubble::before { content: ""; position: absolute; top: -8px; left: 50%;
                        transform: translateX(-50%); border-left: 9px solid transparent;
                        border-right: 9px solid transparent; border-bottom: 9px solid #fff; }
.wc-sub { color: var(--text-secondary); font-size: 13.5px; margin-top: 2px; }
.wc-quote-box { background: rgba(13,17,23,0.45); border-radius: 12px; padding: 10px 16px;
                margin: 12px 0; border-left: 4px solid var(--accent-primary); }
.wc-quote-label { font-size: 11px; font-weight: 700; color: var(--accent-primary); letter-spacing: 0.04em; }
.wc-quote { font-family: 'Caveat','Comic Sans MS',cursive; font-size: 22px; color: var(--text-primary); line-height: 1.3; }
.wc-quote-who { font-size: 12px; color: var(--text-muted); text-align: right; }
.wc-cheer { color: var(--text-primary); font-size: 14px; font-weight: 600; margin: 6px 0 12px; }
.wc-start-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wc-start-btn { background: var(--accent-primary) !important; border: none !important; color: #fff !important;
                font-weight: 800 !important; border-radius: 12px !important; padding: 11px 22px !important;
                box-shadow: 0 4px 16px rgba(232,97,44,0.4); }
.wc-start-btn:hover { filter: brightness(1.08); }
.wc-start-note { color: var(--text-muted); font-size: 12px; }
.wc-replay-link { background: transparent; border: none; color: var(--accent-primary);
                  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 4px 2px;
                  text-decoration: underline; text-underline-offset: 3px; }
.wc-replay-link:hover { filter: brightness(1.15); }
.wc-qtext { font-size: 15px; color: var(--text-primary); white-space: pre-wrap; line-height: 1.6; }
.wc-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }
.wc-choice { background: var(--bg-tertiary) !important; border: 1.5px solid var(--border) !important;
             color: var(--text-primary) !important; font-weight: 800 !important; font-size: 18px !important;
             width: 56px; height: 56px; border-radius: 14px !important; transition: all 0.12s; }
.wc-choice:hover { border-color: var(--accent-primary) !important; transform: translateY(-2px); }
.wc-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wc-confetti-bit { position: absolute; top: -24px; font-size: 20px; animation: wcFall 2.6s linear infinite; }
@keyframes wcFall { 0% { transform: translateY(-24px) rotate(0); opacity: 1; }
                    100% { transform: translateY(360px) rotate(360deg); opacity: 0; } }

/* ═══ Floating daily welcome modal — opens like a greeting card ═══ */
.wc-floating-modal .modal-dialog { perspective: 1500px; }
.wc-floating-modal .modal-content {
  border: none; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, #1b2130 0%, #161b26 60%, #1a1526 100%);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(232,97,44,0.35),
              0 0 60px rgba(232,97,44,0.18);
  transform-origin: top center;
  animation: wcCardOpen 0.85s cubic-bezier(0.34,1.25,0.5,1) both;
}
/* the card "lid" folds open from the top, with a little overshoot, like opening a card */
@keyframes wcCardOpen { 0%   { opacity: 0; transform: rotateX(-92deg) translateY(-12px); }
                        55%  { opacity: 1; transform: rotateX(11deg); }
                        78%  { transform: rotateX(-5deg); }
                        100% { opacity: 1; transform: rotateX(0deg); } }
/* the contents fade up AFTER the card has opened */
.wc-modal-welcome { text-align: center; padding: 14px 18px 8px;
                    animation: wcContentIn 0.5s ease 0.45s both; }
@keyframes wcContentIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.wc-modal-wave { font-size: 56px; line-height: 1; animation: wcBounce 2.2s ease-in-out infinite; }
.wc-modal-hi {
  font-size: 46px; font-weight: 900; line-height: 1.05; margin-top: 6px;
  background: linear-gradient(90deg, #ff8a4c, #f0a500 45%, #bc8cff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.wc-modal-day { font-size: 26px; font-weight: 800; color: var(--text-primary); margin: 2px 0 4px; }
.wc-modal-quotebox {
  background: rgba(13,17,23,0.5); border-radius: 14px; padding: 14px 20px;
  margin: 16px auto 6px; max-width: 480px; border-left: 4px solid var(--accent-primary);
}
.wc-modal-quote { font-family: 'Caveat','Comic Sans MS',cursive; font-size: 30px; line-height: 1.25;
                  color: var(--text-primary); }
.wc-modal-invite { color: var(--text-secondary); font-size: 15px; line-height: 1.55;
                   max-width: 480px; margin: 14px auto 4px; }
.wc-modal-btns { display: flex; gap: 14px; justify-content: center; align-items: center;
                 flex-wrap: wrap; margin: 20px 0 6px; }
.wc-modal-start { font-size: 18px !important; padding: 13px 30px !important; }
.wc-modal-later { background: transparent !important; border: 1.5px solid var(--border) !important;
                  color: var(--text-muted) !important; font-weight: 700 !important;
                  border-radius: 12px !important; padding: 12px 22px !important; }
.wc-modal-later:hover { color: var(--text-primary) !important; border-color: var(--text-muted) !important; }

/* ═══ Lab sub-tab navigation — light open + smooth switching ═══ */
/* The visible pane fades in on every show (display:none→block restarts the animation), so moving
   between explorers feels smooth instead of an instant hard cut. */
@keyframes apfFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.apf-fadein { animation: apfFadeIn 0.32s ease; }
/* Shimmer skeleton shown for the split-second a pane builds the first time. */
@keyframes apfShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ═══════════════════════════════════════════════════════════════
   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;
}
/* Placeholder text — without this it falls back to an invisible browser default, so empty
   fields (e.g. "Referral code (optional)") looked blank on login/signup. Force a visible
   muted colour everywhere (opacity:1 because Firefox dims placeholders by default). */
.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control:-ms-input-placeholder {
  color: var(--text-muted) !important;
  opacity: 1 !important;
}
.form-label { color: var(--text-secondary) !important; font-size: 13px; font-weight: 600; }

/* Login / signup fields — the global theme paints inputs dark-on-dark, which on the dark auth
   card made the boxes nearly invisible. Scope a high-contrast style to the landing page so the
   boxes (and their borders) clearly stand out. More specific than `.form-control`, so it wins. */
.landing-page .form-control,
.landing-page .form-select {
  background: rgba(255,255,255,0.09) !important;
  border: 1.5px solid rgba(255,255,255,0.40) !important;
  color: #ffffff !important;
}
.landing-page .form-control::placeholder { color: #c4ccd4 !important; opacity: 1 !important; }
.landing-page .form-control:focus,
.landing-page .form-select:focus {
  background: rgba(255,255,255,0.14) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 2px rgba(232,97,44,0.35) !important;
}
/* Searchable dropdowns (sport + dream school) on the auth page — match the inputs' contrast */
.landing-page .Select-control {
  background: rgba(255,255,255,0.09) !important;
  border: 1.5px solid rgba(255,255,255,0.40) !important;
  min-height: 38px !important;
}
.landing-page .Select-value-label,
.landing-page .Select-input > input { color: #ffffff !important; }
.landing-page .Select-placeholder { color: #c4ccd4 !important; }

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

  /* ── Labs on phones ── chart shows first (handled in _explorer), and the type is
     dialled down: the Plotly readouts/axis labels were sized for a ~700px desktop chart,
     so on a ~340px phone they looked oversized. Position is anchored, only size changes. */
  .lab-card { padding: 11px !important; margin-bottom: 10px !important; }
  .lab-callout { font-size: 12px !important; line-height: 1.5 !important; padding: 9px 11px !important; }
  .lab-note { font-size: 12px !important; }
  .js-plotly-plot .annotation-text { font-size: 10px !important; }
  .js-plotly-plot .xtick text, .js-plotly-plot .ytick text,
  .js-plotly-plot .legendtext { font-size: 9px !important; }
  /* Give the chart a touch more width by trimming the lab wrapper's side padding */
  .lab-graph { min-width: 0; }
  /* Legends reserve width and squeeze the core figure on a narrow screen — hide them on phones
     (the labs already show colour-coded readouts in the chart corner). */
  .js-plotly-plot .legend { display: none !important; }

  /* ── SINGLE COLUMN ON PHONES ──
     Every fixed-width column (Dash `width=N` → Bootstrap `.col-N`) keeps its width at ALL sizes,
     so multi-column tabs (Reading's 3 strategy cards, Science time-budget, Essay draft+feedback,
     Planner week/streak/subjects, Report score+dates, Admin, Math formula sheet) cram side-by-side
     on a phone. Force them full-width so they stack one-per-row. (Responsive `.col-md-*` already
     stack; `.col-12` / `.col-auto` are untouched, and the lab chart/controls keep their own order.) */
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* ── AI tutor chat: compact so explanations don't eat the whole screen ── */
  .aiqa-answer, .aiqa-card { font-size: 13px !important; line-height: 1.5 !important; }
  .aiqa-answer { padding: 9px 11px !important; }
  .aiqa-user { font-size: 13px !important; padding: 8px 11px !important; }
  .aiqa-chip { font-size: 11px !important; padding: 6px 9px !important; }
  .aiqa-card { padding: 12px !important; }
}

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

/* react-select v5 (`.Select__*` classes used by current dcc.Dropdown) — without this the menu renders
   WHITE with invisible text (the white-on-white bug on signup's college/sport pickers). Dark everywhere. */
.Select__control { background: var(--bg-tertiary) !important; border: 1px solid var(--border) !important;
                   box-shadow: none !important; }
.Select__control--is-focused { border-color: var(--accent-primary) !important; }
.Select__menu, .Select__menu-list { background: var(--bg-secondary) !important;
                   border: 1px solid var(--border) !important; z-index: 1300 !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__single-value { color: var(--text-primary) !important; }
.Select__input-container, .Select__input, .Select__input input { color: var(--text-primary) !important; }
.Select__placeholder { color: var(--text-muted) !important; }
.Select__indicator { color: var(--text-muted) !important; }
.Select__indicator-separator { background-color: var(--border) !important; }
/* high-contrast control on the dark auth card */
.landing-page .Select__control { background: rgba(255,255,255,0.09) !important;
                   border: 1.5px solid rgba(255,255,255,0.40) !important; }
.landing-page .Select__single-value, .landing-page .Select__input,
.landing-page .Select__input input { color: #ffffff !important; }
.landing-page .Select__placeholder { color: #c4ccd4 !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: transparent;
  border: none;
  padding: 2px 2px 0;
  min-height: 44px; max-height: 460px; overflow-y: auto;
  scroll-behavior: smooth;
}

/* The AI answer — a left "assistant" chat bubble, so it reads as a MESSAGE, not an input box */
.aiqa-answer {
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px 14px 14px 14px;
  color: var(--text-primary);
  font-size: 15px; line-height: 1.72;
  padding: 12px 16px; margin: 0 10% 12px 0;
  animation: aiqaFade 0.45s cubic-bezier(0.16,1,0.3,1);
}
.aiqa-greeting { color: var(--text-secondary); border-left-color: var(--border); }
.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);
}
/* Give rendered MathJax equations room to breathe */
.aiqa-answer mjx-container[display="true"] { margin: 12px 0 !important; }
.aiqa-answer mjx-container { font-size: 116% !important; }
@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 zone — an unmistakable "type here" pill, clearly separate from the answer bubbles above */
.aiqa-inputlabel {
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 16px 0 6px 2px;
}
.aiqa-inputrow {
  display: flex; gap: 8px; align-items: center;
  background: var(--bg-tertiary);
  border: 1.5px solid var(--border);
  border-radius: 14px; padding: 5px 5px 5px 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.aiqa-inputrow:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(232,97,44,0.18);
}
.aiqa-input.form-control {
  background: transparent !important; color: var(--text-primary) !important;
  border: none !important; box-shadow: none !important;
  border-radius: 10px !important; font-size: 14px; padding: 9px 8px; flex: 1;
}
.aiqa-input.form-control:focus { box-shadow: none !important; }
.aiqa-input.form-control::placeholder { color: var(--text-muted); }
.aiqa-send {
  background: var(--accent-primary); color: #fff; border: none;
  border-radius: 10px; font-weight: 700; font-size: 14px;
  padding: 9px 18px; 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;
}