/* 86Tong 学汉语小星球 theme v1.2
   Page-aware theme overrides for Learning Hub, Radical Explorer and Writing Studio.
   The shared theme stylesheet is linked after each page's inline CSS. */
:root {
  color-scheme: light;
  --tong-bg:#F5F8F5;
  --tong-page:#FAF8F1;
  --tong-surface:#FFFFFF;
  --tong-surface-soft:#E9F2EC;
  --tong-surface-warm:#F8F5EA;
  --tong-text:#263A32;
  --tong-heading:#103A30;
  --tong-muted:#586B61;
  --tong-border:#DCE6DE;
  --tong-input:#FFFFFF;
  --tong-input-text:#263A32;
  --tong-link:#174B3E;
  --tong-accent:#174B3E;
  --tong-accent-text:#FFFFFF;
  --g:#174B3E; --d:#103A30; --p:#E9F2EC; --gold:#E9CB80;
  --cream:#FAF8F1; --ink:#263A32; --muted:#586B61; --line:#DCE6DE; --white:#FFFFFF;
}
html[data-theme="dark"] {
  color-scheme:dark;
  --tong-bg:#17251F;
  --tong-page:#1D2D25;
  --tong-surface:#24372E;
  --tong-surface-soft:#2B4236;
  --tong-surface-warm:#354237;
  --tong-text:#E2ECE5;
  --tong-heading:#F0F5F1;
  --tong-muted:#BDCDC3;
  --tong-border:#465D50;
  --tong-input:#1D2D25;
  --tong-input-text:#F0F5F1;
  --tong-link:#B9E0C7;
  --tong-accent:#397A5B;
  --tong-accent-text:#FFFFFF;
  --g:#B9E0C7; --d:#E2ECE5; --p:#2B4236; --gold:#E9CB80;
  --cream:#1D2D25; --ink:#E2ECE5; --muted:#BDCDC3; --line:#465D50; --white:#24372E;
}

/* Base */
html,body { min-height:100%; }
body { background:var(--tong-bg) !important; color:var(--tong-text) !important; }
h1,h2,h3,h4,h5,h6,strong,b { color:var(--tong-heading); }
p,li,label,small,.sub,.subtitle,.topnote,.description,.help,.hint,.muted,.meta,.eyebrow,.media-note,.keyboard {
  color:var(--tong-muted);
}
a:not(.brand):not(.tong-shared-nav a):not(.tong-theme-toggle) { color:var(--tong-link); }

/* Header / shared navigation */
header, footer { background:var(--tong-page) !important; color:var(--tong-text) !important; border-color:var(--tong-border) !important; }
.tong-shared-nav { background:var(--tong-page) !important; border-color:var(--tong-border) !important; }
.tong-shared-nav a { color:var(--tong-text) !important; }
.tong-shared-nav a[aria-current="page"] { background:var(--tong-accent) !important; color:#fff !important; }
.tong-nav-caption { color:#9A7838 !important; }
html[data-theme="dark"] .tong-nav-caption { color:var(--gold) !important; }

/* Shared surface components */
.panel,.card,.stat,.summary,.intro,.filters,.audio-box,.reveal,.completed-item,.empty,
.tool-card,.result,.result-card,.character-card,.radical-card,.word-card,.note-card,
.library-card,.welcome-card,.step-card,.lesson-card,.sentence-card,.exercise-card,
.discovery-card,.item-card,.modal-content,.dialog,.popover,.search-box,.filter-box,
.practice-card,.writing-card,.dictionary-card,.pinyin-card,.progress-card,.stat-card,
.list-panel,.detail,.stage-card,.sidecard,.path-card,.learning-step,.speaking-record-card,
.vocab-card,.discovery-modal,.daily-card,.ocr-panel,.tip,.filters,.completed-empty {
  background:var(--tong-surface) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.hero,.tool-hero,.welcome,.welcome-panel,.intro-panel,.callout,.notice,.learning-tip,
.discovery-tip,.daily-discovery,.path-card.beginner,.tip {
  background:var(--tong-surface-soft) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}

/* Page-specific readable text. This also fixes the washed-out light hero text. */
.hero h1,.hero h2,.hero h3,.hero p,.hero .eyebrow,.hero .subtitle,
.tool-hero h1,.tool-hero h2,.tool-hero p,.tool-hero .eyebrow,.tool-hero .subtitle,
.hero .hero-content,.hero .hero-copy,.hero .lead,
.daily-discovery h1,.daily-discovery h2,.daily-discovery h3,.daily-discovery p,
.path-card h2,.path-card h3,.path-card p,
.learning-step strong,.learning-step span,
.vocab-card strong,.vocab-card p,.discovery-card,.discovery-card *,
.daily-card,.daily-card *,.discovery-modal,.discovery-modal *,
.speaking-record-card h3,.speaking-record-card p,
.tip strong,.tip p,
.list-panel,.list-panel *, .detail,.detail *,
.stage-card,.sidecard,.sidecard * {
  opacity:1 !important;
}

/* Hanzi Writer owns opacity on its SVG groups and paths.
   Do not force opacity on descendants of .stage-card: doing so can
   reveal hidden character layers and interfere with stroke animations/hints. */
.hero h1,.hero h2,.tool-hero h1,.tool-hero h2,
.path-card h2,.learning-step strong,.speaking-record-card h3,
.panel h1,.panel h2,.panel h3,.list-panel h1,.list-panel h2,.detail h1,.detail h2 {
  color:var(--tong-heading) !important;
}
.hero p,.tool-hero p,.path-card p,.learning-step span,
.speaking-record-card p,.tip p,.discovery-meaning,.discovery-meta,
.vocab-card p,.discovery-modal-meaning,.discovery-modal-info {
  color:var(--tong-muted) !important;
}

/* Learning Hub: daily discovery, cards, OCR, reading steps, speaking */
.discovery-card,.daily-card {
  background:linear-gradient(145deg,var(--tong-surface-soft),var(--tong-surface-warm)) !important;
  border:1px solid var(--tong-border) !important;
}
.discovery-char { color:var(--g) !important; }
.discovery-pinyin,.discovery-modal-pinyin { color:var(--tong-gold,#9A7838) !important; }
.discovery-modal-char { color:var(--tong-heading) !important; }
.discovery-modal-backdrop { background:rgba(5,15,10,.72) !important; }
.discovery-modal-close { background:var(--tong-surface-soft) !important; color:var(--tong-text) !important; }
.learning-step { background:var(--tong-surface) !important; }
.learning-step .step-no { background:var(--tong-accent) !important; color:#fff !important; }
.vocab-card { background:var(--tong-surface) !important; }
.ocr-panel { background:var(--tong-surface) !important; }
.speaking-record-card { background:var(--tong-surface-soft) !important; }

/* Radical Explorer */
.list-panel,.detail { background:var(--tong-surface) !important; }
.radical-card,.radical-item,.radical-grid button,.radical-tile {
  background:var(--tong-surface-soft) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.detail .character,.detail .hanzi,.radical-char { color:var(--tong-heading) !important; }
.detail .meaning,.detail .description,.detail p { color:var(--tong-muted) !important; }

/* Writing Studio */
.stage-card,.sidecard,.panel { background:var(--tong-surface) !important; }
.suggestion-list,.suggestions,.character-suggestions,.practice-list {
  background:var(--tong-surface) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.suggestion-list button,.suggestions button,.character-suggestions button,
.practice-chip,.character-chip {
  background:var(--tong-surface-soft) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.hanzi-writer,.hanzi-writer svg,.character-canvas,canvas { background:transparent; }


/* Hanzi Writer: keep the drawing surface paper-like, but let the library
   control SVG path/group opacity and visibility during animation and hints. */
.writer-stage svg,
.writer-stage svg g,
.writer-stage svg path {
  transition: none;
}

/* Controls */
input,textarea,select,.answer,.search input,.search-box input {
  background:var(--tong-input) !important;
  color:var(--tong-input-text) !important;
  border-color:var(--tong-border) !important;
}
input::placeholder,textarea::placeholder { color:var(--tong-muted) !important; opacity:1 !important; }
button,.btn,.back,.tab,.filter-btn { border-color:var(--tong-border); }
.btn:not(.primary):not(.active),button:not(.primary):not(.tong-theme-toggle),.back,.tab:not(.active),.filter-btn:not(.active) {
  background:var(--tong-surface-soft); color:var(--tong-text);
}
.btn.primary,button.primary,.tab.active,.filter-btn.active {
  background:var(--tong-accent); color:var(--tong-accent-text); border-color:var(--tong-accent);
}
table,th,td { color:var(--tong-text); border-color:var(--tong-border) !important; }
hr { border-color:var(--tong-border) !important; }

/* Dark theme explicit surfaces and high contrast */
html[data-theme="dark"] body { background:var(--tong-bg) !important; color:var(--tong-text) !important; }
html[data-theme="dark"] .hero,
html[data-theme="dark"] .tool-hero,
html[data-theme="dark"] .daily-discovery,
html[data-theme="dark"] .path-card,
html[data-theme="dark"] .path-card.beginner,
html[data-theme="dark"] .path-card.explorer,
html[data-theme="dark"] .learning-step,
html[data-theme="dark"] .vocab-card,
html[data-theme="dark"] .discovery-card,
html[data-theme="dark"] .daily-card,
html[data-theme="dark"] .discovery-modal,
html[data-theme="dark"] .ocr-panel,
html[data-theme="dark"] .speaking-record-card,
html[data-theme="dark"] .stage-card,
html[data-theme="dark"] .sidecard,
html[data-theme="dark"] .list-panel,
html[data-theme="dark"] .detail,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .filters,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .suggestion-list,
html[data-theme="dark"] .suggestions,
html[data-theme="dark"] .character-suggestions,
html[data-theme="dark"] .practice-list {
  background:var(--tong-surface) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
  box-shadow:none;
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .tool-hero,
html[data-theme="dark"] .daily-discovery,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .welcome {
  background:var(--tong-page) !important;
}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,
html[data-theme="dark"] h4,html[data-theme="dark"] strong,html[data-theme="dark"] b,
html[data-theme="dark"] label,html[data-theme="dark"] .hero h1,html[data-theme="dark"] .hero h2,
html[data-theme="dark"] .tool-hero h1,html[data-theme="dark"] .tool-hero h2,
html[data-theme="dark"] .path-card h2,html[data-theme="dark"] .learning-step strong {
  color:var(--tong-heading) !important; opacity:1 !important;
}
html[data-theme="dark"] p,html[data-theme="dark"] li,html[data-theme="dark"] small,
html[data-theme="dark"] .hero p,html[data-theme="dark"] .tool-hero p,
html[data-theme="dark"] .path-card p,html[data-theme="dark"] .learning-step span,
html[data-theme="dark"] .muted,html[data-theme="dark"] .subtitle,
html[data-theme="dark"] .discovery-meaning,html[data-theme="dark"] .discovery-meta,
html[data-theme="dark"] .vocab-card p,html[data-theme="dark"] .tip p {
  color:var(--tong-muted) !important; opacity:1 !important;
}
html[data-theme="dark"] .discovery-card,html[data-theme="dark"] .daily-card {
  background:linear-gradient(145deg,#2B4236,#354237) !important;
}
html[data-theme="dark"] .discovery-char,html[data-theme="dark"] .radical-char {
  color:#B9E0C7 !important;
}
html[data-theme="dark"] .learning-step .step-no { background:#397A5B !important; color:#fff !important; }
html[data-theme="dark"] .btn:not(.primary):not(.active),
html[data-theme="dark"] button:not(.primary):not(.tong-theme-toggle),
html[data-theme="dark"] .back,html[data-theme="dark"] .tab:not(.active),
html[data-theme="dark"] .filter-btn:not(.active),
html[data-theme="dark"] .practice-chip,html[data-theme="dark"] .character-chip,
html[data-theme="dark"] .suggestions button,html[data-theme="dark"] .character-suggestions button {
  background:#30483B !important; color:#E2ECE5 !important; border-color:#50685A !important;
}
html[data-theme="dark"] .btn.primary,html[data-theme="dark"] button.primary,
html[data-theme="dark"] .tab.active,html[data-theme="dark"] .filter-btn.active {
  background:#397A5B !important; color:#fff !important;
}
html[data-theme="dark"] input,html[data-theme="dark"] textarea,html[data-theme="dark"] select {
  background:var(--tong-input) !important; color:var(--tong-input-text) !important; border-color:var(--tong-border) !important;
}
html[data-theme="dark"] input::placeholder,html[data-theme="dark"] textarea::placeholder {
  color:#AFC2B5 !important; opacity:1 !important;
}
html[data-theme="dark"] a:not(.brand):not(.tong-shared-nav a):not(.tong-theme-toggle) { color:var(--tong-link) !important; }
html[data-theme="dark"] table,html[data-theme="dark"] th,html[data-theme="dark"] td { color:var(--tong-text) !important; border-color:var(--tong-border) !important; }
html[data-theme="dark"] img,html[data-theme="dark"] video,html[data-theme="dark"] canvas,
html[data-theme="dark"] iframe,html[data-theme="dark"] svg,html[data-theme="dark"] audio { filter:none !important; }
html[data-theme="dark"] .tong-theme-toggle { background:#30483B !important; color:#F5DFA0 !important; border-color:#587263 !important; }

/* Theme switcher remains beside language selector */
.tong-theme-toggle { display:inline-flex !important; align-items:center; justify-content:center; gap:7px; flex:0 0 auto; min-height:34px; padding:7px 11px; border:1px solid var(--tong-border); border-radius:10px; background:var(--tong-surface-soft); color:var(--tong-heading); font:inherit; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; }
.tong-theme-toggle:focus-visible { outline:3px solid #E9CB80; outline-offset:2px; }
.tong-theme-icon { font-size:15px; line-height:1; }
#tong-language-control { display:inline-flex !important; align-items:center; justify-content:flex-end; gap:9px; flex:0 0 auto; margin-left:auto; }
#tong-language-control select { min-width:112px; }
header .bar { gap:10px; }
@media(max-width:600px) { #tong-language-control { gap:6px; } #tong-language-control select { min-width:94px; } }
@media(max-width:520px) { .tong-theme-toggle { padding:6px 8px; font-size:10px; } .tong-theme-label { display:none; } }

/* Comfortable default typography; no visual inversion of learning artwork */
body { line-height:1.6; }
p,li { line-height:1.65; }
img,video,canvas,iframe,svg,audio { filter:none !important; }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}


/* =========================================================
   86Tong page-specific UX polish v1.3.2
   Fixes hard-coded light surfaces that remained in Hub and Writing Studio.
   ========================================================= */

/* Shared section wrappers: prevent abrupt white bands between dark sections. */
.planet-discoveries,
.daily-discovery,
.progress,
.progress-section,
.journey,
.learning-journey,
.speaking-section,
.speaking-studio,
.writing-section,
.stroke-reference,
.character-knowledge,
.discoveries-section {
  background-color:var(--tong-bg) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.planet-discoveries { background:var(--tong-bg) !important; }
.daily-discovery { background:var(--tong-page) !important; }
.progress { background:var(--tong-bg) !important; }
.progress article,
.progress .stat,
.progress .stat-card,
.progress .summary,
.progress .progress-card {
  background:var(--tong-surface) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.progress article strong,
.progress article b,
.progress .number,
.progress .value {
  color:var(--tong-heading) !important;
}
.progress article span,
.progress article small,
.progress .label {
  color:var(--tong-muted) !important;
}

/* Learning Hub: reading guide, paths, community, speaking and OCR. */
.learning-steps,
.learning-step,
.speaking-guide,
.speaking-guide > div,
.speaking-playback,
.self-ratings button,
.vocab-card,
.dict-results,
.sentence,
.ocr-panel,
.ocr-preview,
.path-card,
.path-card.beginner,
.path-card.explorer,
.discovery-card,
.daily-card,
.daily-inner,
.discovery-modal,
.discoveries-head,
.discoveries-grid,
.speaking-record-card,
.speaking-side,
.speaking-stats,
.speaking-actions,
.reader,
.readerhead,
.saved,
.side,
.sidewrap,
.tools,
.tabs,
.view,
.heading,
.explorer,
.explorer-top,
.explorer-word,
.notice,
.stats,
.stat {
  background-color:var(--tong-surface) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.planet-discoveries .discoveries-head,
.planet-discoveries .discoveries-grid {
  background:transparent !important;
}
.learning-step strong,
.learning-step h3,
.speaking-guide strong,
.speaking-guide b,
.path-card h2,
.path-card h3,
.discovery-card .hanzi,
.discovery-card .char,
.daily-card .hanzi,
.daily-card .char,
.progress strong,
.progress h2,
.progress h3 {
  color:var(--tong-heading) !important;
  opacity:1 !important;
}
.learning-step p,
.learning-step span,
.speaking-guide p,
.speaking-guide span,
.path-card p,
.discovery-card p,
.daily-card p,
.discovery-card .meaning,
.discovery-card .meta,
.speaking-side p,
.speaking-record-card p {
  color:var(--tong-muted) !important;
  opacity:1 !important;
}
.self-ratings button {
  color:var(--tong-text) !important;
}
.self-ratings button:hover,
.self-ratings button[aria-pressed="true"],
.self-ratings button.selected {
  background:var(--tong-surface-soft) !important;
  border-color:var(--tong-accent) !important;
}
.discoveries-more,
.discoveries-count {
  color:var(--tong-text) !important;
  background:var(--tong-surface-soft) !important;
  border-color:var(--tong-border) !important;
}
.discoveries-more { text-decoration:none !important; }
.discoveries-head h2,
.discoveries-head h3,
.discoveries-head .eyebrow,
.planet-discoveries h2,
.planet-discoveries h3,
.planet-discoveries p {
  color:var(--tong-heading) !important;
  opacity:1 !important;
}
.planet-discoveries .subtitle,
.planet-discoveries .sub,
.planet-discoveries .description {
  color:var(--tong-muted) !important;
  opacity:1 !important;
}

/* Writing Studio: picker and stroke reference are interface cards, not paper. */
.picker,
.pick-head,
.picker-title,
.char-list,
.queue,
.queue-empty,
.stroke-ref-grid,
.stroke-ref-head,
.stroke-examples,
.stroke-all,
.stroke-ref-note,
.stroke-filter-row,
.stroke-meta,
.stroke-item,
.stroke-example,
.character-knowledge,
.ck-details,
.ck-save-status,
.result-list,
.sidegrid,
.stage-card,
.sidecard,
.practice-title,
.stage-head,
.stage-actions,
.queue-chip,
.queue-label,
.status,
.result-pill,
.hint,
.entry {
  background-color:var(--tong-surface) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.char-choice,
.char-list button,
.stroke-select,
.stroke-item button,
.stroke-example button,
.queue-chip,
.practice-chip {
  background:var(--tong-surface-soft) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
}
.char-choice.active,
.char-list button.active,
.stroke-select:focus,
.stroke-item button.active {
  background:var(--tong-accent) !important;
  color:var(--tong-accent-text) !important;
  border-color:var(--tong-accent) !important;
}
.picker-title,
.practice-title,
.stage-head h2,
.stage-head h3,
.stroke-ref-head h2,
.stroke-ref-head h3,
.stroke-item strong,
.stroke-meta strong,
.ck-label,
.ck-details strong {
  color:var(--tong-heading) !important;
  opacity:1 !important;
}
.group-label,
.queue-label,
.stroke-ref-note,
.stroke-meta,
.stroke-item small,
.stroke-example small,
.ck-save-status,
.hint {
  color:var(--tong-muted) !important;
  opacity:1 !important;
}
.stroke-symbol,
.stroke-item .symbol,
.stroke-example .symbol {
  color:var(--tong-heading) !important;
  background:var(--tong-surface-soft) !important;
  border-color:var(--tong-border) !important;
}
/* The Hanzi writing board intentionally stays paper-coloured for writing contrast. */
.writer-stage,
.writer-stage canvas,
.hanzi-writer,
.hanzi-writer svg {
  background-color:#FFFEFA !important;
  color:#174B3E !important;
}
.writer-stage { border-color:var(--tong-border) !important; }
html[data-theme="dark"] .writer-stage {
  background-color:#F8F7F0 !important;
  border-color:#718779 !important;
}
.radical-tag {
  background:#FFF8E6 !important;
  color:#805D1C !important;
  border-color:#EAD7A5 !important;
}

/* Dark-mode explicit high-contrast pass for all remaining hard-coded cards. */
html[data-theme="dark"] .planet-discoveries,
html[data-theme="dark"] .progress,
html[data-theme="dark"] .daily-discovery,
html[data-theme="dark"] .learning-steps,
html[data-theme="dark"] .learning-step,
html[data-theme="dark"] .speaking-guide > div,
html[data-theme="dark"] .speaking-playback,
html[data-theme="dark"] .self-ratings button,
html[data-theme="dark"] .path-card,
html[data-theme="dark"] .vocab-card,
html[data-theme="dark"] .dict-results,
html[data-theme="dark"] .sentence,
html[data-theme="dark"] .ocr-panel,
html[data-theme="dark"] .ocr-preview,
html[data-theme="dark"] .picker,
html[data-theme="dark"] .char-list,
html[data-theme="dark"] .stroke-ref-grid,
html[data-theme="dark"] .stroke-item,
html[data-theme="dark"] .stroke-examples,
html[data-theme="dark"] .character-knowledge,
html[data-theme="dark"] .ck-details,
html[data-theme="dark"] .stage-card,
html[data-theme="dark"] .sidecard,
html[data-theme="dark"] .result-list,
html[data-theme="dark"] .queue,
html[data-theme="dark"] .queue-empty,
html[data-theme="dark"] .progress article {
  background:var(--tong-surface) !important;
  color:var(--tong-text) !important;
  border-color:var(--tong-border) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] .learning-step strong,
html[data-theme="dark"] .learning-step h3,
html[data-theme="dark"] .speaking-guide strong,
html[data-theme="dark"] .path-card h2,
html[data-theme="dark"] .path-card h3,
html[data-theme="dark"] .discovery-card .hanzi,
html[data-theme="dark"] .daily-card .hanzi,
html[data-theme="dark"] .picker-title,
html[data-theme="dark"] .practice-title,
html[data-theme="dark"] .stroke-ref-head h2,
html[data-theme="dark"] .stroke-ref-head h3,
html[data-theme="dark"] .stroke-item strong,
html[data-theme="dark"] .ck-label,
html[data-theme="dark"] .progress article strong {
  color:var(--tong-heading) !important;
  opacity:1 !important;
}
html[data-theme="dark"] .learning-step p,
html[data-theme="dark"] .learning-step span,
html[data-theme="dark"] .speaking-guide p,
html[data-theme="dark"] .speaking-guide span,
html[data-theme="dark"] .path-card p,
html[data-theme="dark"] .planet-discoveries p,
html[data-theme="dark"] .discovery-card p,
html[data-theme="dark"] .daily-card p,
html[data-theme="dark"] .group-label,
html[data-theme="dark"] .stroke-ref-note,
html[data-theme="dark"] .stroke-meta,
html[data-theme="dark"] .stroke-item small,
html[data-theme="dark"] .ck-save-status,
html[data-theme="dark"] .progress article span {
  color:var(--tong-muted) !important;
  opacity:1 !important;
}
html[data-theme="dark"] .char-choice,
html[data-theme="dark"] .char-list button,
html[data-theme="dark"] .stroke-select,
html[data-theme="dark"] .stroke-item button,
html[data-theme="dark"] .stroke-example button,
html[data-theme="dark"] .queue-chip,
html[data-theme="dark"] .practice-chip {
  background:#30483B !important;
  color:#E2ECE5 !important;
  border-color:#50685A !important;
}
html[data-theme="dark"] .char-choice.active,
html[data-theme="dark"] .char-list button.active {
  background:#397A5B !important;
  color:#FFFFFF !important;
}
html[data-theme="dark"] .discoveries-head h2,
html[data-theme="dark"] .discoveries-head h3,
html[data-theme="dark"] .planet-discoveries h2,
html[data-theme="dark"] .planet-discoveries h3 {
  color:#EAF2EC !important;
  opacity:1 !important;
}
html[data-theme="dark"] .discoveries-head .eyebrow,
html[data-theme="dark"] .planet-discoveries .subtitle {
  color:#BDCDC3 !important;
  opacity:1 !important;
}

/* Keep the content transitions calm and avoid horizontal overflow on small screens. */
.learning-step,.speaking-guide>div,.stroke-item,.char-choice,.path-card {
  min-width:0;
}
@media(max-width:700px) {
  .learning-steps { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .speaking-guide { grid-template-columns:1fr !important; }
  .stroke-ref-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:420px) {
  .learning-steps,.stroke-ref-grid { grid-template-columns:1fr !important; }
}