/* =============================================================
 * V088 — 深色模式（Dark mode）
 * 在 v087 之后加载，靠顺序 + 特异性覆盖旧规则。
 *
 * ── 为什么不是"给 536 种硬编码色逐个写dark 版" ─────────────
 * CSS 没有办法全局重写硬编码色值。真正能一次生效的只有两条路：
 *   1) 语义 token（var()）—— 改一处，全站跟着变
 *   2) 直接挑高频选择器写覆盖 —— 便宜，但必须有实测依据
 * 所以本文件只做这两件事，不做第三件（逐个色值替换）：
 *
 *   A. 把两套已有 token 家族（--c-* 与 index.html 的老家族）
 *      整体翻成深色值 —— 零新增选择器就覆盖约 500 处引用。
 *   B. 用真 Chrome 实测「每个屏幕真正可见的表面」，
 *      对 top 表面（body / 卡片 / 输入框 / 表格 / 分段控件…）
 *      补覆盖 —— 每一条都有实测数据支撑，不是猜的。
 *
 * ── 一个刻意的产品决定：题图不反色 ─────────────────────────
 * 题目是位图（public/papers/*/Qn.webp，切自Edexcel 印刷卷面），
 * 底色是纸白。滤镜反色会把数学图形、坐标系、手写笔迹一起翻掉，
 * 反而更难读 —— 所以含卷面/题图的容器强制保留浅底，
 * 只有周围的"应用外壳"变暗。这与纸质试卷在暗环境下
 * 依然用白纸打印是同一个道理。
 *
 *开关：右上角 #themeToggleBtn，或系统设置自动跟随。
 * ============================================================= */

/* =========================================================
 * A1. 语义 token 翻转 —— 覆盖 --c-* 家族（v032 定义）
 * ========================================================= */
html[data-ial-theme="dark"] {
  /* 中性色：文字反色，边线提亮到"暗底上可见" */
  --c-ink:      #e8edf6;   /* 原 #0f172a 主文字 */
  --c-ink-2:    #cbd5e1;   /* 原 #1f2937 */
  --c-ink-3:    #a3b0c2;   /* 原 #475569 次级文字 */
  --c-muted:    #8b98ab;   /* 原 #64748b 辅助文字 */
  --c-muted-2:  #6d7a8e;   /* 原 #94a3b8 更弱一层 */
  --c-line:     #2a3648;   /* 原 #e2e8f0 描边 */
  --c-line-2:   #212b3a;   /* 原 #eef2f7 更浅的分隔 */

  /* 表面：三层递进（页面 < 卡片 < 浮起） */
  --c-bg:       #0e1420;   /* 原 #f5f7fb 页面底 */
  --c-bg-2:     #141c2a;   /* 原 #f8fafc 次级底 */
  --c-surface:  #1a2333;   /* 原 #ffffff 卡片 */
  --c-paper:    #1e2739;   /* 原 #fdfcf8 —— 但见 A4，卷面另有规则 */

  /* 品牌色：蓝在暗底上要提亮，否则会糊掉 */
  --c-primary:    #7c9bff;
  --c-primary-2:  #5f83ff;
  --c-primary-50: #1c2a4d;   /* 原 #eff4ff 是浅蓝底→ 改成深蓝底 */

  /* 语义色提亮 */
  --c-success: #34d399;
  --c-warning: #fbbf24;
  --c-error:   #f87171;

  /* 阴影：暗底上要用更深的阴影 + 更亮的描边才有层次 */
  --s-sm: 0 1px 2px rgba(0,0,0,.40);
  --s-md: 0 4px 14px rgba(0,0,0,.48);
  --s-lg: 0 12px 32px rgba(0,0,0,.58);
}

/* =========================================================
 * A2. 老 token 家族翻转（index.html:24-25 定义）
 * ========================================================= */
html[data-ial-theme="dark"] {
  --ink:   #e8edf6;   /* 原 #172033 */
  --card:  #1a2333;   /* 原 #fff */
  --bg:    #0e1420;   /* 原 #f5f7fb */
  --line:  #2a3648;   /* 原 #e6eaf1 */
  --muted: #8b98ab;   /* 原 #69758b */
  --muted2:#6d7a8e;   /* 原 #8e98aa */

  /* 蓝色系：--blue2 原是 #edf2ff 浅蓝底，改深 */
  --blue2:  #1c2a4d;

  /* 状态背景色（浅底→ 深底） */
  --greenBg: #12301f;
  --amberBg: #33240a;
  --redBg:   #3a1418;
}

/* =========================================================
 * A3. 页面底+ 顶栏（实测：body 底色占可见面积绝对多数）
 * 实测 data：
 *   body bg rgb(245,247,251) 面积 1,296,000px²（dashboard）
 *   .main bg = linear-gradient(180deg,#f1f5fb, var(--bg) 180px)
 * ========================================================= */
/* =========================================================
 * A2b. 深色模式自己的语义 token（--d-* 前缀，d = dark）
 *
 * 为什么不直接复用 --c-*：--c-* 是给 v032 那批组件用的，
 * 而对比度体检逼出来的这些文字色是"在 #1a2333 卡片上恰好达标"的值，
 * 语义不同、作用域不同，混进 --c-* 会让原来的组件跟着变色。
 * 单独开一层前缀，既能复用（同一个色值出现十几次），
 * 又能一眼看出"这些是深色模式专用的"。
 *
 * 每一档都标了它在卡片底 #1a2333 上的实测对比度，
 * 改色时请顺手核一下这个数，别凭感觉调。
 * ========================================================= */
html[data-ial-theme="dark"] {
  /* 表面三层 */
  --d-base:   #0e1420;  /* 页面底 */
  --d-card:   #1a2333;  /* 卡片 */
  --d-raise:  #212b3a;  /* 浮起一层：表头、按钮、芯片 */
  --d-input:  #151d2b;  /* 输入框，比卡片略深以示"可输入" */
  --d-accent: #1c2a4d;  /* 选中态底 */
  --d-grad-top:#131b28;  /* .main 渐变顶*/

  /* 描边两层 */
  --d-line:   #2a3648;
  --d-line-2: #33405a;
  --d-line-3: #35435e;
  --d-line-on:#3b5bb5;  /* 选中态描边 */

  /* 文字五档（在卡片底上的对比度） */
  --d-ink:      #e8edf6;  /* 12.4:1 正文 */
  --d-ink-max:  #eef2f9;  /* 14.2:1 标题 */
  --d-ink-1:    #dbe3ef;  /* 11.6:1 弹层正文 */
  --d-ink-2:    #c6d1e0;  /* 9.9:1  加粗标签 */
  --d-ink-3:    #b9c5d6;  /* 8.1:1  次要正文 */
  --d-ink-4:    #a8b6c9;  /* 6.8:1  标签 / 说明 */
  --d-ink-5:    #93a2b8;  /* 5.6:1  版权等最弱层 */
  --d-ink-mute: #8b98ab;  /* 4.9:1  占位符 */

  /* 蓝系：暗底上要比浅色主题更亮 */
  --d-blue:     #7c9bff;
  --d-blue-2:   #9db6ff;
  --d-blue-edge:#5f83ff;
}

html[data-ial-theme="dark"] body {
  background: var(--d-base) !important;
  color: var(--d-ink);
}

/* .main 是真实承载内容的容器，它的渐变要翻成"深顶浅底" */
html[data-ial-theme="dark"] .ial-v030:not(.workspace-mode) .main {
  background: linear-gradient(180deg, var(--d-grad-top) 0%, var(--d-base) 180px) !important;
}

/* 顶栏：实测 rgba(255,255,255,.78) 玻璃拟态 */
html[data-ial-theme="dark"] .ial-v030:not(.workspace-mode) .topbar {
  background: rgba(26,35,51,.82) !important;
  border-color: var(--d-line) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.42) !important;
}
html[data-ial-theme="dark"] .topbar h1 { color: var(--d-ink) !important; }

/* =========================================================
 * A4. 卷面 / 题图：强制浅底（位图不能反色，见文件头说明）
 * 实测：progress 页 tr 白底 37,240px²、pricing 表格同理
 * ========================================================= */
html[data-ial-theme="dark"] .questionPaper,
html[data-ial-theme="dark"] .continuousPaperSheet,
html[data-ial-theme="dark"] .paperCanvasWrap,
html[data-ial-theme="dark"] .paperMarkSchemeSheet,
html[data-ial-theme="dark"] #paperWorkspaceMarkScheme {
  background: #ffffff !important;
  color: #172033 !important;
}
/* 卷面里滚动条槽也是白的 */
html[data-ial-theme="dark"] .continuousPaperViewport {
  background: #0b1119 !important;
}

/* =========================================================
 * B. 实测高频表面覆盖
 * 下面每条都对应 v088-surfaces.mjs 实测出的可见面积前列元素，
 * 不是"顺手写的"。注释里的 rgb() 是实测 getComputedStyle 的值。
 * ========================================================= */

/* ---- 卡片类（实测白底 #fff，是第二大面积）---- */
html[data-ial-theme="dark"] .card,
html[data-ial-theme="dark"] .v086-qcard,
html[data-ial-theme="dark"] .paperCard,
html[data-ial-theme="dark"] .practiceSetBuilder,
html[data-ial-theme="dark"] .paperFilters,
html[data-ial-theme="dark"] .commercialEmpty,
html[data-ial-theme="dark"] .v027ReviewTabs,
html[data-ial-theme="dark"] .gpCard,
html[data-ial-theme="dark"] .gpGoal,
html[data-ial-theme="dark"] .gpModules,
html[data-ial-theme="dark"] .gpModuleCard,
html[data-ial-theme="dark"] .v072-level-card,
html[data-ial-theme="dark"] .gpScopePicker,
html[data-ial-theme="dark"] .v087-plan,
html[data-ial-theme="dark"] .v087-trend,
html[data-ial-theme="dark"] .summaryCard,
html[data-ial-theme="dark"] .homework,
html[data-ial-theme="dark"] .metric {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}

/* =========================================================
 * B2. 文字色兜底 —— 这一段是对比度体检的直接产物
 *
 * 用真 Chrome 遍历 7 个页面、按 WCAG 比值算出所有不够格的文字，
 * 抓出 41 处。最严重的一类是"深色文字压在深色底上"，
 * 比值低到 1.03，也就是完全看不见：
 *   h1 页面大标题      rgb(15,23,42) on rgb(14,20,32)  → 1.03
 *   题卡标题 h4        rgb(15,23,42) on rgb(26,35,51)  → 1.13
 *   定价卡标题rgb(15,23,42) on rgb(26,35,51)  → 1.13
 * 这些元素自带 color:#0f172a 这类硬编码深色，token 翻转管不到，
 * 只能按选择器逐个压过去。
 *
 * ⚠️ 这批规则必须限定在"确实是暗底"的容器里。写成裸 h1/h2 会连带
 * 命中仍保持白底的浮层（新手引导卡、题图容器），把里面的深色标题
 * 反过来变成看不见 —— 复测时#obTitle 就是这么从 4.5+掉到 1.12 的。
 * 所以下面每条都挂在 .panel / .main 之下。
 * ========================================================= */

/* 页面大标题（实测 h1/h2/#pageTitle 全部 1.03）*/
html[data-ial-theme="dark"] .panel h1,
html[data-ial-theme="dark"] .panel h2,
html[data-ial-theme="dark"] .panel h3,
html[data-ial-theme="dark"] .panel h4,
html[data-ial-theme="dark"] .main h1,
html[data-ial-theme="dark"] .main h2,
html[data-ial-theme="dark"] #pageTitle,
html[data-ial-theme="dark"] .pageHead h1,
html[data-ial-theme="dark"] .pageHead h2 {
  color: var(--d-ink-max) !important;
}

/* 题卡 / 试卷卡 / 定价卡的标题（实测 h4/h3 1.13）*/
html[data-ial-theme="dark"] .qcard h4,
html[data-ial-theme="dark"] .v086-qcard h4,
html[data-ial-theme="dark"] .paperCard h3,
html[data-ial-theme="dark"] .paperCard h4,
html[data-ial-theme="dark"] .v087-plan h3,
html[data-ial-theme="dark"] .gpCard h3,
html[data-ial-theme="dark"] .gpGoal h3,
html[data-ial-theme="dark"] .gpModules h3,
html[data-ial-theme="dark"] .v072-level-card h3,
html[data-ial-theme="dark"] .summaryCard h3 {
  color: var(--d-ink-max) !important;
}

/* 题卡里的正文段落（实测 "Integration · Indefinite integral" 1.13）*/
html[data-ial-theme="dark"] .qcard p,
html[data-ial-theme="dark"] .v086-qcard p,
html[data-ial-theme="dark"] .paperCard p,
html[data-ial-theme="dark"] .qcard span,
html[data-ial-theme="dark"] .v086-qcard span,
html[data-ial-theme="dark"] .paperCard small {
  color: var(--d-ink-3) !important;
}

/* 题卡里的加粗小标签（实测 "Standard" 1.22、对比表 "Everything in Free" 1.52）*/
html[data-ial-theme="dark"] .paperCard b,
html[data-ial-theme="dark"] .v087-plan span,
html[data-ial-theme="dark"] .v087-compare td span,
html[data-ial-theme="dark"] .gpStatValue,
html[data-ial-theme="dark"] .gpLevelNow {
  color: var(--d-ink-2) !important;
}

/* 眉标 / 筛选标签 / 统计标签（实测 .eyebrow / .gpStatLabel 3.31~3.87）*/
html[data-ial-theme="dark"] .panel .eyebrow,
html[data-ial-theme="dark"] .gpStatLabel,
html[data-ial-theme="dark"] .gpStatFoot,
html[data-ial-theme="dark"] .gpLevelNote,
html[data-ial-theme="dark"] .gpLevelNow--empty,
html[data-ial-theme="dark"] .gpScopeChip,
html[data-ial-theme="dark"] .countText,
html[data-ial-theme="dark"] .v087-planFor,
html[data-ial-theme="dark"] .v087-plan small,
/* 筛选标签：v035.css:142 用的是 body.ial-v030 .practicePrimaryFilters
   .filterField>label（0,2,2），比本文件的 html[data-…] .filterField>label
   （0,1,1）重，所以这里必须挂同样的前缀才压得住 —— 顺序再晚也没用。*/
html[data-ial-theme="dark"] body.ial-v030 .practicePrimaryFilters .filterField > label,
html[data-ial-theme="dark"] body.ial-v030 .advancedFilters .filterField > label {
  color: var(--d-ink-4) !important;
}
html[data-ial-theme="dark"] .practiceSearchWrap > label,
html[data-ial-theme="dark"] .pageHead p,
html[data-ial-theme="dark"] .gpCard p,
html[data-ial-theme="dark"] .gpModules p,
html[data-ial-theme="dark"] .gpGoal p,
html[data-ial-theme="dark"] .gpModuleCard em,
html[data-ial-theme="dark"] .v072-level-card p,
html[data-ial-theme="dark"] .v072-level-card span {
  color: var(--d-ink-4) !important;
}

/* 单元名 / 题数（实测 gpModuleName、gpModuleNums 1.13）*/
html[data-ial-theme="dark"] .gpModuleName,
html[data-ial-theme="dark"] .gpModuleNums,
html[data-ial-theme="dark"] .gpModuleCard b,
html[data-ial-theme="dark"] .gpModuleCard strong {
  color: var(--d-ink-max) !important;
}

/* 选中的范围芯片：底色要一起翻，否则文字亮了底还是白的（实测 2.06）*/
html[data-ial-theme="dark"] .gpScopeChip.active,
html[data-ial-theme="dark"] .gpModuleCard.active {
  background: var(--d-accent) !important;
  color: var(--d-blue-2) !important;
  border-color: var(--d-line-on) !important;
}

/* 目标等级这类"蓝字"在暗底上要提亮（实测 gpLevelTo 2.08、gpBandLabel 2.2）*/
html[data-ial-theme="dark"] .gpLevelTo,
html[data-ial-theme="dark"] .gpBandLabel,
html[data-ial-theme="dark"] .gpBandLabel.is-target,
html[data-ial-theme="dark"] .v072CurrentGrade,
html[data-ial-theme="dark"] .v072TargetGrade,
html[data-ial-theme="dark"] #v072LevelAdvice {
  color: var(--d-blue-2) !important;
}

/* 版权行（真实容器是 .appCopyright，在侧栏里；实测 3.87）*/
html[data-ial-theme="dark"] .appCopyright,
html[data-ial-theme="dark"] .appCopyright b,
html[data-ial-theme="dark"] .appCopyright small {
  color: var(--d-ink-5) !important;
}

/* 试卷变体说明（实测 .variantHelp b "Standard" 1.22）*/
html[data-ial-theme="dark"] .variantHelp b,
html[data-ial-theme="dark"] .variantHelp span {
  color: var(--d-ink-2) !important;
}

/* 试卷状态标签：实测 "Not started" 落在浅色标签底上，所以要连底一起翻 */
html[data-ial-theme="dark"] .v073-paper-status {
  background: var(--d-raise) !important;
  color: var(--d-ink-3) !important;
  border-color: var(--d-line-3) !important;
}

/* =========================================================
 * B3. 浅色残留块
 *
 * 上面 B2 修的是"文字看不清"，这一段修的是相反的方向：某些块自身
 * 对比度达标（所以体检抓不到），但在深色页面上是一块刺眼的白。
 * 同样是实测得来的 —— 扫出深色下 lum>0.55 的可见元素，按面积排序：
 *   .v085-paper-timed      59,176px²  试卷卡的计时提示条
 *   .v085-paper-mode       34,968px²  模式标签
 *   .tag / .tag.variantTag 18,654px²  模块与变体标签
 *   .v072-level-bar        30,048px²  等级进度条
 *   .gpBandSeg--unknown    12,570px²  等级区间条里未知的那段
 * ⚠️ v043.css:118 用的是 body.ial-v030 .tag（0,1,2），比本文件的
 * html[data-…] .tag（0,1,1）重，所以必须挂同样的前缀才压得住。
 * ========================================================= */
html[data-ial-theme="dark"] body.ial-v030 .tag,
html[data-ial-theme="dark"] body.ial-v030 .tag.variantTag {
  background: var(--d-raise) !important;
  color: var(--d-ink-3) !important;
  border-color: var(--d-line-3) !important;
}

html[data-ial-theme="dark"] .v085-paper-mode {
  background: var(--d-raise) !important;
  color: var(--d-ink-3) !important;
  border-color: var(--d-line-3) !important;
}
html[data-ial-theme="dark"] .v085-paper-timed {
  background: var(--d-raise) !important;
  color: var(--d-ink-3) !important;
  border-color: var(--d-line-3) !important;
}
html[data-ial-theme="dark"] .v085-paper-timed input[type="checkbox"] {
  background: var(--d-input) !important;
  border-color: var(--d-line-3) !important;
}

/* 题卡右上角的作答状态小标（实测 .qstate / .v073-q-icon.unsure）*/
html[data-ial-theme="dark"] .qstate,
html[data-ial-theme="dark"] .v073-q-icon {
  background: var(--d-raise) !important;
  color: var(--d-ink-3) !important;
  border-color: var(--d-line-3) !important;
}

/* 等级进度条（实测 .v072-level-bar / .gpBandSeg--unknown / .gpLevelScope）*/
html[data-ial-theme="dark"] .v072-level-bar {
  background: var(--d-input) !important;
  border-color: var(--d-line-3) !important;
}
html[data-ial-theme="dark"] .gpBandSeg--unknown,
html[data-ial-theme="dark"] .gpLevelScope {
  background: var(--d-raise) !important;
  color: var(--d-ink-3) !important;
}

/* 定价页对比表整行（实测每行 37,240px² 的浅底）*/
html[data-ial-theme="dark"] table.v087-compare tbody tr {
  background: var(--d-card) !important;
}

/* 对比表里的"—"（实测 4.34，微不足）*/
html[data-ial-theme="dark"] .v087-no { color: var(--d-ink-5) !important; }

/* ---- 输入控件（实测 #fff，Practice 页合计约 8.8 万px²）----
 * ⚠️ 不要只写 input[type="text"]：index.html:1976 的 #searchInput
 * 根本没有 type 属性（浏览器默认当 text，但属性选择器不匹配），
 * 于是它在深色下留着一块 51,648px² 的白底 —— 量得到，看得见，
 * 就是不换色。所以这里用不带属性的 input 选择器兜住。
 */
html[data-ial-theme="dark"] input,
html[data-ial-theme="dark"] textarea,
html[data-ial-theme="dark"] select {
  background: var(--d-input) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line-2) !important;
}
/* checkbox / radio 的底要单独给，否则被上面这条刷成深色方块 */
html[data-ial-theme="dark"] input[type="checkbox"],
html[data-ial-theme="dark"] input[type="radio"] {
  background: var(--d-input) !important;
  border-color: var(--d-line-3) !important;
  accent-color: var(--d-blue-edge);
}
html[data-ial-theme="dark"] input::placeholder,
html[data-ial-theme="dark"] textarea::placeholder { color: #6d7a8e !important; }

/* select 的原生下拉箭头在暗底上要换成亮色，否则看不见 */
html[data-ial-theme="dark"] select option { background: var(--d-input); color: var(--d-ink); }

/* ---- 表格（实测 tr 白底）---- */
html[data-ial-theme="dark"] table.v087-compare,
html[data-ial-theme="dark"] table.v087-compare th,
html[data-ial-theme="dark"] table.v087-compare td {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}
html[data-ial-theme="dark"] table.v087-compare thead th { background: var(--d-raise) !important; }
/* .v087-no 的深色值在下面「对比度体检」一节统一给，不要在这里再写一条，
   否则后写的会把先写的盖回更暗的颜色（已经踩过一次）。 */

/* ---- 按钮：默认按钮与激活态 ---- */
html[data-ial-theme="dark"] .btn,
html[data-ial-theme="dark"] button.btn {
  background: var(--d-raise) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line-3) !important;
}
html[data-ial-theme="dark"] .btn:hover,
html[data-ial-theme="dark"] button.btn:hover { background: var(--d-line) !important; }

/* 主按钮保留品牌蓝，只是提亮 */
html[data-ial-theme="dark"] .btn.primary,
html[data-ial-theme="dark"] button.btn.primary {
  background: #315efb !important;
  border-color: var(--d-blue-edge) !important;
  color: #ffffff !important;
}
html[data-ial-theme="dark"] .btn.primary:hover { background: #2547d4 !important; }

/* ---- 筛选芯片 / 分段控件 / 语言按钮 ---- */
html[data-ial-theme="dark"] .langBtn,
html[data-ial-theme="dark"] .paperFilterModule,
html[data-ial-theme="dark"] .practiceFilterChip,
html[data-ial-theme="dark"] .setTopicChecks label,
html[data-ial-theme="dark"] .variantHelp span {
  background: var(--d-card) !important;
  color: #c3cddc !important;
  border-color: var(--d-line-2) !important;
}
/* 激活态：深蓝底 + 亮蓝字 */
html[data-ial-theme="dark"] .langBtn.active,
html[data-ial-theme="dark"] .paperFilterModule.active,
html[data-ial-theme="dark"] .practiceFilterChip.active,
html[data-ial-theme="dark"] .v027ReviewTabs button.active {
  background: var(--d-accent) !important;
  color: var(--d-blue-2) !important;
  border-color: var(--d-line-on) !important;
}

/* ---- 勾选框（练习页 120 个，V086 加的）---- */
html[data-ial-theme="dark"] .qpick,
html[data-ial-theme="dark"] .qthumb {
  background: var(--d-input) !important;
  border-color: var(--d-line-3) !important;
}
html[data-ial-theme="dark"] .qpick:hover,
html[data-ial-theme="dark"] .qthumb:hover { border-color: var(--d-blue-edge) !important; }
html[data-ial-theme="dark"] .qpick.picked,
html[data-ial-theme="dark"] .qthumb.picked {
  background: var(--d-accent) !important;
  border-color: var(--d-blue-edge) !important;
}

/* ---- 侧栏折叠按钮：实测 rgb(23,55,95) 在暗底上边界不清，
 *      提亮一档让轮廓可辨。侧栏本体本来就是深蓝，不需要动。---- */
html[data-ial-theme="dark"] .sidebarCollapseBtn {
  background: #1f3a5f !important;
  border-color: #3a5a8c !important;
}

/* ---- 正文次级文字统一提亮（实测 #94a3b8 / #64748b 在暗底上偏暗）---- */
html[data-ial-theme="dark"] .muted,
html[data-ial-theme="dark"] .paperVariantDescription,
html[data-ial-theme="dark"] .workspaceModeHelp,
html[data-ial-theme="dark"] .practiceFilterMeta,
html[data-ial-theme="dark"] .v087-trendNote {
  color: #9aa8bd !important;
}

/* ---- 模态框 / 弹层 ---- */
/* .obBackdrop > .obCard 是首次进入时的"How this works"引导卡，
   实测底色 rgb(255,255,255) —— 白卡片在深色下非常刺眼，必须一起翻。 */
html[data-ial-theme="dark"] .obCard,
html[data-ial-theme="dark"] .pageClearCard,
html[data-ial-theme="dark"] .obPanel,
html[data-ial-theme="dark"] #v072Paywall .v072-paywall-card,
html[data-ial-theme="dark"] .photoViewer {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line-2) !important;
}
html[data-ial-theme="dark"] .obCard h2,
html[data-ial-theme="dark"] .obCard h3,
html[data-ial-theme="dark"] .obCard p,
html[data-ial-theme="dark"] .obCard small,
html[data-ial-theme="dark"] .obCard b,
html[data-ial-theme="dark"] .obCard strong {
  color: var(--d-ink-1) !important;
}
/* 遮罩要更深，否则暗底下分不清层次 */
html[data-ial-theme="dark"] .obBackdrop,
html[data-ial-theme="dark"] #v073Wizard {
  background: rgba(4,8,14,.72) !important;
}

/* 新手引导（v073 wizard）内部是白卡片，深色下刺眼且文字仍是深色 */
html[data-ial-theme="dark"] .v073-wizard-overlay .v073-wizard-card,
html[data-ial-theme="dark"] .v073-wizard-card {
  background: var(--d-card) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line-2) !important;
}
html[data-ial-theme="dark"] .v073-wizard-card h2,
html[data-ial-theme="dark"] .v073-wizard-card h3,
html[data-ial-theme="dark"] .v073-wizard-card p,
html[data-ial-theme="dark"] .v073-wizard-card small {
  color: var(--d-ink-1) !important;
}
html[data-ial-theme="dark"] .v073-wizard-card input[type="date"] {
  background: var(--d-input) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line-2) !important;
}

/* 题数统计（实测 #questionCount 2.43）*/
html[data-ial-theme="dark"] #questionCount,
html[data-ial-theme="dark"] .countText {
  color: var(--d-ink-4) !important;
}

/* ---- 趋势图 / SVG 图表：网格线与淡点提亮 ---- */
html[data-ial-theme="dark"] .v087-trendEmpty { color: var(--d-ink-mute) !important; }
html[data-ial-theme="dark"] .v087-trendDelta.is-flat { color: var(--d-ink-mute) !important; }

/* ---- 滚动条：暗底上默认滚动条很扎眼 ---- */
html[data-ial-theme="dark"] * { scrollbar-color: #3a4658 var(--d-base); }

/* =========================================================
 * C. 主题开关按钮
 *
 * 主位置是侧栏（aside.sidebar），不是顶栏 —— 顶栏有
 *   body.workspace-mode .topbar{display:none}（index.html:196）
 * 只有 dashboard 可见，挂在顶栏等于 7 个页面里 6 个摸不到开关。
 * 侧栏本身是深蓝渐变，所以按钮在浅色和深色下都用同一套深色底，
 * 免得深色模式里去改按钮自己的颜色。
 * ========================================================= */

/* 侧栏容器：折叠时（.app.sidebar-collapsed）只留图标 */
.v088-themeRow {
  display: flex;
  justify-content: center;
  padding: 10px 0 4px;
  margin: 6px 0 2px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.v088-themeRow #themeToggleBtn {
  width: 100%;
  min-width: 0;
}
.app.sidebar-collapsed .v088-themeRow { padding: 8px 0 2px; }
.app.sidebar-collapsed .v088-themeRow #themeToggleBtn {
  width: 40px;
  padding-inline: 0;
}

#themeToggleBtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: #e6edf7;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
#themeToggleBtn:hover { background: rgba(255,255,255,.20); }
#themeToggleBtn:focus-visible {
  outline: 2px solid var(--d-blue);
  outline-offset: 2px;
}

/* 移动端顶栏里的那份（顶栏在 ≤600px 时替代 .topbar 出现）*/
.themeBtnM {
  width: 34px;
  height: 34px;
  min-width: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.10);
  color: #e6edf7;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.themeBtnM:focus-visible { outline: 2px solid var(--d-blue); outline-offset: 2px; }

/* 移动端顶栏整体反色 */
html[data-ial-theme="dark"] .mobileHeader {
  background: #141c2a !important;
  border-color: var(--d-line) !important;
}

/* =========================================================
 * D. 降低动效偏好（顺手做，属于深色模式的"夜里别闪"配套）
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  #themeToggleBtn { transition: none; }
}

/* =========================================================
 * E. 打印：打印必须永远是浅色（学生要拿黑字白纸）
 * ========================================================= */
@media print {
  html[data-ial-theme="dark"] body,
  html[data-ial-theme="dark"] .card,
  html[data-ial-theme="dark"] .topbar { background: #fff !important; color: #000 !important; }
  html[data-ial-theme="dark"] .card,
  html[data-ial-theme="dark"] .topbar { border-color: #ccc !important; }
}