/* ══════════════════════════════════════════════════════
   SPANISH QUICKFIRE — Design System
   Palette: Warm sunset orange accent (España vibes)
   Dark mode first-class. Mobile-first.
   ══════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ────────────────────────────────────── */
:root {
  /* Type */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* Transitions */
  --t: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --t-slow: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --content-max: 480px;

  /* Fonts */
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Satoshi', 'Inter', sans-serif;
}

/* ── LIGHT THEME ──────────────────────────────────────── */
:root,
[data-theme="light"] {
  --bg:          #faf8f5;
  --surface:     #ffffff;
  --surface-2:   #f4f1ec;
  --surface-off: #ede9e2;
  --border:      #e0dbd3;
  --divider:     #ebe7e0;

  --text:        #1c1a17;
  --text-muted:  #6b6760;
  --text-faint:  #b2aea8;

  /* Accent: warm Spanish orange */
  --accent:         #e8643a;
  --accent-hover:   #d44f25;
  --accent-active:  #b83e18;
  --accent-bg:      #fdf0eb;
  --accent-border:  #f5c4b0;

  /* Success */
  --success:        #3a8a4a;
  --success-bg:     #eef7f0;
  --success-border: #b6dfc0;
  --success-text:   #2a6636;

  /* Error */
  --error:          #c83535;
  --error-bg:       #fdf0f0;
  --error-border:   #f0bcbc;
  --error-text:     #8f2020;

  /* Gold for streaks */
  --gold:           #d4a21a;
  --gold-bg:        #fdf6e3;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.1);
}

/* ── DARK THEME ───────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #141210;
  --surface:     #1c1a17;
  --surface-2:   #242119;
  --surface-off: #2a271e;
  --border:      #363228;
  --divider:     #2c2920;

  --text:        #e8e4dc;
  --text-muted:  #8a8478;
  --text-faint:  #504c44;

  --accent:         #f07a52;
  --accent-hover:   #e86438;
  --accent-active:  #d44f25;
  --accent-bg:      #2a1c14;
  --accent-border:  #5a3020;

  --success:        #5aaa6a;
  --success-bg:     #142018;
  --success-border: #2a5234;
  --success-text:   #7bc88a;

  --error:          #e85a5a;
  --error-bg:       #261414;
  --error-border:   #5a2828;
  --error-text:     #f09090;

  --gold:           #e0b030;
  --gold-bg:        #261e08;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
}

/* ── SYSTEM PREFERENCE FALLBACK ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #141210; --surface: #1c1a17; --surface-2: #242119;
    --surface-off: #2a271e; --border: #363228; --divider: #2c2920;
    --text: #e8e4dc; --text-muted: #8a8478; --text-faint: #504c44;
    --accent: #f07a52; --accent-hover: #e86438; --accent-active: #d44f25;
    --accent-bg: #2a1c14; --accent-border: #5a3020;
    --success: #5aaa6a; --success-bg: #142018; --success-border: #2a5234; --success-text: #7bc88a;
    --error: #e85a5a; --error-bg: #261414; --error-border: #5a2828; --error-text: #f09090;
    --gold: #e0b030; --gold-bg: #261e08;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.4); --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
  }
}

/* ── BASE RESET ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  transition: background var(--t-slow), color var(--t-slow);
}

img, svg { display: block; max-width: 100%; }
ul[role="list"], ol[role="list"] { list-style: none; }
input, button, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.2; }
p, li { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── HEADER ───────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  transition: background var(--t-slow), border-color var(--t-slow);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
}

.logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.logo-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--accent);
  transition: color var(--t);
}

.logo-bg { fill: var(--accent); }

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.streak-chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--gold-bg);
  color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  transition: background var(--t), color var(--t);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  transition: background var(--t), color var(--t);
}

.icon-btn:hover {
  background: var(--surface-off);
  color: var(--text);
}

/* ── SCREENS ──────────────────────────────────────────── */
.screen {
  display: none;
  min-height: calc(100dvh - 56px);
}

.screen.active {
  display: block;
}

/* ── HOME SCREEN ──────────────────────────────────────── */
.home-hero {
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--bg) 70%);
  border-bottom: 1px solid var(--accent-border);
  padding: var(--space-10) var(--space-5) var(--space-8);
  text-align: center;
  transition: background var(--t-slow), border-color var(--t-slow);
}

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: var(--space-3);
}

.hero-title em {
  color: var(--accent);
  font-style: normal;
}

.hero-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 28ch;
  margin: 0 auto;
}

.home-content {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
}

/* Daily card */
.daily-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-md);
  transition: background var(--t-slow), border-color var(--t-slow);
}

.daily-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.daily-badge {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.same-for-all {
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* Difficulty selector */
.difficulty-selector {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.diff-btn {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  transition: all var(--t);
}

.diff-btn:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-bg);
}

.diff-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

/* Quiz size buttons */
.quiz-size-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--surface-2);
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}

.size-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--t);
}

.size-btn:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.size-btn.primary {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.size-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.03em;
}

.size-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.size-meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.daily-stat-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: var(--space-4);
  border-top: 1px solid var(--divider);
}

/* Secondary modes */
.secondary-modes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.mode-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
  transition: all var(--t);
  width: 100%;
}

.mode-card:not(:disabled):hover {
  border-color: var(--accent-border);
  background: var(--accent-bg);
  transform: translateX(3px);
}

.mode-card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mode-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--surface-2);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  flex-shrink: 0;
  transition: background var(--t), color var(--t);
}

.mode-card:not(:disabled):hover .mode-icon {
  background: var(--accent-bg);
  color: var(--accent);
}

.missed-icon { color: var(--accent); }

.mode-text {
  flex: 1;
  min-width: 0;
}

.mode-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.mode-text span {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.mode-arrow {
  color: var(--text-faint);
  flex-shrink: 0;
  transition: transform var(--t), color var(--t);
}

.mode-card:not(:disabled):hover .mode-arrow {
  transform: translateX(4px);
  color: var(--accent);
}

/* ── QUIZ SCREEN ──────────────────────────────────────── */
/* Progress bar */
.quiz-progress-bar {
  height: 3px;
  background: var(--surface-off);
}

.quiz-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width var(--t-slow);
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.quiz-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
}

.quiz-counter {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.q-sep {
  font-weight: 400;
  color: var(--text-muted);
}

.quiz-timer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-feature-settings: "tnum";
}

/* Question card */
.question-card {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-3) var(--space-5) var(--space-10);
}

.q-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.topic-tag {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.diff-tag {
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}

.stat-tag {
  background: var(--surface-2);
  color: var(--text-faint);
  border: 1px solid var(--border);
}

.q-prompt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: var(--space-5);
  min-height: 3.5rem;
}

.hint-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-faint);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--t), background var(--t);
  margin-bottom: var(--space-2);
}

.hint-btn:hover {
  color: var(--text-muted);
  background: var(--surface-2);
}

.hint-text {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  min-height: 1.4rem;
  margin-bottom: var(--space-5);
  transition: opacity var(--t);
  opacity: 0;
}

.hint-text.visible { opacity: 1; }

/* Answer input */
.answer-area {
  margin-bottom: var(--space-4);
}

.text-input-area {
  display: flex;
  gap: var(--space-3);
}

.answer-input {
  flex: 1;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: var(--text-base);
  color: var(--text);
  transition: border-color var(--t), box-shadow var(--t);
  min-width: 0;
}

.answer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  outline: none;
}

.answer-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.answer-input.correct {
  border-color: var(--success);
  background: var(--success-bg);
}

.answer-input.incorrect {
  border-color: var(--error);
  background: var(--error-bg);
}

.submit-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  background: var(--accent);
  color: white;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 700;
  white-space: nowrap;
  transition: background var(--t), transform var(--t);
  flex-shrink: 0;
}

.submit-btn:hover { background: var(--accent-hover); }
.submit-btn:active { background: var(--accent-active); transform: scale(0.97); }
.submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Feedback */
.feedback-area {
  animation: slideUp var(--t-slow) ease both;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.feedback-inner {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  transition: background var(--t);
}

.feedback-inner.correct {
  background: var(--success-bg);
  border: 1px solid var(--success-border);
}

.feedback-inner.incorrect {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
}

.feedback-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}

.feedback-verdict {
  font-weight: 700;
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.feedback-inner.correct .feedback-verdict { color: var(--success-text); }
.feedback-inner.incorrect .feedback-verdict { color: var(--error-text); }

.feedback-answer {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.feedback-explanation {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: italic;
}

.next-btn {
  width: 100%;
  padding: var(--space-4);
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background var(--t), transform var(--t);
}

.next-btn:hover { opacity: 0.88; }
.next-btn:active { transform: scale(0.97); }

/* ── RESULTS SCREEN ───────────────────────────────────── */
.results-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
}

.results-header {
  background: linear-gradient(135deg, var(--accent-bg), var(--surface));
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-md);
}

.results-score {
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 5rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.results-mode-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
}

.results-stats-row {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
}

.result-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.community-line {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}

.community-line strong { color: var(--text); }

/* Results breakdown */
.results-breakdown {
  margin-bottom: var(--space-5);
}

.breakdown-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.breakdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.breakdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: background var(--t-slow);
}

.breakdown-item.correct { border-color: var(--success-border); background: var(--success-bg); }
.breakdown-item.incorrect { border-color: var(--error-border); background: var(--error-bg); }

.breakdown-num {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-faint);
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

.breakdown-tick {
  font-size: 1rem;
  flex-shrink: 0;
}

.breakdown-content {
  flex: 1;
  min-width: 0;
}

.breakdown-prompt {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.breakdown-community {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Hardest card */
.hardest-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.hardest-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.hardest-prompt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-2);
}

.hardest-answer {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.hardest-stat {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--text-faint);
  background: var(--surface-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
}

/* Missed section */
.missed-section {
  margin-bottom: var(--space-5);
}

.missed-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-3);
}

.missed-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.missed-item {
  padding: var(--space-4);
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-md);
}

.missed-item-prompt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.missed-item-answer {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.missed-item-answer strong { color: var(--success); }

/* Result action buttons */
.results-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.results-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 700;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all var(--t);
  width: 100%;
}

.results-btn:hover {
  border-color: var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
}

.results-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.results-btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}

/* Referral block */
.referral-block {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}

.referral-inner {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.referral-emoji { font-size: 1.1rem; line-height: 1.6; flex-shrink: 0; }

.referral-text {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.5;
}

.referral-text strong { color: var(--text); }

/* ── PRACTICE SCREEN ──────────────────────────────────── */
.practice-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: color var(--t), background var(--t);
}

.back-btn:hover {
  color: var(--text);
  background: var(--surface-2);
}

.practice-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.practice-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-8);
}

.practice-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.form-group { display: flex; flex-direction: column; gap: var(--space-3); }

.form-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text);
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  transition: all var(--t);
}

.chip:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-bg);
}

.chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

/* Count selector */
.count-selector {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.count-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--t);
  line-height: 1;
}

.count-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
}

.count-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.count-display {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--accent);
  min-width: 2.5ch;
  text-align: center;
}

.practice-available {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-2);
  background: var(--surface-2);
  border-radius: var(--radius-md);
}

.start-practice-btn {
  padding: var(--space-5);
  background: var(--accent);
  color: white;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background var(--t), transform var(--t);
}

.start-practice-btn:hover { background: var(--accent-hover); }
.start-practice-btn:active { transform: scale(0.97); }
.start-practice-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── TOAST ────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity var(--t), transform var(--t);
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
}

.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (min-width: 520px) {
  :root { --content-max: 520px; }
  .quiz-size-btns { gap: var(--space-4); }
}

@media (min-width: 768px) {
  :root { --content-max: 560px; }
  .home-hero { padding: var(--space-16) var(--space-5) var(--space-10); }
}

/* ── UTILITY ANIMATIONS ───────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn var(--t-slow) ease both; }

/* Pulse on correct answer */
@keyframes correctPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 40%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.answer-input.correct { animation: correctPulse 0.5s ease; }

/* ══════════════════════════════════════════════════════
   PRACTICE MODE — ANSWER MODE TOGGLE
   ══════════════════════════════════════════════════════ */

.answer-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.mode-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  transition: all var(--t);
  cursor: pointer;
}

.mode-toggle-btn:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-bg);
}

.mode-toggle-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ══════════════════════════════════════════════════════
   QUIZ — MULTIPLE CHOICE OPTIONS
   ══════════════════════════════════════════════════════ */

.mc-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.mc-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: 2px solid var(--border);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: all var(--t);
  position: relative;
  overflow: hidden;
}

.mc-btn:hover:not(:disabled) {
  border-color: var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent);
  transform: translateX(2px);
}

.mc-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.mc-btn-letter {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-muted);
  font-family: var(--font-display);
  transition: all var(--t);
}

.mc-btn:hover:not(:disabled) .mc-btn-letter {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

.mc-btn-text {
  flex: 1;
  min-width: 0;
}

/* MC answer states */
.mc-btn.selected {
  border-color: var(--accent);
  background: var(--accent-bg);
}

.mc-btn.selected .mc-btn-letter {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.mc-btn.correct-answer {
  border-color: var(--success);
  background: var(--success-bg);
  color: var(--success-text);
}

.mc-btn.correct-answer .mc-btn-letter {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

.mc-btn.wrong-answer {
  border-color: var(--error);
  background: var(--error-bg);
  color: var(--error-text);
  opacity: 0.8;
}

.mc-btn.wrong-answer .mc-btn-letter {
  background: var(--error);
  border-color: var(--error);
  color: white;
}

.mc-btn:disabled {
  cursor: not-allowed;
}

.mc-btn:disabled:not(.correct-answer):not(.wrong-answer) {
  opacity: 0.45;
}

/* Keyboard shortcut hint on MC buttons */
.mc-btn-key-hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 600;
  flex-shrink: 0;
}

/* Answer mode badge on quiz screen */
.quiz-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-faint);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
}