/* =====================================================================
 * 深色主题 Dark Theme —— fogmy.cn
 * 生效条件：<html data-theme="dark">（由 head 里的内联脚本在样式加载前写好，
 * 跟随系统 prefers-color-scheme，用户手动切换后写入 localStorage 并优先）。
 * 设计要点：
 *   ① 只覆盖设计令牌 + 必要的组件，尽量不重写布局；
 *   ② 正文对底色对比度 ≥ 12:1，次要文字 ≥ 7:1，弱化文字 ≥ 5:1（WCAG AA 以上）；
 *   ③ 大图在深色下降低亮度/对比，避免刺眼；文字始终压在足够的遮罩上；
 *   ④ 覆盖页面里写死的内联颜色（[style*=] 属性选择器），否则城市分站会白底白字。
 * ===================================================================== */

html[data-theme="dark"] {
  color-scheme: dark;

  /* ---- 设计令牌 ---- */
  --primary: #34b98e;
  --primary-dark: #1f8a68;
  --primary-light: #12241d;
  --accent: #2dd4bf;
  --accent-dark: #5eead4;

  --ink: #e8efec;          /* 正文：对 #0e1614 约 15.5:1 */
  --ink-soft: #aab9b3;     /* 次要：约 8.4:1 */
  --ink-faint: #8b9a94;    /* 弱化：约 5.7:1 */
  --line: #26332e;

  --bg: #0e1614;
  --bg-soft: #141d1a;
  --bg-deep: #070c0b;

  --gold: #d8b45e;
  --gold-deep: #c9a34c;
  --gold-soft: #6b5a2c;
  --cinnabar: #e07a72;

  --gradient: linear-gradient(135deg, #1b7f60 0%, #14a08a 100%);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .55);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .65);
}

/* 未显式指定主题时，系统为深色则按深色渲染（JS 未执行时的兜底） */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { color-scheme: dark; }
}

html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] ::selection { background: rgba(45, 212, 191, .3); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b1210; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2b3a35; border-radius: 6px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4d46; }

/* ---------- 顶部导航 ---------- */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header.is-stuck {
  background: rgba(14, 22, 20, .92);
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .nav a { color: var(--ink-soft); }
html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a.active { color: var(--accent-dark); }
html[data-theme="dark"] .lang-btn,
html[data-theme="dark"] .lang-menu,
html[data-theme="dark"] .nav-langs { background: #16211e; border-color: var(--line); color: var(--ink-soft); }
html[data-theme="dark"] .lang-menu a:hover { background: #1d2b27; color: var(--accent-dark); }
html[data-theme="dark"] .header-tel { color: var(--primary); }
html[data-theme="dark"] .logo-text strong { color: var(--ink); }

/* ---------- 浅底区块 / 各类白色卡片 ---------- */
html[data-theme="dark"] .section--soft,
html[data-theme="dark"] .section--soft.watermark { background: var(--bg-soft); }

html[data-theme="dark"] .card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .product-card .body,
html[data-theme="dark"] .news-card,
html[data-theme="dark"] .cert-card,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .honor-cert,
html[data-theme="dark"] .clients-strip,
html[data-theme="dark"] .local-chip,
html[data-theme="dark"] .client-name,
html[data-theme="dark"] .cta-band,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .about-split .visual img {
  background: #16211e;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] .card p,
html[data-theme="dark"] .product-card p,
html[data-theme="dark"] .news-card p,
html[data-theme="dark"] .faq-body,
html[data-theme="dark"] .scene .body p { color: var(--ink-soft); }
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .product-card h3,
html[data-theme="dark"] .news-card h3 { color: var(--ink); }

html[data-theme="dark"] .window-frame { background: #16211e; border-color: var(--line); }
html[data-theme="dark"] .honor-cert { box-shadow: 0 10px 30px rgba(0, 0, 0, .55); }

/* ---------- 城市分站常用标签块 ---------- */
html[data-theme="dark"] .city-tpl .clients-strip { background: #16211e; }
html[data-theme="dark"] .city-tpl .local-chip { background: #1b2a25; border-color: var(--line); color: var(--ink-soft); }
html[data-theme="dark"] .city-tpl .section--soft { background: var(--bg-soft); }
html[data-theme="dark"] .city-cta { background: linear-gradient(135deg, #0a1a16 0%, #0e2b24 100%) !important; }

/* ---------- 表格（城市造价表等） ---------- */
html[data-theme="dark"] table { color: var(--ink); }
html[data-theme="dark"] table th,
html[data-theme="dark"] table td { border-color: rgba(255, 255, 255, .12) !important; }
html[data-theme="dark"] table thead tr,
html[data-theme="dark"] table tr[style*="rgba(0,0,0,.03)"] { background: rgba(255, 255, 255, .045) !important; }

/* ---------- 表单 ---------- */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #16211e;
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #75847e; }

/* ---------- 图片：深色下降低亮度，避免大面积高光刺眼 ---------- */
html[data-theme="dark"] .card img,
html[data-theme="dark"] .media img,
html[data-theme="dark"] .product-card img,
html[data-theme="dark"] .news-card img,
html[data-theme="dark"] .scene img,
html[data-theme="dark"] .about-split .visual img,
html[data-theme="dark"] .moon-gate,
html[data-theme="dark"] .garden-model img {
  filter: brightness(.88) contrast(1.02) saturate(1.02);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: inherit;
}
html[data-theme="dark"] .logo img,
html[data-theme="dark"] .logo-mark img,
html[data-theme="dark"] .qr img,
html[data-theme="dark"] .footer img { filter: none; }
/* 首屏大图：只压暗遮罩层，不要给容器加 filter —— 容器 filter 会把标题文字一起压暗，
   实测城市分站 H1 变得发灰难读。改为加厚遮罩 + 文字描边阴影，图片照样看得见，文字一定清楚。 */
html[data-theme="dark"] .hero-slide-mask,
html[data-theme="dark"] .city-hero .hero-slide-mask,
html[data-theme="dark"] .hero-slide .mask {
  background:
    linear-gradient(180deg, rgba(4, 10, 9, .62) 0%, rgba(4, 10, 9, .34) 38%, rgba(4, 10, 9, .78) 100%),
    linear-gradient(90deg, rgba(4, 10, 9, .74) 0%, rgba(4, 10, 9, .40) 52%, rgba(4, 10, 9, .22) 100%) !important;
}
html[data-theme="dark"] .city-hero h1,
html[data-theme="dark"] .hero-slide h1,
html[data-theme="dark"] .hero-slide h2,
html[data-theme="dark"] .hero-slide .slide-title,
html[data-theme="dark"] .city-hero .slide-sub,
html[data-theme="dark"] .hero-slide .slide-sub,
html[data-theme="dark"] .city-hero .hero-badge,
html[data-theme="dark"] .hero-slide .hero-badge,
html[data-theme="dark"] .hero-crumbs,
html[data-theme="dark"] .hero-crumbs a {
  color: #f3f8f6 !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9);
}
html[data-theme="dark"] .city-hero .slide-sub,
html[data-theme="dark"] .hero-slide .slide-sub { color: #d5e2dd !important; }
html[data-theme="dark"] .hero-crumbs { opacity: .92; }
html[data-theme="dark"] .city-hero .hero-city-links a,
html[data-theme="dark"] .hero-slide .hero-city-links a,
html[data-theme="dark"] .hero-actions .btn--ghost-light {
  background: rgba(6, 14, 12, .55);
  backdrop-filter: blur(3px);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
}

/* ---------- 页脚 ---------- */
html[data-theme="dark"] .footer { background: #070c0b; color: var(--ink-soft); }
html[data-theme="dark"] .footer h3,
html[data-theme="dark"] .footer h4,
html[data-theme="dark"] .footer strong { color: var(--ink); }
html[data-theme="dark"] .footer a { color: var(--ink-soft); }
html[data-theme="dark"] .footer a:hover { color: var(--accent-dark); }

/* =====================================================================
 * 覆盖页面里写死的内联颜色（属性选择器按内联样式原文匹配）
 * 不这么做的话，城市分站/首页上大量 style="color:#3f4f48" 在深色底上会看不清。
 * ===================================================================== */

/* 深灰正文类 → 次要文字色 */
html[data-theme="dark"] [style*="color:#3c4a44"],
html[data-theme="dark"] [style*="color:#3f4f48"],
html[data-theme="dark"] [style*="color:#42534c"],
html[data-theme="dark"] [style*="color:#4a5b54"],
html[data-theme="dark"] [style*="color:#5a6a63"],
html[data-theme="dark"] [style*="color:#5a6b64"],
html[data-theme="dark"] [style*="color:#5d6f68"],
html[data-theme="dark"] [style*="color:#6a7f78"] { color: var(--ink-soft) !important; }

/* 更浅的灰 → 弱化文字色 */
html[data-theme="dark"] [style*="color:#8a978f"],
html[data-theme="dark"] [style*="color:#8a9a93"],
html[data-theme="dark"] [style*="color:#9aa8a2"] { color: var(--ink-faint) !important; }

/* 品牌绿（内联最多的一个色）→ 深色下用亮绿，保证链接可读 */
html[data-theme="dark"] [style*="color:#0b6e4f"] { color: var(--primary) !important; }
html[data-theme="dark"] [style*="color:#0d9488"],
html[data-theme="dark"] [style*="color:#0e7490"] { color: var(--accent-dark) !important; }

/* 警示色：深色下要提亮 */
html[data-theme="dark"] [style*="color:#b45309"],
html[data-theme="dark"] [style*="color:#8a5a2b"] { color: #e0ac63 !important; }
html[data-theme="dark"] [style*="color:#b91c1c"] { color: #f08a8a !important; }
html[data-theme="dark"] [style*="color:#5d3fe0"] { color: #a99cff !important; }

/* 浅底块 → 深色块 */
html[data-theme="dark"] [style*="background:rgba(0,0,0,.03)"] { background: rgba(255, 255, 255, .05) !important; }
html[data-theme="dark"] [style*="background:#eef7f2"],
html[data-theme="dark"] [style*="background: #eef7f2"] { background: #16211e !important; }

/* ---------- 首页 v3 的深色适配 ---------- */
html[data-theme="dark"] .home-v3 .hv3-stats { background: #16211e; border-color: var(--line); }
html[data-theme="dark"] .home-v3 .hv3-stat span { color: var(--ink-faint); }
html[data-theme="dark"] .home-v3 .hv3-stat b { color: var(--ink); }
html[data-theme="dark"] .home-v3 .hv3-stat + .hv3-stat::before { background: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .brand-statement,
html[data-theme="dark"] .lattice-band { background: transparent; }
html[data-theme="dark"] .ink-mountains img { opacity: .5; }

/* ---------- 主题切换（跟随系统 / 浅色 / 深色） ---------- */
.theme-switch { position: relative; display: inline-flex; align-items: center; margin-right: 6px; }
.theme-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 11px; line-height: 1;
  border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--ink-soft);
  font-family: inherit; font-size: 13px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.theme-btn:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
.theme-btn svg { width: 16px; height: 16px; flex: none; }
.theme-btn .ic-moon { display: none; }
html[data-theme="dark"] .theme-btn .ic-sun { display: none; }
html[data-theme="dark"] .theme-btn .ic-moon { display: block; }

.theme-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 300;
  min-width: 128px; padding: 6px; display: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg); box-shadow: var(--shadow-md);
}
.theme-switch.open .theme-menu { display: block; }
.theme-menu a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink-soft); white-space: nowrap; cursor: pointer;
}
.theme-menu a:hover { background: var(--bg-soft); color: var(--accent-dark); }
.theme-menu a.active { color: var(--accent-dark); font-weight: 700; }

/* 移动端抽屉里的主题入口（与语言入口同款式） */
.nav-themes { display: none; }
@media (max-width: 1080px) {
  .theme-switch { display: none; }
  .nav-themes { display: block; margin-top: 18px; }
  .nav-themes > span {
    display: block; font-size: 12px; letter-spacing: .14em;
    color: var(--ink-faint); margin-bottom: 8px;
  }
  .nav-themes a {
    display: inline-block; margin: 0 8px 8px 0; padding: 7px 14px;
    border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; color: var(--ink-soft);
  }
  .nav-themes a.active { color: var(--accent-dark); border-color: var(--accent-dark); font-weight: 700; }
}
/* 桌面端：空间紧张时收起文字标签，只留图标 */
@media (min-width: 1081px) and (max-width: 1440px) { .theme-label { display: none; } .theme-btn { padding: 0 10px; } }

/* ---------- 小图标底座：深色下给图标一个可见的底盘（emoji 在纯深色上会发暗） ---------- */
html[data-theme="dark"] .card .icon,
html[data-theme="dark"] .card.feature .icon,
html[data-theme="dark"] .scene .icon,
html[data-theme="dark"] .feature .icon {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
}
html[data-theme="dark"] .section-head .sec-no,
html[data-theme="dark"] .sec-no {
  background: rgba(45, 212, 191, .12);
  border-color: rgba(45, 212, 191, .35);
  color: var(--accent-dark);
}
/* 城市分站里的「本地提示」色块（暖色调）在深色下换成低饱和琥珀底 */
html[data-theme="dark"] [style*="color:#8a5a2b"],
html[data-theme="dark"] [style*="color:#e0ac63"] {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
/* 聊天气泡 / 浮层控件 */
html[data-theme="dark"] .chat-window,
html[data-theme="dark"] #chatBox,
html[data-theme="dark"] .chat-body { background: #16211e; color: var(--ink); }

/* ---------- 对比度修正（实测发现的低对比元素）----------
 * .faq-body p 被别的样式表用固定深灰 #4a5b54 覆盖过，深色底上只有 2.3:1，必须提亮；
 * 产品卡的 .tag / .link-more 写死了品牌深绿 #0b6e4f，深色底上只有 2.6:1。 */
html[data-theme="dark"] .faq-body p,
html[data-theme="dark"] .faq-item .faq-body p,
html[data-theme="dark"] details.faq-item p,
html[data-theme="dark"] .faq-list p { color: var(--ink-soft) !important; }

html[data-theme="dark"] .product-card .tag,
html[data-theme="dark"] .product-card .link-more,
html[data-theme="dark"] .card .tag,
html[data-theme="dark"] .card .link-more,
html[data-theme="dark"] .link-more,
html[data-theme="dark"] .tag { color: var(--primary) !important; }

html[data-theme="dark"] .product-card .body,
html[data-theme="dark"] .card .body { background: transparent; }
html[data-theme="dark"] .product-card .media { background: #16211e; }

/* 通用兜底：深色下所有页面正文段落至少是次要文字色 */
html[data-theme="dark"] .city-tpl p,
html[data-theme="dark"] .home-v3 p { text-shadow: none; }

/* ---------- 对比度修正 · 第二批（实测剩余项）----------
 * .eyebrow 等小标签被写死成 #0b6e4f，深色底上只有 2.75:1。 */
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-head .eyebrow,
html[data-theme="dark"] .about-split .eyebrow { color: var(--accent-dark) !important; }
html[data-theme="dark"] .cert-item,
html[data-theme="dark"] .testimonial-author,
html[data-theme="dark"] .stat-p,
html[data-theme="dark"] time,
html[data-theme="dark"] .date { color: var(--ink-faint); }
html[data-theme="dark"] .nav-langs { background: #16211e; border-color: var(--line); }
html[data-theme="dark"] .nav-langs a { color: var(--ink-soft); }
html[data-theme="dark"] .nav-langs a.active { color: var(--accent-dark); }

/* ---------- 悬浮按钮（电话/咨询/回到顶部）----------
 * 它们默认白底 + 品牌绿文字，深色下绿字压白底只有 2.48:1；改成深底浅字。 */
html[data-theme="dark"] .float-cta .f-item {
  background: #16211e;
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
html[data-theme="dark"] .float-cta .f-item:hover { color: var(--accent-dark); border-color: var(--accent-dark); }
html[data-theme="dark"] .float-cta .f-item svg { stroke: currentColor; }
html[data-theme="dark"] .float-cta .f-label { color: inherit; }

/* ---------- 客户背书墙：底色写死成白色，但文字用的是 var(--ink)（深色下变浅）----------
 * 结果白底浅字，实测 1.17:1。把这一段的底色一起换成深色。 */
html[data-theme="dark"] .clients-band,
html[data-theme="dark"] .clients-band .clients-strip { background: var(--bg-soft); }
html[data-theme="dark"] .clients-band .client-name { background: #1b2a25; border-color: var(--line); color: var(--ink-soft); }
html[data-theme="dark"] .clients-band h2 { color: var(--ink); }
/* 同类的浅底区块一并覆盖（避免同类问题再次出现） */
html[data-theme="dark"] section[style*="background:#fff"],
html[data-theme="dark"] section[style*="background: #fff"],
html[data-theme="dark"] div[style*="background:#fff"],
html[data-theme="dark"] div[style*="background: #fff"] { background: var(--bg-soft) !important; }

/* ---------- 荣誉证书卡的文字（截图确认的问题）----------
 * 卡面在深色下是深底，但 .hc-title 写死深棕 #26211a —— 证书名几乎看不见。
 * 注意：整张卡的文字都要跟着提亮，不能只改标题。 */
html[data-theme="dark"] .honor-cert .hc-title { color: var(--ink) !important; }
html[data-theme="dark"] .honor-cert .hc-desc,
html[data-theme="dark"] .honor-cert .hc-label,
html[data-theme="dark"] .honor-cert .hc-footer,
html[data-theme="dark"] .honor-cert .hc-footer span { color: var(--ink-soft) !important; }
html[data-theme="dark"] .honor-cert .hc-label { color: var(--gold) !important; letter-spacing: .2em; }
html[data-theme="dark"] .honor-cert .hc-divider { background: linear-gradient(90deg, transparent, rgba(216, 180, 94, .75), transparent) !important; }
html[data-theme="dark"] .honor-cert .hc-medal { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .6)); }

/* ---------- 第三批：报价页 / 案例地图等页面里没有类名的浅色块 ----------
 * 实测探针找到：details（无 class 的问答折叠）、.app-tag 标签按钮、.client-name 链接胶囊
 * 在深色下仍是白底，而文字已经跟随 --ink 变浅 → 变成浅底浅字。 */
html[data-theme="dark"] details {
  background: #16211e;
  border: 1px solid var(--line);
  border-radius: 12px;
}
html[data-theme="dark"] details > summary { color: var(--ink); }
html[data-theme="dark"] details[open] > summary { color: var(--accent-dark); }
html[data-theme="dark"] details .faq-body p,
html[data-theme="dark"] details p { color: var(--ink-soft); }

html[data-theme="dark"] .app-tag,
html[data-theme="dark"] .scene-btn,
html[data-theme="dark"] .area-btn,
html[data-theme="dark"] button.app-tag {
  background: #1b2a25 !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
html[data-theme="dark"] .app-tag.active,
html[data-theme="dark"] .scene-btn.active,
html[data-theme="dark"] .area-btn.active {
  background: rgba(45, 212, 191, .16) !important;
  border-color: var(--accent-dark) !important;
  color: var(--accent-dark) !important;
}
html[data-theme="dark"] .client-name {
  background: #1b2a25 !important;
  border-color: var(--line) !important;
  color: var(--ink-soft) !important;
}
html[data-theme="dark"] .client-name:hover { color: var(--accent-dark) !important; border-color: var(--accent-dark) !important; }
html[data-theme="dark"] .answer-box,
html[data-theme="dark"] .app-picker { background: #16211e; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .answer-box p,
html[data-theme="dark"] .answer-box span { color: var(--ink-soft); }
/* 案例地图上的地名标签保持浅底深字（是地图标注，不是正文） */
html[data-theme="dark"] .pin-label { color: #14211c !important; }

/* ---------- 关键修正：页面里写死的内联白底 ----------
 * 报价页/评价页/百科页的问答折叠是 <details style="background:#fff;...">，
 * 内联样式优先级高于任何选择器，必须用 !important 才能覆盖。
 * 这也是之前几批规则在这几个页面上「看起来没生效」的原因。 */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"] {
  background: #16211e !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}
/* 例外：案例地图上的地名标签是地图标注，保持浅底深字 */
html[data-theme="dark"] .pin-label[style*="background"],
html[data-theme="dark"] span.pin-label {
  background: #eef3f1 !important;
  color: #14211c !important;
}
/* 内联浅灰底（表格、卡片） */
html[data-theme="dark"] [style*="background:#f5f7f6"],
html[data-theme="dark"] [style*="background: #f5f7f6"],
html[data-theme="dark"] [style*="background:#f8faf9"],
html[data-theme="dark"] [style*="background:#f4f7f5"],
html[data-theme="dark"] [style*="background:#f9fbfa"] { background: #16211e !important; }
/* 内联深色文字（说明段落） */
html[data-theme="dark"] [style*="color:#333"],
html[data-theme="dark"] [style*="color: #333"],
html[data-theme="dark"] [style*="color:#2b3a34"],
html[data-theme="dark"] [style*="color:#1f2d28"] { color: var(--ink-soft) !important; }

/* ---------- 最后一批：具体到元素的修正（实测定位）----------
 * 报价页 .answer-box 底色 rgb(247,251,249)、表格 tr 底色 rgb(252,254,253) ——
 * 都是写死在样式表里、优先级比我前面的规则高，必须 !important。 */
html[data-theme="dark"] .answer-box { background: #16211e !important; border-color: var(--line) !important; }
html[data-theme="dark"] table tr { background: transparent !important; }
html[data-theme="dark"] table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .035) !important; }
html[data-theme="dark"] table td,
html[data-theme="dark"] table th { background: transparent !important; color: var(--ink); }
html[data-theme="dark"] table td strong,
html[data-theme="dark"] table th strong { color: var(--ink); }

/* 流程步骤卡 / 筛选胶囊 */
html[data-theme="dark"] .step,
html[data-theme="dark"] .step.reveal,
html[data-theme="dark"] .process-step { background: #16211e !important; border-color: var(--line) !important; }
html[data-theme="dark"] .step h3,
html[data-theme="dark"] .step h4 { color: var(--ink) !important; }
html[data-theme="dark"] .step p { color: var(--ink-soft) !important; }
html[data-theme="dark"] .filter-chip {
  background: #1b2a25 !important; border-color: var(--line) !important; color: var(--ink-soft) !important;
}
html[data-theme="dark"] .filter-chip.active,
html[data-theme="dark"] .filter-chip:hover {
  background: rgba(45, 212, 191, .16) !important; border-color: var(--accent-dark) !important; color: var(--accent-dark) !important;
}

/* 深色下图标底盘用淡青（和浅色的薄荷底呼应），emoji 更清楚 */
html[data-theme="dark"] .card .icon,
html[data-theme="dark"] .card.feature .icon,
html[data-theme="dark"] .feature .icon,
html[data-theme="dark"] .scene .icon {
  background: rgba(45, 212, 191, .16) !important;
  border: 1px solid rgba(45, 212, 191, .28) !important;
}