:root {
  color-scheme: light;
  font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color: #17243d;
  background: #f4f6fa;
  --navy: #17243d;
  --ink: #17243d;
  --muted: #4b5b72;
  --teal: #284bc6;
  --mint: #eaf0ff;
  --line: #dbe2ee;
  --paper: #ffffff;
  --yellow: #f4be54;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: #f4f6fa;
}
button { font: inherit; }
button { cursor: pointer; color: inherit; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible { outline: 3px solid #167d96; outline-offset: 3px; }
main { max-width: 1180px; margin: auto; padding: clamp(16px, 3vw, 38px); }
.game-controls:not([hidden]) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.modes {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #c7d2e5;
  border-radius: 12px;
  background: #f8faff;
}
.modes button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  padding: 7px 11px;
  min-height: 36px;
  color: var(--muted);
  font-weight: 700;
}
.modes button[aria-pressed="true"] { background: var(--teal); color: white; }
.answer-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.study-nav { display: flex; gap: 8px; }
#study-options, .progress-toggle { display: none; }
.audio-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  color: #314465;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}
.audio-toggle input { accent-color: var(--teal); width: 16px; height: 16px; margin: 0; }
.audio-toggle input:focus-visible { outline: 3px solid #167d96; outline-offset: 3px; }
#undo { min-height: 42px; }
.panel {
  background: var(--paper);
  border: 1px solid #dbe2ee;
  border-radius: 18px;
  padding: clamp(17px, 3.6vw, 34px);
  box-shadow: 0 6px 22px #17243d0a;
}
.splash { padding-block: clamp(26px, 6vw, 55px); }
.eyebrow { color: var(--teal); font-size: .81rem; font-weight: 800; letter-spacing: .11em; margin: 0; }
h1 { margin: .22em 0 .34em; line-height: 1.2; font-size: clamp(1.65rem, 4vw, 2.55rem); }
.lead { max-width: 40ch; line-height: 1.65; color: var(--muted); margin: 0 0 20px; }
.progress-summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 15px;
  margin-bottom: 12px;
}
.progress-heading { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.progress-heading h2 { font-size: .94rem; margin: 0; }
.progress-heading span { font-size: .83rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress-bar {
  display: block;
  appearance: none;
  accent-color: var(--teal);
  width: 100%;
  height: 9px;
  border: 0;
  border-radius: 20px;
  background: var(--mint);
  margin: 7px 0 10px;
}
.progress-bar::-webkit-progress-bar { background: var(--mint); border-radius: 20px; }
.progress-bar::-webkit-progress-value { background: var(--teal); border-radius: 20px; }
.progress-bar::-moz-progress-bar { background: var(--teal); border-radius: 20px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.stat { display: grid; gap: 3px; background: #f3f6fc; border-radius: 9px; padding: 6px 8px; }
.stat dt { font-size: .75rem; color: var(--muted); }
.stat dd { margin: 0; font-size: 1.03rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.rest { color: var(--teal); margin-bottom: 0; }
.round-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.tag { background: var(--mint); color: var(--teal); padding: 5px 10px; border-radius: 30px; font-size: .78rem; font-weight: 700; }
.counter, .instruction, .due { font-size: .84rem; color: var(--muted); }
.question h1 { font-size: clamp(1.5rem, 3.5vw, 2.12rem); }
.prompt { display: flex; margin: 15px 0 10px; }
.prompt > .art { width: clamp(118px, 24vw, 180px); border-radius: 15px; }
.art { display: block; object-fit: cover; max-width: 100%; height: auto; aspect-ratio: 1; }
.play, .primary, .secondary, .sound-pick {
  padding: 9px 15px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
}
.play { background: #eaf0ff; color: #2748ad; }
.play:hover, .play.playing { background: #dce6ff; }
.prompt-play { background: var(--navy); color: white; padding-inline: 20px; }
.prompt-play:hover, .prompt-play.playing { background: #243f89; }
.instruction { margin: 10px 0 8px; }
.options { display: grid; gap: 9px; }
.pictures { grid-template-columns: repeat(4, 1fr); }
.picture-pick {
  padding: 4px;
  border: 2px solid var(--line);
  position: relative;
  background: #fff;
  border-radius: 15px;
}
.picture-pick .art { border-radius: 9px; width: 100%; }
.letter { position: absolute; left: 9px; bottom: 9px; font-size: .77rem; color: white; background: var(--navy); border-radius: 50%; width: 24px; line-height: 24px; }
.sounds { grid-template-columns: 1fr 1fr; }
.sound-option { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.sound-pick { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: white; border-color: var(--line); text-align: left; min-height: 50px; padding: 7px 12px; }
.sound-pick.playing { background: #eaf0ff; color: var(--teal); }
.option-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: #e9eef7; color: var(--navy); font-weight: 800; }
.option-wave { width: 25px; height: 14px; color: #6b7fa3; background: linear-gradient(currentColor,currentColor) left 0 top 5px/3px 5px no-repeat,
  linear-gradient(currentColor,currentColor) left 6px top 2px/3px 11px no-repeat,
  linear-gradient(currentColor,currentColor) left 12px top/3px 14px no-repeat,
  linear-gradient(currentColor,currentColor) left 18px top 3px/3px 8px no-repeat; }
.sound-pick.heard .option-wave { color: var(--teal); }
.sounds .sound-pick.playing { background: #fff0c8; border-color: #9b6417; color: #613d0a; }
.playing .option-number { background: var(--yellow); }
.playing .option-wave { color: #80501b; }
.sequence-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 8px; }
.sequence-status { color: var(--muted); font-size: .86rem; line-height: 1.4; }
.sequence-play { flex: none; }
.picture-pick:hover, .sound-pick:hover { border-color: #91a6df; }
.picture-pick[aria-pressed="true"], .sound-pick[aria-pressed="true"] { border-color: var(--teal); background: #e2eaff; box-shadow: 0 0 0 2px #284bc624; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.self-grade-actions { display: flex; flex: 1 1 100%; gap: 8px; }
.self-grade-actions button { min-width: 108px; }
.self-grade-actions .mark-mastered { background: var(--mint); }
.mastery-notice {
  position: fixed;
  inset: auto auto max(18px, env(safe-area-inset-bottom)) 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 10px 14px;
  color: #fff;
  background: #17603a;
  border-radius: 10px;
  box-shadow: 0 4px 14px #10162235;
  font-size: .9rem;
  pointer-events: none;
}
.primary { background: var(--teal); color: #fff; padding-inline: 20px; }
.primary:hover:enabled { background: #203da3; }
.secondary { background: transparent; color: #314465; border-color: #c7d2e5; }
.secondary:hover:enabled { background: #eef3ff; }
.result { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 10px; margin-bottom: 14px; font-weight: 700; }
.result-mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 1rem;
}
.success { background: #e5f5eb; color: #17603a; }
.retry { background: #ffead2; color: #783c19; }
.incorrect { background: #f9e4df; color: #922f2a; }
.success .result-mark { background: #17603a; }
.retry .result-mark { background: #8f4b24; }
.incorrect .result-mark { background: #a73c35; }
.feedback-success { border-color: #b5d9c3; }
.feedback-retry { border-color: #e3b383; }
.feedback-incorrect { border-color: #deaaa2; }

@media (prefers-reduced-motion: no-preference) {
  .reveal .success .result-mark { animation: correct-pop 300ms ease-out; }
  .reveal .incorrect .result-mark { animation: incorrect-shake 270ms ease-in-out; }
}
@keyframes correct-pop {
  0% { transform: scale(.65); }
  58% { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes incorrect-shake {
  0%, 100% { transform: translateX(0); }
  28% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}
.answer { display: grid; grid-template-columns: minmax(85px, 145px) 1fr; align-items: center; gap: 15px; }
.answer > .art { width: 100%; border-radius: 13px; }
.term { margin: 3px 0 0; }
.reading, .meaning { color: var(--muted); margin: 2px 0 5px; }
.example { margin-top: 15px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: #f6f8fc; }
.sentence { margin: 8px 0 5px; line-height: 1.55; font-weight: 600; }
.kana { margin: 0 0 8px; line-height: 1.55; color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.notice { color: #8b391e; font-size: .85rem; }
.notice button { margin-left: 6px; }
.notice:empty { display: none; }

#study-dialog {
  width: min(840px, calc(100% - 28px));
  max-height: 88vh;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: clamp(14px, 3vw, 24px);
}
#study-dialog::backdrop { background: #17243d80; }
.study-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.study-head h2 { margin: 0; }
.plans-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.plans-title h1 { margin-block: 0; }
.tutorial-link { color: var(--teal); background: var(--mint); font-size: .85rem; padding-inline: 12px; }
#tutorial-dialog {
  width: min(740px, calc(100% - 28px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 16px 50px #0b193650;
}
#tutorial-dialog::backdrop { background: #101b32b0; }
.tutorial-head { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px; align-items: center; padding: 14px 20px 9px; background: var(--paper); border-bottom: 1px solid var(--line); }
.tutorial-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.tutorial-heading h2 { margin: 0; font-size: 1.15rem; }
#tutorial-progress-label { color: var(--teal); font-size: .86rem; font-weight: 750; }
#tutorial-progress { grid-column: 1 / -1; margin: 0; height: 5px; }
#tutorial-content { padding: 16px 20px 20px; }
.tutorial-intro { border-radius: 12px; padding: clamp(14px, 3vw, 24px); background: var(--mint); }
.tutorial-intro h3 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.tutorial-intro .lead { margin-bottom: 16px; }
.tutorial-primary { min-height: 48px; }
#tutorial-content .question { padding: 0; border: 0; box-shadow: none; }
#tutorial-content .question-title { margin: 0 0 7px; font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.tutorial-response:empty { display: none; }
.tutorial-response { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.tutorial-message { flex: 1 1 200px; margin: 0; border-radius: 10px; padding: 10px 12px; font-weight: 750; }
.tutorial-correct:disabled { opacity: 1; border-color: #31905c; outline: 2px solid #31905c; }
.tutorial-incorrect { border-color: #b55949; outline: 2px solid #b55949; }
.study-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 12px; }
.study-tabs button { background: #eef3fc; border: 0; border-radius: 9px; font-weight: 700; min-height: 44px; }
.study-tabs button[aria-pressed="true"] { background: var(--teal); color: white; }
.study-section:not(.study-section-active) { display: none; }
.plans-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.plans-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.plan-card { min-width: 0; border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: #f8faff; }
.plan-card h2 { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.plan-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 10px 0; }
.plan-today > div { background: var(--mint); padding: 7px; border-radius: 8px; }
.plan-today dt { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.plan-today dd { margin: 4px 0 0; color: var(--ink); font-size: .93rem; font-weight: 750; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.account-menu summary, .plan-extras summary { cursor: pointer; font-weight: 700; }
.account-menu summary { display: flex; align-items: center; gap: 6px; }
.account-menu summary::after { content: '⌄'; }
.account-menu .plan-actions { margin-top: 6px; }
.plan-extras { margin-top: 12px; }
.plan-extras summary { color: var(--teal); font-size: .85rem; padding-block: 8px; }
.plan-extras .plan-actions { margin-top: 2px; }
.plan-delete {
  background: transparent;
  color: #922f2a;
  border: 1px solid transparent;
  border-radius: 9px;
  min-height: 44px;
  padding: 6px 9px;
}
.plan-delete:hover:enabled { background: #f9e4df; }
.plan-fields { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.search-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-field { display: grid; gap: 5px; font-size: .85rem; }
.auth-form { display: grid; gap: 12px; max-width: 350px; }
.auth-form input, .auth-form select { min-width: 0; width: 100%; }
.auth-tools { margin-top: 14px; }
.plan-name, .plan-order { font: inherit; color: var(--ink); background: #fff; border: 1px solid #c7d2e5; border-radius: 7px; padding: 8px; }
.study-form, .study-block { margin-top: 18px; }
.study-form h3, .study-block h3 { margin: 0 0 8px; }
.study-hint { color: var(--muted); font-size: .83rem; line-height: 1.6; margin: 6px 0 9px; }
.plan-section, .plan-advanced { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 8px; }
.plan-section .plan-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plan-section .plan-field { min-width: 0; }
.plan-section .plan-fields input, .plan-section .plan-fields select { width: 100%; min-width: 0; }
.daily-fields { margin: 0 0 5px; }
.daily-fields .limit-input { min-height: 44px; }
.plan-section .level-choices, .plan-section .study-hint { margin-bottom: 0; }
.plan-advanced summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.plan-advanced[open] summary { margin-bottom: 8px; }
.week-day { display: flex; align-items: center; gap: 7px; min-height: 36px; cursor: pointer; }
.week-day input { margin: 0; width: 16px; height: 16px; accent-color: var(--teal); }
.week-quotas .limit-input:disabled { background: #f3f6fc; color: var(--muted); opacity: .75; }
.plan-save-actions { justify-content: flex-end; padding-top: 5px; }
.exception-row { align-items: end; margin-bottom: 8px; }
.study-form .forecast-controls { margin-top: 16px; }
.forecast-preview { border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.memory-stages { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.answer-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.comparison-card { min-width: 0; border-radius: 12px; padding: 12px; }
.comparison-card .answer { grid-template-columns: minmax(55px, 34%) 1fr; margin-top: 6px; }
.comparison-wrong { background: #fbede7; }
.comparison-right { background: #eaf7ee; }
.study-block .plan-actions { margin-bottom: 8px; }
.study-block button[aria-pressed="true"] { background: var(--mint); border-color: #719e88; }
.word-result { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; }
.word-result summary { cursor: pointer; }
.word-meta { display: block; margin: 3px 0 0; }
.word-preview { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.word-preview .art { width: 128px; border-radius: 10px; }
.issue-form { display: grid; gap: 8px; margin: 12px 0; }
.issue-form textarea { resize: vertical; }
.level-choices { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.level-choice { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; background: var(--mint); border-radius: 8px; }
.level-choice input { accent-color: var(--teal); }
.study-table-wrap { overflow-x: auto; margin-bottom: 10px; }
.study-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .85rem; white-space: nowrap; }
.study-table th { background: var(--mint); color: var(--teal); }
.study-table th, .study-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); }
.limit-input {
  width: 84px;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid #c7d2e5;
  border-radius: 7px;
  padding: 6px 8px;
}

@media (min-width: 681px) {
  .auth-panel { max-width: 480px; margin: min(13vh, 100px) auto 0; padding: 32px; }
  .auth-form { max-width: none; }
  .auth-form input { min-height: 44px; }
  .plans-page { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .plans-head { display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: 10px; margin-bottom: 18px; }
  .plans-head h1 { margin-top: 0; font-size: 2rem; }
  .plans-head .account-actions { margin-top: 0; }
  .account-menu { position: relative; }
  .account-menu .plan-actions { position: absolute; inset-inline-end: 0; z-index: 2; width: max-content;
    padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 18px #17243d1a; }
  .plans-list { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
  .plan-card { background: var(--paper); padding: 20px; max-width: 560px; }
  .plan-today { gap: 8px; }
  .plan-today > div { padding: 10px; }
  .plan-today dd { font-size: 1.1rem; }
  .question .prompt { margin-block: 12px; }
  .sound-question .prompt > .art { width: clamp(165px, 19vw, 230px); }
  #study-dialog { padding-top: 0; }
  .study-head { position: sticky; z-index: 2; top: 0; background: var(--paper); min-height: 63px; border-bottom: 1px solid var(--line); }
  .study-tabs { position: sticky; z-index: 1; top: 63px; background: var(--paper); padding: 10px 0; margin: 0; }
}

@media (min-width: 1000px) {
  main:has(#progress-summary:not([hidden])) { display: grid; grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start; gap: 12px 18px; }
  #game-controls { grid-column: 1 / -1; margin-bottom: 0; }
  #game { min-width: 0; }
  main:has(#progress-summary:not([hidden])) #game { grid-column: 1; grid-row: 2; }
  #progress-summary { grid-column: 2; grid-row: 2; padding: 14px; position: sticky; top: 16px; }
  #notice { grid-column: 1; }
  .progress-heading { display: grid; gap: 5px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 8px; }
  .sound-question { display: grid; grid-template-columns: minmax(160px, 38%) minmax(0, 1fr); column-gap: 24px;
    grid-template-areas: "round round" "title title" "prompt sequence" "prompt options" "actions actions"; }
  .sound-question > .round-head { grid-area: round; }
  .sound-question > .question-title { grid-area: title; }
  .sound-question > .prompt { grid-area: prompt; margin: 9px 0 0; }
  .sound-question > .sequence-controls { grid-area: sequence; }
  .sound-question > .sounds { grid-area: options; }
  .sound-question > .actions { grid-area: actions; }
  .sound-question .sounds { grid-template-columns: 1fr; }
  .sound-question .sound-pick { min-height: 46px; }
}

@media (max-width: 680px) {
  :root { background: #f4f6fa; }
  main { padding: 12px max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)); }
  .panel { border-radius: 19px; padding: 15px; box-shadow: 0 4px 15px #1a4d4e10; }
  .splash { padding: 23px 17px; }
  h1 { font-size: 1.55rem; }
  .lead { font-size: .94rem; }
  .auth-panel { margin: min(10svh, 72px) auto 0; max-width: 390px; }
  .auth-form { max-width: none; }
  .auth-form .plan-actions { margin: 0; }
  .auth-form .plan-actions > button { width: 100%; }

  .game-controls:not([hidden]) { display: grid; justify-content: stretch; gap: 6px; margin-bottom: 6px; }
  .study-nav { align-items: center; gap: 6px; }
  .study-nav > button { min-height: 44px; padding: 6px 10px; font-size: .85rem; background: #f8faff; }
  .study-nav #undo { margin-inline-start: auto; }
  .study-nav #study-options { display: block; margin-inline-start: auto; }
  .study-nav #undo:not([hidden]) + #study-options { margin-inline-start: 0; }
  .answer-controls { display: none; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); }
  .game-controls:has(#study-options[aria-expanded="true"]) .answer-controls { display: flex; }
  .progress-summary { padding: 5px 10px 8px; margin-bottom: 8px; border-radius: 12px; }
  .progress-heading { flex-wrap: nowrap; align-items: center; gap: 6px; }
  .progress-heading h2, .progress-heading span { font-size: .78rem; }
  .progress-heading span { margin-inline-start: auto; text-align: right; }
  .progress-toggle { display: block; border: 0; background: none; font-size: .78rem; min-height: 42px; color: var(--teal); }
  .progress-details { display: none; }
  .progress-expanded .progress-details { display: block; }
  .progress-bar { height: 5px; margin: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 3px; }

  .plans-page { background: transparent; border: 0; padding: 4px 0; box-shadow: none; }
  .plans-head { display: grid; grid-template-columns: 1fr auto; gap: 7px; align-items: start; }
  .plans-head > :first-child { grid-column: 1 / -1; }
  .account-actions { margin: 0; }
  .account-actions button, .account-menu summary { font-size: .84rem; padding-inline: 10px; }
  .account-menu { position: relative; }
  .account-menu .plan-actions { position: absolute; inset-inline-end: 0; z-index: 2; width: max-content; max-width: 80vw;
    padding: 7px; border-radius: 12px; background: var(--paper); box-shadow: 0 5px 22px #17243d2c; }
  .plans-list { grid-template-columns: 1fr; }
  .plan-card { background: var(--paper); border-radius: 17px; padding: 15px; }
  .plan-today > div { padding: 8px 5px; text-align: center; }
  .plan-main-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .plan-main-actions > button { padding-inline: 6px; }
  .plan-extras .plan-actions { display: grid; grid-template-columns: 1fr 1fr; }

  .round-head { margin-bottom: 8px; }
  .round-head .tag { padding: 3px 8px; }
  .round-head .counter { text-align: right; }
  .question h1 { font-size: 1.42rem; }
  .prompt { margin: 10px 0; justify-content: center; }
  .prompt > .art { width: clamp(128px, 27svh, 204px); }
  .prompt-play { width: 100%; min-height: 52px; }
  .question .instruction { margin: 9px 0 8px; }
  .pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 430px; margin-inline: auto; }
  .picture-pick { padding: 3px; }
  .picture-pick .art { width: 100%; }
  .sounds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sounds .sound-option { grid-template-columns: 1fr; }
  .sounds .sound-pick { min-height: 52px; }
  .option-preview { display: none; }
  .sequence-status { font-size: .8rem; }
  .sequence-play { flex: none; min-height: 44px; padding-inline: 9px; font-size: .82rem; }
  #tutorial-dialog { max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .tutorial-head { padding: 10px 12px 8px; }
  .tutorial-heading { display: grid; }
  #tutorial-content { padding: 12px; }
  #tutorial-exit { padding-inline: 8px; font-size: .82rem; }
  #tutorial-content .prompt > .art { width: clamp(114px, 25svh, 180px); }
  #tutorial-content .pictures { max-width: min(100%, 330px); }
  .tutorial-response .tutorial-primary, .tutorial-intro .tutorial-primary { width: 100%; }
  .question .actions { margin-top: 8px; }
  .self-grade-actions button { flex: 1; min-width: 0; }
  .report-question { border: 0; padding-inline: 0; font-size: .8rem; color: var(--muted); }

  .answer { grid-template-columns: minmax(74px, 34%) minmax(0, 1fr); gap: 10px; }
  .answer-copy { min-width: 0; overflow-wrap: anywhere; }
  .answer-comparison { grid-template-columns: 1fr; gap: 8px; }
  .comparison-card { padding: 9px; }
  .comparison-wrong .answer { grid-template-columns: 57px minmax(0, 1fr); }
  .comparison-wrong .term { font-size: 1.13rem; }
  .result { margin-bottom: 10px; font-size: .86rem; }
  .example { margin-top: 10px; padding: 10px 11px; }
  .feedback-tools { margin-top: 8px; }
  .feedback-tools button { font-size: .82rem; padding-inline: 8px; }
  body.showing-feedback main { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .feedback-next {
    position: fixed; z-index: 3; inset: auto 0 0; display: grid; gap: 3px;
    margin: 0; padding: 5px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -5px 18px #17243d13;
  }
  .feedback-next .primary { grid-row: 2; width: 100%; min-height: 47px; }
  .feedback-next .due { text-align: center; font-size: .73rem; }

  #study-dialog { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0;
    border: 0; border-radius: 0; padding: 0 14px max(18px, env(safe-area-inset-bottom)); }
  .study-head { position: sticky; top: 0; z-index: 2; min-height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
    background: var(--paper); border-bottom: 1px solid var(--line); }
  .study-head h2 { font-size: 1.14rem; }
  .study-head button { padding-inline: 11px; }
  .study-tabs { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 1; background: var(--paper);
    gap: 4px; padding-block: 8px; margin-top: 0; }
  .plan-section, .plan-advanced { padding: 10px 11px; }
  .plan-save-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .plan-save-actions > button { padding-inline: 7px; }
  .plan-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .auth-form input, .plan-fields :is(input, select), .plan-fields .limit-input, .study-table .limit-input { min-width: 0; width: 100%; }
  .search-keyword, .search-filters { grid-column: 1 / -1; }
  .search-filters .audio-toggle { padding: 0 8px 0 0; }
  .search-filters .audio-toggle input { order: -1; width: 17px; height: 17px; }
  .search-form > .primary { width: 100%; }
  .plan-name, .plan-order, .limit-input { font-size: 16px; min-height: 44px; }
  .level-choice { min-height: 44px; }
  .study-table th, .study-table td { padding: 5px; white-space: normal; }
  .study-table td:first-child { width: 20%; }
  .metric-table, .metric-table tbody { display: block; }
  .metric-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .metric-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 8px;
    background: #f6f8fc; border: 1px solid var(--line); border-radius: 11px; margin-bottom: 6px; }
  .metric-table td { min-width: 0; overflow-wrap: anywhere; border-bottom: 0; font-weight: 650; }
  .metric-table td:first-child { grid-column: 1 / -1; width: auto; color: var(--teal); border-bottom: 1px solid var(--line); }
  #study-dialog[open] .metric-table td:not(:first-child)::before {
    display: block; content: attr(data-label); color: var(--muted); font-size: .75rem; font-weight: 400;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .playing .option-wave { animation: option-pulse 650ms ease-in-out infinite alternate; }
}
@keyframes option-pulse {
  from { transform: scaleY(.52); }
  to { transform: scaleY(1); }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  color: #e5ecf8;
  background: #101622;
  --ink: #e5ecf8;
  --navy: #263751;
  --muted: #acbad0;
  --teal: #adc3ff;
  --mint: #25334d;
  --line: #36445c;
  --paper: #1a2435;
}
[data-theme="dark"] body { background: #101622; }
[data-theme="dark"] :is(.panel, .progress-summary, .feedback-next) { border-color: var(--line); box-shadow: none; }
[data-theme="dark"] :is(.modes, .study-nav > button, .stat, .plan-card, .example, .metric-table tbody tr,
  .picture-pick, .sound-pick, .plan-name, .plan-order, .limit-input, .week-quotas .limit-input:disabled) {
  background: #222e42; border-color: var(--line); color: var(--ink);
}
[data-theme="dark"] :is(.plans-page, .report-question) { background: transparent; }
[data-theme="dark"] :is(.play, .study-tabs button) { background: #2b3c59; color: #cfdbf2; }
[data-theme="dark"] :is(.primary, .modes button[aria-pressed="true"], .study-tabs button[aria-pressed="true"]) {
  background: #3e62d8; color: #fff;
}
[data-theme="dark"] .primary:hover:enabled { background: #4d6fe3; }
[data-theme="dark"] :is(.secondary, .audio-toggle) { color: var(--ink); border-color: var(--line); }
[data-theme="dark"] :is(.secondary:hover:enabled, .play:hover, .play.playing, .sound-pick.playing) {
  background: #354b71; color: #e5ecf8;
}
[data-theme="dark"] :is(.picture-pick, .sound-pick)[aria-pressed="true"] { background: #34486f; border-color: var(--teal); }
[data-theme="dark"] .option-number { background: #354562; color: var(--ink); }
[data-theme="dark"] .option-wave { color: #8ca0c4; }
[data-theme="dark"] .sounds .sound-pick.playing { background: #4b3a22; color: #fff0c8; border-color: #e1a946; }
[data-theme="dark"] .playing .option-number { background: #f4be54; color: #302411; }
[data-theme="dark"] .playing .option-wave { color: #f4be54; }
[data-theme="dark"] :is(.success, .comparison-right) { background: #1d3b32; color: #b0e5ca; }
[data-theme="dark"] :is(.incorrect, .comparison-wrong) { background: #462a33; color: #ffd1d1; }
[data-theme="dark"] .retry { background: #493721; color: #ffe3af; }
[data-theme="dark"] :is(.notice, .plan-delete) { color: #ffc0a8; }
[data-theme="dark"] .theme-toggle[aria-pressed="true"] { background: #34486f; }

.help-mobile { display: none; }
.study-head-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.plan-empty { width: min(100%, 560px); }
.plan-empty h2 { margin: 0 0 9px; font-size: clamp(1.16rem, 2vw, 1.45rem); }
.plan-empty .lead { margin-bottom: 14px; }
.control-tooltip {
  position: fixed;
  z-index: 12;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid #426096;
  background: #17243d;
  color: #fff;
  box-shadow: 0 4px 12px #10162242;
  font-size: .83rem;
  line-height: 1.55;
  pointer-events: none;
}
#control-help-dialog {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, 530px);
  max-width: none;
  max-height: min(78dvh, 640px);
  margin: 0 auto;
  padding: 0 15px max(14px, env(safe-area-inset-bottom));
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
}
#control-help-dialog::backdrop { background: #101b327c; }
.control-help-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.control-help-head h2 { margin: 0; font-size: 1.12rem; }
.control-help-list { display: grid; gap: 0; margin: 0; }
.control-help-list > div { display: grid; gap: 3px; padding: 11px 1px; border-bottom: 1px solid var(--line); }
.control-help-list > div:last-child { border-bottom: 0; }
.control-help-list dt { font-size: .93rem; font-weight: 750; }
.control-help-list dd { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.55; }
@media (max-width: 680px), (hover: none) and (pointer: coarse) {
  .help-mobile { display: inline-block; color: var(--teal); padding-inline: 9px; font-size: .83rem; }
  .auth-tools { display: flex; flex-wrap: wrap; gap: 7px; }
}