/* Word Check — mobile-first product UI. Local system fonts only. */
:root {
  color-scheme: light;
  --bg: #f7f4ee;
  --surface: #fffefa;
  --surface-alt: #f0ece4;
  --surface-soft: #f7f4ee;
  --ink: #2a3d47;
  --muted: #5f707a;
  --subtle: #87939a;
  --line: #dedfd8;
  --primary: #3d6577;
  --primary-hover: #305568;
  --primary-ink: #ffffff;
  --accent-soft: #e1ebee;
  --accent-line: #b9cdd5;
  --success: #4e725f;
  --success-soft: #e7efe7;
  --danger: #a0524b;
  --danger-soft: #f6e9e5;
  --focus: #608ca2;
  --shadow: 0 12px 35px rgb(47 57 53 / 5%);
  --shadow-float: 0 -7px 30px rgb(47 57 53 / 7%);
  --radius: 22px;
  --radius-sm: 14px;
  --bottom-nav-height: 76px;
  --content-width: 836px;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body[data-theme="oat"] { color-scheme: light; }
body[data-theme="blue"] {
  --bg: #edf3f7;
  --surface: #fbfdff;
  --surface-alt: #e4edf3;
  --surface-soft: #f1f6f9;
  --ink: #293f50;
  --muted: #596f7e;
  --subtle: #8399a6;
  --line: #d4e1e9;
  --primary: #396882;
  --primary-hover: #2c556d;
  --accent-soft: #dfeaf2;
  --accent-line: #b4ccdb;
  --focus: #5c8daa;
}
body[data-theme="mint"] {
  --bg: #f0f5ef;
  --surface: #fcfdf9;
  --surface-alt: #e6eee5;
  --surface-soft: #f3f7f0;
  --ink: #30483d;
  --muted: #5e7365;
  --subtle: #85998b;
  --line: #d7e2d6;
  --primary: #4c705b;
  --primary-hover: #3b5d49;
  --accent-soft: #e0ece1;
  --accent-line: #b9cfbd;
  --focus: #719c7e;
}
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button { border: 0; background: none; }
button:disabled, input:disabled, select:disabled { cursor: default; opacity: .45; }
button:disabled { pointer-events: none; }
a { color: inherit; text-underline-offset: 3px; }
a:where(.button, .nav-item, .brand, .library-card) { text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { line-height: 1.35; }
svg { display: block; flex-shrink: 0; }
input, select, textarea { min-width: 0; outline: none; }
input, textarea { -webkit-appearance: none; appearance: none; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
::selection { color: var(--primary-ink); background: var(--primary); }
.app-shell { width: 100%; min-height: 100dvh; max-width: 1120px; margin: 0 auto; padding: 0 20px calc(var(--bottom-nav-height) + 22px + env(safe-area-inset-bottom)); }
.app-main { min-width: 0; }
.sidebar { display: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; padding: 14px 0; }
.brand { display: inline-flex; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 10px; min-height: 44px; font-weight: 750; font-size: 19px; letter-spacing: -.5px; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--primary); color: var(--primary-ink); }
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand small, .brand-subtitle { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 1.5px; }
.topbar-label { display: none; }
.topbar-actions { display: flex; align-items: center; gap: 4px; }
.page { min-width: 0; padding: 8px 0 28px; animation: page-in .2s ease-out; }
.page-header { margin-bottom: 24px; }
.page-header.with-back { display: flex; align-items: flex-start; gap: 10px; }
.eyebrow { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: 1px; margin-bottom: 7px; }
.page-title { font-size: clamp(25px, 5.8vw, 34px); font-weight: 750; letter-spacing: -.8px; }
.subtitle { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.section-title { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.section-note, .muted, .helper-text { color: var(--muted); }
.helper-text { font-size: 12px; line-height: 1.6; margin-top: 7px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; line-height: 1.4; font-size: 14px; font-weight: 650; text-align: center; transition: background .16s, border-color .16s, transform .16s; }
.button svg { width: 19px; height: 19px; }
.button-primary { color: var(--primary-ink); background: var(--primary); }
.button-primary:hover { background: var(--primary-hover); }
.button-secondary { color: var(--primary); border-color: var(--accent-line); background: var(--surface); }
.button-secondary:hover { background: var(--accent-soft); }
.button-ghost { color: var(--muted); background: transparent; }
.button-ghost:hover { color: var(--ink); background: var(--surface-alt); }
.button-danger { color: var(--danger); background: var(--danger-soft); }
.button-wide { width: 100%; }
.button-row, .action-row { display: flex; align-items: center; gap: 10px; }
.button-row.wrap, .action-row.wrap { flex-wrap: wrap; }
.button:active:not(:disabled), .icon-button:active:not(:disabled), .speak-button:active:not(:disabled) { transform: translateY(1px); }
.icon-button, .back-button, .speak-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; width: 44px; min-height: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; color: var(--primary); background: transparent; transition: background .16s, transform .16s; }
.icon-button svg, .back-button svg, .speak-button svg { width: 21px; height: 21px; pointer-events: none; }
.icon-button:hover, .back-button:hover { background: var(--surface-alt); }
.back-button { margin-left: -10px; }
.panel { padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.panel + .panel { margin-top: 16px; }
.panel-title { font-size: 17px; font-weight: 700; }
.hero { padding: 23px; border-radius: 26px; border: 1px solid var(--accent-line); background: linear-gradient(140deg, var(--surface), var(--accent-soft)); box-shadow: var(--shadow); }
.hero-heading { font-size: 22px; font-weight: 750; letter-spacing: -.4px; }
.hero .subtitle { margin-top: 7px; max-width: 500px; }
.hero .button-row { margin-top: 21px; }
.hero .button-primary { min-height: 50px; flex: 1; }
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hero-label, .library-label { color: var(--muted); font-size: 12px; font-weight: 650; }
.hero-title { font-size: clamp(21px, 4.7vw, 28px); font-weight: 750; margin-top: 5px; letter-spacing: -.5px; }
.hero-meta { margin-top: 8px; color: var(--muted); font-size: 13px; }
.progress-track { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-alt); }
.progress-fill { height: 100%; min-width: 0; border-radius: inherit; background: var(--primary); transition: width .22s ease; }
.progress-labels { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 9px; color: var(--muted); font-size: 12px; }
.progress-labels strong { color: var(--ink); font-weight: 650; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
.stat { min-width: 0; padding: 12px 4px; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 15px; }
.stat-value { display: block; color: var(--ink); font-size: clamp(23px, 5.6vw, 31px); line-height: 1.25; font-weight: 750; letter-spacing: -.7px; font-variant-numeric: tabular-nums; }
.stat-label { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.library-grid { display: grid; gap: 12px; }
.library-card { min-width: 0; text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .16s, background .16s, transform .16s; }
.library-card:hover { border-color: var(--accent-line); background: var(--surface-soft); }
.library-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.library-card-top { display: flex; align-items: flex-start; gap: 13px; }
.library-mark { display: grid; place-items: center; width: 43px; height: 47px; flex-shrink: 0; border-radius: 13px; color: var(--primary); background: var(--accent-soft); font-size: 16px; font-weight: 750; }
.library-card h3, .library-title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.library-card .subtitle { font-size: 12px; margin-top: 5px; }
.library-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; color: var(--muted); font-size: 12px; }
.library-card .progress-track { height: 5px; margin-top: 14px; }
.library-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-size: 12px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100%; padding: 4px 9px; border-radius: 8px; background: var(--surface-alt); color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 600; }
button.chip, a.chip { min-height: 44px; padding-inline: 13px; }
.chip-primary { color: var(--primary); background: var(--accent-soft); }
.chip-success { color: var(--success); background: var(--success-soft); }
.segmented { display: flex; align-items: center; gap: 5px; padding: 5px; border-radius: 15px; background: var(--surface-alt); }
.segmented button, .segmented .segment { display: inline-flex; align-items: center; justify-content: center; flex: 1; min-width: 44px; min-height: 44px; padding: 9px 12px; border-radius: 11px; color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.segmented button.is-active, .segmented button[aria-selected="true"], .segmented button[aria-pressed="true"], .segmented input:checked + label { background: var(--surface); color: var(--primary); box-shadow: 0 2px 7px rgb(35 55 66 / 5%); }
.form-field { display: grid; gap: 9px; margin: 20px 0; }
.form-field:first-child { margin-top: 0; }
.form-field:last-child { margin-bottom: 0; }
.field-label, .form-field > label { color: var(--ink); font-size: 14px; font-weight: 650; }
.input, .form-field input, .form-field select, .form-field textarea, .search-input { display: block; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.5; }
.input::placeholder, .form-field input::placeholder, .form-field textarea::placeholder, .search-input::placeholder { color: var(--subtle); }
.form-field textarea { min-height: 156px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .search-input:focus { border-color: var(--focus); }
.stepper { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; }
.stepper button { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-alt); font-size: 24px; color: var(--primary); }
.stepper input { text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.word-list { min-width: 0; }
.word-card { min-width: 0; border: 1px solid var(--line); border-radius: 20px; padding: 18px; background: var(--surface); }
.word-line { display: flex; align-items: center; justify-content: space-between; gap: 13px; min-width: 0; }
.word-main { min-width: 0; }
.word-en { min-width: 0; font-family: "Segoe UI", Arial, system-ui, sans-serif; font-size: clamp(27px, 6.8vw, 39px); line-height: 1.25; font-weight: 650; letter-spacing: -.7px; overflow-wrap: anywhere; }
.word-index { color: var(--subtle); font-size: 11px; font-weight: 600; margin-bottom: 7px; }
.word-meaning { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.7; white-space: pre-line; overflow-wrap: anywhere; }
.word-phonetic { margin-top: 6px; color: var(--muted); font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; line-height: 1.5; }
.speak-button { background: var(--accent-soft); color: var(--primary); }
.speak-button:hover { background: var(--surface-alt); }
.speak-button.is-speaking, .speak-button[aria-busy="true"] { box-shadow: 0 0 0 4px var(--accent-soft); color: var(--primary-ink); background: var(--primary); }
.word-list .word-card { padding: 17px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.word-list .word-card:last-child { border-bottom: 0; }
.word-list .word-en { font-size: 20px; letter-spacing: -.2px; }
.word-list .word-meaning { margin-top: 8px; padding-top: 0; border-top: 0; color: var(--muted); font-size: 14px; }
.study-page { padding-top: 0; padding-bottom: 150px; }
.study-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.study-header-main { display: flex; align-items: center; gap: 4px; min-width: 0; }
.study-header h1, .study-title { font-size: 17px; font-weight: 700; }
.study-header .subtitle { font-size: 12px; margin-top: 2px; }
.study-progress { margin-bottom: 18px; }
.study-progress .progress-labels { margin-top: 0; }
.study-progress .progress-track { height: 5px; }
.study-instruction { margin: 0 0 15px; color: var(--muted); font-size: 13px; text-align: center; }
.study-words { display: grid; gap: 13px; min-width: 0; }
.study-words[data-group-size="1"] .word-card { padding: 26px 22px; }
.study-words[data-group-size="1"] .word-en { font-size: clamp(34px, 8vw, 52px); }
.study-words[data-group-size="4"], .study-words[data-group-size="5"] { gap: 10px; }
.study-words[data-group-size="4"] .word-card, .study-words[data-group-size="5"] .word-card { padding: 13px 16px; border-radius: 17px; }
.study-words[data-group-size="4"] .word-en, .study-words[data-group-size="5"] .word-en { font-size: clamp(24px, 5.6vw, 32px); }
.study-words[data-group-size="4"] .word-index, .study-words[data-group-size="5"] .word-index { margin-bottom: 4px; }
.study-words[data-group-size="4"] .word-meaning, .study-words[data-group-size="5"] .word-meaning { margin-top: 10px; padding-top: 9px; font-size: 14px; }
.study-actions { position: fixed; z-index: 40; right: 0; bottom: 0; left: 0; padding: 13px 20px calc(15px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); border-radius: 23px 23px 0 0; background: var(--surface); box-shadow: var(--shadow-float); }
.study-actions .action-row { max-width: 780px; margin: 0 auto; }
.study-actions .button-primary { flex: 1; min-height: 52px; font-size: 15px; }
.study-actions .button-secondary { min-height: 52px; }
.study-actions .helper-text { text-align: center; margin-top: 8px; }
.bottom-nav { display: flex; align-items: stretch; justify-content: center; position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--line); }
.nav-item { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 13px; color: var(--muted); border-radius: 14px; font-size: 14px; font-weight: 600; }
.nav-item svg { width: 21px; height: 21px; }
.nav-item.is-active, .nav-item[aria-current="page"] { color: var(--primary); background: var(--accent-soft); }
.bottom-nav .nav-item { flex: 1; flex-direction: column; gap: 4px; padding: 5px 7px; font-size: 10px; line-height: 1.3; max-width: 150px; }
.bottom-nav .nav-item svg { width: 22px; height: 22px; }
body.is-study .bottom-nav { display: none; }
body.is-study .app-shell { padding-bottom: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@keyframes page-in { from { opacity: .3; } to { opacity: 1; } }


/* Detail, import, settings and dialog surfaces. */
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.panel-header .subtitle { margin-top: 5px; font-size: 13px; }
.panel-footer { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.stack { display: grid; gap: 16px; }
.stack-sm { display: grid; gap: 10px; }
.space-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.divider { height: 1px; margin: 22px 0; background: var(--line); }
.section-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 8px 0 8px 10px; color: var(--primary); font-size: 13px; font-weight: 650; }
.section-link svg { width: 16px; height: 16px; }
.segmented { gap: 3px; padding: 4px; overflow-x: auto; scrollbar-width: thin; }
.segmented button, .segmented .segment { flex-shrink: 0; }
.search-field { position: relative; margin: 18px 0; }
.search-field > svg { position: absolute; z-index: 1; left: 15px; top: 15px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.search-field .search-input, .search-field input { width: 100%; padding-left: 43px; }
.tab-list { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 3px 2px 12px; scrollbar-width: thin; }
.tab-list button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--surface); white-space: nowrap; }
.tab-list button.is-active, .tab-list button[aria-selected="true"] { border-color: var(--primary); background: var(--accent-soft); color: var(--primary); }
.tab-count { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .8; }
.list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; color: var(--muted); font-size: 12px; }
.list-footer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.word-row { min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.word-row:last-child { border-bottom: 0; }
.word-row .word-en { font-size: 20px; letter-spacing: -.2px; }
.word-row .word-meaning { margin-top: 7px; padding-top: 0; border: 0; color: var(--muted); font-size: 14px; }
.word-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.word-extra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.empty-state { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; min-height: 240px; padding: 28px 18px; color: var(--muted); text-align: center; }
.empty-state-icon { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 1px; color: var(--primary); background: var(--accent-soft); border-radius: 21px; }
.empty-state-icon svg { width: 28px; height: 28px; }
.empty-state h2, .empty-state h3 { color: var(--ink); font-size: 18px; font-weight: 700; }
.empty-state p { max-width: 350px; font-size: 13px; line-height: 1.8; }
.empty-state .button { margin-top: 4px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.setting-row:first-child { padding-top: 0; }
.setting-row:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-label { font-size: 14px; font-weight: 650; }
.setting-description { max-width: 450px; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.setting-row .button, .setting-row .icon-button { flex-shrink: 0; }
.theme-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.theme-option { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; min-width: 0; min-height: 94px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 16px; color: var(--muted); background: var(--surface); font-size: 12px; font-weight: 600; }
.theme-option.is-active, .theme-option[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.theme-swatch { width: 45px; height: 30px; border: 1px solid rgb(50 70 60 / 9%); border-radius: 10px; box-shadow: inset -12px -8px rgb(255 255 255 / 60%); }
.theme-swatch[data-theme="oat"], .theme-swatch.oat { background: #e9e1d2; }
.theme-swatch[data-theme="blue"], .theme-swatch.blue { background: #d1e2ed; }
.theme-swatch[data-theme="mint"], .theme-swatch.mint { background: #d8e8d8; }
.switch { display: inline-flex; align-items: center; width: 48px; min-width: 48px; height: 44px; padding: 9px 0; }
.switch-track { display: block; position: relative; width: 48px; height: 26px; border-radius: 99px; background: var(--line); transition: background .16s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / 10%); transition: transform .16s; }
.switch[aria-checked="true"] .switch-track { background: var(--primary); }
.switch[aria-checked="true"] .switch-track::after { transform: translateX(22px); }
.drop-zone, .import-zone { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 13px; min-height: 182px; padding: 24px 18px; border: 1.5px dashed var(--accent-line); border-radius: 20px; background: var(--surface-soft); text-align: center; }
.drop-zone.is-dragover, .import-zone.is-dragover { border-color: var(--primary); background: var(--accent-soft); }
.drop-zone > svg, .import-zone > svg { width: 30px; height: 30px; color: var(--primary); }
.drop-zone h3, .import-zone h3 { font-size: 16px; font-weight: 650; }
.drop-zone p, .import-zone p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.file-input { width: 100%; min-height: 44px; font-size: 13px; }
.file-input::file-selector-button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--accent-line); border-radius: 12px; margin-right: 12px; color: var(--primary); background: var(--accent-soft); font: inherit; cursor: pointer; }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; min-width: 340px; border-collapse: collapse; text-align: left; font-size: 12px; line-height: 1.7; }
.table-wrap th { padding: 11px 13px; border-bottom: 1px solid var(--line); background: var(--accent-soft); color: var(--primary); font-size: 12px; font-weight: 650; white-space: nowrap; }
.table-wrap td { max-width: 400px; padding: 12px 13px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.import-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; margin: 16px 0; font-size: 13px; color: var(--muted); }
.import-summary strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.source-note { color: var(--muted); font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.notice { display: flex; align-items: flex-start; gap: 10px; margin: 16px 0; padding: 13px 15px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--surface-soft); color: var(--muted); font-size: 12px; line-height: 1.8; }
.notice svg { width: 17px; height: 17px; margin-top: 3px; color: var(--primary); }
.notice.is-error, .form-error { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.form-error { padding: 10px 13px; border-radius: 12px; font-size: 12px; }
.completion-hero { display: flex; align-items: center; flex-direction: column; padding: 20px 10px 28px; text-align: center; }
.completion-mark { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 27px; color: var(--success); background: var(--success-soft); margin-bottom: 23px; }
.completion-mark svg { width: 36px; height: 36px; }
.completion-hero .page-title { font-size: 28px; }
.completion-hero .subtitle { max-width: 380px; }
.completion-hero .stat-grid { width: 100%; max-width: 480px; margin-top: 24px; }
.completion-hero + .panel { margin-top: 0; }
.completion-actions { display: grid; gap: 11px; margin-top: 22px; }
.completion-actions .button { width: 100%; }
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgb(34 49 52 / 30%); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.modal { width: 100%; max-width: 510px; max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 26px; color: var(--ink); background: var(--surface); box-shadow: 0 20px 80px rgb(20 40 40 / 18%); overscroll-behavior: contain; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -7px -7px 11px 0; }
.modal-title { font-size: 21px; font-weight: 750; letter-spacing: -.4px; }
.modal .subtitle { font-size: 13px; line-height: 1.8; }
.modal .button-row { margin-top: 22px; }
.modal .button-row .button { flex: 1; }
body.has-modal { overflow: hidden; }
.toast { position: fixed; z-index: 160; left: 50%; bottom: calc(var(--bottom-nav-height) + 18px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 9px; width: max-content; max-width: calc(100% - 32px); padding: 12px 17px; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--surface); font-size: 13px; line-height: 1.6; box-shadow: 0 7px 30px rgb(20 40 40 / 12%); }
.toast svg { width: 18px; height: 18px; color: var(--primary); }
body.is-study .toast { bottom: calc(126px + env(safe-area-inset-bottom)); }
.loading-state { display: grid; place-items: center; gap: 15px; min-height: 55dvh; padding: 30px; text-align: center; color: var(--muted); font-size: 14px; }
.loading-spinner { display: block; width: 28px; height: 28px; border: 3px solid var(--accent-soft); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 640px) {
  .app-shell { padding-right: 28px; padding-left: 28px; }
  .topbar { min-height: 90px; }
  .page-header { margin-bottom: 28px; }
  .hero { padding: 28px; }
  .panel { padding: 24px; }
  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .library-card { display: flex; flex-direction: column; padding: 18px; }
  .library-card-top { flex-direction: column; gap: 13px; }
  .library-card-footer { margin-top: auto; padding-top: 15px; }
  .study-actions { right: auto; left: 50%; bottom: 18px; width: calc(100% - 56px); max-width: 920px; transform: translateX(-50%); padding: 15px 19px; border: 1px solid var(--line); border-radius: 22px; }
  .study-words .word-card { padding: 20px 23px; }
  .study-words[data-group-size="4"] .word-card, .study-words[data-group-size="5"] .word-card { padding: 15px 20px; }
  .completion-actions { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .app-shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 28px; padding: 28px 24px 40px; }
  .app-shell > main { min-width: 0; }
  .sidebar { display: flex; align-items: stretch; flex-direction: column; position: sticky; top: 28px; align-self: start; min-height: calc(100dvh - 56px); padding: 8px 0; }
  .sidebar .brand { padding: 5px 12px; }
  .sidebar-nav { display: grid; gap: 7px; margin-top: 35px; }
  .sidebar-nav .nav-item { min-height: 51px; justify-content: flex-start; padding: 13px 15px; }
  .sidebar-nav .nav-item:not(.is-active):hover { background: var(--surface-alt); }
  .sidebar-note { margin-top: auto; padding: 17px 15px; color: var(--muted); font-size: 12px; line-height: 1.8; }
  .sidebar-note strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; font-weight: 650; }
  .sidebar-footer { margin-top: auto; padding: 18px 14px 0; color: var(--muted); font-size: 11px; line-height: 1.8; }
  .topbar { min-height: 54px; padding: 0 0 16px; }
  .topbar .brand { display: none; }
  .topbar-label { display: block; color: var(--muted); font-size: 13px; }
  .topbar-actions { margin-left: auto; }
  .page { padding-top: 14px; padding-bottom: 20px; }
  .page-title { font-size: 33px; }
  .page-header { margin-bottom: 27px; }
  .hero { padding: 29px 30px; border-radius: 27px; }
  .hero .button-row { max-width: 470px; }
  .hero .button-primary { flex: 0 1 240px; }
  .hero .stat-grid { max-width: 540px; }
  .library-grid { gap: 14px; }
  .library-card { min-height: 223px; padding: 20px; }
  .library-card h3, .library-title { font-size: 16px; }
  .bottom-nav { display: none; }
  .study-page { padding-top: 5px; padding-bottom: 155px; }
  .study-header { margin-bottom: 21px; }
  .study-actions { left: calc(50% + 118px); bottom: 25px; width: min(calc(100vw - 284px), var(--content-width)); padding: 15px 21px; }
  .study-actions .button-primary { min-height: 53px; }
  .study-progress { margin-bottom: 22px; }
  .study-instruction { margin-bottom: 18px; }
  .word-card { border-radius: 22px; }
  .study-words[data-group-size="1"] .word-card { padding: 38px 30px; }
  .study-words[data-group-size="1"] .word-en { font-size: 52px; }
  .toast, body.is-study .toast { bottom: 28px; }
  body.is-study .toast { bottom: 133px; }
}
@media (max-width: 359px) {
  .app-shell { padding-left: 15px; padding-right: 15px; }
  .panel, .hero { padding: 17px; }
  .page-title { font-size: 25px; }
  .button { padding-left: 13px; padding-right: 13px; }
  .study-actions { padding-left: 15px; padding-right: 15px; }
  .stat + .stat { padding-left: 10px; }
  .theme-options { gap: 6px; }
  .modal { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .sidebar, .bottom-nav, .topbar, .study-actions, .toast { display: none !important; }
  .app-shell { display: block; padding: 0; }
  .page { padding: 0; }
  .panel, .hero, .word-card { box-shadow: none; break-inside: avoid; }
}




/* Imported names and notes may contain long unbroken text. */
.page-title, .hero-title, .library-title, .library-card h3, .modal-title, .subtitle, .toast { overflow-wrap: anywhere; }
.setting-row > :first-child, .library-card-top > :last-child { min-width: 0; }

/* Real application DOM refinements. */
.progress-fill { display: block; }
.topbar-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.save-status { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; color: var(--muted); font-size: 11px; line-height: 1.5; white-space: nowrap; }
.save-status svg { width: 15px; height: 15px; color: var(--success); }
.text-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; min-height: 44px; padding: 7px 0; color: var(--primary); font-size: 13px; line-height: 1.5; font-weight: 650; text-align: left; }
.text-link svg { width: 16px; height: 16px; }
.text-link:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 4px; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-header > div { min-width: 0; }
.page-header > .button { flex-shrink: 0; }
.welcome-mark { display: grid; place-items: center; flex-shrink: 0; width: 50px; height: 55px; border-radius: 18px; color: var(--success); background: var(--success-soft); }
.mobile-only { display: initial; }
.centered { text-align: center; }
.hero-top { align-items: center; }
.hero-top .button-ghost { min-height: 44px; padding: 6px 0 6px 10px; font-size: 12px; }
.hero .hero-title { margin-top: 12px; }
.hero .hero-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2px 12px; margin-top: 11px; }
.hero .hero-meta > span { font-size: 12px; }
.hero .hero-meta .text-link { font-size: 12px; }
.hero-actions { display: flex; flex-direction: column; gap: 3px; margin-top: 18px; }
.hero-actions > .button { width: 100%; min-height: 52px; font-size: 15px; }
.hero-actions .helper-text { margin-top: 8px; text-align: center; }
.resume-note { display: flex; align-items: flex-start; gap: 11px; margin-top: 16px; padding: 13px 14px; border: 1px solid var(--accent-line); border-radius: 15px; background: var(--surface); font-size: 12px; line-height: 1.7; }
.resume-note > svg { color: var(--primary); margin-top: 3px; }
.resume-note strong { color: var(--ink); font-size: 13px; font-weight: 650; }
.resume-note p { margin-top: 2px; color: var(--muted); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 25px 0 14px; }
.section-heading h2 { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.panel > .section-heading:first-child { margin-top: 0; }
.section-heading .helper-text { margin: 0; }
.library-card { display: flex; flex-direction: column; }
.library-card-top { align-items: center; justify-content: space-between; flex-direction: row; width: 100%; }
.library-mark { width: 48px; height: 46px; font-size: 12px; letter-spacing: .15px; }
.library-card > .library-title { margin-top: 15px; font-size: 16px; }
.library-card > .library-meta { margin-top: 7px; font-size: 12px; }
.library-card-note { margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.library-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin-top: auto; padding-top: 18px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.library-card-bottom > svg, .library-card-top > svg { color: var(--primary); }
.library-card.is-selected { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.gentle-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding: 0 3px; color: var(--muted); font-size: 11px; line-height: 1.8; }
.gentle-note > svg { margin-top: 3px; width: 16px; height: 16px; }
.filter-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 17px 0 20px; }
.filter-tabs .chip { gap: 7px; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; color: var(--muted); white-space: normal; text-align: left; }
.filter-tabs .chip > span { font-size: 10px; font-variant-numeric: tabular-nums; opacity: .8; }
.filter-tabs .chip.is-active, .filter-tabs .chip[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); background: var(--accent-soft); }
.search-field { display: block; }
.search-field input { display: block; width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px 14px 12px 43px; font-size: 16px; line-height: 1.5; }
.search-field input:focus { border-color: var(--focus); }
.search-field input::placeholder { color: var(--subtle); }
.list-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 2px 10px; color: var(--muted); font-size: 11px; }
.word-list .word-card { display: flex; align-items: flex-start; gap: 15px; }
.word-list .word-card > .word-main { flex: 1; min-width: 0; }
.word-list .word-card > .speak-button { margin-top: 1px; }
.word-status { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 3px 7px; border-radius: 7px; color: var(--success); background: var(--success-soft); font-size: 10px; line-height: 1.5; }
.list-more { display: flex; justify-content: center; margin: 20px 0 5px; }
details.source-note { margin-top: 23px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
details.source-note > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; color: var(--primary); font-size: 13px; font-weight: 650; cursor: pointer; list-style: none; }
details.source-note > summary::-webkit-details-marker { display: none; }
details.source-note[open] > summary { margin-bottom: 8px; }
details.source-note p { margin: 8px 0; }
details.source-note a { display: block; width: fit-content; min-height: 44px; padding: 8px 0; color: var(--primary); line-height: 1.8; }
.planned-feature { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 15px; background: var(--surface-soft); }
.planned-feature p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.button-block { width: 100%; }
.stepper { grid-template-columns: 48px minmax(0, 1fr) 48px auto; }
.stepper > span { padding-left: 1px; color: var(--muted); font-size: 13px; }
.setup-panel > .setting-row { min-height: 44px; padding-bottom: 10px; }
.setup-panel form { margin-top: 25px; }
.setup-panel form > .button-primary { width: 100%; min-height: 52px; }
.quick-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: -9px 0 21px; }
.quick-choices .chip { min-height: 44px; padding: 9px 17px; border: 1px solid var(--line); background: var(--surface-soft); color: var(--primary); font-size: 12px; }
.setup-recap { margin: 22px 0 16px; padding: 15px 16px; border: 1px solid var(--accent-line); border-radius: 14px; background: var(--accent-soft); color: var(--primary); font-size: 14px; font-weight: 650; }
.inline-note { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.inline-note svg { width: 19px; height: 19px; margin-top: 1px; color: var(--primary); }
.field-error { margin: 12px 0; padding: 11px 13px; border-radius: 13px; background: var(--danger-soft); color: var(--danger); font-size: 12px; line-height: 1.7; }
.field-error:empty { display: none; }
.study-header { align-items: flex-start; gap: 10px; }
.study-header-main { display: block; flex: 1; min-width: 0; }
.study-header-main .eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: .3px; }
.study-header .button-ghost { min-height: 44px; margin-top: -5px; padding: 8px 9px; font-size: 12px; }
.study-progress-label { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; line-height: 1.5; }
.study-progress-label strong { color: var(--ink); font-size: 14px; font-weight: 700; }
.study-progress-label span { color: var(--muted); font-size: 11px; }
.study-instruction { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.study-instruction h1 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.study-instruction .chip { flex-shrink: 0; }
.study-helper { margin-top: 16px; padding: 0 3px; color: var(--muted); font-size: 12px; line-height: 1.8; text-align: center; }
.word-en.is-long { font-size: clamp(24px, 5.7vw, 34px); }
.study-words[data-group-size="5"] .word-meaning, .study-words[data-group-size="4"] .word-meaning { font-size: 14.5px; }
.previous-button { flex-shrink: 0; }
.completion-icon { display: grid; place-items: center; width: 78px; height: 78px; border-radius: 27px; color: var(--success); background: var(--success-soft); margin-bottom: 22px; }
.completion-count { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin: 18px 0 2px; color: var(--primary); font-size: 66px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -2px; }
.completion-count > span { font-size: 16px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.complete-page .completion-actions { grid-template-columns: 1fr; max-width: 500px; margin: 23px auto 0; }
.complete-page .completion-actions > .button { min-height: 50px; }
.settings-page .panel > h2 { font-size: 17px; font-weight: 700; margin-bottom: 13px; }
.theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.theme-card { position: relative; display: flex; align-items: flex-start; flex-direction: column; gap: 6px; min-width: 0; min-height: 139px; padding: 11px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); text-align: left; }
.theme-card .theme-swatch { display: block; width: 100%; height: 38px; margin-bottom: 6px; border-radius: 9px; box-shadow: inset -15px -9px rgb(255 255 255 / 55%); }
.theme-oat .theme-swatch { background: #e9e1d2; }
.theme-blue .theme-swatch { background: #d1e2ed; }
.theme-mint .theme-swatch { background: #d8e8d8; }
.theme-card strong { font-size: 12px; line-height: 1.5; font-weight: 650; }
.theme-card small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.theme-card > svg { position: absolute; right: 8px; bottom: 9px; color: var(--primary); width: 15px; height: 15px; }
.theme-card.is-active, .theme-card[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.setting-row select { min-height: 44px; max-width: 48%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--primary); font-size: 14px; }
.backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.backup-actions .button { flex: 1; }
.backup-actions label { position: relative; cursor: pointer; }
.backup-actions label:focus-within, .upload-zone:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.upload-zone { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 11px; min-height: 208px; padding: 25px 17px; border: 1.5px dashed var(--accent-line); border-radius: 19px; background: var(--surface-soft); text-align: center; cursor: pointer; }
.upload-zone > svg { color: var(--primary); }
.upload-zone > strong { color: var(--ink); font-size: 16px; }
.upload-zone > span:not(.button) { color: var(--muted); font-size: 12px; }
.upload-zone > .button { margin-top: 7px; }
.import-format { margin-top: 23px; }
.import-format h3 { font-size: 15px; font-weight: 650; margin-bottom: 12px; }
.import-preview { margin-top: 18px; }
.import-preview > .button-primary { width: 100%; min-height: 50px; margin-top: 18px; }
.modal { position: relative; padding-top: 28px; }
.modal-close { position: absolute; top: 12px; right: 10px; }
.modal > h2 { margin: 3px 34px 14px 0; font-size: 21px; line-height: 1.45; }
.modal > p { margin-top: 11px; font-size: 14px; line-height: 1.8; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.modal-actions > .button { flex: 1; }
.modal-actions > .button-primary { min-width: 150px; }
@media (min-width: 960px) {
  .mobile-only { display: none; }
  .hero-actions { max-width: 460px; }
  .hero-actions .helper-text { text-align: left; }
  .hero-actions > .button-primary { flex: auto; max-width: 270px; }
  .library-card-top { flex-direction: row; }
  .theme-card { min-height: 165px; padding: 16px; gap: 8px; }
  .theme-card .theme-swatch { height: 48px; }
  .theme-card strong { font-size: 14px; }
  .theme-card small { font-size: 12px; }
  .study-header-main .eyebrow { font-size: 12px; }
  .study-progress-label { justify-content: flex-start; gap: 20px; }
  .study-instruction h1 { font-size: 21px; }
}
@media (max-width: 639px) {
  .page-header > .button { min-height: 44px; max-width: 132px; padding: 9px 12px; font-size: 12px; }
  .library-page .page-header { align-items: flex-end; gap: 10px; }
  .library-page .page-title { font-size: 25px; }
  .library-page .page-header > div { flex: 1; }
}
@media (max-width: 359px) {
  .stepper { grid-template-columns: 44px minmax(0, 1fr) 44px auto; gap: 7px; }
  .stepper button { width: 44px; height: 48px; }
  .theme-grid { gap: 7px; }
  .theme-card { padding: 9px; min-height: 143px; }
  .theme-card strong { font-size: 11px; }
  .theme-card small { padding-right: 1px; }
  .backup-actions { flex-direction: column; align-items: stretch; }
  .backup-actions .button { width: 100%; }
  .study-actions .button { font-size: 12px; gap: 5px; padding-inline: 10px; }
  .study-actions .button-primary { font-size: 13px; }
  .study-actions .button svg { width: 16px; height: 16px; }
}

/* Keep seven-character backup labels on one line on phones. */
@media (max-width: 639px) {
  .backup-actions { flex-direction: column; align-items: stretch; }
  .backup-actions .button { width: 100%; white-space: nowrap; }
  .theme-card small { font-size: 11px; }
}

/* Keep the translation switch available after checking, including on small phones. */
.study-page { padding-bottom: calc(218px + env(safe-area-inset-bottom)); animation: none; }
.translation-control-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 780px; margin: 0 auto 10px; }
.translation-control-row .translation-state { color: var(--muted); font-size: 12px; line-height: 1.5; }
.translation-control-row .button { min-height: 44px; padding: 9px 14px; flex-shrink: 0; gap: 7px; font-size: 13px; }
.study-words .word-meaning[hidden] { display: none; }
@media (max-width: 359px) { .translation-control-row { gap: 8px; } .translation-control-row .button { min-height: 44px; padding-inline: 10px; font-size: 12px; } .translation-control-row .translation-state { font-size: 11px; } }

body.is-study .toast { bottom: calc(190px + env(safe-area-inset-bottom)); }

/* IPA remains visible while Chinese answers are hidden. */
.word-heading { display:flex; flex:1; flex-wrap:wrap; align-items:baseline; gap:5px 14px; min-width:0; }
.word-heading .word-en { max-width:100%; }
.word-phonetic { font-family:"Segoe UI","Arial Unicode MS",Arial,sans-serif; font-size:15px; font-weight:400; letter-spacing:normal; line-height:1.5; overflow-wrap:anywhere; }
.word-heading .word-phonetic { margin-top:0; max-width:100%; }
.word-phonetic.is-missing { color:var(--muted); font-size:12px; }
.word-list .word-heading { gap:4px 11px; }
.word-list .word-phonetic { font-size:14px; }
.word-list .word-status, .speak-button { flex-shrink:0; }
.import-preview td .word-phonetic, .import-format td .word-phonetic { display:block; margin-top:4px; font-size:13px; }
.scan-phonetic { display:block; min-height:1.5em; margin-top:7px; color:var(--muted); }
@media(max-width:420px) { .study-page .word-heading { gap:4px 10px; } .study-page .word-phonetic { font-size:14px; } }

/* Direction and answer preferences share the quiet, spacious study surface. */
.practice-options{margin:0 0 22px;max-width:760px}.option-label{display:block;font-size:13px;color:var(--muted);font-weight:650;margin:0 0 9px}.practice-options .segmented{margin:0;display:flex;max-width:100%;width:fit-content}.practice-options .segmented button{min-height:44px;white-space:normal;line-height:1.4}.practice-options .helper-text{margin:8px 0 0}.direction-picker button{min-width:150px}.answer-method-picker button{min-width:86px}.study-mode-strip{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}.study-page .practice-options{margin-bottom:26px}.study-page.has-answer-input{padding-bottom:40px}.has-answer-input .study-actions{position:static;left:auto;right:auto;bottom:auto;transform:none;width:100%;max-width:none;margin-top:24px}.word-prompt-zh{font-size:clamp(21px,3vw,30px);line-height:1.65;font-weight:650;overflow-wrap:anywhere;margin:16px 0 20px}.paper-answer-note{color:var(--muted);font-size:14px;line-height:1.7;margin:18px 0 0}.answer-reference{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}.answer-reference-label{display:block;color:var(--muted);font-size:12px;letter-spacing:.08em;margin-bottom:12px}.answer-reference .word-meaning{border:0;padding:0;margin:0}.reference-english{font-size:28px;line-height:1.4;margin:0;overflow-wrap:anywhere}.answer-feedback{margin-top:18px;display:flex;gap:6px;flex-direction:column;font-size:13px;line-height:1.6;color:var(--muted)}.answer-feedback strong{font-weight:650;color:var(--ink)}.has-answer-input .study-words{display:grid;grid-template-columns:1fr;gap:18px}.has-answer-input .word-card{padding:26px 30px}.study-instruction .chip{white-space:nowrap}.has-answer-input textarea{scroll-margin-block:100px}.study-page:has(.answer-entry-handwriting){max-width:1100px}
@media(max-width:600px){.direction-picker{width:100%!important}.direction-picker button{min-width:0;flex:1}.answer-method-picker{width:100%!important}.answer-method-picker button{min-width:0;flex:1}.has-answer-input .word-card{padding:20px}.study-instruction{align-items:flex-start;gap:12px}.study-instruction h1{font-size:23px}.study-instruction .chip{font-size:11px}.has-answer-input .study-actions{padding:16px}.study-mode-strip{gap:8px}.practice-options{margin-bottom:18px}.reference-english{font-size:25px}}

.reference-full-meaning{font-size:14px;line-height:1.7;color:var(--muted);margin:16px 0 0;overflow-wrap:anywhere}