:root {
  --ink: #17323c;
  --ink-2: #36525b;
  --paper: #f2ecdf;
  --paper-light: #fffaf0;
  --paper-deep: #e5dbc8;
  --vermilion: #dc5a42;
  --vermilion-dark: #a8382b;
  --sage: #75a58f;
  --sage-dark: #286c57;
  --ochre: #d8a43e;
  --line: #cfc2ab;
  --muted: #78827d;
  --danger: #b73f35;
  --shadow: 0 16px 32px rgba(18, 43, 52, 0.18);
  --shadow-soft: 0 7px 18px rgba(18, 43, 52, 0.11);
  --radius: 18px;
  --body-font: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --word-font: "Bookerly", Georgia, Cambria, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #b9afa0;
  font-family: var(--body-font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select { color: inherit; font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.55; }
svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 2px; }

.app-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 50px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 6%, rgba(216, 164, 62, 0.17), transparent 25%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.47), transparent 42%),
    var(--paper);
}

.app-shell::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.24;
  background-image: radial-gradient(rgba(23, 50, 60, 0.25) 0.55px, transparent 0.55px);
  background-size: 9px 9px;
  mask-image: linear-gradient(to bottom, #000, transparent 64%);
}

.titlebar {
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 6px 10px;
  color: var(--paper-light);
  background: var(--ink);
  -webkit-app-region: drag;
}

.brand-lockup {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  -webkit-app-region: no-drag;
}

.brand-seal {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  color: #fff8eb;
  background: var(--vermilion);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 9px 5px 9px 5px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.11);
  font-family: serif;
  font-size: 18px;
  font-weight: 800;
}

.brand-copy { display: grid; gap: 1px; }
.brand-copy strong { font-size: 14px; letter-spacing: 0.16em; }
.brand-copy small { max-width: 180px; overflow: hidden; color: #a9bbc0; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.window-actions { display: flex; gap: 3px; -webkit-app-region: no-drag; }
.icon-button {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #cbd7d9;
  background: transparent;
  border-radius: 9px;
}
.icon-button:hover { color: #fff; background: rgba(255,255,255,.1); }
.close-button:hover { background: var(--vermilion); }
.icon-button svg { width: 17px; }

.main-content { position: relative; min-height: 0; overflow: hidden; }
.screen { width: 100%; height: 100%; padding: 12px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.screen.is-active { animation: page-in 160ms ease-out both; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.home-screen { display: grid; grid-template-rows: auto minmax(145px, 1fr) auto auto auto; gap: 8px; overflow: auto; }
.home-heading { display: flex; align-items: end; justify-content: space-between; min-height: 54px; }
.home-heading .eyebrow { color: var(--vermilion-dark); font-size: 7px; font-weight: 900; letter-spacing: .22em; }
.home-heading h1 { margin: 3px 0 0; font-family: var(--word-font); font-size: 21px; font-weight: 600; letter-spacing: .015em; }
.book-chip {
  display: flex;
  gap: 3px;
  align-items: center;
  max-width: 115px;
  padding: 6px 7px;
  overflow: hidden;
  color: var(--ink-2);
  background: rgba(255,250,240,.68);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 9px;
  white-space: nowrap;
}
.book-chip span { overflow: hidden; text-overflow: ellipsis; }
.book-chip svg { width: 12px; }

.entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; min-height: 0; }
.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 13px 13px 12px;
  overflow: hidden;
  text-align: left;
  border: 1px solid rgba(23,50,60,.12);
  border-radius: 18px 8px 18px 8px;
  box-shadow: var(--shadow-soft);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.entry-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.entry-card::after {
  position: absolute;
  right: -23px;
  bottom: -34px;
  width: 100px;
  height: 100px;
  content: "";
  border: 18px solid currentColor;
  border-radius: 50%;
  opacity: .07;
}
.learn-entry { color: #fffaf0; background: var(--ink); }
.review-entry { color: var(--ink); background: #f7e5d7; }
.entry-index { align-self: flex-end; font-family: var(--word-font); font-size: 9px; opacity: .55; }
.entry-icon { display: grid; width: 36px; height: 36px; margin: 1px 0 9px; place-items: center; background: rgba(255,255,255,.12); border-radius: 12px 6px 12px 6px; }
.review-entry .entry-icon { background: rgba(220,90,66,.12); }
.entry-icon svg { width: 21px; }
.entry-card strong { font-size: 24px; letter-spacing: .08em; }
.entry-card small { margin-top: 3px; opacity: .74; }
.entry-card small b { font-size: 13px; }
.entry-action { margin-top: auto; padding-top: 10px; font-size: 9px; font-weight: 700; }
.entry-action i { margin-left: 4px; font-size: 14px; font-style: normal; }

.today-strip {
  padding: 10px 12px;
  background: rgba(255,250,240,.66);
  border: 1px solid rgba(23,50,60,.1);
  border-radius: 14px 7px 14px 7px;
}
.today-strip-heading { display: flex; justify-content: space-between; font-size: 9px; }
.today-strip-heading span { color: var(--muted); }
.today-strip-heading strong { font-family: var(--word-font); }
.progress-track { height: 4px; margin: 7px 0 8px; overflow: hidden; background: var(--paper-deep); border-radius: 99px; }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--vermilion), var(--ochre)); border-radius: inherit; transition: width 260ms ease; }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); color: var(--muted); font-size: 8px; text-align: center; }
.metric-row span + span { border-left: 1px solid var(--line); }
.metric-row b { color: var(--ink); font-size: 10px; }

.home-actions { display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 5px; }
.text-action {
  min-height: 31px;
  padding: 5px 6px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 9px;
}
.text-action:hover { background: var(--paper-light); }
.text-action #mistakeBadge { display: inline-grid; min-width: 14px; height: 14px; place-items: center; color: #fff; background: var(--vermilion); border-radius: 99px; font-size: 7px; }
.primary-action { display: flex; gap: 4px; align-items: center; justify-content: center; color: #fff; background: var(--vermilion); border-color: var(--vermilion); }
.primary-action svg { width: 14px; }
.primary-action #quickActionLabel { color: inherit; background: transparent; }

.due-notice {
  position: static;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  color: #fff;
  background: rgba(23,50,60,.97);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  box-shadow: var(--shadow);
}
.due-pulse { width: 8px; height: 8px; background: var(--vermilion); border-radius: 50%; box-shadow: 0 0 0 5px rgba(220,90,66,.18); }
.due-notice p { display: grid; margin: 0; }
.due-notice strong { font-size: 10px; }
.due-notice small { color: #b6c4c6; font-size: 8px; }
.due-notice button { padding: 6px 8px; color: #fff; background: var(--vermilion); border-radius: 7px; font-size: 8px; }
.due-notice .notice-close { color: #b6c4c6; background: transparent; }
.snooze-wrap, .snooze-menu { position: relative; }
.snooze-options {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  display: grid;
  gap: 4px;
  min-width: 96px;
  padding: 6px;
  background: rgba(18, 36, 42, .98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.snooze-options[hidden] { display: none; }
.snooze-options button {
  width: 100%;
  padding: 7px 8px;
  color: #e8efef;
  background: rgba(255,255,255,.06);
  border: 0;
  border-radius: 7px;
  font-size: 8px;
  text-align: left;
  white-space: nowrap;
}
.snooze-options button:active { background: rgba(220,90,66,.28); }

.session-screen { display: grid; grid-template-rows: 40px 3px minmax(0, 1fr) 18px; gap: 7px; overflow: hidden; }
.quick-picker-screen { display: grid; grid-template-rows: 24px minmax(0, 1fr); padding: 0; overflow: hidden; background: var(--paper-light); }
.quick-picker-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 3px 8px; color: #c8d3d5; background: var(--ink); font-size: 7px; }
.quick-picker-bar button { padding: 0; color: #fff; background: transparent; font-family: var(--word-font); font-weight: 800; }
.quick-picker-bar span { justify-self: center; letter-spacing: .14em; }
.quick-picker-content { display: grid; grid-template-columns: 36px 1fr; gap: 7px 10px; align-content: center; padding: 10px 12px; }
.quick-spark { display: grid; grid-row: 1 / 3; width: 34px; height: 34px; place-items: center; align-self: center; color: #fff; background: var(--vermilion); border-radius: 11px 5px 11px 5px; font-family: var(--word-font); font-size: 17px; box-shadow: 0 0 0 5px rgba(220,90,66,.12); }
.quick-picker-content > div:nth-child(2) small { color: var(--vermilion-dark); font-size: 6px; font-weight: 900; letter-spacing: .16em; }
.quick-picker-content h2 { margin: 1px 0 0; font-family: var(--word-font); font-size: 18px; font-weight: 600; }
.quick-picker-grid { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 7px; }
.quick-picker-grid button { position: relative; display: grid; min-height: 65px; align-content: center; padding: 8px 10px; text-align: left; background: #fffaf0; border: 1px solid var(--line); border-radius: 12px 6px 12px 6px; box-shadow: var(--shadow-soft); }
.quick-picker-grid button:first-child { color: #fff; background: var(--ink); border-color: var(--ink); }
.quick-picker-grid button:disabled { opacity: .42; box-shadow: none; }
.quick-picker-grid kbd { position: absolute; top: 6px; right: 7px; opacity: .55; }
.quick-picker-grid strong { font-size: 17px; }
.quick-picker-grid small { margin-top: 2px; opacity: .68; font-size: 8px; }
.quick-picker-settings { grid-column: 1 / -1; justify-self: center; padding: 2px 6px; color: var(--muted); background: transparent; font-size: 7px; text-decoration: underline; text-underline-offset: 3px; }
.session-header, .subpage-header { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; }
.back-button { display: grid; width: 32px; height: 32px; place-items: center; color: var(--ink); background: rgba(255,250,240,.72); border: 1px solid var(--line); border-radius: 10px; }
.back-button svg { width: 17px; }
.session-header > div:nth-child(2), .subpage-header > div { display: grid; }
.session-header span, .subpage-header span { color: var(--vermilion-dark); font-size: 7px; font-weight: 900; letter-spacing: .16em; }
.session-header strong, .subpage-header h2 { margin: 1px 0 0; font-size: 16px; line-height: 1.1; }
.session-counter { display: flex; align-items: baseline; font-family: var(--word-font); font-size: 10px; }
.session-counter b { font-size: 20px; }
.session-progress { overflow: hidden; background: var(--paper-deep); border-radius: 99px; }
.session-progress i { display: block; width: 0; height: 100%; background: var(--vermilion); transition: width 180ms ease; }

.review-card {
  position: relative;
  min-height: 0;
  padding: 13px 14px 12px 20px;
  overflow: auto;
  background: rgba(255,250,240,.92);
  border: 1px solid rgba(23,50,60,.14);
  border-radius: 19px 8px 19px 8px;
  box-shadow: var(--shadow);
  scrollbar-width: none;
}
.review-card::-webkit-scrollbar { display: none; }
.review-card::before { position: absolute; top: 0; bottom: 0; left: 8px; width: 1px; content: ""; background: rgba(220,90,66,.22); }
.card-corner { position: absolute; top: -18px; right: -18px; width: 58px; height: 58px; border: 10px solid var(--ochre); border-radius: 50%; opacity: .12; }
.card-topline { display: flex; align-items: center; justify-content: space-between; min-height: 31px; }
.question-meta { display: flex; gap: 6px; align-items: center; }
.question-kind { color: var(--vermilion-dark); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.round-chip { padding: 4px 8px; color: var(--ink-2); background: var(--paper-deep); border-radius: 99px; font-size: 10px; }
.round-chip.mastery-dots { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; background: transparent; }
.round-chip.mastery-dots .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--sage); background: transparent; transition: background .2s, transform .2s; }
.round-chip.mastery-dots .dot.is-on { background: var(--sage-dark); border-color: var(--sage-dark); transform: scale(1.05); box-shadow: 0 0 0 3px rgba(40,108,87,.14); }
.sound-button { display: grid; width: 30px; height: 30px; place-items: center; color: var(--ink); background: var(--paper-deep); border-radius: 10px 5px 10px 5px; }
.sound-button:hover, .sound-button.is-playing { color: #fff; background: var(--vermilion); }
.sound-button svg { width: 17px; }

.prompt-area { display: grid; min-height: 72px; padding: 5px 3px 9px; place-content: center; text-align: center; }
.prompt-text { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.35; }
.prompt-text.is-english { font-family: var(--word-font); font-size: 31px; font-weight: 600; letter-spacing: .01em; }
.prompt-text.is-sentence { font-family: var(--word-font); font-size: 17px; font-weight: 600; line-height: 1.5; }
.prompt-note { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.choice-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.choice-button { position: relative; min-height: 46px; padding: 10px 10px 10px 34px; color: var(--ink); text-align: left; background: rgba(242,236,223,.7); border: 1px solid var(--line); border-radius: 10px; line-height: 1.4; font-size: 13px; }
.choice-button::before { position: absolute; top: 50%; left: 9px; display: grid; width: 19px; height: 19px; content: attr(data-key); transform: translateY(-50%); place-items: center; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; font-family: var(--word-font); font-size: 10px; }
.choice-button:hover { border-color: var(--ink-2); background: var(--paper-light); }
.choice-button.is-correct { color: var(--sage-dark); background: #e1eee6; border-color: var(--sage); }
.choice-button.is-wrong { color: var(--danger); background: #f8dfda; border-color: var(--vermilion); }

.answer-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 4px; }
.answer-field { position: relative; min-width: 0; }
.answer-field input { width: 100%; height: 39px; padding: 7px 8px; color: var(--ink); background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; font-family: var(--word-font); font-size: 19px; outline: 0; }
.answer-field input::placeholder { color: #9d9c91; font-family: var(--body-font); font-size: 10px; }
.answer-field input:focus { border-bottom-color: var(--vermilion); }
.submit-button { display: flex; gap: 6px; align-items: center; padding: 0 11px; color: #fff; background: var(--ink); border-radius: 10px; font-weight: 700; }
kbd { padding: 1px 4px; color: inherit; background: rgba(255,255,255,.13); border: 1px solid currentColor; border-radius: 4px; font-family: var(--body-font); font-size: 7px; font-weight: 500; opacity: .78; }

.comparison-panel { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); }
.comparison-heading { display: flex; justify-content: space-between; font-size: 8px; }
.comparison-heading span { padding: 2px 5px; color: #fff; background: var(--vermilion); border-radius: 99px; }
.character-diff { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.char-token { display: grid; min-width: 23px; padding: 3px; place-items: center; background: var(--paper-deep); border-radius: 6px; }
.char-token b { font-family: var(--word-font); font-size: 13px; }
.char-token small { font-size: 6px; }
.char-token.correct { color: var(--sage-dark); background: #e1eee6; }
.char-token.wrong, .char-token.missing, .char-token.extra { color: var(--danger); background: #f8dfda; }

.answer-reveal { margin-top: 8px; padding: 8px 9px; background: rgba(229,219,200,.56); border-radius: 10px; }
.answer-word-line { display: flex; gap: 8px; align-items: baseline; }
.answer-word-line strong { font-family: var(--word-font); font-size: 22px; }
.answer-word-line span { color: var(--muted); font-family: var(--word-font); font-size: 12px; }
.answer-reveal p { margin: 3px 0 0; line-height: 1.55; font-size: 13px; }
.answer-reveal .example-line { color: var(--ink-2); font-family: var(--word-font); font-size: 13px; line-height: 1.7; }
.answer-reveal .choice-feedback {
  margin: 6px 0 0; padding: 6px 8px; border-radius: 6px;
  background: rgba(239,68,68,.1); color: #dc2626; font-size: 12px; line-height: 1.5;
}
.word-knowledge { display: grid; gap: 4px; margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line); }

.rating-panel { margin-top: 8px; }
.rating-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.rating-grid button { display: grid; min-height: 42px; padding: 4px 2px; place-items: center; background: var(--paper-deep); border-radius: 8px; }
.rating-grid button:hover { color: #fff; background: var(--ink); }
.rating-grid button span { font-size: 9px; font-weight: 700; }
.rating-grid button small { color: var(--muted); font-size: 6px; }
.rating-grid button:hover small { color: #d8e1e2; }
.rating-grid kbd { position: absolute; margin-top: -27px; margin-left: -36px; border: 0; opacity: .45; }

.continue-button { width: 100%; min-height: 35px; margin-top: 8px; color: #fff; background: var(--vermilion); border-radius: 9px; font-weight: 800; }
.session-empty { display: grid; height: 100%; min-height: 220px; place-content: center; text-align: center; }
.session-empty > span { display: grid; width: 54px; height: 54px; margin: 0 auto 12px; place-items: center; color: #fff; background: var(--sage-dark); border-radius: 50%; font-size: 24px; box-shadow: 0 0 0 8px rgba(117,165,143,.18); }
.session-empty strong { font-family: var(--word-font); font-size: 22px; }
.session-empty p { max-width: 240px; margin: 6px auto 13px; color: var(--muted); }
.session-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.session-empty button { justify-self: center; padding: 8px 14px; color: #fff; background: var(--ink); border-radius: 8px; }
.session-empty #emptyLearnMoreButton,
.session-empty #emptyReviewMoreButton { background: var(--sage-dark); }
.tag-filter-panel { margin-top: 10px; }
.tag-filter-panel > div:first-child { display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; }
.tag-filter-panel strong { font-size: 10px; }
.tag-filter-panel small { color: var(--muted); font-size: 7px; }
.tag-filter-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-filter-grid label {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 8px; border: 1px solid var(--line, rgba(23,50,60,.14));
  border-radius: 999px; font-size: 8px; color: var(--ink-2); background: var(--paper-deep, rgba(0,0,0,.03));
}
.tag-filter-grid input { accent-color: var(--sage-dark); }
.data-actions { margin-top: 7px; }
.danger-action { color: var(--danger) !important; border-color: rgba(196, 84, 63, .45) !important; }
.enrich-dialog {
  width: min(92vw, 360px); border: 0; border-radius: 16px; padding: 18px 16px 14px;
  background: var(--paper); color: var(--ink); box-shadow: var(--shadow);
}
.enrich-dialog::backdrop { background: rgba(10, 18, 22, .45); }
.enrich-preview-summary { margin: 8px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.enrich-preview-list {
  max-height: 180px; overflow: auto; display: grid; gap: 8px;
  margin-bottom: 12px; text-align: left;
}
.enrich-preview-list article {
  padding: 8px 9px; border: 1px solid rgba(23,50,60,.1); border-radius: 10px; background: var(--paper-deep, rgba(0,0,0,.03));
}
.enrich-preview-list strong { display: block; font-size: 12px; }
.enrich-preview-list small { color: var(--muted); font-size: 8px; line-height: 1.45; }
.keyboard-hint { display: flex; align-items: center; justify-content: center; gap: 13px; color: var(--muted); font-size: 7px; }
.keyboard-hint kbd { background: transparent; }
.quick-bar { display: none; }

.settings-screen, .stats-screen, .mistakes-screen { padding-top: 9px; }
.subpage-header { position: sticky; z-index: 3; top: -9px; min-height: 46px; margin-bottom: 9px; padding: 5px 0; background: linear-gradient(var(--paper) 80%, transparent); }
.subpage-header h2 { font-size: 19px; }
.subpage-header > small { color: var(--muted); }
.save-settings { padding: 7px 10px; color: #fff; background: var(--vermilion); border-radius: 8px; font-weight: 700; }
.settings-form { display: grid; gap: 10px; padding-bottom: 18px; }
.settings-group { padding: 12px; background: rgba(255,250,240,.7); border: 1px solid rgba(23,50,60,.12); border-radius: 16px 7px 16px 7px; box-shadow: var(--shadow-soft); }
.settings-group > header { display: grid; grid-template-columns: 27px 1fr auto; gap: 7px; align-items: center; margin-bottom: 10px; }
.settings-group > header > span { display: grid; width: 26px; height: 26px; place-items: center; color: #fff; background: var(--ink); border-radius: 8px 4px 8px 4px; font-family: var(--word-font); font-size: 8px; }
.settings-group header h3, .settings-group header p { margin: 0; }
.settings-group header h3 { font-size: 13px; }
.settings-group header p { margin-top: 1px; color: var(--muted); font-size: 7px; }
.settings-group header em { padding: 2px 5px; color: var(--vermilion-dark); background: #f6ded5; border-radius: 99px; font-size: 7px; font-style: normal; }
.setting-field, .toggle-field { display: grid; grid-template-columns: 105px 1fr; align-items: center; min-height: 35px; border-top: 1px solid rgba(207,194,171,.65); }
.setting-field > span, .toggle-field > span { color: var(--ink-2); font-size: 9px; }
.setting-field input, .setting-field select { width: 100%; height: 28px; padding: 3px 7px; color: var(--ink); background: rgba(242,236,223,.76); border: 1px solid var(--line); border-radius: 7px; outline: 0; }
.setting-field input:focus, .setting-field select:focus { border-color: var(--vermilion); }
.settings-book-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0 2px; }
.settings-book-picker button { min-height: 38px; padding: 6px 7px; color: var(--ink-2); text-align: left; background: var(--paper-deep); border: 1px solid transparent; border-radius: 8px 4px 8px 4px; }
.settings-book-picker button strong, .settings-book-picker button small { display: block; }
.settings-book-picker button strong { font-size: 11px; }
.settings-book-picker button small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.settings-book-picker button.is-active { color: var(--ink); background: #e0ebe5; border-color: var(--sage); box-shadow: inset 3px 0 0 var(--sage-dark); }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.two-fields .setting-field, .two-fields .toggle-field { grid-template-columns: 1fr; gap: 3px; padding: 6px 0; }
.wide-secondary { width: 100%; min-height: 31px; margin-top: 7px; color: var(--ink); background: transparent; border: 1px dashed var(--ink-2); border-radius: 8px; font-weight: 700; }
.wide-secondary:hover { background: var(--paper-deep); }
a.wide-secondary { display: grid; place-items: center; box-sizing: border-box; padding: 0 8px; color: var(--sage-dark); text-decoration: none; border-style: solid; }
a.wide-secondary:hover { background: rgba(40,108,87,.08); }

.pay-qr-overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(40,33,22,.5); backdrop-filter: blur(3px); }
.pay-qr-card { padding: 22px; text-align: center; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.pay-qr-card h3 { margin: 0 0 14px; font-size: 15px; }
.pay-qr-card img { display: block; margin: 0 auto 12px; border-radius: 8px; }
.pay-qr-card p { margin: 0 0 12px; font-size: 12px; color: var(--ink-2); }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 5px; }
.check-grid label { position: relative; }
.check-grid input { position: absolute; opacity: 0; }
.check-grid span { display: block; padding: 7px; color: var(--muted); text-align: center; background: var(--paper-deep); border: 1px solid transparent; border-radius: 8px; font-size: 8px; }
.check-grid input:checked + span { color: var(--ink); background: #e0ebe5; border-color: var(--sage); font-weight: 700; }
.toggle-field { position: relative; }
.toggle-field input { position: absolute; right: 0; opacity: 0; }
.toggle-field i { justify-self: end; width: 34px; height: 19px; padding: 2px; background: #c8c4b9; border-radius: 99px; transition: background 120ms ease; }
.toggle-field i::after { display: block; width: 15px; height: 15px; content: ""; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 120ms ease; }
.toggle-field input:checked + i { background: var(--sage-dark); }
.toggle-field input:checked + i::after { transform: translateX(15px); }
.setting-note { margin: 7px 0 0; color: var(--muted); font-size: 7px; line-height: 1.55; overflow-wrap: anywhere; }
.setting-note[data-status="ok"] { color: var(--sage-dark); }
.setting-note[data-status="error"] { color: var(--danger); font-size: 8px; }
.secret-field input { letter-spacing: .12em; }
.account-status { margin: 6px 0; padding: 7px 9px; font-size: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-deep); color: var(--ink-2); overflow-wrap: anywhere; }
.account-status[data-state="in"] { color: var(--sage-dark); border-color: var(--sage-dark); background: rgba(40,108,87,.08); }
.knowledge-row { display: flex; gap: 8px; align-items: baseline; margin: 5px 0; flex-wrap: wrap; }
.knowledge-row[hidden] { display: none; }
.knowledge-tag { flex: none; font-size: 8px; padding: 2px 7px; border-radius: 999px; background: var(--sage-dark); color: #fff; letter-spacing: .04em; }
#relatedDialogMeaning { white-space: pre-wrap; }
.auth-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(40,33,22,.5); backdrop-filter: blur(3px); }
.auth-overlay[hidden] { display: none; }
.auth-card { width: 86%; max-width: 320px; padding: 22px 20px; background: var(--paper); border-radius: 16px; box-shadow: 0 24px 60px rgba(40,33,22,.32); text-align: center; }
.auth-card .loading-mark { display: inline-flex; margin-bottom: 8px; }
.auth-card h2 { margin: 4px 0; font-size: 15px; color: var(--ink-1); }
.auth-sub { font-size: 9px; color: var(--muted); margin-bottom: 14px; }
.auth-field { display: block; text-align: left; margin-bottom: 10px; }
.auth-field span { display: block; font-size: 8px; color: var(--ink-2); margin-bottom: 4px; }
.auth-field input { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-deep); font-size: 10px; box-sizing: border-box; }
.auth-code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; margin-bottom: 10px; }
.auth-code-row .auth-field { margin-bottom: 0; }
.auth-code-send { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-deep); color: var(--ink-1); font-size: 8px; white-space: nowrap; cursor: pointer; }
.auth-code-send:disabled { opacity: .55; cursor: not-allowed; }
.auth-error { color: #b0413e; font-size: 8px; margin: 2px 0 10px; }
.auth-actions { display: grid; gap: 8px; margin-top: 6px; }
.code-field-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.code-field-row .setting-field { border-top: 1px solid rgba(207,194,171,.65); }
.code-field-row .wide-secondary { min-height: 32px; white-space: nowrap; }
.auth-primary { padding: 10px; border: none; border-radius: 9px; background: var(--sage-dark); color: #fff; font-size: 10px; cursor: pointer; }
.auth-secondary { padding: 10px; border: 1px solid var(--sage-dark); border-radius: 9px; background: transparent; color: var(--sage-dark); font-size: 10px; cursor: pointer; }
.auth-primary:disabled, .auth-secondary:disabled { opacity: .6; cursor: default; }
.auth-skip { margin-top: 12px; background: none; border: none; color: var(--muted); font-size: 8px; cursor: pointer; text-decoration: underline; }
.lookup-dialog { border: none; border-radius: 14px; padding: 18px; max-width: 320px; width: 86%; background: var(--paper); color: var(--ink-1); box-shadow: 0 24px 60px rgba(40,33,22,.28); }
.lookup-dialog::backdrop { background: rgba(40,33,22,.34); }
.lookup-status { font-size: 9px; color: var(--muted); margin: 8px 0; }
.lookup-actions { margin-top: 12px; }
.lookup-actions .tutor-button { width: 100%; }
.lookup-dialog .example-line { color: var(--ink-2); font-size: 9px; margin-top: 6px; }
.tutor-panel { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: grid; gap: 8px; }
.tutor-actions { display: flex; gap: 8px; }
.tutor-button { flex: 1; padding: 8px; border: 1px solid var(--sage-dark); border-radius: 8px; background: rgba(40,108,87,.08); color: var(--sage-dark); font-size: 9px; cursor: pointer; }
.tutor-button.ghost { border-color: var(--line); background: var(--paper-deep); color: var(--ink-2); }
.tutor-button:disabled { opacity: .55; cursor: default; }
.tutor-output { padding: 9px 10px; background: var(--paper-deep); border: 1px solid var(--line); border-radius: 8px; font-size: 9px; line-height: 1.7; color: var(--ink-1); white-space: pre-wrap; overflow-wrap: anywhere; }
.tutor-output[data-state="loading"] { color: var(--muted); }
.tutor-ask { display: flex; gap: 6px; }
.tutor-ask input { flex: 1; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 9px; }
.tutor-ask button { padding: 8px 12px; border: 1px solid var(--sage-dark); border-radius: 8px; background: var(--sage-dark); color: #fff; font-size: 9px; cursor: pointer; }
.subscription-box { margin: 8px 0; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-deep); }
.subscription-status { font-size: 8px; margin-bottom: 7px; color: var(--ink-2); }
.subscription-status[data-tier="pro"] { color: var(--ochre); font-weight: 600; }
.ai-advanced { margin: 6px 0; }
.ai-advanced summary { cursor: pointer; color: var(--muted); font-size: 7px; }
.ai-advanced .setting-field { margin-top: 6px; }
.diagnostic-card { display: flex; gap: 8px; align-items: center; padding: 8px; background: var(--paper-deep); border-radius: 8px; }
.status-dot { width: 9px; height: 9px; background: var(--ochre); border-radius: 50%; box-shadow: 0 0 0 4px rgba(216,164,62,.16); }
.diagnostic-card[data-status="ok"] .status-dot { background: var(--sage-dark); box-shadow: 0 0 0 4px rgba(40,108,87,.15); }
.diagnostic-card[data-status="error"] .status-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(183,63,53,.13); }
.diagnostic-card p { display: grid; margin: 0; }
.diagnostic-card small { margin-top: 2px; color: var(--muted); font-size: 7px; }

.stats-content { display: grid; gap: 10px; }
.goal-card { display: flex; gap: 14px; align-items: center; padding: 13px; background: var(--ink); color: #fff; border-radius: 17px 8px 17px 8px; box-shadow: var(--shadow); }
.goal-ring { display: grid; width: 78px; height: 78px; place-content: center; text-align: center; border: 6px solid rgba(255,255,255,.16); border-top-color: var(--vermilion); border-radius: 50%; }
.goal-ring strong { font-family: var(--word-font); font-size: 19px; }
.goal-ring span { color: #aabcc0; font-size: 7px; }
.goal-card p { margin: 4px 0; color: #bbc9cb; }
.goal-card b { color: #fff; font-size: 14px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-grid > div { padding: 11px; background: rgba(255,250,240,.72); border: 1px solid var(--line); border-radius: 12px 6px 12px 6px; }
.stats-grid span { display: block; color: var(--muted); font-size: 8px; }
.stats-grid strong { font-family: var(--word-font); font-size: 23px; }
.stats-grid small { margin-left: 3px; color: var(--muted); }
.week-card { padding: 11px; background: rgba(255,250,240,.72); border: 1px solid var(--line); border-radius: 12px; }
.week-card header { display: flex; justify-content: space-between; }
.week-card header small { color: var(--muted); font-size: 7px; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.week-day { display: grid; gap: 4px; text-align: center; }
.week-day i { height: 35px; align-self: end; background: var(--paper-deep); border-radius: 5px 5px 2px 2px; }
.week-day[data-level="1"] i { background: #b9d0c4; }
.week-day[data-level="2"] i { background: var(--sage); }
.week-day[data-level="3"] i { background: var(--sage-dark); }
.week-day span { color: var(--muted); font-size: 7px; }

.mistake-list { display: grid; gap: 7px; padding-bottom: 12px; }
.mistake-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 10px 11px; text-align: left; background: rgba(255,250,240,.72); border: 1px solid var(--line); border-radius: 12px 6px 12px 6px; }
.mistake-item span { display: grid; }
.mistake-item strong { font-family: var(--word-font); font-size: 16px; }
.mistake-item small { color: var(--muted); font-size: 8px; }
.mistake-item em { color: var(--vermilion-dark); font-size: 8px; font-style: normal; }
.empty-list { padding: 60px 20px; color: var(--muted); text-align: center; }

.toast { position: absolute; z-index: 20; right: 12px; bottom: 12px; left: 12px; padding: 9px 11px; color: #fff; text-align: center; background: rgba(23,50,60,.96); border-radius: 10px; box-shadow: var(--shadow); font-size: 9px; }
.loading-overlay { position: absolute; z-index: 30; inset: 50px 0 0; display: grid; place-content: center; text-align: center; background: var(--paper); transition: opacity 180ms ease, visibility 180ms ease; }
.loading-overlay.is-hidden { visibility: hidden; opacity: 0; }
.loading-mark { display: grid; width: 54px; height: 54px; margin: auto; place-items: center; color: #fff; background: var(--vermilion); border-radius: 17px 8px 17px 8px; font-family: serif; font-size: 27px; box-shadow: 0 0 0 9px rgba(220,90,66,.12); animation: breathe 1.3s ease-in-out infinite; }
.loading-overlay p { margin: 17px 0 0; color: var(--ink-2); max-width: 18rem; margin-inline: auto; line-height: 1.45; }
.loading-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.loading-overlay button { margin-top: 0; padding: 7px 10px; color: #fff; background: var(--ink); border-radius: 8px; }
.loading-overlay #retryWordbookButton { background: var(--vermilion); }
@keyframes breathe { 50% { transform: scale(.92) rotate(-2deg); } }

/* 极速模式是独立排版，不缩放完整页面。 */
body.quick-mode .app-shell { grid-template-rows: minmax(0, 1fr); background: var(--paper-light); }
body.quick-mode .titlebar { display: none; }
body.quick-mode .main-content { grid-row: 1; }
body.quick-mode .quick-picker-screen { display: grid; }
body.quick-mode .session-screen { grid-template-rows: 22px minmax(0, 1fr); gap: 0; padding: 0; }
body.quick-mode .session-header,
body.quick-mode .session-progress,
body.quick-mode .keyboard-hint { display: none; }
body.quick-mode .quick-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 3px 7px; color: #c8d3d5; background: var(--ink); font-size: 7px; }
body.quick-mode .quick-bar button { padding: 0; color: #fff; background: transparent; font-family: serif; font-weight: 800; }
body.quick-mode .quick-bar span { justify-self: center; }
body.quick-mode .review-card { padding: 7px 9px 7px 13px; border: 0; border-radius: 0; box-shadow: none; }
body.quick-mode .review-card::before { left: 5px; }
body.quick-mode .card-topline { min-height: 25px; }
body.quick-mode .sound-button { width: 25px; height: 25px; }
body.quick-mode .prompt-area { min-height: 48px; padding: 0 2px 4px; }
body.quick-mode .prompt-text { font-size: 14px; }
body.quick-mode .prompt-text.is-english { font-size: 25px; }
body.quick-mode .prompt-text.is-sentence { font-size: 13px; line-height: 1.45; }
body.quick-mode .prompt-note { display: none; }
body.quick-mode .choice-list { gap: 4px; }
body.quick-mode .choice-button { min-height: 32px; padding: 4px 4px 4px 25px; font-size: 8px; }
body.quick-mode .choice-button::before { left: 5px; width: 15px; height: 15px; }
body.quick-mode .answer-field input { height: 32px; font-size: 16px; }
body.quick-mode .submit-button { padding: 0 8px; font-size: 8px; }
body.quick-mode .comparison-panel { margin-top: 5px; padding-top: 4px; }
body.quick-mode .char-token { min-width: 19px; padding: 2px; }
body.quick-mode .answer-reveal { margin-top: 4px; padding: 4px 7px; }
body.quick-mode .answer-reveal .example-line { display: none; }
body.quick-mode .word-knowledge { display: none; }
body.quick-mode .rating-panel { margin-top: 4px; }
body.quick-mode .rating-grid { gap: 3px; }
body.quick-mode .rating-grid button { min-height: 31px; }
body.quick-mode .rating-grid button small { display: none; }
body.quick-mode .rating-grid kbd { display: none; }
body.quick-mode .continue-button { min-height: 29px; margin-top: 4px; }
body.quick-mode .session-empty { min-height: 160px; }
body.quick-mode .toast { right: 7px; bottom: 7px; left: 7px; }
body.quick-mode .loading-overlay { inset: 0; }

@media (max-height: 430px) {
  .home-screen { gap: 7px; }
  .home-heading { min-height: 45px; }
  .home-heading h1 { font-size: 18px; }
  .entry-card { padding: 10px; }
  .entry-icon { margin-bottom: 5px; }
  .today-strip { padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 词书总览：保持纸张编辑部风格，在 360px 宽度中提供真正可滚动的书架。 */
.library-screen { overflow: hidden; }
.library-header { flex: 0 0 auto; }
.library-import {
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 7px 10px; border-radius: 2px; font: 700 11px/1 var(--font-body); letter-spacing: .08em;
}
.library-content { height: calc(100% - 62px); overflow: auto; padding: 0 16px 18px; scrollbar-width: thin; }
.library-shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 9px;
  overflow-x: auto; padding: 4px 1px 12px; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.library-book {
  position: relative; min-height: 112px; padding: 12px 11px; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: color-mix(in srgb, var(--paper) 93%, var(--accent)); color: var(--ink); text-align: left;
  scroll-snap-align: start; border-radius: 2px; box-shadow: 3px 4px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}
.library-book::before { content: ""; position: absolute; inset: 5px auto 5px 5px; width: 2px; background: var(--accent); opacity: .7; }
.library-book small, .library-book span { display: block; color: var(--muted); font-size: 10px; }
.library-book strong { display: block; margin: 11px 0 8px 6px; font: 800 16px/1.15 var(--font-display); }
.library-book span { margin-left: 6px; }
.library-book.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.library-book.is-active small, .library-book.is-active span { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.library-book.is-active::after { content: "正在学习"; position: absolute; right: 8px; top: 8px; color: var(--accent-2); font-size: 8px; letter-spacing: .1em; }
.library-preview { border-top: 1px solid var(--line); padding-top: 12px; }
.library-preview > header { display: flex; align-items: end; justify-content: space-between; margin-bottom: 9px; }
.library-preview > header small { display: block; margin-bottom: 2px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.library-preview > header strong { font: 800 18px/1 var(--font-display); }
.library-preview > header span { font-size: 10px; color: var(--muted); }
.library-search input { width: 100%; border: 0; border-bottom: 1px solid var(--ink); background: transparent; padding: 8px 2px; color: var(--ink); font: 600 12px/1.2 var(--font-body); outline: none; }
.library-search input:focus { border-bottom-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.library-word-list { max-height: 213px; overflow-y: auto; margin-top: 7px; border-top: 1px solid var(--line); scrollbar-width: thin; }
.library-word-row { display: grid; grid-template-columns: 28px minmax(75px, .8fr) 1.2fr; gap: 7px; align-items: baseline; padding: 8px 2px; border-bottom: 1px dotted var(--line); }
.library-word-row > span { color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.library-word-row strong { font: 800 13px/1 var(--font-display); overflow-wrap: anywhere; }
.library-word-row small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.library-empty { padding: 24px 6px; color: var(--muted); text-align: center; font-size: 11px; }

.mnemonic-priority { margin-top: 10px; padding: 10px; border: 1px dashed var(--line); background: color-mix(in srgb, var(--paper) 82%, var(--accent-2)); }
.mnemonic-priority > div { display: flex; justify-content: space-between; align-items: baseline; }
.mnemonic-priority > div strong { font-size: 11px; }
.mnemonic-priority > div small { color: var(--muted); font-size: 9px; }
.mnemonic-priority ol { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.mnemonic-priority li { display: grid; grid-template-columns: 18px 1fr 24px 24px; align-items: center; min-height: 30px; padding: 0 3px; background: var(--surface); border: 1px solid var(--line); cursor: grab; }
.mnemonic-priority li.is-dragging { opacity: .45; }
.mnemonic-priority li > span { color: var(--muted); }
.mnemonic-priority li b { font-size: 10px; }
.mnemonic-priority li button { border: 0; background: transparent; color: var(--muted); font-weight: 900; }

.knowledge-link { border: 0; border-bottom: 1px dotted currentColor; padding: 0; margin: 0 3px 2px 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.knowledge-link:hover, .knowledge-link:focus-visible { color: var(--accent); border-bottom-style: solid; outline: none; }
.knowledge-link.ai-trigger { border-bottom-style: dashed; color: var(--muted); font-style: italic; }
.knowledge-link.ai-trigger:disabled { color: var(--muted); cursor: progress; opacity: .8; }

.related-dialog { width: min(300px, calc(100vw - 28px)); border: 1px solid var(--ink); border-radius: 3px; padding: 20px; background: var(--paper); color: var(--ink); box-shadow: 12px 14px 0 color-mix(in srgb, var(--ink) 18%, transparent); }
.related-dialog::backdrop { background: rgba(9, 25, 30, .45); backdrop-filter: blur(2px); }
.related-dialog-close { position: absolute; right: 9px; top: 7px; border: 0; background: transparent; color: var(--muted); font-size: 22px; }
.related-dialog-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.related-dialog-title { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.related-dialog-title strong { font: 900 29px/1 var(--font-display); }
.related-dialog-title button { border: 1px solid var(--line); border-radius: 50%; width: 32px; height: 32px; background: transparent; color: var(--ink); font-size: 10px; }
.related-dialog > small { display: block; min-height: 16px; margin-top: 3px; color: var(--muted); }
.related-dialog > p { margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.65; }

.ai-insight-card { padding: 13px; border: 1px solid var(--ink); background: color-mix(in srgb, var(--paper) 89%, var(--accent-2)); box-shadow: 4px 5px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.ai-insight-card > header { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.ai-insight-card > header small { display: block; color: var(--accent); font-size: 8px; letter-spacing: .12em; }
.ai-insight-card > header strong { display: block; margin-top: 3px; font: 800 14px/1.25 var(--font-display); }
.ai-insight-card > header span { white-space: nowrap; padding: 3px 5px; border: 1px solid var(--line); color: var(--muted); font-size: 8px; }
.ai-insight-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 11px; }
.ai-insight-actions button, .ai-mnemonic-start { min-height: 32px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 800 10px/1 var(--font-body); }
.ai-insight-actions button:hover, .ai-mnemonic-start { background: var(--ink); color: var(--paper); }
.ai-analysis-output { margin-top: 10px; padding: 10px 0; border-top: 1px dotted var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; white-space: pre-wrap; }
.ai-mnemonic-start { width: 100%; }

body.quick-mode .related-dialog { width: 280px; padding: 14px; }

/* ──────────────────────────────────────────────────────────────────────────
   主题选择器
   ────────────────────────────────────────────────────────────────────────── */
.theme-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.theme-option { position: relative; min-width: 0; cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option-card {
  position: relative;
  display: grid;
  min-height: 108px;
  grid-template-rows: 54px auto auto;
  gap: 3px;
  padding: 8px;
  overflow: hidden;
  color: var(--ink-2);
  background: rgba(255, 250, 240, .5);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.theme-option:hover .theme-option-card { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.theme-option input:focus-visible + .theme-option-card { outline: 2px solid var(--vermilion); outline-offset: 2px; }
.theme-option input:checked + .theme-option-card { color: var(--ink); border-color: var(--sage-dark); box-shadow: inset 0 0 0 1px var(--sage-dark), var(--shadow-soft); }
.theme-option-card > strong { font-size: 10px; }
.theme-option-card > small { color: var(--muted); font-size: 7px; }
.theme-option-card > u {
  position: absolute;
  top: 6px;
  right: 6px;
  display: none;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #041c21;
  background: #72f0c8;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}
.theme-option input:checked + .theme-option-card > u { display: grid; }
.theme-swatch { position: relative; display: block; overflow: hidden; border-radius: 8px; }
.theme-swatch b { position: absolute; display: block; border-radius: 5px; }
.theme-swatch-paper { background: linear-gradient(145deg, #fffaf0, #ddd0b8); border: 1px solid #c4b599; }
.theme-swatch-paper b { top: 9px; bottom: 9px; width: 26%; background: #17323c; box-shadow: 0 4px 8px rgba(23,50,60,.16); }
.theme-swatch-paper b:nth-child(1) { left: 7px; }
.theme-swatch-paper b:nth-child(2) { left: 37%; background: #edcdbd; }
.theme-swatch-paper b:nth-child(3) { right: 7px; width: 18%; background: #dc5a42; }
.theme-swatch-aurora {
  background:
    radial-gradient(circle at 72% 24%, rgba(100,255,211,.52), transparent 34%),
    linear-gradient(145deg, #06252d, #06151c);
  border: 1px solid rgba(161,255,231,.4);
  box-shadow: inset 0 0 18px rgba(82,238,197,.12);
}
.theme-swatch-aurora b { top: 9px; bottom: 9px; width: 27%; background: rgba(11,57,66,.72); border: 1px solid rgba(150,255,228,.28); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 5px 12px rgba(0,0,0,.28); }
.theme-swatch-aurora b:nth-child(1) { left: 7px; box-shadow: inset 0 0 12px rgba(77,239,199,.28); }
.theme-swatch-aurora b:nth-child(2) { left: 38%; }
.theme-swatch-aurora b:nth-child(3) { right: 7px; width: 18%; background: rgba(90,242,207,.42); }

/* ──────────────────────────────────────────────────────────────────────────
   薄荷极光玻璃：方案 1 的材质 + 方案 3 的信息密度
   ────────────────────────────────────────────────────────────────────────── */
html[data-theme="aurora-glass"] {
  color-scheme: dark;
  --ink: #effffc;
  --ink-1: #effffc;
  --ink-2: #bad8d3;
  --paper: #071b22;
  --paper-light: #0b252d;
  --paper-deep: #12323a;
  --surface: rgba(11, 42, 50, .72);
  --vermilion: #ff8c86;
  --vermilion-dark: #ffb5ae;
  --sage: #6cefc7;
  --sage-dark: #36c99d;
  --ochre: #7ce8d5;
  --line: rgba(184, 255, 238, .17);
  --muted: #84aaa5;
  --danger: #ff918b;
  --accent: #65f0c5;
  --accent-2: #6de1e3;
  --shadow: 0 18px 38px rgba(0, 8, 12, .5), inset 0 1px 0 rgba(224, 255, 248, .08);
  --shadow-soft: 0 9px 22px rgba(0, 8, 12, .3), inset 0 1px 0 rgba(224, 255, 248, .06);
  --body-font: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI Variable", sans-serif;
  --word-font: "Bahnschrift SemiBold", "Aptos Display", Georgia, serif;
  --font-body: var(--body-font);
  --font-display: var(--word-font);
}

html[data-theme="aurora-glass"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 8%, rgba(48, 224, 178, .24), transparent 34%),
    radial-gradient(circle at 5% 88%, rgba(44, 162, 164, .17), transparent 40%),
    #031117;
}

html[data-theme="aurora-glass"] :focus-visible { outline-color: var(--accent); }
html[data-theme="aurora-glass"] ::selection { color: #031a20; background: var(--accent); }

html[data-theme="aurora-glass"] .app-shell {
  grid-template-rows: 48px minmax(0, 1fr);
  background:
    radial-gradient(ellipse at 82% 5%, rgba(88, 248, 204, .24), transparent 38%),
    radial-gradient(ellipse at -8% 72%, rgba(37, 151, 157, .18), transparent 45%),
    linear-gradient(155deg, rgba(7, 31, 39, .96), rgba(3, 17, 23, .98));
}

html[data-theme="aurora-glass"] .app-shell::before {
  z-index: -1;
  opacity: .34;
  background-image:
    linear-gradient(rgba(139,255,230,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,255,230,.025) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 76%, transparent);
}

html[data-theme="aurora-glass"] .app-shell::after {
  position: absolute;
  z-index: -1;
  top: -38%;
  right: -46%;
  width: 130%;
  height: 92%;
  pointer-events: none;
  content: "";
  background: conic-gradient(from 205deg, transparent 0 38%, rgba(79, 244, 196, .16) 45%, rgba(89, 205, 212, .08) 51%, transparent 60%);
  filter: blur(24px);
  animation: aurora-breathe 8s ease-in-out infinite alternate;
}

@keyframes aurora-breathe {
  from { transform: translate3d(-2%, -1%, 0) rotate(-3deg); opacity: .72; }
  to { transform: translate3d(3%, 4%, 0) rotate(3deg); opacity: 1; }
}

html[data-theme="aurora-glass"] .titlebar {
  padding: 7px 8px 6px 11px;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(8, 34, 42, .82), rgba(5, 25, 32, .68));
  border-bottom: 1px solid rgba(185, 255, 239, .12);
  box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(24px) saturate(145%);
}

html[data-theme="aurora-glass"] .brand-seal {
  width: 29px;
  height: 29px;
  color: #dffff6;
  background: linear-gradient(145deg, rgba(93, 241, 199, .3), rgba(15, 72, 77, .52));
  border: 1px solid rgba(155,255,230,.52);
  border-radius: 9px;
  box-shadow: 0 0 18px rgba(81, 234, 193, .2), inset 0 1px rgba(255,255,255,.18);
}

html[data-theme="aurora-glass"] .brand-copy strong { color: #f2fffc; font-size: 14px; letter-spacing: .12em; }
html[data-theme="aurora-glass"] .brand-copy small { color: #78a49f; }
html[data-theme="aurora-glass"] .icon-button { color: #9bc3be; border: 1px solid transparent; }
html[data-theme="aurora-glass"] .icon-button:hover { color: #effffc; background: rgba(104, 239, 201, .11); border-color: rgba(161,255,229,.18); }
html[data-theme="aurora-glass"] .close-button:hover { color: #fff; background: rgba(255, 109, 105, .72); border-color: rgba(255,187,183,.4); }

html[data-theme="aurora-glass"] .screen { padding: 10px 12px 12px; scrollbar-color: rgba(100,239,202,.28) transparent; }
html[data-theme="aurora-glass"] .screen.is-active { animation: glass-page-in 280ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes glass-page-in { from { opacity: 0; transform: translateY(7px) scale(.99); } to { opacity: 1; transform: none; } }

html[data-theme="aurora-glass"] .home-screen {
  grid-template-rows: auto minmax(142px, 1fr) auto auto auto;
  gap: 8px;
}

html[data-theme="aurora-glass"] .home-heading {
  display: flex;
  min-height: 73px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 6px;
}

html[data-theme="aurora-glass"] .home-heading > div { order: 2; }
html[data-theme="aurora-glass"] .home-heading .eyebrow { color: var(--accent); font-size: 7px; letter-spacing: .2em; }
html[data-theme="aurora-glass"] .home-heading h1 {
  margin-top: 2px;
  color: #f5fffd;
  font-family: var(--body-font);
  font-size: 23px;
  font-weight: 780;
  letter-spacing: -.035em;
  text-shadow: 0 0 24px rgba(120,255,220,.12);
}

html[data-theme="aurora-glass"] .book-chip {
  order: 1;
  width: fit-content;
  max-width: 100%;
  min-height: 27px;
  padding: 5px 9px;
  color: #cce8e3;
  background: linear-gradient(135deg, rgba(24, 67, 75, .72), rgba(10, 43, 51, .62));
  border-color: rgba(160, 255, 231, .18);
  border-radius: 8px;
  box-shadow: inset 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.16);
  backdrop-filter: blur(16px);
}

html[data-theme="aurora-glass"] .entry-grid { gap: 9px; }
html[data-theme="aurora-glass"] .entry-card {
  min-height: 142px;
  padding: 13px;
  color: #effffc;
  background:
    radial-gradient(circle at 100% 0, rgba(107, 242, 205, .18), transparent 47%),
    linear-gradient(145deg, rgba(17, 58, 67, .82), rgba(7, 34, 42, .75));
  border: 1px solid rgba(165, 255, 232, .24);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(145%);
}

html[data-theme="aurora-glass"] .review-entry {
  background:
    radial-gradient(circle at 100% 0, rgba(102, 219, 222, .19), transparent 48%),
    linear-gradient(145deg, rgba(15, 53, 64, .84), rgba(8, 31, 43, .76));
  border-color: rgba(125, 224, 222, .23);
}

html[data-theme="aurora-glass"] .entry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(155,255,227,.5);
  box-shadow: 0 14px 28px rgba(0, 8, 12, .44), 0 0 24px rgba(77, 235, 194, .08), inset 0 1px rgba(255,255,255,.11);
}

html[data-theme="aurora-glass"] .entry-card::after { right: -30px; bottom: -42px; border-color: var(--accent); opacity: .045; }
html[data-theme="aurora-glass"] .entry-index { position: absolute; top: 10px; right: 11px; color: #7fa8a3; }
html[data-theme="aurora-glass"] .entry-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 29px;
  height: 29px;
  margin: 0;
  color: var(--accent);
  background: rgba(98, 239, 201, .1);
  border: 1px solid rgba(143,255,225,.15);
  border-radius: 9px;
}
html[data-theme="aurora-glass"] .entry-icon svg { width: 17px; }
html[data-theme="aurora-glass"] .entry-card strong { margin: 4px 0 0 37px; font-size: 16px; letter-spacing: .08em; }
html[data-theme="aurora-glass"] .entry-card small { display: flex; align-items: end; gap: 4px; margin-top: 12px; color: #99bab6; }
html[data-theme="aurora-glass"] .entry-card small b {
  color: #8ff5d5;
  font-family: var(--word-font);
  font-size: clamp(35px, 12vw, 46px);
  font-weight: 650;
  line-height: .92;
  text-shadow: 0 0 20px rgba(91, 241, 200, .22);
}
html[data-theme="aurora-glass"] .review-entry small b { color: #95e9e5; text-shadow: 0 0 20px rgba(95, 220, 224, .18); }
html[data-theme="aurora-glass"] .entry-action { color: #94bcb6; }
html[data-theme="aurora-glass"] .entry-action i { color: var(--accent); }

html[data-theme="aurora-glass"] .today-strip,
html[data-theme="aurora-glass"] .settings-group,
html[data-theme="aurora-glass"] .stats-grid > div,
html[data-theme="aurora-glass"] .week-card,
html[data-theme="aurora-glass"] .mistake-item,
html[data-theme="aurora-glass"] .ai-insight-card {
  color: var(--ink);
  background: linear-gradient(145deg, rgba(16, 52, 61, .72), rgba(8, 35, 43, .66));
  border: 1px solid rgba(171, 255, 234, .16);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(20px) saturate(135%);
}

html[data-theme="aurora-glass"] .today-strip { padding: 10px 11px; }
html[data-theme="aurora-glass"] .today-strip-heading span { color: #8eb4af; }
html[data-theme="aurora-glass"] .today-strip-heading strong { color: #eafff9; }
html[data-theme="aurora-glass"] .progress-track { height: 5px; background: rgba(169,255,234,.08); box-shadow: inset 0 1px 3px rgba(0,0,0,.28); }
html[data-theme="aurora-glass"] .progress-track i,
html[data-theme="aurora-glass"] .session-progress i {
  background: linear-gradient(90deg, #4edab1, #7bf2d4, #64dfe0);
  box-shadow: 0 0 12px rgba(91, 240, 200, .42);
}
html[data-theme="aurora-glass"] .metric-row { color: #83aaa4; }
html[data-theme="aurora-glass"] .metric-row span + span { border-color: rgba(180,255,237,.12); }
html[data-theme="aurora-glass"] .metric-row b { color: #f0fffb; }

html[data-theme="aurora-glass"] .home-actions {
  grid-template-columns: 1.38fr repeat(3, 1fr);
  gap: 5px;
  padding: 4px;
  background: rgba(5, 27, 34, .52);
  border: 1px solid rgba(173,255,235,.11);
  border-radius: 13px;
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}
html[data-theme="aurora-glass"] .text-action {
  min-height: 32px;
  color: #9fc4bf;
  background: transparent;
  border-color: transparent;
  border-radius: 9px;
}
html[data-theme="aurora-glass"] .text-action:hover { color: #f0fffb; background: rgba(112,239,205,.09); }
html[data-theme="aurora-glass"] .primary-action {
  color: #04241f;
  background: linear-gradient(135deg, #77f0cf, #55d6bb);
  box-shadow: 0 5px 16px rgba(64, 217, 177, .2), inset 0 1px rgba(255,255,255,.48);
}
html[data-theme="aurora-glass"] .text-action #mistakeBadge { background: var(--danger); }

html[data-theme="aurora-glass"] .due-notice {
  background: linear-gradient(145deg, rgba(19,63,71,.94), rgba(9,35,42,.94));
  border-color: rgba(167,255,233,.2);
  border-radius: 13px;
}
html[data-theme="aurora-glass"] .due-pulse { background: var(--accent); box-shadow: 0 0 0 5px rgba(101,240,197,.14), 0 0 16px rgba(101,240,197,.45); }
html[data-theme="aurora-glass"] .due-notice button { color: #06251f; background: var(--accent); }

html[data-theme="aurora-glass"] .session-header span,
html[data-theme="aurora-glass"] .subpage-header span { color: var(--accent); }
html[data-theme="aurora-glass"] .subpage-header {
  background: linear-gradient(180deg, rgba(6,26,33,.97) 78%, transparent);
}
html[data-theme="aurora-glass"] .back-button,
html[data-theme="aurora-glass"] .sound-button {
  color: #bce1dc;
  background: rgba(20, 60, 68, .68);
  border: 1px solid rgba(173,255,234,.17);
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
html[data-theme="aurora-glass"] .back-button:hover,
html[data-theme="aurora-glass"] .sound-button:hover,
html[data-theme="aurora-glass"] .sound-button.is-playing { color: #06261f; background: var(--accent); }
html[data-theme="aurora-glass"] .session-progress { background: rgba(170,255,234,.08); }

html[data-theme="aurora-glass"] .review-card {
  padding-left: 16px;
  color: var(--ink);
  background:
    radial-gradient(circle at 94% 2%, rgba(87, 235, 198, .13), transparent 32%),
    linear-gradient(145deg, rgba(13, 47, 56, .83), rgba(6, 29, 37, .82));
  border: 1px solid rgba(174,255,235,.2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(145%);
}
html[data-theme="aurora-glass"] .review-card::before { left: 8px; background: linear-gradient(transparent, var(--accent), transparent); box-shadow: 0 0 12px rgba(101,240,197,.28); }
html[data-theme="aurora-glass"] .card-corner { border-color: var(--accent); opacity: .07; }
html[data-theme="aurora-glass"] .question-kind { color: var(--accent); }
html[data-theme="aurora-glass"] .round-chip { color: #99beb8; background: rgba(149,255,228,.08); border: 1px solid rgba(167,255,233,.1); }
html[data-theme="aurora-glass"] .prompt-text { color: #f5fffd; text-shadow: 0 0 22px rgba(105,239,205,.12); }
html[data-theme="aurora-glass"] .prompt-note { color: #83aaa4; }

html[data-theme="aurora-glass"] .choice-button,
html[data-theme="aurora-glass"] .rating-grid button {
  color: #d8efeb;
  background: rgba(18, 57, 65, .64);
  border: 1px solid rgba(172,255,234,.14);
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
html[data-theme="aurora-glass"] .choice-button::before { color: #8fb8b2; border-color: rgba(171,255,235,.23); background: rgba(3,23,29,.32); }
html[data-theme="aurora-glass"] .choice-button:hover,
html[data-theme="aurora-glass"] .rating-grid button:hover { color: #05231e; background: var(--accent); border-color: #a9ffe9; }
html[data-theme="aurora-glass"] .choice-button.is-correct { color: #05251f; background: linear-gradient(135deg, #78efcc, #50d8b1); border-color: #a6ffe4; }
html[data-theme="aurora-glass"] .choice-button.is-wrong { color: #ffe7e5; background: rgba(190, 65, 65, .32); border-color: rgba(255,145,139,.6); }
html[data-theme="aurora-glass"] .answer-field input { color: #f1fffc; border-bottom-color: rgba(173,255,235,.34); }
html[data-theme="aurora-glass"] .answer-field input:focus { border-bottom-color: var(--accent); box-shadow: 0 7px 18px -12px var(--accent); }
html[data-theme="aurora-glass"] .submit-button,
html[data-theme="aurora-glass"] .continue-button { color: #04231e; background: linear-gradient(135deg, #78f1ce, #4dd5b2); box-shadow: 0 6px 18px rgba(62,214,174,.18); }
html[data-theme="aurora-glass"] .comparison-panel,
html[data-theme="aurora-glass"] .word-knowledge { border-color: rgba(178,255,237,.14); }
html[data-theme="aurora-glass"] .comparison-heading span { color: #04231e; background: var(--accent); }
html[data-theme="aurora-glass"] .char-token,
html[data-theme="aurora-glass"] .answer-reveal { color: #d8efeb; background: rgba(18,57,65,.63); border: 1px solid rgba(172,255,234,.1); }
html[data-theme="aurora-glass"] .answer-reveal .example-line { color: #b5d4cf; }
html[data-theme="aurora-glass"] .answer-reveal .choice-feedback { background: rgba(239,68,68,.2); color: #fca5a5; }
html[data-theme="aurora-glass"] .rating-grid button small { color: #7ea6a0; }

html[data-theme="aurora-glass"] .save-settings,
html[data-theme="aurora-glass"] .library-import { color: #04231e; background: var(--accent); border-color: var(--accent); border-radius: 8px; }
html[data-theme="aurora-glass"] .settings-group { padding: 11px; }
html[data-theme="aurora-glass"] .settings-group > header > span { color: #04231e; background: linear-gradient(145deg, #79f0ce, #4fd5b0); border-radius: 8px; }
html[data-theme="aurora-glass"] .settings-group header em { color: #a5f6df; background: rgba(100,239,201,.1); border: 1px solid rgba(151,255,226,.13); }
html[data-theme="aurora-glass"] .setting-field,
html[data-theme="aurora-glass"] .toggle-field { border-color: rgba(178,255,237,.11); }
html[data-theme="aurora-glass"] .setting-field > span,
html[data-theme="aurora-glass"] .toggle-field > span { color: #a9cbc6; }
html[data-theme="aurora-glass"] .setting-field input,
html[data-theme="aurora-glass"] .setting-field select,
html[data-theme="aurora-glass"] .tutor-ask input {
  color: #eafff9;
  background: rgba(4, 28, 35, .6);
  border-color: rgba(175,255,235,.15);
}
html[data-theme="aurora-glass"] .setting-field input:focus,
html[data-theme="aurora-glass"] .setting-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(101,240,197,.09); }
html[data-theme="aurora-glass"] select option { color: #effffc; background: #0b2730; }
html[data-theme="aurora-glass"] .settings-book-picker button,
html[data-theme="aurora-glass"] .check-grid span,
html[data-theme="aurora-glass"] .account-status,
html[data-theme="aurora-glass"] .subscription-box,
html[data-theme="aurora-glass"] .diagnostic-card,
html[data-theme="aurora-glass"] .tutor-output {
  color: #a9cbc6;
  background: rgba(5,31,38,.58);
  border-color: rgba(173,255,234,.13);
}
html[data-theme="aurora-glass"] .settings-book-picker button.is-active,
html[data-theme="aurora-glass"] .check-grid input:checked + span { color: #05231e; background: linear-gradient(135deg, #81f1d1, #56d8b6); border-color: #aaffe8; box-shadow: 0 7px 16px rgba(57,201,165,.13); }
html[data-theme="aurora-glass"] .settings-book-picker button.is-active small { color: #174b40; }
html[data-theme="aurora-glass"] .wide-secondary,
html[data-theme="aurora-glass"] .tutor-button { color: #b9ddd7; background: rgba(14,51,60,.48); border-color: rgba(165,255,231,.22); }
html[data-theme="aurora-glass"] .wide-secondary:hover,
html[data-theme="aurora-glass"] .tutor-button:hover { color: #04231e; background: var(--accent); }
html[data-theme="aurora-glass"] .toggle-field i { background: rgba(161,202,194,.23); box-shadow: inset 0 1px 4px rgba(0,0,0,.25); }
html[data-theme="aurora-glass"] .toggle-field input:checked + i { background: linear-gradient(90deg, #34bd94, #67e7c3); }
html[data-theme="aurora-glass"] .mnemonic-priority { background: rgba(5,30,37,.44); border-color: rgba(168,255,233,.18); border-radius: 10px; }
html[data-theme="aurora-glass"] .mnemonic-priority li { color: #cfe9e4; background: rgba(15,51,59,.64); border-color: rgba(169,255,233,.12); border-radius: 7px; }

html[data-theme="aurora-glass"] .theme-option-card { color: #aacbc6; background: rgba(5,31,39,.56); border-color: rgba(169,255,233,.13); }
html[data-theme="aurora-glass"] .theme-option input:checked + .theme-option-card { color: #f0fffb; border-color: rgba(120,244,209,.65); box-shadow: 0 0 0 1px rgba(99,239,200,.18), 0 10px 22px rgba(0,8,12,.26); }

html[data-theme="aurora-glass"] .goal-card {
  color: #effffc;
  background: radial-gradient(circle at 10% 20%, rgba(95,237,199,.17), transparent 35%), linear-gradient(145deg, rgba(14,52,61,.83), rgba(6,29,37,.84));
  border: 1px solid rgba(171,255,234,.18);
  border-radius: 16px;
}
html[data-theme="aurora-glass"] .goal-ring { border-color: rgba(172,255,234,.1); border-top-color: var(--accent); box-shadow: 0 0 22px rgba(72,225,185,.12), inset 0 0 18px rgba(72,225,185,.06); }
html[data-theme="aurora-glass"] .goal-card p { color: #9dbfba; }
html[data-theme="aurora-glass"] .week-day i { background: rgba(161,255,230,.08); }
html[data-theme="aurora-glass"] .week-day[data-level="1"] i { background: #276957; }
html[data-theme="aurora-glass"] .week-day[data-level="2"] i { background: #43a985; }
html[data-theme="aurora-glass"] .week-day[data-level="3"] i { background: #6cefc7; box-shadow: 0 0 10px rgba(108,239,199,.28); }
html[data-theme="aurora-glass"] .ai-insight-card { border-color: rgba(111,231,205,.28); }
html[data-theme="aurora-glass"] .ai-insight-actions button,
html[data-theme="aurora-glass"] .ai-mnemonic-start { color: #bce2dc; background: rgba(6,31,38,.48); border-color: rgba(160,255,231,.22); }
html[data-theme="aurora-glass"] .ai-insight-actions button:hover,
html[data-theme="aurora-glass"] .ai-mnemonic-start:hover { color: #04231e; background: var(--accent); }

html[data-theme="aurora-glass"] .library-content { padding-right: 12px; padding-left: 12px; }
html[data-theme="aurora-glass"] .library-book {
  color: #def4f0;
  background: linear-gradient(145deg, rgba(18,57,65,.8), rgba(7,34,41,.78));
  border-color: rgba(166,255,232,.15);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
html[data-theme="aurora-glass"] .library-book::before { background: var(--accent); }
html[data-theme="aurora-glass"] .library-book.is-active { color: #05231e; background: linear-gradient(145deg, #80efcf, #55d4b2); border-color: #afffea; }
html[data-theme="aurora-glass"] .library-book.is-active small,
html[data-theme="aurora-glass"] .library-book.is-active span { color: #245c50; }
html[data-theme="aurora-glass"] .library-book.is-active::after { color: #0c493a; }
html[data-theme="aurora-glass"] .library-preview,
html[data-theme="aurora-glass"] .library-word-list,
html[data-theme="aurora-glass"] .library-word-row { border-color: rgba(174,255,234,.13); }
html[data-theme="aurora-glass"] .library-search input { color: #effffc; border-color: rgba(172,255,234,.24); }

html[data-theme="aurora-glass"] .toast { color: #eafff9; background: rgba(8, 42, 49, .94); border: 1px solid rgba(168,255,233,.22); backdrop-filter: blur(18px); }
html[data-theme="aurora-glass"] .loading-overlay { background: radial-gradient(circle at 50% 38%, rgba(49,207,166,.14), transparent 28%), #061b22; }
html[data-theme="aurora-glass"] .loading-mark { color: #04231e; background: linear-gradient(145deg, #83f4d3, #4ed2ae); border-radius: 16px; box-shadow: 0 0 0 9px rgba(94,238,199,.08), 0 0 32px rgba(77,222,184,.2); }
html[data-theme="aurora-glass"] .loading-overlay button { color: #04231e; background: var(--accent); }

html[data-theme="aurora-glass"] .related-dialog,
html[data-theme="aurora-glass"] .lookup-dialog {
  color: #effffc;
  background: linear-gradient(145deg, rgba(15,52,61,.96), rgba(6,29,37,.97));
  border: 1px solid rgba(171,255,234,.22);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,6,10,.62), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(24px) saturate(140%);
}
html[data-theme="aurora-glass"] .related-dialog::backdrop,
html[data-theme="aurora-glass"] .lookup-dialog::backdrop { background: rgba(1,10,14,.62); backdrop-filter: blur(8px); }
html[data-theme="aurora-glass"] .related-dialog-title button { color: #d9f2ed; background: rgba(20,61,68,.62); border-color: rgba(173,255,234,.18); }

/* 极速小窗：保留方案 3 的题面优先排版。 */
html[data-theme="aurora-glass"] body.quick-mode .app-shell {
  grid-template-rows: minmax(0, 1fr);
  background:
    radial-gradient(circle at 86% -15%, rgba(90,244,203,.24), transparent 44%),
    linear-gradient(145deg, #08242c, #04161d);
}
html[data-theme="aurora-glass"] body.quick-mode .quick-picker-screen { background: transparent; }
html[data-theme="aurora-glass"] body.quick-mode .quick-picker-bar,
html[data-theme="aurora-glass"] body.quick-mode .quick-bar {
  min-height: 25px;
  color: #93bbb5;
  background: rgba(5, 29, 36, .72);
  border-bottom: 1px solid rgba(169,255,233,.13);
  backdrop-filter: blur(18px);
}
html[data-theme="aurora-glass"] body.quick-mode .quick-picker-content { background: transparent; }
html[data-theme="aurora-glass"] body.quick-mode .quick-spark { color: #04231e; background: var(--accent); border-radius: 10px; box-shadow: 0 0 0 5px rgba(100,239,200,.08), 0 0 18px rgba(100,239,200,.18); }
html[data-theme="aurora-glass"] body.quick-mode .quick-picker-grid button { color: #dff5f1; background: rgba(14, 49, 58, .7); border-color: rgba(169,255,233,.16); border-radius: 12px; }
html[data-theme="aurora-glass"] body.quick-mode .quick-picker-grid button:first-child { color: #04231e; background: linear-gradient(145deg, #7df0cf, #50d4af); border-color: #aaffe8; }
html[data-theme="aurora-glass"] body.quick-mode .session-screen { grid-template-rows: 25px minmax(0, 1fr); gap: 5px; padding: 5px; }
html[data-theme="aurora-glass"] body.quick-mode .quick-bar { border: 1px solid rgba(169,255,233,.13); border-radius: 10px; }
html[data-theme="aurora-glass"] body.quick-mode .review-card { padding: 7px 9px 7px 13px; border: 1px solid rgba(171,255,234,.2); border-radius: 14px; box-shadow: 0 12px 28px rgba(0,7,11,.38), inset 0 1px rgba(255,255,255,.05); }
html[data-theme="aurora-glass"] body.quick-mode .review-card::before { left: 5px; }
html[data-theme="aurora-glass"] body.quick-mode .prompt-text.is-english { color: #f3fffc; font-size: 28px; }
html[data-theme="aurora-glass"] body.quick-mode .choice-button { border-radius: 8px; }
html[data-theme="aurora-glass"] body.quick-mode .rating-grid button:last-child { color: #04231e; background: linear-gradient(145deg, #75efca, #49cfac); border-color: #a5ffe6; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="aurora-glass"] .app-shell::after { animation: none; }
}

/* ========== Capacitor / 手机 App 模块化布局 ========== */
body.is-native-app {
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* 不要在 body 上限制 touch-action，否则部分 WebView 会禁掉页面滚动 */
}
body.is-native-app input,
body.is-native-app textarea,
body.is-native-app [contenteditable="true"] { user-select: text; }

body.is-native-app .app-shell {
  grid-template-rows: calc(52px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) calc(58px + env(safe-area-inset-bottom, 0px));
  max-width: 100%;
  height: 100dvh;
  height: var(--vv-height, 100dvh);
  background: var(--paper-light);
}
body.is-native-app .app-shell::before { opacity: .08; }

body.is-native-app .titlebar {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px 12px;
  -webkit-app-region: no-drag;
}
body.is-native-app.keyboard-open .app-tabbar { display: none !important; }
body.is-native-app.keyboard-open .app-shell {
  grid-template-rows: calc(52px + env(safe-area-inset-top, 0px)) minmax(0, 1fr) 0;
}
body.is-native-app.keyboard-open .session-screen .review-card {
  padding-bottom: 12px;
}
body.is-native-app .window-actions .close-button,
body.is-native-app .desktop-only { display: none !important; }
body.is-native-app .native-only { display: block !important; }
body.is-native-app label.native-only,
body.is-native-app .toggle-field.native-only { display: flex !important; }

body.is-native-app .keyboard-hint,
body.is-native-app kbd { display: none !important; }

body.is-native-app .main-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 10px 12px 8px;
  overflow: hidden;
}
body.is-native-app .screen {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: 100%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

/* 底部模块导航 */
body.is-native-app .app-tabbar {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: stretch;
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
  background: #12262e;
  border-top: 1px solid rgba(255,255,255,.06);
  z-index: 8;
}
body.is-native-app .app-tabbar[hidden] { display: none !important; }
body.is-native-app .app-tabbar button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px;
  color: #8aa0a6;
  background: transparent;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}
body.is-native-app .app-tabbar button .tab-ico {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  font-family: var(--word-font);
  font-size: 14px;
  color: #d7e6e3;
}
body.is-native-app .app-tabbar button.is-active { color: #fff; }
body.is-native-app .app-tabbar button.is-active .tab-ico {
  color: #04231e;
  background: linear-gradient(145deg, #7aefcb, #45c9a8);
}

body.is-native-app.is-immersive .app-tabbar { display: none !important; }
body.is-native-app.is-immersive .app-shell {
  grid-template-rows: 52px minmax(0, 1fr);
}

/* 首页：大按键模块（整页可滚） */
body.is-native-app .home-screen {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  align-content: start;
  gap: 12px;
  padding-bottom: 12px;
}
body.is-native-app .home-heading h1 { font-size: 26px; line-height: 1.25; }
body.is-native-app .eyebrow { font-size: 10px; letter-spacing: .14em; }
body.is-native-app .entry-grid {
  grid-template-columns: 1fr;
  gap: 10px;
}
body.is-native-app .entry-card {
  min-height: 92px;
  padding: 16px 16px 14px;
  border-radius: 18px;
}
body.is-native-app .entry-card strong { font-size: 28px; }
body.is-native-app .entry-card small { font-size: 14px; }
body.is-native-app .entry-action { font-size: 13px; margin-top: 8px; }
body.is-native-app .home-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
body.is-native-app .home-actions .text-action {
  min-height: 48px;
  justify-content: center;
  border-radius: 14px;
  background: rgba(23,50,60,.06);
  font-size: 14px;
  font-weight: 650;
}
body.is-native-app .home-actions .primary-action {
  grid-column: 1 / -1;
  color: #fff;
  background: var(--ink);
}

/* 会话：优先一屏；溢出时卡片内可滚 */
body.is-native-app .session-screen {
  display: grid;
  grid-template-rows: 44px 3px minmax(0, 1fr);
  gap: 6px;
  overflow: hidden;
  touch-action: manipulation;
}
body.is-native-app .review-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding: 10px 12px 10px 14px;
  border-radius: 16px;
}
body.is-native-app .review-card .card-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: min-content;
  flex: 0 0 auto;
  overflow: visible;
}
body.is-native-app .prompt-area { min-height: 0; padding-bottom: 2px; }
body.is-native-app .prompt-text { font-size: 18px; line-height: 1.35; }
body.is-native-app .prompt-text.is-english { font-size: 30px; line-height: 1.15; }
body.is-native-app .prompt-note { font-size: 12px; }
body.is-native-app .choice-list { gap: 6px; }
body.is-native-app .choice-button {
  min-height: 46px;
  padding: 8px 10px 8px 36px;
  font-size: 15px;
  border-radius: 12px;
}
body.is-native-app .answer-field input { height: 46px; font-size: 18px; }
body.is-native-app .submit-button {
  min-height: 46px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
}

body.is-native-app .answer-reveal {
  margin-top: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  gap: 2px;
}
body.is-native-app .answer-word-line strong { font-size: 18px; }
body.is-native-app .answer-word-line span { font-size: 12px; }
body.is-native-app #answerMeaning {
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-native-app .example-line {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.3;
  opacity: .78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-native-app .word-knowledge {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
  padding-top: 4px;
}
body.is-native-app .knowledge-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px;
  align-items: start;
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
}
body.is-native-app .knowledge-tag {
  padding: 1px 5px;
  border-radius: 6px;
  font-size: 10px;
  white-space: nowrap;
}
body.is-native-app .knowledge-row > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.is-native-app .tutor-panel { margin-top: 2px; }
body.is-native-app .tutor-actions { gap: 6px; }
body.is-native-app .tutor-button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 13px;
}
body.is-native-app .tutor-output {
  max-height: 56px;
  overflow: auto;
  font-size: 12px;
  line-height: 1.35;
}

body.is-native-app .rating-panel { margin-top: auto; padding-top: 4px; }
body.is-native-app .rating-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
body.is-native-app .rating-grid button {
  min-height: 52px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
}
body.is-native-app .rating-grid button small { font-size: 10px; opacity: .75; }
body.is-native-app .continue-button {
  min-height: 48px;
  margin-top: auto;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
}

body.is-native-app .comparison-panel { margin-top: 2px; padding-top: 2px; }
body.is-native-app .char-token { min-width: 16px; padding: 1px; font-size: 12px; }

/* 子页：顶栏固定，内容区滚动 */
body.is-native-app .settings-screen,
body.is-native-app .stats-screen,
body.is-native-app .library-screen,
body.is-native-app .mistakes-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  touch-action: manipulation;
}
body.is-native-app .settings-screen > .subpage-header,
body.is-native-app .stats-screen > .subpage-header,
body.is-native-app .library-screen > .subpage-header,
body.is-native-app .mistakes-screen > .subpage-header,
body.is-native-app .library-header {
  flex: 0 0 auto;
}
body.is-native-app .settings-form,
body.is-native-app .stats-content,
body.is-native-app .mistake-list,
body.is-native-app .library-content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-bottom: 20px;
}
body.is-native-app .library-word-list {
  max-height: none;
}
body.is-native-app .settings-group { border-radius: 16px; }
body.is-native-app .subpage-header .back-button,
body.is-native-app .session-header .back-button {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}
body.is-native-app .wide-secondary,
body.is-native-app .save-settings {
  min-height: 44px;
  border-radius: 12px;
}

body.is-native-app .auth-card {
  width: min(100% - 28px, 400px);
  border-radius: 20px;
}
body.is-native-app .toast {
  left: 12px;
  right: 12px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

@media (max-height: 700px) {
  body.is-native-app .prompt-text.is-english { font-size: 26px; }
  body.is-native-app .choice-button { min-height: 42px; }
  body.is-native-app .rating-grid button { min-height: 46px; }
  body.is-native-app #answerMeaning { -webkit-line-clamp: 2; }
  body.is-native-app .example-line { -webkit-line-clamp: 1; }
}