/* ============================================================
   default/chrome-dark.css — Dark mode token + selector overrides
   Activated by `<html data-theme="dark">` (set by the boot
   script in index_global_def.html based on ?_dark URL param
   or `_dark` cookie).
   Loaded AFTER chrome.css so these rules win cleanly.
   ============================================================ */

:root[data-theme="dark"] {
  /* Surface */
  --color-bg:           #0a0a0a;
  --color-bg-tint:      #161616;
  --color-fg:           #ededed;
  --color-fg-2:         #a1a1a1;
  --color-fg-3:         #888888;
  --color-fg-mute:      #666666;
  --color-divider:      #2e2e2e;

  /* Accent */
  --color-link:         #3291ff;
  --color-focus:        hsla(212, 100%, 65%, 1);
  --color-badge-bg:     #002659;
  --color-badge-fg:     #62a8ff;

  /* Shadows in dark mode use lighter inner borders for legibility */
  --shadow-border:        0 0 0 1px rgba(255, 255, 255, 0.10);
  --shadow-border-light:  0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-elev-2:        0 2px 2px rgba(0, 0, 0, 0.5);
  --shadow-elev-3:        0 8px 8px -8px rgba(0, 0, 0, 0.6);
  --shadow-card:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 2px 2px rgba(0, 0, 0, 0.5),
    0 8px 8px -8px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px #1a1a1a;
}

/* =============================================================
   Body baseline (only when dark)
   ============================================================= */
[data-theme="dark"] body {
  background: var(--color-bg);
  color: var(--color-fg);
}

/* =============================================================
   Topbar — dark surface
   ============================================================= */
[data-theme="dark"] #topbar #headbar-1 a:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* "全部商品分类" pill — flip to white pill on dark background to keep contrast */
[data-theme="dark"] #topbar #tnavbarMain .quanbufenlei {
  background: var(--color-fg) !important;
  color: var(--color-bg) !important;
}
[data-theme="dark"] #topbar #tnavbarMain .quanbufenlei .icon {
  background:
    linear-gradient(var(--color-bg), var(--color-bg)) center top    / 14px 1.5px no-repeat,
    linear-gradient(var(--color-bg), var(--color-bg)) center center / 14px 1.5px no-repeat,
    linear-gradient(var(--color-bg), var(--color-bg)) center bottom / 14px 1.5px no-repeat
    !important;
}

/* navigator dropdown dark surface */
[data-theme="dark"] #topbar #tnavbarMain #indexNavigator .item:hover {
  background: var(--color-bg-tint) !important;
}

/* =============================================================
   Footer
   ============================================================= */
[data-theme="dark"] #footerFriend a {
  background: var(--color-bg-tint);
}
/* friend logos are designed for light bg → reduce opacity slightly */
[data-theme="dark"] #footerFriend img { opacity: 0.5; }
[data-theme="dark"] #footerFriend a:hover img { opacity: 0.85; }

/* =============================================================
   Hero banner placeholder
   ============================================================= */
[data-theme="dark"] #mainBannerCon { background: var(--color-bg-tint); }
[data-theme="dark"] #mainBannerCon .bd li { background-color: var(--color-bg-tint); }
[data-theme="dark"] #mainBannerCon .hd ul li { background: rgba(255, 255, 255, 0.3) !important; }
[data-theme="dark"] #mainBannerCon .hd ul li.on,
[data-theme="dark"] #mainBannerCon .hd ul .on { background: var(--color-fg) !important; }

/* =============================================================
   Section T1 — single ad strip
   ============================================================= */
[data-theme="dark"] .section-t1 a.block {
  background-color: var(--color-bg-tint);
}

/* =============================================================
   Section T2 — feature pipeline
   ============================================================= */
/* Header gradient mask flips white→black so dark text below stays readable */
[data-theme="dark"] .fp-header { background-color: var(--color-bg-tint); }
[data-theme="dark"] .fp-header::before {
  background: linear-gradient(90deg,
    rgba(10, 10, 10, 0.96) 0%,
    rgba(10, 10, 10, 0.85) 55%,
    rgba(10, 10, 10, 0.4) 100%);
}

/* fp-card surfaces */
[data-theme="dark"] .fp-card { background: var(--color-bg-tint); }
[data-theme="dark"] .fp-thumb { background-color: var(--color-bg); }

/* "View all" pill */
[data-theme="dark"] .fp-more { background: var(--color-bg-tint); color: var(--color-fg-2); }
[data-theme="dark"] .fp-more:hover { color: var(--color-fg); }

/* =============================================================
   Back-to-top FAB
   ============================================================= */
[data-theme="dark"] #backToTopBtn { background: var(--color-bg-tint); }
[data-theme="dark"] #backToTopBtn::after {
  border-top-color: var(--color-fg);
  border-left-color: var(--color-fg);
}

/* =============================================================
   Dark-mode toggle FAB (injected by boot script)
   Sits at the right edge above the customer-service bubble.
   定位基准 = #kf-bubble(kf-widget.js: right/bottom 24px, 56x56),
   不是 #backToTopBtn —— 后者在本主题恒为 display:none。
   ============================================================= */
#darkModeToggle {
  position: fixed;
  right: 30px;   /* 24 + (56-44)/2 —— 与 56px 客服气泡中心线对齐 */
  bottom: 96px;  /* 客服气泡顶边(24+56=80) + 16px 间距 */
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--color-bg);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 2px 2px rgba(0, 0, 0, 0.04),
    0 8px 8px -8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-size: 20px;
  line-height: 1;
  transition: transform 120ms ease, box-shadow 200ms ease;
  color: var(--color-fg);
}
#darkModeToggle:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.08),
    0 12px 24px -8px rgba(0, 0, 0, 0.06);
}
[data-theme="dark"] #darkModeToggle {
  background: var(--color-bg-tint);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 2px 2px rgba(0, 0, 0, 0.5),
    0 8px 8px -8px rgba(0, 0, 0, 0.6);
}
/* 客服气泡在 ≤480px 挪到 right/bottom:16px(kf-widget.js 自带媒体查询),此处跟随 */
@media (max-width: 480px) {
  #darkModeToggle {
    right: 22px;   /* 16 + (56-44)/2 */
    bottom: 88px;  /* 客服气泡顶边(16+56=72) + 16px 间距 */
  }
}

/* =============================================================
   User module (profileNav + tables) — extra dark coverage
   ============================================================= */
[data-theme="dark"] .profileNavCon { background: var(--color-bg-tint); }
[data-theme="dark"] .profileNav { background: var(--color-bg-tint); }
[data-theme="dark"] .profileNav .header { color: var(--color-fg); }
[data-theme="dark"] .profileNav .option a { color: var(--color-fg-2); }
[data-theme="dark"] .profileNav .option a:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .profileNav .option.active a { color: var(--color-fg); }
[data-theme="dark"] .profileNav .divider { background: var(--color-divider); }

[data-theme="dark"] .mainContent,
[data-theme="dark"] .mainContentDefaultTable { color: var(--color-fg); }
[data-theme="dark"] .table { background: transparent; color: var(--color-fg); }
[data-theme="dark"] .table th,
[data-theme="dark"] .table td { border-color: var(--color-divider) !important; }

/* User-page input fields */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-divider);
}

/* =============================================================
   Default content-area baseline (Fallback inner pages)
   common.css from default sets body bg/color — invert here.
   We only target body level so nothing inside the chrome leaks.
   ============================================================= */
[data-theme="dark"] body { background: var(--color-bg) !important; color: var(--color-fg); }
[data-theme="dark"] a { color: var(--color-link); }
[data-theme="dark"] hr { border-color: var(--color-divider); }

/* =============================================================
   Fallback 内页暗色适配层(2026-08-11)

   为什么需要:default 是 Fallback 模式主题,只覆盖 9 个
   片段,其余 30+ 个页面用的是 default 主题的 common.css / user.css
   —— 那是一整套**亮色**皮肤(白底容器 + 深色文字),此前在暗色下
   没有任何对应覆盖。实测 42 个前台页面 0 个干净:表格整片白底白字
   (对比度 1.11:1)、页标题 #333 落在 #0a0a0a 上(1.57:1)、
   登录框/个人中心卡片纯白等。

   🔴 顺序不能反:必须"先把浅底容器翻暗,再提亮暗底上的深色文字"。
   因为白底容器里的文字此刻已经是浅色(继承自 body 的 --color-fg),
   一旦先去提亮文字,白底上的浅字只会更看不见。
   ============================================================= */

/* ---------- 1. 顶栏/页脚链接:#666 on #0a0a0a = 3.45:1,低于 AA ----------
   🔴 特异性坑:default 的 base-common.css 里 `#topbar #headbar-1 li a`
   = (2,0,2),比 chrome.css 的 `#topbar #headbar-1 a` = (2,0,1) 还高。
   这里必须把 id 链和 li 一起写全,否则规则静默不生效(改了没反应)。 */
[data-theme="dark"] #topbar #headbar-1 li a,
[data-theme="dark"] #topbar #headbar-2 li a,
[data-theme="dark"] #topbar #headbar-1 a,
[data-theme="dark"] #topbar #headbar-2 a,
[data-theme="dark"] #webFooter a,
[data-theme="dark"] #webFooter .text,
[data-theme="dark"] #webFooter p,
[data-theme="dark"] .currentPath,
[data-theme="dark"] .currentPath a { color: var(--color-fg-2) !important; }
/* 🔴 顶栏里的 .btn1 要去掉那层红底(2026-08-12)。
   症状:"微信登录"在暗色下是 #a1a1a1 灰字压在 #a83a30 红底上 = 2.51:1,
   而且**出现在 11 个页面的顶栏**。

   两条规则打架:上面那条为了压过 default 的 `#topbar #headbar-1 li a`(2,0,2)
   把 id 链写全了,于是也压过了第 12 节的 `.btn1{color:#fff}`(0,2,0) ——
   两条都带 !important 时按特异性决胜,顶栏这条赢,只剩红底配灰字。

   🔴 为什么是去红底、而不是配白字:实测**亮色下这个链接根本没有红底**
   (background 透明、#666 纯文字链接)。那层红底来自第 12 节"品牌色按钮"——
   .btn1 在别处确实是红色实心按钮,那条规则是给那种用法写的,**误伤了顶栏
   这个同名的文字链接**。给它配白字等于承认这个凭空多出来的红药丸;去掉它
   才和亮色一致,而且顶栏链接色 #a1a1a1 on #0a0a0a 本身就有 7.66:1。
   只动 .btn1:.btn2/.btn3 本就无底色、走二级灰是对的,不要顺手一起刷白
   (那会把顶栏的次级层次抹平)。 */
[data-theme="dark"] #topbar .btn1,
[data-theme="dark"] #topbar a.btn1 {
  background-color: transparent !important;
  background-image: none !important;
}

/* ---------- 2. 浅底容器统一翻暗(User / Order / Index 内页) ----------
   这些 class 全部来自 default 的 common.css / user.css / 各页面 CSS。
   用 !important 是因为 default 侧多为更高特异性的组合选择器;本层
   仅在 [data-theme="dark"] 下生效,不影响亮色。 */
[data-theme="dark"] .usrInfoCon,
[data-theme="dark"] .dlg,
[data-theme="dark"] .prodDetailCon,
[data-theme="dark"] .mainContainer,
[data-theme="dark"] .rightPart,
[data-theme="dark"] .leftPart,
[data-theme="dark"] .prodInfo,
[data-theme="dark"] .remenduihuan,
[data-theme="dark"] .albumCon,
[data-theme="dark"] .albumpicCon,
[data-theme="dark"] .naviCon,
[data-theme="dark"] .cartCon,
[data-theme="dark"] .orderCon,
[data-theme="dark"] .addressCon,
[data-theme="dark"] .payCon,
[data-theme="dark"] a.product,
[data-theme="dark"] .product,
[data-theme="dark"] #bg1,
[data-theme="dark"] .banner,
[data-theme="dark"] .fp-header {
  background-color: var(--color-bg-tint) !important;
  color: var(--color-fg);
}
/* 容器内的分隔线 / 边框跟随 */
[data-theme="dark"] .usrInfoCon,
[data-theme="dark"] .dlg,
[data-theme="dark"] .prodDetailCon,
[data-theme="dark"] .albumCon,
[data-theme="dark"] a.product,
[data-theme="dark"] .naviCon { border-color: var(--color-divider) !important; }
/* .s1 是积分详情页的内层白块,单独给更深一档避免与外层同色糊在一起 */
[data-theme="dark"] .s1,
[data-theme="dark"] .hint {
  background-color: var(--color-bg) !important;
  color: var(--color-fg);
  border-color: var(--color-divider) !important;
}

/* ---------- 3. 表格:斑马纹白底 + 白底白字(用户报的主要症状) ---------- */
[data-theme="dark"] .table tr,
[data-theme="dark"] .table tr.trEven,
[data-theme="dark"] .table tr.trOdd,
[data-theme="dark"] .table tr.totalTr,
[data-theme="dark"] .mainContentDefaultTable tr { background-color: transparent !important; }
/* 斑马纹改用极低对比的亮度差,保留可读的行区分 */
[data-theme="dark"] .table tr.trEven,
[data-theme="dark"] .mainContentDefaultTable tr.trEven { background-color: rgba(255, 255, 255, 0.04) !important; }
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .mainContentDefaultTable td,
[data-theme="dark"] .mainContentDefaultTable th { color: var(--color-fg); }
[data-theme="dark"] .table thead tr,
[data-theme="dark"] .table tr.titleTr { background-color: rgba(255, 255, 255, 0.07) !important; }

/* ---------- 4. 暗底上的深色文字统一提亮 ----------
   default 的 common.css 用 #000/#222/#333/#444 做正文色,落在
   #0a0a0a 上是 1.06~2.03:1。这些元素背景是透明的(继承 body),
   所以直接提亮即可;有自己浅底的容器已在第 2 节翻暗。 */
[data-theme="dark"] .contentHeader .name,
[data-theme="dark"] .contentHeader .title,
[data-theme="dark"] .mainContent .name,
[data-theme="dark"] p.head,
[data-theme="dark"] p.title,
[data-theme="dark"] .xiaoshoujia,
[data-theme="dark"] .prodsCon .product p.name,
[data-theme="dark"] .mainContent strong,
[data-theme="dark"] .mainContent li,
[data-theme="dark"] .mainContent p { color: var(--color-fg); }
[data-theme="dark"] .mainContent .grey,
[data-theme="dark"] .mainContent .tips,
[data-theme="dark"] .mainContent .note { color: var(--color-fg-2); }

/* ---------- 5. 按钮/徽章对比度 ---------- */
/* 黄底按钮:default 用蓝字/棕字,暗色下压到 1.93~2.87:1 */
[data-theme="dark"] .btn.yellow,
[data-theme="dark"] button.btn.yellow,
[data-theme="dark"] a.btn.yellow { color: #3d2c0a !important; }
/* 纯色按钮统一白字(绿/红/蓝底本身够暗) */
[data-theme="dark"] .btn.green,
[data-theme="dark"] .btn.red,
[data-theme="dark"] .bigbtn,
[data-theme="dark"] #loginDlg_loginBtn,
[data-theme="dark"] #regDlg_regBtn { color: #fff !important; }
/* 灰底按钮翻暗 */
[data-theme="dark"] .btn.grey,
[data-theme="dark"] button.red1,
[data-theme="dark"] a.red1 {
  background-color: var(--color-bg-tint) !important;
  color: var(--color-fg) !important;
  border: 1px solid var(--color-divider);
}
/* 状态徽章:加深底色让白字达标 */
[data-theme="dark"] .label.label-green { background-color: #4a6416 !important; }
[data-theme="dark"] .label.label-red   { background-color: #8c2b2b !important; }
[data-theme="dark"] .label.label-grey,
[data-theme="dark"] .label.label-gray   { background-color: #3a3a3a !important; color: var(--color-fg) !important; }
/* 表格内链接:白底已翻暗,链接色回到暗色下的可读蓝 */
[data-theme="dark"] .table a,
[data-theme="dark"] a.detailHref,
[data-theme="dark"] a.text { color: var(--color-link); }

/* ---------- 6. 首页组件 ---------- */
/* 角标原本是 background:#fff + color:var(--color-fg) → 暗色下白底白字(1.17:1) */
[data-theme="dark"] .fp-badge {
  background: var(--color-bg) !important;
  color: var(--color-fg) !important;
  border-color: var(--color-divider);
}
/* 划线原价 #888 偏淡,提到 fg-2 */
[data-theme="dark"] .fp-origprice { color: var(--color-fg-2); }

/* ---------- 7. 白底产品图:加半透明蒙层(仅暗色) ----------
   商品图/模板图本身是白背景的实拍图,CSS 改不动图片内容,
   用一层蒙层压低整体亮度,避免暗色页面上一片刺眼的白。
   蒙层不吃事件(pointer-events:none),角标/文字用 z-index 抬到蒙层之上。

   2026-08-12:0.22 → 0.10。商品是转化主体,22% 会把纸张/印刷/装帧
   材质一并压掉,浅色封面尤其失真;而"不刺眼"这件事真正承重的是
   .fp-thumb 自己的深色底(#161616)与卡片边界,不是蒙层浓度。
   降到 10% 后白底册与深色册的观感差仍在可接受区间(见同日截图对照)。 */
[data-theme="dark"] .fp-thumb,
[data-theme="dark"] .albumCon .pic,
[data-theme="dark"] a.product .pic,
[data-theme="dark"] .prodsCon .product .pic { position: relative; }
[data-theme="dark"] .fp-thumb::after,
[data-theme="dark"] .albumCon .pic::after,
[data-theme="dark"] a.product .pic::after,
[data-theme="dark"] .prodsCon .product .pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.10);
  pointer-events: none;
  z-index: 1;
}
[data-theme="dark"] .fp-badge { z-index: 2; }

/* =============================================================
   第二轮:容器翻暗后的连带修正 + 剩余组件
   把浅底容器翻暗会让"原本印在浅底上的深色文字"变成暗底深字
   (#444 on #161616 = 1.86:1)。这一节把这些文字连同尚未覆盖的
   容器、品牌色按钮一并补齐。
   ============================================================= */

/* ---------- 8. 补齐剩余浅底容器 ---------- */
[data-theme="dark"] .optionsCon,
[data-theme="dark"] .tabItem,
[data-theme="dark"] .fp-thumb,
[data-theme="dark"] .pagination span,
[data-theme="dark"] .pagination a {
  background-color: var(--color-bg-tint) !important;
  color: var(--color-fg) !important;
  border-color: var(--color-divider) !important;
}
/* 选中态 tab 保留品牌色,只压暗到可读 */
[data-theme="dark"] .tabItem.jianjie,
[data-theme="dark"] .tabItem.on,
[data-theme="dark"] .tabItem.active {
  background-color: #015d73 !important;
  color: #fff !important;
}

/* ---------- 9. 暗底上的深色文字(第 4 节的补充) ----------
   这些元素原先印在浅色容器上,容器翻暗后必须一并提亮。 */
[data-theme="dark"] .dlg a,
[data-theme="dark"] .dlg p,
[data-theme="dark"] .dlg span,
[data-theme="dark"] .dlg .title,
[data-theme="dark"] .dlg label,
[data-theme="dark"] .wangjimima,
/* 🔴 2026-08-12 移除 .banner/.bannerCopy 的 h2 与 p ——
   本节的前提("原先印在浅色容器上,容器翻暗后必须一并提亮")对它们**不成立**:
   登录/注册页的文案坐在 --login-art 那张**浅色插画图**上,插画不随主题变暗。
   把字提亮到 #ededed 后,它连同自带的白色描边(login-register.css 的
   text-shadow:0 1px 0 #fffdf8)一起压在浅米色插画上 —— 实测 1.14:1,几乎读不出。
   设计色 #7f5c26 棕字 + 白描边在浅插画上本来就是对的,两个模式都该保持原样。
   判据:这个元素的背景会不会跟着主题变暗?不会 ⇒ 它的文字色也不该跟着变。 */
[data-theme="dark"] #tnavbarMain a,
[data-theme="dark"] .fp-header .fp-title,
[data-theme="dark"] h2.fp-title,
[data-theme="dark"] .num,
[data-theme="dark"] .usrInfoCon .num,
[data-theme="dark"] span.title,
[data-theme="dark"] span.highlight,
[data-theme="dark"] p.item,
[data-theme="dark"] .xiaoshoujia,
[data-theme="dark"] p.xiaoshoujia,
[data-theme="dark"] .sm-head__title,
[data-theme="dark"] .couponRule,
[data-theme="dark"] .couponExpire,
[data-theme="dark"] .optionsCon .title,
[data-theme="dark"] .optionsCon td,
[data-theme="dark"] .optionsCon th,
[data-theme="dark"] .optionsCon .content { color: var(--color-fg) !important; }
/* 次要说明文字用二级前景色,保留层次 */
[data-theme="dark"] .couponRule,
[data-theme="dark"] .couponExpire,
[data-theme="dark"] .num,
[data-theme="dark"] .gx-hero-sub,
[data-theme="dark"] .gx-eb { color: var(--color-fg-2) !important; }

/* ---------- 10. 个性定制页(index_gexing) ----------
   整页原本是暖米色设计,容器翻暗后其深色字全部不可读。 */
[data-theme="dark"] .mainContainer .gx-cjk,
[data-theme="dark"] .mainContainer .gx-lat,
[data-theme="dark"] .mainContainer .gx-hero-em,
[data-theme="dark"] .mainContainer .item p,
[data-theme="dark"] .mainContainer .item span,
[data-theme="dark"] .mainContainer h2,
[data-theme="dark"] .mainContainer h3 { color: var(--color-fg) !important; }
[data-theme="dark"] .gx-pill { background-color: #8c3f57 !important; color: #fff !important; }

/* ---------- 11. eyebrow 强调色:#4f46e5 在暗底只有 2.88:1 ---------- */
[data-theme="dark"] .ve-hero-eyebrow,
[data-theme="dark"] .fp-eyebrow,
[data-theme="dark"] .ve-block-eyebrow,
[data-theme="dark"] .eyebrow { color: #a5a0f5 !important; }

/* ---------- 12. 品牌色按钮:白字底色过亮,压暗底色保色相 ----------
   这几个按钮在亮色下同样偏低,但本层只在暗色生效,不动亮色观感。 */
[data-theme="dark"] #loginDlg_loginBtn { background-color: #b36a00 !important; color: #fff !important; }
[data-theme="dark"] #regDlg_regBtn     { background-color: #a85f00 !important; color: #fff !important; }
[data-theme="dark"] .btn.green,
[data-theme="dark"] button.btn.green,
[data-theme="dark"] a.btn.green        { background-color: #3d6b2e !important; color: #fff !important; }
[data-theme="dark"] .bigbtn            { background-color: #4a6f14 !important; color: #fff !important; }
[data-theme="dark"] .btn1,
[data-theme="dark"] a.btn1             { background-color: #a83a30 !important; color: #fff !important; }
[data-theme="dark"] .btn2,
[data-theme="dark"] a.btn2             { color: var(--color-fg) !important; }
/* 商品详情"马上拥有"橙底 */
[data-theme="dark"] .buyBtn,
[data-theme="dark"] .mashangyongyou,
[data-theme="dark"] .prodDetailCon .orange { background-color: #b34700 !important; color: #fff !important; }
/* 个性定制"更多模板"青底 */
[data-theme="dark"] .gx-more,
[data-theme="dark"] .moreTpl { background-color: #1f7a68 !important; color: #fff !important; }

/* ---------- 13. 联系我们页:纯黑标题落在纯黑底上(1.06:1) ----------
   容器 id 是 #infoCon(不是 .lianxiCon —— 按类名猜会静默不生效)。 */
[data-theme="dark"] #infoCon p.title,
[data-theme="dark"] #infoCon p,
[data-theme="dark"] #infoCon .title { color: var(--color-fg) !important; }
[data-theme="dark"] #infoCon .text,
[data-theme="dark"] #infoCon span { color: var(--color-fg-2) !important; }

/* ---------- 13b. 第三轮:按实测祖先链精确补齐(选择器均来自探针,非猜测) ---------- */
/* 分类子页排序条 "新品/最新" */
[data-theme="dark"] .sortfltBar .sortMode li span,
[data-theme="dark"] .sortfltBar li.active span { color: var(--color-fg) !important; }
/* 个性定制页大标题内的裸 span */
[data-theme="dark"] .gx-hero-h1 span,
[data-theme="dark"] .gx-hero span { color: var(--color-fg) !important; }
/* 个性定制页"更多模板"按钮(青底 #30b49c 上的浅字只有 2.52:1) */
[data-theme="dark"] #view-all-btn { background-color: #1f7a68 !important; }
[data-theme="dark"] #view-all-btn span { color: #fff !important; }
/* 支付跳转提示页 */
[data-theme="dark"] .hintContent span,
[data-theme="dark"] .hintContent p,
[data-theme="dark"] .commonCon .hintContent { color: var(--color-fg) !important; }
/* 订单确认页:收货地址块 + 优惠券行 */
[data-theme="dark"] .shouhuodizhi_selCon,
[data-theme="dark"] .shouhuodizhiCon .content,
[data-theme="dark"] .couponTr span,
[data-theme="dark"] .couponTr label { color: var(--color-fg-2) !important; }
/* 登录按钮橙底再压一档:#b36a00 白字仍只有 4.22:1,差 AA 一点 */
[data-theme="dark"] #loginDlg_loginBtn { background-color: #96590a !important; }
/* 已翻暗容器内的内容型链接:default 给它们写死 #333,容器翻暗后 1.43:1。
   这类链接(分类名/相册名)语义上是内容而非跳转强调,用前景色而不是链接蓝;
   订单号那种真·跳转链接仍走上面第 5 节的 --color-link。 */
[data-theme="dark"] .naviCon li a,
[data-theme="dark"] .naviCon a,
[data-theme="dark"] .albumCon a,
[data-theme="dark"] .prodDetailCon a,
[data-theme="dark"] .optionsCon a { color: var(--color-fg) !important; }

/* ---------- 14. 站内信 / 优惠券 白底面板 ---------- */
[data-theme="dark"] .sm-head,
[data-theme="dark"] .sm-btn,
[data-theme="dark"] .sm-item,
[data-theme="dark"] .couponItem,
[data-theme="dark"] .coupon-card {
  background-color: var(--color-bg-tint) !important;
  color: var(--color-fg) !important;
  border-color: var(--color-divider) !important;
}

/* ---------- 15. "如何下单"整图(.ve-howto)反相成暗色版(2026-08-12) ----------
   这里是暗色首页此前最大的一处视觉断裂:corp_baidu_case 是一张 3540×600
   的浅底整图,暗色下形成一整条刺眼白块,把页面阅读节奏拦腰截断。

   为什么用 invert 而不是盖蒙层:实测该图 **是灰度线稿**
   (最大饱和度 0.143、平均 0.016;91% 像素明度 >0.85),因此反相不会
   产生任何色相错乱,底色 #EFF1F3 → #100E0C 正好落在页面 #0a0a0a 与
   卡片 #161616 之间,线条与小字由深转浅、**对比度逐像素完全保留**。
   而盖黑蒙层是有损的:同日对照实测,60% 蒙层下细线与 8px 小字糊成一团
   (这也是交接文档把"压暗整图"列为不建议方案的原因)。

   🔴 已知边界:本规则的正确性依赖"这张运营图是灰度线稿"。若运营后台
   把 corp_baidu_case 换成**彩色**图,invert 会翻出补色(蓝↔橙)。届时
   应改为上传一张专用暗色图并在此处去掉 filter,而不是叠加 hue-rotate
   去救——那只会让两种图都不对。判据:换图后在暗色下肉眼看一次即知。 */
[data-theme="dark"] .ve-howto img { filter: invert(1); }

/* ---------- 16. 品牌 LOGO 暗色处理(2026-08-12,用户拍板方案 A) ----------
   {$corp_logo} 是一张**透明底**图:书本图标为蓝/橙,而字标「云图智印」与
   云朵是近黑色(实测不透明像素明度 <0.35 者占 37.7%)。透明底意味着暗色下
   没有任何底色托着它 —— 字标直接落在 #0a0a0a 上,几乎不可见,顶部与页脚
   两处共用同一张图,所以两处一起消失。

   invert(1) 会把蓝↔橙一并翻掉,故补 hue-rotate(180deg) 把色相转回来:
   黑白是无彩色、不受 hue-rotate 影响 → 字标稳定转白;蓝/橙经"反相再回转"
   基本复位。实测四种候选(见同日 logo-filter-candidates.png):仅 brightness
   提亮不够(字标仍是灰),纯白单色会丢掉全部品牌色。

   🔴 已知代价(用户知情后选择接受):图标**内部**原为白色的线条与星形会被
   翻成深色 —— 这是对品牌标识内部配色的改动,不是零副作用方案。彻底无损的
   做法是上传一张专用浅色 logo(需新增 corp 配置槽位 + 美术资源);届时把本
   规则删掉即可,不要在它之上再叠滤镜去救。 */
[data-theme="dark"] #topbar #headbar-2 .logo img,
[data-theme="dark"] .ve-foot-wrap .ve-foot-left .ve-foot-logo img {
  filter: invert(1) hue-rotate(180deg);
}

/* ---------- 17. 语言下拉的暗色微调(2026-08-12) ----------
   下拉的配色本身走 CSS 变量,暗色已自动适配,这里只补两处变量解决不了的:
   ① 暗色下 --color-bg(#0a0a0a) 与页面底色几乎相同,面板会"糊"在背景上 ——
      改用 --color-bg-tint(#161616) 拉开层次;
   ② 暗色需要更实的阴影才看得出浮起。 */
[data-theme="dark"] #topbar #headbar-1 .lang-menu {
  background: var(--color-bg-tint);
  border-color: var(--color-divider);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .65);
}
[data-theme="dark"] #topbar #headbar-1 .lang-menu li a:hover {
  background: rgba(255, 255, 255, .07);
}

/* ---------- 18. 🔴🔴 遗留按钮的浅色渐变盖住暗色底(2026-08-12) ----------
   本轮全站暗色扫描里**最大的一处系统性缺陷**,不是某个页面的孤例。

   机制:base-common.css 的 .grey/.green/.red/.blue/.yellow/.purple 用的是
   `background:` **简写** —— 它同时设 background-image(浅色渐变) 与
   background-color。而本文件此前的暗色规则只覆盖了 background-color,
   **background-image 原样活着,并且画在 background-color 之上**。
   于是"暗色规则生效了"和"按钮真的变暗了"是两回事:

     .btn.grey「删除」  声明底 #161616 / 实际渲染 #f0f0f0 + #ededed 白字 = 1.03:1
     .btn.green「复制」 声明底 #3d6b2e / 实际渲染 #90b454 + #ffffff 白字 = 2.37:1

   1.03:1 等于完全看不见 —— 用户就是先在 saved_product 页发现"删除"按钮消失的。
   这三个页面(saved-product / favor-product / my-position)都中招。

   🔴 这也是"读 CSS 判断颜色"这条路的边界:getComputedStyle().backgroundColor
   返回的是 #161616(看起来完全正常),只有采样**实际渲染像素**才看得见 #f0f0f0。
   本轮探测器第一版正是栽在这里,把 1.03:1 判成了 13:1 全绿。

   连带清掉 text-shadow:白色投影(.grey 的 `text-shadow:1px 1px 1px #fff`、
   .label 的 `0 -1px 0 rgba(0,0,0,.25)`)是为浅底按钮设计的,底翻暗后是脏边。 */
[data-theme="dark"] .btn.grey,
[data-theme="dark"] .btn.green,
[data-theme="dark"] .btn.red,
[data-theme="dark"] .btn.blue,
[data-theme="dark"] .btn.yellow,
[data-theme="dark"] .btn.purple,
[data-theme="dark"] a.btn.grey,
[data-theme="dark"] a.btn.green,
[data-theme="dark"] a.btn.red,
[data-theme="dark"] a.btn.blue,
[data-theme="dark"] a.btn.yellow,
[data-theme="dark"] a.btn.purple,
[data-theme="dark"] button.btn.grey,
[data-theme="dark"] button.btn.green,
[data-theme="dark"] button.btn.red,
[data-theme="dark"] button.btn.blue,
[data-theme="dark"] button.btn.yellow,
[data-theme="dark"] button.btn.purple {
  background-image: none !important;
  text-shadow: none !important;
}

/* ---------- 19. 密码强度条(2026-08-12) ----------
   user.css 的 `.pwdStrCon p{background:#f1f1f1}` 是写死的浅灰条,暗色下没被翻。
   未命中档位的文字走全局 --color-fg(#ededed) → 白字压浅灰 = 1.02:1(完全看不见);
   命中档位的 #f25555 红字压浅灰 = 2.97:1(勉强)。三个页面共用:修改密码/登录/注册。 */
[data-theme="dark"] .pwdStrCon p,
[data-theme="dark"] .mainContentDefaultTable .pwdStrCon p {
  background: var(--color-bg-tint) !important;
  color: var(--color-fg-2) !important;
}
[data-theme="dark"] .pwdStrCon .active p,
[data-theme="dark"] .mainContentDefaultTable .pwdStrCon .active p {
  color: #ff8a8a !important;   /* #f25555 在 #161616 上仅 3.6:1,提亮到 6.4:1 */
}

/* ---------- 20. 裸 .label 状态徽章(2026-08-12) ----------
   base-common.css 的 .label 基类底色 #999999 + 白字 = 2.96:1。
   本文件第 5 节只处理了 .label-green/.label-red/.label-grey 三个**带修饰类**的,
   而订单状态里大量用的是**不带修饰类的裸 .label**(如"已经付清"),整条漏网。
   出现在 user-index / order-lastmonth / order-before / exchange-credit 四个页面。 */
[data-theme="dark"] span.label,
[data-theme="dark"] .label {
  background-color: #3a3a3a !important;
  color: var(--color-fg) !important;
  text-shadow: none !important;
}
/* 带语义色的修饰类仍走第 5 节各自的底色,这里只把白字与投影统一掉 */
[data-theme="dark"] .label.label-green { background-color: #4a6416 !important; }
[data-theme="dark"] .label.label-red   { background-color: #8c2b2b !important; }
[data-theme="dark"] .label.label-orange { background-color: #8a4a10 !important; }
[data-theme="dark"] .label.label-purple { background-color: #4b3a72 !important; }

/* ---------- 21. "全部商品分类"白药丸(2026-08-12) ----------
   原先刻意翻成"白底黑字药丸"来保对比度,代价是:它 292x45、出现在**全部 27 个页面**
   的导航条上,在 #0a0a0a 的页面里是全页最亮的一块(实测 L*=92.7),用户直接反馈
   "白色太显眼"。改成与暗色体系一致的深色药丸 + 描边:对比度不降(浅字压深底),
   但不再抢走导航条的视觉重心。 */
[data-theme="dark"] #topbar #tnavbarMain .quanbufenlei {
  background: var(--color-bg-tint) !important;
  color: var(--color-fg) !important;
  box-shadow: inset 0 0 0 1px var(--color-divider);
}
[data-theme="dark"] #topbar #tnavbarMain .quanbufenlei .icon {
  background:
    linear-gradient(var(--color-fg), var(--color-fg)) center top    / 14px 1.5px no-repeat,
    linear-gradient(var(--color-fg), var(--color-fg)) center center / 14px 1.5px no-repeat,
    linear-gradient(var(--color-fg), var(--color-fg)) center bottom / 14px 1.5px no-repeat
    !important;
}

/* ---------- 22. 无 class 的裸 <button>:吃浏览器 UA 默认浅色底(2026-08-12) ----------
   实测 account_delete 的「发送验证码」= `<button id="acSendBtn">` 没有任何 class,
   于是拿到 UA 默认的 #efefef 底 + 黑字 —— 暗色页面上一块 99x37 的亮斑(L*=92.7)。
   全站扫描目前只有这一个,但写成通用规则而不是点名 #acSendBtn:
   这类"忘了加 class"的按钮会随新页面不断出现,点名修法必然漏下一个。
   #darkModeToggle 同样是无 class 的 button,但它有 id 规则(1,1,0)压过本条(0,2,1),
   仍走自己的样式;这里再显式排除一次,免得以后有人调整特异性时踩到。 */
[data-theme="dark"] button:not([class]):not(#darkModeToggle) {
  background-color: var(--color-bg-tint) !important;
  color: var(--color-fg) !important;
  border: 1px solid var(--color-divider) !important;
}
[data-theme="dark"] button:not([class]):not(#darkModeToggle):disabled {
  color: var(--color-fg-mute) !important;
}

/* ---------- 23. 积分页"热门兑换"标题(2026-08-12 建,2026-09-05 改写) ----------
   🔴 **这一节原先处理的是一张图,现在处理的是文字** —— 别照旧读。
   .remenCon .prodsHead 曾是 368x50 的 HOT_PICKITEM_368_50.png(把「HOT PICK ITEM」
   烤在图里),暗色下是一条亮带,当时的处方是 `filter: invert(1)`。
   该图已于 2026-09-05 退役:图里的英文 i18n 管线够不着,标题改成模板里的
   {:L_DUE('热门兑换')} + index_jifen.css 里的 `color:#333` 纯文字。
   ⇒ invert 的前提(它是一张灰度图)不再成立,改走与第 27 节同一处方:直接给前景色。

   🔴 如实说清楚:留着 invert **不会**让标题看不见 —— 它是渲染层滤镜,会把 #333 反相成
   浅灰,视觉上照样读得出来。换掉它的理由是**处方与对象不匹配**:invert 反的是整个元素
   (文字连同将来任何加上去的背景/边框),对纯文字来说"能看"是偶然而不是设计。
   判据也因此分成两条:computed color 必须自己就是浅色(不依赖滤镜)+ filter 必须是 none。
   ⚠️ 这两条都读 computed style,读不到渲染后的像素;换句话说它们证明的是
   "可读性由前景色直接保证",不是"旧写法不可读"。 */
[data-theme="dark"] .remenCon .prodsHead {
  color: var(--color-fg) !important;
}

/* ---------- 24. 内页顶部横幅压暗(2026-08-12) ----------
   #mainBannerCon 的轮播底图在暗色下过亮。实测各页 meanL(0=黑 100=白):
       jifen 89.3 | article 84.5 | lianxi 84.5 | sub/sub-node/prod-detail/search 57.4
   而页面底 L*=2.7、卡片 L*=7.2 —— 一条 1600x305 的 L*≈85 亮带压在最上方,
   是进入内页第一眼最刺的东西。

   🔴 为什么首页不需要、内页却裸奔:那条 hero 文字用的深色渐变
   (`#mainBannerCon .bd li a::before`)写在 **index.css**,而 index.css **只有首页加载**。
   内页(index_sub / index_article / index_jifen …)根本没有这条规则,所以完全没有压暗。
   实测佐证:首页横幅从左到右 5 段 meanL = 13.5/16.3/33.9/46.2/43.6(明显渐变),
   article 则是 92.1/83.3/83.8/74.9/88.4(基本持平,无渐变)。

   本条放 chrome-dark(全站生效)用 ::after,首页则在 index.css 里关掉 ——
   index.css 在 chrome-dark 之后加载(实测顺序 base→chrome→chrome-dark→页面级),
   这正是本主题既有的"页面级样式最后覆盖"架构,不是取巧。
   用 ::after 而不是 ::before,是为了不和首页那条 ::before 渐变抢同一个伪元素。

   🔴 浓度 = 0.2(保留 80% 亮度),2026-08-12 用户拍板。
   我最初按"向首页 hero(meanL 30.6,唯一没被反馈过亮的横幅)看齐"取了 0.5,
   实测把 84.5/57.4 两类图收进 30~45 —— 但用户实看后判定**太暗**,改为 80%。
   即:这个数是**观感取舍,不是算出来的最优解**;我那套"向 hero 看齐"的推导
   给出的是一个可辩护的起点,不是判据。后续要再调,直接改这一个 alpha:
       alpha = 1 - 目标亮度   (0.2 → 80%,0.5 → 50%,0 → 不压)
   各页在 0.2 下的实测值见验证脚本 verify-dim.py 的 INNER 表(与 alpha 同步维护)。

   🔴 明确不含登录/注册页的 .banner(它也是"顶部大图",但压不得):
   那张浅色插画上坐着 CSS 文案 #7f5c26(L*≈43,见第 9 节)。图不动时底色 L*≈87、
   对比 4~5:1;一旦整体压暗,底色会向 #7f5c26 靠拢(50% 时掉到 L*≈45,与文字几乎
   同亮、对比度回到约 1.05:1),正好复刻第 9 节刚修掉的那个缺陷。
   **文字是 CSS 的、底是图片的,两者不会一起变暗** —— 这是"能压"与"不能压"的分界。
   注意这条与上面的 alpha 无关:哪怕 alpha 调得很轻,方向仍是把底色推向文字色,
   所以不是"轻一点就能压",而是这块图根本不该走整体压暗。 */
[data-theme="dark"] #mainBannerCon .bd li a {
  position: relative;
  display: block;
}
[data-theme="dark"] #mainBannerCon .bd li a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);   /* = 保留 80% 亮度 */
  /* 🔴 防御性,不是当前必需:::after 是伪元素,事件会冒泡到宿主 <a>,
     所以现状 markup 下即使去掉这行横幅照样可点(实测变异成 auto 后测试全绿)。
     留着是防以后往横幅链接里加按钮/角标时被蒙层挡住。
     相应地,验证脚本对它只做**声明检查**并如实标注 —— 不伪装成行为断言。 */
  pointer-events: none;
}

/* ---------- 25. 个人中心头像压暗(2026-08-12) ----------
   默认头像 default_user_icon.jpg 是白底 3D 小人,实测 meanL=92.2、88.4% 的像素
   是亮像素 —— 在 #0a0a0a 的页面上是一块 128x128 的白方块,比页面上任何元素都亮。
   用 brightness() 而不是盖蒙层:头像是圆角/方形的独立图元,滤镜跟着图元走,
   不需要额外的定位伪元素,也不会在图元之外留下一圈灰边。 */
[data-theme="dark"] .usrInfoCon .leftPart img {
  filter: brightness(0.5);
}

/* ---------- 26. 商品详情的装订/尺寸选项药丸(2026-08-25) ----------
   index_prod_detail.css 的 `.optItem` 写死 `background:#fff`,而暗色下它的文字
   走第 4 节的 var(--color-fg)(#ededed) —— 白底 + 近白字,实测 **1.17:1**,
   选项名整个看不见(用户要在这里选"对裱蝴蝶精装"/"210x285",看不见就没法下单)。
   处方照第 21 节的白药丸:深底 + 浅字,不动那圈 #ff9900 描边 ——
   描边才是"这是可选项"的视觉语言,且橙色在深底上本来就够亮。
   🔴 选中态与未选中态目前只靠右下角 12x12 的 .checkedIcon 区分(两者底色/描边
   完全相同),本条不改这个设计,只把两者一起翻暗。 */
[data-theme="dark"] .optSelection .optItem {
  background: var(--color-bg-tint) !important;
  color: var(--color-fg) !important;
}

/* ---------- 27. 积分页"热门兑换/热门推荐"卡片的积分数(2026-08-25) ----------
   这两处的 `.price` 声明的是中性深灰 #333(不是别处 `.price` 那种暖色强调色),
   在 #0a0a0a 上实测 **1.43:1**。两条规则分别住在两个文件里、选择器也不同:
       index_jifen.css         .remenCon > .prodsCon .product .price
       index_jifen_detail.css  .rightPart > .remenduihuan .product .price
   所以这里按**它们共同的容器语义**点名(.remenCon / .remenduihuan 这两块卡片区),
   而不是笼统写 `.product .price` —— 站内别处的 .price 是 #ff2727 / #FF6600 /
   #f1615c 这类暖色强调色,在暗底上本来就够亮,不该被一并染成前景灰。 */
[data-theme="dark"] .remenCon .product .price,
[data-theme="dark"] .remenduihuan .product .price {
  color: var(--color-fg) !important;
}