/* 词间 v8.1 — a word-led study interface. */
:root {
  color-scheme: light;
  --royal: #1749df;
  --royal-hover: #103bbd;
  --royal-pale: #edf2ff;
  --royal-line: #a8baff;
  --gold: #ffdc55;
  --gold-hover: #ffe881;
  --ink: #151d2e;
  --ink-secondary: #4d5870;
  --ink-muted: #627086;
  --surface: #ffffff;
  --canvas: #f7f9fc;
  --surface-soft: #f2f5f9;
  --line: #dce2eb;
  --success: #176a50;
  --success-bg: #e9f5ef;
  --error: #a23f4c;
  --error-bg: #fff0f0;
  --warning: #79510c;
  --warning-bg: #fff5df;
}

html { scroll-behavior: smooth; }
body.redesign {
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.redesign ::selection { background: #cbd8ff; color: #111c3b; }
body.redesign h1,
body.redesign h2,
body.redesign h3 { color: var(--ink); letter-spacing: -.035em; }
body.redesign a,
body.redesign button,
body.redesign input { -webkit-tap-highlight-color: transparent; }
body.redesign a,
body.redesign button { transition: color .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease; }
body.redesign button:active,
body.redesign a:active { transform: translateY(1px); }
body.redesign a:focus-visible,
body.redesign button:focus-visible,
body.redesign input:focus-visible { outline: 3px solid var(--royal); outline-offset: 3px; }
body.redesign [disabled] { cursor: not-allowed; }
body.redesign .shadow-sm,
body.redesign .shadow-lg,
body.redesign .shadow-xl { box-shadow: none !important; }
body.redesign .rounded-2xl { border-radius: 12px; }
body.redesign .rounded-xl { border-radius: 9px; }
body.redesign .rounded-lg { border-radius: 6px; }

/* Translate utility colors from the older theme, including classes written by JS. */
body.redesign .bg-indigo-600,
body.redesign .bg-indigo-500 { background-color: var(--royal) !important; }
body.redesign .hover\:bg-indigo-700:hover { background-color: var(--royal-hover) !important; }
body.redesign .bg-indigo-50 { background-color: var(--royal-pale) !important; }
body.redesign .text-indigo-600,
body.redesign .text-indigo-700,
body.redesign .text-indigo-800 { color: var(--royal) !important; }
body.redesign .border-indigo-500 { border-color: var(--royal) !important; }
body.redesign .border-indigo-100,
body.redesign .border-indigo-300,
body.redesign .hover\:border-indigo-300:hover,
body.redesign .hover\:border-indigo-400:hover { border-color: var(--royal-line) !important; }
body.redesign .bg-slate-50 { background-color: var(--canvas) !important; }
body.redesign .bg-slate-100 { background-color: var(--surface-soft) !important; }
body.redesign .bg-slate-200 { background-color: #dce3ed !important; }
body.redesign .bg-white { background-color: var(--surface) !important; }
body.redesign .border-slate-100,
body.redesign .border-slate-200 { border-color: var(--line) !important; }
body.redesign .text-slate-900,
body.redesign .text-slate-800 { color: var(--ink) !important; }
body.redesign .text-slate-700,
body.redesign .text-slate-600 { color: var(--ink-secondary) !important; }
body.redesign .text-slate-500,
body.redesign .text-slate-400 { color: var(--ink-muted) !important; }
body.redesign .bg-rose-50 { background-color: var(--error-bg) !important; }
body.redesign .text-rose-600,
body.redesign .text-rose-700,
body.redesign .text-rose-900 { color: var(--error) !important; }
body.redesign .border-rose-100,
body.redesign .border-rose-200,
body.redesign .border-rose-500 { border-color: #c87d85 !important; }
body.redesign .bg-sky-50 { background-color: #edf6fa !important; }
body.redesign .text-sky-600 { color: #275c78 !important; }
body.redesign .bg-emerald-50 { background-color: var(--success-bg) !important; }
body.redesign .bg-emerald-500 { background-color: var(--success) !important; }
body.redesign .text-emerald-600,
body.redesign .text-emerald-700,
body.redesign .text-emerald-900 { color: var(--success) !important; }
body.redesign .border-emerald-100,
body.redesign .border-emerald-200,
body.redesign .border-emerald-500 { border-color: #72a893 !important; }
body.redesign .bg-amber-50 { background-color: var(--warning-bg) !important; }
body.redesign .text-amber-600,
body.redesign .text-amber-700 { color: var(--warning) !important; }
body.redesign .border-amber-200 { border-color: #d8bb7d !important; }
body.redesign .bg-violet-50 { background-color: #f0effb !important; }
body.redesign .text-violet-600 { color: #574b96 !important; }
body.redesign .bg-rose-500 { background-color: var(--error) !important; }
body.redesign .ring-2 { box-shadow: none !important; }

/* The brand and navigation use the same familiar web pattern on every page. */
body.redesign header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: none !important;
}
body.redesign header > div { max-width: 1260px; min-height: 72px; }
body.redesign header .brand-lockup { display: flex; align-items: baseline; gap: 10px; color: var(--ink); }
body.redesign header .brand-wordmark {
  font-size: 26px;
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1;
}
body.redesign header .brand-wordmark span { color: var(--royal); }
body.redesign header .brand-subtitle { color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: .03em; }
body.redesign header nav { align-self: stretch; gap: 8px; }
body.redesign header nav a {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 0 16px;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-secondary) !important;
  font-size: 14px;
  font-weight: 650;
}
body.redesign header nav a:hover { color: var(--royal) !important; }
body.redesign header nav a[aria-current="page"] { color: var(--royal) !important; }
body.redesign header nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 16px;
  bottom: 0;
  left: 16px;
  height: 3px;
  background: var(--royal);
  border-radius: 3px 3px 0 0;
}
body.redesign footer { background: var(--surface) !important; border-color: var(--line) !important; }

/* Primary and secondary actions are shared, with one exception inside the blue stage. */
body.redesign .primary-action,
body.redesign a.bg-indigo-600,
body.redesign button.bg-indigo-600 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--royal) !important;
  color: #fff !important;
  font-weight: 700;
}
body.redesign .primary-action:hover,
body.redesign a.bg-indigo-600:hover,
body.redesign button.bg-indigo-600:hover { background: var(--royal-hover) !important; }
body.redesign .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
}
body.redesign .secondary-action:hover { border-color: var(--royal-line); color: var(--royal); }

/* Home: one unmistakable signature, the word itself. */
.page-home .home-hero { background: var(--royal); color: #fff; }
.page-home .home-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  grid-template-rows: auto auto auto auto;
  gap: 0 48px;
  max-width: 1260px;
  padding-top: 42px;
  padding-bottom: 56px;
}
.page-home .hero-copy { display: contents; }
.page-home .hero-kicker {
  grid-column: 1 / -1;
  grid-row: 1;
  color: #e4eaff;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .03em;
}
.page-home .hero-title {
  grid-column: 1 / -1;
  grid-row: 2;
  width: fit-content;
  margin: 10px 0 0;
  color: #e4eaff !important;
  font-size: clamp(14px, 1.5vw, 19px);
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -.01em;
}
.page-home .hero-title span { color: inherit; }
.page-home .hero-title br { display: none; }
.page-home .word-stage {
  grid-column: 1 / -1;
  grid-row: 3;
  min-width: 0;
  margin-top: 10px;
  color: #fff;
}
.page-home .word-stage-top {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: #d9e3ff;
  font-size: 12px;
  font-weight: 600;
}
.page-home .word-stage-main { min-width: 0; }
.page-home .word-stage-word {
  display: block;
  margin: 0 0 8px;
  color: #fff;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(68px, 10vw, 132px);
  font-weight: 850;
  letter-spacing: 0;
  line-height: 1.08;
  overflow-wrap: normal;
  text-wrap: balance;
}
.page-home .word-stage-word.is-long {
  font-size: clamp(48px, 6.9vw, 92px);
  line-height: 1.14;
}
.page-home .word-stage-meaning { display: inline-block; vertical-align: baseline; font-size: clamp(17px, 2.3vw, 27px); }
.page-home .word-stage-meaning {
  display: block;
  margin-top: 13px;
  color: #e7edff;
  font-size: 18px;
  font-weight: 550;
}
.page-home .word-stage-main { transition: opacity .32s ease, transform .32s ease; }
.page-home .word-stage-main.is-changing { opacity: 0; transform: translateY(9px); }
.page-home .word-stage-example {
  margin-top: 20px;
  color: #dce5ff;
  font-size: 15px;
  line-height: 1.7;
  max-width: 650px;
}
.page-home .word-stage-example small {
  display: block;
  margin-top: 3px;
  color: #c9d6ff;
  font-size: 13px;
}
.page-home .word-stage-footer {
  display: none;
}
.page-home .hero-actions {
  grid-column: 1;
  grid-row: 4;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.page-home .hero-actions .primary-action {
  min-width: 248px;
  min-height: 58px;
  padding: 14px 26px;
  background: var(--gold) !important;
  border-color: var(--gold);
  color: #111c36 !important;
  font-size: 18px;
  font-weight: 800;
  border-radius: 6px;
}
.page-home .hero-actions .primary-action:hover { background: var(--gold-hover) !important; border-color: var(--gold-hover); }
.page-home .hero-actions .secondary-action {
  min-height: 52px;
  background: transparent;
  color: #fff;
  border-color: #91abf9;
}
.page-home .hero-actions .secondary-action:hover { background: #ffffff1f; border-color: #fff; }
.page-home .hero-description {
  grid-column: 2;
  grid-row: 4;
  align-self: end;
  max-width: 280px;
  margin: 32px 0 0;
  padding-left: 20px;
  border-left: 1px solid #a8baff;
  color: #e0e8ff;
  font-size: 14px;
  line-height: 1.7;
}
.page-home .hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 27px max(24px, calc((100vw - 1212px) / 2));
  background: #fff;
  color: var(--ink);
}
.page-home .hero-metric {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 20px;
  border-right: 1px solid var(--line);
}
.page-home .hero-metric:last-child { border-right: 0; }
.page-home .hero-metric strong { color: var(--ink); font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -.055em; line-height: 1.1; }
.page-home .hero-metric span { color: var(--ink-secondary); font-size: 14px; line-height: 1.35; }
.page-home .hero-metrics:focus-visible { outline: 0; }
.page-home .home-hero .primary-action:focus-visible,
.page-home .home-hero .secondary-action:focus-visible { outline-color: var(--gold); }

/* The actual studying tools stay quiet and direct. */
.page-home #books,
.page-home #daily,
.page-home #setup { max-width: 1260px; }
.page-home #books { padding-top: 58px; }
.page-home #books h2,
.page-home #setup h2 { font-size: clamp(24px, 2.5vw, 31px); font-weight: 750; }
.page-home #books > div:first-child { align-items: end; }
.page-home #bookCards { gap: 10px; }
.page-home #bookCards .book-card {
  min-height: 148px;
  padding: 18px 17px;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: var(--surface) !important;
  text-align: left;
}
.page-home #bookCards .book-card:hover { background: #f9fbff !important; border-color: var(--royal-line) !important; }
.page-home #bookCards .book-card.border-indigo-500 {
  border-color: var(--royal) !important;
  background: var(--royal) !important;
  color: #fff;
}
.page-home #bookCards .book-card.border-indigo-500 .text-indigo-700,
.page-home #bookCards .book-card.border-indigo-500 .text-indigo-600,
.page-home #bookCards .book-card.border-indigo-500 .text-slate-700,
.page-home #bookCards .book-card.border-indigo-500 .text-slate-500,
.page-home #bookCards .book-card.border-indigo-500 .text-slate-400,
.page-home #bookCards .book-card.border-indigo-500 .text-emerald-600,
.page-home #bookCards .book-card.border-indigo-500 .text-rose-600 { color: #fff !important; }
.page-home #bookCards .book-card.border-indigo-500 .bg-slate-100 { background: #ffffff4d !important; }
.page-home #bookCards .book-card.border-indigo-500 .bg-indigo-500 { background: #fff !important; }
.page-home #bookCards .book-card > div:last-child { margin-top: 14px; }
.page-home #daily { padding-top: 30px; }
.page-home #daily > div {
  border: 1px solid var(--line) !important;
  border-top: 3px solid var(--royal) !important;
  border-radius: 8px;
  background: var(--surface) !important;
  padding: 29px 32px;
}
.page-home #daily b { font-variant-numeric: tabular-nums; }
.page-home #daily .newlimit-chip { min-width: 39px; min-height: 36px; border-radius: 6px; }
.page-home #daily .newlimit-chip.border-indigo-500 { border-color: var(--royal) !important; background: var(--royal-pale) !important; color: var(--royal) !important; }
.page-home #daily .newlimit-chip:hover { border-color: var(--royal-line); }
.page-home #setup { padding-top: 72px; }
.page-home #setup .space-y-6 > div,
.page-home #setup aside { border: 1px solid var(--line) !important; border-radius: 9px; background: var(--surface) !important; box-shadow: none; }
.page-home #setup .space-y-6 > div { padding: 28px; }
.page-home #setup .pool-card,
.page-home #setup .dir-card,
.page-home #setup .count-chip { border: 1px solid var(--line) !important; border-radius: 7px; background: var(--surface) !important; min-height: 44px; box-shadow: none !important; }
.page-home #setup .pool-card:hover,
.page-home #setup .dir-card:hover,
.page-home #setup .count-chip:hover { border-color: var(--royal-line) !important; background: #f9fbff !important; }
.page-home #setup .pool-card.border-indigo-500,
.page-home #setup .dir-card.border-indigo-500,
.page-home #setup .count-chip.border-indigo-500 { border-color: var(--royal) !important; background: var(--royal-pale) !important; }
.page-home #setup aside { background: #f0f4fa !important; }
.page-home #setup aside .bg-indigo-50 { background: #e4ebfc !important; }
.page-home #setup > h2 { margin-bottom: 13px; }
.page-home .practice-details { border-top: 1px solid var(--line); }
.page-home .practice-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0; list-style: none; cursor: pointer; }
.page-home .practice-summary::-webkit-details-marker { display: none; }
.page-home .practice-summary-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-home .practice-summary-copy strong { color: var(--ink); font-size: 16px; }
.page-home .practice-summary-copy small { color: var(--ink-muted); font-size: 14px; }
.page-home .practice-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; color: var(--royal); font-size: 14px; font-weight: 700; }
.page-home .practice-toggle iconify-icon { font-size: 18px; transition: transform .2s ease; }
.page-home .practice-close-label,
.page-home .practice-details[open] .practice-open-label { display: none; }
.page-home .practice-details[open] .practice-close-label { display: inline; }
.page-home .practice-details[open] .practice-toggle iconify-icon { transform: rotate(180deg); }
.page-home .practice-summary:focus-visible { outline: 3px solid var(--royal); outline-offset: 4px; }
.page-home .practice-details > .grid { margin-top: 10px; }
.record-section { max-width: 1260px; }
.record-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 30px; flex-wrap: wrap; margin-bottom: 14px; }
.record-head h2 { font-size: clamp(24px, 2.5vw, 31px); font-weight: 750; }
.record-head p { max-width: 66ch; color: var(--ink-muted); font-size: 14px; }
.record-panel { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; padding: 20px 24px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.record-state { color: var(--ink-secondary); font-size: 14px; }
.record-state strong { display: block; margin-top: 3px; color: var(--success); font-size: 17px; }
.record-state strong.is-error { color: var(--error); }
.record-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.record-actions button,
.import-dialog-actions button { min-height: 44px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 700; }
.record-actions button:hover,
.import-dialog-actions button:hover { border-color: var(--royal-line); color: var(--royal); }
.record-actions #exportDataButton,
.import-dialog-actions #confirmImport:not(:disabled) { border-color: var(--royal); background: var(--royal); color: #fff; }
.record-actions #exportDataButton:hover,
.import-dialog-actions #confirmImport:not(:disabled):hover { background: var(--royal-hover); }
.record-status { width: 100%; min-height: 1.4em; color: var(--ink-muted); font-size: 13px; }
.record-status.is-error { color: var(--error); }
.import-dialog { width: min(92vw, 520px); max-height: min(85vh, 680px); margin: auto; padding: 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: 0 14px 40px #17234236; }
.import-dialog::backdrop { background: #101a2e8c; }
.import-dialog h2 { margin-bottom: 13px; font-size: 25px; font-weight: 750; }
.import-dialog p { margin-top: 8px; color: var(--ink-secondary); line-height: 1.65; }
.import-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 25px; }
.import-dialog-actions button:disabled { cursor: not-allowed; opacity: .45; }
.storage-warning { position: relative; z-index: 20; padding: 12px 20px; background: var(--warning-bg); color: var(--warning); text-align: center; font-size: 14px; }
.storage-warning a { color: var(--royal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.page-home .process-section { background: #f0f4fa !important; border-color: var(--line) !important; }
.page-home .process-section > div { max-width: 1260px; }
.page-home .process-section h2 { font-size: clamp(25px, 2.6vw, 32px); font-weight: 760; }
.page-home .process-section ol { gap: 22px; }
.page-home .process-section li {
  padding: 20px 8px 0 0;
  border: 0 !important;
  border-top: 1px solid #bcc9de !important;
  border-radius: 0;
  background: transparent !important;
}
.page-home .process-section li > span:first-child { display: none; }
.page-home .process-section li h3 { font-size: 19px; }
.page-home .process-section + section > div.grid > div { border-radius: 0; background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important; padding: 22px 0; }
.page-home .process-section + section ul { border-top: 1px solid var(--line); }

/* Quiz: the question, word and choices define the reading order. */
body.redesign.page-quiz { background: #fff !important; }
.page-quiz #quizWrap { max-width: 990px; padding-top: 38px; padding-bottom: 90px; }
.page-quiz #poolBadge { border-radius: 5px; background: var(--royal-pale) !important; color: var(--royal) !important; }
.page-quiz #quizWrap > div:nth-of-type(2) { height: 4px; border-radius: 0; background: #e5e9f1 !important; }
.page-quiz #progressBar { border-radius: 0; }
.page-quiz #quizWrap > div:nth-of-type(3) { display: block; margin-top: 36px; }
.page-quiz #quizWrap section { padding: 0; border: 0 !important; border-radius: 0; background: #fff !important; box-shadow: none !important; }
.page-quiz #quizWrap section > div:first-child { text-align: left; }
.page-quiz #wordText {
  color: var(--ink) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: clamp(62px, 10vw, 112px) !important;
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.03;
  overflow-wrap: anywhere;
}
body.redesign.page-quiz #wordText[data-direction="cn2en"] {
  max-width: 840px;
  font-size: clamp(32px, 4.8vw, 55px) !important;
  font-weight: 730;
  letter-spacing: 0;
  line-height: 1.22;
  word-break: break-word;
}
.page-quiz #wordPhonetic { display: inline-block; margin-right: 14px; color: var(--ink-muted) !important; font-size: 17px; }
.page-quiz .word-audio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 5px 11px;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 650;
  vertical-align: middle;
}
.page-quiz .word-audio:hover { color: var(--royal); }
.page-quiz .word-audio[hidden] { display: none; }
.page-quiz #exBox {
  margin-top: 27px;
  padding: 22px 0;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0;
  background: transparent !important;
}
.page-quiz #exBox #exEn { color: var(--ink) !important; font-size: 18px; line-height: 1.6; }
.page-quiz #exBox #exZh { color: var(--ink-muted) !important; font-size: 14px; }
.page-quiz #askLabel { color: var(--ink) !important; font-size: 17px; font-weight: 700; }
.page-quiz #options { grid-template-columns: 1fr; gap: 10px; }
.page-quiz #options .opt-btn {
  min-height: 65px;
  padding: 13px 17px;
  border: 1px solid var(--line) !important;
  border-radius: 8px;
  background: #fff !important;
  color: var(--ink) !important;
  font-size: 17px;
  line-height: 1.4;
}
.page-quiz #options .opt-btn:hover:not(:disabled) { border-color: var(--royal) !important; background: #f7f9ff !important; }
.page-quiz #options .opt-btn > span:first-child {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #f7f9fc !important;
  color: var(--ink) !important;
  font-size: 16px;
  font-weight: 700;
}
.page-quiz #options .opt-btn.border-emerald-500 { border: 2px solid var(--success) !important; background: var(--success-bg) !important; }
.page-quiz #options .opt-btn.border-emerald-500 > span:first-child { border-color: var(--success); background: var(--success) !important; color: #fff !important; }
.page-quiz #options .opt-btn.border-rose-500 { border: 2px solid var(--error) !important; background: var(--error-bg) !important; }
.page-quiz #options .opt-btn.border-rose-500 > span:first-child { border-color: var(--error); background: var(--error) !important; color: #fff !important; }
.page-quiz #options .opt-btn:disabled:not(.border-emerald-500):not(.border-rose-500) { opacity: .68; }
.page-quiz #feedback { border-radius: 8px; }
.page-quiz #feedback.border-emerald-200 { background: var(--success-bg) !important; }
.page-quiz #feedback.border-rose-200 { background: var(--error-bg) !important; }
.page-quiz #feedback .reward-note { margin-left: auto; color: var(--success); font-size: 13px; }
.page-quiz #cutFromQuestion { min-height: 38px; }
.page-quiz #nextArea button,
.page-quiz #nextArea a { min-height: 46px; }
.page-quiz #nextArea button:disabled { background: #dfe6f8 !important; color: #5f718f !important; }
.page-quiz #quizWrap aside {
  position: static;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 26px;
  margin-top: 36px;
  padding: 21px 0 0;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0;
  background: transparent !important;
}
.page-quiz #quizWrap aside > :nth-child(1),
.page-quiz #quizWrap aside > :nth-child(2),
.page-quiz #quizWrap aside > :nth-child(3),
.page-quiz #quizWrap aside > :nth-child(6) { display: none; }
.page-quiz #quizWrap aside > :nth-child(4) { display: flex; gap: 22px; margin: 0; }
.page-quiz #quizWrap aside > :nth-child(4) > div { padding: 0; border: 0 !important; background: transparent !important; }
.page-quiz #quizWrap aside > :nth-child(4) > div > div:last-child { margin-top: 2px; font-size: 22px; }
.page-quiz #quizWrap aside > :nth-child(5) { display: flex; justify-content: flex-end; gap: 22px; margin: 0; }
.page-quiz #quizWrap aside > :nth-child(5) > div { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }

/* Results put the learning signal first and keep the reward in proportion. */
.page-result main { max-width: 1120px; }
.page-result #content > h1 { margin-top: 14px; font-size: clamp(35px, 4vw, 52px); font-weight: 790; }
.page-result .result-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 20px 24px;
  border: 1px solid #cfdafb;
  border-left: 4px solid var(--royal);
  border-radius: 5px;
  background: #f4f7ff;
}
.page-result .result-reward strong { display: block; color: var(--ink); font-size: 18px; font-weight: 700; }
.page-result .result-reward small { display: block; margin-top: 3px; color: var(--ink-muted); font-size: 12px; }
.page-result .result-reward .reward-value { color: var(--royal); font-size: 26px; font-weight: 800; }
.page-result #content > div.grid { margin-top: 28px; }
.page-result #content .rounded-2xl { border-radius: 8px; box-shadow: none !important; }
.page-result #rateText { color: var(--ink) !important; font-size: 43px; letter-spacing: -.05em; }
.page-result #chartFallback { background: var(--surface-soft) !important; }
.page-result #wrongList > div { border-radius: 0; border-left: 0 !important; border-right: 0 !important; border-bottom: 0 !important; padding-left: 0; padding-right: 0; }
.page-result #wrongList > div:first-child { border-top: 1px solid var(--line) !important; }
.page-result #wrongList > div .bg-emerald-50,
.page-result #wrongList > div .bg-slate-50 { border-radius: 6px; }
.page-result #retryWrongBtn { border-radius: 8px; }

/* Wrongbook is an archive to scan and act on, not a grid of achievement cards. */
.page-wrongbook main { max-width: 1120px; }
.page-wrongbook h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 790; }
.page-wrongbook main > div:nth-of-type(2) { max-width: none; gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-wrongbook main > div:nth-of-type(2) > div { border: 0 !important; border-right: 1px solid var(--line) !important; border-radius: 0; background: transparent !important; padding: 16px 24px; }
.page-wrongbook main > div:nth-of-type(2) > div:first-child { padding-left: 0; }
.page-wrongbook main > div:nth-of-type(2) > div:last-child { border-right: 0 !important; }
.page-wrongbook main > div:nth-of-type(2) [id^="c"] { color: var(--ink) !important; font-variant-numeric: tabular-nums; }
.page-wrongbook .filter-btn { min-height: 43px; border-radius: 6px; }
.page-wrongbook .filter-btn.border-indigo-500 { border-color: var(--royal) !important; background: var(--royal-pale) !important; color: var(--royal) !important; }
.page-wrongbook #searchInput { min-height: 44px; border-radius: 6px; }
.page-wrongbook #searchInput:focus { border-color: var(--royal) !important; }
.page-wrongbook #list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.page-wrongbook #list > div {
  padding: 25px 0 24px;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
.page-wrongbook #list > div .text-\[19px\] { color: var(--ink) !important; font-size: 29px; font-weight: 760; letter-spacing: -.04em; }
.page-wrongbook #list > div > div:nth-of-type(2) { padding: 11px 0; border: 0 !important; background: transparent !important; }
.page-wrongbook .mastery-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink-muted); font-size: 12px; }
.page-wrongbook .mastery-track { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 99px; background: #e1e7f0; }
.page-wrongbook .mastery-track span { display: block; height: 100%; border-radius: inherit; background: var(--royal); }
.page-wrongbook .review-one { min-height: 38px; padding: 7px 13px; border: 1px solid #9fb3fb; border-radius: 6px; color: var(--royal); font-size: 13px; font-weight: 700; }
.page-wrongbook .review-one:hover { background: var(--royal-pale); }
.page-wrongbook #cutSection { background: #fff !important; }

/* The local learning helper stays unobtrusive on the home page. */
.study-helper { position: fixed; right: 22px; bottom: 20px; z-index: 80; }
.study-helper-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid #c8d2e6;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 18px #1b2d511c;
}
.study-helper-trigger:hover { border-color: var(--royal); color: var(--royal); }
.study-helper-trigger iconify-icon { font-size: 18px; }
.study-helper-panel {
  position: absolute;
  right: 0;
  bottom: 56px;
  width: min(345px, calc(100vw - 28px));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 14px 42px #1b2d5124;
}
.study-helper-panel[hidden] { display: none; }
.study-helper-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--ink); font-size: 17px; }
.study-helper-close { padding: 4px 7px; color: var(--ink-muted); font-size: 24px; line-height: 1; }
.study-helper-panel p { margin: 14px 0 7px; color: var(--ink-secondary); line-height: 1.65; }
.study-helper-panel small { color: var(--ink-muted); }
.study-helper-actions { display: flex; gap: 8px; margin-top: 17px; }
.study-helper-actions a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 5px; color: var(--royal); font-size: 13px; font-weight: 700; }
.study-helper-actions a:hover { background: var(--royal-pale); }

@media (max-width: 900px) {
  .page-home .home-hero-inner { grid-template-columns: minmax(0, 1fr) 200px; gap: 0 26px; }
  .page-home .word-stage-word { font-size: clamp(62px, 9vw, 100px); }
  .page-home .word-stage-word.is-long { font-size: clamp(43px, 6.7vw, 72px); }
  .page-home .hero-description { font-size: 13px; }
  .page-home #setup .grid.lg\:grid-cols-\[1fr_350px\] { gap: 22px; }
}

@media (max-width: 760px) {
  body.redesign header > div { min-height: 64px; height: auto; flex-wrap: wrap; padding: 10px 18px; gap: 4px 16px; }
  body.redesign header .brand-wordmark { font-size: 23px; }
  body.redesign header .brand-subtitle { font-size: 11px; }
  body.redesign header nav { width: 100%; min-height: 44px; height: 44px; gap: 0; justify-content: space-between; }
  body.redesign header nav a { flex: 1; justify-content: center; padding: 0 6px; font-size: 13px; }
  body.redesign header nav a[aria-current="page"]::after { left: 25%; right: 25%; }
  .page-home .home-hero-inner { grid-template-columns: 1fr; padding: 29px 22px 38px; }
  .page-home .hero-kicker,
  .page-home .hero-title,
  .page-home .word-stage,
  .page-home .hero-actions,
  .page-home .hero-description { grid-column: 1; }
  .page-home .word-stage-word { font-size: clamp(52px, 12.5vw, 72px); }
  .page-home .word-stage-word.is-long { font-size: clamp(34px, 9vw, 48px); }
  .page-home .word-stage-meaning { margin-top: 10px; font-size: 16px; }
  .page-home .hero-actions { grid-row: 4; margin-top: 26px; }
  .page-home .hero-description { grid-row: 5; margin-top: 24px; max-width: 480px; }
  .page-home .hero-metrics { padding: 20px 12px; }
  .page-home .hero-metric { flex-direction: column; align-items: center; gap: 1px; padding: 4px 8px; text-align: center; }
  .page-home .hero-metric strong { font-size: clamp(26px, 6vw, 40px); }
  .page-home .hero-metric span { font-size: 11px; }
  .page-home #books { padding-top: 41px; }
  .page-home #daily > div { padding: 22px; }
  .page-home #setup { padding-top: 54px; }
  .page-home #setup aside { position: static; }
  .page-home .practice-summary { align-items: flex-start; }
  .record-panel { align-items: stretch; }
  .record-actions { width: 100%; }
  .record-actions button { flex: 1; }
  .page-home #daily .newlimit-chip { min-width: 44px; min-height: 44px; padding-right: 10px; padding-left: 10px; }
  .page-home .newlimit-options { flex-wrap: wrap; row-gap: 8px; }
  .page-home #daily #startDaily { width: 100%; min-height: 50px; }
  .page-home #setup .pool-card,
  .page-home #setup .dir-card,
  .page-home #setup .count-chip { min-height: 48px; }
  .page-quiz #quizWrap { padding: 26px 20px 70px; }
  .page-quiz #wordText { font-size: clamp(52px, 12vw, 82px) !important; }
  .page-quiz #wordText.word-long { font-size: clamp(34px, 9vw, 52px) !important; letter-spacing: 0 !important; }
  body.redesign.page-quiz #wordText[data-direction="cn2en"] { font-size: clamp(29px, 6.5vw, 43px) !important; }
  .page-quiz #options .opt-btn { font-size: 16px; }
  .page-quiz .word-audio,
  .page-quiz #cutFromQuestion,
  .page-quiz #markBtn { min-height: 44px; }
  .page-quiz #quizWrap aside { grid-template-columns: 1fr; gap: 16px; }
  .page-quiz #quizWrap aside > :nth-child(5) { justify-content: flex-start; flex-wrap: wrap; }
  .page-wrongbook .filter-btn { min-height: 46px; }
  .page-wrongbook #searchInput { min-height: 46px; font-size: 16px; }
  .study-helper { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .page-quiz #feedback { padding: 16px; }
  .page-quiz #cutFromQuestion { width: 100%; text-align: left; white-space: normal; }
  .page-result main,
  .page-wrongbook main { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 500px) {
  .page-home .hero-title { font-size: 13px; }
  .page-home .word-stage-word { font-size: clamp(48px, 12vw, 60px); }
  .page-home .word-stage-word.is-long { font-size: clamp(31px, 8.2vw, 38px); }
  .page-home .word-stage-meaning { font-size: 15px; }
  .page-home .hero-actions { align-items: stretch; }
  .page-home .hero-actions .primary-action { width: 100%; min-width: 0; }
  .page-home .hero-actions .secondary-action { width: 100%; }
  .page-home .hero-metric { border-right-color: #e6eaf0; }
  .page-home #bookCards { grid-template-columns: 1fr; }
  .page-home #bookCards .book-card { min-height: 0; }
  .page-home #setup .space-y-6 > div { padding: 20px; }
  .page-home .practice-summary { flex-direction: column; gap: 12px; }
  .record-section { padding-right: 20px; padding-left: 20px; }
  .record-panel { padding: 18px; }
  .record-actions { flex-direction: column; }
  .record-actions button { width: 100%; }
  .import-dialog { padding: 22px; }
  .import-dialog-actions { flex-direction: column; }
  .import-dialog-actions button { width: 100%; }
  .page-quiz #wordText { font-size: clamp(48px, 12.1vw, 62px) !important; }
  body.redesign.page-quiz #wordText[data-direction="cn2en"] { font-size: clamp(28px, 7vw, 36px) !important; }
  .page-quiz #quizWrap > div:first-child { align-items: flex-start; }
  .page-quiz #quizWrap section > div:last-child { flex-wrap: wrap; }
  .page-quiz #nextArea { margin-left: auto; }
  .page-quiz #quizWrap aside > :nth-child(5) { gap: 12px 18px; }
  .page-result .result-reward { padding: 18px; }
  .page-wrongbook main > div:nth-of-type(2) > div { padding: 12px; }
  .page-wrongbook main > div:nth-of-type(2) > div:first-child { padding-left: 0; }
  .page-wrongbook #searchInput { width: min(100%, 270px); }
  .page-wrongbook #list > div > div:first-child { flex-wrap: wrap; }
  .study-helper { right: 12px; bottom: 12px; }
}

@media (max-width: 390px) {
  body.redesign header > div { padding-right: 14px; padding-left: 14px; gap: 4px 10px; }
  body.redesign header nav a { font-size: 12px; }
  .page-home .home-hero-inner { padding-right: 18px; padding-left: 18px; }
  .page-home .hero-metric { padding-right: 4px; padding-left: 4px; }
  .page-home .hero-metric span { font-size: 10px; }
  .page-home #daily > div { padding: 18px; }
  .page-home footer { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
  .page-quiz #quizWrap { padding-right: 16px; padding-left: 16px; }
  .page-quiz #wordText { font-size: clamp(44px, 12vw, 54px) !important; }
  .page-quiz #wordText.word-long { font-size: clamp(29px, 9vw, 42px) !important; }
  .page-quiz #options .opt-btn { min-height: 60px; padding: 12px; font-size: 15px; }
  .page-quiz #options .opt-btn > span:first-child { flex: 0 0 32px; width: 32px; height: 32px; }
  .page-result main,
  .page-wrongbook main { padding-right: 16px; padding-left: 16px; }
  .page-wrongbook main > div:first-child > div:last-child { width: 100%; flex-direction: column; align-items: stretch; }
  .page-wrongbook main > div:first-child > div:last-child > a,
  .page-wrongbook main > div:first-child > div:last-child > button { min-height: 46px; justify-content: center; }
  .page-wrongbook main > div:nth-of-type(2) > div { padding-right: 8px; padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.redesign *, body.redesign *::before, body.redesign *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-contrast: more) {
  :root { --line: #8893a5; --ink-muted: #3e4a5f; --royal-line: #506aca; }
  body.redesign a:focus-visible,
  body.redesign button:focus-visible,
  body.redesign input:focus-visible { outline-width: 4px; }
}
@media (forced-colors: active) {
  .page-home .home-hero { border-bottom: 2px solid CanvasText; }
  .page-home .hero-actions .primary-action,
  .page-home #bookCards .book-card.border-indigo-500 { border: 2px solid Highlight !important; }
  .page-quiz #options .opt-btn.border-emerald-500,
  .page-quiz #options .opt-btn.border-rose-500 { border: 2px solid Highlight !important; }
}