/* ====================================================================
   Theme tokens. Dark is the default; [data-theme="light"] overrides them.
   ==================================================================== */
:root{
  --ink: #f3f4f6;            /* primary text */
  --ink-soft: #cbd5e1;       /* secondary text */
  --ink-mute: #9ca3af;       /* muted text */
  --panel: #111827;          /* solid panel/card background */
  --surface-1: rgba(255,255,255,0.04);  /* subtle card fill */
  --surface-2: rgba(255,255,255,0.06);  /* subtle raised fill */
  --line: rgba(255,255,255,0.10);       /* hairline borders */
  --page-a: #1f2933;         /* page gradient (light end) */
  --page-b: #0b0f14;         /* page gradient (dark end) */
  --dot: rgba(168,85,247,0.11);         /* graph-paper dots */
  --glow-1: rgba(168,85,247,0.22);
  --glow-2: rgba(96,165,250,0.14);
  --sidebar-bg: linear-gradient(180deg, #141a22, #0d1117);
  --menu-bg: #1b2330;                   /* dropdown / popover surface */
  --menu-border: rgba(255,255,255,0.12);
  --accent: #a855f7;          /* brand accent (purple, default) */
  --accent-deep: #5b21b6;
  --accent-mid: #6d28d9;
  --accent-soft: #c084fc;
}
html[data-theme="light"]{
  --ink: #1f2937;
  --ink-soft: #4b5563;
  --ink-mute: #6b7280;
  --panel: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #f1f3f8;
  --line: rgba(17,24,39,0.12);
  --page-a: #eef1f6;
  --page-b: #dde2ec;
  --dot: rgba(168,85,247,0.13);
  --glow-1: rgba(168,85,247,0.12);
  --glow-2: rgba(96,165,250,0.10);
  --sidebar-bg: linear-gradient(180deg, #ffffff, #eef1f6);
  --menu-bg: #ffffff;
  --menu-border: rgba(17,24,39,0.14);
}

/* ====================================================================
   Accent presets, keyed on <html data-accent="...">. Purple is the
   :root default; these override --accent* per chosen hue.
   ==================================================================== */
/* Dark-theme accents: richer, saturated hues that read well on a dark page. */
html[data-accent="purple"]{ --accent:#a855f7; --accent-deep:#5b21b6; --accent-mid:#6d28d9; --accent-soft:#c084fc; }
html[data-accent="blue"]{ --accent:#3b82f6; --accent-deep:#1e40af; --accent-mid:#1d4ed8; --accent-soft:#60a5fa; }
html[data-accent="emerald"]{ --accent:#10b981; --accent-deep:#065f46; --accent-mid:#047857; --accent-soft:#34d399; }
html[data-accent="rose"]{ --accent:#f43f5e; --accent-deep:#9f1239; --accent-mid:#be123c; --accent-soft:#fb7185; }
/* Light-theme accents: lighter, brighter hues for the light page. */
html[data-accent="pink"]{ --accent:#ec4899; --accent-deep:#9d174d; --accent-mid:#be185d; --accent-soft:#f9a8d4; }
html[data-accent="sky"]{ --accent:#38bdf8; --accent-deep:#0369a1; --accent-mid:#0284c7; --accent-soft:#7dd3fc; }
html[data-accent="mint"]{ --accent:#34d399; --accent-deep:#047857; --accent-mid:#059669; --accent-soft:#6ee7b7; }
html[data-accent="amber"]{ --accent:#fbbf24; --accent-deep:#b45309; --accent-mid:#d97706; --accent-soft:#fcd34d; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Lab graph-paper dot grid + an atmospheric reagent glow up top. */
  background:
    radial-gradient(circle at 1px 1px, var(--dot) 1.3px, transparent 0) 0 0 / 32px 32px,
    radial-gradient(900px 520px at 50% -8%, var(--glow-1), transparent 70%),
    radial-gradient(700px 480px at 88% 8%, var(--glow-2), transparent 70%),
    radial-gradient(circle at top, var(--page-a), var(--page-b));
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
}

/* ---------- Custom scrollbars (lab-themed, replaces browser default) ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(168,85,247,0.55) transparent;
}
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #b975f9, var(--accent-mid));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ---------- Lab theme primitives ---------- */
.lab-logo{
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.lab-flask{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 34px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(168,85,247,0.30), rgba(96,165,250,0.18));
  border: 1px solid rgba(168,85,247,0.5);
  box-shadow: 0 10px 26px rgba(168,85,247,0.32), inset 0 1px 0 rgba(255,255,255,0.14);
}

.lab-eyebrow{
  display: block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 12px;
}
.lab-eyebrow-lg{
  display: inline-block;
  font-size: 14px;
  padding: 7px 16px;
  border: 1px solid rgba(168,85,247,0.45);
  border-radius: 999px;
  background: rgba(168,85,247,0.14);
  box-shadow: 0 0 26px rgba(168,85,247,0.22);
}

.mode-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  font-size: 28px;
  border-radius: 15px;
  background: linear-gradient(180deg, rgba(168,85,247,0.32), rgba(96,165,250,0.16));
  border: 1px solid rgba(168,85,247,0.48);
  box-shadow: 0 10px 24px rgba(168,85,247,0.30), inset 0 1px 0 rgba(255,255,255,0.14);
  margin-bottom: 14px;
}
.mode-icon-xl{
  width: 68px;
  height: 68px;
  font-size: 36px;
  border-radius: 18px;
}


/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.14);
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.btn:hover{ transform: translateY(-1px); }

.btn-inline{
  padding:8px 12px;
  border-radius:10px;
}

.btn-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--ink);
  border: 1px solid rgba(168,85,247,0.30);
  box-shadow: 0 8px 18px rgba(168,85,247,0.18); /* reduced */
}

.btn-primary:hover{
  box-shadow: 0 10px 22px rgba(168,85,247,0.22);
}


.btn-secondary{
  background: var(--surface-2);
  color: rgba(255,255,255,0.92);
}


/* Main container */
.app-card {
  max-width: 960px;
  margin: 40px auto;
  padding: 44px 48px 52px;
  position: relative;
}


/* Header */
.header {
  margin-bottom: 40px;
}

.header h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

.header p {
  color: var(--ink-mute);
  margin-top: 6px;
}

/* Mode grid */
.mode-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;              /* was 20px */
}

.mode-grid > .mode{
  flex: 1 1 240px;
  min-width: 240px;
  max-width: calc((100% - 52px) / 3);   /* up to 3 per row at desktop */
}

@media (max-width: 900px){
  .mode-grid > .mode{ max-width: calc((100% - 26px) / 2); }   /* 2 per row */
}

@media (max-width: 560px){
  .mode-grid > .mode{ max-width: 100%; }   /* 1 per row */
}

.mode-grid {
  margin-top: 36px;
}


/* Mode cards */
.mode{
  background: linear-gradient(180deg, rgba(168,85,247,0.22), rgba(91,33,182,0.18));
  border-radius: 14px;
  padding: 28px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  border: 1px solid rgba(168,85,247,0.35);
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}

.mode:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35), 0 0 0 4px rgba(168,85,247,0.10);
  border-color: rgba(168,85,247,0.55);
}

.mode h3{
  margin: 0 0 8px 0;
  font-size: 20px;
  color: var(--ink);
}

.mode span{
  color: rgba(255,255,255,0.82);
  font-size: 14px;
}


.home-actions{
  margin-top: 34px;       /* was 26px */
  display:flex;
  justify-content:space-between;
  align-items:center;
}


.logout {
  color: var(--accent);
  text-decoration: none;
  font-size: 14px;
}

/* ---------- Auth ---------- */
.auth-card {
  max-width: 440px;
  margin: 64px auto;
  padding: 38px 36px 32px;
  background: linear-gradient(180deg, rgba(168,85,247,0.10), var(--panel));
  border: 1px solid rgba(168,85,247,0.30);
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}

.auth-card h1 { margin-bottom: 6px; }

.subtitle {
  color: var(--ink-mute);
  margin-bottom: 24px;
}

/* Logo with a glow halo */
.auth-logo-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.auth-halo {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.42), transparent 68%);
  filter: blur(10px);
}
.auth-logo {
  position: relative;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  filter: drop-shadow(0 10px 24px rgba(168,85,247,0.5));
}
.auth-title {
  font-size: 23px;
  font-weight: 900;
  margin: 0 0 4px;
  line-height: 1.25;
}
.auth-grad {
  background: linear-gradient(100deg, var(--accent-soft), #60a5fa, #f5c84c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 22px;
  text-align: left;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-field-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.auth-card input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--ink);
  font-size: 15px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.auth-card input::placeholder { color: #6b7280; }
.auth-card input:focus {
  outline: none;
  border-color: rgba(168,85,247,0.7);
  box-shadow: 0 0 0 3px rgba(168,85,247,0.18);
}

.btn-auth {
  width: 100%;
  padding: 13px;
  margin-top: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, var(--accent), var(--accent-mid));
  color: #ffffff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(168,85,247,0.34);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-auth:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(168,85,247,0.45);
}
.btn-auth-ghost {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.btn-auth-ghost:hover { background: rgba(255,255,255,0.10); }

.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 14px;
  color: var(--ink-mute);
  font-size: 13px;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.12);
}

/* ---------- Learn ---------- */
.page-title {
  margin: 20px 0;
}

.learn-card {
  background: var(--panel);
  padding: 40px;
  border-radius: 16px;
  max-width: 600px;
  margin: 0 auto;
}

.word {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 24px;
  text-align: center;
}

/* Learn choice buttons */
.choice{
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.12);

  padding: 14px 16px;     /* add horizontal padding */
  border-radius: 12px;
  line-height: 1.25;      /* stops text from feeling squished */
  min-height: 52px;       /* makes the grid look consistent */
  text-align: center;

  box-shadow: 0 8px 18px rgba(168,85,247,0.18); /* less glow */
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.choice{ white-space: normal; }

.choice:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(168,85,247,0.22); /* still cool, not neon */
}


/* Choices container MUST be a grid */
/* Choices container: stable 2x2 grid */
/* Answer grid */
/* Keep answers inside the card */
/* ===== FIX: Learn choices must be a 2x2 grid ===== */
#choices.choices{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  margin-top: 28px !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

#choices.choices > .choice{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}


.learn-card { overflow: hidden; }

.feedback {
  margin-top: 20px;
  text-align: center;
  font-weight: 600;
}

/* ---------- Quiz answer feedback ---------- */
.choice.is-correct{
  background: linear-gradient(180deg, #22c55e, #15803d);
  border-color: rgba(34,197,94,0.65);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.22), 0 12px 26px rgba(34,197,94,0.32);
}
.choice.is-wrong{
  background: linear-gradient(180deg, #ef4444, #991b1b);
  border-color: rgba(239,68,68,0.65);
  animation: choice-shake .4s ease;
}
.choice.is-dim{
  opacity: 0.38;
  filter: saturate(0.55);
}
@keyframes choice-shake{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-7px); }
  40%{ transform: translateX(7px); }
  60%{ transform: translateX(-5px); }
  80%{ transform: translateX(5px); }
}

.result-card{
  margin-top: 6px;
  background: linear-gradient(180deg, rgba(34,197,94,0.12), rgba(17,24,39,0.55));
  border: 1px solid rgba(34,197,94,0.38);
  border-radius: 18px;
  padding: 22px 24px 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  animation: result-pop .34s cubic-bezier(.2,.9,.3,1.35);
}
@keyframes result-pop{
  from{ opacity: 0; transform: translateY(14px) scale(.95); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
.result-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.result-badge{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 900;
  color: var(--ink);
  background: linear-gradient(180deg, #22c55e, #15803d);
  box-shadow: 0 0 0 5px rgba(34,197,94,0.18);
}
.result-title{
  font-size: 26px;
  font-weight: 900;
  color: #86efac;
  letter-spacing: 0.3px;
}
.result-word{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  margin-top: 16px;
}
.result-pos{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  padding: 4px 10px;
}
.result-def{
  color: var(--ink);
  font-size: 16px;
  margin-top: 6px;
}
.result-quote{
  color: var(--ink-mute);
  font-style: italic;
  font-size: 14px;
  margin-top: 12px;
}
.result-levelup{
  color: var(--ink-soft);
  margin-top: 8px;
}
.btn-next{
  margin-top: 20px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--ink);
  border: none;
  border-radius: 12px;
  padding: 13px 30px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(168,85,247,0.32);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn-next:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(168,85,247,0.42);
}
.result-hint{
  display: inline-block;
  background: rgba(239,68,68,0.13);
  border: 1px solid rgba(239,68,68,0.42);
  color: #fca5a5;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 999px;
  animation: result-pop .25s ease;
}


/* ---------- Add Word ---------- */

.form-card {
  background: var(--panel);
  padding: 32px;
  border-radius: 16px;
  max-width: 520px;
  margin: 0 auto;
}

.form-card form {
  display: flex;
  flex-direction: column;
}

.form-card label {
  margin-top: 16px;
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--ink-mute);
}

.form-card input,
.form-card select,
.form-card textarea {
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-size: 15px;
}

.form-card textarea {
  resize: vertical;
  min-height: 90px;
}

.form-card input,
.form-card select,
.form-card textarea{
  background: var(--surface-1);
  color: var(--ink);
  border: 1px solid var(--line);
  outline: none;
}

.form-card input::placeholder,
.form-card textarea::placeholder{
  color: var(--ink-mute);
}

.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  border-color: rgba(168,85,247,0.45);
  box-shadow: 0 0 0 4px rgba(168,85,247,0.12);
}


.form-card .primary {
  margin-top: 24px;
  padding: 14px;
  font-weight: 600;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
}

.form-card .primary:hover {
  opacity: 0.9;
}

/* ---------- Difficulty slider fill ---------- */
.form-card input[type="range"]{
  -webkit-appearance: none;
  appearance: none;

  width: 100%;
  height: 12px;
  border-radius: 999px;

  padding: 0;                 /* IMPORTANT */
  background: linear-gradient(to right,
    var(--accent) 0%,
    var(--accent) var(--pct, 0%),
    rgba(255,255,255,0.20) var(--pct, 0%),
    rgba(255,255,255,0.20) 100%
  );

  border: 1px solid rgba(255,255,255,0.14);
  outline: none;
}

/* Chrome/Edge/Safari thumb */
.form-card input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;

  width: 20px;
  height: 20px;
  border-radius: 50%;

  background: var(--accent);
  border: 2px solid rgba(255,255,255,0.85);
  cursor: pointer;
}

/* Firefox thumb */
.form-card input[type="range"]::-moz-range-thumb{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid rgba(255,255,255,0.85);
  cursor: pointer;
}

/* Firefox track (so it matches our 12px track) */
.form-card input[type="range"]::-moz-range-track{
  height: 12px;
  border-radius: 999px;
  background: transparent;
  border: none;
}

.error {
  color: #f87171;
  font-weight: 600;
  margin-bottom: 16px;
}

.learn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.learn-word {
  font-size: 34px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.5px;
}

.counter {
  font-size: 14px;
  color: var(--ink-mute);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 12px;
  border-radius: 999px;
}

.error {
  color: #f87171;
  font-weight: 600;
  margin: 12px 0 16px;
  text-align: center;
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.header-row {
  margin-bottom: 48px;
}


.header-left{
  text-align:left;
}

.streak-mini{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  border-radius:16px;
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,0.08);
}

.streak-icon{
  font-size:34px;
  line-height:1;
}

.streak-big{
  font-size:18px;
  font-weight:800;
  color: var(--ink);
}

.streak-small{
  font-size:14px;
  color: var(--ink-soft);
  margin-top:2px;
}

/* ---------- Level UI (Home page, bottom-right) ---------- */

/* ---------- Level UI (Home page, bottom-right inside .app-card) ---------- */

.level-widget{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 24px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(17,24,39,0.65);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40);
}


.level-shield{
  width: 56px;
  height: 56px;
  border-radius: 16px;

  display: grid;
  place-items: center;

  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accent-deep));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 2px var(--surface-2);
}

.level-num{
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 10px 25px rgba(0,0,0,0.45);
}

.level-right{
  width: 260px;
}

.level-bar-shell{
  height: 14px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}

.level-bar-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--accent-deep));
  box-shadow: 0 10px 22px rgba(0,0,0,0.30);
  transition: width 0.35s ease;
}

.level-text{
  margin-top: 8px;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.2px;
}

.level-mastery{
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}

.page-title {
  margin: 40px 0 60px;   /* more space below title */
}

.learn-card {
  padding: 60px 60px 70px;  /* more internal breathing room */
  margin-top: 20px;
}

.learn-header {
  margin-bottom: 40px;   /* more space before buttons */
}

.choices {
  margin-top: 32px;
  gap: 26px;             /* more space between buttons */
}

.feedback {
  margin-top: 36px;
}

.learn-card .btn,
.learn-card .choice {
  margin-top: 30px;
}

.learn-card .choice + .choice {
  margin-left: 24px;
}

/* Word of the Day: center the two action buttons */
.daily-actions{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
  flex-wrap: wrap;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}

.auth-card.shake {
  animation: shake 0.35s ease;
}

/* ---------- Confetti ---------- */

.confetti-piece{
  position: fixed;
  top: -10px;
  width: 8px;
  height: 14px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 10000;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall{
  to{
    transform: translateY(110vh) rotate(720deg);
    opacity: 1;
  }
}

.success {
  color: #4ade80;
  font-weight: 600;
  margin: 12px 0 16px;
  text-align: center;
}

/* ---------- Landing Page ---------- */

.landing{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 70px auto 90px;
  padding: 40px;
  text-align: center;
}

/* Rising-bubble lab atmosphere (landing page background) */
.lab-field{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bub{
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(96,165,250,0.55), rgba(168,85,247,0.12) 70%);
  box-shadow: 0 0 34px rgba(168,85,247,0.30);
  animation: bub-rise linear infinite;
}
@keyframes bub-rise{
  0%   { transform: translateY(0) scale(0.5); opacity: 0; }
  12%  { opacity: 0.75; }
  88%  { opacity: 0.5; }
  100% { transform: translateY(-118vh) scale(1.05); opacity: 0; }
}
.bub.b1{ left: 8%;  width: 56px; height: 56px; animation-duration: 17s; animation-delay: 0s; }
.bub.b2{ left: 20%; width: 26px; height: 26px; animation-duration: 13s; animation-delay: 4s; }
.bub.b3{ left: 33%; width: 80px; height: 80px; animation-duration: 22s; animation-delay: 2s; }
.bub.b4{ left: 48%; width: 34px; height: 34px; animation-duration: 15s; animation-delay: 7s; }
.bub.b5{ left: 62%; width: 64px; height: 64px; animation-duration: 19s; animation-delay: 1s; }
.bub.b6{ left: 74%; width: 22px; height: 22px; animation-duration: 12s; animation-delay: 5s; }
.bub.b7{ left: 85%; width: 70px; height: 70px; animation-duration: 21s; animation-delay: 3s; }
.bub.b8{ left: 93%; width: 30px; height: 30px; animation-duration: 14s; animation-delay: 8s; }

@media (prefers-reduced-motion: reduce){
  .bub{ animation: none; display: none; }
}

/* ---- Bold landing hero ---- */
/* Centered vertical stack: logo, then tagline, then headline - each on its
   own row so nothing sits side-by-side by accident. */
.landing-hero{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-logo-stage{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 30px 24px;
}
.hero-halo{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168,85,247,0.32), transparent 66%);
  filter: blur(12px);
  z-index: 0;
}
.hero-logo{
  position: relative;
  z-index: 1;
  width: 156px;
  height: 156px;
  border-radius: 30px;
  filter: drop-shadow(0 18px 40px rgba(168,85,247,0.55));
}

.hero-title{
  font-size: clamp(40px, 7vw, 76px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 20px auto 18px;
  max-width: 900px;
}
.hero-grad{
  background: linear-gradient(100deg, var(--accent-soft) 0%, #60a5fa 48%, #f5c84c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub{
  color: var(--ink-soft);
  font-size: clamp(16px, 2.1vw, 21px);
  line-height: 1.6;
  max-width: 660px;
  margin: 0 auto 32px;
}
.hero-sub em{ color: #e9d5ff; font-style: italic; }

.btn-hero{
  background: linear-gradient(180deg, var(--accent), var(--accent-mid));
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  padding: 16px 34px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  animation: hero-glow 2.8s ease-in-out infinite;
}
.btn-hero:hover{ transform: translateY(-2px); }
@keyframes hero-glow{
  0%,100%{ box-shadow: 0 14px 36px rgba(168,85,247,0.40); }
  50%    { box-shadow: 0 16px 54px rgba(168,85,247,0.72); }
}
.btn-ghost{
  background: rgba(255,255,255,0.05);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  padding: 16px 28px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
}
.btn-ghost:hover{ background: var(--line); }

.landing-buttons{
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.hero-scale{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.scale-item b{
  display: block;
  font-size: 34px;
  font-weight: 900;
  background: linear-gradient(180deg, #ffffff, var(--accent-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.scale-item span{
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
}
.scale-divider{
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,0.14);
}

.landing-features{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 80px;
}

.feature{
  background: linear-gradient(180deg, rgba(168,85,247,0.10), rgba(20,25,40,0.65));
  padding: 30px 26px;
  border-radius: 18px;
  text-align: center;
  border: 1px solid rgba(168,85,247,0.34);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover{
  border-color: rgba(168,85,247,0.7);
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(124,58,237,0.32);
}
.feature h3{
  margin: 0 0 8px;
  font-size: 19px;
}
.feature p{
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.5;
}

.landing-cta{
  margin-top: 80px;
  padding: 56px 32px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(168,85,247,0.22), rgba(96,165,250,0.10));
  border: 1px solid rgba(168,85,247,0.40);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.landing-cta h2{
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.landing-cta p{
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 0 24px;
}

/* ── Learn New Words ───────────────────────────────────────────────────── */

.learn-new-card{
  max-width:640px;
  text-align:left;
}

.learn-new-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  gap:12px;
}

.learn-new-tag{
  background:rgba(168,85,247,0.18);
  color:#d8b4fe;
  border:1px solid rgba(168,85,247,0.4);
  padding:4px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
}

.learn-new-counter{
  color: var(--ink-mute);
  font-size:13px;
  font-variant-numeric:tabular-nums;
}

.learn-new-word{
  font-size:38px;
  font-weight:800;
  text-align:center;
  margin:8px 0 4px;
  color: var(--ink);
}

.learn-new-pos{
  text-align:center;
  color:var(--accent);
  font-style:italic;
  font-size:14px;
  margin-bottom:20px;
}

.learn-new-section{
  margin-top:18px;
}

.learn-new-section h4{
  color: var(--accent-soft);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:0 0 8px;
}

.learn-new-defs{
  margin:0;
  padding-left:20px;
  color: var(--ink);
  line-height:1.6;
}

.learn-new-defs li{
  margin-bottom:6px;
}

.learn-new-example{
  color: var(--ink-soft);
  font-style:italic;
  line-height:1.5;
  margin:0;
  padding:10px 14px;
  background:rgba(255,255,255,0.03);
  border-left:3px solid var(--accent);
  border-radius:4px;
}

.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.chip{
  display:inline-block;
  padding:5px 12px;
  background:rgba(168,85,247,0.12);
  color:#e9d5ff;
  border:1px solid rgba(168,85,247,0.3);
  border-radius:999px;
  font-size:13px;
}

.learn-new-nav{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:24px;
}

.learn-new-nav .btn{
  flex:1;
}

.learn-new-nav .btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
  transform:none;
}

/* ── Leaderboard ────────────────────────────────────────────────────────── */

.lb-summary{
  display:flex;
  gap:24px;
  align-items:center;
  margin:16px 0 30px;
  padding:18px;
  background: var(--surface-1);
  border:1px solid var(--line);
  border-radius:14px;
  flex-wrap:wrap;
}

.lb-tier-badge{
  min-width:130px;
  text-align:center;
  padding:14px;
  background:linear-gradient(135deg, rgba(168,85,247,0.25), rgba(99,102,241,0.2));
  border:1px solid rgba(168,85,247,0.4);
  border-radius:12px;
}

.lb-tier-name{
  font-size:22px;
  font-weight:800;
  color:#f5f3ff;
}

.lb-tier-sub{
  font-size:12px;
  color:#c4b5fd;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.lb-stats{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  flex:1;
  justify-content:space-around;
}

.lb-stat-label{
  font-size:12px;
  color: var(--ink-mute);
  text-transform:uppercase;
  letter-spacing:0.06em;
}

.lb-stat-value{
  font-size:26px;
  font-weight:800;
  color: var(--ink);
  font-variant-numeric:tabular-nums;
}

.lb-countdown{ color:#c4b5fd; }

.lb-empty{
  text-align:center;
  padding:40px 20px;
  color: var(--ink-soft);
}

.lb-empty p{ margin-bottom:16px; }

.lb-list{
  list-style:none;
  padding:0;
  margin:0;
}

.lb-row{
  display:grid;
  grid-template-columns: 50px 1fr auto;
  gap:12px;
  padding:12px 16px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

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

.lb-row.is-you{
  background:rgba(168,85,247,0.12);
  border-radius:8px;
  border:1px solid rgba(168,85,247,0.3);
}

.lb-row.in-promo{
  background:linear-gradient(90deg, rgba(16,185,129,0.08), transparent);
}

.lb-row.in-promo.is-you{
  background:linear-gradient(90deg, rgba(16,185,129,0.16), rgba(168,85,247,0.12));
}

.lb-row.in-demo{
  background:linear-gradient(90deg, rgba(244,63,94,0.08), transparent);
}

.lb-row.in-demo.is-you{
  background:linear-gradient(90deg, rgba(244,63,94,0.14), rgba(168,85,247,0.12));
}

.lb-rank{
  font-weight:800;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.lb-name{ color: var(--ink); }

.lb-xp{
  font-weight:700;
  color:#fbbf24;
  font-variant-numeric:tabular-nums;
}

.lb-zone{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:6px 12px;
  margin:8px 0;
  border-radius:6px;
}

.lb-promo-zone{
  color:#6ee7b7;
  background:rgba(16,185,129,0.1);
  border-left:3px solid #10b981;
}

.lb-demo-zone{
  color:#fca5a5;
  background:rgba(244,63,94,0.1);
  border-left:3px solid #f43f5e;
}

/* Leagues mode card */
.mode-leagues h3{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.tier-chip{
  font-size:12px;
  padding:3px 10px;
  background:rgba(168,85,247,0.2);
  color:#d8b4fe;
  border:1px solid rgba(168,85,247,0.4);
  border-radius:999px;
  font-weight:700;
}

/* Tier change modal */
.tier-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.tier-modal[hidden]{ display:none; }

.tier-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter:blur(6px);
}

.tier-modal-card{
  position:relative;
  width:min(480px, 92vw);
  background:rgba(17,24,39,0.95);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:18px;
  padding:28px 24px;
  text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,0.55);
}

.tier-modal-card.promote{ border-color:rgba(16,185,129,0.5); }
.tier-modal-card.demote{ border-color:rgba(244,63,94,0.3); }

.tier-modal-emoji{
  font-size:48px;
  margin-bottom:10px;
}

.tier-modal-title{
  font-size:26px;
  font-weight:800;
  margin:0 0 8px;
  color: var(--ink);
}

.tier-modal-body{
  color: var(--ink-soft);
  margin:0 0 18px;
}

/* Synonym Smash: word + part-of-speech stacked, both left-aligned to card edge */
.snap-word-stack{
  display:block;
  text-align:left;
  margin: 8px 0 18px;
}
.snap-word-stack .learn-word{
  text-align:left;
  margin: 0;
}
.snap-pos{
  text-align:left;
  color:var(--accent);
  font-style:italic;
  font-size:14px;
  margin-top:2px;
}

/* Synonym Smash: 2x2 choices grid with uniform-width buttons */
#snapChoices.choices{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
  justify-items: stretch;
  align-items: stretch;
}

#snapChoices.choices > .choice{
  width: 100%;
  max-width: 100%;
  margin: 0;
}

@media (max-width: 768px){
  #snapChoices.choices{ grid-template-columns: 1fr; }
}

.snap-cta{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(20,25,40,0.96);
  border:1px solid rgba(168,85,247,0.4);
  padding:12px 16px;
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  z-index:9000;
  max-width:92vw;
}

.snap-cta-close{
  background:none;
  border:none;
  color: var(--ink-mute);
  font-size:22px;
  cursor:pointer;
  padding:0 4px;
}

.snap-cta-close:hover{ color: var(--ink); }

/* Streak status colors */
.streak-status{ font-weight:600; }
.status-active_today{ color:#6ee7b7; }
.status-at_risk{ color:#fbbf24; }
.status-broken{ color: var(--ink-mute); }
.status-never{ color: var(--ink-mute); }

/* Floating +XP animation */
.xp-pop{
  position:fixed;
  z-index:10000;
  font-weight:900;
  font-size:20px;
  color:#fbbf24;
  text-shadow:0 2px 8px rgba(0,0,0,0.6);
  pointer-events:none;
  transform:translate(-50%, -50%);
  animation:xp-float 1.4s ease-out forwards;
}

@keyframes xp-float{
  0%{ opacity:0; transform:translate(-50%, -50%) scale(0.7); }
  15%{ opacity:1; transform:translate(-50%, -70%) scale(1.15); }
  100%{ opacity:0; transform:translate(-50%, -180%) scale(1); }
}

@media (max-width: 768px){
  .learn-new-word{ font-size:28px; }
  .learn-new-nav{ flex-direction:column; }
  .mode-grid{ grid-template-columns: 1fr; }
  .lb-summary{ flex-direction:column; align-items:stretch; }
  .lb-stats{ justify-content:space-between; }
}

/* ---------- Quiz toolbar (modes + due indicator) ---------- */
.quiz-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:8px 0 20px;
}

.mode-buttons{
  display:inline-flex;
  gap:6px;
  background: rgba(255,255,255,0.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
}

.mode-btn{
  background: transparent;
  color: var(--ink-soft);
  border:none;
  border-radius:999px;
  padding:8px 14px;
  font-weight:700;
  cursor:pointer;
  font-size:14px;
  transition: background .12s ease, color .12s ease;
}

.mode-btn:hover{ color: var(--ink); }

.mode-btn.active{
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(168,85,247,0.25);
}

.due-indicator{
  color: var(--ink-soft);
  font-size:14px;
  font-weight:600;
  padding:6px 12px;
  border-radius:999px;
  background: rgba(96,165,250,0.10);
  border:1px solid rgba(96,165,250,0.25);
}

.prompt-label{
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--ink-mute);
  margin-bottom:4px;
}

/* ---------- Review card (home) ---------- */
.review-card{
  margin-top:20px;
  padding:18px 22px;
  border-radius:14px;
  background: linear-gradient(180deg, rgba(96,165,250,0.18), rgba(37,99,235,0.10));
  border:1px solid rgba(96,165,250,0.35);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

.review-card h3{ margin:0; font-size:18px; }
.review-card p{ margin:4px 0 0; color:rgba(255,255,255,0.78); font-size:14px; }
.review-count{
  font-size:28px;
  font-weight:900;
  color: var(--accent);
  background: var(--surface-2);
  padding:6px 16px;
  border-radius:12px;
  border:1px solid var(--line);
}

/* ---------- Stats page ---------- */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:16px;
  margin:20px 0 32px;
}

.stat-card{
  background: var(--surface-1);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  text-align:center;
}

.stat-card .label{
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--ink-mute);
}

.stat-card .value{
  font-size:32px;
  font-weight:900;
  color: var(--ink);
  margin-top:4px;
}

.stats-section{
  margin-top:36px;
}

.stats-section h2{
  font-size:20px;
  margin:0 0 14px;
  color: var(--ink);
}

.tier-row{
  display:grid;
  grid-template-columns: 110px 1fr 140px;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}

.tier-row .tier-name{
  font-weight:800;
  color: var(--ink);
}

.tier-bar{
  display:flex;
  height:18px;
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
}

.tier-bar .seg-mastered{ background:linear-gradient(180deg, #10b981, #047857); }
.tier-bar .seg-progress{ background:linear-gradient(180deg, var(--accent), var(--accent-deep)); }
.tier-bar .seg-unseen{ background:var(--surface-1); }

.tier-row .tier-stats{
  font-size:13px;
  color: var(--ink-mute);
  text-align:right;
}

/* Activity calendar - a normal month grid */
.calendar{ max-width:520px; }

.cal-title{
  font-weight:800;
  color: var(--ink);
  margin-bottom:10px;
  font-size:15px;
}

.cal-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:6px;
}

.cal-weekday{
  text-align:center;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--ink-mute);
  padding-bottom:2px;
}

.cal-day{
  position:relative;
  aspect-ratio:1 / 1;
  border-radius:8px;
  background:var(--surface-1);
  border:1px solid var(--surface-2);
  padding:5px;
}
.cal-blank{
  background:transparent;
  border:none;
}
.cal-daynum{
  font-size:11px;
  color: var(--ink-mute);
  font-weight:700;
}
.cal-count{
  position:absolute;
  bottom:4px;
  right:6px;
  font-size:12px;
  font-weight:800;
  color: var(--ink);
}
.cal-day.lv1{ background:rgba(168,85,247,0.22); }
.cal-day.lv2{ background:rgba(168,85,247,0.45); }
.cal-day.lv3{ background:rgba(168,85,247,0.72); }
.cal-day.lv1 .cal-daynum,
.cal-day.lv2 .cal-daynum,
.cal-day.lv3 .cal-daynum{ color:#e9d5ff; }
.cal-today{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent) inset;
}

.hardest-table{
  width:100%;
  border-collapse:collapse;
}
.hardest-table th, .hardest-table td{
  text-align:left;
  padding:10px 12px;
  border-bottom:1px solid var(--surface-2);
  font-size:14px;
}
.hardest-table th{
  color: var(--ink-mute);
  font-weight:700;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:0.06em;
}

.accuracy-chart{
  width:100%;
  height:200px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:12px;
}

.empty-state{
  text-align:center;
  color: var(--ink-mute);
  padding:24px;
  font-style:italic;
}

/* ---------- New-user diagnostic ---------- */
.diag-card{ max-width: 660px; }

.diag-title{
  font-size: 30px;
  font-weight: 900;
  margin: 8px 0 12px;
}

/* Stage 1 - intro */
.diag-intro-stage{ text-align: center; padding: 14px 6px 6px; }
.diag-intro-text{
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 15.5px;
  max-width: 520px;
  margin: 0 auto 28px;
}
.diag-intro-actions{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.diag-start-btn{ font-size: 16px; padding: 14px 30px; }

/* Stage 2 - questions */
.diag-progress{
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.diag-progress-fill{
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  transition: width .35s ease;
}
.diag-progress-label{
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 8px 0 24px;
}

.diag-prompt-label{
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}
.diag-definition{
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin: 10px 0 4px;
  line-height: 1.35;
}
.diag-pos{
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--accent-soft);
  margin-bottom: 6px;
}

#diagChoices.choices{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 26px;
}
#diagChoices.choices > .choice{ width: 100%; }
.choice:disabled{ cursor: default; }

.diag-done{
  text-align: center;
  padding: 28px 10px;
  animation: result-pop .4s cubic-bezier(.2,.9,.3,1.35);
}
.diag-done .result-badge{
  margin: 0 auto 12px;
  width: 48px;
  height: 48px;
  font-size: 26px;
}
.diag-done-title{
  font-size: 26px;
  font-weight: 900;
  margin: 0 0 6px;
  color: #86efac;
}
.diag-done-sub{ color: var(--ink-soft); margin: 0; }

/* "Skip the rest" - a real secondary button, set apart from the answers */
.diag-skip-btn{
  display: block;
  margin: 28px auto 0;
}

/* 6-month re-prompt bar on the home dashboard */
.diag-reprompt{
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(96,165,250,0.16), rgba(37,99,235,0.08));
  border: 1px solid rgba(96,165,250,0.35);
}
.diag-reprompt-text{
  flex: 1;
  color: var(--ink);
  font-size: 14px;
}
.diag-reprompt-close{
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.diag-reprompt-close:hover{ color: var(--ink); }

/* ====================================================================
   Elite - subscription surface
   Gold (#f5c84c / #b8860b) instead of the usual var(--accent) purple.
   Restrained: refinement reads as elite, glitter reads as cheap.
   ==================================================================== */

:root{
  --elite-gold: #f5c84c;
  --elite-gold-dark: #b8860b;
  --elite-gold-soft: rgba(245,200,76,0.14);
  --elite-gold-edge: rgba(245,200,76,0.40);
}

.elite-nav-link{
  color: var(--elite-gold);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.elite-nav-link:hover{
  background: var(--elite-gold-soft);
  border-color: var(--elite-gold-edge);
}

.elite-badge{
  display: inline-block;
  background: linear-gradient(180deg, var(--elite-gold), var(--elite-gold-dark));
  color: #1a1408;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.elite-badge-inline{ margin-left: 8px; vertical-align: middle; }

.elite-shell{
  /* Slightly different "room" than the rest of the app - same chrome, gold edge. */
  background: linear-gradient(180deg, rgba(245,200,76,0.04), rgba(0,0,0,0));
  border: 1px solid var(--elite-gold-edge);
  border-radius: 18px;
}

.elite-hero{
  text-align: center;
  padding: 32px 16px 24px;
}
.elite-mark{
  font-size: 38px;
  color: var(--elite-gold);
  line-height: 1;
  margin-bottom: 10px;
}
.elite-title{
  font-size: 36px;
  font-weight: 900;
  margin: 0 0 12px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.elite-subtitle{
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto 18px;
  line-height: 1.5;
}
.elite-cta-row{
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}
.elite-fineprint{
  color: var(--ink-mute);
  font-size: 13px;
  margin-top: 12px;
}

.btn-elite{
  background: linear-gradient(180deg, var(--elite-gold), var(--elite-gold-dark));
  color: #1a1408;
  border: 1px solid rgba(0,0,0,0.18);
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(245,200,76,0.20);
}
.btn-elite:hover{ box-shadow: 0 10px 24px rgba(245,200,76,0.28); }

.btn-danger{
  background: linear-gradient(180deg, #f43f5e, #be123c);
  color: #ffffff;
  border: 1px solid rgba(244,63,94,0.55);
  box-shadow: 0 8px 18px rgba(244,63,94,0.22);
}
.btn-danger:hover{ box-shadow: 0 10px 22px rgba(244,63,94,0.32); }

.elite-section{ margin: 32px 0; }
.elite-section-title{
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--elite-gold);
  margin: 0 0 14px;
  text-align: center;
}

.elite-feature-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.elite-feature{
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}
.elite-feature h3{ margin: 8px 0 6px; color: var(--ink); font-size: 17px; }
.elite-feature p{ margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.elite-feature-icon{ font-size: 22px; }

a.elite-feature-link{
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color .12s ease, transform .12s ease;
}
a.elite-feature-link:hover{
  border-color: var(--elite-gold-edge);
  transform: translateY(-2px);
}

.pricing-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.pricing-card{
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 18px;
  text-align: center;
  position: relative;
}
.pricing-featured{
  border-color: var(--elite-gold-edge);
  background: linear-gradient(180deg, rgba(245,200,76,0.08), var(--surface-1));
}
.pricing-badge{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--elite-gold), var(--elite-gold-dark));
  color: #1a1408;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}
.pricing-name{
  color: var(--ink-mute);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pricing-price{
  font-size: 30px;
  font-weight: 900;
  color: var(--ink);
  margin: 6px 0;
}
.pricing-price span{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
  margin-left: 4px;
}
.pricing-note{
  color: var(--ink-mute);
  font-size: 13px;
  margin-bottom: 10px;
}
.pricing-card .btn{ width: 100%; margin-top: 8px; }

.elite-faq{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
  color: var(--ink);
}
.elite-faq summary{
  cursor: pointer;
  font-weight: 700;
  outline: none;
}
.elite-faq p{ color: var(--ink-soft); margin: 8px 0 0; font-size: 14px; }

.elite-trial-cta{
  margin-top: 24px;
  text-align: center;
  padding: 18px;
  background: var(--elite-gold-soft);
  border: 1px solid var(--elite-gold-edge);
  border-radius: 12px;
}
.elite-trial-cta p{ margin: 0 0 12px; color: #f3f4f6; }

.elite-hub-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 20px 0 8px;
}
.elite-badge-row{ margin-bottom: 6px; }
.elite-footer{ text-align: center; margin-top: 24px; }

.manage-grid{
  display: grid;
  gap: 8px;
  margin: 24px 0;
  max-width: 460px;
}
.manage-row{
  display: grid;
  grid-template-columns: 160px 1fr;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.manage-label{ color: var(--ink-mute); font-size: 13px; }
.manage-value{ color: var(--ink); font-weight: 700; }
.manage-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.elite-nudge{
  margin-top: 28px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(245,200,76,0.06);
  border: 1px solid var(--elite-gold-edge);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
}
.elite-nudge-cta{
  color: var(--elite-gold);
  text-decoration: none;
  font-weight: 700;
  margin-left: auto;
  white-space: nowrap;
}
.elite-nudge-cta:hover{ text-decoration: underline; }
.elite-nudge-close{
  background: transparent;
  color: var(--ink-mute);
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.elite-nudge-close:hover{ color: var(--ink); }

/* ---- Elite Advanced Stats ---- */
.adv-mastery-headline{
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.adv-mastery-big{
  font-size: 38px;
  font-weight: 900;
  color: var(--elite-gold);
}
.adv-mastery-sub{ color: var(--ink-soft); font-size: 14px; }

.adv-tier-list{ display: grid; gap: 8px; }
.adv-tier-row{
  display: grid;
  grid-template-columns: 90px 1fr 64px;
  align-items: center;
  gap: 12px;
}
.adv-tier-name{ font-weight: 700; color: var(--ink); font-size: 14px; }
.adv-tier-bar{
  height: 14px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.adv-tier-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--elite-gold-dark), var(--elite-gold));
}
.adv-tier-num{ text-align: right; color: var(--ink-mute); font-size: 13px; }

.adv-tod-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}
.adv-tod-card{
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.adv-tod-best{
  border-color: var(--elite-gold-edge);
  background: var(--elite-gold-soft);
}
.adv-tod-icon{ font-size: 24px; }
.adv-tod-label{ font-weight: 700; color: var(--ink); margin-top: 4px; }
.adv-tod-acc{ font-size: 24px; font-weight: 900; color: var(--ink); margin-top: 6px; }
.adv-tod-n{ font-size: 12px; color: var(--ink-mute); }

.adv-pos-row{
  display: grid;
  grid-template-columns: 110px 1fr 52px 44px;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
}
.adv-pos-name{ color: var(--ink); font-weight: 700; font-size: 14px; text-transform: capitalize; }
.adv-pos-bar{
  height: 12px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.adv-pos-fill{
  height: 100%;
  background: linear-gradient(90deg, #f43f5e, var(--elite-gold));
}
.adv-pos-acc{ text-align: right; color: var(--ink); font-weight: 700; font-size: 13px; }
.adv-pos-n{ text-align: right; color: var(--ink-mute); font-size: 12px; }

.adv-forecast{
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding-top: 10px;
}
.adv-fc-col{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.adv-fc-count{ font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 4px; min-height: 16px; }
.adv-fc-bar{
  width: 60%;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, var(--elite-gold), var(--elite-gold-dark));
}
.adv-fc-overdue .adv-fc-bar{ background: linear-gradient(180deg, #f43f5e, #9f1239); }
.adv-fc-label{
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 6px;
  text-align: center;
}

/* ====================================================================
   App shell: persistent sidebar + responsive main content
   ==================================================================== */
.sidebar{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 248px;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  z-index: 60;
}
.app-main{
  margin-left: 248px;
  min-height: 100vh;
}

.sidebar-brand{
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 900;
  font-size: 19px;
  padding: 6px 8px 14px;
}
.sidebar-logo{ width: 38px; height: 38px; border-radius: 10px; }

.sidebar-nav{
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sidebar-nav a{
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease;
}
.sidebar-nav a:hover{ background: rgba(255,255,255,0.05); color: var(--ink); }
.sidebar-nav a.active{
  background: rgba(168,85,247,0.18);
  border-color: rgba(168,85,247,0.38);
  color: var(--ink);
}
.nav-ico{ font-size: 16px; width: 20px; text-align: center; }

/* Elite entry point styled as a real button (gold identity kept) */
.sidebar-elite{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 4px 4px;
  padding: 12px 14px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: #1a1408;
  background: linear-gradient(180deg, #f5c84c, #b8860b);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: 0 6px 16px rgba(245,200,76,0.28);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.sidebar-elite:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(245,200,76,0.42);
}
.sidebar-elite.active{
  box-shadow: 0 0 0 2px rgba(245,200,76,0.55), 0 6px 16px rgba(245,200,76,0.3);
}

.sidebar-foot{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sidebar-streak{
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
}
.sidebar-streak-fire{ font-size: 15px; }
.sidebar-streak-num{ font-weight: 900; font-size: 16px; color: var(--ink); }
.sidebar-streak-label{ color: var(--ink-mute); }

.profile-wrap{ position: relative; }
.profile-circle{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(168,85,247,0.5);
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: var(--ink);
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-circle:hover{ filter: brightness(1.12); }
.profile-menu{
  position: absolute;
  right: 0;
  bottom: 52px;
  width: 188px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  padding: 6px;
  z-index: 70;
}
.profile-name{
  padding: 8px 10px 6px;
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 700;
  border-bottom: 1px solid var(--menu-border);
  margin-bottom: 4px;
}
.profile-menu a{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}
.profile-menu a:hover{ background: var(--surface-2); }

.nav-burger{
  display: none;
  position: fixed;
  top: 14px; left: 14px;
  z-index: 80;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(20,26,34,0.96);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}
.nav-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 55;
}
.nav-overlay.show{ display: block; }

@media (max-width: 900px){
  .sidebar{
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 50px rgba(0,0,0,0.6);
  }
  .sidebar.open{ transform: translateX(0); }
  .app-main{ margin-left: 0; }
  .nav-burger{ display: block; }
  .dashboard{ padding-top: 72px; }
  .app-main .app-card{ margin-top: 70px; }
}

/* ====================================================================
   Home dashboard
   ==================================================================== */
.dashboard{
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 40px 64px;
}
.dash-head{ margin-bottom: 14px; }
.dash-head h1{
  font-size: 30px;
  font-weight: 900;
  margin: 4px 0 4px;
}

.dash-grid{
  display: grid;
  /* Level spans the full row; streak, reviews, leagues and word-of-the-day
     share the second row, four across. */
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 860px){
  .dash-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px){
  .dash-grid{ grid-template-columns: 1fr; }
}
.dash-card{
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
}
.dash-card[onclick]{
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
}
.dash-card[onclick]:hover{
  transform: translateY(-3px);
  border-color: rgba(168,85,247,0.45);
}
.dash-card-label{
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 12px;
  font-weight: 800;
}
.dash-card h3{ margin: 0 0 4px; font-size: 17px; color: var(--ink); }
.dash-card p{ margin: 0; color: var(--ink-soft); font-size: 14px; }

.dash-level{ grid-column: 1 / -1; }
.level-row{ display: flex; align-items: center; gap: 18px; }
.level-row .level-right{ flex: 1; }

.streak-big-row{ display: flex; align-items: center; gap: 14px; }
.review-row{ display: flex; align-items: center; justify-content: space-between; gap: 14px; }

.daily-card-word{ font-size: 26px; font-weight: 900; color: var(--ink); }
.daily-card-pos{ font-size: 13px; font-style: italic; color: var(--accent-soft); margin: 2px 0 8px; }
.daily-card-def{ color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* ====================================================================
   Settings page
   ==================================================================== */
.settings-card{ max-width: 720px; }
.settings-section{ margin-top: 28px; }
.settings-section h2{ font-size: 18px; margin: 0 0 12px; }
.settings-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}
.settings-row-title{ font-weight: 700; color: var(--ink); }
.settings-row-sub{ font-size: 13px; color: var(--ink-mute); margin-top: 2px; }
.settings-soon p{ color: var(--ink-mute); margin: 0; }

.theme-toggle{
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.theme-opt{
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-mute);
}
.theme-opt:hover{ color: var(--ink); }
.theme-opt.active{
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  color: #ffffff;
}

/* ---------- Settings: forms, danger zone, accent picker ---------- */
.settings-input{ width:100%; padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font-size:14px; }
.settings-input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.settings-input::placeholder{ color:var(--ink-mute); }
.settings-card.danger{ border:1px solid rgba(244,63,94,0.4); }
.settings-msg{ margin-top:10px; font-size:14px; min-height:18px; }
.settings-msg.ok{ color:#10b981; }
.settings-msg.err{ color:#f43f5e; }
.field-group{ margin-bottom:16px; }
.field-group label{ display:block; margin-bottom:6px; font-size:13px; color:var(--ink-soft); font-weight:600; }
.field-group:last-child{ margin-bottom:0; }

.accent-group{ display:flex; flex-direction:column; gap:18px; }
.accent-mode-label{ font-size:13px; font-weight:700; color:var(--ink-mute); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; }
.accent-swatches{ display:grid; grid-template-columns:repeat(4, 34px); gap:12px; }
.accent-opt{ width:34px; height:34px; border-radius:50%; border:2px solid var(--line); background:var(--sw); cursor:pointer; padding:0; transition:transform .12s ease, opacity .12s ease; }
.accent-opt:hover:not(:disabled){ transform:scale(1.12); }
.accent-opt.active{ box-shadow:0 0 0 3px var(--panel), 0 0 0 5px var(--ink); }
/* The set that doesn't match the current theme is shown but not selectable. */
.accent-opt:disabled{ opacity:0.28; filter:grayscale(0.6); cursor:not-allowed; }
.accent-mode.is-inactive .accent-mode-label{ opacity:0.5; }
.rebirth-badge{ display:inline-block; margin-top:10px; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:800; background:var(--surface-2); color:var(--accent-soft); border:1px solid var(--line); }

/* ====================================================================
   Light-theme corrections: surfaces that don't auto-theme via tokens
   ==================================================================== */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-hero,
html[data-theme="light"] .btn-next,
html[data-theme="light"] .choice{
  color: #ffffff;                      /* white text stays on purple */
}
html[data-theme="light"] .btn-secondary{
  color: #1f2937;
}
html[data-theme="light"] .sidebar-nav a:hover{
  background: rgba(17,24,39,0.06);
}
html[data-theme="light"] .choice.is-correct,
html[data-theme="light"] .choice.is-wrong{
  color: #ffffff;
}
/* Modal cards keep dark backgrounds, so keep their text light */
html[data-theme="light"] .lvlup-title,
html[data-theme="light"] .lvlup-sub,
html[data-theme="light"] .tier-modal-title,
html[data-theme="light"] .tier-modal-body{
  color: #f9fafb;
}
/* Result card: give it a light surface so dark text reads */
html[data-theme="light"] .result-card{
  background: linear-gradient(180deg, rgba(34,197,94,0.14), #ffffff);
  border-color: rgba(34,197,94,0.40);
}
html[data-theme="light"] .result-title{ color: #15803d; }
html[data-theme="light"] .result-hint{ color: #b91c1c; }
/* Landing feature cards: lighten the dark gradient end so they read on a light page */
html[data-theme="light"] .feature{
  background: linear-gradient(180deg, rgba(168,85,247,0.08), rgba(241,243,248,0.9));
}
/* Glass "level" widget on the home card uses a dark scrim; lighten its surface in light mode */
html[data-theme="light"] .level-widget{
  background: rgba(255,255,255,0.72);
}
/* Mobile nav burger button: dark fill in light mode needs dark text on a light fill */
html[data-theme="light"] .nav-burger{
  background: rgba(255,255,255,0.96);
  border-color: rgba(17,24,39,0.12);
}
/* Floating dark popovers (synonym-smash CTA) keep a dark surface, so keep their text light */
html[data-theme="light"] .snap-cta,
html[data-theme="light"] .snap-cta-close{
  color: #e5e7eb;
}
/* Leaderboard: several labels are near-white (built for the dark page) and
   vanish on the light surface. Darken them so they read in light mode. */
html[data-theme="light"] .lb-tier-name{ color: #5b21b6; }
html[data-theme="light"] .lb-tier-sub{ color: #7c3aed; }
html[data-theme="light"] .lb-countdown{ color: #7c3aed; }
html[data-theme="light"] .lb-promo-zone{ color: #047857; }
html[data-theme="light"] .lb-demo-zone{ color: #be123c; }
html[data-theme="light"] .lb-xp{ color: #b45309; }
html[data-theme="light"] .lb-row{ border-bottom-color: rgba(17,24,39,0.08); }
html[data-theme="light"] .lb-tier-badge{
  background: linear-gradient(135deg, rgba(168,85,247,0.16), rgba(99,102,241,0.12));
}

/* ====================================================================
   Light-mode legibility sweep. Many labels/chips were hardcoded in pale
   colors meant for the dark page; on the light surface they wash out.
   These overrides darken the text and firm up chip fills - dark mode is
   untouched (it still uses the original rules above).
   ==================================================================== */

/* Uppercase eyebrow + section labels (DEFINITIONS / EXAMPLE / SYNONYMS,
   page eyebrows like EXPERIMENT / WORD PACKS / STATISTICS). --accent-soft
   is a pale pink in light mode, so pin these to a readable accent shade. */
html[data-theme="light"] .lab-eyebrow,
html[data-theme="light"] .learn-new-section h4{
  color: var(--accent-mid);
}

/* Synonym/antonym chips and the level tag: pale text on a near-white fill.
   Give them a tinted-but-readable surface and dark accent text. */
html[data-theme="light"] .chip{
  background: rgba(168,85,247,0.10);
  color: #6d28d9;
  border-color: rgba(168,85,247,0.28);
}
html[data-theme="light"] .learn-new-tag{
  color: #6d28d9;
}
/* Tier chip (home Leagues card, etc.): pale purple text in light mode. */
html[data-theme="light"] .tier-chip{
  background: rgba(168,85,247,0.12);
  color: #6d28d9;
  border-color: rgba(168,85,247,0.30);
}
/* Quiz mode icon tiles: the translucent purple fill is nearly invisible on
   the light page - give them a firmer accent-tinted surface. */
html[data-theme="light"] .mode-icon{
  background: linear-gradient(180deg, rgba(168,85,247,0.18), rgba(96,165,250,0.10));
  border-color: rgba(168,85,247,0.35);
  box-shadow: 0 8px 18px rgba(168,85,247,0.14);
}

/* Stats: mastery "x/y mastered" labels and the accuracy-chart panel. */
html[data-theme="light"] .accuracy-chart{
  background: rgba(17,24,39,0.02);
  border-color: rgba(17,24,39,0.08);
}

/* Advanced-stats forecast/time-of-day cards already use tokens; only the
   gold "best" highlight + forecast bars need no change. Calendar day nums
   in the busiest cells were pale purple - darken for contrast. */
html[data-theme="light"] .cal-day.lv3 .cal-daynum{ color: #5b21b6; }

/* Streak status text: pale mint/amber wash out on the light page. */
html[data-theme="light"] .status-at_risk{ color: #b45309; }
html[data-theme="light"] .status-active_today{ color: #047857; }
/* ====================================================================
   Elite word packs
   ==================================================================== */
.pack-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.pack-card{
  text-align: left;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: transform .14s ease, border-color .14s ease;
}
.pack-card:hover{
  transform: translateY(-3px);
  border-color: var(--elite-gold-edge);
}
.pack-icon{ font-size: 26px; }
.pack-card h3{ margin: 8px 0 4px; font-size: 17px; color: var(--ink); }
.pack-card p{ margin: 0; color: var(--ink-soft); font-size: 13.5px; line-height: 1.45; }

.pack-detail{ margin-top: 30px; }
.pack-detail-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pack-detail-head h2{ margin: 0; font-size: 20px; }
.pack-word-list{ display: grid; gap: 8px; }
.pack-word{
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}
.pack-word-head b{ color: var(--ink); }
.pack-word-pos{
  font-size: 11px;
  font-style: italic;
  color: var(--accent-soft);
  margin-left: 6px;
}
.pack-word-def{ color: var(--ink-soft); font-size: 14px; margin-top: 3px; }

/* ====================================================================
   Elite etymology
   ==================================================================== */
.etym-search{
  width: 100%;
  padding: 12px 16px;
  margin: 6px 0 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-1);
  color: var(--ink);
  font-size: 15px;
}
.etym-list{ display: grid; gap: 10px; }
.etym-entry{
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
}
.etym-word{
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px;
}
.etym-tier{
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mute);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.etym-text{ color: var(--ink-soft); font-size: 14px; line-height: 1.55; margin-top: 5px; }