/* BiHanyu E: shared presentation tokens layered over the existing component system.
   Screen only. Printable grids, school strokes and functional UI fonts remain unchanged. */
:root{--brand-red:#C62828;--brand-red-hover:#A91F24;--brand-black:#111111;--brand-charcoal:#1A1A1A;--brand-white:#FFFFFF;--surface-warm:#F8F7F4;--surface-muted:#F3F3F3;--border-neutral:#E2E2E2;--text-secondary:#606060}
@media screen{
 :root{color-scheme:light;--ink:var(--brand-black);--muted:var(--text-secondary);--paper:#fff;--bg:var(--surface-warm);--line:var(--border-neutral);--green:var(--brand-red);--mint:#FCF0F0;--surface-panel:#fff;--surface-card:#fff;--surface-soft:#F8F7F4;--surface-selected:#FCF0F0;--link-color:#A91F24;--focus-color:#9A2027;--toast-bg:#FAF3F1;--toast-border:#D9C4BF;--hero-wash:linear-gradient(90deg,#fffffffa,#fffffff0 42%,#ffffff40);--hero-image-filter:grayscale(1);--shadow-panel:0 10px 38px #11111106;--disabled-bg:#ECECEC;--disabled-ink:#666}
 :root[data-theme=dark]{color-scheme:dark;--ink:#F5F5F5;--muted:#C0C0C0;--text-secondary:#C0C0C0;--paper:#202020;--bg:#151515;--line:#4B4B4B;--border-neutral:#4B4B4B;--surface-warm:#151515;--surface-muted:#292929;--mint:#3A2528;--surface-panel:#202020;--surface-card:#242424;--surface-soft:#292929;--surface-selected:#3A2528;--link-color:#F39195;--focus-color:#FFB1B5;--toast-bg:#302326;--toast-border:#9B7379;--hero-wash:linear-gradient(90deg,#191919fa,#191919ec 42%,#19191955);--hero-image-filter:grayscale(1) brightness(.4);--shadow-panel:none;--disabled-bg:#363636;--disabled-ink:#B3B3B3}
 body{background:var(--bg)!important;color:var(--ink)!important}
 .top,.top .nav{background:var(--surface-panel)!important;border-color:var(--line)!important}
 .top .nav{gap:18px!important}
 .brand{border:0!important;margin-right:8px!important;padding-right:0!important;min-width:0}
 .brand .bihanyu-wordmark{width:141.0417px!important;height:48.4615px!important;object-fit:contain;object-position:left center}
 .bihanyu-footer-brand{width:141.0417px!important;height:48.4615px!important}
 .brand picture,.brand picture img{display:block}
 .brand-logo-dark{display:none!important}
 [data-theme=dark] .brand-logo-light{display:none!important}
 [data-theme=dark] .brand-logo-dark{display:block!important}
 .navlinks{gap:8px!important}
 .navlinks .nav-tab{color:var(--ink)!important;border-radius:8px!important;min-height:44px;display:flex;justify-content:center;align-items:center;line-height:1.4!important;transition:none!important}
 .navlinks .nav-tab.active,.navlinks a[aria-current=page]{background:var(--brand-red)!important;color:#fff!important;box-shadow:none!important}
 .navlinks .nav-tab:hover:not(.active){background:var(--surface-selected)!important;color:var(--link-color)!important}
 .navright{margin-left:auto!important;gap:8px!important;display:flex;align-items:center}
 .theme-toggle{width:44px;height:44px;min-width:44px;padding:10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-panel);color:var(--ink);display:grid;place-items:center}
 .theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}
 .theme-toggle:hover{background:var(--surface-soft);border-color:var(--text-secondary)}
 .lang{color:var(--text-secondary)!important;background:var(--surface-soft)!important;border-color:var(--line)!important}
 body .hero,body.phase2-page .vocabulary-hero{background:var(--surface-panel)!important;border-color:var(--line)!important;border-radius:18px!important;box-shadow:none!important}
 body .hero::before{filter:var(--hero-image-filter)!important;animation:none!important;transform:none!important;z-index:0!important}
 body .hero::after{content:""!important;display:block!important;position:absolute;inset:0;width:100%;height:100%;background:var(--hero-wash);pointer-events:none;z-index:1!important}
 body .hero>div{position:relative;z-index:2!important}
 body .hero .eyebrow{color:var(--link-color)!important;letter-spacing:.14em!important}
 body .hero h1,body .hero h1 span{color:var(--ink)!important}
 body .hero h1{font-family:var(--font-accent)!important;letter-spacing:-.025em!important}
 body .hero h1 span{color:var(--ink)!important;font-style:normal!important}
 body .hero p{color:var(--text-secondary)!important}
 body .hero .eyebrow::before{content:"";display:inline-block;width:28px;height:3px;background:var(--brand-red);margin:0 10px 3px 0}
 .card,.word-options-drawer,.drawing-panel,.shared-handwriting-panel,.about-page .section,body.legal-page main,.word-detail,.word-suggestions,.autocomplete{background:var(--surface-panel)!important;border-color:var(--line)!important;color:var(--ink)!important;box-shadow:var(--shadow-panel)!important}
 body #practicar,body #worksheetPanel,body #dictationPanel{border-radius:18px!important;animation:none!important}
 .cardhead,.section-head,.inline-head,.entry-side,.entry-main>section,.entry-main>div,.entry-side>section,.dictation-controls,.dictation-selection-head,.worksheet-character-search,.foot,.source-details,.entry-subsection{border-color:var(--line)!important}
 body #practicar .cardhead h2,body #worksheetPanel .cardhead h2,body #dictationPanel .cardhead h2{color:var(--ink)!important;font-family:var(--font-ui)!important}
 body .fieldlabel,body #practicar .fieldlabel,body #worksheetPanel .fieldlabel,body #dictationPanel label[for=dictationInput],body .dictation-selection-head strong{color:var(--ink)!important}
 body h2,body h3,body h4,body .entry-title,body .entry-pronunciation .pinyin,body .entry-hanzi,body #entryHanzi,body #entryPinyin,body #sentenceHanzi{color:var(--ink)!important}
 body .hint,body .tiny,body #wordStatus,body #wordHelp,body .dictation-help,body .dictation-intro,body .dictation-paper-hint,body .dictation-choice-meaning,body .dictation-choice-pinyin,body .dictation-choice-copy p,body .worksheet-search-help,body #dictationCount,body #dictationAudioStatus,body .pdf-save-hint{color:var(--text-secondary)!important}
 body .primary,body .printbtn,body .savebtn{background:var(--brand-red)!important;color:#fff!important;border-color:var(--brand-red)!important;box-shadow:none!important}
 body .primary:hover:not(:disabled),body .printbtn:hover:not(:disabled),body .savebtn:hover:not(:disabled){background:var(--brand-red-hover)!important;border-color:var(--brand-red-hover)!important}
 body button:disabled,body .primary:disabled{background:var(--disabled-bg)!important;color:var(--disabled-ink)!important;border-color:var(--line)!important;cursor:not-allowed;opacity:1!important}
 body .iconbtn,body .textinput,body input:not([type=checkbox]):not([type=radio]),body select,body textarea,body .field-clear,body #drawButton,body #worksheetHandwritingButton,body #dictationHandwritingButton{background:var(--surface-panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
 body .textinput::placeholder,body input::placeholder,body textarea::placeholder{color:var(--text-secondary)!important;opacity:1}
 body input[type=checkbox],body input[type=radio]{accent-color:var(--brand-red)}
 body .iconbtn:hover:not(:disabled),body #drawButton:hover,body #worksheetHandwritingButton:hover,body #dictationHandwritingButton:hover{background:var(--surface-selected)!important;border-color:var(--link-color)!important}
 body .field-clear,body .remove-entry,body .remove-worksheet-item,body .dictation-choice-remove{color:var(--link-color)!important;background:var(--surface-selected)!important;border-color:var(--line)!important}
 body a,body .text-action,body summary,body .source-link,body .dictation-more,body .dictation-manual-link{color:var(--link-color)!important}
 body a:focus-visible,body button:focus-visible,body input:focus-visible,body textarea:focus-visible,body select:focus-visible,body summary:focus-visible{outline:3px solid var(--focus-color)!important;outline-offset:3px!important;box-shadow:none!important}
 body .skip-link{background:var(--surface-panel)!important;color:var(--ink)!important;border:2px solid var(--focus-color)}
 body .search-result,body .canonical-search-item,body .dictation-choice,body .worksheet-word-chip,body .entry-character,body .character-part,body .entry-type,body .character-item,body .character-card,body .advanced-options,body .dictation-round,body .dictation-summary,body .worksheet-preview,body .worksheet-character-details,body .preview-character-group,body .canonical-search-results,body .word-options-head,body .word-option,body .example-card,body .entry-component{background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}
 body .search-result:hover,body .canonical-search-item:hover,body .dictation-choice:hover,body .worksheet-word-chip:hover{background:var(--surface-selected)!important;border-color:var(--link-color)!important;box-shadow:none!important}
 body .dictation-choice .han,body .dictation-answer .han,body .character-card .han,body .entry-character .han,body .worksheet-word-chip .han{color:var(--ink)!important}
 body .tone-filters button[aria-pressed=true],body .tone-filter.active{background:var(--brand-red)!important;color:#fff!important;border-color:var(--brand-red)!important}
 body .dictation-progress-fill{background:var(--brand-red)!important}
 body .dictation-progress-track{background:var(--surface-selected)!important;border-color:var(--line)!important}
 body .dictation-progress-step,body .dictation-progress-step.is-complete,body .dictation-progress-step.is-current{color:var(--ink)!important}
 body .dictation-progress-step.is-current,body .dictation-progress-step.is-complete{color:#fff!important}
 body #dictationPanel .dictation-progress-bar{background:var(--surface-selected)!important}
 body #dictationPanel .dictation-progress-bar::before{background:var(--brand-red)!important}
 body #dictationPanel .dictation-progress-step{color:var(--text-secondary)!important}
 body #dictationPanel .dictation-progress-step.is-reached,body #dictationPanel .dictation-progress-step.is-current{color:#fff!important}
 body .toast,body #searchReceipt:not([hidden]),body .worksheet-added-notice:not([hidden]),body .dictation-message:not(:empty){background:var(--toast-bg)!important;color:var(--ink)!important;border-color:var(--toast-border)!important;box-shadow:0 6px 24px #00000018!important}
 body .foot{background:var(--surface-panel)!important;color:var(--text-secondary)!important}
 body .foot p{color:var(--text-secondary)!important}
 body .foot a,body.phase2-page .foot a,body.legal-page a,body.about-page a{color:var(--link-color)!important;text-decoration-color:currentColor!important;border-color:currentColor!important}
 body .foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px}
 .tool-overview{margin:24px 0 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .tool-overview>a{border:1px solid var(--line);background:var(--surface-panel);color:var(--ink)!important;border-radius:14px;padding:22px;text-decoration:none;min-width:0}
 .tool-overview h2{font-size:18px;margin:0 0 8px;font-family:var(--font-ui)}
 .tool-overview p{font-size:14px;line-height:1.65;color:var(--text-secondary);margin:0}
 .tool-overview a:hover{border-color:var(--link-color);background:var(--surface-selected)}
 .tool-overview .tool-number{color:var(--link-color);font-size:12px;font-weight:700;letter-spacing:.12em;display:block;margin-bottom:18px}
 body .pronunciation-note{max-width:1180px;margin:24px auto 28px;padding:18px 24px;color:var(--text-secondary)!important;background:var(--surface-panel)!important;border:1px solid var(--line)!important;border-radius:14px;font-size:14px;line-height:1.7}
 .pronunciation-note h2{font-size:16px;margin:0 0 8px}
 .pronunciation-note p{margin:0;max-width:850px}
 .legal-notice{background:var(--surface-selected)!important;color:var(--ink)!important;border-color:var(--line)!important}
 .updated{color:var(--text-secondary)!important}
 body.phase2-page .meaning-text,body .dictation-choice-reading,body #worksheetPanel label.fieldlabel{color:var(--ink)!important}
 html body #worksheetAddedNotice.hanzi-shared-toast,html body #dictationMessage.hanzi-shared-toast,html body #searchReceipt.hanzi-shared-toast,html body #toast.hanzi-shared-toast{background:var(--toast-bg)!important;color:var(--ink)!important;border-color:var(--toast-border)!important;animation:none!important;opacity:1!important}
 body #phase4WorksheetOptions,body .canonical-search,body .canonical-search-pagination,body .canonical-build-pagination{background:var(--surface-soft)!important;color:var(--ink)!important;border-color:var(--line)!important}
 body .canonical-search-summary,body .canonical-search-item small{color:var(--text-secondary)!important}
 body .canonical-search-more,body .canonical-build-chips button,body .canonical-tones button{background:var(--surface-panel)!important;color:var(--link-color)!important;border-color:var(--line)!important}
 body .canonical-build-chips button[aria-current=step],body .canonical-tones button[aria-pressed=true]{background:var(--brand-red)!important;color:#fff!important;border-color:var(--brand-red)!important}
 body .canonical-build-preview{color:var(--ink)!important}
 body.phase2-page .component-item{background:var(--surface-soft)!important;border-color:var(--line)!important;color:var(--ink)!important}
 body.phase2-page .component-glyph{background:var(--surface-selected)!important;color:var(--link-color)!important}
 body.phase2-page .component-reading,body.phase2-page .component-meaning{color:var(--text-secondary)!important}
 body #worksheetPanel .worksheet-character-search .fieldlabel{color:var(--ink)!important}
 body #phase4WorksheetOptions .phase4-row-help{color:var(--text-secondary)!important}
 body.phase2-page .word-options-eyebrow{color:var(--link-color)!important}
 body.phase2-page .word-options-summary,body.phase2-page .result-meaning,body .shared-page-indicator{color:var(--text-secondary)!important}
 body.phase2-page .tone-filters button,body .shared-page-arrow{background:var(--surface-panel)!important;color:var(--link-color)!important;border-color:var(--line)!important}
 body.phase2-page .tone-filters button[aria-pressed=true]{background:var(--brand-red)!important;color:#fff!important;border-color:var(--brand-red)!important}
 body .shared-page-halo{background:var(--surface-panel)!important}
 body .shared-page-dot.active{background:var(--link-color)!important}
 .about-page .feature{background:var(--surface-soft)!important;border-color:var(--line)!important;color:var(--ink)!important}
 [data-theme=dark] .handwriting-canvas,[data-theme=dark] canvas{background:#fff!important;color-scheme:light}
 [data-theme=dark] .stroke-glyph,[data-theme=dark] .stroke-target,[data-theme=dark] .worksheet-writer-target{background:#fff!important;color:#111!important;border-radius:8px}
 [data-theme=dark] .drawing-panel,[data-theme=dark] .shared-handwriting-panel{border:1px solid var(--line)}
 .theme-preview-label{font-size:11px;line-height:1.4;color:var(--text-secondary);max-width:90px}
 @media(max-width:760px){.tool-overview{grid-template-columns:1fr}.tool-overview>a{padding:18px}.tool-overview .tool-number{margin-bottom:8px}.pronunciation-note{padding-inline:18px}}
 @media(max-width:640px){body .top .nav{height:auto!important;min-height:132px!important;padding-top:12px!important;padding-bottom:12px!important;row-gap:10px!important}.brand .bihanyu-wordmark{width:141.0417px!important;height:48.4615px!important}.navlinks{grid-template-columns:repeat(3,minmax(0,1fr))!important;order:3!important;width:100%!important;gap:6px!important}.navlinks .nav-tab{font-size:13px!important;padding:10px 4px!important;text-align:center;min-width:0}.navright{margin-left:auto!important}.theme-preview-label{display:none}.theme-toggle{width:42px;height:42px;min-width:42px}.brand{margin-right:0!important}.hero h1{max-width:100%}.tool-overview{margin-top:18px}}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
}
@media print{.theme-toggle,.theme-preview-label,.tool-overview,.pronunciation-note{display:none!important}:root{color-scheme:light;--ink:#222;--paper:#fff;--bg:#fff;--line:#bbb;--green:#215c4b;--mint:#fff}}

/* Button consistency audit, 2026-10-18. Screen-only; preserve printable practice sheets. */
@media screen {
 :root { --button-radius:9px; --button-height:44px; --button-padding:10px 14px; }
 html body button {
  box-sizing:border-box; font-family:var(--font-ui,system-ui,sans-serif);
  color:var(--ink)!important; background:var(--surface-panel)!important;
  border-color:var(--line)!important; box-shadow:none!important;
 }
 html body :is(.primary,.printbtn,.savebtn,.iconbtn,.audio-btn,.worksheet-handwriting-button,.dictation-draw-prompt,.canonical-search-more,.worksheet-stroke-resize,.addword),
 html body :where(.drawing-actions,.shared-handwriting-actions) button {
  min-height:var(--button-height)!important; border:1px solid var(--line)!important;
  border-radius:var(--button-radius)!important; padding:var(--button-padding)!important;
  font-size:14px!important; font-weight:650!important; line-height:20px!important;
  background:var(--surface-panel)!important; color:var(--ink)!important;
 }
 html body :is(.primary,.printbtn,.savebtn) {
  background:var(--brand-red)!important; color:#fff!important; border-color:var(--brand-red)!important;
 }
 /* Search inputs and their adjacent action share one height across all tools. */
 html body :is(.search-row,.worksheet-search-row,.dictation-add-row) > .primary { min-height:58px!important; }
 html body :is(.text-action,.dictation-more,.dictation-manual-link) {
  min-height:44px!important; padding:10px 0!important; border:0!important;
  border-radius:0!important; background:transparent!important; color:var(--link-color)!important;
  font-size:14px!important; font-weight:650!important; line-height:20px!important;
 }
 html body :is(.field-clear,.clear-input-btn,.remove-entry,.remove-worksheet-item,.dictation-choice-remove,.sentence-result-clear) {
  box-sizing:border-box; min-width:44px!important; min-height:44px!important;
  width:44px!important; height:44px!important; padding:0!important;
  border:1px solid var(--line)!important; border-radius:var(--button-radius)!important;
  background:var(--surface-selected)!important; color:var(--link-color)!important;
  font-size:24px!important; line-height:1!important;
 }
 html body :is(.audio-btn,.audio-control,.worksheet-stroke-resize,.addword,.dictation-repeat,.theme-toggle,.shared-page-arrow),
 html body :is(#closeWordOptions,#cancelComposition) {
  box-sizing:border-box; min-width:44px!important; min-height:44px!important;
  width:44px!important; height:44px!important; padding:0!important;
  border:1px solid var(--line)!important; border-radius:var(--button-radius)!important;
  font-size:22px!important; line-height:1!important;
 }
 html body .theme-toggle {font-size:16px!important;}
 html body .navlinks .nav-tab {
  box-sizing:border-box; min-height:44px!important; padding:10px 16px!important;
  border:1px solid transparent!important; border-radius:var(--button-radius)!important;
  font-size:14px!important; font-weight:650!important; line-height:20px!important;
  background:transparent!important; color:var(--ink)!important;
 }
 html body .navlinks .nav-tab.active,html body .navlinks [aria-current=page] {
  background:var(--brand-red)!important; border-color:var(--brand-red)!important; color:#fff!important;
 }
 html body .tab {color:var(--ink)!important; border-color:var(--line)!important; background:transparent!important;}
 html body .tab.active {color:var(--link-color)!important; border-color:var(--brand-red)!important;}
 html body :is(.tone-filters,.canonical-tones,.canonical-build-chips) button {
  min-height:44px!important; padding:10px 14px!important; border:1px solid var(--line)!important;
  border-radius:var(--button-radius)!important; color:var(--ink)!important; background:var(--surface-panel)!important;
  font-size:14px!important; font-weight:650!important; line-height:20px!important;
 }
 html body :is(.tone-filters,.canonical-tones) button[aria-pressed=true],
 html body .canonical-build-chips button[aria-current=step] {
  background:var(--brand-red)!important; color:#fff!important; border-color:var(--brand-red)!important;
 }
 html body button:hover:not(:disabled),html body .navlinks .nav-tab:hover:not(.active):not([aria-current=page]) {
  background:var(--surface-selected)!important; border-color:var(--link-color)!important;
 }
 html body :is(.primary,.printbtn,.savebtn):hover:not(:disabled) {
  background:var(--brand-red-hover)!important; border-color:var(--brand-red-hover)!important; color:#fff!important;
 }
 html body :is(.tone-filters,.canonical-tones) button[aria-pressed=true]:hover {
  background:var(--brand-red-hover)!important; color:#fff!important;
 }
 html body button:disabled,html body :is(.primary,.printbtn,.savebtn,.iconbtn):disabled {
  background:var(--disabled-bg)!important; color:var(--disabled-ink)!important;
  border-color:var(--line)!important; opacity:1!important; cursor:not-allowed!important;
 }
 @media(max-width:640px) {html body .navlinks .nav-tab {padding:10px 4px!important;font-size:13px!important;}}
}
@media screen {
 html body button {transition:none!important;}
 html body #dictationPanel #dictationRound :is(#dictationPause,#dictationReplay,#dictationNext,#dictationStop) {
  min-height:44px!important; padding:10px 14px!important; font-size:14px!important;
  line-height:20px!important; border:1px solid var(--line)!important; border-radius:9px!important;
  background:var(--surface-panel)!important; color:var(--ink)!important;
 }
 html body #dictationPanel #dictationRound #dictationStop {background:var(--brand-red)!important;color:#fff!important;border-color:var(--brand-red)!important;}
 html body #dictationPanel #dictationRound button:hover:not(:disabled) {background:var(--surface-selected)!important;border-color:var(--link-color)!important;}
 html body #dictationPanel #dictationRound #dictationStop:hover:not(:disabled) {background:var(--brand-red-hover)!important;border-color:var(--brand-red-hover)!important;}
 html body #dictationPanel #dictationRound button:disabled {background:var(--disabled-bg)!important;color:var(--disabled-ink)!important;border-color:var(--line)!important;}
}
@media screen {
 html body button {min-height:44px!important;border-radius:9px!important;}
 html body :is(.dictation-move,.dictation-remove,.dictation-word-audio) {
  box-sizing:border-box;min-width:44px!important;min-height:44px!important;width:44px!important;height:44px!important;
  padding:0!important;border:1px solid var(--line)!important;border-radius:9px!important;font-size:22px!important;line-height:1!important;
 }
 html body .dictation-remove {background:var(--surface-selected)!important;color:var(--link-color)!important;}
 html body :is(.text-action,.dictation-more,.dictation-manual-link,.tab) {border-radius:0!important;}
}
@media screen {
 html body #dictationPanel #dictationRound :is(#dictationRoundRestart,#dictationRoundExit) {
  background:var(--surface-panel)!important;color:var(--ink)!important;border-color:var(--line)!important;border-radius:9px!important;
 }
 html body #dictationPanel #dictationRound :is(#dictationRoundRestart,#dictationRoundExit):hover:not(:disabled) {
  background:var(--surface-selected)!important;border-color:var(--link-color)!important;
 }
}

@media screen {
 html body button.unified-close,html body button.unified-restart {box-sizing:border-box;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;font-size:24px!important;line-height:1!important;flex-shrink:0;}
 html body button.unified-close {background:var(--surface-panel)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:9px!important;}
 html body button.unified-close:hover {background:var(--surface-selected)!important;border-color:var(--link-color)!important;}
 html body button.unified-add {width:auto!important;min-width:80px!important;font-size:14px!important;padding:10px 14px!important;}
}
@media screen {html body #handwritingPanel {background:var(--surface-panel)!important;color:var(--ink)!important;border-color:var(--line)!important;}}