/* Dr. Kani — unofficial WaniKani client. WK-inspired styling, mobile-first.
 *
 * Theming: every color lives in a CSS variable. Brand / subject-type / SRS
 * colors are canonical WaniKani values (verified against Smouldering Durtles'
 * ActiveTheme.java, which tracks WaniKani's own palette) and stay identical in
 * both themes; only surfaces adapt.
 *   radical blue  #0098F0 | kanji pink #E80092 | vocab purple #9808F3
 *   header/brand pink #f100a1
 *   SRS: apprentice #D80088, guru #7D2893, master #2344D6,
 *        enlightened #0094EB, burned #444444
 *
 * Appearance (Settings → Appearance): system (default), light, dark.
 * System = follow prefers-color-scheme, live, via the media query below.
 * The app sets data-theme="light"|"dark" on <html>; no attribute = system.
 *
 * Overflow discipline (do not regress): the whole app must never pan
 * horizontally, and dragging the pink top bar must not move the page.
 *   html, body          -> overflow-x: hidden
 *   body, .app-header   -> touch-action: pan-y (vertical scroll only)
 *   flex children       -> min-width: 0 so inputs can't force overflow
 */

/* ---------- canonical WaniKani palette (theme-independent) ---------- */
:root {
  --brand: #f100a1;       /* header pink / primary accent */
  --brand-dark: #d1008c;
  --c-radical: #0098F0;   /* radical blue */
  --c-kanji: #E80092;     /* kanji pink/magenta */
  --c-vocab: #9808F3;     /* vocabulary purple (kana_vocabulary too) */
  --srs-apprentice: #D80088;
  --srs-guru: #7D2893;
  --srs-master: #2344D6;
  --srs-enlightened: #0094EB;
  --srs-burned: #444444;
  --ok: #2ecc71;
  --bad: #e74c3c;
  --warn: #f39c12;
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  /* Japanese-first system CJK stack for kanji/kana display (no webfont).
   * Mirrors WaniKani's classic system stack; lang="ja" on the elements picks
   * Japanese glyph variants (fixes Han-unification "blocky" look). */
  --font-jp: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3",
    "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, メイリオ,
    "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", YuGothic, Osaka,
    "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
}

/* ---------- light theme (default + explicit) ---------- */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f6;
  --card: #ffffff;
  --line: #e3e3e8;
  --ink: #1d1d1f;
  --muted: #6e6e73;
  --surface-2: #ececf0;   /* ghost buttons, chips tracks */
  --surface-3: #f0f0f4;   /* progress tracks, bar backgrounds */
  --input-bg: #ffffff;
  --input-fg: #1d1d1f;
  --input-bd: #d5d5dc;
  --link: #0098F0;
  --info-blue: #0098F0;
  --info-pink: #E80092;
  --b-off-bg: #fff3e0; --b-off-fg: #8a5a00; --b-off-bd: #f0d9a8;
  --b-demo-bg: #e8f4fd; --b-demo-fg: #0b5fa5; --b-demo-bd: #bfe0f5;
  --b-queue-bg: #f3e8fd; --b-queue-fg: #6a2fb3; --b-queue-bd: #dcc6f5;
  --b-level-bg: #e8f9f0; --b-level-fg: #0c6b3f; --b-level-bd: #b7e6cd;
}

/* ---------- dark theme (explicit) ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141417;
  --card: #1e1e23;
  --line: #323239;
  --ink: #f2f2f6;
  --muted: #a2a2ac;
  --surface-2: #2b2b32;
  --surface-3: #26262c;
  --input-bg: #2e2e35;
  --input-fg: #ffffff;
  --input-bd: #4a4a53;
  --link: #6ec1f5;
  --info-blue: #8ecdf5;
  --info-pink: #f7a8d8;
  --b-off-bg: #3a2b10; --b-off-fg: #ffd98a; --b-off-bd: #6b4d16;
  --b-demo-bg: #0e2f4a; --b-demo-fg: #9fd4f5; --b-demo-bd: #1d5a86;
  --b-queue-bg: #2c1a44; --b-queue-fg: #d3b8f5; --b-queue-bd: #5a3390;
  --b-level-bg: #0d3a24; --b-level-fg: #9fe8c3; --b-level-bd: #1c6b41;
}

/* ---------- dark theme (system) — live via media query, no JS needed ---------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --bg: #141417;
    --card: #1e1e23;
    --line: #323239;
    --ink: #f2f2f6;
    --muted: #a2a2ac;
    --surface-2: #2b2b32;
    --surface-3: #26262c;
    --input-bg: #2e2e35;
    --input-fg: #ffffff;
    --input-bd: #4a4a53;
    --link: #6ec1f5;
    --info-blue: #8ecdf5;
    --info-pink: #f7a8d8;
    --b-off-bg: #3a2b10; --b-off-fg: #ffd98a; --b-off-bd: #6b4d16;
    --b-demo-bg: #0e2f4a; --b-demo-fg: #9fd4f5; --b-demo-bd: #1d5a86;
    --b-queue-bg: #2c1a44; --b-queue-fg: #d3b8f5; --b-queue-bd: #5a3390;
    --b-level-bg: #0d3a24; --b-level-fg: #9fe8c3; --b-level-bd: #1c6b41;
  }
}
html:not([data-theme]) { color-scheme: light; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  touch-action: pan-y;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

/* ---------- header ---------- */
.app-header {
  background: var(--brand);
  position: sticky;
  top: 0;
  z-index: 20;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.app-header .inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo { text-decoration: none; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.logo .crab { font-size: 26px; }
.logo .name { color: #fff; font-weight: 800; font-size: 22px; letter-spacing: -0.5px; }
.nav { margin-left: auto; display: flex; gap: 2px; min-width: 0; }
.nav a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 8px;
  opacity: 0.85;
  white-space: nowrap;
}
.nav a.active, .nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.22); }
.net-dot { width: 10px; height: 10px; border-radius: 50%; background: #7dff9b; flex: none; }
.net-dot.off { background: #ffd23f; }

/* ---------- banners ---------- */
.banner {
  max-width: 720px;
  margin: 12px auto 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
}
.banner.offline { background: var(--b-off-bg); color: var(--b-off-fg); border: 1px solid var(--b-off-bd); }
.banner.demo { background: var(--b-demo-bg); color: var(--b-demo-fg); border: 1px solid var(--b-demo-bd); }
.banner.queued { background: var(--b-queue-bg); color: var(--b-queue-fg); border: 1px solid var(--b-queue-bd); }
.banner.levelup {
  background: var(--b-level-bg);
  border: 1px solid var(--b-level-bd);
  color: var(--b-level-fg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.banner.levelup .lvl-ja { font-size: 17px; font-weight: 800; }
.banner.levelup .lvl-en { font-size: 13px; }
.banner.levelup .lvl-x {
  margin-left: auto; border: none; background: none; color: inherit;
  font-size: 16px; cursor: pointer; padding: 4px 8px;
}
.banner.premium {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--c-radical); color: #fff; text-decoration: none;
  border: 1px solid var(--c-radical);
}
.banner.premium .lock { font-size: 16px; }
.banner.premium .chev { font-weight: 800; }

/* ---------- layout ---------- */
.page { max-width: 720px; margin: 0 auto; padding: 16px; width: 100%; flex: 1; }
.page h1 { font-size: 24px; margin: 4px 0 14px; }
.page h2 { font-size: 18px; margin: 20px 0 10px; }
.muted { color: var(--muted); font-size: 14px; }
/* Explanatory empty state under dashboard stats cards (never a bare 0). */
.card-hint { font-size: 12px; color: var(--muted); margin: 8px 0 0; line-height: 1.45; }

.dash { max-width: 720px; margin: 0 auto; padding: 12px 12px 8px; width: 100%; flex: 1; }
.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card-title { font-size: 15px; font-weight: 700; }
.card-title.light { color: #fff; }
.card-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.see { color: var(--link); font-size: 13px; font-weight: 700; text-decoration: none; }

/* ---------- lesson/review count cards ---------- */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.count-card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 14px 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
.count-card:active { transform: scale(0.98); }
.count-card .num { font-size: 44px; font-weight: 800; line-height: 1.1; }
.count-card.lessons .num { color: var(--brand); }
.count-card.reviews .num { color: var(--link); }
.count-card .label { font-size: 13px; color: var(--muted); font-weight: 700; }
.count-card .sub2 { font-size: 12px; color: var(--muted); margin-top: 4px; min-height: 16px; }

/* ---------- forecast ---------- */
.forecast .fc-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.forecast .fc-head span:first-child { font-weight: 700; font-size: 14px; }
.forecast .fc-total { color: var(--brand); font-weight: 800; font-size: 14px; }
.fc-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.fc-day { width: 38px; font-size: 13px; color: var(--muted); font-weight: 700; flex: none; }
.fc-bar { flex: 1; min-width: 0; height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.fc-bar > div { height: 100%; background: var(--ok); border-radius: 5px; }
.fc-n { font-size: 12px; color: var(--muted); flex: none; min-width: 64px; text-align: right; }

/* ---------- week strip ---------- */
.week-strip {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin-bottom: 12px;
}
.ws-cell {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 2px; text-align: center;
}
.ws-cell.today { border: 2px solid var(--brand); }
.ws-day { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.ws-cell.today .ws-day { color: var(--brand); }
.ws-icon { font-size: 20px; display: block; margin-top: 2px; }

/* ---------- streak ---------- */
.streak-top { display: flex; justify-content: space-between; align-items: flex-start; }
.streak-big { font-size: 44px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.streak-big span, .streak-best-n span { font-size: 20px; font-weight: 700; }
.streak-best { text-align: right; }
.streak-best-n { font-size: 28px; font-weight: 800; }
.offerings { margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.offer-label { font-size: 13px; color: var(--muted); font-weight: 700; margin-right: 4px; }
.offer-star { font-size: 22px; filter: grayscale(0); }
.offer-star:not(.on) { filter: grayscale(1); opacity: 0.45; }

/* ---------- reviews completed ---------- */
.done-count { text-align: center; }
.done-big { font-size: 52px; font-weight: 800; line-height: 1.1; }
.done-today { font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.done-yday { font-size: 13px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- recent mistakes ---------- */
.mistake-btns { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.mistake-btns .btn { flex: 1; padding: 10px 12px; font-size: 14px; white-space: nowrap; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- learning zone ---------- */
.zone { text-align: center; }
.zone-head { font-size: 17px; font-weight: 800; margin-bottom: 8px; }
.zone-big { font-size: 46px; font-weight: 800; color: var(--brand); line-height: 1.1; }
.zone-prev { font-size: 13px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* ---------- level progress ---------- */
.lp-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 4px; font-size: 16px; font-weight: 800; }
.lp-arrow {
  border: 1px solid var(--line); background: var(--card); border-radius: 8px;
  width: 34px; height: 30px; font-size: 16px; font-weight: 800; cursor: pointer; color: var(--brand);
}
.lp-arrow.off { opacity: 0.3; cursor: default; }
.lp-row {
  display: block; margin: 4px -8px; padding: 6px 8px; border-radius: 10px;
  color: inherit; text-decoration: none; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.lp-row:active { background: var(--surface-2); }
.lp-row:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.lp-info { display: flex; justify-content: space-between; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.lp-n { color: var(--muted); }
.lp-bar { height: 10px; background: var(--surface-3); border-radius: 5px; overflow: hidden; }
.lp-bar > div { height: 100%; border-radius: 5px; }
.lp-row.t-radical .lp-bar > div { background: var(--c-radical); }
.lp-row.t-kanji .lp-bar > div { background: var(--c-kanji); }
.lp-row.t-vocabulary .lp-bar > div { background: var(--c-vocab); }
.lp-see { display: block; text-align: right; color: var(--link); font-size: 12px; font-weight: 700; text-decoration: none; margin-top: 3px; }
.lp-foot { font-size: 13px; color: var(--muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.lp-foot.good { color: var(--ok); font-weight: 700; }

/* ---------- JLPT progress + critical condition ---------- */
.jlpt-row {
  display: grid; grid-template-columns: 2.4em repeat(4, 1fr);
  gap: 4px; padding: 5px 0; font-size: 14px; text-align: right;
}
.jlpt-row > span:first-child { text-align: left; }
.jlpt-head { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.jlpt-lv { font-weight: 800; }
.jlpt .card-sub { margin-top: 8px; }
.critical .lesson-list { margin-top: 8px; }
.cc-acc { font-weight: 800; color: var(--brand); font-size: 14px; margin-left: auto; }

/* ---------- SRS spread (vertical bars) ---------- */
.spread-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.vbars { display: flex; align-items: flex-end; gap: 4px; height: 150px; }
.vb { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.vb-col { width: 70%; max-width: 34px; height: 110px; background: var(--surface-3); border-radius: 4px 4px 0 0; position: relative; overflow: hidden; display: flex; align-items: flex-end; }
.vb-fill { width: 100%; }
.vb:nth-child(-n+4) .vb-fill { background: var(--srs-apprentice); }
.vb:nth-child(n+5):nth-child(-n+6) .vb-fill { background: var(--srs-guru); }
.vb:nth-child(7) .vb-fill { background: var(--srs-master); }
.vb:nth-child(8) .vb-fill { background: var(--srs-enlightened); }
.vb:nth-child(9) .vb-fill { background: var(--srs-burned); }
.vb-n { font-size: 11px; font-weight: 800; margin-top: 3px; }
.vb-l { font-size: 9px; color: var(--muted); font-weight: 700; }

/* ---------- total days studied ---------- */
.totaldays { background: #232326; border-color: #232326; text-align: center; }
.flips { display: flex; justify-content: center; gap: 6px; margin: 10px 0; }
.flip {
  background: #3a3a40; color: #fff; font-size: 34px; font-weight: 800;
  border-radius: 8px; padding: 8px 12px; border-bottom: 3px solid #17171a;
}
.totaldays .since { color: #bbb; font-size: 13px; }

/* ---------- community ---------- */
.community .see { display: inline-block; margin-top: 8px; }

/* ---------- footer ---------- */
.app-footer { text-align: center; padding: 20px 16px 28px; }
.foot-name { font-size: 12px; color: var(--muted); }
.foot-links { margin-top: 8px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.foot-links a { color: var(--link); font-size: 13px; font-weight: 600; text-decoration: none; }
.foot-sync { font-size: 12px; color: var(--muted); margin-top: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.btn.primary { background: var(--brand); color: #fff; }
.btn.blue { background: var(--c-radical); color: #fff; }
.btn.ghost { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.block { display: block; width: 100%; margin-top: 12px; }
.btn:disabled { opacity: 0.45; cursor: default; }

/* ---------- empty state ---------- */
.empty-state { text-align: center; padding: 48px 20px; }
.empty-state .crab { font-size: 56px; }
.empty-state h1 { font-size: 24px; }
.empty-state .btn { margin-top: 16px; }

/* ---------- subject chips (canonical type colors) ---------- */
.chip {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 20px;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  min-width: 44px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-jp);
}
a.chip { cursor: pointer; }
.chip.radical { background: var(--c-radical); }
.chip.kanji { background: var(--c-kanji); }
.chip.vocabulary, .chip.kana_vocabulary { background: var(--c-vocab); }

/* ---------- lesson picker: batch-first ---------- */
.batch-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin: 14px 0;
  text-align: center;
}
.batch-hero h2 { margin: 0 0 4px; }
.batch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 18px;
}
.batch-chips .chip { font-size: 24px; padding: 8px 14px; font-weight: 400; line-height: 1.25; }
.muted.tiny { font-size: 12px; }
.cap-hit h2 { color: var(--brand); }
.extra-tag {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
  background: var(--c-vocab); color: #fff; border-radius: 6px; padding: 4px 8px;
}

/* ---------- type-colored question panel (reviews + lessons) ----------
 * The question area background is the item-type color, like WaniKani /
 * Smouldering Durtles, so the expected answer type is instantly recognizable:
 * blue = radical, pink = kanji, purple = vocabulary. */
.qpanel {
  width: 100%;
  flex: none;
  border-radius: 14px;
  padding: 20px 12px 16px;
  margin: 0 0 14px;
  color: #fff;
  text-align: center;
}
.qpanel.q-radical { background: var(--c-radical); }
.qpanel.q-kanji { background: var(--c-kanji); }
.qpanel.q-vocabulary { background: var(--c-vocab); }
.qpanel .prompt-label { color: rgba(255, 255, 255, 0.88); }
.qpanel .char-sub { color: rgba(255, 255, 255, 0.88); }

/* ---------- review screen ----------
 * Locked-in-place layout: the review screen is a fixed, non-scrolling layer
 * sized to the dynamic viewport (100dvh shrinks when the keyboard opens on
 * mobile, thanks to interactive-widget=resizes-content in index.html), so the
 * question panel and progress bar stay pinned at the top and never jump when
 * the answer box is tapped. The item-info detail scrolls inside the screen
 * instead of moving the page. */
.review-wrap {
  background: var(--bg);
  color: var(--ink);
  position: fixed;
  inset: 0;
  height: 100vh; /* fallback for older browsers */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.review-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  flex: none;
}
.review-progress { flex: 1; min-width: 0; height: 8px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.review-progress > div { height: 100%; background: var(--brand); width: 0%; transition: width 0.25s; }
.review-count { font-size: 14px; color: var(--muted); font-weight: 700; }
.review-quit, .review-wrapup {
  background: var(--surface-2); color: var(--ink); border: none; border-radius: 8px;
  padding: 8px 12px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--font);
}
.review-card {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 12px 16px 24px;
  overflow-y: auto;
}
.prompt-label {
  font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted); margin-bottom: 6px;
}
.char-display {
  font-family: var(--font-jp);
  font-size: 96px; line-height: 1.15; font-weight: 400; text-align: center;
  margin: 8px 0 4px; word-break: break-word;
}
.char-display img { max-width: 200px; max-height: 200px; }
.char-sub { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.answer-zone { width: 100%; max-width: 480px; flex: none; }
.answer-input {
  width: 100%;
  min-width: 0;
  background: var(--input-bg);
  border: 2px solid var(--input-bd);
  border-radius: 10px;
  color: var(--input-fg);
  font-size: 26px;
  padding: 14px 16px;
  text-align: center;
  font-family: var(--font);
  outline: none;
}
.answer-input:focus { border-color: var(--brand); }
.answer-input:disabled { opacity: 0.75; }
.feedback { text-align: center; font-size: 16px; font-weight: 700; min-height: 26px; margin-top: 8px; }
.feedback.ok { color: var(--ok); }
.feedback.no { color: var(--bad); }
.feedback .ans-primary { display: block; font-weight: 800; }
.feedback .ans-secondary { display: block; color: var(--muted); font-size: 14px; font-weight: 600; margin-top: 2px; }
.feedback .ans-note { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-top: 2px; }
.feedback.shake-hint { color: var(--warn); }
.srs-change {
  width: 100%; max-width: 480px; margin: 12px auto 0; padding: 10px 14px;
  border-radius: 12px; text-align: center; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink);
}
.srs-change.up { background: rgba(46, 204, 113, 0.16); border-color: rgba(46, 204, 113, 0.45); }
.srs-change.down { background: rgba(231, 76, 60, 0.12); border-color: rgba(231, 76, 60, 0.35); }
.srs-change-head { display: block; font-size: 16px; font-weight: 900; letter-spacing: 0.2px; }
.srs-change-path { display: block; margin-top: 2px; font-size: 14px; font-weight: 700; color: var(--muted); }
.srs-change.master { padding: 14px 16px; background: linear-gradient(135deg, rgba(241, 196, 15, 0.28), rgba(46, 204, 113, 0.18)); border-color: rgba(241, 196, 15, 0.65); }
.srs-change.master .srs-change-head { font-size: 22px; }
.srs-change.master .srs-change-path { font-size: 15px; color: var(--ink); }
button.chip.component-chip { border: none; cursor: pointer; font-family: var(--font-jp); font-weight: 400; }
button.chip.component-chip:active { transform: scale(0.96); }
button.chip.component-chip.active { outline: 3px solid rgba(0, 0, 0, 0.18); outline-offset: 2px; }
.component-detail {
  margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2);
}
.component-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.component-detail-title { font-weight: 800; }
.component-detail .lesson-section:first-of-type { margin-top: 8px; }

/* post-answer controls: explicit Next + item info (no auto-advance) */
.ans-controls {
  display: flex; gap: 10px; align-items: stretch; flex: none;
  width: 100%; max-width: 480px; margin: 12px auto 0;
}
.ans-controls .ans-next { flex: 1; min-width: 0; }
.ans-controls .ans-undo { flex: none; white-space: nowrap; padding: 12px 14px; }
.ans-controls .ans-info {
  flex: none; font-size: 22px; line-height: 1; padding: 12px 16px;
}
.ans-controls .ans-audio {
  flex: none; font-size: 22px; line-height: 1; padding: 12px 16px;
}
/* speaker button: pronunciation audio (lessons, item info, post-answer) */
.speaker-btn {
  background: rgba(255, 255, 255, 0.22); border: none; border-radius: 50%;
  width: 46px; height: 46px; font-size: 22px; line-height: 1; cursor: pointer;
  margin-top: 10px; color: #fff;
}
.speaker-btn:active { transform: scale(0.93); }
.speaker-btn.small {
  width: 30px; height: 30px; font-size: 15px; margin: 0 0 0 6px;
  background: var(--surface-2); color: var(--ink);
  vertical-align: middle;
}
.lesson-section h3 .speaker-btn.small { margin-top: 0; }
/* settings checkbox rows */
label.check {
  display: flex; gap: 10px; align-items: center;
  font-weight: 600; font-size: 15px; cursor: pointer;
}
label.check input[type="checkbox"] { width: 20px; height: 20px; flex: none; }
.ans-detail {
  width: 100%; max-width: 480px; margin: 12px auto 0;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 4px 16px 14px; text-align: left;
}
.ans-detail .lesson-section:first-child { margin-top: 10px; }
.ans-meanings { font-size: 20px; font-weight: 700; }

@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-10px); }
  40%, 80% { transform: translateX(10px); }
}
.shake { animation: shakeX 0.4s; }
@keyframes flashOk { 0% { background: rgba(46, 204, 113, 0.45); } 100% { background: transparent; } }
@keyframes flashNo { 0% { background: rgba(231, 76, 60, 0.45); } 100% { background: transparent; } }
.flash-ok { animation: flashOk 0.6s; border-radius: 12px; }
.flash-no { animation: flashNo 0.6s; border-radius: 12px; }

.review-done { text-align: center; padding: 40px 20px; }
.review-done h1 { font-size: 28px; }
.missed-list { text-align: left; max-width: 480px; margin: 16px auto; }
.missed-item { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.missed-item .chars { font-size: 26px; font-family: var(--font-jp); }
.missed-item .info { font-size: 14px; color: var(--muted); }

/* ---------- lessons ---------- */
.lesson-list { display: flex; flex-direction: column; gap: 8px; }
.lesson-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; cursor: pointer;
  text-decoration: none; color: inherit;
}
.lesson-row.link { display: flex; }
.lesson-row .chars { font-size: 26px; font-weight: 400; min-width: 52px; text-align: center; font-family: var(--font-jp); }
.lesson-row .meta { font-size: 14px; min-width: 0; }
.lesson-row .meta .t { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* expandable level-item rows: tap to open the definition card in place */
.item-wrap { display: flex; flex-direction: column; }
button.lesson-row.item-row {
  width: 100%; font: inherit; color: inherit; text-align: left;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
button.lesson-row.item-row:active,
button.lesson-row.item-row.active { background: var(--surface-2); }
button.lesson-row.item-row:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.item-row .meta { flex: 1; }
.item-chevron { color: var(--muted); font-size: 14px; line-height: 1; transition: transform 0.15s ease; }
.item-row.active .item-chevron { transform: rotate(90deg); }
.item-detail {
  margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2);
}
.item-detail .lesson-section:first-of-type { margin-top: 8px; }

.lesson-page { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 16px; }
.lesson-page .qpanel { margin-bottom: 4px; }
.lesson-page .big-char { font-family: var(--font-jp); font-size: 84px; line-height: 1.15; text-align: center; font-weight: 400; }
.lesson-page .big-char img { max-width: 180px; max-height: 180px; }
.lesson-section { margin-top: 18px; }
.lesson-section h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 0 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.reading-row { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 17px; font-family: var(--font-jp); }
.badge-primary { font-size: 11px; background: var(--brand); color: #fff; border-radius: 4px; padding: 2px 6px; font-weight: 700; text-transform: uppercase; }
.mnemonic { font-size: 15px; line-height: 1.55; }
.mnemonic em { font-style: italic; }
.mnemonic reading, .mnemonic kanji, .mnemonic radical, .mnemonic vocabulary, .mnemonic ja {
  font-weight: 700;
}
/* mnemonic inline highlights follow subject-type colors (like WaniKani) */
.mnemonic radical { color: var(--c-radical); }
.mnemonic kanji { color: var(--c-kanji); }
.mnemonic vocabulary { color: var(--c-vocab); }
.mnemonic.t-radical reading { color: var(--c-radical); }
.mnemonic.t-kanji reading { color: var(--c-kanji); }
.mnemonic.t-vocabulary reading { color: var(--c-vocab); }
.context-ja { font-size: 16px; margin: 8px 0 2px; font-family: var(--font-jp); }
.context-en { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.lesson-nav { display: flex; gap: 10px; margin-top: 20px; }
.lesson-nav .btn { flex: 1; min-width: 0; }

/* ---------- SRS grid (detail page) ---------- */
.srs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.srs-cell { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 4px; text-align: center; }
.srs-cell .n { font-size: 20px; font-weight: 800; }
.srs-cell .l { font-size: 10px; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.srs-cell.apprentice .n { color: var(--srs-apprentice); }
.srs-cell.guru .n { color: var(--srs-guru); }
.srs-cell.master .n { color: var(--srs-master); }
.srs-cell.enlightened .n { color: var(--srs-enlightened); }
.srs-cell.burned .n { color: var(--srs-burned); }

/* ---------- settings / forms ---------- */
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; margin-bottom: 14px; }
.form-card h2 { margin-top: 0; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.field input[type="password"], .field input[type="text"], .field input[type="number"], .field select {
  width: 100%; min-width: 0; font-size: 16px; padding: 12px; border: 1px solid var(--input-bd);
  border-radius: 8px; font-family: var(--font); background: var(--input-bg); color: var(--input-fg);
}
.token-row { display: flex; gap: 8px; }
.token-row input { flex: 1; min-width: 0; }
.hint { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.hint a { color: var(--link); }

.setup-hero { text-align: center; padding: 32px 16px; }
.setup-hero .crab { font-size: 64px; }
.setup-steps { text-align: left; max-width: 480px; margin: 0 auto 20px; font-size: 15px; line-height: 1.7; }
.setup-steps ol { padding-left: 22px; }

.spinner { display: inline-block; width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; vertical-align: -4px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .char-display { font-size: 76px; }
  .answer-input { font-size: 22px; }
  .nav a { padding: 8px 6px; font-size: 13px; }
  .srs-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .srs-cell .n { font-size: 16px; }
}