/* ===== THEME SYSTEM ===== */
:root, :root[data-theme="dark"] {
  --bg: #1a1a2e;
  --bg2: #16213e;
  --bg3: #0f3460;
  --text: #eee;
  --text-dim: #aab;
  --text-strong: #fff;
  --radical: #00aaff;
  --kanji: #ff00aa;
  --vocab: #aa00ff;
  --radical-bg: #00aaff22;
  --kanji-bg: #ff00aa22;
  --vocab-bg: #aa00ff22;
  --correct: #00cc66;
  --incorrect: #ff4444;
  --guru: #882d9e;
  --master: #294ddb;
  --enlightened: #0093dd;
  --burned: #434343;
  --apprentice: #dd0093;
  --lesson: #00aaff;

  /* Semantic tokens */
  --card-bg: #1e2a45;
  --card-border: #ffffff10;
  --card-shadow: rgba(0,0,0,0.3);
  --input-bg: #1a1a2e;
  --input-border: #ffffff20;
  --surface: #1e2a45;
  --surface2: #243050;
  --surface-border: #ffffff10;
  --mnemonic-bg: #1e2a45;
  --mnemonic-text: #ccd;
  --hint-bg: #1e2a45;
  --hint-border: #ffffff15;
  --hint-text: #aab;
  --modal-bg: #1e2a45;
  --modal-text: #eee;
  --modal-dim: #aab;
  --section-border: #ffffff10;
  --reading-card-bg: #243050;
  --reading-card-border: #ffffff15;
  --reading-text: #eee;
  --context-bg: #243050;
  --context-border: #ffffff10;
  --context-text: #eee;
  --context-dim: #aab;
  --speech-bg: #243050;
  --speech-text: #aab;
  --srs-bar-bg: #243050;
  --srs-label: #aab;
  --srs-value: #eee;
  --similar-text: #eee;
  --nav-border: #ffffff15;
  --dash-bg: #111827;
  --dash-card-bg: #1e2a45;
  --dash-card-title: #8899bb;
  --dash-card-main: #eee;
  --dash-card-sub: #8899bb;
  --dash-done-badge-bg: #243050;
  --dash-done-badge-text: #667;
  --forecast-bar-bg: #243050;
  --forecast-day: #8899bb;
  --forecast-total: #8899bb;
  --lp-title: #eee;
  --lp-level: #eee;
  --lp-subtitle: #8899bb;
  --lp-subtitle-strong: #eee;
  --lp-type-border: #ffffff10;
  --lp-type-name: #8899bb;
  --lp-type-count: #eee;
  --lp-type-seeall: #667;
  --lp-message-bg: #243050;
  --lp-message-text: #8899bb;
  --is-table-border: #ffffff10;
  --is-table-th: #667;
  --is-row-text: #aab;
  --is-total: #aab;
  --is-pill-zero-bg: #333;
  --is-pill-zero-text: #666;
  --srs-strip-bg: #1e2a45;
  --srs-strip-label: #667;
  --progress-locked-bg: #333;
  --progress-locked-text: #555;
  --answer-border-bottom: #ffffff15;
  --wrong-study-border: #4a2020;
  --wrong-section-bg: #1e2a45;
  --wrong-section-border: #ffffff10;
  --wrong-label: #8899bb;
  --wrong-value: #eee;
  --wrong-mnemonic: #aab;
  --fi-bg: #1e2a45;
  --fi-border: #ffffff10;
  --fi-section-border: #ffffff15;
  --fi-title: #8899bb;
  --fi-value: #eee;
  --fi-label: #667;
  --fi-mnemonic: #aab;
  --answer-info-bg: #243050;
  --answer-info-border: #ffffff15;
  --answer-info-text: #aab;
  --answer-info-active-bg: #1a2e50;
  --answer-info-active-border: var(--radical);
  --answer-info-active-text: var(--radical);
  --key-hint-bg: rgba(255,255,255,0.1);
  --shortcut-text: #8899bb;
  --scrollbar-thumb: #ffffff20;
  --kbd-bg: #ffffff25;
  --kbd-border: #ffffff20;
  --correct-bg: #00cc6615;
  --incorrect-bg: #ff444415;
  --correct-bg-strong: #00cc6633;
  --incorrect-bg-strong: #ff444433;
  --correct-input: #88cc00;
  --incorrect-input: #ff0033;
}

:root[data-theme="light"] {
  --bg: #e8e8e8;
  --bg2: #ffffff;
  --bg3: #dce4ef;
  --text: #333;
  --text-dim: #777;
  --text-strong: #111;

  /* Semantic tokens */
  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,0.08);
  --card-shadow: rgba(0,0,0,0.08);
  --input-bg: #ffffff;
  --input-border: #ddd;
  --surface: #f7f7f7;
  --surface2: #f0f0f0;
  --surface-border: #eee;
  --mnemonic-bg: #f9f9f9;
  --mnemonic-text: #555;
  --hint-bg: #f5f5f5;
  --hint-border: #e0e0e0;
  --hint-text: #666;
  --modal-bg: #ffffff;
  --modal-text: #333;
  --modal-dim: #999;
  --section-border: #eee;
  --reading-card-bg: #f7f7f7;
  --reading-card-border: #e5e5e5;
  --reading-text: #333;
  --context-bg: #f9f9f9;
  --context-border: #eee;
  --context-text: #333;
  --context-dim: #999;
  --speech-bg: #f0f0f0;
  --speech-text: #666;
  --srs-bar-bg: #f7f7f7;
  --srs-label: #999;
  --srs-value: #333;
  --similar-text: #333;
  --nav-border: rgba(0,0,0,0.08);
  --dash-bg: #e8e8e8;
  --dash-card-bg: #ffffff;
  --dash-card-title: #999;
  --dash-card-main: #333;
  --dash-card-sub: #aaa;
  --dash-done-badge-bg: #e8e8e8;
  --dash-done-badge-text: #999;
  --forecast-bar-bg: #f0f0f0;
  --forecast-day: #999;
  --forecast-total: #888;
  --lp-title: #333;
  --lp-level: #333;
  --lp-subtitle: #888;
  --lp-subtitle-strong: #333;
  --lp-type-border: #eee;
  --lp-type-name: #666;
  --lp-type-count: #333;
  --lp-type-seeall: #aaa;
  --lp-message-bg: #f5f5f5;
  --lp-message-text: #666;
  --is-table-border: #f0f0f0;
  --is-table-th: #bbb;
  --is-row-text: #555;
  --is-total: #555;
  --is-pill-zero-bg: #ddd;
  --is-pill-zero-text: #999;
  --srs-strip-bg: #ffffff;
  --srs-strip-label: #999;
  --progress-locked-bg: #e0e0e0;
  --progress-locked-text: #bbb;
  --answer-border-bottom: #f0f0f0;
  --wrong-study-border: #fee;
  --wrong-section-bg: #fafafa;
  --wrong-section-border: #ddd;
  --wrong-label: #999;
  --wrong-value: #333;
  --wrong-mnemonic: #555;
  --fi-bg: #f8f9fa;
  --fi-border: #e8e8e8;
  --fi-section-border: #e0e0e0;
  --fi-title: #999;
  --fi-value: #333;
  --fi-label: #aaa;
  --fi-mnemonic: #555;
  --answer-info-bg: #f0f0f0;
  --answer-info-border: #ddd;
  --answer-info-text: #555;
  --answer-info-active-bg: #e0eeff;
  --answer-info-active-border: var(--radical);
  --answer-info-active-text: var(--radical);
  --key-hint-bg: rgba(0,0,0,0.08);
  --shortcut-text: #666;
  --scrollbar-thumb: #00000020;
  --kbd-bg: rgba(0,0,0,0.08);
  --kbd-border: rgba(0,0,0,0.12);
  --correct-bg: #00cc6618;
  --incorrect-bg: #ff444418;
  --correct-bg-strong: #00cc6628;
  --incorrect-bg-strong: #ff444428;
  --correct-input: #88cc00;
  --incorrect-input: #ff0033;
}

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

/* Inline SVG icons */
.icon { width: 1.1em; height: 1.1em; vertical-align: -0.2em; flex-shrink: 0; }
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  font-size: 16px;
  transition: background 0.3s, color 0.3s;
}
nav, .dashboard, .dash-card, .level-progress-card, .item-spread-card,
.srs-strip-box, .modal, .wk-content, .session-answer, .lesson-info,
.setting-group, .level-tile, .session-input, .full-item-info,
.item-tile, .progress-item, .wk-reading-card, .wk-hint, .wk-context,
.wk-audio-btn, .wk-similar-badge, .wk-srs-bar, .wk-speech-type,
.answer-info-btn, .answer-mnemonic, .wrong-study-section,
.fi-section, .btn, .nav-link, .level-badge, .session-dot,
.shortcut-hints, kbd, .wk-mnemonic, .wk-section, .lp-type-box,
.lp-message, .is-row, .forecast-row, .session-card, .answer-content,
.correct-answer, .wrong-study-header,
.quiz-screen, .quiz-input, .quiz-toolbar button, .quiz-item-info,
.quiz-answer-line {
  transition: background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Loading Screen */
#loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  gap: 24px;
}
#loading .spinner {
  width: 70px; height: 70px;
  border: 5px solid var(--bg3);
  border-top: 5px solid var(--radical);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Navigation */
nav {
  background: var(--bg2);
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid var(--nav-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-brand {
  font-size: 1.5em;
  font-weight: 700;
  margin-right: 36px;
  background: linear-gradient(135deg, var(--radical), var(--kanji));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
}
.nav-links { display: flex; gap: 6px; }
.nav-link {
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1em;
  border: none;
  background: none;
  color: var(--text-dim);
}
.nav-link:hover { background: var(--card-border); color: var(--text); }
.nav-link.active { background: var(--bg3); color: var(--text); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.level-badge {
  background: var(--bg3);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.95em;
  font-weight: 600;
  border: 1px solid var(--input-border);
}
.review-count {
  background: var(--incorrect);
  color: white;
  padding: 4px 14px;
  border-radius: 12px;
  font-size: 0.9em;
  font-weight: 700;
  cursor: pointer;
}
.review-count:empty { display: none; }

/* Dashboard */
.dashboard { background: var(--dash-bg); min-height: calc(100vh - 64px); }
.dash-content { max-width: 1150px; margin: 0 auto; padding: 28px 24px; }

/* Cloud backup signed-out warning */
.cloud-warning {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #ffaa0018; border: 1px solid #ffaa0055; color: var(--text);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 16px;
  font-size: 0.95em; cursor: pointer; transition: background 0.3s;
}
.cloud-warning:hover { background: #ffaa0028; }
.cloud-warning-icon { color: #ffaa00; font-size: 1.2em; }
.cloud-warning strong { color: #ffaa00; white-space: nowrap; margin-left: auto; }

/* Top action row: Lessons / Reviews / Forecast */
.dash-top-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.dash-card {
  background: var(--dash-card-bg); border-radius: 8px; padding: 26px; box-shadow: 0 1px 4px var(--card-shadow);
  cursor: pointer; transition: all 0.3s;
}
.dash-card:hover { box-shadow: 0 3px 12px var(--card-shadow); }
.dash-card-title { font-size: 0.9em; color: var(--dash-card-title); margin-bottom: 4px; }
.dash-card-main { font-size: 1.8em; font-weight: 700; color: var(--dash-card-main); }
.dash-card-main .done-badge {
  display: inline-block; background: var(--dash-done-badge-bg); color: var(--dash-done-badge-text); font-size: 0.45em;
  padding: 3px 10px; border-radius: 4px; vertical-align: middle; margin-left: 8px; font-weight: 600;
}
.dash-card-sub { font-size: 0.95em; color: var(--dash-card-sub); margin-top: 6px; line-height: 1.5; }

/* Active lesson/review cards */
.dash-card.has-lessons {
  background: linear-gradient(135deg, #00aaff, #0088dd);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 170, 255, 0.3);
}
.dash-card.has-lessons .dash-card-title { color: rgba(255,255,255,0.8); }
.dash-card.has-lessons .dash-card-main { color: white; }
.dash-card.has-lessons .dash-card-sub { color: rgba(255,255,255,0.85); }
.dash-card.has-lessons .dash-card-sub strong { color: white; }
.dash-card.has-lessons:hover { box-shadow: 0 6px 24px rgba(0, 170, 255, 0.45); transform: translateY(-2px); }

.lesson-count-badge {
  display: inline-block; background: rgba(255,255,255,0.25); color: white;
  font-size: 0.5em; padding: 3px 12px; border-radius: 12px; vertical-align: middle; margin-left: 8px; font-weight: 700;
}

.dash-card.has-reviews {
  background: linear-gradient(135deg, #ff4466, #dd2244);
  color: white;
  border: none;
  box-shadow: 0 4px 16px rgba(255, 68, 68, 0.3);
}
.dash-card.has-reviews .dash-card-main { color: white; }
.dash-card.has-reviews .dash-card-sub { color: rgba(255,255,255,0.85); }
.dash-card.has-reviews .dash-card-sub strong { color: white; }
.dash-card.has-reviews:hover { box-shadow: 0 6px 24px rgba(255, 68, 68, 0.45); transform: translateY(-2px); }

.review-count-badge {
  display: inline-block; background: rgba(255,255,255,0.25); color: white;
  font-size: 0.5em; padding: 3px 12px; border-radius: 12px; vertical-align: middle; margin-left: 8px; font-weight: 700;
}

/* Forecast card */
.dash-card.forecast { cursor: default; }
.dash-card.forecast .forecast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dash-card.forecast .forecast-title { font-size: 0.9em; color: var(--dash-card-title); }
.dash-card.forecast .forecast-count { font-size: 1.9em; font-weight: 700; color: var(--dash-card-main); }
.dash-card.forecast .forecast-label { font-size: 0.85em; color: var(--dash-card-title); }
.forecast-bars { display: flex; flex-direction: column; gap: 6px; }
.forecast-row { display: flex; align-items: center; gap: 10px; font-size: 0.92em; }
.forecast-day { width: 34px; color: var(--forecast-day); text-align: right; }
.forecast-bar-wrap { flex: 1; height: 18px; background: var(--forecast-bar-bg); border-radius: 4px; overflow: hidden; }
.forecast-bar { height: 100%; background: #4caf50; border-radius: 4px; transition: width 0.3s; min-width: 0; }
.forecast-change { font-size: 0.92em; font-weight: 600; color: #4caf50; min-width: 42px; text-align: right; }
.forecast-total { color: var(--forecast-total); min-width: 24px; text-align: right; }
.forecast-empty { color: var(--dash-card-sub); font-size: 0.95em; line-height: 1.6; padding: 10px 0; }

/* Middle row: two columns */
.dash-mid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }

/* Level Progress card */
.level-progress-card { background: var(--dash-card-bg); border-radius: 8px; padding: 26px; box-shadow: 0 1px 4px var(--card-shadow); }
.lp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.lp-title { font-size: 1.15em; font-weight: 700; color: var(--lp-title); }
.lp-level-num { font-weight: 700; color: var(--lp-level); font-size: 1.05em; }
.lp-subtitle { font-size: 0.95em; color: var(--lp-subtitle); margin-bottom: 16px; }
.lp-subtitle strong { color: var(--lp-subtitle-strong); }

.lp-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.lp-type-box { border: 1px solid var(--lp-type-border); border-radius: 8px; padding: 14px 16px; }
.lp-type-icon { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lp-type-dot { width: 20px; height: 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.6em; color: white; font-weight: 700; }
.lp-type-dot.radical { background: var(--radical); }
.lp-type-dot.kanji { background: var(--kanji); }
.lp-type-dot.vocab { background: var(--vocab); }
.lp-type-name { font-size: 0.95em; color: var(--lp-type-name); }
.lp-type-count { font-size: 1.05em; font-weight: 700; color: var(--lp-type-count); }
.lp-type-seeall { font-size: 0.85em; color: var(--lp-type-seeall); cursor: pointer; float: right; }
.lp-type-seeall:hover { color: var(--radical); }

.lp-message { display: flex; align-items: center; gap: 10px; background: var(--lp-message-bg); border-radius: 8px; padding: 14px 18px; font-size: 0.95em; color: var(--lp-message-text); }
.lp-message-icon { font-size: 1.3em; }

/* Item Spread card */
.item-spread-card { background: var(--dash-card-bg); border-radius: 8px; padding: 26px; box-shadow: 0 1px 4px var(--card-shadow); }
.is-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.is-title { font-size: 1.15em; font-weight: 700; color: var(--lp-title); }
.is-legend { display: flex; align-items: center; gap: 14px; }
.is-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.85em; color: var(--text-dim); }
.is-legend-dot { width: 18px; height: 18px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.55em; color: white; font-weight: 700; }

.is-table { width: 100%; border-collapse: collapse; }
.is-table td, .is-table th { padding: 10px 8px; text-align: center; font-size: 0.95em; }
.is-table th { color: var(--is-table-th); font-weight: 600; font-size: 0.8em; text-transform: uppercase; }
.is-row { border-bottom: 1px solid var(--is-table-border); }
.is-row:last-child { border-bottom: none; }
.is-row td:first-child { text-align: left; display: flex; align-items: center; gap: 10px; color: var(--is-row-text); font-weight: 500; }
.is-stage-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.is-pill {
  display: inline-block; min-width: 28px; padding: 3px 10px; border-radius: 12px;
  font-size: 0.88em; font-weight: 700; color: white; text-align: center;
}
.is-pill.radical { background: var(--radical); }
.is-pill.kanji { background: var(--kanji); }
.is-pill.vocab { background: var(--vocab); }
.is-pill.zero { background: var(--is-pill-zero-bg); color: var(--is-pill-zero-text); }
.is-total { font-weight: 700; color: var(--is-total); font-size: 0.95em; }

/* SRS summary strip (below mid row) */
.srs-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 20px; }
.srs-strip-box { background: var(--srs-strip-bg); border-radius: 8px; padding: 16px; text-align: center; box-shadow: 0 1px 4px var(--card-shadow); }
.srs-strip-count { font-size: 1.6em; font-weight: 700; }
.srs-strip-label { font-size: 0.75em; color: var(--srs-strip-label); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.srs-strip-box.apprentice .srs-strip-count { color: var(--apprentice); }
.srs-strip-box.guru .srs-strip-count { color: var(--guru); }
.srs-strip-box.master .srs-strip-count { color: var(--master); }
.srs-strip-box.enlightened .srs-strip-count { color: var(--enlightened); }
.srs-strip-box.burned .srs-strip-count { color: var(--burned); }

/* Progress items grid (inside level progress) */
.progress-items { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--section-border); }
.progress-item {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; font-size: 0.92em; font-weight: 600; cursor: pointer; transition: all 0.3s;
}
.progress-item:hover { transform: scale(1.15); }
.progress-item.radical { background: var(--radical); color: white; }
.progress-item.kanji { background: var(--kanji); color: white; }
.progress-item.locked { background: var(--progress-locked-bg); color: var(--progress-locked-text); border: 1px dashed var(--input-border); }
.progress-item.passed { opacity: 0.45; }

/* Levels Page */
.levels-page { max-width: 1100px; margin: 0 auto; padding: 36px 24px; }
.levels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px; }
.level-tile {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg2); border-radius: 14px; cursor: pointer; transition: all 0.3s; border: 2px solid transparent;
}
.level-tile:hover { border-color: var(--radical); transform: scale(1.05); }
.level-tile.current { border-color: var(--radical); box-shadow: 0 0 20px #00aaff33; }
.level-tile.locked { opacity: 0.3; cursor: default; }
.level-tile .level-num { font-size: 1.7em; font-weight: 700; }
.level-tile .level-prog { font-size: 0.8em; color: var(--text-dim); margin-top: 3px; }

/* Level Detail */
.level-detail { max-width: 1000px; margin: 0 auto; padding: 36px 24px; }
.back-btn {
  background: none; border: none; color: var(--radical); cursor: pointer;
  font-size: 1em; margin-bottom: 18px; display: inline-flex; align-items: center; gap: 6px;
}
.item-section { margin-bottom: 36px; padding-bottom: 8px; border-bottom: 3px solid var(--section-border); }
.item-section:last-child { border-bottom: none; }
.item-section:has(.radical-title) { border-bottom-color: var(--radical); }
.item-section:has(.kanji-title) { border-bottom-color: var(--kanji); }
.item-section:has(.vocab-title) { border-bottom-color: var(--vocab); }
.item-section h3 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: none; font-size: 1.15em; }
.item-section h3.radical-title { color: var(--radical); }
.item-section h3.kanji-title { color: var(--kanji); }
.item-section h3.vocab-title { color: var(--vocab); }
.items-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.item-tile {
  padding: 12px 18px; border-radius: 10px; cursor: pointer;
  transition: all 0.3s; font-size: 1.25em; min-width: 54px; text-align: center;
}
.item-tile:hover { transform: scale(1.1); }
.item-tile.radical { background: var(--radical); color: white; }
.item-tile.kanji { background: var(--kanji); color: white; }
.item-tile.vocab { background: var(--vocab); color: white; }
.item-tile.locked { background: var(--progress-locked-bg); color: var(--progress-locked-text); border: 1px dashed var(--input-border); opacity: 0.7; }

/* ===== WANIKANI-STYLE ITEM DETAIL ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--modal-bg); border-radius: 14px; max-width: 720px; width: 100%;
  max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; color: var(--modal-text);
}

.wk-header {
  min-height: 160px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: white; position: relative;
  border-radius: 14px 14px 0 0; padding: 28px 20px;
}
.wk-header.radical { background: linear-gradient(135deg, var(--radical), #0077bb); }
.wk-header.kanji { background: linear-gradient(135deg, var(--kanji), #cc0066); }
.wk-header.vocab { background: linear-gradient(135deg, var(--vocab), #7700bb); }

.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,0.2); border: none; color: white;
  font-size: 1.6em; cursor: pointer; width: 40px; height: 40px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(255,255,255,0.4); }

.wk-char { font-size: 5.5em; font-weight: 400; }
.wk-type-label {
  background: rgba(0,0,0,0.25); color: white; padding: 8px 22px;
  border-radius: 20px; font-size: 0.85em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; margin-top: 14px;
  flex-shrink: 0;
}

.wk-content { padding: 32px 38px; background: var(--modal-bg); color: var(--modal-text); }

.wk-section { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--section-border); }
.wk-section:last-child { border-bottom: none; }
.wk-section-title {
  font-size: 0.9em; color: var(--modal-dim); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.wk-section-title::before { content: '▾'; font-size: 0.9em; }

.wk-primary-label { font-size: 0.85em; color: var(--modal-dim); margin-bottom: 3px; }
.wk-meaning-text { font-size: 1.6em; font-weight: 700; color: var(--modal-text); margin-bottom: 6px; }

.wk-readings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 12px; }
.wk-reading-card { background: var(--reading-card-bg); border: 1px solid var(--reading-card-border); border-radius: 10px; padding: 14px 18px; }
.wk-reading-type { font-size: 0.8em; color: var(--modal-dim); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-bottom: 4px; }
.wk-reading-text { font-size: 1.3em; font-weight: 600; color: var(--reading-text); font-family: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; }

.wk-radicals-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.wk-radical-badge {
  background: var(--radical-bg); border: 1px solid var(--radical);
  color: var(--radical); padding: 8px 18px; border-radius: 8px; font-size: 0.95em; font-weight: 600;
}

.wk-mnemonic { line-height: 1.9; color: var(--mnemonic-text); font-size: 1.05em; margin-bottom: 12px; }
.rad-hl { background: var(--radical); color: white; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.kan-hl { background: var(--kanji); color: white; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.voc-hl { background: var(--vocab); color: white; padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.read-hl { background: var(--text); color: var(--bg); padding: 2px 7px; border-radius: 4px; font-weight: 600; }
.ja-hl { font-family: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; font-weight: 600; }

.wk-hint { background: var(--hint-bg); border: 1px solid var(--hint-border); border-radius: 10px; padding: 14px 18px; color: var(--hint-text); font-size: 1em; line-height: 1.7; }

.wk-context { background: var(--context-bg); border: 1px solid var(--context-border); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
.wk-context-jp { font-size: 1.15em; color: var(--context-text); font-weight: 500; margin-bottom: 4px; font-family: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif; }
.wk-context-en { color: var(--context-dim); font-size: 1em; }

.wk-speech-type { display: inline-block; background: var(--speech-bg); color: var(--speech-text); padding: 4px 12px; border-radius: 5px; font-size: 0.9em; margin-bottom: 14px; }

/* Auxiliary meanings */
.wk-aux-meanings { font-size: 0.9em; color: var(--modal-dim); margin-bottom: 8px; font-style: italic; }
.fi-aux { font-size: 0.85em; color: var(--modal-dim); margin-bottom: 8px; font-style: italic; }

/* Audio playback */
.wk-audio-row { display: flex; gap: 8px; margin-top: 10px; }
.wk-audio-btn {
  display: flex; align-items: center; gap: 6px; padding: 8px 16px;
  background: var(--surface); border: 1px solid var(--surface-border); border-radius: 8px;
  cursor: pointer; font-size: 0.9em; color: var(--text-dim); transition: all 0.3s;
}
.wk-audio-btn:hover { background: var(--surface2); border-color: var(--radical); color: var(--radical); }
.audio-icon { font-size: 1.1em; }

/* Character image for radicals — invert based on theme */
.wk-char-img { display: inline-block; vertical-align: middle; filter: invert(1); }
/* On modal content backgrounds, follow theme */
.wk-content .wk-char-img { filter: none; }
/* In dark mode, modal content still needs inversion since bg is dark */
:root[data-theme="dark"] .wk-content .wk-char-img { filter: invert(1); }
/* In light mode, no inversion needed on light backgrounds, but still invert on colored tiles */
:root[data-theme="light"] .wk-char-img { filter: none; }
:root[data-theme="light"] .progress-item .wk-char-img,
:root[data-theme="light"] .item-tile .wk-char-img,
:root[data-theme="light"] .wk-header .wk-char-img,
:root[data-theme="light"] .session-character .wk-char-img { filter: invert(1); }
/* Text fallback for imageless radicals without API image */
.char-text-fallback { font-size: 0.35em; letter-spacing: 1.5px; opacity: 0.85; font-weight: 600; text-transform: uppercase; }
.progress-item .char-text-fallback { font-size: 0.5em; letter-spacing: 0; }
.item-tile .char-text-fallback { font-size: 0.5em; letter-spacing: 0; }

/* Visually similar kanji */
.wk-similar-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-similar-badge {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--kanji-bg); border: 1px solid var(--kanji); border-radius: 8px;
  font-size: 1.3em; cursor: pointer; transition: all 0.3s; color: var(--similar-text);
}
.wk-similar-badge:hover { transform: scale(1.15); background: var(--kanji); color: white; }

/* Sync info text */
.sync-info { font-size: 0.8em; color: var(--text-dim); margin-top: 6px; }

.wk-srs-bar {
  background: var(--srs-bar-bg); border-radius: 10px; padding: 12px 18px;
  display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
}
.wk-srs-label { font-size: 0.9em; color: var(--srs-label); font-weight: 600; text-transform: uppercase; }
.wk-srs-value { font-weight: 700; color: var(--srs-value); font-size: 1.05em; }

/* ===== Lesson Info ===== */
.lesson-info {
  background: var(--modal-bg); border-radius: 14px; max-width: 720px; width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3); color: var(--modal-text); overflow: hidden;
}
.lesson-nav { display: flex; justify-content: center; gap: 14px; margin-top: 24px; }

/* ===== Session Answer Reveal ===== */
.session-answer {
  margin-top: 24px; background: var(--modal-bg); border-radius: 14px; max-width: 720px;
  width: 100%; color: var(--modal-text); box-shadow: 0 4px 24px rgba(0,0,0,0.3); overflow: hidden;
}
.answer-content { padding: 28px 32px; }
.correct-answer { color: var(--correct); font-size: 1.5em; font-weight: 700; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--answer-border-bottom); }
.correct-answer.wrong { color: var(--incorrect); }
.answer-mnemonic {
  color: var(--mnemonic-text); line-height: 1.8; font-size: 1em; margin-bottom: 16px;
  padding: 14px; background: var(--mnemonic-bg); border-radius: 10px; border-left: 4px solid var(--radical);
}
.answer-mnemonic p, .wrong-study-mnemonic p, .fi-mnemonic p, .wk-mnemonic p {
  margin: 0 0 10px 0;
}
.answer-mnemonic p:last-child, .wrong-study-mnemonic p:last-child, .fi-mnemonic p:last-child, .wk-mnemonic p:last-child {
  margin-bottom: 0;
}
/* Wrong answer study breakdown */
.wrong-answer .answer-next-btn { background: var(--incorrect); }
.wrong-study { margin-top: 8px; }
.wrong-study-header {
  font-size: 1.1em; font-weight: 700; color: var(--incorrect); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--wrong-study-border);
}
.wrong-study-section {
  margin-bottom: 20px; padding: 16px; background: var(--wrong-section-bg); border-radius: 10px;
  border-left: 4px solid var(--wrong-section-border);
}
.wrong-study-label {
  font-size: 0.8em; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
  color: var(--wrong-label); margin-bottom: 6px;
}
.wrong-study-value { font-size: 1.3em; font-weight: 600; color: var(--wrong-value); margin-bottom: 8px; }
.wrong-study-mnemonic {
  color: var(--wrong-mnemonic); line-height: 1.7; font-size: 0.95em; margin-top: 8px;
}
.context-pair { margin: 8px 0; }
.context-jp { font-family: 'Noto Sans JP','Hiragino Sans',sans-serif; font-size: 1.05em; color: var(--context-text); }
.context-en { font-size: 0.9em; color: var(--context-dim); margin-top: 2px; }
/* Answer action buttons row */
.answer-actions { display: flex; gap: 10px; margin-top: 4px; }
.answer-info-btn {
  flex: 0 0 auto; padding: 14px 20px; background: var(--answer-info-bg); color: var(--answer-info-text);
  border: 1px solid var(--answer-info-border); border-radius: 10px; font-weight: 600; font-size: 1em; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: all 0.3s;
}
.answer-info-btn:hover { background: var(--surface2); }
.answer-info-btn.active { background: var(--answer-info-active-bg); border-color: var(--answer-info-active-border); color: var(--answer-info-active-text); }
.answer-next-btn {
  flex: 1; padding: 14px; background: var(--radical); color: white;
  border: none; border-radius: 10px; font-weight: 600; font-size: 1.05em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.answer-next-btn:hover { filter: brightness(1.15); }

/* Keyboard hint badges */
.key-hint {
  display: inline-block; background: var(--key-hint-bg); padding: 1px 7px; border-radius: 4px;
  font-size: 0.75em; font-weight: 700; letter-spacing: 0.5px;
}
.answer-info-btn .key-hint { background: var(--key-hint-bg); }
.answer-info-btn.active .key-hint { background: rgba(0,170,255,0.15); }

/* Full item info panel */
.full-item-info {
  margin: 16px 0; padding: 20px; background: var(--fi-bg); border-radius: 10px; border: 1px solid var(--fi-border);
  animation: slideDown 0.2s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; max-height: 0; transform: translateY(-8px); }
  to { opacity: 1; max-height: 2000px; transform: translateY(0); }
}
.fi-section { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--fi-section-border); }
.fi-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.fi-section-title {
  font-size: 0.85em; color: var(--fi-title); text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; margin-bottom: 8px;
}
.fi-value { font-size: 1.3em; font-weight: 700; color: var(--fi-value); margin-bottom: 8px; }
.fi-label { font-size: 0.8em; color: var(--fi-label); margin-bottom: 4px; margin-top: 10px; }
.fi-mnemonic { line-height: 1.8; color: var(--fi-mnemonic); font-size: 0.95em; }

/* Shortcut hints bar */
.shortcut-hints {
  display: flex; justify-content: center; gap: 18px; margin-top: 16px;
  font-size: 0.8em; color: var(--shortcut-text);
}
.shortcut-hints span { display: flex; align-items: center; gap: 5px; }
kbd {
  display: inline-block; background: var(--kbd-bg); border: 1px solid var(--kbd-border);
  border-radius: 4px; padding: 1px 7px; font-family: inherit; font-size: 0.9em;
  font-weight: 600; color: var(--text-dim);
}
.btn kbd { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.15); color: inherit; font-size: 0.8em; }

/* ===== Quiz Session ===== */
.session-screen { max-width: 750px; margin: 0 auto; padding: 36px 24px; min-height: calc(100vh - 64px); display: flex; flex-direction: column; }
.session-progress { display: flex; gap: 4px; margin-bottom: 28px; }
.session-dot { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-border); }
.session-dot.done { background: var(--correct); }
.session-dot.current { background: var(--radical); }
.session-dot.wrong { background: var(--incorrect); }
.session-dot.retry { opacity: 0.4; }

.session-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 15vh; }
.session-type-badge { padding: 6px 20px; border-radius: 14px; font-size: 0.9em; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.session-character { font-size: 6em; margin: 20px 0; transition: all 0.3s; }
.session-prompt { font-size: 1.25em; color: var(--text-dim); margin-bottom: 28px; }
.session-input-wrap { width: 100%; max-width: 450px; position: relative; }
.session-input {
  width: 100%; padding: 16px 24px; border: 2px solid var(--input-border);
  border-radius: 14px; background: var(--input-bg); color: var(--text);
  font-size: 1.25em; text-align: center; outline: none; transition: border-color 0.3s;
}
.session-input:focus { border-color: var(--radical); }
.session-input.correct { border-color: var(--correct); background: var(--correct-bg); }
.session-input.incorrect { border-color: var(--incorrect); background: var(--incorrect-bg); }
.session-input.reading { font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif; }

/* ===== WK-Style Full-Screen Quiz ===== */
.quiz-screen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  z-index: 100;
}
.quiz-stats-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; background: #333; color: #fff;
  font-size: 0.9em; flex-shrink: 0;
}
.quiz-home-btn {
  background: none; border: none; color: #fff;
  font-size: 1.4em; cursor: pointer; padding: 2px 8px;
  line-height: 1;
}
.quiz-home-btn:hover { opacity: 0.7; }
.quiz-stats { display: flex; gap: 16px; }
.quiz-stat { display: flex; align-items: center; gap: 4px; font-weight: 600; }
.quiz-stat-icon { font-size: 1em; }

.quiz-character-area {
  display: flex; align-items: center; justify-content: center;
  padding: 40px 0; flex-shrink: 0;
}
/* Before the answer reveal there's no item-info panel — let the character area
   fill the screen instead of leaving a void at the bottom */
.quiz-screen:not(:has(.quiz-item-info)) .quiz-character-area { flex: 1; }
.quiz-character-area.radical { background: var(--radical); }
.quiz-character-area.kanji { background: var(--kanji); }
.quiz-character-area.vocab { background: var(--vocab); }
.quiz-character { font-size: 6em; color: #fff; }

.quiz-type-bar {
  padding: 10px 0; text-align: center;
  background: #333; color: #fff; font-size: 1.1em;
  flex-shrink: 0;
}
.quiz-type-bar.meaning { background: #e7e7e7; color: #333; }

.quiz-input-wrap { position: relative; flex-shrink: 0; }
/* Answer revealed: the whole input row advances to the next question */
.quiz-input-wrap.reveal { cursor: pointer; }
.quiz-input-wrap.reveal .quiz-input { pointer-events: none; }
.quiz-input {
  width: 100%; padding: 16px; border: none;
  font-size: 1.3em; text-align: center; outline: none;
  background: var(--input-bg); color: var(--text);
}
.quiz-input.correct { background: var(--correct-input); color: #fff; }
.quiz-input.incorrect { background: var(--incorrect-input); color: #fff; }
.quiz-input.reading {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
}
.quiz-input::placeholder { color: #999; }
.quiz-submit-btn {
  position: absolute; right: 0; top: 0; bottom: 0; width: 50px;
  background: none; border: none; border-left: 1px solid var(--input-border);
  font-size: 1.5em; color: var(--text-dim); cursor: pointer;
}
.quiz-submit-btn:hover { background: var(--surface); }

.quiz-toolbar {
  display: flex; border-top: 1px solid var(--input-border);
  flex-shrink: 0;
}
.quiz-toolbar button {
  flex: 1; padding: 10px; background: var(--card-bg); border: none;
  border-right: 1px solid var(--input-border); cursor: pointer;
  font-size: 0.85em; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.quiz-toolbar button:last-child { border-right: none; }
.quiz-toolbar button:hover { background: var(--surface); }
.quiz-toolbar button:disabled { opacity: 0.4; cursor: default; }
.quiz-toolbar button:disabled:hover { background: var(--card-bg); }
.quiz-tb-icon { font-size: 1.1em; }

.quiz-item-info {
  flex: 1; overflow-y: auto; padding: 24px;
  background: var(--card-bg);
}
.quiz-item-info-inner {
  max-width: 720px; margin: 0 auto;
}
.quiz-answer-line {
  color: var(--correct-input); font-size: 1.5em; font-weight: 700;
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 2px solid var(--section-border);
  text-align: center;
}
.quiz-answer-line.wrong { color: var(--incorrect-input); }

.quiz-mnemonic-img { text-align: center; margin: 12px 0; }
.quiz-mnemonic-img img {
  max-width: 100%; max-height: 300px; border-radius: 12px;
  object-fit: contain;
}

/* Char image inversion inside WK-style quiz character area */
.quiz-character-area .wk-char-img { filter: invert(1); }
:root[data-theme="light"] .quiz-character-area .wk-char-img { filter: invert(1); }

/* Summary */
.session-summary { max-width: 550px; margin: 60px auto; text-align: center; padding: 24px; }
.session-summary h2 { font-size: 2em; margin-bottom: 10px; }
.session-summary .big-score { font-size: 4.5em; font-weight: 700; margin: 20px 0; }
.session-summary .big-score.great { color: var(--correct); }
.session-summary .big-score.ok { color: #ffaa00; }
.session-summary .big-score.bad { color: var(--incorrect); }
.summary-items { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 24px 0; }
.summary-item { padding: 8px 16px; border-radius: 10px; font-size: 1.25em; }
.summary-item.correct { background: var(--correct-bg-strong); border: 1px solid var(--correct); }
.summary-item.incorrect { background: var(--incorrect-bg-strong); border: 1px solid var(--incorrect); }

/* Settings */
.settings-page { max-width: 650px; margin: 0 auto; padding: 36px 24px; }
.setting-group { background: var(--bg2); border-radius: 18px; padding: 28px; margin-bottom: 20px; }
.setting-group h3 { margin-bottom: 18px; font-size: 1.15em; }
.setting-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--section-border); }
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 1.05em; }
.setting-label small { display: block; color: var(--text-dim); font-size: 0.85em; margin-top: 3px; }
.setting-input {
  width: 90px; padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); text-align: center; font-size: 1.05em;
}

/* Sync status */
.sync-status {
  padding: 10px 14px; border-radius: 8px; font-size: 0.9em; line-height: 1.5;
  min-height: 20px; transition: all 0.3s;
}
.sync-status:empty { display: none; }
.sync-status.syncing { background: #0093dd22; color: var(--enlightened); }
.sync-status.success { background: #00cc6622; color: var(--correct); }
.sync-status.error { background: #ff444422; color: var(--incorrect); }

/* Buttons */
.btn { padding: 12px 28px; border-radius: 12px; border: none; font-size: 1.05em; cursor: pointer; font-weight: 600; transition: all 0.3s; }
.btn-primary { background: var(--radical); color: white; }
.btn-primary:hover { filter: brightness(1.15); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--input-border); }
.btn-secondary:hover { background: var(--surface2); }
.btn-danger { background: var(--incorrect); color: white; }
.btn-success { background: var(--correct); color: white; }

/* Responsive */
@media (max-width: 768px) {
  .dash-top-row { grid-template-columns: 1fr; }
  .dash-mid-row { grid-template-columns: 1fr; }
  .srs-strip { grid-template-columns: repeat(3, 1fr); }
  .lp-type-grid { grid-template-columns: 1fr; }
  .dash-content { padding: 20px 16px; }
}
@media (max-width: 600px) {
  /* Nav: allow wrapping to a second row instead of overflowing */
  nav { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 12px; row-gap: 6px; }
  .nav-brand { font-size: 1.2em; margin-right: 12px; }
  .nav-links { gap: 0; }
  .nav-link { padding: 8px 10px; font-size: 0.9em; }
  .nav-right { gap: 8px; }
  .level-badge { padding: 4px 12px; font-size: 0.85em; }
  .review-count { padding: 4px 10px; font-size: 0.8em; }

  /* Dashboard */
  .dash-content { padding: 14px 10px; }
  .dash-card, .level-progress-card, .item-spread-card { padding: 18px 16px; }
  .dash-top-row, .dash-mid-row, .srs-strip { gap: 10px; margin-bottom: 12px; }
  .srs-strip { grid-template-columns: repeat(3, 1fr); }
  .srs-strip-box { padding: 12px 8px; }
  .is-legend { flex-wrap: wrap; gap: 8px; }
  .is-table td, .is-table th { padding: 8px 4px; font-size: 0.85em; }
  .is-pill { min-width: 24px; padding: 3px 8px; }
  .forecast-day { width: 30px; }

  /* Levels + level detail */
  .levels-page, .level-detail { padding: 20px 12px; }
  .levels-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }

  /* Item detail modal: bottom sheet, full width */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 92vh; border-radius: 14px 14px 0 0; }
  .wk-header { min-height: 120px; padding: 20px 16px; }
  .wk-char { font-size: 3.5em; }
  .wk-content { padding: 20px 16px; }
  .wk-readings-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .wk-reading-card { padding: 10px 12px; }

  /* Lesson / quiz sessions */
  .session-screen { padding: 20px 12px; }
  .session-card { padding-bottom: 8vh; }
  .session-character { font-size: 4em; }
  .quiz-character { font-size: 4em; }
  .quiz-character-area { padding: 28px 0; }
  .quiz-input { font-size: 1.1em; padding: 14px; }
  .quiz-stats { gap: 10px; font-size: 0.85em; }
  /* Bigger, more obvious next arrow once the answer is shown */
  .quiz-input-wrap.reveal .quiz-submit-btn {
    width: 84px; font-size: 1.6em; color: #fff;
    background: rgba(0,0,0,0.18); border-left: none;
  }
  .quiz-item-info { padding: 16px 12px; }
  .answer-content { padding: 20px 14px; }
  .answer-actions { flex-wrap: wrap; }
  .answer-info-btn { padding: 12px 14px; font-size: 0.9em; }
  .answer-next-btn { flex: 1 1 100%; }
  .full-item-info { padding: 14px 12px; }
  .session-summary { margin: 30px auto; }

  /* Settings */
  .settings-page { padding: 20px 12px; }
  .setting-group { padding: 18px 16px; }
  .setting-row { flex-wrap: wrap; gap: 8px; }
}

/* Touch devices: keyboard shortcut hints are noise */
@media (hover: none) and (pointer: coarse) {
  .shortcut-hints, .key-hint, kbd { display: none; }
}

/* Animations */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.shake { animation: shake 0.3s; }
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.pop { animation: pop 0.3s; }

/* Navbar theme toggle button */
.nav-theme-btn {
  background: var(--surface); border: 1px solid var(--input-border); color: var(--text);
  font-size: 1.15em; cursor: pointer; padding: 5px 12px; border-radius: 20px;
  transition: all 0.3s; line-height: 1; display: flex; align-items: center; gap: 6px;
}
.nav-theme-btn:hover { border-color: var(--radical); background: var(--surface2); transform: scale(1.05); }
.nav-theme-btn:active { transform: scale(0.95); }

/* Toast notification */
.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--surface2); color: var(--text); border: 1px solid var(--input-border);
  padding: 10px 20px; border-radius: 8px; font-size: 0.9em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 9999;
  animation: toast-in 0.3s ease;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }