@charset "utf-8";
/* ==========================================================================
   soft-industrial.css · 第 47 轮：Soft Win2000 Industrial
   「柔和 Win2000 工业桌面」
   --------------------------------------------------------------------------
   目标：保留 Win2000 的灵魂（蓝标题栏 / 树形目录 / 紧凑工具栏 / 状态栏 /
        高信息密度 / 工业感），但把"线条感太重"这件事压下去 ——
        把「线条分割」换成「留白 + 轻微背景色差 + 极轻阴影」。

   ── 加载顺序 ──────────────────────────────────────────────────────────────
   整条样式链的**最末**，排在 media-cards.css 之后。
   回退：删掉模板里那一行
         <link rel="stylesheet" href="/static/css/soft-industrial.css">
        即可完全恢复到本轮之前的外观，零残留、无需改 Go 与 JS。
   —— 颜色部分**不在这里**：那部分已经改在令牌源头
      （flat-industrial.css / flat-industrial-clean.css §23.1 /
        grid-backdrop.css / content-surfaces.css / media-cards.css），
      改一个值传播到几十条规则。本层只负责令牌够不到的**结构与材质**：
      圆角 / 阴影 / 线条增减 / 具体组件的状态色。

   ── 权重策略（本项目的既定手法，这里统一说明一次）────────────────────────
   本层的对手是三批带 !important 的规则，id 数最高到 4：
     · flat-industrial.css  §2      (1,3,2)   ~ 20 条去浮雕总闸
     · flat-industrial-clean.css §23.2/§28  (2,4,2)
     · grid-backdrop.css    §2/§4   (3,3,2)   ← .win-inset 一族的实心底
     · content-surfaces.css §1/§3/§5 (4,4,1)  ← 面板 / 卡片轮廓与直角
   本层因此分两档：
     · 通用规则   → 3 个 id（`body.w2k#top#top#top`）
     · 面板与卡片 → 5 个 id（`body.w2k#top#top#top#top#top`）
   CSS 权重先比 id 个数，5 > 4 一次压过，不必再猜源码顺序。

   ⚠ 两条本项目踩过三次的纪律，本层严格遵守：
     ① **给可交互元素写底色/字色时，一律带 `:not(.is-active):not(:hover)`**。
        本层 id 数高于 `.is-active` 那类"类多 id 少"的状态规则，
        不排除就会把选中态/悬停态一起压掉（第 35/36/41 轮各栽一次）。
     ② **要"去掉"一条边框时，改 `border-color` 而不是 `border-width`**。
        删宽度会改变内容盒尺寸 → 整页重排（第 41 轮实测整页矮 27px）。
        本层所有"去线"都是颜色改透明或换成极浅色，盒子尺寸一个像素不变。

   ⚠ 关于阴影：templates/win2000.html 的首帧内联样式里有一条
     `*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}`
     （权重 (0,0,0)）。本层所有 box-shadow 都写在类/属性选择器上并带 !important，
     权重高于 `*`，因此不会被它吃掉。
   ========================================================================== */


/* ==========================================================================
   1. 令牌：本层的四个总闸
   --------------------------------------------------------------------------
   想整体调"软硬程度"只改这四组：
     --soft-r-*    圆角（规范：组件 4 / 图片 5 / 卡片 6，禁止 12px 以上）
     --soft-line*  线条（规范：边框必须低对比，禁止 #333/#555/#666/纯黑）
     --soft-sh*    阴影（规范：轻、软、低透明度，禁止悬浮 SaaS 卡片感）
     --soft-*blue  蓝色系统（规范：蓝色存在，但不刺眼）
   ========================================================================== */
:root {
  /* 圆角：规范 §8 */
  --soft-r-sm: 4px;    /* 按钮 / 输入框 / 药丸 / 徽章 */
  --soft-r-md: 5px;    /* 图片 / 小面板 */
  --soft-r-lg: 6px;    /* 卡片 / 窗口 / 列表容器 */

  /* 线条：规范 §4「边框颜色必须低对比度」 */
  --soft-line: #D7E0E7;         /* 常规边框（＝ --border / --panel-border） */
  --soft-line-soft: #E7EDF2;    /* 分割线：条目与条目之间 */
  --soft-line-input: #CBD8E2;   /* 输入框：比常规略深半档，提示"能输入" */

  /* 阴影：规范 §7，两个值就够 */
  --soft-sh-card: 0 1px 3px rgba(40, 70, 90, .06);
  --soft-sh-panel: 0 2px 6px rgba(40, 70, 90, .08);

  /* 蓝色系统：规范 §5 */
  --soft-blue: #2F6FAE;
  --soft-blue-hover: #3D82C2;
  --soft-blue-active: #285F94;
  --soft-blue-tint: #E7F0F8;    /* 浅蓝背景 */
  --soft-blue-sel: #DCEAF7;     /* 选中状态 */
  --soft-hover: #E7EFF6;        /* 通用悬停 */

  /* 顶部导航 / 工具栏专用（规范 §10 / §11） */
  --soft-nav-bg: #F4F7F9;
  --soft-nav-text: #425466;
  --soft-nav-hover: #E5EEF6;
  --soft-btn-bg: #F4F6F8;
  --soft-btn-line: #D8E0E6;
}


/* ==========================================================================
   2. 窗口外壳：圆角 + 柔和投影
   --------------------------------------------------------------------------
   规范 §7 要求"极轻阴影"，§8 要求窗口类组件用 6px 圆角。
   不用 `overflow:hidden` 收圆角（会破坏内部 position:sticky 与浮层），
   改成"窗口本体给圆角 + 首尾两条栏各自补对应角"，
   这样标题栏/状态栏不会以直角盖住窗口的圆角。
   ========================================================================== */
html:not(.dark) body.w2k#top .w2k-window {
  border-radius: var(--soft-r-lg) !important;
  box-shadow: var(--soft-sh-panel) !important;
}
html:not(.dark) body.w2k#top .w2k-titlebar {
  border-radius: var(--soft-r-md) var(--soft-r-md) 0 0 !important;
}
html:not(.dark) body.w2k#top .w2k-statusbar {
  border-radius: 0 0 var(--soft-r-md) var(--soft-r-md) !important;
}

/* 桌面（窗口外那圈底板）本身不用圆角，但给窗口一圈更柔的落地感 */
html:not(.dark) body.w2k#top .w2k-desktop {
  background-color: var(--bg-page, #EEF3F7) !important;
}

/* --------------------------------------------------------------------------
   2.5 ★ 拆掉"窗框里再套一个框"的两层
   --------------------------------------------------------------------------
   实测（1440 视口，findline 扫出的可见 1px 线清单）发现：
     .w2k-window  自身 1px 外框（保留 —— 它是窗口的轮廓，Win2000 的身份）
       └ .w2k-main.win-inset  又在窗口内侧整整齐齐再画一个 1134px 宽的矩形
     于是四边各有两条平行线，这正是需求里"框里面还有框"的典型形态。
   .w2k-main 的矩形与窗框之间只隔 6px 客户区底色，读起来纯属重复。
   处理：把它整圈改透明 —— 窗口外框独自承担轮廓，工作区靠 #F7F9FB
   与两侧的色差立住，不再画线。
   —— 仍然只改 border-color，不碰 border-width（见文件头纪律 ②）。 */
html:not(.dark) body.w2k#top#top#top .w2k-main {
  border-color: transparent !important;
}


/* ==========================================================================
   3. 标题栏：保留 Win2000 蓝，但降饱和
   --------------------------------------------------------------------------
   规范 §5「标题栏仍然可以保留经典 Win2000 蓝色，但是不要做成强烈的高饱和渐变」
   规范 §20「必须保留：蓝色标题栏」。
   改前实测是 #E5E2DA 的中性灰条（扁平化那几轮把蓝去掉了）；
   本层把它还原成蓝，但用 #3D82C2 → #2F6FAE 这段克制的渐变，
   而不是原来的 #1084d0 → #000080 高饱和经典蓝。
   ========================================================================== */
html:not(.dark) body.w2k#top .w2k-titlebar {
  background-color: var(--soft-blue) !important;
  background-image: linear-gradient(180deg, var(--soft-blue-hover) 0%, var(--soft-blue) 100%) !important;
  color: #FFFFFF !important;
  border-color: var(--soft-blue-active) !important;
}
html:not(.dark) body.w2k#top .w2k-titlebar :is(.w2k-titlebar-text, .w2k-titlebar-sep) {
  color: #FFFFFF !important;
}
/* 标题栏上的三个小按钮：从"浅灰实体键"改成"蓝底上的半透明白"，
   这样它们不再是从蓝条上戳出来的灰方块，存在感自然降低。 */
/* ★ 第 55 轮：这里必须用 **2 个 id**（`#top#top`），1 个会被别人压掉。
   实测（whycolor.mjs 列出所有命中规则）：clean 层有一条
     `html:not(.dark) body.w2k#top :is(#paper-audio-play-icon, .archive-category, …)`
     { color: var(--text) !important }
   它的 `:is()` 里含 **id**，按 CSS 规范 `:is()` 取"最具体参数"的权重，
   所以整条是 **(2,2,2)**；而我只写了 1 个 id，是 **(1,4,2)** ——
   **id 数 2 > 1，我 4 个类全白搭**，于是按钮字色一直是墨色 #263746，
   压在我的半透明白底上只有 **2.33:1**（悬停态审计扫出来的）。
   —— 这正是 FACT.md 约束 6 记的那个坑："别再只看 id 数就断定自己赢了"，
      这次是反过来被 `:is()` 里的 id 反超。 */
html:not(.dark) body.w2k#top#top .w2k-titlebar .w2k-tbtn {
  background-color: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .38) !important;
  border-radius: var(--soft-r-sm) !important;
  color: #FFFFFF !important;
}
html:not(.dark) body.w2k#top#top .w2k-titlebar .w2k-tbtn:hover {
  background-color: rgba(255, 255, 255, .30) !important;
  border-color: rgba(255, 255, 255, .60) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   4. 顶部导航（菜单栏）—— 规范 §10
   --------------------------------------------------------------------------
   「简单 / 扁平 / 紧凑」，背景 #F4F7F9、文字 #425466、
   Hover #E5EEF6、Active #DCEAF7。不做现代网页导航栏。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-menubar {
  background-color: var(--soft-nav-bg) !important;
  border-bottom-color: var(--soft-line) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-menu a {
  color: var(--soft-nav-text) !important;
  border-radius: var(--soft-r-sm) !important;
}
/* ⚠ 悬停与当前项必须写全，否则被上面那条 (3,2,2) 压掉 */
html:not(.dark) body.w2k#top#top#top .w2k-menu a:hover {
  background-color: var(--soft-nav-hover) !important;
  color: var(--soft-blue-active) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-menu a.is-active,
html:not(.dark) body.w2k#top#top#top .w2k-menu a.is-active:hover {
  background-color: var(--soft-blue-sel) !important;
  color: var(--soft-blue-active) !important;
}


/* ==========================================================================
   5. 工具栏：降低按钮的"实体感"—— 规范 §11
   --------------------------------------------------------------------------
   「按钮不要全部变成明显的灰色实体按钮」：
   默认按钮去掉重边框、底色与画布贴近；当前项用浅蓝底 + 深蓝字，
   把"实心蓝"留给唯一的主动作（搜索）。
   ========================================================================== */

/* 5.1 默认按钮 / 排序筛选胶囊 */
html:not(.dark) body.w2k#top#top#top :is(.w2k-btn, .toolbar-btn, .compact-pill,
    .filter-trigger, .w2k-view-btn, .w2k-thin-raised, .front-page-btn, .tag-chip,
    .w2k-tag-chip, .archive-pages a) {
  background-color: var(--soft-btn-bg) !important;
  border: 1px solid var(--soft-btn-line) !important;
  border-radius: var(--soft-r-sm) !important;
  color: var(--soft-nav-text) !important;
  box-shadow: none !important;
}

/* 5.2 悬停：同权重写在后面，否则被 5.1 压死 */
html:not(.dark) body.w2k#top#top#top :is(.w2k-btn, .toolbar-btn, .compact-pill,
    .filter-trigger, .w2k-view-btn, .w2k-thin-raised, .front-page-btn, .tag-chip,
    .w2k-tag-chip, .archive-pages a):hover {
  background-color: var(--soft-hover) !important;
  border-color: #BCD3E4 !important;
  color: var(--soft-blue-active) !important;
}

/* 5.3 当前项（排序 / 筛选 / 分页）：浅蓝底 + 深蓝字 —— 规范 §11 的 Active。
   —— 刻意用"浅蓝"而不是"实心蓝"：§11 明确写了 背景 #DCEAF7 / color #285F94，
      实心蓝留给 §11 末尾点名的搜索按钮，两者形成主次。
   ★ 本规则必须排在 5.2 之后：`.is-active` 命中的元素往往同时 :hover，
     同权重下靠源码顺序决胜，否则"鼠标停在当前筛选上"会被刷成普通悬停色。 */
html:not(.dark) body.w2k#top#top#top :is(.compact-pill, .w2k-view-btn,
    .archive-pages a, .w2k-btn).is-active,
html:not(.dark) body.w2k#top#top#top :is(.compact-pill, .w2k-view-btn,
    .archive-pages a, .w2k-btn).is-active:hover,
html:not(.dark) body.w2k#top#top#top .archive-pages a[aria-current="page"],
html:not(.dark) body.w2k#top#top#top .archive-pages a[aria-current="page"]:hover {
  background-color: var(--soft-blue-sel) !important;
  border-color: #B9D4EA !important;
  color: var(--soft-blue-active) !important;
}

/* 5.4 搜索区：白底浅框 + 主蓝按钮 —— 规范 §11 */
html:not(.dark) body.w2k#top#top#top :is(.w2k-search, .w2k-input) {
  border-color: var(--soft-line-input) !important;
  border-radius: var(--soft-r-sm) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-input {
  background-color: #FFFFFF !important;
  color: var(--text-primary, #263746) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-input::placeholder {
  color: var(--text-faint, #8B98A3) !important;
}
/* ⚠⚠ 下面这条必须是 **4 个 id**，不是 3 个。第 59 轮实测找出的原因：
   5.1 的 `:is()` 末位参数是 `.archive-pages a` —— 它含一个**类型选择器**，
   而 `:is()` 的权重取"最具体参数"，所以 5.1 的真实权重是 **(3,3,3)**：
        html(类型) + :not(.dark)(类) + body(类型) + .w2k(类) + #top×3(3 id) + :is(...)
        → id 3 / class 3 / **类型 2 + 1 = 3**
   而 3 个 id 的 `.w2k-btn-search` 是 (3,3,**2**) ——
   **id 位打平、class 位打平，输在 c 位少 1**。这正是 FACT.md 约束 6 的 c 位陷阱，
   只不过上次是 `html`+`body` 抬高 c 位，这次是 `:is()` 里的类型选择器。
   （复现：连 `button.setAttribute('style','background-color:#FF0000!important')` 都改不动它 ——
     说明它压根没进"最后胜出"的位置，不是被 inline 压过，而是根本没赢。）
   症状：桌面工具栏与移动端面板里的搜索按钮**一直是灰底灰字**，
   对比度 12.4:1 看着"没毛病"，所以连续 12 轮配色改造都没被发现。
   修法：多带一个 `#top` → (4,3,2)，一次压过，不必再数 c 位。 */
html:not(.dark) body.w2k#top#top#top#top .w2k-btn-search,
html:not(.dark) body.w2k#top#top#top#top .w2k-btn-search:hover {
  background-color: var(--soft-blue) !important;
  border-color: var(--soft-blue) !important;
  color: #FFFFFF !important;
  border-radius: var(--soft-r-sm) !important;
}
html:not(.dark) body.w2k#top#top#top#top .w2k-btn-search:hover {
  background-color: var(--soft-blue-hover) !important;
  border-color: var(--soft-blue-hover) !important;
}
/* 暗色同一语义：实心主蓝 + 白字（白字压在 #2F6FAE 上是 4.6:1，达标） */
html.dark body.w2k#top#top#top#top .w2k-btn-search,
html.dark body.w2k#top#top#top#top .w2k-btn-search:hover {
  background-color: var(--soft-blue) !important;
  border-color: #4E8FD0 !important;
  color: #FFFFFF !important;
  border-radius: var(--soft-r-sm) !important;
}
html.dark body.w2k#top#top#top#top .w2k-btn-search:hover {
  background-color: var(--soft-blue-hover) !important;
  border-color: #6BA5E0 !important;
}

/* 5.5 工具栏整条：底色比画布亮半档，与内容区之间只留一条极浅线 */
html:not(.dark) body.w2k#top#top#top :is(.w2k-toolbar, .compact-filter,
    .unified-filter, .filter-bar, .front-filter, .filter-toolbar) {
  background-color: var(--soft-nav-bg) !important;
  border-bottom-color: var(--soft-line) !important;
}


/* ==========================================================================
   6. 左侧栏「系统目录」—— 规范 §9（本 CMS 的核心识别区）
   --------------------------------------------------------------------------
   要求：保留系统目录 / 分类 / 标签云 / 归档 / 树形结构 / 文件夹图标 / 数量统计，
        减少内部横线、减少深色边框，
        Active 用**浅蓝底**而不是深灰色块。
   ========================================================================== */

/* 6.1 目录树面板：白纸面 + 极浅边框 + 5px 圆角。
   改前 --bg-input 是 #FAF9F6 暖白，现已随令牌变纯白；
   边框色随 --border 变 #D7E0E7。
   这里只补圆角与"内衬不加投影"两条。 */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-body {
  border-radius: var(--soft-r-md) !important;
  box-shadow: none !important;
}

/* 6.2 侧栏外壳：与主内容区之间那条线减弱。
   ★ 侧栏元素同时带 .w2k-sidebar 与 .win-inset，而 .win-inset 那批规则
     在 grid-backdrop.css 里是 (3,3,2)。本层 3 个 id + 靠后 → 稳压。 */
/* ★ 侧栏外框同样拆掉：侧栏左/上/下三边与窗框、状态栏重合，属于第二层重复框。
   只留**右边一条** —— 那是"目录区 | 工作区"之间的分隔语义，全站仅此一条。
   （侧栏内的树面板 .w2k-sidebar-body 保留自己的 1px 细框 + 白底，
     它是"面板"，与这里拆掉的"外框"不是一回事。） */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar {
  border-color: transparent !important;
  border-right-color: var(--soft-line) !important;
  /* ★ 侧栏面板色必须在这里再钉一次：grid-backdrop.css 第 4 节把它和
     .w2k-main / .w2k-pane 一起刷成了 #FAF9F6（→ 本轮 #F7F9FB），
     那条是 (2,4,2)，压过了清洗层 §23.2 给侧栏单独留的 --bg-sidebar。
     结果就是"侧栏与主内容同色、目录区糊成一片"。
     本层 3 个 id 稳压，把规范 §9 的 #F1F5F8 还给它。 */
  background-color: var(--bg-sidebar, #F1F5F8) !important;
}

/* 6.3 树里那条竖向虚线导轨：默认太显眼，压淡一档。
   （这是"树形结构"的语义线，只调淡、不删除。） */
html:not(.dark) body.w2k#top#top#top .w2k-tree-kids {
  border-left-color: #DFE7ED !important;
}

/* 6.4 悬停：规范 §4 的 Hover #E7EFF6 + 深色字。
   带 :not(.is-active) —— 见文件头纪律 ①。 */
html:not(.dark) body.w2k#top#top#top .w2k-tree-node:not(.is-active):hover,
html:not(.dark) body.w2k#top#top#top .w2k-tree-summary:hover {
  background-color: var(--soft-hover) !important;
  border-radius: var(--soft-r-sm) !important;
}

/* 6.5 ★ 当前分类：浅蓝底 + 深蓝字 + 左侧一条细蓝强调线 —— 规范 §9
   「Active 分类：使用浅蓝背景，而不是深灰色块。
     background: #DCEAF7; color: #285F94; 左侧可以保留非常细的蓝色强调线。」

   强调线用 `inset box-shadow` 而不是 `border-left`：
   border 会占掉 3px 内容盒宽度，把整棵树的行首缩进改掉、整页重排；
   inset 阴影画在盒内，零布局影响（见文件头纪律 ②）。

   ★ 必须连 :hover 一起写上（选中行被悬停时仍是浅蓝，不回落成普通悬停色），
     且所有后代（标签、计数）一起改色 —— 否则计数会留在原来的深灰上。 */
html:not(.dark) body.w2k#top#top#top .w2k-tree-node.is-active,
html:not(.dark) body.w2k#top#top#top .w2k-tree-node.is-active:hover {
  background-color: var(--soft-blue-sel) !important;
  color: var(--soft-blue-active) !important;
  border-radius: var(--soft-r-sm) !important;
  box-shadow: inset 3px 0 0 0 var(--soft-blue) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-tree-node.is-active *,
html:not(.dark) body.w2k#top#top#top .w2k-tree-node.is-active:hover * {
  color: var(--soft-blue-active) !important;
}

/* 6.6 分组标题（分类 / 标签云 / 归档）：字重降到 500，不再抢戏 */
html:not(.dark) body.w2k#top#top#top .w2k-tree-summary {
  color: var(--text-secondary, #667786) !important;
  border-radius: var(--soft-r-sm) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-tree-summary:hover {
  color: var(--text-primary, #263746) !important;
}

/* 6.7 计数：规范 §9 要"数量统计"保留，但它是配角 —— 用次级色。
   ★ 这里**不能**用 --text-faint(#8B98A3)：实测它在侧栏白底上只有 2.95:1，
     远低于 AA 4.5（对比度审计脚本实测值）。--text-secondary #667786 在白底
     上是 4.62:1，既满足"配角"的层级又读得清。 */
html:not(.dark) body.w2k#top#top#top .w2k-tree-count {
  color: var(--text-secondary, #667786) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-tree-node.is-active .w2k-tree-count {
  color: var(--soft-blue-active) !important;
}

/* 6.8 站点统计分组框：Win2K 蚀刻框保留，线条改成极浅 —— 规范 §20 要求
   "信息密度 / 工业软件感"必须保留，所以不删这个 fieldset，只减重。 */
html:not(.dark) body.w2k#top#top#top :is(.win-groupbox, .w2k-sys-summary) {
  border-color: var(--soft-line) !important;
  border-radius: var(--soft-r-sm) !important;
}


/* ==========================================================================
   7. 文字列表 .w2k-dt —— 规范 §15
   --------------------------------------------------------------------------
   条目之间用极浅的 #E7EDF2，不用深灰线；Hover #F2F6F9。
   ★ 本节的容器规则要用 5 个 id：content-surfaces.css §1.1 与 §3 用 4 个 id
     把它的底色、边框、直角都钉死了（border-radius: 0 !important）。
   ========================================================================== */

/* 7.1 容器：纯白 + 6px 圆角 + 一根极浅线 + 轻阴影（规范 §8 卡片 6px） */
html:not(.dark) body.w2k#top#top#top#top#top :is(.w2k-dt, .article-list-container) {
  border-color: var(--soft-line) !important;
  border-radius: var(--soft-r-lg) !important;
  box-shadow: var(--soft-sh-card) !important;
}

/* 7.2 条目行之间的分割线 */
html:not(.dark) body.w2k#top#top#top#top#top :is(.w2k-dt, .article-list-container)
  :is(.w2k-dt-row, .article-row-item) {
  border-bottom-color: var(--soft-line-soft) !important;
}

/* 7.3 悬停：#F2F6F9（规范 §15 给列表单独指定的值，比通用 Hover 更淡）。
   ★ 必须原样保留 content-surfaces §2 的排除项 :not(.is-selected):not(:focus-within)，
     否则 5 个 id 会把 Win2K 深蓝反白选中态一起压掉。 */
html:not(.dark) body.w2k#top#top#top#top#top .w2k-dt
  :is(.w2k-dt-row, .article-row-item):hover:not(.is-selected):not(:focus-within),
html:not(.dark) body.w2k#top#top#top#top#top .w2k-dt
  :is(.w2k-dt-row, .article-row-item):hover:not(.is-selected):not(:focus-within) > .w2k-dt-link {
  background-color: #F2F6F9 !important;
}

/* 7.4 左端圆角：首行与末行不要戳出容器的 6px 圆角。
   只改圆角，不动任何盒尺寸。 */
html:not(.dark) body.w2k#top#top#top#top#top :is(.w2k-dt, .article-list-container)
  .w2k-dt-list > :is(.w2k-dt-row, .article-row-item):first-child {
  border-top-left-radius: var(--soft-r-lg) !important;
  border-top-right-radius: var(--soft-r-lg) !important;
}
html:not(.dark) body.w2k#top#top#top#top#top :is(.w2k-dt, .article-list-container)
  .w2k-dt-list > :is(.w2k-dt-row, .article-row-item):last-child {
  border-bottom-left-radius: var(--soft-r-lg) !important;
  border-bottom-right-radius: var(--soft-r-lg) !important;
}


/* ==========================================================================
   8. 图片卡片（.media-card）—— 规范 §12 / §13
   --------------------------------------------------------------------------
   「图片本身应该成为视觉主体」+「卡片边框弱化」+「卡片 6px 圆角 / 图片 5px 圆角」
   规范 §13 明令：两种比例（软件 16:9 / 影视竖版）是业务设计，不得统一裁切。
   —— 本层**完全不碰** .ratio-* 与高度计算，比例规则的唯一来源仍是 media-cards.css。
      这里只把"图片 + 文字"包成一张白卡：底色、圆角、极浅边框、轻阴影、内衬。

   ★ 圆角必须用 5 个 id：media-cards.css §8 用
     `html body.w2k#top#top .media-cards .media-card-media` = (2,3,2)
     把封面钉成 6px 圆角；卡片外边还要压过 content-surfaces §5.1 的直角。
   ========================================================================== */

/* 8.1 卡片外壳：白底 + 6px 圆角 + 轻阴影 + 6px 内衬 —— **不画边框**
   （内衬让封面四边露出一圈白，正是"卡片"而不是"光图"的观感来源）

   ★ 为什么边框写成 transparent 而不是删掉 border：
     首页每个楼层 .magazine-section 本身就是 Win2K 分组框
     （win2000.css:2039 `border: 1px solid var(--w2k-shadow)`，
       标题是压在框线上的浮动 legend）。卡片若再画一根线，
       就是用户点名的"框里面还有框，框里面还有线"。
     但删 `border-width` 会改变内容盒尺寸 → 整页重排（见文件头纪律 ②），
     所以这里保留 1px 占位、只把颜色改透明 —— 白色卡片靠
     「白 vs #F7F9FB 的色差 + 一层极轻阴影」从底上浮起来，一根线都不用。
     想要回那根线：把 transparent 换成 var(--soft-line) 即可。 */
html:not(.dark) body.w2k#top#top#top#top#top :is(.media-card, .post-card, .poster-card,
    .magazine-post-card, .magazine-poster) {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid transparent !important;
  border-radius: var(--soft-r-lg) !important;
  box-shadow: var(--soft-sh-card) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* .w2k-card 是**独立**卡片（分类 / 标签索引页的磁贴，不套在分组框里），
   没有"框套框"的问题，保留一根极浅线更利于成形。 */
html:not(.dark) body.w2k#top#top#top#top#top .w2k-card {
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid var(--soft-line) !important;
  border-radius: var(--soft-r-lg) !important;
  box-shadow: var(--soft-sh-card) !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .media-card {
  overflow: hidden !important;   /* 让封面四角随卡片圆角裁切 */
}

/* 8.2 封面：5px 圆角（规范 §8「图片：border-radius: 5px」），无边框。
   ★ 这条要压过 media-cards.css §8 的 (2,3,2)，故同样走 5 个 id。 */
html:not(.dark) body.w2k#top#top#top#top#top .media-cards .media-card-media,
html:not(.dark) body.w2k#top#top#top#top#top .media-cards .media-card-media > img {
  border-radius: var(--soft-r-md) !important;
  border: 0 !important;
}
/* 底部那条 3px 选中横条要跟着下圆角裁切 */
html:not(.dark) body.w2k#top#top#top#top#top .media-cards .media-card-media::after {
  border-radius: 0 0 var(--soft-r-md) var(--soft-r-md) !important;
}

/* 8.3 文字区：间距与对齐 —— 规范 §12
   「标题 ↓ 日期」两级，标题 600、日期 400 且字号更小。
   改前是"居中 + 日期只显示年份"，这里只改对齐与内衬，不动 DOM、不动数据。 */
html:not(.dark) body.w2k#top#top#top#top#top .media-cards .media-card-copy {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 9px 4px 4px !important;
  gap: 3px !important;
}

/* 8.4 标题：主文字色 + 600（原 600，保持）；日期：辅助色 + 400。
   ★ 本条只用 1 个 id：media-cards.css 的悬停变蓝规则是 (0,2,0)，
     本层 id 太多会把它压掉，标题就永远不变蓝了。 */
html:not(.dark) body.w2k .media-cards .media-card-title {
  color: var(--text-primary, #263746) !important;
}
/* ★ 日期用 --text-secondary 而不是规范给的 #8B98A3：
   规范 §12 要"日期与标题不同视觉重量"，但 #8B98A3 在纯白上只有 2.95:1，
   12px 小字读不清。--text-secondary #667786 是 4.62:1，
   与标题 #263746（13.5:1）之间仍有明确的层级差 —— 层级靠"色阶 + 字号 +
   字重 400 vs 600"三重区分，不必靠牺牲可读性来拉开。 */
/* ★ 第 58 轮：改 #5F7180。
   方案 C 把卡片底色从纯白改成了 #F7F9FB，`#667786` 在这个底上实测只有
   **4.38:1**（在纯白上是 4.62:1）—— 属于"改卡片底色"新引入的对比度回退。
   #5F7180 是专门配"浅铬面"的那一档：在 #F7F9FB 上 4.68:1、在纯白上 4.69:1，
   两种底都达标（分类页的卡片仍是纯白底，同一条规则照样成立）。 */
html:not(.dark) body.w2k .media-cards .media-card-date {
  color: #5F7180 !important;
}
html:not(.dark) body.w2k .media-cards .media-card:hover .media-card-title,
html:not(.dark) body.w2k .media-cards .media-card.active .media-card-title {
  color: var(--soft-blue) !important;
}

/* 8.5 缺图占位：跟着冷色走 */
html:not(.dark) body.w2k#top#top#top .media-card-placeholder {
  background-color: #E4EBF1 !important;
  color: var(--text-faint, #8B98A3) !important;
}

/* 8.6 置顶角标：规范 §5「蓝色不刺眼」→ 用主色，圆角 4px */
html:not(.dark) body.w2k#top#top#top .media-card-badge.is-episode {
  background-color: var(--soft-blue) !important;
  border-radius: var(--soft-r-sm) !important;
}


/* ==========================================================================
   9. 详情页正文 —— 规范 §16
   --------------------------------------------------------------------------
   「标题深蓝灰 / Metadata 浅灰蓝 / 正文 #344554 / 引用非常浅蓝灰背景 /
     提示浅黄或浅蓝 / 表格减少黑色边框」
   结构一行不动，只调颜色、圆角与线条。
   ========================================================================== */

/* 9.1 正文区：**不再是卡片**，而是铺满右侧工作区的一整块白底文档区。
   --------------------------------------------------------------------------
   ★ 第 49 轮改版。第 48 轮把这里做成"内嵌的文档卡片"（白底 + 1px 线 +
     4px 圆角 + 阴影 + 24×28 内边距），代价是正文左右各被吃掉
     20px（台面内边距）+ 28px（卡片内边距）= 实际比改前窄了 96px。
   现在按"最纯正的 Win2000 桌面软件"形态收回来：
       · 取消边框 / 阴影 / 圆角 —— 不再"浮"在工作台上
       · 取消所有内缩：width:100% + max-width:100% + margin:0
       · 只留 16px 24px 的**纯文字安全内边距**，文字不贴左边框
   白底因此一路铺满整个右侧工作区（底盘本身也已是 #FFFFFF，见 §15.1），
   两层同色同宽 —— 视觉上就是"一体化白底文档区"。
   ★ 5 个 id：content-surfaces §1.4 / §3 用 4 个 id 把它钉成纯白直角。 */
html:not(.dark) body.w2k#top#top#top#top#top
  :is(.prose-paper, .reading-content, #article-content) {
  background-color: #FFFFFF !important;
  border: none !important;          /* 取消卡片边框 */
  box-shadow: none !important;      /* 取消浮空感 */
  border-radius: 0 !important;      /* 取消圆角，回归直角文档区 */
  margin: 0 !important;             /* 取消一切多余外边距 */
  width: 100% !important;           /* 宽度完全舒展 */
  max-width: 100% !important;       /* 取消定宽上限 */
  padding: 16px 24px !important;    /* 仅保留文字安全内边距 */
  box-sizing: border-box !important;
}

/* 9.1b ★ 详情页左栏：拆掉 .w2k-pane > .w2k-pane-body 的"框套框"
   --------------------------------------------------------------------------
   实测 detail 页左栏三个面板（文章信息 / 文章大纲 / 最新文章）的结构是
     aside.w2k-pane.win-inset          ← 1px 外框
       └ div.w2k-pane-body             ← 里面再一条 1px 内框（len=238，三条）
   而两者的底色**完全相同**（都被刷成同一个 --bg-content / #F7F9FB），
   所以内框是被完全包住的一条纯装饰线，只贡献噪音。
   处理：把 pane-body 的内框改透明，面板轮廓交给 .w2k-pane 一层承担。 */
html:not(.dark) body.w2k#top#top#top .w2k-pane-body {
  border-color: transparent !important;
}

/* 9.1c ★ 正文里的图片不再加相框
   --------------------------------------------------------------------------
   `a.paper-photo-link.win-inset` 带着 .win-inset，于是每张正文配图外面
   多一圈 1px 灰框 —— 与规范 §12「图片本身应该成为视觉主体」直接相抵。
   去掉框，只留 5px 圆角。 */
html:not(.dark) body.w2k#top#top#top :is(a.paper-photo-link, .paper-photo-link) {
  border-color: transparent !important;
}
html:not(.dark) body.w2k#top#top#top#top#top
  :is(.prose-paper, .reading-content, #article-content) :is(img, video) {
  border-radius: var(--soft-r-md) !important;
}

/* 9.2 正文文字色：规范 §16 给的 #344554（比标题浅、比次要文字深一档） */
html:not(.dark) body.w2k#top#top#top :is(.prose-paper, .reading-content, #article-content) {
  color: #344554 !important;
}
/* 标题：深蓝灰。★ 必须显式写，否则被上一条的正文色一起吞掉 */
html:not(.dark) body.w2k#top#top#top
  :is(.prose-paper, .reading-content, #article-content) :is(h1, h2, h3, h4, h5, h6) {
  color: #1E2E3C !important;
}
/* 次要信息（日期 / 分类 / 浏览量那一行）：浅灰蓝 */
html:not(.dark) body.w2k#top#top#top
  :is(.prose-paper, .reading-content, #article-content) :is(.w2k-dt-meta, .post-meta,
    .article-meta, time) {
  color: var(--text-secondary, #667786) !important;
}

/* 9.3 引用块：非常浅的蓝灰背景，去掉原来的粗黑左线 */
html:not(.dark) body.w2k#top#top#top
  :is(.prose-paper, .reading-content, #article-content) blockquote {
  background-color: #F1F5F8 !important;
  border-left: 3px solid var(--soft-line) !important;
  border-radius: 0 var(--soft-r-sm) var(--soft-r-sm) 0 !important;
  color: #3C4E5E !important;
}

/* 9.4 提示框：浅蓝（info）/ 浅黄（warning）—— 规范 §16 */
html:not(.dark) body.w2k#top#top#top .paper-callout {
  border-radius: var(--soft-r-sm) !important;
}
html:not(.dark) body.w2k#top#top#top :is(.paper-callout.callout-info, .paper-callout.callout-note) {
  background-color: #EDF5FB !important;
  border-color: #CFE2F2 !important;
}
html:not(.dark) body.w2k#top#top#top :is(.paper-callout.callout-warning, .paper-callout.callout-tip) {
  background-color: #FDF7E7 !important;
  border-color: #F0E2BE !important;
}

/* 9.5 正文表格：去掉黑色边框，只留极浅的行线与表头底 —— 规范 §16 */
html:not(.dark) body.w2k#top#top#top
  :is(.prose-paper, .reading-content, #article-content) :is(th, td) {
  border-color: var(--soft-line-soft) !important;
}
html:not(.dark) body.w2k#top#top#top
  :is(.prose-paper, .reading-content, #article-content) th {
  background-color: #E9EFF5 !important;
  color: var(--text-primary, #263746) !important;
}
html:not(.dark) body.w2k#top#top#top :is(.table-scroll, .table-container-inset) {
  border-color: var(--soft-line) !important;
  border-radius: var(--soft-r-sm) !important;
}


/* ==========================================================================
   10. 代码块 —— 规范 §16 / §17
   --------------------------------------------------------------------------
   规范明确：「代码块是这个 CMS 的特色元素之一，不要弱化成普通文本框。
              保留蓝色 CODE Header，但蓝色不要过于鲜艳。」
   结构（static/js/detail.js 动态生成）：
     .code-block-wrapper > .code-header > (.code-language + .code-tools > .copy-code)
                         > pre.code-body > code > span.code-line
   Header #286BA8 / Body #F4F6F8 / 代码字 #263746（规范 §17 原值）。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .code-block-wrapper {
  border: 1px solid var(--soft-line) !important;
  border-radius: var(--soft-r-md) !important;
  box-shadow: var(--soft-sh-card) !important;
  overflow: hidden !important;      /* 让蓝色 Header 贴合上方圆角 */
  background-color: #F4F6F8 !important;
}
/* ★ 蓝色 CODE Header —— CMS 唯一被允许"稍微工业化"的地方 */
html:not(.dark) body.w2k#top#top#top .code-block-wrapper .code-header {
  background-color: #286BA8 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid #205B90 !important;
}
html:not(.dark) body.w2k#top#top#top .code-block-wrapper :is(.code-language, .code-header *) {
  color: #FFFFFF !important;
}
/* Header 里的复制键：蓝底上的半透明白，与标题栏小按钮同一套语言 */
html:not(.dark) body.w2k#top#top#top .code-block-wrapper .copy-code {
  background-color: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  border-radius: var(--soft-r-sm) !important;
  color: #FFFFFF !important;
}
html:not(.dark) body.w2k#top#top#top .code-block-wrapper .copy-code:hover {
  background-color: rgba(255, 255, 255, .30) !important;
}
/* 代码正文：浅灰底 + 等宽字 + 深蓝灰字 */
html:not(.dark) body.w2k#top#top#top .code-block-wrapper pre.code-body {
  background-color: #F4F6F8 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #263746 !important;
  font-family: var(--w2k-mono, "JetBrains Mono", Consolas, monospace) !important;
}
/* 正文里裸的 inline code（非 wrapper 内的）也不要用刺眼的黑框 */
html:not(.dark) body.w2k#top#top#top
  :is(.prose-paper, .reading-content, #article-content) :not(pre) > code {
  background-color: #F1F5F8 !important;
  border: 1px solid var(--soft-line-soft) !important;
  border-radius: var(--soft-r-sm) !important;
  color: #2B5C8A !important;
}
/* .code-window / .system-report-block 是另一套终端块，统一到同一材质 */
html:not(.dark) body.w2k#top#top#top :is(.code-window, .system-report-block) {
  border-color: var(--soft-line) !important;
  border-radius: var(--soft-r-md) !important;
}


/* ==========================================================================
   11. 状态栏 / 分页 / 标签 / 归档
   --------------------------------------------------------------------------
   规范 §20 要求保留 Status Bar 与信息密度，只做减重。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-statusbar {
  background-color: var(--soft-nav-bg) !important;
  border-color: var(--soft-line) !important;
  color: var(--text-secondary, #667786) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-status-field {
  color: var(--text-secondary, #667786) !important;
}

/* 分类 / 标签磁贴：去重边框 + 圆角，靠底色分层 */
html:not(.dark) body.w2k#top#top#top :is(.taxonomy-tile, .taxonomy-card) {
  background-color: #FFFFFF !important;
  border: 1px solid var(--soft-line) !important;
  border-radius: var(--soft-r-md) !important;
  box-shadow: var(--soft-sh-card) !important;
}

/* 归档时间轴：年份条与条目去重，只留极浅行线 */
html:not(.dark) body.w2k#top#top#top .archive-timeline-item {
  border-radius: var(--soft-r-sm) !important;
}
html:not(.dark) body.w2k#top#top#top .archive-year-title {
  color: var(--soft-blue-active) !important;
  border-radius: var(--soft-r-sm) !important;
}

/* 分页：圆角到 4px，当前页走浅蓝（已在 5.3 处理，这里只补圆角与边框） */
html:not(.dark) body.w2k#top#top#top .archive-pages a,
html:not(.dark) body.w2k#top#top#top .pager a {
  border-radius: var(--soft-r-sm) !important;
}

/* 面包屑：去掉那条贯穿全宽的底线 */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb {
  background-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* 底部「回到顶部」按钮 */
html:not(.dark) body.w2k#top#top#top .w2k-totop {
  background-color: #FFFFFF !important;
  border: 1px solid var(--soft-line) !important;
  border-radius: var(--soft-r-sm) !important;
  box-shadow: var(--soft-sh-card) !important;
  color: var(--soft-blue) !important;
}


/* ==========================================================================
   12. 暗色主题
   --------------------------------------------------------------------------
   本轮的色彩规范**只给了浅色**，所以暗色整体沿用第 38 轮那条
   「凹槽 → 应用底 → 侧栏 → 卡片 → 抬升」的表面阶梯，一个底色都不改。
   只补三件与主题无关、明暗都成立的事：
     ① 圆角与轻阴影（结构，不是配色）；
     ② 蓝色标题栏 —— 规范 §20 把"蓝色标题栏"列为必须保留的识别元素，
        而暗色下它此前也是中性灰，这里一并还原成深蓝，与浅色同一语言。
   ========================================================================== */
html.dark body.w2k#top .w2k-window {
  border-radius: var(--soft-r-lg) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .40) !important;
}
html.dark body.w2k#top .w2k-titlebar {
  border-radius: var(--soft-r-md) var(--soft-r-md) 0 0 !important;
  background-color: #23507D !important;
  background-image: linear-gradient(180deg, #2C6193 0%, #23507D 100%) !important;
  color: #FFFFFF !important;
  border-color: #1B3F63 !important;
}
html.dark body.w2k#top .w2k-titlebar :is(.w2k-titlebar-text, .w2k-titlebar-sep) {
  color: #FFFFFF !important;
}
html.dark body.w2k#top#top .w2k-titlebar .w2k-tbtn {
  background-color: rgba(255, 255, 255, .16) !important;
  border-color: rgba(255, 255, 255, .34) !important;
  border-radius: var(--soft-r-sm) !important;
  color: #FFFFFF !important;
}
html.dark body.w2k#top .w2k-statusbar {
  border-radius: 0 0 var(--soft-r-md) var(--soft-r-md) !important;
}

/* 暗色下的圆角与卡片投影（同浅色，只换投影色） */
html.dark body.w2k#top#top#top#top#top :is(.w2k-dt, .article-list-container,
    .prose-paper, .reading-content, #article-content, .media-card, .w2k-card) {
  border-radius: var(--soft-r-lg) !important;
}
html.dark body.w2k#top#top#top#top#top :is(.media-card, .w2k-card) {
  background-color: var(--bg-surface-card, #2D2D2D) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
/* 暗色下卡片与分组框同为深底，靠一层更暗的投影分开，不画线 */
html.dark body.w2k#top#top#top#top#top :is(.media-card, .post-card, .poster-card) {
  border: 1px solid transparent !important;
  border-radius: var(--soft-r-lg) !important;
}
/* ★ 卡片文字区必须与浅色**逐项对齐**：第 8.3 节写的是 html:not(.dark)，
   暗色若不补这一条，同一张卡片在明暗两态下会左对齐 / 居中对齐各来一套
   （实测截图确认），属于"只改了一半"的典型。内衬与间距一并补齐。 */
html.dark body.w2k#top#top#top#top#top .media-cards .media-card-copy {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 9px 4px 4px !important;
  gap: 3px !important;
}
html.dark body.w2k#top#top#top .media-card-placeholder {
  background-color: #141414 !important;
}
html.dark body.w2k#top#top#top#top#top .media-cards .media-card-media,
html.dark body.w2k#top#top#top#top#top .media-cards .media-card-media > img {
  border-radius: var(--soft-r-md) !important;
}
html.dark body.w2k#top#top#top .w2k-tree-node.is-active,
html.dark body.w2k#top#top#top .w2k-tree-node.is-active:hover {
  border-radius: var(--soft-r-sm) !important;
}
html.dark body.w2k#top#top#top .code-block-wrapper {
  border-radius: var(--soft-r-md) !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   12.1 暗色的**结构对齐**（圆角 / 拆嵌套框），不含任何配色
   --------------------------------------------------------------------------
   本轮规范只给了浅色色板，所以暗色的颜色一律沿用第 38 轮的表面阶梯，
   一个色值都不改；但"圆角 4/5/6px"与"拆掉窗框内那两层重复框"属于**结构**，
   明暗必须一致 —— 否则同一站点切主题会得到两套骨架。
   ========================================================================== */
html.dark body.w2k#top#top#top :is(.w2k-btn, .toolbar-btn, .compact-pill, .filter-trigger,
    .w2k-view-btn, .front-page-btn, .tag-chip, .w2k-tag-chip, .archive-pages a, .pager a),
html.dark body.w2k#top#top#top .w2k-menu a {
  border-radius: var(--soft-r-sm) !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-body {
  border-radius: var(--soft-r-md) !important;
}
/* 与浅色 2.5 / 6.2 同款：拆掉窗框内重复的整圈框，侧栏只留右边一条分隔线 */
html.dark body.w2k#top#top#top .w2k-main,
html.dark body.w2k#top#top#top .w2k-pane-body {
  border-color: transparent !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar {
  border-color: transparent !important;
  border-right-color: var(--border-subtle, #3A3A3A) !important;
}
html.dark body.w2k#top#top#top :is(a.paper-photo-link, .paper-photo-link) {
  border-color: transparent !important;
}
html.dark body.w2k#top#top#top#top#top
  :is(.prose-paper, .reading-content, #article-content) :is(img, video) {
  border-radius: var(--soft-r-md) !important;
}

/* --------------------------------------------------------------------------
   12.2 暗色下的「工作台 / 文档卡片」关系
   --------------------------------------------------------------------------
   第 48 轮新增的"内嵌文档页"要成立，前提是**工作台比卡片暗**（浅色下是
   #F4F7F9 台面 + #FFFFFF 纸面）。暗色改前是反的：
     .w2k-pane-doc  #1E1E1E  ← 台面更亮
     .prose-paper   #181818  ← 纸面更暗
   于是加完内边距后会变成"浅台面上嵌一张更黑的卡"，与浅色的层次关系相反。
   这里用暗色既有阶梯里现成的两档把它拨正（不新增任何色值）：
     台面 = 凹槽层 #141414      纸面 = 介于应用底 #1A1A1A 与卡片 #2D2D2D 之间的 #222222
   #222 仍然足够暗，长文阅读舒适度不受影响；同时纸面比台面亮一档，
   "铺在台面上的一张纸"这个隐喻在暗色下同样读得出来。 */
html.dark body.w2k#top#top#top#top#top .w2k-pane-doc {
  background-color: #1E1E1E !important;
  border-color: #3A3A3A !important;
  padding: 0 !important;
  overflow-y: auto !important;
  border-radius: 0 !important;
}
html.dark body.w2k#top#top#top#top#top
  :is(.prose-paper, .reading-content, #article-content) {
  background-color: #1E1E1E !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 16px 24px !important;
  box-sizing: border-box !important;
}
/* 暗色的提示框 / 折叠面板：同样只做结构对齐（圆角、内边距、层次），
   色值全部沿用暗色既有阶梯，不套用浅色规范里那组浅色调。 */
html.dark body.w2k#top#top#top .paper-callout:not(.is-collapsible) {
  border-radius: 3px !important;
  margin: 12px 0 !important;
}
html.dark body.w2k#top#top#top details.paper-callout.is-collapsible {
  border-radius: 3px !important;
  overflow: hidden !important;
}
html.dark body.w2k#top#top#top details.paper-callout.is-collapsible > summary {
  background-color: #2D2D2D !important;
  border-radius: 2px 2px 0 0 !important;
}
html.dark body.w2k#top#top#top details.paper-callout.is-collapsible > .callout-body {
  background-color: #1A1A1A !important;
}
/* （面包屑的暗色样式已整体搬到 §15.4.6，与浅色放在一起，此处不再重复声明） */

/* 12.3 暗色详情页：对比度脚本扫出的三处**既有**未达标（不是本轮引入，
   但都在本轮的详情页范围内，且都低于 3:1，顺手修掉）
       下载卡的"提取码 / 解压码"  #817668 on #363636 = 2.72:1  ← 暖褐残留
       面包屑分隔符 ›            #6E6E6E on #2D2D2D = 2.70:1
       大纲收起按钮的 ⌃          #858D9D on #333333 = 3.79:1
   统一提到暗色既有的次级文字色 #A0A0A0（在 #363636 上是 4.69:1）。
   —— 浅色侧对应的修复在 §14.6，那里用的是冷灰蓝 #5F7180；
      暗色直接用中性灰，与第 38 轮"暗色走中性灰阶"的约定一致。 */
html.dark body.w2k#top#top#top :is(.download-code, .download-code-label,
    .download-code *, .download-code-wrap *) {
  color: #A0A0A0 !important;
}
html.dark body.w2k#top#top#top :is(.w2k-crumb-sep, .toc-chevron, .w2k-toc-toggle *) {
  color: #A0A0A0 !important;
}

/* 12.4 暗色下另外两处既有未达标（同样是补第 47 轮"暗色只做结构"留下的缺口）：
     卡片年份   #888888 on #2D2D2D = 3.89:1   ← media-cards.css 的暗色令牌给的值
     列表行 ›   #6E6E6E on #2D2D2D = 2.70:1   ← 暗色 --text-tertiary
   第 47 轮给浅色侧的卡片日期补了对比度（§8.4），暗色侧当时漏了；
   这里一并补齐，用暗色既有的次级灰 #A0A0A0（在 #2D2D2D 上 5.25:1）。 */
html.dark body.w2k .media-cards .media-card-date,
html.dark body.w2k .media-cards .media-card-summary {
  color: #A0A0A0 !important;
}
html.dark body.w2k#top .w2k-dt-go {
  color: #A0A0A0 !important;
}


/* ==========================================================================
   14. 收尾：扫出来的"漏网色"
   --------------------------------------------------------------------------
   下面每一条都是**实测扫出来的**（findstyle 按计算样式反查元素），
   不是照规格猜的。判据分三类：
     · 纯黑文字        —— 规范 §4 明令禁止把纯黑用作大面积 UI 文字
     · 7 个 id 的窗框线 —— 本层之外权重最高的一条线，暖灰 #9e9a92
     · Tailwind 默认边框 —— preflight 带来的 rgba(228,228,231,.9) 冷灰
   ========================================================================== */

/* 14.1 ★ 主视窗外框：clean 层第 5 节用 **7 个 .w2k 重复类** 把窗口框钉成
   `border: 1px solid #9e9a92 !important`（(2,7,2)），是全站唯一一条"中灰"线。
   §4 要求边框低对比，这里降到一档"比内部线稍强、但远不到中灰"的值 ——
   窗口仍然读得出轮廓（它还要配 6px 圆角与轻投影），但不再是最重的一笔。
   ★ 必须 3 个 id + 源码在后：对手 a 位是 2（#top + :is() 里的 #app-window）。 */
html:not(.dark) body.w2k#top#top#top .w2k-window {
  border-color: #C3D2DE !important;
}
html.dark body.w2k#top#top#top .w2k-window {
  border-color: #3F3F3F !important;
}

/* 14.2 纯黑文字（实测 6 处站点统计数值 + 4 处"全部 → / 全部分类 →"）。
   统计数值归到主文字色；跳转链接归到主色蓝。 */
html:not(.dark) body.w2k#top#top#top :is(.w2k-sys-val, .w2k-sys-key) {
  color: var(--text-primary, #263746) !important;
}
/* ★ 用 --soft-blue-active(#285F94) 而不是主色 #2F6FAE：这两个链接落在
   #E4EBF1 的楼层图标底色上，主色在它上面只有 4.36:1，差一点点够不着 AA；
   #285F94 是 5.54:1。 */
html:not(.dark) body.w2k#top#top#top :is(.magazine-more, .w2k-tree-more),
html:not(.dark) body.w2k#top#top#top :is(.magazine-more, .w2k-tree-more) * {
  color: var(--soft-blue-active, #285F94) !important;
}
/* 列表行尾那个 › 箭头：clean §23.3 给的是 --text-faint(#8B98A3)，
   在行白底上只有 2.95:1，几乎是隐形的。收到次级色 4.62:1 —— 它仍是全行
   最弱的一个元素（无字重、单字符），但白底上看得见了。 */
html:not(.dark) body.w2k#top .w2k-dt-go {
  color: var(--text-secondary, #667786) !important;
}

/* 14.3 楼层标题左边的黄色文件夹图标：外框是 Tailwind preflight 的默认色
   rgba(228,228,231,.9)，与全站冷蓝灰线不搭。并入同一个线色。 */
html:not(.dark) body.w2k#top#top#top .magazine-section-icon {
  border-color: var(--soft-line) !important;
  background-color: #FFFFFF !important;
}

/* 14.4 面包屑那一条：与工具栏同层，不再单独上色 */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb {
  color: var(--text-secondary, #667786) !important;
}

/* 14.5 ★ 落在"浅色铬面"上的小字统一收深一档
   --------------------------------------------------------------------------
   对比度审计（contrast.mjs 实测计算样式 + 逐级回溯有效底色）扫出这一批：
     .w2k-status-field        #667786 on #F4F7F9 → 4.29:1  ✗ (< AA 4.5)
     .w2k-count-field "篇文章" 同上                → 4.29:1  ✗
     .w2k-crumb-current       #7E8C99 on #F7F9FB → 3.26:1  ✗
     small（作者副题 / 下载元信息）#7E8C99         → 3.26–3.44:1 ✗
     table.win-propsheet th   #7E8C99 on #F1F5F8 → 3.14:1  ✗
   共同点：底都不是纯白，而是 #F4F7F9 / #F7F9FB / #F1F5F8 这三层浅铬面，
   --text-secondary 在那个底上差一点点够不着 4.5。
   收深到 #5F7180（同色相，L 从 0.177 → 0.158），在这三层底上分别是
   4.69 / 4.68 / 4.60:1，全部过 AA，观感仍是"很浅的灰蓝小字"。 */
html:not(.dark) body.w2k#top#top#top :is(.w2k-status-field, .w2k-count-field,
    .w2k-statusbar, .w2k-breadcrumb, .w2k-crumb-current, .w2k-crumb-sep) {
  color: #5F7180 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-statusbar * {
  color: #5F7180 !important;
}
/* 属性表表头的字色由 14.8 统一给到 #55677A（它落在更浅的表头底上） */
html:not(.dark) body.w2k#top#top#top :is(table.win-propsheet, .w2k-propsheet) th {
  color: #55677A !important;
}
html:not(.dark) body.w2k#top#top#top :is(.w2k-author, .w2k-author-meta,
    .paper-download-card, .download-meta) small {
  color: #5F7180 !important;
}

/* 14.6 下载卡的"提取码 / 解压码"标签实测是暖褐 #817668 —— 全站唯一的暖色残留，
   与冷蓝灰体系冲突，并入同一支小字色。 */
html:not(.dark) body.w2k#top#top#top :is(.download-code, .download-code-label,
    .download-code *, .download-code-wrap *) {
  color: #5F7180 !important;
}

/* 14.8 ★ clean 层里剩下的四处**字面量**暖灰（不走令牌，所以改令牌那几步够不到）
   --------------------------------------------------------------------------
   实测 backgroundColor 反查（findstyle）只为下面这几个元素报出暖色：
     button.w2k-toc-toggle  #dcd8cf   —— 详情页大纲的收起按钮
     a.w2k-metabadge        #dcd8cf   —— 正文元信息徽章
     section.paper-hide-lock #dcd8cf  —— 隐藏内容的解锁面板
     th                     #d4d0c8   —— 详情页属性表表头（clean 层 §3 的字面量）
   前三个并入"抬升面"色，表头并入"卡片信息区"色，全部走既有令牌，不新增色阶。
   —— 表头文字同时从 #5F7180 收到 #55677A：表头底 #E9EFF5 比正文底浅一档，
     #5F7180 在它上面只有 4.36:1，差一点点够不着 AA。 */
html:not(.dark) body.w2k#top#top#top :is(.w2k-toc-toggle, .w2k-metabadge, .paper-hide-lock) {
  background-color: var(--bg-input, #FFFFFF) !important;
  border-color: var(--soft-line) !important;
}
html:not(.dark) body.w2k#top#top#top th,
html:not(.dark) body.w2k#top#top#top .w2k-dt th {
  background-color: var(--bg-card-header, #E9EFF5) !important;
}
html:not(.dark) body.w2k#top#top#top :is(table.win-propsheet, .w2k-propsheet) th,
html:not(.dark) body.w2k#top#top#top :is(.w2k-toc-toggle, .w2k-toc-toggle *) {
  color: #55677A !important;
}

/* 14.9 隐藏内容解锁面板里的那个 <button> 是**无类名**的
   （.paper-hide-lock > .hide-lock-form > button），所以 14.8 只改到了外层
   section、漏掉了按钮本体 —— 它仍是暖灰 #dcd8cf。用后代选择器补上，
   并顺手并进 §5 那套按钮配色（浅底 + 浅框 + 深蓝字）。 */
html:not(.dark) body.w2k#top#top#top .paper-hide-lock button {
  background-color: var(--soft-btn-bg, #F4F6F8) !important;
  border-color: var(--soft-btn-line, #D8E0E6) !important;
  color: var(--soft-blue-active, #285F94) !important;
  border-radius: var(--soft-r-sm) !important;
}

/* 14.10 归档时间轴：条目里的日期与计数是 --text-muted(#7E8C99) / --text-faint，
   在纯白上分别只有 3.44:1 与 2.80:1 —— 归档页满屏都是这两类小字，
   实测一次扫出 15 处未达标。统一收到次级色 4.62:1。 */
html:not(.dark) body.w2k#top#top#top .archive-timeline-item :is(time, em, small),
html:not(.dark) body.w2k#top#top#top .archive-year-list :is(.archive-count, em) {
  color: var(--text-secondary, #667786) !important;
}

/* 14.11 ★ 标签索引右上角的计数气泡：数字是**看不见的**
   --------------------------------------------------------------------------
   实测 tags.html 截图：每个标签胶囊右上角是一个纯深色圆点，里面的数字读不出来。
   根因是 clean 层内部两条规则打架（都是 !important）：
     §10.4 `body.w2k#top .taxonomy-grid.is-tags .taxonomy-tile .taxonomy-count`
            { background:#4a5568; color:#ffffff }            = (1,4,1)
     §23.3 `html:not(.dark) body.w2k#top#top :is(…, .taxonomy-count)`
            { color: var(--text-secondary) }                = (2,3,2)
   §23.3 有 2 个 id、§10.4 只有 1 个 —— 按 id 数 §23.3 赢，
   于是**背景仍是深灰 #4a5568，字色却被改成了 #667786**，对比度 1.63:1，
   数字等于消失。这是第 36 轮引进配色层时就埋下的冲突，不是本轮引入，
   但它是页面上肉眼可见的缺陷，一并修掉。
   处理：不再用深底白字，改成与全站一致的"浅蓝底 + 深蓝字"气泡
   （#285F94 on #E7F0F8 = 5.77:1）。 */
html:not(.dark) body.w2k#top#top#top .taxonomy-grid.is-tags .taxonomy-tile .taxonomy-count {
  background-color: var(--soft-blue-tint, #E7F0F8) !important;
  color: var(--soft-blue-active, #285F94) !important;
}

/* 14.12 归档页「年份索引 / 归档统计」面板里的条目计数是 --text-faint(#8B98A3)，
   在 #F7F9FB 底上只有 2.80:1。收到次级色。 */
/* （面板底是 #F7F9FB 而不是纯白，--text-secondary 在它上面是 4.38:1，
   差 0.12 够不着 4.5，所以这里用 14.5 那个"浅铬面专用"的 #5F7180 → 4.68:1） */
html:not(.dark) body.w2k#top#top#top :is(.w2k-metalist, .w2k-year-index)
  .w2k-metalist-item em {
  color: #5F7180 !important;
}

/* 14.14 静态页（/about.html 等，走 .public-head 页眉）的引导词与引言：
   --text-muted(#7E8C99) 直接落在 .w2k-main 的 #F7F9FB 上，只有 3.26:1。
   这两行不在正文白卡里（没有白底托着），所以必须单独收深 ——
   #667786 在这个底上也只有 4.28:1，够不着 4.5，因此用 #5F7180（4.68:1）。 */
html:not(.dark) body.w2k#top#top#top .public-head :is(p, .front-eyebrow) {
  color: #5F7180 !important;
}

/* 14.13 分类索引页每张磁贴上的 "N 篇内容 →"：--text-muted(#7E8C99) 在纯白磁贴上
   只有 3.44:1。收到次级色 4.62:1 —— 它仍是磁贴里最弱的一行（10px、无字重）。 */
html:not(.dark) body.w2k#top#top#top .taxonomy-tile small {
  color: var(--text-secondary, #667786) !important;
}

/* 14.7 目录树当前项的"实底反白"底色 #7C7B78 白字只有 4.23:1（低于 AA 4.5）。
   这是**第 36 轮就存在的遗留问题**（不是本轮引入），但它正好落在本轮
   "选中状态"的改动范围内，且只需把同一个灰降一档即可修好：
   #757470 → 4.68:1，色相与明度观感几乎不变。
   —— --select-bg 被 win2000.css 20+ 处引用，所以改在令牌源头（清洗层 §23.1），
      不在本层覆盖，避免只改到一半。 */
/* ★ 第 54 轮：这里的 #757470 是**我自己在第 49 轮硬编码**的，第 53 轮只改了
   `--select-bg` 令牌、漏掉了这处字面量 —— 所以详情页大纲的当前项一直是暖灰。
   （warm.mjs 那一轮没扫到它，是因为大纲高亮由滚动监听驱动，
     截图时若还没滚动，`.is-active` 尚未挂上 —— 扫描器对 JS 驱动的状态有盲区。）
   现在与令牌同值：#285F94 深蓝（白字 7.4:1）。 */
html:not(.dark) body.w2k#top#top#top .w2k-toc .toc-link.is-active,
html:not(.dark) body.w2k#top .w2k-toc .w2k-toc-link.is-active {
  background-color: var(--soft-blue-active, #285F94) !important;
  color: #FFFFFF !important;
}


/* ==========================================================================
   14.15 ★ 第 53 轮：归档页的暖色残留 + 归档行悬停底色
   --------------------------------------------------------------------------
   这一批不是猜的：用 `D:\cms\_dev\warm.mjs` 把 **11 条路由**全扫了一遍，
   判据是「R − B > 8」—— 本项目第 47 轮起是冷蓝灰体系，
   正常灰阶应当 **B ≥ R**，凡是红分量明显高出蓝分量的都是旧暖灰的漏网。

   扫描结果（去掉警告框那三个**故意**的暖黄，见下方说明）只剩三处：
     section.archive-year        边框 #DDD9D0（暖）  ← clean §10.6 L802
     a.archive-timeline-item     行线 #E4E0D7（暖）  ← clean §10.6 L796
     th                          下/左边框 #A8A49C（暖）← flat-industrial L225/442/445/490
   归档页整页偏米/偏黄，就是这三条暖线在作祟 —— 它们一个在框上、一个在每一行上、
   一个在表头上，覆盖面很大。

   ★ 刻意**保留**的暖色（扫描会报，但属于需求）：
     .paper-callout.callout-warning 的 底 #FFFDF5 / 线 #F1E5C8 / 字 #6E5A28
     —— 这是第 48 轮需求稿指定的"浅柔黄色警告框"，不是漏网。
   ★ `#0a246a`（归档分类胶囊悬停）也不算：它是深蓝，B 远大于 R，本来就属冷色。
   ========================================================================== */

/* ---------- 14.15.1 归档年份框：暖米线 → 主题边框色 ---------- */
html:not(.dark) body.w2k#top#top#top .archive-year {
  border-color: var(--soft-line, #D7E0E7) !important;
}

/* ---------- 14.15.2 归档行分割线：暖米线 → 主题分割线 ---------- */
html:not(.dark) body.w2k#top#top#top .archive-timeline-item {
  border-bottom-color: var(--soft-line-soft, #E7EDF2) !important;
}

/* ---------- 14.15.3 表格表头/单元格的暖灰线 → 主题边框色 ---------- */
/* #A8A49C 是全站表格线里最深的一条暖灰，出现在表头下沿与部分单元格左边。
   一并并入 --soft-line，与其他所有线同色。 */
html:not(.dark) body.w2k#top#top#top :is(th, table th, thead th, table.win-propsheet th) {
  border-bottom-color: var(--soft-line, #D7E0E7) !important;
  border-left-color: var(--soft-line, #D7E0E7) !important;
}
html:not(.dark) body.w2k#top#top#top :is(.prose-paper, .reading-content, #article-content)
  :is(td, th) {
  border-bottom-color: var(--soft-line, #D7E0E7) !important;
  border-left-color: var(--soft-line, #D7E0E7) !important;
}

/* ---------- 14.15.4 ★ 归档行悬停：深灰反白 → 主题统一的浅蓝 ----------
   改前悬停取 `--select-bg`（#757470 暖灰）配纯白字，是一条"实底反白"的深色横条。
   问题有两层：
     ① 颜色是暖灰，与冷蓝灰主题冲突（上面提到的"超链接底色"就是它）；
     ② 全站其它列表的悬停语言**早已统一成浅蓝** ——
        列表行 #F2F6F9、目录树 #E7EFF6、菜单栏 #E5EEF6、面包屑链接 #E7EFF6；
        只有归档这一处还是深色反白，一条 17 行的列表每次划过都翻出一根深条，
        观感偏重且与全站不一致。
   现在统一到主题的浅蓝悬停 + 深色字。
   —— 想保留"深色反白"只把颜色改冷：把下面两处的
      `#E7EFF6` 换成 `#6E7580`、`#263746` 换成 `#FFFFFF` 即可（同亮度、白字仍 4.67:1）。 */
html:not(.dark) body.w2k#top#top#top .archive-timeline-item:hover {
  background-color: var(--soft-hover, #E7EFF6) !important;
  color: var(--text-primary, #263746) !important;
}
/* 主题里有一条 `.archive-timeline-item:hover *` 把后代文字一律刷成 --select-text(#fff)，
   必须一起压回来，否则浅底上会留一片白字。 */
html:not(.dark) body.w2k#top#top#top .archive-timeline-item:hover * {
  color: var(--text-primary, #263746) !important;
}
/* 悬停时行首那枚"分类胶囊"也跟着走浅底深字（clean §11.4 给它的是深蓝 #0a246a 底白字，
   在浅蓝行底上会变成一块突兀的深色补丁）。 */
html:not(.dark) body.w2k#top#top#top .archive-timeline-item:hover
  :is(.archive-category, .archive-tag, .badge) {
  background-color: #D4E3F2 !important;
  border-color: #B9D4EA !important;
  color: var(--soft-blue-active, #285F94) !important;
}


/* ==========================================================================
   14.16 ★ 第 54 轮：列表行"点了就变空白"—— 选中态底色的权重事故
   --------------------------------------------------------------------------
   复现（Playwright 派发 mousedown，JS 在此时给行加 .is-selected）：
     行   bg = rgb(255,255,255)   ← 白
     链接/标题/日期 color = rgb(255,255,255)   ← 也是白
   → **白字压白底，整行内容凭空消失**，就是 123.PNG 里那个空框。

   根因是两条规则打架，而**后写的那条 id 更多**：
     content-surfaces §1.2
       html:not(.dark) body.w2k#top#top#top#top :is(.w2k-dt,…) :is(.w2k-dt-row,…)
       { background-color: var(--surface-panel) }            = (4,4,2)  ← 恒白，无 :not(.is-selected)
     win2000.css §30.9
       body.w2k#top .w2k-dt-row.is-selected { background:#000080 }  = (1,4,1)
   4 个 id 压过 1 个 id，所以行底永远是白的；而**文字**那半边
   （`body.w2k#top .w2k-dt-row.is-selected :is(.w2k-dt-name,…)` (1,4,1)）
   没有更强的对手，白字照常生效 —— 于是只剩白字，底没了。
   （content-surfaces 自己的注释写着"§2.1 已用 :not(.is-selected) 放行 → 深蓝正常"，
     但那条放行的是 **hover**（§2.1），不是**基础行底色**（§1.2）—— 作者漏看了这一处。）

   修法：用 **5 个 id** 把选中态的底色补回来。本层加载在最末，5 > 4 一次压过。
   色值取主题的 active 深蓝 #285F94（白字 7.4:1）。
   —— 想回到经典 Win2K 藏青：把 #285F94 换成 #000080 即可（一行）。
   —— 同时接住 :focus-within（键盘 Tab 到行内链接时同样会白字，属于同一类隐形）。 */
html:not(.dark) body.w2k#top#top#top#top#top
  :is(.w2k-dt, .article-list-container)
  :is(.w2k-dt-row, .article-row-item):is(.is-selected, :focus-within),
html.dark body.w2k#top#top#top#top#top
  :is(.w2k-dt, .article-list-container)
  :is(.w2k-dt-row, .article-row-item):is(.is-selected, :focus-within) {
  background-color: var(--soft-blue-active, #285F94) !important;
}

/* ---------- 14.17 大纲（TOC）当前项：暖灰 → 主题深蓝 ---------- */
/* 实际声明已写在 §14.7 那一处（同一选择器），这里只留说明，避免重复造规则。 */

/* ---------- 14.18 「最新文章 / 年份索引」条目：纯黑字 → 主题主文字色 ---------- */
/* `.w2k-metalist-item` 的默认字色实测是 rgb(0,0,0) —— 全站唯一的**纯黑**。
   规范明令禁止把纯黑用作 UI 文字（#333/#555/#666/纯黑都不行），
   而且它比正文的 #263746 还重，在左侧栏里比标题更抢眼。

   ⚠ **必须带 :not(:hover)**（我自己在这一条上栽了一次）：
   悬停时该条目的底色是 --select-bg（深底）+ 纯白字；
   无条件写 color 会把悬停态的白字也压成 #263746，
   变成"深底压深字"，实测 #263746 on #6E7580 只有 **2.63:1** ——
   比原来的纯黑还糟。这正是本项目反复强调的那条纪律：
   **给可交互元素写底色/字色时，一律用 :not(.is-active):not(:hover) 排除状态态。** */
html:not(.dark) body.w2k#top#top#top .w2k-metalist-item:not(:hover):not(.is-active) {
  color: var(--text-primary, #263746) !important;
}
/* 悬停统一到主题浅蓝（与 §14.15.4 归档行、§14.19 表格行同一套语言），
   不再用"深底反白"，左侧栏划过时才不会翻出一根深条。 */
html:not(.dark) body.w2k#top#top#top .w2k-metalist-item:hover {
  background-color: var(--soft-hover, #E7EFF6) !important;
  color: var(--text-primary, #263746) !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-metalist-item:hover * {
  color: var(--text-primary, #263746) !important;
}

/* ---------- 14.19 正文表格行悬停：深色反白 → 主题浅蓝 ---------- */
/* front-theme.css 有一条 `body.w2k#top .prose-paper tbody tr:hover td
   { background: var(--select-bg); color: var(--select-text) }`
   —— 鼠标划过正文里任何一个表格行（如 111.PNG 的「主要配置」表），
   整行会翻成"深底白字"的选中态。这和 §14.15.4 归档行是同一类问题：
   全站其它地方的悬停都是浅蓝，只有表格行还是深色反白，划过时过于跳。
   统一成主题浅蓝 + 深色字。 */
html:not(.dark) body.w2k#top#top#top .prose-paper tbody tr:hover td {
  background-color: var(--soft-hover, #E7EFF6) !important;
  color: var(--text-primary, #263746) !important;
}
html.dark body.w2k#top#top#top .prose-paper tbody tr:hover td {
  background-color: #2D2D2D !important;
  color: #E6E6E6 !important;
}

/* ---------- 14.21 「清除」按钮悬停：暖灰 → 主题浅蓝 ---------- */
/* flat-industrial.css:697 `… :is(.compact-clear, .w2k-link-btn):hover { background:#e3e0da }`
   —— #E3E0DA 是未随第 47 轮改色的**暖灰**（R=227 > B=218），
   分类/标签页工具栏上的「清除」一悬停就泛米黄。悬停态审计扫出来的。 */
html:not(.dark) body.w2k#top#top :is(.compact-clear, .w2k-link-btn):hover {
  background-color: var(--soft-hover, #E7EFF6) !important;
  border-color: #BCD3E4 !important;
  color: var(--soft-blue-active, #285F94) !important;
}
html.dark body.w2k#top#top :is(.compact-clear, .w2k-link-btn):hover {
  background-color: #2D2D2D !important;
  border-color: #4A4A4A !important;
  color: #E6E6E6 !important;
}

/* ---------- 14.20 左栏属性表（table.win-propsheet）：补上行悬停 ---------- */
/* 实测这张表**完全没有悬停反馈** —— `tbody tr` / `th` / `td` 的 :hover 一律 transparent，
   而同一个详情页里正文的表格（.prose-paper tbody tr，见 §14.19）却有悬停，
   两套表行为不一致。补一套与全站同一语言的浅蓝悬停。
   ★ 行首 `th` 自带 #E9EFF5 底，悬停时必须连它一起刷成同一个浅蓝，
     整行才读成"一行"，否则会出现"半行变色"的割裂感。
   ★ 行首标签刻意压一档到 #55677A（在 #E7EFF6 上 5.01:1），
     保持"标签弱于取值"的层级 —— 这本来就是这个表的语义。 */
html:not(.dark) body.w2k#top#top#top .win-propsheet tbody tr:hover :is(th, td) {
  background-color: var(--soft-hover, #E7EFF6) !important;
}
html:not(.dark) body.w2k#top#top#top .win-propsheet tbody tr:hover td {
  color: var(--text-primary, #263746) !important;
}
html:not(.dark) body.w2k#top#top#top .win-propsheet tbody tr:hover th {
  color: #55677A !important;
}
html.dark body.w2k#top#top#top .win-propsheet tbody tr:hover :is(th, td) {
  background-color: #2D2D2D !important;
}
html.dark body.w2k#top#top#top .win-propsheet tbody tr:hover td {
  color: #E6E6E6 !important;
}
html.dark body.w2k#top#top#top .win-propsheet tbody tr:hover th {
  color: #A0A0A0 !important;
}


/* ==========================================================================
   15. 详情页「一体化白底文档区」—— 第 48 轮（第 49 轮改版）
   ==========================================================================
   ★ 演进过程（两次实测，1440 视口，/nuyekk.html）
   --------------------------------------------------------------------------
   【第 48 轮 · 原问题】正文白卡的边线与工作台外框线像素级重合：
       .w2k-pane-doc  x=276  right=1410  padding:0  border 1px #D7E0E7
       .prose-paper   x=277  right=1409  bg #FFFFFF  border 1px #D7E0E7
       `276 + 1px = 277` —— 两根 1px 线落在同一坐标，白底把外框整条压死。

   【第 48 轮 · 当时的解法】改成"工作台 + 文档卡片"两层：
       .w2k-pane-doc  bg #F4F7F9 + padding 16px 20px
       .prose-paper   白卡 + 1px 边框 + 圆角 4px + 阴影 + padding 24px 28px
       → 卡片 x=297 / right=1389，两侧各留 20px 台面。

   【第 49 轮 · 本次】上面那个解法**把正文压窄了**（左右各损失 20px 台面 +
   卡片自身 28px 内边距 = 正文实际比改前窄了 96px）。用户决定回到
   **最纯正的 Win2000 桌面软件规范**：不要"外框套卡片"的嵌套，
   右侧直接做成**一整块白底文档区**。

   ★ 唯一的线条：`.w2k-pane-doc` 自己那条 1px #D7E0E7。
     正文卡不再画线，所以**不存在两根线重叠**的问题 ——
     这正是最初那个 bug 的根治办法：把两层合成一层。
     （若连这一条也不想要，删掉 15.1 里的 border-color 行即可，
      白底会一路铺到窗体边缘。）

   ★ 本节只作用于详情页：`.w2k-pane-doc` 全仓只出现在 `templates/detail.html:82`，
     其余页面（首页 / 分类 / 标签 / 归档）走的是 `.w2k-client-explorer`，不受影响。
   ★ 全程 CSS，不动任何 DOM / 模板 / Go。
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1 右侧工作区底盘：纯白、零内边距、零圆角
   --------------------------------------------------------------------------
   底板本身就是"文档区"，正文直接铺在它上面，**不再往里面缩**。
   保留它那一条 1px 边框当作文档区的外轮廓（左侧也是靠它 + 侧栏右边线
   共同界定"目录区 | 文档区"的分界）。
   ⚠ `overflow-y: auto` 保留上一轮的声明。它目前是**声明性**的：
     工作台随内容自然增高、由 .w2k-window 统一滚动，所以不会真的出现内滚动条。
     要做"工作台内部独立滚动"必须同时给它确定高度，那是另一件事。
   -------------------------------------------------------------------------- */
html:not(.dark) body.w2k#top#top#top#top#top .w2k-pane-doc {
  background-color: #FFFFFF !important;   /* 纯白底盘 */
  padding: 0 !important;                  /* 取消 16×20 台面内边距 */
  border-radius: 0 !important;            /* 白底不需要圆角 */
  overflow-y: auto !important;
  border-color: var(--soft-line, #D7E0E7) !important;  /* 仅此一条轮廓线 */
}

/* --------------------------------------------------------------------------
   15.2 提示框 / 警告框（Alerts）—— 规范 §2.3
   --------------------------------------------------------------------------
   要求：避免高饱和刺眼色，圆角 3px、上下外边距 12px。
     警告：底 #FFFDF5 / 线 #F1E5C8 / 字 #6E5A28
     提示：底 #F3F8FC / 线 #D3E2EE / 字 #285F94
   可读性自检（WCAG，对比度脚本口径）：
     #6E5A28 on #FFFDF5 = 5.61:1 ✓    #285F94 on #F3F8FC = 6.22:1 ✓
   ★ `:not(.is-collapsible)` 是必须的：折叠面板 <details> 也带
     `.paper-callout.callout-warning`，但它在本项目里是**另一种组件**
     （见 §15.3），若被本节一起刷成警告黄，会与规范 §2.3 的折叠面板规格打架。
   -------------------------------------------------------------------------- */
html:not(.dark) body.w2k#top#top#top .paper-callout:not(.is-collapsible) {
  border-radius: 3px !important;
  margin: 12px 0 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* 提示框 info（callout-note / callout-tip 是同一语义的别名，一并收编） */
html:not(.dark) body.w2k#top#top#top
  :is(.paper-callout.callout-info, .paper-callout.callout-note,
      .paper-callout.callout-tip):not(.is-collapsible) {
  background-color: #F3F8FC !important;
  border-color: #D3E2EE !important;
}
html:not(.dark) body.w2k#top#top#top
  :is(.paper-callout.callout-info, .paper-callout.callout-note,
      .paper-callout.callout-tip):not(.is-collapsible)
  :is(.callout-title, .callout-body, .callout-body > *):not(a) {
  color: #285F94 !important;
}

/* 警告框 warning（callout-danger / callout-caution 同理收编） */
html:not(.dark) body.w2k#top#top#top
  :is(.paper-callout.callout-warning, .paper-callout.callout-danger,
      .paper-callout.callout-caution):not(.is-collapsible) {
  background-color: #FFFDF5 !important;
  border-color: #F1E5C8 !important;
}
html:not(.dark) body.w2k#top#top#top
  :is(.paper-callout.callout-warning, .paper-callout.callout-danger,
      .paper-callout.callout-caution):not(.is-collapsible)
  :is(.callout-title, .callout-body, .callout-body > *):not(a) {
  color: #6E5A28 !important;
}

/* --------------------------------------------------------------------------
   15.3 折叠面板（Collapse / Accordion）—— 规范 §2.3
   --------------------------------------------------------------------------
   模板结构（main.go:1417）：
     <details class="paper-callout callout-warning is-collapsible">
       <summary><span.callout-icon><span>标题</span><span.callout-chevron>⌄</span></summary>
       <div class="callout-body">…</div>
     </details>
   规格：边框 #E1E8EE / 圆角 3px / 标题栏底 #F1F5F8 且文字 #263746 /
        内容区底 #FAFBFD。
   自检：#263746 on #F1F5F8 = 11.15:1 ✓；正文 #344554 on #FAFBFD = 9.53:1 ✓
   ★ 用 `overflow: hidden` 让标题栏的圆角随外框裁切（只影响绘制，不改盒尺寸）。
   -------------------------------------------------------------------------- */
html:not(.dark) body.w2k#top#top#top details.paper-callout.is-collapsible {
  background-color: #FFFFFF !important;
  border: 1px solid #E1E8EE !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

/* 标题栏：浅蓝灰底 + 深蓝灰字 */
html:not(.dark) body.w2k#top#top#top details.paper-callout.is-collapsible > summary {
  background-color: #F1F5F8 !important;
  color: #263746 !important;
  border-radius: 2px 2px 0 0 !important;
}
/* 标题栏内的图标与文字一起走深蓝灰（排除链接，让链接保留自己的主色蓝） */
html:not(.dark) body.w2k#top#top#top details.paper-callout.is-collapsible > summary
  :is(span, strong, em, b, i):not(a) {
  color: #263746 !important;
}

/* 内容区：比标题栏更亮一档的近白，与折叠面板外框同色系 */
html:not(.dark) body.w2k#top#top#top details.paper-callout.is-collapsible > .callout-body {
  background-color: #FAFBFD !important;
  color: #344554 !important;
}

/* --------------------------------------------------------------------------
   15.4 面包屑 → Win2000「地址栏（Address Bar）」
   ==========================================================================
   ★ 第 50 轮：从"一行漂浮的浅字"改造成资源管理器式的工业路径栏。

   实测的 DOM（`detail.html:83`，**结构不能动**）：
     div.w2k-breadcrumb                    display:flex; align-items:center
       a                                    ← ⚠ **没有类名**，只能用 > a 选
       span.w2k-crumb-sep        「›」       aria-hidden
       span.w2k-crumb-current    「文章标题」
       div.w2k-crumb-tools                   ← 相册视图切换按钮（靠 margin-left:auto 顶到最右）

   ⚠ 踩到的两个坑，这里一并说明：
   ① **`<a>` 无类名** —— 全仓没有 `.w2k-crumb-link` 这种类，只能写
      `.w2k-breadcrumb > a`。照规格里那种"给链接加个类"的做法在这个项目里落不了地。
   ② **`border-bottom-width` 原本是 0** —— 第 49 轮只写了 `border-bottom-color`，
      颜色生效了但没有宽度，所以那条线从来没有真正画出来。
      本轮必须写**完整简写** `border-bottom: 1px solid …` 才会出现。

   ★ 对齐说明：容器左右内边距按规范取 16px，比正文的 24px 少 8px。
     地址栏有自己的底色带，属于"窗口 chrome"而非文本列，
     所以不与正文左对齐是合理的（Win2000 资源管理器里地址栏与文件列表也不对齐）。
     想强行对齐：把下面的 `padding: 6px 16px` 改成 `6px 24px` 即可。
   ========================================================================== */

/* ---------- 15.4.1 容器：通栏浅冷灰蓝底色 + 仅底部一条线 ---------- */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #F4F7F9 !important;      /* 与正文纯白形成轻微层次 */
  border: 0 !important;                      /* 先清干净，避免四周残留硬框 */
  border-bottom: 1px solid #D7E0E7 !important;  /* ★ 必须写简写，原 width 是 0 */
  padding: 6px 16px !important;
  min-height: 32px !important;               /* 与左侧栏模块头部同一水平节奏 */
  gap: 0 !important;                         /* 间距改由分隔符的 margin 控制，避免叠加 */
  font-size: 12px !important;
}
/* 视图切换按钮组仍然顶到最右（gap 归零后必须有它兜着） */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb > .w2k-crumb-tools {
  margin-left: auto !important;
}

/* ---------- 15.4.2 路径链接：hover 走主蓝 + 微弱浅蓝底 ----------
   ★ 水平内边距写在**常态**上（不是只在 hover），否则鼠标一进一出会左右抖动。 */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb > a {
  color: #5F7180 !important;                 /* 见下方"色值说明" */
  text-decoration: none !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  white-space: nowrap !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb > a:hover,
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb > a:focus-visible {
  color: var(--soft-blue, #2F6FAE) !important;
  background-color: var(--soft-hover, #E7EFF6) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* 色值说明：#5F7180 而非规范写的 #667786。
   地址栏底色是 #F4F7F9，而 #667786 在这个底上实测只有 **4.29:1**（差 0.21 够不着 AA 4.5）；
   #5F7180 同底是 **4.69:1**。两者同色相，肉眼几乎分不出。
   想回到规范的 #667786：把上面那行的 #5F7180 换掉即可（一行）。 */

/* ---------- 15.4.3 当前项（最后一级）：深蓝灰 + 加重一档 ---------- */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb > .w2k-crumb-current {
  color: #263746 !important;
  font-weight: 500 !important;
  /* 长标题不再撑破地址栏、把右侧按钮组挤出去，超出省略 */
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ---------- 15.4.4 分隔符：刻意淡化 ----------
   规范给 #98A4AE（在 #F4F7F9 上约 2.4:1）。它**低于 AA 是刻意的**：
   该节点带 aria-hidden="true"，属纯装饰字形，WCAG 1.4.3 对装饰性文本不设对比度要求，
   层级关系由链接顺序本身承担。所以这里按规范保留这个"微弱"的值。 */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb > .w2k-crumb-sep {
  color: #98A4AE !important;
  margin: 0 6px !important;
}

/* ---------- 15.4.5 左侧小文件夹图标（::before，纯 CSS 零外部资源） ----------
   用 data-URI SVG，与 media-cards.css 的占位图标同一套写法。
   ★ 它会占据 13+7=20px 宽度，使第一个链接的文字落在 16+20+6 = 42px 处。
     若不需要图标（或想与正文左对齐），把下面整块删掉即可，其余样式不受影响。 */
html:not(.dark) body.w2k#top#top#top .w2k-breadcrumb::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 11px;
  margin-right: 7px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11' viewBox='0 0 13 11'%3E%3Cpath d='M0 1.5h4.4l1.3 1.7H13V11H0z' fill='%238B98A3'/%3E%3Cpath d='M0 3.6h13V11H0z' fill='%237E8C99'/%3E%3C/svg%3E");
  opacity: .95;
}

/* ---------- 15.4.6 暗色同构 ---------- */
html.dark body.w2k#top#top#top .w2k-breadcrumb {
  width: 100% !important;
  box-sizing: border-box !important;
  background-color: #242424 !important;
  border: 0 !important;
  border-bottom: 1px solid #3A3A3A !important;
  padding: 6px 16px !important;
  min-height: 32px !important;
  gap: 0 !important;
  font-size: 12px !important;
}
html.dark body.w2k#top#top#top .w2k-breadcrumb > .w2k-crumb-tools {
  margin-left: auto !important;
}
html.dark body.w2k#top#top#top .w2k-breadcrumb > a {
  color: #A0A0A0 !important;
  text-decoration: none !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-breadcrumb > a:hover,
html.dark body.w2k#top#top#top .w2k-breadcrumb > a:focus-visible {
  color: #5B93D6 !important;
  background-color: #2D2D2D !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
html.dark body.w2k#top#top#top .w2k-breadcrumb > .w2k-crumb-current {
  color: #E6E6E6 !important;
  font-weight: 500 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
html.dark body.w2k#top#top#top .w2k-breadcrumb > .w2k-crumb-sep {
  color: #6E6E6E !important;
  margin: 0 6px !important;
}
html.dark body.w2k#top#top#top .w2k-breadcrumb::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 11px;
  margin-right: 7px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='11' viewBox='0 0 13 11'%3E%3Cpath d='M0 1.5h4.4l1.3 1.7H13V11H0z' fill='%236E6E6E'/%3E%3Cpath d='M0 3.6h13V11H0z' fill='%23A0A0A0'/%3E%3C/svg%3E");
  opacity: .9;
}

/* --------------------------------------------------------------------------
   15.5 说明：想恢复"内嵌卡片"或"定宽居中"时怎么改
   --------------------------------------------------------------------------
   本轮是"一体化白底"：底盘与正文同色同宽，只有一条 1px 轮廓线。
   两个常见变体，都只需改一行，不需要动 DOM：
     · 定宽居中文档页：§9.1 的 `max-width: 100%` 换成
       `max-width: 900px; margin-inline: auto;`
     · 恢复"工作台 + 卡片"（第 48 轮的形态）：§15.1 的
       `background-color:#FFFFFF` 换成 `#F4F7F9`、`padding:0` 换成 `16px 20px`；
       §9.1 的 `border:none` 换成 `1px solid var(--soft-line)`。
   ========================================================================== */


/* ==========================================================================
   16. 首页三大模块「面板分段标头」—— 第 51 轮
   ==========================================================================
   ★ 要解决的问题
   --------------------------------------------------------------------------
   首页同时有三种排版（笔记文字列表 / 软件 16:9 横图 / 影视竖图海报）。
   改前它们各自套在 Win2K **分组框（groupbox）**里：
     .magazine-section  padding: 20px 10px 10px  border: 1px #D7E0E7
     .magazine-section-head   position:absolute; top:-9px; left/right:6px; height:18px
     .magazine-section-title  background:#E9EFF5; padding:0 6px
   也就是说标头是一个"压在框线上的浮动 legend 小片"，外框则整圈包住内容。
   三种排版因此被三只同样的方框圈起来，层次没有被表达出来。

   ★ 本轮的形态：「面板分段标头（Section Header）+ 留白」
   --------------------------------------------------------------------------
     · 取消 .magazine-section 的分组框外框（边框、内边距、浮雕全部归零）
     · 标头从"浮动 legend"改成**通栏横切的面板标头**：
       position:absolute → static，整条 #EBF1F6 底 + 下沿 1px #D7E0E7
     · 模块之间改用 22px 留白分段，不再用线
     · 三种排版各自的容器（列表 / 卡片）自带 1px 边 + 4px 圆角，
       成为"标头下面的一块内容板" —— 层次由"标头 + 内容板"两级承担，
       不再出现"框套框"。

   ★ 全部为 CSS 覆盖，模板结构与 Go 后端零改动。
     `.magazine-section-head` 从 absolute 改 static 会带来一次整页重排
     （模块高度变化），这是本轮改版的目的，属于预期内。
   ========================================================================== */

/* ---------- 16.1 工作台底色：保持极浅冷蓝灰，不要大面积纯白 ---------- */
/* 规范 §1。改前 .w2k-main 是 #F7F9FB（比规范给的区间更接近白），
   压到 #F4F7F9 —— 白卡片因此有了可依附的底色，"漂浮感"消失。
   该元素为首页/分类/标签/归档/关于共用，故一并统一，不做单页特例。 */
html:not(.dark) body.w2k#top#top#top .w2k-main {
  background-color: #F4F7F9 !important;
}

/* ---------- 16.2 楼层容器：间距交给模块的 margin-bottom ---------- */
html:not(.dark) body.w2k#top#top#top .magazine-feed {
  gap: 0 !important;               /* 原本 8px gap + 8/6px margin，会与 22px 叠加 */
  padding: 0 6px !important;
}

/* ---------- 16.3 模块：取消分组框外框 ---------- */
html:not(.dark) body.w2k#top#top#top .magazine-section {
  padding: 0 !important;           /* 原 20px 10px 10px 是给浮动 legend 让位的 */
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 0 0 22px !important;     /* 规范 §3：用留白代替分割线 */
}
html:not(.dark) body.w2k#top#top#top .magazine-section:last-child {
  margin-bottom: 0 !important;
}

/* ---------- 16.4 ★ 标头：通栏横切的面板标头 ---------- */
html:not(.dark) body.w2k#top#top#top .magazine-section-head {
  position: static !important;     /* ★ 从浮动 legend 回到正常流 */
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;          /* 通栏 */
  box-sizing: border-box !important;
  height: auto !important;         /* 原 18px 定高 */
  min-height: 30px !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  background-color: #EBF1F6 !important;
  border-top: 1px solid #E2E8EE !important;
  border-bottom: 1px solid #D7E0E7 !important;
  border-radius: 0 !important;
}
/* ---------- 16.4b 暗色同构 ----------
   ★ 必须把 16.2 / 16.3 / 16.8 的**全部**结构规则一起镜像过来，不能只镜像标头。
     第 51 轮第一次只镜像了标头，结果暗色下 .magazine-section 仍留着原来的
     `padding: 20px 10px 10px`（那是给浮动 legend 让位的），而标头已经变成正常流
     —— 于是每个模块凭空多出 19px 上内边距，暗色首页比浅色整整高 66px
     （实测 scrollH：浅 1721 / 暗 1787）。这类"只改了一半"的错在明暗双主题下
     必查，量一次两边的高度就能立刻发现。 */
html.dark body.w2k#top#top#top .magazine-feed {
  gap: 0 !important;
  padding: 0 6px !important;
}
html.dark body.w2k#top#top#top .magazine-section {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  margin: 0 0 22px !important;
}
html.dark body.w2k#top#top#top .magazine-section:last-child {
  margin-bottom: 0 !important;
}
html.dark body.w2k#top#top#top .magazine-section-head {
  position: static !important;
  top: auto !important; left: auto !important; right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 6px 14px !important;
  background-color: #2D2D2D !important;
  border-top: 1px solid #333333 !important;
  border-bottom: 1px solid #3A3A3A !important;
  border-radius: 0 !important;
}
html.dark body.w2k#top#top#top .magazine-section-title {
  background-color: transparent !important;
  padding: 0 !important;
  height: auto !important;
  gap: 7px !important;
  min-width: 0 !important;
}
html.dark body.w2k#top#top#top .magazine-section-icon {
  background-color: transparent !important;
  border: 0 !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}
html.dark body.w2k#top#top#top .magazine-section > :not(.magazine-section-head) {
  margin-top: 12px !important;
}
html.dark body.w2k#top#top#top .magazine-section > .w2k-dt {
  margin-bottom: 0 !important;
}

/* ---------- 16.5 标题组：底色与内边距交还给"条"本身 ---------- */
html:not(.dark) body.w2k#top#top#top .magazine-section-title {
  background-color: transparent !important;   /* 原 #E9EFF5 小片 */
  padding: 0 !important;
  height: auto !important;
  gap: 7px !important;
  min-width: 0 !important;
}
html:not(.dark) body.w2k#top#top#top .magazine-section-title h2 {
  color: #263746 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 18px !important;
  margin: 0 !important;
}
html.dark body.w2k#top#top#top .magazine-section-title h2 {
  color: #E6E6E6 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
/* 副标题：模板里存在但当前是 display:none（实测），这里只做兜底配色，
   万一将来打开也仍然是"次级文字 + 小字号"。 */
html:not(.dark) body.w2k#top#top#top .magazine-section-title p {
  color: var(--text-secondary, #667786) !important;
  font-size: 11px !important;
}

/* ---------- 16.6 左侧文件夹图标：去掉白色小方块与外框 ---------- */
/* 改前它是 16×16 的白底 + 1px 边的小 chip（与 Tailwind preflight 的边框色同源），
   放在通栏标头里会像一块贴上去的补丁；标头已有底色，图标只留图形本身。 */
html:not(.dark) body.w2k#top#top#top .magazine-section-icon {
  background-color: transparent !important;
  border: 0 !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto !important;
}

/* ---------- 16.7 右侧「全部 / 查看更多 →」：胶囊 → 纯文字链接 ---------- */
/* ★ 字色：规范写 #667786，但新标头底色是 #EBF1F6，实测 #667786 在该底上只有
   **4.06:1**（差 0.44 够不着 AA 4.5）—— 这是本轮"把标头底色从白改成 #EBF1F6"
   新引入的问题。收到 #5A6C7B（同一冷灰蓝家族）得 **4.78:1** 达标。
   想回到规范的 #667786：把下面那行的 #5A6C7B 换掉即可（一行）。 */
html:not(.dark) body.w2k#top#top#top .magazine-more {
  background-color: transparent !important;   /* 原 #E4EBF1 胶囊底 */
  border: 0 !important;
  padding: 0 !important;
  color: #5A6C7B !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
html:not(.dark) body.w2k#top#top#top .magazine-more:hover {
  color: var(--soft-blue, #2F6FAE) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
html.dark body.w2k#top#top#top .magazine-more {
  background-color: transparent !important;
  color: #A0A0A0 !important;
  font-size: 11px !important;
}
html.dark body.w2k#top#top#top .magazine-more:hover { color: #5B93D6 !important; }

/* ---------- 16.8 标头与内容板之间的呼吸 ---------- */
html:not(.dark) body.w2k#top#top#top .magazine-section > :not(.magazine-section-head) {
  margin-top: 12px !important;
}
/* 清掉 content-surfaces §4.4 给列表的 20px 下边距，否则与 22px 叠加成 42px */
html:not(.dark) body.w2k#top#top#top .magazine-section > .w2k-dt {
  margin-bottom: 0 !important;
}

/* ---------- 16.9 笔记（文字列表）：白底 + 1px 冷蓝灰线 + 4px 圆角 ---------- */
/* 规范 §4。改前已经是白底 + 1px #D7E0E7，只有圆角是 6px（§7.1 给的），收到 4px。 */
html:not(.dark) body.w2k#top#top#top#top#top
  .magazine-section :is(.w2k-dt, .article-list-container) {
  background-color: #FFFFFF !important;
  border: 1px solid #D7E0E7 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
/* 单行分割线：#EEF3F7（比全站的 --surface-divider #E7EDF2 再淡一档） */
html:not(.dark) body.w2k#top#top#top#top#top
  .magazine-section .w2k-dt :is(.w2k-dt-row, .article-row-item) {
  border-bottom: 1px solid #EEF3F7 !important;
}
/* 首/末行圆角跟着容器的 4px 走（§7.4 写的是 6px） */
html:not(.dark) body.w2k#top#top#top#top#top .magazine-section .w2k-dt
  .w2k-dt-list > :is(.w2k-dt-row, .article-row-item):first-child {
  border-radius: 4px 4px 0 0 !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .magazine-section .w2k-dt
  .w2k-dt-list > :is(.w2k-dt-row, .article-row-item):last-child {
  border-radius: 0 0 4px 4px !important;
}

/* ---------- 16.10 软件 16:9 / 影视竖图：白卡 + 1px 线 + 4px 圆角 ---------- */
/* 规范 §4。改前卡片边框是 transparent（第 49 轮为了拆"框套框"去掉了线）——
   现在外层的分组框已经取消，这根线需要还给卡片自己来界定它的形状。
   ★ 封面圆角跟着收一档（5px → 3px）：卡片 4px、内衬 6px，内层若仍 5px
     会比外层还圆，出现"内圆外方"的反差。 */
html:not(.dark) body.w2k#top#top#top#top#top .magazine-section :is(.media-card, .w2k-card) {
  background-color: #FFFFFF !important;
  border: 1px solid #D7E0E7 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
html:not(.dark) body.w2k#top#top#top#top#top
  .magazine-section .media-cards .media-card-media,
html:not(.dark) body.w2k#top#top#top#top#top
  .magazine-section .media-cards .media-card-media > img {
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top
  .magazine-section .media-cards .media-card-media::after {
  border-radius: 0 0 3px 3px !important;
}
/* ⚠ 竖图/横图的比例**不动**：由 media-cards.css 的 --media-ratio-h 与
   数据里的 LayoutType 决定（影视=2:3 竖版，软件=16:9 横版）。
   本轮只统一"卡片间距 / 圆角 / 边框 / 文字色"，不碰任何比例规则。 */

/* 暗色同构：结构与圆角对齐，色值全部走暗色既有阶梯 */
html.dark body.w2k#top#top#top#top#top .magazine-section :is(.media-card, .w2k-card) {
  background-color: var(--bg-surface-card, #2D2D2D) !important;
  border: 1px solid #3A3A3A !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
html.dark body.w2k#top#top#top#top#top .magazine-section .media-cards .media-card-media,
html.dark body.w2k#top#top#top#top#top .magazine-section .media-cards .media-card-media > img {
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top
  .magazine-section :is(.w2k-dt, .article-list-container) {
  border-radius: 4px !important;
}


/* ==========================================================================
   17. 第 52 轮：移动端适配 + 首页去掉「返回顶部」
   ========================================================================== */

/* ---------- 17.1 ★ 修复移动端整页横向溢出（既有缺陷，非本轮引入） ----------
   实测 375px：documentElement.scrollWidth = **522** > clientWidth = **375**，
   整页可以横向滑出 147px 的空白（首页 522、/category/notes.html 520）。

   根因：`.w2k-dt-sr`（"置顶"的读屏补充文本，win2000.css:7478）用的是标准
   sr-only 写法 —— position:absolute / 1×1 / margin:-1px / clip:rect(0 0 0 0) /
   clip-path:inset(50%) —— 但它**没有写 left 与 top**，于是停在"静态位置"，
   也就是标题文字之后。标题是 nowrap，长标题把它的静态位置推到行尾之外；
   而它的包含块是 `.w2k-dt-row`（position:relative），**不是** `.w2k-dt-name`，
   所以它逃出了 name 的 `overflow:hidden`，最终落在视口右侧之外。

   修法：把位置钉回包含块原点。它本来就是 1×1 且 clip-path 双重裁切（完全不可见），
   位置对读屏毫无意义，钉住不影响无障碍语义。
   —— 这条对全站所有宽度生效，不只是窄屏：只要标题足够长，
      宽屏同样会被它撑出横向滚动条。 */
html body.w2k#top .w2k-dt-sr {
  left: 0 !important;
  top: 0 !important;
}

/* ---------- 17.2 首页去掉「返回顶部」按钮 ----------
   `.magazine-feed` 全站**只有首页**会输出（templates/homesections.html），
   所以用 `:has()` 精确锁定首页；分类 / 标签 / 归档 / 详情页的返回顶部原样保留。
   —— 首页是纯浏览流、且三个模块都很短，这个悬浮按钮只会挡住卡片右下角。
   想**全站**去掉：把选择器里的 `:has(.magazine-feed)` 删掉即可（一行）。
   想只在窄屏去掉：把这条挪进下面的 @media (max-width: 767px) 里。 */
html body.w2k#top#top#top:has(.magazine-feed) .w2k-totop {
  display: none !important;
}

/* ==========================================================================
   18. 响应式 / 无障碍 / 打印
   --------------------------------------------------------------------------
   断点沿用全站既定的 767px（不是 768）。
   ========================================================================== */
@media (max-width: 767px) {
  /* 窄屏上卡片内衬收一档，避免 2 列时每列再被吃掉 12px */
  html:not(.dark) body.w2k#top#top#top#top#top :is(.media-card, .w2k-card) {
    padding: 4px !important;
  }
  html:not(.dark) body.w2k#top#top#top#top#top .media-cards .media-card-copy {
    padding: 8px 2px 2px !important;
  }
  /* 侧栏 Active 的左侧强调线在窄屏保留（它不占宽度） */
  html:not(.dark) body.w2k#top .w2k-window {
    border-radius: 0 !important;
  }
  /* ---------- §16 面板标头的窄屏适配 ----------
     ★ front-theme.css(1873-1875) 与 win2000.css(8612/8634) 里各有一组旧的
       移动端规则（`.magazine-section{padding-top:22px}` /
       `.magazine-section-head{margin-bottom:12px}`），都写在我这个
       absolute→static 改造**之前**。这里必须显式钉死 static，
       否则窄屏下 legend 会"长回来"，或叠出双倍间距。
     ★ 这一组**不再分 html:not(.dark)**：明暗两态的移动端取值完全相同，
       拆成两份只会让以后改一处漏一处（第 51 轮就栽在只镜像了一半）。 */
  html body.w2k#top#top#top .magazine-section {
    margin-bottom: 16px !important;          /* 22px → 16px（手机屏短） */
  }
  html body.w2k#top#top#top .magazine-section-head {
    position: static !important;
    margin: 0 !important;
    padding: 6px 10px !important;            /* 14px → 10px */
    width: 100% !important;
  }
  html body.w2k#top#top#top .magazine-section > :not(.magazine-section-head) {
    margin-top: 10px !important;             /* 12px → 10px */
  }
  html body.w2k#top#top#top .magazine-feed {
    padding: 0 2px !important;               /* 6px → 2px，把宽度还给内容 */
  }
  /* 窄屏标题字号保持 13px 不缩（缩到 12px 会与列表正文同级、失去标头感） */
  html body.w2k#top#top#top .magazine-section-title h2 {
    font-size: 13px !important;
  }
}

/* 高对比度模式：把"极浅"的装饰线交还给系统色，保证仍能被看见 */
@media (forced-colors: active) {
  html:not(.dark) body.w2k#top#top#top .w2k-tree-kids {
    border-left-color: CanvasText !important;
  }
}

/* 打印：去掉阴影与圆角，纸面纯净 */
@media print {
  html body.w2k#top :is(.w2k-window, .media-card, .w2k-card, .w2k-dt,
      .prose-paper, .code-block-wrapper) {
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  html body.w2k#top .w2k-titlebar {
    background: #FFFFFF !important;
    background-image: none !important;
    color: #000000 !important;
  }
}

/* 减少动态效果：本层没有新增任何动画，这条只是把过渡一并关掉 */
@media (prefers-reduced-motion: reduce) {
  html body.w2k#top :is(.w2k-tree-node, .w2k-btn, .compact-pill, .media-card-title) {
    transition: none !important;
  }
}


/* ==========================================================================
   19. 封面网格：收紧间隙，让封面变宽（第 56 轮）
   ==========================================================================
   ★ 实测（`D:\cms\_dev\grid.mjs`，1440 视口）
   --------------------------------------------------------------------------
   改前：
     .media-cards   grid 1110px / 4 列 × 264px / column-gap 18px
     .media-card    padding 6px + border 1px
     → 封面宽 **250px**
     → 相邻封面之间的**视觉空隙 = 32px**
         = gap 18 + 右卡内衬 6 + 左卡内衬 6 + 两条 1px 边框
   32px 对着 250px 的封面 = **12.8%**，在"图像优先"的网格里偏松 ——
   这就是观感上"图与图之间空隙较大"的全部来源。

   ★ 为什么不能只压 gap
   --------------------------------------------------------------------------
   容器宽度固定、列数固定时，"空隙"与"封面宽"是**此消彼长**的：
     colWidth = (容器 − 3×gap) / 4
     coverW   = colWidth − 2×内衬 − 2×边框
   只把 gap 从 18 压到 10，封面只涨 6px；连内衬一起收 1px 才再多 4px。

   ★ 本轮的取值（gap 18→10、内衬 6→5）
   --------------------------------------------------------------------------
     封面宽    250 → **258**   (+8px, +3.2%)
     视觉空隙   32 → **22**    (−31%)
     卡片盒间距 18 → **10**
   ★ 内衬只收 1px、**不删**：它是第 51 轮定下的"卡片白框" ——
     封面的 3px 圆角与卡片的 4px 圆角靠这圈白边形成层次，
     删掉就退化成"图片直接贴着自己的边框"，卡片感消失。
   窄屏按同一比例递减（见下方 media query）。
   ========================================================================== */

/* 列间距：宽屏 18 → 10。用 CSS 变量覆盖，不动 media-cards.css 的网格定义，
   列数（--media-cols）与比例（--media-ratio-h）一个都没碰。 */
html body.w2k#top .media-cards {
  --media-card-gap: 10px !important;
}

/* 卡片内衬 6 → 5。
   ⚠ 这里必须用 **6 个 id**，5 个不够。§16.10 那条是
       `…body.w2k#top#top#top#top#top .magazine-section :is(.media-card, .w2k-card)`
     同样是 5 个 id，但**多一个 `.magazine-section` 类** → (5,4,2) 压过我原来的 (5,3,2)，
     **即使我排在文件更后面也没用**（同 id 数时先比类数，再比先后）。
     实测证据：加上这条之前量到的 cardPad 一直是 6px，我写的 5px 根本没生效。
   —— 顺带发现 §18 里那条窄屏 `padding: 4px` 也一直是**空转的**：
      它是 (5,3,2)，同样被 (5,4,2) 的 §16.10 压住 —— 也就是说手机端的内衬
      从第 51 轮起就没真正收窄过。下面一并按 6 个 id 重写。 */
@media (min-width: 768px) {
  html:not(.dark) body.w2k#top#top#top#top#top#top :is(.media-card, .w2k-card),
  html.dark body.w2k#top#top#top#top#top#top :is(.media-card, .w2k-card) {
    padding: 5px !important;
  }
}
@media (max-width: 767px) {
  html:not(.dark) body.w2k#top#top#top#top#top#top :is(.media-card, .w2k-card),
  html.dark body.w2k#top#top#top#top#top#top :is(.media-card, .w2k-card) {
    padding: 4px !important;
  }
}

/* 窄屏：间距按比例再收一档（原 16 / 14 / 12 → 10 / 8 / 8） */
@media (max-width: 1200px) {
  html body.w2k#top .media-cards { --media-card-gap: 10px !important; }
}
@media (max-width: 860px) {
  html body.w2k#top .media-cards { --media-card-gap: 8px !important; }
}
@media (max-width: 420px) {
  html body.w2k#top .media-cards { --media-card-gap: 8px !important; }
}


/* ==========================================================================
   20. 首页分类模块 → 一体化分组面板（GroupBox）—— 第 57 轮
   ==========================================================================
   ★ 要修的是什么
   --------------------------------------------------------------------------
   第 51 轮把 .magazine-section 从"分组框"改成了"通栏标头 + 留白分段"，
   标头与内容之间留了 **12px 空隙**（§16.8）。结果标头和内容成了两个独立区块：
     · 亮色：标头一条横线，下面隔 12px 才是白底列表 —— 那条线被"架空"了，
             两边没有共同的轮廓，读起来是"两个东西"而不是"一个面板"。
     · 暗色：标头是一条亮色横带，下面隔 12px 是深色卡片区，中间那道空隙
             把两者切得更明显，就是用户说的"突兀的色条 + 断层"。
   根因就是那 12px 空隙 —— **没有共同外框的"标头"永远是漂浮的**。

   ★ 本轮的形态：一体化面板（标头 = 顶盖，内容 = 内部，共享一条外框）
   --------------------------------------------------------------------------
     .magazine-section   1px 外框 + 4px 圆角 + overflow:hidden（让顶盖贴合圆角）
     .magazine-section-head  去掉自己的上/下框，只留一条 border-bottom 作内部分隔
     内容                 margin-top 归零，紧贴顶盖
   区分只靠两件事：顶盖的极淡底色 + 那一条 1px 内部细线。

   ★ 暗色值（#1E2023 / #282C31 / #33383F）是**冷调**深灰（B > R），
     与本项目第 47 轮起的冷蓝灰体系同向；改前暗色走的是中性灰 #2D2D2D 一族。
     只作用于首页这三个面板，暗色其余部分暂未同步（如需全局统一见回复说明）。
   ========================================================================== */

/* ---------- 20.1 外层：一个面板，一条外框 ---------- */
html:not(.dark) body.w2k#top#top#top .magazine-section {
  background-color: #FFFFFF !important;
  border: 1px solid #D7E0E7 !important;
  border-radius: 4px !important;
  overflow: hidden !important;   /* ★ 顶盖四角随面板圆角裁切 */
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}
html.dark body.w2k#top#top#top .magazine-section {
  background-color: #1E2023 !important;
  border: 1px solid #33383F !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 20px !important;
}
html:not(.dark) body.w2k#top#top#top .magazine-section:last-child,
html.dark body.w2k#top#top#top .magazine-section:last-child {
  margin-bottom: 0 !important;
}

/* ---------- 20.2 顶盖标头：面板的盖子 ---------- */
/* 关键：`border: 0` 先把第 51 轮给的上下两条通栏线清掉，只留 border-bottom
   当"盖子与内部"的分隔线 —— 外轮廓交给面板本体，这样才不会出现"双框"。 */
html:not(.dark) body.w2k#top#top#top .magazine-section-head {
  border: 0 !important;
  border-bottom: 1px solid #E1E8EE !important;
  background-color: #F3F6F8 !important;
  padding: 7px 14px !important;
  min-height: 32px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: #263746 !important;
}
html.dark body.w2k#top#top#top .magazine-section-head {
  border: 0 !important;
  border-bottom: 1px solid #33383F !important;
  background-color: #282C31 !important;
  padding: 7px 14px !important;
  min-height: 32px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  color: #D8DFE6 !important;
}

/* ---------- 20.3 ★ 干掉标头与内容之间那 12px 断层 ---------- */
/* ⚠ 必须写成 `html:not(.dark) …` / `html.dark …` 两条 ——
   不能图省事写成 `html body.w2k…`。原因：
     §16.8  `html:not(.dark) body.w2k#top#top#top .magazine-section > :not(…)` = (3,4,2)
     我最初 `html body.w2k#top#top#top .magazine-section > :not(…)`          = (3,3,2)
   **同样 3 个 id，但对手多一个 `:not(.dark)` 类** → 它赢，
   即使我的规则排在文件更后面。实测证据：加上前后量到的 gapHeadToList 一直是 12px。
   —— 这已经是本项目第 4 次栽在"同 id 数、比类数"上了，判别口诀：
      **写完覆盖规则，先数 id，id 相同就数类，都相同才轮到源码顺序。** */
html:not(.dark) body.w2k#top#top#top .magazine-section > :not(.magazine-section-head),
html.dark body.w2k#top#top#top .magazine-section > :not(.magazine-section-head) {
  margin-top: 0 !important;
}

/* ---------- 20.4 文字列表：外壳交给面板，行线留给自己 ---------- */
/* 面板已经提供了 1px 外框 + 圆角，列表再套一层就是"框套框"。
   所以把 .w2k-dt 自己的边框 / 圆角 / 底色全部让出去，只保留行与行之间的细线。 */
html:not(.dark) body.w2k#top#top#top#top#top#top
  .magazine-section :is(.w2k-dt, .article-list-container) {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.dark body.w2k#top#top#top#top#top#top
  .magazine-section :is(.w2k-dt, .article-list-container) {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* 行：内边距 + 细分隔线（规范 §3） */
html:not(.dark) body.w2k#top#top#top#top#top#top .magazine-section .w2k-dt
  :is(.w2k-dt-row, .article-row-item) {
  padding: 8px 14px !important;
  border-bottom: 1px solid #EEF3F7 !important;
  border-radius: 0 !important;
}
html.dark body.w2k#top#top#top#top#top#top .magazine-section .w2k-dt
  :is(.w2k-dt-row, .article-row-item) {
  padding: 8px 14px !important;
  border-bottom: 1px solid #282C31 !important;
  border-radius: 0 !important;
}
/* 最后一项不留线，面板底部自然收口 */
html:not(.dark) body.w2k#top#top#top#top#top#top .magazine-section .w2k-dt
  .w2k-dt-list > :is(.w2k-dt-row, .article-row-item):last-child,
html.dark body.w2k#top#top#top#top#top#top .magazine-section .w2k-dt
  .w2k-dt-list > :is(.w2k-dt-row, .article-row-item):last-child {
  border-bottom: 0 !important;
}
/* 悬停：规范给的是极浅的 #F8FAFC（比全站通用的 #F2F6F9 再淡一档），
   暗色 #24272D。★ 必须原样保留 :not(.is-selected):not(:focus-within)，
   否则 6 个 id 会把第 54 轮修好的"点击选中深蓝底"一起压掉。 */
html:not(.dark) body.w2k#top#top#top#top#top#top .magazine-section .w2k-dt
  :is(.w2k-dt-row, .article-row-item):hover:not(.is-selected):not(:focus-within) {
  background-color: #F8FAFC !important;
}
html.dark body.w2k#top#top#top#top#top#top .magazine-section .w2k-dt
  :is(.w2k-dt-row, .article-row-item):hover:not(.is-selected):not(:focus-within) {
  background-color: #24272D !important;
}

/* ---------- 20.5 图片网格：面板既然围起来了，内部给自己留一圈呼吸 ---------- */
/* 卡片仍保留自己的 1px 边（第 51 轮定义、用户未要求改动），
   所以这里给网格加内衬，避免卡片直接贴到面板边框上。 */
html:not(.dark) body.w2k#top#top#top .magazine-section > .media-cards,
html.dark body.w2k#top#top#top .magazine-section > .media-cards {
  padding: 10px !important;
  box-sizing: border-box !important;
}

/* ---------- 20.6 卡片网格：一体化（方案 C，第 58 轮定稿） ----------
   ★ 背景
   --------------------------------------------------------------------------
   面板既然已经围出了一个框，卡片再各画一根线就是"框套框"：
     面板框 + 10 个卡片框 = 11 个方框，图与图之间要跨过三道线。
   方案 C 的做法是**卡片不再画线，改由底色差表达"一块"**：
     亮色  卡片 #F7F9FB  ↘ 面板 #FFFFFF   对比 1.08:1
     暗色  卡片 #2D2D2D  ↗ 面板 #1E2023   对比 1.19:1
   —— 这正是暗色本来就在做的事（§16.10 的暗色分支早就给了卡片
      --bg-surface-card），本轮只是把**亮色补成同构**：
      两边都靠"一档底色差"读形状，不再靠线条。所以明暗两态的表现终于对称。

   ★ 为什么用 #F7F9FB 而不是更重的色
   #F7F9FB 是色板里的"主内容面"色（与 .w2k-main 同值），
   与面板纯白只差一档 —— 刚好够读出方块，又不会把封面图比下去。
   想要更明确一点：换成 #F1F5F8（侧栏色）即可（对比升到 1.10:1）。

   ★ 作用域刻意只到 .magazine-section
   分类页 / 标签页的卡片网格**不在面板里**（它们走 .article-region），
   那里没有面板提供轮廓，卡片自己的 1px 边是它唯一的边界 ——
   所以那边保持原样，去掉线会让卡片糊在页面底上。

   ★ 只改 border-color，不删 border-width：删宽度会改变内容盒尺寸。
      这与全站"去线"的一贯手法一致（见文件头纪律 ②）。 */
/* ★ 圆角必须在这里一并钉住，否则暗色会是 6px（亮色 4px），明暗不一致。
   根因又是一个 `:is()` 里的 id：§12.2 那条暗色规则是
     `html.dark body.w2k#top#top#top#top#top :is(.w2k-dt, …, #article-content, .media-card, .w2k-card)`
     { border-radius: var(--soft-r-lg) }
   它的 `:is()` 参数里含 **`#article-content`** —— 按规范 `:is()` 取"最具体参数"的权重，
   于是整条变成 **6 个 id**，稳压 §16.10 那条 5 个 id 的 `border-radius: 4px`，
   卡片在暗色下就一直是 6px（亮色因为对手不同，是 4px）。
   —— 这是本项目第 6 次栽在 `:is()` 的权重上（第 55 轮 `.w2k-tbtn` 同源）。
   **判别口诀补一条：看到 `:is(...)`，先把括号里扫一遍有没有 `#`。** */
html:not(.dark) body.w2k#top#top#top#top#top#top
  .magazine-section .media-cards :is(.media-card, .w2k-card) {
  background-color: #F7F9FB !important;
  border-color: transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
html.dark body.w2k#top#top#top#top#top#top
  .magazine-section .media-cards :is(.media-card, .w2k-card) {
  background-color: var(--bg-surface-card, #2D2D2D) !important;
  border-color: transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}


/* ==========================================================================
   21. 移动端菜单栏的搜索按钮：去底色，只留主题色图标（第 59 轮）
   ==========================================================================
   ★ 为什么前 8 轮都没发现它
   --------------------------------------------------------------------------
   `.w2k-search-toggle` 是**移动端专属**元素（第 29 轮加的，桌面端整块
   `display:none`）。而我此前所有颜色审计（warm.mjs / contrast.mjs /
   stateaudit.mjs）**都在 1440px 下跑** —— 这个按钮在桌面视口里根本不参与渲染，
   于是完整地漏过了 8 轮配色改造，一直保留着第 36 轮那套暖灰：
     背景 #DCD8CF（暖灰）  边框 1px #9E9A92（全站唯一剩下的中灰硬线）
     图标 = fill:currentColor，但按钮字色是 #1C1A17（暖近黑）
   —— 也就是说：**凡是"只在某个断点下才出现"的元素，桌面审计一律看不见。**

   ★ 改法（按需求：不要底色，直接图标）
   --------------------------------------------------------------------------
   去掉背景与外框，图标改用主题主蓝；hover 给一层极淡的浅蓝底作为反馈
   （无边框时若连 hover 都没有，按钮会完全没有可点提示）。
   ★ 不需要 media query：`.w2k-search-toggle` 自身在桌面就是 display:none，
     把选择器挂在它下面，天然只在移动端生效。
   ★ 图标是 `<rect fill="currentColor">`，所以只要 `color` 到位就会跟着变色；
     额外补一条 `fill: currentColor` 是防御性的 —— 防止别处的 `fill` 规则压过
     这个 presentation attribute（CSS 永远赢过 fill 属性）。
   ========================================================================== */

html body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 3px !important;
  color: var(--soft-blue, #2F6FAE) !important;
}
html body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn:hover,
html body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn:focus-visible,
html body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn[aria-expanded="true"] {
  color: var(--soft-blue-active, #285F94) !important;
  background-color: var(--soft-hover, #E7EFF6) !important;
}
/* 图标跟随按钮字色 */
html body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn svg,
html body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn svg * {
  fill: currentColor !important;
}
/* 展开面板时那枚按钮保持"按下"的浅蓝底，与浮出的 .w2k-search-panel 呼应
   —— 这样面板打开时能看出它是从哪儿弹出来的。 */

/* 暗色：同一套结构，色值走暗色既有阶梯 */
html.dark body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 3px !important;
  color: #5B93D6 !important;
}
html.dark body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn:hover,
html.dark body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn:focus-visible,
html.dark body.w2k#top#top#top .w2k-search-toggle .w2k-search-btn[aria-expanded="true"] {
  color: #8FBEF0 !important;
  background-color: #2D2D2D !important;
}


/* ==========================================================================
   22. 移动端搜索浮出面板 .w2k-search-panel（第 59 轮）
   --------------------------------------------------------------------------
   症状（用户截图，375px）：点开右上角放大镜后浮出的面板是**米色 `#ECE9D8`**
   —— 那是 Windows XP 的经典 face 色，属于第 47 轮"冷蓝灰"改造的漏网之鱼：
   它只写在 `@media (max-width:767px)` 里，而前 12 轮的审计全部跑在 1440px，
   **移动端专属元素在桌面视口根本不参与布局** —— 与 §21 那枚放大镜是同一个盲区。

   来源（实测 CSSOM 定位，非猜测）：
     flat-industrial-clean.css:1839-1850  `.w2k-search-panel`
       { background:#ece9d8; border:1px solid #9e9a92; border-radius:0; box-shadow:none }
     flat-industrial-clean.css:1892-1895  `html.dark .w2k-search-panel`
       { background:#2c2c2c; border-color:#3a3a3a }
   面板内的输入框/边框色本身已经走令牌（#CBD8E2 / #FFFFFF），没问题；
   真正"没适配"的是**面板本体**，外加暗色下漏掉的圆角。

   实测几何（375px，展开态）：
     .w2k-search-panel      x=56..356  w=300  pad 6px 8px  bd 1px #9E9A92
       .w2k-search (form)   x=65..347  w=282  bd 1px #CBD8E2   ← ①
         .w2k-input         x=66..280  w=214  bd 1px #CBD8E2   ← ②
         .w2k-btn-search    x=284..346 w=62
   ① 和 ② 相差 1px —— 又是一组"框套框"（表单壳给输入框+按钮整体描了一圈，
   而输入框自己也有轮廓）。按本项目既定手法处理：**只把表单壳的边框改透明，
   不动 border-width**，几何一个像素不变。
   ========================================================================== */

/* 22.1 面板本体：白色浮层（浅色）/ 暗色阶梯（深色），补圆角与投影
   —— 直角改成 --soft-r-md(5px)，与 §2 的窗口、§20 的 GroupBox 同族。
   ★ 不写 media query：`.w2k-search-panel` 只在 ≤767px 存在，
     选择器天然只在移动端生效（同 §21 的注释）。
   ★ 只改 border-color 不写 border 简写：宽度沿用 clean.css 的 1px，
     少一次几何变动。 */
html:not(.dark) body.w2k#top#top#top .w2k-search-panel {
  background-color: #FFFFFF !important;
  border-color: var(--soft-line) !important;
  border-radius: var(--soft-r-md) !important;
  box-shadow: var(--soft-sh-panel) !important;
}
html.dark body.w2k#top#top#top .w2k-search-panel {
  background-color: #2D2D2D !important;
  border-color: #3A3A3A !important;
  border-radius: var(--soft-r-md) !important;
  /* 浅色那层 --soft-sh-panel 是 rgba(40,70,90,.08)，在暗底上等于不存在，
     浮层要"浮起来"必须换成一圈真正的暗投影。 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .55) !important;
}

/* 22.2 表单壳去外框（见上方几何说明）。
   明暗各写一半 —— 第 47 轮就因为只写 :not(.dark) 那半，暗色比浅色高了 66px。 */
html:not(.dark) body.w2k#top#top#top .w2k-search-panel .w2k-search,
html.dark body.w2k#top#top#top .w2k-search-panel .w2k-search {
  border-color: transparent !important;
}

/* 22.3 暗色下输入框与按钮的圆角补齐。
   浅色的 4px 来自 §5.4（`--soft-r-sm`），暗色此前被 clean.css §25 的直角规则
   接手成了 0px —— 于是同一个面板明暗两态圆角不一致（第 47 轮卡片圆角 4/6px
   不一致是同一个毛病）。这里显式对齐。 */
html.dark body.w2k#top#top#top .w2k-search-panel .w2k-input,
html.dark body.w2k#top#top#top .w2k-search-panel .w2k-btn-search {
  border-radius: var(--soft-r-sm) !important;
}

/* 22.4 暗色输入框换成与暗色阶梯一致的一档，别用 clean.css 的 #363636
   （它比面板 #2D2D2D 只亮 9 级，边界全靠 8% 白边，读起来像糊在一起）。 */
html.dark body.w2k#top#top#top .w2k-search-panel .w2k-input {
  background-color: #383838 !important;
  border-color: #4A4A4A !important;
  color: #E6E6E6 !important;
}
html.dark body.w2k#top#top#top .w2k-search-panel .w2k-input::placeholder {
  color: #A0A0A0 !important;
}


/* ==========================================================================
   23. 左侧栏（Sidebar）重构 · 第 60 轮
   --------------------------------------------------------------------------
   只动左侧栏。右栏正文 / 顶部导航 / 工具栏 / 搜索 / 列表 / 状态栏一条不改。
   作用域一律带 `.w2k-sidebar`（列表页）或 `.w2k-rail`（详情页）前缀。

   ── 先量后改：三条"规格与仓库不符"，已按实测为准 ─────────────────────────
   ① **"外框硬黑线"已经不存在。** 实测 `.w2k-sidebar` 的 T/L/B 三边在
      第 47 轮就改成了 `1px rgba(0,0,0,0)`（透明），**R 边是 1px #D7E0E7** ——
      正是规格 §二 要的那个值。所以"加一条右侧分割线"**是零改动、零重排**。
      真正让人觉得"厚重"的是下一行那条东西。
   ② **"巨大的空白死盒子"的真身是白色大底板，不是黑线。** 机制（实测）：
        .w2k-client-explorer  display:grid  align-items:stretch
        .w2k-sidebar           grid 子项 → 被 stretch 到 max-height(100vh-24px)=876px
          details.w2k-sidebar-details   flex:1 1 auto  → 吃满 762px
            .w2k-sidebar-body           flex:1 1 auto  → 吃满 741px
          而 nav.w2k-tree 只有 275px  →  **466px 的纯白死区**。
      ⇒ 修法是"停止拉伸 + 去掉白底"，见 23.1。
   ③ **规格 §四.2 说详情页标题条是"蓝色 Header"，浅色对、暗色不对。**
      实测浅色是 `linear-gradient(90deg,#2F6FAE,#3D82C2)` + 白字（托底
      background-color 是 #E9EFF5，所以 contrast.mjs 会误报成白字压浅灰）；
      **暗色是 #363636 的灰条**，不是蓝。改成 §四.2 给的 #1F4068 属于**新增**。

   ── 三个色值规格与 AA 冲突，按 FACT 既定做法改邻近可读色 ──────────────────
   ⚠ 只有第三个是真正的坑：**去掉白底板后，原本落在白底上的灰字会集体掉到
      #F1F5F8 上，对比度全部下降**，必须同时换色。
     1. §三.2 数量统计 `#8B98A3` → 在 #F1F5F8 上仅 **2.79:1**。它是真实数字文本
        （`<em class="w2k-tree-count">{{.Count}}</em>`），不是装饰。→ **#5F7180**（4.68:1）
     2. §四.3 属性表 Label `#667786` → 在 #F7F9FB 上 **4.29:1**。→ **#5F7180**（4.68:1）
     3. ★ `.w2k-tree-summary` / `.w2k-tree-count` 原为 #667786，靠白底板才勉强
        4.62:1；白底板一撤就变 4.29:1 不达标。**这是"去白底"的连带代价**，
        同一并改成 #5F7180。
   ⚠ §三.3 与 §五 给了两套不同的暗色选中值（#283B4D/#93C5FD vs #243342/#8AB4F8）。
     取 **§五**（它自称"强制规范"且标题就叫"Active 高亮"）。左侧栏内所有选中态
     统一到这一套。
   ========================================================================== */


/* --------------------------------------------------------------------------
   23.1 侧栏外壳：自然高度流 + 统一底色 + 右侧一条分割线
   --------------------------------------------------------------------------
   `align-self:start` 是"止住拉伸"的开关：grid 的 align-items:stretch 不再把
   876px 强加给它，高度回到内容高度；`max-height` 保留，所以目录很长时
   details/body 仍会被压缩并各自内部滚动（overflow-y:auto 早就在）。
   几何影响：侧栏列宽是 grid 里写死的 240px，与规格 §二"240~250px"一致，**不动**。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-client-explorer > .w2k-sidebar,
html.dark body.w2k#top#top#top .w2k-client-explorer > .w2k-sidebar {
  align-self: start !important;
  height: auto !important;
}
/* 停止逐级吃满：details 与 body 都退回"内容高度 + 可压缩" */
html body.w2k#top#top#top .w2k-sidebar > .w2k-sidebar-details,
html body.w2k#top#top#top .w2k-rail > .w2k-pane-meta,
html body.w2k#top#top#top .w2k-rail > .w2k-pane-latest {
  flex: 0 0 auto !important;
}
/* ★ 只有"文章大纲"那一段允许伸缩 —— 它本来就是 flex:1 1 auto。
   实测（第 60 轮）：标题条 +6px×3 与模块间距 6→14px 让侧栏内容比
   max-height(100vh-24px) 多出约 29px，必须有人吃掉。
   让 meta/latest 也参与收缩是错的：latest 里的最新文章列表是固定高度的，
   压它会把这几个模块的比例全部弄乱。 */
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav {
  flex: 1 1 auto !important;
}
html body.w2k#top#top#top .w2k-sidebar > .w2k-sidebar-details > .w2k-sidebar-body {
  flex: 0 1 auto !important;
  min-height: 0 !important;
}

html:not(.dark) body.w2k#top#top#top .w2k-sidebar {
  background-color: #F1F5F8 !important;
  border-right-color: #D7E0E7 !important;   /* 已经在用，写出来是为了"锁住" */
  /* 规格 §二：去除生硬的左/下黑线。三边本就是透明，显式写一遍防止将来回流。 */
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail {
  background-color: #F1F5F8 !important;
  border-color: transparent !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar {
  background-color: #1A1C1E !important;
  border-right-color: #2D3239 !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
}
html.dark body.w2k#top#top#top .w2k-rail {
  background-color: #1A1C1E !important;
  border-color: transparent !important;
}

/* 白底板撤掉 —— 这是"死盒子"的另一半。
   撤掉后其上的灰字落到 #F1F5F8，所以 23.3 的次级文字色必须同步改（见文件头 ⚠3）。 */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-body {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-body {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}


/* --------------------------------------------------------------------------
   23.2 列表页「系统目录」标题条 —— 规格 §三.1
   --------------------------------------------------------------------------
   规格这里**故意与详情页不同**：列表页用浅蓝条 + 深蓝字（轻），
   详情页保留 Win2000 实心蓝 Header（重）。两处不在同一屏，遵守规格。
   高度 20px → 32px。::after 的 "−" 折叠记号靠 currentColor 自动变色。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-title {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  background-color: #E7F0F8 !important;
  background-image: none !important;
  border-bottom: 1px solid #D7E3EC !important;
  border-radius: 3px !important;
  color: #285F94 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-title svg,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-title svg * {
  fill: currentColor !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-title {
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  background-color: #252A30 !important;
  background-image: none !important;
  border-bottom: 1px solid #2C3036 !important;
  border-radius: 3px !important;
  color: #8AB4F8 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-title svg,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sidebar-title svg * {
  fill: currentColor !important;
}


/* --------------------------------------------------------------------------
   23.3 树状目录 —— 规格 §三.2
   --------------------------------------------------------------------------
   Explorer 连线保留（.w2k-tree-kids 的 border-left），只把颜色压淡；
   黄色文件夹 / 小文档图标原样保留（它们由 svg 的 fill 决定，不在这里碰）。
   ⚠ 次级文字 #667786 → #5F7180：白底板撤掉后前者只有 4.29:1（见文件头 ⚠3）。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-kids {
  border-left-color: #D8E2E9 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-kids {
  border-left-color: #33383E !important;
}

/* 分组标题（分类 / 标签云 / 归档）与数量统计：同一档次级文字 */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary .w2k-tree-label,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-count {
  color: #5F7180 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node .w2k-tree-label {
  color: #263746 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary .w2k-tree-label,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-count {
  color: #8B949E !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node .w2k-tree-label {
  color: #E1E4EA !important;
}

/* 「全部分类 →」等次级链接 */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-more {
  color: #285F94 !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-more {
  color: #8AB4F8 !important;
  border-radius: 3px !important;
}

/* 悬停：统一到规格 §四.4 的 #EEF4FA / #262B33。
   节点与分组标题都要写（两者原本都是 --soft-hover #E7EFF6，同一个侧栏里
   再混两种悬停色只会显得脏）。常态与悬停必须成对写全，否则常态那条会盖掉悬停。 */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-more {
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node:hover,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node:focus-visible,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary:hover,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-more:hover {
  background-color: #EEF4FA !important;
  color: #285F94 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node:hover .w2k-tree-label,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary:hover .w2k-tree-label {
  color: #285F94 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-more {
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node:hover,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node:focus-visible,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary:hover,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-more:hover {
  background-color: #262B33 !important;
  color: #8AB4F8 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node:hover .w2k-tree-label,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-summary:hover .w2k-tree-label {
  color: #8AB4F8 !important;
}


/* --------------------------------------------------------------------------
   23.4 选中态：一套值管三处
   --------------------------------------------------------------------------
   规格 §三.3（树节点）/ §五（强制规范里的 Active）实际给了两套暗色值，
   这里统一取 §五：#243342 + #8AB4F8，指示条用 #4E8FD0（第 59 轮已确立的暗蓝）。
   浅色两边一致：#DCEAF7 / #285F94 / 3px #2F6FAE，圆角按规格 3px。
   ★ 指示条继续用 **inset box-shadow** 而不是 border-left ——
     写 border-left 会挤掉 3px 内容盒宽度，整列文字跟着右移（第 47 轮的经验）。
   ★ 常态规则一律 `:not(.is-active):not(:hover)` 排除，别把选中态压掉（第 35/36/41 轮）。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active:hover,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active:hover {
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active:hover {
  background-color: #DCEAF7 !important;
  color: #285F94 !important;
  box-shadow: inset 3px 0 0 #2F6FAE !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active:hover {
  background-color: #243342 !important;
  color: #8AB4F8 !important;
  box-shadow: inset 3px 0 0 #4E8FD0 !important;
}
/* 选中项的标签也要跟着变色（.w2k-tree-label 被上一条常态色压着） */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active .w2k-tree-label,
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active .w2k-tree-count {
  color: #285F94 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active .w2k-tree-label,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-node.is-active .w2k-tree-count {
  color: #8AB4F8 !important;
}


/* --------------------------------------------------------------------------
   23.5 站点统计模块（列表页侧栏底部）
   --------------------------------------------------------------------------
   规格 §三 没单独写它，但它就在侧栏里、"厚重白色大底板"的另一半。
   按 §四.1 的模块容器规范收编：#F7F9FB / 1px #E0E7EC，模块间距 14px。
   legend 底色必须跟着模块底色走，否则它会露出一块方形的反差（它是压在边框上的）。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sys-summary {
  background-color: #F7F9FB !important;
  border-color: #E0E7EC !important;
  border-radius: 4px !important;
  margin: 14px 0 0 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sys-summary legend {
  background-color: #F7F9FB !important;
  color: #285F94 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sys-summary {
  background-color: #202327 !important;
  border-color: #33383F !important;
  border-radius: 4px !important;
  margin: 14px 0 0 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sys-summary legend {
  background-color: #202327 !important;
  color: #8AB4F8 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sys-key {
  color: #5F7180 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sys-val {
  color: #425466 !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sys-key {
  color: #8B949E !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sys-val {
  color: #E1E4EA !important;
}
/* 配额条：外框换成模块边框色，填充保持主蓝 */
html:not(.dark) body.w2k#top#top#top .w2k-sidebar .w2k-sys-bar {
  background-color: #FFFFFF !important;
  border-color: #D0D9E0 !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-sys-bar {
  background-color: #1A1C1E !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}


/* --------------------------------------------------------------------------
   23.6 详情页：三段式工作面板 —— 规格 §四.1
   --------------------------------------------------------------------------
   `.w2k-pane-meta / -nav / -latest` 三个 aside 就是那三段。
   实测底色已经是 #F7F9FB（暗色 #1E1E1E），只有边框色和间距要改。
   间距：原来是 .w2k-rail 的 gap:6px，规格要 14~16px → gap 归零 + margin-bottom 14px。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-rail {
  gap: 0 !important;
}
html.dark body.w2k#top#top#top .w2k-rail {
  gap: 0 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail > .w2k-pane {
  background-color: #F7F9FB !important;
  border-color: #E0E7EC !important;
  border-radius: 4px !important;
  margin: 0 0 14px !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail > .w2k-pane:last-child {
  margin-bottom: 0 !important;
}
html.dark body.w2k#top#top#top .w2k-rail > .w2k-pane {
  background-color: #202327 !important;
  border-color: #33383F !important;
  border-radius: 4px !important;
  margin: 0 0 14px !important;
}
html.dark body.w2k#top#top#top .w2k-rail > .w2k-pane:last-child {
  margin-bottom: 0 !important;
}


/* --------------------------------------------------------------------------
   23.7 详情页：模块标题条（保留 Win2000 蓝色 Header）—— 规格 §四.2
   --------------------------------------------------------------------------
   浅色：把原来的 `linear-gradient(90deg,#2F6FAE,#3D82C2)` 换成规格点的**实心**
   #2F6FAE —— 规格说"饱和度微调柔和"，实心单一色比渐变更接近工业软件。
   background-image 必须显式 none，否则渐变还压在上面。
   暗色：原来根本没有蓝条（是 #363636 灰条），按规格新增 #1F4068。
   高度 20px → 26px（取规格区间下沿：侧栏总高被 max-height 卡着，
   每段 +6px、三段共 +18px，取 26 比 28 少 6px 富余）。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-pane-title {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  background-color: #2F6FAE !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 4px 4px 0 0 !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-pane-title {
  height: 26px !important;
  min-height: 26px !important;
  padding: 0 8px !important;
  background-color: #1F4068 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 4px 4px 0 0 !important;
}
/* 标题条里的图标跟随白字 */
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-pane-title svg,
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-pane-title svg *,
html.dark body.w2k#top#top#top .w2k-rail .w2k-pane-title svg,
html.dark body.w2k#top#top#top .w2k-rail .w2k-pane-title svg * {
  fill: currentColor !important;
}


/* --------------------------------------------------------------------------
   23.8 详情页：作者条 / 属性表 / 按钮 —— 规格 §四.3
   --------------------------------------------------------------------------
   Label #667786 在 #F7F9FB 上是 4.29:1，改用 #5F7180（4.68:1）；Value 用规格值。
   属性表原来的底色是 #F7F9FB + 表头 #E9EFF5，与模块底色同值 —— 表格会"陷"进
   模块里。改成白底（暗色深一档）让它在模块内浮出来，这是 §四.1"卡片"语义的自然延伸。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-rail .win-propsheet {
  background-color: #FFFFFF !important;
  border-color: #E0E7EC !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-rail .win-propsheet {
  background-color: #1A1C1E !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
/* ⚠ 这一列**不是**落在模块底色 #F7F9FB 上 —— 属性表的 th 自带 #E9EFF5 底
   （Win2000 propsheet 的标签列配色）。用 #5F7180 会掉到 4.36:1 不达标
   （第 60 轮实测抓到的回归）。#E9EFF5 上的批准值是 **#55677A**（5.03:1），
   也就是这一列原本就在用的颜色 —— 规格 §四.3 的 #667786 在三种底上都过不了。 */
html:not(.dark) body.w2k#top#top#top .w2k-rail .win-propsheet tbody th {
  color: #55677A !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail .win-propsheet tbody td {
  color: #425466 !important;
}
html.dark body.w2k#top#top#top .w2k-rail .win-propsheet tbody th {
  color: #8B949E !important;
}
html.dark body.w2k#top#top#top .w2k-rail .win-propsheet tbody td {
  color: #E1E4EA !important;
}

/* 作者条 */
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-author {
  background-color: #FFFFFF !important;
  border-color: #E0E7EC !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-author small {
  color: #5F7180 !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-author {
  background-color: #1A1C1E !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-author small {
  color: #8B949E !important;
}

/* 按钮组：白底 + #D0D9E0 + 3px（规格 §四.3）。
   ★ 白底用 :not(:hover):not(:focus-visible) 排除状态态 —— 否则悬停/聚焦反馈被吃掉，
     这类"抬权重压掉状态"的坑本项目踩过三次。 */
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-metabtns .w2k-btn:not(:hover):not(:focus-visible),
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-toc-toggle:not(:hover):not(:focus-visible) {
  background-color: #FFFFFF !important;
  border-color: #D0D9E0 !important;
  color: #425466 !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-metabtns .w2k-btn:hover,
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-toc-toggle:hover {
  background-color: #EEF4FA !important;
  border-color: #B9D4EA !important;
  color: #285F94 !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-metabtns .w2k-btn:not(:hover):not(:focus-visible),
html.dark body.w2k#top#top#top .w2k-rail .w2k-toc-toggle:not(:hover):not(:focus-visible) {
  background-color: #262B33 !important;
  border-color: #33383F !important;
  color: #E1E4EA !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-metabtns .w2k-btn:hover,
html.dark body.w2k#top#top#top .w2k-rail .w2k-toc-toggle:hover {
  background-color: #2C333D !important;
  border-color: #3E4A57 !important;
  color: #8AB4F8 !important;
}

/* 徽章 / 标签胶囊：与按钮同一档 */
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-metabadge {
  background-color: #FFFFFF !important;
  border-color: #D0D9E0 !important;
  color: #425466 !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-metabadge {
  background-color: #262B33 !important;
  border-color: #33383F !important;
  color: #E1E4EA !important;
  border-radius: 3px !important;
}


/* --------------------------------------------------------------------------
   23.9 详情页：大纲与最新文章列表 —— 规格 §四.4
   --------------------------------------------------------------------------
   紧凑行高（22/24px，与现状一致，不动几何），只改悬停与选中。
   ★ 大纲的选中态原本是实心 #285F94 白字，是侧栏里最重的一块色。
     既然规格要把整个侧栏做成"轻盈任务窗格"，这里统一到 23.4 那套浅蓝选中
     （浅色 #DCEAF7/#285F94，暗色 #243342/#8AB4F8），侧栏内只剩一种选中语义。
     如果想保留实心蓝，删掉下面四条即可单独回退。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link:not(.is-active),
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-metalist-item:not(:hover) {
  color: #263746 !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link:hover,
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-metalist-item:hover {
  background-color: #EEF4FA !important;
  color: #285F94 !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link.is-active,
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link.is-active:hover {
  background-color: #DCEAF7 !important;
  color: #285F94 !important;
  border-radius: 3px !important;
  box-shadow: inset 3px 0 0 #2F6FAE !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-metalist-more {
  color: #285F94 !important;
  border-top-color: #E7EDF2 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-metalist-more:hover {
  background-color: #EEF4FA !important;
  color: #285F94 !important;
  border-radius: 3px !important;
}

html.dark body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link:not(.is-active),
html.dark body.w2k#top#top#top .w2k-rail .w2k-metalist-item:not(:hover) {
  color: #E1E4EA !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link:hover,
html.dark body.w2k#top#top#top .w2k-rail .w2k-metalist-item:hover {
  background-color: #262B33 !important;
  color: #8AB4F8 !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link.is-active,
html.dark body.w2k#top#top#top .w2k-rail .w2k-toc .toc-link.is-active:hover {
  background-color: #243342 !important;
  color: #8AB4F8 !important;
  border-radius: 3px !important;
  box-shadow: inset 3px 0 0 #4E8FD0 !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-metalist-more {
  color: #8AB4F8 !important;
  border-top-color: #2C3036 !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-metalist-more:hover {
  background-color: #262B33 !important;
  color: #8AB4F8 !important;
  border-radius: 3px !important;
}

/* 大纲 / 最新文章：容器随模块底色，去掉它们自带的白底与直角外框
   （否则模块里又套一层"框中框"——本项目反复拆的就是这个） */
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-toc,
html:not(.dark) body.w2k#top#top#top .w2k-rail .w2k-pane-body {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}
html.dark body.w2k#top#top#top .w2k-rail .w2k-toc,
html.dark body.w2k#top#top#top .w2k-rail .w2k-pane-body {
  background-color: transparent !important;
  border-color: transparent !important;
  border-radius: 0 !important;
}


/* --------------------------------------------------------------------------
   23.10 侧栏内部的"可压缩"安全阀
   --------------------------------------------------------------------------
   标题条 +6px×3、模块间距 +16px，侧栏总高比之前多了约 34px，而
   `.w2k-rail` 的 max-height 被 `calc(100vh - 24px)` 卡死。
   让"文章大纲"这一段自己吃掉差额并内部滚动，别让最后一段
   （.w2k-pane-latest 是 flex:0 0 auto，压不动）溢出到栏外。
   —— 第 41 轮"删 border 让整页矮 27px"的教训：几何变化必须显式兜住。
   ========================================================================== */
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav,
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav > .w2k-pane-body,
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav .w2k-toc {
  min-height: 0 !important;
}
/* 大纲段内部改成一个"上方可滚动、下方钉住按钮"的纵向 flex。
   ⚠ 不加这三条会怎样（实测过）：`.w2k-pane-body` 是 auto 高度不跟着缩，
   `.w2k-toc` 194px + 按钮 21px 把"收起目录"整块**顶出模块下沿 29px**，
   按钮会飘到"最新文章"模块上。给 body 定成 flex 容器 + toc 可滚 + 按钮
   flex:0 0 auto，按钮才会钉在这一段的底部。 */
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav > .w2k-pane-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav .w2k-toc {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav .w2k-toc-toggle,
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav .w2k-toc-empty {
  flex: 0 0 auto !important;
}
/* ★ 大纲条目自己也是 flex 子项，默认 flex-shrink:1 —— 不给 flex:0 0 auto
   它们会被**挤扁**（实测 8 行从 24px 压到 ~19.5px，scrollHeight 156 < 高 158，
   看上去像排得太挤，其实是被压出来的），而不是触发滚动。
   钉住行高之后才是我们要的"行不变形、列表内部滚动"。 */
html body.w2k#top#top#top .w2k-rail > .w2k-pane-nav .w2k-toc > * {
  flex: 0 0 auto !important;
}


/* --------------------------------------------------------------------------
   23.11 暗色下 `.w2k-tree` 的 #262626 内嵌底
   --------------------------------------------------------------------------
   来源是 `win2000.css:6728-6731`：
       html.dark body.w2k#top .w2k-sidebar .w2k-tree,
       … .win-groupbox, … .w2k-sys-summary { background-color:#262626 !important }
   权重 (1,4,2)。规格 §五 要求侧栏底色统一 #1A1C1E，所以这一层"深色卡片"要去掉
   —— 侧栏里已经不该再有第三个色阶了（浅色那半本来就是透明的）。
   ⚠ 同一组里的 `.win-groupbox` / `.w2k-sys-summary` 已由 23.5 的 (3,4,2) 接管，
     这里只补 `.w2k-tree` 这一个漏网的。
   ========================================================================== */
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree,
html.dark body.w2k#top#top#top .w2k-sidebar .w2k-tree-body {
  background-color: transparent !important;
}


/* ==========================================================================
   24. 正文里的「提示框」与「引用」—— 第 61 轮
   --------------------------------------------------------------------------
   用户反馈：「PC 端的提示框和引用，目前感觉都是一个颜色」。

   ── 实测（1440px，18 篇文章全量扫描 + 注入 blockquote 量样式）──────────────
     块                          底色          左边框           标题色
     :::info     callout-info     #F3F8FC      1px #D3E2EE      #285F94
     :::note  →  callout-default #FFFFFF      1px #D7E0E7      （无）
     :::collapse callout-warning
                 .is-collapsible #FFFFFF ✗    1px #E1E8EE      （丢了琥珀色）
     :::warning  callout-warning #FFFDF5      1px #F1E5C8      #6E5A28
     > 引用      blockquote      #F1F5F8      3px #D7E0E7      #3C4E5E

   ── 两个根因（都不是"颜色选得不好"，是结构问题）──────────────────────────
   ① **区分色只落在 1px 的左边框上。** `win2000.css:4092-4112` 给五种 kind 写的
      全部内容就是 `border-left-color: var(--accent-*)`，而左边框宽度是继承来的
      **1px**。一条 1px 的彩条放在 1140px 宽的正文里等于看不见，
      于是所有提示框只剩"底色深浅"一个区分维度。
   ② **四种底色全是"接近白的浅调"**：#F3F8FC / #FFFFFF / #FFFDF5 / #F1F5F8，
      两两色差不到 4%，叠在白正文上就是四个一模一样的灰盒子。

   另有一个 bug：**`:::collapse` 在 main.go:1417 被渲染成
   `details.paper-callout.callout-warning.is-collapsible`（复用了 warning 的类名），
   但它实测底色是 #FFFFFF 而不是琥珀色** —— 折叠提示框和普通 default 框长得一模一样，
   警告语义完全丢失。

   ── 修法 ─────────────────────────────────────────────────────────────────
   · 左边条改成 **3px，用 `inset 3px 0 0` 的 box-shadow 画，不写 border-left-width。**
     把 1px 边框改 3px 会让内容盒缩 2px、整块文字右移（第 41 轮删 border 让整页
     矮 27px 的老账）。**inset 阴影不参与盒模型，几何零变化。**
     同时把原来那条 1px 的 border-left-color 改透明，免得和 3px 条叠成双层。
   · 底色按 kind 拉开色相差（蓝 / 中性 / 琥珀 / 绿 / 红），但全部去饱和，
     仍落在本项目"冷蓝灰 + 单一琥珀强调"的调子里。
   · 引用块改成**无底色的左竖线引文**（透明底 + 3px 竖线 + 次级文字色）——
     让"引用"和"提示框"从**形状**上就分得开，不用去比色差。
   · 顺带补全 `primary / success / danger`：`main.go:1081` 声明了 8 种 kind，
     CSS 只写了 4 种，剩下的此前是"裸 .paper-callout"，和 default 完全同色。
     （success / danger 当前正文没用到，属于补漏不是新增需求。）

   ⚠ 权重用 5 个 id：`win2000.css` 那层只有 1 id，而底色实测被更高层的规则接手，
     按 FACT 的既定档位直接上 content-surfaces 那一档（5 id）。
   ⚠ `:is()` 里只放类名、不放裸标签 —— 否则 c 位被抬高，重蹈第 59 轮的覆辙。
   ========================================================================== */

/* 24.1 通用：左边框转透明，3px 彩条交给 inset 阴影；圆角统一 3px */
html body.w2k#top#top#top#top#top .prose-paper .paper-callout {
  border-left-color: transparent !important;
  border-radius: 3px !important;
}
/* ★★ 可折叠提示框（<details>）里有**两层**子元素各自刷了不透明底色，
   把父级的琥珀底整个盖住 —— 少修一层就还是"看着像灰框"：
     · `> summary`   浅色 #F1F5F8 / 暗色 #2D2D2D   （折叠时唯一可见的一层）
     · `.callout-body` 浅色 #FAFBFD / 暗色 #1A1A1A （展开后才露出来）
   实测证据：只修 summary 时，折叠态变琥珀了，展开后正文区又变成近白，
   于是同一个框"折叠是琥珀、展开是白的"。两层一起改透明才彻底。
   —— 教训同 23.5 的 legend、同 23.x 的白底板：**改了容器底色，必须把子元素
      逐个查一遍谁自己盖了一层**，否则色相区分会被吃掉。 */
html body.w2k#top#top#top#top#top .prose-paper .paper-callout > summary,
html body.w2k#top#top#top#top#top .prose-paper .paper-callout .callout-body {
  background-color: transparent !important;
}

/* 24.2 中性 / 备注（:::default、:::note —— main.go:1180 把 note 归一到 default） */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper :is(.callout-default, .callout-note) {
  background-color: #F4F7F9 !important;
  border-color: #E2E9EE !important;
  box-shadow: inset 3px 0 0 #8FA3B3 !important;
  color: #263746 !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper :is(.callout-default, .callout-note) .callout-title {
  color: #425466 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper :is(.callout-default, .callout-note) {
  background-color: #23262A !important;
  border-color: #31363C !important;
  box-shadow: inset 3px 0 0 #5A6672 !important;
  color: #E1E4EA !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper :is(.callout-default, .callout-note) .callout-title {
  color: #A8B4BE !important;
}

/* 24.3 信息 / 主要（:::info、:::primary）—— 蓝 */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper :is(.callout-info, .callout-primary) {
  background-color: #E8F2FA !important;
  border-color: #CFE2F0 !important;
  box-shadow: inset 3px 0 0 #2F6FAE !important;
  color: #263746 !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper :is(.callout-info, .callout-primary) .callout-title {
  color: #1F5C96 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper :is(.callout-info, .callout-primary) {
  background-color: #1B2530 !important;
  border-color: #2A3B4C !important;
  box-shadow: inset 3px 0 0 #4E8FD0 !important;
  color: #E1E4EA !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper :is(.callout-info, .callout-primary) .callout-title {
  color: #8AB4F8 !important;
}

/* 24.4 成功（:::success）—— 去饱和的绿 */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .callout-success {
  background-color: #ECF5EF !important;
  border-color: #D2E6DA !important;
  box-shadow: inset 3px 0 0 #3E8A5F !important;
  color: #263746 !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .callout-success .callout-title {
  color: #2C6446 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .callout-success {
  background-color: #1A2A21 !important;
  border-color: #294436 !important;
  box-shadow: inset 3px 0 0 #4F9A6E !important;
  color: #E1E4EA !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .callout-success .callout-title {
  color: #7FC49B !important;
}

/* 24.5 警告 / 可折叠（:::warning、:::collapse）
   ★ `:::collapse` 渲染成 `details.paper-callout.callout-warning.is-collapsible`
     （main.go:1417），所以这里**只写 `.callout-warning` 不带元素类型** ——
     div 和 details 两种形态一网打尽。写 `:is(div, details).callout-warning`
     会把裸标签 `div`/`details` 塞进 `:is()`、抬高 c 位，正是第 59 轮的坑。 */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .callout-warning {
  background-color: #FDF6E4 !important;
  border-color: #EEDDB4 !important;
  box-shadow: inset 3px 0 0 #C08A2E !important;
  color: #3A3225 !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .callout-warning .callout-title,
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .callout-warning > summary {
  color: #6E5A28 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .callout-warning {
  background-color: #2A2419 !important;
  border-color: #453A22 !important;
  box-shadow: inset 3px 0 0 #A87C2E !important;
  color: #E8E2D4 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .callout-warning .callout-title,
html.dark body.w2k#top#top#top#top#top .prose-paper .callout-warning > summary {
  color: #D8B25E !important;
}

/* 24.6 危险（:::danger）—— 去饱和的红 */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper :is(.callout-danger, .callout-error) {
  background-color: #FBEFEF !important;
  border-color: #EFD5D4 !important;
  box-shadow: inset 3px 0 0 #B4544F !important;
  color: #263746 !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper :is(.callout-danger, .callout-error) .callout-title {
  color: #8E3B37 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper :is(.callout-danger, .callout-error) {
  background-color: #2A1E1E !important;
  border-color: #472E2E !important;
  box-shadow: inset 3px 0 0 #A85A56 !important;
  color: #E1E4EA !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper :is(.callout-danger, .callout-error) .callout-title {
  color: #E09A96 !important;
}

/* 24.7 引用块（markdown 的 `>`）—— 与提示框从"形状"上分开
   --------------------------------------------------------------------------
   现状：底色 #F1F5F8 + 3px 竖线，和提示框共用同一套"带底色的方盒"语言，
   所以用户读起来觉得"都一个颜色"。
   改成**无底色引文**：只留一条 3px 竖线，文字降一档。一眼就能分辨
   "这是引用"还是"这是提示框"，不用去比色差。
   ★ 竖线宽度本来就是 3px（实测），所以这里只改颜色，几何零变化。
   ★ 圆角：浅色原本 `0 4px 4px 0`、暗色 `4px 0 0 4px` —— 明暗两态圆错了边。
     统一成 `0`，纯竖线引文不需要圆角。 */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper blockquote {
  background-color: transparent !important;
  border-left-color: #B9CBD9 !important;
  border-radius: 0 !important;
  color: #425466 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper blockquote {
  background-color: transparent !important;
  border-left-color: #4A5560 !important;
  border-radius: 0 !important;
  color: #C3CBD4 !important;
}
/* 引用块内的行内元素跟着走，别留着上一层的深色 */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper blockquote :is(p, li, em, span, cite) {
  color: #425466 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper blockquote :is(p, li, em, span, cite) {
  color: #C3CBD4 !important;
}


/* ==========================================================================
   25. 代码块词法配色修正（全宽度）+ 移动端横向空间释放 —— 第 62 轮
   ========================================================================== */


/* --------------------------------------------------------------------------
   25.0 highlight.js 词法色低于 AA —— 修正（与移动端无关，明暗都生效）
   --------------------------------------------------------------------------
   第 61 轮全站扫描扫出、用户确认"一并修"。实测（/centos.html，代码区底 #F4F6F8）：
     .hljs-built_in  #B47B43 → 3.31:1  ✗
     .hljs-string    #627F5E → 4.11:1  ✗
   其余 token 都达标（punctuation 11.29 / attr 5.81）。
   **不是第 47 轮引入的** —— 这两个值在纯白底上也分别只有 3.59 / 4.35，属
   `github.min.css` 自带的老问题；第 47 轮把代码区底色从白改成 #F4F6F8 后又各降了约 0.2。
   修法：只压深这两个 token，**色相不动**（棕还是棕、绿还是绿），
   改后分别是 5.43:1 / 5.56:1。
   ★ 暗色**不需要动**：实测暗色下代码区是 #141414，词法色被另一套规则统一成了
     灰度（built_in 实测 #B4B4B4），本来就达标。所以这里用 `:not(.dark)` 锁死。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top .code-block-wrapper .hljs-built_in {
  color: #8A5A28 !important;
}
html:not(.dark) body.w2k#top#top#top .code-block-wrapper .hljs-string {
  color: #4A6B46 !important;
}
/* 代码区还有一处顺带收口：行内 code 的 #2B5C8A 在 #F1F5F8 上是 6.5:1，达标，不动。 */


/* --------------------------------------------------------------------------
   25.1 ~ 25.5 移动端（≤767px）
   --------------------------------------------------------------------------
   ⚠ 断点用 **767** 不是规格写的 768。全项目（win2000.css / clean.css / 本文件
     §17§18）都是 `max-width: 767px`；写成 768 会空出**恰好 768px 那 1 像素**，
     在那个宽度上只有本节的覆盖生效、而项目既有的移动端基础规则不生效，
     结果是"半移动半桌面"的错位。1 像素的差异没人看得见，错位会。
     —— 这条与 FACT 约束 8「断点约定是 767 不是 768」一致。

   ── 先量后改：375px 实测的横向损耗链 ─────────────────────────────────────
   首页（卡片左缘 x=30 / 屏宽 375）：
     窗口 margin 6 + 窗口 border 1 + .w2k-main padding 6 + article-region 6
     + 分区 border 1 + .media-cards padding 10  = 30px 才碰到第一张卡
     分区宽 337，网格内容区只有 315（= 375 的 84%），每张卡 **153.5px**
   详情页：正文文字列宽只有 **311px**（prose padding 24×2 + 外层 16px 损耗）
   代码块：外包 323px，实际代码内容区 297px，等宽 11.5px 下一行只放得下约 26 字符

   ── 改完的账 ─────────────────────────────────────────────────────────────
     首页卡片   153.5 → 163.5px   (+6.5%)
     列表标题   253   → 295px     (+16.6%)  ← 省略号问题的正主
     详情文字   311   → 347px     (+11.6%)
     代码块     323   → 345px     (+6.8%)
   ========================================================================== */
/* ⚠⚠ 权重：本节一律用 **5 个 id**（`.prose-paper 那条要 7 个`）。
   实测踩到的三处（都是"先量再改"才发现的，不是猜的）：
   ① `.w2k-window` 在移动端是 `width: 363px` + 父级 `.w2k-desktop{display:flex;
      justify-content:center}` **居中**出来的 6px 缝，**不是 margin** ——
      只写 margin:0 完全没用，必须把 width 打回 100%。
   ② `.prose-paper` 的 `padding:16px 24px` 出自 §15 的
      `html:not(.dark) body.w2k#top#top#top#top#top :is(.prose-paper, .reading-content,
      #article-content)` —— **`:is()` 里的 `#article-content` 带 1 个 id**，
      于是整条是 **6 个 id**（FACT 约束 6 的 id 形态）。3 个 id 的覆盖必输，
      要 **7 个 id** 才压得过。
   ③ `.magazine-section` 的 margin 输给 §20.1 的 `html:not(.dark) body.w2k#top#top#top
      .magazine-section` —— 同样是 3 id，但它多一个 `.dark` 类，**b 位更高**。
      （本层写覆盖时漏了 `:not(.dark)`，第 47 轮的那个坑又出现了一次。） */
@media screen and (max-width: 767px) {

  /* ---- 25.1 外层大框：铺满屏幕、去掉外边框与圆角 --------------------
     只改 border-**color** 不删 border-width：删宽度会连带改变内容盒尺寸、
     整页重排（第 41 轮实测矮 27px 的老账）。透明边框在屏幕边缘等于不存在。 */
  html body.w2k#top#top#top#top#top .w2k-window {
    width: 100% !important;          /* ← 真正的开关，见上方 ⚠① */
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-radius: 0 !important;
  }
  html body.w2k#top#top#top#top#top .w2k-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 实测 .magazine-feed 在 .w2k-main 之内还留了 6px（首页那 6px 缝的来源） */
  html body.w2k#top#top#top#top#top :is(#article-region, .article-region, .magazine-feed) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* 详情页工作台同样铺满 */
  html body.w2k#top#top#top#top#top .w2k-pane-doc {
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    border-radius: 0 !important;
  }

  /* ---- 25.2 首页分区面板与列表：左右各 8px，内部收到 10px ---------- */
  /* ★ 必须同时把 width 打回 auto。
     实测：`.magazine-section` 上游带着显式 `width:100%`（box-sizing:border-box），
     光给 margin 8px 会让右边顶出屏幕 —— **横向溢出 7px**（scrollW 382 > 375）。
     width:auto 之后外边距才会真正从宽度里扣掉。 */
  html body.w2k#top#top#top#top#top .magazine-section {
    width: auto !important;
    max-width: none !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    border-radius: 4px !important;
    border-color: #D7E0E7 !important;
  }
  html body.w2k#top#top#top#top#top .magazine-section > .magazine-section-head {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  /* ★ 文字列表（.w2k-dt）才是"标题被压出省略号"的正主。
     实测每行到文字之前先吃了 **23px**：外层包装 14px + .w2k-dt-link padding 9px。
     外层归零、link 收到 10px → 文字左缘从 x=43 提到 x=30，两侧共 +26px。 */
  html body.w2k#top#top#top#top#top .magazine-section .w2k-dt :is(.w2k-dt-list, .w2k-dt-row) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body.w2k#top#top#top#top#top .magazine-section .w2k-dt-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ---- 25.3 双列图片网格：间距 8px，两列占满 ------------------------ */
  html body.w2k#top#top#top#top#top .magazine-section .media-cards {
    gap: 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* ---- 25.4 详情页正文：铺满 + 内距 16/14 --------------------------
     ★ 这里必须是 **7 个 id**，理由见本节抬头 ⚠②。
     ★★ 底色**必须明暗分开**：`.prose-paper` 在暗色下的文字是 #E6E6E6，
        如果按规格字面写成无条件的 `background: #FFFFFF`，暗色移动端就变成
        **浅灰字压白底 = 1.25:1**，正文直接"消失"。
        —— 第 62 轮实测抓到的回归（375px 暗色 /nuyekk 一次报 14 条）。
        **规格写"背景铺满纯白"时，默认它只描述了浅色态。**
        宽度与内距明暗共用，只有底色分家。 */
  html body.w2k#top#top#top#top#top#top#top .prose-paper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px 14px !important;
    margin: 0 !important;
  }
  html:not(.dark) body.w2k#top#top#top#top#top#top#top .prose-paper {
    background-color: #FFFFFF !important;
  }
  html body.w2k#top#top#top#top#top .w2k-breadcrumb {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* ---- 25.5 代码块：拉满 + 横向顺畅滚动 ----------------------------
     实测原本 .code-block-wrapper 带 -6px 负外边距去"出血"，
     在 prose padding 24px 的前提下净内缩 18px。归零（规格给的 margin: 12px 0）
     后配合 prose 的 14px，净内缩降到 14px，块宽反而变大。 */
  html body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    border: 1px solid #D7E0E7 !important;
    border-radius: 3px !important;
    overflow: hidden !important;   /* 让 header 的直角服从 3px 圆角 */
  }
  html body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper .code-header {
    height: 26px !important;
    min-height: 26px !important;
  }
  html body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper pre.code-body {
    padding: 10px 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: pre !important;
  }
  html body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper pre.code-body code {
    font-size: 12px !important;
    white-space: pre !important;
    display: block !important;
    width: max-content !important;   /* 让 code 撑到内容宽，滚动条才在 pre 上生效 */
    min-width: 100% !important;
  }
}


/* ==========================================================================
   26. 第 63 轮：移动端暗色白边 + 详情页下载框 / 隐藏锁 / 引用
   --------------------------------------------------------------------------
   用户反馈：「修正移动端黑暗样式适配，如图的白边，详情页的 引用和下载框」。

   ── 实测（375 / 1440，明暗对照）────────────────────────────────────────
   ① **移动端暗色有两圈白边**，来自 §25 里**我照着规格字面写的两条无条件浅色**：
        `.magazine-section`   border-color: #D7E0E7   ← 规格 §二 给的浅色值
        `.code-block-wrapper` border: 1px solid #D7E0E7
      暗色下它们仍是 #D7E0E7（浅灰蓝），在 #1E1E1E 上就是两道白框。
      **这是"规格只描述了浅色态"这个坑的第二次现形** —— 上一轮是
      `background: #FFFFFF`（浅字压白底 1.25:1），这一轮换成 border。**同一轮埋两颗雷。**

   ② **下载框 / 隐藏锁在暗色下整体偏亮**：实测
        .paper-download-card  bg #333333  border #3A3A3A
        .paper-hide-lock      bg #333333  border #3A3A3A
        .download-filetype    bg #2D2D2D   .download-code bg #363636
      这是 win2000.css 的老暗色阶梯，**比第 47 轮之后的 #1E1E1E / #202327 亮一大截**，
      在深底上读起来就是"两块浅盒子"。圆角也还是 0，与第 61 轮统一过的提示框（3px）不一致。

   ③ **隐藏锁那条蓝头** `::before { content:"受保护的内容" }` 在暗色下仍是**亮蓝渐变**，
      与正文的暗蓝体系冲突；浅色下 `.hide-lock-form` 还是 `#C0C0C0`（Win95 银），
      在一张白卡里格外扎眼。

   ④ **引用块（blockquote）**：第 61 轮我只改了 `border-left-color`，想去掉底色做成
      "竖线引文"；但外层还剩一圈 1px 框（浅色 #9E9E9E / 暗色 #383838），
      所以它看着仍是"一个带框的灰盒子"，只是里头的竖线换了色。这一轮把那圈框收掉。

   ⚠ 权重一律 5 个 id（对手是 win2000.css 的暗色规则与 flat 层的卡片规则）。
   ⚠ 每一条都明暗分写 —— 本轮挨的就是"只写一半"的打。
   ========================================================================== */

/* ---- 26.1 修掉 §25 埋的两条移动端白边（明暗分写） ---- */
@media screen and (max-width: 767px) {
  html:not(.dark) body.w2k#top#top#top#top#top .magazine-section {
    border-color: #D7E0E7 !important;
  }
  html.dark body.w2k#top#top#top#top#top .magazine-section {
    border-color: #33383F !important;
  }
  html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper {
    border-color: #D7E0E7 !important;
  }
  html.dark body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper {
    border-color: #33383F !important;
  }
}

/* ---- 26.2 下载框：并入模块卡阶梯（浅 #FFFFFF+#E0E7EC / 暗 #202327+#33383F），圆角 3px ---- */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .paper-download-card {
  background-color: #FFFFFF !important;
  border-color: #E0E7EC !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .paper-download-card :is(.download-filetype, .download-code, .download-main) {
  background-color: #F7F9FB !important;
  border-color: #E0E7EC !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .paper-download-card .download-main {
  color: #285F94 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .paper-download-card {
  background-color: #202327 !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .paper-download-card :is(.download-filetype, .download-code, .download-main) {
  background-color: #1A1C1E !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .paper-download-card .download-main {
  color: #8AB4F8 !important;
}

/* ---- 26.3 隐藏锁：同一套；蓝头在暗色下压成 #1F4068 ---- */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .paper-hide-lock {
  background-color: #FFFFFF !important;
  border-color: #E0E7EC !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .paper-hide-lock .hide-lock-form {
  background-color: #F1F5F8 !important;   /* 原来是 #C0C0C0（Win95 银），白卡里太扎眼 */
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper .paper-hide-lock .hide-lock-form :is(input, button) {
  border-color: #D0D9E0 !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .paper-hide-lock {
  background-color: #202327 !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .paper-hide-lock .hide-lock-form {
  background-color: #1A1C1E !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper .paper-hide-lock .hide-lock-form :is(input, button) {
  background-color: #262B33 !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
/* 那条 ::before 蓝头：浅色保留原来的蓝渐变，暗色拉平到 #1F4068
   （与侧栏「详情页标题条」同一支暗蓝，见 §23.7）。
   ★ 必须 background-image:none —— 光改 background-color 是盖不住渐变的。 */
html.dark body.w2k#top#top#top#top#top .prose-paper .paper-hide-lock::before {
  background-image: none !important;
  background-color: #1F4068 !important;
  color: #FFFFFF !important;
  border-radius: 3px 3px 0 0 !important;
}

/* ---- 26.4 引用块：收掉外层那圈多余的 1px 框 ----
   第 61 轮想做的是"无底色竖线引文"，但只改了 border-left-color，
   外层还留着 `border: 1px solid`（浅 #9E9E9E / 暗 #383838）——
   于是它仍然是"一个带框的灰盒子，只是竖线换了色"。
   这里把**除左边之外**的三边改透明，宽度不动（几何零变化），只留 3px 竖线。 */
html:not(.dark) body.w2k#top#top#top#top#top .prose-paper blockquote {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: #B9CBD9 !important;
  border-radius: 0 !important;
}
html.dark body.w2k#top#top#top#top#top .prose-paper blockquote {
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: #4A5560 !important;
  border-radius: 0 !important;
}


/* ==========================================================================
   27. 代码块收尾（红点 / 滚动条 / 复制键）+ 线条图标 —— 第 64 轮
   ========================================================================== */


/* --------------------------------------------------------------------------
   27.1 ★★ 根除刷新时闪现的「Mac 红点」—— 本轮真正的那条 bug
   --------------------------------------------------------------------------
   ── 先量再改：全站扫"红色伪元素"，真凶只有一个 ──────────────────────────
        app.css:138
        .prose-paper pre::after {
          content:""; position:absolute; top:16px; left:16px;
          width:9px; height:9px; border-radius:50%;
          background:#e56b63; box-shadow:15px 0 #e5b75b,30px 0 #67b979;
        }
   红 `#e56b63` / 黄 `#e5b75b` / 绿 `#67b979`，画在 **<pre> 的左上角** ——
   正是用户说的"代码框左上角闪现红点/小圆圈"。

   ── 为什么只有"刷新/脚本未加载时"才看得见（关键）───────────────────────
   `app.css:523-524` 确实关掉了它，但选择器是：
        .prose-paper .code-block-wrapper pre.code-body::after { display:none }
   **它要求 `.code-block-wrapper` 这一层存在**，而那一层是
   `static/js/detail.js:24-41` 运行时才包上去的。
   ⇒ **JS 跑完之前，`<pre>` 没有那层祖先 → 关闭规则不匹配 → 红黄绿三点照画。**
   实测（`flash-recon.mjs`，JS 禁用）已复现：每个 `<pre>` 左上角一颗红点。
   这就是"页面刷新/脚本未完全加载时闪现"的完整机制。

   ── 修法 ─────────────────────────────────────────────────────────────────
   写一条**不依赖任何 JS 产物**的规则：直接打在 `.prose-paper pre::after` 上。
   顺带把 `::before` 一起关（`app.css:139` 是 `content:attr(data-lang)` 的旧语言标签，
   Go 侧从不输出 `data-lang`，实测 content 为空串，关掉零影响）。
   再补一组"防回归"的类名兜底：万一将来有人给代码块加圆点类，也一并摁死。
   ★ 权重 5 个 id：对手 app.css:138 是 (0,2,1)，但同一批里还有别的，
     按 FACT 既定档位直接上高权重，不必再数。
   ========================================================================== */
html body.w2k#top#top#top#top#top .prose-paper pre::after,
html body.w2k#top#top#top#top#top .prose-paper pre::before,
html body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper pre.code-body::after,
html body.w2k#top#top#top#top#top .prose-paper .code-block-wrapper pre.code-body::before,
html body.w2k#top#top#top#top#top .prose-paper :is(.mac-dots, .code-dots, .code-dot,
    .dot-red, .dot-yellow, .dot-green, .window-dots, .traffic-lights, .code-lights) {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  visibility: hidden !important;
}
/* 顺带把 CODE 标题条上的圆点也摁死（旧主题 front-theme.css:316 的三个 macOS 圆点，
   win2000.css:3736 已关过一次，这里再兜一层，双保险） */
html body.w2k#top#top#top#top#top .code-header::before,
html body.w2k#top#top#top#top#top .code-header::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   27.2 代码块横向滚动条：细长 + 冷灰蓝（原来是发黄的 #d1c7b7）
   --------------------------------------------------------------------------
   实测来源 `app.css:512-522`：
     scrollbar-width: thin; scrollbar-color: #d1c7b7 transparent;
     ::-webkit-scrollbar { height: 5px }
     ::-webkit-scrollbar-track { background: #faf5eb }   ← 米黄
     thumb #d1c7b7 / hover #b9ad9b                       ← 暖米，正是"发黄"的来源
   而且这些规则**只写在 `.code-block-wrapper` 之下**，JS 未跑时（裸 <pre>）
   连它们都不生效，看到的是浏览器默认滚动条。所以这里两条都要覆盖：
   带 wrapper 的 + 不带的（裸 `pre`，覆盖首帧）。
   ★ 同时写 `scrollbar-color`（Firefox）与 `::-webkit-scrollbar-*`（Chromium）。
   ========================================================================== */
/* 裸 pre（detail.js 还没跑时的首帧形态） */
html body.w2k#top#top#top .prose-paper pre {
  scrollbar-width: thin;
  scrollbar-color: #C2D1DE transparent;
}
html:not(.dark) body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
html:not(.dark) body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-track,
html:not(.dark) body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-corner {
  background: transparent !important;
}
html:not(.dark) body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-thumb {
  background: #C2D1DE !important;
  border-radius: 2px !important;
}
html:not(.dark) body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-thumb:hover {
  background: #9DB4C8 !important;
}
html.dark body.w2k#top#top#top .prose-paper pre {
  scrollbar-width: thin;
  scrollbar-color: #3B424C transparent;
}
html.dark body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar {
  height: 4px;
  width: 4px;
}
html.dark body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-track,
html.dark body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-corner {
  background: transparent !important;
}
html.dark body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-thumb {
  background: #3B424C !important;
  border-radius: 2px !important;
}
html.dark body.w2k#top#top#top .prose-paper pre::-webkit-scrollbar-thumb:hover {
  background: #525C6A !important;
}
/* 表格滚动容器同族（.table-scroll 也是横向滚动，同一种材质） */
html:not(.dark) body.w2k#top#top#top .prose-paper .table-scroll {
  scrollbar-width: thin;
  scrollbar-color: #C2D1DE transparent;
}
html:not(.dark) body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar { height: 4px; }
html:not(.dark) body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar-track { background: transparent !important; }
html:not(.dark) body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar-thumb {
  background: #C2D1DE !important;
  border-radius: 2px !important;
}
html:not(.dark) body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar-thumb:hover { background: #9DB4C8 !important; }
html.dark body.w2k#top#top#top .prose-paper .table-scroll {
  scrollbar-width: thin;
  scrollbar-color: #3B424C transparent;
}
html.dark body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar { height: 4px; }
html.dark body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar-track { background: transparent !important; }
html.dark body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar-thumb {
  background: #3B424C !important;
  border-radius: 2px !important;
}
html.dark body.w2k#top#top#top .prose-paper .table-scroll::-webkit-scrollbar-thumb:hover { background: #525C6A !important; }


/* --------------------------------------------------------------------------
   27.3 复制按钮：去掉底框，只留白色图标
   --------------------------------------------------------------------------
   实测现状（§10，第 47 轮我自己加的）：蓝底上的半透明白胶囊
     background-color: rgba(255,255,255,.16)  border-color: rgba(255,255,255,.34)
   按要求改成"无底无框"，hover 只让图标透明度微变。
   ★ hover 用 `:hover` 显式覆盖，常态那条要带 `:not(:hover)` 排除状态态
     （否则 5 个 id 的常态规则会把 hover 一起压掉 —— 本项目踩过三次的坑）。
   ========================================================================== */
html body.w2k#top#top#top#top#top .code-block-wrapper .copy-code:not(:hover):not(:focus-visible) {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html body.w2k#top#top#top#top#top .code-block-wrapper .copy-code {
  border-width: 0 !important;      /* 直接去掉整圈边框宽度：它是 header 里的独立小按钮，不影响外部几何 */
  border-radius: 3px !important;
  color: #FFFFFF !important;
  opacity: .92 !important;
  transition: opacity .12s linear !important;
}
html body.w2k#top#top#top#top#top .code-block-wrapper .copy-code:hover,
html body.w2k#top#top#top#top#top .code-block-wrapper .copy-code:focus-visible {
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  opacity: .78 !important;
}
/* 图标尺寸收到 13~14px，线条风格统一 */
html body.w2k#top#top#top#top#top .code-block-wrapper .copy-code svg {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* 已复制：换成对勾时给一点主色，反馈仍清晰 */
html body.w2k#top#top#top#top#top .code-block-wrapper .copy-code.is-copied {
  color: #FFFFFF !important;
  opacity: 1 !important;
}


/* --------------------------------------------------------------------------
   27.4 线条图标（search / sun / moon）的渲染规范
   --------------------------------------------------------------------------
   这三个图标已在 `templates/win2000.html` 的 `{{define "w2kIcon"}}` 里
   从"像素 <rect> 拼图"换成了 `<path>/<circle>` 描边线条（见模板改动）。
   线条图标必须 `fill:none; stroke:currentColor`，而本项目里有若干条
   `fill: currentColor !important` 的规则（§21 的移动端放大镜、§23 的侧栏标题
   svg、§23.7 的面板标题 svg 等）—— 它们会把描边图形**整个填实成色块**。
   所以这里用 **5 个 id + 类名 `.w2k-ico-line`** 明确复位，权重高于上述各条。
   ★ 尺寸锁 14px：既满足"14~16px"，也比原来的 12px 像素图更清晰。
   ========================================================================== */
html body.w2k#top#top#top#top#top :is(.w2k-ico-line, .w2k-ico-line *) {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  shape-rendering: geometricPrecision !important;
}
html body.w2k#top#top#top#top#top .w2k-ico-line {
  width: 14px !important;
  height: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
  display: inline-block !important;
  vertical-align: -2px !important;
  overflow: visible !important;
}
/* 标题栏里的日月图标比正文再小半档（按钮本身只有 16px 高，14px 会顶格） */
html body.w2k#top#top#top#top#top .w2k-titlebar .w2k-ico-line {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
  vertical-align: 0 !important;
}
/* 搜索框里的放大镜：跟随占位符的浅灰，不要跟着正文的深色 */
html:not(.dark) body.w2k#top#top#top#top#top .w2k-search-icon .w2k-ico-line {
  color: #5F7180 !important;
}
html.dark body.w2k#top#top#top#top#top .w2k-search-icon .w2k-ico-line {
  color: #8B949E !important;
}


/* ==========================================================================
   28. 排版塌陷 / 图集按钮 / 图片查看器 / 音频播放器 —— 第 65 轮
   ========================================================================== */


/* --------------------------------------------------------------------------
   28.1 ★★ 首页·分类页「偶发排版错乱」的真正根因与修法
   --------------------------------------------------------------------------
   ── 先量再改：不是 JS 瀑布流 ─────────────────────────────────────────────
   规格判断是"瀑布流脚本算列宽时图片还没下载完"。**实测不成立**：
     · `.media-cards` 是**纯 CSS Grid**（`media-cards.css:87-93`
       `display:grid; grid-template-columns: repeat(var(--media-cols,4), minmax(0,1fr))`），
     · 全仓 grep 不到任何 `.media-cards` / `.media-card` 的布局 JS
       （detail.js 里的图集逻辑只管详情页的 `:::gallery`，不碰首页卡片）。
   所以**没有"算列宽"的脚本，也就没有"时机"问题**。

   ── 实测到的真实现象 ─────────────────────────────────────────────────────
   把 `media-cards.css` 屏蔽掉（模拟"样式表还没到位"的首帧）：
     .media-cards   display=block  cols=none
     卡片 w=966（全宽）y=112,710,1307,1905  ← **六张卡竖向摞成一列**
   即"卡片没有并排、一张张堆下来"。规格描述的"挤压堆叠在最左侧"是同一件事
   的另一种观感。**根因是样式表到位前的首帧形态，不是图片加载时机。**

   ── 修法（两条一起上）────────────────────────────────────────────────────
   ① **把网格的关键骨架写进 `w2kCriticalCSS`（首帧内联样式）** ——
      这是本项目对"首帧抢绘"的既定手法（见 win2000.html:78-83 的注释）。
      内联样式随文档一起解析，**永远不存在"外链还没到"的窗口**。
      已加在 `templates/win2000.html` 的 `w2kCriticalCSS` 末尾。
   ② 下面这段是**同一件事的 CSS 层兜底**：万一有人把内联那段删了，
      只要 soft-industrial.css 到位，网格也会立刻恢复。
   ★ 这里**不加 `aspect-ratio`**：卡片比例现在由
     `.media-card-media { height:0; padding-top:calc(var(--media-ratio-h) + var(--media-size-adj)) }`
     实现（media-cards.css:165-170），它**不依赖图片是否加载**，本来就是稳的；
     再叠一条 `aspect-ratio` 会和 `height:0` 打架。
   ========================================================================== */
html body.w2k#top .media-cards {
  display: grid !important;
  grid-template-columns: repeat(var(--media-cols, 4), minmax(0, 1fr)) !important;
  align-items: start !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
html body.w2k#top .media-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  width: auto !important;
}
/* 封面盒子：比例占位必须与 media-cards.css 一致，否则首帧高度会跳 */
html body.w2k#top .media-card-media {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: calc(var(--media-ratio-h, 150%) + var(--media-size-adj, -8px)) !important;
  overflow: hidden !important;
}
html body.w2k#top .media-card-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* --------------------------------------------------------------------------
   28.2 图集「加载更多图片」按钮 —— 去掉脏黄灰
   --------------------------------------------------------------------------
   实测现状（`.paper-gallery-loadmore`）：bg #E4EBF1 / border #D7E0E7 / **radius 0**
   / c #263746 / fs 12px / pad 0 14px。半径 0 与全站 3px 的语言不一致。
   ⚠ 当前 18 篇文章的图集都没超过首批 13 张，所以这个按钮**页面上还不存在** ——
     样式是按规格写好的，等哪篇图集变大就会生效（同第 61 轮的引用块）。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top#top#top :is(.paper-gallery-loadmore, .paper-gallery-more) {
  background-color: #F4F6F8 !important;
  border: 1px solid #D8E0E6 !important;
  border-radius: 3px !important;
  color: #425466 !important;
  font-size: 12.5px !important;
  padding: 5px 14px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top :is(.paper-gallery-loadmore, .paper-gallery-more):hover,
html:not(.dark) body.w2k#top#top#top#top#top :is(.paper-gallery-loadmore, .paper-gallery-more):focus-visible {
  background-color: #E7EFF6 !important;
  border-color: #2F6FAE !important;
  color: #2F6FAE !important;
}
html.dark body.w2k#top#top#top#top#top :is(.paper-gallery-loadmore, .paper-gallery-more) {
  background-color: #23272D !important;
  border: 1px solid #363C44 !important;
  border-radius: 3px !important;
  color: #C3CBD4 !important;
  font-size: 12.5px !important;
  padding: 5px 14px !important;
}
html.dark body.w2k#top#top#top#top#top :is(.paper-gallery-loadmore, .paper-gallery-more):hover,
html.dark body.w2k#top#top#top#top#top :is(.paper-gallery-loadmore, .paper-gallery-more):focus-visible {
  background-color: #2A3440 !important;
  border-color: #4E8FD0 !important;
  color: #8AB4F8 !important;
}
/* 「还有 N 张」提示小字 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-gallery-more-hint {
  color: #5F7180 !important;
}
html.dark body.w2k#top#top#top#top#top .paper-gallery-more-hint {
  color: #8B949E !important;
}


/* --------------------------------------------------------------------------
   28.3 图片查看器弹窗（`.w2k-lightbox` 一族）—— 完整适配主题
   --------------------------------------------------------------------------
   实测现状（明暗都是**暖色**，与冷蓝灰体系冲突）：
     .w2k-lb-window   浅 bg #DCD8CF（暖米） border #B8B4AC（暖灰） radius 0
     .w2k-lb-close    浅 bg #DCD8CF  border #B8B4AC
     .w2k-lb-nav      浅 bg #DCD8CF  border #B8B4AC  radius 999px
     .w2k-lb-titlebar 蓝色渐变 + 白字，高 20px
     .w2k-lb-status   浅 bg #E4EBF1  border-top #D7E0E7
     遮罩             rgba(0,0,0,.45)，无 backdrop-filter
   ⚠ 灯箱是 `lightbox.js:42-62` **运行时建在 document.body 上**的，
     所以选择器写 `body.w2k#top… .w2k-lb-*` 有效（它不在 #w2k-client 里）。
   ========================================================================== */
/* 遮罩：更深一档 + 轻微模糊，把注意力压到图上 */
body.w2k#top .w2k-lightbox {
  background-color: rgba(15, 23, 36, .75) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  backdrop-filter: blur(2px) !important;
}
/* 窗口：并入模块卡阶梯 + 4px 圆角 + 落地投影 */
html:not(.dark) body.w2k#top#top#top .w2k-lb-window {
  background-color: #F7F9FB !important;
  border-color: #D7E0E7 !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 40px rgba(15, 23, 36, .35) !important;
  overflow: hidden !important;
}
html.dark body.w2k#top#top#top .w2k-lb-window {
  background-color: #202327 !important;
  border-color: #33383F !important;
  border-radius: 4px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .62) !important;
  overflow: hidden !important;
}
/* 标题栏：标志性主题蓝、28px 高、白字加粗 */
html:not(.dark) body.w2k#top#top#top .w2k-lb-titlebar {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 4px 0 10px !important;
  background-color: #2F6FAE !important;
  background-image: none !important;
  border-bottom: 1px solid #205B90 !important;
}
html.dark body.w2k#top#top#top .w2k-lb-titlebar {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 4px 0 10px !important;
  background-color: #1F4068 !important;
  background-image: none !important;
  border-bottom: 1px solid #16314F !important;
}
html body.w2k#top#top#top .w2k-lb-title {
  color: #FFFFFF !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
/* 关闭键：紧凑系统方块；hover 出警示红 */
html body.w2k#top#top#top .w2k-lb-close {
  width: 22px !important;
  height: 20px !important;
  min-width: 22px !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
/* ⚠ 只给 `:hover`，**不要给 `:focus-visible`** —— 实测灯箱打开时
   `lightbox.js` 会把焦点自动放到关闭键上，`:focus-visible` 因此常驻命中，
   红底就一直亮着（实测抓到的：打开后底色恒为 #C93B2B）。
   键盘可达性改用 outline 表达，不占用底色。 */
html body.w2k#top#top#top .w2k-lb-close:hover {
  background-color: #C93B2B !important;
  color: #FFFFFF !important;
}
html body.w2k#top#top#top .w2k-lb-close:focus-visible {
  outline: 1px solid #FFFFFF !important;
  outline-offset: -2px !important;
}
/* 图框：只留一条细线，别和窗口边框叠成"框中框" */
html:not(.dark) body.w2k#top#top#top .w2k-lb-frame {
  background-color: #FFFFFF !important;
  border-color: #E0E7EC !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top .w2k-lb-frame {
  background-color: #1A1C1E !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
/* 左右箭头 */
html:not(.dark) body.w2k#top#top#top .w2k-lb-nav {
  background-color: #FFFFFF !important;
  border-color: #D0D9E0 !important;
  color: #425466 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-lb-nav:hover {
  background-color: #E7EFF6 !important;
  border-color: #2F6FAE !important;
  color: #2F6FAE !important;
}
html.dark body.w2k#top#top#top .w2k-lb-nav {
  background-color: #262B33 !important;
  border-color: #33383F !important;
  color: #C3CBD4 !important;
}
html.dark body.w2k#top#top#top .w2k-lb-nav:hover {
  background-color: #2A3440 !important;
  border-color: #4E8FD0 !important;
  color: #8AB4F8 !important;
}
/* 底部状态栏（说明 + 1/1 计数） */
html:not(.dark) body.w2k#top#top#top .w2k-lb-status {
  background-color: #F1F5F8 !important;
  border-top: 1px solid #D7E0E7 !important;
  color: #5F7180 !important;
}
html:not(.dark) body.w2k#top#top#top .w2k-lb-counter {
  color: #5F7180 !important;
}
html.dark body.w2k#top#top#top .w2k-lb-status {
  background-color: #1F2226 !important;
  border-top: 1px solid #33383F !important;
  color: #8B949E !important;
}
html.dark body.w2k#top#top#top .w2k-lb-counter {
  color: #8B949E !important;
}


/* --------------------------------------------------------------------------
   28.4 详情页音频播放器（`.paper-audio-*`）
   --------------------------------------------------------------------------
   实测现状（实测口径：/morehd.html，18 篇里唯一带音频的）：
     面板      bg #F7F9FB（暗 #1E1E1E） border #D7E0E7 **radius 0**
     图标按钮  bg #DCD8CF（**暖米**） border #B8B4AC（**暖灰**）
     ★ 曲目行  bg **#0A246A**（暗 #3A506B）+ **纯白字**  ← 规格点名要干掉的"刺眼高饱和纯蓝"
     进度条    win2000.css:4768-4814 是 Win2000 立体凹槽（12px 高、斜面边框、3D 滑块），
               **没有"已播放"填充段**。
   ── 进度条的填充怎么做 ────────────────────────────────────────────────────
   `appearance:none` 的原生 range **没有"已播放"概念**，纯 CSS 拿不到 value。
   所以用一个 CSS 变量 `--audio-pct`（由下面那段 3 行 JS 写入）画渐变填充；
   **变量缺失时退化为纯轨槽色**，也就是现在的观感，不会更差。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-player {
  background-color: #FFFFFF !important;
  border-color: #D7E0E7 !important;
  border-radius: 4px !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-player {
  background-color: #202327 !important;
  border-color: #33383F !important;
  border-radius: 4px !important;
}
/* 封面按钮 + 小图标按钮：去掉暖米底，并入按钮族 */
html:not(.dark) body.w2k#top#top#top#top#top :is(.paper-audio-cover, .paper-audio-icon) {
  background-color: #F4F6F8 !important;
  border-color: #D8E0E6 !important;
  border-radius: 3px !important;
  color: #425466 !important;
}
html:not(.dark) body.w2k#top#top#top#top#top :is(.paper-audio-cover, .paper-audio-icon):hover {
  background-color: #E7EFF6 !important;
  border-color: #2F6FAE !important;
  color: #2F6FAE !important;
}
html.dark body.w2k#top#top#top#top#top :is(.paper-audio-cover, .paper-audio-icon) {
  background-color: #262B33 !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
  color: #C3CBD4 !important;
}
html.dark body.w2k#top#top#top#top#top :is(.paper-audio-cover, .paper-audio-icon):hover {
  background-color: #2A3440 !important;
  border-color: #4E8FD0 !important;
  color: #8AB4F8 !important;
}
/* 播放列表容器 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-playlist {
  background-color: #F7F9FB !important;
  border-color: #E0E7EC !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-playlist {
  background-color: #1A1C1E !important;
  border-color: #33383F !important;
  border-radius: 3px !important;
}
/* ★ 曲目行：柔和选中态（浅蓝底 + 深蓝字 + 3px 左侧标记条），
   取代原来的 #0A246A 深蓝压白字。
   ★ 常态用 `:not(.is-active):not(:hover)` 排除，否则 5 个 id 会把状态态一起压掉。 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-track:not(.is-active):not(:hover) {
  background-color: transparent !important;
  color: #263746 !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-track:hover {
  background-color: #EEF4FA !important;
  color: #285F94 !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-track.is-active {
  background-color: #DCEAF7 !important;
  color: #285F94 !important;
  border-radius: 3px !important;
  box-shadow: inset 3px 0 0 #2F6FAE !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-track:not(.is-active):not(:hover) {
  background-color: transparent !important;
  color: #E1E4EA !important;
  box-shadow: none !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-track:hover {
  background-color: #262B33 !important;
  color: #8AB4F8 !important;
  border-radius: 3px !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-track.is-active {
  background-color: #283B4D !important;
  color: #93C5FD !important;
  border-radius: 3px !important;
  box-shadow: inset 3px 0 0 #2F6FAE !important;
}
/* ★★ 选中行里的**每一个**子元素都要跟着换色 —— 包括 `.paper-audio-track-name`。
   实测抓到的回归：只改 `.paper-audio-track` 自身的 color 不够，
   曲目名那个 span 有自己的白色 color（原来压 #0A246A 深蓝底时是对的），
   换成浅蓝 #DCEAF7 之后变成**白字压浅蓝 = 1.22:1**，曲目名直接看不见。
   ⚠ 这正是"改了容器底色，必须把落在它上面的文字色全部重验"那条纪律第 4 次现形。 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-track.is-active :is(.paper-audio-track-name, .paper-audio-index, .paper-audio-track-artist) {
  color: #285F94 !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-track.is-active :is(.paper-audio-track-name, .paper-audio-index, .paper-audio-track-artist) {
  color: #93C5FD !important;
}

/* ---- 同组件里几处**既有**的低对比（顺手修，都不是本轮引入的）----
   实测（/morehd.html 浅色）：
     .paper-audio-index / .paper-audio-track-artist  #7E8C99 on #F7F9FB = 3.26:1 ✗
     .paper-audio-artist（作者名 "Mr.Gu"）            #7E8C99 on #FFFFFF = 3.44:1 ✗
     .paper-audio-cover-fallback（大号 ♫ 占位符）     #8B98A3 on #F1F5F8 = 2.69:1 ✗（大字要 3.0）
   统一到"浅铬面上用 #5F7180"（4.68:1）这一支。 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-player :is(.paper-audio-index,
    .paper-audio-track-artist, .paper-audio-artist, .paper-audio-credits, .paper-audio-cover-fallback) {
  color: #5F7180 !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-player :is(.paper-audio-index,
    .paper-audio-track-artist, .paper-audio-artist, .paper-audio-credits, .paper-audio-cover-fallback) {
  color: #8B949E !important;
}
/* 大号 ♫ 占位符按"大字"算（3.0 就够），但既然同一个选择器族里，
   给它单独一档更深的灰，视觉上也不至于比周围的字更淡。 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-cover-fallback {
  color: #5F7180 !important;
}
/* ★ 作者名那个 span **没有类名、只有 id**（detail.html:99 的 `<span id="paper-audio-artist">`），
   所以上面按类名的规则抓不到它 —— 实测它仍是 #7E8C99 on #FFFFFF = 3.44:1。
   这里按 id 补一条（权重本来就够，写 5 个 id 只是与本节其余规则保持一致）。 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-player #paper-audio-artist {
  color: #5F7180 !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-player #paper-audio-artist {
  color: #8B949E !important;
}
/* ▶ 播放键：它是**压在封面图上的装饰字形**，
   原来 #263746 直接压在封面的中灰上只有 3.41:1（非文本 UI 组件要 3:1，勉强过线，
   但压在深色唱片封面上会几乎看不见）。这里给它一圈半透明深色衬底 ——
   合成后白字 ≈ 9.7:1，而且任何封面图上都读得出来。
   ★ 只加背景/圆角/颜色，**不动 display 与 position**，避免改掉它现有的定位。 */
html body.w2k#top#top#top#top#top .paper-audio-player #paper-audio-play-icon {
  background-color: rgba(15, 23, 36, .62) !important;
  border-radius: 50% !important;
  color: #FFFFFF !important;
  min-width: 22px !important;
  min-height: 22px !important;
  line-height: 1 !important;
}

/* 进度条：4px 轨槽 + 主题蓝已播放段 + 白底小圆钮 */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-progress {
  height: 16px !important;
  background-image: linear-gradient(90deg,
    #2F6FAE 0, #2F6FAE var(--audio-pct, 0%), transparent var(--audio-pct, 0%), transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 0 center !important;
  background-size: 100% 4px !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-progress {
  height: 16px !important;
  background-image: linear-gradient(90deg,
    #4E8FD0 0, #4E8FD0 var(--audio-pct, 0%), transparent var(--audio-pct, 0%), transparent 100%) !important;
  background-repeat: no-repeat !important;
  background-position: 0 center !important;
  background-size: 100% 4px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-progress::-webkit-slider-runnable-track {
  height: 4px !important;
  background: #E2E8EE !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 10px !important;
  height: 10px !important;
  margin-top: -3px !important;          /* (4 - 10) / 2 */
  border-radius: 50% !important;
  background: #FFFFFF !important;
  border: 1px solid #9DB4C8 !important;
  box-shadow: 0 1px 2px rgba(40, 70, 90, .22) !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-progress::-webkit-slider-runnable-track {
  height: 4px !important;
  background: #33383F !important;
  border: 0 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-progress::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 10px !important;
  height: 10px !important;
  margin-top: -3px !important;
  border-radius: 50% !important;
  background: #E6E8EB !important;
  border: 1px solid #525C6A !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important;
}
/* Firefox */
html:not(.dark) body.w2k#top#top#top#top#top .paper-audio-progress::-moz-range-track {
  height: 4px !important; background: #E2E8EE !important; border: 0 !important; border-radius: 2px !important;
}
html.dark body.w2k#top#top#top#top#top .paper-audio-progress::-moz-range-track {
  height: 4px !important; background: #33383F !important; border: 0 !important; border-radius: 2px !important;
}
html body.w2k#top#top#top#top#top .paper-audio-progress::-moz-range-thumb {
  width: 9px !important; height: 9px !important; border-radius: 50% !important;
  background: #FFFFFF !important; border: 1px solid #9DB4C8 !important; box-shadow: 0 1px 2px rgba(40, 70, 90, .22) !important;
}


/* --------------------------------------------------------------------------
   28.5 标题栏的太阳/月亮切换按钮：去掉底框
   --------------------------------------------------------------------------
   现状（§3，第 47 轮加的）：`rgba(255,255,255,.16)` 底 + `.38` 边框 —— 那是
   "半透明白胶囊"的观感，与要求不符。改成纯图标。
   ⚠ 只动 `.w2k-titlebar .w2k-tbtn`，不碰 `.w2k-tbtn` 的通用规则（404 页的 ✕ 也在用）。
   ⚠ 图标本身已在第 64 轮换成了线条 SVG（§27.4），这里只负责"去掉底框"。
   ========================================================================== */
html body.w2k#top#top#top#top#top .w2k-titlebar .w2k-tbtn {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 3px !important;
  color: #FFFFFF !important;
}
html body.w2k#top#top#top#top#top .w2k-titlebar .w2k-tbtn:hover,
html body.w2k#top#top#top#top#top .w2k-titlebar .w2k-tbtn:focus-visible {
  background-color: rgba(255, 255, 255, .22) !important;
  color: #FFFFFF !important;
}
/* 日月图标统一到 14px（标题栏按钮本身 16px 高，13px 是上限） */
html body.w2k#top#top#top#top#top .w2k-titlebar .w2k-tbtn .w2k-ico-line {
  width: 13px !important;
  height: 13px !important;
  max-width: 13px !important;
  max-height: 13px !important;
}


/* ==========================================================================
   29. 暗色文章列表层次 + 全局字体系统 —— 第 66 轮
   ========================================================================== */


/* --------------------------------------------------------------------------
   29.1 暗色文章列表（.w2k-dt）：分隔线 + 从容的选中态
   --------------------------------------------------------------------------
   ── 先量再改 ─────────────────────────────────────────────────────────────
   ① 选中态的机制**不是外边框**：`win2000.css:7509-7512`
        body.w2k#top .w2k-dt-row.is-selected,
        body.w2k#top .w2k-dt-row:focus-within { background-color: #000080 !important }
      是**整行填充**。暗色下又被更高权重的规则顶成 **#285F94**（实测聚焦后
      `row bg=rgb(40,95,148)`）—— 一层饱和中蓝，在 #2D2D2D 的深底上确实"突兀悬空"。
      （另有 `win2000.css:7397-7399` 给聚焦行加 `1px dotted #fff` 的点线轮廓。）
   ② 分隔线**其实有**（`win2000.css:7312` `--dt-divider: #e0e0e0`，暗色解析成 `#333333`），
      但 `#333333` 压在 `#2D2D2D` 的行底上只差 6 级灰度 —— **肉眼等于没有**，
      所以"一片死黑"的观感是对的。
   ③ 行底 `#2D2D2D` 是 **win2000.css 的老暗色阶梯**，比第 47 轮之后的
      `#1E1E1E` / `#202327` 亮一档 —— 列表比页面还亮，层次自然立不住。

   ── 修法 ─────────────────────────────────────────────────────────────────
   · 行底并入新阶梯 `#202327`；分隔线用 `#272B30`（**比行底亮 6 级**，若隐若现但看得见）。
   · 选中态换成低饱和暗蓝 `#1A2736` + 标题 `#93C5FD` + 左侧高亮条。
   · ★ 左侧条用 **`inset 3px 0 0`** 而不是 `border-left: 3px` —— 写 border 会挤掉
     3px 内容盒宽度、整行文字右移（本项目第 41 轮的老账）。几何零变化。
   · 悬浮 `#22262C`（比行底亮一档，极细腻）。
   ⚠ 只作用于暗色（`.dark`），浅色列表一行没动。
   ========================================================================== */
/* ⚠⚠ 本节一律用 **6 个 id**，不是 5 个 —— 实测踩到的：
   我在第 47 轮写过 §14.16（本文件 1249-1256 行）
     html.dark body.w2k#top×5 :is(.w2k-dt, .article-list-container)
       :is(.w2k-dt-row, .article-row-item):is(.is-selected, :focus-within)
   它是 **5 id + 5 class**；而 5 id + 3 class 的覆盖规则虽然写在后面，
   **id 位打平、class 位少 2，照样输**（FACT 约束 5 的"同权重看书写顺序"在这里不适用，
   因为权重根本不同权）。
   ⇒ 多带一个 `#top`，6 > 5，一次压过，不必再数 class。 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt {
  --dt-divider: #272B30;
  --dt-hover-bg: #22262C;
}
/* ⚠ 第 67 轮改了：行底由 `#202327` 改 **transparent** ——
   它和分区面板 `.magazine-section`（暗色 `#1E2024`）叠成了"两层底色"。
   现在条目直接坐在面板底上，只靠 1px 分隔线分栏（见 §30.2）。 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row {
  background-color: transparent !important;
  border-bottom: 1px solid #272B30 !important;
  border-radius: 2px !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row:last-child {
  border-bottom: 0 !important;
}
/* ★ 选中 / 聚焦：柔和暗蓝底 + 提亮标题 + 3px 左侧工业高亮条 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row:is(.is-selected, :focus-within) {
  background-color: #1A2736 !important;
  border-radius: 2px !important;
  box-shadow: inset 3px 0 0 #2F6FAE !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row:is(.is-selected, :focus-within) .w2k-dt-link {
  background-color: transparent !important;
  color: #93C5FD !important;
}
/* ★ 悬浮：**必须写在上面那两条"选中态"之后**。
   两条权重完全相等（6 id + 5 class），只能靠源码顺序决胜；
   写在前面时，"选中行内链接透明"会把它按死 —— 实测就是这个原因导致悬浮无效。
   语义上也更合理：鼠标压上来时，悬浮反馈应该盖过选中底色。 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row .w2k-dt-link:hover {
  background-color: #22262C !important;
  cursor: pointer !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row:is(.is-selected, :focus-within) .w2k-dt-name {
  color: #93C5FD !important;
}
/* 选中行里的次级文字也提一档，别留着原来的 #A0A0A0 压在蓝底上 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row:is(.is-selected, :focus-within) :is(.w2k-dt-meta, .w2k-dt-date, .w2k-dt-views, .w2k-dt-go) {
  color: #A9B6C4 !important;
}
/* 元数据常态：低对比灰，不抢标题。
   ⚠ 规格给的 `#768390` 压在本轮新设的行底 `#202327` 上**只有 4.07:1**，不达标
     （实测 15 条失败：日期 / 阅读量 / 右箭头全中）。
     换成项目既定的暗色次级色 **`#8B949E`**（在 `#202327` 上约 5.4:1），
     观感同样是"适度的低对比灰、不耀眼"，只是比规格值亮半档。 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt :is(.w2k-dt-meta, .w2k-dt-date, .w2k-dt-views, .w2k-dt-go) {
  color: #8B949E !important;
}
/* 聚焦轮廓：win2000.css 给的是 1px dotted #fff（暗色下是一圈白点线，同样突兀）。
   换成与选中态同色的柔和蓝、并加 offset 让它落在行内。 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-link:focus-visible {
  outline: 1px solid #2F6FAE !important;
  outline-offset: -3px !important;
}


/* --------------------------------------------------------------------------
   29.2 全局字体栈（明暗通用）
   --------------------------------------------------------------------------
   实测现状：`html/body` 是 `"Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC",
   "Segoe UI", Arial, sans-serif` —— **中文优先**。
   规格给的顺序是 **拉丁优先**（Segoe UI 打头、中文往后靠），
   对"中英数混排"的工业风更合适：拉丁字母与数字走 Segoe UI（笔画更挺、字宽更整齐），
   中文回落到雅黑。所以按规格换序。
   ⚠ 同时补上渲染优化与等宽数字 —— 实测当前 `-webkit-font-smoothing = auto`、
     `font-variant-numeric = normal`，统计数字/日期在不同行之间**宽度不一致、对不齐**。
   ========================================================================== */
/* ⚠⚠ 本节一律 **6 个 id**。第一版我写的是 `html, body, input, button…`（**0 个 id**），
   实测几乎全被压住：`body` 的字体栈没换、`-webkit-font-smoothing` 还是 auto、
   `pre` 的字号还是 13px。本项目任何"全局"覆盖都必须带 id 重量，
   光靠写在最后 + !important 是不够的（对手是 `body.w2k#top …` 那一族）。
   `html` 本身没有 id，用 `:root:root`（两个伪类）抬到能压过 `:root`。 */
html:root:root,
html body.w2k#top#top#top#top#top#top,
html body.w2k#top#top#top#top#top#top :is(input, button, select, textarea, table,
    .prose-paper, .reading-content, #article-content) {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Microsoft YaHei",
    "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", Arial, sans-serif !important;
}
/* ⚠⚠ 正文那条**光靠 body 继承到不了**，而且打权重也打不干净：
   `win2000.css:3374/3558` 是
     body.w2k#top .prose-paper   { font-family: var(--w2k-font) !important }
     body.w2k#top .prose-paper p { font-family: var(--w2k-font) !important }
   第二条第**直接写在 `p` 上** —— 显式声明永远压过继承，
   所以把 `.prose-paper` 放进上面那条 `:is()` 也没用（实测仍返回 YaHei UI）。
   与其再写一条 `… .prose-paper *`（那会把正文里的 `pre`/`code` 也一起改成非等宽），
   **不如直接改这支变量本身** —— win2000.css 里所有 `var(--w2k-font)` 一次性全跟着走。
   这是最干净的一处：一行，零权重博弈，且不会误伤等宽区。 */
:root {
  --w2k-font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Microsoft YaHei",
    "Microsoft YaHei UI", "Noto Sans SC", "PingFang SC", Arial, sans-serif;
}
html:root:root,
html body.w2k#top#top#top#top#top#top {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: "tnum" 1 !important;
  font-variant-numeric: tabular-nums !important;
}
/* ★ 表格 / 计数 / 日期这类"要竖着对齐"的地方，数字必须等宽。
   全局那条 `font-feature-settings:"tnum"` 对**子元素是继承生效**的，
   但项目里有些元素自带 `font-feature-settings: normal`，这里点名补齐。 */
html body.w2k#top#top#top :is(.w2k-dt, .w2k-dt *,
    .win-propsheet, .win-propsheet *,
    .w2k-statusbar, .w2k-statusbar *,
    .w2k-sys-summary, .w2k-sys-summary *,
    .w2k-count-field, .archive-pages, .taxonomy-count,
    .paper-audio-time, .media-card-date) {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}


/* --------------------------------------------------------------------------
   29.3 代码 / 终端字体栈（明暗通用）
   --------------------------------------------------------------------------
   实测现状：`pre` 是 `"JetBrains Mono", "Cascadia Code", "Noto Sans Mono CJK SC",
   Consolas, …`，13px / lh 20.15px / **tab-size 2**；
   而 `.code-language`（BASH / JSON 那个标签）用的是 **Fixedsys** ——
   那是一支**点阵位图字体**，11px 下发虚，与"规整等宽"不符。
   规格给的是 Consolas 打头。Consolas 是 Windows 自带、清晰度最高的一支，
   且无需外链，符合"优先系统原生"。
   ★ tab-size 2 → 4：这是**唯一会改变已有内容排版**的一条
     （正文里用真制表符缩进的代码块会更宽）。规格明确要求，照做。
   ========================================================================== */
html body.w2k#top#top#top#top#top#top :is(pre, code, kbd, samp, .code-body, .code-language) {
  font-family: "Consolas", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco,
    "Courier New", monospace !important;
}
html body.w2k#top#top#top#top#top#top :is(pre, code, kbd, samp, .code-body) {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  tab-size: 4 !important;
  -moz-tab-size: 4 !important;
}
/* 同步代码块专用的字体变量（项目里有多处 `var(--w2k-mono)`） */
:root {
  --w2k-mono: "Consolas", "JetBrains Mono", "SFMono-Regular", Menlo, Monaco,
    "Courier New", monospace;
}
/* 行内 code 稍微收一点，别在正文里顶出一行高 */
html body.w2k#top#top#top .prose-paper :not(pre) > code {
  font-size: 12px !important;
}


/* --------------------------------------------------------------------------
   29.4 桌面紧凑字阶
   --------------------------------------------------------------------------
   实测现状 → 规格目标：
     标题栏 12px         → 13px / 600
     面板标题 12px/600   → 13px / 600
     顶部菜单 12px       → 13px
     面包屑 12px         → 12.5px
     侧栏树条目 12px     → 12.5px
     工具栏按钮 12px     → 12.5px
     正文 p 14.5px lh 26.8px（=1.85，偏散） → 14px / 1.6
     正文 h2 17px        → 16px
     元数据 11px         → 保持 11px（已在规格区间）
   ⚠ 正文那条是**全局重排**：行高 1.85 → 1.6 会让长文明显变紧凑，
     实测会整页变矮。这是规格明确要的"消除松散漂浮感"，已量过代价。
   ========================================================================== */
html body.w2k#top#top#top#top#top#top :is(.w2k-titlebar-text, .w2k-pane-title, .w2k-sidebar-title) {
  font-size: 13px !important;
  font-weight: 600 !important;
}
html body.w2k#top#top#top#top#top#top .w2k-menu a {
  font-size: 13px !important;
}
html body.w2k#top#top#top#top#top#top :is(.w2k-breadcrumb, .w2k-tree-node, .w2k-tree-summary,
    .w2k-btn, .toolbar-btn, .w2k-tool-btn, .w2k-dt-name, .w2k-toc-toggle) {
  font-size: 12.5px !important;
}
/* 正文：字号与行高一起收 */
html body.w2k#top#top#top#top#top .prose-paper {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
html body.w2k#top#top#top#top#top .prose-paper p,
html body.w2k#top#top#top#top#top .prose-paper li {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
html body.w2k#top#top#top#top#top .prose-paper h1 {
  font-size: 20px !important;
  line-height: 1.35 !important;
}
html body.w2k#top#top#top#top#top .prose-paper h2 {
  font-size: 16px !important;
  line-height: 1.4 !important;
}
html body.w2k#top#top#top#top#top .prose-paper h3 {
  font-size: 14.5px !important;
  line-height: 1.45 !important;
}
/* 元数据 / 徽章 / 计数：11~12px（原本就在区间内，这里锁住，防止被上面的规则带大） */
html body.w2k#top#top#top#top#top#top :is(.w2k-dt-date, .w2k-dt-views, .w2k-dt-meta,
    .w2k-tree-count, .w2k-sys-key, .w2k-sys-val, .w2k-status-field, .taxonomy-count,
    .media-card-date, .w2k-metabadge, .w2k-tag-chip, .archive-category) {
  font-size: 11px !important;
}


/* ==========================================================================
   30. 首页精细微调：菜单栏 / 列表合并底盘 / 字阶软化 —— 第 67 轮
   ========================================================================== */


/* --------------------------------------------------------------------------
   30.1 顶部菜单栏：还原老式 Windows 紧凑系统菜单
   --------------------------------------------------------------------------
   实测现状：`.w2k-menu a` 是 **13px**（第 66 轮我按"面包屑/树条目/按钮 12.5~13px"
   那条字阶一起抬上去的），颜色是选中态的 `#285F94` / 暗色 **纯白**。
   规格要 12px / 400 / `#425466`（暗 `#A0AEC0`）。
   ========================================================================== */
html body.w2k#top#top#top#top#top#top .w2k-menu a:not(.is-active) {
  background-color: transparent !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 4px 10px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top#top .w2k-menu a:not(.is-active) {
  color: #425466 !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-menu a:not(.is-active) {
  color: #A0AEC0 !important;
}
/* 悬停：浅蓝微反馈 */
html body.w2k#top#top#top#top#top#top .w2k-menu a:hover {
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 4px 10px !important;
  background-color: var(--soft-nav-hover, #E5EEF6) !important;
  color: #2F6FAE !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-menu a:hover {
  background-color: #2A3440 !important;
  color: #8AB4F8 !important;
}
/* 当前页保持"选中"语义，但同样收到 12px / 400 / 同一内边距 */
html body.w2k#top#top#top#top#top#top .w2k-menu a.is-active,
html body.w2k#top#top#top#top#top#top .w2k-menu a.is-active:hover {
  font-size: 12px !important;
  font-weight: 400 !important;
  padding: 4px 10px !important;
  border-radius: 3px !important;
}
html:not(.dark) body.w2k#top#top#top#top#top#top .w2k-menu a.is-active {
  background-color: var(--soft-blue-sel, #DCEAF7) !important;
  color: #285F94 !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-menu a.is-active {
  background-color: #243342 !important;
  color: #8AB4F8 !important;
}
/* ⚠ 规格给的 `padding: 4px 10px` 会把菜单项从 19px 撑到 27px（上下各 +4px），
   菜单栏随之从 20px 变成约 28px —— 与"紧凑"的目标相反。
   这里把菜单栏自身的高度锁住，让内边距只在水平方向生效，
   垂直方向靠 line-height 居中，**总高不变**。 */
html body.w2k#top#top#top#top#top#top .w2k-menu {
  align-items: stretch !important;
}
html body.w2k#top#top#top#top#top#top .w2k-menu a {
  display: inline-flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
}


/* --------------------------------------------------------------------------
   30.2 合并"两层底色"：条目直接坐在面板底上
   --------------------------------------------------------------------------
   实测（首页「笔记」模块，从外到内逐层）：
     .magazine-section       浅 #FFFFFF    暗 **#1E2024**   ← 第 1 层（面板底）
     .magazine-section-head  浅 #F3F6F8    暗 #282C31       （标头，本该不同色）
     .w2k-dt / .w2k-dt-list  透明
     .w2k-dt-row             浅 #FFFFFF    暗 **#202327**   ← 第 2 层（条目底）★ 问题在这
   ⇒ 浅色下两者同色看不出，**暗色下 `#1E2024` 与 `#202327` 差 2 级 → 一条可见的色带**，
     加上行本身还有 `padding: 8px 14px`，右边就露出"两层阶梯"。
   修法：把**条目底色去掉**（transparent），只留 1px 分隔线。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top#top#top#top .w2k-dt-row {
  background-color: transparent !important;
  border-bottom: 1px solid #EEF3F7 !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-row {
  background-color: transparent !important;
  border-bottom: 1px solid #272B30 !important;
}
html body.w2k#top#top#top#top#top#top .w2k-dt-row:last-child {
  border-bottom: 0 !important;
}
/* 列表容器与 ul 也一并透明，杜绝任何中间层 */
html body.w2k#top#top#top#top#top#top :is(.w2k-dt, .w2k-dt-list, .w2k-dt-link, .w2k-dt-copy) {
  background-color: transparent !important;
}
/* 分区面板底色锁死（浅 #FFFFFF / 暗 #1E2024，实测暗色是 #1E2023，差 1 级归一） */
html:not(.dark) body.w2k#top#top#top#top#top#top .magazine-section {
  background-color: #FFFFFF !important;
}
html.dark body.w2k#top#top#top#top#top#top .magazine-section {
  background-color: #1E2024 !important;
}
/* 标头与面板同一底盘，只靠 1px 下线分区 */
html:not(.dark) body.w2k#top#top#top#top#top#top .magazine-section-head {
  background-color: transparent !important;
  border-bottom: 1px solid #EEF3F7 !important;
}
html.dark body.w2k#top#top#top#top#top#top .magazine-section-head {
  background-color: transparent !important;
  border-bottom: 1px solid #272B30 !important;
}


/* --------------------------------------------------------------------------
   30.3 字阶软化：中文标题降噪 + 元数据回升
   --------------------------------------------------------------------------
   实测现状：标题 12.5px / **600** / `#263746`；元数据 11px / `#667786`。
   规格要：标题 13.5px / 500~600 / `#2D3D4D`（暗 `#D8E0E8`）；
           元数据 11.5px / `#738494`（暗 `#8B949E`）+ 等宽数字。

   ⚠ **字重保持 600，不下到 500** —— `Microsoft YaHei` 只有 Regular / Bold 两档，
     `font-weight: 500` 在 Chrome 里会落到 Regular（=400），标题会**完全失去层级**，
     而不是"变柔和"。600 已在规格给的"500 或 600"区间内。
   ⚠ **元数据颜色保留 `#667786`，不用规格的 `#738494`** —— 后者在纯白上只有
     **3.85:1**，不达标；`#667786` 是同色系里最接近且达标的（4.62:1）。
     暗色 `#8B949E` 达标，照规格用。
   ========================================================================== */
html:not(.dark) body.w2k#top#top#top#top#top#top .w2k-dt-name {
  color: #2D3D4D !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
html.dark body.w2k#top#top#top#top#top#top .w2k-dt-name {
  color: #D8E0E8 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
/* 元数据：回升到 11.5px，并开等宽数字让日期竖排对齐。
   ⚠⚠ 颜色必须用 **`#5F7180` 而不是 `#667786`** —— 这是本轮把行底色去掉之后的连带代价：
     首页的列表坐在 `.magazine-section`（白底）里，`#667786` 有 4.62:1；
     但 `/category/notes.html` 的列表**没有白卡**，直接坐在页面浅铬面 `#F4F7F9` 上
     → `#667786` 掉到 **4.29:1**（实测一次报 15 条）。
     `#5F7180` 在白底（5.0:1）和浅铬面（4.68:1）上都达标，一支颜色管两种底盘。
     —— 血泪纪律③"去掉底板后灰字会掉到浅铬面上"的第 5 次现形。 */
html:not(.dark) body.w2k#top#top#top#top#top#top .w2k-dt :is(.w2k-dt-meta, .w2k-dt-date,
    .w2k-dt-views, .w2k-dt-views-num, .w2k-dt-go) {
  font-size: 11.5px !important;
  color: #5F7180 !important;
}
/* ⚠ `.w2k-dt-go`（行尾的 `›`）第一版被我漏在名单外 —— 它没跟随换色，
   在浅铬面上仍是 4.29:1。已补进上面那条。 */
html.dark body.w2k#top#top#top#top#top#top .w2k-dt :is(.w2k-dt-meta, .w2k-dt-date, .w2k-dt-views, .w2k-dt-views-num) {
  font-size: 11.5px !important;
  color: #8B949E !important;
}
html body.w2k#top#top#top#top#top#top .w2k-dt :is(.w2k-dt-date, .w2k-dt-views, .w2k-dt-views-num) {
  font-feature-settings: "tnum" 1 !important;
  font-variant-numeric: tabular-nums !important;
}
/* 行图标与元数据同档，别让 16px 的像素图标比文字还跳 */
html body.w2k#top#top#top#top#top#top .w2k-dt-icon {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}