/* ============================================================
   MOBILE BREAKPOINT CONTRACT — established 2026-04-27

   This codebase uses ONLY three breakpoints. Any new media query
   must use one of these. Do NOT introduce 600/640/720/760/900/etc.

   @media (max-width: 1024px)  — tablet (e.g. iPad portrait, narrow laptop)
   @media (max-width: 768px)   — large phone / small tablet
   @media (max-width: 480px)   — phone (target: iPhone 13 mini @ 375pt)

   DESKTOP-FIRST RULE:
   Base/unscoped rules describe the desktop intent. Mobile is
   ALWAYS expressed as an override inside one of the three
   media queries above. Never edit a base rule "to also work
   on mobile" — that breaks desktop within 3 commits.

   Legacy stragglers (720, 760, 900, 640, 600, 520) are being
   retired as we touch each page. Don't add new ones.
   ============================================================ */

/* STAAR Math Prep — base styles */
:root {
  --navy: #0b2545;
  --blue: #1d4ed8;
  --blue-light: #dbeafe;
  --accent: #f59e0b;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --success: #16a34a;
  --error: #dc2626;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --max: 1100px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  height: 100%;
  background: #0a1628;
  /* Reserve scrollbar space on every page so the header doesn't shift
     left/right when navigating between short pages (no scrollbar) and
     long pages (scrollbar appears). */
  scrollbar-gutter: stable;
  overflow-y: scroll;
  /* §50 (May 12): kill any horizontal scroll caused by absolute-positioned
     background glows / mockup overflows / off-by-one rounding on phone
     widths. `overflow-x: clip` doesn't establish a scroll container so it
     leaves `position: sticky` working everywhere; older browsers fall back
     to `hidden` which is also fine for this page tree (no sticky on html). */
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #0a1628;
  color: var(--text);
  line-height: 1.55;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Belt-and-suspenders: body uses `clip` so sticky elements on inner
     sections (e.g. mobile stats drawer, sticky CTAs) still pin correctly.
     `hidden` would create a scroll container and break position: sticky. */
  overflow-x: clip;
}
body > .site-footer { margin-top: auto; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

/* Header — glass nav */
.site-header {
  background: rgba(10, 22, 40, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
/* §109 premium polish — wordmark-only treatment. No icon gap; slight
   positive letter-spacing so 'GradeEarn' breathes (Stripe / Linear /
   Anthropic-class). Pairs with brandHtml() in js/site-header.js
   dropping the star SVG and the hardcoded SVG strip in every .html. */
.brand--wordmark { gap: 0; letter-spacing: 0.02em; }
.brand--wordmark .brand-text { letter-spacing: 0.02em; }
.brand:hover { text-decoration: none; opacity: 0.92; }
.brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.35)) drop-shadow(0 0 1px rgba(251, 191, 36, 0.4));
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand:hover .brand-logo { transform: rotate(72deg) scale(1.06); }
/* §64 — Wordmark unified to all-white text + gold star icon.
   Was 'Grade' white + 'Earn' gold-gradient (read coupon-tier
   split). Now 'GradeEarn' is a single confident white wordmark;
   the gold accent lives only in the star icon to its left. */
.brand-text { font-weight: 700; color: #ffffff; }
.brand-text-accent {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}
/* Pill-group nav */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  padding: 4px;
}
.nav a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 16px;
  border-radius: 999px;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav a:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.04);
  text-decoration: none;
}
.nav a.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  font-weight: 500;
}

/* §64 — Sign-in button: ghost style on navy+gold palette.
   Was a pure white pill that read foreign to the brand. Now a
   gold-bordered ghost button (transparent fill, gold text, gold
   border) that visually belongs alongside the grade buttons.
   Matches the family: 12px radius, gold border, scale on tap.
   Applies on every page where the top-right Sign in renders. */
.user-slot .user-signin,
.user-slot .user-signin.btn {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fbbf24;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  box-shadow: none;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.user-slot .user-signin:hover,
.user-slot .user-signin.btn:hover {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.75);
  transform: none;
  color: #fcd34d;
}
.user-slot .user-signin:active,
.user-slot .user-signin.btn:active {
  background: rgba(251, 191, 36, 0.18);
  transform: scale(0.98);
}

/* Hero — atmospheric layered background */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #060d1f;
  color: #fff;
  padding: 48px 0 100px;
  min-height: 720px;
}
/* Layer 0a: amber drift glow (top-right) */
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.06) 30%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: drift-amber 20s ease-in-out infinite;
}
/* Layer 0b: blue drift glow (bottom-left) */
.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.08) 30%, transparent 60%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  animation: drift-blue 25s ease-in-out infinite;
}
@keyframes drift-amber {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(-40px, 30px) scale(1.05); }
  66%      { transform: translate(30px, -20px) scale(0.95); }
}
@keyframes drift-blue {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, -40px) scale(1.08); }
}

/* Layer 1: subtle grid (Linear/Vercel) — masked separate layer */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 80%);
  pointer-events: none;
  z-index: 1;
}

/* Layer 1: starfield — twinkling stars (brand fit) */
.starfield {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.star {
  position: absolute;
  width: var(--size, 1.5px);
  height: var(--size, 1.5px);
  background: #ffffff;
  border-radius: 50%;
  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.8),
    0 0 8px rgba(251, 191, 36, 0.4);
  opacity: 0;
  animation: twinkle 4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 0.9; transform: scale(1); }
}

/* Layer 1: cursor spotlight */
.hero-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(251, 191, 36, 0.06),
    transparent 40%
  );
  transition: background 0.3s ease;
}

/* Layer 3: bottom fade-out into next section */
.hero-bottom-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, #060d1f 100%);
  pointer-events: none;
  z-index: 3;
}

/* Layer 2: hero content sits above all atmosphere */
.hero > .container,
.hero-content { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .star, .hero::before, .hero::after,
  .mockup-card--main, .mockup-card--accent-top, .mockup-card--accent-bottom,
  .headline-accent {
    animation: none !important;
  }
}

.hero h1,
.hero-headline {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(48px, 5.5vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 640px;
  margin: 32px 0 24px;
}
.hero h1 .hero-accent,
.hero-headline .headline-accent {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #fbbf24 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.hero p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.72);
  max-width: 560px;
  margin: 0 0 40px;
}
@media (max-width: 640px) {
  .hero { padding: 80px 0 96px; }
  .hero p { font-size: 16px; }
}

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero 2-column layout */
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero-left { max-width: 600px; }
.hero-right { position: relative; }

@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; gap: 48px; }
  .hero-left { max-width: none; }
}

/* Hero visual / floating mockup */
.hero-visual {
  position: relative;
  width: 100%;
  height: 520px;
  perspective: 1200px;
  pointer-events: none;
}
.mockup-card { will-change: transform; }

.mockup-card--main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 380px;
  max-width: calc(100% - 24px);
  background: linear-gradient(180deg, #1a2540 0%, #141d33 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 24px 48px -12px rgba(0, 0, 0, 0.5),
    0 8px 16px -4px rgba(0, 0, 0, 0.3),
    0 0 80px -20px rgba(251, 191, 36, 0.15);
  transform: translate(-50%, -50%) rotate(-2deg);
  animation: float-main 6s ease-in-out infinite;
  pointer-events: auto;
}
@keyframes float-main {
  0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) translateY(0); }
  50%      { transform: translate(-50%, -50%) rotate(-2deg) translateY(-12px); }
}
.mockup-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.mockup-tag {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
}
.mockup-progress {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.mockup-question {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}
.math-highlight {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
}
.mockup-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}
.mockup-option {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  cursor: default;
  transition: all 0.2s ease;
}
.mockup-option--correct {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, 0.2),
    0 0 20px -4px rgba(16, 185, 129, 0.4);
}
.mockup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mockup-streak, .mockup-points {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}
.mockup-points { color: #fbbf24; }

.mockup-card--accent-top,
.mockup-card--accent-bottom {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.92) 0%, rgba(20, 29, 51, 0.92) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4);
  pointer-events: auto;
}
.mockup-card--accent-top {
  top: 8%;
  right: 4%;
  transform: rotate(4deg);
  animation: float-accent-1 7s ease-in-out infinite;
}
.mockup-card--accent-bottom {
  bottom: 10%;
  left: 2%;
  transform: rotate(-3deg);
  animation: float-accent-2 8s ease-in-out infinite;
}
@keyframes float-accent-1 {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-16px); }
}
@keyframes float-accent-2 {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-10px); }
}
.accent-icon { font-size: 24px; line-height: 1; }
.accent-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}
.accent-value {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

@media (max-width: 1024px) {
  .hero-visual { height: 420px; transform: scale(0.9); transform-origin: top center; }
  .mockup-card--main { width: 340px; }
}
@media (max-width: 640px) {
  .hero-visual { height: 360px; }
  .mockup-card--main { width: 300px; padding: 20px; }
  .mockup-question { font-size: 24px; }
  .mockup-card--accent-top,
  .mockup-card--accent-bottom { display: none; }
  @keyframes float-main {
    0%, 100% { transform: translate(-50%, -50%) rotate(-2deg) translateY(0); }
    50%      { transform: translate(-50%, -50%) rotate(-2deg) translateY(-8px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mockup-card--main,
  .mockup-card--accent-top,
  .mockup-card--accent-bottom { animation: none; }
}

/* Live student count pill — premium glass */
.hero-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.hero-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.2),
    0 0 12px rgba(16, 185, 129, 0.5);
  animation: hero-live-pulse 2s ease-in-out infinite;
}
@keyframes hero-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Dashboard live-count pill — same visual treatment as the hero
   live-pill but mounted inside the logged-in dashboard. Sits above
   the "Lifetime stats" eyebrow chip so it's the first thing the kid
   sees on home. */
.dash-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0 0 12px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 999px;
}
.dash-live-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, 0.2),
    0 0 12px rgba(16, 185, 129, 0.5);
  animation: hero-live-pulse 2s ease-in-out infinite;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: transform 0.05s ease, background 0.15s ease;
}

/* Hero buttons — premium */
.hero .btn-primary,
.hero .btn-secondary,
.btn-primary,
.btn-secondary {
  height: 48px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero .btn-primary,
.btn-primary {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color: #0a1628;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(251, 191, 36, 0.3),
    0 4px 12px -2px rgba(251, 191, 36, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero .btn-primary:hover,
.btn-primary:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 6px 16px -2px rgba(251, 191, 36, 0.45),
    0 3px 6px rgba(0, 0, 0, 0.18);
}
.hero .btn-primary:active,
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  text-decoration: none;
}
.btn:active { transform: translateY(1px); }

/* Sections */
section { padding: 56px 0; }
section h2 { font-size: 1.6rem; margin: 0 0 24px; color: var(--navy); }

/* Rewards / earn banner — premium dark glass callout */
.rewards-section {
  background: #060d1f;
  position: relative;
  padding: 0 32px;
}
.earn-banner,
.rewards-callout {
  position: relative;
  max-width: 1200px;
  margin: -60px auto 80px;
  padding: 28px 40px;
  background: linear-gradient(135deg, rgba(26, 37, 64, 0.6) 0%, rgba(20, 29, 51, 0.6) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px -12px rgba(0, 0, 0, 0.4),
    0 8px 16px -4px rgba(0, 0, 0, 0.2);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  z-index: 5;
  overflow: hidden;
}
.earn-banner::before,
.rewards-callout::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, transparent 70%);
  filter: blur(40px);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  inset: auto auto auto -100px;
}
.earn-banner > *,
.rewards-callout > * {
  position: relative;
  z-index: 1;
}

.earn-banner-icon,
.rewards-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 0 24px -4px rgba(251, 191, 36, 0.3);
  position: relative;
  font-size: 0;
}
.earn-banner-icon::after,
.rewards-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent 60%);
  pointer-events: none;
}

.earn-banner-body,
.rewards-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.earn-banner-title,
.rewards-title {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
}
.earn-banner-sub,
.rewards-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 720px;
}

.earn-banner-cta,
.rewards-cta {
  flex-shrink: 0;
  white-space: nowrap;
  height: 44px;
  padding: 0 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(251, 191, 36, 0.3),
    0 4px 12px -2px rgba(251, 191, 36, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}
.earn-banner-cta:hover,
.rewards-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 8px 20px -4px rgba(251, 191, 36, 0.45),
    0 4px 8px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.rewards-cta-arrow { transition: transform 0.2s ease; }
.rewards-cta:hover .rewards-cta-arrow,
.earn-banner-cta:hover .rewards-cta-arrow { transform: translateX(2px); }

@media (max-width: 768px) {
  .earn-banner,
  .rewards-callout {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 24px;
    gap: 16px;
    margin: -40px 16px 60px;
  }
  .earn-banner-icon,
  .rewards-icon { margin: 0 auto; }
  .earn-banner-cta,
  .rewards-cta { width: 100%; justify-content: center; }
}

/* Grade grid */
.grade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* Premium dark grade card — applies anywhere the shared GradeCard component is used.
   See also: .grades-section .grade-card overrides below for landing-page hover glow. */
.grade-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 22px;
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease,
              background 0.3s ease,
              box-shadow 0.3s ease;
  overflow: visible;
  text-decoration: none;
}
.grade-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 191, 36, 0.3);
  background: linear-gradient(180deg, rgba(30, 42, 72, 0.6) 0%, rgba(24, 33, 58, 0.6) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(251, 191, 36, 0.15),
    0 16px 32px -8px rgba(0, 0, 0, 0.4);
  text-decoration: none;
}
/* Locked card — kid is below the user's grade level */
.grade-card--locked {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.4);
}
.grade-card--locked:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
}
/* Current-grade badge variant (gold + check vibe via copy) */
.grade-card-badge--current {
  background: linear-gradient(180deg, #c7d2fe 0%, #818cf8 100%);
  color: #0a1628;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}
.grade-card-badge--locked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
  box-shadow: none;
}

/* ---------- Premium grades section (landing) ---------- */
.grades-section {
  background: #060d1f;
  padding: 80px 32px 120px;
  position: relative;
}
.grades-section-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}
.grades-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 48px;
}
.grades-header-text { max-width: 560px; }
.grades-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(36px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 14px 0;
}
.grades-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}
.grades-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .grades-section { padding: 56px 20px 80px; }
  .grades-header { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 32px; }
}

.grades-section .grade-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.grades-section .grade-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 22px;
  color: #ffffff;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease,
              background 0.3s ease,
              box-shadow 0.3s ease;
  overflow: visible;
}
.grades-section .grade-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at 100% 0%, rgba(251, 191, 36, 0.06), transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.grades-section .grade-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 191, 36, 0.3);
  background: linear-gradient(180deg, rgba(30, 42, 72, 0.6) 0%, rgba(24, 33, 58, 0.6) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(251, 191, 36, 0.15),
    0 16px 32px -8px rgba(0, 0, 0, 0.4),
    0 0 24px -8px rgba(251, 191, 36, 0.3);
  text-decoration: none;
}
.grades-section .grade-card:hover::before { opacity: 1; }

.grade-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.grade-card-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.9);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.18);
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.grade-card-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.grade-card-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
}
.grade-card-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.grade-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.grade-card-age {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}
.grade-card-arrow {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.grades-section .grade-card:hover .grade-card-arrow {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border-color: rgba(251, 191, 36, 0.5);
  color: #0a1628;
  transform: translateX(2px);
}

/* Most popular ribbon (Grade 3) — sits half-outside the top edge */
.grade-card-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #0a1628;
  background: linear-gradient(180deg, #fde68a 0%, #fbbf24 60%, #f59e0b 100%);
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
  z-index: 3;
}
.grades-section .grade-card--popular {
  border-color: rgba(251, 191, 36, 0.22);
}

/* Kindergarten variant — gentle indigo */
.grades-section .grade-card--kinder {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.12) 0%, rgba(20, 29, 51, 0.55) 100%);
  border-color: rgba(129, 140, 248, 0.22);
}
.grades-section .grade-card--kinder:hover {
  border-color: rgba(129, 140, 248, 0.45);
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.18) 0%, rgba(24, 33, 58, 0.6) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(129, 140, 248, 0.2),
    0 16px 32px -8px rgba(0, 0, 0, 0.4),
    0 0 24px -8px rgba(99, 102, 241, 0.35);
}
.grades-section .grade-card--kinder .grade-card-icon {
  background: rgba(129, 140, 248, 0.12);
  border-color: rgba(129, 140, 248, 0.3);
  color: #c7d2fe;
}

@media (prefers-reduced-motion: reduce) {
  .grades-section .grade-card,
  .grades-section .grade-card:hover,
  .grades-section .grade-card .grade-card-arrow,
  .grades-section .grade-card:hover .grade-card-arrow { transition: none; transform: none; }
}

/* Footer */
.site-footer {
  background: var(--navy);
  color: #cbd5e1;
  padding: 32px 0;
  margin-top: 64px;
  font-size: 0.9rem;
}
.site-footer a { color: #cbd5e1; }

/* Practice / generic content */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}

/* Grade detail */
.grade-header { margin-bottom: 32px; }
.unit-list { display: grid; gap: 18px; }
.unit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.unit-card h3 { margin: 4px 0 6px; color: var(--navy); }
.unit-order {
  display: inline-block;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.unit-cat { color: var(--muted); font-size: 0.85rem; margin-bottom: 8px; }
.unit-summary { margin: 8px 0 14px; color: var(--text); }
.lesson-list { list-style: none; padding: 0; margin: 0 0 14px; border-top: 1px solid var(--border); }
.lesson-list li { border-bottom: 1px solid var(--border); }
.lesson-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  color: var(--text);
}
.lesson-list a:hover { color: var(--blue); text-decoration: none; }
.lesson-teks { font-size: 0.8rem; color: var(--muted); }

/* Practice */
.practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}
.practice-main { min-width: 0; }
.practice-header { margin-bottom: 24px; }
.practice-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
}
.practice-title-row h2 { margin: 0; }
.btn-restart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--navy);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.btn-restart:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--navy);
}
.btn-restart:hover svg { transform: rotate(-45deg); }
.btn-restart svg { transition: transform 0.25s ease; }
.back-link { font-size: 0.9rem; color: var(--muted); }
.progress-bar {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin: 16px 0 6px;
}
.progress-fill {
  height: 100%;
  background: var(--blue);
  width: 0;
  transition: width 0.3s ease;
}
.progress-text { color: var(--muted); font-size: 0.85rem; }

.question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.q-meta { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.q-prompt { font-size: 1.2rem; color: var(--navy); margin-bottom: 18px; line-height: 1.5; }
.q-body { display: grid; gap: 10px; margin-bottom: 18px; }

.choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.1s ease, border-color 0.1s ease;
}
.choice:hover { background: var(--blue-light); border-color: var(--blue); }
.choice:has(input:checked) {
  background: var(--blue-light);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.choice input { margin: 0; transform: scale(1.15); accent-color: var(--blue); }
.choice .choice-symbol {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  min-width: 1.4em;
  display: inline-block;
  text-align: center;
}
.choice .choice-hint { color: var(--text-muted, #6b7280); font-size: 0.95rem; }

.num-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.num-input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }

/* Feedback */
.feedback {
  margin-top: 16px;
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--border);
}
.feedback.correct { background: #f0fdf4; border-color: #bbf7d0; }
.feedback.incorrect { background: #fef2f2; border-color: #fecaca; }
.feedback-head { font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.feedback.correct .feedback-head { color: var(--success); }
.feedback.incorrect .feedback-head { color: var(--error); }
.feedback-body p { margin: 6px 0; }
.feedback-actions { margin-top: 14px; }

/* AI tutor */
.tutor-box { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #fecaca; }
.tutor-output {
  margin-top: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  line-height: 1.55;
}
.tutor-output p { margin: 8px 0; }
.tutor-output p:first-child { margin-top: 0; }
.tutor-output p:last-child { margin-bottom: 0; }
.tutor-output ol,
.tutor-output ul {
  margin: 8px 0;
  padding-left: 22px;
}
.tutor-output ol { list-style: decimal; }
.tutor-output ul { list-style: disc; }
.tutor-output li { margin: 4px 0; }
.tutor-output li::marker { color: var(--amber); font-weight: 700; }
.tutor-output strong { color: var(--navy); font-weight: 700; }
.tutor-output em { font-style: italic; }
.tutor-output code {
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}
.tutor-msg { padding: 8px 0; border-top: 1px solid var(--border); }
.tutor-msg:first-child { border-top: 0; }
.tutor-msg.user { color: var(--text); }
.tutor-msg.assistant { color: var(--text); }
.tutor-msg.loading {
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Rainbow thinking spinner */
.rainbow-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: conic-gradient(
    #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444
  );
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%);
          mask: radial-gradient(circle, transparent 56%, #000 58%);
  animation: rainbow-spin 1.1s linear infinite;
  vertical-align: middle;
  flex-shrink: 0;
}
.tutor-btn .rainbow-spinner { width: 16px; height: 16px; }
@keyframes rainbow-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .rainbow-spinner { animation-duration: 3s; }
}
.tutor-followup {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  align-items: stretch;
}
.tutor-followup input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.tutor-followup input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.tutor-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.tutor-send:hover:not(:disabled) { background: #fbbf24; }
.tutor-send:active { transform: translateY(1px); }
.tutor-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Performance panel */
.performance-panel {
  position: sticky;
  top: 80px;
  display: grid;
  gap: 14px;
}
.perf-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.perf-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 8px;
}
.perf-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.perf-ring-wrap {
  display: flex;
  justify-content: center;
  margin: 6px 0 12px;
}
.perf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  text-align: center;
}
.perf-stats .stat {
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--bg);
}
.stat-num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.recent-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 5px;
}
.recent-dots .dot {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: #e2e8f0;
}
.recent-dots .dot.correct { background: var(--success); }
.recent-dots .dot.incorrect { background: var(--error); }

.unit-rows { display: grid; gap: 9px; }
.unit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  font-size: 0.8rem;
}
.unit-row-title {
  grid-column: 1;
  grid-row: 1;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.unit-row-pct {
  grid-column: 2;
  grid-row: 1;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.unit-row-bar {
  grid-column: 1 / span 2;
  grid-row: 2;
  height: 5px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 3px;
}
.unit-row-fill {
  height: 100%;
  background: var(--blue);
  transition: width 0.4s ease, background 0.3s ease;
}
.unit-row.dim .unit-row-title { color: var(--muted); }

@media (max-width: 900px) {
  .practice-layout { grid-template-columns: 1fr; }
  .performance-panel { position: static; }
}

/* Branded modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.18s ease;
  padding: 20px;
}
.modal-overlay.open { opacity: 1; }
.modal-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 26px 26px 20px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.2s ease;
  border-top: 4px solid var(--amber);
}
.modal-overlay.open .modal-card { transform: translateY(0) scale(1); }
.modal-title {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
}
.modal-message {
  margin: 0 0 20px;
  color: var(--text);
  line-height: 1.5;
  font-size: 0.95rem;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  background: var(--bg);
  color: var(--navy);
}

/* Toast */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  z-index: 1100;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Restart flash */
@keyframes restart-flash {
  0%   { background: rgba(245, 158, 11, 0); }
  30%  { background: rgba(245, 158, 11, 0.18); }
  100% { background: rgba(245, 158, 11, 0); }
}
.practice-main.flash {
  animation: restart-flash 0.7s ease;
  border-radius: var(--radius);
}

/* Pre-quiz preparing-your-set loader */
.prep-loader {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 520px;
  margin: 60px auto;
}
.prep-loader .rainbow-spinner { width: 36px; height: 36px; }
.prep-title {
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
}
.prep-sub {
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

@media (max-width: 600px) {
  .hero { padding: 48px 0; }
  .hero h1 { font-size: 1.75rem; }
  .nav { gap: 12px; }
  .q-prompt { font-size: 1.05rem; }
}

/* ========== Auth (local profiles) ========== */
.user-slot { display: flex; align-items: center; gap: 8px; position: relative; }

/* User pill (header) — premium dark glass, applies on every page */
.user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.user-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}
.user-pill svg { color: rgba(255, 255, 255, 0.5); }
.user-pill-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

/* User dropdown menu — dark glass card */
/* Desktop default: hide the mobile nav inside the user dropdown
   (it shows again at <=768px per the mobile override block). */
.user-menu-mobile-nav { display: none; }

.user-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: rgba(15, 23, 42, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 16px 40px rgba(0, 0, 0, 0.5);
  padding: 6px;
  min-width: 180px;
  z-index: 1200;
}
.user-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.user-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.user-signin { padding: 8px 16px; font-size: 0.85rem; }

/* Profile avatar */
.profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.profile-avatar.small { width: 26px; height: 26px; font-size: 0.8rem; }

/* Auth modal extras */
.auth-modal .modal-card {
  max-width: 420px;
  padding: 28px 28px 22px;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.auth-modal .modal-title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.auth-modal .modal-message {
  margin-bottom: 22px;
  font-size: 0.9rem;
  color: var(--muted);
}
.auth-modal .modal-actions {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.auth-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 16px 0 8px;
}
.auth-label:first-of-type { margin-top: 4px; }
.auth-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 0.98rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--navy);
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.auth-input::placeholder { color: var(--muted); opacity: 0.65; }
.auth-input:hover { border-color: var(--navy); }
.auth-input:focus {
  outline: none;
  border-color: var(--amber);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.pin-input {
  letter-spacing: 0.6em;
  text-align: center;
  font-size: 1.4rem;
  padding: 14px;
}
.auth-help { color: var(--muted); font-size: 0.78rem; margin: 4px 0 0; }
.auth-error { color: var(--error); font-size: 0.85rem; margin: 8px 0 0; }

.modal-full { width: 100%; }
.modal-tight { margin-top: 8px; }
.modal-divider {
  display: flex;
  align-items: center;
  margin: 18px 0 12px;
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.modal-divider::before,
.modal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.modal-divider span { padding: 0 12px; }

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
  position: relative;
}
.profile-tile:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
}
.profile-tile .profile-avatar { width: 42px; height: 42px; font-size: 1.1rem; }
.profile-tile .profile-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-tile .profile-lock {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.75rem;
  opacity: 0.7;
}

.manage-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  max-height: 280px;
  overflow: auto;
}
.manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg);
  border-radius: 10px;
}
.manage-row .profile-name { flex: 1; color: var(--navy); font-weight: 600; font-size: 0.9rem; }
.btn-link {
  background: none;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: underline;
}
.btn-link.danger { color: var(--error); }

@media (max-width: 600px) {
  .user-pill-name { max-width: 70px; }
  .nav { gap: 14px; }
}

.rainbow-spinner.small { width: 14px; height: 14px; vertical-align: -2px; }
.user-menu-meta {
  padding: 8px 12px 6px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}

/* Wallet / points pill in header — gold-tint glass, applies on every page */
.user-slot { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  border: 1px solid rgba(251, 191, 36, 0.25);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.wallet-pill:hover {
  text-decoration: none;
  background: rgba(251, 191, 36, 0.16);
  border-color: rgba(251, 191, 36, 0.4);
  transform: translateY(-1px);
}
.wallet-pill svg { color: #fbbf24; }

/* Question reward badge */
.q-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.q-reward {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-weight: 700;
  font-size: 0.78rem;
  border: 1px solid #fde68a;
}

/* +cents toast */
.cents-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -10px);
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 9999;
  pointer-events: none;
}
.cents-toast.show { opacity: 1; transform: translate(-50%, 0); }
.cents-toast-coin {
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.95rem;
}
.cents-toast-loss { border-color: #fecaca; background: #fff5f5; color: #7f1d1d; }
.cents-toast-loss .cents-toast-coin {
  background: linear-gradient(135deg, #fecaca, #ef4444);
  color: #7f1d1d;
}

.user-menu-link {
  display: block;
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
.user-menu-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  text-decoration: none;
}

/* Marketplace */
.market-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin-top: 18px; }
.toy-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.toy-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10); }
.toy-card.affordable { border-color: #fcd34d; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.10); }
.toy-img-wrap {
  position: relative;
  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}
.toy-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  padding: 8px;
}
.toy-img-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #92400e;
  font-size: 2.6rem;
}
.toy-price-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}
.toy-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.toy-name { font-weight: 700; color: var(--navy); margin: 0; font-size: 0.98rem; line-height: 1.3; }
.toy-desc {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  white-space: pre-line;
}
.toy-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; min-height: 18px; }
.toy-stock { color: var(--muted); font-size: 0.75rem; }
.toy-stock.low { color: #b45309; font-weight: 600; }
.toy-stock.can { color: #15803d; font-weight: 700; }
.toy-buy { padding: 9px 14px; font-size: 0.9rem; margin-top: 4px; }
.toy-buy:disabled { opacity: 0.6; cursor: not-allowed; }

.wallet-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px;
  align-items: center;
}
.wallet-summary-stat .label { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.wallet-summary-stat .value { color: var(--navy); font-size: 1.6rem; font-weight: 800; }
.wallet-progress {
  flex: 1;
  min-width: 200px;
  height: 10px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.wallet-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fde68a, #f59e0b, #ec4899);
  transition: width 0.4s ease;
}

/* Admin */
.admin-tabs { display: flex; gap: 8px; margin: 18px 0; border-bottom: 1px solid var(--border); }
.admin-tab {
  padding: 10px 16px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
}
.admin-tab.active { color: var(--navy); border-bottom-color: var(--amber); }
.admin-form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 18px; }
.admin-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.admin-form .row.col1 { grid-template-columns: 1fr; }
.admin-img-preview { max-width: 160px; max-height: 160px; border-radius: 10px; margin-top: 8px; border: 1px solid var(--border); }
.admin-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.admin-table th, .admin-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.admin-table th { background: var(--bg); font-weight: 700; color: var(--navy); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.status-pending { background: #fef3c7; color: #92400e; }
.status-shipped { background: #dbeafe; color: #1e40af; }
.status-delivered { background: #d1fae5; color: #065f46; }
.status-cancelled { background: #fee2e2; color: #991b1b; }

/* Checkout / parent consent */
.consent-card { background: #fffbeb; border: 1.5px solid #fcd34d; border-radius: 12px; padding: 14px 16px; margin: 14px 0; font-size: 0.88rem; color: #78350f; }
.consent-card label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.consent-card input[type=checkbox] { margin-top: 3px; transform: scale(1.2); }

.admin-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.admin-badge:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
  color: #fff;
}

.earn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--amber), #f97316);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.earn-cta:hover { transform: translateY(-1px); text-decoration: none; color: #fff; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4); }

/* Section mastery */
.mastered-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border: 1px solid #fcd34d;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  color: #78350f;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}
.mastered-banner.mastered-celebrate {
  background: linear-gradient(135deg, #fef9c3, #fde047);
  border-color: #facc15;
}
.mastered-star { font-size: 2rem; line-height: 1; }
.mastered-title { font-weight: 800; font-size: 1.05rem; }
.mastered-sub { font-size: 0.88rem; opacity: 0.85; margin-top: 2px; }

.q-reward-locked {
  background: linear-gradient(135deg, #fde68a, #facc15) !important;
  color: #78350f !important;
  font-weight: 800;
}

.mastered-badge {
  display: inline-block;
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #78350f;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  vertical-align: middle;
  margin-left: 6px;
}
.unit-card.unit-mastered { border-color: #fcd34d; box-shadow: 0 0 0 2px rgba(252, 211, 77, 0.25); }
.lesson-mastered > a { background: rgba(254, 243, 199, 0.5); }

.modal-card { position: relative; }
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.modal-close:hover { background: #f3f4f6; color: var(--navy); }

/* Dashboard */
.dash-welcome { padding: 32px 0 16px; }
.dash-welcome h1 { margin: 0 0 6px; font-size: 2rem; color: var(--navy); }
.dash-sub { color: var(--muted); margin: 0; font-size: 1rem; }
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 18px 0 24px;
}
.dash-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.dash-card-stat { text-align: left; }
.dash-stat-label { font-size: 0.82rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.dash-stat-value { font-size: 2.4rem; font-weight: 800; color: var(--navy); margin: 6px 0 4px; line-height: 1; }
.dash-stat-foot { font-size: 0.85rem; color: var(--muted); }
.dash-card-board { padding: 22px 24px; }
.dash-board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dash-board-head h3 { margin: 0; color: var(--navy); }
.dash-board-sub { color: var(--muted); font-size: 0.85rem; }

/* "Your journey" — kid-friendly replacement for the leaderboard. */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin: 6px 0 18px;
}
.journey-tile {
  border-radius: 14px;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border: 1px solid rgba(99, 102, 241, 0.12);
}
.journey-tile-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.journey-tile-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--navy);
  margin: 6px 0 4px;
  line-height: 1.05;
}
.journey-tile-unit {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
}
.journey-tile-foot { font-size: 0.82rem; color: var(--muted); }
.journey-streak { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); border-color: rgba(234, 88, 12, 0.18); }
.journey-streak .journey-tile-value { color: #c2410c; }
.journey-today { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: rgba(16, 185, 129, 0.2); }
.journey-today .journey-tile-value { color: #047857; }
.journey-best { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-color: rgba(59, 130, 246, 0.2); }
.journey-best .journey-tile-value { color: #1d4ed8; }
.journey-cta { text-align: center; margin-top: 4px; }
.leaderboard {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 520px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.leaderboard::-webkit-scrollbar { width: 8px; }
.leaderboard::-webkit-scrollbar-track { background: transparent; }
.leaderboard::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18);
  border-radius: 8px;
}
.leaderboard::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, 0.32); }
.leaderboard li {
  display: grid;
  grid-template-columns: 72px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-radius: 12px;
  font-size: 0.95rem;
}
.leaderboard li:last-child { border-bottom: none; }
.leaderboard .lb-rank {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #475569;
  background: #f1f5f9;
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.05);
}
.leaderboard .lb-name { color: var(--navy); font-weight: 600; }
.leaderboard .lb-you { color: var(--blue); font-weight: 700; font-size: 0.8rem; }
.leaderboard .lb-correct { color: var(--muted); font-size: 0.88rem; }
.leaderboard .lb-acc {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: #1e3a8a;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.8rem;
}
.leaderboard .lb-me {
  border-bottom-color: transparent;
}

/* Gold #1 */
.leaderboard .lb-rank-1 .lb-rank {
  width: 64px; height: 64px;
  font-size: 2.2rem;
  color: #78350f;
  background: radial-gradient(circle at 30% 28%, #fff7c2 0%, #fcd34d 55%, #b45309 115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 0 0 2px rgba(255,255,255,0.45),
    0 6px 14px -4px rgba(180, 83, 9, 0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
/* Silver #2 */
.leaderboard .lb-rank-2 .lb-rank {
  width: 60px; height: 60px;
  font-size: 2rem;
  color: #1e293b;
  background: radial-gradient(circle at 30% 28%, #ffffff 0%, #e2e8f0 55%, #94a3b8 115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 0 0 2px rgba(255,255,255,0.5),
    0 5px 12px -4px rgba(100, 116, 139, 0.5);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
/* Bronze #3 */
.leaderboard .lb-rank-3 .lb-rank {
  width: 60px; height: 60px;
  font-size: 2rem;
  color: #7c2d12;
  background: radial-gradient(circle at 30% 28%, #fff0e0 0%, #fdba74 55%, #c2410c 115%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 0 0 2px rgba(255,255,255,0.4),
    0 5px 12px -4px rgba(194, 95, 22, 0.55);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
/* Ranks 4+ — clean dark numeral */
.leaderboard .lb-rank-n .lb-rank {
  font-size: 1.5rem;
  color: var(--navy);
}

/* ===== Full-row tinting for top 3 (overrides .lb-me) ===== */
/* Gold row — #1 */
.leaderboard .lb-rank-1 {
  background: linear-gradient(90deg, #fff7c2 0%, #fde68a 55%, #fbbf24 110%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 14px -8px rgba(217, 119, 6, 0.55);
}
.leaderboard .lb-rank-1 .lb-name { color: #78350f; }
.leaderboard .lb-rank-1 .lb-correct { color: #92400e; font-weight: 600; }
.leaderboard .lb-rank-1 .lb-acc {
  background: rgba(255, 255, 255, 0.55);
  color: #78350f;
}

/* Platinum row — #2 (cool icy gradient with a faint blue sheen) */
.leaderboard .lb-rank-2 {
  background: linear-gradient(90deg, #f8fafc 0%, #e2e8f0 55%, #cbd5e1 110%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 4px 14px -8px rgba(100, 116, 139, 0.45);
}
.leaderboard .lb-rank-2 .lb-name { color: #1e293b; }
.leaderboard .lb-rank-2 .lb-correct { color: #475569; font-weight: 600; }
.leaderboard .lb-rank-2 .lb-acc {
  background: rgba(255, 255, 255, 0.7);
  color: #1e293b;
}

/* Bronze row — #3 (warm peach copper) */
.leaderboard .lb-rank-3 {
  background: linear-gradient(90deg, #fff1e6 0%, #fed7aa 55%, #fb923c 110%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 4px 14px -8px rgba(194, 95, 22, 0.5);
}
.leaderboard .lb-rank-3 .lb-name { color: #7c2d12; }
.leaderboard .lb-rank-3 .lb-correct { color: #9a3412; font-weight: 600; }
.leaderboard .lb-rank-3 .lb-acc {
  background: rgba(255, 255, 255, 0.55);
  color: #7c2d12;
}

/* "you" row keeps a subtle blue ring; tint stays per-rank */
.leaderboard .lb-me {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: -2px;
}
/* Plain rows (#4+) — keep white */
.leaderboard .lb-rank-n { background: #fff; }
.leaderboard .lb-rank-n.lb-me {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
}

/* Dancing emoji for the leader — travels across the row, swaps frames */
.leaderboard .lb-row { position: relative; overflow: hidden; }
.leaderboard .lb-rank-1 { position: relative; overflow: hidden; }
.lb-dancer {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.6em;
  height: 1.6em;
  font-size: 1.6rem;
  pointer-events: none;
  z-index: 3;
  transform-origin: 50% 90%;
  animation: lb-dance-across 6s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 3px rgba(120, 53, 15, 0.35));
}
.lb-dancer .lb-d1,
.lb-dancer .lb-d2 {
  position: absolute;
  inset: 0;
  display: block;
  line-height: 1;
}
/* Frame swap (250ms each) — looks like the dancer is actually stepping */
.lb-dancer .lb-d1 { animation: lb-frame-a 0.5s steps(1, end) infinite; }
.lb-dancer .lb-d2 { animation: lb-frame-b 0.5s steps(1, end) infinite; }
@keyframes lb-frame-a {
  0%, 49%   { opacity: 1; transform: scale(1)    rotate(-6deg); }
  50%, 100% { opacity: 0; transform: scale(0.92) rotate(6deg); }
}
@keyframes lb-frame-b {
  0%, 49%   { opacity: 0; transform: scale(0.92) rotate(-6deg); }
  50%, 100% { opacity: 1; transform: scale(1)    rotate(6deg); }
}
@keyframes lb-dance-across {
  0%   { left: 2%;  transform: translateY(-50%) rotate(-10deg); }
  20%  { left: 22%; transform: translateY(-62%) rotate(8deg); }
  40%  { left: 44%; transform: translateY(-50%) rotate(-8deg); }
  60%  { left: 64%; transform: translateY(-62%) rotate(10deg); }
  80%  { left: 80%; transform: translateY(-50%) rotate(-10deg); }
  100% { left: 92%; transform: translateY(-62%) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-dancer,
  .lb-dancer .lb-d1,
  .lb-dancer .lb-d2 { animation: none; }
  .lb-dancer { left: 8px; }
  .lb-dancer .lb-d2 { opacity: 0; }
}

/* Movers for ranks 2 / 3 / 4 */
.lb-mover {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 1.4rem;
  pointer-events: none;
  z-index: 3;
  transform-origin: 50% 90%;
  filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.25));
}
/* #2 — runner: zips across quickly */
.lb-runner {
  animation: lb-run-across 4s linear infinite, lb-run-bob 0.28s ease-in-out infinite;
}
@keyframes lb-run-across {
  0%   { left: -2%; }
  100% { left: 100%; }
}
@keyframes lb-run-bob {
  0%, 100% { transform: translateY(-50%); }
  50%      { transform: translateY(-58%); }
}
/* #3 — sweater: jogs slowly with a tired wobble */
.lb-sweater {
  animation: lb-sweat-across 9s ease-in-out infinite alternate, lb-sweat-wobble 0.6s ease-in-out infinite;
}
@keyframes lb-sweat-across {
  0%   { left: 2%; }
  100% { left: 88%; }
}
@keyframes lb-sweat-wobble {
  0%, 100% { transform: translateY(-50%) rotate(-6deg); }
  50%      { transform: translateY(-46%) rotate(6deg); }
}
/* #4 — walker: strolls along, occasional sway */
.lb-walker {
  animation: lb-walk-across 14s linear infinite, lb-walk-sway 1s ease-in-out infinite;
}
@keyframes lb-walk-across {
  0%   { left: -2%; }
  100% { left: 100%; }
}
@keyframes lb-walk-sway {
  0%, 100% { transform: translateY(-50%) rotate(-3deg); }
  50%      { transform: translateY(-54%) rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-mover { animation: none; left: 8px; transform: translateY(-50%); }
}

.leaderboard .lb-empty {
  display: block;
  text-align: center;
  color: var(--muted);
  padding: 18px;
  border-bottom: none;
}
.lb-meta { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); color: var(--muted); font-size: 0.9rem; }
.dash-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

/* Two-column dashboard main: side panel (CTA + grade picker) | leaderboard */
.dash-main {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
.dash-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dash-practice-cta {
  width: 100%;
  text-align: center;
  font-size: 1.05rem;
  padding: 14px 22px;
  box-shadow: 0 8px 22px -8px rgba(245, 158, 11, 0.6);
}
.dash-side-card { padding: 18px 20px; }
.dash-side-title {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--navy);
}
.dash-side-sub {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.85rem;
}
/* Global ranking card */
.dash-rank-card {
  padding: 18px 20px 16px;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 60%, #60a5fa 100%);
  color: #fff;
  border: none;
  text-align: center;
  box-shadow: 0 10px 24px -12px rgba(30, 58, 138, 0.55);
}
.dash-rank-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.85);
}
.dash-rank-num {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  margin: 8px 0 4px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.dash-rank-hash {
  font-size: 1.6rem;
  font-weight: 700;
  vertical-align: 18px;
  margin-right: 2px;
  opacity: 0.85;
}
.dash-rank-of {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}
.dash-rank-pct {
  margin-top: 10px;
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.dash-rank-pct:empty { display: none; }
.grade-grid-compact {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.grade-grid-compact .grade-card {
  padding: 12px 14px;
  border-radius: 12px;
}
.grade-grid-compact .grade-card .label { font-size: 0.7rem; }
.grade-grid-compact .grade-card .title { font-size: 0.95rem; margin: 2px 0 0; }
.grade-grid-compact .grade-card .desc { display: none; }
@media (max-width: 880px) {
  .dash-main { grid-template-columns: 1fr; }
  .grade-grid-compact { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 520px) {
  .grade-grid-compact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .leaderboard li { grid-template-columns: 60px 1fr auto; }
  .leaderboard .lb-rank { width: 48px; height: 48px; font-size: 1.5rem; }
  .leaderboard .lb-rank-1 .lb-rank,
  .leaderboard .lb-rank-2 .lb-rank,
  .leaderboard .lb-rank-3 .lb-rank { width: 52px; height: 52px; font-size: 1.7rem; }
  .leaderboard .lb-correct { display: none; }
}

/* Dashboard polish */
.dash-welcome { padding: 36px 0 18px; position: relative; }
.dash-welcome-emoji {
  font-size: 2.4rem;
  display: inline-block;
  margin-bottom: 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.dash-welcome h1 {
  background: linear-gradient(135deg, var(--navy) 0%, #2563eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2.2rem;
}
.dash-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.dash-card-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,23,42,0.08); }
.dash-card-board { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); }
.dash-board-head h3 { font-size: 1.15rem; }

/* Admin-only edit pill on marketplace cards */
.toy-img-wrap { position: relative; }
.toy-edit {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease;
}
.toy-edit:hover { background: var(--blue); transform: translateY(-1px); }

/* "How it works" grid */
.howit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.howit-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.howit-card:hover {
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}
.howit-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 1.4rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  margin-bottom: 12px;
}
.howit-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.howit-card p {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 10px;
  line-height: 1.5;
}
.howit-card ul {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.howit-card ul li { margin-bottom: 4px; }
.howit-card ul li strong, .howit-card ul li em { color: var(--navy); }

/* ===== Header chat bell ===== */
/* Chat / friends bell in header — dark glass icon button, applies on every page */
.chat-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.chat-bell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.chat-bell-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid #0a1628;
}

/* ===== Friends panel ===== */
.sf-panel {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.sf-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sf-card {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 30px -10px rgba(0, 0, 0, 0.2);
  animation: sf-slide 0.22s ease-out;
}
@keyframes sf-slide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.sf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.sf-title {
  margin: 0;
  flex: 1;
  font-size: 1.05rem;
  color: var(--navy);
}
.sf-back, .sf-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--navy);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sf-back:hover, .sf-close:hover { background: #f1f5f9; }
.sf-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 18px;
}
.sf-section-title {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 14px 4px 6px;
}
.sf-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sf-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid transparent;
}
.sf-row-friend {
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.sf-row-friend:hover { background: #f8fafc; border-color: var(--border); }
.sf-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sf-avatar-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.sf-presence {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.sf-presence-online {
  background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.5);
  animation: sf-presence-pulse 2s ease-out infinite;
}
.sf-presence-offline { background: #cbd5e1; }
@keyframes sf-presence-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}
.sf-name-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sf-name-col .sf-name { flex: none; }
.sf-presence-text {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 1px;
}
.sf-presence-text-online { color: #16a34a; font-weight: 600; }
.sf-name {
  flex: 1;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.95rem;
}
.sf-chev { color: var(--muted); }
.sf-pending {
  font-size: 0.78rem;
  color: var(--muted);
  font-style: italic;
}
.sf-actions { display: flex; gap: 6px; }
.sf-btn {
  border: none;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.sf-btn-accept { background: #16a34a; color: #fff; }
.sf-btn-accept:hover { background: #15803d; }
.sf-btn-decline { background: #f1f5f9; color: var(--navy); }
.sf-btn-decline:hover { background: #e2e8f0; }
.sf-empty {
  padding: 20px 10px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Conversation view */
.sf-conv {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.sf-conv-msgs {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 12px;
  min-height: 200px;
}
.sf-msg {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}
.sf-msg-me { align-self: flex-end; align-items: flex-end; }
.sf-msg-them { align-self: flex-start; align-items: flex-start; }
.sf-msg-bubble {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 1rem;
  line-height: 1.35;
  word-break: break-word;
}
.sf-msg-me .sf-msg-bubble {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-bottom-right-radius: 6px;
}
.sf-msg-them .sf-msg-bubble {
  background: #f1f5f9;
  color: var(--navy);
  border-bottom-left-radius: 6px;
}
.sf-msg-react .sf-msg-bubble {
  background: transparent !important;
  color: inherit;
  font-size: 1.8rem;
  padding: 0;
  line-height: 1;
}
.sf-msg-time {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 2px;
}
.sf-conv-pad {
  border-top: 1px solid var(--border);
  padding: 12px 4px 4px;
  margin-top: 8px;
}
.sf-pad-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 4px 4px 8px;
}
.sf-phrase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 12px;
}
.sf-phrase {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.88rem;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, transform 0.06s;
}
.sf-phrase:hover { background: #eff6ff; }
.sf-phrase:active { transform: scale(0.97); }
.sf-react-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sf-react {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  font-size: 1.3rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, transform 0.06s;
}
.sf-react:hover { background: #fef3c7; }
.sf-react:active { transform: scale(0.92); }

@media (max-width: 480px) {
  .sf-card { width: 100vw; }
}

/* Make leaderboard rows tappable for friend requests */
.leaderboard .lb-row { cursor: pointer; }
.leaderboard .lb-row:hover { filter: brightness(0.98); }

/* ============== Premium kid-friendly polish ============== */

/* Dyslexia-friendly font preference. Falls back gracefully if no font installed. */
body.pref-dyslexia,
body.pref-dyslexia .question-card,
body.pref-dyslexia .q-prompt,
body.pref-dyslexia .choice,
body.pref-dyslexia .feedback {
  font-family: "OpenDyslexic", "Comic Sans MS", "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif !important;
  letter-spacing: 0.01em;
}
body.pref-large-text { font-size: 18px; }
body.pref-large-text .q-prompt { font-size: 1.25rem; line-height: 1.55; }
body.pref-large-text .choice { font-size: 1.1rem; }

/* Read-aloud button on question prompt */
.q-prompt { display: flex; align-items: flex-start; gap: 10px; }
.q-prompt-text { flex: 1; }
.q-read-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(99, 102, 241, 0.25);
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  cursor: pointer;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.q-read-btn:hover { transform: scale(1.06); box-shadow: 0 4px 10px rgba(99, 102, 241, 0.18); }
.q-read-btn:active { transform: scale(0.96); }

/* FX toast (milestones) */
.fx-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  background: #0f172a;
  color: #fff;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
  opacity: 0;
  transition: opacity 280ms ease, transform 280ms ease;
  z-index: 9999;
  pointer-events: none;
}
.fx-toast-in { opacity: 1; transform: translate(-50%, 0); }
.fx-toast-win {
  background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
}

/* Settings page */
.settings-container { max-width: 880px; }
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.settings-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  padding: 22px 24px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}
.settings-card h3 { margin: 0 0 14px; color: var(--navy); }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  cursor: pointer;
}
.settings-row:last-of-type { border-bottom: none; }
.settings-row-label { display: flex; flex-direction: column; gap: 2px; }
.settings-row-title { font-weight: 600; color: var(--navy); }
.settings-row-sub { font-size: 0.85rem; color: var(--muted); }
.settings-toggle {
  appearance: none;
  width: 46px; height: 26px;
  background: #cbd5e1;
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 180ms ease;
  flex: 0 0 auto;
}
.settings-toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 180ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.settings-toggle:checked { background: #10b981; }
.settings-toggle:checked::after { transform: translateX(20px); }
.settings-select {
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.95rem;
  background: #fff;
  cursor: pointer;
}
.settings-test {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}

/* ============== Admin: ship-these-now panel ============== */
.ship-panel {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  border: 1px solid rgba(234, 88, 12, 0.25);
  border-radius: 16px;
  padding: 22px 24px;
  margin: 18px 0 24px;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.10);
}
.ship-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.ship-panel-head h2 { margin: 0; color: #9a3412; display: inline-flex; align-items: center; gap: 10px; }
.ship-count {
  background: #ea580c;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  padding: 2px 12px;
  border-radius: 999px;
  min-width: 28px;
  text-align: center;
}
.ship-panel-sub { color: #9a3412; font-weight: 600; }
.ship-list { display: grid; gap: 14px; }
.ship-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(234, 88, 12, 0.18);
  padding: 16px 18px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05);
}
.ship-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.08);
  padding-bottom: 10px;
}
.ship-toy { font-weight: 700; font-size: 1.1rem; color: var(--navy); }
.ship-when { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.ship-price { font-weight: 800; color: #ea580c; white-space: nowrap; }
.ship-card-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 14px;
}
.ship-block { font-size: 0.9rem; }
.ship-block-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.ship-block-value { color: var(--navy); line-height: 1.45; }
.ship-block-value a { color: var(--navy); text-decoration: underline; }
.ship-muted { color: var(--muted); font-size: 0.78rem; }
.ship-block-addr .ship-copy {
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 0.78rem;
}
.ship-card-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px dashed rgba(15, 23, 42, 0.08);
  padding-top: 12px;
}
.ship-track { flex: 1 1 200px; padding: 8px 12px; font-size: 0.9rem; }

/* Tab badge for pending count on Orders tab. */
.tab-badge {
  display: inline-block;
  background: #ea580c;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 1px 8px;
  border-radius: 999px;
  margin-left: 6px;
  min-width: 20px;
  text-align: center;
  vertical-align: middle;
}

/* ---------- Premium footer (landing) ---------- */
.footer {
  position: relative;
  background: #060d1f;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 80px 32px 32px;
  overflow: hidden;
  color: #ffffff;
  margin-top: 0;
}
.footer::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.08) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand-col { max-width: 320px; }
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 16px;
}
.footer-logo .logo-accent {
  background: linear-gradient(180deg, #fde68a 0%, #fbbf24 60%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.footer-tagline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px 0;
}
.footer-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.footer-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
}
.trust-dot {
  width: 6px;
  height: 6px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
  flex-shrink: 0;
}
.trust-dot--blue {
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
.trust-dot--gold {
  background: #fde68a;
  box-shadow: 0 0 0 3px rgba(253, 230, 138, 0.22);
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* §49 polish: tighter eyebrow column headers + slightly smaller link
   items so the column hierarchy reads clearly without dominating. */
.footer-col-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 14px 0;
}
.footer .footer-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 1.8;
}
.footer .footer-link:hover { color: #ffffff; }
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 20%,
    rgba(255, 255, 255, 0.08) 80%,
    transparent 100%);
  margin-bottom: 24px;
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.footer-copy {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-meta-divider { color: rgba(255, 255, 255, 0.25); }
.footer-social { display: flex; gap: 8px; }
.footer-social-link {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer-social-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  transform: translateY(-1px);
}
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-brand-col { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 640px) {
  .footer { padding: 56px 20px 28px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* =================================================================
   Premium Marketplace page (body.marketplace-page)
   ================================================================= */
body.marketplace-page { background: #060d1f; color: #ffffff; }

/* Hero */
.marketplace-hero {
  position: relative;
  background: #060d1f;
  padding: 100px 32px 60px;
  overflow: hidden;
}
.marketplace-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 60%);
  filter: blur(50px);
  pointer-events: none;
}
.marketplace-hero::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -10%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 60%);
  filter: blur(50px);
  pointer-events: none;
}
.marketplace-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.marketplace-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.9);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: #fbbf24;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), 0 0 8px rgba(251, 191, 36, 0.6);
  animation: market-pulse 2s ease-in-out infinite;
}
@keyframes market-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.marketplace-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 20px 0;
  max-width: 820px;
}
.marketplace-title .title-accent {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.marketplace-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 720px;
  margin: 0 0 40px 0;
}
/* §marketplace hero trim (May 12): .marketplace-stats and .signin-callout
   blocks were removed. Both classes used only on /toys; deleting them
   keeps the marketplace product-first (no stats strip, no second CTA bar
   competing with the top-nav sign-in button). See marketplace.html +
   js/marketplace.js for the corresponding markup deletions. */
@media (max-width: 640px) {
  .marketplace-hero { padding: 64px 20px 32px; }
}

/* Section wrapper below hero */
body.marketplace-page .marketplace-section {
  background: #060d1f;
  padding: 0 0 40px;
}

/* Logged-in wallet summary on dark */
body.marketplace-page #wallet-summary.wallet-summary {
  max-width: 1216px;
  margin: 0 auto 32px;
  padding: 22px 28px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  color: #ffffff;
}
body.marketplace-page .wallet-summary-stat .label {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.marketplace-page .wallet-summary-stat .value {
  color: #ffffff;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
}
body.marketplace-page .wallet-progress {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}
body.marketplace-page .wallet-progress-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  height: 100%;
}

/* Filter / sort controls */
.marketplace-controls {
  max-width: 1280px;
  margin: 0 auto 28px;
  padding: 0 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.marketplace-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.filter-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.filter-pill--active {
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 2px 8px -2px rgba(251, 191, 36, 0.4);
}
.marketplace-sort { display: flex; align-items: center; gap: 12px; }
.sort-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.sort-select {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 32px 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.sort-select option { background: #0a1628; color: #ffffff; }

/* Toys grid */
body.marketplace-page .toys-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 1024px) { body.marketplace-page .toys-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { body.marketplace-page .toys-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { body.marketplace-page .toys-grid { grid-template-columns: 1fr; padding: 0 20px 60px; } }
.market-loading, .market-empty, .market-error, .orders-empty {
  grid-column: 1 / -1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  padding: 24px 0;
}
.market-error { color: #fca5a5; }

/* Toy card (scoped — overrides legacy white .toy-card on this page) */
body.marketplace-page .toy-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 4px 12px -2px rgba(0, 0, 0, 0.2);
}
body.marketplace-page .toy-card:hover {
  transform: translateY(-6px);
  border-color: rgba(251, 191, 36, 0.25);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(251, 191, 36, 0.15),
    0 24px 48px -12px rgba(0, 0, 0, 0.5),
    0 0 32px -8px rgba(251, 191, 36, 0.25);
}
body.marketplace-page .toy-card:hover .toy-image-glow { opacity: 1; }
body.marketplace-page .toy-card:hover .toy-image { transform: scale(1.05); }

/* Stock badge */
body.marketplace-page .toy-stock-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.toy-stock-badge--limited {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.toy-stock-badge--scarce {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 12px -2px rgba(239, 68, 68, 0.3);
  animation: scarce-pulse 2s ease-in-out infinite;
}
.toy-stock-badge--out {
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
@keyframes scarce-pulse {
  0%, 100% { box-shadow: 0 0 12px -2px rgba(239, 68, 68, 0.3); }
  50%      { box-shadow: 0 0 20px -2px rgba(239, 68, 68, 0.55); }
}

/* Image area */
body.marketplace-page .toy-image-wrapper {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
  overflow: hidden;
  padding: 32px;
}
.toy-image-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(251, 191, 36, 0.12) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
body.marketplace-page .toy-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
}
body.marketplace-page .toy-image-placeholder {
  width: 60%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 16px;
  color: #fbbf24;
  font-size: 2.4rem;
  position: relative;
  z-index: 1;
}

/* Points badge — gold pill bottom-right of image */
.toy-points-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.5);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 4px 12px -2px rgba(251, 191, 36, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Card content */
body.marketplace-page .toy-content {
  padding: 18px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
body.marketplace-page .toy-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}
body.marketplace-page .toy-description {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card footer + CTA */
body.marketplace-page .toy-footer {
  padding: 12px 20px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 12px;
}
body.marketplace-page .toy-cta {
  width: 100%;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(251, 191, 36, 0.2),
    0 4px 12px -2px rgba(251, 191, 36, 0.3);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
}
body.marketplace-page .toy-cta:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px rgba(251, 191, 36, 0.3),
    0 8px 20px -4px rgba(251, 191, 36, 0.45);
}
body.marketplace-page .toy-cta:hover:not(:disabled) svg { transform: translateX(2px); }
body.marketplace-page .toy-cta svg { transition: transform 0.2s ease; }
body.marketplace-page .toy-cta--disabled,
body.marketplace-page .toy-cta:disabled {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  cursor: not-allowed;
}

/* Affordable card subtle ring */
body.marketplace-page .toy-card--affordable {
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 0 0 1px rgba(16, 185, 129, 0.12),
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   §47 Marketplace premium polish (May 12) — subtractive paint pass.
   Shrinks headline ~40%, demotes Sign-in button, demotes "All toys"
   filter active state, moves points badge into content block (no longer
   obstructing the product photo) and styles it as a muted chip with a
   small gold coin. Scarcity chips ("X LEFT") dropped at the JS render
   layer. Layout / grid / nav structure untouched.
   ========================================================================== */

/* Shrink hero — headline ~40% smaller; section padding reduced */
body.marketplace-page .marketplace-hero {
  padding: 56px 32px 36px;
}
body.marketplace-page .marketplace-hero::before,
body.marketplace-page .marketplace-hero::after {
  /* Soften the amber + indigo background glows so the hero feels calmer */
  opacity: 0.55;
}
body.marketplace-page .marketplace-title {
  font-size: clamp(28px, 3.6vw, 44px);
  margin-bottom: 14px;
  max-width: 720px;
}
body.marketplace-page .marketplace-subtitle {
  font-size: 15px;
  margin-bottom: 28px;
}

/* Sign-in button: gold-filled CTA → hairline outline. The marketplace is
   product-first; the sign-in nudge belongs in the muted nav-action style. */
body.marketplace-page #user-slot .user-signin.btn-primary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  font-weight: 500;
}
body.marketplace-page #user-slot .user-signin.btn-primary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* "All toys" + filter chips: gold-filled active → elevated dark-on-dark.
   Same pattern as the Home Math/Reading segmented control. */
body.marketplace-page .filter-pill--active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  font-weight: 500;
}

/* Toy card — let the image area breathe. The outer card keeps its
   single hairline border; the image-wrapper no longer paints a
   background or radial-glow, so the photo sits directly on the panel. */
body.marketplace-page .toy-image-wrapper {
  background: transparent;
}
body.marketplace-page .toy-image {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}

/* Points badge — moved into .toy-content by JS; restyle as a muted chip
   with a small gold coin. No longer absolute-positioned. */
body.marketplace-page .toy-points-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  margin-bottom: 8px;
  align-self: flex-start;
}
body.marketplace-page .toy-points-badge svg {
  color: rgba(252, 211, 77, 0.8);
  flex-shrink: 0;
}

/* Affordable card — soften the green ring to a subtle hairline tint
   so the card doesn't lit up like a CTA. */
body.marketplace-page .toy-card--affordable {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
}

/* Admin edit pill (for admins) */
body.marketplace-page .toy-edit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
}

/* My orders block */
.orders-block {
  max-width: 1280px;
  margin: 24px auto 80px;
  padding: 0 32px;
}
.orders-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 18px 0;
}
body.marketplace-page #orders-root {
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.4) 0%, rgba(20, 29, 51, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 8px;
  overflow-x: auto;
}
body.marketplace-page #orders-root .orders-empty {
  padding: 28px;
  margin: 0;
}
body.marketplace-page #orders-root .admin-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
}
body.marketplace-page #orders-root .admin-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}
body.marketplace-page #orders-root .admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
}
body.marketplace-page #orders-root .admin-table tr:last-child td { border-bottom: 0; }
body.marketplace-page #orders-root .admin-table img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow-dot, .toy-stock-badge--scarce { animation: none; }
  body.marketplace-page .toy-card,
  body.marketplace-page .toy-card:hover,
  body.marketplace-page .toy-image,
  body.marketplace-page .toy-cta { transition: none; transform: none; }
}

/* Defensive overrides — any legacy navy/dark text on the marketplace page
   reads white on the new dark background. */
body.marketplace-page,
body.marketplace-page p,
body.marketplace-page h1,
body.marketplace-page h2,
body.marketplace-page h3,
body.marketplace-page h4,
body.marketplace-page span,
body.marketplace-page strong,
body.marketplace-page label { color: #ffffff; }
body.marketplace-page section h2 { color: #ffffff; }
body.marketplace-page .wallet-summary-stat .label { color: rgba(255, 255, 255, 0.55); }
body.marketplace-page .wallet-summary-stat .value { color: #ffffff; }
body.marketplace-page .toy-stock,
body.marketplace-page .toy-stock.low,
body.marketplace-page .toy-stock.can { color: rgba(255, 255, 255, 0.7); }
body.marketplace-page .earn-cta {
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
}
/* Header brand + nav stay legible */
body.marketplace-page .site-header .brand,
body.marketplace-page .site-header .brand-text { color: #ffffff; }
body.marketplace-page .site-header .nav a { color: rgba(255, 255, 255, 0.75); }
body.marketplace-page .site-header .nav a.active,
body.marketplace-page .site-header .nav a:hover { color: #ffffff; }

/* ============================================================
   ABOUT / HOW IT WORKS — premium dark overhaul (Prompt 10)
   Scoped under body.about-page
   ============================================================ */
body.about-page { background: #060d1f; color: #ffffff; }
body.about-page .site-header { background: rgba(6, 13, 31, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.06); }
body.about-page .site-header .brand,
body.about-page .site-header .brand-text { color: #ffffff; }
body.about-page .site-header .nav a { color: rgba(255,255,255,0.75); }
body.about-page .site-header .nav a.active,
body.about-page .site-header .nav a:hover { color: #ffffff; }

.about-section {
  position: relative;
  background: #060d1f;
  padding: 100px 32px 120px;
  overflow: hidden;
}
.about-section::before {
  content: '';
  position: absolute;
  top: 0;
  right: -10%;
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(251, 191, 36, 0.08) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.about-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.about-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.about-header {
  max-width: 720px;
  margin: 0 auto 80px;
  text-align: center;
}
.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.9);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
.about-eyebrow .eyebrow-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px rgba(251,191,36,0.7);
  animation: eyebrow-pulse 2s ease-in-out infinite;
}
@keyframes eyebrow-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.about-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 20px 0;
}
.about-title .title-accent {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 auto;
  max-width: 600px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 80px;
}
@media (max-width: 1024px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .features-grid { grid-template-columns: 1fr; } }

.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: radial-gradient(ellipse at top, rgba(251, 191, 36, 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(251, 191, 36, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(251, 191, 36, 0.1),
    0 24px 48px -12px rgba(0, 0, 0, 0.4),
    0 0 32px -8px rgba(251, 191, 36, 0.2);
}
.feature-card:hover::before { opacity: 1; }

.feature-card-step {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.06);
  letter-spacing: -0.02em;
  pointer-events: none;
  z-index: 0;
}

.feature-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 14px;
  color: #fbbf24;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.feature-card-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}

.feature-card-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.feature-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0;
}
.feature-card-description {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.feature-card-description strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.feature-card-description em { color: rgba(255,255,255,0.85); font-style: italic; }
.feature-card-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-card-list li {
  position: relative;
  padding-left: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.feature-card-list li em { color: rgba(255,255,255,0.78); font-style: italic; }
.feature-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7L6 10L11 4' stroke='%23fbbf24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.7;
}

/* Saad's note — featured testimonial */
.saad-note {
  position: relative;
  margin: 80px 0 0;
  padding: 48px;
  background: linear-gradient(135deg, rgba(26, 37, 64, 0.6) 0%, rgba(20, 29, 51, 0.6) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px -12px rgba(0, 0, 0, 0.4);
}
.saad-note-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.saad-note-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: flex-start;
}
@media (max-width: 768px) {
  .saad-note { padding: 32px 24px; }
  .saad-note-inner { grid-template-columns: 1fr; gap: 20px; }
}
.saad-note-avatar { position: relative; flex-shrink: 0; }
.avatar-circle {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 50%;
  font-family: 'Instrument Serif', serif;
  font-size: 36px;
  font-weight: 400;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 8px 24px -4px rgba(99, 102, 241, 0.4);
}
.avatar-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 2px solid #060d1f;
  border-radius: 50%;
  color: #0a1628;
  box-shadow: 0 2px 8px -2px rgba(251, 191, 36, 0.5);
}
.saad-note-content { display: flex; flex-direction: column; gap: 16px; }
.saad-note-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
}
.saad-note-quote {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.saad-note-quote em {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}
.saad-note-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.saad-note-name { font-weight: 600; color: #ffffff; }
.saad-note-divider { color: rgba(255, 255, 255, 0.25); }
.saad-note-role { color: rgba(251, 191, 36, 0.85); font-weight: 500; }

/* CTA */
.about-cta {
  margin-top: 80px;
  text-align: center;
  padding: 60px 32px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.4) 0%, transparent 100%);
  border-radius: 24px;
}
.about-cta-title {
  font-family: 'Instrument Serif', serif;
  font-size: 40px;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}
.about-cta-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 32px 0;
}
.about-cta-buttons {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
body.about-page .about-cta .btn-primary {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color: #0a1628;
  border: 1px solid rgba(251, 191, 36, 0.5);
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px -8px rgba(251,191,36,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.about-page .about-cta .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(251,191,36,0.6); }
body.about-page .about-cta .btn-secondary {
  background: rgba(255,255,255,0.04);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
body.about-page .about-cta .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }

/* Defensive overrides — kill any legacy navy text on about page */
body.about-page section h2,
body.about-page h1, body.about-page h2, body.about-page h3, body.about-page h4 { color: #ffffff; }
body.about-page p, body.about-page li, body.about-page span, body.about-page strong, body.about-page label { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  body.about-page .feature-card,
  body.about-page .feature-card:hover { transition: none; transform: none; }
  body.about-page .about-eyebrow .eyebrow-dot { animation: none; }
}


/* ============================================================
   SIGN IN MODAL — premium dark glass (Prompt 11)
   Scoped under .modal-overlay.signin-overlay
   ============================================================ */
.modal-overlay.signin-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 13, 31, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.modal-overlay.signin-overlay.open { opacity: 1; }

.signin-modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.95) 0%, rgba(20, 29, 51, 0.95) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 40px 32px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 32px 64px -16px rgba(0, 0, 0, 0.6),
    0 16px 32px -8px rgba(0, 0, 0, 0.4),
    0 0 80px -20px rgba(251, 191, 36, 0.15);
  animation: signin-rise 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  color: #ffffff;
}
@keyframes signin-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.signin-modal-accent {
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(251, 191, 36, 0.4) 30%,
    rgba(251, 191, 36, 0.6) 50%,
    rgba(251, 191, 36, 0.4) 70%,
    transparent 100%);
}

.signin-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}
.signin-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.signin-modal-brand { display: flex; justify-content: center; margin-bottom: 24px; }
.signin-modal-brand svg { filter: drop-shadow(0 4px 12px rgba(251, 191, 36, 0.3)); }

.signin-modal-title {
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  margin: 0 0 8px 0;
  line-height: 1.1;
}
.signin-modal-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin: 0 0 28px 0;
}

.signin-sso-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.signin-sso-btn {
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0 16px;
}
.signin-sso-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.signin-divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
}
.signin-divider::before {
  content: '';
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.signin-divider-text {
  position: relative;
  display: inline-block;
  padding: 0 12px;
  background: rgb(23, 33, 57);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.02em;
}

.signin-form { display: flex; flex-direction: column; gap: 16px; }
.signin-field { display: flex; flex-direction: column; gap: 6px; }
.signin-label-row { display: flex; justify-content: space-between; align-items: center; }
.signin-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.signin-forgot {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.85);
  text-decoration: none;
  transition: color 0.2s ease;
}
.signin-forgot:hover { color: #fbbf24; }

.signin-input-wrapper { position: relative; }
.signin-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.2s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02) inset;
  box-sizing: border-box;
}
.signin-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.signin-input:hover { border-color: rgba(255, 255, 255, 0.14); }
.signin-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 0 0 4px rgba(251, 191, 36, 0.1);
}
.signin-input-wrapper .signin-input { padding-right: 44px; }

.signin-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;
  padding: 0;
}
.signin-password-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
}

.signin-error {
  margin: 4px 0 0 0;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 10px;
  color: #fca5a5;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

.signin-submit {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(251, 191, 36, 0.2),
    0 4px 12px -2px rgba(251, 191, 36, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.15);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.signin-submit:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px rgba(251, 191, 36, 0.3),
    0 8px 20px -4px rgba(251, 191, 36, 0.5);
}
.signin-submit svg { transition: transform 0.2s ease; }
.signin-submit:hover svg { transform: translateX(2px); }
.signin-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.signin-modal-footer {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.signin-footer-text { color: rgba(255, 255, 255, 0.5); margin-right: 6px; }
.signin-footer-link {
  color: #fbbf24;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.signin-footer-link:hover { color: #fcd34d; }

.signin-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
.signin-trust .trust-item { display: inline-flex; align-items: center; gap: 4px; }
.signin-trust .trust-divider { color: rgba(255, 255, 255, 0.2); }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay.signin-overlay { transition: none; }
  .signin-modal { animation: none; }
}

/* ============================================================
   DASHBOARD — premium dark overhaul (Prompt 12)
   Scoped under body.home-page #dashboard
   ============================================================ */
body.home-page #dashboard.dashboard-section {
  position: relative;
  background: #060d1f;
  padding: 0 0 80px;
  overflow: hidden;
}
body.home-page #dashboard.dashboard-section::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
body.home-page #dashboard.dashboard-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: -200px;
  width: 800px; height: 800px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
body.home-page #dashboard .dashboard-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* Welcome header */
body.home-page #dashboard .dashboard-welcome {
  padding: 60px 32px 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
body.home-page #dashboard .welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.9);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
body.home-page #dashboard .eyebrow-emoji { font-size: 12px; }
body.home-page #dashboard .welcome-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 12px 0;
}
body.home-page #dashboard .welcome-name {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.home-page #dashboard .welcome-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 520px;
}
body.home-page #dashboard .welcome-subtitle strong { color: #ffffff; font-weight: 600; }
body.home-page #dashboard .btn-primary--large {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 4px 12px -2px rgba(251,191,36,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.home-page #dashboard .btn-primary--large:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 8px 20px -4px rgba(251,191,36,0.5);
}
body.home-page #dashboard .btn-primary--large svg { transition: transform 0.2s ease; }
body.home-page #dashboard .btn-primary--large:hover svg { transform: translateX(2px); }

/* Stats grid */
body.home-page #dashboard .stats-grid {
  margin: 0 auto 32px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { body.home-page #dashboard .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { body.home-page #dashboard .stats-grid { grid-template-columns: 1fr; } }

body.home-page #dashboard .stat-card {
  position: relative;
  padding: 24px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}
body.home-page #dashboard .stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.1);
}
body.home-page #dashboard .stat-card--wallet {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, rgba(20, 29, 51, 0.5) 100%);
  border-color: rgba(251, 191, 36, 0.2);
}
body.home-page #dashboard .stat-card--wallet::before {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, transparent 60%);
  filter: blur(30px);
  pointer-events: none;
}
body.home-page #dashboard .stat-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
body.home-page #dashboard .stat-card-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.home-page #dashboard .stat-card-icon {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
}
body.home-page #dashboard .stat-card-icon--gold {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
body.home-page #dashboard .stat-card-value {
  font-family: 'Instrument Serif', serif;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffffff;
  position: relative;
  z-index: 1;
}
body.home-page #dashboard .stat-card--wallet .stat-card-value { color: #fbbf24; }
body.home-page #dashboard .stat-card-meta {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  position: relative;
  z-index: 1;
}
body.home-page #dashboard .stat-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fbbf24;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
  position: relative;
  z-index: 1;
}
body.home-page #dashboard .stat-card-link:hover { gap: 6px; color: #fcd34d; }

/* Dashboard grid (panels) */
body.home-page #dashboard .dashboard-grid {
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
body.home-page #dashboard .dashboard-grid .activity-panel { grid-column: 1 / -1; }
@media (max-width: 1024px) { body.home-page #dashboard .dashboard-grid { grid-template-columns: 1fr; } }

body.home-page #dashboard .dashboard-panel {
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 28px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 4px 12px -2px rgba(0, 0, 0, 0.2);
}
body.home-page #dashboard .dashboard-panel-header { margin-bottom: 24px; }
body.home-page #dashboard .dashboard-panel-title {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 4px 0;
  display: inline-flex;
  align-items: center;
}
body.home-page #dashboard .dashboard-panel-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
body.home-page #dashboard .panel-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.85);
  text-decoration: none;
  white-space: nowrap;
}
body.home-page #dashboard .panel-link:hover { color: #fbbf24; }

/* Grade tiles inside dashboard panel — 2-col compact override (fixes empty-tiles bug) */
body.home-page #dashboard .grades-panel .grade-grid-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
body.home-page #dashboard .grades-panel .grade-card {
  padding: 16px;
  border-radius: 12px;
  min-height: 0;
}
body.home-page #dashboard .grades-panel .grade-card-eyebrow { font-size: 9px; }
body.home-page #dashboard .grades-panel .grade-card-icon {
  width: 36px; height: 36px;
  font-size: 18px;
}
body.home-page #dashboard .grades-panel .grade-card-title { font-size: 15px; }
body.home-page #dashboard .grades-panel .grade-card-meta { font-size: 12px; }
body.home-page #dashboard .grades-panel .grade-card-foot {
  padding-top: 10px;
}
body.home-page #dashboard .grades-panel .grade-card-age { font-size: 11px; }
body.home-page #dashboard .grades-panel .grade-card--popular .grade-card-badge { display: none; }
@media (max-width: 480px) {
  body.home-page #dashboard .grades-panel .grade-grid-compact { grid-template-columns: 1fr; }
}

/* Journey panel */
body.home-page #dashboard .journey-panel { position: relative; overflow: hidden; }
body.home-page #dashboard .journey-panel::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
body.home-page #dashboard .journey-icon { font-size: 22px; margin-right: 8px; }
body.home-page #dashboard .journey-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 4px 0 24px;
  position: relative;
  z-index: 1;
}
@media (max-width: 768px) { body.home-page #dashboard .journey-stats { grid-template-columns: 1fr; } }

body.home-page #dashboard .journey-stat {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: all 0.3s ease;
}
body.home-page #dashboard .journey-stat--streak {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(239, 68, 68, 0.15);
}
body.home-page #dashboard .journey-stat-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
}
body.home-page #dashboard .journey-stat--streak .journey-stat-icon {
  color: #f87171;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.2);
}
body.home-page #dashboard .journey-stat-content {
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.home-page #dashboard .journey-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
body.home-page #dashboard .journey-stat-value {
  font-family: 'Instrument Serif', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #ffffff;
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 2px;
}
body.home-page #dashboard .journey-stat-unit {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0;
}
body.home-page #dashboard .journey-stat-hint {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px;
  line-height: 1.4;
}
body.home-page #dashboard .journey-cta {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 4px 12px -2px rgba(251,191,36,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.home-page #dashboard .journey-cta:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 8px 20px -4px rgba(251,191,36,0.5);
}
body.home-page #dashboard .journey-cta svg { transition: transform 0.2s ease; }
body.home-page #dashboard .journey-cta:hover svg { transform: translateX(2px); }

/* Activity panel */
body.home-page #dashboard .activity-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
body.home-page #dashboard .activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  gap: 8px;
}
body.home-page #dashboard .activity-empty-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: rgba(251, 191, 36, 0.7);
  margin-bottom: 8px;
}
body.home-page #dashboard .activity-empty-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}
body.home-page #dashboard .activity-empty-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  max-width: 420px;
}

@media (prefers-reduced-motion: reduce) {
  body.home-page #dashboard .stat-card,
  body.home-page #dashboard .journey-stat,
  body.home-page #dashboard .btn-primary--large,
  body.home-page #dashboard .journey-cta { transition: none; }
}

/* ============================================================
   DASHBOARD v2 — daily challenge, level pill, dashboard-grade-tile,
   achievements, compact activity (Prompt 13)
   ============================================================ */

/* Level pill (inside welcome) */
body.home-page #dashboard .level-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin-top: 18px;
}
body.home-page #dashboard .level-badge {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 50%;
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 12px -2px rgba(99,102,241,0.4);
}
body.home-page #dashboard .level-info {
  display: flex; flex-direction: column; gap: 4px; min-width: 220px;
}
body.home-page #dashboard .level-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.85);
}
body.home-page #dashboard .level-progress {
  display: flex; align-items: center; gap: 8px;
}
body.home-page #dashboard .level-progress-bar {
  flex: 1; height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden;
}
body.home-page #dashboard .level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #818cf8, #6366f1);
  border-radius: 999px;
  box-shadow: 0 0 6px rgba(99,102,241,0.5);
}
body.home-page #dashboard .level-xp {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.45); white-space: nowrap;
}

/* Daily challenge */
body.home-page #dashboard .daily-challenge {
  position: relative;
  margin: 0 32px 32px;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, rgba(20,29,51,0.6) 60%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 16px 40px -12px rgba(0,0,0,0.4),
    0 0 60px -16px rgba(251,191,36,0.3);
}
body.home-page #dashboard .challenge-glow {
  position: absolute;
  top: -150px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(251,191,36,0.25) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  animation: challenge-pulse 4s ease-in-out infinite;
}
@keyframes challenge-pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } }
body.home-page #dashboard .challenge-content { position: relative; z-index: 1; }
body.home-page #dashboard .challenge-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 10px;
}
body.home-page #dashboard .challenge-fire {
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(251,191,36,0.5));
}
body.home-page #dashboard .challenge-title {
  font-family: 'Instrument Serif', serif;
  font-size: 32px; font-weight: 400;
  color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;
  margin: 0 0 8px 0;
}
body.home-page #dashboard .challenge-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px; color: rgba(255,255,255,0.7);
  margin: 0 0 20px 0; max-width: 480px;
}
body.home-page #dashboard .challenge-subtitle strong { color: #fbbf24; font-weight: 600; }
body.home-page #dashboard .challenge-progress {
  display: flex; align-items: center; gap: 16px;
}
body.home-page #dashboard .challenge-progress-track {
  flex: 1; display: flex; flex-direction: column; gap: 6px; max-width: 320px;
}
body.home-page #dashboard .challenge-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
}
body.home-page #dashboard .challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(251,191,36,0.5);
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
body.home-page #dashboard .challenge-progress-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.85);
}
body.home-page #dashboard .challenge-reward {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.3);
  border-radius: 999px;
  white-space: nowrap;
}
body.home-page #dashboard .reward-coin { font-size: 14px; }
body.home-page #dashboard .reward-amount {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 700; color: #fbbf24;
}
body.home-page #dashboard .challenge-actions {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
body.home-page #dashboard .challenge-cta {
  height: 48px; padding: 0 24px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251,191,36,0.5);
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 12px -2px rgba(251,191,36,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.home-page #dashboard .challenge-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 20px -4px rgba(251,191,36,0.5);
}
body.home-page #dashboard .challenge-timer {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; color: rgba(255,255,255,0.5);
}
body.home-page #dashboard .challenge-timer strong {
  color: rgba(255,255,255,0.85); font-weight: 600;
}
@media (max-width: 768px) {
  body.home-page #dashboard .daily-challenge {
    grid-template-columns: 1fr; gap: 20px;
  }
  body.home-page #dashboard .challenge-actions { align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-page #dashboard .challenge-glow { animation: none; }
  body.home-page #dashboard .challenge-cta,
  body.home-page #dashboard .challenge-progress-fill { transition: none; }
}

/* Dashboard grade tiles (compact, with progress bar) */
body.home-page #dashboard .grades-panel .grade-grid-compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 480px) {
  body.home-page #dashboard .grades-panel .grade-grid-compact { grid-template-columns: 1fr; }
}
body.home-page #dashboard .dashboard-grade-tile {
  position: relative;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-decoration: none;
  display: flex; flex-direction: column; gap: 10px;
  transition: all 0.2s ease;
}
body.home-page #dashboard .dashboard-grade-tile:hover {
  background: rgba(251,191,36,0.06);
  border-color: rgba(251,191,36,0.25);
  transform: translateY(-2px);
}
body.home-page #dashboard .dashboard-grade-tile-header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
body.home-page #dashboard .dashboard-grade-tile-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(251,191,36,0.85);
}
body.home-page #dashboard .dashboard-grade-tile-icon {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
body.home-page #dashboard .dashboard-grade-tile-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  margin: 0;
}
body.home-page #dashboard .dashboard-grade-tile-meta {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin: 0;
}
body.home-page #dashboard .dashboard-grade-tile-progress {
  display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
}
body.home-page #dashboard .tile-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
body.home-page #dashboard .tile-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(251,191,36,0.4);
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
}
body.home-page #dashboard .tile-progress-text {
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,0.5);
}

/* Achievements */
body.home-page #dashboard .achievements-panel { grid-column: 1 / -1; }
body.home-page #dashboard .achievements-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
body.home-page #dashboard .achievements-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) {
  body.home-page #dashboard .achievements-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  body.home-page #dashboard .achievements-grid { grid-template-columns: repeat(2, 1fr); }
}
body.home-page #dashboard .achievement-card {
  position: relative;
  padding: 16px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all 0.3s ease;
}
body.home-page #dashboard .achievement-card--unlocked {
  background: linear-gradient(180deg, rgba(251,191,36,0.1) 0%, rgba(255,255,255,0.02) 100%);
  border-color: rgba(251,191,36,0.25);
}
body.home-page #dashboard .achievement-card--unlocked:hover {
  transform: translateY(-2px);
  border-color: rgba(251,191,36,0.4);
  box-shadow: 0 0 24px -8px rgba(251,191,36,0.4);
}
body.home-page #dashboard .achievement-card--locked { opacity: 0.6; }
body.home-page #dashboard .achievement-icon { font-size: 28px; margin-bottom: 4px; }
body.home-page #dashboard .achievement-card--locked .achievement-icon {
  filter: grayscale(1) brightness(0.7);
}
body.home-page #dashboard .achievement-name {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700;
  color: #ffffff;
}
body.home-page #dashboard .achievement-desc {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.5);
  line-height: 1.3;
}
body.home-page #dashboard .achievement-status {
  font-family: 'Inter', sans-serif;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
}
body.home-page #dashboard .achievement-card--unlocked .achievement-status {
  color: #fbbf24; background: rgba(251,191,36,0.12);
}
body.home-page #dashboard .achievement-card--locked .achievement-status {
  color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.04);
}

/* Compact recent activity (bottom of dashboard) */
body.home-page #dashboard .activity-panel-compact { grid-column: 1 / -1; padding: 24px; }
body.home-page #dashboard .activity-panel-compact .activity-header {
  margin-bottom: 16px;
}
body.home-page #dashboard .activity-panel-compact .activity-empty {
  text-align: center; padding: 32px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
body.home-page #dashboard .activity-panel-compact .activity-empty-icon {
  display: inline-flex;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-size: 22px;
  margin-bottom: 10px;
  color: rgba(251,191,36,0.85);
}
body.home-page #dashboard .activity-panel-compact .activity-empty-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600;
  color: #ffffff; margin: 0;
}
body.home-page #dashboard .activity-panel-compact .activity-empty-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.55);
  max-width: 380px; margin: 0;
}
body.home-page #dashboard .activity-empty-cta {
  margin-top: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #ffffff;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.2s ease;
}
body.home-page #dashboard .activity-empty-cta:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(251,191,36,0.3);
}

/* ==========================================================================
   §45 Home premium polish (May 12) — subtractive paint pass.
   Gold accent appears ~9 times above the fold in the pre-polish version;
   this block brings it down to ~5 by demoting eyebrows, segmented controls,
   the challenge card chrome, the +50 pts chip, the marketplace link, and
   the header wallet pill. Layout / structure untouched.
   ========================================================================== */

/* 1. Live-count pill: hidden (already hidden via JS, but be explicit) */
body.home-page #dashboard .dash-live-pill { display: none !important; }

/* 2. LIFETIME STATS eyebrow — drop pill chrome, plain micro-text */
body.home-page #dashboard .welcome-eyebrow--quiet {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  color: rgba(252, 211, 77, 0.6) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  margin-bottom: 12px;
}
body.home-page #dashboard .welcome-eyebrow--quiet .eyebrow-emoji { display: none; }

/* 3. Subject toggle (Math/Reading) — segmented pill, no gold fill */
body.home-page #dashboard .subject-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
}
body.home-page #dashboard .subject-segment {
  border-radius: 999px;
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
body.home-page #dashboard .subject-segment:hover { color: #ffffff; }
body.home-page #dashboard .subject-segment.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-weight: 500;
}

/* 4. Daily challenge — strip gold border + gradient + glow; use plain panel */
body.home-page #dashboard .daily-challenge {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  backdrop-filter: none;
}
body.home-page #dashboard .challenge-glow { display: none; }
body.home-page #dashboard .challenge-fire { filter: none; }
body.home-page #dashboard .challenge-eyebrow {
  letter-spacing: 0.2em;
  font-weight: 500;
  color: rgba(252, 211, 77, 0.6);
}

/* 5. Dedupe bonus value — body copy is white/65, not gold */
body.home-page #dashboard .challenge-subtitle strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

/* +50 pts chip softens to white-on-dark; only the coin keeps gold */
body.home-page #dashboard .challenge-reward {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.home-page #dashboard .reward-amount {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

/* Challenge progress fill — was bright gold gradient; soften to a single
   tone so the +50 chip and the eyebrow are the only gold signals here */
body.home-page #dashboard .challenge-progress-fill {
  background: rgba(251, 191, 36, 0.55);
  box-shadow: none;
}

/* 6. Stat cards — Spend in marketplace link goes from gold to white/55 */
body.home-page #dashboard .stat-card-link {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
body.home-page #dashboard .stat-card-link:hover { color: #ffffff; gap: 6px; }
/* (.stat-card-value default = white; .stat-card--wallet override = gold
   already in place at line 4957. Wallet number stays the single gold
   numeric highlight in the row — that's the spec.) */

/* 7. Header wallet pill on home — muted background, gold-tinted coin only */
body.home-page .wallet-pill {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  font-weight: 500;
}
body.home-page .wallet-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
body.home-page .wallet-pill svg { color: rgba(251, 191, 36, 0.8); }

/* 10. Level progress bar fill — was gold-tinged elsewhere; force to white/30
   so the only remaining color in the level pill is the purple avatar */
body.home-page #dashboard .level-progress-fill {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}
body.practice-select-page {
  position: relative;
  background: #060d1f;
  min-height: 100vh;          /* fallback for older browsers */
  min-height: 100dvh;         /* dynamic viewport — accounts for iOS URL bar */
  color: rgba(255,255,255,0.85);
}
body.practice-select-page .site-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,0.06); }
body.practice-select-page::before {
  content: '';
  position: fixed;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(251,191,36,0.08) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
body.practice-select-page::after {
  content: '';
  position: fixed;
  bottom: -200px; left: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
body.practice-select-page .practice-select-main {
  position: relative;
  z-index: 1;
  padding: 48px 32px 80px;
}
body.practice-select-page .practice-select-inner { max-width: 1280px; margin: 0 auto; }

body.practice-select-page .back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.2s ease;
}
body.practice-select-page .back-link:hover { color: rgba(255,255,255,0.85); }

body.practice-select-page .practice-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(251,191,36,0.9);
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}
body.practice-select-page .eyebrow-emoji { font-size: 13px; }

body.practice-select-page .practice-select-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff !important;
  margin: 0 0 16px 0;
}
body.practice-select-page .title-accent {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.practice-select-page .practice-select-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.5;
  color: rgba(255,255,255,0.65);
  margin: 0 0 32px 0;
  max-width: 560px;
}

body.practice-select-page .grade-recommendation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 28px;
  background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, rgba(20,29,51,0.6) 60%);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 8px 24px -8px rgba(0,0,0,0.3),
    0 0 32px -8px rgba(251,191,36,0.25);
  margin-bottom: 48px;
}
body.practice-select-page .recommendation-icon {
  font-size: 28px;
  filter: drop-shadow(0 0 8px rgba(251,191,36,0.4));
}
body.practice-select-page .recommendation-content { display: flex; flex-direction: column; gap: 4px; }
body.practice-select-page .recommendation-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(251,191,36,0.85);
}
body.practice-select-page .recommendation-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
body.practice-select-page .recommendation-text strong { color: #ffffff; font-weight: 600; }
body.practice-select-page .recommendation-cta {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251,191,36,0.5);
  border-radius: 11px;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 4px 12px -2px rgba(251,191,36,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.practice-select-page .recommendation-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 20px -4px rgba(251,191,36,0.5);
}
@media (max-width: 768px) {
  body.practice-select-page .grade-recommendation {
    grid-template-columns: 1fr; text-align: center; gap: 12px;
  }
  body.practice-select-page .recommendation-icon { margin: 0 auto; }
}

body.practice-select-page .practice-grid-header { margin-bottom: 24px; }
body.practice-select-page .practice-grid-title {
  font-family: 'Inter', sans-serif;
  font-size: 18px; font-weight: 600;
  color: #ffffff !important;
  letter-spacing: -0.01em;
  margin: 0 0 4px 0;
}
body.practice-select-page .practice-grid-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}

body.practice-select-page .practice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { body.practice-select-page .practice-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { body.practice-select-page .practice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { body.practice-select-page .practice-grid { grid-template-columns: 1fr; } }

/* "Your grade" green-accent variant */
body.practice-select-page .grade-card--current {
  border-color: rgba(16,185,129,0.3);
  background: linear-gradient(180deg, rgba(16,185,129,0.08) 0%, rgba(20,29,51,0.5) 100%);
}
body.practice-select-page .grade-card--current::after {
  content: 'Your grade';
  position: absolute;
  top: 12px; right: 12px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 600;
  color: #34d399;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 2;
}
body.practice-select-page .grade-card--current:hover {
  border-color: rgba(16,185,129,0.5);
  box-shadow:
    0 0 0 1px rgba(16,185,129,0.25),
    0 16px 32px -8px rgba(0,0,0,0.4),
    0 0 24px -8px rgba(16,185,129,0.4);
}

/* Tips section */
body.practice-select-page .practice-tips {
  margin-top: 64px;
  padding: 40px;
  background: linear-gradient(180deg, rgba(26,37,64,0.4) 0%, rgba(20,29,51,0.4) 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  backdrop-filter: blur(12px);
}
body.practice-select-page .practice-tips-title {
  font-family: 'Instrument Serif', serif;
  font-size: 28px; font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin: 0 0 24px 0;
}
body.practice-select-page .tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 768px) { body.practice-select-page .tips-grid { grid-template-columns: 1fr; } }
body.practice-select-page .tip-card {
  padding: 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
body.practice-select-page .tip-icon { font-size: 22px; margin-bottom: 4px; }
body.practice-select-page .tip-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  color: #ffffff; margin: 0;
}
body.practice-select-page .tip-card-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   PROMPT 15 — Premium practice question page (body.practice-page)
   ============================================================ */
body.practice-page {
  background: #060d1f;
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;          /* fallback for older browsers */
  min-height: 100dvh;         /* dynamic viewport — accounts for iOS URL bar */
  position: relative;
  overflow-x: hidden;
}
body.practice-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 600px at 18% 6%, rgba(251,191,36,0.10), transparent 60%),
    radial-gradient(800px 600px at 88% 12%, rgba(99,102,241,0.10), transparent 60%),
    radial-gradient(700px 500px at 50% 96%, rgba(16,185,129,0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
body.practice-page > * { position: relative; z-index: 1; }

/* Header */
body.practice-page .site-header {
  background: rgba(10, 22, 40, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  z-index: 60;
}
body.practice-page .site-header .brand-text { color: #ffffff; }
body.practice-page .site-header .nav a {
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}
body.practice-page .site-header .nav a:hover { color: #fde68a; }

body.practice-page section { padding: 32px 0 64px; }
body.practice-page #practice-root > p {
  color: rgba(255,255,255,0.65);
  text-align: center;
  padding: 80px 0;
  font-size: 16px;
}

/* Layout */
body.practice-page .practice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1024px) {
  body.practice-page .practice-layout {
    grid-template-columns: 1fr;
  }
}
body.practice-page .practice-main { position: relative; min-width: 0; }

/* Header row */
body.practice-page .practice-header { margin-bottom: 24px; }
body.practice-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.65) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 0.2s;
}
body.practice-page .back-link:hover { color: #fde68a !important; }

body.practice-page .practice-title-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
body.practice-page .practice-title-row h2 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff !important;
  margin: 0;
}
body.practice-page .btn-restart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  color: rgba(255,255,255,0.78);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
body.practice-page .btn-restart:hover {
  background: rgba(251,191,36,0.10);
  border-color: rgba(251,191,36,0.30);
  color: #fde68a;
}

/* Progress bar — wrapper holds track (clipped) + pulse (free to extend) */
body.practice-page .progress-bar {
  position: relative;
  height: 14px;
  background: transparent;
  overflow: visible;
  display: flex;
  align-items: center;
}
body.practice-page .progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}
body.practice-page .progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fde68a, #fbbf24 55%, #f59e0b);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 16px rgba(251,191,36,0.45);
}
body.practice-page .progress-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fde68a;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 4px rgba(251,191,36,0.20),
    0 0 16px rgba(251,191,36,0.65),
    inset 0 0 0 1px rgba(255,255,255,0.35);
  animation: progress-pulse 2s ease-in-out infinite;
  transition: left 0.5s cubic-bezier(0.4,0,0.2,1);
  z-index: 2;
  pointer-events: none;
}
@keyframes progress-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 0 0 4px rgba(251,191,36,0.20), 0 0 16px rgba(251,191,36,0.60), inset 0 0 0 1px rgba(255,255,255,0.35);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.20);
    box-shadow: 0 0 0 6px rgba(251,191,36,0.14), 0 0 24px rgba(251,191,36,0.85), inset 0 0 0 1px rgba(255,255,255,0.45);
  }
}
body.practice-page .progress-text {
  text-align: right;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 8px;
  font-weight: 500;
}
body.practice-page .progress-text #progress-num { color: #fde68a; font-weight: 700; }

/* Mastered banner */
body.practice-page .mastered-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.06));
  border: 1px solid rgba(129,140,248,0.30);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
body.practice-page .mastered-star { font-size: 24px; }
body.practice-page .mastered-title { font-weight: 700; color: #ffffff; font-size: 14px; }
body.practice-page .mastered-sub { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.5; margin-top: 2px; }

/* Question card */
body.practice-page .question-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 36px 40px 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  overflow: hidden;
}
body.practice-page .question-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 220px at 0% 0%, rgba(251,191,36,0.12), transparent 65%);
  pointer-events: none;
}
body.practice-page .question-card > * { position: relative; }

/* Q meta tags row */
body.practice-page .q-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
body.practice-page .q-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
}
body.practice-page .q-reward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, rgba(251,191,36,0.18), rgba(245,158,11,0.10));
  border: 1px solid rgba(251,191,36,0.40);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fde68a;
}
body.practice-page .q-reward-locked {
  background: rgba(99,102,241,0.14);
  border-color: rgba(129,140,248,0.35);
  color: #c7d2fe;
}

/* Prompt */
body.practice-page .q-prompt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 28px;
}
body.practice-page .q-prompt-text {
  /* Bug T from master audit: serifs at small mobile sizes confuse
     K-3 + dyslexic readers. Switched from Instrument Serif to Inter
     (humanist sans). Font-size also dropped a touch (was up to 44px,
     now 36px max) so question doesn't dominate the first paint —
     leaves more breathing room for the answer choices and feedback. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.40;
  letter-spacing: -0.005em;
  color: #ffffff;
}
body.practice-page .q-read-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
body.practice-page .q-read-btn:hover { background: rgba(251,191,36,0.14); border-color: rgba(251,191,36,0.30); }

/* Answer body */
body.practice-page .q-body { margin-bottom: 24px; }

/* Free-response input */
body.practice-page .q-body .num-input {
  width: 100%;
  height: 64px;
  padding: 0 22px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  color: #ffffff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
body.practice-page .q-body .num-input::placeholder { color: rgba(255,255,255,0.35); font-family: 'Inter', sans-serif; font-size: 16px; }
body.practice-page .q-body .num-input:focus {
  border-color: rgba(251,191,36,0.55);
  background: rgba(251,191,36,0.05);
  box-shadow: 0 0 0 4px rgba(251,191,36,0.12);
}

/* MC choices */
body.practice-page .q-body .choice {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.18s;
  font-size: 17px;
  color: rgba(255,255,255,0.92);
}
body.practice-page .q-body .choice:hover {
  background: rgba(251,191,36,0.06);
  border-color: rgba(251,191,36,0.30);
  transform: translateY(-1px);
}
body.practice-page .q-body .choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.30);
  border-radius: 50%;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
  position: relative;
}
body.practice-page .q-body .choice input[type="radio"]:checked {
  border-color: #fbbf24;
}
body.practice-page .q-body .choice input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b);
  box-shadow: 0 0 10px rgba(251,191,36,0.6);
}
body.practice-page .q-body .choice:has(input:checked) {
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.50);
}

/* Submit button */
body.practice-page .question-card .btn.btn-primary,
body.practice-page .question-card button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 26px;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  border: none;
  border-radius: 12px;
  color: #060d1f;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(251,191,36,0.30);
  transition: transform 0.15s, box-shadow 0.2s;
}
body.practice-page .question-card .btn.btn-primary:hover,
body.practice-page .question-card button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(251,191,36,0.45);
}

/* Feedback */
body.practice-page .feedback {
  margin-top: 22px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid;
  background: rgba(255,255,255,0.03);
}
body.practice-page .feedback.correct {
  border-color: rgba(52,211,153,0.40);
  background: linear-gradient(180deg, rgba(16,185,129,0.14), rgba(16,185,129,0.04));
}
body.practice-page .feedback.incorrect {
  border-color: rgba(248,113,113,0.40);
  background: linear-gradient(180deg, rgba(239,68,68,0.14), rgba(239,68,68,0.04));
}
body.practice-page .feedback-head {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  margin-bottom: 8px;
  font-weight: 400;
}
body.practice-page .feedback.correct .feedback-head { color: #6ee7b7; }
body.practice-page .feedback.incorrect .feedback-head { color: #fca5a5; }
body.practice-page .feedback-body {
  color: rgba(255,255,255,0.85);
  font-size: 15px;
  line-height: 1.6;
}
body.practice-page .feedback-body p { margin: 0 0 10px; }
body.practice-page .feedback-body strong { color: #ffffff; }
body.practice-page .feedback-actions { margin-top: 16px; }
body.practice-page #next-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b);
  border: none;
  border-radius: 12px;
  color: #060d1f;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(251,191,36,0.30);
}
body.practice-page #next-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(251,191,36,0.45); }

/* Tutor box */
body.practice-page .tutor-box { margin-top: 14px; }
body.practice-page .tutor-box .btn-primary {
  background: linear-gradient(135deg, #818cf8, #6366f1);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(99,102,241,0.35);
}
body.practice-page .tutor-output {
  margin-top: 12px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(20, 29, 51, 0.85) 0%, rgba(15, 22, 41, 0.85) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  color: rgba(255,255,255,0.95);
  font-size: 14.5px;
  line-height: 1.65;
  letter-spacing: -0.005em;
}
body.practice-page .tutor-msg.assistant { color: rgba(255,255,255,0.95); }
body.practice-page .tutor-msg.assistant.error,
body.practice-page .tutor-msg.error { color: #fca5a5; font-weight: 500; }
body.practice-page .tutor-msg.user { color: rgba(255,255,255,0.7); margin-top: 8px; }
body.practice-page .tutor-followup {
  display: flex; gap: 8px; margin-top: 10px;
}
body.practice-page .tutor-followup input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
}
body.practice-page .tutor-followup input:focus {
  border-color: rgba(251,191,36,0.50);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.12);
}
body.practice-page .tutor-send {
  width: 40px; height: 40px;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b);
  color: #060d1f;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* §95 — pre-§95 inline-banner rules retired. The new fixed-top
   sticky banner lives at the bottom of this file under the §95
   block. The .guest-banner class is the new canonical selector;
   #guest-banner is still the element id for back-compat with
   the existing render code. */

/* Sidebar */
body.practice-page .performance-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px;
}
body.practice-page .perf-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 20px 22px;
}
body.practice-page .perf-title,
body.practice-page .perf-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 14px;
}
body.practice-page .perf-ring-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
body.practice-page .perf-ring .accuracy-value {
  font-family: 'Instrument Serif', Georgia, serif;
  fill: #ffffff;
  font-weight: 400;
}
body.practice-page .perf-ring .accuracy-suffix { fill: rgba(255,255,255,0.55); }
body.practice-page .perf-ring .accuracy-label {
  fill: rgba(255,255,255,0.45);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
body.practice-page .perf-stats {
  display: grid;
  /* §67 — 4 tiles (correct / answered / streak / pts earned). 2×2
     on the panel keeps each tile readable; was repeat(3, 1fr). */
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
}
/* §67 — "pts earned" tile: gold accent so it visually weighs as
   the test-feel motivator without recoloring the other tiles. */
body.practice-page .perf-stats .stat--points {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(255,255,255,0.02)) !important;
  border-color: rgba(251, 191, 36, 0.25) !important;
}
body.practice-page .perf-stats .stat--points .stat-num { color: #fbbf24; }
body.practice-page .perf-stats .stat {
  padding: 12px 8px;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
body.practice-page .perf-stats .stat:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10);
}
body.practice-page .perf-stats .stat.has-streak {
  background: linear-gradient(180deg, rgba(239,68,68,0.10), rgba(255,255,255,0.02)) !important;
  border-color: rgba(239,68,68,0.22);
}
body.practice-page .perf-stats .stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 26px;
  color: #ffffff;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
}
body.practice-page .streak-emoji {
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(239,68,68,0.45));
}
body.practice-page .perf-stats .stat-label {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-top: 6px;
}

/* Last 20 dots — 10 col grid */
body.practice-page .recent-dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
body.practice-page .recent-dots .dot {
  aspect-ratio: 1;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
}
body.practice-page .recent-dots .dot.empty { background: rgba(255,255,255,0.05); }
body.practice-page .recent-dots .dot.correct {
  background: linear-gradient(135deg, #34d399, #10b981);
  box-shadow: 0 0 8px rgba(16,185,129,0.50);
}
body.practice-page .recent-dots .dot.incorrect {
  background: linear-gradient(135deg, #f87171, #ef4444);
  box-shadow: 0 0 8px rgba(239,68,68,0.45);
}

/* Mastery rows */
body.practice-page .unit-rows { display: flex; flex-direction: column; gap: 10px; }
body.practice-page .unit-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
}
body.practice-page .unit-row-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  grid-column: 1 / 2;
}
body.practice-page .unit-row.dim .unit-row-title { color: rgba(255,255,255,0.62); }
body.practice-page .unit-row-pct {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums;
  grid-column: 2 / 3;
}
body.practice-page .unit-row-bar {
  grid-column: 1 / 3;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
body.practice-page .unit-row-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Points pop */
.points-pop {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 64px;
  font-weight: 400;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  z-index: 5;
  animation: points-pop 1.2s cubic-bezier(0.4,0,0.2,1) forwards;
  filter: drop-shadow(0 4px 12px rgba(251,191,36,0.55));
}
@keyframes points-pop {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20%  { transform: translate(-50%, -80%) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -180%) scale(1.0); opacity: 0; }
}


/* ============================================================
   Scratchpad — inline expandable, mounted directly below the
   question card on the practice page. Default collapsed.
   ============================================================ */
.scratchpad-inline {
  margin-top: 16px;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', system-ui, sans-serif;
  color: #ffffff;
}
.scratchpad-inline[data-state="expanded"] {
  border-color: rgba(251, 191, 36, 0.2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 24px -8px rgba(0, 0, 0, 0.3);
}

/* COLLAPSED — single-line toggle button */
.scratchpad-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.scratchpad-toggle:hover { background: rgba(255, 255, 255, 0.02); }
.scratchpad-toggle-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.12) 0%, rgba(245, 158, 11, 0.04) 100%);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 8px;
  color: #fbbf24;
  flex-shrink: 0;
}
.scratchpad-toggle-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
}
.scratchpad-toggle-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.scratchpad-toggle-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.7);
}
.scratchpad-toggle-chevron {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
@media (max-width: 640px) {
  .scratchpad-toggle-hint { display: none; }
}

/* EXPANDED — body */
.scratchpad-body { display: none; }
.scratchpad-inline[data-state="expanded"] .scratchpad-body {
  display: flex;
  flex-direction: column;
  animation: scratchpad-expand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scratchpad-inline[data-state="expanded"] .scratchpad-toggle { display: none; }
@keyframes scratchpad-expand {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scratchpad-body-header {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.scratchpad-body-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.scratchpad-body-title-icon { color: #fbbf24; display: flex; }
.scratchpad-body-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}
.scratchpad-body-actions { margin-left: auto; display: flex; gap: 6px; }

.scratchpad-action-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: all 0.15s ease;
}
.scratchpad-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.12);
}
.scratchpad-action-btn.scratchpad-clear-btn:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.25);
}

.scratchpad-canvas-area {
  height: 280px;
  padding: 14px;
  position: relative;
}
.scratchpad-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    rgba(255, 255, 255, 0.015);
  background-size: 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
}

.scratchpad-toolbar {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.scratchpad-tool {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.scratchpad-tool:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.scratchpad-tool.is-active {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.08) 100%);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.scratchpad-tool-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0 4px;
}

@media (max-width: 640px) {
  .scratchpad-canvas-area { height: 220px; }
}
@media (max-width: 480px) {
  .scratchpad-canvas-area { height: 180px; padding: 10px; }
  .scratchpad-toolbar { padding: 8px 10px; gap: 4px; flex-wrap: wrap; }
  .scratchpad-tool { width: 36px; height: 36px; }
}

/* Question clone — populated only in fullscreen mode (mobile).
   Hidden by default so desktop expanded mode is unchanged. */
.scratchpad-question-clone { display: none; }

/* Scroll buttons in toolbar — only relevant when the canvas overflows
   (fullscreen mode); hidden by default so the desktop side-panel
   toolbar stays unchanged. */
.scratchpad-scroll-btn,
.scratchpad-scroll-divider { display: none; }

/* ============================================================
   FULLSCREEN MODE — mobile only (<768px). Old behavior was a
   small inline panel that obscured the question; new behavior
   covers the screen with the question pinned at the top so the
   kid can re-read while drawing. CLOSE button discards (with
   confirm), MINIMIZE button preserves work. Desktop unchanged.
   ============================================================ */
@media (max-width: 767px) {
  /* When fullscreen, the host shell becomes a full-viewport overlay.
     We override several earlier rules (margin, border-radius, height) so
     the body fills inset:0. */
  .scratchpad-inline[data-state="fullscreen"] {
    position: fixed;
    inset: 0;
    z-index: 9000;          /* above question content, below toasts (10k+) */
    margin: 0;
    border-radius: 0;
    border: none;
    background: linear-gradient(180deg, #0a1224 0%, #050811 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* §40 — respect iOS notch/header so [✕] + [⌄] don't sit under
       the browser chrome. env() falls back to 0 on browsers that
       don't support it. */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-toggle { display: none; }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    animation: none;
  }
  /* Header with title + actions sits at top of the overlay flow.
     Actions absolute-positioned to the top-right of the OVERLAY
     (not the viewport) so they sit below iOS browser chrome via
     the overlay's safe-area padding-top. */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-body-header {
    padding: 8px 16px;
    flex-shrink: 0;
    position: relative;
    min-height: 44px;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-body-hint { display: none; }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-body-actions {
    position: absolute;
    top: 6px;
    right: 12px;
    z-index: 1;
    gap: 8px;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-action-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-action-btn.scratchpad-close-btn:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.4);
  }
  /* Question clone — visible in fullscreen mode, capped at 18vh so
     the canvas claims the dominant share of the screen (§40). The
     stem is still scrollable inside the strip if it's long. */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone {
    display: block;
    flex-shrink: 0;
    max-height: 18vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 16px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
  }
  /* The clone reuses the live #qbox markup; tighten spacing for the
     fullscreen header context so it reads as a compact reference, not
     the primary interactive question. §40 — smaller stem font + line-
     height so the question still reads cleanly in 18vh. */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .question-card {
    padding: 4px 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .q-prompt {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
    margin: 0;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .choice {
    padding: 4px 8px;
    margin: 2px 0;
    min-height: 28px;
    font-size: 13px;
    pointer-events: none;
    opacity: 0.85;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .q-meta,
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .feedback,
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .tutor-box,
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .feedback-actions,
  /* Hide the answer-interaction surfaces inside the scratch overlay.
     Kid uses scratch ONLY to work out the math; once they have the
     answer, they minimize/close and type/select on the real practice
     screen. Showing input + Check button here wastes vertical space
     and creates two answer paths. (Multi-choice .choice labels stay
     visible above as a read-only reference — see the .choice rule.) */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .num-input,
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .question-card > button[type="submit"],
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .q-read-btn,
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-question-clone .q-reward {
    display: none;
  }
  /* Drawing canvas takes the rest of the viewport AND is scrollable.
     The canvas itself is sized much taller than the visible area in
     sizeCanvas() (Word-document feel — kid swipes through pages).
     §40 — explicit min-height: 50vh as a safety floor so flex
     distribution can't accidentally squeeze the canvas-area when
     the body-header / question-clone / toolbar combine for >50vh. */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-canvas-area {
    flex: 1 1 auto;
    min-height: 50vh;
    height: auto;
    padding: 6px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  /* Lock the toolbar from shrinking — without this, flex distribution
     can squeeze it when the canvas-area's min-height pushes the
     column over the viewport. */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-toolbar {
    flex-shrink: 0;
    padding: 8px 12px;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-canvas {
    border-radius: 8px;
    /* The canvas is taller than the visible area; explicit display:block
       prevents inline-baseline gaps. */
    display: block;
  }
  /* Scroll button styling — only visible in fullscreen mode where the
     canvas overflows. Hidden on desktop expanded mode. */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-scroll-btn {
    display: flex;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-scroll-divider {
    display: inline-block;
  }
  /* Push scroll buttons to the right edge of the toolbar so they're
     reachable with the thumb separately from the drawing tools. */
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-scroll-divider {
    margin-left: auto;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-toolbar {
    flex-shrink: 0;
    padding: 12px 14px;
  }
  .scratchpad-inline[data-state="fullscreen"] .scratchpad-tool {
    width: 40px;
    height: 40px;
  }
}
/* Lock body scroll while overlay is open so the page underneath doesn't
   bounce when the kid swipes inside the canvas. */
body.scratchpad-fullscreen-open { overflow: hidden; }

/* §45/§46 — surfaces that otherwise render above the scratch
   overlay and block its [✕] / [⌄] buttons. The site-header is
   the primary culprit: on body.practice-page the rule
   `body.practice-page > * { position: relative; z-index: 1; }`
   re-stacks every direct child of body, defeating .site-header's
   declared z-index. The scratchpad-inline overlay wins inside
   that stacking model but the site-header still paints above
   the overlay's top-right action buttons in iOS Safari. Cleanest
   fix is to hide the header (plus toast / pill surfaces) while
   the kid is in scratch — they don't need the global nav while
   drawing, and the [✕] / [⌄] buttons reach the top of the
   viewport unblocked. */
body.scratchpad-fullscreen-open .site-header,
body.scratchpad-fullscreen-open .cents-toast,
body.scratchpad-fullscreen-open .points-pill,
body.scratchpad-fullscreen-open .wallet-pill,
body.scratchpad-fullscreen-open .user-slot {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .scratchpad-inline { transition: none; }
  .scratchpad-inline[data-state="expanded"] .scratchpad-body { animation: none; }
}


/* ============================================================
   Premium AI Tutor — code blocks, chips, thinking dots
   ============================================================ */
body.practice-page .tutor-output { font-size: 14.5px; line-height: 1.6; }
body.practice-page .tutor-msg { margin-top: 8px; }
body.practice-page .tutor-msg p { margin: 0 0 8px; }
body.practice-page .tutor-msg p:last-child { margin-bottom: 0; }
body.practice-page .tutor-msg strong { color: #fde68a; font-weight: 600; }
body.practice-page .tutor-msg code {
  font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
  font-size: 0.92em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1px 6px;
  border-radius: 6px;
  color: #fde68a;
}
body.practice-page .tutor-code,
body.practice-page .tutor-msg pre.tutor-code {
  font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
  font-size: 17px;
  line-height: 1.5;
  color: #ffffff;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 14px 18px;
  border-radius: 12px;
  margin: 10px 0;
  display: block;
  white-space: pre;
  overflow-x: auto;
  letter-spacing: 0.04em;
}
body.practice-page .tutor-code code {
  background: transparent;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
body.practice-page .tutor-msg.user {
  color: rgba(255,255,255,0.72);
  font-style: italic;
  margin-top: 12px;
}
body.practice-page .tutor-msg.user strong { color: rgba(255,255,255,0.92); font-style: normal; }

/* Suggestion chips */
body.practice-page .tutor-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
body.practice-page .tutor-chip {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #c7d2fe;
  background: rgba(99,102,241,0.10);
  border: 1px solid rgba(99,102,241,0.28);
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.15s;
}
body.practice-page .tutor-chip:hover {
  background: rgba(99,102,241,0.18);
  border-color: rgba(129,140,248,0.55);
  color: #e0e7ff;
  transform: translateY(-1px);
}
body.practice-page .tutor-chip:active { transform: translateY(0); }

/* Thinking dots */
body.practice-page .tutor-thinking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 12px 0;
}
body.practice-page .thinking-dot {
  width: 7px;
  height: 7px;
  background: rgba(165,180,252,0.7);
  border-radius: 50%;
  animation: tutor-thinking 1.4s ease-in-out infinite;
}
body.practice-page .thinking-dot:nth-child(2) { animation-delay: 0.18s; }
body.practice-page .thinking-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes tutor-thinking {
  0%, 60%, 100% { opacity: 0.30; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}


/* ============================================================
   Admin: live users panel (Users tab)
   Stat cards + currently-online table.
   ============================================================ */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 18px 0 22px;
}
@media (max-width: 760px) { .admin-stats { grid-template-columns: 1fr; } }
.admin-stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 18px 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.admin-stat-card--online { border-color: rgba(99,102,241,0.30); }
.admin-stat-card--practicing { border-color: rgba(251,191,36,0.30); }
.admin-stat-label {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.admin-stat-value {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  line-height: 1;
}
.admin-stat-card--online .admin-stat-value { color: #c7d2fe; }
.admin-stat-card--practicing .admin-stat-value { color: #fde68a; }
.admin-stat-meta {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
}

/* Pulsing live dot (used in label and table rows) */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 0 0 rgba(129,140,248,0.6);
  animation: admin-live-pulse 1.8s ease-out infinite;
}
.live-dot--gold {
  background: #fbbf24;
  box-shadow: 0 0 0 0 rgba(251,191,36,0.6);
}
@keyframes admin-live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(129,140,248,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(129,140,248,0); }
  100% { box-shadow: 0 0 0 0   rgba(129,140,248,0); }
}
.live-dot--gold {
  animation-name: admin-live-pulse-gold;
}
@keyframes admin-live-pulse-gold {
  0%   { box-shadow: 0 0 0 0   rgba(251,191,36,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(251,191,36,0); }
  100% { box-shadow: 0 0 0 0   rgba(251,191,36,0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .live-dot--gold { animation: none; }
}

/* Live users header row */
.live-users-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 8px 0 12px;
  flex-wrap: wrap;
}
.live-users-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  font-family: 'Inter', system-ui, sans-serif;
}
.live-users-wrap {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 6px;
  overflow-x: auto;
}
.live-users-empty {
  margin: 18px 14px;
  color: rgba(255,255,255,0.5);
}

/* Live users table */
.live-users-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
}
.live-users-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.live-users-table tbody tr {
  transition: background 0.15s ease;
}
.live-users-table tbody tr + tr td {
  border-top: 1px solid rgba(255,255,255,0.04);
}
.live-users-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.live-users-table td {
  padding: 12px 14px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  vertical-align: middle;
}
.live-row--practicing { background: rgba(251,191,36,0.04); }
.live-row--practicing:hover { background: rgba(251,191,36,0.07); }

.live-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.12);
}
.live-name { font-weight: 600; color: #ffffff; }
.live-uname { color: rgba(255,255,255,0.5); font-size: 13px; }
.live-time  { color: rgba(255,255,255,0.55); font-size: 13px; white-space: nowrap; }

.live-grade-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.live-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  font-weight: 500;
}
.live-status--online    { color: #c7d2fe; }
.live-status--practicing { color: #fde68a; font-weight: 600; }

.tab-badge--live {
  background: rgba(251,191,36,0.18);
  color: #fde68a;
  border: 1px solid rgba(251,191,36,0.35);
}

/* ============================================================
   ADMIN PAGE — premium dark theme (Prompt 24)
   Scoped under body.admin-page so we never collide with the
   legacy .admin-* classes used by the kid-facing app.
   ============================================================ */
body.admin-page {
  background: #060d1f;
  color: rgba(255, 255, 255, 0.92);
  min-height: 100vh;          /* fallback for older browsers */
  min-height: 100dvh;         /* dynamic viewport — accounts for iOS URL bar */
}

body.admin-page::before {
  content: '';
  position: fixed;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(251,191,36,0.06) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
body.admin-page::after {
  content: '';
  position: fixed;
  bottom: -200px; left: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(99,102,241,0.06) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
body.admin-page > * { position: relative; z-index: 1; }
body.admin-page .site-header { z-index: 60; }

body.admin-page .admin-shell {
  position: relative;
  padding: 60px 32px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  body.admin-page .admin-shell { padding: 40px 18px 60px; }
}

/* Page header */
body.admin-page .admin-header { margin-bottom: 40px; }
body.admin-page .admin-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(165, 180, 252, 0.95);
  background: rgba(99, 102, 241, 0.10);
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
body.admin-page .admin-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18), 0 0 8px rgba(99,102,241,0.5);
}
body.admin-page h1 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #ffffff;
  margin: 0 0 10px 0;
}
body.admin-page h2 {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 16px 0;
}
body.admin-page h3 {
  color: rgba(255,255,255,0.9);
}
body.admin-page .page-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 0 0;
  max-width: 600px;
  line-height: 1.5;
}

/* Tabs — gold-tinted active state */
body.admin-page .admin-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 32px 0 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-wrap: wrap;
}
body.admin-page .admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
body.admin-page .admin-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.04);
}
body.admin-page .admin-tab.active {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.28);
}
body.admin-page .admin-tab .tab-badge {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  min-width: 20px;
  text-align: center;
  border: 0;
}
body.admin-page .admin-tab.active .tab-badge {
  background: rgba(251, 191, 36, 0.22);
  color: #fde68a;
}
body.admin-page .admin-tab .tab-badge--live {
  background: rgba(251, 191, 36, 0.18);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.32);
}

/* Stat cards */
body.admin-page .admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 40px;
}
@media (max-width: 768px) { body.admin-page .admin-stats { grid-template-columns: 1fr; } }
body.admin-page .admin-stat-card {
  padding: 24px;
  background: linear-gradient(180deg, rgba(26,37,64,0.55) 0%, rgba(20,29,51,0.55) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 4px 12px -2px rgba(0,0,0,0.25);
}
body.admin-page .admin-stat-card--online    { border-color: rgba(99,102,241,0.30); }
body.admin-page .admin-stat-card--practicing{ border-color: rgba(251,191,36,0.30); }
body.admin-page .admin-stat-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 4px;
}
body.admin-page .admin-stat-value {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1;
}
body.admin-page .admin-stat-card--online    .admin-stat-value { color: #c7d2fe; }
body.admin-page .admin-stat-card--practicing .admin-stat-value { color: #fde68a; }
body.admin-page .admin-stat-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}

/* Live-users panel */
body.admin-page .live-users-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 0 0 18px;
  flex-wrap: wrap;
}
body.admin-page .live-users-head h2 {
  margin: 0 !important;
}
body.admin-page .live-users-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
body.admin-page .live-users-wrap {
  background: linear-gradient(180deg, rgba(26,37,64,0.55) 0%, rgba(20,29,51,0.55) 100%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  overflow: hidden;
  padding: 0;
}
body.admin-page .live-users-empty {
  margin: 24px 22px;
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', system-ui, sans-serif;
}

/* Live users table */
body.admin-page .live-users-table thead th {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
body.admin-page .live-users-table tbody td {
  padding: 14px 20px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  border-top: 0;
  vertical-align: middle;
}
body.admin-page .live-users-table tbody tr:last-child td { border-bottom: none; }
body.admin-page .live-users-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
body.admin-page .live-row--practicing { background: rgba(251,191,36,0.04); }
body.admin-page .live-row--practicing:hover { background: rgba(251,191,36,0.07); }
body.admin-page .live-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
}
body.admin-page .live-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  color: #ffffff;
}
body.admin-page .live-uname {
  font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
body.admin-page .live-grade-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  min-width: 36px;
  text-align: center;
  letter-spacing: 0.02em;
}
body.admin-page .live-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
body.admin-page .live-status--online    { color: #c7d2fe; }
body.admin-page .live-status--practicing { color: #fde68a; font-weight: 600; }
body.admin-page .live-time {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}

/* Inputs / form / table for Toys + Orders tabs (kept simple, dark) */
body.admin-page .auth-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: block;
  margin-bottom: 6px;
}
body.admin-page .auth-input {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.admin-page .auth-input:focus {
  outline: none;
  border-color: rgba(251,191,36,0.45);
  background: rgba(255,255,255,0.06);
}
body.admin-page .admin-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
body.admin-page .admin-form .row.col1 { grid-template-columns: 1fr; }
body.admin-page .admin-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', system-ui, sans-serif;
  margin-top: 10px;
}
body.admin-page .admin-table thead th {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
body.admin-page .admin-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
body.admin-page .admin-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
body.admin-page .admin-table img {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.08);
}
body.admin-page .admin-img-preview {
  max-width: 200px; max-height: 200px;
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Ship panel (orders to fulfill) — gold tint */
body.admin-page .ship-panel {
  background: linear-gradient(180deg, rgba(251,191,36,0.10), rgba(245,158,11,0.04));
  border: 1px solid rgba(251,191,36,0.30);
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 28px;
}
body.admin-page .ship-panel-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 12px;
}
body.admin-page .ship-panel-head h2 {
  margin: 0;
  font-size: 22px;
  color: #fde68a;
}
body.admin-page .ship-count {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(251,191,36,0.25);
  color: #fde68a;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-left: 6px;
}
body.admin-page .ship-panel-sub {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
}

/* Buttons */
body.admin-page .btn-primary {
  background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
  color: #060d1f;
  border: 1px solid rgba(251,191,36,0.5);
  padding: 10px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
}
body.admin-page .btn-ghost {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
}

/* Footer */
body.admin-page .admin-footer {
  margin-top: 80px;
  padding: 22px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
  z-index: 1;
}
body.admin-page .admin-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
body.admin-page .footer-logo-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}
body.admin-page .admin-footer-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  flex-wrap: wrap;
}
body.admin-page .admin-footer-meta strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
body.admin-page .dot-divider { color: rgba(255, 255, 255, 0.2); }

/* ============================================================
   PROMPT 26 — GLOBAL MOBILE PRIMITIVES
   Foundation for all per-page mobile work. Discipline rule:
   only @media (max-width: 1024 | 768 | 480) blocks below.
   ============================================================ */

/* ---- iOS zoom killer: inputs at 16px globally ---- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
  font-size: 16px;
}

/* ---- Eliminate 300ms tap delay on iOS ---- */
button,
a,
[role="button"],
.pill-button,
.btn,
.tab,
input[type="submit"],
input[type="button"] {
  touch-action: manipulation;
}

/* ---- Hover-only hover for the most exposed components ---- */
@media (hover: hover) {
  .grade-card:hover,
  .feature-card:hover { transform: translateY(-4px); }
  .toy-card:hover { transform: translateY(-6px); }
  .dashboard-grade-tile:hover,
  .stat-card:hover,
  .achievement-card--unlocked:hover { transform: translateY(-2px); }
  .btn-primary:hover,
  .question-submit:hover,
  .signin-submit:hover { transform: translateY(-1px); }
}
@media (hover: none) {
  .grade-card:hover,
  .toy-card:hover,
  .dashboard-grade-tile:hover,
  .stat-card:hover,
  .achievement-card--unlocked:hover,
  .feature-card:hover,
  .btn-primary:hover,
  .question-submit:hover,
  .signin-submit:hover {
    transform: none;
  }
}

/* ============================================================
   MOBILE HEADER — restructured for narrow viewports (<= 768px)
   ============================================================ */
@media (max-width: 768px) {
  .site-header { padding: 8px 16px; }
  .site-header .container { height: 48px; gap: 8px; }

  /* §70 — Hide center nav + chat-bell + admin badge on mobile.
     The .user-pill and .user-menu are EXPLICITLY NOT hidden here —
     §62's mobile rule below shows the avatar dropdown as the
     primary auth surface on phone. Block 1's old !important hiders
     for .user-pill / .user-menu would beat §62's non-important
     show-rule, leaving signed-in users with no avatar (Hamid screenshot
     12:50pm). Keep nav/chat/admin hidden — those route via the
     dropdown's links. */
  /* May 11 v3 — header nav is too cramped on phone alongside brand +
     wallet + user pill. Hide the inline nav on mobile and surface
     all nav items inside the user-pill dropdown menu instead
     (.user-menu-mobile-nav, set in js/auth.js renderHeader). Desktop
     keeps the inline nav visible. */
  .site-header .nav,
  .site-header .chat-bell,
  .site-header #user-slot .chat-bell,
  .site-header #user-slot .admin-badge {
    display: none !important;
  }
  /* Mobile nav inside user-menu */
  .user-menu-mobile-nav { display: block; }

  /* Brand smaller */
  .site-header .brand { font-size: 16px; }
  .site-header .brand svg { width: 28px; height: 28px; }

  /* Compact nav for mobile — fits Home / Trophies / League / Toys /
     How it works on phones. Items wrap-free + horizontal-scroll
     if a wider language pushes them past the viewport. */
  .site-header .nav {
    padding: 3px;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 100%;
    flex-shrink: 1;
  }
  .site-header .nav::-webkit-scrollbar { display: none; }
  .site-header .nav a {
    font-size: 12px;
    padding: 6px 10px;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Wallet/points pill stays — kid dopamine */
  .site-header .wallet-pill,
  .site-header .points-pill,
  .site-header #user-slot .wallet-pill {
    display: inline-flex;
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* ============================================================
   HAMBURGER MENU — toggle button + slide panel + scrim
   ============================================================ */
.mobile-menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-toggle:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.08);
}
.mobile-menu-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
.mobile-menu-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }

.mobile-menu-panel {
  position: fixed;
  top: 64px;
  left: 16px;
  right: 16px;
  z-index: 1300;
  background: linear-gradient(180deg, rgba(20, 29, 51, 0.98) 0%, rgba(15, 22, 41, 0.98) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 48px -12px rgba(0, 0, 0, 0.5);
  padding: 12px;
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu-panel[data-open="true"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mobile-menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(6, 13, 31, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.mobile-menu-scrim[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s ease;
  min-height: 44px;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.mobile-menu-row:active { background: rgba(255, 255, 255, 0.06); }
.mobile-menu-row[aria-current="page"] {
  background: rgba(251, 191, 36, 0.08);
  color: #fbbf24;
}
.mobile-menu-row .icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
.mobile-menu-row[aria-current="page"] .icon { color: #fbbf24; }
.mobile-menu-row .meta {
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

.mobile-menu-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-menu-user .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  color: #ffffff;
}
.mobile-menu-user .info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mobile-menu-user .name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}
.mobile-menu-user .username {
  font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.mobile-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 8px 0;
}
.mobile-menu-row--signout { color: rgba(248, 113, 113, 0.85); }
.mobile-menu-row--signout .icon { color: rgba(248, 113, 113, 0.6); }

/* Hide hamburger UI on desktop */
@media (min-width: 769px) {
  .mobile-menu-toggle,
  .mobile-menu-panel,
  .mobile-menu-scrim {
    display: none !important;
  }
}

/* ============================================================
   MOBILE SIGN-IN MODAL — bottom sheet + sticky submit
   ============================================================ */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-card,
  .signin-modal {
    width: 100%;
    max-width: 100%;
    border-radius: 24px 24px 0 0;
    margin: 0;
    max-height: 90vh;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    /* §61 — overflow-y:auto so the modal scrolls when contents
       exceed 90vh. Was overflow:hidden, which clipped the
       'Create an account' footer + trust strip below the fold on
       phone (the expected .signin-modal-body scroll wrapper isn't
       rendered by the JS markup). */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .signin-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 16px;
  }
  /* §57 — Sign in button mobile rule. Previous version had
     position: sticky; bottom: 0 expecting a .signin-modal-body
     scroll wrapper that the JS doesn't actually render. With no
     scroll container, sticky degenerated and the button visually
     overlapped the password input field above it (Hamid screenshot
     12:45pm). Keep the visual treatment, drop the sticky. */
  .signin-submit {
    margin-top: 8px;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 0 0 1px rgba(251, 191, 36, 0.3),
      0 4px 12px -2px rgba(251, 191, 36, 0.4);
  }
}

/* ============================================================
   FLOATING PRACTICE CTA — mobile dashboard only
   ============================================================ */
.floating-practice-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #0a1628;
  text-decoration: none;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(251, 191, 36, 0.3),
    0 12px 32px -4px rgba(251, 191, 36, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.2);
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.floating-practice-cta:active { transform: translateX(-50%) scale(0.96); }
.floating-practice-cta .pulse-dot {
  width: 8px;
  height: 8px;
  background: rgba(10, 22, 40, 0.4);
  border-radius: 50%;
  animation: cta-pulse 2s ease-in-out infinite;
}
@keyframes cta-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}
@media (max-width: 768px) {
  body.home-page .floating-practice-cta { display: inline-flex; }
  body.input-focused .floating-practice-cta { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-practice-cta .pulse-dot { animation: none; }
}

/* ============================================================
   MOBILE: hide chat widget when input focused
   ============================================================ */
@media (max-width: 768px) {
  body.input-focused .chat-bell,
  body.input-focused .chat-widget,
  body.input-focused #chat-widget,
  body.input-focused [class*="chat-widget"],
  body.input-focused .sf-panel {
    display: none !important;
  }
}

/* ============================================================
   PROMPT 27 — MOBILE BOTTOM TAB BAR
   Primary nav on mobile. Hidden on desktop and on practice runner.
   Discipline: only @media (max-width: 768px) overrides below.
   ============================================================ */

.mobile-tabbar {
  display: none; /* shown on mobile via media query */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(20, 29, 51, 0.95) 0%, rgba(15, 22, 41, 0.98) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.04) inset,
    0 -8px 24px -8px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  min-height: 56px;
  background: transparent;
  border: none;
  text-decoration: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease;
}
.mobile-tab:active { color: rgba(255, 255, 255, 0.85); }
.mobile-tab.is-active { color: #fbbf24; }
.mobile-tab.is-active::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
}
.mobile-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
}
.mobile-tab-icon svg { display: block; }
.mobile-tab-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mobile-tab-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 22px);
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 2px 6px rgba(251, 191, 36, 0.3);
}

.mobile-tab-avatar {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
}
.mobile-tab.is-active .mobile-tab-avatar {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

.mobile-tab--center {
  flex: 0 0 auto;
  margin-top: -22px;
  padding: 0 8px;
  align-items: center;
  gap: 4px;
}
.mobile-tab-center-button {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 3px solid #060d1f;
  border-radius: 50%;
  color: #0a1628;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 0 0 1px rgba(251, 191, 36, 0.4),
    0 8px 20px -4px rgba(251, 191, 36, 0.5),
    0 4px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-tab--center:active .mobile-tab-center-button { transform: scale(0.92); }
.mobile-tab--center.is-active::before { display: none; }
.mobile-tab-label--center {
  color: #fbbf24;
  font-weight: 700;
}

/* ----- Profile sheet (opened by Me tab) ----- */
.profile-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 1310;
  background: rgba(6, 13, 31, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.profile-sheet-scrim[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}
.profile-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1320;
  max-height: 85vh;
  max-height: 85dvh;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.98) 0%, rgba(15, 22, 41, 0.98) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  padding: 8px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -16px 48px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.profile-sheet[data-open="true"] { transform: translateY(0); }
.profile-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  margin: 8px auto 16px;
}
.profile-sheet-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}
.profile-sheet-avatar {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 22px;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}
.profile-sheet-identity {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-sheet-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.profile-sheet-username {
  font-family: 'JetBrains Mono', 'Menlo', ui-monospace, monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.profile-sheet-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.profile-sheet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}
.profile-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-stat-value {
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-size: 24px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.profile-stat-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.profile-sheet-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-sheet-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
  width: 100%;
  text-align: left;
}
.profile-sheet-row:active { background: rgba(255, 255, 255, 0.06); }
.profile-sheet-row-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.profile-sheet-row-chevron {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
}
.profile-sheet-row--signout {
  margin-top: 8px;
  color: rgba(248, 113, 113, 0.95);
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.15);
}
.profile-sheet-row--signout .profile-sheet-row-icon {
  color: rgba(248, 113, 113, 0.7);
}

/* ----- Mobile activation + supersedes Prompt 26 hamburger + floating CTA ----- */
@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    align-items: stretch;
    justify-content: space-around;
  }
  /* Tab bar slides down when keyboard is up */
  body.input-focused .mobile-tabbar {
    transform: translateY(100%);
  }
  /* Push body content up so the tab bar doesn't cover the footer */
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  /* Practice page = full-screen, no tab bar */
  body.no-mobile-tabbar {
    padding-bottom: 0;
  }
  body.no-mobile-tabbar .mobile-tabbar { display: none !important; }

  /* Tab bar replaces hamburger + floating CTA from Prompt 26 */
  .mobile-menu-toggle,
  .mobile-menu-panel,
  .mobile-menu-scrim,
  .floating-practice-cta {
    display: none !important;
  }

  /* §62 — Header: brand left + Sign in / avatar dropdown right.
     Bottom nav is gone (§62 in auth.js); top-right is the only auth
     surface on phone now. Show the Sign in button (signed-out) and
     the user-pill/menu (signed-in). Hide everything else
     (chat-bell, admin-badge, primary nav links) — those route via
     the avatar dropdown's "Settings" / "Admin panel" links. */
  .site-header {
    padding-top: calc(6px + env(safe-area-inset-top, 0px));
  }
  .site-header .container { height: 44px; }
  /* May 11 v3 — nav hidden entirely on small phones; user-pill
     dropdown holds the nav items (see js/auth.js). */
  .site-header .nav,
  .site-header .chat-bell,
  .site-header #user-slot .chat-bell,
  .site-header #user-slot .admin-badge {
    display: none !important;
  }
  .site-header #user-slot {
    margin-left: auto;
  }
  .site-header #user-slot .user-signin {
    display: inline-flex;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
  }
  .site-header #user-slot .user-pill {
    display: inline-flex;
    padding: 4px 6px;
  }
  .site-header #user-slot .user-pill .user-pill-name { display: none; }
  .site-header .wallet-pill,
  .site-header #user-slot .wallet-pill {
    display: inline-flex;
    padding: 5px 10px;
    font-size: 12px;
  }
  /* user-menu uses JS-toggled [hidden] attribute → browser native
     hide. Don't override it here so the dropdown opens cleanly. */

  /* Lift any in-page chat/friends widget above the bottom tab bar.
     ReplyQuik-specific selectors removed — that widget no longer
     loads on GradeEarn pages, and the surface stays separate per
     CLAUDE.md §6c. */
  .chat-widget,
  #chat-widget,
  [class*="chat-widget"],
  [id*="tawk"],
  [class*="tawk"] {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.no-mobile-tabbar .chat-widget,
  body.no-mobile-tabbar [id*="tawk"],
  body.no-mobile-tabbar [class*="tawk"] {
    bottom: 16px !important;
  }
}

/* Belt-and-suspenders: never show tab bar / sheet on desktop */
@media (min-width: 769px) {
  .mobile-tabbar,
  .profile-sheet,
  .profile-sheet-scrim {
    display: none !important;
  }
}

/* ============================================================
   PROMPT 28 — LANDING PAGE MOBILE RETHINK (kid-magnetic)
   Mobile-only overrides. Desktop unchanged.
   Selectors target REAL classes in index.html.
   ============================================================ */

/* Mobile-only footer link row + demo bubble live in DOM but
   are hidden on desktop. */
@media (min-width: 769px) {
  .footer-mobile-links { display: none !important; }
  .demo-reward-bubble { display: none !important; }
}

@media (max-width: 768px) {
  /* ---------- Status bar safe area ---------- */
  body.home-page .site-header {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
  }

  /* ---------- HERO: tighten + reorder mockup-first ---------- */
  body.home-page .hero {
    padding: 12px 16px 28px;
    min-height: auto;
  }
  body.home-page .hero .hero-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    padding: 0;
  }
  /* Mockup goes FIRST visually on mobile */
  body.home-page .hero .hero-right { order: 1; }
  body.home-page .hero .hero-left  { order: 2; display: flex; flex-direction: column; }

  /* Live pill is mirrored to .mobile-hero (#mhero-live) for mobile;
     the desktop hero version inside .hero stays hidden because
     .hero itself is killed at line 16306. */

  /* Headline tighter */
  body.home-page .hero-headline {
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -0.025em;
    margin: 4px 0 10px;
    max-width: 100%;
  }

  /* Subhead clamped to 2 lines */
  body.home-page .hero-left p {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 4px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Hide secondary "How it works" CTA — Learn tab covers it */
  body.home-page .hero-cta .btn-secondary { display: none !important; }

  /* Hero CTA layout */
  body.home-page .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 6px;
  }

  /* Primary CTA: kid-magnetic gold button, full width */
  body.home-page .hero-cta .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 56px;
    margin: 6px 0 4px;
    padding: 0 24px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0a1628;
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    border: 1px solid rgba(251, 191, 36, 0.55);
    border-radius: 16px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 0 0 1px rgba(251, 191, 36, 0.3),
      0 8px 24px -4px rgba(251, 191, 36, 0.5),
      0 4px 8px rgba(0, 0, 0, 0.2);
  }

  /* ---------- HERO MOCKUP: front-and-center, interactive ---------- */
  body.home-page .hero-right {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
  }
  body.home-page .hero-visual {
    position: relative;
    width: 100%;
    height: auto;
    transform: none !important;
    margin: 0 auto;
    padding: 0;
  }
  body.home-page .hero-visual .mockup-card--main {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    transform: none !important;
    animation: mockup-float-mobile 4s ease-in-out infinite;
  }
  /* Hide RANK / LEGO floating accent cards on phones */
  body.home-page .mockup-card--accent-top,
  body.home-page .mockup-card--accent-bottom { display: none !important; }

  @keyframes mockup-float-mobile {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* Tap-friendly answer choices */
  body.home-page .mockup-card .mockup-options {
    gap: 8px;
  }
  body.home-page .mockup-card .mockup-option {
    min-height: 52px;
    padding: 12px 16px;
    font-size: 18px;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  body.home-page .mockup-card .mockup-option:active {
    transform: scale(0.97);
    background: rgba(255, 255, 255, 0.08);
  }
  /* Reset pre-revealed correct styling on mobile (interactive demo) */
  body.home-page .mockup-card .mockup-option--correct:not(.is-correct) {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
  }
  body.home-page .mockup-card .mockup-option.is-correct {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.22) 0%, rgba(22, 163, 74, 0.12) 100%);
    border-color: rgba(34, 197, 94, 0.55);
    color: #4ade80;
    box-shadow:
      0 0 0 1px rgba(34, 197, 94, 0.25),
      0 0 18px -4px rgba(34, 197, 94, 0.55);
  }
  body.home-page .mockup-card .mockup-option.is-incorrect {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
  }

  /* Demo pulse on correct answer */
  .demo-pulse { animation: demo-pulse-anim 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
  @keyframes demo-pulse-anim {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
    50%  { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
  }
  .demo-shake { animation: demo-shake-anim 0.4s ease-in-out; }
  @keyframes demo-shake-anim {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
  }

  /* +15 cents reward bubble */
  .demo-reward-bubble {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.6);
    z-index: 5;
    padding: 12px 20px;
    font-family: 'Instrument Serif', 'Times New Roman', serif;
    font-size: 28px;
    font-weight: 500;
    color: #0a1628;
    background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 8px 24px -4px rgba(251, 191, 36, 0.6),
      0 4px 12px rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
  }
  .demo-reward-bubble.is-shown {
    opacity: 1;
    transform: translate(-50%, -110%) scale(1);
  }

  /* CTA pulse after correct demo answer */
  .cta-pulse { animation: cta-pulse-anim 0.8s ease-in-out 2; }
  @keyframes cta-pulse-anim {
    0%, 100% {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 0 0 1px rgba(251, 191, 36, 0.3),
        0 8px 24px -4px rgba(251, 191, 36, 0.5);
    }
    50% {
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 0 0 4px rgba(251, 191, 36, 0.4),
        0 12px 32px -4px rgba(251, 191, 36, 0.7);
      transform: scale(1.02);
    }
  }

  /* ---------- GRADES SECTION: 2-col compressed grid ---------- */
  body.home-page .grades-section { padding: 28px 14px 20px; }
  body.home-page .grades-section .grades-section-inner { padding: 0; }
  body.home-page .grades-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px;
  }
  body.home-page .grades-title {
    font-size: 30px;
    line-height: 1.05;
    margin: 0;
  }
  body.home-page .grades-subtitle {
    font-size: 13px;
    line-height: 1.4;
    margin: 2px 0 0 0;
  }
  /* Hide "10 grades · Math today, more soon" pill on mobile */
  body.home-page .grades-pill { display: none !important; }

  body.home-page .grade-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  body.home-page .grade-card {
    padding: 14px 12px 12px;
    border-radius: 14px;
    min-height: 0;
  }
  body.home-page .grade-card .grade-card-head {
    margin-bottom: 6px;
    gap: 6px;
  }
  body.home-page .grade-card .grade-card-eyebrow {
    font-size: 9px;
    padding: 3px 7px;
    letter-spacing: 0.06em;
  }
  body.home-page .grade-card .grade-card-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  body.home-page .grade-card .grade-card-title {
    font-size: 15px;
    line-height: 1.2;
    margin: 4px 0 2px;
  }
  body.home-page .grade-card .grade-card-meta {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
  }
  body.home-page .grade-card .grade-card-foot {
    margin-top: 8px;
    padding-top: 8px;
    font-size: 11px;
  }
  body.home-page .grade-card .grade-card-age { font-size: 11px; }
  body.home-page .grade-card .grade-card-arrow {
    width: 24px;
    height: 24px;
  }
  body.home-page .grade-card .grade-card-arrow svg { width: 12px; height: 12px; }
  body.home-page .grade-card .grade-card-badge {
    font-size: 9px;
    padding: 3px 6px;
  }

  /* ---------- FOOTER: collapse to single column ---------- */
  body.home-page .footer { padding: 20px 16px 24px; }
  body.home-page .footer .footer-inner { padding: 0; }
  body.home-page .footer .footer-top {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    grid-template-columns: none !important;
  }
  body.home-page .footer .footer-nav-col { display: none !important; }
  body.home-page .footer .footer-brand-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin: 0 0 4px 0;
    width: 100%;
  }
  body.home-page .footer .footer-tagline {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    max-width: 280px;
  }
  body.home-page .footer .footer-trust-row,
  body.home-page .footer .footer-trust-pill { display: none !important; }

  body.home-page .footer-mobile-links {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 8px 0 12px;
  }
  body.home-page .footer-mobile-links a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
  }
  body.home-page .footer-mobile-links a:active { color: #fbbf24; }

  body.home-page .footer .footer-divider { display: none; }
  body.home-page .footer .footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
  }
  body.home-page .footer .footer-copy {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    margin: 0;
  }
  body.home-page .footer .footer-meta { display: none; }
  body.home-page .footer .footer-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
  }
  body.home-page .footer .footer-social-link {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* ---------- CHAT WIDGET: top-right, smaller, no auto-popup ---------- */
  /* Override Prompt 27 lift rule on home page so launcher sits top-right */
  body.home-page .chat-widget,
  body.home-page #chat-widget,
  body.home-page [class*="chat-widget"],
  body.home-page [id*="tawk"],
  body.home-page [class*="tawk"],
  body.home-page [id*="crisp"],
  body.home-page [class*="crisp"] {
    bottom: auto !important;
    top: calc(56px + env(safe-area-inset-top, 0px) + 8px) !important;
    right: 12px !important;
    transform: scale(0.75) !important;
    transform-origin: top right !important;
    z-index: 30 !important;
  }
  body.home-page [class*="tawk-tooltip"],
  body.home-page [class*="crisp-tooltip"],
  body.home-page [class*="chat-tooltip"],
  body.home-page [class*="auto-message"] {
    display: none !important;
  }
}

/* Smaller phones — let mockup fill width */
@media (max-width: 480px) {
  body.home-page .hero-visual .mockup-card--main { max-width: 100%; }
  body.home-page .hero-headline { font-size: 38px; }
}

/* Tiny phones — tighten grade grid gutters */
@media (max-width: 380px) {
  body.home-page .grade-grid { gap: 8px !important; }
  body.home-page .grade-card { padding: 12px 10px; }
}

/* ============================================================
   PROMPT 29 — Mobile landing fixes (mockup centering + redundant CTA cut)
   Mobile-only. Desktop pixel-identical to before.
   Appended last so cascade order wins over Prompt 28.
   ============================================================ */

/* Tagline element lives in DOM always; only visible on mobile */
.hero-tagline-mobile { display: none; }

@media (max-width: 768px) {
  /* ---------- Hero clip + container reset ---------- */
  body.home-page .hero {
    padding: 16px 16px 28px;
    overflow: hidden; /* safety net so nothing escapes the viewport */
  }
  body.home-page .hero .hero-content {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0;
    margin: 0;
  }

  /* ---------- Hero left: centered, supporting role ---------- */
  body.home-page .hero .hero-left {
    width: 100%;
    text-align: center;
    align-items: center;
    order: 2;
  }
  body.home-page .hero-headline {
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0;
    text-align: center;
    max-width: 100%;
  }

  /* Tagline — the one line the kid sees */
  body.home-page .hero-tagline-mobile {
    display: block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 6px 0 0 0;
    letter-spacing: -0.005em;
    -webkit-line-clamp: unset;
    overflow: visible;
    text-overflow: clip;
    display: block;
  }

  /* Cut the marketing prose on mobile (kid doesn't read it) */
  body.home-page .hero .hero-left p:not(.hero-tagline-mobile) {
    display: none !important;
  }

  /* Cut the redundant hero CTA group — bottom tab Practice is the persistent CTA */
  body.home-page .hero .hero-cta,
  body.home-page .hero .hero-cta .btn,
  body.home-page .hero .hero-cta .btn-primary,
  body.home-page .hero .hero-cta .btn-secondary {
    display: none !important;
  }

  /* ---------- Hero right: full-width centered, mockup is the star ---------- */
  body.home-page .hero .hero-right {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    transform: none !important;
    position: relative;
    order: 1;
  }
  body.home-page .hero .hero-visual {
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 0;
    transform: none !important;
  }

  /* The card itself — strictly within viewport */
  body.home-page .hero-visual .mockup-card--main {
    width: 100%;
    max-width: calc(100vw - 32px);
    margin: 0 auto !important;
    transform: none !important;
    position: relative;
    left: auto !important;
    right: auto !important;
    padding: 16px 14px 14px;
    animation: mockup-float-mobile 4s ease-in-out infinite;
  }

  /* Eyebrow tag */
  body.home-page .mockup-card .mockup-tag {
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 0.06em;
  }

  /* Question — readable, not dominant */
  body.home-page .mockup-card .mockup-question {
    font-size: 22px;
    line-height: 1.2;
    margin: 8px 0 14px;
  }

  /* Answer choices: clean 2x2 grid that fits */
  body.home-page .mockup-card .mockup-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  body.home-page .mockup-card .mockup-option {
    width: 100%;
    min-width: 0;
    padding: 12px 10px;
    font-size: 17px;
    text-align: center;
  }

  /* Tap-hint pill replaces "7-day streak" — bouncing 👆 cue */
  body.home-page .mockup-card .mockup-footer {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  body.home-page .mockup-card .mockup-footer .mockup-points { display: none; }
  body.home-page .mockup-meta--hint {
    transition: opacity 0.4s ease;
    display: inline-flex;
    justify-content: center;
  }
  body.home-page .mockup-tap-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(251, 191, 36, 0.92);
    padding: 6px 12px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 999px;
  }
  body.home-page .mockup-tap-hint .tap-icon {
    font-size: 14px;
    animation: tap-bounce 1.5s ease-in-out infinite;
  }
  @keyframes tap-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }

  /* ---------- Status bar: tighter header ---------- */
  body.home-page .site-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
  }
  body.home-page .site-header .container {
    height: 44px;
    padding: 6px 14px;
  }

  /* ---------- Starfield: ~70% fewer stars on mobile, slower ---------- */
  body.home-page .starfield .star {
    animation-duration: 5s !important;
  }
  body.home-page .starfield .star:nth-child(3n+1),
  body.home-page .starfield .star:nth-child(3n+2) {
    display: none;
  }
}

/* Hard cap on tiny phones */
@media (max-width: 380px) {
  body.home-page .hero-visual .mockup-card--main {
    max-width: calc(100vw - 24px);
  }
  body.home-page .mockup-card .mockup-options {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  body.home-page .mockup-card .mockup-option {
    padding: 14px 12px;
  }
  body.home-page .hero-headline { font-size: 28px; }
}

/* ============================================================
   PROMPT 30 — Mobile reduction (one-card-only philosophy)
   Mobile-only. Desktop pixel-identical to before.
   Appended last so cascade order wins over earlier prompts.
   ============================================================ */
@media (max-width: 768px) {
  /* Hide the "Practice → Earn → Unlock real toys" rewards card on mobile.
     Mockup demonstrates value; bottom-tab Practice provides the action. */
  body.home-page .rewards-section,
  body.home-page #earn-banner,
  body.home-page .rewards-callout {
    display: none !important;
  }

  /* ---------- Mockup card: airy, alive, premium ---------- */
  body.home-page .hero-visual .mockup-card--main {
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg,
      rgba(40, 53, 91, 0.7) 0%,
      rgba(20, 29, 51, 0.6) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,    /* top highlight */
      0 -1px 0 rgba(0, 0, 0, 0.2) inset,          /* bottom shade */
      0 8px 24px -8px rgba(0, 0, 0, 0.4);
  }

  /* Card header tightening */
  body.home-page .mockup-card .mockup-card-header {
    margin-bottom: 8px;
  }
  body.home-page .mockup-card .mockup-progress {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
  }

  /* Question — slightly tighter */
  body.home-page .mockup-card .mockup-question {
    font-size: 24px;
    line-height: 1.15;
    margin: 6px 0 14px;
  }

  /* Answer choices — tighter padding, modern radius */
  body.home-page .mockup-card .mockup-option {
    padding: 14px 10px;
    font-size: 18px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Footer divider */
  body.home-page .mockup-card .mockup-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: center;
  }

  /* Correct / incorrect states — refined */
  body.home-page .mockup-card .mockup-option.is-correct {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.18) 0%, rgba(22, 163, 74, 0.08) 100%) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    color: #4ade80 !important;
    box-shadow:
      0 0 0 1px rgba(34, 197, 94, 0.3),
      0 0 20px -2px rgba(34, 197, 94, 0.5) !important;
  }
  body.home-page .mockup-card .mockup-option.is-incorrect {
    background: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
  }

  /* Demo animations — refined */
  .demo-pulse  { animation: demo-pulse-anim 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
  @keyframes demo-pulse-anim {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
  .demo-shake  { animation: demo-shake-anim 0.45s ease-in-out; }
  @keyframes demo-shake-anim {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    50% { transform: translateX(8px); }
    80% { transform: translateX(-4px); }
  }

  /* Reward bubble — bigger, brighter */
  .demo-reward-bubble {
    top: 38%;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 12px 32px -4px rgba(251, 191, 36, 0.7),
      0 4px 12px rgba(0, 0, 0, 0.4) !important;
  }

  /* Bottom-tab Practice button pulse on correct demo answer */
  .demo-cta-pulse {
    animation: tab-cta-pulse 0.8s ease-in-out 2;
    transform-origin: center;
  }
  @keyframes tab-cta-pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 0 0 1px rgba(251, 191, 36, 0.4),
        0 8px 20px -4px rgba(251, 191, 36, 0.5);
    }
    50% {
      transform: scale(1.12);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 0 0 6px rgba(251, 191, 36, 0.4),
        0 16px 40px -4px rgba(251, 191, 36, 0.8);
    }
  }

  /* ---------- Headline: drop down, smaller, supporting ---------- */
  body.home-page .hero-headline,
  body.home-page .hero h1 {
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 16px 0 4px 0;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    font-weight: 400;
  }
  body.home-page .hero-tagline-mobile {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 8px 0;
    font-weight: 400;
  }

  /* ---------- Modern airy: lighter atmosphere ---------- */
  body.home-page::before {
    width: 320px;
    height: 320px;
    opacity: 0.6;
  }
  body.home-page::after {
    width: 320px;
    height: 320px;
    opacity: 0.4;
  }

  /* Brand top-left — calmer */
  .site-header .brand { gap: 8px; }
  .site-header .brand-icon,
  .site-header .brand svg {
    width: 22px;
    height: 22px;
  }
  .site-header .brand-text,
  .site-header .brand span {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.005em;
  }

  /* ---------- Spacing rhythm ---------- */
  body.home-page .hero {
    padding: 14px 16px 32px;
  }
  body.home-page .hero .hero-content {
    gap: 14px;
  }
  body.home-page .grades-section {
    padding-top: 28px;
  }
}

@media (max-width: 480px) {
  body.home-page .hero-headline,
  body.home-page .hero h1 {
    font-size: 22px;
  }
}

/* ============================================================
   PROMPT 31 — Ruthless mobile reduction (one-purpose first screen)
   Mobile-only. Desktop pixel-identical.
   "Pick your grade." → vertical grade list. Nothing else.
   ============================================================ */
.mobile-grade-intro { display: none; }

@media (max-width: 768px) {
  /* ---------- Step 1: Kill the entire mockup card on mobile ---------- */
  body.home-page .hero-right,
  body.home-page .hero-visual,
  body.home-page .mockup-card,
  body.home-page .mockup-card--main,
  body.home-page .mockup-card--accent-top,
  body.home-page .mockup-card--accent-bottom {
    display: none !important;
  }

  /* ---------- Step 2: Kill hero text block on mobile ----------
     Desktop .hero is fully hidden at line 16306 (visual-noise
     starfield + glows). Live-count + placement link are now
     mirrored into .mobile-hero so they're visible on mobile.
     Children-of-hero-left rules below are harmless no-ops while
     16306 nukes the parent, but kept so desktop intent is clear. */
  body.home-page .hero-headline,
  body.home-page .hero-tagline-mobile,
  body.home-page .hero .hero-cta,
  body.home-page .hero-left p {
    display: none !important;
  }
  body.home-page .hero {
    padding: 12px 16px 8px !important;
    min-height: 0 !important;
  }
  body.home-page .hero .hero-spotlight,
  body.home-page .hero-bottom-fade {
    display: none !important;
  }

  /* ---------- Step 3: Mobile-only "Pick your grade." intro ---------- */
  body.home-page .mobile-grade-intro {
    display: block;
    text-align: left;
    padding: 32px 18px 16px;
  }
  body.home-page .mobile-grade-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 6px 0;
  }
  body.home-page .mobile-grade-subtitle {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    letter-spacing: -0.005em;
  }

  /* Hide desktop "Choose your grade" header — replaced by mobile intro */
  body.home-page .grades-section .grades-header,
  body.home-page .grades-section .grades-title,
  body.home-page .grades-section .grades-subtitle,
  body.home-page .grades-section .grades-pill {
    display: none !important;
  }

  body.home-page .grades-section,
  body.home-page .grades-section-inner {
    padding: 0 16px 24px !important;
  }

  /* ---------- Step 4: Single-column grade list ---------- */
  body.home-page .grade-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body.home-page .grade-card {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    grid-template-areas: "title number";
    align-items: center;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,
      rgba(40, 53, 91, 0.5) 0%,
      rgba(20, 29, 51, 0.5) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    position: relative;
    overflow: hidden;
    min-height: 0 !important;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  body.home-page .grade-card:active {
    background: linear-gradient(180deg,
      rgba(50, 63, 101, 0.6) 0%,
      rgba(30, 39, 61, 0.6) 100%) !important;
  }

  /* Hide everything except title + icon badge */
  body.home-page .grade-card .grade-card-head .grade-card-eyebrow,
  body.home-page .grade-card .grade-card-eyebrow,
  body.home-page .grade-card .grade-card-meta,
  body.home-page .grade-card .grade-card-foot,
  body.home-page .grade-card .grade-card-age,
  body.home-page .grade-card .grade-card-arrow,
  body.home-page .grade-card .grade-card-badge,
  body.home-page .grade-card .grade-card-badge--current,
  body.home-page .grade-card .grade-card-badge--locked {
    display: none !important;
  }

  /* The .grade-card-head wrapper unwraps visually — flatten */
  body.home-page .grade-card .grade-card-head {
    display: contents !important;
  }

  /* Title — left */
  body.home-page .grade-card .grade-card-title {
    grid-area: title;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  /* Grade number badge — right */
  body.home-page .grade-card .grade-card-icon {
    grid-area: number;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* "Most picked" indicator on grade-card--popular */
  body.home-page .grade-card.grade-card--popular {
    grid-template-areas:
      "title  number"
      "meta   number" !important;
    background: linear-gradient(180deg,
      rgba(251, 191, 36, 0.08) 0%,
      rgba(251, 191, 36, 0.02) 100%) !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
  }
  body.home-page .grade-card.grade-card--popular::after {
    content: '⭐ Most picked';
    grid-area: meta;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: rgba(251, 191, 36, 0.95);
    margin-top: 2px;
  }
  body.home-page .grade-card.grade-card--popular .grade-card-icon {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fbbf24;
  }

  /* ---------- Step 5: Footer reduction ---------- */
  body.home-page .footer {
    padding: 32px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    margin-top: 24px !important;
  }
  body.home-page .footer .footer-top {
    display: none !important;
  }
  body.home-page .footer .footer-divider {
    display: none !important;
  }
  /* Inline mobile links — already exist as nav.footer-mobile-links */
  body.home-page .footer-mobile-links {
    display: flex !important;
    justify-content: center;
    gap: 16px;
    margin-bottom: 12px;
  }
  body.home-page .footer-mobile-links a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-weight: 400;
  }
  body.home-page .footer-bottom {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  body.home-page .footer-copy {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
    margin: 0;
    order: 2;
  }
  body.home-page .footer-meta {
    display: none !important;
  }
  body.home-page .footer-social {
    display: none !important;
  }

  /* ---------- Step 6: Header refinement ---------- */
  .site-header {
    background: transparent !important;
    border-bottom: none !important;
    padding-top: env(safe-area-inset-top, 0px);
  }
  .site-header .container {
    height: 44px;
    padding: 4px 16px !important;
  }
  .site-header .brand { gap: 6px !important; }
  .site-header .brand svg,
  .site-header .brand-icon {
    width: 18px !important;
    height: 18px !important;
  }
  .site-header .brand-text,
  .site-header .brand span {
    font-size: 14px !important;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.005em;
  }

  /* ---------- Step 7: Background atmosphere — pulled back ---------- */
  body.home-page::before {
    width: 280px !important;
    height: 280px !important;
    opacity: 0.4 !important;
  }
  body.home-page::after {
    width: 280px !important;
    height: 280px !important;
    opacity: 0.25 !important;
  }
  body.home-page .background-grid,
  body.home-page .hero-stars {
    display: none !important;
  }

  /* ---------- Step 8: Body bottom padding for tab bar ---------- */
  body.home-page {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   PROMPT 32 — Mobile premium polish (17-point sweep)
   Mobile-only. Desktop pixel-identical.
   Restrained, deliberate, integrated. Premium = right-sized.
   ============================================================ */
.grade-group-label { display: none; }

@media (max-width: 768px) {
  /* ---------- Step 1: Header — no seam ---------- */
  .site-header {
    background: linear-gradient(180deg,
      rgba(6, 13, 31, 0.7) 0%,
      rgba(6, 13, 31, 0) 100%) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* ---------- Step 2: Brand wordmark refinement ---------- */
  .site-header .brand { gap: 7px !important; }
  .site-header .brand svg,
  .site-header .brand-icon {
    width: 20px !important;
    height: 20px !important;
  }
  .site-header .brand-text,
  .site-header .brand span {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: rgba(255, 255, 255, 0.95) !important;
  }
  .site-header .brand .logo-accent,
  .site-header .brand-text .brand-accent {
    color: #fbbf24 !important;
    font-weight: 600;
  }

  /* ---------- Step 3: Headline right-size ---------- */
  body.home-page .mobile-grade-intro {
    padding: 28px 20px 20px !important;
  }
  body.home-page .mobile-grade-title {
    font-size: 28px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    color: rgba(255, 255, 255, 0.96) !important;
    margin: 0 0 4px 0 !important;
  }
  body.home-page .mobile-grade-subtitle {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.45) !important;
  }

  /* ---------- Step 4: Compact cards + ghost numerals ---------- */
  body.home-page .grade-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  body.home-page .grade-card {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "title number" !important;
    align-items: center;
    padding: 14px 18px !important;
    min-height: 0 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg,
      rgba(40, 53, 91, 0.5) 0%,
      rgba(20, 29, 51, 0.5) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
    transition: transform 0.18s cubic-bezier(0.4,0,0.2,1),
                background 0.18s cubic-bezier(0.4,0,0.2,1),
                border-color 0.18s cubic-bezier(0.4,0,0.2,1) !important;
  }
  body.home-page .grade-card:active {
    transform: scale(0.985);
    background: linear-gradient(180deg,
      rgba(50, 63, 101, 0.6) 0%,
      rgba(30, 39, 61, 0.6) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Title — refined weight */
  body.home-page .grade-card .grade-card-title {
    grid-area: title;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.2 !important;
  }

  /* Ghost numeral — strip the box */
  body.home-page .grade-card .grade-card-icon {
    grid-area: number;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.18) !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
    transition: color 0.18s ease;
  }
  body.home-page .grade-card:active .grade-card-icon {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  /* ---------- Step 5: Popular card — restrained gold ---------- */
  body.home-page .grade-card.grade-card--popular {
    grid-template-areas:
      "title  number"
      "meta   number" !important;
    background: linear-gradient(180deg,
      rgba(40, 53, 91, 0.5) 0%,
      rgba(20, 29, 51, 0.5) 100%) !important;
    border-color: rgba(251, 191, 36, 0.35) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.04) inset,
      0 0 0 1px rgba(251, 191, 36, 0.1) !important;
    align-items: start;
  }
  body.home-page .grade-card.grade-card--popular .grade-card-icon {
    color: rgba(251, 191, 36, 0.95) !important;
    grid-row: span 2;
    align-self: center;
  }
  body.home-page .grade-card.grade-card--popular::after {
    content: 'Most picked' !important;
    grid-area: meta;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(251, 191, 36, 0.85) !important;
    margin-top: 3px !important;
  }

  /* ---------- Step 6: Group labels ---------- */
  body.home-page .grade-group-label {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.35);
    padding: 22px 4px 8px;
    margin: 0;
  }
  body.home-page .grade-group-label:first-child,
  body.home-page .grade-group-label:first-of-type {
    padding-top: 4px;
  }

  /* ---------- Step 7: Tab bar backdrop blur ---------- */
  .mobile-tabbar {
    background: linear-gradient(180deg,
      rgba(20, 29, 51, 0.85) 0%,
      rgba(15, 22, 41, 0.92) 100%) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-top: none !important;
    box-shadow:
      0 -1px 0 rgba(255, 255, 255, 0.06) inset,
      0 -12px 24px -8px rgba(0, 0, 0, 0.4) !important;
    position: fixed;
  }
  .mobile-tabbar::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 0;
    right: 0;
    height: 32px;
    background: linear-gradient(180deg,
      rgba(6, 13, 31, 0) 0%,
      rgba(6, 13, 31, 0.6) 100%);
    pointer-events: none;
    z-index: -1;
  }

  /* ---------- Step 8: Center Practice button — refined ---------- */
  .mobile-tabbar .mobile-tab-center-button {
    width: 52px !important;
    height: 52px !important;
    border: 2.5px solid #060d1f !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.35) inset,
      0 0 0 1px rgba(251, 191, 36, 0.3),
      0 6px 16px -4px rgba(251, 191, 36, 0.4),
      0 2px 6px rgba(0, 0, 0, 0.25) !important;
  }
  .mobile-tabbar .mobile-tab--center {
    margin-top: -18px !important;
  }
  .mobile-tabbar .mobile-tab--center .mobile-tab-label--center {
    font-size: 9.5px !important;
    margin-top: 2px !important;
  }

  /* ---------- Step 9: Atmosphere — softer ---------- */
  body.home-page::before {
    width: 240px !important;
    height: 240px !important;
    opacity: 0.35 !important;
    top: -100px !important;
    right: -80px !important;
  }
  body.home-page::after {
    width: 240px !important;
    height: 240px !important;
    opacity: 0.2 !important;
    bottom: 100px !important;
    left: -80px !important;
  }

  /* ---------- Step 10: Status bar zone fix ---------- */
  body.home-page {
    padding-top: 0 !important;
  }
  .site-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
  body.home-page > .top-spacer,
  body.home-page > [class*="safe-area-spacer"] {
    display: none !important;
  }

  /* ---------- Step 11: Footer minor refinement ---------- */
  body.home-page .footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    margin-top: 32px !important;
    padding: 24px 18px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.home-page .footer-mobile-links {
    gap: 18px !important;
  }
  body.home-page .footer-mobile-links a {
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    letter-spacing: -0.005em;
    transition: color 0.15s ease;
  }
  body.home-page .footer-mobile-links a:active {
    color: rgba(251, 191, 36, 0.85) !important;
  }
}

@media (max-width: 380px) {
  body.home-page .mobile-grade-title {
    font-size: 26px !important;
  }
}

/* ============================================================
   PROMPT 33 — Hero + ruthless reduction + 3-tab + personality
   Mobile-only. Desktop pixel-identical.
   ============================================================ */
.mobile-hero { display: none; }

@media (max-width: 768px) {
  /* ---------- Step 1: Strip "Math" suffix on mobile only ---------- */
  body.home-page .grade-card .grade-subject-suffix {
    display: none !important;
  }

  /* ---------- Step 2: Cut "Most picked" treatment on mobile ---------- */
  body.home-page .grade-card.grade-card--popular {
    background: linear-gradient(180deg,
      rgba(40, 53, 91, 0.5) 0%,
      rgba(20, 29, 51, 0.5) 100%) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
    grid-template-areas: "title number" !important;
    align-items: center !important;
  }
  body.home-page .grade-card.grade-card--popular .grade-card-icon {
    color: rgba(255, 255, 255, 0.18) !important;
    grid-row: auto !important;
    align-self: center !important;
  }
  body.home-page .grade-card.grade-card--popular::after {
    content: none !important;
  }

  /* ---------- Step 3: Hide group labels on mobile (cut per Elon) ---------- */
  body.home-page .grade-group-label {
    display: none !important;
  }

  /* ---------- Step 4: Cut ghost numerals — text-only cards ---------- */
  body.home-page .grade-card .grade-card-icon {
    display: none !important;
  }
  body.home-page .grade-card {
    display: flex !important;
    align-items: center !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
  }

  /* ---------- Step 5: Hide old mobile-grade-intro; show new mobile-hero ---------- */
  body.home-page .mobile-grade-intro {
    display: none !important;
  }

  body.home-page .mobile-hero {
    display: block;
    text-align: left;
    padding: 32px 20px 24px;
    position: relative;
  }

  body.home-page .mobile-hero-star {
    display: inline-block;
    width: 36px;
    height: 36px;
    color: #fbbf24;
    margin: 0 0 16px 0;
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.4));
    animation: hero-star-breathe 4s ease-in-out infinite;
    transform-origin: center;
    -webkit-tap-highlight-color: transparent;
  }
  body.home-page .mobile-hero-star svg {
    display: block;
  }
  @keyframes hero-star-breathe {
    0%, 100% {
      transform: scale(1) rotate(0deg);
      filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.4));
    }
    50% {
      transform: scale(1.06) rotate(-2deg);
      filter: drop-shadow(0 0 18px rgba(251, 191, 36, 0.6));
    }
  }
  body.home-page .mobile-hero-star.is-celebrating {
    animation: hero-star-wiggle 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes hero-star-wiggle {
    0% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.2) rotate(-15deg); }
    50% { transform: scale(1.15) rotate(12deg); }
    75% { transform: scale(1.18) rotate(-6deg); }
    100% { transform: scale(1) rotate(0); }
  }

  /* Headline — period dropped, gold first line */
  body.home-page .mobile-hero-headline {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 10px 0;
  }
  body.home-page .mobile-hero-headline .mobile-hero-line1 {
    color: #fbbf24;
  }
  body.home-page .mobile-hero-subhead {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    letter-spacing: -0.005em;
  }

  /* ---------- Step 6: Tab bar — 3 tabs distribution ---------- */
  .mobile-tabbar {
    justify-content: space-around !important;
    padding: 6px 24px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-tabbar .mobile-tab:not(.mobile-tab--center) {
    flex: 1;
    max-width: 96px;
  }
  .mobile-tabbar .mobile-tab--center {
    flex: 0 0 auto;
    min-width: 80px;
  }

  /* ---------- Step 7: Profile sheet — Toy Marketplace featured row ---------- */
  .profile-sheet-row--featured {
    background: linear-gradient(180deg,
      rgba(251, 191, 36, 0.08) 0%,
      rgba(251, 191, 36, 0.02) 100%) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
  }
  .profile-sheet-row--featured .profile-sheet-row-icon {
    color: #fbbf24 !important;
  }
  .profile-sheet-row--featured .profile-sheet-row-text {
    color: #ffffff !important;
    font-weight: 600;
  }
  .profile-sheet-row-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .profile-sheet-row-meta {
    font-size: 11px;
    font-weight: 400;
    color: rgba(251, 191, 36, 0.75);
  }
}

@media (max-width: 380px) {
  body.home-page .mobile-hero-headline {
    font-size: 34px;
  }
}

/* ============================================================
   PROMPT 34 — Parent layer (below grade list)
   Mobile-first; desktop refinement at 769+.
   ============================================================ */

.parent-layer {
  padding: 64px 20px;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

.parent-layer + .parent-layer {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.parent-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.8);
  margin: 0 0 12px 0;
}

.parent-h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.parent-h2-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 480px;
}

.parent-layer-head {
  margin-bottom: 28px;
}

/* HOW IT WORKS */
.how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.how-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 18px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.4) 0%,
    rgba(20, 29, 51, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.how-step-num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 10px;
  flex-shrink: 0;
}

.how-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.how-step-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.01em;
}

.how-step-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* TOY SHOWCASE */
.toy-showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.toy-showcase-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.toy-showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.toy-showcase-label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 4px 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(6, 13, 31, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  text-align: center;
  letter-spacing: -0.005em;
}

/* TRUST LIST */
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trust-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  padding: 4px 0;
}

.trust-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  flex-shrink: 0;
}

.trust-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.005em;
  padding-top: 4px;
}

/* PARENT QUOTE */
.parent-layer--quote {
  text-align: center;
  padding: 56px 24px;
}

.parent-quote {
  margin: 0;
  padding: 0;
  position: relative;
}

.parent-quote::before {
  content: '"';
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 80px;
  line-height: 0.8;
  color: rgba(251, 191, 36, 0.25);
  margin-bottom: 8px;
}

.parent-quote-text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.92);
  max-width: 480px;
  margin: 0 auto 18px auto;
}

.parent-quote-attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
}

.parent-quote-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.parent-quote-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

/* PRICING + FOUNDER NOTE */
.founder-note {
  margin-top: 28px;
  padding: 22px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
}

.founder-note-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 8px 0;
  letter-spacing: -0.005em;
}

.founder-note-sig {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.8);
  margin: 0;
}

@media (max-width: 768px) {
  .parent-layer {
    padding: 48px 18px;
    max-width: 100%;
  }
  .parent-h2 { font-size: 28px; }
  .parent-h2-sub { font-size: 14px; }
  .how-step { padding: 16px; gap: 14px; }
  .how-step-num { width: 32px; height: 32px; font-size: 18px; }
  .how-step-title { font-size: 15px; }
  .how-step-text { font-size: 13px; }
  .parent-quote-text { font-size: 19px; }
  .parent-quote::before { font-size: 60px; }
  .trust-text { font-size: 14px; }
}

@media (max-width: 380px) {
  .parent-h2 { font-size: 26px; }
  .parent-quote-text { font-size: 17px; }
}

@media (min-width: 769px) {
  .parent-layer { padding: 96px 32px; max-width: 960px; }
  .parent-h2 { font-size: 48px; }
  .parent-h2-sub { font-size: 17px; }
  .how-steps { flex-direction: row; gap: 16px; }
  .how-step { flex: 1; flex-direction: column; gap: 16px; display: flex; }
  .how-step-num { width: 44px; height: 44px; font-size: 26px; }
  .toy-showcase { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .trust-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .parent-quote-text { font-size: 28px; }
  .parent-quote::before { font-size: 100px; }
}

/* ============================================================
   PROMPT 35 — Parent layer bug fixes + polish (overrides)
   Appended last so it wins cascade. No new strategic rules.
   ============================================================ */

/* ---------- Quote section: hard containment ---------- */
.parent-layer--quote {
  text-align: center;
  padding: 56px 24px;
  overflow: hidden;
  isolation: isolate;
}

.parent-quote-wrap {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.parent-quote-mark {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 80px;
  line-height: 0.6;
  font-weight: 400;
  color: rgba(251, 191, 36, 0.3);
  margin: 0 0 4px 0;
  user-select: none;
}

/* Replace the old ::before quote glyph (no longer needed) */
.parent-quote::before { content: none !important; }

.parent-quote-text {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 20px 0;
  max-width: none;
}

.parent-quote-attr {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
}

.parent-quote-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: -0.005em;
}

.parent-quote-name::before {
  content: '— ';
  color: rgba(255, 255, 255, 0.4);
}

.parent-quote-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: -0.005em;
}

/* ---------- Toy showcase: background-image cropping ---------- */
.toy-showcase-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  line-height: 1;
}
.toy-showcase-image--lego   { background: radial-gradient(circle at 30% 30%, #fde047 0%, #f59e0b 55%, #b45309 100%); }
.toy-showcase-image--camera { background: radial-gradient(circle at 30% 30%, #60a5fa 0%, #2563eb 55%, #1e3a8a 100%); }
.toy-showcase-image--watch  { background: radial-gradient(circle at 30% 30%, #c4b5fd 0%, #7c3aed 55%, #4c1d95 100%); }
.toy-showcase-image--roblox { background: radial-gradient(circle at 30% 30%, #fca5a5 0%, #ef4444 55%, #7f1d1d 100%); }

.toy-showcase-label {
  bottom: 10px;
  left: 10px;
  right: 10px;
  padding: 5px 12px;
  background: rgba(6, 13, 31, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Quote responsive sizing */
@media (max-width: 768px) {
  .parent-layer--quote { padding: 48px 24px; }
  .parent-quote-mark { font-size: 60px; }
  .parent-quote-text { font-size: 19px; }

  /* ---------- Footer clears the bottom tab bar ---------- */
  body.home-page footer,
  body.home-page .footer {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---------- Tighter grade cards (~56px tall) ---------- */
  body.home-page .grade-card {
    padding: 12px 18px !important;
  }
  body.home-page .grade-card .grade-card-title,
  body.home-page .grade-card .grade-title,
  body.home-page .grade-card h3 {
    font-size: 15px;
    line-height: 1.15;
  }

  /* ---------- Star breathe animation safety net ---------- */
  body.home-page .mobile-hero-star {
    animation: hero-star-breathe 4s ease-in-out infinite !important;
  }
}

@media (max-width: 380px) {
  .parent-quote-text { font-size: 17px; }
}

@media (min-width: 769px) {
  .parent-quote-mark { font-size: 100px; }
  .parent-quote-text { font-size: 28px; }
}

/* ============================================================
   STATE PICKER — landing page primary CTA (Prompt 36b)
   Both mobile and desktop, with shared base styles.
   ============================================================ */

.state-picker-section {
  padding: 48px 32px 64px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.state-picker-head {
  text-align: left;
  margin-bottom: 32px;
}

.state-picker-eyebrow {
  display: inline-block;
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin: 0 0 14px 0;
}

.state-picker-title {
  font-family: 'Instrument Serif', serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 12px 0;
}

.state-picker-sub {
  font-family: 'Inter';
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  max-width: 540px;
}

.state-picker-detecting {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  font-family: 'Inter';
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.state-picker-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(251, 191, 36, 0.2);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: state-picker-spin 0.7s linear infinite;
}

@keyframes state-picker-spin {
  to { transform: rotate(360deg); }
}

.state-picker-detected {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  margin-bottom: 28px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.04) 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.state-picker-detected[data-shown="true"] {
  opacity: 1;
  transform: translateY(0);
}

.state-picker-detected-pin {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 10px;
  color: #fbbf24;
  flex-shrink: 0;
}

.state-picker-detected-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.state-picker-detected-label {
  font-family: 'Inter';
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}

.state-picker-detected-name {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.state-picker-detected-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0a1628;
  text-decoration: none;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 4px 8px -2px rgba(251, 191, 36, 0.4);
  transition: transform 0.15s ease;
}

.state-picker-detected-go:active {
  transform: scale(0.97);
}

.state-picker-trigger {
  display: none;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  font-family: 'Inter';
  text-align: left;
  background: linear-gradient(180deg, rgba(40, 53, 91, 0.5) 0%, rgba(20, 29, 51, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.2s ease;
}

.state-picker-trigger:active {
  transform: scale(0.99);
  background: linear-gradient(180deg, rgba(50, 63, 101, 0.6) 0%, rgba(30, 39, 61, 0.6) 100%);
}

.state-picker-trigger-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.state-picker-trigger-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px;
}

.state-picker-trigger-value {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.state-picker-trigger-chevron {
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  margin-left: auto;
}

.state-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.state-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(40, 53, 91, 0.4) 0%, rgba(20, 29, 51, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter';
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .state-tile:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, rgba(50, 63, 101, 0.5) 0%, rgba(30, 39, 61, 0.5) 100%);
    border-color: rgba(251, 191, 36, 0.3);
  }
}

.state-tile:active {
  transform: scale(0.98);
}

.state-tile--home {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08) 0%, rgba(251, 191, 36, 0.02) 100%);
  border-color: rgba(251, 191, 36, 0.25);
}

.state-tile-abbr {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
}

.state-tile--home .state-tile-abbr {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
}

.state-tile-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.state-tile-name {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.state-tile-test {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

.state-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(6, 13, 31, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.state-sheet-scrim[data-open="true"] {
  opacity: 1;
}

.state-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 96;
  max-height: 85vh;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.98) 0%, rgba(15, 22, 41, 0.98) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -16px 48px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.state-sheet[data-open="true"] {
  transform: translateY(0);
}

.state-sheet-handle {
  width: 36px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  margin: 8px auto;
  flex-shrink: 0;
}

.state-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.state-sheet-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.015em;
}

.state-sheet-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.state-sheet-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.state-sheet-search svg {
  color: rgba(255, 255, 255, 0.4);
}

.state-sheet-search input {
  flex: 1;
  border: none;
  background: transparent;
  color: #ffffff;
  font-family: 'Inter';
  font-size: 16px;
  outline: none;
  padding: 4px 0;
}

.state-sheet-search input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.state-sheet-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  list-style: none;
  margin: 0;
  padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px));
}

.state-sheet-empty {
  padding: 32px 20px;
  text-align: center;
  font-family: 'Inter';
  font-size: 14px;
  color: rgba(255, 255, 255, 0.4);
}

.state-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 14px;
  background: transparent;
  border: none;
  border-radius: 12px;
  text-align: left;
  font-family: 'Inter';
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.state-sheet-item:active {
  background: rgba(255, 255, 255, 0.06);
}

.state-sheet-item-abbr {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
}

.state-sheet-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.state-sheet-item-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
}

.state-sheet-item-test {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.state-sheet-item-chevron {
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .state-picker-section {
    padding: 28px 18px 36px;
  }
  .state-picker-title {
    font-size: 30px;
  }
  .state-picker-sub {
    font-size: 14px;
  }
  .state-picker-detected {
    padding: 14px 16px;
    gap: 10px;
  }
  .state-picker-detected-pin {
    width: 32px;
    height: 32px;
  }
  .state-picker-detected-name {
    font-size: 14px;
  }
  .state-picker-detected-go {
    padding: 8px 14px;
    font-size: 12px;
  }
  .state-picker-trigger {
    display: flex;
  }
  .state-picker-grid {
    display: none;
  }
}

@media (max-width: 380px) {
  .state-picker-title {
    font-size: 26px;
  }
  .state-picker-detected {
    flex-wrap: wrap;
  }
  .state-picker-detected-go {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 6px;
  }
}

@media (min-width: 769px) {
  .state-sheet,
  .state-sheet-scrim,
  .state-picker-trigger {
    display: none !important;
  }
}

/* ============================================================
   STATE PAGE — /states/?s=<slug>
   Mobile + desktop, single page handles all 51 states.
   ============================================================ */

body.state-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #060d1f;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow-x: hidden;
}

body.state-page::before {
  content: '';
  position: fixed;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.05) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

body.state-page::after {
  content: '';
  position: fixed;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

body.state-page > * {
  position: relative;
  z-index: 1;
}

.breadcrumb-nav {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 40px 0;
}

.breadcrumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter';
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumb-item a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
  color: #fbbf24;
}

.breadcrumb-item--current {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

.breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.2);
}

.state-page-loading {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Inter';
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
}
/* The HTML [hidden] attribute must beat the display: flex above. */
.state-page-loading[hidden] { display: none !important; }

.state-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(251, 191, 36, 0.2);
  border-top-color: #fbbf24;
  border-radius: 50%;
  animation: state-picker-spin 0.7s linear infinite;
}

.state-page-error {
  max-width: 480px;
  margin: 80px auto;
  padding: 48px 32px;
  text-align: center;
}

.state-error-icon {
  display: inline-flex;
  margin-bottom: 16px;
  color: rgba(251, 191, 36, 0.7);
}

.state-error-title {
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.state-error-text {
  font-family: 'Inter';
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px 0;
}

.state-error-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: 'Inter';
  font-size: 15px;
  font-weight: 600;
  color: #0a1628;
  text-decoration: none;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 4px 12px -2px rgba(251, 191, 36, 0.4);
  transition: transform 0.15s ease;
}

.state-error-cta:active {
  transform: scale(0.97);
}

.state-content {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 32px;
}

.state-hero {
  padding: 4px 32px 16px;
}

.state-hero-inner {
  max-width: 760px;
}

.state-hero-title {
  font-family: 'Instrument Serif', serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 20px 0;
  max-width: 620px;
}

.state-hero-title .hero-test-name {
  color: #fbbf24;
}

.state-hero-title .hero-state-name {
  color: rgba(255, 255, 255, 0.95);
}

.state-hero-sub {
  font-family: 'Inter';
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 40px 0;
  max-width: 600px;
}

.state-fold {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 72px;
  padding: 0 40px;
  align-items: stretch;
}

.state-fold > .state-hero,
.state-fold > .state-grade-section {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

.state-hero-meta {
  margin-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 20px;
  max-width: 620px;
}

.state-hero-meta-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: baseline;
}

.state-hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.state-hero-meta-label {
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
}

.state-hero-meta-value {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: -0.005em;
  margin: 0;
}

.state-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  font-family: 'Inter';
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.state-hero-note-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: -2px;
}

.state-grade-section {
  padding: 8px 32px 48px;
}

.state-grade-head {
  margin-bottom: 24px;
}

.state-grade-title {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.state-grade-sub {
  font-family: 'Inter';
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.state-grade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.state-grade-grid > .state-grade-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.state-grade-card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 64px;
  padding: 18px 22px 18px 24px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.5) 0%,
    rgba(20, 29, 51, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  text-decoration: none;
  font-family: 'Inter';
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

@media (hover: hover) {
  .state-grade-card:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg,
      rgba(50, 63, 101, 0.6) 0%,
      rgba(30, 39, 61, 0.6) 100%);
    border-color: rgba(251, 191, 36, 0.3);
  }
}

.state-grade-card:active {
  transform: scale(0.98);
}

.state-grade-card-name {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
}

.state-trust-section {
  padding: 64px 40px 56px;
  margin-top: 48px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.state-trust-head {
  margin-bottom: 28px;
}

.state-trust-eyebrow {
  display: inline-block;
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin: 0 0 12px 0;
}

.state-trust-title {
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.state-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.state-trust-card {
  padding: 22px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.4) 0%,
    rgba(20, 29, 51, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.state-trust-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 10px;
  color: #fbbf24;
  margin-bottom: 14px;
}

.state-trust-card-title {
  font-family: 'Inter';
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0;
  letter-spacing: -0.005em;
}

.state-trust-card-text {
  font-family: 'Inter';
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.state-trust-card-text a {
  color: rgba(251, 191, 36, 0.85);
  text-decoration: none;
  font-weight: 500;
}

.state-trust-card-text a:hover {
  color: #fbbf24;
}

.state-cta-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  margin: 32px 32px 48px;
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.08) 0%,
    rgba(251, 191, 36, 0.02) 100%);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 16px;
}

.state-cta-strip-text {
  font-family: 'Inter';
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.state-cta-strip-text strong {
  color: #fbbf24;
  font-weight: 600;
}

.state-cta-strip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  color: #0a1628;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 999px;
  cursor: pointer;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 4px 12px -2px rgba(251, 191, 36, 0.4);
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.state-cta-strip-btn:active {
  transform: scale(0.97);
}

@media (min-width: 769px) {
  .state-fold > .state-hero {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .state-fold > .state-hero > .state-hero-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .state-fold > .state-hero .state-hero-meta {
    margin-top: auto;
    padding-top: 32px;
  }
}

@media (max-width: 768px) {
  .breadcrumb-nav { padding: 24px 20px 0; }
  .state-content { padding-top: 20px; }
  .state-hero { padding: 20px 20px 32px; }
  .state-hero-title { font-size: 29px; max-width: 100%; }
  .state-hero-meta { max-width: 100%; }
  .state-hero-sub { font-size: 15px; margin-bottom: 28px; }
  .state-fold {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 20px;
  }
  .state-hero-meta {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 16px;
  }
  .state-hero-meta-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 32px;
  }
  .state-hero-meta-label { font-size: 10px; }
  .state-hero-meta-value { font-size: 14px; }
  .state-grade-section { padding: 8px 20px 32px; }
  .state-grade-title { font-size: 22px; }
  .state-grade-sub { font-size: 14px; }
  .state-grade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .state-grade-card { padding: 16px 20px 16px 22px; min-height: 60px; }
  .state-grade-card-name { font-size: 15px; }
  .state-trust-section { padding: 32px 20px; margin-top: 32px; }
  .state-trust-title { font-size: 26px; }
  .state-trust-grid { grid-template-columns: 1fr; gap: 10px; }
  .state-trust-card { padding: 18px; }
  .state-cta-strip {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 20px;
    margin: 24px 20px 32px;
    text-align: center;
  }
  .state-cta-strip-btn { justify-content: center; }
  body.state-page {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 380px) {
  .state-hero-title { font-size: 26px; }
  .state-grade-title { font-size: 20px; }
}

@media (min-width: 1024px) {
  .state-fold > .state-hero { padding-top: 8px; padding-bottom: 24px; }
  .state-hero-title { font-size: 45px; }
  .state-hero-sub { font-size: 18px; }
  .state-fold > .state-grade-section { padding-top: 8px; padding-bottom: 16px; }
  .state-trust-section { padding: 80px 40px 72px; margin-top: 64px; }
  .state-trust-title { font-size: 32px; }
  .state-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* ============================================================
   GRADE DETAIL PAGE — grade.html?s=<state>&g=<grade>
   Mobile + desktop. Subject sub-cards.
   ============================================================ */

body.grade-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: #060d1f;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  overflow-x: hidden;
}

body.grade-page::before {
  content: '';
  position: fixed;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.05) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

body.grade-page::after {
  content: '';
  position: fixed;
  bottom: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

body.grade-page > * {
  position: relative;
  z-index: 1;
}

.grade-content {
  max-width: 1100px;
  margin: 0 auto;
}

.grade-hero {
  padding: 32px 32px 40px;
}

.grade-hero-inner {
  max-width: 760px;
}

.grade-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: 18px;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.95);
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 999px;
}

.grade-hero-pin {
  display: inline-flex;
  color: #fbbf24;
}

.grade-hero-title {
  font-family: 'Instrument Serif', serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 14px 0;
}

.grade-hero-title .grade-hero-grade { color: #ffffff; }
.grade-hero-title .grade-hero-test { color: #fbbf24; }

.grade-hero-sub {
  font-family: 'Inter';
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 600px;
}

.subject-section {
  padding: 24px 32px 48px;
}

.subject-section-head {
  margin-bottom: 28px;
}

.subject-section-eyebrow {
  display: inline-block;
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin: 0 0 12px 0;
}

.subject-section-title {
  font-family: 'Instrument Serif', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.subject-section-sub {
  font-family: 'Inter';
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.subject-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.subject-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.5) 0%,
    rgba(20, 29, 51, 0.5) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  text-decoration: none;
  font-family: 'Inter';
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}

.subject-card--live {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.subject-card--live::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.06) 0%,
    rgba(251, 191, 36, 0) 70%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .subject-card--live:hover {
    transform: translateY(-3px);
    border-color: rgba(251, 191, 36, 0.4);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.06) inset,
      0 12px 32px -8px rgba(251, 191, 36, 0.3);
  }
  .subject-card--live:hover::before { opacity: 1; }
}

.subject-card--live:active { transform: scale(0.98); }

/* K4: header Cmd+K search hint. Desktop only — phones don't have a
   physical keyboard so the kbd hint is misleading. Clicking opens the
   palette via quick-search.js's data-quick-search-trigger handler. */
.header-cmdk-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-right: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms ease;
}
.header-cmdk-hint:hover {
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.06);
}
.header-cmdk-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,0.14);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  font-weight: 500;
}
@media (max-width: 768px) { .header-cmdk-hint { display: none; } }

/* K3: question report link in feedback area. Subtle, opt-in. */
.q-report-link {
  display: inline-block;
  margin-top: 12px;
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.18);
  text-underline-offset: 3px;
}
.q-report-link:hover { color: rgba(255,255,255,0.7); }
.q-report-link:disabled { cursor: default; opacity: 0.5; }
.q-report-thanks {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.8rem;
  color: rgba(96, 165, 250, 0.85);
}

/* J2: dashboard review-wrong-answers secondary CTA. Sits under the
   primary "Practice now" button. Only renders when count > 0. */
.dash-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 0.88rem;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.30);
  background: rgba(96, 165, 250, 0.06);
  color: #93c5fd;
  text-decoration: none;
  transition: all 140ms ease;
}
.dash-secondary-cta:hover {
  border-color: #60a5fa;
  color: #fff;
  background: rgba(96, 165, 250, 0.14);
}
.dash-review-icon { font-size: 1.05rem; line-height: 1; }
.dash-review-count {
  display: inline-block;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.22);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

/* J1: practice extras (print worksheet + review wrong) below the
   subject grid. Quiet styling — secondary actions, not primary CTAs. */
.subject-extras {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.subject-extras-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
  font-weight: 600;
}
.subject-extras-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.subject-extra-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: all 140ms ease;
}
.subject-extra-chip:hover {
  border-color: var(--gold, #fbbf24);
  color: var(--gold, #fbbf24);
  background: rgba(251, 191, 36, 0.06);
}
.subject-extra-chip--review:hover {
  border-color: #60a5fa;
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.06);
}
.subject-extra-chip--mock {
  border-color: rgba(251, 191, 36, 0.30);
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.06);
}
.subject-extra-chip--mock:hover {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
  color: #fff;
}
/* §117 — Fun facts chip uses the brand gold (was purple). The §114-§116
   Discovery Deck moved the brand to gold-only; this chip is the deck's
   entry point and should match. */
.subject-extra-chip--facts {
  border-color: rgba(251, 191, 36, 0.30);
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.06);
}
.subject-extra-chip--facts:hover {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
  color: #fff;
}

/* §117 — Tabler SVG icons on extras chips. Sized to match the chip
   typography, currentColor inherits the chip's text color so they
   tint with the brand gold on hover. */
.subject-extra-chip svg {
  flex-shrink: 0;
  display: inline-block;
}

/* §117 — Math subject icon is a typographic "123" in serif gold, not
   an SVG. Renders inside the same .subject-card-icon plate as the
   other Tabler outlines. Letter-spacing keeps the three digits
   feeling like a glyph, not a number. */
.subject-card-icon-glyph {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: currentColor;
}

/* ============================================================
   §118 — Adaptive Pacing UI
   ============================================================
   Three surfaces:
     • In-session pill (.adaptive-pill) — pops above the question card
       when the lambda's adaptive engine bumps the difficulty band.
       Three flavours: --up (gold), --down (slate), --rec (gold).
     • Topic card "Mastered" tag — subtle, kept tappable. Greys the
       card border slightly without dimming the text (kids hate
       seeing their accomplishments dimmed).
     • Topic card "Try this next" pill — gold accent on the strand
       the engine recommends. Pulls attention without being shouty.
   All animations gated on prefers-reduced-motion.
   ============================================================ */

.adaptive-pill {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(20, 29, 51, 0.96) 0%, rgba(20, 29, 51, 0.86) 100%);
  border: 1px solid rgba(251, 191, 36, 0.50);
  color: #fbbf24;
  box-shadow: 0 8px 24px -6px rgba(251, 191, 36, 0.30),
              0 0 0 1px rgba(251, 191, 36, 0.10) inset;
  opacity: 0;
  pointer-events: none;
  z-index: 9000;
  transition: opacity 240ms ease, transform 240ms ease;
}
.adaptive-pill.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.adaptive-pill--down {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(148, 163, 184, 0.40);
  box-shadow: 0 8px 24px -6px rgba(148, 163, 184, 0.20);
}
.adaptive-pill--rec {
  /* Same gold as --up, but the icon arrow points right (next-strand) */
}
@media (max-width: 480px) {
  .adaptive-pill {
    top: 64px;
    font-size: 12px;
    padding: 7px 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .adaptive-pill,
  .adaptive-pill.show {
    transition: none;
    transform: translateX(-50%);
  }
}

/* Topic-card adaptive overlays (subject.html picker) */
.topic-card-pill {
  position: absolute;
  top: 10px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
}
.topic-card-pill--mastered {
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.topic-card-pill--rec {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.40);
  box-shadow: 0 0 12px -2px rgba(251, 191, 36, 0.35);
}
/* Wrap the card so the pill can absolute-position relative to it.
   .topic-card is typically the anchor — give it position: relative
   so the pill anchors locally rather than escaping to the wrap. */
.topic-card { position: relative; }
.topic-card--mastered {
  /* Don't dim the text. Just soften the border so the eye reads
     this as "already cleared" without losing the affordance. */
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.topic-card--recommended {
  border-color: rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.10) inset,
              0 8px 26px -10px rgba(251, 191, 36, 0.32);
}
@media (hover: hover) {
  .topic-card--recommended:hover {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18) inset,
                0 14px 36px -10px rgba(251, 191, 36, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .topic-card--recommended { box-shadow: none; }
}

/* ============================================================
   §119 — Home IA rebuild (post-login grade.html)
   ============================================================
   Component stack:
     1. .home-greeting       — Hi {name} 👋 + state · grade
     2. .earn-hero           — daily-target progress bar
     3. .continue-card       — last-practiced unit + CTA
     4. .subject-tiles-grid  — 3-tile mini subject picker
     5. .mindblower-teaser   — fun-fact deep-link
     6. .more-ways           — collapsed accordion of secondary modes

   All gold-only per §117 brand. Mobile-first; desktop scales up via
   max-width. Each section is self-contained — kids on cold-start
   skip greeting + continue-card cleanly without leaving gaps.
   ============================================================ */

.grade-content--v2 {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 768px) {
  .grade-content--v2 { padding-top: 12px; gap: 22px; }
}

/* ---------- Greeting ---------- */
.home-greeting {
  margin-top: 4px;
}
.home-greeting-title {
  margin: 0 0 4px;
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.home-greeting-wave {
  display: inline-block;
  margin-left: 4px;
  /* The OS-emoji wave is the one place we keep an emoji — it reads as
     a real wave, not as a system icon, and lives in body copy not
     chrome. Bigger so it sits on baseline with the serif Hi. */
  font-size: 24px;
}
.home-greeting-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.005em;
}
@media (min-width: 768px) {
  .home-greeting-title { font-size: 40px; }
}

/* ---------- Earn-today hero ---------- */
.earn-hero {
  padding: 14px 18px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.5) 0%,
    rgba(20, 29, 51, 0.5) 100%);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.earn-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.earn-hero-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.005em;
}
.earn-hero-target {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
.earn-hero-earned {
  font-weight: 700;
  color: #fbbf24;
}
.earn-hero-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: 8px;
}
.earn-hero-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 999px;
  transition: width 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.earn-hero-sub {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.005em;
}
@media (prefers-reduced-motion: reduce) {
  .earn-hero-bar-fill { transition: none; }
}

/* ---------- Continue card ---------- */
.continue-card {
  display: block;
  padding: 18px;
  text-decoration: none;
  background: linear-gradient(180deg,
    rgba(30, 41, 75, 0.7) 0%,
    rgba(15, 23, 42, 0.7) 100%);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset,
              0 8px 24px -10px rgba(251, 191, 36, 0.18);
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 180ms ease,
              border-color 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .continue-card:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 14px 32px -10px rgba(251, 191, 36, 0.32);
  }
}
.continue-card:active { transform: scale(0.99); }
.continue-card-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 6px;
}
.continue-card-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.continue-card-body {
  flex: 1;
  min-width: 0;
}
.continue-card-title {
  margin: 0 0 4px;
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.continue-card-sub {
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.continue-card-progress {
  display: inline-flex;
  gap: 4px;
}
.continue-dot {
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
}
.continue-dot--correct {
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
}
.continue-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0a0f1f;
  flex-shrink: 0;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
@media (max-width: 380px) {
  .continue-card-title { font-size: 20px; }
  .continue-card-cta { padding: 9px 14px; font-size: 12px; }
}

/* ---------- Subject tiles (3-up grid) ---------- */
.subject-tiles {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.subject-tiles-head { padding: 0; }
.subject-tiles-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.subject-tiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.subject-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px;
  min-height: 96px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.4) 0%,
    rgba(20, 29, 51, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter';
  transition: all 180ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
  text-align: center;
}
@media (hover: hover) {
  .subject-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.40);
    background: linear-gradient(180deg,
      rgba(40, 53, 91, 0.6) 0%,
      rgba(20, 29, 51, 0.6) 100%);
    box-shadow: 0 8px 22px -10px rgba(251, 191, 36, 0.30);
  }
}
.subject-tile:active { transform: scale(0.97); }
.subject-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 10px;
}
.subject-tile-icon .subject-card-icon-glyph {
  font-family: 'Instrument Serif', serif;
  font-size: 18px;
}
.subject-tile-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #ffffff;
}
.subject-tile-footer {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-top: -2px;
}
.subject-tile--soon,
.subject-tile--unavailable {
  cursor: not-allowed;
  opacity: 0.5;
}
.subject-tile--soon .subject-tile-icon,
.subject-tile--unavailable .subject-tile-icon {
  filter: grayscale(0.6);
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.subject-tile--continue {
  border-color: rgba(251, 191, 36, 0.35) !important;
}
@media (prefers-reduced-motion: reduce) {
  .subject-tile { transition: none; }
}

/* ---------- Mind-Blower teaser ---------- */
.mindblower-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.45) 0%,
    rgba(20, 29, 51, 0.45) 100%);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  transition: all 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .mindblower-teaser:hover {
    border-color: rgba(251, 191, 36, 0.50);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -10px rgba(251, 191, 36, 0.25);
  }
}
.mindblower-teaser-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #fbbf24;
  flex-shrink: 0;
  white-space: nowrap;
}
.mindblower-teaser-text {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'Instrument Serif', serif;
  font-style: normal;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.mindblower-teaser-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 480px) {
  .mindblower-teaser { flex-direction: column; align-items: flex-start; gap: 6px; }
  .mindblower-teaser-text { white-space: normal; font-size: 13px; }
  .mindblower-teaser-arrow { align-self: flex-end; margin-top: -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .mindblower-teaser { transition: none; }
}

/* ---------- More-ways accordion ---------- */
.more-ways {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  overflow: hidden;
}
.more-ways-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.more-ways-summary::-webkit-details-marker { display: none; }
.more-ways-chevron {
  transition: transform 200ms ease;
  color: rgba(255, 255, 255, 0.45);
}
.more-ways[open] .more-ways-chevron {
  transform: rotate(180deg);
}
.more-ways-body {
  padding: 0 16px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .more-ways-chevron { transition: none; }
}

/* G5: arrow slides right on hover, icon micro-tilts. The subject-card
   already has translateY+glow on hover — these add momentum to the
   "tap me" affordance without overdoing it. */
.subject-card .subject-card-action svg { transition: transform 200ms ease; }
.subject-card .subject-card-icon { transition: transform 220ms ease; }
@media (hover: hover) {
  .subject-card--live:hover .subject-card-action svg { transform: translateX(3px); }
  .subject-card--live:hover .subject-card-icon { transform: rotate(-4deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .subject-card .subject-card-action svg,
  .subject-card .subject-card-icon { transition: none; }
}

.subject-card--soon {
  cursor: not-allowed;
  opacity: 0.65;
}

.subject-card--soon .subject-card-icon { filter: grayscale(0.5); }

.subject-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--subject-color, #fbbf24);
  flex-shrink: 0;
}

.subject-card--live .subject-card-icon {
  background: color-mix(in srgb, var(--subject-color, #fbbf24) 12%, transparent);
  border-color: color-mix(in srgb, var(--subject-color, #fbbf24) 30%, transparent);
}

.subject-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.subject-card-name {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.subject-card-tagline {
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  letter-spacing: -0.005em;
}

.subject-card-action {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  color: #fbbf24;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
}

.subject-card-badge {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

/* ==========================================================================
   Topic picker (subject.html) — list of math units inside a subject.
   Reuses .subject-card / .subject-card--live styling for layout & hover;
   adds glyph-emoji icon + per-topic mastery badge.
   ========================================================================== */
.topic-card .topic-card-icon {
  font-size: 28px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 14px;
  flex-shrink: 0;
}
.topic-card--mixed .topic-card-icon {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.24);
}
.topic-card-stat {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(96, 165, 250, 0.95);
  letter-spacing: -0.005em;
}
.topic-card-stat--ghost {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.subject-section-sub {
  margin: 4px 0 0 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.55;
  max-width: 56ch;
}
@media (max-width: 480px) {
  .topic-card .topic-card-icon { width: 48px; height: 48px; font-size: 24px; }
  .topic-card-stat { font-size: 11px; }
  .subject-section-sub { font-size: 13px; }
}

/* ==========================================================================
   Mastery — per-topic level badges (used on subject.html topic cards
   AND on the practice end-of-session screen). Level keys: starter,
   building, strong, mastered.
   ========================================================================== */
.topic-card-mastery {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.topic-card-mastery-emoji { font-size: 14px; line-height: 1; }
.topic-card-mastery-label { color: rgba(255, 255, 255, 0.92); }
.topic-card-mastery-blurb { color: rgba(255, 255, 255, 0.45); font-weight: 500; }
.topic-card-mastery--starter  { border-color: rgba(148, 163, 184, 0.30); }
.topic-card-mastery--building { border-color: rgba(96, 165, 250, 0.35); }
.topic-card-mastery--building .topic-card-mastery-label { color: #93c5fd; }
.topic-card-mastery--strong   { border-color: rgba(52, 211, 153, 0.40); }
.topic-card-mastery--strong .topic-card-mastery-label { color: #6ee7b7; }
.topic-card-mastery--mastered { border-color: rgba(251, 191, 36, 0.45); background: rgba(251, 191, 36, 0.06); }
.topic-card-mastery--mastered .topic-card-mastery-label { color: #fcd34d; }

/* End-of-session mastery badge — bigger, more prominent than the
   topic-card variant since it's the kid's headline result. */
.mastery-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 10px 0 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left-width: 4px;
}
.mastery-badge-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.mastery-badge-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.mastery-badge-text strong { font-size: 15px; color: rgba(255, 255, 255, 0.95); }
.mastery-badge-blurb { font-size: 12px; color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.mastery-badge--starter  { border-left-color: #94a3b8; }
.mastery-badge--building { border-left-color: #60a5fa; }
.mastery-badge--building .mastery-badge-text strong { color: #93c5fd; }
.mastery-badge--strong   { border-left-color: #34d399; }
.mastery-badge--strong .mastery-badge-text strong { color: #6ee7b7; }
.mastery-badge--mastered {
  border-left-color: #fbbf24;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.08) 0%, rgba(255, 255, 255, 0.04) 60%);
}
.mastery-badge--mastered .mastery-badge-text strong { color: #fcd34d; }

/* Next-topic suggestion card — appears under the AI session summary
   when the kid finishes Strong/Mastered in a topic and there's a
   sibling topic that needs attention. Big tap target, kid-readable
   copy ("Ready for a new topic?" / "Try it →"), single CTA. */
.next-topic-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  margin: 10px 0 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.06) 0%, rgba(168, 85, 247, 0.05) 100%);
  border: 1px solid rgba(96, 165, 250, 0.22);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform 160ms ease, border-color 160ms ease;
}
.next-topic-card:hover  { transform: translateY(-1px); border-color: rgba(96, 165, 250, 0.5); }
.next-topic-card:active { transform: scale(0.99); }
.next-topic-card-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(147, 197, 253, 0.85);
}
.next-topic-card-title { font-size: 17px; font-weight: 700; color: rgba(255, 255, 255, 0.96); letter-spacing: -0.01em; }
.next-topic-card-sub { font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.45; margin-top: 2px; }
.next-topic-card-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fbbf24;
}
@media (max-width: 480px) {
  .mastery-badge { padding: 10px 12px; gap: 10px; }
  .mastery-badge-emoji { font-size: 24px; }
  .mastery-badge-text strong { font-size: 14px; }
  .next-topic-card { padding: 12px 14px; }
  .next-topic-card-title { font-size: 15px; }
  .next-topic-card-sub { font-size: 12px; }
}

/* ==========================================================================
   Trophy room (achievements.html) — kid-readable badge collection.
   ========================================================================== */
.trophy-section { padding: 24px 32px; }
.trophy-section + .trophy-section { padding-top: 8px; }
.trophy-section-head { margin-bottom: 14px; }
.trophy-section-title { margin: 0; font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.95); }
.trophy-section-sub { margin: 4px 0 0; color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.5; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.stat-tile {
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
}
.stat-tile-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.5);
}
.stat-tile-num {
  font-size: 28px;
  font-weight: 700;
  color: #fbbf24;
  margin-top: 4px;
  letter-spacing: -0.02em;
}

.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.trophy-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 4px solid var(--trophy-tier-color, #d4a574);
  border-radius: 12px;
  position: relative;
  transition: transform 160ms ease, border-color 160ms ease;
}
.trophy-card--earned {
  background: linear-gradient(135deg, rgba(251,191,36,0.06) 0%, rgba(255,255,255,0.04) 60%);
}
.trophy-card--locked { opacity: 0.55; }
.trophy-card--locked .trophy-card-emoji { filter: grayscale(80%); }
.trophy-card-emoji {
  font-size: 32px;
  line-height: 1;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  flex-shrink: 0;
}
.trophy-card-body { flex: 1; min-width: 0; }
.trophy-card-name {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.005em;
}
.trophy-card-desc {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
  line-height: 1.4;
}
.trophy-card-reward {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  flex-shrink: 0;
}
.trophy-progress {
  margin-top: 8px;
  position: relative;
  height: 18px;
}
.trophy-progress-bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(96,165,250,0.4) 0%, rgba(168,85,247,0.4) 100%);
  border-radius: 999px;
  max-width: 100%;
}
.trophy-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}

.daily-mission-card { /* container for daily-mission inside */ }
.daily-mission {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(96,165,250,0.08) 0%, rgba(168,85,247,0.06) 100%);
  border: 1px solid rgba(96,165,250,0.25);
  border-radius: 14px;
}
.daily-mission--complete {
  background: linear-gradient(135deg, rgba(52,211,153,0.10) 0%, rgba(251,191,36,0.06) 100%);
  border-color: rgba(52,211,153,0.35);
}
.daily-mission-emoji { font-size: 32px; line-height: 1; flex-shrink: 0; }
.daily-mission-title { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.95); }
.daily-mission-sub { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.daily-mission-progress {
  margin-top: 6px;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.daily-mission-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%);
  transition: width 240ms ease;
}

/* ==========================================================================
   §46 Trophies page premium polish (May 12) — subtractive paint pass.
   Mirrors the §45 Home gold dedup: kill quest card border, flatten quest
   task rows, mute 3 of 4 stat numbers, drop per-trophy borders, demote
   bare gold reward text to a muted chip with a small gold coin icon.
   Layout / section order untouched.
   ========================================================================== */

/* Promoted section heading scale — match §40 + Home polish weights */
body.trophy-page .trophy-section-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
body.trophy-page .trophy-section-sub { font-size: 13px; color: rgba(255, 255, 255, 0.45); }

/* Quest card — drop the blue/purple gradient + bordered chrome; use the
   same flat panel treatment as Home stat cards (white/2 + white/10). */
body.trophy-page .daily-mission {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  padding: 20px 22px;
  display: block;
}
body.trophy-page .daily-mission--complete {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
}
body.trophy-page .dq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
body.trophy-page .dq-head-spacer { flex: 1; }

/* Reward chip — shared style for the daily-quest "all done" badge and
   each trophy's per-card reward. Muted bg, white/80 text, small gold
   coin icon. */
.reward-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.reward-chip .reward-chip-coin { color: rgba(252, 211, 77, 0.8); flex-shrink: 0; }

/* Quest task rows — flat rows with hairline dividers between them.
   Drops per-row border + bg the previous design rendered as nested
   sub-cards. */
body.trophy-page .dq-task {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0;
  padding: 12px 0;
}
body.trophy-page .dq-tasks > .dq-task:last-child { border-bottom: none; }
body.trophy-page .dq-task-emoji { color: rgba(255, 255, 255, 0.55); }
body.trophy-page .dq-task-label { color: #ffffff; font-weight: 500; }
body.trophy-page .dq-task-sub { color: rgba(255, 255, 255, 0.4); font-size: 11px; }
body.trophy-page .dq-task-progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
}
body.trophy-page .dq-task-progress-bar {
  background: rgba(255, 255, 255, 0.4);
}
body.trophy-page .dq-task--done {
  opacity: 0.5;
  border-color: rgba(255, 255, 255, 0.06);
}
body.trophy-page .dq-task--done .dq-task-progress-bar {
  background: rgba(255, 255, 255, 0.4);
}

/* Stat tiles — only TROPHIES EARNED stays gold; the other 3 go white.
   Tiles keep their existing panel chrome (the four-up row reads as a
   group, not as a card row, so the per-tile chrome is fine). */
body.trophy-page .stat-tile-num {
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-family: 'Instrument Serif', serif;
}
/* The stat-tile order in the grid is fixed: earned / correct / streak /
   mastered. Only the first tile (#stat-earned's parent) gets the gold
   number — trophies are the page's currency. */
body.trophy-page .stats-grid .stat-tile:first-child .stat-tile-num { color: #fbbf24; }

/* Trophy grid — kill per-card border + bg. Trophies render as
   icon + title + subtitle + reward chip, with a subtle hover lift on
   the row area (replaces the border affordance). */
body.trophy-page .trophy-card {
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  padding: 12px 14px;
  border-radius: 12px;
  transition: background 180ms ease;
}
body.trophy-page .trophy-card--earned {
  background: transparent;
}
body.trophy-page .trophy-card:hover {
  background: rgba(255, 255, 255, 0.02);
}
/* The icon tile remains the anchor — keep its subtle bg square */
body.trophy-page .trophy-card-emoji {
  background: rgba(255, 255, 255, 0.04);
}
body.trophy-page .trophy-card-reward {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
body.trophy-page .trophy-card-reward.reward-chip {
  align-self: flex-start;
}

/* Header wallet pill on trophy page — same softening as Home so the
   gold appears in one place above the fold (per-trophy coin icons +
   TROPHIES EARNED gold number + reward chip coins) */
body.trophy-page .wallet-pill {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.1);
  font-weight: 500;
}
body.trophy-page .wallet-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}
body.trophy-page .wallet-pill svg { color: rgba(251, 191, 36, 0.8); }

@media (max-width: 480px) {
  .trophy-section { padding: 20px 18px; }
  .trophy-grid { grid-template-columns: 1fr; }
  .stat-tile-num { font-size: 22px; }
  .trophy-card { padding: 12px 14px; }
  .trophy-card-emoji { width: 44px; height: 44px; font-size: 28px; }
  .daily-mission { padding: 12px 14px; gap: 10px; }
  .daily-mission-emoji { font-size: 26px; }
}

/* ==========================================================================
   Reward strip + daily-quest card + review CTA on grade.html
   ========================================================================== */
.reward-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 32px 18px;
  margin-top: 12px;
}
.reward-strip-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.reward-strip-tile:hover { transform: translateY(-1px); border-color: rgba(251,191,36,0.35); background: rgba(255,255,255,0.06); }
.reward-strip-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.reward-strip-body { flex: 1; min-width: 0; }
.reward-strip-label { font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.95); }
.reward-strip-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; line-height: 1.4; word-break: break-word; }
.reward-strip-shield-empty { font-style: italic; }
.reward-strip-progress {
  margin-top: 4px;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.reward-strip-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  transition: width 240ms ease;
}
.reward-strip-streak .reward-strip-icon,
.reward-strip-shields .reward-strip-icon { font-size: 22px; }

.daily-quest-card-grade {
  margin: 0 32px 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(96,165,250,0.06) 0%, rgba(168,85,247,0.05) 100%);
  border: 1px solid rgba(96,165,250,0.22);
  border-radius: 14px;
}
.dq-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.dq-head-title { font-size: 16px; font-weight: 700; color: rgba(255,255,255,0.95); }
.dq-head-reward { font-size: 12px; font-weight: 700; color: #fbbf24; }
.dq-tasks { display: flex; flex-direction: column; gap: 8px; }
.dq-task {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: opacity 200ms ease;
}
.dq-task--done { opacity: 0.6; border-color: rgba(52,211,153,0.3); }
.dq-task-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.dq-task-body { flex: 1; min-width: 0; }
.dq-task-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.92); }
.dq-task-progress { margin-top: 4px; height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow: hidden; }
.dq-task-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa 0%, #a855f7 100%);
  transition: width 240ms ease;
}
.dq-task--done .dq-task-progress-bar { background: linear-gradient(90deg, #34d399 0%, #10b981 100%); }
.dq-task-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.dq-completed {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(52,211,153,0.1);
  border: 1px solid rgba(52,211,153,0.3);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #6ee7b7;
  text-align: center;
}

.review-cta-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 32px 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(251,191,36,0.06) 0%, rgba(245,158,11,0.04) 100%);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease;
}
.review-cta-card:hover { transform: translateY(-1px); border-color: rgba(251,191,36,0.5); }
.review-cta-emoji { font-size: 28px; line-height: 1; flex-shrink: 0; }
.review-cta-body { flex: 1; min-width: 0; }
.review-cta-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(251,191,36,0.85); }
.review-cta-title { font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.96); margin-top: 2px; }
.review-cta-sub { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.45; margin-top: 2px; }
.review-cta-arrow { color: #fbbf24; flex-shrink: 0; }

.grade-hero-countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 14px;
  background: rgba(96,165,250,0.10);
  border: 1px solid rgba(96,165,250,0.30);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(147,197,253,0.95);
  letter-spacing: -0.005em;
}

@media (max-width: 768px) {
  .reward-strip { grid-template-columns: 1fr; padding: 0 18px 14px; gap: 8px; }
  .daily-quest-card-grade { margin: 0 18px 14px; padding: 14px 16px; }
  .review-cta-card { margin: 0 18px 14px; padding: 12px 14px; gap: 10px; }
  .review-cta-emoji { font-size: 24px; }
  .review-cta-title { font-size: 14px; }
  .grade-hero-countdown-pill { font-size: 12px; padding: 5px 12px; }
}

/* ==========================================================================
   Achievement-unlock toast — fires when a kid earns a trophy mid-session.
   Slides in from top-right, auto-dismisses after 4s.
   ========================================================================== */
.achievement-toast {
  position: fixed;
  top: 70px;
  right: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(251,191,36,0.95) 0%, rgba(245,158,11,0.95) 100%);
  color: #1f2937;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(251,191,36,0.4), 0 4px 12px rgba(0,0,0,0.2);
  font-weight: 600;
  max-width: 360px;
  animation: ach-toast-in 360ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             ach-toast-out 360ms ease 4s forwards;
  cursor: pointer;
}
.achievement-toast-emoji { font-size: 36px; line-height: 1; flex-shrink: 0; }
.achievement-toast-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(31,41,55,0.65); }
.achievement-toast-name { font-size: 16px; font-weight: 800; color: #1f2937; line-height: 1.25; }
.achievement-toast-desc { font-size: 12px; font-weight: 500; color: rgba(31,41,55,0.75); line-height: 1.35; margin-top: 1px; }
.achievement-toast-cents { font-size: 12px; font-weight: 800; color: #b45309; margin-top: 4px; }
@keyframes ach-toast-in {
  0%   { transform: translateX(120%) scale(0.9); opacity: 0; }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes ach-toast-out {
  0%   { transform: translateX(0) scale(1); opacity: 1; }
  100% { transform: translateX(120%) scale(0.9); opacity: 0; }
}
@media (max-width: 480px) {
  .achievement-toast {
    right: 8px; left: 8px;
    max-width: none;
    top: 60px;
    padding: 12px 14px;
  }
  .achievement-toast-emoji { font-size: 30px; }
  .achievement-toast-name { font-size: 15px; }
}

/* ==========================================================================
   Avatar picker (settings.html) — Roblox/Pokemon-style emoji avatars
   ========================================================================== */
.avatar-settings-card { padding: 18px; }
.avatar-settings-card h3 { margin: 0 0 4px 0; }
.avatar-settings-card .settings-card-subtitle {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  margin: 0 0 12px;
}
.avatar-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.avatar-current-label { font-size: 12px; color: rgba(255,255,255,0.55); }
.avatar-current-emoji { font-size: 28px; line-height: 1; }
.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.avatar-cell {
  width: 100%;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  color: inherit;
  padding: 0;
}
.avatar-cell:hover { transform: scale(1.06); border-color: rgba(251,191,36,0.4); background: rgba(251,191,36,0.08); }
.avatar-cell:active { transform: scale(0.98); }
.avatar-cell--active {
  border-color: #fbbf24 !important;
  background: rgba(251,191,36,0.15) !important;
  box-shadow: 0 0 0 2px rgba(251,191,36,0.4);
}
.btn-link {
  background: none;
  border: none;
  color: #93c5fd;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: underline;
}
.btn-link:hover { color: #bfdbfe; }

/* Profile-avatar emoji mode — render large emoji rather than initial */
.profile-avatar.profile-avatar--emoji {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 18px;
  font-weight: normal;
  letter-spacing: 0;
}
.profile-avatar.small.profile-avatar--emoji { font-size: 16px; }

/* ==========================================================================
   Language toggle (settings.html) — EN/ES segmented control
   ========================================================================== */
.lang-settings-card { padding: 18px; }
.lang-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  margin-top: 8px;
}
.lang-toggle-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 160ms ease;
}
.lang-toggle-btn:hover { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.04); }
.lang-toggle-btn--active {
  color: #1f2937 !important;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(251,191,36,0.3);
}

.what-to-expect {
  padding: 48px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.what-to-expect-head {
  margin-bottom: 28px;
}

.what-to-expect-eyebrow {
  display: inline-block;
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin: 0 0 12px 0;
}

.what-to-expect-title {
  font-family: 'Instrument Serif', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}

.what-to-expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.expect-card {
  padding: 24px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.4) 0%,
    rgba(20, 29, 51, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.expect-card-num {
  font-family: 'Instrument Serif', serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #fbbf24;
  margin-bottom: 14px;
}

.expect-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.expect-card-title {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.005em;
}

.expect-card-text {
  font-family: 'Inter';
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

@media (max-width: 768px) {
  .grade-hero { padding: 20px 16px 28px; }
  .grade-hero-eyebrow { font-size: 11px; padding: 5px 12px; margin-bottom: 14px; flex-wrap: wrap; }
  .grade-hero-title { font-size: 36px; margin-bottom: 12px; }
  .grade-hero-sub { font-size: 14px; }
  .subject-section { padding: 16px 16px 32px; }
  .subject-section-title { font-size: 28px; }
  .subject-section-sub { font-size: 14px; }
  .subject-grid { grid-template-columns: 1fr; gap: 10px; }
  .subject-card { padding: 18px 18px; gap: 14px; }
  .subject-card-icon { width: 40px; height: 40px; }
  .subject-card-name { font-size: 22px; }
  .subject-card-tagline { font-size: 12px; }
  .subject-card-action { font-size: 13px; }
  .subject-card-badge { font-size: 9px; padding: 4px 10px; }
  .what-to-expect { padding: 32px 16px; }
  .what-to-expect-title { font-size: 26px; }
  .what-to-expect-grid { grid-template-columns: 1fr; gap: 10px; }
  .expect-card {
    padding: 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
  }
  .expect-card-num { font-size: 44px; margin-bottom: 0; }
  body.grade-page {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 380px) {
  .grade-hero-title { font-size: 30px; }
  .subject-section-title { font-size: 24px; }
  .subject-card { padding: 16px; }
}

@media (min-width: 1024px) {
  .grade-hero { padding: 56px 32px 48px; }
  .grade-hero-title { font-size: 64px; }
  .grade-hero-sub { font-size: 18px; }
  .subject-section { padding: 32px 32px 64px; }
  .subject-section-title { font-size: 44px; }
  .subject-card { padding: 28px 30px; }
  .subject-card-icon { width: 56px; height: 56px; }
  .subject-card-name { font-size: 30px; }
  .what-to-expect { padding: 64px 32px; }
  .what-to-expect-title { font-size: 44px; }
}

/* ============================================================
   PRACTICE PAGE HEADER PILLS — state + grade + subject context
   ============================================================ */

.practice-context-bar {
  margin: 0 0 8px 0;
}

.practice-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  flex-wrap: wrap;
}

.practice-breadcrumb-back {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .practice-breadcrumb-back:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.15);
  }
}

.practice-breadcrumb-back:active { transform: scale(0.94); }

.practice-breadcrumb-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.practice-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: 'Inter';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
}

.practice-pill--state {
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.10) 0%,
    rgba(251, 191, 36, 0.04) 100%);
  border-color: rgba(251, 191, 36, 0.25);
  color: rgba(251, 191, 36, 0.95);
  padding: 6px 8px 6px 12px;
}

.practice-pill-state-abbr {
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #fbbf24;
}

.practice-pill-state-test {
  padding: 2px 8px;
  background: rgba(251, 191, 36, 0.15);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fbbf24;
}

.practice-pill--grade { color: rgba(255, 255, 255, 0.85); }

.practice-pill--subject {
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.02);
}

/* Countdown-to-test pill — gold tint, calm not alarming. */
.practice-pill--countdown {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.25);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 380px) { .practice-pill--countdown { display: none; } }

/* ============================================================
   Quick Search palette (Cmd+K). IDE-style command bar.
   ============================================================ */
.qs-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(6, 13, 31, 0.78);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
  animation: qs-fade-in 160ms ease-out;
}
@keyframes qs-fade-in { from { opacity: 0; } to { opacity: 1; } }
.qs-modal {
  width: 100%; max-width: 600px;
  background: linear-gradient(180deg, #0d2249 0%, #061230 100%);
  border: 1px solid rgba(251, 191, 36, 0.18);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.04) inset,
              0 0 60px -20px rgba(251, 191, 36, 0.2);
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
}
.qs-input-wrap {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.qs-input-icon { color: rgba(255, 255, 255, 0.5); flex-shrink: 0; }
.qs-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: #fff; font-size: 1rem; font-family: inherit;
}
.qs-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.qs-kbd {
  display: inline-block; min-width: 22px; padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.72rem;
  text-align: center; line-height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
}
.qs-kbd--esc { font-size: 0.65rem; }
.qs-results { max-height: 50vh; overflow-y: auto; padding: 6px; }
.qs-empty { padding: 28px 16px; color: rgba(255, 255, 255, 0.55); text-align: center; }
.qs-item {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 10px; padding: 10px 12px;
  text-decoration: none; color: rgba(255, 255, 255, 0.92);
  border-radius: 8px;
  font-size: 0.95rem;
}
.qs-item--focus { background: rgba(251, 191, 36, 0.08); }
.qs-item-kind {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; padding: 3px 7px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
}
.qs-item-kind--state { color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
.qs-item-kind--grade { color: #60a5fa; background: rgba(96, 165, 250, 0.08); }
.qs-item-kind--shortcut { color: rgba(255, 255, 255, 0.6); }
.qs-item-title { font-weight: 500; }
.qs-item-sub { color: rgba(255, 255, 255, 0.45); font-size: 0.82rem; text-align: right; }
.qs-footer {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 480px) {
  .qs-overlay { padding-top: 4vh; }
  .qs-item-sub { display: none; }
}

/* ============================================================
   Loading button state. Add `data-loading="1"` (or .btn--loading)
   to any .btn during submit. Shows a spinner, disables clicks.
   ============================================================ */
.btn[data-loading="1"], .btn.btn--loading {
  pointer-events: none;
  position: relative;
  color: transparent !important;
}
.btn[data-loading="1"]::after, .btn.btn--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: var(--gold, #fbbf24);
  border-radius: 50%;
  animation: btn-spin 720ms linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-primary[data-loading="1"]::after, .btn-primary.btn--loading::after {
  border-color: rgba(0, 0, 0, 0.18);
  border-top-color: rgba(0, 0, 0, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .btn[data-loading="1"]::after, .btn.btn--loading::after { animation: none; }
}

/* ============================================================
   Loading skeletons — pre-baked shapes that match the eventual
   real content. Pulse animation tuned to be calm (no shimmer
   strobe), avoids the "your browser is buffering" feel.
   Use:  <div class="ge-skel ge-skel-line"></div>
         <div class="ge-skel ge-skel-block"></div>
         <div class="ge-skel-card"> ... shapes inside ... </div>
   ============================================================ */
.ge-skel {
  display: block;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 70%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: ge-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes ge-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}
.ge-skel-line { height: 14px; margin-bottom: 10px; }
.ge-skel-line.short { width: 40%; }
.ge-skel-line.medium { width: 70%; }
.ge-skel-line.long { width: 100%; }
.ge-skel-block { height: 64px; margin-bottom: 12px; border-radius: 8px; }
.ge-skel-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 14px;
}
.ge-skel-pill { width: 80px; height: 22px; border-radius: 999px; display: inline-block; }
.ge-skel-circle { width: 56px; height: 56px; border-radius: 50%; }
.ge-skel-stack { display: grid; gap: 8px; }
@media (prefers-reduced-motion: reduce) {
  .ge-skel { animation: none; background-position: 50% 50%; }
}

/* ============================================================
   Mock STAAR test mode (?mock=1). Stripped-down test surface:
   no AI tutor, no fun facts, no auto-advance, no perf panel — just
   header (timer + progress) and the question stack.
   ============================================================ */
body.mock-staar-mode .practice-context-bar,
body.mock-staar-mode .performance-panel,
body.mock-staar-mode #guest-banner,
body.mock-staar-mode .mobile-stats-trigger,
body.mock-staar-mode .header-cmdk-hint { display: none !important; }
body.mock-staar-mode { padding-bottom: 0; }

.mock-intro h2 { font-size: 1.6rem; margin-bottom: 6px; }
.mock-staar-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.mock-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(251, 191, 36, 0.18);
  background: rgba(13, 34, 73, 0.45);
  border-radius: 12px;
  margin: 12px 0 18px;
  position: sticky;
  top: 12px;
  z-index: 10;
  backdrop-filter: blur(6px);
}
.mock-header-left { display: flex; flex-direction: column; gap: 2px; }
.mock-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
}
.mock-progress { color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.mock-header-right { text-align: right; }
.mock-timer-label {
  display: block;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.mock-timer {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.mock-qbox {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 24px;
}
.mock-passage {
  background: rgba(13, 34, 73, 0.32);
  border-left: 3px solid rgba(251, 191, 36, 0.40);
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 22px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.mock-passage h3 { font-size: 1.05rem; margin: 0 0 8px; }
.mock-passage-body p { margin: 0 0 10px; color: rgba(255,255,255,0.85); }
.mock-prompt {
  font-size: 1.1rem;
  line-height: 1.5;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.95);
}
.mock-choices { display: grid; gap: 10px; margin-bottom: 18px; }
.mock-choice {
  display: grid;
  grid-template-columns: auto 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.mock-choice:hover { border-color: rgba(251,191,36,0.30); }
.mock-choice input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,0.30);
  border-radius: 50%;
  margin: 0;
  cursor: pointer;
}
.mock-choice input[type="radio"]:checked {
  border-color: #fbbf24;
  background: radial-gradient(circle, #fbbf24 0%, #fbbf24 40%, transparent 50%);
}
.mock-choice-letter { font-weight: 700; color: rgba(255,255,255,0.7); }
.mock-choice-text { color: rgba(255,255,255,0.9); }
.mock-cta-row { display: flex; justify-content: flex-end; }
.mock-next-btn { min-width: 140px; }

.mock-result-eyebrow {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
  margin-bottom: 6px;
}
.mock-result-sub { color: var(--muted); margin-bottom: 22px; }
.mock-scaled {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.04));
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 12px;
  padding: 22px;
  margin: 18px 0 22px;
}
.mock-scaled-num {
  font-size: 3rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
}
.mock-scaled-label {
  margin-top: 6px;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}
.mock-scaled-disc {
  margin-top: 10px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.mock-by-unit {
  text-align: left;
  margin: 20px auto;
  max-width: 480px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.mock-by-unit h3 { margin: 0 0 8px; font-size: 1rem; }
.mock-by-unit ul { list-style: none; padding: 0; margin: 0; }
.mock-by-unit li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.88rem;
  border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.mock-by-unit li:last-child { border-bottom: none; }
.mock-unit-name { color: rgba(255,255,255,0.85); }
.mock-unit-score { color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.mock-result-actions { margin-top: 18px; }

@media (max-width: 480px) {
  .mock-staar-shell { padding: 0 8px; }
  .mock-qbox { padding: 16px; }
  .mock-prompt { font-size: 1rem; }
  .mock-timer { font-size: 1.2rem; }
}

/* ============================================================
   Print-friendly worksheet mode (?print=1).
   Hides the chrome and renders questions in clean black-on-white
   for paper. Answer key on its own page break.
   ============================================================ */
body.print-worksheet-mode {
  background: white;
  color: black;
}
body.print-worksheet-mode .practice-context-bar,
body.print-worksheet-mode .performance-panel,
body.print-worksheet-mode #guest-banner,
body.print-worksheet-mode .practice-title-row,
body.print-worksheet-mode header,
body.print-worksheet-mode footer,
body.print-worksheet-mode nav { display: none !important; }

.ws-toolbar {
  margin: 16px 0;
  display: flex;
  align-items: center;
}
.ws-page {
  background: white;
  color: #111;
  padding: 24px 32px;
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.45;
}
.ws-header { border-bottom: 2px solid #111; margin-bottom: 18px; padding-bottom: 10px; }
.ws-title { font-size: 1.25rem; font-weight: 700; }
.ws-meta { font-size: 0.95rem; color: #444; margin-top: 6px; }
.ws-passage { background: #f6f6f6; padding: 12px 16px; border-radius: 4px; margin-bottom: 22px; }
.ws-passage h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ws-passage-body p { margin: 0 0 8px; font-size: 0.95rem; }
.ws-questions { display: grid; gap: 18px; }
.ws-question { break-inside: avoid; }
.ws-q-head { font-size: 1rem; font-weight: 500; margin-bottom: 6px; }
.ws-q-num { font-weight: 700; margin-right: 4px; }
.ws-choices { display: grid; gap: 4px; padding-left: 16px; }
.ws-choice { font-size: 0.95rem; }
.ws-choice-letter { font-weight: 700; margin-right: 6px; }
.ws-work-lines {
  margin-top: 6px;
  border-bottom: 1px solid #999;
  height: 1.4em;
}
.ws-work-lines::after {
  content: '';
  display: block;
  border-bottom: 1px solid #999;
  margin-top: 1.4em;
  height: 1.4em;
}
.ws-pagebreak { page-break-before: always; height: 0; }
.ws-answer-key { margin-top: 32px; }
.ws-answer-key h3 { font-size: 1.1rem; border-bottom: 1px solid #111; padding-bottom: 4px; }
.ws-key-list { padding-left: 24px; }
.ws-key-list li { margin: 6px 0; font-size: 0.95rem; }
.ws-key-exp { font-size: 0.85rem; color: #555; margin: 2px 0 8px 0; }

@media print {
  body { background: white !important; color: black !important; }
  .no-print, .ws-toolbar { display: none !important; }
  .ws-page { padding: 0; max-width: none; }
}

/* Mastery tier badge — Bronze/Silver/Gold next to unit titles. */
.unit-tier {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85em;
  vertical-align: middle;
}
.unit-tier--bronze { filter: drop-shadow(0 0 2px rgba(205, 127, 50, 0.4)); }
.unit-tier--silver { filter: drop-shadow(0 0 2px rgba(192, 192, 192, 0.5)); }
.unit-tier--gold   { filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6)); }

/* End-of-set quick-mode chip row. Lets kids change session size for the
   next round without going back to the grade page. */
.practice-mode-row {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.practice-mode-chip {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: all 120ms ease;
}
.practice-mode-chip:hover {
  border-color: var(--gold, #fbbf24);
  color: var(--gold, #fbbf24);
  background: rgba(251, 191, 36, 0.08);
}

@media (max-width: 768px) {
  .practice-breadcrumb { padding: 12px 0; gap: 10px; }
  .practice-breadcrumb-back { width: 32px; height: 32px; }
  .practice-pill { font-size: 11px; padding: 5px 10px; }
  .practice-pill-state-abbr { font-size: 13px; }
  .practice-pill-state-test { font-size: 9px; padding: 2px 6px; }
}

@media (max-width: 380px) {
  .practice-breadcrumb-pills { gap: 4px; }
  .practice-pill { font-size: 10px; padding: 4px 8px; }
}

/* ============================================================
   STATE-AWARE LOGGED-IN DASHBOARD
   ============================================================ */

.state-dashboard {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.state-dashboard-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
}

.state-dashboard-welcome-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.state-dashboard-greeting {
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: -0.005em;
}

.state-dashboard-name {
  font-family: 'Instrument Serif', serif;
  font-size: 44px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0;
}

.state-dashboard-streak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.12) 0%,
    rgba(251, 191, 36, 0.04) 100%);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 999px;
  font-family: 'Inter';
}

.state-dashboard-streak-icon { font-size: 14px; }
.state-dashboard-streak-count {
  font-family: 'Instrument Serif', serif;
  font-size: 20px;
  font-weight: 400;
  color: #fbbf24;
  letter-spacing: -0.02em;
}
.state-dashboard-streak-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.85);
  letter-spacing: -0.005em;
}

/* TEST COUNTDOWN */
.test-countdown {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.06) 0%,
    rgba(251, 191, 36, 0.02) 100%);
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 14px;
}

.test-countdown[data-urgency="urgent"] {
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.12) 0%,
    rgba(251, 191, 36, 0.04) 100%);
  border-color: rgba(251, 191, 36, 0.35);
}

.test-countdown[data-urgency="very-urgent"] {
  background: linear-gradient(180deg,
    rgba(239, 68, 68, 0.10) 0%,
    rgba(239, 68, 68, 0.03) 100%);
  border-color: rgba(239, 68, 68, 0.30);
}

.test-countdown[data-urgency="far"] {
  background: linear-gradient(180deg,
    rgba(99, 102, 241, 0.06) 0%,
    rgba(99, 102, 241, 0.02) 100%);
  border-color: rgba(99, 102, 241, 0.20);
}

.test-countdown-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 10px;
  color: #fbbf24;
  flex-shrink: 0;
}
.test-countdown[data-urgency="very-urgent"] .test-countdown-icon {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.30);
  color: #f87171;
}
.test-countdown[data-urgency="far"] .test-countdown-icon {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.30);
  color: #818cf8;
}

.test-countdown-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.test-countdown-eyebrow {
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
}
.test-countdown[data-urgency="very-urgent"] .test-countdown-eyebrow { color: rgba(248, 113, 113, 0.95); }
.test-countdown[data-urgency="far"] .test-countdown-eyebrow { color: rgba(165, 180, 252, 0.85); }

.test-countdown-message {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.005em;
}

.test-countdown-days {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.test-countdown-days-num {
  font-family: 'Instrument Serif', serif;
  font-size: 38px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fbbf24;
}
.test-countdown[data-urgency="very-urgent"] .test-countdown-days-num { color: #f87171; }
.test-countdown[data-urgency="far"] .test-countdown-days-num { color: #818cf8; }
.test-countdown-days-label {
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* CONTINUE PRACTICING CARD */
.continue-card {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  padding: 32px;
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.10) 0%,
    rgba(40, 53, 91, 0.50) 60%);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 16px 48px -12px rgba(251, 191, 36, 0.20);
  position: relative;
  overflow: hidden;
}
.continue-card::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.15) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}
.continue-card-content { position: relative; z-index: 1; }
.continue-card-eyebrow {
  display: inline-block;
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.95);
  margin: 0 0 10px 0;
}
.continue-card-title {
  font-family: 'Instrument Serif', serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 8px 0;
}
.continue-card-sub {
  font-family: 'Inter';
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 20px 0;
  max-width: 460px;
}
.continue-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-family: 'Inter';
  font-size: 15px;
  font-weight: 700;
  color: #0a1628;
  text-decoration: none;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 8px 20px -4px rgba(251, 191, 36, 0.5);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .continue-card-cta:hover {
    transform: translateY(-2px);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      0 12px 28px -4px rgba(251, 191, 36, 0.6);
  }
}
.continue-card-cta:active { transform: scale(0.98); }
.continue-card-cta-icon { display: inline-flex; align-items: center; justify-content: center; }

.continue-card-context {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  position: relative;
  z-index: 1;
}
.continue-context-item { display: flex; flex-direction: column; gap: 2px; }
.continue-context-label {
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
.continue-context-value {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
}

/* STATS GRID */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.stat-tile {
  padding: 18px 20px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.4) 0%,
    rgba(20, 29, 51, 0.4) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.stat-tile--gold {
  background: linear-gradient(180deg,
    rgba(251, 191, 36, 0.06) 0%,
    rgba(40, 53, 91, 0.4) 100%);
  border-color: rgba(251, 191, 36, 0.20);
}
.stat-tile-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
}
.stat-tile--gold .stat-tile-icon {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.25);
  color: #fbbf24;
}
.stat-tile-value {
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #ffffff;
}
.stat-tile--gold .stat-tile-value { color: #fbbf24; }
.stat-tile-label {
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: -0.005em;
}

/* PRACTICE AHEAD */
.dashboard-grades { margin-top: 8px; }
.dashboard-grades-head { margin-bottom: 14px; }
.dashboard-grades-title {
  font-family: 'Instrument Serif', serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 4px 0;
}
.dashboard-grades-sub {
  font-family: 'Inter';
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.dashboard-grades-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.dashboard-grade-quick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .dashboard-grade-quick:hover {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.25);
    color: #fbbf24;
    transform: translateX(2px);
  }
}
.dashboard-grade-quick svg { color: rgba(255, 255, 255, 0.3); }

/* MOBILE */
@media (max-width: 768px) {
  .state-dashboard { padding: 18px 16px 32px; gap: 14px; }
  .state-dashboard-welcome { flex-direction: column; align-items: flex-start; gap: 10px; }
  .state-dashboard-name { font-size: 32px; }
  .state-dashboard-streak { padding: 8px 14px; }
  .test-countdown { padding: 14px 16px; gap: 12px; }
  .test-countdown-icon { width: 36px; height: 36px; }
  .test-countdown-message { font-size: 13px; }
  .test-countdown-days-num { font-size: 28px; }
  .continue-card { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .continue-card-title { font-size: 26px; }
  .continue-card-sub { font-size: 13px; margin-bottom: 16px; }
  .continue-card-cta { width: 100%; justify-content: center; padding: 14px 20px; }
  .continue-card-context {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px;
  }
  .continue-context-item { flex: 1; min-width: 80px; }
  .continue-context-label { font-size: 9px; }
  .continue-context-value { font-size: 13px; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-tile { padding: 14px; }
  .stat-tile-value { font-size: 26px; }
  .dashboard-grades-list { grid-template-columns: 1fr 1fr; }
  body.state-dashboard-active {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 380px) {
  .state-dashboard-name { font-size: 28px; }
  .continue-card-title { font-size: 22px; }
  .test-countdown { flex-wrap: wrap; }
  .test-countdown-days {
    margin-left: 0;
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
  }
}

/* ============================================================
   ADMIN — STATES TAB + USERS STATE FILTER
   ============================================================ */

body.admin-page .admin-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

body.admin-page .admin-filter-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 32px 7px 14px;
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background-color: rgba(255, 255, 255, 0.04);
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
}
body.admin-page .admin-filter-select:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}
body.admin-page .admin-filter-select:focus {
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
}

/* States table column sizing */
body.admin-page .admin-table-wrap { width: 100%; }
body.admin-page .admin-table--states {
  width: 100%;
  border-collapse: collapse;
}
body.admin-page .admin-table--states th,
body.admin-page .admin-table--states td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
body.admin-page .admin-table--states thead th {
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.02);
}
body.admin-page .admin-table--states th:nth-child(3),
body.admin-page .admin-table--states td:nth-child(3) { width: 80px; text-align: right; }
body.admin-page .admin-table--states th:nth-child(4),
body.admin-page .admin-table--states td:nth-child(4) { width: 220px; }
body.admin-page .admin-table--states th:nth-child(5),
body.admin-page .admin-table--states td:nth-child(5) { width: 100px; text-align: right; }
body.admin-page .admin-table--states th:nth-child(6),
body.admin-page .admin-table--states td:nth-child(6) { width: 130px; text-align: right; }
body.admin-page .admin-table--states tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}
body.admin-page .admin-table--states tbody tr:hover td {
  background: rgba(251, 191, 36, 0.04);
}

body.admin-page .admin-state-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.admin-page .admin-state-cell-abbr {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  flex-shrink: 0;
}
body.admin-page .admin-state-cell-abbr.is-top {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.3);
}
body.admin-page .admin-state-cell-name {
  font-weight: 600;
  color: #ffffff;
  font-family: 'Inter';
  font-size: 14px;
}
body.admin-page .admin-state-cell-rank {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin-left: 6px;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 4px;
}

body.admin-page .admin-test-pill {
  display: inline-flex;
  padding: 3px 10px;
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

body.admin-page .admin-user-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

body.admin-page .admin-distribution-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
}
body.admin-page .admin-distribution-bar {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.admin-page .admin-signups-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 999px;
}
body.admin-page .admin-zero {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
}
body.admin-page .admin-cents-cell {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: rgba(251, 191, 36, 0.85);
}

/* User table — state mini cell */
body.admin-page .admin-state-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
body.admin-page .admin-state-mini--none {
  padding: 4px 10px;
  color: rgba(255, 255, 255, 0.3);
}
body.admin-page .admin-state-mini-abbr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-family: 'Instrument Serif', serif;
  font-size: 12px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border-radius: 999px;
}

/* Empty state for states tab */
body.admin-page .admin-empty {
  padding: 56px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.08);
  border-radius: 14px;
}
body.admin-page .admin-empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
}
body.admin-page .admin-empty-title {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  margin: 0 0 6px;
  color: #ffffff;
}
body.admin-page .admin-empty-text {
  font-family: 'Inter';
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

@media (max-width: 768px) {
  body.admin-page .admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.admin-page .admin-table--states { min-width: 720px; }
  body.admin-page .admin-stats { grid-template-columns: 1fr 1fr; }
  body.admin-page .admin-stat-card:first-child { grid-column: span 2; }
  body.admin-page .admin-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.admin-page .admin-filter-select { width: 100%; }
  body.admin-page .live-users-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ============================================================
   ABOUT PAGE — about.html (state-aware via ?s=<slug>)
   ============================================================ */

body.about-page {
  background: #060d1f;
  color: #e8eaf2;
  position: relative;
  overflow-x: hidden;
}
body.about-page::before {
  content: '';
  position: fixed;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(251,191,36,0.12) 0%, rgba(251,191,36,0) 70%);
  pointer-events: none;
  z-index: 0;
}
body.about-page main { position: relative; z-index: 1; }

/* HERO */
.about-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px 48px;
}
.about-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 24px;
}
.about-hero-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 72px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 28px;
  color: #fff;
}
.about-hero-state {
  color: #fbbf24;
  font-style: italic;
}
.about-hero-sub {
  font-size: 20px;
  line-height: 1.55;
  color: rgba(232,234,242,0.78);
  max-width: 720px;
  margin: 0;
}
.about-hero-sub em { color: #fbbf24; font-style: italic; }
.about-hero-sub strong { color: #fff; font-weight: 600; }

/* SECTION SHARED */
.about-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.about-section-head { margin-bottom: 40px; max-width: 760px; }
.about-section-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 16px;
}
.about-section-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  color: #fff;
}
.about-section-sub {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(232,234,242,0.72);
  margin: 0;
}

/* FOUNDER CARD */
.about-founder-card {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  background: linear-gradient(135deg, rgba(20,28,52,0.85) 0%, rgba(14,20,40,0.7) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 48px;
}
.about-founder-text p {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(232,234,242,0.82);
  margin: 0 0 20px;
}
.about-founder-text p:last-child { margin-bottom: 0; }
.about-founder-text strong { color: #fff; font-weight: 600; }
.about-founder-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 12px;
}
.about-founder-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 24px;
  color: #fff;
}
.about-founder-meta {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px;
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 18px;
  background: rgba(251,191,36,0.04);
  align-self: start;
}
.about-founder-stat { display: flex; flex-direction: column; gap: 6px; }
.about-founder-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 44px;
  line-height: 1;
  color: #fbbf24;
  font-weight: 400;
}
.about-founder-stat-label {
  font-size: 13px;
  color: rgba(232,234,242,0.7);
  line-height: 1.4;
}

/* STEPS */
.about-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  transition: border-color 0.2s, background 0.2s;
}
.about-step:hover {
  border-color: rgba(251,191,36,0.25);
  background: rgba(251,191,36,0.03);
}
.about-step-num {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(251,191,36,0.05) 100%);
  border: 1px solid rgba(251,191,36,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  color: #fbbf24;
}
.about-step-title {
  font-size: 18px;
  font-weight: 600;
  margin: 4px 0 8px;
  color: #fff;
}
.about-step-text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(232,234,242,0.75);
  margin: 0;
}
.about-step-text strong { color: #fff; font-weight: 600; }
.about-step-text em { color: #fbbf24; font-style: italic; }

/* STATES PREVIEW (generic path) */
.about-states-preview { text-align: center; }
.about-states-preview-text {
  font-size: 14px;
  color: rgba(232,234,242,0.65);
  margin: 0 0 20px;
}
.about-states-preview-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}
.about-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 13px;
  color: #e8eaf2;
}
.about-state-chip-name { font-weight: 600; }
.about-state-chip-count {
  font-size: 11px;
  color: rgba(232,234,242,0.55);
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.about-states-preview-cta {
  display: inline-block;
  font-size: 15px;
  color: #fbbf24;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(251,191,36,0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.about-states-preview-cta:hover { border-color: #fbbf24; }

/* STATE DETAIL CARD (state path) */
.about-state-detail {
  background: linear-gradient(135deg, rgba(251,191,36,0.06) 0%, rgba(251,191,36,0.02) 100%);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 20px;
  padding: 36px;
}
.about-state-detail-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.about-state-detail-pin {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(251,191,36,0.15);
  border: 1px solid rgba(251,191,36,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
}
.about-state-detail-eyebrow {
  display: block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fbbf24;
  font-weight: 600;
  margin-bottom: 6px;
}
.about-state-detail-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  margin: 0;
  color: #fff;
}
.about-state-detail-desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(232,234,242,0.78);
  margin: 0 0 28px;
}
.about-state-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 24px;
  background: rgba(0,0,0,0.18);
  border-radius: 12px;
  margin-bottom: 28px;
}
.about-state-detail-meta-item { display: flex; flex-direction: column; gap: 6px; }
.about-state-detail-meta-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(232,234,242,0.55);
  font-weight: 600;
}
.about-state-detail-meta-value {
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}
.about-state-detail-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #060d1f;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.about-state-detail-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -10px rgba(251,191,36,0.4);
}

/* TESTIMONIAL */
.about-testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.about-quote {
  position: relative;
  padding: 36px 32px 32px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  margin: 0;
}
.about-quote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 20px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 90px;
  line-height: 1;
  color: rgba(251,191,36,0.35);
}
.about-quote p {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  line-height: 1.4;
  color: #fff;
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}
.about-quote footer {
  font-size: 13px;
  color: rgba(232,234,242,0.6);
}
.about-quote cite { font-style: normal; }

/* FAQ */
.about-faq-list { display: flex; flex-direction: column; gap: 10px; }
.about-faq-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.about-faq-item[open] {
  border-color: rgba(251,191,36,0.25);
  background: rgba(251,191,36,0.03);
}
.about-faq-q {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  position: relative;
  padding-right: 56px;
}
.about-faq-q::-webkit-details-marker { display: none; }
.about-faq-q::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: #fbbf24;
  font-weight: 300;
  transition: transform 0.2s;
}
.about-faq-item[open] .about-faq-q::after {
  content: '\2013';
}
.about-faq-a {
  padding: 0 24px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(232,234,242,0.78);
}
.about-faq-a em { color: #fbbf24; font-style: italic; }

/* FINAL CTA */
.about-cta-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.about-cta-card {
  background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, rgba(251,191,36,0.04) 100%);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
}
.about-cta-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 14px;
  color: #fff;
}
.about-cta-sub {
  font-size: 17px;
  color: rgba(232,234,242,0.78);
  margin: 0 0 32px;
}
.about-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #060d1f;
  text-decoration: none;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.about-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -10px rgba(251,191,36,0.45);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  body.about-page { padding-bottom: 80px; }
  .about-hero { padding: 40px 20px 32px; }
  .about-hero-title { font-size: 44px; }
  .about-hero-sub { font-size: 17px; }
  .about-section { padding: 36px 16px; }
  .about-section-title { font-size: 32px; }
  .about-founder-card {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 28px;
  }
  .about-founder-title { font-size: 28px; }
  .about-step { padding: 18px; gap: 16px; grid-template-columns: 48px 1fr; }
  .about-step-num { width: 48px; height: 48px; font-size: 22px; }
  .about-state-detail { padding: 24px; }
  .about-state-detail-meta {
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 14px;
  }
  .about-testimonial-grid { grid-template-columns: 1fr; }
  .about-quote p { font-size: 18px; }
  .about-cta-card { padding: 36px 24px; }
  .about-cta-title { font-size: 30px; }
  .about-cta-section { padding: 36px 16px 60px; }
}
@media (max-width: 380px) {
  .about-hero-title { font-size: 36px; }
  .about-section-title { font-size: 26px; }
  .about-founder-stat-num { font-size: 36px; }
}
@media (min-width: 1024px) {
  .about-hero { padding: 88px 32px 64px; }
  .about-hero-title { font-size: 88px; }
  .about-section { padding: 80px 32px; }
  .about-section-title { font-size: 56px; }
}

/* ============================================================
   PWA INSTALL PROMPT
   Bottom-sheet style modal, mobile-first
   ============================================================ */

.pwa-install-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 13, 31, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pwa-install-scrim[data-open="true"] { opacity: 1; }

.pwa-install-card {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 201;
  max-width: 480px;
  margin: 0 auto;
  padding: 28px 28px calc(28px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(26, 37, 64, 0.98) 0%, rgba(15, 22, 41, 0.98) 100%);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 -16px 48px -12px rgba(0, 0, 0, 0.5);
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.pwa-install-card[data-open="true"] { transform: translateY(0); }

.pwa-install-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pwa-install-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 24px -4px rgba(251, 191, 36, 0.3);
}
.pwa-install-icon img { width: 100%; height: 100%; object-fit: cover; }

.pwa-install-title {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 8px 0;
}
.pwa-install-sub {
  font-family: 'Inter';
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px 0;
  letter-spacing: -0.005em;
}

.pwa-install-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  margin-bottom: 12px;
  font-family: 'Inter';
  font-size: 15px;
  font-weight: 700;
  color: #0a1628;
  letter-spacing: -0.005em;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 8px 20px -4px rgba(251, 191, 36, 0.5);
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-cta:active { transform: scale(0.98); }

.pwa-ios-steps {
  list-style: none;
  margin: 0 0 16px 0;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pwa-ios-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.pwa-ios-step-num {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 50%;
  flex-shrink: 0;
}
.pwa-ios-step-text {
  font-family: 'Inter';
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.005em;
}
.pwa-ios-step-text strong { color: #fbbf24; font-weight: 600; }

.pwa-ios-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  margin: 0 2px;
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 5px;
  color: #818cf8;
}

.pwa-ios-tip {
  font-family: 'Inter';
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 16px 0;
  font-style: italic;
}

.pwa-install-later {
  display: block;
  width: 100%;
  padding: 12px;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pwa-install-later:hover { color: rgba(255, 255, 255, 0.8); }

@media (min-width: 769px) {
  .pwa-install-card {
    bottom: 50%;
    left: 50%;
    right: auto;
    width: 420px;
    margin: 0;
    border-radius: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: translate(-50%, 50%) scale(0.95);
  }
  .pwa-install-card[data-open="true"] {
    transform: translate(-50%, 50%) scale(1);
  }
}

/* ============================================================
   STANDALONE MODE — when installed as PWA
   ============================================================ */

body.is-standalone .site-footer { display: none; }
body.is-standalone .pwa-install-wrap { display: none !important; }
body.is-standalone .mobile-tab-bar { border-top-width: 1.5px; }

/* ============================================================
   READING PASSAGE — practice page (R2)
   ============================================================ */
.reading-passage {
  margin-bottom: 28px;
  padding: 24px 26px;
  background: linear-gradient(180deg, rgba(40,53,91,0.35) 0%, rgba(20,29,51,0.35) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  position: relative;
}
.reading-passage::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgba(251,191,36,0.5) 0%, rgba(251,191,36,0.1) 100%);
  border-radius: 16px 0 0 16px;
}
.reading-passage-header {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.reading-passage-type {
  display: inline-block; flex-shrink: 0;
  padding: 3px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 999px;
}
.reading-passage-title {
  flex: 1; margin: 0;
  font-family: 'Instrument Serif', serif;
  font-size: 22px; font-weight: 400;
  line-height: 1.2; letter-spacing: -0.015em;
  color: #ffffff;
}
.reading-passage-toggle {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.reading-passage-toggle:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}
.reading-passage-toggle-icon { transition: transform 0.2s ease; }
.reading-passage--collapsed .reading-passage-toggle-icon { transform: rotate(180deg); }
.reading-passage-text {
  font-family: 'Inter', sans-serif;
  font-size: 15px; line-height: 1.65;
  color: rgba(255,255,255,0.85);
  letter-spacing: -0.005em;
}
.reading-passage-text p { margin: 0 0 14px 0; }
.reading-passage-text p:last-child { margin-bottom: 0; }
.reading-passage--collapsed { padding: 14px 18px; }
.reading-passage--collapsed .reading-passage-header {
  margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}
.reading-passage--collapsed .reading-passage-title { font-size: 17px; }
.reading-passage--collapsed .reading-passage-text { display: none; }

@media (max-width: 768px) {
  .reading-passage { padding: 18px 20px; margin-bottom: 20px; }
  .reading-passage-title { font-size: 18px; }
  .reading-passage-text { font-size: 14px; line-height: 1.6; }
  .reading-passage-toggle { padding: 5px 10px; font-size: 11px; }
  .reading-passage-toggle-label { display: none; }
  .reading-passage--collapsed { padding: 12px 16px; }
  .reading-passage--collapsed .reading-passage-title { font-size: 15px; }
}

@media (min-width: 1024px) {
  .reading-passage { padding: 28px 32px; margin-bottom: 32px; }
  .reading-passage-title { font-size: 26px; }
  .reading-passage-text { font-size: 16px; line-height: 1.7; }
}

/* Unavailable subject card (R1) */
.subject-card--unavailable {
  cursor: default;
  opacity: 0.4;
}
.subject-card--unavailable .subject-card-icon { filter: grayscale(1); }
.subject-card--unavailable .subject-card-tagline {
  font-style: italic;
  color: rgba(255,255,255,0.4);
}

/* ============================================================
   HERO — STATE DROPDOWN + GO  (added 2026-04-27)
   Desktop intent only. No mobile media-query overrides.
   ============================================================ */

/* Visually-hidden label, keeps the <label> for screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Wraps the <select> + custom chevron */
.hero-state-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

/* The dropdown itself — matches .btn-secondary glass aesthetic */
.hero-state-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 48px;
  padding: 0 44px 0 18px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 220px;
  outline: none;
}
.hero-state-select:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}
.hero-state-select:focus-visible {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25);
}
/* Native option styling — limited control, but force readable colors
   for browsers that respect it (Chrome on Linux, Firefox). */
.hero-state-select option {
  background: #0a1628;
  color: #ffffff;
}
.hero-state-select option:disabled {
  color: rgba(255, 255, 255, 0.4);
}
/* Empty/placeholder selection (value="") shows muted */
.hero-state-select:invalid,
.hero-state-select option[value=""] {
  color: rgba(255, 255, 255, 0.55);
}

/* Custom chevron, sits over the right edge of the select */
.hero-state-select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
}

/* Go button — inherits .btn-primary visuals; just ensure disabled is unmistakable */
.hero-go-btn[disabled],
.hero-go-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 0 0 1px rgba(251, 191, 36, 0.2);
  filter: saturate(0.7);
}
.hero-go-btn[disabled]:hover,
.hero-go-btn[aria-disabled="true"]:hover {
  transform: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 0 0 1px rgba(251, 191, 36, 0.2);
}

/* ============================================================
   Unified state-picker + Practice pill (Elon-pass)
   One container, one border, one radius, hairline divider.
   Inherits select + button visuals; overrides only what's needed
   to merge them visually.
   ============================================================ */
.hero-cta-pill {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-cta-pill:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
.hero-cta-pill:focus-within {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25);
}
.hero-cta-pill .hero-state-select-wrap {
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}
.hero-cta-pill .hero-state-select {
  height: 52px;
  min-width: 200px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
}
.hero-cta-pill .hero-state-select:hover,
.hero-cta-pill .hero-state-select:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.hero-cta-pill .hero-go-btn {
  height: 52px;
  border-radius: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.hero-cta-pill .hero-go-btn:not([disabled]):hover {
  transform: none !important;
  filter: brightness(1.05);
}
@media (max-width: 768px) {
  .hero-cta-pill {
    width: 100%;
  }
  .hero-cta-pill .hero-state-select-wrap { flex: 1; }
  .hero-cta-pill .hero-state-select { min-width: 0; width: 100%; }
}

/* ============================================================
   HOMEPAGE — hide the legacy state-picker section on desktop.
   The hero dropdown + Go button replace it; the picker grid
   remains for mobile only (where the hero CTA stacks small).
   Per breakpoint contract: desktop is base, mobile overrides.
   ============================================================ */
.home-page .state-picker-section { display: none; }
@media (max-width: 768px) {
  .home-page .state-picker-section { display: block; }
}

/* ============================================================
   Global [hidden] safety net.
   Several component rules use display: flex / grid / block
   which override the user-agent [hidden] { display: none } rule.
   This single line guarantees the HTML hidden attribute always
   wins. Use !important deliberately — this is the contract.
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
 * PRACTICE SURFACE — MOBILE OVERRIDES (May 2)
 * Responsive rules for the kid's most-used screen.
 * Breakpoints match marketplace grid: 1024 / 768 / 480.
 * Touch targets ≥ 44px, no new colors, premium understated.
 *
 * Note: .performance-panel already has a single existing rule at
 * @media (max-width: 900px) on line ~1491 (position: static). The
 * rules below cascade with it cleanly — they do not conflict.
 *
 * Note: .session-summary is inline-styled by js/practice.js at
 * render time. Mobile overrides need !important to defeat the
 * inline style. The inline style remains the desktop default.
 * ============================================================ */

@media (max-width: 1024px) {
  body.practice-page .question-card { padding: 20px; }
  body.practice-page .feedback { padding: 16px; }
  body.practice-page .tutor-output { padding: 12px 14px; }
  body.practice-page .choice { padding: 13px 14px; min-height: 48px; }
}

@media (max-width: 768px) {
  body.practice-page .question-card { padding: 18px; border-radius: 8px; }
  body.practice-page .q-prompt { font-size: 1.15rem; line-height: 1.45; }

  body.practice-page .choice { padding: 14px; min-height: 48px; gap: 12px; }
  body.practice-page .choice .choice-symbol { font-size: 1.4rem; }

  body.practice-page .feedback { padding: 14px; margin-top: 12px; }
  body.practice-page .feedback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  body.practice-page .feedback-actions .btn { flex: 1 1 auto; min-height: 48px; }

  body.practice-page .tutor-box { margin-top: 10px; padding-top: 10px; }
  body.practice-page .tutor-output { padding: 12px 14px; line-height: 1.5; }
  body.practice-page .tutor-followup { gap: 6px; }
  body.practice-page .tutor-followup input { padding: 11px 12px; font-size: 1rem; min-height: 48px; }
  body.practice-page .tutor-send { width: 44px; height: 44px; }
  body.practice-page .tutor-suggestions { display: flex; flex-wrap: wrap; gap: 6px; }
  body.practice-page .tutor-chip { min-height: 48px; }

  body.practice-page .session-summary {
    padding: 10px 12px !important;
    font-size: 0.95rem !important;
    margin: 12px 0 !important;
  }

  /* Perf-panel docks to the bottom of the viewport. The existing
     @media (max-width: 900px) rule already sets position:static;
     this further repositions to fixed-bottom and compacts contents. */
  body.practice-page .performance-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    margin: 0;
    padding: 8px 12px;
    background: var(--surface);
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
  }
  body.practice-page .performance-panel .perf-title,
  body.practice-page .performance-panel .perf-section-title,
  body.practice-page .performance-panel .perf-ring-wrap {
    display: none;
  }
  body.practice-page .performance-panel .perf-stats {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 12px;
    margin: 0;
  }
  body.practice-page .performance-panel .stat { text-align: center; }
  body.practice-page .performance-panel .stat-num { font-size: 1.05rem; }
  body.practice-page .performance-panel .stat-label { font-size: 0.75rem; }

  /* Reserve space at the bottom of the page so docked panel doesn't
     overlap the last question / next-button row. */
  body.practice-page { padding-bottom: 72px; }

  /* End-of-set "Try again" / "Back to unit" buttons stack on small
     viewports. Override the inline margin-left on the secondary button. */
  body.practice-page .card .btn-primary,
  body.practice-page .card .btn-secondary {
    display: block;
    width: 100%;
    margin-left: 0 !important;
    margin-top: 8px;
  }
  body.practice-page .card .btn-primary:first-of-type {
    margin-top: 16px;
  }
}

@media (max-width: 480px) {
  body.practice-page .question-card { padding: 14px; }
  body.practice-page .q-prompt { font-size: 1.1rem; }
  body.practice-page .q-meta { font-size: 0.75rem; }

  body.practice-page .choice { padding: 14px 12px; min-height: 48px; gap: 10px; }
  body.practice-page .choice .choice-symbol { font-size: 1.25rem; }
  body.practice-page .choice .choice-hint { font-size: 0.9rem; }

  body.practice-page .feedback { padding: 12px; margin-top: 10px; border-radius: 8px; }
  body.practice-page .feedback-head { font-size: 1rem; }
  body.practice-page .feedback-body p { margin: 5px 0; font-size: 0.95rem; }

  body.practice-page .tutor-output { padding: 10px 12px; line-height: 1.5; font-size: 0.95rem; }
  body.practice-page .tutor-msg { padding: 6px 0; }
  body.practice-page .tutor-followup input { padding: 12px; font-size: 1rem; }

  /* Bug O from master audit: chips on phone now FULL-WIDTH stack
     instead of 2-on-top-1-on-bottom asymmetry. P: tap targets ≥48px
     (WCAG AAA, K-2 fingers). */
  body.practice-page .tutor-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  body.practice-page .tutor-chip {
    flex: 1 1 100%;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    text-align: center;
    font-size: 0.92rem;
  }

  body.practice-page .session-summary {
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
    margin: 10px 0 !important;
  }

  body.practice-page .performance-panel { padding: 6px 10px; }
  body.practice-page .performance-panel .stat-num { font-size: 0.95rem; }
  body.practice-page .performance-panel .stat-label { font-size: 0.75rem; }
  body.practice-page { padding-bottom: 64px; }

  /* Submit button (Check answer) gets full-width on phone for thumb reach
     AND sticky to the bottom of the viewport so the kid can always tap
     it without scrolling down through long questions / choice lists.
     The question-card is in body flow so sticky's containing block is
     body; pinning the button to bottom:12px keeps it visible while the
     form body is on-screen and lets it scroll off naturally with the
     form when the next question loads. (Tier 7 AO from master audit.) */
  body.practice-page .question-card .btn,
  body.practice-page .question-card form .btn {
    width: 100%;
    min-height: 48px;
  }
  body.practice-page .question-card > button.q-cta[data-role="check"],
  body.practice-page .question-card form > button.q-cta[data-role="check"] {
    position: sticky;
    bottom: 12px;
    z-index: 6;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  }
  /* Reserve a little space at the bottom of body so the sticky button
     never crowds the very last bit of content. */
  body.practice-page:not(.q-answered) { padding-bottom: 80px; }

  /* Lift bottom-anchored toasts above the sticky-submit button on phone.
     STAARFx.toast (.toast) fires on streak/daily-goal/win events. Default
     bottom:28px sits directly OVER the sticky 'Check answer' button at
     bottom:12px+48px height — kid can't tap submit while a toast is up
     and z-index 1100 > 6 makes the toast win. Move it above the button. */
  body.practice-page .toast {
    bottom: 88px;
  }
  /* Achievement toast: pinned top-right by default at 360px max-width.
     On very narrow phones (<400px), 360 + 32px gutter pushes off screen.
     Constrain width so it always fits. */
  .achievement-toast {
    max-width: calc(100vw - 32px);
    right: 12px;
    top: 60px;
  }
}

/* ============================================================
 * PRACTICE SURFACE — generic .card dark-theme override (May 3)
 *
 * PRODUCTION BUG FIX: js/practice.js renders the end-of-set
 * screen, the loading state, and a few other paths as
 * <div class="card">…</div>. The generic .card rule (line 1124)
 * sets background: var(--surface) which is #ffffff (white).
 * body.practice-page sets `color: #ffffff` on the body, so all
 * inherited text inside that white card was rendered as white
 * on white — invisible content. Hamid screenshotted this on his
 * iPhone after completing a practice session — the end-of-set
 * "X / Y correct" line was unreadable.
 *
 * This rule only fires when the .card is on the practice page,
 * so other pages (marketplace, dashboard, settings) that use
 * .card with light-theme bodies are unaffected. Desktop AND
 * mobile both benefit — the bug was never viewport-specific.
 *
 * Mirrors body.practice-page .question-card (line ~6078) for
 * visual consistency: same subtle white-on-dark gradient,
 * matching border, matching shadow.
 * ============================================================ */

body.practice-page .card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  color: #ffffff;
}
body.practice-page .card h1,
body.practice-page .card h2,
body.practice-page .card h3,
body.practice-page .card h4,
body.practice-page .card p,
body.practice-page .card li,
body.practice-page .card label {
  color: #ffffff;
}
body.practice-page .card strong { color: #fde68a; }
body.practice-page .card a:not(.btn) { color: #fde68a; }

/* PRODUCTION BUG FIX (May 3, second pass): the §18 mobile rule docked
   the perf-panel to bottom: 0 with position: fixed but only hid the
   titles + ring. The .recent-dots strip (10×2 grid of dots) and the
   .unit-rows list (7+ rows of topics like "Place Value", "Fractions",
   "Addition", etc.) stayed visible. With those rendered, the
   docked-bottom strip grew tall enough to overlap the actual question
   content above — Hamid screenshotted the stats panel + topic list
   stacked on top of "In the number 515,531, what is the value of the
   5?" making the page unusable.

   Fix per Option 1 (immediate ship): hide the entire .performance-panel
   at <768px. Kid sees the question only. Mobile loses the
   accuracy/progress sidebar but the practice surface works.

   Future TODO §14: rebuild stats + topic progress as a collapsible
   top drawer triggered by a tap-target — kid keeps progress visibility
   on mobile. Out of scope for this hotfix. */
/* K1 mobile stats drawer (replaces the hotfix that hid the panel
   entirely on phones). Default state: panel hidden. Tap the
   floating "Stats" button on the breadcrumb to slide it in from
   the bottom; tap the X (or outside) to dismiss. */
@media (max-width: 768px) {
  body.practice-page .performance-panel {
    display: none !important;
  }
  body.practice-page.mobile-stats-open .performance-panel {
    display: block !important;
    position: fixed;
    left: 8px; right: 8px; bottom: 8px;
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 60;
    padding: 18px 18px 14px;
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 14px;
    background: linear-gradient(180deg, #0d2249, #061230);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,0.6),
                0 0 0 1px rgba(255,255,255,0.05) inset;
    animation: stats-drawer-in 220ms ease-out;
  }
  body.practice-page.mobile-stats-open .performance-panel .perf-title,
  body.practice-page.mobile-stats-open .performance-panel .perf-section-title { display: block; }
  body.practice-page.mobile-stats-open .performance-panel .perf-ring-wrap { display: flex; justify-content: center; }

  /* Tier 7 AP — top-anchored stats pill. The earlier hotfix hid this
     entirely because the original bottom-left fixed position overlapped
     the question card on Saad's screenshot. Re-introduced as a small
     top pill that sits above the practice context bar so it never
     covers question content. Kid taps to slide the full perf-panel
     down from the top of the viewport. */
  .mobile-stats-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 51;
    padding: 7px 12px;
    background: rgba(13, 34, 73, 0.92);
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .mobile-stats-trigger:hover,
  .mobile-stats-trigger:focus-visible {
    background: rgba(13, 34, 73, 1);
    border-color: rgba(251, 191, 36, 0.5);
  }
  body.practice-page.mobile-stats-open .mobile-stats-trigger { display: none; }

  /* Drawer slides DOWN from the top instead of up from the bottom —
     keeps the active question on screen below the drawer when open. */
  body.practice-page.mobile-stats-open .performance-panel {
    bottom: auto;
    top: 8px;
    animation: stats-drawer-in-top 220ms ease-out;
  }

  /* Backdrop tap-to-close. */
  body.practice-page.mobile-stats-open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 55;
    animation: stats-drawer-fade 180ms ease-out;
  }

  /* Close button on the drawer — same X icon style as the auth modal. */
  .mobile-stats-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.practice-page:not(.mobile-stats-open) .mobile-stats-close { display: none; }

  body.practice-page { padding-bottom: 0; }
}
@keyframes stats-drawer-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stats-drawer-in-top { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stats-drawer-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 769px) {
  /* Trigger only exists on phones. */
  .mobile-stats-trigger, .mobile-stats-close { display: none !important; }
}

/* ============================================================
   Footer suppression on focused-practice surfaces (May 5)

   Hamid screenshotted his iPhone showing the homepage marketing
   footer (GradeEarn star + AI tagline + 'All 50 states supported'
   + Product/For Parents/Company/Legal nav columns) rendering
   below the active practice question. That footer block is in
   the HTML of practice.html and grades.html — copy-pasted from
   the homepage when those pages were built.

   Fix: hide the marketing footer on the two kid-focused
   surfaces. Homepage (body.home-page), marketplace (body.
   marketplace-page), about/admin/etc. keep the footer.

   Markup is preserved (not deleted) so any future redesign that
   wants a slim footer on practice — e.g. a single legal-link
   row — has the structure to draw from.
   ============================================================ */
body.practice-page footer.footer,
body.practice-select-page footer.footer {
  display: none;
}

/* ============================================================
   §39 — Landing-page collapse: when there's a saved state, the
   Continue card is the primary CTA; the state-picker dropdown
   below it demotes to a small text-link rather than a competing
   card-style button. Apple "one logo per screen" + Elon "one
   primary action" applied to a returning visitor's first paint.

   Only applies when body.has-saved-state (set by state-picker.js
   showDetected). Mobile-focused but harmless on desktop because
   the desktop layout already shows the grid as the primary picker;
   the trigger button is mobile-only via earlier rules.
   ============================================================ */
body.has-saved-state .state-picker-trigger {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 4px;
  margin-top: 4px;
  min-height: 0;
  border-radius: 0;
  display: inline-flex;
  width: auto;
  align-self: center;
  color: rgba(251, 191, 36, 0.85);   /* muted gold link */
  font-weight: 500;
  text-decoration: none;
}
body.has-saved-state .state-picker-trigger:hover,
body.has-saved-state .state-picker-trigger:focus-visible {
  color: #fbbf24;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
}
body.has-saved-state .state-picker-trigger:active {
  background: transparent;
  transform: none;
}
body.has-saved-state .state-picker-trigger .state-picker-trigger-info {
  flex-direction: row;
  gap: 4px;
}
body.has-saved-state .state-picker-trigger .state-picker-trigger-label {
  font-size: 14px;
  color: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
body.has-saved-state .state-picker-trigger .state-picker-trigger-value {
  display: none;
}
body.has-saved-state .state-picker-trigger .state-picker-trigger-chevron {
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  color: inherit;
}
body.has-saved-state .state-picker-trigger .state-picker-trigger-chevron svg {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);   /* point right, like a "→" affordance */
}
/* Tighten the section under the Continue card: the inline picker
   grid (mobile) is opened on tap, so we don't need it taking space
   above the demoted link. Also reduce the section's eyebrow + title
   styling to feel less like a primary headline once the user is
   already a returning visitor. */
body.has-saved-state .state-picker-eyebrow {
  font-size: 11px;
  opacity: 0.7;
}
body.has-saved-state .state-picker-title {
  font-size: 18px;
}
body.has-saved-state .state-picker-sub {
  font-size: 13px;
}
/* Tighten the gap between hero copy and Step 1 block since the
   removed star left ~36px of vertical headroom. Mobile-only —
   desktop already collapses .mobile-hero with display:none. */
@media (max-width: 768px) {
  .mobile-hero {
    padding-top: 8px;
    padding-bottom: 12px;
  }
}

/* ============================================================
   §41 — State-detail page: hide marketing surfaces, surface
   the grade picker.

   Per Hamid screenshot at 5:19pm: kids who already chose their
   state landed on a page with 6 paragraphs of marketing copy
   (STAAR/TEKS description, fact grid, trust cards, CTA strip)
   above the grade buttons. Grade 3 was below the fold. The
   page is step 2 of an onboarding flow — they need to PICK A
   GRADE AND PRACTICE, not read.

   Markup is preserved (marketing copy stays in the HTML for SEO
   crawlers and any future redesign that wants to bring it back
   on a separate parent-facing route). It's hidden via display:
   none here so the grade picker becomes the first visible
   surface under the breadcrumb.

   Same trim applies on desktop because (a) the marketing copy
   is redundant once a state is picked, (b) the kid is the
   primary user of this page, (c) parents who want test details
   can find them on /about.
   ============================================================ */
body.state-page .state-hero,
body.state-page .state-trust-section,
body.state-page .state-cta-strip {
  display: none;
}
/* Tighten the grade-section spacing now that it's the first
   content under the breadcrumb. */
body.state-page .state-grade-section {
  margin-top: 8px;
}

/* ============================================================
   §42 — Subject-picker page (grade.html): hide the redundant
   hero block + step eyebrow + "Math is live" subhead so the
   subject cards become the first interactive surface under the
   breadcrumb.

   Per Hamid screenshot at 5:24pm: arriving here, the kid saw the
   same context (Texas / Grade 3 / STAAR) repeated 3-4 ways:
     1. Breadcrumb says "← Texas / Grade 3"
     2. Pill says "TEXAS · STAAR · GRADE 3"
     3. Headline says "Grade 3 STAAR practice"
     4. Subhead says "Practice questions aligned to STAAR..."
     5. "Step 3 of 3"
     6. "Pick a subject"
     7. "Math is live. More subjects coming soon."
   THEN finally the Math card. Below the fold.

   Markup is preserved (JS still populates #hero-title etc. so
   any future SEO/parent-facing redesign can opt back in). Just
   visually hidden so the page reads:
     [breadcrumb] → [Pick a subject] → [Math card]

   Same trim applies on desktop because the marketing copy is
   redundant on that path too (kid arrived from a state page).
   ============================================================ */
body.grade-page .grade-hero {
  display: none;
}
/* Tighten the subject-section spacing now that it's the first
   content under the breadcrumb (no hero pushing it down). */
body.grade-page .subject-section {
  margin-top: 8px;
}

/* ============================================================
   §44 — Practice question screen: question becomes the hero.

   Hamid screenshot 5:44pm: kid loaded a question and saw 8
   competing visual elements before the actual stem:
     1. TX/STAAR pill row
     2. "← Back to Grade 3 Math" link
     3. "Grade 3 Math" h2 headline
     4. Restart button
     5. Progress bar + "1/25" counter
     6. ADDITION & SUBTRACTION ... TEKS 3.4A pill
     7. ±2 PTS pill
     8. (finally) the question

   Apple/Elon: question is the hero; everything else demoted.

   Mobile-only — desktop side-panel + perf panel layout left
   intact (kids on desktop have more screen real estate and the
   layout already breathes).
   ============================================================ */
@media (max-width: 767px) {
  /* (1) Collapse the .practice-context-bar pills into a unified
     breadcrumb-text style so it reads "← TX · Grade 3 · Math". */
  body.practice-page #practice-context-bar { padding: 8px 4px; }
  body.practice-page .practice-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    position: relative;
  }
  body.practice-page .practice-breadcrumb-back {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.04);
  }
  body.practice-page .practice-breadcrumb-pills {
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  body.practice-page .practice-pill {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
  }
  /* Collapse state pill to just the abbr; hide the test name to
     keep the breadcrumb tight. Test name is on the previous page. */
  body.practice-page .practice-pill-state-test { display: none; }
  /* Insert "·" separators between pills via ::before. */
  body.practice-page .practice-pill + .practice-pill::before {
    content: ' · ';
    color: rgba(255, 255, 255, 0.35);
    margin: 0 6px;
  }

  /* (2) Overflow menu styling */
  body.practice-page .practice-breadcrumb-overflow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: auto;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  body.practice-page .practice-breadcrumb-overflow:hover,
  body.practice-page .practice-breadcrumb-overflow[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
  }
  body.practice-page .practice-breadcrumb-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 4px;
    z-index: 50;
    min-width: 180px;
    background: rgba(20, 29, 51, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.5);
  }
  body.practice-page .practice-breadcrumb-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
  }
  body.practice-page .practice-breadcrumb-menu-item:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* (3) Hide the in-card redundant header block: back-link + h2 +
     in-card restart button. The breadcrumb above is the only path
     indicator now; restart lives in the overflow menu. */
  body.practice-page .practice-header .back-link,
  body.practice-page .practice-header .practice-title-row h2,
  body.practice-page .practice-header .btn-restart {
    display: none;
  }
  /* The .practice-title-row only contained h2 + restart-btn; with
     both hidden the row collapses to zero height — no extra
     spacing rules needed. */
  body.practice-page .practice-header .practice-title-row {
    margin: 0;
    padding: 0;
  }

  /* (4) Compact progress bar + inline counter, top-right of the
     practice-header row. */
  body.practice-page .practice-header {
    padding: 4px 0 12px;
  }
  body.practice-page .practice-header .progress-bar {
    margin-top: 0;
  }
  body.practice-page .practice-header .progress-track {
    height: 4px;
  }
  body.practice-page .practice-header .progress-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
    margin-top: 4px;
  }

  /* (5) Demote .q-meta to a quiet footer chip BELOW the question
     by reordering it inside the form.
     §68 — added explicit order for .q-inline-fb (3) and the Next
     button (4) since both were missing from the flex order list
     and rendering at TOP (order:0 default) — Hamid screenshot
     10:47am showed feedback + Next ABOVE the question. Targeting
     .q-cta covers both type=submit (Check) and type=button (Next). */
  body.practice-page .question-card {
    display: flex;
    flex-direction: column;
  }
  body.practice-page .question-card .q-prompt        { order: 1; }
  body.practice-page .question-card .q-body          { order: 2; }
  body.practice-page .question-card .q-inline-fb     { order: 3; }
  body.practice-page .question-card > button[type="submit"],
  body.practice-page .question-card > button.q-cta,
  body.practice-page .question-card > .q-autoadvance { order: 4; }
  body.practice-page .question-card .q-meta {
    order: 99;
    margin-top: 14px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  /* Drop the loud "±N pts" pill background — render as muted text
     "+N pts" instead. The main reward feedback fires after the
     answer is checked anyway; this is just a kid-glance hint. */
  body.practice-page .question-card .q-meta .q-reward {
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(251, 191, 36, 0.7);
    font-weight: 500;
  }

  /* (6) Question is the hero — bump font + weight. */
  body.practice-page .question-card .q-prompt {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 16px;
  }
}

/* ============================================================
   §47 — Texas-only pivot: grade-pill picker
   Replaces the multi-state state-picker UI on the landing page.
   Reuses the same anchor id (#state-picker) so existing in-page
   links scroll to the right place. Brand: navy + gold, no new
   colors per CLAUDE.md §10.
   ============================================================ */

.grade-picker-section {
  padding: 48px 32px 64px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

.grade-picker-head {
  text-align: left;
  margin-bottom: 24px;
}

.grade-picker-title {
  font-family: 'Instrument Serif', serif;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 8px 0;
}

.grade-picker-sub {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.grade-picker-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.grade-pill,
.hero-grade-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.28);
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.grade-pill:hover,
.hero-grade-pill:hover {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.55);
}
.grade-pill:active,
.hero-grade-pill:active {
  transform: scale(0.98);
}

.hero-cta-grades {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 20px;
  max-width: 520px;
}

@media (max-width: 768px) {
  .grade-picker-section { padding: 32px 16px 48px; }
  .grade-picker-title   { font-size: 32px; }
  .grade-picker-pills   { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grade-pill           { min-height: 60px; font-size: 16px; }
  .hero-cta-grades      { grid-template-columns: repeat(2, 1fr); }
  .hero-grade-pill      { min-height: 52px; font-size: 14px; padding: 12px 14px; }
}

/* §50 — forgot-password modal additions */
.auth-modal .modal-cta { width: 100%; margin-top: 8px; }
.auth-success {
  color: #047857;
  background: rgba(167, 243, 208, 0.18);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 12px 0 0;
}
.modal-footer-row {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.auth-modal .auth-link {
  color: var(--navy, #0b1726);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}
.auth-modal .auth-link:hover { color: #f59e0b; text-decoration: underline; }

/* §52 — verify-email 6-digit code input */
.verify-code-input {
  text-align: center;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.4em;
  padding-left: 0.4em; /* visual recentre with letter-spacing */
}
.verify-code-input::placeholder { letter-spacing: 0.4em; opacity: 0.35; }

/* ============================================================
   §54 — Practice question card state machine
   States: data-state="asking" | "correct" | "wrong"
   - asking: default border, input editable, gold Check button
   - correct: green border, input read-only, gold Next button
   - wrong: red border, input read-only, gold Next button
   Footer chip (.q-meta) demoted from caps-pill pair to single
   muted sentence-case line.
   ============================================================ */

/* Question card border reflects state. The default border lives
   on .question-card; we override on data-state with !important
   to beat the body.practice-page-scoped border rules. */
.question-card[data-state="correct"] {
  border-color: rgba(16, 185, 129, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
}
.question-card[data-state="wrong"] {
  border-color: rgba(239, 68, 68, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* Lock the input visually — readOnly leaves the kid's text visible
   so they can see what they answered, but no edit affordance. */
.question-card[data-state="correct"] .num-input,
.question-card[data-state="wrong"] .num-input {
  cursor: default;
  caret-color: transparent;
}
.question-card[data-state="correct"] .num-input {
  border-color: rgba(16, 185, 129, 0.45);
  background: rgba(16, 185, 129, 0.06);
  color: #047857;
}
.question-card[data-state="wrong"] .num-input {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.06);
  color: #b91c1c;
}

/* MC choices: lock pointer events on every label, then re-style
   the kid's selected one + the canonical correct one. */
.question-card[data-state="correct"] .choice,
.question-card[data-state="wrong"] .choice {
  pointer-events: none;
  opacity: 0.7;
}
.question-card[data-state="correct"] .choice:has(input:checked) {
  border-color: rgba(16, 185, 129, 0.55) !important;
  background: rgba(16, 185, 129, 0.10) !important;
  opacity: 1;
}
.question-card[data-state="wrong"] .choice:has(input:checked) {
  border-color: rgba(239, 68, 68, 0.55) !important;
  background: rgba(239, 68, 68, 0.10) !important;
  opacity: 1;
}

/* Demote the q-meta footer chip from loud-caps to muted single-line.
   Beats the older .q-meta { text-transform: uppercase; ... } at
   line 1230 because this rule is more specific (selector chain). */
.question-card .q-meta {
  display: block;
  margin: 14px 0 0;
  padding: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  text-align: left;
}
.question-card .q-meta-text { display: inline; }
.question-card .q-meta-earn { color: rgba(16, 185, 129, 0.85); font-weight: 600; }
.question-card .q-meta-lose { color: rgba(239, 68, 68, 0.7); }

/* On light surfaces (admin etc.) muted gray instead of off-white. */
body:not(.practice-page) .question-card .q-meta { color: var(--muted, #6b7280); }

/* ============================================================
   §56 — Practice card layout cleanup
   - Inline feedback chip lives BETWEEN body and primary button
   - Footer (.q-meta) demoted from caps-pill to muted single line
     (overrides earlier body.practice-page .q-meta pill chrome)
   - 'Need scratch paper?' link hidden once question is answered
   - Guest banner styled as quiet bottom footer
   ============================================================ */

/* Inline feedback chip — sits inside the question card.
   G10: short fade+rise on render so the kid sees the result land
   instead of popping in abruptly. Reduced-motion users get neither. */
body.practice-page .question-card .q-inline-fb {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  animation: q-fb-rise 220ms ease-out;
}
@keyframes q-fb-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.practice-page .question-card .q-inline-fb { animation: none; }
}
body.practice-page .question-card[data-state="correct"] .q-inline-fb {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
}
body.practice-page .question-card[data-state="wrong"] .q-inline-fb {
  /* Bug K from master audit: soften wrong-state. Was a loud red box
     dominating the viewport. Now: subtle red border-left, no red
     background fill, smaller padding. The TUTOR reply (which renders
     inside this same card) should be the dominant module — wrong is
     a soft pause, not a tribunal. */
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.18);
  border-left-width: 3px;
  border-left-color: rgba(239, 68, 68, 0.55);
}
body.practice-page .q-inline-fb-head {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 6px;
  color: #ffffff;
}
body.practice-page .question-card[data-state="correct"] .q-inline-fb-head { color: #6ee7b7; }
/* Bug U from master audit: pink-on-navy failed WCAG AA at small sizes
   AND was hard for kids with red-green color difficulty. Now a
   higher-contrast warm-orange (#fbbf24-adjacent in red lane) — passes
   AA+ on the dark background. The X icon also reads as "wrong" without
   relying on color alone. */
body.practice-page .question-card[data-state="wrong"]   .q-inline-fb-head { color: #fcd34d; }
body.practice-page .question-card[data-state="wrong"]   .q-inline-fb-head::before {
  content: '';
}
body.practice-page .q-inline-fb-pts {
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: #6ee7b7;
  margin-left: 6px;
}
body.practice-page .q-inline-fb-correct {
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin-left: 6px;
}
body.practice-page .q-inline-fb-correct strong { color: #fde68a; font-weight: 700; }
/* Bug R from master audit: kid's typed answer inline in wrong-state. */
body.practice-page .q-inline-fb-userwrote {
  color: rgba(255,255,255,0.55);
  font-weight: 500;
  font-size: 0.9rem;
}
/* Bug R + Q: visually de-emphasize the input box AFTER submit so the
   kid's eye lands on FEEDBACK + tutor, not on their already-known
   typed answer. Same input, lighter weight. */
body.practice-page .question-card[data-state="wrong"] input[type="text"],
body.practice-page .question-card[data-state="wrong"] input[type="number"],
body.practice-page .question-card[data-state="correct"] input[type="text"],
body.practice-page .question-card[data-state="correct"] input[type="number"] {
  border-color: rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.02) !important;
  color: rgba(255,255,255,0.55) !important;
  font-weight: 500;
}

/* Lumen — gold-star mascot avatar above every tutor reply (Bug L). */
body.practice-page .lumen-avatar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 4px 10px 4px 4px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.20);
  border-radius: 999px;
}
body.practice-page .lumen-avatar svg {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
body.practice-page .lumen-name {
  font-size: 12px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.02em;
}
body.practice-page .q-inline-fb-body {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* Demote the footer chip — override the body.practice-page caps-pill rules
   from line 6097-6117. Use double-class selector for higher specificity
   plus !important on the visual properties to win the cascade. */
body.practice-page .question-card .q-meta {
  display: block !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  flex-wrap: nowrap !important;
}
body.practice-page .question-card .q-meta > span,
body.practice-page .question-card .q-meta > span:first-child {
  display: inline !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: 0 !important;
  color: inherit !important;
  text-transform: none !important;
}

/* Hide 'Need scratch paper?' surface when an answer has been checked.
   Re-shows on next question render (body.q-answered is removed). */
body.q-answered .scratchpad-inline[data-state="collapsed"] { display: none; }

/* Slim out-of-card tutor box (WRONG only). No header, no padding stack
   above the tutor — was 22px+22px space; now just 14px breathing room. */
body.practice-page .feedback--tutor-only {
  margin-top: 14px;
  padding: 0;
  background: transparent;
  border: 0;
}
body.practice-page .feedback--placeholder { display: none; }

/* §58 — Practice flow chrome rule.
   Hide the marketing footer on any page that's in the practice
   flow (grade-picker → subject-picker → practice runner). The
   header stays (kid uses brand link to navigate home). Keeps the
   marketing footer for landing / about / marketplace. */
body.practice-mode .site-footer,
body.practice-mode .footer {
  display: none !important;
}

/* §59 — when q-inline-fb holds the AI tutor (WRONG state), strip
   the chip's own border/bg/padding so the tutor's own styling
   shows through cleanly. The tutor IS the feedback; no double-frame. */
body.practice-page .question-card .q-inline-fb.q-inline-fb--tutor {
  background: transparent !important;
  border-color: transparent !important;
  padding: 0 !important;
  margin-top: 8px;
}

/* ============================================================
   §63 — Landing page premium polish pass
   - Hero headline split: bold "STAAR Math practice," / italic
     thin gold "built for Texas kids." (was equal-weight serif)
   - Two-line declarative tagline: "Real toys. / Real progress."
   - Trust signal: 20,000+ TEKS-aligned questions · Built by parents
   - Grade picker: muted caps section label, taller tactile buttons
     with gradient + inner shadow + scale-on-tap micro-animation
   ============================================================ */

@media (max-width: 768px) {
  /* §63 Hero — premium typography hierarchy. */
  body.home-page .mobile-hero {
    padding: 36px 24px 28px !important;
  }
  body.home-page .mobile-hero-headline {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-size: 44px !important;
    line-height: 1.02 !important;
    letter-spacing: -0.028em !important;
    margin: 0 0 24px !important;
  }
  body.home-page .mobile-hero-headline .mobile-hero-line1 {
    display: block !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-style: normal !important;
  }
  body.home-page .mobile-hero-headline .mobile-hero-line2 {
    display: block !important;
    color: #fbbf24 !important;
    font-style: italic !important;
    font-weight: 300 !important;
    font-size: 36px !important;
    margin-top: 4px !important;
  }
  body.home-page .mobile-hero-tagline {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 16px;
  }
  body.home-page .mobile-hero-trust {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    letter-spacing: 0.01em;
  }
  /* Live-count pill mirrored to mobile-hero (Hamid May 10). The
     desktop .hero version is killed by line 16306; this is its
     mobile twin. Sits ABOVE the headline so parents see it first. */
  body.home-page .mobile-hero-live {
    display: inline-flex;
    margin: 0 0 14px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
  }
  /* Placement-test link under the headline. Quiet by default; the
     gold link stands out without being noisy. */
  body.home-page .mobile-hero-placement {
    margin: 14px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.58);
  }
  body.home-page .mobile-hero-placement a {
    color: #fde68a;
    text-decoration: underline;
  }

  /* §63 Grade picker — muted section label, tactile buttons. */
  body.home-page .grade-picker-section {
    padding: 24px 24px 56px !important;
  }
  body.home-page .section-label {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 16px;
  }
  body.home-page .grade-picker-pills {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  body.home-page .grade-picker-pills .grade-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px !important;
    padding: 18px 16px !important;
    border-radius: 12px !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #0d2249 0%, #061230 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.35) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 4px 12px -2px rgba(0, 0, 0, 0.3) !important;
    text-decoration: none;
    transition: transform 0.12s ease, border-color 0.18s ease, box-shadow 0.18s ease !important;
  }
  body.home-page .grade-picker-pills .grade-pill:active {
    transform: scale(0.98);
    border-color: rgba(251, 191, 36, 0.7) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.05) inset,
      0 0 18px -2px rgba(251, 191, 36, 0.4),
      0 4px 12px -2px rgba(0, 0, 0, 0.3) !important;
  }
}

@media (min-width: 769px) {
  /* §63 Desktop adapts: same patterns, more breathing room. */
  body.home-page .mobile-hero { padding: 56px 32px 36px; }
  body.home-page .grade-picker-section { padding: 28px 32px 80px; }
  body.home-page .grade-picker-pills .grade-pill {
    min-height: 120px;
    font-size: 18px;
  }
}

/* ============================================================
   §64 — Premium polish pass 2 (mobile)
   - Headline italic line scaled smaller (was visually dominant
     due to gold-on-navy contrast vs white-on-navy)
   - Section label anchored with thin gold rule above + breathing
   - Grade buttons: deeper gradient + top-edge inner highlight
     for tactile catchlight
   ============================================================ */

@media (max-width: 768px) {
  /* §64 — italic line ~75% of bold size for clear hierarchy. */
  body.home-page .mobile-hero-headline .mobile-hero-line2 {
    font-size: 32px !important;
    margin-top: 2px !important;
  }

  /* §64 — Section anchor: 1px gold-tint horizontal rule above
     the 'PICK A GRADE' label, plus generous breathing. */
  body.home-page .grade-picker-section .section-label {
    position: relative;
    margin-top: 32px;
    padding-top: 32px;
  }
  body.home-page .grade-picker-section .section-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(251, 191, 36, 0.13);
  }

  /* §64 — Grade buttons: deeper gradient + top-edge highlight
     (catches light) + bottom-edge shadow (sits firmly on surface). */
  body.home-page .grade-picker-pills .grade-pill {
    background: linear-gradient(180deg, #122a55 0%, #050d22 100%) !important;
    border-color: rgba(251, 191, 36, 0.40) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 -1px 0 rgba(0, 0, 0, 0.30) inset,
      0 4px 12px -2px rgba(0, 0, 0, 0.30) !important;
  }
  body.home-page .grade-picker-pills .grade-pill:active {
    transform: scale(0.98);
    border-color: rgba(251, 191, 36, 0.75) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.10) inset,
      0 -1px 0 rgba(0, 0, 0, 0.30) inset,
      0 0 18px -2px rgba(251, 191, 36, 0.45),
      0 4px 12px -2px rgba(0, 0, 0, 0.30) !important;
  }
}

/* ============================================================
   §65 — Premium polish pass 3 (band fix + Sign in depth +
   italic saturation + section anchor quieter)
   ============================================================ */

@media (max-width: 768px) {
  /* §65 BAND FIX — Hide the desktop .hero entirely on phone.
     showDashboard() un-hides it for guests (heroAnon.hidden=false)
     so the user-agent display:none from [hidden] no longer applies.
     On phone the responsive rules collapsed its CONTENT but its
     starfield + hero-grid + amber/blue drift glows kept rendering
     as a visible band-with-dots under the header. .mobile-hero
     below already carries the proper hero markup; .hero is pure
     visual noise on phone. */
  body.home-page .hero,
  body.home-page #hero-anon {
    display: none !important;
  }
}

/* §65 Sign in button — premium depth without losing ghost feel.
   Subtle inner ring (gold) + soft drop shadow + 8px backdrop blur
   so it sits with weight on whatever's behind it. Stays
   transparent fill, gold border, gold text. */
.user-slot .user-signin,
.user-slot .user-signin.btn {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.18) inset,
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 0 14px rgba(251, 191, 36, 0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.user-slot .user-signin:hover,
.user-slot .user-signin.btn:hover {
  box-shadow:
    0 0 0 1px rgba(251, 191, 36, 0.28) inset,
    0 2px 4px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(251, 191, 36, 0.18);
}

@media (max-width: 768px) {
  /* §65 Italic line — reduce gold saturation. Was 100% gold
     (#fbbf24) which read heavier than the bold-white headline
     above it because gold-on-navy contrasts harder than
     white-on-navy. Now ~82% saturation: still gold-tinted,
     visually subordinate to the heavy line. */
  body.home-page .mobile-hero-headline .mobile-hero-line2 {
    color: rgba(251, 191, 36, 0.82) !important;
  }

  /* §65 Section anchor — quieter + full content width.
     Was rgba(251,191,36,0.13) which read as a small bracket;
     now rgba(...,0.07) full width — barely-there breathing
     anchor instead of a visible line. */
  body.home-page .grade-picker-section .section-label::before {
    background: rgba(251, 191, 36, 0.07);
  }
}

/* ============================================================
   §66 — Premium polish pass 4 (8 surgical pixel fixes)
   1. Top bar 24/32px gutter
   2. Star icon optical-center alignment
   3. Headline punctuation (HTML, no CSS)
   4. Letter-spacing weight balance (line1 tighter, line2 default)
   5. Tagline rgba(255,255,255,0.92) — already in §63, no change
   6. Trust signal em-dash separator (HTML, no CSS)
   7. Section label letter-spacing 0.16em
   8. Section label parent-voice copy (HTML, no CSS)
   ============================================================ */

/* §66 fix 1 — Top bar gutters. .site-header .container is the
   flex row; pad it 24px mobile / 32px desktop so the wordmark
   and Sign in button don't touch screen edges. */
@media (max-width: 768px) {
  .site-header .container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (min-width: 769px) {
  .site-header .container {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

/* §66 fix 2 — Star icon optical-center. .brand has
   align-items:center; flex centers bounding boxes, but the
   visual mass of the star sits below text x-height. Nudge up
   by 1px for true optical balance. */
.site-header .brand .brand-logo,
.site-header .brand > svg {
  position: relative;
  top: -1px;
}

@media (max-width: 768px) {
  /* §66 fix 4 — Letter-spacing weight balance. Bold line gets
     slightly condensed (-0.02em); italic stays default. Compensates
     for italic gold reading heavier than bold white at same nominal
     spacing. */
  body.home-page .mobile-hero-headline .mobile-hero-line1 {
    letter-spacing: -0.02em !important;
  }
  body.home-page .mobile-hero-headline .mobile-hero-line2 {
    letter-spacing: 0 !important;
  }

  /* §66 fix 7 — Caps label letter-spacing 0.16em (was 0.15em).
     Tighter premium tracking. */
  body.home-page .grade-picker-section .section-label {
    letter-spacing: 0.16em !important;
  }
}

/* ============================================================
   §67 — Sign-in modal compaction
   Sign in button was below-the-fold on iPhone (Hamid 10:43am).
   Cut the chrome so the button is visible without scroll on
   any viewport ≥568px tall.
   ============================================================ */

/* Modal container — tighter padding + max-height that never
   exceeds viewport. Internal overflow-y for the rare overflow. */
.signin-modal {
  padding: 28px 24px 20px !important;
  max-height: min(90vh, 700px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Title / subtitle — tightened margins. */
.signin-modal-title {
  font-size: 28px !important;
  margin-bottom: 6px !important;
}
.signin-modal-subtitle {
  margin-bottom: 18px !important;
  font-size: 13px !important;
}

/* OAuth button stack — tighter gap + smaller bottom margin. */
.signin-sso-buttons {
  gap: 8px !important;
  margin-bottom: 14px !important;
}

/* §67 Auth divider — bare 1px line, no text label. Replaces
   the noisy '.signin-divider' / '.signin-divider-text' chrome. */
.auth-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  margin: 14px 0 18px;
  border: 0;
}

/* Form fields — tighter vertical rhythm. */
.signin-form { gap: 12px !important; }
.signin-field { gap: 4px !important; }

/* Modal footer ('New to GradeEarn? Create an account') —
   tighter top spacing. */
.signin-modal-footer {
  margin-top: 16px !important;
  padding-top: 14px !important;
}

/* §67 — On phone, ensure the modal+contents fit a 568px+ viewport
   even with iOS bottom safe-area. The mobile @media at line ~7973
   already sets max-height: 90vh / 90dvh on .signin-modal; the
   tighter padding above brings the button above the fold. */

/* ============================================================
   §68 — Practice page polish
   - Hide wordmark on practice + practice-flow pages (breadcrumb
     identifies the page; redundant)
   - Auto-advance progress indicator on CORRECT state
   - Single-line inline feedback chip
   ============================================================ */

/* §121 — Brand wordmark is now anchored top-left on EVERY internal
   page (gold-G square tile + "GradeEarn"). The earlier rule that hid
   the brand on body.practice-mode was the root cause of three prompts
   failing to render the wordmark on grade.html / practice.html /
   facts.html — body.practice-mode applies broadly, and the !important
   display:none collapsed the wordmark and the new ::before gold-G
   tile alike. Rule kept but neutered with a comment so future
   archaeologists understand the path. */
body.practice-mode .site-header .brand {
  /* display: none !important;  killed §121 — wordmark MUST render on
     every internal page; the breadcrumb is not a brand anchor. */
}

/* §68 Auto-advance indicator (CORRECT state). Replaces the Check
   button slot. Subtle, drains over 1.5s to signal motion. */
.q-autoadvance {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 0 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.q-autoadvance-text { letter-spacing: 0.01em; }
.q-autoadvance-bar {
  width: 80px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.q-autoadvance-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transform-origin: left center;
  animation: q-autoadvance-drain 1.5s linear forwards;
}
@keyframes q-autoadvance-drain {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* §68 Single-line CORRECT inline feedback. Pts + middle-dot +
   explanation, all on one row. Wraps gracefully if explanation
   pushes past viewport width. */
body.practice-page .q-inline-fb-sep {
  color: rgba(255, 255, 255, 0.30);
  margin: 0 4px;
}
body.practice-page .q-inline-fb-body-inline {
  color: rgba(255, 255, 255, 0.80);
  font-weight: 400;
  font-size: 0.92rem;
}
body.practice-page .q-inline-fb-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
body.practice-page .question-card[data-state="correct"] .q-inline-fb-pts { color: #6ee7b7; }

/* §68b — Question-card cross-fade on render (after auto-advance
   from CORRECT, after Next on WRONG, on initial mount).
   Brief 320ms opacity rise so the swap feels intentional, not
   a hard cut. data-state='asking' is the entry state for any
   freshly rendered question; the keyframe runs once. */
body.practice-page .question-card[data-state="asking"] {
  animation: question-fade-in 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes question-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  body.practice-page .question-card[data-state="asking"] { animation: none; }
}

/* ==========================================================
   §70 — User-menu dropdown polish + sign-out flow
   Hamid screenshot 12:50pm: signed-in user saw NO avatar +
   NO sign-out path (constitutional right violation per
   Owners' Room). Block 1's old !important hider for
   .user-pill / .user-menu was removed at line 7779; this
   block adds the dropdown's Material-spec polish:
     - dropdown header (name + @username, no email locally)
     - section divider before destructive actions
     - red-tinted "Sign out" button
     - 44px tap target on avatar (extends invisible hit area)
   ========================================================== */
.user-menu-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}
.user-menu-header-name {
  display: block;
  color: #f9fafb;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 2px;
}
.user-menu-header-handle {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
}
.user-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 4px 4px;
}
.user-menu button.user-menu-signout,
.user-menu .user-menu-signout {
  color: rgba(248, 113, 113, 0.92);
}
.user-menu button.user-menu-signout:hover {
  background: rgba(239, 68, 68, 0.10);
  color: rgba(252, 165, 165, 1);
}

/* Avatar tap target — visible 36px circle, invisible hit area
   extends to 44x44pt per Material/Apple HIG.
   Use ::before pseudo to extend hit area without disturbing layout. */
.site-header .user-pill {
  position: relative;
}
.site-header .user-pill::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  /* No background — purely a hit area. */
}

/* ==========================================================
   §71 — Fun Fact card (Phase 3)
   Mounted inside the question card's inline-fb slot below the
   ✓ feedback chip on CORRECT first-try answers when
   window.FunFacts.pickFactForCorrect returns a fact. Replaces
   the auto-advance progress bar — kid taps "Got it!" to
   advance, no timer.
   ========================================================== */
.ff-card {
  margin-top: 14px;
  padding: 18px 20px 16px;
  background: linear-gradient(180deg, #0d2249 0%, #061230 100%);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 16px -4px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  animation: ff-card-rise 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ff-card-welcome {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(251, 191, 36, 0.85);
  text-transform: uppercase;
  margin-bottom: -4px;
}

.ff-card-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  color: rgba(251, 191, 36, 0.75);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ff-card-icon {
  font-size: 36px;
  line-height: 1;
  margin: 4px 0 6px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.ff-card-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
  max-width: 32ch;
  margin: 0 auto;
}

.ff-card-cta {
  margin-top: 6px;
  padding: 11px 28px;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #1a1a2e;
  border: 0;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 120ms;
  min-width: 132px;
  min-height: 44px;
}
.ff-card-cta:active { transform: scale(0.97); }
.ff-card-cta:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.85);
  outline-offset: 3px;
}

@keyframes ff-card-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ff-card { animation: none; }
}

/* Mobile: tighten padding + body font; preserve tap target on CTA. */
@media (max-width: 480px) {
  .ff-card { padding: 16px 14px 14px; gap: 8px; }
  .ff-card-icon { font-size: 32px; margin-top: 2px; }
  .ff-card-body { font-size: 16px; max-width: 28ch; }
  .ff-card-cta { width: 100%; padding: 12px 28px; }
}

/* ==========================================================
   §72 — Fun Facts settings panel (Phase 4)
   Adds a "Fun Facts" card to the settings grid with frequency
   segments + pause toggle. Overrides the default white
   .settings-card with the §69/§71 gold-bordered navy gradient
   so the engagement card visually pops in the Settings list.
   ========================================================== */
.ff-settings-section.settings-card,
.ff-settings-section {
  background: linear-gradient(180deg, #0d2249 0%, #061230 100%);
  border: 1px solid rgba(251, 191, 36, 0.20);
  border-radius: 16px;
  padding: 22px 24px;
}

.ff-settings-section .ff-settings-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.ff-settings-subtitle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 18px;
}

.ff-settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.ff-settings-row:last-child { margin-bottom: 0; }

.ff-settings-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.01em;
}

.ff-segments {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ff-segment {
  flex: 1;
  padding: 9px 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 140ms, color 140ms;
  min-height: 36px;
}
.ff-segment:hover { color: rgba(255, 255, 255, 0.92); }
.ff-segment.active {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #1a1a2e;
}
.ff-segment:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.85);
  outline-offset: 2px;
}

.ff-segments-disabled .ff-segment {
  opacity: 0.45;
  pointer-events: none;
}

.ff-toggle-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ff-toggle {
  width: 48px;
  height: 28px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.ff-toggle-track {
  display: block;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  transition: background 180ms, border-color 180ms;
}
.ff-toggle-thumb {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ff-toggle-on .ff-toggle-track {
  background: rgba(251, 191, 36, 0.85);
  border-color: rgba(251, 191, 36, 0.6);
}
.ff-toggle-on .ff-toggle-thumb {
  transform: translateX(20px);
}
.ff-toggle:focus-visible .ff-toggle-track {
  outline: 2px solid rgba(251, 191, 36, 0.85);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .ff-settings-section { padding: 18px 16px; }
  .ff-segment { font-size: 13px; padding: 10px 0; }
}

/* ==========================================================
   §73 — Speech speaker button (questions + fun-fact card)
   Web Speech API, tap-to-play / tap-to-stop. Always visible
   when supported, gold accent, 44×44 tap target with 20×20
   visual icon. Pulse animation while playing.
   ========================================================== */
.speech-btn {
  width: 44px;
  height: 44px;
  padding: 12px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: rgba(251, 191, 36, 0.55);
  cursor: pointer;
  transition: color 140ms, background 140ms;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.speech-btn:hover {
  color: rgba(251, 191, 36, 0.85);
  background: rgba(251, 191, 36, 0.08);
}
.speech-btn:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.85);
  outline-offset: 2px;
}
.speech-btn--playing {
  color: rgba(251, 191, 36, 1);
  animation: speech-pulse 1.5s ease-in-out infinite;
}

/* §76 — Dual icon (muted/active). Show muted by default; swap to
   active when the button has .speech-btn--playing. Kids can see at a
   glance which speaker (passage or question) is currently speaking. */
.speech-btn .speech-icon { display: none; }
.speech-btn .speech-icon-muted { display: inline-block; }
.speech-btn--playing .speech-icon-muted { display: none; }
.speech-btn--playing .speech-icon-active { display: inline-block; }
@keyframes speech-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .speech-btn--playing { animation: none; }
}

/* Question-card placement — top-right of .q-prompt */
body.practice-page .q-prompt {
  position: relative;
  padding-right: 48px;
}
body.practice-page .q-prompt > .q-speech-btn {
  position: absolute;
  top: -4px;
  right: -8px;
}

/* Fact-card placement — top-right of .ff-card */
.ff-card { position: relative; }
.ff-card > .ff-speech-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
}

/* ==========================================================
   §74 — Reading practice (Phase 3)
   Subject toggle on home + passage card with CSS counter()
   paragraph numbering + question navigator.
   ========================================================== */

/* Subject toggle on home */
.subject-toggle {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.30);
  padding: 6px;
  border-radius: 14px;
  margin: 0 0 18px;
  max-width: 360px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.subject-segment {
  flex: 1;
  padding: 11px 16px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, color 160ms;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.subject-segment:hover { color: rgba(255, 255, 255, 0.92); }
.subject-segment.active {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #1a1a2e;
}
.subject-segment:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.85);
  outline-offset: 2px;
}
.subject-icon { font-size: 18px; line-height: 1; }

/* Reading passage card (Phase 3 — distinct from R2 .reading-passage) */
.reading-passage-card {
  background: linear-gradient(180deg, #0d2249 0%, #061230 100%);
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 14px;
  padding: 18px 20px 16px;
  margin-bottom: 18px;
  max-height: 40vh;
  overflow-y: auto;
  position: relative;
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-overflow-scrolling: touch;
}
.reading-passage-card[data-state="expanded"] {
  max-height: 80vh;
}

.reading-passage-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #0d2249 0%, rgba(13, 34, 73, 0.92) 100%);
  padding-bottom: 8px;
  z-index: 1;
}
.reading-passage-card-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
}
.passage-speech-btn {
  /* §73 .speech-btn provides 44x44 hit area + gold tint already.
     Just override placement context here — no extra rules needed. */
}
.reading-passage-expand {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 0;
  color: rgba(251, 191, 36, 0.70);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: background 140ms, color 140ms;
}
.reading-passage-expand:hover {
  background: rgba(251, 191, 36, 0.10);
  color: rgba(251, 191, 36, 0.95);
}
.reading-passage-expand:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.85);
  outline-offset: 2px;
}

/* Passage body — paragraph numbering via CSS counter() */
.reading-passage-card-body {
  counter-reset: para;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.reading-passage-card-body p {
  padding-left: 32px;
  text-indent: 0;
  position: relative;
  margin: 0 0 14px;
  counter-increment: para;
}
.reading-passage-card-body p::before {
  content: counter(para);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  text-align: right;
  color: rgba(251, 191, 36, 0.65);
  font-weight: 600;
  font-size: 14px;
  font-feature-settings: "tnum";
}
.reading-passage-card-body h2,
.reading-passage-card-body h3 {
  color: rgba(251, 191, 36, 0.90);
  font-size: 15px;
  font-weight: 700;
  margin: 18px 0 8px;
  padding-left: 32px;
}
.reading-passage-card-body strong { color: #fff; }
.reading-passage-card-body em { font-style: italic; color: rgba(255, 255, 255, 0.95); }

/* Question navigator (e.g. "Question 2 of 5") below the prompt */
.reading-q-nav {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
  margin: -6px 0 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}

/* Mobile tightening */
@media (max-width: 480px) {
  .reading-passage-card { padding: 14px 14px 12px; max-height: 36vh; }
  .reading-passage-card[data-state="expanded"] { max-height: 78vh; }
  .reading-passage-card-title { font-size: 15px; }
  .reading-passage-card-body { font-size: 15px; }
  .reading-passage-card-body p { padding-left: 28px; }
  .reading-passage-card-body p::before { width: 20px; font-size: 13px; }
  .reading-passage-card-body h2, .reading-passage-card-body h3 { padding-left: 28px; font-size: 14px; }
  .subject-toggle { max-width: 100%; }
}

/* ==========================================================
   §75 — Reading practice ergonomics fix (Phase 3.1)

   Owners' Room (Apple, Google UX, Test Specialist, Accessibility,
   Curriculum, Tesla): the Phase 3 layout had four competing scroll
   surfaces and the question was below the fold. Fix:
     - Hide right rail (.performance-panel) during reading
     - Two-column desktop (≥768px): passage LEFT (sticky), question RIGHT
     - Mobile (<768px): passage on top max-height 45vh, question below
     - Q-of-N moved above question stem (gold-tinted)
     - Tap targets to 44×44 (expand button was 36×36)

   All rules scoped to body[data-subject="reading"] so math is untouched.
   ========================================================== */

/* ----- Hide right rail during reading ----- */
body[data-subject="reading"] .performance-panel {
  display: none !important;
}

/* Reclaim the 280px right-rail column when reading */
body[data-subject="reading"] .practice-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1400px;
  margin: 0 auto;
}

/* §82 hotfix #2 — let the practice surface breathe wider than the
   default 1100px `.container --max`. §155 (May 18) — was scoped to
   [data-subject="reading"]; now applies to every practice subject so
   math + science + social-studies also reclaim full desktop width. */
body.practice-page section > .container {
  max-width: 1400px;
  padding: 0 24px;
}

/* §82 hotfix #3 — diagnosis run revealed the REAL bottleneck wasn't
   .container, it was line 28107's `body.practice-page .practice-layout
   { max-width: 640px }` and `.practice-main { max-width: 640px }`. The
   §69-era single-column rule was clamping the reading surface to 640px
   regardless of how wide its parent container was. Reading needs the
   full 1400px, not 640px, because the kid is reading paragraphs not a
   single-column quiz card.

   Specificity bump: combine .practice-page + [data-subject="reading"]
   on the same body selector (0,0,3,1) to beat the §69 rule (0,0,2,1)
   and bypass the source-order dependence. */
body.practice-page[data-subject="reading"] .practice-layout,
body.practice-page[data-subject="reading"] .practice-layout--solo {
  max-width: 1400px;
  margin: 0 auto;
}
body.practice-page[data-subject="reading"] .practice-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ==========================================================================
   §84 Home / grade landing — minimalist redesign (May 13).

   Killed: 3-stat card row (Level/streak/shields), big "Today's quest"
   card with 3 sub-tasks + progress bars, "no shields yet" placeholder
   copy, serif "Subjects" heading, emoji icons in chrome.

   New: a single inline `.home-status-bar` chip row above the subject
   list. Tabler-style outline SVG icons. Quest detail moves into a
   <dialog> opened by tapping the quest chip. Subject rows get an
   optional "Level N · M/T XP" subtitle on the last-practiced subject
   row (acts as the "Continue" affordance from A10).
   ========================================================================== */

/* Centered minimal column for the entire grade landing surface. */
body.grade-page .grade-content--minimal {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Status bar — one inline row, no card, secondary colour.
   §117: context chip removed (duplicated breadcrumb), so the bar is
   chips-only and right-aligns under the breadcrumb. */
.home-status-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 8px 0 24px;
  padding: 6px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
}
.home-status-context {
  background: none;
  border: none;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.01em;
}
.home-status-context:hover {
  color: rgba(255, 255, 255, 0.9);
}
.home-status-sep {
  color: rgba(255, 255, 255, 0.3);
}
.home-status-chips {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.home-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  line-height: 1;
}
.home-status-chip--quest {
  cursor: pointer;
}
.home-status-chip--quest:hover {
  color: rgba(255, 255, 255, 0.9);
}
.home-status-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.home-status-chip--streak .home-status-chip-ico { color: #ef4444; }
.home-status-chip--shields .home-status-chip-ico { color: rgba(255, 255, 255, 0.55); }
.home-status-chip--quest .home-status-chip-ico { color: var(--gold, #fbbf24); }
.home-status-chip-num {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.home-status-chip-reward {
  color: var(--gold, #fbbf24);
  font-weight: 600;
}
.home-status-chip--quest-done .home-status-chip-num { color: var(--gold, #fbbf24); }

/* Phone: wrap to two lines if needed. */
@media (max-width: 480px) {
  .home-status-bar {
    align-items: flex-start;
    gap: 6px;
  }
  .home-status-chips {
    gap: 12px;
    width: 100%;
    justify-content: flex-start;
  }
}

/* Quest detail dialog — native <dialog>, dim backdrop. */
.home-quest-dialog {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(13, 18, 36, 0.98);
  color: #fff;
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  max-height: 80vh;
}
.home-quest-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.home-quest-dialog-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 8px;
}
.home-quest-dialog-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.home-quest-dialog-reward {
  font-size: 12px;
  color: var(--gold, #fbbf24);
  font-weight: 600;
}
.home-quest-dialog-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.home-quest-dialog-tasks {
  padding: 8px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-quest-dialog-tasks .dq-task {
  display: block;
}
.home-quest-dialog-tasks .dq-task-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 6px;
}
.home-quest-dialog-tasks .dq-task--done .dq-task-label { color: #34d399; }
.home-quest-dialog-tasks .dq-task-progress {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.home-quest-dialog-tasks .dq-task-progress-bar {
  height: 100%;
  background: var(--gold, #fbbf24);
  transition: width 0.3s;
}
.home-quest-dialog-tasks .dq-task--done .dq-task-progress-bar { background: #34d399; }
.home-quest-dialog-tasks .dq-task-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.home-quest-dialog-done {
  padding: 12px 20px 16px;
  color: var(--gold, #fbbf24);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Subject-section eyebrow — replaces the serif <h1>Subjects</h1>. */
.subject-section-head--minimal {
  padding: 0;
  margin: 0 0 12px;
  border: none;
}
.subject-section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
}

/* ==========================================================================
   §85 MySpace — chat IS the main area (May 13).

   User: "my space main area should be the chat gpt style chat box.
   what the hell is it showing this as well" — referring to the 3
   stat panels (Your performance / Last 20 / Mastery) sitting above
   the chat surface, pushing the chat below the fold.

   Hide every stat / briefing / greeting / footer chrome on MySpace
   so the chat surface (which already exists at .ms-card) is the
   FIRST visible thing in .ms-content. The hidden stats data still
   flows underneath — JS keeps writing — so future surfaces (e.g.
   /achievements.html, parent dashboard) can read them. We just
   don't render them on MySpace.

   Also: enlarge .ms-card to ChatGPT-style proportions so it reads
   as the dedicated chat surface, not a card.
   ========================================================================== */
body.myspace-page .ms-performance,
body.myspace-page .ms-briefing,
body.myspace-page .ms-greeting-block,
body.myspace-page .ms-quickwin,
body.myspace-page .ms-stats-footer {
  display: none !important;
}

/* Chat surface becomes the centerpiece. Drop the card chrome
   (white background + border + padding) — let the chat thread sit
   on the page bg directly so it reads as the page, not a tile. */
body.myspace-page .ms-content {
  max-width: 860px;
  padding: 24px 24px 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 100px);
}
body.myspace-page .ms-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.myspace-page .ms-chat-topbar {
  display: none; /* No back-to-dashboard chrome — chat IS the dashboard. */
}
body.myspace-page .ms-chat-empty {
  /* Center the empty-state greeting + suggestion chips vertically
     in the available space, ChatGPT-style. */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 24px 16px;
}
body.myspace-page .ms-chat-thread {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 0 24px;
}

@media (max-width: 767px) {
  body.myspace-page .ms-content {
    padding: 16px 16px 0;
    min-height: calc(100vh - 72px);
  }
}

/* Subject card — two-line variant with optional level/XP subtitle. */
.subject-card .subject-card-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}
.subject-card .subject-card-text .list-card-title {
  margin: 0;
}
.subject-card-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  letter-spacing: 0.005em;
}

/* Last-practiced subject gets a slim gold left-border accent so the
   kid sees "this is where you were." Per A10. */
.subject-card--continue {
  border-left: 2px solid var(--gold, #fbbf24) !important;
  padding-left: 14px;
}
.subject-card .list-card-chevron {
  color: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
}

/* ----- Two-column desktop (≥768px): passage LEFT, question RIGHT ----- */
@media (min-width: 768px) {
  body[data-subject="reading"] #qbox {
    display: grid;
    /* §82 hotfix #2 — passage gets 3fr, question gets 2fr. The passage
       is the content the kid actually has to read; the question is 4
       short choices + a Check button. Reweighting gives the passage
       ~60% of the row width = wider paragraphs, fewer line wraps. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 32px;
    align-items: start;
  }
  body[data-subject="reading"] #qbox .reading-passage-card {
    margin-bottom: 0;
    /* Sticky so the passage stays in view while the question is answered */
    position: sticky;
    top: 88px; /* below site-header */
    max-height: calc(100vh - 120px);
  }
  body[data-subject="reading"] #qbox .question-card {
    /* Right column — natural flow */
    margin-top: 0;
  }
  /* Expanded mode on desktop fills more of the column */
  body[data-subject="reading"] #qbox .reading-passage-card[data-state="expanded"] {
    max-height: calc(100vh - 120px);
  }
}

/* ----- Mobile stacked (<768px) — bump passage room from 36vh→45vh ----- */
@media (max-width: 767px) {
  body[data-subject="reading"] .reading-passage-card {
    max-height: 45vh;
  }
  body[data-subject="reading"] .reading-passage-card[data-state="expanded"] {
    max-height: 80vh;
  }
}

/* ----- Q-of-N relocated above question stem, gold-tinted ----- */
body[data-subject="reading"] .reading-q-nav {
  text-align: left;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
}

/* ----- 44×44 tap target for expand button (was 36×36) ----- */
body[data-subject="reading"] .reading-passage-expand {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

/* ----- Subject pill tinting (visual cue we're in reading mode) ----- */
body[data-subject="reading"] .practice-pill--subject {
  background: rgba(251, 191, 36, 0.18);
  color: rgba(251, 191, 36, 0.95);
}

/* ==========================================================
   §77 — Practice page UI overhaul (Owners' Room: Apple, Google,
   Microsoft, Tesla). 12 locked fixes.

   Style guide: every rule scoped to body.practice-page so the
   homepage / marketplace / etc. stay untouched.
   ========================================================== */

/* B1: redundant back-link removed in JS (was: "← Back to Grade 3 Reading"
       sibling of the breadcrumb back arrow). */

/* B2: Page-title H1 replaced by a single eyebrow line in the question
       header. Same visual weight as a small caption — the question card
       becomes the visual hero. */
body.practice-page .practice-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 10px;
}
body.practice-page .practice-eyebrow-title {
  color: rgba(255, 255, 255, 0.78);
  text-transform: none;
  font-weight: 600;
}
body.practice-page .practice-eyebrow-progress {
  color: rgba(251, 191, 36, 0.90);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}
body.practice-page .practice-eyebrow-sep {
  color: rgba(255, 255, 255, 0.30);
}
body.practice-page .practice-eyebrow-restart {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}

/* B5: Restart hidden on Q1 (no progress to lose). data-q="1" is set on
       the .practice-header in renderQuiz; subsequent setQuestion calls
       update the attribute. */
body.practice-page .practice-header[data-q="1"] .practice-eyebrow-restart {
  display: none;
}

/* B11: Top nav (Home / Toys / How it works) clutters the focus surface.
        Hide entirely during practice — the breadcrumb back arrow is the
        only navigation kids need mid-question. Brand mark + user pill
        stay so the kid still has a clear sign-out path. */
/* §81 — hide the ENTIRE site-header on practice routes, not just
   .nav. The previous rule (just .nav hidden) left the orphaned
   #user-slot pts/chat/avatar cluster floating top-right with no
   relationship to anything. The practice context bar below is the
   single navigation surface for practice; it now includes brand +
   pts chip + ⋯ menu, so site-header is purely redundant here. */
body.practice-page .site-header { display: none !important; }

/* B8: A/B/C/D letter chips on multiple-choice answers. Visible-bordered
       circular chip on the left of each choice; the existing radio is
       hidden (replaced visually by the lit-up chip). */
body.practice-page .choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 14px;
}
body.practice-page .choice .choice-letter {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
  color: rgba(251, 191, 36, 0.85);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  transition: all 140ms ease-out;
}
body.practice-page .choice .choice-content {
  flex: 1 1 auto;
  min-width: 0;
}
/* Selected (radio :checked) — chip lights up gold-on-navy */
body.practice-page .choice input[type="radio"]:checked ~ .choice-letter {
  background: rgba(251, 191, 36, 0.95);
  color: #0d1f3f;
  border-color: rgba(251, 191, 36, 1);
}
/* Hover (desktop only) */
@media (hover: hover) {
  body.practice-page .choice:hover .choice-letter {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.7);
  }
}
/* The native radio is now redundant — visual lives in the chip. Hide it
   but keep it in the layout so keyboard nav + form-required validation
   still work. */
body.practice-page .choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}

/* Phone tightening for chips (44px hit-area requirement is satisfied
   by the .choice's padding + min-height inherited from §74). */
@media (max-width: 480px) {
  body.practice-page .choice .choice-letter {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
}

/* B9: ensure all 4 answers stay above the fold at 375px / 667px (iPhone
       SE) by tightening choice padding. The existing §74 mobile rules
       already shrink padding; this just guarantees no extra growth from
       the new letter chips. */

/* B10: Mobile-sticky question card. Reading mode on phone — passage on
        top scrolls internally (45vh per §75), question card sticks
        below so the kid never has to scroll the page to find it. */
@media (max-width: 767px) {
  body.practice-page[data-subject="reading"] .question-card {
    position: sticky;
    top: 0;
    z-index: 3;
    /* Subtle shadow when sticky to separate from passage above */
    box-shadow: 0 -4px 12px rgba(6, 13, 31, 0.20);
  }
}

/* B12: kebab "..." overflow menu had only one item ("Restart practice"),
        which is the same as the eyebrow Restart button. Hide on Q1
        (nothing to restart) AND on desktop (Restart already visible in
        the eyebrow). On mobile Q2+, kebab is the only restart entrypoint
        because the eyebrow Restart hides on phone for space. */
body.practice-page .practice-header[data-q="1"] ~ * .practice-breadcrumb-overflow,
body.practice-page .practice-breadcrumb-overflow { /* default: visible */ }
@media (max-width: 480px) {
  /* On phone: hide the eyebrow Restart (use kebab instead) */
  body.practice-page .practice-eyebrow-restart { display: none; }
}
@media (min-width: 481px) {
  /* On desktop / tablet: kebab is redundant with eyebrow Restart */
  body.practice-page .practice-breadcrumb-overflow { display: none; }
}

/* Compact restart button styling for the eyebrow placement */
body.practice-page .practice-eyebrow .btn-restart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
}
body.practice-page .practice-eyebrow .btn-restart:hover {
  color: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================
   §77 Phase C — Tap-any-word definitions
   ========================================================== */

/* Word span — barely-visible by default; tappable hit-area expanded
   via padding. Active state shows the popover. */
.reading-passage-card-body .word {
  position: relative;
  cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: border-color 140ms, background 140ms;
  padding: 0 1px;
  border-radius: 2px;
}
@media (hover: hover) {
  .reading-passage-card-body .word:hover {
    border-bottom-color: rgba(251, 191, 36, 0.55);
    background: rgba(251, 191, 36, 0.08);
  }
}
.reading-passage-card-body .word--active {
  background: rgba(251, 191, 36, 0.20);
  border-bottom-color: rgba(251, 191, 36, 0.85);
  color: #fde68a;
}

/* Popover — appears anchored to the tapped word, above by default,
   below if not enough space. */
.word-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  min-width: 220px;
  max-width: 320px;
  background: #0d2249;
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
  padding: 12px 14px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  text-align: left;
  cursor: default;
  animation: word-popover-in 140ms ease-out;
}
@keyframes word-popover-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/* Triangle pointer */
.word-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: rgba(251, 191, 36, 0.45);
}
.word-popover-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.word-popover-word {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-transform: lowercase;
}
.word-popover-speak {
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  flex: 0 0 32px;
}
.word-popover-speak svg {
  width: 18px;
  height: 18px;
}
.word-popover-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.word-popover-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
}
.word-popover-body {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.word-popover-loading {
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}
.word-popover-error {
  color: rgba(255, 255, 255, 0.55);
}
.word-popover-def {
  color: rgba(255, 255, 255, 0.95);
}

/* Phone — popovers can run wider since passage card is full-width */
@media (max-width: 480px) {
  .word-popover {
    min-width: 180px;
    max-width: 260px;
    padding: 10px 12px 12px;
  }
  .word-popover-word { font-size: 15px; }
  .word-popover-body { font-size: 13px; }
}

/* ==========================================================
   §78 — Landing page fix (Owners' Room: Apple/Google/MS/Tesla)

   Replaced the cramped chip row at #anon-grade-pills with a proper
   #grade-grid-anon card grid (rendered by renderGradeGrid()). Card
   styles already exist (.grade-card / .grade-grid); we just add a
   sane container + give the earn banner a clear CTA path.
   ========================================================== */

/* Anon grade grid container — same .grade-grid as the dashboard but
   centered with explicit max-width so cards don't span 1600px on
   wide monitors (kid scale is 200px tile → 1100px is comfortable). */
.grade-grid-anon {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 0;
}

/* Earn banner now becomes a flex row so the CTA sits aligned to the
   right of the body copy on desktop, wraps below on phone. */
.rewards-callout#earn-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.rewards-callout#earn-banner .earn-banner-body {
  flex: 1 1 360px;
  min-width: 0;
}
.earn-banner-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(180deg, #fde047 0%, #fbbf24 60%, #f59e0b 100%);
  color: #0a1d3f;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(251, 191, 36, 0.7);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px -2px rgba(251, 191, 36, 0.45);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
}
.earn-banner-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -2px rgba(251, 191, 36, 0.55);
  filter: brightness(1.04);
}
.earn-banner-cta:active {
  transform: translateY(0);
}
.earn-banner-cta:focus-visible {
  outline: 2px solid rgba(251, 191, 36, 0.95);
  outline-offset: 3px;
}

/* Phone — banner stacks vertically; CTA goes full-width below text */
@media (max-width: 640px) {
  .rewards-callout#earn-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .earn-banner-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 20px;
  }
}

/* ============================================================
   Global reduced-motion guard — defense-in-depth.
   Kills all CSS animations + transitions for users who've opted
   into reduced motion. Individual rules already do this in many
   places; this catches the long tail (47 keyframes, 21 explicit
   guards as of 2026-05-09 audit).
   Place at the very end so it cascades over everything.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   VOICE RECORDER — Tier 6 AE (May 10)

   Kid records themselves reading the passage aloud. Local Blob in
   memory only — never leaves the device. The slot mounts inside
   .reading-passage-card so it sits with the passage content.
   ============================================================ */
/* May 10 — voice slot now sits ABOVE the passage body so the kid
   doesn't have to scroll past every paragraph to find the record
   button on mobile. The previous positioning (below body, divider
   above) is preserved as a fallback selector for any consumers that
   still mount the slot at the bottom. */
.reading-passage-card > .voice-recorder-slot {
  margin: 12px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}
/* Legacy below-body position fallback. */
.voice-recorder-slot {
  margin-top: 14px;
  padding-top: 12px;
}
.voice-rec-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(13, 34, 73, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  color: #fde68a;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 44px;
}
.voice-rec-btn:hover,
.voice-rec-btn:focus-visible {
  background: rgba(13, 34, 73, 0.85);
  border-color: rgba(251, 191, 36, 0.55);
}
.voice-rec-icon { font-size: 1.1rem; }
.voice-rec-recording {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.32);
  border-radius: 999px;
}
.voice-rec-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  animation: voice-rec-pulse 1s ease-in-out infinite;
}
@keyframes voice-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.3); }
}
.voice-rec-time {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
  min-width: 38px;
  text-align: center;
}
.voice-rec-stop {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fecaca;
  padding: 6px 12px;
  min-height: 36px;
}
.voice-rec-recorded {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.voice-rec-audio {
  width: 100%;
  max-width: 360px;
  height: 36px;
}
.voice-rec-actions {
  display: flex;
  gap: 8px;
}
.voice-rec-redo {
  padding: 6px 14px;
  min-height: 36px;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
}
.voice-recorder-unavail {
  padding: 10px 14px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

/* §86 — Inline recording UI. Stop button + time live HERE, right
   next to the indicator, instead of a fixed-bottom bar. The slot
   sits at the top of the passage card so the kid never loses the
   Stop button when scrolling. */
.voice-rec-inline-recording {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 999px;
  font-size: 0.9rem;
  color: rgba(254, 202, 202, 0.92);
  width: fit-content;
  max-width: 100%;
}
.voice-rec-inline-recording .voice-rec-fixed-label {
  flex: 0 0 auto;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
}
.voice-rec-inline-recording .voice-rec-time {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fde68a;
  min-width: 40px;
  text-align: right;
}
.voice-rec-stop-inline {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  border: 1px solid rgba(255, 200, 200, 0.18);
  color: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  min-height: 32px;
  font-size: 0.85rem;
  margin-left: 4px;
}
.voice-rec-stop-inline:hover { filter: brightness(1.08); }

/* Fixed-bottom recording bar — appended to <body> when recording
   starts so the timer + Stop button are reachable from any scroll
   position on the page. The kid reads the full passage uninterrupted
   while this floats at the bottom of the viewport. */
.voice-rec-fixed {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 16px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #0d2249, #0a1a3a);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: voice-rec-fixed-in 220ms ease-out;
}
@keyframes voice-rec-fixed-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.voice-rec-fixed-label {
  flex: 1;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.95rem;
}
.voice-rec-fixed .voice-rec-time {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 1.05rem;
  color: #fde68a;
  min-width: 44px;
  text-align: right;
}
.voice-rec-fixed .voice-rec-stop {
  background: linear-gradient(180deg, #ef4444, #b91c1c);
  border: 1px solid rgba(255, 200, 200, 0.18);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
  font-size: 0.95rem;
}
.voice-rec-fixed .voice-rec-stop:hover { filter: brightness(1.08); }

/* Reserve clearance at the bottom of the page so the fixed bar doesn't
   cover the last bit of content. The class is toggled on <body> by the
   recorder; removed when recording stops. */
body.voice-recording-active { padding-bottom: 84px; }
@media (max-width: 480px) {
  .voice-rec-fixed { left: 8px; right: 8px; padding: 12px 14px; }
  .voice-rec-fixed-label { font-size: 0.9rem; }
}

/* ============================================================
   PLACEMENT TEST — Tier 6 AB (May 10)
   ============================================================ */
body.placement-page {
  background: var(--bg, #060d1f);
  color: var(--text, #fff);
}
.placement-card { background: rgba(13, 34, 73, 0.45); }
.choices-vertical {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.choices-vertical .choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  cursor: pointer;
  min-height: 48px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.choices-vertical .choice:hover {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(255, 255, 255, 0.05);
}
.choices-vertical .choice input[type="radio"]:checked + .choice-symbol {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.6);
  color: #fde68a;
}
.choices-vertical .choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choices-vertical .choice .choice-symbol {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}
.placement-grades {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.placement-grade-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: 12px;
}
.placement-grade-label {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
}
.placement-grade-bar {
  height: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.placement-grade-fill {
  height: 100%;
  transition: width 0.35s ease;
  border-radius: 999px;
}
.placement-grade-score {
  text-align: right;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'JetBrains Mono', monospace;
}
@media (max-width: 480px) {
  .placement-grade-row {
    grid-template-columns: 80px 1fr 50px;
    gap: 8px;
  }
  .placement-grade-label { font-size: 0.85rem; }
}

/* ============================================================
   FRIEND LEAGUE — v4 committee redesign (May 11)
   ============================================================ */
:root {
  --r-pill:   4px;
  --r-button: 12px;
  --r-card:   20px;
  --r-banner: 24px;
}
body.league-page { background: #060d1f; color: #fff; }
body.league-page .container { max-width: 760px; }
.league-shell { margin: 12px auto 80px; max-width: 720px; }

.league-identity-row { display: flex; justify-content: center; margin: 6px 0 10px; }
.league-tier-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  background: linear-gradient(135deg, #5c3a1e 0%, #2c1d0f 100%);
  border: 1px solid rgba(217, 119, 6, 0.55);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(120, 53, 15, 0.35), 0 0 0 1px rgba(255, 200, 130, 0.1) inset;
}
.league-tier-emoji { font-size: 1.25rem; line-height: 1; }
.league-tier-label { color: #fde68a; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; }

.league-eyebrow-row { display: flex; justify-content: center; margin: 0 0 22px; }
.league-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.24);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fde68a;
}
.league-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18), 0 0 10px rgba(251, 191, 36, 0.45);
  animation: hero-live-pulse 2.4s ease-in-out infinite;
}
.league-eyebrow-text { font-weight: 700; }
.league-eyebrow-sep { color: rgba(253, 230, 138, 0.45); }
.league-eyebrow-sub { color: rgba(253, 230, 138, 0.72); text-transform: none; letter-spacing: 0; font-weight: 500; }
.league-eyebrow-countdown { font-family: 'JetBrains Mono', monospace; color: #fff; font-weight: 700; text-transform: none; }
.league-eyebrow:has(.league-eyebrow-countdown--urgent) {
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fecaca;
}
.league-eyebrow:has(.league-eyebrow-countdown--urgent) .league-eyebrow-dot { background: #ef4444; }

.league-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px auto 0;
  max-width: 720px;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.14), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(96, 165, 250, 0.4);
  border-radius: var(--r-banner);
  font-size: 0.9rem;
}
.league-banner-icon { font-size: 1.2rem; }
.league-banner-text { flex: 1; color: #dbeafe; }
.league-banner-btn { padding: 7px 16px; background: #3b82f6; border: 0; border-radius: var(--r-button); color: #fff; font-weight: 700; font-size: 0.85rem; cursor: pointer; }
.league-banner-btn:hover { background: #2563eb; }

.league-av { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; }
.league-av-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.league-av--emoji { background: rgba(255, 255, 255, 0.06); }
.league-av--sm { width: 36px; height: 36px; font-size: 1rem; }
.league-av--md { width: 44px; height: 44px; font-size: 1.1rem; }
.league-av--lg { width: 68px; height: 68px; font-size: 1.8rem; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35); }

.league-podium { margin: 8px auto 0; }
.league-podium-row { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 10px; align-items: end; padding: 0 4px; }
.podium-card {
  position: relative;
  padding: 18px 12px 16px;
  background: #11264e;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: podium-rise 380ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.podium-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); }
.podium-card[data-slot="1"] {
  min-height: 360px;
  background: linear-gradient(180deg, #4a3415 0%, #1f2547 75%);
  border: 2px solid rgba(251, 191, 36, 0.7);
  box-shadow: 0 14px 38px rgba(251, 191, 36, 0.3), 0 0 0 1px rgba(251, 191, 36, 0.24) inset;
  animation-delay: 60ms;
}
.podium-card[data-slot="2"] { min-height: 310px; border-color: rgba(203, 213, 225, 0.5); }
.podium-card[data-slot="3"] { min-height: 270px; border-color: rgba(217, 119, 6, 0.55); animation-delay: 120ms; }
.podium-card.is-self {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.65), 0 14px 38px rgba(251, 191, 36, 0.32), 0 0 0 1px rgba(251, 191, 36, 0.2) inset;
}
.podium-card--empty { background: rgba(255, 255, 255, 0.025); border-style: dashed; border-color: rgba(255, 255, 255, 0.24); opacity: 0.75; justify-content: center; }
.podium-empty-plus { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.55); font-size: 1.5rem; font-weight: 300; line-height: 1; }
.podium-empty-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.58); }
.podium-medal { font-size: 1.8rem; line-height: 1; }
.podium-card[data-slot="1"] .podium-medal { font-size: 2.2rem; }
.podium-rank-text { font-size: 0.86rem; font-weight: 700; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.04em; text-transform: uppercase; }
.podium-name { font-weight: 700; font-size: 0.96rem; color: rgba(255, 255, 255, 0.96); display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.podium-grade-line { display: inline-block; padding: 3px 12px; background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(59, 130, 246, 0.12)); border: 1px solid rgba(96, 165, 250, 0.45); color: #bfdbfe; border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 700; }
.podium-card[data-slot="1"] .podium-grade-line { background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(245, 158, 11, 0.12)); border-color: rgba(251, 191, 36, 0.5); color: #fde68a; }
.podium-stat-num { display: block; font-size: 2rem; font-weight: 800; color: #fbbf24; letter-spacing: -0.025em; line-height: 1; }
.podium-card[data-slot="1"] .podium-stat-num { font-size: 2.4rem; }
.podium-stat-label { display: block; margin-top: 3px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255, 255, 255, 0.58); font-weight: 600; }
.podium-foot { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); }
.podium-level { padding: 2px 10px; background: rgba(251, 191, 36, 0.12); color: #fde68a; border-radius: var(--r-pill); font-weight: 700; cursor: help; }
.podium-streak { display: inline-flex; align-items: center; gap: 4px; color: #fcd34d; font-weight: 600; }
.podium-streak.is-hot { animation: streak-pulse 1.4s ease-in-out infinite; }
.league-you-chip { display: inline-block; padding: 2px 8px; font-size: 0.66rem; font-weight: 700; background: #fbbf24; color: #1a0f00; border-radius: var(--r-pill); text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0; }

.podium-card--invite { background: linear-gradient(180deg, #182d54 0%, #0f1f3d 100%); border-style: dashed; border-color: rgba(251, 191, 36, 0.4); cursor: default; justify-content: space-between; }
.podium-invite-plus { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(251, 191, 36, 0.15); border: 1px solid rgba(251, 191, 36, 0.45); color: #fde68a; font-size: 1.6rem; line-height: 1; }
.podium-invite-title { font-weight: 700; font-size: 0.94rem; color: rgba(255, 255, 255, 0.95); }
.podium-invite-sub { margin: 0; font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); }
.podium-invite-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.podium-invite-btn { padding: 8px 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--r-button); color: rgba(255, 255, 255, 0.96); font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.podium-invite-btn:hover { background: rgba(255, 255, 255, 0.12); }
.podium-invite-btn--primary { background: linear-gradient(180deg, #fde68a, #fbbf24); border-color: rgba(251, 191, 36, 0.7); color: #1a0f00; }
.podium-invite-btn--primary:hover { filter: brightness(1.06); }

@keyframes podium-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes streak-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.league-you-card { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 14px; margin: 20px 0 14px; padding: 14px 16px; background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%); border: 2px solid #fbbf24; border-radius: var(--r-card); box-shadow: 0 8px 26px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(251, 191, 36, 0.22) inset; }
.you-card-rank-block { text-align: center; padding-right: 6px; border-right: 1px solid rgba(255, 255, 255, 0.14); }
.you-card-rank { font-size: 1.6rem; font-weight: 800; color: #fde68a; line-height: 1; }
.you-card-rank-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(253, 230, 138, 0.78); margin-top: 2px; }
.you-card-body { min-width: 0; }
.you-card-name { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.95rem; color: rgba(255, 255, 255, 0.96); flex-wrap: wrap; }
.you-card-grade { padding: 2px 9px; background: rgba(147, 197, 253, 0.22); border: 1px solid rgba(147, 197, 253, 0.48); color: #dbeafe; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; }
.you-card-copy { font-size: 0.88rem; color: rgba(219, 234, 254, 0.94); margin-top: 4px; }
.you-card-copy strong { color: #fff; font-weight: 800; }
.you-card-target { color: #fde68a; font-weight: 700; }
.you-card-meta { margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.you-card-level { padding: 3px 10px; background: rgba(251, 191, 36, 0.18); color: #fde68a; border-radius: var(--r-pill); font-size: 0.74rem; font-weight: 700; cursor: help; }
.you-card-streak { font-size: 0.78rem; color: #fcd34d; font-weight: 600; }
.you-card-streak.is-hot { animation: streak-pulse 1.4s ease-in-out infinite; }
.you-card-streak--cold { color: rgba(255, 255, 255, 0.62); font-weight: 500; }
.you-card-cta { flex-shrink: 0; padding: 9px 18px; background: linear-gradient(180deg, #fde68a, #fbbf24); border-radius: 999px; color: #1a0f00; font-weight: 700; font-size: 0.88rem; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 10px rgba(251, 191, 36, 0.32); }
.you-card-cta:hover { filter: brightness(1.06); text-decoration: none; }

.league-list { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; }
.league-row { display: grid; grid-template-columns: 52px 44px 1fr 44px; align-items: center; gap: 12px; padding: 12px 14px; background: #11264e; border: 1px solid rgba(255, 255, 255, 0.14); border-left-width: 3px; border-radius: var(--r-card); transition: border-color 0.15s ease, transform 0.15s ease; }
.league-row:hover { transform: translateY(-1px); }
.league-row.is-self { background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%); border-color: rgba(251, 191, 36, 0.65); border-left-color: #fbbf24; box-shadow: 0 4px 18px rgba(251, 191, 36, 0.18); }
.league-row.zone-up   { border-left-color: rgba(52, 211, 153, 0.85); }
.league-row.zone-down { border-left-color: rgba(251, 113, 133, 0.7); }
.league-row-rank { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.league-rank-num { font-size: 1.05rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); }
.league-mv { font-size: 0.7rem; font-weight: 700; font-family: 'JetBrains Mono', monospace; padding: 1px 5px; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.58); }
.league-mv--up   { background: rgba(52, 211, 153, 0.22); color: #6ee7b7; }
.league-mv--down { background: rgba(251, 113, 133, 0.22); color: #fda4af; }
.league-mv--new  { background: rgba(96, 165, 250, 0.22); color: #93c5fd; font-size: 0.62rem; }
.league-mv--same { color: rgba(255, 255, 255, 0.45); }
.league-row-identity { min-width: 0; }
.league-row-name { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; flex-wrap: wrap; }
.league-name-text { font-weight: 600; color: rgba(255, 255, 255, 0.96); overflow: hidden; text-overflow: ellipsis; }
.league-row-grade { display: inline-block; padding: 2px 10px; background: linear-gradient(135deg, rgba(96, 165, 250, 0.22), rgba(59, 130, 246, 0.08)); border: 1px solid rgba(96, 165, 250, 0.42); color: #bfdbfe; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.league-row.is-self .league-row-grade { background: rgba(251, 191, 36, 0.2); border-color: rgba(251, 191, 36, 0.5); color: #fde68a; }
.league-row-meta { margin-top: 3px; font-size: 0.76rem; color: rgba(255, 255, 255, 0.62); display: flex; gap: 4px; flex-wrap: wrap; }
.league-row-week { color: rgba(167, 243, 208, 0.95); font-weight: 600; }
.league-row-streak { color: rgba(252, 211, 77, 0.95); }
.league-row-streak.is-hot { animation: streak-pulse 1.4s ease-in-out infinite; }
.league-row-level { font-size: 0.78rem; font-weight: 700; color: #fde68a; text-align: center; padding: 5px 8px; background: rgba(251, 191, 36, 0.12); border-radius: var(--r-pill); cursor: help; }

.league-manage-row { text-align: center; margin: 20px 0 0; }
.league-manage-link { background: transparent; border: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 6px 12px; transition: color 0.15s ease; }
.league-manage-link:hover { color: rgba(255, 255, 255, 0.94); }
.league-foot { margin: 16px 0 0; text-align: center; font-size: 0.78rem; color: rgba(255, 255, 255, 0.52); }

.league-empty { max-width: 520px; margin: 24px auto; padding: 36px 26px; background: #11264e; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-card); text-align: center; }
.league-empty-emoji { font-size: 3rem; margin-bottom: 10px; }
.league-empty-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; }
.league-empty-sub { margin: 0 0 18px; color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; line-height: 1.55; }

/* PENDING-REQUEST CARDS in empty state (Duolingo + Clash Royale
   pattern): big interactive cards at the top so the kid sees
   immediately who's waiting on them. Incoming = blue glow (urgent,
   actionable). Outgoing = dashed amber (waiting). */
.empty-pending {
  max-width: 580px;
  margin: 24px auto 12px;
  padding: 14px 18px 16px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.16), rgba(59, 130, 246, 0.06));
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: var(--r-card);
  box-shadow: 0 6px 22px rgba(59, 130, 246, 0.18);
}
.empty-pending--out {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10), rgba(245, 158, 11, 0.04));
  border-color: rgba(251, 191, 36, 0.36);
  border-style: dashed;
  box-shadow: none;
}
.empty-pending-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #93c5fd;
}
.empty-pending-eyebrow--out { color: #fde68a; }
.empty-pending-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22), 0 0 10px rgba(96, 165, 250, 0.5);
  animation: hero-live-pulse 2.4s ease-in-out infinite;
}
.empty-pending-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-button);
  margin-bottom: 8px;
}
.empty-pending-row:last-child { margin-bottom: 0; }
.empty-pending-row--out { background: rgba(0, 0, 0, 0.15); border-style: dashed; }
.empty-pending-identity { min-width: 0; }
.empty-pending-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.96);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.empty-pending-handle {
  margin-top: 3px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
}
.empty-pending-actions { display: flex; gap: 8px; }
.empty-pending-actions .btn { padding: 8px 16px; min-height: 38px; font-size: 0.88rem; font-weight: 700; }
.empty-req-cancel { padding: 8px 14px; min-height: 38px; font-size: 0.86rem; }

@media (max-width: 600px) {
  .empty-pending-row { grid-template-columns: auto 1fr; }
  .empty-pending-actions {
    grid-column: 1 / -1;
    margin-top: 6px;
  }
  .empty-pending-actions .btn { flex: 1; }
  .empty-req-cancel { width: 100%; }
}

.league-sheet { position: fixed; inset: 0; z-index: 100; }
.league-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); animation: sheet-fade 200ms ease-out; }
.league-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 600px; margin: 0 auto; background: linear-gradient(180deg, #0d2249, #061230); border: 1px solid rgba(251, 191, 36, 0.22); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 16px 22px 28px; box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.55); max-height: 86vh; overflow-y: auto; animation: sheet-rise 260ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.league-sheet-grab { width: 40px; height: 4px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; margin: 0 auto 14px; }
.league-sheet-close { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; color: rgba(255, 255, 255, 0.78); cursor: pointer; font-size: 0.9rem; }
.league-sheet-close:hover { background: rgba(255, 255, 255, 0.14); }
.league-sheet-tabs { display: flex; gap: 4px; padding: 4px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--r-button); margin-bottom: 18px; }
.league-sheet-tab { flex: 1; padding: 9px 12px; background: transparent; border: 0; border-radius: 7px; color: rgba(255, 255, 255, 0.64); font-weight: 700; font-size: 0.87rem; cursor: pointer; position: relative; }
.league-sheet-tab--active { background: rgba(251, 191, 36, 0.2); color: #fde68a; }
.league-sheet-tab-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px; background: #ef4444; color: #fff; border-radius: 50%; font-size: 0.65rem; font-weight: 700; }
@keyframes sheet-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-rise { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
body.league-sheet-open { overflow: hidden; }

.league-add-form { padding: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-card); }
.league-add-label { display: block; margin-bottom: 10px; font-size: 0.88rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.league-add-row { display: flex; gap: 8px; }
.league-add-input { flex: 1; padding: 12px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-button); color: #fff; font-size: 1rem; font-family: 'JetBrains Mono', monospace; }
.league-add-input:focus { outline: none; border-color: rgba(251, 191, 36, 0.5); background: rgba(255, 255, 255, 0.08); }
.league-add-btn { min-height: 44px; flex-shrink: 0; }
.league-add-hint { margin: 8px 0 0; font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); }
.league-add-status { margin: 12px 0 0; font-size: 0.86rem; min-height: 1.2em; }
.league-add-status--ok { color: #a7f3d0; }
.league-add-status--err { color: #fca5a5; }
.league-share { margin-top: 16px; padding: 16px 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-card); }
.league-share-label { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); margin-bottom: 10px; }
.league-share-row { display: flex; align-items: center; gap: 10px; }
.league-share-code { flex: 1; padding: 10px 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-button); font-family: 'JetBrains Mono', monospace; font-size: 0.92rem; color: #fde68a; user-select: all; }
.league-share-copy { flex-shrink: 0; min-height: 40px; padding: 8px 16px; }
.league-section { margin-bottom: 18px; }
.league-section-title { margin: 0 0 8px; font-size: 0.9rem; font-weight: 700; color: rgba(255, 255, 255, 0.92); }
.league-section-count { display: inline-flex; margin-left: 6px; padding: 0 7px; height: 18px; align-items: center; background: rgba(255, 255, 255, 0.08); border-radius: 999px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.74); font-weight: 700; }
.league-section-empty { margin: 0; padding: 10px 14px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.62); font-style: italic; }
.league-req-row, .league-friend-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-button); margin-bottom: 6px; }
.league-req-row--out { background: rgba(255, 255, 255, 0.02); border-style: dashed; }
.league-req-actions { display: flex; gap: 6px; }
.league-req-actions .btn { padding: 6px 12px; min-height: 32px; font-size: 0.82rem; }
.league-req-cancel { padding: 6px 12px; min-height: 32px; font-size: 0.82rem; }
.league-identity { min-width: 0; }
.league-name { font-weight: 600; color: rgba(255, 255, 255, 0.94); font-size: 0.92rem; }
.league-meta-thin { margin-top: 2px; font-size: 0.76rem; color: rgba(255, 255, 255, 0.58); font-family: 'JetBrains Mono', monospace; }
.league-friend-remove { background: transparent; border: 1px solid transparent; color: rgba(255, 255, 255, 0.55); font-size: 0.78rem; padding: 6px 10px; cursor: pointer; border-radius: var(--r-pill); }
.league-friend-remove:hover { color: #fca5a5; background: rgba(239, 68, 68, 0.08); }
.league-online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; margin-left: 4px; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25); }

.league-toast { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 110; padding: 12px 20px; background: #0d2249; border: 1px solid rgba(251, 191, 36, 0.45); border-radius: 999px; color: #fde68a; font-size: 0.92rem; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); animation: toast-rise 200ms ease-out; }
@keyframes toast-rise { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* MOBILE — <600px: cards stack with 1st place at top */
@media (max-width: 600px) {
  .league-tier-emoji { font-size: 1.1rem; }
  .league-tier-label { font-size: 0.7rem; }
  .league-eyebrow { font-size: 0.7rem; padding: 6px 12px; gap: 5px; }
  .league-podium-row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding: 0 4px; }
  .league-podium-row .podium-card { min-height: 0; padding: 16px 14px; }
  .league-podium-row .podium-card[data-slot="1"] { order: -1; min-height: 0; padding: 20px 14px; }
  .league-podium-row .podium-card[data-slot="2"] { order: 0; }
  .league-podium-row .podium-card[data-slot="3"] { order: 1; }
  .podium-stat-num { font-size: 1.7rem; }
  .podium-card[data-slot="1"] .podium-stat-num { font-size: 1.9rem; }
  .podium-card .league-av--lg { width: 54px; height: 54px; font-size: 1.45rem; }
  .podium-card[data-slot="1"] .league-av--lg { width: 60px; height: 60px; }
  .podium-invite-actions { flex-direction: row; }
  .league-row { grid-template-columns: 44px 36px 1fr 38px; gap: 8px; padding: 10px 10px; }
  .league-rank-num { font-size: 0.95rem; }
  .league-row-meta { font-size: 0.72rem; }
  .league-row-level { font-size: 0.72rem; padding: 4px 6px; }
  .league-you-card { grid-template-columns: auto 1fr; grid-template-areas: "rank rank" "av body" "av cta"; gap: 10px; }
  .you-card-rank-block { grid-area: rank; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 0 0 10px; text-align: left; }
  .league-you-card .league-av--md { grid-area: av; }
  .you-card-body { grid-area: body; }
  .you-card-cta { grid-area: cta; align-self: start; }
  .league-sheet-panel { padding: 14px 16px 28px; }
}


/* ============================================================
   GAMES — launcher + Word Connect (May 11)
   First multiplayer game. Async race: same-grade friends get the
   same puzzle, different grades get age-appropriate puzzles.
   ============================================================ */

/* ----- LAUNCHER ----- */
body.games-page { background: #060d1f; color: #fff; }
body.games-page .container { max-width: 880px; }
.games-hero { max-width: 700px; margin: 18px auto 0; }
.games-hero h1 { margin: 0 0 6px; font-size: 1.8rem; font-weight: 800; }
.games-sub { margin: 0 0 22px; color: rgba(255, 255, 255, 0.65); font-size: 0.95rem; }
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin: 0 0 60px;
}
.game-card {
  display: grid;
  grid-template-rows: 140px auto;
  background: #11264e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.game-card:hover {
  transform: translateY(-3px);
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  background: #142c5a;
  text-decoration: none;
}
/* Defeat global a:hover { text-decoration: underline } on the heading +
   description inside the card link. The card itself lifts subtly; text
   stays unadorned. */
.game-card:hover .game-card-name,
.game-card:hover .game-card-desc { text-decoration: none; }
.game-card-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #4a3415 0%, #1f2547 70%);
  overflow: hidden;
}
.game-card-emoji { font-size: 4.4rem; line-height: 1; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45)); }
/* Premium-polish (May 12): category eyebrow whispers — plain uppercase
   micro-text, no pill background, no border. The 3D icon is the visual
   anchor; the eyebrow announces category quietly. */
.game-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 0;
  background: transparent;
  color: rgba(253, 230, 138, 0.6); /* amber-300 at ~60% */
  border: none;
  border-radius: 0;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.game-card-body { padding: 16px 18px 18px; }
.game-card-name { margin: 0 0 6px; font-size: 1.1rem; font-weight: 700; }
.game-card-desc { margin: 0 0 12px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.7); line-height: 1.5; }
.game-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
/* Premium-polish (May 12): softer pill — translucent surface, white/70
   text, medium weight (not bold). Less stocky than the previous
   bright-blue treatment. */
.game-card-meta-pill {
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
}
.game-card--soon { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.game-card--soon .game-card-tag { background: transparent; color: rgba(255, 255, 255, 0.4); border-color: transparent; }

/* ----- WORD CONNECT GAME ----- */
body.game-page {
  background: #060d1f;
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* allow vertical scroll if content overflows on tight viewports;
     touch-action: none on the wheel prevents page-scroll during drag */
  overflow-x: hidden;
}
.game-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(13, 34, 73, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}
.game-back {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
}
.game-back:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
.game-header-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fde68a;
  text-transform: uppercase;
}
.game-header-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2), 0 0 8px rgba(251, 191, 36, 0.5);
}
.game-header-stat { font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.game-header-score { text-align: right; }
.game-header-score-num {
  font-size: 1.6rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1;
}
.game-header-score-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

/* §158 — Per-question reward preview chip. Renders next to the score
   in the game header. Tells the kid up-front what each correct action
   earns toward their wallet ¢. Same gold-tinted pill pattern Practice
   uses on its '+N¢ if correct' eyebrow chip. */
.game-header-reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.game-header-reward .game-header-reward-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 5px rgba(251, 191, 36, 0.7);
}

/* Incoming-invite banner — top of game page when a friend pinged */
.game-invite-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.22), rgba(245, 158, 11, 0.08));
  border-bottom: 1px solid rgba(251, 191, 36, 0.45);
  font-size: 0.92rem;
  color: #fde68a;
  animation: invite-pulse 2.5s ease-in-out infinite;
}
@keyframes invite-pulse {
  0%, 100% { background-position: 0% 50%; }
  50% { background: linear-gradient(90deg, rgba(251, 191, 36, 0.32), rgba(245, 158, 11, 0.14)); }
}
.game-invite-banner-icon { font-size: 1.2rem; }
.game-invite-banner-text { flex: 1; }
.game-invite-banner-text strong { color: #fff; font-weight: 800; }
.game-invite-banner-dismiss {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  width: 28px; height: 28px;
  font-size: 0.85rem;
  cursor: pointer;
}
.game-invite-banner-dismiss:hover { background: rgba(255, 255, 255, 0.18); }

.game-opponents {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: rgba(13, 34, 73, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.84rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.game-opponents::-webkit-scrollbar { display: none; }
.game-opponents-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  flex-shrink: 0;
}
.game-opponents-list { display: flex; gap: 8px; flex-shrink: 0; }
.game-opponent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 0.82rem;
}
.game-opp-name { font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.game-opp-score { font-weight: 700; color: #fde68a; font-family: 'JetBrains Mono', monospace; }
.game-opp-score-label { color: rgba(255, 255, 255, 0.45); font-weight: 500; margin-left: 2px; font-size: 0.7em; }
.game-opp-empty {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  padding: 4px 0;
}
.game-challenge-btn {
  margin-left: auto;
  padding: 6px 14px;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  border: 1px solid rgba(251, 191, 36, 0.7);
  color: #1a0f00;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(251, 191, 36, 0.32);
}
.game-challenge-btn:hover { filter: brightness(1.08); }

/* Invite bottom sheet — friend picker */
.game-invite-sheet { position: fixed; inset: 0; z-index: 120; }
.game-invite-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); animation: sheet-fade 200ms ease-out; }
.game-invite-sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, #0d2249, #061230);
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  padding: 16px 22px 28px;
  box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.55);
  max-height: 86vh;
  overflow-y: auto;
  animation: sheet-rise 260ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.game-invite-sheet-grab { width: 40px; height: 4px; background: rgba(255, 255, 255, 0.18); border-radius: 999px; margin: 0 auto 14px; }
.game-invite-sheet-close {
  position: absolute; top: 12px; right: 16px;
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  font-size: 0.9rem;
}
.game-invite-sheet-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 800; color: #fde68a; }
.game-invite-sheet-sub { margin: 0 0 18px; font-size: 0.88rem; color: rgba(255, 255, 255, 0.68); }
.game-invite-friends { display: flex; flex-direction: column; gap: 8px; }
.game-invite-friend {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-button);
}
.game-invite-friend-av {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: #1a0f00;
  font-weight: 800;
  font-size: 1rem;
}
.game-invite-friend-name { font-weight: 600; color: rgba(255, 255, 255, 0.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-invite-ping-btn {
  padding: 8px 16px;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  border: 1px solid rgba(251, 191, 36, 0.7);
  color: #1a0f00;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  min-height: 36px;
}
.game-invite-ping-btn:hover:not(:disabled) { filter: brightness(1.08); }
.game-invite-ping-btn:disabled { opacity: 0.7; cursor: default; }
.game-invite-ping-btn.is-sent { background: rgba(52, 211, 153, 0.25); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.5); }
.game-invite-empty {
  text-align: center;
  padding: 24px 16px;
  color: rgba(255, 255, 255, 0.72);
}
.game-invite-empty-emoji { font-size: 2.4rem; margin-bottom: 8px; display: block; }
.game-invite-empty p { margin: 0 0 14px; font-size: 0.92rem; }

.game-main {
  display: flex;
  flex-direction: column;
  padding: 8px 16px 12px;
  max-width: 520px;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
}
.game-status { padding: 30px; text-align: center; color: rgba(255, 255, 255, 0.65); }

/* Compact progress display — replaces the 24-blank placeholder grid
   that overflowed the viewport. Shows progress bar + chip count +
   only the words actually FOUND. The wheel always has room. */
.game-words {
  flex-shrink: 0;
  margin-bottom: 10px;
}
.game-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.game-progress-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.game-progress-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fbbf24;
  font-family: 'Inter', sans-serif;
  line-height: 1;
}
.game-progress-sep { color: rgba(255, 255, 255, 0.4); font-weight: 600; }
.game-progress-total { font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); }
.game-progress-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
  margin-left: 4px;
}
.game-progress-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.game-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fde68a, #fbbf24);
  transition: width 0.4s ease;
  border-radius: 999px;
}

.game-words-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 96px;  /* cap so chips don't push the wheel off-screen */
  overflow-y: auto;
  scrollbar-width: none;
  padding: 2px 0;
}
.game-words-chips::-webkit-scrollbar { display: none; }
.game-words-empty {
  width: 100%;
  text-align: center;
  padding: 14px 12px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.1);
  border-radius: var(--r-button);
}

.game-word {
  padding: 6px 12px;
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.28), rgba(16, 185, 129, 0.14));
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #d1fae5;
  border-radius: var(--r-button);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  animation: word-found 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game-word--prize {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.4), rgba(245, 158, 11, 0.2));
  border-color: rgba(251, 191, 36, 0.7);
  color: #fde68a;
  font-size: 0.94rem;
  padding: 7px 14px;
}
@keyframes word-found { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } }

.game-spell-row {
  text-align: center;
  min-height: 44px;
  margin: 6px 0 10px;
  flex-shrink: 0;
}
.game-spell-preview {
  display: inline-block;
  min-width: 100px;
  min-height: 40px;
  padding: 7px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.18s ease;
}
.game-spell-preview.is-active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.22), rgba(245, 158, 11, 0.1));
  border-color: rgba(251, 191, 36, 0.7);
  border-style: solid;
  color: #fde68a;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.3);
}

.game-wheel-wrap {
  position: relative;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.game-wheel {
  position: relative;
  width: 260px;
  height: 260px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.game-wheel-canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 1;
}
.game-letter {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fef3c7, #fbbf24);
  border: 3px solid rgba(217, 119, 6, 0.6);
  color: #1a0f00;
  font-size: 1.6rem;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(251, 191, 36, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.3) inset;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.game-letter.is-selected {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.55), 0 6px 20px rgba(251, 191, 36, 0.5);
  background: linear-gradient(180deg, #fde68a, #f59e0b);
}
.game-letter.is-wrong {
  background: linear-gradient(180deg, #fecaca, #ef4444) !important;
  border-color: rgba(127, 29, 29, 0.7) !important;
  color: #450a0a !important;
  animation: wrong-shake 0.35s ease;
}
@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.game-shuffle {
  margin: 10px auto 18px;
  padding: 8px 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.game-shuffle:hover { background: rgba(255, 255, 255, 0.1); }

/* ----- COMPLETE SCREEN ----- */
.game-complete {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 13, 31, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: sheet-fade 250ms ease-out;
}
.game-complete-card {
  max-width: 480px;
  width: 100%;
  padding: 32px 26px 24px;
  background: linear-gradient(180deg, #1f2547 0%, #0d1530 100%);
  border: 2px solid rgba(251, 191, 36, 0.5);
  border-radius: var(--r-card);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(251, 191, 36, 0.18) inset;
  animation: podium-rise 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game-complete-emoji { font-size: 3.4rem; margin-bottom: 6px; }
.game-complete-title { margin: 0 0 22px; font-size: 1.5rem; font-weight: 800; color: #fde68a; }
.game-complete-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.game-complete-stat {
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-button);
}
.game-complete-stat-num { font-size: 1.8rem; font-weight: 800; color: #fbbf24; line-height: 1; }
.game-complete-stat-label { font-size: 0.66rem; color: rgba(255, 255, 255, 0.55); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.game-complete-friends { margin-bottom: 22px; }
.game-complete-cmp { text-align: left; }
.game-complete-cmp-line { padding: 8px 12px; margin-bottom: 6px; border-radius: var(--r-button); font-size: 0.88rem; }
.game-complete-cmp-line--win { background: rgba(52, 211, 153, 0.15); border: 1px solid rgba(52, 211, 153, 0.4); color: #a7f3d0; font-weight: 600; }
.game-complete-cmp-line--lost { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); font-size: 0.84rem; }
.game-complete-empty { padding: 12px; font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); font-style: italic; }
.game-complete-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.game-complete-actions .btn { min-width: 140px; }

.game-toast {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  padding: 12px 24px;
  background: #fbbf24;
  color: #1a0f00;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 800;
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.5);
  animation: toast-rise 200ms ease-out;
  pointer-events: none;
}

/* Floating "+N pts" that drifts up from the spell-preview */
.game-float-pts {
  position: fixed;
  z-index: 109;
  transform: translate(-50%, -100%);
  font-size: 1.8rem;
  font-weight: 800;
  color: #34d399;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 0 16px rgba(52, 211, 153, 0.55);
  pointer-events: none;
  animation: float-pts 1300ms ease-out forwards;
  font-family: 'Inter', sans-serif;
}
.game-float-pts--prize {
  color: #fbbf24;
  font-size: 2.4rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 22px rgba(251, 191, 36, 0.7);
}
@keyframes float-pts {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  18%  { opacity: 1; transform: translate(-50%, -10px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -90px) scale(1); }
}

@media (max-width: 480px) {
  .game-header { padding: 8px 12px; }
  .game-header-eyebrow { font-size: 0.62rem; }
  .game-header-stat { font-size: 0.74rem; }
  .game-header-score-num { font-size: 1.3rem; }
  .game-main { padding: 6px 12px 12px; max-width: 100%; }
  .game-wheel { width: 240px; height: 240px; }
  .game-spell-preview { font-size: 1.15rem; min-height: 38px; padding: 6px 16px; }
  .game-word { font-size: 0.78rem; padding: 5px 10px; }
  .game-word--prize { font-size: 0.86rem; padding: 6px 12px; }
  .game-words-chips { max-height: 78px; }
  .game-progress-num { font-size: 1.2rem; }
  .game-shuffle { margin: 6px auto 12px; padding: 7px 16px; font-size: 0.82rem; }
  .game-complete-card { padding: 26px 18px 20px; }
  .game-complete-stat-num { font-size: 1.5rem; }
}
/* Desktop: bigger wheel for more comfortable drag */
@media (min-width: 768px) {
  .game-wheel { width: 320px; height: 320px; }
}


/* ============================================================
   PARENT DASHBOARD — Tier 6 AA (May 10)
   ============================================================ */
.parent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 960px;
}
.parent-card {
  padding: 20px 24px;
  background: rgba(13, 34, 73, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
}
.parent-card--hero { grid-column: 1 / -1; }
.parent-card--email { grid-column: 1 / -1; }
.parent-card-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}
.parent-card-subtitle {
  margin: -6px 0 14px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
}
.parent-stat-row {
  display: flex;
  gap: 28px;
  justify-content: space-around;
  flex-wrap: wrap;
}
.parent-stat {
  text-align: center;
  min-width: 110px;
}
.parent-stat-num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold, #fbbf24);
  line-height: 1;
}
.parent-stat-suffix {
  font-size: 1.2rem;
  color: rgba(251, 191, 36, 0.7);
  margin-left: 2px;
}
.parent-stat-label {
  margin-top: 4px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.parent-subjects {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.parent-subject-row {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  align-items: center;
  gap: 10px;
}
.parent-subject-name {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.85);
  text-transform: capitalize;
}
.parent-subject-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
.parent-subject-fill {
  height: 100%;
  background: var(--gold, #fbbf24);
  transition: width 0.3s ease;
  border-radius: 999px;
}
.parent-subject-score {
  text-align: right;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'JetBrains Mono', monospace;
}
.parent-topic-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.parent-topic-list li {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.parent-topic-list li.parent-empty {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}
.parent-topic-stat {
  color: rgba(255, 255, 255, 0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
}
.parent-email-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.parent-email-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
}
.parent-email-input {
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: #fff;
  font-size: 1rem;
  max-width: 360px;
}
.parent-email-input:focus {
  outline: none;
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(255, 255, 255, 0.07);
}
.parent-consent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}
.parent-email-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.parent-email-status {
  font-size: 0.85rem;
  color: var(--gold, #fbbf24);
}
.parent-email-note {
  margin: 4px 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}
.parent-card--rights { grid-column: 1 / -1; }
.parent-rights-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 8px;
}
.parent-rights-actions .btn { min-height: 40px; }
.parent-rights-status {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--gold, #fbbf24);
  min-height: 1.2em;
}
.parent-rights-status--error { color: #fca5a5; }
.btn.btn-danger {
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(220, 38, 38, 0.45);
  color: #fecaca;
}
.btn.btn-danger:hover:not(:disabled) {
  background: rgba(220, 38, 38, 0.28);
  border-color: rgba(220, 38, 38, 0.7);
}
.btn.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.parent-audit-panel {
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  overflow-x: auto;
}
.parent-audit-empty {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  margin: 0;
}
.parent-audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.parent-audit-table th,
.parent-audit-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
}
.parent-audit-table th {
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
.parent-audit-when {
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
}
.parent-audit-type {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
.parent-audit-meta {
  color: rgba(255, 255, 255, 0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.76rem;
  word-break: break-all;
  max-width: 320px;
}
.parent-audit-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  font-style: italic;
}
@media (max-width: 768px) {
  .parent-grid { grid-template-columns: 1fr; }
  .parent-rights-actions .btn { flex: 1 1 100%; }
  .parent-audit-meta { max-width: 200px; font-size: 0.7rem; }
}
@media (max-width: 480px) {
  .parent-stat-num { font-size: 1.8rem; }
  .parent-subject-row { grid-template-columns: 70px 1fr 80px; gap: 8px; }
  .parent-card { padding: 16px 18px; }
}

/* ============================================================
   FAMILY PROFILES — Tier 6 AC (May 10)
   ============================================================ */
.family-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.family-row {
  display: grid;
  grid-template-columns: 44px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.family-row.is-active {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.32);
}
.family-avatar {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.15);
  border-radius: 50%;
  font-size: 1.1rem;
  color: #fde68a;
  font-weight: 600;
}
.family-name {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.family-switch-btn {
  padding: 6px 14px;
  min-height: 36px;
  font-size: 0.85rem;
}
.family-remove-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.family-remove-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
@media (max-width: 480px) {
  .family-row { grid-template-columns: 36px 1fr auto auto; gap: 8px; padding: 8px 10px; }
}

/* ============================================================
   MEMORY MATCH (game #2)
   Flippable card grid. Reuses .game-header, .game-opponents,
   .game-invite-banner, .game-complete from word-connect.
   ============================================================ */

body.game-memory-match .game-main {
  padding-top: 12px;
}

/* Live stats strip */
.memory-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 auto 14px;
  padding: 10px 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  width: 100%;
  max-width: 560px;
}
.memory-stat { text-align: center; }
.memory-stat-num {
  font-size: 1.3rem;
  font-weight: 800;
  color: #fde68a;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.memory-stat-label {
  font-size: 0.62rem;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Card grid — columns set via CSS variable from JS. width:100% so
   the flex parent stretches it; minmax(0, 1fr) prevents the
   aspect-ratio cards from collapsing to min-content. */
.memory-grid {
  display: grid;
  grid-template-columns: repeat(var(--memory-cols, 4), minmax(0, 1fr));
  gap: 10px;
  padding: 0 4px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto 14px;
  align-self: center;
}

.memory-card {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1 / 1;
  perspective: 800px;
  -webkit-tap-highlight-color: transparent;
}
.memory-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  transform-style: preserve-3d;
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1);
}
.memory-card.is-flipped .memory-card-inner,
.memory-card.is-matched .memory-card-inner {
  transform: rotateY(180deg);
}
.memory-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-button);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  user-select: none;
  text-align: center;
  padding: 6px;
  word-break: break-word;
  line-height: 1.15;
}
.memory-card-back {
  background: linear-gradient(140deg, #1e3a8a 0%, #1e40af 50%, #1d4ed8 100%);
  border: 1px solid rgba(253, 224, 71, 0.22);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.memory-card-back-mark {
  font-size: 1.6rem;
  color: rgba(253, 224, 71, 0.55);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.memory-card-front {
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 60%, #f59e0b 100%);
  color: #1e293b;
  font-weight: 800;
  font-size: var(--memory-front-font, 1.5rem);
  transform: rotateY(180deg);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Matched state — dim slightly, add a soft glow */
.memory-card.is-matched {
  cursor: default;
  pointer-events: none;
}
.memory-card.is-matched .memory-card-front {
  background: linear-gradient(140deg, rgba(167, 243, 208, 0.85) 0%, rgba(52, 211, 153, 0.95) 100%);
  color: #064e3b;
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0.88;
}

/* Match pulse — fires for ~600ms after a successful pair */
.memory-card.is-match-pulse .memory-card-inner {
  animation: memory-match-pulse 600ms ease-out;
}
@keyframes memory-match-pulse {
  0%   { transform: rotateY(180deg) scale(1); }
  35%  { transform: rotateY(180deg) scale(1.08); }
  100% { transform: rotateY(180deg) scale(1); }
}

/* Restart button row */
.memory-actions {
  display: flex;
  justify-content: center;
  padding: 4px 14px 18px;
}

/* "How to play" instruction card — solid surface so body text stays
   high-contrast even when the body has the ambient gold gradient. */
.memory-howto {
  margin: 0 14px 14px;
  padding: 14px 16px 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(253, 224, 71, 0.38);
  border-radius: var(--r-card);
  color: #fff;
}
.memory-howto-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #fde68a;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.memory-howto-icon { font-size: 1.05rem; }
.memory-howto-head strong { flex: 1; }
.memory-howto-dismiss {
  appearance: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  width: 26px; height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.memory-howto-dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.memory-howto-list {
  margin: 0;
  padding-left: 22px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: #f1f5f9;
}
.memory-howto-list li { margin-bottom: 4px; }
.memory-howto-list li strong { color: #fde68a; font-weight: 700; }

/* Responsive sizing — keep cards comfortably tappable on phones */
@media (max-width: 768px) {
  .memory-grid { gap: 8px; padding: 0 12px; max-width: 480px; }
  .memory-card-back-mark { font-size: 1.35rem; }
}
@media (max-width: 480px) {
  .memory-stats { margin: 0 10px 10px; padding: 8px 6px; gap: 6px; }
  .memory-stat-num { font-size: 1.15rem; }
  .memory-stat-label { font-size: 0.58rem; }
  .memory-grid { gap: 6px; padding: 0 10px; }
  .memory-card-back-mark { font-size: 1.15rem; }
}

/* Tablet+ — widen and grow type a bit */
@media (min-width: 769px) {
  .memory-grid { max-width: 600px; gap: 12px; }
  .memory-card-front { font-size: calc(var(--memory-front-font, 1.5rem) * 1.15); }
}

/* ============================================================
   DESKTOP LAYOUT (≥1100px) — 3-column board with side rails.
   Left rail: theme title + live stats. Center: bigger board.
   Right rail: live leaderboard + Challenge button.
   Below 1100px the original single-column mobile-style layout
   stays in effect.
   ============================================================ */
@media (min-width: 1100px) {
  body.game-memory-match .game-main {
    display: grid;
    grid-template-columns: 240px minmax(0, 720px) 280px;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "title  board   panel"
      "howto  board   panel"
      "stats  board   panel"
      ".      board   panel"
      ".      actions panel";
    column-gap: 36px;
    row-gap: 18px;
    max-width: 1320px;
    padding: 28px 24px 32px;
    align-items: start;
  }

  /* Theme title block becomes a hero in the left rail */
  body.game-memory-match #gameStatus {
    grid-area: title;
    align-self: start;
    text-align: left;
    padding: 18px 18px 16px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fde68a;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(253, 224, 71, 0.4);
    border-radius: var(--r-card);
    line-height: 1.3;
    margin: 0;
  }

  /* How to play sits under the title in the left rail */
  body.game-memory-match .memory-howto {
    grid-area: howto;
    margin: 0;
  }

  /* Stats panel — 2×2 grid on the rail */
  body.game-memory-match .memory-stats {
    grid-area: stats;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 14px 12px;
  }
  body.game-memory-match .memory-stat-num { font-size: 1.6rem; }
  body.game-memory-match .memory-stat-label { font-size: 0.65rem; }

  /* Center board — cards capped so the whole 4-row board fits a
     standard 900px-tall viewport without scroll. 24-card boards
     switch to 6 cols × 4 rows; smaller grids use 4-5 cols. Each
     bucket gets a max-width that yields ~120-135px cards. */
  body.game-memory-match .memory-grid {
    grid-area: board;
    align-self: start;
    gap: 12px;
    padding: 0;
    margin: 0;
    max-width: 560px;
  }
  body.game-memory-match .memory-grid[data-card-count="12"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 480px;
  }
  body.game-memory-match .memory-grid[data-card-count="16"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 540px;
  }
  body.game-memory-match .memory-grid[data-card-count="20"] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    max-width: 660px;
  }
  body.game-memory-match .memory-grid[data-card-count="24"] {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 780px;
  }

  /* Cards grow to match the wider grid */
  body.game-memory-match .memory-card-front {
    font-size: calc(var(--memory-front-font, 1.5rem) * 1.4);
  }
  body.game-memory-match .memory-card-back-mark { font-size: 2.2rem; }

  /* Restart button row drops under the board, right-aligned */
  body.game-memory-match .memory-actions {
    grid-area: actions;
    padding: 4px 0 0;
    justify-content: flex-end;
  }

  /* Right-rail leaderboard — stacked rows, not horizontal pills */
  body.game-memory-match .game-opponents {
    grid-area: panel;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-card);
    margin: 0;
    overflow: visible;
    position: sticky;
    top: 28px;
  }
  body.game-memory-match .game-opponents-label {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: rgba(253, 224, 71, 0.85);
    padding: 0;
    margin: 0;
  }
  body.game-memory-match .game-opponents-list {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.game-memory-match .game-opponent {
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-button);
  }
  body.game-memory-match .game-opp-name { font-size: 0.92rem; font-weight: 600; }
  body.game-memory-match .game-opp-score { font-size: 1rem; }
  body.game-memory-match .game-opp-empty {
    padding: 14px 8px;
    text-align: center;
    font-size: 0.86rem;
  }
  body.game-memory-match .game-challenge-btn {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  /* Subtle ambient depth — radial gradient behind the board.
     Kept very low opacity so it doesn't fight the card surfaces
     for contrast. */
  body.game-memory-match {
    background:
      radial-gradient(ellipse at 70% 25%, rgba(253, 224, 71, 0.03) 0%, transparent 45%),
      radial-gradient(ellipse at 25% 85%, rgba(30, 58, 138, 0.1) 0%, transparent 55%),
      #060d1f;
    background-attachment: fixed;
  }
}

/* ============================================================
   ULTRA-WIDE (≥1500px) — push the board even wider so cards
   reach a comfortable 150-165px each.
   ============================================================ */
@media (min-width: 1500px) {
  body.game-memory-match .game-main {
    grid-template-columns: 280px minmax(0, 820px) 320px;
    column-gap: 48px;
    max-width: 1480px;
  }
  body.game-memory-match .memory-grid[data-card-count="24"] { max-width: 820px; }
  body.game-memory-match .memory-grid[data-card-count="20"] { max-width: 700px; }
  body.game-memory-match .memory-grid[data-card-count="16"] { max-width: 580px; }
  body.game-memory-match .memory-grid[data-card-count="12"] { max-width: 520px; }
  body.game-memory-match .memory-card-front {
    font-size: calc(var(--memory-front-font, 1.5rem) * 1.55);
  }
}

/* ============================================================
   MATH SPRINT (game #3)
   60-second timed math drill. Procedural problems per grade.
   Reuses .memory-howto + .memory-stats from Memory Match.
   ============================================================ */

body.game-math-sprint .game-main {
  padding-top: 12px;
}

/* Pre-start screen with big START button */
.ms-prestart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 16px 36px;
}
.ms-start-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  color: #1e293b;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 60%, #f59e0b 100%);
  border-radius: 999px;
  padding: 22px 64px;
  box-shadow: 0 10px 24px rgba(251, 191, 36, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 120ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.ms-start-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.ms-start-btn:active { transform: translateY(0); }
.ms-prestart-hint {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9rem;
}

/* Game board (hidden until Start). */
.ms-board {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 16px 24px;
  margin: 0 auto;
  max-width: 560px;
  width: 100%;
}

/* Countdown progress bar */
.ms-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ms-progress-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #fde68a 0%, #fbbf24 50%, #f97316 100%);
  border-radius: 999px;
  transition: width 120ms linear;
}

/* Question stem — big and bold */
.ms-question {
  font-size: 2.6rem;
  font-weight: 800;
  text-align: center;
  color: #fff;
  line-height: 1.15;
  padding: 22px 16px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  white-space: pre-line;
  font-variant-numeric: tabular-nums;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Answer choice grid — 2×2 mobile, 4-across desktop */
.ms-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.ms-choice {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(30, 58, 138, 0.5);
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  font-family: inherit;
  padding: 18px 12px;
  border-radius: var(--r-button);
  cursor: pointer;
  min-height: 64px;
  font-variant-numeric: tabular-nums;
  transition: transform 100ms ease, background 100ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.ms-choice:hover {
  background: rgba(30, 58, 138, 0.7);
  border-color: rgba(253, 224, 71, 0.35);
}
.ms-choice:active { transform: scale(0.98); }
.ms-choice:disabled { cursor: default; opacity: 0.7; }

.ms-choice.is-correct {
  background: linear-gradient(140deg, rgba(52, 211, 153, 0.45) 0%, rgba(16, 185, 129, 0.5) 100%);
  border-color: rgba(52, 211, 153, 0.7);
  color: #d1fae5;
  animation: ms-correct-pulse 360ms ease-out;
}
.ms-choice.is-wrong {
  background: rgba(239, 68, 68, 0.35);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fecaca;
  animation: ms-wrong-shake 360ms ease-out;
}
.ms-choice.is-show-correct {
  outline: 2px solid rgba(52, 211, 153, 0.7);
  outline-offset: 2px;
}

@keyframes ms-correct-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes ms-wrong-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* Timer + streak hot-states on the stats strip */
body.game-math-sprint #msTimerStat.is-danger .memory-stat-num {
  color: #fca5a5;
  animation: ms-tick-pulse 600ms ease-in-out infinite;
}
body.game-math-sprint #msStreakStat.is-hot .memory-stat-num {
  color: #fb923c;
  text-shadow: 0 0 12px rgba(251, 146, 60, 0.6);
}
@keyframes ms-tick-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Mobile responsive */
@media (max-width: 480px) {
  .ms-question { font-size: 2rem; padding: 18px 10px; min-height: 110px; }
  .ms-choice { font-size: 1.25rem; min-height: 60px; padding: 14px 8px; }
  .ms-start-btn { font-size: 1.35rem; padding: 18px 48px; }
}

/* Desktop ≥1100px — wider board, 4-across choices, side rails */
/* ============================================================
   EQUATION BUILDER (game #4)
   ============================================================ */
body.game-equation-builder .game-main { padding-top: 12px; }
.eb-board {
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 16px 24px; margin: 0 auto; max-width: 560px; width: 100%;
}
.eb-equation {
  font-size: 2.6rem; font-weight: 800; text-align: center; color: #fff;
  padding: 28px 14px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card);
  min-height: 110px; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px; font-variant-numeric: tabular-nums;
  transition: background 200ms ease, border-color 200ms ease;
}
.eb-equation.is-correct { background: rgba(16, 185, 129, 0.18); border-color: rgba(52, 211, 153, 0.55); }
.eb-equation.is-wrong { background: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.55); animation: ms-wrong-shake 360ms ease-out; }
.eb-num { color: #fde68a; }
.eb-target { color: #34d399; padding-left: 4px; }
.eb-slot {
  display: inline-block; min-width: 38px; padding: 0 8px;
  border-bottom: 3px solid rgba(253, 224, 71, 0.4);
  color: rgba(255, 255, 255, 0.45);
}
.eb-slot.is-filled { color: #fde68a; border-bottom-color: #fbbf24; }
.eb-ops {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.eb-op {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(30, 58, 138, 0.6); color: #fff; font-weight: 800;
  font-size: 1.8rem; padding: 16px 0; border-radius: var(--r-button);
  cursor: pointer; min-height: 64px; font-family: inherit;
  transition: background 100ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
.eb-op:hover { background: rgba(30, 58, 138, 0.85); border-color: rgba(253, 224, 71, 0.45); }
.eb-op:active { transform: scale(0.97); }
.eb-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.eb-action-btn {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06); color: #fff; font-weight: 700;
  font-size: 1rem; padding: 14px 12px; border-radius: var(--r-button);
  cursor: pointer; min-height: 52px; font-family: inherit;
}
.eb-action-btn:hover { background: rgba(255, 255, 255, 0.12); }
.eb-action-btn.eb-submit {
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b; border-color: rgba(251, 191, 36, 0.7); font-weight: 800;
}

/* ============================================================
   NUMBER LINE (game #5)
   ============================================================ */
body.game-number-line .game-main { padding-top: 12px; }
.nl-board {
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 16px 28px; margin: 0 auto; max-width: 700px; width: 100%;
}
.nl-target {
  font-size: 1.6rem; font-weight: 800; text-align: center;
  color: #fde68a; padding: 18px 12px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(253, 224, 71, 0.35); border-radius: var(--r-card);
}
.nl-line-wrap {
  padding: 60px 24px 30px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card);
  user-select: none;
}
.nl-line {
  position: relative; height: 60px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nl-line-track {
  position: absolute; top: 28px; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #fbbf24 0%, #fde68a 50%, #fbbf24 100%);
  border-radius: 999px;
}
.nl-ticks { position: absolute; inset: 0; }
.nl-tick {
  position: absolute; top: 22px; width: 2px; height: 16px;
  background: rgba(255, 255, 255, 0.35); transform: translateX(-1px);
}
.nl-tick-label {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; color: rgba(255, 255, 255, 0.65); white-space: nowrap;
}
.nl-line-labels {
  display: flex; justify-content: space-between; margin-top: 6px;
  color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; font-weight: 700;
}
.nl-mark {
  position: absolute; top: 0; transform: translateX(-50%);
}
.nl-mark-tick {
  width: 4px; height: 32px; background: #fff;
  margin: 0 auto;
}
.nl-mark-label {
  font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em;
  color: #fff; margin-top: 4px; text-align: center;
}
.nl-user-mark .nl-mark-tick { background: #f97316; box-shadow: 0 0 8px rgba(249, 115, 22, 0.6); }
.nl-user-mark .nl-mark-label { color: #f97316; }
.nl-user-mark.is-bullseye .nl-mark-tick { background: #34d399; box-shadow: 0 0 14px rgba(52, 211, 153, 0.8); }
.nl-user-mark.is-bullseye .nl-mark-label { color: #34d399; }
.nl-target-mark .nl-mark-tick { background: rgba(253, 224, 71, 0.7); }
.nl-target-mark .nl-mark-label { color: rgba(253, 224, 71, 0.85); }

/* ============================================================
   PATTERN BUILDER (game #6)
   ============================================================ */
body.game-pattern-builder .game-main { padding-top: 12px; }
.pb-sequence {
  font-size: 2.2rem; font-weight: 800; text-align: center; color: #fff;
  padding: 24px 16px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 4px; min-height: 110px; font-variant-numeric: tabular-nums;
}
.pb-cell { color: #fde68a; padding: 0 6px; }
.pb-cell--hidden { color: #f97316; padding: 0 10px; border-bottom: 3px solid #f97316; }
.pb-sep { color: rgba(255, 255, 255, 0.4); margin: 0 2px; }

/* ============================================================
   24 GAME (game #7)
   ============================================================ */
body.game-twenty-four .game-main { padding-top: 12px; }
.tf-board {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 16px 24px; margin: 0 auto; max-width: 560px; width: 100%;
}
.tf-target-row {
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  padding: 12px 16px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(253, 224, 71, 0.35); border-radius: var(--r-card);
}
.tf-target-label { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.tf-target { color: #fde68a; font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tf-numbers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.tf-num {
  appearance: none; border: 2px solid rgba(253, 224, 71, 0.55);
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%); color: #1e293b;
  font-weight: 800; font-size: 1.9rem; padding: 18px 0; border-radius: var(--r-button);
  cursor: pointer; min-height: 70px; font-family: inherit;
  transition: transform 100ms ease, opacity 100ms ease;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}
.tf-num:hover { transform: translateY(-2px); }
.tf-num:active { transform: scale(0.97); }
.tf-num:disabled { opacity: 0.3; cursor: default; transform: none; }
.tf-expr {
  font-size: 1.4rem; font-weight: 700; text-align: center; color: #fff;
  padding: 14px 12px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-button);
  min-height: 56px; font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px;
  transition: background 200ms ease;
}
.tf-expr.is-empty { color: rgba(255, 255, 255, 0.4); font-style: italic; font-weight: 500; }
.tf-expr.is-correct { background: rgba(16, 185, 129, 0.2); border-color: rgba(52, 211, 153, 0.55); }
.tf-expr.is-wrong { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.55); }
.tf-tok { padding: 2px 4px; }
.tf-tok--num { color: #fde68a; }
.tf-tok--op { color: #fbbf24; }
.tf-tok--paren { color: rgba(255, 255, 255, 0.55); }
.tf-ops {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.tf-op {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(30, 58, 138, 0.6); color: #fff; font-weight: 800;
  font-size: 1.4rem; padding: 14px 0; border-radius: var(--r-button);
  cursor: pointer; min-height: 56px; font-family: inherit;
}
.tf-op:hover { background: rgba(30, 58, 138, 0.85); border-color: rgba(253, 224, 71, 0.45); }
.tf-op:active { transform: scale(0.96); }

/* Desktop ≥1100px — side rails for all four new games. Shared block
   keeps every game's desktop shape consistent with Memory Match. */
@media (min-width: 1100px) {
  body.game-equation-builder .game-main,
  body.game-number-line .game-main,
  body.game-pattern-builder .game-main,
  body.game-twenty-four .game-main {
    display: grid;
    grid-template-columns: 240px minmax(0, 640px) 280px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title  board panel"
      "howto  board panel"
      "stats  board panel"
      ".      board panel";
    column-gap: 36px; row-gap: 18px;
    max-width: 1280px; padding: 28px 24px 32px;
    align-items: start;
  }
  body.game-equation-builder #gameStatus,
  body.game-number-line #gameStatus,
  body.game-pattern-builder #gameStatus,
  body.game-twenty-four #gameStatus {
    grid-area: title; align-self: start; text-align: left;
    padding: 18px 18px 16px; font-size: 1.35rem; font-weight: 800;
    color: #fde68a; background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(253, 224, 71, 0.4); border-radius: var(--r-card);
    line-height: 1.3; margin: 0;
  }
  body.game-equation-builder .memory-howto,
  body.game-number-line .memory-howto,
  body.game-pattern-builder .memory-howto,
  body.game-twenty-four .memory-howto { grid-area: howto; margin: 0; }
  body.game-equation-builder .memory-stats,
  body.game-number-line .memory-stats,
  body.game-pattern-builder .memory-stats,
  body.game-twenty-four .memory-stats {
    grid-area: stats; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 0; padding: 14px 12px;
  }
  body.game-equation-builder .ms-prestart,
  body.game-number-line .ms-prestart,
  body.game-pattern-builder .ms-prestart,
  body.game-twenty-four .ms-prestart {
    grid-area: board; align-self: center; padding: 60px 16px;
  }
  body.game-equation-builder .eb-board,
  body.game-number-line .nl-board,
  body.game-pattern-builder .ms-board,
  body.game-twenty-four .tf-board {
    grid-area: board; max-width: 640px; margin: 0; padding: 0;
  }
  body.game-equation-builder .game-opponents,
  body.game-number-line .game-opponents,
  body.game-pattern-builder .game-opponents,
  body.game-twenty-four .game-opponents {
    grid-area: panel; flex-direction: column; align-items: stretch;
    padding: 18px; gap: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-card);
    margin: 0; overflow: visible; position: sticky; top: 28px;
  }
  body.game-equation-builder .game-opponents-list,
  body.game-number-line .game-opponents-list,
  body.game-pattern-builder .game-opponents-list,
  body.game-twenty-four .game-opponents-list {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  body.game-equation-builder .game-opponent,
  body.game-number-line .game-opponent,
  body.game-pattern-builder .game-opponent,
  body.game-twenty-four .game-opponent {
    width: 100%; justify-content: space-between; padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-button);
  }
  body.game-equation-builder .game-challenge-btn,
  body.game-number-line .game-challenge-btn,
  body.game-pattern-builder .game-challenge-btn,
  body.game-twenty-four .game-challenge-btn {
    width: 100%; padding: 12px 14px; font-size: 0.95rem;
  }
  body.game-equation-builder, body.game-number-line,
  body.game-pattern-builder, body.game-twenty-four {
    background:
      radial-gradient(ellipse at 70% 25%, rgba(253, 224, 71, 0.03) 0%, transparent 45%),
      radial-gradient(ellipse at 25% 85%, rgba(30, 58, 138, 0.1) 0%, transparent 55%),
      #060d1f;
    background-attachment: fixed;
  }
}

/* ============================================================
   MATH BINGO (game #8)
   ============================================================ */
body.game-math-bingo .game-main { padding-top: 12px; }
.mb-board {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 24px; margin: 0 auto; max-width: 560px; width: 100%;
}
.mb-call {
  font-size: 2.6rem; font-weight: 800; text-align: center; color: #fff;
  padding: 22px 14px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(253, 224, 71, 0.4); border-radius: var(--r-card);
  min-height: 110px; display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.mb-card {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px; padding: 8px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card);
}
.mb-cell {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(30, 58, 138, 0.55); color: #fff; font-weight: 800;
  font-size: 1.1rem; padding: 0; aspect-ratio: 1 / 1; border-radius: var(--r-button);
  cursor: pointer; font-family: inherit;
  transition: background 100ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
}
.mb-cell:hover { background: rgba(30, 58, 138, 0.85); }
.mb-cell:active { transform: scale(0.96); }
.mb-cell.is-marked { background: linear-gradient(140deg, rgba(52, 211, 153, 0.6) 0%, rgba(16, 185, 129, 0.7) 100%); border-color: rgba(52, 211, 153, 0.7); color: #ecfdf5; }
.mb-cell.is-free { background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%); color: #1e293b; font-size: 0.85rem; }

/* ============================================================
   SUDOKU MINI (game #9)
   ============================================================ */
body.game-sudoku-mini .game-main { padding-top: 12px; }
.sk-board {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 24px; margin: 0 auto; max-width: 480px; width: 100%;
}
.sk-grid {
  display: grid; grid-template-columns: repeat(var(--sk-size, 4), minmax(0, 1fr));
  gap: 0;
  background: rgba(15, 23, 42, 0.85);
  border: 2px solid rgba(253, 224, 71, 0.5); border-radius: var(--r-card);
  padding: 4px;
}
.sk-cell {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(30, 58, 138, 0.4); color: #fff; font-weight: 800;
  font-size: 1.6rem; aspect-ratio: 1 / 1; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.sk-cell:hover { background: rgba(30, 58, 138, 0.65); }
.sk-cell.is-locked { background: rgba(15, 23, 42, 0.6); color: #fde68a; cursor: default; }
.sk-cell.is-sel { background: rgba(251, 191, 36, 0.35); border-color: #fbbf24; outline: 2px solid #fbbf24; }
.sk-cell.is-rbreak { border-top: 2px solid rgba(253, 224, 71, 0.6); }
.sk-cell.is-cbreak { border-left: 2px solid rgba(253, 224, 71, 0.6); }
.sk-palette {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
}
.sk-grid[data-size="6"] + .sk-palette { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sk-num {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(30, 58, 138, 0.6); color: #fff; font-weight: 800;
  font-size: 1.3rem; padding: 12px 0; border-radius: var(--r-button);
  cursor: pointer; min-height: 50px; font-family: inherit;
}
.sk-num:hover { background: rgba(30, 58, 138, 0.85); border-color: rgba(253, 224, 71, 0.45); }
.sk-num--erase { background: rgba(239, 68, 68, 0.3); }
.sk-num--erase:hover { background: rgba(239, 68, 68, 0.5); }

/* ============================================================
   SPELLING BEE (game #10) + WORD LADDER (shared sb-* form classes)
   ============================================================ */
body.game-spelling-bee .game-main,
body.game-word-ladder .game-main { padding-top: 12px; }
.sb-board {
  display: flex; flex-direction: column; gap: 16px;
  padding: 18px 16px 24px; margin: 0 auto; max-width: 560px; width: 100%;
}
.sb-prompt {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 16px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(253, 224, 71, 0.4); border-radius: var(--r-card);
}
.sb-hear-btn {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b; font-weight: 800; font-size: 1.15rem;
  padding: 14px 32px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(251, 191, 36, 0.3);
  -webkit-tap-highlight-color: transparent;
}
.sb-hear-btn:hover { filter: brightness(1.08); }
.sb-hint { color: rgba(255, 255, 255, 0.7); font-size: 0.95rem; }
.sb-form { display: flex; gap: 10px; }
.sb-input {
  flex: 1; appearance: none;
  background: rgba(15, 23, 42, 0.85); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--r-button);
  padding: 14px 16px; font-size: 1.2rem; font-family: inherit;
  font-weight: 600; letter-spacing: 0.02em;
}
.sb-input:focus { outline: 2px solid #fbbf24; border-color: transparent; }
.sb-submit {
  appearance: none; border: 0; cursor: pointer; font-family: inherit;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b; font-weight: 800; font-size: 1rem;
  padding: 0 22px; border-radius: var(--r-button);
}
.sb-feedback {
  padding: 12px 14px; border-radius: var(--r-button); min-height: 44px;
  background: rgba(15, 23, 42, 0.6); color: #fff;
  font-size: 1rem; font-weight: 600; text-align: center;
}
.sb-feedback:empty { display: none; }
.sb-fb { font-weight: 700; }
.sb-fb--ok { color: #34d399; }
.sb-fb--bad { color: #fca5a5; }
.sb-fb strong { color: #fde68a; letter-spacing: 0.05em; text-transform: uppercase; }

/* Word Ladder ladder display */
.wl-board {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 24px; margin: 0 auto; max-width: 560px; width: 100%;
}
.wl-ladder {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card);
}
.wl-word {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: var(--r-button);
  font-weight: 800; font-size: 1.3rem; letter-spacing: 0.1em;
}
.wl-start { background: rgba(52, 211, 153, 0.18); border: 1px solid rgba(52, 211, 153, 0.5); color: #a7f3d0; }
.wl-end { background: rgba(251, 191, 36, 0.18); border: 1px solid rgba(251, 191, 36, 0.5); color: #fde68a; }
.wl-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.12em; font-weight: 700; }
.wl-steps { display: flex; flex-direction: column; gap: 6px; }
.wl-step {
  padding: 10px 16px; border-radius: var(--r-button);
  background: rgba(30, 58, 138, 0.4); color: #fff;
  font-weight: 700; font-size: 1.15rem; letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   STORY SEQUENCE (game #12)
   ============================================================ */
body.game-story-sequence .game-main { padding-top: 12px; }
.ss-board {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 24px; margin: 0 auto; max-width: 640px; width: 100%;
}
.ss-title {
  text-align: center; font-size: 1.3rem; font-weight: 800;
  color: #fde68a; margin: 0;
}
.ss-panels { display: flex; flex-direction: column; gap: 8px; }
.ss-panel {
  appearance: none; cursor: pointer; font-family: inherit; text-align: left;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-button);
  color: #fff; font-size: 1rem; line-height: 1.5;
  transition: background 100ms ease, border-color 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.ss-panel:hover { background: rgba(30, 58, 138, 0.55); }
.ss-panel.is-sel { background: rgba(251, 191, 36, 0.2); border-color: #fbbf24; outline: 2px solid rgba(251, 191, 36, 0.45); }
.ss-panel-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(253, 224, 71, 0.25); color: #fde68a;
  font-weight: 800; font-size: 0.9rem; flex-shrink: 0;
}
.ss-panel-text { flex: 1; }

/* ============================================================
   TEXAS MAP QUEST (game #13)
   ============================================================ */
body.game-texas-map .game-main { padding-top: 12px; }
.tx-board {
  display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 24px; margin: 0 auto; max-width: 560px; width: 100%;
}
.tx-question {
  font-size: 1.4rem; font-weight: 800; text-align: center; color: #fde68a;
  padding: 16px 14px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(253, 224, 71, 0.4); border-radius: var(--r-card);
}
.tx-map-wrap {
  padding: 14px; background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-card);
}
.tx-map { width: 100%; height: auto; max-height: 520px; cursor: crosshair; -webkit-tap-highlight-color: transparent; user-select: none; }
.tx-map #txOutline {
  fill: rgba(30, 58, 138, 0.5);
  stroke: #fde68a; stroke-width: 0.6; stroke-linejoin: round;
}
.tx-mark { pointer-events: none; }
.tx-user { fill: #f97316; stroke: #fff; stroke-width: 0.5; filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.7)); }
.tx-target { fill: #34d399; stroke: #fff; stroke-width: 0.5; filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.8)); }

/* ============================================================
   NUMBER TETRIS (game #14)
   Canvas-based math Tetris. Blocks fall with digits per cell.
   Rows clear when the row's digits sum to the grade target.
   ============================================================ */
body.game-number-tetris .game-main { padding-top: 12px; }
.nt-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 12px 12px 24px;
  margin: 0 auto;
  max-width: 460px;
  width: 100%;
  align-items: start;
}
.nt-canvas-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 8px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
}
.nt-canvas {
  display: block;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  border-radius: var(--r-button);
}

/* Always-visible pause button on top-right of the canvas */
.nt-pause-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(253, 224, 71, 0.5);
  background: rgba(15, 23, 42, 0.92);
  color: #fde68a;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  font-family: inherit;
  transition: transform 100ms ease, background 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.nt-pause-btn:hover {
  background: rgba(30, 58, 138, 0.85);
  border-color: #fde68a;
}
.nt-pause-btn:active { transform: scale(0.92); }

/* Pause overlay */
.nt-overlay {
  position: absolute;
  inset: 8px;
  background: rgba(6, 13, 31, 0.92);
  border-radius: var(--r-button);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 5;
}
.nt-overlay-text {
  font-size: 2rem;
  font-weight: 800;
  color: #fde68a;
  letter-spacing: 0.18em;
}
.nt-overlay-btn { font-size: 1.1rem; padding: 14px 38px; }

/* Mobile control row */
.nt-mobile-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 0;
}
.nt-ctrl {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(30, 58, 138, 0.6);
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  padding: 14px 0;
  border-radius: var(--r-button);
  cursor: pointer;
  min-height: 56px;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background 80ms ease, transform 60ms ease;
}
.nt-ctrl:hover { background: rgba(30, 58, 138, 0.85); }
.nt-ctrl:active { transform: scale(0.96); }
.nt-ctrl--hard {
  grid-column: 1 / -1;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}

/* Sidebar (desktop only — hidden on mobile via grid order) */
.nt-sidebar {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  color: #fff;
}
.nt-next, .nt-keys {
  background: rgba(255, 255, 255, 0.04);
  padding: 10px 12px;
  border-radius: var(--r-button);
}
.nt-next-label, .nt-keys-label {
  color: rgba(253, 224, 71, 0.85);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  margin-bottom: 8px;
}
.nt-next-canvas { display: block; margin: 0 auto; }
.nt-key { font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); margin: 4px 0; }
.nt-key kbd {
  display: inline-block;
  padding: 2px 6px;
  margin-right: 4px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-size: 0.78rem;
  font-family: ui-monospace, monospace;
  color: #fde68a;
}

/* Mobile-first layout: stack canvas + controls; hide sidebar */
@media (max-width: 1099px) {
  body.game-number-tetris .nt-board { max-width: 460px; margin: 0 auto; }
  body.game-number-tetris .nt-sidebar { display: none !important; }
}

/* ============================================================
   NUMBER TETRIS — tutorial overlay (first-launch demo)
   ============================================================ */
.nt-tutorial {
  margin: 0 auto;
  padding: 12px;
  max-width: 520px;
  width: 100%;
}
.nt-tut-card {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(253, 224, 71, 0.4);
  border-radius: var(--r-card);
  padding: 22px 22px 18px;
  color: #fff;
}
.nt-tut-step {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  font-weight: 800;
  color: rgba(253, 224, 71, 0.8);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.nt-tut-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fde68a;
  margin: 0 0 16px;
  line-height: 1.2;
}
.nt-tut-visual {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-button);
  padding: 14px 12px;
  margin-bottom: 14px;
}
.nt-tut-row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 10px;
}
.nt-tut-row--clearing { animation: nt-tut-clear 1500ms ease-in-out infinite; }
@keyframes nt-tut-clear {
  0%, 70% { opacity: 1; }
  85%     { opacity: 0.3; filter: brightness(2); }
  100%    { opacity: 1; }
}
.nt-tut-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}
.nt-tut-math {
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.nt-tut-math strong { color: #34d399; font-size: 1.2rem; }
.nt-tut-earn {
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  color: #34d399;
  margin-top: 12px;
}
.nt-tut-earn-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.nt-tut-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.nt-tut-ctl-row {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px 12px;
  border-radius: var(--r-button);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
}
.nt-tut-ctl-row strong { color: #fde68a; font-weight: 800; margin-right: 6px; }
.nt-tut-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 16px;
}
.nt-tut-body strong { color: #fde68a; }
.nt-tut-actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.nt-tut-skip {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.88rem;
  cursor: pointer;
  font-family: inherit;
  padding: 8px 6px;
  text-decoration: underline;
}
.nt-tut-skip:hover { color: #fff; }
.nt-tut-back {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.nt-tut-next {
  appearance: none;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  border: 0;
  color: #1e293b;
  font-weight: 800;
  font-size: 1rem;
  padding: 12px 26px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 14px rgba(251, 191, 36, 0.3);
}
.nt-tut-next:hover { filter: brightness(1.08); }

/* Desktop ≥1100px — three-column rail + visible sidebar */
@media (min-width: 1100px) {
  body.game-number-tetris .game-main {
    display: grid;
    grid-template-columns: 240px minmax(0, 520px) 280px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title  board panel"
      "howto  board panel"
      "stats  board panel"
      ".      board panel";
    column-gap: 36px; row-gap: 18px;
    max-width: 1180px; padding: 28px 24px 32px;
    align-items: start;
  }
  body.game-number-tetris #gameStatus {
    grid-area: title; align-self: start; text-align: left;
    padding: 18px 18px 16px; font-size: 1.35rem; font-weight: 800;
    color: #fde68a; background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(253, 224, 71, 0.4); border-radius: var(--r-card);
    line-height: 1.3; margin: 0;
  }
  body.game-number-tetris .memory-howto { grid-area: howto; margin: 0; }
  body.game-number-tetris .memory-stats {
    grid-area: stats; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 0; padding: 14px 12px;
  }
  body.game-number-tetris .ms-prestart {
    grid-area: board; align-self: center; padding: 60px 16px;
  }
  body.game-number-tetris .nt-tutorial {
    grid-area: board; max-width: 520px; margin: 0; padding: 0;
  }
  body.game-number-tetris .nt-board {
    grid-area: board; max-width: 520px; margin: 0; padding: 0;
  }
  body.game-number-tetris .nt-mobile-controls { display: none; }
  body.game-number-tetris .nt-sidebar {
    grid-area: panel;
    display: flex;
    position: sticky; top: 28px;
    margin: 0;
    align-self: start;
  }
  /* Defensive: tutorial + sidebar use HTML hidden attribute for
     visibility; without this !important the desktop grid display:
     rules would override it. */
  body.game-number-tetris .nt-tutorial[hidden],
  body.game-number-tetris .nt-sidebar[hidden],
  body.game-number-tetris .nt-board[hidden] { display: none !important; }
  body.game-number-tetris {
    background:
      radial-gradient(ellipse at 70% 25%, rgba(253, 224, 71, 0.03) 0%, transparent 45%),
      radial-gradient(ellipse at 25% 85%, rgba(30, 58, 138, 0.1) 0%, transparent 55%),
      #060d1f;
    background-attachment: fixed;
  }
}

/* ============================================================
   Desktop ≥1100px — side rails for all batch-2 games
   ============================================================ */
@media (min-width: 1100px) {
  body.game-math-bingo .game-main,
  body.game-sudoku-mini .game-main,
  body.game-spelling-bee .game-main,
  body.game-word-ladder .game-main,
  body.game-story-sequence .game-main,
  body.game-texas-map .game-main {
    display: grid;
    grid-template-columns: 240px minmax(0, 640px) 280px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title  board panel"
      "howto  board panel"
      "stats  board panel"
      ".      board panel";
    column-gap: 36px; row-gap: 18px;
    max-width: 1280px; padding: 28px 24px 32px;
    align-items: start;
  }
  body.game-math-bingo #gameStatus,
  body.game-sudoku-mini #gameStatus,
  body.game-spelling-bee #gameStatus,
  body.game-word-ladder #gameStatus,
  body.game-story-sequence #gameStatus,
  body.game-texas-map #gameStatus {
    grid-area: title; align-self: start; text-align: left;
    padding: 18px 18px 16px; font-size: 1.35rem; font-weight: 800;
    color: #fde68a; background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(253, 224, 71, 0.4); border-radius: var(--r-card);
    line-height: 1.3; margin: 0;
  }
  body.game-math-bingo .memory-howto,
  body.game-sudoku-mini .memory-howto,
  body.game-spelling-bee .memory-howto,
  body.game-word-ladder .memory-howto,
  body.game-story-sequence .memory-howto,
  body.game-texas-map .memory-howto { grid-area: howto; margin: 0; }
  body.game-math-bingo .memory-stats,
  body.game-sudoku-mini .memory-stats,
  body.game-spelling-bee .memory-stats,
  body.game-word-ladder .memory-stats,
  body.game-story-sequence .memory-stats,
  body.game-texas-map .memory-stats {
    grid-area: stats; grid-template-columns: 1fr 1fr; gap: 10px;
    margin: 0; padding: 14px 12px;
  }
  body.game-math-bingo .ms-prestart,
  body.game-sudoku-mini .ms-prestart,
  body.game-spelling-bee .ms-prestart,
  body.game-word-ladder .ms-prestart,
  body.game-story-sequence .ms-prestart,
  body.game-texas-map .ms-prestart {
    grid-area: board; align-self: center; padding: 60px 16px;
  }
  body.game-math-bingo .mb-board,
  body.game-sudoku-mini .sk-board,
  body.game-spelling-bee .sb-board,
  body.game-word-ladder .wl-board,
  body.game-story-sequence .ss-board,
  body.game-texas-map .tx-board {
    grid-area: board; max-width: 640px; margin: 0; padding: 0;
  }
  body.game-math-bingo .game-opponents,
  body.game-sudoku-mini .game-opponents,
  body.game-spelling-bee .game-opponents,
  body.game-word-ladder .game-opponents,
  body.game-story-sequence .game-opponents,
  body.game-texas-map .game-opponents {
    grid-area: panel; flex-direction: column; align-items: stretch;
    padding: 18px; gap: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--r-card);
    margin: 0; overflow: visible; position: sticky; top: 28px;
  }
  body.game-math-bingo .game-opponents-list,
  body.game-sudoku-mini .game-opponents-list,
  body.game-spelling-bee .game-opponents-list,
  body.game-word-ladder .game-opponents-list,
  body.game-story-sequence .game-opponents-list,
  body.game-texas-map .game-opponents-list {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  body.game-math-bingo .game-opponent,
  body.game-sudoku-mini .game-opponent,
  body.game-spelling-bee .game-opponent,
  body.game-word-ladder .game-opponent,
  body.game-story-sequence .game-opponent,
  body.game-texas-map .game-opponent {
    width: 100%; justify-content: space-between; padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-button);
  }
  body.game-math-bingo .game-challenge-btn,
  body.game-sudoku-mini .game-challenge-btn,
  body.game-spelling-bee .game-challenge-btn,
  body.game-word-ladder .game-challenge-btn,
  body.game-story-sequence .game-challenge-btn,
  body.game-texas-map .game-challenge-btn {
    width: 100%; padding: 12px 14px; font-size: 0.95rem;
  }
  body.game-math-bingo, body.game-sudoku-mini, body.game-spelling-bee,
  body.game-word-ladder, body.game-story-sequence, body.game-texas-map {
    background:
      radial-gradient(ellipse at 70% 25%, rgba(253, 224, 71, 0.03) 0%, transparent 45%),
      radial-gradient(ellipse at 25% 85%, rgba(30, 58, 138, 0.1) 0%, transparent 55%),
      #060d1f;
    background-attachment: fixed;
  }
}

@media (min-width: 1100px) {
  body.game-math-sprint .game-main {
    display: grid;
    grid-template-columns: 240px minmax(0, 640px) 280px;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "title  board panel"
      "howto  board panel"
      "stats  board panel"
      ".      board panel";
    column-gap: 36px;
    row-gap: 18px;
    max-width: 1280px;
    padding: 28px 24px 32px;
    align-items: start;
  }
  body.game-math-sprint #gameStatus {
    grid-area: title;
    align-self: start;
    text-align: left;
    padding: 18px 18px 16px;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fde68a;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(253, 224, 71, 0.4);
    border-radius: var(--r-card);
    line-height: 1.3;
    margin: 0;
  }
  body.game-math-sprint .memory-howto { grid-area: howto; margin: 0; }
  body.game-math-sprint .memory-stats {
    grid-area: stats;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
    padding: 14px 12px;
  }
  body.game-math-sprint .memory-stat-num { font-size: 1.6rem; }
  body.game-math-sprint .memory-stat-label { font-size: 0.65rem; }

  body.game-math-sprint .ms-prestart {
    grid-area: board;
    align-self: center;
    padding: 60px 16px;
  }
  body.game-math-sprint .ms-board {
    grid-area: board;
    max-width: 640px;
    margin: 0;
    padding: 0;
  }
  body.game-math-sprint .ms-question { font-size: 3rem; padding: 32px 20px; min-height: 160px; }
  body.game-math-sprint .ms-choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.game-math-sprint .ms-choice { font-size: 1.7rem; min-height: 88px; }

  body.game-math-sprint .game-opponents {
    grid-area: panel;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 14px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-card);
    margin: 0;
    overflow: visible;
    position: sticky;
    top: 28px;
  }
  body.game-math-sprint .game-opponents-label {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: rgba(253, 224, 71, 0.85);
  }
  body.game-math-sprint .game-opponents-list {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  body.game-math-sprint .game-opponent {
    width: 100%;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-button);
  }
  body.game-math-sprint .game-challenge-btn {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
  }

  body.game-math-sprint {
    background:
      radial-gradient(ellipse at 70% 25%, rgba(253, 224, 71, 0.03) 0%, transparent 45%),
      radial-gradient(ellipse at 25% 85%, rgba(30, 58, 138, 0.1) 0%, transparent 55%),
      #060d1f;
    background-attachment: fixed;
  }
}


/* ============================================================
   MATH SHOWDOWN (game #15) — 1v1 real-time
   Built on shared MatchEngine. Mobile-first.
   ============================================================ */
body.game-showdown .game-main { padding-top: 12px; }
.sd-root { padding: 0 14px 24px; max-width: 600px; margin: 0 auto; }
.sd-card {
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(253, 224, 71, 0.35);
  border-radius: var(--r-card);
  padding: 22px 20px 20px;
  color: #fff;
  margin-bottom: 14px;
}
.sd-h {
  font-size: 1.4rem; font-weight: 800;
  margin: 0 0 8px; color: #fde68a; line-height: 1.2;
}
.sd-sub {
  margin: 0 0 16px; color: rgba(255, 255, 255, 0.78); font-size: 0.92rem;
}
.sd-label {
  display: block; font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(253, 224, 71, 0.8);
  margin: 14px 0 6px; font-weight: 800;
}
.sd-hint {
  margin: 10px 0 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.55);
}
.sd-select {
  width: 100%;
  appearance: none;
  background: rgba(30, 58, 138, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 12px 14px;
  border-radius: var(--r-button);
  font-size: 1rem;
  font-family: inherit;
}
.sd-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 16px;
}
.sd-btn {
  appearance: none; border: 0; font-family: inherit;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 800; font-size: 0.98rem;
  cursor: pointer; flex: 1 1 auto; text-align: center;
  transition: transform 80ms ease, filter 80ms ease;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
}
.sd-btn--primary {
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b;
  box-shadow: 0 6px 14px rgba(251, 191, 36, 0.3);
}
.sd-btn--primary:hover { filter: brightness(1.08); }
.sd-btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}
.sd-btn--small {
  padding: 8px 14px; font-size: 0.85rem; flex: 0 0 auto;
}
.sd-btn:active { transform: scale(0.97); }

/* Invite box */
.sd-invite-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 14px;
  border-radius: var(--r-button);
}
.sd-invite-row {
  display: flex; gap: 8px; align-items: center;
}
.sd-invite-input {
  flex: 1; appearance: none;
  background: rgba(15, 23, 42, 0.7);
  color: #fde68a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 10px 12px;
  border-radius: var(--r-button);
  font-size: 0.82rem;
  font-family: ui-monospace, monospace;
  min-width: 0;
}

/* Spinner for waiting state */
.sd-spinner {
  width: 38px; height: 38px;
  border: 3px solid rgba(253, 224, 71, 0.2);
  border-top-color: #fde68a;
  border-radius: 50%;
  margin: 0 auto 14px;
  animation: sd-spin 900ms linear infinite;
}
@keyframes sd-spin { to { transform: rotate(360deg); } }

/* ===== Live match view ===== */
.sd-card--live {
  padding: 16px 16px 18px;
}
.sd-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 14px;
}
.sd-player {
  position: relative;
  background: rgba(30, 58, 138, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-button);
  padding: 12px 10px;
  text-align: center;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.sd-player.is-winner {
  background: linear-gradient(140deg, rgba(253, 224, 71, 0.3) 0%, rgba(251, 191, 36, 0.4) 100%);
  border-color: #fbbf24;
  transform: scale(1.04);
}
.sd-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b;
  font-weight: 800; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.sd-av--lg { width: 56px; height: 56px; font-size: 1.6rem; }
.sd-pname {
  font-size: 0.82rem; color: #fff; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sd-pscore {
  font-size: 1.6rem; font-weight: 800; color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.sd-pflag {
  position: absolute; top: 6px; right: 8px;
  background: #fbbf24; color: #1e293b;
  border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800;
}
.sd-vs-mid {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 0 6px;
}
.sd-vs-divider {
  font-weight: 800; color: rgba(253, 224, 71, 0.5);
  font-size: 0.8rem; letter-spacing: 0.2em;
}
.sd-round {
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); font-weight: 700; margin-bottom: 4px;
}

/* Timer bar */
.sd-timer-bar {
  height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 16px;
}
.sd-timer-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #fde68a 0%, #fbbf24 50%, #f97316 100%);
  border-radius: 999px;
  transition: width 120ms linear;
}

.sd-stem {
  font-size: 2.2rem; font-weight: 800; color: #fff;
  text-align: center; padding: 22px 16px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-button);
  font-variant-numeric: tabular-nums;
  white-space: pre-line;
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.sd-choices {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sd-choice {
  appearance: none; border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(30, 58, 138, 0.5);
  color: #fff; font-weight: 700; font-size: 1.4rem;
  font-family: inherit;
  padding: 18px 12px; border-radius: var(--r-button);
  cursor: pointer; min-height: 64px;
  font-variant-numeric: tabular-nums;
  transition: background 100ms ease, transform 80ms ease;
  -webkit-tap-highlight-color: transparent;
}
.sd-choice:hover { background: rgba(30, 58, 138, 0.75); border-color: rgba(253, 224, 71, 0.4); }
.sd-choice:active { transform: scale(0.97); }
.sd-choice:disabled { cursor: default; opacity: 0.75; }
.sd-choice.is-mine {
  background: rgba(251, 191, 36, 0.2);
  border-color: #fbbf24;
  outline: 2px solid rgba(251, 191, 36, 0.4);
}
.sd-choice.is-correct {
  background: linear-gradient(140deg, rgba(52, 211, 153, 0.4) 0%, rgba(16, 185, 129, 0.55) 100%);
  border-color: rgba(52, 211, 153, 0.7);
}
.sd-choice.is-wrong {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.7);
}
.sd-round-result {
  margin-top: 14px;
  text-align: center;
  padding: 10px 12px;
  background: rgba(253, 224, 71, 0.12);
  border: 1px solid rgba(253, 224, 71, 0.35);
  border-radius: var(--r-button);
  color: #fde68a;
  font-weight: 700;
  font-size: 1rem;
}

/* Done view */
.sd-card--done { text-align: center; }
.sd-final-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
}
.sd-final-side {
  background: rgba(30, 58, 138, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  padding: 16px 10px;
}
.sd-final-side.is-winner {
  background: linear-gradient(140deg, rgba(253, 224, 71, 0.3) 0%, rgba(251, 191, 36, 0.4) 100%);
  border-color: #fbbf24;
}
.sd-final-name { font-size: 0.92rem; color: #fff; font-weight: 700; margin: 6px 0 4px; }
.sd-final-score {
  font-size: 2.4rem; font-weight: 800; color: #fde68a;
  font-variant-numeric: tabular-nums;
}
.sd-final-divider {
  color: rgba(255, 255, 255, 0.4); font-size: 1.4rem; font-weight: 800;
}

/* Desktop: wider card, larger type */
@media (min-width: 769px) {
  .sd-stem { font-size: 2.8rem; padding: 30px 16px; min-height: 130px; }
  .sd-choice { font-size: 1.6rem; min-height: 80px; }
  .sd-pscore { font-size: 2rem; }
}
@media (max-width: 480px) {
  .sd-stem { font-size: 1.8rem; min-height: 90px; padding: 18px 12px; }
  .sd-choice { font-size: 1.2rem; min-height: 58px; padding: 14px 10px; }
  .sd-vs { gap: 6px; }
  .sd-player { padding: 10px 6px; }
  .sd-pscore { font-size: 1.4rem; }
}

/* ============================================================
   MATH BATTLE ROYALE (game #16) — 2-8 player elimination
   Reuses sd-* primitives where it makes sense; br-* for unique bits.
   ============================================================ */
body.game-battle-royale .game-main { padding-top: 12px; }
.br-root { padding: 0 14px 24px; max-width: 720px; margin: 0 auto; }

/* Lobby roster */
.br-lobby { text-align: center; }
.br-lobby-roster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 14px 0;
}
.br-slot {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  border-radius: var(--r-button);
  font-size: 0.74rem;
}
.br-slot--filled {
  background: rgba(30, 58, 138, 0.5);
  border: 1px solid rgba(253, 224, 71, 0.4);
  color: #fff; font-weight: 700;
}
.br-slot--empty {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.4);
  min-height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.br-slot-name {
  font-size: 0.72rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.br-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b;
  font-weight: 800; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.br-av--lg { width: 56px; height: 56px; font-size: 1.5rem; }

/* Live view */
.br-live { padding: 14px; }
.br-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.br-round-tag {
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 800; color: #fde68a;
}
.br-alive-count {
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.78);
}
.br-alive-count strong { color: #34d399; font-size: 1.1rem; }

.br-spectator-band {
  margin-top: 14px; padding: 10px 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: var(--r-button);
  color: #fca5a5; font-weight: 600; font-size: 0.92rem;
  text-align: center;
}
.br-eliminated-banner {
  margin-top: 12px; padding: 8px 12px;
  background: rgba(15, 23, 42, 0.7);
  border-left: 3px solid #ef4444;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem; font-weight: 600;
  border-radius: 0 var(--r-button) var(--r-button) 0;
}

/* Roster strip at bottom */
.br-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.br-roster-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px;
  border-radius: var(--r-button);
  background: rgba(30, 58, 138, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background 150ms ease, opacity 150ms ease;
}
.br-roster-cell.is-me {
  border-color: #fde68a;
  background: rgba(251, 191, 36, 0.18);
}
.br-roster-cell.is-dead {
  opacity: 0.45;
  background: rgba(15, 23, 42, 0.6);
}
.br-roster-name {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.br-roster-pip {
  font-size: 0.72rem;
  color: #fde68a;
  font-weight: 800;
}
.br-roster-cell.is-dead .br-roster-pip {
  color: rgba(239, 68, 68, 0.85);
}

.sd-choice.is-spectator {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Done view — podium */
.br-done { text-align: center; }
.br-podium {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 8px;
  margin: 18px 0 14px;
  align-items: end;
}
.br-podium-slot {
  background: rgba(30, 58, 138, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.br-podium-1 {
  background: linear-gradient(160deg, rgba(253, 224, 71, 0.35) 0%, rgba(251, 191, 36, 0.45) 100%);
  border-color: #fbbf24;
  padding: 22px 8px;
  order: 2;
}
.br-podium-2 { order: 1; padding-top: 18px; }
.br-podium-3 { order: 3; padding-top: 14px; }
.br-podium-rank { font-size: 0.78rem; font-weight: 800; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.08em; }
.br-podium-1 .br-podium-rank { color: #1e293b; }
.br-podium-name { font-size: 0.92rem; font-weight: 700; color: #fff; }
.br-podium-1 .br-podium-name { color: #1e293b; }
.br-podium-cents { font-size: 1.1rem; font-weight: 800; color: #fde68a; }
.br-podium-1 .br-podium-cents { color: #1e293b; }

.br-results-list {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-button);
  padding: 8px 12px;
}
.br-results-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
}
.br-results-row:last-child { border-bottom: 0; }
.br-results-rank { color: rgba(253, 224, 71, 0.8); font-weight: 800; }
.br-results-name { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.br-results-cents { color: #fde68a; font-weight: 700; }

/* Mobile tweaks */
@media (max-width: 480px) {
  .br-lobby-roster { grid-template-columns: repeat(2, 1fr); }
  .br-podium { grid-template-columns: 1fr 1.3fr 1fr; }
  .br-podium-1 { padding: 18px 6px; }
  .br-roster { grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); }
}

/* Round-tightening visual ramp on Battle Royale live card */
.sd-card.br-live[data-tier="1"] {
  border-color: rgba(59, 130, 246, 0.5);
}
.sd-card.br-live[data-tier="2"] {
  border-color: rgba(251, 146, 60, 0.6);
  box-shadow: 0 0 18px rgba(251, 146, 60, 0.15);
}
.sd-card.br-live[data-tier="2"] .sd-timer-fill {
  background: linear-gradient(90deg, #fb923c 0%, #f97316 60%, #ea580c 100%);
}
.sd-card.br-live[data-tier="3"] {
  border-color: rgba(239, 68, 68, 0.75);
  box-shadow: 0 0 22px rgba(239, 68, 68, 0.22);
  animation: br-tier-pulse 1400ms ease-in-out infinite;
}
.sd-card.br-live[data-tier="3"] .sd-timer-fill {
  background: linear-gradient(90deg, #fb7185 0%, #ef4444 50%, #b91c1c 100%);
}
.sd-card.br-live[data-tier="3"] .br-round-tag {
  color: #fca5a5;
}
@keyframes br-tier-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(239, 68, 68, 0.22); }
  50%      { box-shadow: 0 0 28px rgba(239, 68, 68, 0.4); }
}

/* ============================================================
   BEAR & CUB (game #17) — asymmetric tutoring
   ============================================================ */
body.game-bear-cub .game-main { padding-top: 12px; }
.bc-root { padding: 0 14px 24px; max-width: 720px; margin: 0 auto; }

/* Picker — two role cards side-by-side */
.bc-role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0 12px;
}
.bc-role-card {
  padding: 16px 14px;
  border-radius: var(--r-card);
  background: rgba(30, 58, 138, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; gap: 8px;
  text-align: center;
}
.bc-role--bear { border-color: rgba(168, 85, 247, 0.4); }
.bc-role--cub { border-color: rgba(251, 191, 36, 0.4); }
.bc-role-emoji { font-size: 2.4rem; }
.bc-role-title { font-size: 1.05rem; font-weight: 800; color: #fde68a; letter-spacing: 0.04em; }
.bc-role-desc { font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); margin: 0; line-height: 1.4; }
.bc-role-cents { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin: 4px 0; }
.bc-role-cents strong { color: #34d399; }

/* Queued state */
.bc-queued { text-align: center; }
.bc-queued-roster {
  display: flex; gap: 8px; justify-content: center; margin: 14px 0;
  flex-wrap: wrap;
}
.bc-queued-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: #fff; font-weight: 700; font-size: 0.92rem;
}

/* Live view */
.bc-banner {
  padding: 10px 14px;
  border-radius: var(--r-button);
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.bc-banner--bear {
  background: linear-gradient(140deg, rgba(168, 85, 247, 0.35) 0%, rgba(139, 92, 246, 0.45) 100%);
  border: 1px solid rgba(168, 85, 247, 0.6);
  color: #e9d5ff;
}
.bc-banner--cub {
  background: linear-gradient(140deg, rgba(253, 224, 71, 0.3) 0%, rgba(251, 191, 36, 0.4) 100%);
  border: 1px solid rgba(251, 191, 36, 0.6);
  color: #fef3c7;
}

.bc-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.bc-vs-side {
  text-align: center;
  padding: 10px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-button);
}
.bc-vs-side.is-me { border-color: #fde68a; background: rgba(251, 191, 36, 0.12); }
.bc-vs-name { font-weight: 700; color: #fff; font-size: 0.92rem; margin-top: 4px; }
.bc-vs-grade { font-size: 0.74rem; color: rgba(255, 255, 255, 0.6); }
.bc-vs-mid {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); font-weight: 700;
}

/* Bear's read-only choice display (highlights the correct one) */
.bc-choices--bear {
  display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
}
.bc-choice-display {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-button);
  color: #fff;
}
.bc-choice-display.is-correct {
  background: linear-gradient(140deg, rgba(52, 211, 153, 0.25) 0%, rgba(16, 185, 129, 0.35) 100%);
  border-color: rgba(52, 211, 153, 0.7);
}
.bc-choice-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(253, 224, 71, 0.18); color: #fde68a;
  font-weight: 800; font-size: 0.92rem; flex-shrink: 0;
  margin-right: 8px;
}
.bc-choice-text { flex: 1; font-weight: 700; }
.bc-choice-flag {
  background: #34d399; color: #064e3b;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 4px;
}

/* Bear's hint input */
.bc-hint-input {
  width: 100%;
  appearance: none;
  background: rgba(15, 23, 42, 0.7);
  color: #fff;
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: var(--r-button);
  padding: 12px 14px;
  font-size: 1rem; font-family: inherit;
  resize: vertical;
  min-height: 64px;
  margin-bottom: 8px;
}
.bc-hint-input:focus { outline: 2px solid #a855f7; border-color: transparent; }
.bc-hint-actions {
  display: flex; justify-content: space-between; align-items: center;
}
.bc-hint-count {
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.55);
}
.bc-hint-error {
  margin-top: 10px; padding: 10px 12px;
  background: rgba(239, 68, 68, 0.18);
  border-left: 3px solid #ef4444;
  border-radius: 0 var(--r-button) var(--r-button) 0;
  color: #fecaca; font-size: 0.9rem; font-weight: 600;
}

/* Cub's hint display */
.bc-hint-display {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: var(--r-button);
  background: rgba(168, 85, 247, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #e9d5ff;
  font-size: 0.95rem; line-height: 1.5;
}
.bc-hint-display--waiting { color: rgba(233, 213, 255, 0.7); font-style: italic; }
.bc-hint-display--shown strong { color: #fde68a; }
.bc-hint-display--sent {
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.5);
  color: #d1fae5;
}

/* Round result band */
.bc-round-result {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-button);
  text-align: center;
  font-weight: 700;
}
.bc-round-result.is-good {
  background: rgba(52, 211, 153, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.55);
  color: #d1fae5;
}
.bc-round-result.is-bad {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #fecaca;
}

/* Done view */
.bc-done { text-align: center; }
.bc-family-badge {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(140deg, #fde68a 0%, #fbbf24 100%);
  color: #1e293b;
  font-weight: 800;
  border-radius: 999px;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.bc-final-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px; align-items: center;
  margin: 18px 0;
}
.bc-final-card {
  padding: 16px 10px;
  background: rgba(30, 58, 138, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  text-align: center;
}
.bc-final-card.is-me {
  border-color: #fde68a;
  background: linear-gradient(140deg, rgba(253, 224, 71, 0.18) 0%, rgba(251, 191, 36, 0.22) 100%);
}
.bc-final-emoji { font-size: 2.4rem; }
.bc-final-name { font-size: 0.95rem; font-weight: 700; color: #fff; margin: 4px 0; }
.bc-final-role { font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); }
.bc-final-cents {
  font-size: 1.6rem; font-weight: 800; color: #34d399;
  margin-top: 6px;
}
.bc-final-divider { color: rgba(255, 255, 255, 0.4); font-size: 1.2rem; font-weight: 800; }

/* Mobile */
@media (max-width: 480px) {
  .bc-role-grid { grid-template-columns: 1fr; }
  .bc-vs { grid-template-columns: 1fr; gap: 8px; }
  .bc-vs-mid { display: none; }
  .bc-final-grid { grid-template-columns: 1fr; }
  .bc-final-divider { display: none; }
}

/* ============================================================
   Word Connect — 3-min timer + ×2 double-letter button
   ============================================================ */
.wc-timer {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: #fde68a;
  padding: 2px 8px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(253, 224, 71, 0.35);
  border-radius: 6px;
  font-size: 0.85rem;
  margin-right: 4px;
}
.wc-timer.is-danger {
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.55);
  animation: wc-timer-pulse 700ms ease-in-out infinite;
}
@keyframes wc-timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.wc-wheel-actions {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}
.wc-double-btn {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  background: linear-gradient(140deg, rgba(253, 224, 71, 0.25) 0%, rgba(251, 191, 36, 0.35) 100%);
  border-color: rgba(253, 224, 71, 0.55);
  color: #fde68a;
  font-weight: 800;
}
.wc-double-btn:hover { filter: brightness(1.1); }

/* ==========================================================================
   Grade-page conditional-rendering polish (May 11)
   ========================================================================== */

/* Compact breadcrumb on direct deep-link visits — trims the top
   padding and dims the trail so it reads as a back-anchor, not a
   primary nav. Kids who came from inside the app still see the
   full breadcrumb (the .--compact class is only added when there
   was no in-app referrer within the last 5 min). */
.breadcrumb-nav--compact {
  padding-top: 18px;
}
.breadcrumb-nav--compact .breadcrumb {
  font-size: 12px;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .breadcrumb-nav--compact { padding-top: 12px; }
}

/* Zero-state tagline — one-liner that sets the value prop for a
   brand-new kid when the reward strip + daily quest are both
   suppressed. Sits between the hero and the subject picker. */
.zero-state-tagline {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px 18px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: -0.005em;
}
@media (max-width: 768px) {
  .zero-state-tagline {
    padding: 0 18px 14px;
    font-size: 14px;
  }
}

/* When the reward strip + daily quest are both hidden, the subject
   picker sits much closer to the hero than the rhythm of a populated
   dashboard. Add air so the picker doesn't feel cramped. */
body.has-zero-state .subject-section {
  margin-top: 24px;
}
body.has-zero-state.grade-page .subject-section {
  padding-top: 24px;
}
@media (min-width: 1024px) {
  body.has-zero-state .subject-section { margin-top: 40px; }
}

/* ==========================================================================
   §11 Homepage focus pass (May 11) — grade picker becomes the hero
   ==========================================================================
   Problem: 3 competing focal points (headline / floating math mockup /
   grade picker) in the signed-out hero. Eye couldn't land. Fix: single
   focal point (grade picker), demote headline + drop hero-right entirely.
   ========================================================================== */

body.home-page .hero-content--focus {
  display: block;
}

body.home-page .hero-focus {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  text-align: center;
}

/* Tiny TEKS eyebrow — sits above the live pill as the "what is this" line.
   §109 premium polish: star glyph dropped; text-only with even padding
   for restraint. Pill border + tinted background preserved (anchors
   the eyebrow visually against the starfield). */
body.home-page .hero-teks-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0 0 10px;
  padding: 4px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 999px;
}

/* Headline demotes from 56-72px to 32-40px, single line */
body.home-page .hero-headline--focus {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 28px;
  text-align: center;
  color: #ffffff;
  max-width: none;
  font-family: 'Inter', sans-serif;
}

/* BIG grade pills — hero-as-grid */
body.home-page .hero-cta-grades--big {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 680px;
  margin: 0 auto;
}
body.home-page .hero-cta-grades--big .hero-grade-pill {
  min-height: 96px;
  padding: 18px 14px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform 0.16s ease, box-shadow 0.16s ease,
              background 0.16s ease, border-color 0.16s ease;
}
body.home-page .hero-cta-grades--big .hero-grade-pill:hover {
  transform: translateY(-2px);
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 10px 24px -8px rgba(251, 191, 36, 0.30);
}
body.home-page .hero-cta-grades--big .hero-grade-pill--accent {
  border-color: rgba(251, 191, 36, 0.55);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.10) 0%, rgba(251, 191, 36, 0.04) 100%);
  color: #fde68a;
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18) inset;
}

body.home-page .hero-placement-line {
  margin: 18px 0 0;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.62);
}
body.home-page .hero-placement-line a {
  color: #fde68a;
  text-decoration: underline;
}

/* Below-fold "Here's how a session looks" section — the mockup card,
   now embedded instead of floating in the hero. */
.session-preview {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 32px 32px;
}
.session-preview-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.session-preview-copy { min-width: 0; }
.session-preview-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin-bottom: 12px;
}
.session-preview-title {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 16px;
}
.session-preview-sub {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
  max-width: 480px;
}
.session-preview-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mockup-card--embedded {
  position: relative !important;
  width: 100%;
  max-width: 400px;
  transform: none !important;
  animation: none !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  body.home-page .hero-cta-grades--big {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  body.home-page .hero-cta-grades--big .hero-grade-pill {
    min-height: 88px;
    font-size: 16px;
  }
  .session-preview {
    padding: 36px 24px 24px;
  }
  .session-preview-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .session-preview-copy { text-align: center; }
  .session-preview-sub { margin: 0 auto; }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  /* The desktop .hero is hidden on mobile (existing rule at line ~16306
     hides body.home-page .hero entirely on phones in favor of the
     mobile-hero element). Focus-pass rules above only apply to viewports
     where .hero is visible, so no mobile-specific overrides needed here
     for the hero. The session-preview stays visible on phones — that's
     where the curious-but-not-signed-in kid scrolls. */
  body.home-page .hero-focus { padding: 18px 16px 28px; }
  body.home-page .hero-headline--focus {
    font-size: 26px;
    margin: 6px 0 20px;
  }
  body.home-page .hero-cta-grades--big {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  body.home-page .hero-cta-grades--big .hero-grade-pill {
    min-height: 72px;
    font-size: 14px;
    padding: 12px 8px;
    border-radius: 14px;
  }
  body.home-page .hero-teks-badge {
    font-size: 10px;
    padding: 3px 9px;
  }
  body.home-page .hero-placement-line { font-size: 0.86rem; }

  .session-preview { padding: 28px 16px 16px; }
  .session-preview-title { font-size: 24px; }
  .session-preview-sub { font-size: 14px; }
}

/* ---------- Small phone (≤480) ---------- */
@media (max-width: 480px) {
  body.home-page .hero-cta-grades--big .hero-grade-pill {
    min-height: 64px;
    font-size: 13px;
    padding: 10px 6px;
  }
}

/* ==========================================================================
   §12 Homepage craft pass (May 11) — material depth + ambient motion
   ==========================================================================
   Same layout, same content, same words as the §11 focus pass. Adds the
   craft that separates "clean" from "premium": material button depth,
   typographic weight contrast, ambient motion, refined spacing rhythm,
   atmospheric refinement. NO HTML structure changes other than splitting
   the headline into two weight-contrast spans.
   ========================================================================== */

/* ---------- 1. Atmospheric refinement ----------
   The .hero already has amber + blue drifts, grid, starfield, spotlight.
   We layer one more: a static gold ambient glow that sits BEHIND the
   grade grid only (not the whole hero), pulling light toward the
   focal element. Animation kept on existing layers — sub-2% opacity at
   20-25s loop is imperceptible and "breathes" rather than "moves." */
body.home-page .hero-focus::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 720px;
  height: 480px;
  transform: translate(-50%, -30%);
  background: radial-gradient(ellipse at center,
    rgba(251, 191, 36, 0.07) 0%,
    rgba(251, 191, 36, 0.025) 35%,
    transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}
body.home-page .hero-focus {
  position: relative;
  isolation: isolate;
}

/* ---------- 2. Typography — weight contrast + tracking ----------
   Editorial feel: light + bold inside the same headline. */
body.home-page .hero-headline--focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 6px 0 64px;
}
body.home-page .hero-headline-light {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
}
body.home-page .hero-headline-bold {
  font-weight: 700;
  color: #ffffff;
}

/* "practicing" word — one-time shimmer on first viewport entry */
.hero-shimmer-word {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    100deg,
    #ffffff 0%,
    #ffffff 38%,
    #fde68a 50%,
    #ffffff 62%,
    #ffffff 100%
  );
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-shimmer-word.has-shimmered {
  animation: hero-shimmer 1.6s cubic-bezier(0.16, 1, 0.3, 1) 1;
}
@keyframes hero-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}

/* Badge polish — tighter, more controlled, more premium */
body.home-page .hero-teks-badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 5px 11px;
  border-radius: 999px;
  border-color: rgba(251, 191, 36, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(251, 191, 36, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.25);
}
body.home-page .hero-live-pill {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.005em;
  padding: 5px 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 6px rgba(0, 0, 0, 0.28);
}

/* Tight cluster: badges → headline (24px), then dramatic 80px to grid.
   The .hero-headline--focus margin-bottom (64px above) carries most of
   the breathing room to the grid; add a top margin for the hero-focus
   header cluster spacing. */
body.home-page .hero-focus .hero-teks-badge { margin-bottom: 8px; }
body.home-page .hero-focus .hero-live-pill { margin: 0 0 8px; }

/* ---------- 3. Premium button materiality ----------
   The single most important detail for "polished object" feel is the
   inset top-edge highlight. Every premium dark UI uses this. */
body.home-page .hero-cta-grades--big {
  gap: 18px;
}
body.home-page .hero-cta-grades--big .hero-grade-pill {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 16px rgba(0, 0, 0, 0.28);
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
    background 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-page .hero-cta-grades--big .hero-grade-pill:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 28px rgba(0, 0, 0, 0.38);
}
body.home-page .hero-cta-grades--big .hero-grade-pill:active {
  transform: translateY(-1px);
  transition-duration: 80ms;
}

/* ---------- 4. Algebra 1 — "featured" treatment ----------
   Says "special" without screaming. Soft gold inner gradient + outer
   glow. Hover intensifies the glow and lifts slightly more. */
body.home-page .hero-cta-grades--big .hero-grade-pill--accent {
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.10) 0%,
    rgba(251, 191, 36, 0.025) 100%);
  border-color: rgba(251, 191, 36, 0.32);
  color: #fde68a;
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 71, 0.20),
    0 4px 16px rgba(0, 0, 0, 0.28),
    0 0 32px rgba(251, 191, 36, 0.15);
}
body.home-page .hero-cta-grades--big .hero-grade-pill--accent:hover {
  transform: translateY(-3px);
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.14) 0%,
    rgba(251, 191, 36, 0.04) 100%);
  border-color: rgba(251, 191, 36, 0.50);
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 71, 0.28),
    0 12px 30px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(251, 191, 36, 0.25);
}

/* ---------- 5. Spacing rhythm ----------
   Composed contrast (24 / 64 / 48 / 120) replaces uniform gaps. */
body.home-page .hero-focus {
  padding: 56px 24px 64px;
}
body.home-page .hero-placement-line {
  margin: 48px 0 0;
  font-size: 0.92rem;
}
body.home-page .hero-placement-line a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 2px;
  color: #fde68a;
  text-decoration: none;
}
body.home-page .hero-placement-line a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(253, 224, 71, 0.65) 0%,
    rgba(253, 224, 71, 0.65) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-page .hero-placement-line a:hover {
  text-decoration: none;
}
body.home-page .hero-placement-line a:hover::after {
  transform: scaleX(1);
}
body.home-page .hero-placement-line a .placement-arrow {
  display: inline-block;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-page .hero-placement-line a:hover .placement-arrow {
  transform: translateX(4px);
}

/* ---------- 6. Header refinement ----------
   The .site-header already has a 1px hairline floor (line ~65) and the
   brand-logo already has a gold drop-shadow. Amplify those slightly on
   home so the header feels grounded with light behind it. */
body.home-page .site-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.home-page .brand-logo {
  filter:
    drop-shadow(0 2px 10px rgba(251, 191, 36, 0.45))
    drop-shadow(0 0 1px rgba(251, 191, 36, 0.45));
}

/* ---------- 7. Search trigger + ⌘K kbd material treatment ----------
   Currently a default border button. Match the premium button system. */
body.home-page .header-cmdk-hint {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.22);
  transition:
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    background 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-page .header-cmdk-hint:hover {
  border-color: rgba(251, 191, 36, 0.32);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 12px rgba(0, 0, 0, 0.30);
}
body.home-page .header-cmdk-kbd {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}

/* Sign-in: same material system so it feels family with the grade pills */
body.home-page .user-slot .user-signin,
body.home-page .user-slot .user-signin.btn {
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 71, 0.22),
    0 4px 16px rgba(0, 0, 0, 0.28),
    0 0 24px rgba(251, 191, 36, 0.10);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-page .user-slot .user-signin:hover,
body.home-page .user-slot .user-signin.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 71, 0.30),
    0 8px 22px rgba(0, 0, 0, 0.35),
    0 0 36px rgba(251, 191, 36, 0.18);
}

/* ---------- 8. Tablet ---------- */
@media (max-width: 900px) {
  body.home-page .hero-cta-grades--big { gap: 14px; }
  body.home-page .hero-headline--focus { margin-bottom: 48px; }
  body.home-page .hero-placement-line { margin-top: 36px; }
}

/* ---------- 9. Phone ---------- */
@media (max-width: 768px) {
  body.home-page .hero-focus { padding: 32px 16px 40px; }
  body.home-page .hero-headline--focus {
    font-size: 26px;
    margin-bottom: 36px;
    gap: 2px;
  }
  body.home-page .hero-cta-grades--big { gap: 12px; }
  body.home-page .hero-cta-grades--big .hero-grade-pill {
    border-radius: 12px;
  }
  body.home-page .hero-placement-line { margin-top: 28px; }
}

/* ---------- 10. Reduced-motion guard ----------
   Every motion that we added is additive — page must still look premium
   when these are off (and they always should be when the OS asks). */
@media (prefers-reduced-motion: reduce) {
  .hero-shimmer-word.has-shimmered {
    animation: none !important;
    background: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  body.home-page .hero-cta-grades--big .hero-grade-pill,
  body.home-page .hero-cta-grades--big .hero-grade-pill:hover,
  body.home-page .header-cmdk-hint,
  body.home-page .header-cmdk-hint:hover,
  body.home-page .user-slot .user-signin,
  body.home-page .user-slot .user-signin:hover,
  body.home-page .hero-placement-line a::after,
  body.home-page .hero-placement-line a .placement-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   §13 Homepage craft pass — MOBILE parity (May 11 hotfix)
   ==========================================================================
   The §11 focus pass + §12 craft pass shipped a new .hero-focus block
   inside #hero-anon, but on phones the legacy §31 "Ruthless mobile
   reduction" rules (line ~9417) still nuke .hero-headline and .hero-cta
   with !important, AND a separate legacy .mobile-hero block renders
   alongside #state-picker (card grid). Result: desktop got the new
   premium hero, phones still showed the old layout.
   Fix: re-enable the focus-pass block on phones (override §31), hide
   the legacy .mobile-hero, and hide #state-picker for signed-out
   users on mobile so the focus-pass hero is the single source of
   grade picking on every viewport.
   ========================================================================== */
@media (max-width: 768px) {
  /* Show #hero-anon at full breathing room on mobile. Using #hero-anon
     (ID specificity) to guarantee winning the §31 cascade war —
     id+class+class (1,2,0+) outranks any class-based !important the
     legacy rules use. */
  body.home-page #hero-anon {
    display: block !important;
    padding: 24px 16px 32px !important;
    min-height: auto !important;
    overflow: visible !important;
  }
  body.home-page #hero-anon .hero-bottom-fade { display: none !important; }

  body.home-page #hero-anon .hero-focus {
    display: block !important;
    padding: 6px 4px 12px !important;
    text-align: center;
  }
  body.home-page #hero-anon .hero-teks-badge,
  body.home-page #hero-anon .hero-live-pill {
    display: inline-flex !important;
    margin-bottom: 8px;
  }
  body.home-page #hero-anon .hero-headline,
  body.home-page #hero-anon .hero-headline--focus {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 28px !important;
    line-height: 1.08 !important;
    margin: 8px 0 32px !important;
    text-align: center !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
  }
  body.home-page #hero-anon .hero-headline-light,
  body.home-page #hero-anon .hero-headline-bold {
    display: inline-block !important;
  }
  body.home-page #hero-anon .hero-cta,
  body.home-page #hero-anon .hero-cta-grades,
  body.home-page #hero-anon .hero-cta-grades--big {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
  }
  body.home-page #hero-anon .hero-cta-grades--big .hero-grade-pill,
  body.home-page #hero-anon .hero-grade-pill {
    display: flex !important;
    min-height: 72px !important;
    padding: 12px 8px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    align-items: center;
    justify-content: center;
  }
  body.home-page #hero-anon .hero-placement-line {
    display: block !important;
    margin: 28px 0 0 !important;
    font-size: 0.86rem !important;
    text-align: center;
  }

  /* Hide the legacy phone-only header that duplicates the new hero */
  body.home-page .mobile-hero { display: none !important; }

  /* Hide the secondary card-grid grade picker on phones for signed-out
     visitors — the focus-pass pill grid IS the picker now. */
  body.home-page #state-picker { display: none !important; }
}

@media (max-width: 480px) {
  body.home-page #hero-anon .hero-cta-grades--big .hero-grade-pill,
  body.home-page #hero-anon .hero-grade-pill {
    min-height: 64px !important;
    font-size: 13px !important;
    padding: 10px 6px !important;
  }
  body.home-page #hero-anon .hero-headline,
  body.home-page #hero-anon .hero-headline--focus {
    font-size: 24px !important;
    margin-bottom: 28px !important;
  }
}

/* Tablet (≤900) — 3-col grid keeps cards from getting too narrow */
@media (min-width: 769px) and (max-width: 900px) {
  body.home-page #hero-anon .hero-cta-grades--big {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   §14 Topics-page minimalism pass (May 11)
   ==========================================================================
   subject.html now shows: small breadcrumb · "Math topics" H1 · clean list
   of cards (icon · title · chevron). Pool counts, lesson counts, mastery
   blurbs, and inline "Practice →" buttons all removed. The card IS the
   button. Applies the same premium material system as the homepage
   craft pass.
   ========================================================================== */

/* Compact / mid-dot breadcrumb on subject.html */
body.grade-page .breadcrumb-nav--minimal {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 0;
}
body.grade-page .breadcrumb--mid-dot {
  font-size: 12px;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.55);
}
body.grade-page .breadcrumb--mid-dot .breadcrumb-item:not(:last-child)::after {
  content: '·';
  margin-left: 10px;
  margin-right: 0;
  color: rgba(255, 255, 255, 0.28);
}
body.grade-page .breadcrumb--mid-dot .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.55);
}
body.grade-page .breadcrumb--mid-dot .breadcrumb-item--current {
  color: rgba(255, 255, 255, 0.85);
}
body.grade-page .breadcrumb-nav--compact {
  padding-top: 14px;
}
body.grade-page .breadcrumb-nav--compact .breadcrumb--mid-dot {
  font-size: 11px;
  opacity: 0.7;
}

/* Minimal subject-section — H1 alone, no instruction paragraph */
.subject-section--minimal {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 24px 64px;
}
.subject-section--minimal .subject-section-head {
  margin: 0 0 32px;
  padding: 0;
  border: 0;
  background: none;
}
.subject-section--minimal .subject-section-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
@media (max-width: 768px) {
  .subject-section--minimal { padding: 8px 16px 48px; }
  .subject-section--minimal .subject-section-title { font-size: 28px; }
  .subject-section--minimal .subject-section-head { margin-bottom: 24px; }
}

/* The list container — tight rhythm between cards */
.topic-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The card itself — premium material treatment.
   Selectors below intentionally don't combine with the legacy
   .subject-card-* selectors; the new HTML uses bare .topic-card
   with three direct children only. */
a.topic-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 16px rgba(0, 0, 0, 0.28);
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
    background 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
a.topic-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 28px rgba(0, 0, 0, 0.38);
  text-decoration: none;
}
a.topic-card:active {
  transform: translateY(-1px);
  transition-duration: 80ms;
}

/* Icon — 44px square with mini button-premium treatment.
   Higher specificity than the legacy .topic-card .topic-card-icon
   rule at line 12087 (which sized it 56px). */
a.topic-card > .topic-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.22);
}
a.topic-card.topic-card--mixed > .topic-card-icon {
  background: linear-gradient(
    180deg,
    rgba(251, 191, 36, 0.12) 0%,
    rgba(251, 191, 36, 0.03) 100%);
  border-color: rgba(251, 191, 36, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 71, 0.22),
    0 0 18px rgba(251, 191, 36, 0.12);
}

/* Title — display serif, medium weight, full white */
a.topic-card > .topic-card-title {
  flex: 1;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #ffffff;
  /* Prevent multi-line wrap from making cards uneven on long names */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Chevron — quiet visual cue that the card is tappable */
a.topic-card > .topic-card-chevron {
  flex-shrink: 0;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.55);
  transition:
    color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
a.topic-card:hover > .topic-card-chevron {
  color: #fde68a;
  transform: translateX(4px);
}
a.topic-card.topic-card--mixed > .topic-card-chevron {
  color: rgba(253, 224, 71, 0.7);
}

/* Mobile sizing */
@media (max-width: 768px) {
  a.topic-card {
    padding: 12px 14px;
    gap: 14px;
    border-radius: 12px;
  }
  a.topic-card > .topic-card-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 10px;
  }
  a.topic-card > .topic-card-title {
    font-size: 18px;
  }
  a.topic-card > .topic-card-chevron {
    font-size: 18px;
  }
  .topic-list { gap: 10px; }
}

/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  a.topic-card,
  a.topic-card:hover,
  a.topic-card > .topic-card-chevron,
  a.topic-card:hover > .topic-card-chevron {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   §15 Grade-page minimalism + shared .list-card pattern (May 11)
   ==========================================================================
   subject.html (§14) and grade.html now use the same minimal card shape:
   [icon 44px]  [title in display serif]  [→]
   Extracting the styles into a single .list-card class. Both pages keep
   their semantic outer classes (.topic-card / .subject-card) for any
   existing JS hooks; the visual treatment lives on .list-card.

   Defensive: the §14 a.topic-card { ... } rule already styles cards on
   subject.html with the same material treatment. To avoid double-rules
   fighting each other on subject.html (where elements have BOTH classes),
   the rules below are written to apply additively — same values, scoped
   to .list-card directly. The §14 rules continue to work for any legacy
   markup that's still using bare .topic-card.
   ========================================================================== */

a.list-card,
div.list-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  text-decoration: none;
  color: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 16px rgba(0, 0, 0, 0.28);
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1),
    background 240ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
a.list-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 28px rgba(0, 0, 0, 0.38);
  text-decoration: none;
}
a.list-card:active {
  transform: translateY(-1px);
  transition-duration: 80ms;
}

/* Icon container — 44px square with mini button-premium treatment */
.list-card > .list-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 22px;
  line-height: 1;
}
.list-card > .list-card-icon svg {
  width: 22px;
  height: 22px;
}

/* Subject-tinted icon containers (uses --subject-color set inline on
   each card from the SUBJECTS data — math gold, reading purple,
   science green, social-studies blue). The fallback is the default
   above; this rule only applies when --subject-color is defined. */
.list-card > .list-card-icon[style*="--subject-color"] {
  background: color-mix(in srgb, var(--subject-color) 12%, transparent);
  border-color: color-mix(in srgb, var(--subject-color) 28%, transparent);
  color: var(--subject-color);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--subject-color) 22%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.22);
}

/* Title — display serif, 22px desktop / 18px mobile */
.list-card > .list-card-title {
  flex: 1;
  margin: 0;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Chevron — quiet visual cue */
.list-card > .list-card-chevron {
  flex-shrink: 0;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.55);
  transition:
    color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
a.list-card:hover > .list-card-chevron {
  color: #fde68a;
  transform: translateX(4px);
}

/* Badge (trailing text for non-tappable subjects: "Soon", "Not tested") */
.list-card > .list-card-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* State variants */
.list-card--unavailable,
.list-card--soon {
  opacity: 0.55;
  pointer-events: none;
}
.list-card--unavailable .list-card-title,
.list-card--soon .list-card-title {
  color: rgba(255, 255, 255, 0.72);
}

/* Mobile sizing */
@media (max-width: 768px) {
  a.list-card,
  div.list-card {
    padding: 12px 14px;
    gap: 14px;
    border-radius: 12px;
  }
  .list-card > .list-card-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
    border-radius: 10px;
  }
  .list-card > .list-card-icon svg {
    width: 20px;
    height: 20px;
  }
  .list-card > .list-card-title {
    font-size: 18px;
  }
  .list-card > .list-card-chevron {
    font-size: 18px;
  }
  .list-card > .list-card-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ----- grade.html — minimal subject section reuses the same layout
   as subject-section--minimal from §14 (max-width 720px, H1 in serif) ----- */
body.grade-page .grade-content--minimal {
  /* Pull the section closer to the breadcrumb since we deleted the
     hero block above it. */
  padding-top: 0;
}

/* Hide the now-orphaned .grade-hero rule fragments that legacy CSS
   targets — they reference DOM that no longer exists, so no visual
   change, but explicit reset prevents stale margins from sneaking in
   if a future CSS rule re-creates one of those classes. */
body.grade-page .subject-section--minimal {
  /* Reuses the §14 .subject-section--minimal max-width 720px etc.
     Defined once in §14 — kept here as a documentation anchor. */
}

/* Reduced-motion guard */
@media (prefers-reduced-motion: reduce) {
  a.list-card,
  a.list-card:hover,
  .list-card > .list-card-chevron,
  a.list-card:hover > .list-card-chevron {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   §16 Free-worksheets pages (SEO, May 12)
   ==========================================================================
   Static SEO landing pages at /free-worksheets/<grade>-math.html — built
   by scripts/build-free-worksheets.js. Inherits the §15 material system
   (premium dark surface, subtle gradient, gold accents) so the SEO
   pages feel like the rest of the app, not a cheap "free worksheet PDF"
   site.
   ========================================================================== */

body.fw-page {
  background: #060d1f;
  color: #ffffff;
  min-height: 100vh;
}

.fw-main {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px 80px;
}

.fw-article {
  padding-top: 8px;
}

/* ---------- Hero ---------- */
.fw-hero {
  text-align: center;
  padding: 24px 0 32px;
}
.fw-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin: 0 0 16px;
}
.fw-h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 16px;
}
.fw-lead {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto 28px;
  max-width: 640px;
}
.fw-hero-cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Premium button ---------- */
.fw-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    background 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fw-btn--primary {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.05) 100%);
  border: 1px solid rgba(251, 191, 36, 0.42);
  color: #fde68a;
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 71, 0.30),
    0 4px 18px rgba(0, 0, 0, 0.28),
    0 0 32px rgba(251, 191, 36, 0.10);
}
.fw-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(253, 224, 71, 0.36),
    0 10px 26px rgba(0, 0, 0, 0.38),
    0 0 48px rgba(251, 191, 36, 0.18);
  text-decoration: none;
}
.fw-btn--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 8px rgba(0, 0, 0, 0.22);
}
.fw-btn--ghost:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  text-decoration: none;
}

/* ---------- Intro paragraphs ---------- */
.fw-intro {
  max-width: 680px;
  margin: 24px auto 32px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.fw-intro p { margin: 0 0 14px; }
.fw-intro p:last-child { margin-bottom: 0; }
.fw-intro strong { color: #ffffff; font-weight: 600; }

/* ---------- TOC ---------- */
.fw-toc {
  max-width: 680px;
  margin: 0 auto 48px;
  padding: 18px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.fw-toc-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 10px;
}
.fw-toc-list {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
  columns: 2;
  column-gap: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.fw-toc-list a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.fw-toc-list a:hover { color: #fde68a; text-decoration: underline; }
@media (max-width: 640px) {
  .fw-toc-list { columns: 1; }
}

/* ---------- Per-unit section ---------- */
.fw-unit {
  margin: 0 0 48px;
  padding: 28px 28px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.22);
  scroll-margin-top: 16px;
}
.fw-unit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.fw-unit-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0;
}
.fw-teks {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(251, 191, 36, 0.78);
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 6px;
  padding: 3px 8px;
  white-space: nowrap;
}
.fw-unit-summary {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.66);
}

/* ---------- Question render ---------- */
.fw-questions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.fw-q {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.fw-q-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: rgba(251, 191, 36, 0.85);
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.22);
}
.fw-q-body { flex: 1; min-width: 0; }
.fw-q-prompt {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  margin: 0 0 12px;
}
.fw-q-choices {
  margin: 0 0 12px;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
}
.fw-q-choices li { padding: 3px 0; }
.fw-choice--correct {
  color: #6ee7b7;
  font-weight: 600;
}
.fw-choice-tick {
  display: inline-block;
  margin-left: 6px;
  color: #34d399;
  font-weight: 700;
}
.fw-q-explanation {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: rgba(96, 165, 250, 0.05);
  border-left: 3px solid rgba(96, 165, 250, 0.4);
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.fw-q-explanation strong { color: #93c5fd; }

/* ---------- Per-unit CTA row ---------- */
.fw-unit-cta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---------- FAQ ---------- */
.fw-faq {
  margin: 64px 0 48px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
}
.fw-faq-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 22px;
}
.fw-faq-q { margin: 0 0 22px; }
.fw-faq-q:last-child { margin-bottom: 0; }
.fw-faq-q h3 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.fw-faq-q p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* ---------- Related grades ---------- */
.fw-related {
  margin: 32px 0 16px;
  text-align: center;
}
.fw-related-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 16px;
}
.fw-related-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.fw-related-pill {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}
.fw-related-pill:hover {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.40);
  background: rgba(251, 191, 36, 0.08);
  text-decoration: none;
}

/* ---------- Hub page grid ---------- */
.fw-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0 56px;
}
.fw-hub-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 16px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 4px 16px rgba(0, 0, 0, 0.28);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fw-hub-card:hover {
  transform: translateY(-2px);
  border-color: rgba(251, 191, 36, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 28px rgba(0, 0, 0, 0.36),
    0 0 32px rgba(251, 191, 36, 0.10);
  text-decoration: none;
}
.fw-hub-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  grid-column: 1;
}
.fw-hub-card-grade {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.14) 0%, rgba(251, 191, 36, 0.03) 100%);
  border: 1px solid rgba(251, 191, 36, 0.32);
  color: #fde68a;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(253, 224, 71, 0.22);
}
.fw-hub-card-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: #ffffff;
}
.fw-hub-card-meta {
  grid-column: 1;
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  padding-left: 58px;
}
.fw-hub-card-arrow {
  grid-column: 2;
  grid-row: 1 / 3;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.45);
  transition: color 200ms, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fw-hub-card:hover .fw-hub-card-arrow {
  color: #fde68a;
  transform: translateX(4px);
}
@media (max-width: 700px) {
  .fw-hub-grid { grid-template-columns: 1fr; gap: 10px; }
  .fw-hub-card { padding: 18px 20px; }
  .fw-hub-card-title { font-size: 19px; }
  .fw-hub-card-grade { width: 40px; height: 40px; font-size: 14px; }
  .fw-hub-card-meta { padding-left: 54px; font-size: 12px; }
}

/* ---------- Mobile sizing ---------- */
@media (max-width: 768px) {
  .fw-main { padding: 0 16px 56px; }
  .fw-hero { padding: 16px 0 24px; }
  .fw-unit { padding: 22px 18px 18px; margin-bottom: 36px; }
  .fw-unit-title { font-size: 23px; }
  .fw-q { padding: 14px 14px; gap: 12px; }
  .fw-q-num { width: 28px; height: 28px; font-size: 12px; }
  .fw-q-prompt { font-size: 15px; }
  .fw-q-choices { font-size: 14px; padding-left: 22px; }
  .fw-q-explanation { font-size: 13px; padding: 8px 10px; }
  .fw-btn { padding: 12px 16px; font-size: 14px; }
  .fw-faq { padding: 22px 18px; margin-top: 48px; }
  .fw-faq-title { font-size: 23px; }
}

/* ---------- Reduced-motion guard ---------- */
@media (prefers-reduced-motion: reduce) {
  .fw-btn, .fw-btn:hover,
  .fw-hub-card, .fw-hub-card:hover,
  .fw-hub-card-arrow, .fw-hub-card:hover .fw-hub-card-arrow,
  .fw-related-pill, .fw-related-pill:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* ---------- Homepage SEO entry (small ribbon below the hero) ----------
   A tasteful, low-weight link block on index.html pointing kids' parents
   to the free worksheets. Sits BELOW the §11/§12 hero (which stays as
   the single focal point) so it doesn't break the focus pass. */
.home-fw-ribbon {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 32px;
  text-align: center;
}
.home-fw-ribbon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  letter-spacing: -0.005em;
  transition:
    color 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.home-fw-ribbon-link:hover {
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.32);
  background: rgba(251, 191, 36, 0.06);
  transform: translateY(-1px);
  text-decoration: none;
}
.home-fw-ribbon-strong { font-weight: 700; color: #ffffff; }
.home-fw-ribbon-arrow { transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
.home-fw-ribbon-link:hover .home-fw-ribbon-arrow { transform: translateX(3px); }
@media (max-width: 768px) {
  .home-fw-ribbon { padding: 0 16px 24px; }
  .home-fw-ribbon-link { font-size: 12px; padding: 8px 14px; }
}

/* ==========================================================================
   §17 SEO upgrade — byline + article prose styling (May 12)
   ==========================================================================
   Visible author byline on the free-worksheet and article pages is a
   strong E-E-A-T signal for educational content (Google's Helpful
   Content guidelines reward visible authorship on YMYL/education
   pages). Prose styling is for the /articles/ pages.
   ========================================================================== */

.fw-byline {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 24px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}
.fw-byline-author {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.28);
  padding-bottom: 1px;
}
.fw-byline-author:hover {
  color: #fde68a;
  border-bottom-color: rgba(253, 224, 71, 0.6);
}
.fw-byline-sep {
  color: rgba(255, 255, 255, 0.28);
}

/* Article prose (article pages /articles/*.html) — readable
   long-form layout with comfortable line length and rhythm. */
.fw-prose {
  max-width: 700px;
}
.fw-prose-section {
  margin: 36px 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.fw-prose-section h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: #ffffff;
  margin: 0 0 14px;
}
.fw-prose-section p {
  margin: 0 0 16px;
}
.fw-prose-section p:last-child { margin-bottom: 0; }
.fw-prose-section strong {
  color: #ffffff;
  font-weight: 600;
}
.fw-prose-section a {
  color: #fde68a;
  text-decoration: underline;
  text-decoration-color: rgba(253, 224, 71, 0.4);
  text-underline-offset: 2px;
}
.fw-prose-section a:hover {
  text-decoration-color: rgba(253, 224, 71, 0.85);
}
.fw-prose-section ul,
.fw-prose-section ol {
  margin: 0 0 20px;
  padding-left: 24px;
}
.fw-prose-section li {
  margin: 8px 0;
}
.fw-prose-section li::marker {
  color: rgba(251, 191, 36, 0.7);
}
@media (max-width: 768px) {
  .fw-prose-section { margin: 28px 0; font-size: 15px; }
  .fw-prose-section h2 { font-size: 23px; }
}

/* ==========================================================================
   §18 "Check your STAAR score" external CTA — homepage hero (May 12)
   ==========================================================================
   Sits below the placement-test link as a parallel secondary action.
   Visually subordinate to the grade-pill grid but immediately scannable
   for parents whose kid already took STAAR. Opens TEA's official
   Texas Assessment portal in a new tab.
   ========================================================================== */

body.home-page .hero-staar-score-line {
  margin: 14px 0 0;
  text-align: center;
}

body.home-page .hero-staar-score-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.10) 0%,
    rgba(96, 165, 250, 0.03) 100%);
  border: 1px solid rgba(96, 165, 250, 0.32);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(147, 197, 253, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.22);
  transition:
    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
    background 200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
    color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.home-page .hero-staar-score-btn:hover {
  transform: translateY(-1px);
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.55);
  background: linear-gradient(
    180deg,
    rgba(96, 165, 250, 0.16) 0%,
    rgba(96, 165, 250, 0.05) 100%);
  box-shadow:
    inset 0 1px 0 rgba(147, 197, 253, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.30);
  text-decoration: none;
}
body.home-page .hero-staar-score-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}
body.home-page .hero-staar-score-btn:hover svg { opacity: 1; }

@media (max-width: 768px) {
  body.home-page .hero-staar-score-line { margin-top: 12px; }
  body.home-page .hero-staar-score-btn { font-size: 12px; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  body.home-page .hero-staar-score-btn,
  body.home-page .hero-staar-score-btn:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   §19 MySpace — kid-facing personal dashboard (May 12)
   ==========================================================================
   Light-theme island scoped to body.myspace-page. Visual model matches the
   ReplyQuik reference dashboard: fixed left sidebar, thin top header bar,
   centered max-width content column with white cards on a slate-50
   background. The rest of GradeEarn keeps its dark navy theme — this
   page is intentionally different because it's a kid's personal space.
   ========================================================================== */

body.myspace-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #f8fafc;
  color: #0f172a;
  min-height: 100vh;
  margin: 0;
  display: block;
}
body.myspace-page * { box-sizing: border-box; }
body.myspace-page a { color: #0f172a; text-decoration: none; }

.ms-shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.ms-sidebar {
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}
.ms-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px 16px;
  font-weight: 700;
  color: #0f172a;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.ms-brand-text { font-weight: 700; }

.ms-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.ms-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  background: transparent;
  text-align: left;
  width: 100%;
  font-family: inherit;
  transition: background 140ms ease, color 140ms ease;
}
.ms-nav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ms-nav-item--active {
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 600;
}
.ms-nav-item svg { flex-shrink: 0; opacity: 0.85; }
.ms-nav-item--active svg { opacity: 1; }

.ms-popover {
  position: absolute;
  bottom: -8px;
  left: 12px;
  transform: translateY(100%);
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  min-width: 180px;
  z-index: 20;
}
.ms-popover-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  color: #475569;
  border-radius: 6px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.ms-popover-item:hover { background: #f1f5f9; color: #0f172a; }

/* ---------- Top header ---------- */
.ms-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ms-top {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}
.ms-top-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
}
.ms-top-title {
  font-weight: 600;
  font-size: 15px;
  color: #0f172a;
  text-align: center;
}
.ms-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}
.ms-top-btn,
.ms-quicknote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 140ms ease, color 140ms ease;
}
.ms-quicknote-btn:hover { background: #f1f5f9; color: #0f172a; }
.ms-top-icon {
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #475569;
  transition: background 140ms ease;
}
.ms-top-icon:hover { background: #f1f5f9; color: #0f172a; }
.ms-top-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

/* ---------- Quick-win banner ---------- */
.ms-quickwin {
  margin: 18px 28px 0;
  padding: 10px 16px;
  background: #f1f5f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #475569;
  gap: 12px;
  flex-wrap: wrap;
}
.ms-quickwin-msg { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ms-quickwin-msg strong { color: #0f172a; font-weight: 600; }
.ms-quickwin-msg a { color: #0f172a; text-decoration: underline; text-decoration-color: #cbd5e1; }
.ms-quickwin-actions { display: inline-flex; align-items: center; gap: 12px; }
.ms-quickwin-actions a { color: #0f172a; font-weight: 500; }
.ms-ghost-btn {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
}
.ms-ghost-btn:hover { background: #ffffff; border-color: #cbd5e1; }

/* ---------- Content column ---------- */
.ms-content {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  padding: 36px 32px 64px;
}
.ms-greeting {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #0f172a;
  margin: 0 0 28px;
}

/* ---------- AI Buddy card ---------- */
.ms-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 28px;
}
.ms-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ms-card-eyebrow svg { color: #0f172a; opacity: 0.7; }

/* Chat thread (above briefing once messages exist) */
.ms-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px 0;
}
.ms-msg {
  max-width: 80%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.ms-msg--user {
  align-self: flex-end;
  background: #0f172a;
  color: #ffffff;
}
.ms-msg--ai {
  align-self: flex-start;
  background: #f1f5f9;
  color: #0f172a;
}
.ms-msg--thinking { opacity: 0.6; font-style: italic; }

/* Briefing block (the gray inner card) */
.ms-briefing {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.ms-briefing-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ms-briefing-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #94a3b8;
}
.ms-briefing-actions { display: inline-flex; gap: 4px; }
.ms-icon-btn {
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
}
.ms-icon-btn:hover { background: #e2e8f0; color: #475569; }
.ms-briefing-body {
  margin: 0;
  font-size: 14px;
  font-style: italic;
  color: #64748b;
  line-height: 1.55;
}

.ms-continue {
  margin: 14px 0 14px;
  font-size: 13px;
  color: #64748b;
}

/* Composer (pill input) */
.ms-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 6px 4px 14px;
}
.ms-composer:focus-within { border-color: #cbd5e1; }
.ms-composer-subject {
  position: relative;
  flex-shrink: 0;
}
.ms-composer-subject-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
}
.ms-composer-subject-list {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  min-width: 160px;
  z-index: 10;
}
.ms-composer-subject-list li {
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 5px;
  cursor: pointer;
}
.ms-composer-subject-list li:hover { background: #f1f5f9; }
.ms-composer-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f172a;
  padding: 8px 4px;
  min-width: 0;
}
.ms-composer-input::placeholder { color: #94a3b8; }
.ms-composer-send {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0f172a;
  color: #ffffff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 140ms ease;
}
.ms-composer-send:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- Stats footer (centered middot row) ---------- */
.ms-stats-footer {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
}
.ms-stats-footer strong { color: #475569; font-weight: 700; }
.ms-stat-sep { margin: 0 10px; color: #cbd5e1; }
.ms-stat-link {
  color: #475569;
  text-decoration: none;
  font-weight: 600;
}
.ms-stat-link:hover { color: #0f172a; }

/* ---------- Subpage layout (shared shell for journal/homework/etc) ---------- */
.ms-subpage {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
  padding: 36px 32px 64px;
}
.ms-subpage-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.ms-subpage-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #0f172a;
}

/* Empty state card */
.ms-empty {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
}
.ms-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f1f5f9;
  color: #94a3b8;
  margin-bottom: 16px;
}
.ms-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #0f172a;
  margin: 0 0 6px;
}
.ms-empty-text {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 18px;
  line-height: 1.5;
}

/* ---------- Primary/secondary buttons ---------- */
.ms-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #0f172a;
  color: #ffffff;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 140ms ease;
}
.ms-primary-btn:hover { opacity: 0.88; }
.ms-secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #e2e8f0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.ms-secondary-btn:hover { border-color: #cbd5e1; }

/* ---------- Lists (journal entries, homework, tasks) ---------- */
.ms-list { display: flex; flex-direction: column; gap: 12px; }
.ms-entry {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
}
.ms-entry header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.ms-entry h3 { margin: 0; font-size: 16px; font-weight: 600; color: #0f172a; }
.ms-entry time { font-size: 12px; color: #94a3b8; }
.ms-entry p { margin: 0; color: #475569; line-height: 1.55; font-size: 14px; }
.ms-entry-delete {
  margin-top: 10px;
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.ms-entry-delete:hover { color: #ef4444; }

.ms-hw {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 14px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
}
.ms-hw--done { opacity: 0.55; }
.ms-hw--done h3 { text-decoration: line-through; }
.ms-hw--overdue { border-color: #fecaca; background: #fef2f2; }
.ms-hw label {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  padding-top: 2px;
}
.ms-hw input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.ms-hw label span {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid #cbd5e1;
  display: inline-block;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease;
}
.ms-hw input:checked + span {
  background: #0f172a;
  border-color: #0f172a;
}
.ms-hw input:checked + span::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ms-hw-body { min-width: 0; }
.ms-hw-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.ms-hw-subject {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f172a;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 8px;
}
.ms-hw-top time { font-size: 12px; color: #94a3b8; }
.ms-hw--overdue .ms-hw-top time { color: #dc2626; font-weight: 600; }
.ms-hw h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #0f172a; }
.ms-hw p { margin: 0; font-size: 13px; color: #64748b; line-height: 1.5; }
.ms-hw-delete {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #cbd5e1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.ms-hw-delete:hover { background: #f1f5f9; color: #ef4444; }

/* ---------- Timetable grid ---------- */
.ms-timetable {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.ms-tt-day {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  min-height: 140px;
}
.ms-tt-day--today { border-color: #0f172a; }
.ms-tt-day header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}
.ms-tt-today {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f172a;
  background: #fef3c7;
  border-radius: 999px;
  padding: 2px 8px;
}
.ms-tt-empty { font-size: 12px; color: #cbd5e1; margin: 0; }
.ms-tt-class {
  position: relative;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.ms-tt-time { color: #94a3b8; font-weight: 500; margin-bottom: 2px; }
.ms-tt-subject { font-weight: 600; color: #0f172a; }
.ms-tt-room { color: #64748b; margin-top: 2px; font-size: 11px; }
.ms-tt-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  background: transparent;
  border: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  color: #cbd5e1;
  cursor: pointer;
}
.ms-tt-delete:hover { background: #ffffff; color: #ef4444; }
@media (max-width: 1080px) {
  .ms-timetable { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .ms-timetable { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tasks ---------- */
.ms-task-add {
  display: flex;
  gap: 8px;
}
.ms-task-add input {
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  min-width: 280px;
}
.ms-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ms-task {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}
.ms-task--done { opacity: 0.55; }
.ms-task--done .ms-task-text { text-decoration: line-through; color: #64748b; }
.ms-task label { position: relative; display: inline-flex; cursor: pointer; }
.ms-task input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.ms-task label span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  display: inline-block;
  position: relative;
  transition: background 140ms ease, border-color 140ms ease;
}
.ms-task input:checked + span {
  background: #0f172a;
  border-color: #0f172a;
}
.ms-task input:checked + span::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.ms-task-text { font-size: 14px; color: #0f172a; }
.ms-task-delete {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #cbd5e1;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.ms-task-delete:hover { background: #f1f5f9; color: #ef4444; }

/* ---------- Overlay (Quick Note + editors) ---------- */
.ms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.40);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 20px 20px;
  z-index: 100;
}
.ms-overlay-card {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  padding: 24px;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.25);
}
.ms-overlay-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.ms-overlay-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #0f172a; }
.ms-overlay-card input,
.ms-overlay-card select,
.ms-overlay-card textarea {
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-family: inherit;
  font-size: 14px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  resize: vertical;
}
.ms-overlay-card input:focus,
.ms-overlay-card select:focus,
.ms-overlay-card textarea:focus { outline: none; border-color: #94a3b8; }
.ms-overlay-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
  .ms-shell { grid-template-columns: 1fr; }
  .ms-sidebar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    height: 56px;
    flex-direction: row;
    padding: 4px 8px;
    overflow-x: auto;
    z-index: 50;
    border-right: none;
    border-top: 1px solid #e2e8f0;
  }
  .ms-brand { display: none; }
  .ms-nav { flex-direction: row; gap: 4px; flex: 1; justify-content: space-around; }
  .ms-nav-item { flex-direction: column; gap: 2px; padding: 4px 6px; font-size: 10px; }
  .ms-nav-item span { font-size: 10px; }
  .ms-popover { bottom: calc(100% + 8px); transform: translateY(0); }
  .ms-content,
  .ms-subpage { padding: 24px 16px 80px; }
  .ms-top { padding: 0 16px; height: 52px; }
  .ms-top-title { font-size: 14px; }
  .ms-quicknote-btn span,
  .ms-top-btn span { display: none; }
  .ms-greeting { font-size: 22px; margin-bottom: 18px; }
  .ms-card { padding: 18px 16px; border-radius: 12px; }
  .ms-quickwin { margin: 14px 16px 0; }
  .ms-composer-subject-trigger { padding: 5px 8px; font-size: 11px; }
  .ms-composer-input { font-size: 13px; }
}

/* ==========================================================================
   §21 Compliance UI — AI disclosure banner + legal-page polish (May 12)
   ========================================================================== */

/* Persistent AI disclosure inside MySpace chat card */
.ms-ai-disclosure {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 12px;
  color: #64748b;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
.ms-ai-disclosure svg { flex-shrink: 0; color: #94a3b8; }
.ms-ai-disclosure a {
  color: #0f172a;
  text-decoration: underline;
  text-decoration-color: #cbd5e1;
  font-weight: 500;
}
.ms-ai-disclosure a:hover {
  text-decoration-color: #0f172a;
}

/* ==========================================================================
   §40 MySpace premium-polish theme (May 12) — dark navy + gold accent.
   Overrides the light-theme rules above so MySpace + all its sub-routes
   (journal/homework/timetable/tasks) match Games / Toys / marketing.
   Subtractive paint pass; structure / interaction logic untouched.
   ========================================================================== */

body.myspace-page {
  background: #060d1f;
  color: #ffffff;
}
body.myspace-page a { color: rgba(255, 255, 255, 0.85); }

/* Sidebar — deep navy, hairline divider, dim inactive items */
body.myspace-page .ms-sidebar {
  background: #060d1f;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
body.myspace-page .ms-brand { color: #ffffff; }
body.myspace-page .ms-brand-text { color: #ffffff; }
body.myspace-page .ms-nav-item {
  color: rgba(255, 255, 255, 0.55);
}
body.myspace-page .ms-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
body.myspace-page .ms-nav-item--active {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
body.myspace-page .ms-nav-item svg { opacity: 0.85; }
body.myspace-page .ms-nav-item--active svg { opacity: 1; color: #fbbf24; }
body.myspace-page .ms-popover {
  background: #0d1d3a;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
body.myspace-page .ms-popover-item { color: rgba(255, 255, 255, 0.7); }
body.myspace-page .ms-popover-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}

/* Top header — navy, hairline divider, white wordmark, white title */
body.myspace-page .ms-top {
  background: #060d1f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.myspace-page .ms-top-brand,
body.myspace-page .ms-top-brand svg { color: #ffffff; stroke: #ffffff; }
body.myspace-page .ms-top-title { color: #ffffff; }
body.myspace-page .ms-top-btn,
body.myspace-page .ms-quicknote-btn {
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
body.myspace-page .ms-quicknote-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
body.myspace-page .ms-top-icon { color: rgba(255, 255, 255, 0.55); }
body.myspace-page .ms-top-icon:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
body.myspace-page .ms-top-avatar {
  background: #0d1d3a;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Greeting block — date eyebrow → greeting (anchored, not floating) */
body.myspace-page .ms-greeting { color: #ffffff; margin: 0 0 4px; }
body.myspace-page .ms-greeting-block { margin-bottom: 12px; }
.ms-date-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 8px;
}

/* Quick-win as a quiet inline line under greeting (no banner) */
.ms-quickwin-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.45);
}
.ms-quickwin-line a {
  color: #fbbf24;
  text-decoration: none;
  font-weight: 500;
}
.ms-quickwin-line a:hover { color: #fde68a; }
.ms-quickwin-x {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  margin-left: auto;
  cursor: pointer;
  font-family: inherit;
}
.ms-quickwin-x:hover { color: rgba(255, 255, 255, 0.7); }
/* Hide the old banner-style quickwin elements in dark theme */
body.myspace-page .ms-quickwin {
  background: transparent;
  padding: 0;
  margin: 0;
}
body.myspace-page .ms-quickwin-actions { display: none; }

/* Briefing as a single inline line, no box, not italic */
body.myspace-page .ms-briefing {
  background: transparent;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
body.myspace-page .ms-briefing-head {
  display: contents; /* flatten so eyebrow + actions sit inline with body */
}
body.myspace-page .ms-briefing-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(252, 211, 77, 0.6);
  font-weight: 500;
}
body.myspace-page .ms-briefing-body {
  margin: 0;
  font-size: 15px;
  font-style: normal; /* italic was reading as "loading state"; kill it */
  color: rgba(255, 255, 255, 0.7);
}
body.myspace-page .ms-briefing-body::before {
  content: '·';
  margin-right: 6px;
  color: rgba(255, 255, 255, 0.2);
}
body.myspace-page .ms-briefing-actions { margin-left: auto; }
body.myspace-page .ms-icon-btn {
  color: rgba(255, 255, 255, 0.3);
}
body.myspace-page .ms-icon-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}
/* Hide the old dismiss icon — briefing has no "x"; refresh stays */
body.myspace-page #ms-briefing-dismiss { display: none; }

/* AI Buddy card — empty state has NO chrome (greeting/chips/composer
   float directly on the page, ChatGPT/Perplexity-style). Only the active
   thread state keeps the dark panel + hairline border. §43 May 12. */
body.myspace-page .ms-card {
  background: transparent;
  border: none;
  box-shadow: none;
}
body.myspace-page.ms-chat-active .ms-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
body.myspace-page .ms-card-eyebrow {
  color: rgba(252, 211, 77, 0.6);
  letter-spacing: 0.2em;
  font-weight: 500;
}
body.myspace-page .ms-card-eyebrow svg { color: #fbbf24; opacity: 0.9; }

/* AI disclosure: demoted from boxed banner inside card to small footnote
   beneath the composer (legally required but no longer dominant) */
body.myspace-page .ms-ai-disclosure {
  background: transparent;
  border: none;
  padding: 8px 4px 0;
  margin: 10px 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
body.myspace-page .ms-ai-disclosure svg { color: rgba(255, 255, 255, 0.25); }
body.myspace-page .ms-ai-disclosure a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
}
body.myspace-page .ms-ai-disclosure a:hover { color: rgba(255, 255, 255, 0.85); }

/* Chat thread bubbles — dark surfaces */
body.myspace-page .ms-msg--user {
  background: #fbbf24;
  color: #0a1628;
}
body.myspace-page .ms-msg--ai {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
body.myspace-page .ms-continue { color: rgba(255, 255, 255, 0.45); }

/* Composer pill — dark theme, gold send button when active */
body.myspace-page .ms-composer {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}
body.myspace-page .ms-composer:focus-within {
  border-color: rgba(251, 191, 36, 0.5);
}
body.myspace-page .ms-composer-subject-trigger {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}
body.myspace-page .ms-composer-subject-list {
  background: #0d1d3a;
  border-color: rgba(255, 255, 255, 0.08);
}
body.myspace-page .ms-composer-subject-list li { color: rgba(255, 255, 255, 0.85); }
body.myspace-page .ms-composer-subject-list li:hover {
  background: rgba(255, 255, 255, 0.04);
}
body.myspace-page .ms-composer-input { color: #ffffff; }
body.myspace-page .ms-composer-input::placeholder { color: rgba(255, 255, 255, 0.3); }
body.myspace-page .ms-composer-send {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
}
body.myspace-page .ms-composer-send:not(:disabled) {
  background: #fbbf24;
  color: #0a1628;
}

/* Stats footer — prominent numbers, small-caps labels, gold streak */
body.myspace-page .ms-stats-footer {
  color: rgba(255, 255, 255, 0.55);
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: baseline;
  justify-content: center;
  font-weight: 400;
  letter-spacing: 0;
  font-size: 12px;
}
body.myspace-page .ms-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
body.myspace-page .ms-stat-num {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
body.myspace-page .ms-stat--accent .ms-stat-num { color: #fbbf24; }
body.myspace-page .ms-stat-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
}
body.myspace-page .ms-stat-sep { color: rgba(255, 255, 255, 0.15); margin: 0 2px; }
body.myspace-page .ms-stat-link {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.02em;
}
body.myspace-page .ms-stat-link:hover { color: #ffffff; }

/* Sub-routes (journal / homework / timetable / tasks) — inherit dark
   theme. Empty-state cards become dark panels, gold filled CTA. */
body.myspace-page .ms-subpage-head h2 { color: #ffffff; }
body.myspace-page .ms-empty {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}
body.myspace-page .ms-empty svg { color: rgba(255, 255, 255, 0.15); }
body.myspace-page .ms-empty h3 { color: #ffffff; }
body.myspace-page .ms-empty p { color: rgba(255, 255, 255, 0.45); }

/* Overlay (Quick Note) — dark panel */
body.myspace-page .ms-overlay-card {
  background: #0d1d3a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
body.myspace-page .ms-overlay-head h3 { color: #ffffff; }
body.myspace-page .ms-overlay-card input,
body.myspace-page .ms-overlay-card select,
body.myspace-page .ms-overlay-card textarea {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
body.myspace-page .ms-overlay-card input::placeholder,
body.myspace-page .ms-overlay-card textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Task list rows — dark hairlines */
body.myspace-page .ms-task {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
body.myspace-page .ms-task-text { color: #ffffff; }
body.myspace-page .ms-task-delete { color: rgba(255, 255, 255, 0.3); }
body.myspace-page .ms-task-delete:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ef4444;
}

/* ==========================================================================
   §41 MySpace chat surface — Perplexity/ChatGPT/Claude anatomy (May 12)
   Empty state ↔ active state, thread, streaming reveal, message actions,
   recent-chats dropdown, scroll-to-bottom, thinking dots. All paint; the
   server-side safety pipeline (crisis-detector + output moderation +
   audit logging) is untouched.
   ========================================================================== */

/* The chat surface owns the AI Buddy region. Two states — empty and
   active — share the same composer and toggle layout via a body class.
   §43 May 12: empty state strips card padding so the greeting/chips/
   composer breathe with the page. Active state keeps padding for the
   thread container. */
body.myspace-page .ms-card {
  display: flex;
  flex-direction: column;
  min-height: 480px;
  padding: 0;
  position: relative;
}
body.myspace-page.ms-chat-active .ms-card {
  min-height: 70vh;
  padding: 18px 22px 20px;
}
/* In active chat mode, the briefing + quick-win + footer stats collapse
   to reduce visual noise; a small back-to-dashboard affordance appears
   at the top of the thread instead. */
body.myspace-page.ms-chat-active .ms-quickwin,
body.myspace-page.ms-chat-active .ms-briefing,
body.myspace-page.ms-chat-active .ms-stats-footer {
  display: none;
}
body.myspace-page.ms-chat-active .ms-greeting-block {
  display: none;
}

/* Empty state — centered greeting + chips + composer; no card around it
   (§43 May 12). Vertical rhythm uses per-element margins instead of a
   flat gap so the spec spacing (sparkle→greeting 12, →sub 8, →chips 32,
   →composer 40) is preserved without the elements feeling cramped. */
.ms-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 24px 12px;
  text-align: center;
}
body.myspace-page.ms-chat-active .ms-chat-empty { display: none; }
.ms-chat-empty-sparkle {
  color: #fbbf24;
  margin: 12px 0 0;
}
.ms-chat-empty-greeting {
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
}
.ms-chat-empty-sub {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 8px 0 0;
}
.ms-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 32px auto 0;
  width: 100%;
  max-width: 680px;
}
/* Composer + AI disclosure: matched 680px max-width on the empty state
   so chips and composer share a visual baseline */
body.myspace-page:not(.ms-chat-active) .ms-composer-wrap {
  width: 100%;
  max-width: 680px;
  margin: 40px auto 0;
}
body.myspace-page:not(.ms-chat-active) .ms-ai-disclosure {
  max-width: 680px;
  margin: 12px auto 0;
  padding-left: 8px;
  padding-right: 8px;
  justify-content: center;
  text-align: center;
}
.ms-chat-suggest-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease;
}
.ms-chat-suggest-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Active state — thread takes the body, composer pins to bottom */
body.myspace-page .ms-chat-thread {
  display: none;
  flex-direction: column;
  gap: 24px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  /* Soft fade at top so messages don't visually collide with the
     dashboard back-link / thread title row */
  mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
body.myspace-page.ms-chat-active .ms-chat-thread { display: flex; }
body.myspace-page .ms-chat-thread::-webkit-scrollbar { width: 6px; }
body.myspace-page .ms-chat-thread::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

/* Back-to-dashboard + thread title sticky row */
.ms-chat-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 8px;
}
body.myspace-page.ms-chat-active .ms-chat-topbar { display: flex; }
.ms-chat-back {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 160ms ease, background 160ms ease;
}
.ms-chat-back:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.04); }
.ms-chat-title {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.85rem;
  font-weight: 500;
  text-align: right;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Message bubbles — user filled right, AI naked left + sparkle */
body.myspace-page .ms-msg {
  max-width: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  display: flex;
  position: relative;
  font-size: 15px;
  line-height: 1.55;
}
body.myspace-page .ms-msg--user {
  align-self: flex-end;
  justify-content: flex-end;
}
body.myspace-page .ms-msg--user .ms-msg-body {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 14px;
  color: #ffffff;
  max-width: 75%;
}
body.myspace-page .ms-msg--ai {
  align-self: flex-start;
}
body.myspace-page .ms-msg--ai .ms-msg-body {
  color: rgba(255, 255, 255, 0.85);
  max-width: 85%;
  padding: 0 4px;
}
.ms-msg-spark {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #fbbf24;
  margin: 4px 8px 0 0;
}
body.myspace-page .ms-msg-body > p { margin: 0 0 6px; }
body.myspace-page .ms-msg-body > p:last-child { margin-bottom: 0; }
body.myspace-page .ms-msg-body code {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9em;
  color: #fde68a;
}
body.myspace-page .ms-msg-body pre {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 6px 0;
}
body.myspace-page .ms-msg-body pre code {
  background: transparent;
  padding: 0;
  color: #ffffff;
}
body.myspace-page .ms-msg-body a {
  color: #fbbf24;
  text-decoration: underline;
  text-decoration-color: rgba(251, 191, 36, 0.4);
}
body.myspace-page .ms-msg-body ul,
body.myspace-page .ms-msg-body ol {
  margin: 4px 0;
  padding-left: 22px;
}
body.myspace-page .ms-msg-body strong { color: #ffffff; font-weight: 600; }

/* Streaming caret (blinks while AI message is mid-stream) */
.ms-stream-caret {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #fbbf24;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: ms-caret-blink 1s steps(2) infinite;
}
@keyframes ms-caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Thinking dots — render in place of the AI message until the first token */
.ms-thinking-dots {
  display: inline-flex;
  gap: 4px;
  padding: 6px 0 2px;
}
.ms-thinking-dots span {
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: ms-think-pulse 1.2s ease-in-out infinite;
}
.ms-thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
.ms-thinking-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ms-think-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40%           { opacity: 1;    transform: scale(1.1); }
}

/* Message actions row — Copy / Regenerate / 👍 / 👎 (AI only, hover only) */
.ms-msg-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
  padding-left: 24px;
  opacity: 0;
  transition: opacity 180ms ease;
}
body.myspace-page .ms-msg--ai:hover .ms-msg-actions,
body.myspace-page .ms-msg--ai:focus-within .ms-msg-actions { opacity: 1; }
@media (hover: none) {
  .ms-msg-actions { opacity: 0.7; } /* touch devices: always-visible */
}
.ms-msg-act-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 160ms ease, background 160ms ease;
}
.ms-msg-act-btn:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}
.ms-msg-act-btn[aria-pressed="true"] { color: #fbbf24; }
.ms-msg-aborted {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
  padding-left: 24px;
}

/* Composer (active state): pinned to bottom of the card */
body.myspace-page.ms-chat-active .ms-composer-wrap {
  margin-top: auto;
  padding-top: 8px;
}

/* The composer pill itself becomes a multi-line capable box */
body.myspace-page .ms-composer {
  align-items: flex-end;
  padding: 8px 8px 8px 14px;
  border-radius: 18px;
}
body.myspace-page .ms-composer-input {
  field-sizing: content;
  min-height: 24px;
  max-height: 144px;
  line-height: 1.5;
  font-size: 14px;
  padding: 6px 6px;
  resize: none;
  overflow-y: auto;
  font-family: inherit;
}
.ms-composer-char-count {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
  padding: 0 6px 6px;
  align-self: flex-end;
  display: none;
}
.ms-composer-char-count.show { display: inline; }
.ms-composer-char-count.over { color: #fca5a5; }
.ms-composer-attach {
  flex-shrink: 0;
  background: transparent;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
}
.ms-composer-attach[disabled] { opacity: 0.6; }
/* Stop button — replaces send while streaming */
body.myspace-page .ms-composer-send.ms-composer-stop {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
body.myspace-page .ms-composer-send.ms-composer-stop:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Scroll-to-bottom floating button */
.ms-scroll-to-bottom {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(13, 29, 58, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: opacity 200ms ease, background 200ms ease;
}
.ms-scroll-to-bottom.show { display: inline-flex; }
.ms-scroll-to-bottom:hover {
  background: rgba(13, 29, 58, 0.95);
  color: #ffffff;
}

/* Recent Chats dropdown in the top header */
.ms-recent-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.ms-recent-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
.ms-recent-panel {
  position: absolute;
  top: 52px;
  right: 16px;
  width: 320px;
  max-height: 60vh;
  background: #0d1d3a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  padding: 8px;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 4px;
}
.ms-recent-panel.show { display: flex; }
.ms-recent-newchat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fbbf24;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 4px;
}
.ms-recent-newchat:hover {
  background: rgba(251, 191, 36, 0.08);
}
.ms-recent-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: calc(60vh - 64px);
}
.ms-recent-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  font-family: inherit;
  position: relative;
}
.ms-recent-item:hover { background: rgba(255, 255, 255, 0.04); }
.ms-recent-item.active {
  background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid #fbbf24;
  padding-left: 8px;
}
.ms-recent-item-title {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}
.ms-recent-item-time {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  margin-top: 2px;
  white-space: nowrap;
}
.ms-recent-item-delete {
  display: none;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ms-recent-item:hover .ms-recent-item-delete { display: inline-flex; }
.ms-recent-item-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
.ms-recent-empty {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  text-align: center;
  padding: 18px 8px;
}

/* Mobile composer + chip wrap */
@media (max-width: 640px) {
  .ms-chat-suggest-chip { font-size: 0.8rem; padding: 7px 12px; }
  .ms-recent-panel { right: 8px; width: calc(100vw - 32px); }
}

/* ==========================================================================
   §42 Timetable + sub-route dark-theme inheritance (May 12)
   Day cards, "Today" eyebrow, empty-state affordance, primary/secondary
   buttons all flip from light to navy + gold accent.
   ========================================================================== */

/* Primary action button — gold filled (used for "Add class" + overlay save) */
body.myspace-page .ms-primary-btn {
  background: #fbbf24;
  color: #0a1628;
  border: 1px solid rgba(251, 191, 36, 0.6);
}
body.myspace-page .ms-primary-btn:hover {
  background: #fde68a;
  opacity: 1;
}

/* Secondary action button — outlined hairline */
body.myspace-page .ms-secondary-btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
body.myspace-page .ms-secondary-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

/* Day cards — dark panel with hairline border, interactive */
body.myspace-page .ms-tt-day {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  min-height: 180px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease;
  display: flex;
  flex-direction: column;
}
body.myspace-page .ms-tt-day:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.2);
}
body.myspace-page .ms-tt-day--today {
  border-left: 2px solid rgba(251, 191, 36, 0.6);
  padding-left: 11px; /* compensate for the +1px left border so day labels align */
}
body.myspace-page .ms-tt-day header {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
}
/* "TODAY" eyebrow text (replaces the cream pill) */
body.myspace-page .ms-tt-today {
  background: transparent;
  padding: 0;
  border-radius: 0;
  color: rgba(252, 211, 77, 0.85);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 500;
  text-transform: uppercase;
}

/* Empty-state affordance — centered Plus + "Add class" prompt that the
   whole card surface clicks through to. JS renders the markup; CSS
   centers and tints it. */
body.myspace-page .ms-tt-empty {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  transition: color 180ms ease;
}
body.myspace-page .ms-tt-empty-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.15);
  transition: color 180ms ease;
}
body.myspace-page .ms-tt-day:hover .ms-tt-empty { color: rgba(255, 255, 255, 0.65); }
body.myspace-page .ms-tt-day:hover .ms-tt-empty-icon { color: rgba(255, 255, 255, 0.45); }

/* Class items inside a day card — dark surfaces */
body.myspace-page .ms-tt-class {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
body.myspace-page .ms-tt-time { color: rgba(255, 255, 255, 0.45); }
body.myspace-page .ms-tt-subject { color: #ffffff; }
body.myspace-page .ms-tt-room { color: rgba(255, 255, 255, 0.5); }
body.myspace-page .ms-tt-delete { color: rgba(255, 255, 255, 0.3); }
body.myspace-page .ms-tt-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

/* Hairline above the "Back" sidebar item (it's always the last child of
   the .ms-nav nav inside the injected shell — last-of-type is reliable) */
body.myspace-page .ms-nav .ms-nav-item:last-of-type {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.5);
}
body.myspace-page .ms-nav .ms-nav-item:last-of-type:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

/* Sub-page heading — "This week", "Your journal", etc. all share .ms-subpage-head h2 */
body.myspace-page .ms-subpage-head h2 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ==========================================================================
   §44 Tasks page — single pill input + section scaffolds + custom checkbox
   (May 12). No card chrome on the empty state; the page reads as a
   structured surface even with zero tasks.
   ========================================================================== */

body.myspace-page .ms-tasks-page { padding-bottom: 96px; }

/* Date eyebrow + title header (no flex-row + button — title anchors the
   page; pill input lives below) */
body.myspace-page .ms-tasks-head { margin-bottom: 16px; }
body.myspace-page .ms-tasks-head .ms-date-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
  margin-bottom: 8px;
}
body.myspace-page .ms-tasks-title {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Single inline pill — Plus icon + textarea-style input; no Add button */
.ms-task-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 680px;
  height: 44px;
  padding: 0 14px;
  margin: 16px 0 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  transition: border-color 160ms ease;
}
.ms-task-pill:focus-within { border-color: rgba(255, 255, 255, 0.25); }
.ms-task-pill-icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  transition: color 160ms ease;
}
.ms-task-pill:focus-within .ms-task-pill-icon { color: rgba(255, 255, 255, 0.7); }
.ms-task-pill input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  padding: 0;
}
.ms-task-pill input::placeholder { color: rgba(255, 255, 255, 0.3); }
.ms-task-pill-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #fbbf24;
  opacity: 0;
  transition: opacity 220ms ease;
}
.ms-task-pill-check.show { opacity: 1; }

/* Section scaffolds (TODAY / UPCOMING / COMPLETED) — always rendered */
.ms-task-section { margin-top: 40px; }
.ms-task-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-task-section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.ms-task-section-count {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ms-task-section-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  padding: 12px 4px 4px;
  margin: 0;
}

/* Task list + rows */
body.myspace-page .ms-task-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
body.myspace-page .ms-task-list:empty { display: none; }
body.myspace-page .ms-task {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 140ms ease;
  position: relative;
}
body.myspace-page .ms-task:hover { background: rgba(255, 255, 255, 0.02); }
body.myspace-page .ms-task:last-child { border-bottom: none; }

/* Custom checkbox — 18px rounded square, gold-filled when checked */
body.myspace-page .ms-task label {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
body.myspace-page .ms-task input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
body.myspace-page .ms-task label span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: border-color 140ms ease, background 140ms ease;
}
body.myspace-page .ms-task label:hover span { border-color: rgba(255, 255, 255, 0.4); }
body.myspace-page .ms-task input:checked + span {
  background: #fbbf24;
  border-color: #fbbf24;
}
body.myspace-page .ms-task input:checked + span::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #0a1628;
  border-bottom: 2px solid #0a1628;
  transform: rotate(-45deg) translate(1px, -1px);
}
body.myspace-page .ms-task .ms-task-text {
  flex: 1;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.4;
}
body.myspace-page .ms-task--done .ms-task-text {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: line-through;
}
body.myspace-page .ms-task-delete {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  width: 24px;
  height: 24px;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
  font-size: 16px;
  line-height: 1;
  padding: 0;
}
body.myspace-page .ms-task:hover .ms-task-delete { opacity: 1; }
body.myspace-page .ms-task-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
@media (hover: none) { body.myspace-page .ms-task-delete { opacity: 0.7; } }

/* Hide the old .ms-empty boxed empty-state on the tasks page (replaced
   by the section scaffolds + per-section empty lines) */
body.myspace-page .ms-tasks-page .ms-empty { display: none; }

/* Mobile: pill input goes full-width */
@media (max-width: 640px) {
  .ms-task-pill { max-width: none; }
  body.myspace-page .ms-tasks-title { font-size: 1.35rem; }
}

/* Homework + journal list rows and entries — same dark surface treatment */
body.myspace-page .ms-list .ms-entry,
body.myspace-page .ms-hw-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
body.myspace-page .ms-hw-card .ms-hw-subject,
body.myspace-page .ms-entry .ms-entry-title { color: #ffffff; }
body.myspace-page .ms-hw-card .ms-hw-meta,
body.myspace-page .ms-entry .ms-entry-meta { color: rgba(255, 255, 255, 0.5); }
body.myspace-page .ms-hw-delete { color: rgba(255, 255, 255, 0.3); }
body.myspace-page .ms-hw-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
/* Legal-page utility class — drops the OG SEO-page intro padding so
   long-form legal docs read cleanly on /legal/*.html. Inherits .fw-page
   shell otherwise. */
body.legal-page .fw-prose-section h2 {
  font-size: 22px;
  margin-top: 8px;
}
body.legal-page .fw-prose-section table {
  font-size: 13px;
}
body.legal-page .fw-prose-section table th {
  font-weight: 600;
  color: #fde68a;
}
body.legal-page .fw-prose-section table td {
  vertical-align: top;
  line-height: 1.5;
}

/* Compliance footer ribbon — surfaces privacy / terms / safety on every
   app page. Kept tiny so it doesn't pull attention from kid-facing UI. */
.compliance-footer {
  text-align: center;
  padding: 18px 16px 14px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  letter-spacing: 0.02em;
}
.compliance-footer a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  margin: 0 6px;
}
.compliance-footer a:hover {
  color: #fde68a;
  text-decoration: underline;
}
.compliance-footer .compliance-sep {
  color: rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   §49 Footer two-tier system + subtractive polish (May 12).
   Marketing footer: cleaned tagline, no reassurance pills, no socials,
   no location string. Product surfaces (practice, achievements) swap
   the marketing footer entirely for a slim 5-link compliance row.
   ========================================================================== */

/* Slim compliance footer for product surfaces — single horizontal row,
   middot-separated, no logo / columns / tagline. Its job is purely to
   give a parent landing on a product page a path to Privacy / Parent
   dashboard / Report without having to navigate back to marketing. */
.product-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin: 48px 0 0;
  padding: 18px 16px 28px;
  font-family: 'Inter', system-ui, sans-serif;
}
.product-footer-link {
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  text-decoration: none;
  transition: color 160ms ease;
  padding: 4px 2px;
}
.product-footer-link:hover { color: rgba(255, 255, 255, 0.75); }
.product-footer-sep { color: rgba(255, 255, 255, 0.15); font-size: 12px; }

/* Defensive: if any page still has the .footer-trust-row / .footer-social
   markup from older HTML (we cleaned 4 pages here but the codebase has
   many more pages), hide these elements globally so they can't re-appear
   as a regression. Markup will be removed page-by-page as those pages are
   touched; this CSS guard means an un-touched page also reads as polished. */
.footer .footer-trust-row,
.footer .footer-trust-pill,
.footer .footer-social,
.footer .footer-social-link,
.footer .footer-meta-divider {
  display: none !important;
}
.footer .footer-meta-item {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-style: italic;
}

/* ==========================================================================
   §48 "How it works" section polish (May 12) — subtractive paint pass.
   Worksheets ribbon + earn-banner CTA removed at the markup layer; this
   block softens the mockup's secondary gold accents and demotes the
   guest "Sign in" nav button globally so all marketing surfaces share
   the same nav-button rhythm.
   ========================================================================== */

/* Guest "Sign in" nav button — globally hairline-outlined, not gold.
   Rendered by js/auth.js as <button class="btn btn-primary user-signin">.
   This override targets only the user-signin variant so other btn-primary
   CTAs (Practice now, Start challenge, etc.) keep their gold fill. */
.user-signin.btn-primary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  font-weight: 500;
}
.user-signin.btn-primary:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

/* Mockup tag (GRADE 3 · MATH) — drop pill chrome, become plain
   uppercase amber/70 micro-text aligned with eyebrows elsewhere. */
.session-preview .mockup-tag,
body.home-page .session-preview .mockup-tag {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: rgba(252, 211, 77, 0.7);
}

/* +15 cents reward in the mockup footer — gold text → muted chip with
   a small gold coin (same shared chip pattern as +50 pts on Home and
   per-trophy +N¢ on /trophies). */
.session-preview .mockup-points {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.session-preview .mockup-points .points-icon { color: rgba(252, 211, 77, 0.8); }
.session-preview .mockup-streak {
  color: rgba(255, 255, 255, 0.65);
}

/* Re-balance section padding now that the worksheets ribbon is gone and
   the earn-banner is removed — give the mockup + copy room to breathe
   without floating in dead space. */
.session-preview {
  padding-top: 64px;
  padding-bottom: 56px;
}

/* ==========================================================================
   §52 Mobile landing premium polish (May 12) — header safe-area, demoted
   Sign in, clean gold headline, tactile grade cards, quiet placement link.
   Paint + spacing pass; no layout restructure. Scoped to body.home-page so
   other pages keep their existing header/hero treatments.
   ========================================================================== */

/* Header — respect the iOS safe area so the Sign-in button doesn't kiss
   the status bar. Pads the header by the device's safe-area inset PLUS
   a few extra pixels of breathing room. Desktop is unaffected because
   safe-area-inset-top is 0 there. */
body.home-page .site-header {
  padding-top: env(safe-area-inset-top, 0);
}
body.home-page .site-header .container {
  height: auto;
  min-height: 64px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 16px;
  padding-right: 16px;
}

/* Sign-in button — global softening from §48 already handles
   .user-signin.btn-primary. No extra work needed here. */

/* Headline: gold the WHOLE second clause instead of partial-gold on
   the word "practicing". Cleaner premium read. */
body.home-page .hero-headline-bold--gold {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
}
/* Defensive: kill the shimmer-word treatment on this surface so it
   doesn't compete with the cleaner full-clause gold. The shimmer
   keyframe stays defined for any legacy usage. */
body.home-page .hero-headline-bold--gold .hero-shimmer-word {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: inherit;
  color: inherit;
  animation: none;
}

/* Grade pills — tactile depth + active-press feedback. Same pill on
   every grade (no special Algebra 1 outline). */
body.home-page .hero-grade-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px -2px rgba(0, 0, 0, 0.25);
  transition: background 180ms ease, border-color 180ms ease, transform 100ms ease;
}
body.home-page .hero-grade-pill:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: rgba(255, 255, 255, 0.20);
}
body.home-page .hero-grade-pill:active {
  transform: scale(0.97);
  background: rgba(255, 255, 255, 0.06);
}
/* Drop the Algebra-1 gold accent treatment (was on .hero-grade-pill--accent).
   The class is removed from the markup as of §52, but defensive in case
   any cached HTML still has it. */
body.home-page .hero-grade-pill--accent {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: inherit !important;
}

/* "Take the placement test" line — drop gold inline, render as muted
   secondary line with underline-on-hover. */
body.home-page .hero-placement-line {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
}
body.home-page .hero-placement-line a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  text-underline-offset: 2px;
}
body.home-page .hero-placement-line a:hover {
  text-decoration: underline;
}
body.home-page .placement-arrow {
  color: rgba(255, 255, 255, 0.75);
  margin-left: 2px;
}

/* Mobile-only spacing tightening — give the hero room to breathe at
   phone widths now that the teks-badge + check-staar-score CTAs are
   gone. */
@media (max-width: 640px) {
  body.home-page .hero {
    padding-bottom: 60px;
    min-height: auto;
  }
  body.home-page .hero-headline--focus {
    font-size: clamp(28px, 7vw, 38px) !important;
    line-height: 1.1;
  }
  body.home-page .hero-headline-light { display: block; }
  body.home-page .hero-headline-bold--gold { display: block; margin-top: 4px; }
}

/* ==========================================================================
   §53 Home cosmetic warmth pass (May 12) — add tactility back without
   structural changes. The §45 + §48 polish made the page minimal and
   business-like; §53 reintroduces depth (gradients, inset highlights),
   per-card hue tints (emerald/teal/amber/indigo/violet at 4-6% opacity),
   gradient progress bars with weight, a gradient avatar orb, and
   slight CTA glow. No new sections, no new copy, no new pills.
   ========================================================================== */

/* Stat card base — top-light/bottom-shadow gradient + inset top highlight.
   The pseudo-element overlay carries the per-card hue tint. */
body.home-page #dashboard .stat-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px -8px rgba(0, 0, 0, 0.35);
}
body.home-page #dashboard .stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 20% 0%, var(--card-tint, transparent) 0%, transparent 55%);
  opacity: 0.9;
}
body.home-page #dashboard .stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 12px 32px -10px rgba(0, 0, 0, 0.55);
}

/* Per-card hue tints — barely perceptible 4-6% washes that warm the row
   without screaming color. Card order in markup:
   1) Lifetime correct  → emerald
   2) Accuracy          → teal
   3) Wallet balance    → amber (already gold-leaning; keep + reinforce)
   4) Time practicing   → indigo */
body.home-page #dashboard .stats-grid .stat-card:nth-child(1) {
  --card-tint: rgba(52, 211, 153, 0.10);
}
body.home-page #dashboard .stats-grid .stat-card:nth-child(2) {
  --card-tint: rgba(45, 212, 191, 0.10);
}
body.home-page #dashboard .stats-grid .stat-card:nth-child(3) {
  --card-tint: rgba(252, 211, 77, 0.14);
}
body.home-page #dashboard .stats-grid .stat-card:nth-child(4) {
  --card-tint: rgba(129, 140, 248, 0.10);
}

/* §58 May 12 — pulled back. 52px was over-corrected; the stat numbers
   were dominating the page. New sizing inherits from base 48px and
   then §58 (below) tightens further to 36px desktop / 32px mobile. */
body.home-page #dashboard .stat-card-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
body.home-page #dashboard .stat-card--wallet .stat-card-value {
  /* Wallet number stays gold per §45 rule; texture matches the others */
  font-variant-numeric: tabular-nums;
}
body.home-page #dashboard .stat-card-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  margin-bottom: 4px;
}

/* Today's challenge card — gradient + tint + inset highlight, same
   chrome family as stat cards but its own amber wash. */
body.home-page #dashboard .daily-challenge {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.012) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 22px -10px rgba(0, 0, 0, 0.4);
}
body.home-page #dashboard .daily-challenge::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 0%, rgba(252, 211, 77, 0.10) 0%, transparent 50%);
}

/* Challenge progress bar — depth + height + gradient fill + inset shine */
body.home-page #dashboard .challenge-progress-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}
body.home-page #dashboard .challenge-progress-fill {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.85) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 12px -2px rgba(252, 211, 77, 0.35);
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Level pill — gradient orb avatar with soft glow + sphere highlight */
body.home-page #dashboard .level-pill {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.015) 100%);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}
body.home-page #dashboard .level-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 16% 0%, rgba(167, 139, 250, 0.10) 0%, transparent 60%);
}
body.home-page #dashboard .level-badge {
  background: radial-gradient(circle at 30% 25%, #a78bfa 0%, #8b5cf6 45%, #7c3aed 100%);
  border: 2px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(76, 29, 149, 0.4),
    0 0 18px -4px rgba(167, 139, 250, 0.55),
    0 4px 12px -2px rgba(99, 102, 241, 0.35);
  position: relative;
  z-index: 1;
}
/* Sphere top-light highlight on the level orb */
body.home-page #dashboard .level-badge::before {
  content: '';
  position: absolute;
  top: 2px; left: 6px; right: 6px;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center top, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  pointer-events: none;
}

/* Level progress bar — give it weight + a violet gradient fill */
body.home-page #dashboard .level-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
}
body.home-page #dashboard .level-progress-fill {
  background: linear-gradient(90deg, #a78bfa 0%, #7c3aed 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 8px -2px rgba(167, 139, 250, 0.5);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Practice now + Start challenge CTAs — gold-filled with inset shine
   + soft outer glow + active-press scale */
body.home-page .dash-practice-cta,
body.home-page #dashboard .challenge-cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(146, 64, 14, 0.2),
    0 4px 18px -4px rgba(252, 211, 77, 0.45),
    0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 100ms ease, box-shadow 200ms ease;
}
body.home-page .dash-practice-cta:hover,
body.home-page #dashboard .challenge-cta:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(146, 64, 14, 0.25),
    0 6px 28px -4px rgba(252, 211, 77, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.25);
}
body.home-page .dash-practice-cta:active,
body.home-page #dashboard .challenge-cta:active {
  transform: scale(0.98);
}

/* Math / Reading segmented toggle — add depth to the active chip */
body.home-page #dashboard .subject-segment.active {
  background: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.2);
}

/* +50 pts reward chip — gentle breathing pulse when challenge incomplete.
   3s cycle, very subtle (0.92 → 1.0 opacity). Halts when .challenge-cta
   styling resolves to a "completed" state (no class for this today; the
   animation is non-aggressive enough to stay on throughout). */
body.home-page #dashboard .challenge-reward {
  animation: challenge-reward-pulse 3.2s ease-in-out infinite;
}
@keyframes challenge-reward-pulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-page #dashboard .challenge-reward { animation: none; }
}

/* "Math Rookie" inline star — small amber accent next to the title.
   ::after pseudo-element so no markup change needed. */
body.home-page #dashboard .level-label::after {
  content: ' ★';
  color: rgba(252, 211, 77, 0.65);
  font-size: 11px;
  margin-left: 4px;
  letter-spacing: 0;
}

/* ==========================================================================
   §54 MySpace empty-state calm pass (May 12) — aggressive subtractive.
   Body had thirteen textual elements competing for attention before
   the kid did anything. This block softens the disclaimer further,
   verifies the date eyebrow is at the quietest tier, and pulls the
   empty-state block toward the visual center when surrounding pieces
   collapse. Quick Win / briefing / footer-stats are gated at the JS
   layer (js/myspace.js); the disclaimer subtitle is removed in HTML.
   ========================================================================== */

/* AI disclaimer — quieter still. text-white/25 + 11px per spec. */
body.myspace-page .ms-ai-disclosure {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.25);
}
body.myspace-page .ms-ai-disclosure svg { color: rgba(255, 255, 255, 0.18); }
body.myspace-page .ms-ai-disclosure a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration-color: rgba(255, 255, 255, 0.15);
}
body.myspace-page .ms-ai-disclosure a:hover {
  color: rgba(255, 255, 255, 0.65);
}

/* Date eyebrow — dim to white/30 (was white/35 in §40). Matches the
   "barely there" rhythm of the rest of the calm pass. */
body.myspace-page .ms-date-eyebrow {
  color: rgba(255, 255, 255, 0.3);
}

/* Greeting block + empty-state vertical centering. When Quick Win,
   briefing, footer stats are all gated off, the chat-empty + composer
   should occupy the visual center instead of hugging the top. */
body.myspace-page:not(.ms-chat-active) .ms-chat-empty {
  margin-top: 6vh;
  margin-bottom: 6vh;
}
body.myspace-page:not(.ms-chat-active) .ms-content {
  min-height: 70vh;
}
@media (max-width: 640px) {
  body.myspace-page:not(.ms-chat-active) .ms-chat-empty {
    margin-top: 4vh;
    margin-bottom: 4vh;
  }
}

/* ==========================================================================
   §56 MySpace chat surface 7→10 polish pass (May 12).
   Subtractive: kill the active-state card chrome, the duplicate thread
   title, the uniform 24px gap. Additive: sticky composer dock with
   backdrop-blur, turn-pairing rhythm (32px between turns / 12px within),
   crisis safety surface, user-bubble polish, dynamic avatar.
   Server-side moderation pipeline + audit logging untouched.
   ========================================================================== */

/* Active-state card chrome strip — the thread should flow on the page,
   not inside a bordered panel. Overrides both §40 (.ms-card border) and
   §43 (.ms-chat-active .ms-card bg+border) using cascade order alone. */
body.myspace-page.ms-chat-active .ms-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
}

/* Thread — turn-pairing rhythm. Adjacent role-change = 32px (new turn);
   same-role continuation = 12px (within a turn). The flex gap that used
   to set a uniform 24px is overridden to 0 so per-message margins win. */
body.myspace-page.ms-chat-active .ms-chat-thread {
  gap: 0;
  max-height: none;
  overflow-y: visible;
  padding: 16px 0 24px;
  /* drop the §41 top/bottom fade — the thread is no longer inside a
     bordered card, so the soft-fade was masking nothing useful */
  mask-image: none;
  -webkit-mask-image: none;
}
body.myspace-page.ms-chat-active .ms-msg { margin-top: 12px; }
body.myspace-page.ms-chat-active .ms-msg:first-child { margin-top: 0; }
body.myspace-page.ms-chat-active .ms-msg--user + .ms-msg--ai,
body.myspace-page.ms-chat-active .ms-msg--ai + .ms-msg--user {
  margin-top: 32px;
}

/* User bubble — max-w 80% + lighter border (was 75% + 0.10 border) */
body.myspace-page .ms-msg--user .ms-msg-body {
  max-width: 80%;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Sparkle: softer amber (0.7 alpha = the amber-300/70 spec read) */
.ms-msg-spark,
.ms-chat-empty-sparkle {
  color: rgba(252, 211, 77, 0.7);
}

/* Sticky composer dock — composer + AI disclaimer ride together at
   the viewport bottom as the kid scrolls through long threads. Backdrop
   blur + gradient fade so messages bleed up through the bar visually
   without colliding with the input. */
.ms-composer-dock {
  margin-top: auto;
}
body.myspace-page.ms-chat-active .ms-composer-dock {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: 0 -16px;
  padding: 16px 16px 12px;
  background: linear-gradient(180deg,
    rgba(6, 13, 31, 0) 0%,
    rgba(6, 13, 31, 0.75) 30%,
    rgba(6, 13, 31, 0.92) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Empty state — center the dock with the chips; same composer surface */
body.myspace-page:not(.ms-chat-active) .ms-composer-dock {
  width: 100%;
  max-width: 680px;
  margin: 40px auto 0;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Disclaimer inside the dock — sit directly under the composer with
   barely-there styling. Active state stays sticky-pinned; empty state
   sits inline below the composer-wrap as before. */
body.myspace-page .ms-composer-dock .ms-ai-disclosure {
  margin: 8px 0 0;
  padding: 0 4px;
}
body.myspace-page.ms-chat-active .ms-composer-dock .ms-ai-disclosure {
  background: transparent;
  border: none;
  padding: 0 4px;
  margin: 6px 0 0;
}
/* In active state the §41 "active composer-wrap → margin-top:auto" rule
   is moot because the dock owns the auto-margin now. Reset the inner
   wrap so it doesn't double-push. */
body.myspace-page.ms-chat-active .ms-composer-wrap {
  margin-top: 0;
  padding-top: 0;
}
/* Scroll-to-bottom button — float clear of the now-sticky dock */
body.myspace-page.ms-chat-active .ms-scroll-to-bottom {
  position: fixed;
  bottom: 120px;
  left: auto;
  right: 32px;
  transform: none;
}

/* Topbar — only ← Dashboard remains. Drop the bottom hairline so the
   thread doesn't read as a separate card. */
body.myspace-page.ms-chat-active .ms-chat-topbar {
  border-bottom: none;
  padding: 0 0 12px;
  margin-bottom: 0;
}

/* Crisis safety surface — red-tinted card stacked into the thread as
   the AI's turn. Anchored visually but not loud (the kid is already in
   a hard moment; the card needs to feel held, not alarming). */
.ms-msg--crisis { align-self: stretch; }
.ms-crisis-card {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 3px solid rgba(252, 165, 165, 0.85);
  border-radius: 12px;
  padding: 16px 18px;
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 8px 0;
}
.ms-crisis-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fca5a5;
  font-size: 14px;
  margin-bottom: 8px;
}
.ms-crisis-head strong { color: #fecaca; font-weight: 600; }
.ms-crisis-body {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  line-height: 1.55;
}
.ms-crisis-list {
  margin: 0 0 12px;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
}
.ms-crisis-list li {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.ms-crisis-list strong { color: #ffffff; }
.ms-crisis-footnote {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}
.ms-crisis-countdown {
  color: #fca5a5;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-style: normal;
}

/* Mobile tweaks for the dock + sticky scroll-to-bottom */
@media (max-width: 640px) {
  body.myspace-page.ms-chat-active .ms-composer-dock {
    margin: 0 -12px;
    padding: 12px 12px 10px;
  }
  body.myspace-page.ms-chat-active .ms-scroll-to-bottom {
    bottom: 96px;
    right: 16px;
  }
  .ms-crisis-card { padding: 14px 14px; }
}

/* ==========================================================================
   §57 MySpace sub-route shared scaffold (May 12).
   Homework + Journal were stuck on the old "bordered empty-state card
   + invisible heading + gold-filled CTA + zero list architecture"
   pattern that Tasks already escaped. This block:
   1. Extracts the section scaffold into a generic `.ms-section` set
      so future sub-routes get the polish for free (option 1 from the
      audit — "shared component" applied at the CSS layer).
   2. Adds the shared page-head pattern: date eyebrow + title + top-right
      outlined Add pill.
   3. Hides the old .ms-empty boxed empty-state on every sub-route
      under .ms-jr-page / .ms-hw-page so any lingering markup that
      didn't get replaced renders nothing instead of regressing.
   ========================================================================== */

/* Page-head pattern (eyebrow + title + top-right action) */
body.myspace-page .ms-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
body.myspace-page .ms-page-head .ms-date-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 500;
  margin-bottom: 8px;
}
body.myspace-page .ms-page-title {
  color: #ffffff;
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Top-right outlined Add pill — NOT gold-filled. Gold-filled CTAs
   inside content cards read as a sales pitch on a kid's product page.
   Keeps the gold reserved for genuine wallet/reward affordances. */
body.myspace-page .ms-top-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}
body.myspace-page .ms-top-action:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
body.myspace-page .ms-top-action svg { color: rgba(255, 255, 255, 0.7); }

/* Shared section scaffold — same pattern as §44 .ms-task-section. The
   `.ms-section` namespace is generic so homework + journal + future
   sub-routes can share without copy-paste. (The §44 .ms-task-* rules
   stay live for tasks.html which still uses that namespace.) */
.ms-section { margin-top: 40px; }
.ms-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ms-section-eyebrow {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.ms-section-count {
  color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.ms-section-empty {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.3);
  padding: 12px 4px 4px;
  margin: 0;
}

/* Hide any straggler .ms-empty wrapper if it's still in markup on a
   page that's been refactored to scaffolds. The audit found three
   sub-routes (homework, journal, plus older revs) shipping it. */
body.myspace-page .ms-hw-page .ms-empty,
body.myspace-page .ms-jr-page .ms-empty { display: none; }

/* ----- Homework row pattern -------------------------------------------- */
body.myspace-page .ms-hw-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
body.myspace-page .ms-hw-list:empty { display: none; }
body.myspace-page .ms-hw-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 140ms ease;
  position: relative;
}
body.myspace-page .ms-hw-row:hover { background: rgba(255, 255, 255, 0.02); }
body.myspace-page .ms-hw-row:last-child { border-bottom: none; }

.ms-hw-chip {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  white-space: nowrap;
}
body.myspace-page .ms-hw-title {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.myspace-page .ms-hw-row--done .ms-hw-title {
  color: rgba(255, 255, 255, 0.35);
  text-decoration: line-through;
}
.ms-due {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ms-due--overdue { color: rgba(252, 211, 77, 0.85); font-weight: 500; }
.ms-due--muted { color: rgba(255, 255, 255, 0.25); }

/* Shared row check + delete affordances. Re-uses the §44 task
   checkbox + delete visual exactly so homework rows match tasks rows. */
body.myspace-page .ms-row-check {
  position: relative;
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
body.myspace-page .ms-row-check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
body.myspace-page .ms-row-check span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  transition: border-color 140ms ease, background 140ms ease;
}
body.myspace-page .ms-row-check:hover span { border-color: rgba(255, 255, 255, 0.4); }
body.myspace-page .ms-row-check input:checked + span {
  background: #fbbf24;
  border-color: #fbbf24;
}
body.myspace-page .ms-row-check input:checked + span::after {
  content: '';
  display: block;
  width: 9px;
  height: 5px;
  border-left: 2px solid #0a1628;
  border-bottom: 2px solid #0a1628;
  transform: rotate(-45deg) translate(1px, -1px);
}
body.myspace-page .ms-row-delete {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.3);
  width: 26px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: opacity 140ms ease, color 140ms ease, background 140ms ease;
}
body.myspace-page .ms-hw-row:hover .ms-row-delete,
body.myspace-page .ms-jr-row:hover .ms-row-delete { opacity: 1; }
body.myspace-page .ms-row-delete:hover {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
@media (hover: none) {
  body.myspace-page .ms-row-delete { opacity: 0.7; }
}

/* ----- Journal row pattern --------------------------------------------- */
body.myspace-page .ms-jr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
body.myspace-page .ms-jr-list:empty { display: none; }
body.myspace-page .ms-jr-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background 140ms ease;
}
body.myspace-page .ms-jr-row:hover { background: rgba(255, 255, 255, 0.02); }
body.myspace-page .ms-jr-row:last-child { border-bottom: none; }
.ms-jr-row-main { flex: 1; min-width: 0; }
.ms-jr-row-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.ms-jr-row-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.ms-jr-row-date {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ms-jr-row-excerpt {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile — homework row collapses to two rows */
@media (max-width: 640px) {
  body.myspace-page .ms-page-head { flex-direction: column; align-items: flex-start; }
  body.myspace-page .ms-hw-row {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas:
      "chip title check delete"
      ".    due   due   .     ";
    row-gap: 4px;
  }
  body.myspace-page .ms-hw-chip { grid-area: chip; }
  body.myspace-page .ms-hw-title { grid-area: title; white-space: normal; }
  body.myspace-page .ms-hw-row .ms-row-check { grid-area: check; }
  body.myspace-page .ms-hw-row .ms-row-delete { grid-area: delete; opacity: 0.7; }
  body.myspace-page .ms-hw-row .ms-due { grid-area: due; padding-left: 4px; }
  body.myspace-page .ms-jr-row-title { white-space: normal; }
}

/* ==========================================================================
   §58 Home dashboard — tighten scale (May 12). The §53 warmth pass
   was right on hue/depth but over-corrected the stat numbers (52px)
   and inherited generous padding from base. This block pulls back
   the absolute sizing ~20% while keeping every warmth treatment.
   ========================================================================== */

/* Stat numbers: 48px base + 52px §53 → 36px desktop / 32px phone.
   Still confident as the visual hero of each card; no longer dominating
   the page. Uses !important to win against the base + §53 rules
   without re-touching them (those rules stay live for any future
   stat-card surface that needs different sizing). */
body.home-page #dashboard .stat-card-value {
  font-size: 36px !important;
  letter-spacing: -0.02em !important;
}
@media (max-width: 640px) {
  body.home-page #dashboard .stat-card-value { font-size: 32px !important; }
}

/* Stat card padding: 24px → 20px. Snug + confident, not airy. */
body.home-page #dashboard .stat-card {
  padding: 20px !important;
  gap: 10px !important;
}

/* Stat card label (eyebrow): 11px is fine; ensure §53 didn't bloat it. */
body.home-page #dashboard .stat-card-label {
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* Stat card meta line (the "out of 831 questions" / "lifetime average"
   footer). Shrink slightly so the card reads as a tighter triplet. */
body.home-page #dashboard .stat-card-meta { font-size: 11px; }

/* Today's challenge card — 28px/32px padding → 22px/26px. Title 32px
   → 26px. Subtitle leading tightens. CTA shrinks. */
body.home-page #dashboard .daily-challenge {
  padding: 22px 26px;
  gap: 24px;
}
body.home-page #dashboard .challenge-title {
  font-size: 26px;
  line-height: 1.15;
}
body.home-page #dashboard .challenge-subtitle {
  font-size: 13px;
  line-height: 1.5;
}
body.home-page #dashboard .challenge-cta {
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
}
body.home-page #dashboard .challenge-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
}

/* Practice now button (right side of the welcome region) — back from
   1.05rem / 14px-22px to ~0.9rem / 11px-18px. Keep the warmth shadow
   from §53. */
body.home-page .dash-practice-cta {
  font-size: 0.9rem;
  padding: 11px 18px;
}

/* Math / Reading subject toggle — tighter active chip */
body.home-page #dashboard .subject-segment {
  padding: 6px 12px;
  font-size: 13px;
}

/* Wallet stat number stays gold; explicitly re-state at the new size
   so any cascade order surprise doesn't drop the gold color. */
body.home-page #dashboard .stat-card--wallet .stat-card-value {
  color: #fbbf24;
  font-size: 36px !important;
}
@media (max-width: 640px) {
  body.home-page #dashboard .stat-card--wallet .stat-card-value {
    font-size: 32px !important;
  }
}

/* ==========================================================================
   §59 Home dashboard — quiet pass (May 13). Six competing regions →
   one ordered scan. Subtractive: drop the four stat-card corner icons
   (eyebrow already names them), drop the redundant "LIFETIME STATS"
   eyebrow, collapse Today's Challenge from a giant amber card into
   a single quiet row. Keep every §53 warmth treatment.
   ========================================================================== */

/* Drop the "LIFETIME STATS" eyebrow above Welcome. "Welcome back,
   aaima" IS the eyebrow — labeling it again is filler. */
body.home-page .welcome-eyebrow--quiet { display: none; }

/* Stat cards: drop the corner icons entirely. Eyebrow + number + meta
   reads cleaner. The icons were duplicate signal — every card already
   has a 10px tracked-uppercase label naming what the number is. */
body.home-page #dashboard .stat-card-icon { display: none; }

/* Stat card header → just the eyebrow, no flex justify */
body.home-page #dashboard .stat-card-header {
  display: block;
}

/* Pull the number scale down another notch. 36px was still
   dominating the page at the §58 size. Numbers at 30px desktop /
   28px phone now feel proportional to the card. */
body.home-page #dashboard .stat-card-value {
  font-size: 30px !important;
}
body.home-page #dashboard .stat-card--wallet .stat-card-value {
  font-size: 30px !important;
}
@media (max-width: 640px) {
  body.home-page #dashboard .stat-card-value { font-size: 28px !important; }
  body.home-page #dashboard .stat-card--wallet .stat-card-value {
    font-size: 28px !important;
  }
}

/* Tighten the stat card vertical rhythm — eyebrow → number → meta
   now reads as one unit instead of three stacked rows. */
body.home-page #dashboard .stat-card {
  padding: 18px !important;
  gap: 6px !important;
}

/* ---- Today's challenge — collapse into a single quiet row. Was a
   tall amber-tinted card with eyebrow + h3 + subtitle + progress +
   reward chip + CTA + timer. New shape: fire icon · "Today: 0/10
   for +50 pts" · thin progress bar · Start →. The full headline +
   subtitle disappear; the kid already knows what 0/10 means and
   the CTA names the action. */
body.home-page #dashboard .daily-challenge {
  padding: 14px 18px !important;
  grid-template-columns: 1fr auto !important;
  gap: 16px !important;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.05) 0%, rgba(20, 29, 51, 0.4) 100%) !important;
  border-color: rgba(251, 191, 36, 0.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 4px 12px -6px rgba(0, 0, 0, 0.3) !important;
}

/* Suppress the glow blob; the card is no longer a hero */
body.home-page #dashboard .challenge-glow { display: none; }

/* Eyebrow keeps its fire icon but becomes inline-with-progress.
   Hide the long title + subtitle entirely. */
body.home-page #dashboard .challenge-title,
body.home-page #dashboard .challenge-subtitle { display: none; }

/* Build the new row from the existing pieces: .challenge-eyebrow
   becomes the row label, .challenge-progress sits next to it. */
body.home-page #dashboard .challenge-content {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
body.home-page #dashboard .challenge-eyebrow {
  margin: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.15em !important;
  color: rgba(252, 211, 77, 0.85) !important;
  white-space: nowrap;
}
body.home-page #dashboard .challenge-fire {
  font-size: 12px !important;
  filter: none !important;
}
body.home-page #dashboard .challenge-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 200px;
}
body.home-page #dashboard .challenge-progress-track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.home-page #dashboard .challenge-progress-bar {
  flex: 1;
  height: 6px !important;
  max-width: 240px;
}
body.home-page #dashboard .challenge-progress-text {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  white-space: nowrap;
}
/* Reward chip stays inline; shrink it */
body.home-page #dashboard .challenge-reward {
  padding: 3px 8px !important;
  font-size: 11px !important;
}
body.home-page #dashboard .reward-coin { font-size: 11px !important; }
body.home-page #dashboard .reward-amount { font-size: 11px !important; }

/* Right side: shrink the CTA + hide the timer line (the bar's
   "0/10 today" already tells the same story; the reset timer is
   noise on a kid-facing surface). */
body.home-page #dashboard .challenge-actions {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
body.home-page #dashboard .challenge-cta {
  height: 32px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
body.home-page #dashboard .challenge-timer { display: none; }

/* Tighten the vertical rhythm between regions */
body.home-page #dashboard .daily-challenge { margin: 0 32px 24px !important; }
body.home-page #dashboard .stats-grid { gap: 12px; }

/* Mobile: stack daily-challenge content + actions cleanly */
@media (max-width: 768px) {
  body.home-page #dashboard .daily-challenge {
    grid-template-columns: 1fr !important;
    padding: 12px 16px !important;
    margin: 0 16px 20px !important;
  }
  body.home-page #dashboard .challenge-actions {
    justify-content: flex-end !important;
  }
}

/* ==========================================================================
   §60 Home dashboard — minimalist pass on the lower regions (May 13).
   The §59 calm pass cleaned the top (Welcome → Level → CTA → Stats).
   The lower regions ("Your grade and beyond" + "Your journey") were
   still busy: every grade tile had a "STATE TEST · MATH" eyebrow +
   grade-letter chip + "4 reporting categories · Ages 5–6" meta, and
   the journey card had a sprout emoji + subtitle + three SVG icons +
   three nag-copy hint lines. JS-side strip in grade-card.js + HTML
   strip in index.html removed the markup; this CSS block tightens
   what's left so the surviving elements read as one quiet row.
   ========================================================================== */

/* Grade tile — title + progress only. Tighter padding now that the
   header row + meta line are gone. */
body.home-page #dashboard .dashboard-grade-tile {
  padding: 14px 16px;
  gap: 8px;
}
body.home-page #dashboard .dashboard-grade-tile-title {
  font-size: 14px !important;
  font-weight: 500 !important;
}
/* Progress text shrinks; bar stays the gradient warmth treatment */
body.home-page #dashboard .tile-progress-text {
  font-size: 10px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 0.02em;
}

/* Journey panel — flat row of 3 quiet stats. Drop the per-stat
   icon column + background panel chrome. The label + number reads
   as one unit instead of the old card-within-a-card. */
body.home-page #dashboard .journey-stats {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  margin-bottom: 18px;
}
body.home-page #dashboard .journey-stat {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
}
body.home-page #dashboard .journey-stat::before { display: none !important; }
body.home-page #dashboard .journey-stat--streak { background: transparent !important; }
body.home-page #dashboard .journey-stat-content { gap: 4px; }
body.home-page #dashboard .journey-stat-label {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-transform: uppercase;
  font-weight: 500 !important;
}
body.home-page #dashboard .journey-stat-value {
  font-size: 28px !important;
  font-weight: 400 !important;
  font-family: 'Instrument Serif', serif !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
body.home-page #dashboard .journey-stat-unit {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-left: 6px;
  font-family: 'Inter', sans-serif !important;
}

/* Panel headers — drop the subtitle slot via the markup change; here
   just ensure the title sits cleanly at the top without bottom-padding
   reserved for a now-absent subtitle. */
body.home-page #dashboard .dashboard-panel-header { margin-bottom: 16px !important; }
body.home-page #dashboard .dashboard-panel-title {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
}

/* "Keep going" CTA — pull back to match the new tighter rhythm */
body.home-page #dashboard .journey-cta {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
}

@media (max-width: 768px) {
  body.home-page #dashboard .journey-stats {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  body.home-page #dashboard .journey-stat-value { font-size: 24px !important; }
}

/* ==========================================================================
   §61 Stat cards — tighten further (May 13). The §59 pass took them
   from 36 → 30px and reduced padding 24 → 18. Still reading as too
   large in the row; user wants smaller. This block: number 30 → 24
   (22 mobile), padding 18 → 14, eyebrow + meta one notch smaller,
   gap 6 → 4. Cards now feel like a quiet stat strip, not four hero
   tiles. Every §53 hue-tint + inset highlight stays.
   ========================================================================== */

body.home-page #dashboard .stat-card {
  padding: 14px 16px !important;
  gap: 4px !important;
  border-radius: 12px;
}
body.home-page #dashboard .stat-card-value,
body.home-page #dashboard .stat-card--wallet .stat-card-value {
  font-size: 24px !important;
}
@media (max-width: 640px) {
  body.home-page #dashboard .stat-card-value,
  body.home-page #dashboard .stat-card--wallet .stat-card-value {
    font-size: 22px !important;
  }
}
body.home-page #dashboard .stat-card-label {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 2px !important;
}
body.home-page #dashboard .stat-card-meta { font-size: 10px !important; }
/* "Spend in marketplace →" link on wallet card — match new size */
body.home-page #dashboard .stat-card-link { font-size: 10px !important; }

/* ==========================================================================
   §62 Stat row — thin horizontal strip (May 13). User feedback: the
   tile shape itself was the problem ("I don't like the big rectangle
   blocks"). Cards now lay out as a single-row pill per stat: eyebrow
   on top + value inline below + meta line dropped. ~50px tall, half
   the previous height. Premium-quiet stat ribbon.
   Also: "Your journey" panel removed (markup-side); the Practice
   panel now spans the full dashboard-grid row.
   ========================================================================== */

/* Strip the meta line entirely. "out of 230 questions" / "lifetime
   average" / "Spend in marketplace →" / "lifetime hours" — every
   stat's helper text. Premium dashboards (Linear, Vercel, Stripe)
   surface the number, not the supporting clause. */
body.home-page #dashboard .stat-card-meta { display: none !important; }
body.home-page #dashboard .stat-card-link { display: none !important; }

/* Thin card geometry. Padding 14 → 10/14, value 24 → 20px, eyebrow
   stays 9px. Cards are ~46px tall. */
body.home-page #dashboard .stat-card {
  padding: 10px 14px !important;
  gap: 2px !important;
  border-radius: 10px !important;
  min-height: 0 !important;
}
body.home-page #dashboard .stat-card-value,
body.home-page #dashboard .stat-card--wallet .stat-card-value {
  font-size: 20px !important;
  line-height: 1.1 !important;
}
body.home-page #dashboard .stat-card-label {
  font-size: 9px !important;
  letter-spacing: 0.16em !important;
  margin-bottom: 0 !important;
}
/* Tighten the row gap between cards */
body.home-page #dashboard .stats-grid { gap: 10px !important; margin-bottom: 24px !important; }

/* Practice panel goes full-width now that Journey is gone */
body.home-page #dashboard .dashboard-grid {
  grid-template-columns: 1fr !important;
}
body.home-page #dashboard .grades-panel {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
/* Grade-grid: 4 columns on wide screens since it has the full row */
body.home-page #dashboard .grades-panel .grade-grid-compact {
  grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1024px) {
  body.home-page #dashboard .grades-panel .grade-grid-compact {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  body.home-page #dashboard .grades-panel .grade-grid-compact {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  body.home-page #dashboard .stat-card-value,
  body.home-page #dashboard .stat-card--wallet .stat-card-value {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   §64 Home one-CTA reshuffle (May 13). Replaces the welcome hero +
   4-stat-card row + 10-grade grid + standalone challenge banner with
   a focused single-column layout: subject pills → tiny greeting →
   Continue card (the ONE primary CTA) → Wallet→Toy ladder → daily
   quest + grade picker row → demoted stats line. Mobile-first;
   desktop centers at max-width 520px (kid-first; no two-column).
   ========================================================================== */

/* Strip the legacy chrome that used to live inside #dashboard. The
   markup is replaced (lines 263+ of index.html) but several global
   selectors target .dashboard-section / .dashboard-inner / .stats-grid /
   etc. Override the spacing those rules introduced so the new
   home-v2 layout breathes correctly. */
body.home-page #dashboard.home-v2 {
  background: transparent;
}
body.home-page #dashboard .home-v2-inner {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (min-width: 1024px) {
  body.home-page #dashboard .home-v2-inner { padding-top: 40px; }
}

/* Subject pills bar at top of home */
.home-subject-bar {
  display: flex;
  justify-content: center;
}
.home-subject-pills {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
.home-subject-pill {
  appearance: none;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.home-subject-pill:hover { color: #ffffff; }
.home-subject-pill.active {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* Tiny greeting */
.home-greet {
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
  letter-spacing: 0;
}
.home-greet-wave { margin-left: 4px; }

/* Continue card — the one big yellow CTA on this page */
.home-continue {
  display: block;
  position: relative;
  padding: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, transform 100ms ease;
}
.home-continue:hover { border-color: rgba(251, 191, 36, 0.3); }
.home-continue:active { transform: scale(0.99); }
.home-continue-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252, 211, 77, 0.75);
  font-weight: 500;
  margin-bottom: 6px;
}
.home-continue-title {
  margin: 0 0 6px;
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.home-continue-sep { color: rgba(255, 255, 255, 0.3); margin: 0 6px; }
.home-continue-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}
.home-continue-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 16px;
}
.home-continue-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.home-continue-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color: #0a1628;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 16px -4px rgba(251, 191, 36, 0.45);
}

/* Wallet → Toy ladder */
.home-wallet {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color 200ms ease, background 200ms ease;
}
.home-wallet:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}
.home-wallet-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.home-wallet-content { flex: 1; min-width: 0; }
.home-wallet-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.home-wallet-pts {
  font-size: 18px;
  font-weight: 600;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
.home-wallet-delta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}
.home-wallet-toy {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-wallet-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.3);
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}

/* Secondary row: Daily quest + Grade picker */
.home-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 480px) {
  .home-secondary { grid-template-columns: 1fr; }
}
.home-quest,
.home-gradepicker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  min-height: 64px;
}
.home-quest:hover { border-color: rgba(255, 255, 255, 0.18); }
.home-quest-eyebrow,
.home-gradepicker-eyebrow {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.home-quest-meta {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}
.home-quest-meta strong {
  color: #fbbf24;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.home-quest-reward {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 400;
}

/* Grade pill row inside switch-grade card */
.home-grade-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.home-grade-pill {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.home-grade-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}
.home-grade-pill--active {
  background: #fbbf24;
  border-color: #fbbf24;
  color: #0a1628;
  font-weight: 600;
}
.home-grade-pill--active:hover {
  background: #fde68a;
  color: #0a1628;
}

/* Demoted stats line */
.home-stats-line {
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
.home-stats-line .home-stats-sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.2);
}

/* Hide legacy mounts that exist purely to keep showDashboard's
   textContent writes from throwing. */
.home-legacy-mounts { display: none !important; }

/* Mobile: tighten paddings; everything else already mobile-first */
@media (max-width: 480px) {
  body.home-page #dashboard .home-v2-inner {
    padding: 16px 16px 48px;
    gap: 16px;
  }
  .home-continue { padding: 18px; }
  .home-continue-title { font-size: 22px; }
  .home-continue-cta { padding: 9px 16px; }
  .home-wallet { padding: 12px 14px; gap: 12px; }
  .home-wallet-icon { width: 36px; height: 36px; }
} User feedback: "header
   options should stay the same no matter which page you are on".
   MySpace was rendering its own ms-shell topbar (Recent + Quick Note
   + bell + avatar) and hiding the global nav (Home / MySpace /
   Trophies / League / Games / Toys + pts + chat + avatar). Fix: the
   standard .site-header is now injected on every MySpace surface by
   js/myspace.js#ensureSiteHeader, with #user-slot which auth.js
   auto-populates with pts/chat/avatar identically to every other page.
   This CSS block resolves the sticky-stack collision (site-header AND
   ms-sidebar both wanted top:0) and tightens ms-top now that its
   brand+title+duplicate-avatar are stripped.
   ========================================================================== */

/* The site-header is sticky at top:0 with height ~64px. Push the
   ms-sidebar's sticky anchor down so it lives BELOW the header. */
body.myspace-page .site-header {
  position: sticky;
  top: 0;
  z-index: 60;
}
body.myspace-page .ms-sidebar {
  top: 64px !important;
  height: calc(100vh - 64px) !important;
}

/* ms-top — slim secondary toolbar for MySpace-specific tools only
   (Recent + Quick Note). No brand, no page-title, no duplicate
   avatar. Shrink the row height accordingly. */
body.myspace-page .ms-top {
  height: 48px !important;
  grid-template-columns: 1fr !important;
  padding: 0 24px !important;
  background: transparent !important;
  border-bottom: none !important;
}
body.myspace-page .ms-top-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Recent-panel still anchors to .ms-top; adjust offset since the
   header is shorter now. */
body.myspace-page .ms-recent-panel { top: 44px !important; }

/* Mobile: site-header keeps its own existing mobile rules
   (collapsed nav etc). Sidebar reflows under header. */
@media (max-width: 1024px) {
  body.myspace-page .ms-sidebar { top: 56px !important; height: auto !important; }
}

/* ==========================================================================
   §68 Practice wrong-answer compression (May 13). Old layout injected
   10+ elements (header + equation reveal + Lumen badge + tutor paras
   + 5 action buttons + follow-up input + breadcrumb) — pushing Next
   below the fold + a floating-send-button CSS bug. New: tile-state
   visual change carries the "what happened" signal; ONE inline tutor
   line + 2 buttons (Explain more / Next); full dialogue + chips +
   follow-up live inside the [Explain more] expansion.
   ========================================================================== */

/* ---- Tile visual states (driven by data-attrs the JS sets on the
   form when an answer is submitted). The correct tile gets green
   treatment regardless of whether the kid picked it; the picked-
   wrong tile gets red treatment; the other two unselected tiles
   fade to half opacity. ----------------------------------------- */
body.practice-page .question-card[data-state="wrong"] .choice {
  opacity: 0.5;
  transition: opacity 200ms ease, border-color 200ms ease, background 200ms ease;
}
body.practice-page .question-card[data-state="wrong"][data-correct-letter] .choice[data-letter] {
  /* default for non-correct/non-picked = stays dim */
}
/* The correct choice — green tint, check icon */
body.practice-page .question-card[data-state="wrong"][data-correct-letter="A"] .choice[data-letter="A"],
body.practice-page .question-card[data-state="wrong"][data-correct-letter="B"] .choice[data-letter="B"],
body.practice-page .question-card[data-state="wrong"][data-correct-letter="C"] .choice[data-letter="C"],
body.practice-page .question-card[data-state="wrong"][data-correct-letter="D"] .choice[data-letter="D"],
body.practice-page .question-card[data-state="correct"] .choice:has(input:checked) {
  opacity: 1 !important;
  border-color: rgba(34, 197, 94, 0.55) !important;
  background: rgba(34, 197, 94, 0.08) !important;
  position: relative;
}
body.practice-page .question-card[data-state="wrong"][data-correct-letter="A"] .choice[data-letter="A"]::after,
body.practice-page .question-card[data-state="wrong"][data-correct-letter="B"] .choice[data-letter="B"]::after,
body.practice-page .question-card[data-state="wrong"][data-correct-letter="C"] .choice[data-letter="C"]::after,
body.practice-page .question-card[data-state="wrong"][data-correct-letter="D"] .choice[data-letter="D"]::after,
body.practice-page .question-card[data-state="correct"] .choice:has(input:checked)::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain; background-repeat: no-repeat;
}
/* Picked-wrong choice — red tint, X icon */
body.practice-page .question-card[data-state="wrong"][data-picked-letter="A"] .choice[data-letter="A"],
body.practice-page .question-card[data-state="wrong"][data-picked-letter="B"] .choice[data-letter="B"],
body.practice-page .question-card[data-state="wrong"][data-picked-letter="C"] .choice[data-letter="C"],
body.practice-page .question-card[data-state="wrong"][data-picked-letter="D"] .choice[data-letter="D"] {
  opacity: 1 !important;
  border-color: rgba(239, 68, 68, 0.55) !important;
  background: rgba(239, 68, 68, 0.08) !important;
  position: relative;
}
body.practice-page .question-card[data-state="wrong"][data-picked-letter="A"] .choice[data-letter="A"]::after,
body.practice-page .question-card[data-state="wrong"][data-picked-letter="B"] .choice[data-letter="B"]::after,
body.practice-page .question-card[data-state="wrong"][data-picked-letter="C"] .choice[data-letter="C"]::after,
body.practice-page .question-card[data-state="wrong"][data-picked-letter="D"] .choice[data-letter="D"]::after {
  content: '';
  position: absolute;
  right: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");
  background-size: contain; background-repeat: no-repeat;
}
/* Letter badge tint for picked-wrong */
body.practice-page .question-card[data-state="wrong"][data-picked-letter="A"] .choice[data-letter="A"] .choice-letter,
body.practice-page .question-card[data-state="wrong"][data-picked-letter="B"] .choice[data-letter="B"] .choice-letter,
body.practice-page .question-card[data-state="wrong"][data-picked-letter="C"] .choice[data-letter="C"] .choice-letter,
body.practice-page .question-card[data-state="wrong"][data-picked-letter="D"] .choice[data-letter="D"] .choice-letter {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #fca5a5 !important;
}
/* Letter badge tint for correct */
body.practice-page .question-card[data-state="wrong"][data-correct-letter="A"] .choice[data-letter="A"] .choice-letter,
body.practice-page .question-card[data-state="wrong"][data-correct-letter="B"] .choice[data-letter="B"] .choice-letter,
body.practice-page .question-card[data-state="wrong"][data-correct-letter="C"] .choice[data-letter="C"] .choice-letter,
body.practice-page .question-card[data-state="wrong"][data-correct-letter="D"] .choice[data-letter="D"] .choice-letter {
  background: rgba(34, 197, 94, 0.18) !important;
  color: #86efac !important;
}
/* K/1/2 "your pick" caption (injected by JS only for younger grades) */
.choice-yourpick {
  color: rgba(252, 165, 165, 0.85);
  font-size: 0.8em;
  margin-left: 6px;
  font-weight: 500;
}

/* ---- Hide everything the old wrong-view used to render at the
   bottom of the question card --------------------------------- */
body.practice-page .question-card[data-state="wrong"] .q-meta {
  display: none !important;
}
/* The §54 inline-fb-head / inline-fb-body / inline-fb-userwrote /
   inline-fb-correct elements are no longer emitted in the new
   wrong-branch markup (§68), but if any legacy code path renders
   them in the future, hide so they don't leak through. */
body.practice-page .question-card[data-state="wrong"] .q-inline-fb-head,
body.practice-page .question-card[data-state="wrong"] .q-inline-fb-body,
body.practice-page .question-card[data-state="wrong"] .q-inline-fb-userwrote,
body.practice-page .question-card[data-state="wrong"] .q-inline-fb-correct {
  display: none !important;
}
/* The Lumen text badge inside the (now expand-only) tutor-box was
   header chrome the kid already knows. Star icon stays on the
   inline tutor line; this label is redundant. */
body.practice-page .question-card[data-state="wrong"] .lumen-avatar .lumen-name {
  display: none !important;
}

/* ---- New compressed wrong-view: inline tutor line + 2 buttons --- */
body.practice-page .q-wrong-tutor-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 10px;
  padding: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.5;
  font-style: normal;
}
body.practice-page .q-wrong-tutor-icon {
  flex-shrink: 0;
  color: #fbbf24;
  margin-top: 4px;
  display: inline-flex;
}
body.practice-page .q-wrong-actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
  align-items: center;
}
body.practice-page .q-wrong-explain {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  flex: 0 0 auto;
}
body.practice-page .q-wrong-explain:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}
body.practice-page .q-wrong-next {
  flex: 1 1 auto;
  /* Wider than Explain more (~1.4:1 by visual emphasis via flex) */
}

/* ---- Explain-more expansion: full tutor dialogue + chips + form -- */
body.practice-page .q-wrong-expand {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
body.practice-page .q-wrong-expand[hidden] { display: none; }

/* ---- Sidebar dim when wrong-answer is expanded (§68 A2) --------- */
body.practice-page.q-wrong-expanded .performance-panel {
  opacity: 0.3;
  transition: opacity 200ms ease;
}
body.practice-page .performance-panel {
  transition: opacity 200ms ease;
}

/* ---- Fix the floating send button (§68 Step 7). Old .tutor-followup
   had `display: flex; gap: 8px` but the button's 40×40 + thick SVG
   stroke combined with the input shrinking below content-width on
   narrow viewports caused the button to overflow visually. New row
   container with explicit min-width: 0 on input + flex-shrink: 0
   on button + 32px button (was 40). Both nested inside a single
   rounded shell that owns the border. ------------------------- */
body.practice-page .tutor-followup--row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  transition: border-color 160ms ease;
}
body.practice-page .tutor-followup--row:focus-within {
  border-color: rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.10);
}
body.practice-page .tutor-followup--row input {
  flex: 1 1 0%;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  height: 36px;
  padding: 0 10px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: none !important;
}
body.practice-page .tutor-followup--row input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
body.practice-page .tutor-followup--row .tutor-send {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #fde68a, #fbbf24, #f59e0b);
  color: #0a1628;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
body.practice-page .tutor-followup--row .tutor-send:hover {
  filter: brightness(1.05);
}

/* Mobile tweaks for the compressed wrong-view */
@media (max-width: 480px) {
  body.practice-page .q-wrong-actions { flex-wrap: wrap; }
  body.practice-page .q-wrong-explain,
  body.practice-page .q-wrong-next { flex: 1 1 auto; min-width: 0; }
}

/* ==========================================================================
   §69 Practice mobile shell — sticky bottom action bar (May 13).
   User feedback (with screenshot): "when kids answers a question on
   the phone they have to scroll down to click next question option.
   that should not be the case." iPhone 14 has ~694px usable height;
   the old chrome (global site-header + 'Sign in' button + breadcrumb
   pill row + '323 days to STAAR' countdown + Grade-Math-Unit row +
   80px progress bar) burned ~400px before the question started,
   pushing 'Check answer' below the fold. This block:

   1. Drops the global site-header on practice (kid is mid-session,
      no nav nag, no 'Sign in' chrome). Practice has its own context
      bar with a back arrow; that's the only top affordance needed.
   2. Drops the redundant TX/STAAR pill (countdown emission already
      removed in practice.js §69). One tight breadcrumb row.
   3. Slims the .practice-header progress block on phone.
   4. Pins the action zone (Check / Explain more+Next / autoadvance)
      to the bottom of the viewport with iOS safe-area padding so
      the kid never scrolls to find the action.
   5. Hides .product-footer on mobile (would push action above it).

   Sticky strategy: position: fixed with safe-area bottom padding.
   Reliable across iOS Safari versions; sticky-bottom is fragile
   under iOS keyboard interactions when an input gets focus.
   ========================================================================== */

/* Drop the global site-header on practice — kid is mid-session,
   doesn't need 'Sign in' + 6 nav links + brand wordmark eating
   the top of the viewport. The practice-context-bar is the
   only top chrome they need. */
@media (max-width: 1023px) {
  body.practice-page .site-header { display: none !important; }
}

/* Slim the breadcrumb on phone — drop the TX/STAAR pill since
   "Texas only — for now" is the product anyway (no need to
   re-state on every question). Keep grade + subject pills and
   the overflow menu. */
@media (max-width: 767px) {
  body.practice-page .practice-pill--state { display: none !important; }
  body.practice-page .practice-breadcrumb-pills {
    gap: 6px;
  }
  body.practice-page .practice-pill {
    font-size: 11px;
    padding: 4px 10px;
  }
  body.practice-page .practice-breadcrumb {
    padding: 10px 14px;
    gap: 8px;
  }
}

/* Slim the practice-header progress block on phone — was ~80px of
   vertical chrome per the audit; now ~28px (16px caption + 6px
   bar + small padding). */
@media (max-width: 767px) {
  body.practice-page .practice-header {
    padding: 8px 4px 6px;
  }
  body.practice-page .practice-eyebrow {
    font-size: 11px;
    line-height: 1.3;
  }
  body.practice-page .practice-eyebrow-title {
    /* Compress the long "Grade 3 Math · Unit 1: Place Value & Whole
       Numbers" caption — truncate on overflow rather than wrap to
       two lines. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: inline-block;
  }
  /* Slim the progress bar itself (was ~6-8px) */
  body.practice-page .practice-progress-bar,
  body.practice-page .practice-header [class*="progress"] {
    height: 3px !important;
  }
}

/* ---- STICKY BOTTOM ACTION BAR ---------------------------------------
   On mobile, lift the action zone (whatever's currently showing —
   Check answer button, wrong-answer Explain more+Next pair, or the
   correct-answer auto-advance progress chip) out of the question
   card flow and pin it to the viewport bottom. iOS safe-area
   padding ensures the bar sits above the home indicator. */
@media (max-width: 767px) {
  /* Reserve space at the bottom of the question column so the
     fixed bar doesn't cover the last bit of content. */
  body.practice-page .practice-main,
  body.practice-page #practice-root {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }

  /* §98 (May 15) — auto-advance chip stays as a fixed-bottom container.
     Wrong-actions row + .q-cta button switch to IN-FLOW per §98 fix.
     The Sun-Earth-Moon-tides screenshot showed the fixed-bottom .q-cta
     overlaying the last answer choice on long-content questions
     (Reading passages, Grade 8 Science, multi-step word problems).
     IntersectionObserver-driven indicator chip telegraphs "scroll
     down" when the in-flow button is offscreen. */
  body.practice-page .q-autoadvance {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    margin: 0 !important;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(6, 13, 31, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 !important;
    width: 100%;
    box-sizing: border-box;
  }

  /* §98 — .q-cta in-flow at end of card. Preserves the §93 gold
     visual treatment (gradient + dark text + radius + shadow) and
     the disabled-state visual. position:fixed dropped. The
     IntersectionObserver-driven .q-cta-indicator (rendered as a
     floating chip below the viewport when the button is offscreen)
     handles the "kid can't see the button" case for long-content
     questions. */
  body.practice-page .question-card[data-state="asking"] .q-cta {
    position: static !important;
    width: 100% !important;
    height: 52px !important;
    margin: 16px 0 0 !important;
    padding: 0 26px !important;
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%) !important;
    color: #060d1f !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 8px 22px rgba(251,191,36,0.35), 0 2px 6px rgba(0,0,0,0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body.practice-page .question-card[data-state="asking"]:not(:has(input:checked)) .q-cta {
    opacity: 0.55;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
  }

  /* §98 — wrong-answer row in-flow at end of card too. Drop the
     fixed-bottom navy-bar treatment so it doesn't overlay long
     content the same way the §93 .q-cta did. */
  body.practice-page .q-wrong-actions {
    position: static !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-sizing: border-box;
  }

  /* Wrong-state buttons share the row inside the fixed bar */
  body.practice-page .q-wrong-actions {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
  }
  body.practice-page .q-wrong-explain { height: 44px; }
  body.practice-page .q-wrong-next { height: 44px; flex: 1 1 auto; }

  /* Auto-advance chip — same fixed bar geometry, centered content */
  body.practice-page .q-autoadvance {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 52px;
  }
}

/* ---- Drop chrome that competes for vertical space on phone ------- */
@media (max-width: 767px) {
  /* Product footer is a parent-facing legal row; not for the kid
     mid-session. Reappears at >=768px. */
  body.practice-page .product-footer { display: none !important; }
  /* §44 guest banner — already opt-in via existing CSS; ensure it
     doesn't push above the action bar when present. */
  body.practice-page #guest-banner { margin-bottom: 8px !important; }
}

/* ---- Desktop: sidebar dim from §68 still applies; action bar
   stays inline (not fixed). The mobile sticky treatment above is
   media-gated to <=767px so desktop is unaffected. ----------- */

/* ==========================================================================
   §70 Universal mobile home affordance (May 13). Every sub-page on
   phone gets a small fixed-position 🏠 button so the kid can always
   bail to home in one tap — no hamburger dig, no header hunt. On
   practice.html (§69 hides the global site-header on phone), this
   is the kid's only home affordance — must always be visible.
   Injected by js/auth.js#ensureHomeAffordance on every non-home
   page. Mobile-only via CSS so desktop chrome stays clean.
   ========================================================================== */

.ge-home-affordance {
  /* Hidden by default; CSS turns it on for mobile widths only */
  display: none;
}

@media (max-width: 767px) {
  .ge-home-affordance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    /* Top-left so it doesn't collide with the §69 sticky bottom
       action bar OR the iOS home indicator. Respects notch via
       safe-area-inset-top. */
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    z-index: 100;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(6, 13, 31, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 100ms ease;
  }
  .ge-home-affordance:hover,
  .ge-home-affordance:focus-visible {
    background: rgba(6, 13, 31, 0.95);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.45);
    outline: none;
  }
  .ge-home-affordance:active {
    transform: scale(0.94);
  }
  /* Make sure the home button stays above the §69 sticky action bar
     when scrolling and above the §44 mobile tab bar if present. */
  .ge-home-affordance svg {
    color: inherit;
  }
}

/* Surfaces that have their own top-left chrome — push the home
   affordance slightly inward so it doesn't overlap. Practice page
   (§69) hides the site-header on phone, so the home button sits at
   the cleanest top-left corner. MySpace has its own sidebar; the
   home button still shows on phone since the sidebar reflows to
   header at <=1024px (§63). */
@media (max-width: 767px) {
  body.myspace-page .ge-home-affordance {
    /* MySpace has its own sidebar that reflows to a header at
       <=1024px; the home button still shows on phone since the
       sidebar reflow may not cover all paths home. */
  }
  /* §95 — kill the home affordance on practice.html. The slim
     practice top bar (§81) carries back-arrow + ⋯ menu with
     'Exit to home' (and §94 'Sign out'). A floating home icon
     mid-page (caused by some iOS Safari layouts where the fixed
     positioning regressed to static) is orphaned chrome — Khan
     + IXL mobile have NO floating nav. Hide entirely. */
  body.practice-page .ge-home-affordance {
    display: none !important;
  }
}

/* ==========================================================================
   §71 Practice minimalist redesign (May 13). Strip to 7 elements:
   top bar · slim progress · question · 4 tiles · sticky action bar
   · post-answer whisper · optional modal overlay. No sidebar. No
   stats. No footer. Pure single-column.
   ========================================================================== */

/* Sidebar — gone on ALL viewports. The <aside id="perf-panel">
   element stays in the DOM (so renderPerf writes don't throw) but
   never paints. All accuracy / stat-cards / last-20 / mastery bars
   move to MySpace in a follow-up. */
body.practice-page .performance-panel,
body.practice-page #perf-panel {
  display: none !important;
}
body.practice-page .mobile-stats-trigger,
body.practice-page #mobile-stats-trigger {
  display: none !important;
}

/* Single-column layout — was a two-column grid with 1fr 320px.
   §155 (May 18) — was max-width: 640px which made desktop math/science/SS
   render in a narrow column with huge dead space on either side. Reading
   already overrode to 1400px (§82 hotfix #3). Now uniform at 1400px so
   every subject uses the full desktop width. Inner cards keep their own
   padding/width chrome. */
body.practice-page .practice-layout,
body.practice-page .practice-layout--solo {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 1400px;
  margin: 0 auto;
}
body.practice-page .practice-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Drop the 5-link product footer on every practice viewport
   (was mobile-only in §69). Parent dashboard / Privacy / Terms /
   AI Disclosure / Report all live on Settings + marketing instead;
   Report stays accessible via the existing in-card "Question seems
   wrong? Report it." link. */
body.practice-page .product-footer {
  display: none !important;
}

/* Slim the 4-pill breadcrumb (TX·STAAR·Grade·Math) to ONE chip on
   every viewport — Texas-only product, STAAR is implicit. The
   countdown emission was already dropped (§69). */
body.practice-page .practice-pill--state,
body.practice-page .practice-pill--subject {
  display: none !important;
}
body.practice-page .practice-pill--grade {
  /* Promote grade chip styling: navy outline pill, not the muted
     state-pill treatment. */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 999px;
}
body.practice-page .practice-breadcrumb {
  padding: 14px 16px;
  gap: 10px;
}

/* §83 praise line — sits above the whisper. Gold + bold but
   compact; reads as encouragement, not a banner. Grade-band
   tone is in the JS dictionary (K-2 cheerful, 6+ understated);
   visual weight is uniform so the kid's eye lands here first. */
.q-correct-praise {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.005em;
  margin: 14px 0 0;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .q-correct-praise {
    font-size: 1rem;
    margin-top: 12px;
  }
}

/* §71 post-answer whisper — replaces the green-bordered explanation
   card. One short line above the sticky action bar. §83 reduces
   top margin from 12 → 4 so the whisper sits tight under the
   praise line instead of leaving a gap. */
.q-correct-whisper {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.5;
}
.q-correct-whisper-icon {
  flex-shrink: 0;
  color: #fbbf24;
  margin-top: 4px;
  display: inline-flex;
}
.q-correct-whisper-text { flex: 1; }

/* §71 floating "+N pts" toast — slides in top-right of viewport,
   holds, slides out. Never pushes content. Distinct from
   STAARFx.toast (kid-facing celebration toasts) which still fires
   for streaks/milestones in addition to this. */
.ge-pts-toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(20, 29, 51, 0.95), rgba(10, 22, 40, 0.95));
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 999px;
  color: #fbbf24;
  font-weight: 600;
  font-size: 13px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-12px) scale(0.96);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.ge-pts-toast--show {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.ge-pts-toast-coin { font-size: 14px; line-height: 1; }
.ge-pts-toast strong { color: #fde68a; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .ge-pts-toast { transition: opacity 200ms ease; transform: none !important; }
}

/* §71 — Fun Fact modal (native <dialog>). Backdrop dims; centered
   on desktop, anchored to bottom (sheet) on phone. No emoji
   decorations on the icon — single bulb SVG for every fact. */
.practice-modal {
  border: none;
  padding: 0;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
}
.practice-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.practice-modal-inner {
  background: linear-gradient(180deg, rgba(20, 29, 51, 0.98), rgba(10, 22, 40, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 24px 22px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  position: relative;
}
.ff-modal-icon {
  color: #fbbf24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  margin-top: 4px;
}
.ff-modal-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(252, 211, 77, 0.85);
  font-weight: 500;
}
.ff-modal-body {
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin: 4px 0 12px;
}
.ff-modal-cta {
  background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
  color: #0a1628;
  border: none;
  padding: 10px 28px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-width: 140px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px -4px rgba(251, 191, 36, 0.4);
}
.ff-modal-cta:hover { filter: brightness(1.05); }
.ff-card-welcome {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 211, 77, 0.7);
  margin-bottom: 2px;
}
.ff-speech-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Desktop modal: centered, 380px wide */
@media (min-width: 768px) {
  .practice-modal {
    margin: auto;
  }
  .practice-modal-inner {
    width: 380px;
    max-width: 92vw;
  }
}

/* Mobile modal: anchored to bottom as a sheet */
@media (max-width: 767px) {
  .practice-modal {
    /* native dialog centers by default; reposition to bottom */
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
  }
  .practice-modal-inner {
    border-radius: 16px 16px 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    width: 100%;
    box-sizing: border-box;
  }
}

/* Hide the old inline .ff-card chrome if any legacy code path still
   tries to render it as a non-dialog (defensive). */
body.practice-page .q-inline-fb .ff-card {
  display: none !important;
}

/* ==========================================================================
   §73 MySpace performance section — relocated from practice sidebar
   (May 13). The accuracy ring + 4 stats + LAST 20 dots + per-unit
   mastery bars that §71 stripped off the practice screen now live
   here on MySpace home. Three sub-blocks, each self-hides until JS
   confirms data: Overview / Recent / Mastery.
   ========================================================================== */

body.myspace-page .ms-performance {
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.myspace-page .ms-performance[hidden] { display: none; }
body.myspace-page .ms-perf-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 18px;
}
body.myspace-page .ms-perf-block[hidden] { display: none; }
body.myspace-page .ms-perf-section-title {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
  margin-bottom: 14px;
}
body.myspace-page .ms-perf-section-sub {
  color: rgba(255, 255, 255, 0.35);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-left: 4px;
}

/* ---- Overview: ring + 4-stat grid -------------------------------- */
body.myspace-page .ms-perf-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: center;
}
@media (max-width: 640px) {
  body.myspace-page .ms-perf-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}
body.myspace-page .ms-perf-ring-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.myspace-page .ms-perf-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
body.myspace-page .ms-perf-stat {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}
body.myspace-page .ms-perf-stat-num {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 22px;
  font-weight: 400;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
body.myspace-page .ms-perf-stat--wallet .ms-perf-stat-num { color: #fbbf24; }
body.myspace-page .ms-perf-stat-label {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Recent: 20 dots in a row ----------------------------------- */
body.myspace-page .ms-perf-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
body.myspace-page .ms-perf-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
body.myspace-page .ms-perf-dots .dot.correct {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
}
body.myspace-page .ms-perf-dots .dot.incorrect {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.35);
}
body.myspace-page .ms-perf-dots .dot.empty {
  background: rgba(255, 255, 255, 0.06);
}

/* ---- Mastery: unit rows with progress bars ---------------------- */
body.myspace-page .ms-perf-units {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.myspace-page .ms-perf-unit {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
body.myspace-page .ms-perf-unit-title {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.myspace-page .ms-perf-unit-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
}
body.myspace-page .ms-perf-unit-fill {
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
body.myspace-page .ms-perf-unit--good .ms-perf-unit-fill {
  background: linear-gradient(90deg, #34d399, #10b981);
}
body.myspace-page .ms-perf-unit--mid .ms-perf-unit-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
body.myspace-page .ms-perf-unit--low .ms-perf-unit-fill {
  background: linear-gradient(90deg, #f87171, #ef4444);
}
body.myspace-page .ms-perf-unit-pct {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  body.myspace-page .ms-perf-unit {
    grid-template-columns: 1fr 80px auto;
    gap: 8px;
  }
}

/* ==========================================================================
   §74 Live session score on practice eyebrow (May 13). User feedback
   after §71: "when a user is answering questions he cannot see his
   score progress anymore on page." Two micro-pills appear inline on
   the eyebrow as soon as the first answer lands: "N correct" + "M pts".
   No card chrome, no sidebar re-introduced — just two numbers on the
   line that already says "1/25".
   ========================================================================== */

body.practice-page .practice-eyebrow-live {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  text-transform: lowercase;
  font-weight: 500;
}
body.practice-page .practice-eyebrow-live span {
  color: #ffffff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
body.practice-page .practice-eyebrow-live--pts {
  color: rgba(252, 211, 77, 0.85);
}
body.practice-page .practice-eyebrow-live--pts span {
  color: #fbbf24;
}
body.practice-page .practice-eyebrow-livesep[hidden] { display: none !important; }
/* Phone: keep the live pills on the same row but tighten kerning */
@media (max-width: 480px) {
  body.practice-page .practice-eyebrow-live { font-size: 11px; }
}

/* ==========================================================================
   §75 Fun Facts browse page (May 13). User feedback: "Remove fun
   facts and put it as a separate area under each subject. Fun facts
   should be subject and age specific. Don't push too hard to make
   it for Texas. Go global."
   The every-5-correct inline mount is gone (js/practice.js cleanup).
   Catalog is now browsable at /facts.html as a filtered feed.
   ========================================================================== */

body.facts-page {
  background: #060d1f;
  color: #ffffff;
  min-height: 100vh;
}
body.facts-page .facts-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}
body.facts-page .facts-page-head {
  text-align: center;
  margin-bottom: 24px;
}
body.facts-page .facts-eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(252, 211, 77, 0.85);
  font-weight: 500;
  margin-bottom: 8px;
}
body.facts-page .facts-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
body.facts-page .facts-sub {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin: 0;
}

/* Filter pill rows */
body.facts-page .facts-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}
body.facts-page .facts-filter-row--second {
  margin-bottom: 16px;
}
body.facts-page .facts-pill {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
body.facts-page .facts-pill:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}
body.facts-page .facts-pill--active {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}
body.facts-page .facts-pill--active:hover {
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
}

/* Meta line under filters */
body.facts-page .facts-meta {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  margin: 8px 0 18px;
}
body.facts-page .facts-meta-sep { margin: 0 8px; color: rgba(255, 255, 255, 0.2); }
body.facts-page .facts-meta span { color: rgba(255, 255, 255, 0.7); }

/* Card feed */
body.facts-page .facts-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.facts-page .facts-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  transition: background 160ms ease, border-color 160ms ease;
}
body.facts-page .facts-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.18);
}
body.facts-page .facts-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.facts-page .facts-card-emoji {
  font-size: 18px;
  line-height: 1;
}
body.facts-page .facts-card-cat {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
body.facts-page .facts-card-seen {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: rgba(34, 197, 94, 0.75);
  font-weight: 500;
}
body.facts-page .facts-card--seen {
  background: rgba(255, 255, 255, 0.015);
}
body.facts-page .facts-card--seen .facts-card-body {
  color: rgba(255, 255, 255, 0.6);
}
body.facts-page .facts-card-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* Empty state */
body.facts-page .facts-empty {
  text-align: center;
  padding: 48px 20px;
  color: rgba(255, 255, 255, 0.6);
}
body.facts-page .facts-empty p {
  margin: 0 0 6px;
  font-size: 15px;
}
body.facts-page .facts-empty-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

/* Load more */
body.facts-page .facts-loadmore {
  display: block;
  margin: 24px auto 0;
  padding: 11px 22px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
body.facts-page .facts-loadmore:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 480px) {
  body.facts-page .facts-main { padding: 18px 14px 64px; }
  body.facts-page .facts-card { padding: 14px 16px; }
  body.facts-page .facts-card-body { font-size: 15px; }
}

/* §76 REVERTED (May 13) — the phone no-scroll lock made the practice
   page harder to use (sticky+fixed elements interacted poorly with
   the inner-scroll container, the wrong-answer Explain More expansion
   got clipped, iOS keyboard pushed content into a zone that couldn't
   scroll). The page now scrolls normally on phone. The §69 sticky
   bottom action bar already keeps Check answer / Next visible without
   needing a viewport-height lock. */

/* §75 — Browse-fun-facts link on subject.html */
.subject-facts-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 28px auto 0;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.subject-facts-link:hover {
  background: rgba(251, 191, 36, 0.06);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.subject-facts-link-icon { font-size: 16px; }
.subject-facts-link-arrow {
  color: rgba(255, 255, 255, 0.4);
  margin-left: 2px;
  transition: transform 160ms ease;
}
.subject-facts-link:hover .subject-facts-link-arrow {
  color: #fbbf24;
  transform: translateX(3px);
}

/* ==========================================================================
   §77 Scratch-paper toggle → pencil icon (May 13). User shared an IXL
   screenshot with a small blue pencil glyph as the scratch affordance
   and asked for the same shape. Replaces the full-width card-style
   toggle that said "Need scratch paper? · Press S or click to open"
   with a single compact pencil button. The expanded scratchpad UI
   (body / canvas / toolbar) is unchanged — only the COLLAPSED entry
   point is repainted.
   ========================================================================== */

/* Compact icon-only collapsed state */
.scratchpad-toggle.scratchpad-toggle--icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: auto; /* right-align inside the question-card flow */
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(251, 191, 36, 0.85);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 100ms ease;
  gap: 0;
}
.scratchpad-toggle.scratchpad-toggle--icon:hover {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.35);
  color: #fbbf24;
}
.scratchpad-toggle.scratchpad-toggle--icon:active {
  transform: scale(0.94);
}
.scratchpad-toggle.scratchpad-toggle--icon .scratchpad-toggle-icon {
  /* Reset the existing gold-tinted square chip — the BUTTON owns the
     pill shape now; the inner icon is just the glyph. */
  width: auto;
  height: auto;
  background: transparent !important;
  border: none !important;
  color: inherit;
  padding: 0;
}
/* Place the .scratchpad-inline at the right edge of the question card
   so the pencil floats top-right of the choices, like the IXL pattern */
.scratchpad-inline[data-state="collapsed"] {
  display: flex;
  justify-content: flex-end;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================================
   §78 Per-topic explanation page (May 13). User: "for every topic i
   need a link 'read about this topic' that opens an internal page
   explaining that topic with 2 examples and with a close option for
   the students to return to the test practice."
   New /topic.html surface; entry-point added to each topic card on
   /subject.html (Math topic picker).
   ========================================================================== */

/* ---- Topic card — wrap + 'Read about this topic' link ---- */
.topic-card-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.topic-card-explain {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px;
  padding: 8px 10px;
  background: transparent;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 160ms ease, background 160ms ease;
}
.topic-card-explain:hover {
  background: rgba(251, 191, 36, 0.06);
  color: #fbbf24;
}
.topic-card-explain svg { flex-shrink: 0; opacity: 0.7; }
.topic-card-explain:hover svg { opacity: 1; }

/* ---- /topic.html page ---- */
body.topic-page {
  background: #060d1f;
  color: #ffffff;
  min-height: 100vh;
}
.topic-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: rgba(6, 13, 31, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.topic-back, .topic-close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.topic-back:hover, .topic-close:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.topic-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 64px;
}
.topic-head { margin-bottom: 28px; }
.topic-eyebrow {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(252, 211, 77, 0.85);
  font-weight: 500;
  margin-bottom: 10px;
}
.topic-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  color: #ffffff;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.15;
}
.topic-summary {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.55;
}

/* Sections */
.topic-section { margin-top: 36px; }
.topic-section-head {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  margin: 0 0 14px;
}

/* Objectives bullets */
.topic-objectives {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.topic-objectives li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.5;
}
.topic-objectives li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  background: #fbbf24;
  border-radius: 50%;
}

/* Worked examples */
.topic-examples {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.topic-example {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 20px;
}
.topic-example-head { margin-bottom: 10px; }
.topic-example-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
}
.topic-example-prompt {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 500;
  color: #ffffff;
  line-height: 1.5;
}
.topic-ex-choices {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.topic-ex-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}
.topic-ex-choice--correct {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.4);
  color: rgba(255, 255, 255, 0.92);
}
.topic-ex-choice-letter {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}
.topic-ex-choice--correct .topic-ex-choice-letter {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.5);
  color: #86efac;
}
.topic-ex-choice-text { flex: 1; }
.topic-ex-choice-check {
  color: #34d399;
  font-weight: 700;
  font-size: 13px;
}
.topic-example-answer {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}
.topic-example-explain {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.05);
  border-left: 2px solid rgba(251, 191, 36, 0.4);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.55;
}
.topic-example-explain-icon { color: #fbbf24; flex-shrink: 0; }

/* Bottom CTA */
.topic-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 36px;
  padding: 12px 22px;
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  color: #0a1628;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 14px -4px rgba(251, 191, 36, 0.4);
}
.topic-cta:hover { filter: brightness(1.05); }

/* Loading skeleton + error */
.topic-loading {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.topic-skel {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: topic-skel 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.topic-skel-eyebrow { width: 100px; height: 12px; }
.topic-skel-title { width: 70%; height: 32px; }
.topic-skel-prose { width: 100%; height: 14px; }
.topic-skel-prose.short { width: 80%; }
@keyframes topic-skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.topic-error {
  text-align: center;
  padding: 48px 20px;
}
.topic-error-title { color: #ffffff; font-size: 18px; margin: 0 0 6px; }
.topic-error-text { color: rgba(255, 255, 255, 0.55); margin: 0 0 18px; }
.topic-error-cta {
  display: inline-block;
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-size: 13px;
}

@media (max-width: 480px) {
  .topic-main { padding: 18px 16px 56px; }
  .topic-example { padding: 14px 16px; }
  .topic-example-prompt { font-size: 16px; }
}

/* ==========================================================================
   §79 Drop A/B/C/D letter chips on practice choice tiles (May 13).
   User: "the options should not say a, b, c, d it should only say
   answers 11, 12, 10, 9 less text is good."
   The visible letter circle is hidden. The data-letter attribute on
   the .choice label is preserved so §68 wrong-answer state coloring
   (data-correct-letter / data-picked-letter selectors) keeps working.
   Padding shifts left since the letter chip is gone.
   ========================================================================== */
body.practice-page .choice .choice-letter,
body.practice-page .question-card .choice-letter {
  display: none !important;
}
body.practice-page .choice {
  padding-left: 16px !important;
}
body.practice-page .choice .choice-content {
  /* Without the letter chip, the answer text is the only thing in
     the row — give it a touch more vertical weight. */
  font-size: 15px;
}

/* ==========================================================================
   §81 Slim practice top bar (May 13).

   Planning-agent rated the prior top bar 3/10: site-header was hidden
   only at `.nav`, leaving an orphaned `593 pts` cluster + avatar with
   nothing to anchor to, and the breadcrumb's ⋯ menu held a single
   "Restart" item. This block restores the missing chrome inside the
   single navigation surface (the practice-breadcrumb itself):
     - brand wordmark (left, links home)
     - pts chip (right of pills, before ⋯)
     - 7-item ⋯ menu (Sound / Switch state / Show progress /
       Restart unit / Report a problem / Exit to home / user)

   Works at all viewport sizes. The mobile @media block above already
   has the tight pill + overflow styling; these rules add the new
   elements without disturbing those.
   ========================================================================== */
body.practice-page .practice-breadcrumb-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 8px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  line-height: 1;
}
body.practice-page .practice-breadcrumb-brand:hover {
  background: rgba(255, 255, 255, 0.04);
}
body.practice-page .practice-breadcrumb-brand-mark {
  color: var(--gold, #f5c542);
  font-size: 16px;
  line-height: 1;
}
body.practice-page .practice-pts-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 10px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(245, 197, 66, 0.12);
  border: 1px solid rgba(245, 197, 66, 0.28);
  color: var(--gold, #f5c542);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
body.practice-page .practice-pts-chip:hover {
  background: rgba(245, 197, 66, 0.18);
}
body.practice-page .practice-pts-chip-icon {
  font-size: 12px;
  line-height: 1;
}
body.practice-page .practice-pts-chip--guest {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 12px;
}

/* The mobile breadcrumb already declares margin-left:auto on the
   overflow button. Now that the pts chip lives between pills and ⋯
   and takes that auto-margin instead, the overflow button just needs
   a small left gap. */
body.practice-page .practice-pts-chip + .practice-breadcrumb-overflow {
  margin-left: 6px;
}

/* Expanded ⋯ menu — keep the existing dark surface but add icons,
   right-aligned state text (sound on/off, state abbr), separator,
   and a user-row at the bottom. */
body.practice-page .practice-breadcrumb-menu {
  min-width: 220px;
}
body.practice-page .practice-breadcrumb-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
body.practice-page .practice-breadcrumb-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
body.practice-page .practice-breadcrumb-menu-ico {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.75);
}
body.practice-page .practice-breadcrumb-menu-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.practice-page .practice-breadcrumb-menu-state {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
body.practice-page .practice-breadcrumb-menu-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 6px 4px;
}
body.practice-page .practice-breadcrumb-menu-item--user {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}

@media (max-width: 480px) {
  /* On phone the brand wordmark gets just the ★ to save horizontal
     room — the full "GradeEarn" text is redundant with the homepage
     it links to. */
  body.practice-page .practice-breadcrumb-brand-text { display: none; }
  body.practice-page .practice-breadcrumb-brand { padding: 4px 6px; }
  body.practice-page .practice-pts-chip { padding: 4px 8px; font-size: 12px; }
}

/* ==========================================================================
   §82 Reading mode — first-class polish (May 13).

   Planning-agent rated the Reading practice surface 3/10. The
   originally-shipped fix wrapped passage + question in a .reading-split
   grid wrapper — that BROKE the existing two-column layout at
   body[data-subject="reading"] #qbox (which had been treating the two
   cards as direct children of #qbox). DO NOT re-introduce a wrapper.

   What this block keeps from §82:
     - Question-stem speaker dropped when q.passage is present (handled
       in practice.js) → single sound source = passage TTS.
     - "Record yourself reading" demoted to ghost CTA — lower visual
       weight than 'Check answer' so the primary CTA is unambiguous.
   The two-column desktop / single-column phone layout itself is
   handled by the existing §74-era CSS at body[data-subject="reading"]
   #qbox above.
   ========================================================================== */

/* ==========================================================================
   §87 Signed-in home — grade picker IS the page (May 13).

   User: 'i dont want this view when i login. all i want is list of
   grades to choose from, grades takes me to subjects and i go to
   subject and choose a topic and study.'

   Strip every signed-in home-v2 surface EXCEPT the grade picker.
   Promote the grade picker to centerpiece: big tappable tiles
   (44px+ tap target, 18px text), centered column. Pill click now
   navigates to grade.html (§84 subject picker), which is the
   correct next step in the flow Home → Grade → Subject → Topic →
   Practice.

   Hidden under-the-hood data (continue card, wallet, daily quest,
   stats line) keeps refreshing in JS — surfaces that read it (e.g.
   MySpace, parent dashboard) are unaffected.
   ========================================================================== */
body.home-page #dashboard .home-subject-bar,
body.home-page #dashboard .home-greet,
body.home-page #dashboard .home-continue,
body.home-page #dashboard .home-wallet,
body.home-page #dashboard .home-quest,
body.home-page #dashboard .home-stats-line {
  display: none !important;
}

/* §88 — hide ALL parent-marketing layers on the signed-in home.
   Guests still see them because body.is-signed-in is only set in
   showDashboard() after auth resolves. Killed surfaces:
     - parent-layer--how    (For parents · Here's how it works + 3 cards)
     - parent-layer--toys   (Real rewards · toy showcase)
     - parent-layer--trust  (Built for parents · trust marks)
     - parent-layer--quote  (Parent testimonial)
     - parent-layer--pricing (Pricing block)
     - .mobile-hero         (mobile marketing headline)
     - .session-preview     (session-preview "Here's how it works" eyebrow)
     - .grade-picker-section (guest grade-card grid below dashboard)
   Copy preserved at docs/marketing-copy.md per §88 spec. */
body.is-signed-in .parent-layer,
body.is-signed-in .mobile-hero,
body.is-signed-in .session-preview,
body.is-signed-in .grade-picker-section,
body.is-signed-in #home-fw-ribbon,
body.is-signed-in .hero {
  display: none !important;
}

/* §89 — kill the 17-link marketing footer on every authed view.
   The footer (4-column link grid + "Made for kids who want to win"
   + copyright row) is appropriate on the marketing landing for
   guests, but a logged-in kid has no use for "Careers / Blog /
   Subprocessors" links. body.is-signed-in is set by auth.js
   setupSignedInBodyClass() on DOMContentLoaded so no flash on first
   paint. */
body.is-signed-in .footer {
  display: none !important;
}

/* §89 — product-only pages NEVER show the marketing footer, even
   for guests (a guest hitting /myspace or /achievements wouldn't
   land there organically anyway; if they do, the footer is still
   wrong for the surface). Marketing pages (/, /about, /parents)
   keep the footer for guests. */
body.myspace-page .footer,
body.achievements-page .footer,
body.league-page .footer,
body.games-page .footer,
body.settings-page .footer,
body.subject-page .footer,
body.grade-page .footer,
body.marketplace-page .footer,
body.practice-page .footer {
  display: none !important;
}

/* §88 — center the grade picker in the viewport on the signed-in
   home. Kills the dead zone the planner flagged. */
body.home-page.is-signed-in main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 100px);
}
body.home-page.is-signed-in #dashboard {
  width: 100%;
}

body.home-page #dashboard .home-v2-inner {
  padding-top: 64px;
  max-width: 560px;
  margin: 0 auto;
}
body.home-page #dashboard .home-secondary {
  display: block;
  margin: 0;
}
body.home-page #dashboard .home-gradepicker {
  display: block;
  text-align: center;
}
body.home-page #dashboard .home-gradepicker-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  margin-bottom: 24px;
}
body.home-page #dashboard .home-grade-pills {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
body.home-page #dashboard .home-grade-pill {
  font-size: 18px;
  font-weight: 600;
  padding: 18px 12px;
  min-height: 56px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
}
body.home-page #dashboard .home-grade-pill:hover {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fff;
}
body.home-page #dashboard .home-grade-pill--active {
  background: #fbbf24;
  border-color: #fbbf24;
  color: #0a1628;
}
@media (max-width: 480px) {
  body.home-page #dashboard .home-v2-inner { padding-top: 32px; }
  body.home-page #dashboard .home-grade-pills {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  body.home-page #dashboard .home-grade-pill {
    font-size: 16px;
    padding: 14px 8px;
    min-height: 52px;
  }
}

/* §82 — ghost-CTA restyle for "Record yourself reading". The pill
   was carrying gold border + filled background + 0.92rem text =
   nearly as loud as the primary 'Check answer' button below. A kid
   shouldn't have to read both labels and decide which is the
   primary action. Demote to a quieter, link-ish surface that still
   reads as tappable. */
.reading-passage-card .voice-rec-btn,
.voice-recorder-slot .voice-rec-btn {
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-weight: 500;
  min-height: 36px;
}
.reading-passage-card .voice-rec-btn:hover,
.reading-passage-card .voice-rec-btn:focus-visible,
.voice-recorder-slot .voice-rec-btn:hover,
.voice-recorder-slot .voice-rec-btn:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.92);
}
.reading-passage-card .voice-rec-btn .voice-rec-icon,
.voice-recorder-slot .voice-rec-btn .voice-rec-icon {
  font-size: 0.95rem;
  opacity: 0.7;
}

/* ==========================================================================
   §94 Practice screen polish (May 14, 2026)

   - Topic + reward stake render as a top eyebrow (was a buried bottom
     footer; kid never saw it during the answer moment).
   - Eyebrow uses uppercase + letter-spacing + gold tint for hierarchy.
   - Desktop max-width 520px + centered keeps the practice card focused;
     a subtle gold gradient ring telegraphs intentional whitespace
     rather than "broken layout" on wide screens.
   - Speaker icon: tooltip via title attribute (set in JS); tap target
     stays at 32px+ via existing .speech-btn rules.
   ========================================================================== */

/* Top-of-card eyebrow: WORD PROBLEMS · +5 pts */
.q-card-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin: 0 0 14px;
  line-height: 1.3;
}
@media (max-width: 480px) {
  .q-card-eyebrow {
    font-size: 10px;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
  }
}

/* Desktop whitespace treatment for the practice surface. The kid is
   one column; the rest of the screen is intentionally empty navy.
   A faint radial highlight behind the card telegraphs "this is the
   focus, not a layout bug." Mobile (<768px) keeps full-width. */
@media (min-width: 768px) {
  body.practice-page .practice-main {
    max-width: 560px;
    margin: 0 auto;
    position: relative;
  }
  body.practice-page .practice-main::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(900px, 80vw);
    height: min(900px, 80vh);
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle at center,
      rgba(251, 191, 36, 0.05) 0%,
      rgba(251, 191, 36, 0.02) 30%,
      transparent 60%
    );
    z-index: -1;
    pointer-events: none;
  }
}

/* ==========================================================================
   §95 Guest banner — fixed-top sticky (May 14, 2026)

   Was: inline at bottom of #practice-root with margin-top:18px,
   pushed the question stem above the fold on iPhone SE (375x667).
   Per Hamid screenshot 1:08 PM May 14, "the right symbol:" prompt
   got cut off by the banner.

   Now: position:fixed at viewport top, ~44px mobile / 40px desktop,
   Khan Academy pattern. Doesn't push content; main column gets
   matching padding-top when banner is present via body.has-guest-
   banner class. Dismissable per-session via × icon + sessionStorage
   flag.
   ========================================================================== */

#guest-banner.guest-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px 0 16px;
  height: 40px;
  background: rgba(6, 13, 31, 0.96);
  border-left: 4px solid var(--gold, #fbbf24);
  border-bottom: 1px solid rgba(251, 191, 36, 0.18);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  box-sizing: border-box;
}
#guest-banner.guest-banner .guest-banner-count {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#guest-banner.guest-banner .guest-banner-count strong {
  color: #fde68a;
  font-weight: 700;
}
#guest-banner.guest-banner .guest-banner-pts {
  color: var(--gold, #fbbf24) !important;
}
#guest-banner.guest-banner .guest-banner-cta {
  flex: 0 0 auto;
  color: var(--gold, #fbbf24);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
#guest-banner.guest-banner .guest-banner-cta:hover {
  background: rgba(251, 191, 36, 0.1);
}
#guest-banner.guest-banner .guest-banner-dismiss {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}
#guest-banner.guest-banner .guest-banner-dismiss:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

/* Reserve space at the top of every page that has the banner
   visible so content doesn't render behind it. Body class toggled
   by renderGuestBanner(). */
body.has-guest-banner { padding-top: 40px; }

/* Mobile: 44px banner, more generous tap targets, drop the
   "free preview" word if needed (the count + sign-up button are
   the primary affordances). */
@media (max-width: 480px) {
  #guest-banner.guest-banner {
    height: 44px;
    padding: 0 8px 0 12px;
    gap: 8px;
    font-size: 12.5px;
  }
  #guest-banner.guest-banner .guest-banner-cta {
    padding: 6px 8px;
    font-size: 12.5px;
  }
  body.has-guest-banner { padding-top: 44px; }
}

/* ==========================================================================
   §96 Text-contrast stopgap (May 14, 2026)

   Hamid screenshot 2026-05-14: /practice.html?review=1 rendered the
   H2 "Review your wrong answers" in dark navy on the dark navy page
   background — invisible (WCAG AA contrast fail). Likely repeats
   anywhere a generic <h1>/<h2>/<h3> renders on a dark product
   surface without an explicit color override.

   Root cause: generic <h2> rule sets color: var(--ink) (dark navy);
   body.{page}-page sets color: #fff on body, but the h-tag selector
   wins by specificity.

   This is the STOPGAP — blanket white headings on every authed
   product surface. The proper fix (axe / Lighthouse audit, then
   tighter per-component overrides) lives in the TODO under
   "TEXT-CONTRAST AUDIT".
   ========================================================================== */

body.practice-page h1, body.practice-page h2, body.practice-page h3,
body.grade-page h1, body.grade-page h2, body.grade-page h3,
body.myspace-page h1, body.myspace-page h2, body.myspace-page h3,
body.subject-page h1, body.subject-page h2, body.subject-page h3,
body.marketplace-page h1, body.marketplace-page h2, body.marketplace-page h3,
body.achievements-page h1, body.achievements-page h2, body.achievements-page h3,
body.league-page h1, body.league-page h2, body.league-page h3,
body.games-page h1, body.games-page h2, body.games-page h3,
body.settings-page h1, body.settings-page h2, body.settings-page h3 {
  color: rgba(255, 255, 255, 0.96) !important;
}

/* ==========================================================================
   §98 Scroll-to-action indicator chip (May 15, 2026)

   Phase 1 / §93 made the .q-cta button always visible by fixing it to
   viewport bottom. That worked for short questions but overlapped the
   last answer choice on long-content questions (Reading passages,
   Grade 8 Science multi-sentence answers, multi-step word problems).
   Hamid screenshot 2:31 AM May 15 confirmed.

   §98 makes the .q-cta in-flow at the end of the question card.
   When the button is offscreen below the fold, this indicator chip
   floats at viewport bottom telegraphing "↓ Scroll to check answer".
   IntersectionObserver toggles .visible per the button's position.

   Mobile-only — desktop scroll behavior is natural enough that the
   chip would be noise.
   ========================================================================== */

.q-cta-indicator {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 50%, #f59e0b 100%);
  color: #060d1f;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(251, 191, 36, 0.35), 0 2px 6px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease;
  white-space: nowrap;
}
.q-cta-indicator.visible {
  display: inline-flex;
  opacity: 1;
}
.q-cta-indicator-arrow {
  display: inline-flex;
  align-items: center;
}

/* Mobile-only — desktop never shows the indicator. */
@media (min-width: 768px) {
  .q-cta-indicator { display: none !important; }
}

/* ==========================================================================
   §99 Practice header redesign for kid comprehension (May 15, 2026)

   Hamid 5:03 AM screenshot review: 8-year-old looking at practice
   header sees 9 elements competing for attention, two stars with
   no explanation, "MEASUREMENT: PERIMETER & AREA · +4 PTS" eyebrow
   reading as textbook chapter heading, near-empty progress bar
   on Q1 telegraphing "long way to go".

   Strip the header to 5 things a kid recognizes immediately:
     Row 1 (top bar):  [← back]  Grade 3 Math  [🎯 608 pts]  [⋯]
     Row 2 (today line): Question N today · X right so far {🔥}
     Question card: no eyebrow; "+N pts" inline in Check answer button.
   ========================================================================== */

/* Top-bar title — sits between back arrow and pts chip. */
.practice-breadcrumb-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  padding-left: 4px;
}
@media (min-width: 768px) {
  .practice-breadcrumb-title { font-size: 15px; }
}

/* Pts chip — add suffix ("pts") so the number has meaning. */
.practice-pts-chip-suffix {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
  margin-left: 2px;
  letter-spacing: 0.02em;
}

/* Today line — small, secondary, grows as kid answers. Sits below
   the top bar, above the question card. */
.practice-today-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  flex-wrap: wrap;
  line-height: 1.4;
}
.practice-today-line .practice-today-q {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}
.practice-today-line .practice-today-q::before {
  content: 'Question ';
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}
.practice-today-line .practice-today-correct {
  color: rgba(255, 255, 255, 0.75);
}
.practice-today-line .practice-today-streak {
  font-size: 13px;
  margin-left: 2px;
}

/* Mastered indicator (kept only for locked questions). */
.q-card-eyebrow--locked {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  margin: 0 0 14px;
}

/* ==========================================================================
   §102 Landing-page trust-stat chips (May 15, 2026)

   Inside .parent-layer--how, between the section h2 and the
   .how-steps ol. Three chips surfacing the "bounded session +
   low time commitment + grade-aligned" trust signals that were
   buried in prose elsewhere. Reuses existing brand tokens (gold,
   navy panel gradient from .how-step, white-ish secondary text).
   ========================================================================== */

.how-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  padding: 0;
}
.how-stat {
  flex: 1 1 220px;
  min-width: 0;
  max-width: 320px;
  padding: 16px 18px;
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 12px;
  background: linear-gradient(180deg,
    rgba(40, 53, 91, 0.28) 0%,
    rgba(20, 29, 51, 0.28) 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.how-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold, #fbbf24);
  margin-bottom: 4px;
}
.how-stat-num {
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.how-stat-cap {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.35;
}

@media (max-width: 640px) {
  .how-stats {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
  }
  .how-stat {
    flex: 1 1 auto;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
  }
  .how-stat-icon {
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .how-stat-num {
    font-size: 18px;
    flex-shrink: 0;
  }
  .how-stat-cap {
    flex: 1 1 auto;
    font-size: 12.5px;
  }
}

/* ==========================================================================
   §103 Practice inline-scratch button + suppress floating pencil
   (May 15, 2026)

   The floating bottom-right scratchpad pencil was an unlabeled mystery
   affordance per Hamid's screenshot reviews. §103 surfaces it as a
   labeled sibling of the speaker icon at the top-right of the question
   prompt area. The floating pencil is CSS-hidden on practice.html;
   the canonical entry point is now the inline button.
   ========================================================================== */

/* Hide the floating bottom-right scratchpad-toggle on practice.html
   only. Other pages (mock test, etc.) still see the original
   affordance. */
body.practice-page .scratchpad-inline[data-state="collapsed"] .scratchpad-toggle--icon {
  display: none !important;
}

/* Inline scratch button — visually a sibling of .speech-btn so they
   render as a pair at the top-right of the question prompt. Reuses
   .speech-btn base styling so size + tap target + idle colors match
   without re-defining. */
body.practice-page .q-scratch-btn.speech-btn {
  color: rgba(255, 255, 255, 0.55);
}
body.practice-page .q-scratch-btn.speech-btn:hover,
body.practice-page .q-scratch-btn.speech-btn:focus-visible {
  color: var(--gold, #fbbf24);
}
body.practice-page .q-scratch-btn.speech-btn[aria-pressed="true"] {
  color: var(--gold, #fbbf24);
}

/* Group speaker + scratch buttons at the top-right of .q-prompt with
   a small gap between them, instead of overlapping or stacking awkwardly.
   The existing .q-speech-btn float-right rule (per .q-prompt) handles
   the speaker; this puts the scratch button right next to it. */
body.practice-page .q-prompt .q-scratch-btn {
  float: right;
  margin-left: 4px;
  margin-top: 0;
}

/* ==========================================================================
   §104 Pricing section — beta lock-in + trust line + inline CTA
   (May 15, 2026)

   Three-beat structure inside .parent-layer--pricing:
     1. h2: "Free while we're in beta." (unchanged)
     2. emphasized sub: "$5/month forever" lock-in (urgency)
     3. smaller trustline: "Real toys come from your subscription..."
     4. inline CTA: "Sign up free →" gold button
   ========================================================================== */

/* Emphasized lock-in line: same family/size as the base .parent-h2-sub
   but slightly brighter color + strong-tag accent for the dollar number. */
.parent-h2-sub--emphasis {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 12px;
  max-width: 520px;
}
.parent-h2-sub--emphasis strong {
  color: var(--gold, #fbbf24);
  font-weight: 700;
}

/* Smaller trust line — secondary color, reads as a footnote below the
   urgency line. */
.parent-h2-trustline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  max-width: 480px;
}

/* Pricing CTA wrapper — gives the button vertical breathing room
   between the header copy and the founder-note that follows. */
.pricing-cta {
  margin: 20px 0 24px;
}
.pricing-cta-btn {
  /* Reuses the existing .btn.btn-primary base; just constrain the
     pill width so it doesn't span the full max-width on desktop. */
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .parent-h2-sub--emphasis { font-size: 15px; }
  .parent-h2-trustline { font-size: 12.5px; }
  .pricing-cta { margin: 16px 0 20px; }
  .pricing-cta-btn {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 18px;
  }
}

/* ==========================================================================
   §105 Phase 2 + 5 + 6 (May 15, 2026) — topic + skill ID + time chip
   in practice header, trouble-spot empathy banner

   Phase 2: topic line sits above the §99 today line. Shows topic name
            + 4-char skill ID + time chip. Hidden when no _unit.title.
   Phase 5: time chip "⏱ M:SS" in the topic line, secondary color.
   Phase 6: trouble-spot empathy banner appears above the question
            prompt when wrong-streak ≥ 3. Dismissable; resets the
            5-question suppression window on dismiss.

   Phases 3 + 4 deferred to TODO (lambda action + DDB schema work).
   ========================================================================== */

.practice-topic-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  padding: 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  flex-wrap: wrap;
}
.practice-topic-name {
  font-weight: 600;
  color: #ffffff;
}
.practice-topic-sep {
  color: rgba(255, 255, 255, 0.35);
}
.practice-topic-id {
  font-family: 'JetBrains Mono', monospace, system-ui;
  font-size: 11px;
  font-weight: 500;
  color: rgba(251, 191, 36, 0.85);
  letter-spacing: 0.04em;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.18);
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.practice-topic-time {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace, system-ui;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .practice-topic-line {
    font-size: 12.5px;
    margin: 2px 0 6px;
  }
  .practice-topic-id { font-size: 10px; padding: 1px 5px; }
  .practice-topic-time { font-size: 11px; }
}

/* Trouble-spot empathy banner — sits above the question prompt
   inside .question-card. Lumen-warm tone, dismissable, no
   "Show example" button until Phase 3 ships (then it gains a
   secondary action). */
.q-trouble-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 0 14px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.q-trouble-banner-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--gold, #fbbf24);
}
.q-trouble-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.q-trouble-banner-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  border-radius: 4px;
}
.q-trouble-banner-dismiss:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

/* =============================================================
   §110 — Widget renderer (js/widgets/*.js)
   Styles for the diagram widget library: fraction-bar,
   number-line, plotter, table, area-model. All widgets render
   into a .widget-mount container; SVG widgets carry .widget-svg,
   table widget renders a .widget-table HTML element.

   STAAR conventions per docs/widgets/architecture.md:
   - Verdana font for all in-diagram labels (set on SVG <text>).
   - Navy (#1e3a8a) is the canonical online-test bar/fill color.
   - Tight padding, thin black strokes, no gradients/shadows.
   ============================================================= */

.widget-mount {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  line-height: 0;          /* prevent baseline gap under inline SVG */
}
.widget-mount + .widget-mount {
  margin-left: 14px;
}

/* Inline SVG widgets (fraction-bar, number-line, plotter, area-model). */
.widget-svg {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}

/* HTML table widget. STAAR convention: header row bold + light
   gray fill; thin black borders; tight padding; Verdana. */
.widget-table {
  border-collapse: collapse;
  font-family: Verdana, "DejaVu Sans", sans-serif;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  border: 1.5px solid #0f172a;
}
.widget-table caption.widget-table-caption {
  caption-side: top;
  text-align: left;
  font-weight: 600;
  padding: 4px 6px 6px;
  color: #0f172a;
}
.widget-table thead th {
  background: #f1f5f9;
  font-weight: 700;
  text-align: left;
  padding: 6px 10px;
  border: 1px solid #0f172a;
  white-space: nowrap;
}
.widget-table tbody td {
  padding: 5px 10px;
  border: 1px solid #475569;
  vertical-align: middle;
}
.widget-table tbody tr:nth-child(even) td {
  background: #fafbfc;
}

/* Error placeholder shown when a spec is malformed. */
.widget-error {
  display: inline-block;
  padding: 6px 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #6b7280;
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  user-select: none;
}

/* Dark-surface variant — widgets rendered on the dark practice
   page background need lighter contrast around them. The widget
   itself stays light (paper-style) but the container gets a
   white card with subtle shadow so the widget reads as "paper
   inside the dark practice card." Used inside MC choice tiles
   when the choice IS the widget. */
body.practice-page .widget-svg,
body.practice-page .widget-table {
  background: #ffffff;
  border-radius: 8px;
}
body.practice-page .widget-mount {
  padding: 10px;
  background: #ffffff;
  border-radius: 8px;
}

/* Choice-tile-as-widget: when a MC choice is "which diagram?",
   the entire choice tile is the widget plus an answer letter.
   This styling lets the choice .q-choice already on the page
   wrap a .widget-mount cleanly. */
.q-choice .widget-mount {
  margin: 0;
  width: 100%;
  background: #ffffff;
}

/* Mobile — shrink widget sizes proportionally. */
@media (max-width: 480px) {
  .widget-svg { width: 100%; }
  .widget-mount + .widget-mount { margin-left: 8px; }
  .widget-table { font-size: 12px; }
  .widget-table thead th { padding: 5px 8px; }
  .widget-table tbody td { padding: 4px 8px; }
}

/* §110 — practice page widget integration. Stimulus widget sits
   between the question prompt and the choice list. Choice-widget
   variant gives the choice tile a "paper" inner surface that contrasts
   with the dark practice card. */
body.practice-page .q-stimulus {
  margin: 14px 0 18px;
  display: flex;
  justify-content: center;
}
body.practice-page .q-stimulus .widget-mount {
  margin: 0;
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  max-width: 100%;
}
body.practice-page .choice--widget {
  align-items: center;
  padding: 12px 16px;
}
body.practice-page .choice--widget .choice-content {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
body.practice-page .choice--widget .choice-content .widget-mount {
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}
body.practice-page .choice--widget .widget-svg,
body.practice-page .choice--widget .widget-table {
  max-width: 100%;
  background: #ffffff;
  padding: 8px;
  border-radius: 8px;
}
@media (max-width: 480px) {
  body.practice-page .q-stimulus .widget-mount { padding: 10px 12px; }
  body.practice-page .choice--widget { padding: 10px 12px; }
}

/* =============================================================
   §111 — Wrong-answer card premium pass (2026-05-15)

   Critique applied (kid sees a "Cancel/Wrong" state and the card
   currently feels CD-ROM-y):

   1. Red border around the whole card → soft top-bar accent only.
      Premium products (IXL/Khan/Duolingo) keep error signal
      contained to a single chip/bar, never the full container.
   2. Gold-highlighted numbers inside tutor prose compete with the
      gold Next-question CTA and the gold star icon. Drop the gold
      tint on inline <strong> so the kid's eye doesn't bounce.
   3. The compact tutor line ("8 + 0 = 8") is undersized — needs
      to be the visual focus of the wrong card. Bump font size
      + line weight.
   4. The send button reads as a chunky empty square. Match the
      input's height + premium dark-on-light contrast.
   ============================================================= */

/* (1) Soften the red card outline. Replace 0.55-opacity border +
   12% red glow with a single 2px red top accent + subtle inset. */
body.practice-page .question-card[data-state="wrong"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 2px 0 rgba(239, 68, 68, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.18) !important;
}

/* (2) Drop gold-tint on inline <strong> inside the tutor reply
   when we're in a wrong-answer expanded state. Keep weight, drop
   the color so the prose breathes. */
body.practice-page .question-card[data-state="wrong"] .tutor-msg strong,
body.practice-page .q-wrong-expand .tutor-msg strong {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}

/* (3) Make the compact tutor line read like an answer-reveal card.
   Currently a single inline line; promote it. */
body.practice-page .q-wrong-tutor-line {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 600;
  color: #fde68a;
  padding: 14px 16px;
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.18);
  border-radius: 12px;
  margin: 6px 0 12px;
}
body.practice-page .q-wrong-tutor-icon {
  flex-shrink: 0;
  margin-right: 4px;
  color: #fbbf24;
}

/* (4) Premium send button. Match input height (44px), drop the
   chunky 32x32. Use a refined amber gradient with crisp icon. */
body.practice-page .tutor-followup--row .tutor-send {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0f172a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 1px 2px rgba(0, 0, 0, 0.15);
  transition: transform 0.06s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
body.practice-page .tutor-followup--row .tutor-send svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}
body.practice-page .tutor-followup--row .tutor-send:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 2px 4px rgba(251, 191, 36, 0.35);
}
body.practice-page .tutor-followup--row .tutor-send:active {
  transform: translateY(1px);
}
body.practice-page .tutor-followup--row input {
  height: 44px;
}

/* Tighter tutor panel padding so the kid keeps Next visible. */
body.practice-page .q-wrong-expand .tutor-box {
  padding: 12px 14px;
}
body.practice-page .q-wrong-expand .tutor-msg {
  margin-bottom: 10px;
}
body.practice-page .q-wrong-expand .tutor-msg:last-child {
  margin-bottom: 4px;
}

/* Hide / minimize duplicate chip after the kid taps it — currently
   the same 3 chips show after each round. Apply a slight fade so
   the kid sees the AI has "moved past" their first signal. */
body.practice-page .tutor-suggestions .tutor-chip[data-used="1"] {
  opacity: 0.45;
  pointer-events: none;
}

/* =============================================================
   §112 — Wrong-card follow-up shell (premium rebuild)
   Re-do the follow-up row as ONE cohesive shell instead of two
   floating elements with a gap. Input + button live inside the
   shell; gold accent on the button's right edge only.
   ============================================================= */

body.practice-page .tutor-followup--row {
  display: flex;
  align-items: stretch;        /* both children fill the row */
  gap: 0;                      /* zero gap — button is flush */
  padding: 0;                  /* shell border is the only frame */
  margin-top: 14px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  overflow: hidden;            /* clip button to match radius */
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
body.practice-page .tutor-followup--row:focus-within {
  border-color: rgba(251, 191, 36, 0.6);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.10);
}

body.practice-page .tutor-followup--row input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  height: 44px;
  padding: 0 14px;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  line-height: 44px;
}
body.practice-page .tutor-followup--row input:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;  /* defeat older blue focus ring */
}
body.practice-page .tutor-followup--row input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

body.practice-page .tutor-followup--row .tutor-send {
  flex: 0 0 56px;              /* fixed width, no shrink */
  width: 56px;
  height: 44px;
  border: none !important;
  border-radius: 0 !important; /* matches shell's clipped overflow */
  background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
  color: #0f172a !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: filter 0.15s ease, transform 0.06s ease;
}
body.practice-page .tutor-followup--row .tutor-send:hover:not(:disabled) {
  filter: brightness(1.08);
}
body.practice-page .tutor-followup--row .tutor-send:active {
  transform: translateY(0);     /* keep flush; we already feel the press via filter */
  filter: brightness(0.95);
}
body.practice-page .tutor-followup--row .tutor-send:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Force the SVG icon to be VISIBLE. Earlier rules left it at
   16x16 inside 32x32 = lost. Now 18x18 inside 56x44 cell, with
   explicit color override (the only thing that could've made
   it invisible was a cascaded color matching the bg). */
body.practice-page .tutor-followup--row .tutor-send svg {
  width: 18px !important;
  height: 18px !important;
  stroke: #0f172a !important;
  fill: none !important;
  stroke-width: 2 !important;
  pointer-events: none;
  display: block;
}

@media (max-width: 480px) {
  body.practice-page .tutor-followup--row {
    margin-top: 12px;
    border-radius: 12px;
  }
  body.practice-page .tutor-followup--row input {
    height: 44px;
    padding: 0 12px;
    font-size: 16px;            /* iOS auto-zoom prevention */
  }
  body.practice-page .tutor-followup--row .tutor-send {
    flex: 0 0 52px;
    width: 52px;
  }
}

/* =============================================================
   §114 — Fun Facts Discovery Deck (May 16)

   Replaces the §75 scrolling-list facts surface with a single-card
   deck. One fact at a time, 3 AI-powered pill actions, ghost cards
   behind for stack illusion, keyboard + swipe + chevron navigation.

   PALETTE LOCK: only existing navy + gold tokens. NO green / teal
   / cyan anywhere (banned project-wide). The heart emoji is the
   only "green" pixel and it flips to gold when saved.
   ============================================================= */

body.facts-page--deck {
  background: #060d1f;
  color: #e6eaf2;
  min-height: 100vh;
}

.deck-main {
  padding: 32px 20px 64px;
}
.deck-inner {
  max-width: 540px;
  margin: 0 auto;
}

/* ---- Compact head: eyebrow + filter chip + position ---- */
.deck-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  text-align: center;
}
.deck-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(251, 191, 36, 0.85);
  text-transform: uppercase;
}
.deck-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.deck-filter-chip:hover {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.06);
}
.deck-filter-chip-arrow {
  font-size: 10px;
  opacity: 0.6;
}
.deck-position {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.06em;
}

/* ---- Stage = card + ghost cards ---- */
.deck-stage {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  height: auto;
  perspective: 1200px;
}

.deck-card {
  position: relative;
  width: 100%;
  min-height: 360px;
  padding: 22px 22px 18px;
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.85), rgba(30, 41, 59, 0.6));
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 24px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}
.deck-card--ghost {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: 360px;
  pointer-events: none;
  z-index: 0;
}
.deck-card--ghost-1 {
  transform: translate(8px, 8px);
  opacity: 0.6;
}
.deck-card--ghost-2 {
  transform: translate(16px, 16px);
  opacity: 0.32;
}
.deck-card--focal {
  position: relative;
  z-index: 2;
}

/* Card header */
.deck-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.deck-card-emoji-tile {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 12px;
  flex-shrink: 0;
}
.deck-card-cat {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(251, 191, 36, 0.85);
  text-transform: uppercase;
}

/* The fact text — display serif, large, breathing */
.deck-card-fact {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(20px, 4.5vw, 26px);
  line-height: 1.4;
  color: #f4f6fa;
  margin: 4px 0 16px;
  flex: 1 1 auto;
}

/* Why? explanation reveal */
.deck-card-why {
  margin: 0 0 16px;
  padding: 8px 0 8px 12px;
  border-left: 2px solid rgba(251, 191, 36, 0.55);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}
@media (prefers-reduced-motion: no-preference) {
  .deck-card-why--in {
    animation: deckWhyIn 180ms ease-out;
  }
}
@keyframes deckWhyIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Action pills row */
.deck-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.deck-action {
  flex: 1 1 0%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
  min-height: 44px;
}
.deck-action:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.06);
  color: #ffffff;
}
.deck-action:disabled {
  opacity: 0.6;
  cursor: progress;
}
.deck-action--loading {
  position: relative;
}
.deck-action--why {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.06);
  color: #fde68a;
}
.deck-action--why:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(251, 191, 36, 0.14);
}
.deck-action--saved {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.10);
}
.deck-action-emoji {
  font-size: 16px;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .deck-heart--bounce {
    animation: deckHeartBounce 240ms ease-out;
  }
}
@keyframes deckHeartBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Empty state */
.deck-empty {
  margin-top: 32px;
  padding: 24px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.deck-empty p { margin: 0 0 10px; }
.deck-empty-cta {
  margin-top: 8px;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #060d1f;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

/* Nav row */
.deck-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.deck-nav-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 0.06s ease;
}
.deck-nav-btn:hover {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.06);
  color: #ffffff;
}
.deck-nav-btn:active {
  transform: scale(0.96);
}
.deck-nav-btn--next {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: rgba(251, 191, 36, 0.65);
  color: #060d1f;
}
.deck-nav-btn--next:hover {
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
  filter: brightness(1.05);
}

.deck-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.deck-dot {
  width: 5px;
  height: 5px;
  background: rgba(251, 191, 36, 0.25);
  border-radius: 50%;
}
.deck-dot--t0 {
  width: 8px;
  height: 8px;
  background: #fbbf24;
}
.deck-dot--t1 {
  background: rgba(251, 191, 36, 0.55);
}
.deck-dot--t2 {
  background: rgba(251, 191, 36, 0.28);
}
.deck-dot--ghost {
  background: rgba(255, 255, 255, 0.08);
}

.deck-helper {
  margin: 18px 0 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: rgba(244, 246, 250, 0.35);
  letter-spacing: 0.04em;
}

/* Card transition animations */
@media (prefers-reduced-motion: no-preference) {
  .deck-card--in-right {
    animation: deckInRight 200ms ease-out;
  }
  .deck-card--in-left {
    animation: deckInLeft 200ms ease-out;
  }
}
@keyframes deckInRight {
  from { opacity: 0; transform: translateX(24px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)   scale(1); }
}
@keyframes deckInLeft {
  from { opacity: 0; transform: translateX(-24px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0)    scale(1); }
}

/* ---- Filter dialog (bottom sheet on mobile, centered on desktop) ---- */
.deck-filter-dialog {
  border: 1px solid rgba(251, 191, 36, 0.30);
  border-radius: 18px;
  background: #0f172a;
  color: #e6eaf2;
  padding: 0;
  max-width: 440px;
  width: calc(100% - 40px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.deck-filter-dialog::backdrop {
  background: rgba(6, 13, 31, 0.7);
  backdrop-filter: blur(4px);
}
.deck-filter-form {
  margin: 0;
}
.deck-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 8px;
}
.deck-filter-title {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
.deck-filter-close {
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  padding: 0 4px;
}
.deck-filter-close:hover { color: #ffffff; }
.deck-filter-section {
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.deck-filter-section:first-of-type { border-top: 0; }
.deck-filter-label {
  display: block;
  margin-bottom: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(251, 191, 36, 0.78);
  text-transform: uppercase;
}
.deck-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.deck-fpill {
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: all 160ms ease;
}
.deck-fpill:hover {
  border-color: rgba(251, 191, 36, 0.4);
  color: #ffffff;
}
.deck-fpill--active {
  color: #060d1f;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: rgba(251, 191, 36, 0.8);
  font-weight: 600;
}
.deck-filter-foot {
  padding: 14px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: flex-end;
}
.deck-filter-apply {
  padding: 10px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #060d1f;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.deck-filter-apply:hover {
  filter: brightness(1.06);
}

/* Mobile: convert centered modal to bottom sheet */
@media (max-width: 540px) {
  .deck-filter-dialog {
    width: 100%;
    max-width: none;
    margin: 0 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: 18px 18px 0 0;
    border-bottom: none;
  }
  .deck-main { padding: 20px 16px 48px; }
  .deck-card { padding: 18px 18px 14px; min-height: 320px; }
  .deck-card--ghost { min-height: 320px; }
  .deck-card-emoji-tile { width: 40px; height: 40px; font-size: 22px; }
  .deck-action { font-size: 11px; padding: 10px 6px; gap: 4px; }
  .deck-action-emoji { font-size: 14px; }
}

/* Empty/visibility helpers */
.deck-stage[hidden] { display: none; }
.deck-nav[hidden]   { display: none; }
.deck-empty[hidden] { display: none; }
.deck-card-why[hidden] { display: none; }

/* =============================================================
   §115 — Fun Facts category picker (May 16)

   Landing view: grid of category tiles. Tapping a tile transitions
   to the §114 deck filtered to that category. Kids think in topics
   (Sports, Dinos, Space) not subjects.
   ============================================================= */

body.facts-page--deck .deck-picker { padding: 36px 20px 64px; }
.deck-picker-inner {
  max-width: 720px;
  margin: 0 auto;
}
.deck-picker-head {
  text-align: center;
  margin-bottom: 28px;
}
.deck-picker-title {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 400;
  color: #ffffff;
  margin: 6px 0 8px;
  letter-spacing: -0.01em;
}
.deck-picker-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.deck-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}
.deck-picker-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px 14px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
  position: relative;
  overflow: hidden;
}
.deck-picker-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.05);
}
.deck-picker-tile--all {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), rgba(245, 158, 11, 0.06));
  border-color: rgba(251, 191, 36, 0.40);
}
.deck-picker-tile--all:hover {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(245, 158, 11, 0.10));
}
.deck-picker-tile-emoji {
  font-size: 28px;
  line-height: 1;
}
.deck-picker-tile-name {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}
.deck-picker-tile-count {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
.deck-picker-tile-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.deck-picker-tile-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.deck-picker-tile-progress {
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.40);
  letter-spacing: 0.04em;
}

.deck-picker-foot {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.deck-picker-age {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  cursor: pointer;
}
.deck-picker-age strong { color: rgba(251, 191, 36, 0.92); font-weight: 600; }
.deck-picker-age-arrow { font-size: 10px; opacity: 0.6; }
.deck-picker-age:hover {
  border-color: rgba(251, 191, 36, 0.45);
}

/* Back chevron on the deck head (replaces top-left dead space) */
.deck-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.deck-back:hover {
  color: #ffffff;
  border-color: rgba(251, 191, 36, 0.45);
}

@media (max-width: 540px) {
  .deck-picker-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .deck-picker-tile { padding: 14px 12px 12px; }
  .deck-picker-tile-emoji { font-size: 24px; }
}

/* Hidden-state helpers */
.deck-picker[hidden], .deck-main[hidden] { display: none; }

/* =============================================================
   §116 — Brand-system cleanup on the Fun Facts deck (May 16)

   Kills the OS-emoji chrome (🤔 🎲 💚 🎯), replaces with inline
   Tabler-style SVG icons in gold/cream. Adds the AI-moment
   signal to the Why? button: subtle gold-gradient bg + pulsing
   halo + sparkle-icon wobble. All honored by prefers-reduced-motion.

   PALETTE LOCK: navy + gold only. No green / teal / cyan /
   magenta / pink anywhere in chrome (the heart emoji
   is gone — now a navy-cream / gold SVG via stroke=currentColor).
   ============================================================= */

/* Base icon — adopts surrounding color via currentColor */
.deck-icon {
  flex-shrink: 0;
  pointer-events: none;
  vertical-align: middle;
}

/* Filter chip — replace 🎯 emoji with sliders icon, gold-tinted */
body.facts-page--deck .deck-filter-chip .deck-icon {
  color: rgba(251, 191, 36, 0.85);
}
body.facts-page--deck .deck-filter-chip:hover .deck-icon {
  color: #fbbf24;
}

/* Action pill icons */
.deck-action .deck-icon {
  color: rgba(255, 255, 255, 0.78);
}
.deck-action:hover:not(:disabled) .deck-icon {
  color: #ffffff;
}

/* Why? button — the AI moment. Subtle gold gradient + slight
   border emphasis + pulse halo until tapped. */
.deck-action--why,
.deck-action--ai {
  position: relative;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.06)) !important;
  border-color: rgba(251, 191, 36, 0.50) !important;
  color: #fde68a !important;
}
.deck-action--why .deck-icon {
  color: #fbbf24 !important;
}
.deck-action--why:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.10)) !important;
  border-color: rgba(251, 191, 36, 0.80) !important;
}

/* Why? pulse — only while .deck-action--ai-pulsing is on. JS
   removes the class on tap, after 4s, or if the explanation is
   already cached for the current card. */
@media (prefers-reduced-motion: no-preference) {
  .deck-action--ai-pulsing {
    animation: deckAiPulse 2s ease-in-out infinite;
  }
  .deck-action--ai-pulsing .deck-icon--sparkles {
    animation: deckSparkleWobble 1.4s ease-in-out infinite;
    transform-origin: center;
  }
}
@keyframes deckAiPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
  50%      { box-shadow: 0 0 8px 2px rgba(251, 191, 36, 0.18); }
}
@keyframes deckSparkleWobble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}

/* Save button — Tabler heart. Outline (cream/60) when not saved,
   filled (gold) when saved. JS toggles which SVG is hidden. */
.deck-action--save .deck-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.deck-action--save .deck-icon--heart {
  color: rgba(255, 255, 255, 0.60);
}
.deck-action--save:hover:not(:disabled) .deck-icon--heart {
  color: rgba(255, 255, 255, 0.85);
}
.deck-action--save.deck-action--saved {
  color: #fde68a !important;
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.10);
}
.deck-action--save.deck-action--saved .deck-icon--heart {
  color: #fbbf24 !important;
}

/* Gold-particle burst on save */
.deck-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .deck-particle {
    animation: deckParticleUp 600ms ease-out forwards;
  }
}
@keyframes deckParticleUp {
  0%   { transform: translate(calc(-50% + 0px), -50%)               scale(0.6); opacity: 0; }
  20%  { transform: translate(calc(-50% + var(--dx, 0px)), -120%)   scale(1.0); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -300%)   scale(0.4); opacity: 0; }
}

/* Mobile tightening — Tabler icons are 16px so pill stays readable */
@media (max-width: 540px) {
  .deck-action { gap: 5px; }
  .deck-icon { width: 14px; height: 14px; }
}

/* §116 — Strengthen category emoji tile containers. Emoji stays
   (it's CONTENT, not chrome), but some emoji bring their own
   palette (basketball orange, dartboard rainbow) — tile's gold-
   tinted bg + stronger border helps contain. */
body.facts-page--deck .deck-card-emoji-tile {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.40);
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.06);
}
body.facts-page--deck .deck-picker-tile-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 22px !important;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 10px;
}

/* ============================================================
   §120 — Reading-comprehension question rebuild (May 17)
   ============================================================
   Target: question stem ALWAYS visible, passage collapsible (sticky
   on scroll), text left-aligned (never justified), per-question
   earning visible. Gold-only per design system; red used only as a
   wrong-answer status color (not chrome).

   Surfaces touched:
     • .practice-context-bar  — two-line title (Grade N Subject /
                                 Domain · Topic) + compact pts pill
     • .practice-header--slim — old "Question N today · M right"
                                 line hidden on the question card
     • .reading-q-nav         — replaced visual contents with the
                                 progress-earn strip (5 dashes +
                                 "N of M" + "+X¢ if correct")
     • .reading-passage-card  — Listen + Record audio in header,
                                 Hide-passage toggle in footer
     • .q-prompt              — wrapped in .q-stem block (gold-tinted
                                 bg + 2px gold left border + eyebrow)
     • .choice                — full-width letter-circle button rows
                                 with gold-selected and post-check
                                 correct/wrong states
     • .q-cta                 — sticky full-width gold Check pill

   All animations gated on prefers-reduced-motion. No new breakpoints.
   ============================================================ */

/* ---------- §120 Header — two-line title ---------- */
body.practice-page .practice-breadcrumb {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
}
body.practice-page .practice-breadcrumb-back {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: all 160ms ease;
}
body.practice-page .practice-breadcrumb-back:hover {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}
body.practice-page .practice-breadcrumb-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: 'Inter';
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.practice-page .practice-breadcrumb-title-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  font-family: 'Inter';
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
}
body.practice-page .practice-pts-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.36);
  border-radius: 999px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
body.practice-page .practice-pts-chip-suffix {
  display: none;  /* §120 spec — drop "pts" word, just icon + number */
}
body.practice-page .practice-breadcrumb-overflow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all 160ms ease;
}
body.practice-page .practice-breadcrumb-overflow:hover {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}

/* §120 — hide the legacy "Question N today · M right so far" line
   on the practice card. The new progress-earn strip beneath the
   passage carries the per-question position; the daily counter
   moves to the home page's earn-hero (§119). */
body.practice-page .practice-header--slim .practice-today-line {
  display: none;
}
body.practice-page .practice-header--slim .practice-topic-line {
  display: none;
}
body.practice-page .practice-header--slim {
  margin: 0;
  padding: 0;
}

/* ---------- §120 Progress + earn strip ---------- */
.q-progress-earn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 14px;
  font-family: 'Inter';
}
.q-progress-earn-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.q-progress-dashes {
  display: inline-flex;
  gap: 4px;
}
/* §152 (May 18) premium polish — sharper contrast between done/current
   /upcoming. Upcoming was at 30% alpha which blended into done; current
   gets a slightly wider footprint so the kid feels position. */
.q-progress-dash {
  width: 16px;
  height: 4px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.16);
  transition: background 200ms ease, width 200ms ease;
}
.q-progress-dash--done {
  background: #D4AF37;
}
.q-progress-dash--current {
  background: #D4AF37;
  width: 22px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.55);
}
.q-progress-label {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-earn-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: #fbbf24;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.q-earn-label.q-earn-label--earned {
  /* §120 — earned state stays gold per design system (no green/teal).
     Brightened with a soft halo so it reads as "lit up" vs the
     dimmer pre-check gold without violating the palette. */
  color: #fbbf24;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.55);
}
.q-earn-label svg { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .q-progress-dash { transition: none; }
}

/* ---------- §120 Passage card ---------- */
body.practice-page .reading-passage-card {
  position: relative;
  margin: 0 0 14px;
  padding: 14px 16px 12px;
  background: linear-gradient(180deg,
    rgba(30, 41, 75, 0.55) 0%,
    rgba(15, 23, 42, 0.55) 100%);
  border: 1px solid rgba(251, 191, 36, 0.20);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
body.practice-page .reading-passage-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
body.practice-page .reading-passage-card-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Audio controls (Listen + Record) — same visual weight, 28px squares */
body.practice-page .reading-passage-card-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body.practice-page .passage-audio-btn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: all 160ms ease;
  padding: 0;
}
body.practice-page .passage-audio-btn:hover {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}
body.practice-page .passage-audio-btn--listen,
body.practice-page .passage-audio-btn.speech-btn--playing {
  background: rgba(251, 191, 36, 0.12);
  border-color: rgba(251, 191, 36, 0.40);
  color: #fbbf24;
}
body.practice-page .reading-passage-card .reading-passage-expand {
  display: none;  /* §120 — full expand is the open card; we don't
                     fullscreen anymore. The Hide-passage toggle in
                     the footer is the canonical collapse control. */
}

/* Passage body — LEFT-ALIGNED, never justified. */
body.practice-page .reading-passage-card-body {
  font-family: 'Inter';
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  text-align: left !important;
  text-justify: none !important;
  hyphens: none;
}
body.practice-page .reading-passage-card-body p {
  margin: 0 0 10px;
  text-align: left !important;
}
body.practice-page .reading-passage-card-body p:last-child {
  margin-bottom: 0;
}

/* Hide-passage toggle (footer) */
body.practice-page .reading-passage-toggle-footer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 0;
  background: none;
  border: none;
  font-size: 11px;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.78);
  cursor: pointer;
  letter-spacing: 0.01em;
}
body.practice-page .reading-passage-toggle-footer:hover { color: #fbbf24; }
body.practice-page .reading-passage-toggle-footer svg {
  transition: transform 200ms ease;
}

/* Collapsed state — body and toggle-footer chevron rotate */
body.practice-page .reading-passage-card.is-collapsed .reading-passage-card-body {
  display: none;
}
body.practice-page .reading-passage-card.is-collapsed .reading-passage-toggle-footer svg {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  body.practice-page .reading-passage-toggle-footer svg { transition: none; }
}

/* Sticky-on-scroll thin bar. Inside the page scroll container —
   no position:fixed. When scrolled past the card the top edge
   sticks; the body remains in flow. */
body.practice-page .reading-passage-card-header {
  position: sticky;
  top: 0;
  z-index: 5;
  background: linear-gradient(180deg,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(15, 23, 42, 0.85) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding-top: 4px;
  padding-bottom: 4px;
}

/* ---------- §120 Question stem block ---------- */
body.practice-page .question-card .q-prompt {
  position: relative;
  display: block;
  margin: 0 0 14px;
  padding: 12px 14px 12px 16px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-left: 2px solid #fbbf24;
  border-radius: 0 10px 10px 0;
}
body.practice-page .question-card .q-prompt::before {
  content: 'QUESTION';
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fbbf24;
  margin-bottom: 4px;
}
body.practice-page .question-card .q-prompt-text {
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.4;
  letter-spacing: -0.005em;
}
/* The inline speaker/scratch buttons that sit inside .q-prompt
   stay at the top-right of the gold block. */
body.practice-page .question-card .q-prompt .speech-btn,
body.practice-page .question-card .q-prompt .q-scratch-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  width: 28px;
  height: 28px;
}

/* ---------- §120 Answer choices — full-width letter-circle rows ---------- */
body.practice-page .question-card .q-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
body.practice-page .question-card .choice {
  position: relative;
  display: grid;
  /* §150 (May 18) — was `28px 1fr auto` with a 28px column reserved for
     .choice-letter. §79 hides .choice-letter via display:none; with only
     .choice-content visible (radio is position:absolute, also out of flow),
     the content was auto-placing into the 28px column → text wraps one
     character per line. Collapsed to 1fr auto so content gets full width. */
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  min-height: 52px;
  background: rgba(30, 41, 75, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: all 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
body.practice-page .question-card .choice:hover {
  border-color: rgba(251, 191, 36, 0.30);
  background: rgba(30, 41, 75, 0.65);
}
body.practice-page .question-card .choice input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.practice-page .question-card .choice .choice-letter {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 500;
  font-family: 'Inter';
  flex-shrink: 0;
}
body.practice-page .question-card .choice .choice-content {
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  font-family: 'Inter';
  letter-spacing: -0.005em;
  min-width: 0;
  word-wrap: break-word;
}
body.practice-page .question-card .choice.is-selected {
  border-color: rgba(251, 191, 36, 0.55);
  background: rgba(251, 191, 36, 0.06);
}
body.practice-page .question-card .choice.is-selected .choice-letter {
  background: rgba(251, 191, 36, 0.18);
  border-color: rgba(251, 191, 36, 0.65);
  color: #fbbf24;
}
/* Post-check states */
body.practice-page .question-card.is-checked .choice {
  cursor: default;
}
body.practice-page .question-card.is-checked .choice.is-correct {
  border-color: #fbbf24;
  background: rgba(251, 191, 36, 0.12);
}
body.practice-page .question-card.is-checked .choice.is-correct .choice-letter {
  background: rgba(251, 191, 36, 0.20);
  border-color: #fbbf24;
  color: #fbbf24;
}
body.practice-page .question-card.is-checked .choice.is-incorrect {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.10);
}
body.practice-page .question-card.is-checked .choice.is-incorrect .choice-letter {
  background: rgba(239, 68, 68, 0.16);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
}
/* Status icon (✓ or ✗) appears after Check */
body.practice-page .question-card .choice-status {
  display: none;
}
body.practice-page .question-card.is-checked .choice.is-correct .choice-status,
body.practice-page .question-card.is-checked .choice.is-incorrect .choice-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.practice-page .question-card.is-checked .choice.is-correct .choice-status { color: #fbbf24; }
body.practice-page .question-card.is-checked .choice.is-incorrect .choice-status { color: #fca5a5; }
@media (prefers-reduced-motion: reduce) {
  body.practice-page .question-card .choice { transition: none; }
}

/* ---------- §120 Sticky Check button ---------- */
body.practice-page .question-card .btn-primary.q-cta {
  position: sticky;
  bottom: 12px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  font-family: 'Inter';
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #0a0f1f;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 20px -4px rgba(251, 191, 36, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  margin-top: 4px;
}
body.practice-page .question-card .btn-primary.q-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -4px rgba(251, 191, 36, 0.45);
}
body.practice-page .question-card .btn-primary.q-cta:active {
  transform: scale(0.99);
}
body.practice-page .question-card .btn-primary.q-cta:disabled,
body.practice-page .question-card .btn-primary.q-cta[aria-disabled="true"] {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.30) 0%, rgba(245, 158, 11, 0.30) 100%);
  color: rgba(10, 15, 31, 0.55);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body.practice-page .question-card .btn-primary.q-cta { transition: none; }
}

/* ---------- §120 Voice recorder icon-only mode ---------- */
/* When the voice mount lives inside the passage card header (audio
   row), render the Record button as a 30px square that matches the
   Listen button. The legacy pill form ("🎙️ Record yourself reading")
   remains for any other surface that mounts it. */
body.practice-page .reading-passage-card-audio .voice-recorder-slot,
body.practice-page .reading-passage-card-audio .voice-recorder {
  display: inline-flex;
}
body.practice-page .reading-passage-card-audio .voice-rec-btn.voice-rec-start {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
}
body.practice-page .reading-passage-card-audio .voice-rec-btn.voice-rec-start:hover {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}
body.practice-page .reading-passage-card-audio .voice-rec-label {
  display: none;  /* hide "Record yourself reading" inline label */
}
body.practice-page .reading-passage-card-audio .voice-rec-icon-svg {
  width: 16px;
  height: 16px;
}

/* ============================================================
   §121 — Page 2 reshape (May 17)
   ============================================================
   • Brand wordmark: gold-G square tile + "GradeEarn" on every page
     that already uses .brand--wordmark (auto-applies via ::before).
   • home-headline: "You're in. / Let's earn." for logged-out kids.
   • mindblower-hero: promoted from teaser pill to a full hero card
     above the subjects, with category emoji + fact count + CTA.
   • subject-tiles-grid: 4-col with Social Studies inline (dashed
     "Coming soon" tile) + one-line subtitles per subject.
   • signup-nudge: bottom CTA for logged-out kids.

   Gold-only palette. Reduced-motion safe. No new breakpoints.
   ============================================================ */

/* ---------- §121 Brand wordmark — gold-G square tile prepended.
   This block REPLACES the legacy text-only wordmark via ::before
   on .brand--wordmark, so every page that already has the existing
   anchor automatically gets the upgraded brand without any HTML
   change. The serif "G" is drawn as content of the ::before so it
   never breaks layout on long viewports. ---------- */
.brand--wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand--wordmark::before {
  content: 'G';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #fbbf24 0%, #b8941f 100%);
  color: #0a0f1f;
  font-family: 'Instrument Serif', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
              0 4px 10px -2px rgba(251, 191, 36, 0.30);
}
@media (hover: hover) {
  .brand--wordmark:hover::before {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  }
}
.brand--wordmark .brand-text {
  font-family: 'Inter';
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.005em;
}
.brand--wordmark .brand-text-accent {
  color: #ffffff;  /* §121 — single-color wordmark; gold lives in the G tile */
}

/* ---------- §121 Headline block (logged-out only) ---------- */
.home-headline {
  margin-top: -8px;
  margin-bottom: 4px;
}
.home-headline-eyebrow {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 4px;
  letter-spacing: 0.005em;
}
.home-headline-title {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.home-headline-title .home-headline-gold {
  color: #fbbf24;
}
@media (min-width: 768px) {
  .home-headline-title { font-size: 38px; }
}

/* ---------- §121 Breadcrumb "change" link ---------- */
body.grade-page .breadcrumb--mid-dot .breadcrumb-change-link {
  margin-left: 10px;
  font-size: 11px;
  color: rgba(251, 191, 36, 0.70);
  text-decoration: none;
  letter-spacing: 0.005em;
}
body.grade-page .breadcrumb--mid-dot .breadcrumb-change-link:hover {
  color: #fbbf24;
}

/* ---------- §121 Mind Blower HERO card ---------- */
.mindblower-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 22px 24px;
  background: linear-gradient(135deg,
    rgba(251, 191, 36, 0.14) 0%,
    rgba(20, 29, 51, 0.55) 60%,
    rgba(15, 23, 42, 0.55) 100%);
  border: 1px solid rgba(251, 191, 36, 0.40);
  border-radius: 20px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
@media (hover: hover) {
  .mindblower-hero:hover {
    border-color: rgba(251, 191, 36, 0.62);
    box-shadow: 0 14px 38px -10px rgba(251, 191, 36, 0.35);
    transform: translateY(-2px);
  }
}
.mindblower-hero-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.mindblower-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mindblower-hero-eyebrow svg { flex-shrink: 0; }
.mindblower-hero-fact {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #ffffff;
  max-width: 540px;
}
@media (min-width: 768px) {
  .mindblower-hero-fact { font-size: 24px; }
}
.mindblower-hero-actions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.mindblower-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #0a0f1f;
  border-radius: 999px;
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 4px 12px -2px rgba(251, 191, 36, 0.32);
}
.mindblower-hero-cta:hover { transform: translateY(-1px); }
.mindblower-hero-cta:active { transform: scale(0.98); }
.mindblower-hero-count {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
/* Right-side category emoji tile — 56px gold-tinted square */
.mindblower-hero-emoji {
  flex-shrink: 0;
  align-self: flex-start;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 14px;
  font-size: 28px;
  line-height: 1;
}
/* Decorative sparkles (top-right corner) */
.mindblower-hero-sparkles {
  position: absolute;
  top: 14px;
  right: 76px;
  pointer-events: none;
  color: rgba(251, 191, 36, 0.30);
}
.mindblower-hero-sparkles svg + svg {
  margin-left: 6px;
}
@media (max-width: 480px) {
  .mindblower-hero { padding: 18px 18px; gap: 12px; }
  .mindblower-hero-fact { font-size: 18px; line-height: 1.32; }
  .mindblower-hero-emoji { width: 44px; height: 44px; font-size: 22px; border-radius: 11px; }
  .mindblower-hero-sparkles { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mindblower-hero, .mindblower-hero-cta { transition: none; }
}

/* ---------- §121 Subjects head — eyebrow + tagline inline ---------- */
.subject-tiles-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px;
}
.subject-tiles-tagline {
  font-family: 'Inter';
  font-size: 11px;
  font-weight: 500;
  color: #fbbf24;
  letter-spacing: -0.005em;
}
.subject-tiles-tagline::before {
  content: '· ';
  color: rgba(255, 255, 255, 0.35);
  margin-right: 1px;
}

/* ---------- §121 Subject tiles — 4-up grid with subtitles ---------- */
@media (min-width: 480px) {
  .subject-tiles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.subject-tile {
  padding: 16px 12px;
  min-height: 112px;
  gap: 6px;
}
.subject-tile-sub {
  font-family: 'Inter';
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: -0.005em;
  text-align: center;
  line-height: 1.2;
}
/* Coming-soon tiles get dashed border + faded chrome */
.subject-tile--soon {
  border-style: dashed !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: transparent;
  opacity: 0.7;
}
.subject-tile--soon .subject-tile-icon {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.30);
}
.subject-tile--soon .subject-tile-footer {
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.35);
}

/* ---------- §121 Sign-up nudge (logged-out only) ---------- */
.signup-nudge {
  margin-top: 6px;
  padding: 14px 0 4px;
  text-align: center;
  font-family: 'Inter';
  font-size: 12px;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.005em;
}
.signup-nudge a {
  color: #fbbf24;
  font-weight: 500;
  text-decoration: none;
  margin-left: 4px;
}
.signup-nudge a:hover {
  color: #fde68a;
  text-decoration: underline;
  text-decoration-color: rgba(251, 191, 36, 0.45);
  text-underline-offset: 3px;
}

/* ============================================================
   §122 — Page 2 polish + mobile hamburger + wordmark unblock
   ============================================================
   Resolves the THREE-PROMPT wordmark regression (root cause was
   body.practice-mode .site-header .brand { display: none !important }
   at line 17365 — killed earlier in this commit). Plus the
   consolidated polish pass: grid texture, tighter vertical rhythm,
   merged headline, 2x2 mobile subjects, Tabler-icon Mind Blower tile,
   stacked earn chip, contained collapsed-more, compact mobile copy.
   ============================================================ */

/* ---------- §122 Body grid texture ---------- */
body.grade-page {
  background-image:
    linear-gradient(rgba(212, 175, 55, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 175, 55, 0.025) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
  background-size: 32px 32px, 32px 32px, 100% 600px;
  background-repeat: repeat, repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0;
  background-attachment: fixed, fixed, fixed;
}

/* ---------- §122 Mobile hamburger + slide-down nav ---------- */
.site-header .container {
  position: relative;
}
.site-header .nav-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
  -webkit-tap-highlight-color: transparent;
}
.site-header .nav-toggle:hover,
.site-header .nav-toggle[aria-expanded="true"] {
  border-color: rgba(251, 191, 36, 0.45);
  color: #fbbf24;
}
.site-header .nav-mobile-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 15, 31, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  display: none;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.55);
  z-index: 100;
}
.site-header .nav-mobile-panel:not([hidden]) {
  display: flex;
}
.site-header .nav-mobile-panel a {
  display: block;
  padding: 10px 14px;
  font-family: 'Inter';
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-radius: 8px;
  transition: background 140ms ease, color 140ms ease;
}
.site-header .nav-mobile-panel a:hover,
.site-header .nav-mobile-panel a.active {
  background: rgba(251, 191, 36, 0.10);
  color: #fbbf24;
}
@media (max-width: 768px) {
  .site-header .nav-toggle { display: inline-flex; }
  .site-header .nav { display: none !important; }
}

/* ---------- §122 Brand wordmark sizing tightening ---------- */
.brand--wordmark::before {
  width: 26px;
  height: 26px;
  font-size: 17px;
  border-radius: 6px;
}
.brand--wordmark .brand-text {
  font-size: 15px;
  letter-spacing: -0.003em;
}

/* ---------- §122 Tighten vertical rhythm on grade.html ---------- */
body.grade-page .breadcrumb-nav {
  margin-top: 0;
  margin-bottom: 4px;
  text-align: center;
}
body.grade-page .breadcrumb {
  justify-content: center;
}
.grade-content--v2 {
  gap: 14px;
  padding-top: 4px;
  padding-bottom: 32px;
}
@media (min-width: 768px) {
  .grade-content--v2 { gap: 16px; padding-top: 8px; }
}

/* ---------- §122 Headline merge — single line, centered ---------- */
.home-headline {
  margin: 0 0 4px;
  text-align: center;
}
.home-headline-eyebrow {
  /* deprecated — single-line headline doesn't use a separate eyebrow */
  display: none;
}
.home-headline-title {
  font-family: 'Instrument Serif', serif;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: #ffffff;
  margin: 0;
}
.home-headline-title .home-headline-gold {
  color: #fbbf24;
  font-weight: 600;
}
@media (min-width: 768px) {
  .home-headline-title { font-size: 34px; }
}
@media (min-width: 1100px) {
  .home-headline-title { font-size: 36px; }
}

/* ---------- §122 Mind Blower hero — tighter, Tabler icon, light beam ---------- */
.mindblower-hero {
  position: relative;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
}
@media (min-width: 768px) {
  .mindblower-hero { padding: 18px 22px; gap: 18px; }
}
/* Soft light beam in the top-left, behind everything else. */
.mindblower-hero::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.mindblower-hero-body,
.mindblower-hero-icon {
  position: relative;
  z-index: 1;
}
.mindblower-hero-eyebrow {
  margin-bottom: 6px;
}
.mindblower-hero-fact {
  font-size: 18px;
  line-height: 1.32;
}
@media (min-width: 768px) {
  .mindblower-hero-fact { font-size: 22px; }
}
@media (min-width: 1100px) {
  .mindblower-hero-fact { font-size: 24px; }
}
.mindblower-hero-actions {
  margin-top: 10px;
  gap: 12px;
}
.mindblower-hero-cta {
  padding: 8px 14px;
  font-size: 12.5px;
}

/* Tabler-icon tile — replaces the §121 OS-emoji tile. */
.mindblower-hero-icon {
  flex-shrink: 0;
  align-self: flex-start;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.05) 100%);
  border: 1px solid rgba(251, 191, 36, 0.40);
  border-radius: 10px;
  color: #fbbf24;
}
.mindblower-hero-icon svg { width: 22px; height: 22px; }
@media (min-width: 768px) {
  .mindblower-hero-icon { width: 54px; height: 54px; border-radius: 13px; }
  .mindblower-hero-icon svg { width: 28px; height: 28px; }
}
/* Hide the §121 emoji slot if it's still around in stale renders. */
.mindblower-hero-emoji { display: none; }

/* Bigger sparkles — visible but quiet. */
.mindblower-hero-sparkles {
  top: 12px;
  right: 70px;
  color: rgba(251, 191, 36, 0.40);
}
.mindblower-hero-sparkles svg:nth-child(1) { width: 18px; height: 18px; opacity: 0.40; }
.mindblower-hero-sparkles svg:nth-child(2) { width: 12px; height: 12px; opacity: 0.28; }
.mindblower-hero-sparkles svg:nth-child(3) { width: 14px; height: 14px; opacity: 0.32; }
@media (max-width: 480px) {
  .mindblower-hero-sparkles {
    right: 56px;
    top: 10px;
  }
  .mindblower-hero-sparkles svg:nth-child(1) { width: 14px; height: 14px; }
  .mindblower-hero-sparkles svg:nth-child(2) { width: 10px; height: 10px; }
  .mindblower-hero-sparkles svg:nth-child(3) { width: 10px; height: 10px; }
}

/* ---------- §122 Subjects — 2x2 mobile, 4-col desktop ---------- */
.subject-tiles {
  gap: 8px;
}
.subject-tiles-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.subject-tiles-chip {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.30);
  color: #fbbf24;
  border-radius: 999px;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}
/* The §121 .subject-tiles-tagline rule is superseded by .subject-tiles-chip
   but kept as a safety alias in case any stale HTML is in cache. */
.subject-tiles-tagline {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.30);
  color: #fbbf24;
  border-radius: 999px;
  font-family: 'Inter';
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
}
.subject-tiles-tagline::before { content: none; }

/* Mobile: 2x2. Desktop ≥768: 4-col. */
.subject-tiles-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px;
}
@media (min-width: 768px) {
  .subject-tiles-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Tile sizing tightening */
body.grade-page .subject-tile {
  padding: 14px 12px;
  min-height: 96px;
  gap: 4px;
}
body.grade-page .subject-tile-icon {
  width: 32px;
  height: 32px;
}
body.grade-page .subject-tile-icon .subject-card-icon-glyph {
  font-size: 22px;
}
body.grade-page .subject-tile-icon svg {
  width: 20px !important;
  height: 20px !important;
}
body.grade-page .subject-tile-name {
  font-size: 13px;
}
body.grade-page .subject-tile-sub {
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ---------- §122 Collapsed-more — subtle container ---------- */
body.grade-page .more-ways {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}
body.grade-page .more-ways-summary {
  padding: 9px 12px;
  font-size: 12px;
}
@media (min-width: 768px) {
  body.grade-page .more-ways-summary { padding: 10px 14px; }
}
/* Full vs short label — mobile shows short, desktop shows full. */
.more-ways-label--full { display: inline; }
.more-ways-label--short { display: none; }
@media (max-width: 480px) {
  .more-ways-label--full { display: none; }
  .more-ways-label--short { display: inline; }
}

/* ---------- §122 Sign-up nudge spacing ---------- */
.signup-nudge {
  margin-top: 4px;
  padding: 10px 0 4px;
}

/* ============================================================
   §123 — Surgical spacing fix (May 17 post-mortem)
   ============================================================
   THE BUG: global rule at line 712 — `section { padding: 56px 0; }` —
   adds 112px of vertical padding to EVERY <section> on the page.
   The §122 polish set tight `.grade-content--v2 { gap: 14px }` flex
   gaps between siblings, but flex `gap` is ADDITIVE to children's
   own padding — it doesn't replace it. So each section in the
   article still rendered with 56+content+56 internal padding.

   That's the source of the 150-200px dead-zones the user kept
   reporting. Three polish prompts didn't catch it because the
   spacing fixes were applied to the inner blocks (.home-headline,
   .mindblower-hero etc.) while the <section> wrappers around them
   stayed at the global 112px padding.

   Plus a secondary contributor: `.breadcrumb-nav { padding: 48px 40px 0 }`
   adds another 48px above the breadcrumb (line 11248).

   Both reset to 0 inside `body.grade-page` so spacing is governed
   solely by the §122 caps + the flex `gap` on .grade-content--v2.
   ============================================================ */

/* Kill the global 56px section padding inside the grade-page article. */
body.grade-page .grade-content--v2 > section,
body.grade-page .grade-content--v2 > details {
  padding: 0 !important;
}

/* Kill the global 48px breadcrumb-nav top padding inside grade-page. */
body.grade-page .breadcrumb-nav {
  padding: 14px 16px 0 !important;
  max-width: 760px;
  margin: 0 auto 4px;
}

/* The Mind Blower hero is a *card*, not a section. Its <section>
   wrapper now has 0 padding (above) so the card lives at the
   wrapper edge. Re-state the card padding to make the visual size
   predictable. */
body.grade-page .mindblower-hero {
  margin: 0;
}

/* Tighten the article container's top/bottom so the page sits near
   the top of the viewport instead of getting pushed down by the
   stale §121 padding-bottom: 80px. */
body.grade-page .grade-content--v2 {
  padding-top: 0 !important;
  padding-bottom: 24px !important;
  gap: 14px !important;
}
@media (min-width: 768px) {
  body.grade-page .grade-content--v2 { gap: 16px !important; }
}

/* §123 — Mind Blower food-icon swap. The §122 SVG for category
   'food' was a stylized leaf-in-cup shape that rendered as a power
   button at 22-28px. Replace with proper ti-seeding paths (real
   Tabler icon) so almonds + every plant/seed-based fact reads
   correctly. Implemented via a tighter selector + content-replacing
   ::after — but easier path: the JS map below this comment already
   uses the new SVG once practice.js?v=20260517g lands. */

/* ============================================================
   §124 — Breathing-room dial (May 17, post §123)
   ============================================================
   §123 collapsed the page from ~1600px → ~640px tall by killing the
   global section padding. Result fit the viewport but read as
   "too squeezed" — premium products use moderate vertical rhythm,
   not minimum. This bumps the article flex gap and breadcrumb
   spacing back up to a comfortable level without re-introducing
   the 56px-per-section blow-out.

   Targets:
   • breadcrumb-nav top padding: 14px → 24px
   • article flex gap: 14px → 22px desktop / 26px ≥768px
   • headline → next section: ~6-8px more breathing room via
     small headline bottom margin
   • signup-nudge top: 4px → 12px
   ============================================================ */
body.grade-page .breadcrumb-nav {
  padding: 24px 16px 0 !important;
  margin-bottom: 6px !important;
}
body.grade-page .grade-content--v2 {
  gap: 22px !important;
  padding-bottom: 32px !important;
}
@media (min-width: 768px) {
  body.grade-page .grade-content--v2 { gap: 26px !important; }
}
body.grade-page .home-headline {
  margin: 0 0 6px !important;
}
body.grade-page .signup-nudge {
  margin-top: 10px !important;
  padding: 10px 0 4px !important;
}
/* Touch-up: the Mind Blower hero still feels cramped against the
   subjects below it. Add a hair of bottom margin so the hero card
   doesn't visually fuse with the OR-PRACTICE-A-SUBJECT eyebrow. */
body.grade-page .mindblower-hero-wrap {
  padding-bottom: 4px !important;
}