:root {
  color-scheme: light;
  --blue: #5b4bd6;
  --ink: #28233f;
  --muted: #706786;
  --line: #ddd7ed;
  --bg: #f5f3fc;
  --surface: #ffffff;
  --surface-soft: #ebe7f6;
  --ring-track: #e8e2ff;
  --card-front: #ffffff;
  --card-front-line: #d6ceed;
  --card-blue: #5443bd;
  --card-blue-text: #eee9ff;
  --card-shadow: #ffdb78;
  --card-shadow-line: #edc455;
  --focus: #ab6300;
  --review-bg: #fff1c5;
  --review-hover: #ffe8a4;
  --review-active: #ffdf82;
  --review-text: #735000;
  --review-line: #e7c969;
  --learned-bg: #5b4bd6;
  --learned-hover: #4e3ec2;
  --learned-active: #4234a8;
  --learned-text: #ffffff;
  --soft-shadow: 0 8px 24px #46317f09;
  --card-elevation: 0 8px 24px #46317f0e;
}
html[data-theme=dark] {
  color-scheme: dark;
  --blue: #c0aeff;
  --ink: #f5f0ff;
  --muted: #c0b4d5;
  --line: #514365;
  --bg: #171426;
  --surface: #272138;
  --surface-soft: #312843;
  --ring-track: #423459;
  --card-front: #352c4c;
  --card-front-line: #766094;
  --card-blue: #5e4ab8;
  --card-blue-text: #eee7ff;
  --card-shadow: #b7a0f3;
  --card-shadow-line: #d4c2ff;
  --focus: #ffda78;
  --review-bg: #4a3b23;
  --review-hover: #5b4728;
  --review-active: #68522e;
  --review-text: #ffe4a0;
  --review-line: #927544;
  --learned-bg: #bba6ff;
  --learned-hover: #cbbcff;
  --learned-active: #ad95f2;
  --learned-text: #2b2045;
  --soft-shadow: 0 8px 24px #08051222;
  --card-elevation: 0 12px 30px #08051233;
}
body { color: var(--ink); background: var(--bg); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline-color: var(--focus); }
.header, footer, .counts, .learning-note { border-color: var(--line); }
.brand, .brand .brand-name { color: var(--ink); }
.brand .brand-number, .language span:first-child { color: var(--blue); }
.language-line { background: var(--line); }
.header-note, .saved-note svg, .saved-note p, .position, .counts>div, .progress-ring>div>span, footer, .empty p, .swipe-hint, #keyboard-note { color: var(--muted); }
.counts strong, .learning-note p { color: var(--ink); }
.progress-panel, .progress-ring>div, .empty { background: var(--surface); }
.progress-panel, .empty { border-color: var(--line); box-shadow: var(--soft-shadow); }
.progress-ring { background: conic-gradient(var(--blue) 0%, var(--ring-track) 0%); }
.progress-panel>p strong, footer a { color: var(--blue); }
.review-dot { background: #d59a24; }
.new-dot { background: var(--muted); }
.intro .collection-label { color: var(--blue); }
.tabs { background: var(--surface-soft); }
.tab { color: var(--muted); background: transparent; }
.tab.active { color: var(--blue); background: var(--surface); box-shadow: 0 2px 6px #26154412; }
.tab span { background: var(--ring-track); color: var(--blue); }
.icon-button { color: var(--blue); background: var(--surface); border-color: var(--line); }
.icon-button:hover, .face-toggle[aria-pressed=true] { color: var(--blue); background: var(--ring-track); border-color: var(--blue); }
.face-toggle { color: var(--blue); }
.flashcard { background: transparent; color: var(--ink); }
.face { box-shadow: var(--card-elevation); }
.front { background: var(--card-front); border-color: var(--card-front-line); }
.back { background: var(--card-blue); color: #fff; border: 1px solid var(--card-blue); }
.card-shadow { background: var(--card-shadow); border: 1px solid var(--card-shadow-line); box-shadow: var(--soft-shadow); }
.front .card-lang, .front .example>span, .front .card-bottom { color: var(--muted); }
.status-badge { color: var(--blue); background: var(--ring-track); border-color: transparent; }
.pos { color: var(--blue); background: var(--ring-track); }
.back .pos { background: #ffffff1c; color: var(--card-blue-text); }
.back .card-lang, .back .card-bottom, .back-label, .back .example>span { color: var(--card-blue-text); }
.front .example strong { color: var(--blue); text-decoration-color: var(--blue); }
.back .example p, .back .example strong { color: #fff; }
.back .example strong { text-decoration-color: #ffdc7f; text-decoration-thickness: 2px; }
.example { scrollbar-color: var(--line) transparent; }
.primary, .learned-button { background: var(--learned-bg); color: var(--learned-text); border-color: var(--learned-bg); }
.primary:hover, .learned-button:hover { background: var(--learned-hover); border-color: var(--learned-hover); }
.primary:active, .learned-button:active { background: var(--learned-active); border-color: var(--learned-active); }
.review-button { background: var(--review-bg); color: var(--review-text); border-color: var(--review-line); }
.review-button:hover { background: var(--review-hover); }
.review-button:active { background: var(--review-active); }
.text-button { background: transparent; color: var(--muted); }
.text-button:hover, .flip-button { color: var(--blue); }
kbd { background: var(--surface); color: var(--muted); border-color: var(--line); }
.actions kbd { color: inherit; background: transparent; border-color: currentColor; }
.learning-note .note-number { color: var(--blue); }
.learning-note li:nth-child(2) .note-number { color: var(--muted); }
.learning-note li:nth-child(3) .note-number { color: var(--review-text); }
.message { color: var(--review-text); background: var(--review-bg); border-color: var(--review-line); }
.empty-symbol { color: var(--blue); background: var(--ring-track); }
::selection { color: var(--ink); background: var(--ring-track); }
.reset-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:42px;
  margin-top:20px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--surface-soft);
  color:var(--muted);
  font:inherit;
  font-size:13px;
  cursor:pointer;
  grid-column:1 / -1;
}
.reset-button svg { width:17px; height:17px; flex-shrink:0; }
.reset-button:hover:not(:disabled) { color:var(--blue); border-color:var(--blue); }
.reset-button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.reset-button:disabled { opacity:.5; cursor:default; }