*{box-sizing:border-box;margin:0;padding:0}

:root,[data-theme="parchment"]{
  --bg:#f5f0e8;--bg2:#ede7d9;--bg3:#e4dccb;--bg4:#d9d0bc;
  --border:#c8bfa8;--border2:#b5a98e;
  --gold:#8a6a1f;--gold-dim:#a07c2a;--gold-bright:#6a5010;
  --text:#2c2416;--text-dim:#8a7d65;--text-mid:#5a4e38;
  --red:#8b2020;--green:#2a5c2a;
  --radius:6px;
  --card-bg:#ffffff;--card-shadow:0 2px 8px rgba(0,0,0,0.08);
  --correct-bg:#e8f4e8;--correct-border:#2a5c2a;--correct-text:#2a5c2a;
  --wrong-bg:#fce8e8;--wrong-border:#8b2020;--wrong-text:#8b2020;
}
[data-theme="folio"]{
  --bg:#111009;--bg2:#181610;--bg3:#1f1c14;--bg4:#26221a;
  --border:#2a2620;--border2:#38332a;
  --gold:#c8a655;--gold-dim:#7a6535;--gold-bright:#e8c070;
  --text:#e2d9c4;--text-dim:#6a6050;--text-mid:#a09070;
  --red:#c85550;--green:#7ab870;--radius:6px;
  --card-bg:#1f1c14;--card-shadow:none;
  --correct-bg:#1a2a1a;--correct-border:#7ab870;--correct-text:#7ab870;
  --wrong-bg:#2a1a1a;--wrong-border:#c85550;--wrong-text:#c85550;
}
[data-theme="obsidian"]{
  --bg:#0d0d0f;--bg2:#141417;--bg3:#1a1a1f;--bg4:#202026;
  --border:#2a2a32;--border2:#38384a;
  --gold:#7c6fff;--gold-dim:#5a50cc;--gold-bright:#9d94ff;
  --text:#e8e8f0;--text-dim:#4a4a60;--text-mid:#8888aa;
  --red:#ff5566;--green:#44cc88;--radius:6px;
  --card-bg:#1a1a1f;--card-shadow:0 2px 8px rgba(0,0,0,0.4);
  --correct-bg:#1a2a1a;--correct-border:#44cc88;--correct-text:#44cc88;
  --wrong-bg:#2a1a1f;--wrong-border:#ff5566;--wrong-text:#ff5566;
}
[data-theme="studio"]{
  --bg:#f8f9fb;--bg2:#ffffff;--bg3:#f0f2f5;--bg4:#e5e8ed;
  --border:#e0e3e8;--border2:#c8cdd6;
  --gold:#0066ff;--gold-dim:#0052cc;--gold-bright:#0044aa;
  --text:#111827;--text-dim:#9ca3af;--text-mid:#6b7280;
  --red:#ef4444;--green:#22c55e;--radius:10px;
  --card-bg:#ffffff;--card-shadow:0 1px 3px rgba(0,0,0,0.08);
  --correct-bg:#f0fdf4;--correct-border:#22c55e;--correct-text:#166534;
  --wrong-bg:#fef2f2;--wrong-border:#ef4444;--wrong-text:#991b1b;
}

html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.6}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;height:52px;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.logo{font-size:18px;font-weight:500;color:var(--gold);letter-spacing:.05em}
.logo-sub{font-size:11px;color:var(--text-dim);letter-spacing:.08em;margin-left:10px;font-weight:400}
.topbar-controls{display:flex;align-items:center;gap:16px}

/* Voice toggle */
.voice-toggle{display:flex;align-items:center;gap:6px}
.voice-toggle label{font-size:10px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.voice-btn{padding:3px 10px;border-radius:20px;font-size:11px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .15s}
.voice-btn:hover{border-color:var(--gold-dim);color:var(--text)}
.voice-btn.active{background:var(--gold-dim);border-color:var(--gold);color:var(--bg)}

.theme-switcher{display:flex;align-items:center;gap:6px}
.theme-switcher label{font-size:10px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase}
.theme-sel{background:var(--bg3);border:1px solid var(--border);color:var(--text-mid);padding:4px 8px;border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer}

.container{max-width:700px;margin:0 auto;padding:1.5rem 1rem 4rem}

.mode-tabs{display:flex;gap:8px;margin-bottom:1.25rem}
.mode-tab{padding:6px 18px;border-radius:20px;font-size:12px;border:1px solid var(--border);background:var(--bg3);color:var(--text-dim);cursor:pointer;font-family:'JetBrains Mono',monospace;transition:all .15s}
.mode-tab:hover{border-color:var(--gold-dim);color:var(--text)}
.mode-tab.active{background:var(--gold-dim);border-color:var(--gold);color:var(--bg)}

.filter-row{display:flex;align-items:center;gap:10px;margin-bottom:1.25rem;flex-wrap:wrap}
.filter-row select{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:5px 8px;border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:12px}
.deck-count{font-size:11px;color:var(--text-dim)}

.mode-panel{width:100%}
.hidden{display:none}

/* ── Flashcard ── */
.card-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.flip-card{width:100%;max-width:480px;height:220px;perspective:1000px;cursor:pointer}
.flip-inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .4s ease}
.flip-front,.flip-back{
  position:absolute;inset:0;
  background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  backface-visibility:hidden;padding:1.5rem;
}
.flip-back{transform:rotateY(180deg)}
.card-label{font-size:10px;color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;position:absolute;top:12px;left:16px}
.card-word{font-size:28px;font-weight:500;color:var(--text);text-align:center}
.card-phonetic{font-size:13px;color:var(--gold-dim);font-family:'JetBrains Mono',monospace}

.flip-card.status-mastered{border-color:var(--correct-border)!important}
.flip-card.status-learning .flip-front{border-left:3px solid var(--gold)}

.card-actions{display:flex;gap:12px;align-items:center}
.btn-action{padding:8px 20px;border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:12px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-mid);transition:all .15s}
.btn-action.btn-wrong:hover{background:var(--wrong-bg);border-color:var(--wrong-border);color:var(--wrong-text)}
.btn-action.btn-right:hover{background:var(--correct-bg);border-color:var(--correct-border);color:var(--correct-text)}
.btn-speak-fc{padding:7px 16px;border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:12px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-mid);transition:all .15s}
.btn-speak-fc:hover{border-color:var(--gold-dim);color:var(--text)}

.progress-row{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-dim)}
.btn-shuffle{background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:4px 10px;font-size:11px;cursor:pointer;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.btn-shuffle:hover{border-color:var(--gold-dim);color:var(--text)}

/* ── Quiz ── */
.quiz-wrap{display:flex;flex-direction:column;gap:1rem}
.quiz-question{font-size:26px;font-weight:500;text-align:center;padding:1.5rem;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--card-shadow)}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quiz-opt{padding:10px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);font-family:'JetBrains Mono',monospace;font-size:13px;cursor:pointer;color:var(--text);text-align:left;transition:all .15s}
.quiz-opt:hover:not(:disabled){border-color:var(--gold-dim);background:var(--bg4)}
.quiz-opt.correct{background:var(--correct-bg);border-color:var(--correct-border);color:var(--correct-text)}
.quiz-opt.wrong{background:var(--wrong-bg);border-color:var(--wrong-border);color:var(--wrong-text)}
.quiz-result{text-align:center;font-size:14px;font-weight:500;min-height:1.4em}
.quiz-result.correct{color:var(--correct-text)}
.quiz-result.wrong{color:var(--wrong-text)}
.quiz-score{text-align:center;font-size:12px;color:var(--text-dim)}

/* ── Streak ── */
.streak-wrap{display:flex;flex-direction:column;gap:1.25rem}
.streak-header{display:flex;align-items:baseline;gap:10px;padding:1rem 1.25rem;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius)}
.streak-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.streak-count{font-size:36px;font-weight:500;color:var(--gold)}
.streak-flame{font-size:24px}
.streak-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:.75rem;text-align:center}
.stat-val{font-size:22px;font-weight:500;color:var(--text)}
.stat-lbl{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em}
.due-section{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.25rem}
.due-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.5rem}
.due-list{display:flex;flex-wrap:wrap;gap:6px}
.due-word{font-size:13px;padding:3px 8px;background:var(--bg3);border:1px solid var(--border);border-radius:4px;color:var(--text)}
.due-empty{font-size:13px;color:var(--text-dim)}
.due-more{font-size:12px;color:var(--text-dim)}
.btn-review{padding:8px 20px;background:var(--gold-dim);border:1px solid var(--gold);color:var(--bg);border-radius:var(--radius);cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;transition:background .15s}
.btn-review:hover{background:var(--gold-bright)}

.footer{text-align:center;padding:1rem;font-size:11px;color:var(--text-dim);border-top:1px solid var(--border);letter-spacing:.04em;display:flex;gap:8px;justify-content:center;align-items:center}
.footer a{color:var(--gold-dim);text-decoration:none}
.footer a:hover{color:var(--gold)}