/* ═══════════════════════════════════════════════════════════
   lesson-dark-compat.css —— 历史课程页深色兼容层

   加载顺序必须在每页自己的 <style> 之后。lesson.css 管新模板；
   本文件只处理旧模板变量和跨页面重复出现的硬编码组件。
   细碎的 white / #111 / 旧主题蓝由 theme-bridge.js 在 CSSOM 层归一。
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="light"]{
  --accent:#146b54;
  --accent-soft:#e9f2ee;
}
html[data-theme="light"] .lesson-card .lc-num{
  background:var(--accent) !important;
  color:#fff !important;
}
html[data-theme="light"] :is(.sim-node-label,.sim-node-tag,.sim-btn-ok){
  color:#15743a !important;
}
html[data-theme="light"] :is(.quad-badge,.card-badge){
  color:var(--text) !important;
}
html[data-theme="light"] .x3-av{
  color:#17385f !important;
}
html[data-theme="light"] :is(.fv.ph,.mock-p){
  color:var(--sub) !important;
}
html[data-theme="light"] .paper[style*="#f59e0b"] .pno{
  color:#18130a !important;
}
html[data-theme="light"] .paper[style*="#f59e0b"] .pgo{
  color:#945600 !important;
}
html[data-theme="light"] .deliverable b{
  color:#18794e !important;
}

:root[data-theme="dark"]{
  --bg:#101512;
  --bg-color:#101512;
  --bg-dim:#1b221e;
  --card:#171d19;
  --card-bg:#171d19;
  --card-2:#1b221e;
  --surface:#171d19;
  --surface2:#1b221e;
  --panel:#171d19;
  --text:#e9ece9;
  --text-main:#e9ece9;
  --sub:#a3ada8;
  --text-sub:#a3ada8;
  --muted:#a3ada8;
  --faint:#6f7975;
  --accent:#5cb595;
  --accent-soft:rgba(92,181,149,.14);
  --danger:#e98d7b;
  --amber:#d9a45f;
  --success:#5cb595;
  --cyan:#5bb6c9;
  --purple:#a892d6;
  --border:rgba(255,255,255,.10);
  --hover:rgba(255,255,255,.06);
  --code-bg:rgba(255,255,255,.08);
  color-scheme:dark;
}

html[data-theme="dark"],
html[data-theme="dark"] body{
  background-color:var(--bg) !important;
  color:var(--text);
}

html[data-theme="dark"] :is(.slide-container,.page-shell,.lesson-shell){
  background-color:transparent !important;
  color:var(--text);
}

/* 蓝色“结论/答案/摘要”面板统一收回主色。 */
html[data-theme="dark"] :is(
  .takeaway-box,
  .qa-answer,
  .xa-tldr,
  .key-box,
  .summary-box,
  .conclusion-box,
  .answer-box,
  .insight-box
){
  background:var(--accent-soft) !important;
  border-color:color-mix(in srgb,var(--accent) 34%,transparent) !important;
}
html[data-theme="dark"] :is(
  .takeaway-box,
  .qa-answer,
  .xa-tldr,
  .key-box,
  .summary-box,
  .conclusion-box,
  .answer-box,
  .insight-box
) :is(h2,h3,h4,b,strong,.tag){
  color:var(--accent) !important;
}
html[data-theme="dark"] :is(
  .takeaway-box,
  .qa-answer,
  .xa-tldr,
  .key-box,
  .summary-box,
  .conclusion-box,
  .answer-box,
  .insight-box
) :is(p,li){
  color:var(--text) !important;
}

/* 风险、成功和提示继续保留语义色，但不再使用发白的浅色底。 */
html[data-theme="dark"] :is(.warn-card,.danger-box,.warning-box,.error-box){
  background:color-mix(in srgb,var(--danger) 10%,var(--card)) !important;
  border-color:color-mix(in srgb,var(--danger) 38%,transparent) !important;
}
html[data-theme="dark"] :is(.warn-card,.danger-box,.warning-box,.error-box) :is(h2,h3,h4,b,strong){
  color:var(--danger) !important;
}
html[data-theme="dark"] :is(.warn-card,.danger-box,.warning-box,.error-box) :is(p,li){
  color:color-mix(in srgb,var(--danger) 58%,var(--text)) !important;
}

html[data-theme="dark"] :is(.success-box,.good-box,.ok-box){
  background:color-mix(in srgb,var(--success) 10%,var(--card)) !important;
  border-color:color-mix(in srgb,var(--success) 34%,transparent) !important;
}
html[data-theme="dark"] :is(.success-box,.good-box,.ok-box) :is(h2,h3,h4,b,strong){
  color:var(--success) !important;
}

html[data-theme="dark"] .col-bad{
  background:color-mix(in srgb,var(--danger) 10%,var(--card)) !important;
  color:var(--danger) !important;
}
html[data-theme="dark"] .col-good{
  background:color-mix(in srgb,var(--success) 10%,var(--card)) !important;
  color:var(--success) !important;
}
html[data-theme="dark"] .col-label{
  background:var(--card-2) !important;
  color:var(--sub) !important;
}

html[data-theme="dark"] :is(input,textarea,select){
  color:var(--text);
  background-color:var(--card);
  border-color:var(--border);
}
html[data-theme="dark"] :is(pre,.code-box,.code-block,.terminal){
  border-color:var(--border);
}

/* ── 交互设计 / Vibe Coding 课程里的仿真产品界面 ──
   这些教具原本故意模拟白色网页，深色阅读时会形成大面积白屏。只换表面和文字，
   红黄绿等反馈语义仍由各页原规则控制。 */
html[data-theme="dark"] :is(
  .mockwin,
  .mock,
  .mock-card,
  .f1-app,
  .f1-top,
  .f1-void,
  .f1-modal,
  .duel-side,
  .bd-chain-step,
  .bd-callout,
  .mz-cell,
  .x2-abox,
  .x2-mtop,
  .x3-panel,
  .x3-ph,
  .x3-dlg,
  .x5-hfview,
  .x6-tile,
  .x6-ftop,
  .x6-ddbox,
  .x7-dlg,
  .x8-drop,
  .x8-invoice,
  .t1-card,
  .t1-pc,
  .t10-card,
  .t2-nav,
  .t3-nrow,
  .t4-input,
  .t6-input,
  .t6-modal,
  .search-bar,
  .fv-mock,
  .ld-stage,
  .chat-area,
  .tank-outer
){
  background-color:var(--card) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] :is(.mockwin-bar,.mock-bar,.mtb,.tr.th,.ctx-seg,.bar){
  background-color:var(--card-2) !important;
  color:var(--sub) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] :is(
  .mockwin-url,
  .mock-chip,
  .duel-tag,
  .xref-ic,
  .x3-rdel,
  .x4-sn,
  .x4-mtag,
  .x5-ghostbtn,
  .x5-mtag,
  .x6-vdd,
  .x7-db,
  .x8-input,
  .t4-tool,
  .t6-ctlbtn,
  .fv,
  .fv.ph,
  .pt,
  .wtxt,
  .qz-val
){
  background-color:var(--card-2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* 激活控件继续用主色表达状态，但不再切回白底。 */
html[data-theme="dark"] :is(
  button.on,
  .bd-mode.on,
  .tab-btn.active,
  .right-tab-btn.active,
  .toggle-btn.active,
  .speed-btn.active,
  .x4-cut,
  .start-btn,
  .x6-tile.on
){
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  border-color:color-mix(in srgb,var(--accent) 38%,transparent) !important;
}

html[data-theme="dark"] th{
  background-color:var(--card-2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] :is(.tag,.ev){
  background:color-mix(in srgb,var(--amber) 14%,var(--card)) !important;
  color:var(--amber) !important;
  border-color:color-mix(in srgb,var(--amber) 32%,transparent) !important;
}
html[data-theme="dark"] :is(.badge,.fmt-badge,.status.live){
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
  border-color:color-mix(in srgb,var(--accent) 32%,transparent) !important;
}

/* 对话与 Token 演示块按角色保留语义色。 */
html[data-theme="dark"] :is(.msg-sys,.tv-tk-sys){
  background:color-mix(in srgb,var(--amber) 12%,var(--card)) !important;
  color:var(--amber) !important;
}
html[data-theme="dark"] :is(.msg-user,.tv-tk-user){
  background:var(--accent-soft) !important;
  color:var(--accent) !important;
}
html[data-theme="dark"] :is(.msg-ai-good,.tv-tk-ex,.task-pass){
  background:color-mix(in srgb,var(--success) 12%,var(--card)) !important;
  color:var(--success) !important;
}
html[data-theme="dark"] :is(.bubble,.cmp-bubble){
  background-color:var(--card-2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* 第二轮全量审计：算法、心理学与设计教具里的少量独有表面。 */
html[data-theme="dark"] :is(
  .speed-btn,
  .curve-hint,
  .ctx-verdict,
  .attn-hint,
  .attn-stat,
  .race-note,
  .cand-pop,
  .fa-label,
  .rq-tag,
  .fractal-rule,
  .report-box,
  .task-verdict,
  .task-time,
  .st-lessons span,
  .qz-cand,
  .ld-ind,
  .es-input,
  .t6-avatar
){
  background-color:var(--card-2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

/* 交互脚本加载失败时仍给主按钮一个可读的初始状态；脚本写入的行内色可覆盖它。 */
#pgBtn{background:var(--accent);}
html[data-theme="dark"] :is(.xa-gate,.sw-login-gate) .sw-btn{
  background:var(--accent) !important;
  color:#fff !important;
  border-color:var(--accent) !important;
}
html[data-theme="dark"] .grade.s{
  background:color-mix(in srgb,var(--success) 14%,var(--card)) !important;
  color:var(--success) !important;
}
html[data-theme="dark"] :is(.quad-title,.cand-title){
  color:var(--text) !important;
}
html[data-theme="dark"] .quad-hint{
  color:var(--sub) !important;
  opacity:1 !important;
}
html[data-theme="dark"] .score-card.mem .sc-val{
  color:var(--accent) !important;
}
html[data-theme="dark"] :is(.t1-ccell.c1,.taste-grid .cell,.mock .cell){
  background:color-mix(in srgb,var(--danger) 12%,var(--card)) !important;
  color:color-mix(in srgb,var(--danger) 75%,#fff) !important;
  border-color:color-mix(in srgb,var(--danger) 30%,transparent) !important;
}

/* 深色文本对比度：旧专题色里的 deep 色只适合白底。 */
html[data-theme="dark"] :is(h1,h2,h3,h4,h5,h6,b,strong,i){
  color:inherit !important;
}
html[data-theme="dark"] :is(
  .chip,
  .toy-badge,
  .pcount,
  .num,
  .mp-ai,
  .mc-meta,
  .xref-t,
  .xf-gt,
  .tf-gt,
  .tx-t,
  .x6-rt,
  .ph,
  .kicker,
  .m6-tag,
  .card-badge,
  .card-title,
  .card-hint
){
  color:var(--text) !important;
}
html[data-theme="dark"] :is(.oss-home,.law-src){
  color:var(--sub) !important;
}
html[data-theme="dark"] .chip{
  background-color:var(--card-2) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}
html[data-theme="dark"] code{
  background:var(--code-bg) !important;
  color:var(--text) !important;
}
html[data-theme="dark"] :is(.dd-col.dd-do,.tip-strip){
  color:var(--success) !important;
}
html[data-theme="dark"] .dd-col.dd-dont{
  color:var(--danger) !important;
}

/* 黄、青实心块不能继续配白字，改用近黑文字达到可读对比度。 */
html[data-theme="dark"] :is(
  .step-tag,
  .p5-num,
  .af-node.amber,
  .btn-p,
  .btn-run,
  .sk-num,
  .layer-icon,
  .p-num.c3,
  .p-num.c4,
  .loop-step .num,
  .strat-btn.active .strat-num,
  .exercise > strong,
  .dim-badge,
  .pno,
  .x3-av,
  .f3-copy,
  .skc-btn,
  .i4-run
){
  color:#101512 !important;
}
html[data-theme="dark"] :is(.f3-copy,.skc-btn,.i4-run){
  background:var(--semantic-indigo) !important;
}
html[data-theme="dark"] :is(.p10-hero .hh,.gauge-num){
  color:var(--success) !important;
}
html[data-theme="dark"] .lesson-card .lc-num{
  background:var(--accent) !important;
  color:#101512 !important;
}

/* Alice 自身使用局部变量，避免再覆盖算法课程同名的 --al-* 变量。 */
html[data-theme="dark"] :is(#alice-panel,#alice-float,#alice-pop){
  --al-bg:var(--card);
  --al-soft:var(--card-2);
  --al-accent:var(--accent);
  --al-border:var(--border);
  --al-line:var(--border);
  --al-text:var(--text);
  --al-sub:var(--sub);
  --al-faint:var(--faint);
  --al-user:var(--accent-soft);
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
}