/* ===== Minimal ===== */
:root[data-theme="minimal"] {
  --font-ui: -apple-system, "Segoe UI", "Microsoft JhengHei", sans-serif;
  --bg: #f7f8fa; --surface: #ffffff; --surface-2: #f1f3f5; --topbar-bg: rgba(255, 255, 255, .85);
  --text: #1f2328; --muted: #59636e; --line: #e3e6ea;
  --primary: #1d4ed8; --primary-text: #1d4ed8; --primary-ink: #ffffff; --primary-soft: #e8efff;
  --accent-1: #2563eb; --accent-2: #7c3aed; --accent-3: #0891b2; --accent-4: #db2777;
  --good: #176f30; --warn: #8a5c00; --bad: #cf222e;
  --good-soft: #e6f4ea; --warn-soft: #fff4e5; --bad-soft: #ffebe9;
  --radius: 8px; --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05); --shadow-hover: 0 2px 6px rgba(16, 24, 40, .08);
  --weight-strong: 600; --dur: 150ms; --ease: ease;
  --confetti-1: #2563eb; --confetti-2: #60a5fa; --confetti-3: #93c5fd;
  --confetti-4: #1d4ed8; --confetti-5: #3b82f6; --confetti-6: #bfdbfe;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="minimal"] {
    color-scheme: dark;
    --bg: #0f1115; --surface: #171a21; --surface-2: #1f232b; --topbar-bg: rgba(23, 26, 33, .85);
    --text: #e6e8eb; --muted: #9aa4b2; --line: #2b313b;
    --primary: #6b9bff; --primary-text: #6b9bff; --primary-ink: #0b1220; --primary-soft: #1e2a44;
    --good: #4ac26b; --warn: #e3a33b; --bad: #ff7b72;
    --good-soft: #13291b; --warn-soft: #2d2410; --bad-soft: #3a1717;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

/* ===== Morandi: muted, greyed pastels on warm greige ===== */
:root[data-theme="morandi"] {
  --font-ui: "Segoe UI", "Microsoft JhengHei", -apple-system, sans-serif;
  --bg: #f1ede6; --surface: #faf8f4; --surface-2: #e8e2d8; --topbar-bg: rgba(241, 237, 230, .88);
  --text: #46413c; --muted: #635b54; --line: #ddd5ca;
  --primary: #627585; --primary-text: #4f6272; --primary-ink: #ffffff; --primary-soft: #e3e8ec;
  --accent-1: #7b8e9e; --accent-2: #9caf9c; --accent-3: #c9a5a0; --accent-4: #c8b38a;
  --good: #4b654f; --warn: #7a5a28; --bad: #9a4f4f;
  --good-soft: #e4ebe3; --warn-soft: #f1e8d8; --bad-soft: #f3e3e1;
  --radius: 12px; --radius-lg: 18px;
  --shadow: 0 2px 10px rgba(70, 65, 60, .06); --shadow-hover: 0 6px 18px rgba(70, 65, 60, .1);
  --weight-strong: 600; --dur: 220ms; --ease: cubic-bezier(.25, .8, .35, 1);
  --confetti-1: #7b8e9e; --confetti-2: #9caf9c; --confetti-3: #c9a5a0;
  --confetti-4: #c8b38a; --confetti-5: #a99bb5; --confetti-6: #d8cfc4;
}
:root[data-theme="morandi"] .bg-fx {
  background:
    radial-gradient(900px 600px at 0% 0%, rgba(156, 175, 156, .18), transparent 70%),
    radial-gradient(800px 600px at 100% 100%, rgba(201, 165, 160, .16), transparent 70%);
}
:root[data-theme="morandi"] .stat, :root[data-theme="morandi"] .settings, :root[data-theme="morandi"] .review-card {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:root[data-theme="morandi"] .stat:hover, :root[data-theme="morandi"] .settings:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
/* Seven bars in the four muted accents */
:root[data-theme="morandi"] .bars > i:nth-child(4n+1) { background: var(--accent-1); }
:root[data-theme="morandi"] .bars > i:nth-child(4n+2) { background: var(--accent-2); }
:root[data-theme="morandi"] .bars > i:nth-child(4n+3) { background: var(--accent-3); }
:root[data-theme="morandi"] .bars > i:nth-child(4n+4) { background: var(--accent-4); }
:root[data-theme="morandi"] .bars > i.today { background: var(--primary); }
:root[data-theme="morandi"] .goal-bar > i { background: linear-gradient(90deg, var(--accent-2), var(--accent-1)); }
/* The pastel accents are too light for text; deepen grade stamps (large text, ≥ 3:1) */
:root[data-theme="morandi"] .grade-S { color: #8a5a54; }
:root[data-theme="morandi"] .grade-B { color: var(--primary-text); }
:root[data-theme="morandi"] .grade-C { color: #6e5f80; }
:root[data-theme="morandi"] .review-back { animation: card-fade calc(var(--dur) * 2) var(--ease); }

/* ===== Playful ===== */
:root[data-theme="playful"] {
  --font-ui: "Segoe UI", "Microsoft JhengHei", -apple-system, sans-serif;
  --bg: #fff9ef; --surface: #ffffff; --surface-2: #fff1d6; --topbar-bg: rgba(255, 249, 239, .9);
  --text: #2b2d42; --muted: #5e6275; --line: #f0e2c8;
  --primary: #58cc02; --primary-text: #2f7d00; --primary-shade: #46a302; --primary-ink: #2b2d42; --primary-soft: #e6f8d8;
  --accent-1: #1cb0f6; --accent-2: #ffc800; --accent-3: #ff9600; --accent-4: #ce82ff;
  --good: #2f7d00; --warn: #a85a00; --bad: #c81e1e;
  --good-soft: #e6f8d8; --warn-soft: #fff1d6; --bad-soft: #ffe1e1;
  --radius: 14px; --radius-lg: 20px;
  --shadow: 0 4px 0 rgba(43, 45, 66, .08); --shadow-hover: 0 8px 0 rgba(43, 45, 66, .1);
  --weight-strong: 800; --dur: 200ms; --ease: cubic-bezier(.34, 1.56, .64, 1);
  --confetti-1: #58cc02; --confetti-2: #1cb0f6; --confetti-3: #ffc800;
  --confetti-4: #ff9600; --confetti-5: #ce82ff; --confetti-6: #ff4b4b;
}
:root[data-theme="playful"] button.primary { box-shadow: 0 4px 0 var(--primary-shade); }
:root[data-theme="playful"] button.primary:active { transform: translateY(4px); box-shadow: 0 0 0 var(--primary-shade); }
:root[data-theme="playful"] button:not(.link):not(.primary) { box-shadow: 0 3px 0 var(--line); }
:root[data-theme="playful"] button:not(.link):not(.primary):active { transform: translateY(3px); box-shadow: none; }
:root[data-theme="playful"] .stat, :root[data-theme="playful"] .review-card, :root[data-theme="playful"] .settings {
  border-width: 2px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:root[data-theme="playful"] .stat:hover, :root[data-theme="playful"] .settings:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
:root[data-theme="playful"] .tabs a.active { animation: quiz-pop .35s var(--ease); }
:root[data-theme="playful"] .bars > i:nth-child(7n+1) { background: var(--accent-1); }
:root[data-theme="playful"] .bars > i:nth-child(7n+2) { background: var(--accent-2); }
:root[data-theme="playful"] .bars > i:nth-child(7n+3) { background: var(--accent-3); }
:root[data-theme="playful"] .bars > i:nth-child(7n+4) { background: var(--accent-4); }
:root[data-theme="playful"] .bars > i.today { background: var(--primary); }
/* Goal ring instead of bar */
:root[data-theme="playful"] .stat.goal .goal-bar { display: none; }
:root[data-theme="playful"] .stat.goal .ring {
  display: block; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--p, 0) * 360deg), var(--surface-2) 0);
  -webkit-mask: radial-gradient(circle 15px, transparent 98%, #000 100%); mask: radial-gradient(circle 15px, transparent 98%, #000 100%);
}
/* Streak flame levels */
:root[data-theme="playful"] .stat.streak[data-level="1"] .stat-num { color: #c2410c; }
:root[data-theme="playful"] .stat.streak[data-level="2"] .stat-num { color: #c81e1e; }
:root[data-theme="playful"] .stat.streak[data-level="3"] .stat-num { color: #9333ea; }
:root[data-theme="playful"] .grade-S { color: #c2410c; }
:root[data-theme="playful"] .grade-B { color: #0077b6; }
:root[data-theme="playful"] .grade-C { color: #9333ea; }
:root[data-theme="playful"] .theme-tile.selected { box-shadow: 0 0 0 3px var(--primary-soft), 0 3px 0 var(--line); }
:root[data-theme="playful"] .stat-num.bump { animation: quiz-pop .35s var(--ease); }

/* ===== Neon ===== */
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
:root[data-theme="neon"] {
  color-scheme: dark;
  --font-ui: "Segoe UI", "Microsoft JhengHei", -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --bg: #070a14; --surface: rgba(16, 22, 40, .78); --surface-solid: #0e1427; --surface-2: rgba(34, 44, 76, .6);
  --topbar-bg: rgba(7, 10, 20, .75);
  --text: #e6f1ff; --muted: #9fb3d6; --line: rgba(34, 211, 238, .22);
  --primary: #22d3ee; --primary-text: #22d3ee; --primary-ink: #021018; --primary-soft: rgba(34, 211, 238, .14);
  --accent-1: #22d3ee; --accent-2: #f472b6; --accent-3: #a78bfa; --accent-4: #facc15;
  --good: #34d399; --warn: #fbbf24; --bad: #fb7185;
  --good-soft: rgba(52, 211, 153, .14); --warn-soft: rgba(251, 191, 36, .14); --bad-soft: rgba(251, 113, 133, .14);
  --radius: 10px; --radius-lg: 14px;
  --shadow: 0 0 0 1px rgba(34, 211, 238, .08), 0 8px 30px rgba(0, 0, 0, .45);
  --shadow-hover: 0 0 18px rgba(34, 211, 238, .35);
  --weight-strong: 700; --dur: 180ms; --ease: cubic-bezier(.2, .8, .2, 1);
  --glow-cyan: 0 0 8px rgba(34, 211, 238, .8), 0 0 18px rgba(34, 211, 238, .35);
  --glow-pink: 0 0 8px rgba(244, 114, 182, .8), 0 0 18px rgba(244, 114, 182, .35);
  --confetti-1: #22d3ee; --confetti-2: #f472b6; --confetti-3: #a78bfa;
  --confetti-4: #facc15; --confetti-5: #34d399; --confetti-6: #e6f1ff;
}
:root[data-theme="neon"] .bg-fx {
  background:
    radial-gradient(600px 400px at 15% 10%, rgba(34, 211, 238, .14), transparent 70%),
    radial-gradient(700px 500px at 85% 90%, rgba(244, 114, 182, .12), transparent 70%),
    repeating-linear-gradient(0deg, rgba(34, 211, 238, .05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(34, 211, 238, .05) 0 1px, transparent 1px 40px);
  background-size: 200% 200%, 200% 200%, auto, auto;
  animation: neon-drift 18s ease-in-out infinite alternate;
}
@keyframes neon-drift { from { background-position: 0% 0%, 100% 100%, 0 0, 0 0; } to { background-position: 100% 50%, 0% 50%, 0 0, 0 0; } }
:root[data-theme="neon"] .stat-num, :root[data-theme="neon"] .quiz-score, :root[data-theme="neon"] .sidebar .count,
:root[data-theme="neon"] .stat-label, :root[data-theme="neon"] .due-badge { font-family: var(--font-mono); }
:root[data-theme="neon"] .stat-num { color: var(--primary); text-shadow: var(--glow-cyan); }
:root[data-theme="neon"] .stat.due .stat-num { color: var(--accent-2); text-shadow: var(--glow-pink); animation: neon-pulse 2.4s ease-in-out infinite; }
@keyframes neon-pulse { 50% { opacity: .65; } }
:root[data-theme="neon"] .brand-mark, :root[data-theme="neon"] .tab-indicator { box-shadow: var(--glow-cyan); }
:root[data-theme="neon"] button:hover { box-shadow: var(--shadow-hover); }
:root[data-theme="neon"] button.primary:hover { box-shadow: var(--glow-cyan); }
:root[data-theme="neon"] .goal-bar > i { background: linear-gradient(90deg, var(--accent-1), var(--accent-2)); box-shadow: var(--glow-cyan); }
:root[data-theme="neon"] .bars > i { background: linear-gradient(180deg, var(--accent-2), var(--accent-1)); }
/* Rotating gradient border on key cards */
:root[data-theme="neon"] .review-card, :root[data-theme="neon"] .stat.goal {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface-solid), var(--surface-solid)) padding-box,
              conic-gradient(from var(--angle), #22d3ee, #f472b6, #a78bfa, #22d3ee) border-box;
  animation: neon-spin 8s linear infinite;
}
@keyframes neon-spin { to { --angle: 360deg; } }
:root[data-theme="neon"] .blank.correct { box-shadow: var(--glow-cyan); }
:root[data-theme="neon"] .blank.wrong { animation: neon-glitch .4s steps(2) both; }
@keyframes neon-glitch {
  0% { transform: translate(0); text-shadow: 2px 0 var(--accent-2), -2px 0 var(--accent-1); }
  25% { transform: translate(-3px, 1px); } 50% { transform: translate(3px, -1px); text-shadow: -2px 0 var(--accent-2), 2px 0 var(--accent-1); }
  75% { transform: translate(-1px, 0); } 100% { transform: translate(0); text-shadow: none; }
}
:root[data-theme="neon"] .stat { transition: box-shadow .3s; }
:root[data-theme="neon"] .stats.flash .stat { box-shadow: var(--glow-cyan); }
:root[data-theme="neon"] .bars > i.today { background: var(--accent-1); box-shadow: var(--glow-cyan); }

/* 3D card flip for playful and neon (minimal keeps the shared fade) */
:root[data-theme="playful"] .review-back, :root[data-theme="neon"] .review-back {
  animation: card-flip calc(var(--dur) * 2.4) var(--ease); transform-origin: center;
}

/* Playful: #58cc02 is too light for outlines and borders on white (non-text contrast < 3:1). */
:root[data-theme="playful"] input:focus-visible, :root[data-theme="playful"] select:focus-visible,
:root[data-theme="playful"] button:focus-visible, :root[data-theme="playful"] a:focus-visible,
:root[data-theme="playful"] .blank:focus, :root[data-theme="playful"] .blank-choice.active { outline-color: var(--primary-text); }
:root[data-theme="playful"] .settings input[type=checkbox]:checked,
:root[data-theme="playful"] .quiz-setup input[type=checkbox]:checked { background: var(--primary-text); border-color: var(--primary-text); }
:root[data-theme="playful"] button:hover, :root[data-theme="playful"] label.button:hover,
:root[data-theme="playful"] .theme-tile.selected { border-color: var(--primary-text); }