/* School Words V1.6.1: Mibao450 V4.4.3 palette, original typography and layout. */
:root{
  color-scheme:light;
  --bg:#faf8ff;--card:#ffffff;--text:#1c233b;--muted:#60677c;
  --accent:#515bd4;--accent2:#8358dc;--title-blue:#086fc6;--primary-bg:#4d5cdb;
  --good:#14764f;--bad:#c42d4d;--line:#e1dff0;
  --surface:#f0eff9;--surface-soft:#f9f7fd;--accent-soft:#eeefff;
  --accent-line:#cdd2f8;--good-bg:#eaf8f1;--bad-bg:#fff0f3;
  --good-line:#2c9c6b;--bad-line:#d65772;
  --warm-bg:#fff6e5;--warm-line:#edd4a5;--warm-text:#735108;
  --target-bg:#ffedaa;--target-text:#393112;
  --violet-bg:#f0edfc;--violet-text:#6043b2;
  --nav-bg:rgba(255,252,255,.96);--focus:#596bdd;
  --hero-a:#4560eb;--hero-b:#704ae1;--hero-c:#9940cc;
  --ambient-blue:rgba(124,145,255,.12);--ambient-rose:rgba(243,163,195,.12);
  --shadow:0 12px 35px rgba(91,67,163,.12);
  --card-shadow:0 6px 20px rgba(94,77,151,.07);
  --blue-a:#eff6ff;--blue-b:#fcfbff;--blue-line:#c8d9fa;--blue-track:#dfe9fc;
  --purple-a:#f5efff;--purple-b:#fffaff;--purple-line:#ddcafa;--purple-track:#ebe2fa;
  --mint-a:#effbf7;--mint-b:#fcfffd;--mint-line:#bee5d9;--mint-track:#dcefe9;
  --rose-a:#fff1f9;--rose-b:#fffaff;--rose-line:#f0d5e7;
  --peach-a:#fff6ee;--peach-b:#fffdfb;--peach-line:#eedbcd;
}
@media(prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#14172b;--card:#22283f;--text:#edf0fa;--muted:#bac4da;
    --accent:#b2baff;--accent2:#c3abff;--title-blue:#92caff;--primary-bg:#4a58ce;
    --good:#77e1b1;--bad:#ff98ad;--line:#3a4261;
    --surface:#2a304c;--surface-soft:#23283f;--accent-soft:#303457;
    --accent-line:#505a86;--good-bg:#1c3b34;--bad-bg:#45273a;
    --good-line:#60c99a;--bad-line:#e77e99;
    --warm-bg:#3b2e20;--warm-line:#85633d;--warm-text:#f3d49b;
    --target-bg:#514323;--target-text:#fff0ad;
    --violet-bg:#372e50;--violet-text:#d8c5ff;
    --nav-bg:rgba(22,25,47,.97);--focus:#c0cbff;
    --hero-a:#3653ce;--hero-b:#653bce;--hero-c:#8836b9;
    --ambient-blue:rgba(67,105,201,.10);--ambient-rose:rgba(151,70,153,.10);
    --shadow:0 12px 35px rgba(6,8,25,.27);
    --card-shadow:0 6px 20px rgba(5,9,24,.18);
    --blue-a:#1d3051;--blue-b:#242b49;--blue-line:#3c5891;--blue-track:#354a75;
    --purple-a:#302448;--purple-b:#29253f;--purple-line:#644783;--purple-track:#4a3b66;
    --mint-a:#19363f;--mint-b:#1f2f3f;--mint-line:#34606c;--mint-track:#2f505c;
    --rose-a:#382940;--rose-b:#30263e;--rose-line:#69475f;
    --peach-a:#3a2c38;--peach-b:#312b3e;--peach-line:#6a4d59;
  }
}
/* Paint-only overrides: keep the original fonts, spacing, grids and icons. */
:root{--warn:#8a6200;--toolbar-bg:rgba(250,248,255,.94);--scene-bg:#eff6ff}
@media(prefers-color-scheme:dark){:root{--warn:#f3d49b;--toolbar-bg:rgba(20,23,43,.94);--scene-bg:#242b49}}
html{background:var(--bg)}
body{background:radial-gradient(ellipse at 0 5%,var(--ambient-blue),transparent 58%),radial-gradient(ellipse at 100% 55%,var(--ambient-rose),transparent 65%),var(--bg);color:var(--text)}
button,input,select,textarea{color:inherit}
button{-webkit-tap-highlight-color:transparent}
input,select,textarea{background:var(--card);color:var(--text);caret-color:var(--accent)}
input::placeholder{color:var(--muted);opacity:1}
::selection{background:var(--accent-soft);color:var(--text)}
.hero{background:linear-gradient(120deg,var(--hero-a) 0%,var(--hero-b) 60%,var(--hero-c) 100%);box-shadow:var(--shadow)}
.hero p,.hero-stats{opacity:1}
.brand h1{color:var(--title-blue)}
.panel,.report-card,.mastery-summary-card,.action-card{box-shadow:var(--card-shadow)}
.panel,.pill,.back,.select,.btn.ghost,.flashcard,.quiz-card,.option,.search,.cloud-mini,.report-card,.modal-card,.mastery-summary-card,.mastery-word-card,.letter-tile,.pack-admin-row,.word-row,.stat,.scope-pill{background:var(--card);color:var(--text);border-color:var(--line)}
.pill,.scope-pill{color:var(--muted)}
.toolbar{background:var(--toolbar-bg)}
.quiz-progress,.mastery-mini-track,.skill-track{background:var(--surface)}
.quiz-progress i,.skill-track i,.mastery-mini-track i{background:linear-gradient(90deg,var(--accent),var(--accent2))}
.btn.primary{background:var(--primary-bg);color:#fff;box-shadow:0 3px 10px rgba(63,65,163,.14)}
.btn.good{background:var(--good-bg);color:var(--good)}
.btn.bad{background:var(--bad-bg);color:var(--bad)}
.option.correct{background:var(--good-bg);border-color:var(--good-line);color:var(--text)}
.option.wrong{background:var(--bad-bg);border-color:var(--bad-line);color:var(--text)}
.pack-badge,.cloud-code,.modal-x,.example-box,.state-badge,.skill-chip{background:var(--surface);color:var(--muted)}
.meaning p,.example-box p{color:var(--text)}
.cloud-code{border-color:var(--line);color:var(--text)}
.speak,.speak-mini{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line)}
.mini-btn,.example-actions .speak-mini{background:var(--card);border-color:var(--line);color:var(--accent)}
.danger{background:var(--bad-bg)!important;color:var(--bad)!important;border-color:var(--bad-line)!important}
.archive{background:var(--warm-bg)!important;color:var(--warm-text)!important;border-color:var(--warm-line)!important}
.state-badge.active{background:var(--good-bg);color:var(--good)}
.state-badge.archived{background:var(--warm-bg);color:var(--warm-text)}
/* Approved bright sync indicators: keep 11px size in both themes. */
.cloud-dot{background:#AFB6C3;flex-shrink:0}
.cloud-dot.on{background:#20C969}
.cloud-dot.syncing{background:#3284FF}
.cloud-dot.pending,.cloud-dot.offline{background:#FFAE16}
.cloud-dot.error{background:#FF4668}
.weak-reasons span,.mistake-chip{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.spell input,.letter-tile,.letter-slot{background:var(--card);color:var(--text);border-color:var(--accent-line)}
.letter-slot{border-color:var(--title-blue)}
.delete-tile{background:var(--surface);color:var(--muted)}
.tabbar{background:var(--nav-bg)}
.tab{color:var(--muted)}
.tab.active{color:var(--accent);background:var(--accent-soft)}
.modal{background:rgba(8,8,25,.65)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* The same eight activity colors used in Mibao450 V4.4.3. */
#screen-home .pack-chip:nth-child(5n+1),#screen-home .action-card:nth-child(1),#screen-home .action-card:nth-child(3){--tile-a:var(--blue-a);--tile-b:var(--blue-b);--tile-line:var(--blue-line)}
#screen-home .pack-chip:nth-child(5n+2),#screen-home .action-card:nth-child(2){--tile-a:var(--purple-a);--tile-b:var(--purple-b);--tile-line:var(--purple-line)}
#screen-home .pack-chip:nth-child(5n+3),#screen-home .action-card:nth-child(4),#screen-home .action-card:nth-child(7){--tile-a:var(--mint-a);--tile-b:var(--mint-b);--tile-line:var(--mint-line)}
#screen-home .pack-chip:nth-child(5n+4),#screen-home .action-card:nth-child(5){--tile-a:var(--rose-a);--tile-b:var(--rose-b);--tile-line:var(--rose-line)}
#screen-home .pack-chip:nth-child(5n+5),#screen-home .action-card:nth-child(6),#screen-home .action-card:nth-child(8){--tile-a:var(--peach-a);--tile-b:var(--peach-b);--tile-line:var(--peach-line)}
#screen-home .pack-chip,#screen-home .action-card{background:linear-gradient(135deg,var(--tile-a),var(--tile-b));border-color:var(--tile-line);box-shadow:var(--card-shadow);color:var(--text)}
#screen-home .pack-chip .pack-line,#screen-home .action-card b{color:var(--title-blue)}
#screen-home .pack-chip.selected{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--card-shadow)}
#screen-home .cloud-mini{background:linear-gradient(135deg,var(--card),var(--surface-soft));box-shadow:var(--card-shadow)}

/* Result panels and existing target highlights in both appearances. */
#screen-quiz .pos-target,#screen-quiz .pos-target-inline,#screen-quiz .context-answer-word{background:var(--target-bg);color:var(--target-text)}
#screen-quiz .pos-feedback-explanation,#screen-quiz .context-result-sentence{background:var(--surface-soft);border-color:var(--line);color:var(--text)}
#screen-quiz .pos-explain-audio,#screen-quiz .context-full-audio,#screen-quiz .context-result-option .option-audio{background:var(--card);border-color:var(--accent-line);color:var(--accent)}
#screen-quiz .pos-badge{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
#screen-quiz .pos-visual{background:var(--surface-soft);border-color:var(--line)}
#screen-quiz .pos-visual picture{display:block;width:100%}
#screen-quiz .pos-visual img{background:var(--scene-bg)}
#screen-quiz .pos-scene-caption{color:var(--text)}
/* New control only: a touch-friendly button below the current example. */
#screen-quiz .pos-sentence-audio{align-self:stretch;min-height:44px;max-width:100%;margin:8px 4px 6px;padding:8px 4px;border:1px solid var(--accent-line);border-radius:12px;background:var(--accent-soft);color:var(--accent);font:inherit;font-size:14px;font-weight:750;line-height:1.4;cursor:pointer;-webkit-tap-highlight-color:transparent}
#screen-quiz .pos-sentence-audio:active{transform:scale(.98)}

/* Parent reports, familiarity colors and expanded details. */
.report-card:nth-child(1){background:linear-gradient(145deg,var(--blue-a),var(--blue-b));border-color:var(--blue-line)}
.report-card:nth-child(2){background:linear-gradient(145deg,var(--mint-a),var(--mint-b));border-color:var(--mint-line)}
.report-card:nth-child(3){background:linear-gradient(145deg,var(--peach-a),var(--peach-b));border-color:var(--peach-line)}
.report-grid.three .report-card:nth-child(1){background:linear-gradient(145deg,var(--blue-a),var(--blue-b));border-color:var(--blue-line)}
.report-grid.three .report-card:nth-child(2){background:linear-gradient(145deg,var(--peach-a),var(--peach-b));border-color:var(--peach-line)}
.report-grid.three .report-card:nth-child(3){background:linear-gradient(145deg,var(--purple-a),var(--purple-b));border-color:var(--purple-line)}
.report-grid.three .report-card:nth-child(4){background:linear-gradient(145deg,var(--blue-a),var(--blue-b));border-color:var(--blue-line)}
.report-grid.three .report-card:nth-child(5){background:linear-gradient(145deg,var(--mint-a),var(--mint-b));border-color:var(--mint-line)}
.mastery-summary-card.star{background:var(--violet-bg);border-color:var(--purple-line)}
.mastery-summary-card.familiar{background:var(--good-bg);border-color:var(--mint-line)}
.mastery-summary-card.learning{background:var(--warm-bg);border-color:var(--warm-line)}
.mastery-summary-card.strengthen{background:var(--bad-bg);border-color:var(--rose-line)}
.mastery-summary-card.unmeasured{background:var(--surface);border-color:var(--line)}
.record-stats .stat:nth-child(1){background:var(--good-bg)}
.record-stats .stat:nth-child(2){background:var(--accent-soft)}
.record-stats .stat:nth-child(3){background:var(--bad-bg)}
.mastery-help{background:var(--accent-soft);border-color:var(--accent-line)}
.mastery-detail{background:var(--surface-soft)}
.mastery-word-card.strengthen{border-left-color:var(--bad)}
.mastery-word-card.learning{border-left-color:var(--warn)}
.mastery-word-card.familiar{border-left-color:var(--good)}
.mastery-word-card.star{border-left-color:var(--violet-text)}
.mastery-word-card.unmeasured{border-left-color:var(--muted)}
.status-star{color:var(--violet-text)}
.status-display em{background:var(--accent-soft);color:var(--accent)}
.record-extra-meta span{background:var(--surface);color:var(--muted)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}#screen-quiz .pos-sentence-audio:active{transform:none}}