查看“︁MediaWiki:Citizen.css”︁的源代码

/* 修正版标识：BL-CITIZEN-4PX-MOBILE-CONTRAST-20261007
 * 本文件包含 Citizen Navbox 专属外观规则，完整替换 MediaWiki:Citizen.css。
 */
/* =====================================================================
 * Blockland Wiki · Modern Aero UI (OS26.2) — Citizen 皮肤定制样式
 * ---------------------------------------------------------------------
 * 架构（2026-10-06 重构）
 *
 *  1. 颜色的唯一定义点是「亮色 / 暗色」两处，写在下面的语义色板里，
 *     用 light-dark() 同时描述两种主题。
 *  2. 明暗切换由 color-scheme 驱动：
 *       day   → light        night → dark
 *       os    → light dark   black → dark
 *     所以 os + 系统暗色 自动等于 night，os + 系统亮色 自动等于 day，
 *     不再需要任何 @media (prefers-color-scheme) 里重复一遍颜色。
 *  3. Aero / Basic（性能模式）不再定义任何颜色，只切换「效果」：
 *     模糊、阴影、光效伪元素的开关，以及毛玻璃 → 不透明表面的材质降级。
 *
 *  对照 Citizen 3.24.0 源码做过选择器与 token 校准。
 *
 *  ⚠ MediaWiki 的 CSS 校验器（站内编辑器用的 css-sanitizer）不支持的写法，
 *    本文件一律避免 —— 以后改动请继续遵守：
 *      · 不用 :is( ... )、:has( ... )
 *      · 不用多参数 :not( a, b )，改用链式 :not(a):not(b)
 *      · 属性选择器不加 i 大小写标志（[style*="x" i] ✗）
 *      · 引号字符串里不出现括号（[style*="gradient("] ✗）—— 用 [style*="gradient"] 即可
 *      · 靠「类名列表逐个展开」代替 :is() 的分组
 *    会被校验器拒绝的写法会导致整条规则不生效（甚至整份样式被判废）。
 * ===================================================================== */

/**
 * Blockland Wiki Modern Aero UI OS26.2
 * 风格：Acrylic / Aero / Basic
 * 修改：全局毛玻璃，全局光线追踪，UI 全面现代化。
 * 版本：26.2
 */

/* =====================================================================
 * 1. 主题基础：唯一明暗开关
 * ===================================================================== */

 html.skin-theme-clientpref-day   { color-scheme: light; }
 html.skin-theme-clientpref-night { color-scheme: dark; }
 html.skin-theme-clientpref-black { color-scheme: dark; }
 html.skin-theme-clientpref-os    { color-scheme: light dark; }
 
 /* =====================================================================
  * 2. 语义色板 —— 全站颜色的唯一来源
  *    亮色值 / 暗色值成对写在 light-dark() 里，只此一处。
  * ===================================================================== */
 
 :root {
	 /* —— 材质 ——
		暗色侧的玻璃要比页面底色【亮】一档，浮板才有边界：
		亮色侧本来就是「白 35% 叠在 #fafafa 上」，板比页面亮 ⇒ 边界自然成立；
		原来的暗色侧是「黑 55% 叠在 #1a1b1c 上」，叠出来 #171718，
		比页面还暗 3/255 ⇒ 明度差被抹平，浮板完全看不出边界。
		修正方向是把暗色侧抬亮，但第一次抬得偏亮（44 → 叠出来 #242527，
		比页面亮 10/255），实测反馈「颜色太亮了点」。现在回收一档：
		  --bl-glass        rgb 44 → 38，alpha 0.55 → 0.52（透一点）
		  --bl-glass-soft   rgb 44 → 38，alpha 0.50 → 0.47
		  --bl-glass-strong rgb 52 → 46，alpha 0.70 → 0.67
		叠出来约 #202123，比页面亮 6/255 —— 边界还看得出，但不抢眼。
		继续微调的旋钮就是这三个值：rgb 越低越沉，alpha 越低越透。 */
	 --bl-glass:         light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 38, 39, 42, 0.52 ) );
	 --bl-glass-soft:    light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 38, 39, 42, 0.47 ) );
	 --bl-glass-strong:  light-dark( rgba( 255, 255, 255, 0.75 ), rgba( 46, 47, 50, 0.67 ) );
	 --bl-blur:          blur( 14px ) saturate( 100% );
 
	 /* 目录面板（#citizen-toc）光圈的透明度。
	    桌面态它是滚动容器 ⇒ 动态光环由 common.js 的 Section27 实现
	    （用 --bl-toc-scroll 抵消滚动位移，环才钉得住）；
	    这个值只用于「没有 JS / Basic 模式」时的静态细光环兜底。
	    暗色侧在 26 节降到 0.10。 */
	 --bl-toc-ring-base: 0.45;
 
	 /* —— 不透明表面：Basic 模式关掉模糊后使用，保证可读性 —— */
	 --bl-surface-2:     light-dark( #f5f5f5, #2d2e2f );
 
	 /* —— 表格彩色单元格的「暗色压深」滤镜 ——
		模板会在单元格上写死浅色底（#C4A454 / #A0B8FF / #E0E8FF …）。
		暗色下不抹掉它们，做法是：把模板原色【压暗 + 补饱和】，
		而不是简单叠一层黑 —— 浅色底本来饱和度就低，只压暗会变成灰扑扑的脏色。
		亮色侧是 none，等于没有。明暗开关写在 26 节（与 --bl-f-* 同一套写法）。 */
	 --bl-cell-filter:   none;
 
	 /* —— 描边与分隔线 —— */
	 --bl-border:        light-dark( rgba( 128, 128, 128, 0.10 ), rgba( 255, 255, 255, 0.10 ) );
	 --bl-border-strong: light-dark( rgba( 128, 128, 128, 0.20 ), rgba( 255, 255, 255, 0.12 ) );
	 --bl-border-soft:   light-dark( rgba( 128, 128, 128, 0.08 ), rgba( 255, 255, 255, 0.06 ) );
	 --bl-divider:       light-dark( rgba( 128, 128, 128, 0.15 ), rgba( 255, 255, 255, 0.08 ) );
	 --bl-edge:          light-dark( rgba( 255, 255, 255, 0.45 ), rgba( 255, 255, 255, 0.10 ) );
 
	 /* —— 文字 —— */
	 --bl-text:          light-dark( #202122, #eaecf0 );
	 --bl-text-strong:   light-dark( #000000, #ffffff );
	 --bl-text-muted:    light-dark( #54595d, #8e8e93 );
 
	 /* —— 强调色 —— */
	 --bl-accent:        light-dark( #3366cc, #6ba4ff );
	 --bl-accent-hover:  light-dark( #2a6bb0, #9bc4ff );
	 --bl-accent-soft:   light-dark( rgba( 54, 121, 204, 0.10 ), rgba( 54, 121, 204, 0.25 ) );
	 --bl-accent-soft-2: light-dark( rgba( 54, 121, 204, 0.15 ), rgba( 54, 121, 204, 0.30 ) );
 
	 /* —— 交互叠加 —— */
	 --bl-hover:         light-dark( rgba( 0, 0, 0, 0.04 ), rgba( 255, 255, 255, 0.05 ) );
	 --bl-hover-strong:  light-dark( rgba( 0, 0, 0, 0.06 ), rgba( 255, 255, 255, 0.10 ) );
 
	 /* —— 阴影（只存颜色，偏移量写在使用处；light-dark() 只能包裹颜色） —— */
	 --bl-shadow-color-sm: light-dark( rgba( 0, 0, 0, 0.06 ), rgba( 0, 0, 0, 0.30 ) );
	 --bl-shadow-color:    light-dark( rgba( 0, 0, 0, 0.10 ), rgba( 0, 0, 0, 0.30 ) );
	 --bl-shadow-color-lg: light-dark( rgba( 31, 38, 135, 0.15 ), rgba( 0, 0, 0, 0.50 ) );
 
	 /* —— 鼠标跟随光效的三档色 —— */
	 --bl-glow-ring:     light-dark( rgba( 255, 255, 255, 0.90 ), rgba( 255, 255, 255, 0.80 ) );
	 --bl-glow-ring-2:   light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.10 ) );
	 --bl-glow-fill:     light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.10 ) );
	 --bl-glow-fill-2:   light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.08 ) );
 
	 /* —— 页面底色 —— */
	 --bl-page-bg:       light-dark( #fafafa, #1a1b1c );
 }
 
 /* 覆盖 Citizen 官方 surface 阶梯：一处定义，明暗自动切换 */
 :root {
	 --color-surface-0: light-dark( #fafafa, #1a1b1c );
	 --color-surface-1: light-dark( #ffffff, #202122 );
	 --color-surface-2: light-dark( #f5f5f5, #2d2e2f );
	 --color-surface-3: light-dark( #e8e8e8, #373839 );
 }
 
 body { background-color: var(--bl-page-bg); }
 
 /* =====================================================================
  * 3. 关键帧
  * ===================================================================== */
 
 @keyframes citizen-pop-in {
	 0%   { opacity: 0; transform: translate( -50%, -45% ) scale( 0.85 ); }
	 100% { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); }
 }
 
 @keyframes citizen-fade-in {
	 from { opacity: 0; }
	 to   { opacity: 1; }
 }
 
 /* =====================================================================
  * 4. 通用毛玻璃面板
  * ===================================================================== */
 
 .citizen-menu__card,
 #citizen-preferences-dropdown__card,
 .citizen-sticky-header-background,
 #citizen-page-actions-more__card,
 .citizen-dropdown .citizen-menu__card {
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border) !important;
	 border-radius: 12px !important;
 }
 
 .citizen-menu__card,
 .citizen-drawer__card {
	 z-index: 10000 !important;
	 isolation: isolate !important;
 }
 
 /* =====================================================================
  * 5. 侧边栏 / 顶栏
  * ===================================================================== */
 
 .mw-logo-icon {
	 border-radius: 6px !important;
	 overflow: hidden;
 }
 
 .citizen-header {
	 background: transparent !important;
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 box-shadow: none !important;
 }

 /* —— 顶栏/侧边栏那一条细边 ——
    见下面 .citizen-header::after 的 border-image：真正看得见的那条边
    画在 ::after 上（桌面是左侧竖向玻璃条、手机是底部横条），
    给它末端色标补亮色侧的淡灰即可。
    ⚠ 不要画在 .citizen-header 自己身上：它的盒子是 fixed + inset 0
      （见源码 Header.less 第 2-9 行，四个方向都取 --header-inset-*，
        tokens 里默认全 0px），所以它的 box 边并不落在玻璃条的外沿上，
      在它身上加边框等于白加（2026-10-07 实测：加了也看不到）。 */
 
 /* 左侧（桌面）竖向玻璃条 */
 .citizen-header::after {
	 content: "";
	 position: fixed;
	 top: 0;
	 left: 0;
	 z-index: -1;
	 pointer-events: none;
	 width: var( --header-size, 3.5rem );
	 height: 100vh;
	 background-color: var(--bl-glass);
	 background-image: radial-gradient(
		 600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		 light-dark( rgba( 255, 255, 255, 0.15 ), rgba( 255, 255, 255, 0.08 ) ),
		 transparent 80%
	 );
	 backdrop-filter: var(--bl-blur);
	 -webkit-backdrop-filter: var(--bl-blur);
	 /* 右侧那条边 = 鼠标跟随的渐变描边。
	    ⚠ 末端色标原来是 transparent —— 鼠标不在附近时这条边完全不存在，
	      亮色下玻璃条（白 35% 叠在 #fafafa 上）和页面糊在一起，
	      侧面看不出任何边界（2026-10-07 实测）。
	    末端换成亮色侧的一层淡灰（暗色侧仍为 transparent，暗色下玻璃比页面亮、不需要）：
	      平时有一条隐隐约约的边，鼠标靠近时被光圈点亮。 */
	 border-right: 1px solid transparent;
	 border-image: radial-gradient(
		 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		 var(--bl-glow-ring),
		 light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.10 ) ) 80%,
		 light-dark( rgba( 128, 128, 128, 0.20 ), transparent )
	 ) 1 / 1 / 0 stretch;
 }
 
 /* 平板/手机：玻璃条转为底部横条 */
 @media screen and (max-width: 1119px) {
	 .citizen-header::after {
		 top: auto;
		 bottom: 0;
		 width: 100%;
		 height: var( --header-size, 3.5rem );
		 border-right: none;
		 border-top: 1px solid transparent;
		 /* 同桌面侧：末端色标不能是 transparent，否则鼠标不在附近时
		    这条边完全不存在，亮色下底部横条和页面糊在一起 */
		 border-image: radial-gradient(
			 150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
			 light-dark( rgba( 255, 255, 255, 0.40 ), rgba( 255, 255, 255, 0.60 ) ),
			 light-dark( rgba( 128, 128, 128, 0.20 ), transparent )
		 ) 1 / 1 / 0 stretch;
		 background-image: none !important;
	 }
 }
 
 /* =====================================================================
  * 6. Sticky Header
  * ===================================================================== */
 
 .citizen-sticky-header {
	 border-radius: 0 !important;
	 background: transparent !important;
 }
 
 .citizen-sticky-header-background {
	 border-radius: 0 !important;
	 left: 0 !important;
	 right: 0 !important;
	 width: 100% !important;
	 top: 0 !important;
	 border: none !important;
	 border-bottom: 1px solid var(--bl-divider) !important;
	 background-color: var(--bl-glass) !important;
	 background-image: none !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
 }
 
 .citizen-sticky-header .cdx-button--weight-quiet { color: var(--bl-text) !important; }
 
 .citizen-sticky-header-page-title,
 .citizen-sticky-header-page-tagline { color: var(--bl-text-strong) !important; }
 
 /* =====================================================================
  * 7. 搜索面板 Command Palette
  * ===================================================================== */
 
 .citizen-command-palette-backdrop {
	 background-color: light-dark( rgba( 0, 0, 0, 0.20 ), rgba( 0, 0, 0, 0.45 ) ) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 z-index: 9999 !important;
	 animation: citizen-fade-in 0.3s ease forwards;
 }
 
 .citizen-command-palette {
	 position: fixed !important;
	 width: 1000px !important;
	 max-width: 92vw !important;
	 top: 50% !important;
	 left: 50% !important;
	 z-index: 10000 !important;
	 isolation: isolate !important;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border-radius: 24px !important;
	 border: 1px solid var(--bl-edge) !important;
	 box-shadow: 0 40px 100px var( --bl-shadow-color-lg ) !important;
	 animation: citizen-pop-in 0.45s cubic-bezier( 0.34, 1.56, 0.64, 1 ) forwards !important;
	 transform-origin: center center !important;
 }
 
 /* 输入区已从 __input / __search 迁到 -header 下（Citizen 3.24） */
 .citizen-command-palette-header,
 .citizen-command-palette__results,
 .citizen-command-palette__footer,
 .cdx-text-input__input {
	 background: transparent !important;
	 border: none !important;
	 box-shadow: none !important;
 }
 
 .citizen-command-palette-header__input { color: var(--bl-text) !important; }
 
 .citizen-command-palette-list { padding: 8px 0 !important; }
 
 .citizen-command-palette-list-item {
	 margin: 0 12px 6px 12px !important;
	 border-radius: 12px !important;
	 overflow: hidden !important;
	 border: none !important;
	 display: block !important;
	 transition: background-color 0.2s ease !important;
 }
 
 .citizen-command-palette-list-item__content {
	 display: flex !important;
	 padding: 12px 16px !important;
	 width: 100% !important;
	 box-sizing: border-box !important;
	 background: transparent !important;
	 color: var(--bl-text) !important;
 }
 
 .citizen-command-palette-list-item__metadata { display: none !important; }
 
 .citizen-command-palette-list-item:hover,
 .citizen-command-palette-list-item[aria-selected="true"] {
	 background-color: var(--bl-hover-strong) !important;
 }
 
 .citizen-command-palette-list-item__actions,
 .citizen-command-palette-list-item__action {
	 background: transparent !important;
	 background-color: transparent !important;
	 border: none !important;
	 box-shadow: none !important;
	 min-width: 32px !important;
	 display: flex !important;
	 justify-content: center !important;
	 align-items: center !important;
	 margin-left: auto !important;
 }
 
 .citizen-command-palette-list-item__action svg {
	 fill: var(--bl-text) !important;
	 opacity: 0.85 !important;
	 transition: all 0.2s ease !important;
 }
 
 .citizen-command-palette-list-item__action:hover {
	 background-color: light-dark( rgba( 255, 192, 203, 0.60 ), rgba( 210, 51, 51, 0.30 ) ) !important;
	 border-radius: 8px !important;
 }
 
 .citizen-command-palette-list-item__action:hover svg {
	 fill: light-dark( #d33, #ff8a8a ) !important;
	 opacity: 1 !important;
	 transform: scale( 1.15 ) !important;
 }
 
 .citizen-command-palette-list-item__text__label,
 .citizen-command-palette-list-item__text__description bdi {
	 color: var(--bl-text) !important;
 }
 
 /* =====================================================================
  * 8. 设置菜单（Citizen 3.24：Vue 渲染，分「外观 / 行为」两组）
  * ===================================================================== */
 
 #citizen-preferences-content {
	 display: flex !important;
	 flex-direction: column !important;
 }
 
 /* 组内排序：外观组 */
 #skin-client-prefs-skin-theme                        { order: 1 !important; }
 #skin-client-prefs-citizen-feature-custom-font-size  { order: 2 !important; }
 #skin-client-prefs-citizen-feature-custom-width      { order: 3 !important; }
 /* 「图像变暗」这一条没什么用，直接从偏好面板里去掉。
    用 CSS 隐藏而不是 JS 删节点：面板是 Vue 渲染的，
    外部删掉它管理的节点在重渲染时容易出错；隐藏既安全又不会被渲染回来。
    （原来这里只写了 order: 4，现在不改默认值，直接隐藏。） */
 #skin-client-prefs-citizen-feature-image-dimming     { display: none !important; }
 #skin-client-prefs-citizen-feature-pure-black        { order: 5 !important; }
 
 /* 组内排序：行为组 */
 #skin-client-prefs-citizen-feature-autohide-navigation { order: 1 !important; }
 #skin-client-prefs-citizen-feature-performance-mode    { order: 2 !important; }
 
 .citizen-preferences-section__heading {
	 color: var(--bl-accent) !important;
	 font-size: 0.85rem !important;
	 font-weight: 500 !important;
	 letter-spacing: 0.1em !important;
	 text-transform: uppercase !important;
 }
 
 /* =====================================================================
  * 8.1 偏好面板里的开关（CdxToggleSwitch）几何
  *
  * Codex 默认（源码 packages/codex/src/components/toggle-switch/ToggleSwitch.vue）：
  *   轨道 .cdx-toggle-switch__switch
  *     width: 48px / height: 32px / border: 1px / border-radius: pill / overflow: hidden
  *   白点 .cdx-toggle-switch__switch__grip
  *     20px 圆 / position: absolute / top: 50%
  *     transform: translate( 6px, -50% )        关
  *     transform: translate( 20px, -50% )       开（:checked ~ 时）
  * ⇒ 轨道 32px 太高、白点 20px 显小（用户反馈"上下太宽、白点太小"）。
  *
  * 这里改成「白点比蓝条上下都高」，并把轨道尺寸也定死：
  *   轨道 46×20px，白点 28px ⇒ 白点上下各凸出 4px。
  *
  * ⚠ 轨道宽度必须由这里显式给定，不能再交给 Codex。
  *   它的宽高是 em 单位的（源码注释原话："Switch width and height is scaling
  *   proportionally to the font-size being used in each mode"），
  *   偏好面板的字号比 16px 大 ⇒ 实际轨道比 48px 宽，
  *   于是写死的水平位移会"白点不到头"（2026-10-07 实测）。
  *   自己定宽度之后，位移才能算准。
  * ⚠ 轨道必须 overflow: visible —— 它默认是 hidden，会把凸出来的白点裁掉。
  * ⚠ 白点 transform 里的 -50% 是垂直居中用的，不能丢。
  *   水平位移按「白点贴到轨道【外】缘」算 —— 白点的包含块是轨道的 padding box
  *   （框内坐标），所以要再多减 1px 把 1px 描边也算进去：
  *     轨道 46px、边框 1px ⇒ padding box 宽 44px、左边在框内坐标 1px 处
  *     关：白点左边贴 0（外缘）      ⇒ x = -1px
  *     开：白点右边贴 46（外缘）      ⇒ x = 46 - 28 - 1 = 17px
  *   （只写到 0 / 16 的话，两端还会各剩 1px 描边，视觉上仍像"差一点没到头"。）
  * ===================================================================== */

 html body.skin-citizen .cdx-toggle-switch__switch {
	 width: 46px !important;
	 min-width: 0 !important;
	 height: 20px !important;
	 min-height: 0 !important;
	 /* 关键：默认 hidden 会把高出轨道的白点裁掉 */
	 overflow: visible !important;
	 border-radius: 9999px !important;
 }

 html body.skin-citizen .cdx-toggle-switch__switch__grip {
	 width: 28px !important;
	 height: 28px !important;
	 min-width: 0 !important;
	 min-height: 0 !important;
	 top: 50% !important;
	 box-sizing: border-box !important;
	 transform: translate( -1px, -50% ) !important;
 }

 html body.skin-citizen .cdx-toggle-switch__input:checked ~ .cdx-toggle-switch__switch .cdx-toggle-switch__switch__grip {
	 transform: translate( 17px, -50% ) !important;
 }
 
 /* =====================================================================
  * 9. 首页 Banner
  * ===================================================================== */
 
 .full-width-banner {
	 width: 100vw;
	 position: relative;
	 left: 50%;
	 right: 50%;
	 margin-left: -50vw;
	 margin-right: -50vw;
	 overflow: hidden;
	 height: 400px;
	 background-size: cover;
	 background-position: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 color: #ffffff;
	 text-shadow: 0 2px 10px rgba( 0, 0, 0, 0.70 );
	 z-index: 1;
	 background-repeat: no-repeat;
	 background-color: #2a2a2a;
 }
 
 .banner-content {
	 max-width: 1200px;
	 padding: 20px;
	 text-align: center;
 }
 
 .page-首页 .banner-image {
	 --banner-image-url: url("https://cdn.jsdelivr.net/gh/KKBlockE/BlocklandPicturebed@main/main/d49dd42343ab1bfcf4efa67f62f4ecf8.png");
	 --banner-image-height: 70vh;
	 background-image: linear-gradient( to top, var(--color-surface-0) 15%, transparent 150% ), var(--banner-image-url);
	 background-size: cover;
	 background-position: top;
	 height: var(--banner-image-height);
	 margin-bottom: calc( -1 * var(--banner-image-height) );
	 position: relative;
	 z-index: 1;
	 pointer-events: none;
 }
 
 .home-banner-overlay {
	 position: relative;
	 z-index: 10;
 }
 
 .page-banner-bg,
 .page-banner-bg * {
	 pointer-events: none !important;
	 user-select: none !important;
 }
 
 .page-banner {
	 pointer-events: none !important;
 }
 
 .page-banner-content div {
	 pointer-events: auto !important;
 }
 
 /* =====================================================================
  * 10. 搜索页面优化
  * ===================================================================== */
 
 .page-特殊_搜索 .oo-ui-layout.oo-ui-labelElement.oo-ui-actionFieldLayout,
 .page-特殊_搜索 .oo-ui-fieldLayout.oo-ui-labelElement,
 .page-特殊_搜索 .mw-widget-titleInputWidget,
 .page-特殊_搜索 .mw-widget-searchInputWidget {
	 max-width: none !important;
	 width: 100% !important;
	 display: flex !important;
 }
 
 .page-特殊_搜索 .mw-search-form-wrapper,
 .page-特殊_搜索 #mw-search-top-table,
 .page-特殊_搜索 .oo-ui-fieldLayout-field {
	 width: 100% !important;
	 max-width: none !important;
 }
 
 .page-特殊_搜索 .oo-ui-actionFieldLayout-input {
	 flex: 1 1 auto !important;
	 width: 100% !important;
 }
 
 .page-特殊_搜索 .oo-ui-actionFieldLayout-input .oo-ui-inputWidget-input {
	 height: 48px !important;
	 width: 100% !important;
	 padding-left: 45px !important;
	 border-radius: 12px 0 0 12px !important;
	 box-sizing: border-box !important;
 }
 
 .page-特殊_搜索 .oo-ui-actionFieldLayout-button {
	 flex: 0 0 auto !important;
	 width: auto !important;
 }
 
 .page-特殊_搜索 .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-button {
	 height: 48px !important;
	 min-width: 120px !important;
	 padding: 0 30px !important;
	 border-radius: 0 12px 12px 0 !important;
	 box-sizing: border-box !important;
 }
 
 /* =====================================================================
  * 11. Infobox 信息框系统
  *     原先三代写法（v1/v3/v4）已合并为一份；内部边框在暗色下统一关闭，
  *     用 light-dark() 一处表达，不再分别写 night / os 两份。
  * ===================================================================== */
 
 :root {
	 --bl-ib-outline-width: 4px;
	 --bl-ib-border:   light-dark( rgba( 128, 128, 128, 0.30 ), transparent );
	 --bl-ib-divider:  light-dark( rgba( 128, 128, 128, 0.15 ), transparent );
	 --bl-ib-hairline: light-dark( rgba( 128, 128, 128, 0.10 ), transparent );
	 /* 模板自带「浅色实心底色」的表头，文字一律用这个色。
		本站模板给的底色全是浅色系（#CFF3F7 / #e6b8f2 / #AFFFFF / #FFFF96 / #FFB4B4 / #C8A0C8…），
		所以这里取恒定深色，不随主题翻转 —— 否则暗色下会变成白字压在浅底上。
		亮色侧 #202122 本来就是正文色，因此这条实际只在暗色下起作用。 */
	 --bl-ib-on-fill: #202122;
 }
 
 /* 信息框本体完全透明：只有描边 + 光线 + 文字，
	底色一律交给页面背景与模板自带的内联颜色。 */
 .infobox {
	 display: table !important;
	 position: relative !important;
	 isolation: isolate !important;
	 z-index: 10 !important;
	 overflow: visible !important;
	 opacity: 1 !important;
	 background: var(--bl-glass) !important;
	 background-image: none !important;
	 backdrop-filter: var(--bl-blur);
	 -webkit-backdrop-filter: var(--bl-blur);
	 color: var(--bl-text) !important;
	 font-size: 0.925rem !important;
	 border: 1px solid var(--bl-ib-border) !important;
	 border-radius: 16px !important;
	 border-collapse: separate !important;
	 border-spacing: 0 !important;
	 box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
	 float: right !important;
	 clear: right !important;
	 margin: 0.5em 0 0.5em 1em !important;
	 width: 22em !important;
 }
 
 .infobox > * {
	 position: relative;
	 z-index: 1;
 }
 
 /* —— 单元格 —— */
 .infobox th:not(.infobox-above),
 .infobox td:not(.infobox-above) {
	 background-color: transparent;
	 padding: 8px 5px !important;
	 line-height: 1.4 !important;
	 border-top: none !important;
 }
 
 /* 单元格文字：只有「自己没写背景色」时才用主题正文色。
	带内联底色的单元格（模板的语义色）不在这里插手 —— 见第 35 节统一方案。 */
 .infobox th:not(.infobox-above):not([style*="background"]),
 .infobox td:not(.infobox-above):not([style*="background"]) {
	 color: var(--bl-text);
 }
 
 /* 现代 wiki UI：数据行之间不画分割线，信息框保持一整块。
	（原先这里每行都有一条 1px 灰线，且暗色侧是 transparent，
	  于是只有亮色看起来是一格一格、有「立体感」。） */
 .infobox tr:not(:last-child) th,
 .infobox tr:not(:last-child) td {
	 border-bottom: none !important;
 }
 
 .infobox th[colspan="2"] {
	 background-color: transparent;
 }
 
 .infobox th[colspan="2"]:not([style*="background"]) {
	 color: var(--bl-text);
 }
 
 .infobox .mw-file-description img { background: transparent !important; }
 
 /* —— 标题 —— */
 .infobox .infobox-title {
	 display: block !important;
	 width: 100% !important;
	 box-sizing: border-box !important;
	 margin: 0 0 12px 0 !important;
	 padding: 16px 12px !important;
	 border-radius: 12px !important;
	 overflow: hidden !important;
	 /* 原先这里是 `1px solid light-dark( rgba(128,128,128,0.30), transparent )`：
		亮色有一圈灰边、暗色没有 ⇒ 亮色下像多出一层浮起的内框。
		改成两色一致（都不画），外层描边由 .infobox 自己负责。 */
	 border: none !important;
	 box-shadow: none !important;
	 text-shadow: none !important;
	 filter: none !important;
	 text-align: center !important;
	 line-height: 1.5 !important;
	 font-size: 1.2rem !important;
 }
 
 caption.infobox-title {
	 caption-side: top !important;
	 margin-bottom: 0 !important;
 }
 
 /* —— 主体 —— */
 .infobox tbody {
	 display: table !important;
	 width: 100% !important;
	 /* 原先这里是 `1px solid light-dark( rgba(128,128,128,0.30), transparent )`：
		这是亮色下「奇怪的立体感凸起」的直接来源 ——
		外层 .infobox 已有一圈描边，再在里面画一圈 1px 圆角灰边，
		两个同心圆角框叠起来就读成了浮起的内嵌面板；而暗色侧是 transparent，
		所以暗色下没有这个现象。改成两色一致（都不画）。 */
	 border: none !important;
	 border-radius: 12px !important;
	 overflow: hidden !important;
	 background: transparent !important;
 }
 
 /* —— 有 caption 的表：tbody 不在卡片顶部，顶角不能圆 ——
   例：<table class="infobox vcard"><caption class="infobox-title" style="background:#4FD5E8">
   tbody 位于 caption【下方】，只有底部是卡片的边。
   若沿用上面的 12px 全圆角，tbody 的顶角会在 caption 与正文之间
   切出一圈圆角缺口（2026-10-07 实测：角色信息框正中出现圆角）。
   判据用相邻兄弟选择器 caption + tbody —— 纯 CSS 可表达，
   正好等价于「这张表有没有 caption」。 */
 .infobox > caption + tbody {
	 border-radius: 0 0 12px 12px !important;
 }
 
 .infobox .infobox-above {
	 text-shadow: none !important;
	 font-weight: bold !important;
	 text-align: center !important;
	 padding: 8px 5px !important;
	 border-bottom: none !important;
	 border-top-left-radius: 12px !important;
	 border-top-right-radius: 12px !important;
 }
 
 /* 表头文字：只有模板没写底色时才用主题色；
	模板自带底色（内联 / TemplateStyles）时，文字完全按模板来。 */
 .infobox .infobox-above:not([style*="background"]) {
	 color: var(--bl-text-strong);
 }
 
 .infobox th.infobox-above,
 .infobox td.infobox-above {
	 padding: 8px 5px !important;
	 line-height: 1.5 !important;
 }
 
 .infobox tr:first-child th,
 .infobox tr:first-child td {
	 border-top-left-radius: 12px !important;
	 border-top-right-radius: 12px !important;
 }
 
 .infobox tr:last-child td,
 .infobox tr:last-child th {
	 border-bottom-left-radius: 12px !important;
	 border-bottom-right-radius: 12px !important;
 }
 
 .infobox .infobox-header {
	 background-color: transparent;
	 font-weight: bold !important;
	 text-align: center !important;
	 text-transform: uppercase;
	 letter-spacing: 1.5px;
	 /* 现代 UI：分区标题只在【上方】留一条主要分割线，下方不画。
		颜色用 --bl-divider（明暗两侧都有值），避免出现"只有亮色有线"。 */
	 border-top: 1px solid var(--bl-divider) !important;
	 border-bottom: none !important;
	 box-shadow: none !important;
 }
 
 .infobox .infobox-header:not([style*="background"]) {
	 color: var(--bl-text-strong);
 }
 
 .infobox-player-header {
	 background: linear-gradient( 90deg, var(--bl-accent-soft), transparent );
	 border-radius: 8px;
	 padding: 5px !important;
	 margin-bottom: 5px !important;
 }
 
 /* —— caption 去装饰 —— */
 .infobox caption,
 .mw-parser-output .infobox caption,
 table.infobox caption {
	 background: transparent;
	 background-color: transparent;
	 border: none !important;
	 box-shadow: none !important;
	 filter: none !important;
	 text-shadow: none !important;
	 outline: none !important;
 }
 
 /* caption 没写内联字色时才用主题正文色；
	写了（例如 style="background:#4FD5E8; color:#ffffff"）就完全按模板来。 */
 .infobox caption:not([style*="color"]),
 .mw-parser-output .infobox caption:not([style*="color"]),
 table.infobox caption:not([style*="color"]) {
	 color: var(--bl-text);
 }
 
 .infobox caption b,
 table.infobox caption b {
	 background: transparent;
	 border: none !important;
	 box-shadow: none !important;
	 filter: none !important;
	 color: inherit;
 }
 
 /* —— 暗色下彻底关闭信息框内部所有分割线 —— */
 .mw-parser-output .infobox,
 .mw-parser-output .infobox tr,
 .mw-parser-output .infobox th,
 .mw-parser-output .infobox td,
 .mw-parser-output .infobox .infobox-above,
 .mw-parser-output .infobox .infobox-header,
 .mw-parser-output .infobox table {
	 border-color: light-dark( rgba( 128, 128, 128, 0.15 ), transparent ) !important;
 }
 
 /* —— 外圈光边 ——
    ⚠ 宽度与内缩是「细光效」的关键参数。
       inset: -1px + border: 2px ⇒ 与其它面板（菜单卡 / ambox / voy-box /
       command-palette / navbox …）**同一组值**，线宽统一。
    原始 D:\c.css 里这一组本来就是 2px；那文件后面几段又先后把它改成
       3px（inset -2px，L2811）→ 4px（inset -4px，L4512）→ 1px（inset 0，L4479）
    四个版本互相覆盖，最后停在 4px —— 是反复迭代的产物，别照抄其中任一条。
    2026-10-07 实测：3px（inset -2px）向外凸出一圈偏粗的白边，用户要求改细。
    各面板的线宽：信息框 2px、其余横条面板 2px、目录 1.2px、最后修改时间 2.4px。 */
 .infobox::before,
 table.infobox::before,
 table.infobox[style*="background"]::before,
 table.infobox[style*="width"]::before {
	 content: "" !important;
	 position: absolute;
	 inset: -1px;
	 border: 2px solid transparent;
	 border-radius: inherit;
	 background: radial-gradient(
		 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		 var(--bl-glow-ring) 0%,
		 var(--bl-glow-ring-2) 50%,
		 transparent 100%
	 ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: overlay;
	 z-index: 100;
	 pointer-events: none;
 }
 
 .infobox::after,
 table.infobox::after,
 table.infobox[style*="background"]::after,
 table.infobox[style*="width"]::after {
	 content: "" !important;
	 position: absolute;
	 inset: 0;
	 border-radius: inherit;
	 background: radial-gradient(
		 500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		 var(--bl-glow-fill) 0%,
		 transparent 75%
	 ) !important;
	 mix-blend-mode: soft-light;
	 z-index: 1;
	 pointer-events: none;
 }
 
 
	 .infobox .infobox-title[style*="color:black"]:not([style*="background"]),
	 .infobox .infobox-title[style*="color: black"]:not([style*="background"]),
	 .infobox .infobox-title[style*="color:#000;"]:not([style*="background"]),
	 .infobox .infobox-title[style*="color: #000;"]:not([style*="background"]),
	 .infobox .infobox-title[style*="color:#000000"]:not([style*="background"]),
	 .infobox .infobox-title[style*="color: #000000"]:not([style*="background"]),
	 .infobox .infobox-title[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 .infobox .infobox-title[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 .infobox .infobox-title[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
	 .infobox .infobox-header[style*="color:black"]:not([style*="background"]),
	 .infobox .infobox-header[style*="color: black"]:not([style*="background"]),
	 .infobox .infobox-header[style*="color:#000;"]:not([style*="background"]),
	 .infobox .infobox-header[style*="color: #000;"]:not([style*="background"]),
	 .infobox .infobox-header[style*="color:#000000"]:not([style*="background"]),
	 .infobox .infobox-header[style*="color: #000000"]:not([style*="background"]),
	 .infobox .infobox-header[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 .infobox .infobox-header[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 .infobox .infobox-header[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
	 .infobox .infobox-above[style*="color:black"]:not([style*="background"]),
	 .infobox .infobox-above[style*="color: black"]:not([style*="background"]),
	 .infobox .infobox-above[style*="color:#000;"]:not([style*="background"]),
	 .infobox .infobox-above[style*="color: #000;"]:not([style*="background"]),
	 .infobox .infobox-above[style*="color:#000000"]:not([style*="background"]),
	 .infobox .infobox-above[style*="color: #000000"]:not([style*="background"]),
	 .infobox .infobox-above[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 .infobox .infobox-above[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 .infobox .infobox-above[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="color:black"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="color: black"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="color:#000;"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="color: #000;"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="color:#000000"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="color: #000000"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 .infobox .infobox-subheader[style*="rgb"][style*="0 0 0"]:not([style*="background"]) {
	 color: light-dark( #000000, #eaecf0 ) !important;
 }
 
 /* =====================================================================
  * 12. Infobox · ve-infobox-country / geography / vcard
  * ===================================================================== */
 
 .infobox.ve-infobox-country,
 .infobox.ve-infobox-country tbody,
 .infobox.ve-infobox-country tr {
	 background-color: transparent !important;
	 border-color: var(--bl-ib-hairline) !important;
 }
 
 .infobox.ve-infobox-country th,
 .infobox.ve-infobox-country td {
	 background-color: transparent;
	 border-color: var(--bl-ib-hairline) !important;
 }
 
 .infobox.ve-infobox-country {
	 background: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-edge) !important;
	 box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
	 border-radius: 16px !important;
	 overflow: hidden;
	 padding: 0 !important;
	 border-collapse: separate !important;
	 border-spacing: 0 !important;
 }
 
 .infobox.ve-infobox-country tbody {
	 background-color: transparent !important;
	 border: none !important;
 }
 
 .infobox.ve-infobox-country .infobox-above {
	 text-shadow: none !important;
	 font-weight: bold !important;
	 text-align: center !important;
	 padding: 8px 5px !important;
	 border-bottom: none !important;
	 border-top-left-radius: 12px !important;
	 border-top-right-radius: 12px !important;
	 margin: 0 !important;
	 display: table-cell !important;
	 box-shadow: none !important;
 }
 
 .infobox.ve-infobox-country .infobox-above:not([style*="background"]) {
	 color: var(--bl-text-strong);
 }
 
 .infobox.ve-infobox-country .infobox-header:not([style*="background"]) {
	 color: light-dark( #3366cc, #ffffff );
 }
 
 .infobox.ve-infobox-country tr:first-child th,
 .infobox.ve-infobox-country tr:first-child td { border-top: none !important; }
 
 .infobox.ve-infobox-country .infobox-header {
	 background-color: transparent;
	 text-shadow: light-dark( none, 0 1px 2px rgba( 0, 0, 0, 0.30 ) );
	 backdrop-filter: none;
	 -webkit-backdrop-filter: none;
	 font-weight: bold !important;
	 text-align: center !important;
	 text-transform: uppercase;
	 letter-spacing: 1.5px;
	 font-size: 0.85rem;
	 border-top: 1px solid var(--bl-divider) !important;
	 border-bottom: none !important;
 }
 
 .infobox.ve-infobox-country .infobox-image img {
	 background: transparent !important;
	 filter: drop-shadow( 0 4px 8px rgba( 0, 0, 0, 0.20 ) );
 }
 
 /* —— geography / vcard 深色适配（原先只覆盖了 os，现已统一） —— */
 .infobox.geography,
 .infobox.vcard {
	 background: var(--bl-glass) !important;
	 border: 1px solid var(--bl-edge) !important;
	 box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
 }
 
 .infobox.geography .infobox-above,
 .infobox.vcard .infobox-above,
 .infobox.geography th.fn.org,
 .infobox.vcard th.fn.org {
	 border-color: var(--bl-ib-divider) !important;
 }
 
 .infobox.geography .infobox-subheader,
 .infobox.vcard .infobox-subheader {
	 background-color: transparent;
	 border-color: var(--bl-ib-divider) !important;
 }
 
 .infobox.geography .infobox-subheader:not([style*="background"]),
 .infobox.vcard .infobox-subheader:not([style*="background"]) {
	 color: light-dark( #202122, #ffffff );
 }
 
 .infobox.geography .infobox-header,
 .infobox.vcard .infobox-header {
	 background-color: transparent;
	 border-color: var(--bl-ib-divider) !important;
 }
 
 .infobox.geography .infobox-header:not([style*="background"]),
 .infobox.vcard .infobox-header:not([style*="background"]) {
	 color: light-dark( #3366cc, #ffffff );
 }
 
 .infobox.geography th.infobox-label,
 .infobox.geography td.infobox-data,
 .infobox.vcard th.infobox-label,
 .infobox.vcard td.infobox-data {
	 background-color: transparent;
	 border-color: var(--bl-ib-divider) !important;
 }
 
 /* 同上：带内联底色的 label / data 不接管文字色 */
 .infobox.geography th.infobox-label:not([style*="background"]),
 .infobox.geography td.infobox-data:not([style*="background"]),
 .infobox.vcard th.infobox-label:not([style*="background"]),
 .infobox.vcard td.infobox-data:not([style*="background"]) {
	 color: var(--bl-text);
 }
 
 .infobox.geography::after,
 .infobox.vcard::after {
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
 }
 
 /* geography/vcard 内部连线全清（含 map 容器） */
 .infobox.geography.vcard,
 .infobox.geography.vcard tr,
 .infobox.geography.vcard th,
 .infobox.geography.vcard td,
 .infobox.geography.vcard .infobox-above,
 .infobox.geography.vcard .infobox-header,
 #map-ctx-1778649814 {
	 border: 0 none transparent !important;
	 border-top: 0 none transparent !important;
	 border-bottom: 0 none transparent !important;
	 border-left: 0 none transparent !important;
	 border-right: 0 none transparent !important;
	 outline: none !important;
 }
 
 #map-ctx-1778649814 {
	 border-radius: 12px !important;
	 overflow: hidden !important;
 }
 
 /* ⚠ 这里【故意】只匹配 .tornado-no-top-radius，不要改成匹配 .tc-no-top-radius。
	网页上实际的类名确实是 tc-no-top-radius，写成下面这样"看起来"能生效：
		.infobox.tc-no-top-radius > tbody { border-top-*-radius: 0 !important; }
	但一旦生效，tbody 的顶部圆角被抹平，.infobox-above 的方角就露出来了 ——
	台风信息框的表头会从圆角变成方角（2026-10-07 用户实测报的 bug）。
	台风表 .infobox-above 自带内联 `border-radius: 0 !important`（方角），
	靠 tbody 的 border-radius: 12px + overflow: hidden 把它裁成圆角，
	所以 tbody 的顶部圆角必须保住。
	类名不匹配 = 规则不生效 = 圆角保住，这是有意为之。 */
 .infobox.tornado-no-top-radius > tbody {
	 border-top-left-radius: 0 !important;
	 border-top-right-radius: 0 !important;
	 overflow: hidden;
 }
 
 /* =====================================================================
  * 13. Infobox · 国家数据图表
  * ===================================================================== */
 
 .infobox.ve-infobox-country .infobox-country-chart {
	 background: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 border-radius: 12px !important;
	 overflow: hidden !important;
	 margin: 6px 0 !important;
	 box-shadow: 0 2px 12px var(--bl-shadow-color-sm) !important;
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > div:first-child {
	 background: light-dark( rgba( 54, 121, 204, 0.12 ), rgba( 54, 121, 204, 0.20 ) ) !important;
	 color: light-dark( #3366cc, #8ab8ff ) !important;
	 font-weight: bold !important;
	 font-size: 0.85rem !important;
	 letter-spacing: 1px !important;
	 text-transform: uppercase !important;
	 padding: 4px 0 !important;
	 border-bottom: 1px solid var(--bl-border) !important;
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > table {
	 background: transparent !important;
	 border: none !important;
	 margin: 4px 0 !important;
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > table tr {
	 background: transparent !important;
	 border: none !important;
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > table td {
	 background: transparent;
	 border: none !important;
	 padding: 4px 6px !important;
	 font-size: 0.9rem !important;
	 color: var(--bl-text);
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > table td:first-child {
	 font-weight: 500 !important;
	 white-space: nowrap !important;
	 width: 4.2em !important;
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > table td:nth-child(2) {
	 text-align: right !important;
	 width: 4.5em !important;
	 font-variant-numeric: tabular-nums !important;
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > table td:last-child > div {
	 border-radius: 7px !important;
	 height: 14px !important;
	 overflow: hidden !important;
	 background: light-dark( rgba( 128, 128, 128, 0.10 ), rgba( 255, 255, 255, 0.12 ) );
 }
 
 .infobox.ve-infobox-country .infobox-country-chart > table td:last-child > div > div {
	 border-radius: 7px !important;
	 height: 14px !important;
	 min-width: 2px !important;
	 box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.25 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.10 ) !important;
	 transition: width 0.3s ease !important;
 }
 
 /* =====================================================================
  * 14. 通知中心 (Echo)
  * ===================================================================== */
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
	 animation: none !important;
	 filter: none !important;
	 background: transparent !important;
	 border: none !important;
	 box-shadow: none !important;
	 overflow: visible !important;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border) !important;
	 border-radius: 16px !important;
	 box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
	 position: relative !important;
	 transition: none !important;
	 will-change: opacity, transform;
	 backface-visibility: hidden;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup::before {
	 content: "" !important;
	 display: block !important;
	 position: absolute !important;
	 inset: -1px !important;
	 border: 2px solid transparent !important;
	 border-radius: 17px !important;
	 background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
	 -webkit-mask-clip: content-box, border-box !important;
	 -webkit-mask-composite: source-out !important;
	 mask-composite: subtract !important;
	 mix-blend-mode: screen !important;
	 z-index: 10 !important;
	 pointer-events: none !important;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup::after {
	 content: "" !important;
	 display: block !important;
	 position: absolute !important;
	 inset: 0 !important;
	 border-radius: 16px !important;
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
	 mix-blend-mode: soft-light !important;
	 z-index: 1 !important;
	 pointer-events: none !important;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-head,
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body,
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-footer,
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-clippableElement-clippable,
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-notificationsListWidget,
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-placeholderItemWidget {
	 background: transparent !important;
	 background-color: transparent !important;
	 border-color: var(--bl-border-soft) !important;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body,
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-clippableElement-clippable {
	 overflow-y: auto !important;
	 overflow-x: hidden !important;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-anchor { display: none !important; }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button {
	 background-color: light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
	 border: 1px solid var(--bl-border) !important;
	 border-radius: 8px !important;
	 transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button:hover {
	 background-color: light-dark( rgba( 255, 255, 255, 0.50 ), rgba( 255, 255, 255, 0.20 ) ) !important;
	 border-color: var(--bl-border-strong) !important;
	 box-shadow: 0 2px 8px var(--bl-shadow-color) !important;
 }
 
 .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-labelElement-label,
 .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-iconElement-icon {
	 color: var(--bl-text) !important;
 }
 
 .mw-echo-ui-notificationItemWidget {
	 background: transparent !important;
	 transition: background-color 0.2s ease !important;
 }
 
 .mw-echo-ui-notificationItemWidget:hover { background-color: var(--bl-hover) !important; }
 
 .mw-echo-ui-bundleNotificationItemWidget-group,
 .mw-echo-ui-sortedListWidget,
 .mw-echo-ui-sortedListWidget-group {
	 background: transparent !important;
 }
 
 .mw-echo-ui-notificationItemWidget-bundled {
	 background: transparent !important;
	 border-bottom: 1px solid light-dark( rgba( 0, 0, 0, 0.06 ), rgba( 255, 255, 255, 0.06 ) ) !important;
	 transition: background-color 0.2s ease !important;
 }
 
 .mw-echo-ui-notificationItemWidget-bundled:last-child { border-bottom: none !important; }
 .mw-echo-ui-notificationItemWidget-bundled:hover { background-color: var(--bl-hover) !important; }
 
 .mw-echo-ui-notificationItemWidget-content-message-header,
 .mw-echo-ui-notificationItemWidget-content-message-header strong { color: var(--bl-text) !important; }
 
 .mw-echo-ui-notificationItemWidget-content-actions-timestamp { color: var(--bl-text-muted) !important; }
 
 .mw-echo-ui-actionMenuPopupWidget .oo-ui-iconElement-icon {
	 filter: var( --bl-f-invert ) !important;
	 opacity: 0.6 !important;
 }
 
 .mw-echo-ui-toggleReadCircleButtonWidget-circle {
	 border-color: light-dark( rgba( 0, 0, 0, 0.20 ), rgba( 255, 255, 255, 0.30 ) ) !important;
 }
 
 .mw-echo-ui-notificationItemWidget-unread .mw-echo-ui-toggleReadCircleButtonWidget-circle {
	 background-color: var(--bl-accent) !important;
	 border-color: var(--bl-accent) !important;
 }
 
 /* =====================================================================
  * 15. 弹出预览 (Page Previews / Popups)
  * ===================================================================== */
 
 .mwe-popups,
 .mwe-popups.mwe-popups-fade-in-up,
 .mwe-popups.mwe-popups-fade-in-down,
 .mwe-popups.mwe-popups-fade-out-up,
 .mwe-popups.mwe-popups-fade-out-down {
	 animation: none !important;
	 transition: none !important;
 }
 
 .mwe-popups::before,
 .mwe-popups::after {
	 animation: none !important;
	 transition: none !important;
	 display: none !important;
 }
 
 .mwe-popups {
	 background: transparent !important;
	 border: none !important;
	 box-shadow: none !important;
	 isolation: auto !important;
 }
 
 .mwe-popups .mwe-popups-container {
	 overflow: hidden !important;
	 clip-path: none !important;
	 -webkit-clip-path: none !important;
	 position: relative !important;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 background-image: none !important;
	 border-radius: 12px !important;
	 border: 1px solid var(--bl-border) !important;
	 box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
 }
 
 .mwe-popups .mwe-popups-container::before {
	 content: "" !important;
	 display: block !important;
	 position: absolute !important;
	 inset: -1px !important;
	 border: 2px solid transparent !important;
	 border-radius: 13px !important;
	 background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
	 -webkit-mask-clip: content-box, border-box !important;
	 -webkit-mask-composite: source-out !important;
	 mask-composite: subtract !important;
	 mix-blend-mode: screen !important;
	 z-index: 10 !important;
	 pointer-events: none !important;
 }
 
 .mwe-popups .mwe-popups-container::after {
	 content: "" !important;
	 display: block !important;
	 position: absolute !important;
	 inset: 0 !important;
	 border-radius: 12px !important;
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
	 mix-blend-mode: soft-light !important;
	 z-index: 1 !important;
	 pointer-events: none !important;
 }
 
 .mwe-popups .mwe-popups-extract,
 .mwe-popups .mwe-popups-scroll {
	 background: transparent !important;
	 overflow: hidden !important;
 }
 
 .mwe-popups .mwe-popups-extract::after { display: none !important; }
 
 .mwe-popups footer {
	 background: light-dark( rgba( 255, 255, 255, 0.10 ), rgba( 0, 0, 0, 0.15 ) ) !important;
	 border-top: 1px solid var(--bl-border-soft) !important;
 }
 
 .mwe-popups .mwe-popups-extract,
 .mwe-popups .mwe-popups-title,
 .mwe-popups footer a { color: var(--bl-text) !important; }
 
 .mwe-popups-is-tall .mwe-popups-container,
 .mwe-popups:not( .mwe-popups-no-image-pointer ) .mwe-popups-container { clip-path: none !important; }
 
 .mwe-popups .mwe-popups-discreet { background: transparent !important; }
 .mwe-popups .mwe-popups-thumbnail { border-radius: 12px 12px 0 0 !important; }
 
 .mwe-popups.mwe-popups-type-generic .mwe-popups-container {
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
 }
 
 /* =====================================================================
  * 16. Citizen Navbox：沿用本站 Infobox 的玻璃、圆角、阴影与彩色外框。
  * Common.css 不再负责 Citizen 的 Navbox 外观，模块原版负责结构。
  * ===================================================================== */
 html body.skin-citizen .navbox {
  position: relative !important;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  margin: 1em auto 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
  color: var(--bl-text);
  font-size: .925rem;
  line-height: 1.4;
  box-shadow: 0 8px 32px var(--bl-shadow-color-lg) !important;
  backdrop-filter: var(--bl-blur) !important;
  -webkit-backdrop-filter: var(--bl-blur) !important;
 }
 html body.skin-citizen .navbox:not([style*="background"]) {
  background: var(--bl-glass) !important;
 }
 /* 光效：光圈 + 柔光，与 Infobox / ambox / voy-box 同一套写法。
    ⚠ 这两条原来被文件末尾的第 37 节改成了 `content: none` ——
      于是 Navbox 丢掉光圈（只剩一层 35% 的柔光），和其它面板不一致。
      已恢复成本来的写法（2026-10-07）。 */
 html body.skin-citizen .navbox::before {
	 content: "" !important;
	 display: block !important;
	 position: absolute !important;
	 inset: -1px !important;
	 border: 2px solid transparent !important;
	 border-radius: inherit !important;
	 /* 尺寸保持和其它横条面板同款：400px 半径、ring-2 50% 淡出、100% 透明。
	    ⚠ 亮度靠下面的 opacity 压，不要靠缩小半径 ——
	      缩半径改的是"照亮多大一片"，不是"多亮"（2026-10-07 走了一次弯路）。 */
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 50%, transparent 100% ) border-box !important;
	 /* 整体压低亮度：opacity 在混合之前生效，所以是把整圈光等比压暗，
	    尺寸、位置都不变；一个值同时管亮暗两种主题。 */
	 opacity: 0.5 !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: overlay !important;
	 z-index: 100 !important;
	 pointer-events: none !important;
 }
 html body.skin-citizen .navbox::after {
	 content: "" !important;
	 display: block !important;
	 position: absolute !important;
	 inset: 0 !important;
	 border-radius: inherit !important;
	 /* 柔光分两档，别混用：
	      强档 var(--bl-glow-fill)   白 .35 / 暗 .10 —— 信息框、通知弹层、
	                                  弹出预览、命令面板、.bl-hero 这类「浮起卡片」
	      弱档 var(--bl-glow-fill-2) 白 .20 / 暗 .08 —— ambox / voy-box /
	                                  aero-news-box 这类「内容区横条」
	    Navbox 是又宽又扁的横条，用强档 + 500px 时整条中间会糊成一片亮斑
	    （比边框光圈还亮）。所以跟内容区横条一个档：弱档 + 400px + 70%。 */
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
	 mix-blend-mode: soft-light !important;
	 z-index: 1 !important;
	 pointer-events: none !important;
 }
 html body.skin-citizen .navbox-inner,
 html body.skin-citizen .navbox-subgroup {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
 }
 html body.skin-citizen .navbox-inner:not([style*="background"]),
 html body.skin-citizen .navbox-subgroup:not([style*="background"]) {
  background: transparent !important;
 }
 html body.skin-citizen .navbox .navbox-title,
 html body.skin-citizen .navbox .navbox-group,
 html body.skin-citizen .navbox .navbox-list,
 html body.skin-citizen .navbox .navbox-image,
 html body.skin-citizen .navbox .navbox-abovebelow {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  vertical-align: middle;
 }
 html body.skin-citizen .navbox .navbox-title {
  position: static !important;
  padding: 10px 14px !important;
  font-size: 1.05em;
  line-height: 1.4;
  font-weight: 700;
  color: var(--bl-text-strong);
 }
 html body.skin-citizen .navbox .navbox-title:not([style*="background"]),
 html body.skin-citizen .navbox .navbox-group:not([style*="background"]),
 html body.skin-citizen .navbox .navbox-list:not([style*="background"]),
 html body.skin-citizen .navbox .navbox-abovebelow:not([style*="background"]) {
  background: transparent !important;
 }
 /* 只有最外层标题圆顶部；分组/子导航不各自画圆角。 */
 html body.skin-citizen .navbox > tbody > tr:first-child > .navbox-title,
 html body.skin-citizen .navbox > .navbox-inner > tbody > tr:first-child > .navbox-title {
  border-radius: 15px 15px 0 0 !important;
 }
 html body.skin-citizen .navbox .navbox-group {
  text-align: left; /* 默认靠左；允许模板内联 groupstyle 覆盖。 */
  width: 1%;
  padding: 8px 12px !important;
  font-weight: 600;
  color: var(--bl-text);
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
 }
 html body.skin-citizen .navbox .navbox-list {
  text-align: left; /* 默认靠左；允许模板内联 liststyle 覆盖。 */
  padding: 0 !important;
  color: var(--bl-text);
 }
 html body.skin-citizen .navbox .navbox-list > div {
  padding: 8px 12px !important;
  border: 0 !important;
  box-shadow: none !important;
 }
 html body.skin-citizen .navbox .navbox-abovebelow {
  padding: 8px 12px !important;
  color: var(--bl-text);
 }
 html body.skin-citizen .navbox .navbox-odd:not([style*="background"]),
 html body.skin-citizen .navbox .navbox-even:not([style*="background"]) {
  background: transparent !important;
 }
 /* 固定的行/列分隔：保留分组结构，不使用渐变或发光线。 */
 html body.skin-citizen .navbox {
  --bl-navbox-divider: light-dark(#d9dce3, #40444d);
 }
 html body.skin-citizen .navbox tr + tr > .navbox-abovebelow,
 html body.skin-citizen .navbox tr + tr > .navbox-group,
 html body.skin-citizen .navbox tr + tr > .navbox-image,
 html body.skin-citizen .navbox tr + tr > .navbox-list,
 html body.skin-citizen .navbox tr + tr > .navbox-title {
  border-top: 1px solid var(--bl-navbox-divider) !important;
 }
 html body.skin-citizen .navbox .navbox-group + .navbox-list,
 html body.skin-citizen .navbox .navbox-list-with-group,
 html body.skin-citizen .navbox .navbox-list1 {
  border-left: 1px solid var(--bl-navbox-divider) !important;
 }
 /* 浅色内联背景未指定字色时，默认用深字，避免夜间白字压浅底。 */
 html body.skin-citizen .navbox .navbox-title[style*="background"],
 html body.skin-citizen .navbox .navbox-group[style*="background"],
 html body.skin-citizen .navbox .navbox-abovebelow[style*="background"] {
  color: var(--bl-ib-on-fill);
 }
 /* 控件沿用标题字色；实际页面链接保留 Citizen 的蓝链/红链颜色。 */
 html body.skin-citizen .navbox .navbox-title .navbar,
 html body.skin-citizen .navbox .navbox-title .mw-collapsible-toggle {
  color: inherit;
 }
 html body.skin-citizen .navbox .navbox-title a[href],
 html body.skin-citizen .navbox .navbox-group a[href] {
  color: var(--color-link, #36c) !important;
 }
 html body.skin-citizen .navbox .navbox-title a[href]:visited,
 html body.skin-citizen .navbox .navbox-group a[href]:visited {
  color: var(--color-link--visited, #36c) !important;
 }
 html body.skin-citizen .navbox .navbox-title a[href]:hover,
 html body.skin-citizen .navbox .navbox-group a[href]:hover {
  color: var(--color-link--hover, #447ff5) !important;
 }
 html body.skin-citizen .navbox .navbox-title a.new[href],
 html body.skin-citizen .navbox .navbox-group a.new[href] {
  color: var(--color-link-red, #d33) !important;
 }
 html body.skin-citizen .navbox .navbox-title a.new[href]:hover,
 html body.skin-citizen .navbox .navbox-group a.new[href]:hover {
  color: var(--color-link-red--hover, #f55) !important;
 }
 /* 使用 Wikipedia 的浮动按钮布局，保留模块创建的按钮和点击行为。 */
 html body.skin-citizen .navbox .navbox-title .navbar {
  position: static !important;
  float: left;
  width: auto;
  font-size: .85em;
  font-weight: 400;
  line-height: inherit;
 }
 html body.skin-citizen .navbox .navbox-title .mw-collapsible-toggle {
  position: static !important;
  float: right;
  font-size: .85em;
  font-weight: 400;
  line-height: inherit;
 }
 /* 描边继承标题填色，单独增加饱和度并稍压亮度，不改变标题及文字。 */
 html body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"])::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  box-sizing: border-box !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: 20px !important;
  background-color: inherit !important;
  background-image: none !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box !important;
  mask-composite: exclude !important;
  filter: saturate(1.28) brightness(.90) !important;
  pointer-events: none !important;
  z-index: 2;
 }
 html body.skin-citizen .navbox .navbox-subgroup .navbox-title::before,
 html body.skin-citizen .navbox .navbox .navbox-title::before {
  content: none !important;
  display: none !important;
 }
 html body.skin-citizen .navbox .navbox {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
 }
 html body.skin-citizen .navbox > tbody > tr:last-child > :first-child,
 html body.skin-citizen .navbox > .navbox-inner > tbody > tr:last-child > :first-child {
  border-bottom-left-radius: 15px !important;
 }
 html body.skin-citizen .navbox > tbody > tr:last-child > :last-child,
 html body.skin-citizen .navbox > .navbox-inner > tbody > tr:last-child > :last-child {
  border-bottom-right-radius: 15px !important;
 }
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .navbox:not([style*="background"]) {
  background: light-dark(#ffffff, #16181b) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
 }
 @media screen and (max-width: 640px) {
  html body.skin-citizen .navbox { font-size: .85rem; }
  html body.skin-citizen .navbox .navbox-group { padding: 6px 8px !important; }
  html body.skin-citizen .navbox .navbox-list > div { padding: 6px 10px !important; }
 }
 
 /* =====================================================================
  * 17. Ambox 消息框
  * ===================================================================== */
 
 table.ambox {
	 position: relative !important;
	 z-index: 100 !important;
	 overflow: hidden !important;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border-style: solid !important;
	 border-width: 1px !important;
	 border-color: var(--bl-edge) !important;
	 border-left-width: 8px !important;
	 border-radius: 12px !important;
	 box-shadow: 0 4px 15px var(--bl-shadow-color-sm) !important;
	 margin: 10px 0 !important;
	 width: auto !important;
	 clear: both !important;
	 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 table.ambox:hover {
	 transform: translateY( -2px );
	 box-shadow: 0 8px 25px var(--bl-shadow-color) !important;
 }
 
 table.ambox td.ambox-text,
 table.ambox td.ambox-text b,
 table.ambox td.ambox-text small { color: var(--bl-text) !important; }
 
 /* 左侧色条：类别色与主题无关，保持常量 */
 table.ambox-notice     { border-left-color: #1e90ff !important; }
 table.ambox-delete     { border-left-color: #b22222 !important; }
 table.ambox-content    { border-left-color: #f28500 !important; }
 table.ambox-style      { border-left-color: #f4c430 !important; }
 table.ambox-good       { border-left-color: #66cc66 !important; }
 table.ambox-move       { border-left-color: #9932cc !important; }
 table.ambox-speedy     { border-left-color: #b32424 !important; }
 table.ambox-protection { border-left-color: #a2a9b1 !important; }
 table.ambox-funny      { border-left-color: #FF69B4 !important; }
 
 table.ambox::before {
	 content: "" !important;
	 position: absolute;
	 inset: -1px;
	 border: 2px solid transparent;
	 background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-fill-2) 40%, transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: overlay;
	 z-index: 10;
	 pointer-events: none;
 }
 
 table.ambox::after {
	 content: "" !important;
	 position: absolute;
	 inset: 0;
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
	 mix-blend-mode: soft-light;
	 z-index: 1;
	 pointer-events: none;
 }
 
 /* =====================================================================
  * 18. Wikitable 表格 / overflow 容器
  * ===================================================================== */
 
 .citizen-overflow-wrapper,
 .citizen-overflow-content {
	 background: transparent !important;
	 border: none !important;
	 box-shadow: none !important;
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 padding: 15px !important;
	 margin: 1em -15px !important;
 }
 
 .citizen-overflow-content {
	 padding: 0 !important;
	 margin: 0 !important;
 }
 
 .citizen-overflow-content > table.wikitable { margin: 0 !important; }
 
 .mw-parser-output table.wikitable {
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 border-radius: 12px !important;
	 box-shadow: 0 8px 24px var(--bl-shadow-color) !important;
	 border-collapse: separate !important;
	 border-spacing: 0 !important;
	 width: 100% !important;
	 margin: 1.5em 0 !important;
 }
 
 /* 只画右边和下边。
	border-collapse 是 separate（保留圆角需要），若每个单元格都画满一圈，
	相邻两格的「右 1px + 左 1px」会叠成 2px —— 看起来就是「分割线太宽」。
	只画右 + 下，内部线正好 1px；外框由表格自身的 border 负责。
	下面 tr:last-child / tr td:last-child 那几条把最右列、最底行的收边去掉。 */
 .mw-parser-output table.wikitable th:not(.notheme),
 .mw-parser-output table.wikitable td:not(.notheme) {
	 border: none !important;
	 border-right: 1px solid var(--bl-divider) !important;
	 border-bottom: 1px solid var(--bl-divider) !important;
	 padding: 10px 16px !important;
 }
 
 /* —— 彩色单元格：亮色用模板原色，暗色把底色压深（不抹掉颜色） ——
	.notheme 的语义是「这个单元格不跟随主题，模板自己管」，
	反过来 :not(.notheme) 是「跟随主题」——所以这里由本主题接管配色。
	接管方式不是把底色抹成透明（那会丢掉表格的颜色编码，例如
	区域 / 洋区 / 气旋 的配色），而是用伪元素取模板原色再压暗 + 补饱和。
	实现要点：
	  · background-color: inherit —— background-color 虽然不继承，但显式写
		inherit 关键字可以拿到父元素【计算后】的值，于是伪元素正好拿到
		模板写在内联 style 上的那个浅色底，不需要知道它是什么颜色；
	  · filter: var(--bl-cell-filter) —— 亮色是 none，暗色是
		brightness(0.42) saturate(1.5)。只压暗不补饱和，浅色底会变成
		灰扑扑的脏色（浅色本来饱和度就低）；补饱和后才看得出蓝 / 绿 / 金；
	  · 单元格要建层叠上下文（position: relative + isolation: isolate），
		否则 z-index:-1 的伪元素会跑到表格背景后面，看不见；
	  · 负 z-index 的绘制顺序正好在「父元素背景之后、行内内容之前」，
		所以文字不会被压到；
	  · 伪元素要 border-radius: inherit，否则四个角的圆角会被方块盖住。
	原先 th 上写的是 background-color: transparent !important，已移除。 */
 .mw-parser-output table.wikitable th:not(.notheme),
 .mw-parser-output table.wikitable td:not(.notheme) {
	 position: relative;
	 isolation: isolate;
	 z-index: 0;
	 /* 底色不铺到边框下面：否则暗色下边框那 1px 会透出模板的浅色底，
		变成一圈发亮的网格线。裁到 padding-box 后，边框下面是表格自己的底色。 */
	 background-clip: padding-box;
 }
 
 .mw-parser-output table.wikitable th:not(.notheme)::before,
 .mw-parser-output table.wikitable td:not(.notheme)::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: -1;
	 border-radius: inherit;
	 background-color: inherit;
	 filter: var( --bl-cell-filter );
	 pointer-events: none;
 }
 
 .mw-parser-output table.wikitable th:not(.notheme) {
	 color: var(--bl-text) !important;
 }
 
 .mw-parser-output table.wikitable td:not(.notheme) {
	 color: var(--bl-text) !important;
 }
 
 /* —— 底色写在 <tr> 上的行（模板的另一种常见写法）——
   例：<tr style="background-color:#fff1dc;">（单元格自己没写底色，
   表格 ① 那种「一级行政区划」就是这种）。
   单元格级的 ::before 取不到行的颜色：它的 background-color: inherit
   继承的是【单元格自己】的计算值，而单元格没写底色 ⇒ 拿到 transparent
   ⇒ 遮罩是空的，那一行在暗色下就是「浅底 + 浅字」。
   所以遮罩要画在行上：行是 display:table-row，
   需要 position:relative + isolation:isolate 才能让 z-index:-1 的
   伪元素停在「行背景之上、单元格之下」。
   （单元格自带底色的情况仍由上面那两条单元格规则负责，不会重复叠加：
     单元格的背景是不透明的，会盖住这一层。） */
 .mw-parser-output table.wikitable tr[style*="background"] {
	 position: relative;
	 isolation: isolate;
 }
 
 .mw-parser-output table.wikitable tr[style*="background"]::before {
	 content: "";
	 position: absolute;
	 inset: 0;
	 z-index: -1;
	 background-color: inherit;
	 filter: var( --bl-cell-filter );
	 pointer-events: none;
 }
 
 .mw-parser-output table.wikitable tr:first-child th,
 .mw-parser-output table.wikitable tr:first-child td { border-top: none !important; }
 .mw-parser-output table.wikitable tr:last-child th,
 .mw-parser-output table.wikitable tr:last-child td { border-bottom: none !important; }
 .mw-parser-output table.wikitable tr th:first-child,
 .mw-parser-output table.wikitable tr td:first-child { border-left: none !important; }
 .mw-parser-output table.wikitable tr th:last-child,
 .mw-parser-output table.wikitable tr td:last-child { border-right: none !important; }
 .mw-parser-output table.wikitable tr:first-child th:first-child,
 .mw-parser-output table.wikitable tr:first-child td:first-child { border-top-left-radius: 11px !important; }
 .mw-parser-output table.wikitable tr:first-child th:last-child,
 .mw-parser-output table.wikitable tr:first-child td:last-child { border-top-right-radius: 11px !important; }
 .mw-parser-output table.wikitable tr:last-child th:first-child,
 .mw-parser-output table.wikitable tr:last-child td:first-child { border-bottom-left-radius: 11px !important; }
 .mw-parser-output table.wikitable tr:last-child th:last-child,
 .mw-parser-output table.wikitable tr:last-child td:last-child { border-bottom-right-radius: 11px !important; }
 
 /* .notheme 单元格：刻意固定为浅色描边，不随主题变化，所以只写一次 */
 .mw-parser-output table.wikitable td.notheme,
 .mw-parser-output table.wikitable th.notheme {
	 border-color: rgba( 0, 0, 0, 0.12 ) !important;
 }
 
 /* =====================================================================
  * 19. 缩略图
  * ===================================================================== */
 
 html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"] img:hover,
 html:not(.ve-active) .mw-parser-output .thumbinner img:hover,
 html:not(.ve-active) .mw-parser-output .thumbimage:hover,
 .mw-parser-output .mw-file-description img:hover {
	 transform: none !important;
 }
 
 html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"]:hover,
 html:not(.ve-active) .mw-parser-output .thumbinner:hover {
	 transform: none !important;
 }
 
 html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"],
 html:not(.ve-active) .mw-parser-output .thumbinner {
	 width: min-content !important;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 border-radius: 12px !important;
	 box-shadow: 0 4px 15px var(--bl-shadow-color-sm) !important;
	 padding: 10px !important;
	 box-sizing: content-box !important;
 }
 
 html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"] img,
 html:not(.ve-active) .mw-parser-output .thumbimage {
	 display: block !important;
	 border-radius: 6px !important;
	 border: none !important;
	 max-width: none !important;
	 height: auto !important;
	 margin: 0 auto !important;
 }
 
 html:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"] figcaption,
 html:not(.ve-active) .mw-parser-output .thumbcaption {
	 display: block !important;
	 width: 100% !important;
	 text-align: left !important;
	 color: var(--bl-text) !important;
	 margin-top: 8px !important;
	 font-size: 0.9em !important;
	 line-height: 1.5 !important;
	 white-space: normal !important;
	 word-wrap: break-word !important;
 }
 
 /* =====================================================================
  * 20. Voy-box 警告框
  * ===================================================================== */
 
 .voy-box {
	 display: flex !important;
	 align-items: flex-start !important;
	 padding: 16px 20px !important;
	 margin: 16px 0 !important;
	 border-radius: 12px !important;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 box-shadow: 0 4px 15px var(--bl-shadow-color-sm) !important;
	 position: relative !important;
	 overflow: hidden !important;
 }
 
 .voy-box.warning {
	 border-left: 4px solid #f0ad4e !important;
	 background-color: light-dark( rgba( 255, 243, 205, 0.50 ), rgba( 102, 77, 30, 0.40 ) ) !important;
 }
 
 .voy-box-icon {
	 font-size: 1.5rem !important;
	 margin-right: 12px !important;
	 flex-shrink: 0 !important;
	 color: light-dark( #856404, #ffc107 ) !important;
 }
 
 .voy-box-content { color: var(--bl-text) !important; line-height: 1.6 !important; }
 
 .voy-box::before {
	 content: "" !important;
	 position: absolute;
	 inset: -1px;
	 border: 2px solid transparent;
	 border-radius: 13px;
	 background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-fill-2) 40%, transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: overlay;
	 z-index: 10;
	 pointer-events: none;
 }
 
 .voy-box::after {
	 content: "" !important;
	 position: absolute;
	 inset: 0;
	 border-radius: 12px;
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
	 mix-blend-mode: soft-light;
	 z-index: 1;
	 pointer-events: none;
 }
 
 /* =====================================================================
  * 21. 每月新闻 Aero 面板
  * ===================================================================== */
 
 .aero-news-box {
	 position: relative;
	 z-index: 20;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 border-radius: 16px !important;
	 box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
	 padding: 16px 20px !important;
	 margin: 16px 0 !important;
	 overflow: hidden !important;
	 color: var(--bl-text) !important;
 }
 
 .aero-news-box-header {
	 font-size: 1.15rem;
	 font-weight: bold;
	 border-bottom: 1px solid var(--bl-border-strong);
	 padding-bottom: 8px;
	 margin-bottom: 12px;
	 color: var(--bl-text);
 }
 
 .aero-news-box::before {
	 content: "" !important;
	 position: absolute;
	 inset: -1px;
	 border: 2px solid transparent;
	 border-radius: 17px;
	 background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-fill-2) 40%, transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: overlay;
	 z-index: 10;
	 pointer-events: none;
 }
 
 .aero-news-box::after {
	 content: "" !important;
	 position: absolute;
	 inset: 0;
	 border-radius: 16px;
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill-2) 0%, transparent 70% ) !important;
	 mix-blend-mode: soft-light;
	 z-index: 1;
	 pointer-events: none;
 }
 
 /* =====================================================================
  * 22. OO-UI 下拉菜单 / 弹窗
  * ===================================================================== */
 
 .oo-ui-menuSelectWidget {
	 position: absolute !important;
	 background-color: var(--bl-glass-strong) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border) !important;
	 border-radius: 12px !important;
	 box-shadow: 0 8px 24px var(--bl-shadow-color) !important;
	 padding: 6px !important;
	 z-index: 1000 !important;
 }
 
 .oo-ui-menuSelectWidget::before,
 .oo-ui-menuSelectWidget::after {
	 content: "" !important;
	 display: block !important;
	 position: absolute !important;
	 pointer-events: none !important;
 }
 
 .oo-ui-menuSelectWidget::before {
	 inset: -1px;
	 border: 2px solid transparent;
	 border-radius: 15px;
	 background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: screen !important;
	 z-index: 10;
 }
 
 .oo-ui-menuOptionWidget {
	 display: flex !important;
	 align-items: center !important;
	 padding: 10px 14px !important;
	 margin: 2px 0 !important;
	 border-radius: 10px !important;
	 transition: all 0.2s ease !important;
 }
 
 .oo-ui-menuOptionWidget-checkIcon {
	 position: static !important;
	 margin-right: 8px !important;
	 min-width: 20px !important;
 }
 
 .oo-ui-menuOptionWidget .oo-ui-iconElement-icon {
	 position: static !important;
	 margin-right: 12px !important;
	 filter: var( --bl-f-icon ) !important;
 }
 
 .oo-ui-menuOptionWidget .oo-ui-labelElement-label {
	 color: var(--bl-text) !important;
	 font-size: 0.95rem !important;
 }
 
 .oo-ui-menuOptionWidget:hover { background-color: var(--bl-accent-soft-2) !important; }
 
 .oo-ui-popupWidget {
	 filter: none !important;
	 -webkit-filter: none !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 background-color: var(--bl-glass) !important;
	 border-radius: 12px !important;
	 border: 1px solid var(--bl-divider) !important;
	 box-shadow: 0 8px 24px var(--bl-shadow-color) !important;
	 transform: translateZ( 0 ) !important;
	 isolation: isolate !important;
	 will-change: transform, backdrop-filter !important;
	 overflow: visible !important;
 }
 
 .oo-ui-popupWidget-popup {
	 background: transparent !important;
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 box-shadow: none !important;
	 border: none !important;
	 border-radius: 0 !important;
 }
 
 /* =====================================================================
  * 23. 液态玻璃光效系统（鼠标跟随辉光）
  * ===================================================================== */
 
 .citizen-menu__card,
 .citizen-toc-card,
 #mw-panel-toc,
 .citizen-command-palette {
	 position: relative;
	 background-image: none !important;
	 opacity: 1 !important;
 }
 
 /* 边缘光 */
 .citizen-menu__card::before,
 .citizen-toc-card::before,
 #mw-panel-toc::before,
 .citizen-command-palette::before {
	 content: "" !important;
	 position: absolute;
	 inset: -1px;
	 border: 2px solid transparent;
	 /* 跟随宿主圆角，否则光圈是方角 */
	 border-radius: inherit;
	 background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: screen;
	 z-index: 10;
	 pointer-events: none;
 }
 
 /* 内部柔光 */
 .citizen-menu__card::after,
 .citizen-toc-card::after,
 #mw-panel-toc::after,
 .citizen-command-palette::after {
	 content: "" !important;
	 position: absolute;
	 inset: 0;
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
	 mix-blend-mode: soft-light;
	 z-index: 1;
	 pointer-events: none;
 }
 
 /* 目录卡片：更紧的光圈（ID 选择器，覆盖上面的组选择器）
	光圈画在 inset:0 内侧 —— 侧栏那一列历史上被 contain 裁剪，画在盒外会被切掉。 */
 #mw-panel-toc {
	 overflow: hidden !important;
	 box-shadow: none !important;
	 border: 1px solid rgba( 255, 255, 255, 0.10 ) !important;
 }
 
 #mw-panel-toc::before {
	 content: "" !important;
	 position: absolute !important;
	 inset: 0 !important;
	 /* 目录面板的光圈线宽：原始值 1.2px（比别处更细） */
	 border: 1.2px solid transparent !important;
	 border-radius: inherit !important;
	 background: radial-gradient( 150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 1 ) 0%, var(--bl-glow-ring-2) 60%, transparent 100% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: screen !important;
	 z-index: 10 !important;
	 pointer-events: none;
 }
 
 #mw-panel-toc::after {
	 content: "" !important;
	 position: absolute !important;
	 inset: 0 !important;
	 background: radial-gradient( 250px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 0.25 ) 0%, transparent 80% ) !important;
	 mix-blend-mode: soft-light !important;
	 z-index: 1 !important;
	 pointer-events: none;
 }
 
 /* =====================================================================
  * 24. 最后修改时间徽章（Citizen 3.24 侧栏结构）
  * ===================================================================== */
 
 #citizen-page-aside-lastmod {
	 position: relative;
	 /* 不要 overflow:hidden —— 它会把自己的光圈裁掉 */
	 background: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 border-radius: 16px !important;
	 box-shadow: none !important;
	 padding: 4px !important;
	 width: fit-content !important;
	 background-image: none !important;
 }
 
 /* 光圈画在元素内侧（inset:0），避免被 .citizen-page-aside 的 contain:paint 裁切 */
 #citizen-page-aside-lastmod::before {
	 content: "" !important;
	 position: absolute;
	 inset: 0;
	 /* 最后修改时间面板的光圈线宽：原始值 2.4px */
	 border: 2.4px solid transparent;
	 border-radius: inherit;
	 background: radial-gradient( 150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 1 ) 0%, var(--bl-glow-ring-2) 60%, transparent 100% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
	 -webkit-mask-clip: content-box, border-box;
	 -webkit-mask-composite: source-out;
	 mask-composite: subtract;
	 mix-blend-mode: screen;
	 z-index: 10;
	 pointer-events: none;
 }
 
 #citizen-page-aside-lastmod .citizen-page-aside__link,
 #citizen-page-aside-lastmod-time {
	 text-decoration: none !important;
	 color: var(--bl-text) !important;
	 font-weight: 400;
 }
 
 #citizen-page-aside-lastmod .citizen-page-aside__heading { color: var(--bl-text) !important; }
 
 /* =====================================================================
  * 25. 页面杂物
  * ===================================================================== */
 
 /* 分类栏：与页面同底色，不加任何底色。
	⚠ 旧文件里这是「os + 系统暗色」专属的一条
		html.skin-theme-clientpref-os .catlinks { background-color: rgba(0,0,0,.2); }
	  重构时我把它扩成了明暗都生效（light-dark 0.02 / 0.20），
	  结果两个模式下都比页面暗一档，看起来像凭空多出一块灰板。
	  现在直接置为透明，让它和内容区融为一体。 */
 .catlinks {
	 border-color: var(--bl-divider) !important;
	 background-color: transparent !important;
 }
 
 /* =====================================================================
  * 25.4 修掉下拉卡片被裁掉的外阴影
  *
  * Citizen 用 clip-path 做卡片的开合动画：开启态是
  *   .citizen-dropdown-details[ open ] + .citizen-menu__card { clip-path: inset( 0 0 0 0 ) }
  * inset(0) 正好等于边框盒，于是卡片自己的 box-shadow（--box-shadow-large）
  * 全部落在裁剪范围之外 —— 这就是"外阴影被裁剪"的原因。
  * 把开启态的裁剪范围向外放开，阴影就能完整画出来；闭合态不动，动画照旧。
  * ===================================================================== */
 
 /* 开启态：把对卡片的裁剪放开，让 --box-shadow-large 完整显示。
  *
  * 不能直接写 clip-path: none —— 那样开合动画会从"展开"变成"瞬间出现"；
  * 所以用足够大的负 inset 保留插值。
  *
  * 尺寸是算出来的：--box-shadow-large 最后一层是 0 21.8px 24.5px -1.8px，
  *   向下 ≈ 21.8 + 24.5 ≈ 46px（最淡那层能到 ~57px），侧向 ≈ 24.5px（最淡 ~36px）。
  *   之前用 2.5rem(40px) 只够侧向、不够下方 → 阴影三面有、底下被切，看着像"偏了"。
  *   4rem(64px) 才能四边都完整。 */
 .citizen-dropdown-details[ open ] + .citizen-menu__card {
	 clip-path: inset( -4rem ) !important;
 }
 
 /* =====================================================================
  * 25.5 让侧栏面板的毛玻璃真正生效
  *
  * Citizen 给 .citizen-page-aside 加了 contain: paint（有目录时 size paint style）。
  * contain: paint 会把后代裁剪到 padding box，同时列内元素变成"玻璃的边界"——
  * 侧栏面板的 backdrop-filter 因此采不到栏外的页面内容，毛玻璃等于失效，
  * 负 inset 的光圈与 box-shadow 也会被切掉。
  *
  * 这里把 containment 降到只剩 style：
  *   · 玻璃取样不再被列边界截断（backdrop-filter 能采到栏外的页面内容）；
  *   · 负 inset 的光圈与 box-shadow 不再被裁掉。
  * 布局上的代价见下方注释（高度仍被 __sticky 的 max-height 限制）。
  * ===================================================================== */
 
 @media screen and ( min-width: 1120px ) {
	 /* 只保留 style 这一种 containment：paint / layout / size 全部摘掉。
		size（含 layout）的职责是"长目录不把网格行撑高"，
		但 .citizen-page-aside__sticky 本身已有
		max-height: calc(100vh - 上边距 - 下边距) 兜住高度，
		目录又在该块内 flex-shrink:1 + min-height:0 自成滚动区，
		所以摘掉后行高仍被视口限制，不会失控。
		换来的是：玻璃取样不再被列边界截断，光圈与阴影也不再被裁。
		（有目录时 Citizen 原本用 .citizen-page-aside:has(.citizen-toc) 单独设值，
		  但 :has() 通不过 MediaWiki 的 CSS 校验器；两种情况现在同值，无需分开。） */
	 .citizen-page-aside {
		 contain: style !important;
	 }
 }
 
 /* 侧栏两处面板：skin 给 .citizen-menu__card 加了 contain: content（= layout paint），
	对这两块再摘一次，保证 backdrop-filter 能采到栏外的页面内容；
	并且补一层竖向光泽渐变 —— 35% 白叠在 #fafafa 上、再模糊纯色背景，
	像素级是看不出任何变化的，加光泽才能读得出"玻璃"。 */
 #mw-panel-toc,
 #citizen-page-aside-lastmod {
	 contain: style !important;
	 background-image: linear-gradient(
		 to bottom,
		 light-dark( rgba( 255, 255, 255, 0.45 ), rgba( 255, 255, 255, 0.06 ) ),
		 light-dark( rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0.01 ) )
	 ) !important;
 }
 
 /* =====================================================================
  * 25.6 桌面态目录：卡片外观画在 nav 上
  *
  * Citizen 在 ≥1120px 时把 #mw-panel-toc（.citizen-menu__card）设成
  *   .citizen-toc .citizen-menu__card { display: contents; }
  * —— display: contents 的元素不生成盒子，所以它身上的 background、border、
  * border-radius、backdrop-filter 和 ::before/::after 全部作废。
  * 桌面态真正有盒子的是外层 <nav id="citizen-toc" class="citizen-toc">。
  *
  * 所以：低于桌面宽度时用 #mw-panel-toc（它是有盒子的弹层卡片，规则见上文），
  *       桌面宽度时改用 #citizen-toc。两者同一套视觉。
  *
  * 注：.citizen-toc 是 overflow-y:auto 的滚动容器，伪元素会跟着列表一起滚，
  *     所以这里的光效直接做在 background-image 上（背景不随内容滚动）。
  * ===================================================================== */
 
 @media screen and ( min-width: 1120px ) {
	 #citizen-toc.citizen-toc {
		 position: relative;
		 isolation: isolate;
		 contain: style !important;
		 padding: var(--space-xs) !important;
		 background-color: var(--bl-glass) !important;
		 background-image:
			 radial-gradient(
				 300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
				 light-dark( rgba( 255, 255, 255, 0.55 ), rgba( 255, 255, 255, 0.07 ) ),
			 transparent 70%
		 ),
			 linear-gradient(
				 to bottom,
				 light-dark( rgba( 255, 255, 255, 0.45 ), rgba( 255, 255, 255, 0.06 ) ),
				 light-dark( rgba( 255, 255, 255, 0.08 ), rgba( 255, 255, 255, 0.01 ) )
			 ) !important;
		 backdrop-filter: var(--bl-blur) !important;
		 -webkit-backdrop-filter: var(--bl-blur) !important;
		 border: 1px solid var(--bl-border) !important;
		 border-radius: 12px !important;
		 /* 光圈：
		    桌面态 #citizen-toc 是 overflow-y:auto 的滚动容器，
		    伪元素画的环会跟着列表内容一起滚（滚到底就错位）。
		    分两种情况：
		    · 有 JS（nav 上带 .bl-toc-ring-js，见 common.js 的 Section27）：
		      用和其它面板【完全相同】的径向光环伪元素，
		      并由 JS 写出的 --bl-toc-scroll 做 transform 抵消滚动位移
		      ⇒ 观感与别的面板一模一样。
		    · 没 JS / Basic：退回下面这条静态细光环（不跟随鼠标，但位置正确）。
		    ⚠ 试过「四条 inset 阴影边、每条边一个亮度」：那种做法整条边一起亮，
		      而径向光圈只在鼠标附近约 150px 的弧段亮 ——
		      在竖长的目录面板上就是"光线范围明显比别的面板大很多"，已弃用。 */
		 box-shadow: inset 0 0 0 1.2px rgba( 255, 255, 255, var( --bl-toc-ring-base ) ) !important;
	 }

	 /* JS 就绪：关掉静态兜底，改用下面那个径向光环 */
	 #citizen-toc.citizen-toc.bl-toc-ring-js {
		 box-shadow: none !important;
	 }

	 #citizen-toc.citizen-toc.bl-toc-ring-js::before {
		 content: "" !important;
		 position: absolute !important;
		 inset: 0 !important;
		 /* 关键：抵消目录面板的内部滚动。
		    环画在滚动容器里会跟着内容一起上移 scrollTop，这里补回来，
		    它就"钉"在面板上了（正号 —— 滚动后元素上移了 scrollTop）。 */
		 transform: translateY( var( --bl-toc-scroll, 0px ) ) !important;
		 border: 1.2px solid transparent !important;
		 border-radius: 12px !important;
		 background: radial-gradient( 150px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba( 255, 255, 255, 1 ) 0%, var(--bl-glow-ring-2) 60%, transparent 100% ) border-box !important;
		 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 );
		 -webkit-mask-clip: content-box, border-box;
		 -webkit-mask-composite: source-out;
		 mask-composite: subtract;
		 mix-blend-mode: screen !important;
		 z-index: 10 !important;
		 pointer-events: none !important;
	 }

	 /* ⚠ 桌面态必须关掉 #mw-panel-toc / .citizen-toc-card 的伪元素光效。
	    Source 依据（resources/skins.citizen.styles/components/TableOfContents.less
	    的 @media min-width-breakpoint-desktop 段）：
	       .citizen-toc { display:flex; flex-direction:column; overflow-y:auto;
	                      .citizen-menu__card, .citizen-menu__card-content { display:contents } }
	    模板注释也写明：「旧版缓存 HTML 里这里是 nav#mw-panel-toc，新结构把它改成了普通 div」。
	    ⇒ 桌面态这两个元素【不生成盒子】，但 ::before/::after 的盒子照旧生成，
	      成为滚动容器 #citizen-toc 里的匿名【绝对定位】盒：
	      尺寸按滚动容器的 padding box 算，位置却跟着内容一起滚 ——
	      往下滚到底时，那圈 1.2px 光环会错位地留在半空（2026-10-07 实测的"光效错乱"）。
	    桌面态的光效全部由上面 #citizen-toc 的 background-image 承担
	    （背景不随内容滚动，这也是唯一稳妥的做法）。
	    低于桌面宽度时 #mw-panel-toc 是有盒子的弹层卡片，光效照旧，所以只在这个断点里关。 */
	 #mw-panel-toc::before,
	 #mw-panel-toc::after,
	 .citizen-toc-card::before,
	 .citizen-toc-card::after {
		 content: none !important;
		 display: none !important;
	 }
 }
 
 /* =====================================================================
  * 25.7 目录里折叠钮所在的那条轨道线
  *
  * ⚠ 这里【不要】给 .citizen-toc-toggle 加毛玻璃 ——
  *   它是 Codex 的 quiet 按钮，本来就该是"什么都没有、只有个箭头"的样子；
  *   2026-10-07 一度给它套了 --bl-glass，反而变怪，已撤掉。
  *
  * 真正要处理的是【节点下面那条线】：
  *   TableOfContents.less 里折叠钮所在的那一格，会用【页面底色】把轨道「切开」一段 ——
  *     .citizen-toc-level-1:has( > .citizen-toc-toggle )::before {
  *         top: <节点位置>; left: calc( var( --border-width-thick ) * -1 );
  *         width: var( --border-width-thick ); height: <节点高度>;
  *         background-color: var( --color-surface-0 );      ← 一整片不透明页面底色
  *     }
  *   我们的面板是玻璃：在玻璃上糊一块不透明的页面底色，
  *   就成了"节点旁边那条看着不对的线"。改成透明 ⇒ 轨道保持连续，
  *   也就不会和玻璃底色打架。
  *
  * ⚠ 只在这个断点里改：低于桌面宽度时目录是弹层卡片（不透明），
  *   Citizen 在那边本来就用不透明底色，留着它原来的处理。
  * ⚠ 选择器要带上 .citizen-toc 把优先级提到 (0,3,2)，
  *   否则压不过源码里那条 (0,3,0) 的 :has() 规则。
  * ===================================================================== */

 @media screen and ( min-width: 1120px ) {
	 html body.skin-citizen .citizen-toc .citizen-toc-level-1::before {
		 background-color: transparent !important;
	 }
 }
 
 /* =====================================================================
  * 26. 暗色专属修正
  *     以下条目在亮色下不存在对应值（亮色本来就不需要修正），
  *     所以无法用 light-dark() 表达。取值集中写在这里，只写一次；
  *     明暗开关仍然只有两个选择器。
  * ===================================================================== */
 
 :root {
	 /* —— 取值（只定义一次）—— */
	 --bl-dark-text-bright: #ffffff;
	 --bl-dark-text-soft:   #eeeeee;
	 --bl-dark-text-dim:    #e6e6e6;
	 --bl-dark-text-muted:  #8e8e93;
	 --bl-dark-link-new:    #ff9999;
	 --bl-dark-hover-15:    rgba( 255, 255, 255, 0.15 );
	 --bl-dark-hover-10:    rgba( 255, 255, 255, 0.10 );
	 --bl-dark-border-20:   rgba( 255, 255, 255, 0.20 );
	 --bl-dark-border-15:   rgba( 255, 255, 255, 0.15 );
	 --bl-dark-map-border:  rgba( 255, 255, 255, 0.20 );
	 --bl-dark-f-icon:      invert( 1 ) brightness( 2 );
	 --bl-dark-f-invert:    invert( 1 );
	 --bl-dark-f-chart:     invert( 0.88 ) hue-rotate( 180deg );
	 --bl-dark-home-opacity: 0.20;
	 /* 表格彩色单元格：把模板的浅色底压暗（0.40）+ 补饱和（1.5）。
		只压暗不补饱和的话，浅色底会变成灰扑扑的脏色 —— 见第 18 节。 */
	 --bl-dark-cell-filter: brightness( 0.40 ) saturate( 1.5 );
	 /* 目录面板光圈的暗色底线：暗底上不用那么亮（亮色侧 0.45） */
	 --bl-dark-toc-ring-base: 0.10;
 
	 /* —— 亮色侧的默认值 —— */
	 --bl-f-icon:           invert( 0 ) brightness( 1 );
	 --bl-f-invert:         none;
	 --bl-f-chart:          none;
	 --bl-home-opacity:     0.35;
 }
 
 /* 暗色开关：night / black */
 html.skin-theme-clientpref-night,
 html.skin-theme-clientpref-black {
	 --bl-f-icon: var( --bl-dark-f-icon );
	 --bl-f-invert: var( --bl-dark-f-invert );
	 --bl-f-chart: var( --bl-dark-f-chart );
	 --bl-home-opacity: var( --bl-dark-home-opacity );
	 --bl-cell-filter: var( --bl-dark-cell-filter );
	 --bl-toc-ring-base: var( --bl-dark-toc-ring-base );
}
 
 /* 暗色开关：os + 系统暗色 */
 @media ( prefers-color-scheme: dark ) {
	 html.skin-theme-clientpref-os {
		 --bl-f-icon: var( --bl-dark-f-icon );
		 --bl-f-invert: var( --bl-dark-f-invert );
		 --bl-f-chart: var( --bl-dark-f-chart );
		 --bl-home-opacity: var( --bl-dark-home-opacity );
		 --bl-cell-filter: var( --bl-dark-cell-filter );
		 --bl-toc-ring-base: var( --bl-dark-toc-ring-base );
			 }
 }
 
 /* —— 首页组件：暗色下需要单独修正的文字色 —— */
 html.skin-theme-clientpref-night .bl-stat,
 html.skin-theme-clientpref-night .bl-stat *,
 html.skin-theme-clientpref-black .bl-stat,
 html.skin-theme-clientpref-black .bl-stat * {
	 color: var( --bl-dark-text-bright ) !important;
 }
 
 html.skin-theme-clientpref-night .bl-box-title,
 html.skin-theme-clientpref-black .bl-box-title {
	 background-color: transparent !important;
	 color: var( --bl-dark-text-bright ) !important;
	 border-bottom-color: var( --bl-dark-border-20 ) !important;
 }
 
 html.skin-theme-clientpref-night .bl-box,
 html.skin-theme-clientpref-black .bl-box {
	 background-color: var( --color-surface-1 ) !important;
	 border-color: var( --bl-border ) !important;
 }
 
 html.skin-theme-clientpref-night .bl-navitem,
 html.skin-theme-clientpref-night .bl-navitem a,
 html.skin-theme-clientpref-black .bl-navitem,
 html.skin-theme-clientpref-black .bl-navitem a {
	 box-shadow: none !important;
 }
 
 html.skin-theme-clientpref-night .bl-navitem,
 html.skin-theme-clientpref-black .bl-navitem {
	 border-color: var( --bl-dark-border-15 ) !important;
	 background-color: transparent !important;
 }
 
 html.skin-theme-clientpref-night .bl-navitem a,
 html.skin-theme-clientpref-black .bl-navitem a {
	 background-color: transparent !important;
	 color: var(--bl-accent) !important;
	 border: none !important;
 }
 
 html.skin-theme-clientpref-night .bl-navitem a:hover,
 html.skin-theme-clientpref-black .bl-navitem a:hover {
	 background-color: var( --bl-dark-hover-15 ) !important;
	 color: var(--bl-accent-hover) !important;
 }
 
 /* 首页盒子里的正文转浅（模板常写死深色）。
	紧随其后的两条把链接还原成主题蓝 —— 否则 .bl-box-body * 会把链接一起刷掉。 */
 html.skin-theme-clientpref-night .bl-box-body,
 html.skin-theme-clientpref-night .bl-box-body *,
 html.skin-theme-clientpref-black .bl-box-body,
 html.skin-theme-clientpref-black .bl-box-body * {
	 color: var( --bl-dark-text-bright ) !important;
 }
 
 html.skin-theme-clientpref-night .bl-box-body a,
 html.skin-theme-clientpref-night .bl-box-body a *,
 html.skin-theme-clientpref-black .bl-box-body a,
 html.skin-theme-clientpref-black .bl-box-body a * {
	 color: var(--bl-accent) !important;
 }
 
 html.skin-theme-clientpref-night .bl-box-body a.new,
 html.skin-theme-clientpref-night .bl-box-body a.new *,
 html.skin-theme-clientpref-black .bl-box-body a.new,
 html.skin-theme-clientpref-black .bl-box-body a.new * {
	 color: var( --bl-dark-link-new ) !important;
 }
 
 html.skin-theme-clientpref-night .bl-navitem a.new,
 html.skin-theme-clientpref-night .bl-list a.new,
 html.skin-theme-clientpref-black .bl-navitem a.new,
 html.skin-theme-clientpref-black .bl-list a.new {
	 color: var( --bl-dark-link-new ) !important;
 }
 
 html.skin-theme-clientpref-night .bl-map-wrap,
 html.skin-theme-clientpref-black .bl-map-wrap {
	 background: transparent;
 }
 
 html.skin-theme-clientpref-night .bl-map-wrap iframe,
 html.skin-theme-clientpref-black .bl-map-wrap iframe {
	 border-color: var( --bl-dark-map-border );
 }
 
 html.skin-theme-clientpref-night .bl-hero,
 html.skin-theme-clientpref-black .bl-hero {
	 border-color: #3a3a3a !important;
 }
 
 @media ( prefers-color-scheme: dark ) {
	 html.skin-theme-clientpref-os .bl-stat,
	 html.skin-theme-clientpref-os .bl-stat * {
		 color: var( --bl-dark-text-bright ) !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-box-title {
		 background-color: transparent !important;
		 color: var( --bl-dark-text-bright ) !important;
		 border-bottom-color: var( --bl-dark-border-20 ) !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-box {
		 background-color: var( --color-surface-1 ) !important;
		 border-color: var( --bl-border ) !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-navitem,
	 html.skin-theme-clientpref-os .bl-navitem a {
		 box-shadow: none !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-navitem {
		 border-color: var( --bl-dark-border-15 ) !important;
		 background-color: transparent !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-navitem a {
		 background-color: transparent !important;
		 color: var(--bl-accent) !important;
		 border: none !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-navitem a:hover {
		 background-color: var( --bl-dark-hover-15 ) !important;
		 color: var(--bl-accent-hover) !important;
	 }
 
	 /* 首页盒子里的正文转浅（模板常写死深色） */
	 html.skin-theme-clientpref-os .bl-box-body,
	 html.skin-theme-clientpref-os .bl-box-body * {
		 color: var( --bl-dark-text-bright ) !important;
	 }
 
	 /* 上面 .bl-box-body * 会把链接一起刷成正文色，这里还原成主题蓝 */
	 html.skin-theme-clientpref-os .bl-box-body a,
	 html.skin-theme-clientpref-os .bl-box-body a * {
		 color: var(--bl-accent) !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-box-body a.new,
	 html.skin-theme-clientpref-os .bl-box-body a.new * {
		 color: var( --bl-dark-link-new ) !important;
	 }
 
 
	 html.skin-theme-clientpref-os .bl-navitem a.new,
	 html.skin-theme-clientpref-os .bl-list a.new {
		 color: var( --bl-dark-link-new ) !important;
	 }
 
	 html.skin-theme-clientpref-os .bl-map-wrap { background: transparent; }
	 html.skin-theme-clientpref-os .bl-map-wrap iframe { border-color: var( --bl-dark-map-border ); }
	 html.skin-theme-clientpref-os .bl-hero { border-color: #3a3a3a !important; }
 }
 
 /* =====================================================================
  * 27. 首页组件 bl-*（随主题自动切换的部分）
  * ===================================================================== */
 
 .bl-hero,
 .bl-hero-text,
 .bl-sidecol,
 .bl-maincol { color: var(--bl-text); }
 
 .bl-hero-kicker,
 .bl-hero-title { color: var(--bl-text-strong); }
 
 /* 亮色下不要给 .bl-box-body 的后代指定颜色 —— 那会把里面的链接一起刷成正文色。
	亮色直接用主题默认链接色（蓝）即可；暗色的正文/链接处理见第 26 节。 */
 .bl-box-body { color: var(--bl-text); }
 
 /* 首页各盒子里的链接：一律保持主题蓝，红链保持红。
	var(--bl-accent) 本身就是 light-dark，所以这一条亮/暗都管；
	暗色下第 26 节还有更高优先级的同名规则，用来压过那里的 .bl-box-body *。 */
 .bl-box-body a,
 .bl-box-body a * {
	 color: var(--bl-accent) !important;
 }
 
 .bl-box-body a.new,
 .bl-box-body a.new * {
	 color: #d33 !important;
 }
 
 .bl-list li { color: var(--bl-text); }
 
 .bl-navitem a { white-space: nowrap !important; }
 
 .bl-hero {
	 position: relative !important;
	 isolation: isolate !important;
	 transition: transform 0.25s cubic-bezier( 0.2, 0, 0, 1 ),
				 box-shadow 0.25s cubic-bezier( 0.2, 0, 0, 1 ) !important;
	 will-change: transform !important;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 border-radius: 24px !important;
	 box-shadow: 0 8px 20px var(--bl-shadow-color-sm) !important;
 }
 
 .bl-hero:hover {
	 transform: translateY( -4px ) !important;
	 box-shadow: 0 20px 35px -12px var(--bl-shadow-color) !important;
 }
 
 .bl-hero::before {
	 content: "" !important;
	 position: absolute !important;
	 inset: -1px !important;
	 border-radius: 25px !important;
	 /* 光圈线宽：原为 4px，太粗；与其它面板统一为 2px */
	 padding: 2px !important;
	 background: radial-gradient( 200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
				 var(--bl-glow-ring) 0%,
				 var(--bl-glow-ring-2) 40%,
				 transparent 80% ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
	 -webkit-mask-clip: content-box, border-box !important;
	 -webkit-mask-composite: source-out !important;
	 mask-composite: subtract !important;
	 pointer-events: none !important;
	 z-index: 2 !important;
 }
 
 .bl-hero::after {
	 content: "" !important;
	 position: absolute !important;
	 inset: 0 !important;
	 border-radius: 24px !important;
	 background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
				 var(--bl-glow-fill) 0%,
				 transparent 70% ) !important;
	 mix-blend-mode: soft-light !important;
	 pointer-events: none !important;
	 z-index: 1 !important;
 }
 
 .bl-hero-text,
 .bl-stat {
	 position: relative !important;
	 z-index: 3 !important;
 }
 
 .bl-stat-number a { color: var(--bl-accent) !important; }
 .bl-stat-number a:hover { color: var(--bl-accent-hover) !important; }
 
 /* =====================================================================
  * 28. 页面背景
  * ===================================================================== */
 
 .page-Main_Page .bl-mainpage,
 .page-首页 .bl-mainpage { position: relative; }
 
 .page-Main_Page .bl-mainpage::before,
 .page-首页 .bl-mainpage::before {
	 content: "";
	 position: fixed;
	 inset: 0;
	 z-index: -1;
	 background-image: url("https://blkl.fun/wp-content/uploads/2026/10/8e137ba6c7893205fe31035c3592e33c.png");
	 background-size: cover;
	 background-position: center;
	 background-repeat: no-repeat;
	 opacity: var( --bl-home-opacity );
	 pointer-events: none;
 }
 
 .bl-page-bg {
	 position: fixed;
	 inset: 0;
	 z-index: -1;
	 pointer-events: none;
	 background-size: cover;
	 background-position: center;
	 background-repeat: no-repeat;
 }
 
 /* =====================================================================
  * 29. Weatherbox 图表卡片
  * ===================================================================== */
 
 .weather-box-chart {
	 position: relative;
	 float: right !important;
	 clear: right !important;
	 margin: 0.5em 0 1em 1em !important;
	 width: 312px !important;
	 background-color: var(--bl-glass) !important;
	 backdrop-filter: var(--bl-blur) !important;
	 -webkit-backdrop-filter: var(--bl-blur) !important;
	 border: 1px solid var(--bl-border-strong) !important;
	 border-radius: 16px !important;
	 padding: 12px !important;
	 box-shadow: 0 4px 16px var(--bl-shadow-color-sm) !important;
	 box-sizing: border-box !important;
	 color: var(--bl-text);
 }
 
 .weather-box-chart .mw-customtoggle {
	 color: var(--bl-accent) !important;
	 font-size: 0.85em !important;
	 padding: 2px 8px !important;
	 border-radius: 6px !important;
	 transition: background 0.2s !important;
 }
 
 .weather-box-chart .mw-customtoggle:hover {
	 background-color: var(--bl-accent-soft) !important;
 }
 
 .weather-box-chart svg {
	 display: block !important;
	 margin: 0 auto !important;
	 max-width: 100% !important;
	 height: auto !important;
	 filter: var( --bl-f-chart );
 }
 
 .weather-box-chart div:not( [class] ) { color: var(--bl-text); }
 
 /* =====================================================================
  * 30. 评论流 (CommentStreams)
  * ===================================================================== */
 
 .cs-stream {
	 display: flex;
	 flex-direction: column;
	 margin-bottom: 14px;
	 padding: 10px 14px;
	 border-radius: 14px;
	 border: 1px solid var(--bl-divider);
	 background: var(--bl-glass);
	 backdrop-filter: var(--bl-blur);
	 -webkit-backdrop-filter: var(--bl-blur);
	 transition: background 0.2s, border-color 0.2s;
 }
 
 .cs-comment-header {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
 }
 
 .cs-avatar {
	 width: 42px;
	 height: 42px;
	 border-radius: 10px;
	 object-fit: cover;
	 border: 1px solid var(--bl-divider);
 }
 
 .cs-comment-header-center {
	 flex: 1;
	 margin-left: 10px;
	 font-size: 13px;
	 opacity: 0.85;
	 color: var(--bl-text);
 }
 
 .cs-comment-header-right {
	 display: flex;
	 align-items: center;
	 gap: 8px;
	 flex-shrink: 0;
 }
 
 .cs-voting-span {
	 display: flex;
	 align-items: center;
	 gap: 4px;
 }
 
 .cs-vote-up-button,
 .cs-vote-down-button {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 height: 30px;
	 min-width: 32px;
	 padding: 0 12px;
	 border-radius: 8px;
	 background: light-dark( rgba( 255, 255, 255, 0.15 ), rgba( 255, 255, 255, 0.06 ) );
	 backdrop-filter: var(--bl-blur);
	 -webkit-backdrop-filter: var(--bl-blur);
	 border: 1px solid var(--bl-divider);
	 color: var(--bl-text);
	 font-size: 13px;
	 font-weight: 500;
	 transition: all 0.2s ease;
	 cursor: pointer;
 }
 
 .cs-vote-up-button:hover,
 .cs-vote-down-button:hover {
	 background: var(--bl-accent-soft);
	 border-color: var(--bl-accent-soft-2);
	 transform: translateY( -1px );
	 box-shadow: 0 4px 10px var(--bl-shadow-color-sm);
 }
 
 .cs-vote-up-button:active,
 .cs-vote-down-button:active { transform: translateY( 0 ); }
 
 .cs-stream-footer .oo-ui-buttonElement-button {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 height: 34px;
	 padding: 0 16px;
	 border-radius: 8px;
	 background: var(--bl-glass);
	 backdrop-filter: var(--bl-blur);
	 -webkit-backdrop-filter: var(--bl-blur);
	 border: 1px solid var(--bl-divider);
	 color: var(--bl-text);
	 font-size: 13px;
	 font-weight: 500;
	 transition: all 0.2s ease;
	 cursor: pointer;
 }
 
 .cs-stream-footer .oo-ui-buttonElement-button:hover {
	 background: var(--bl-accent-soft);
	 border-color: var(--bl-accent-soft-2);
	 transform: translateY( -1px );
	 box-shadow: 0 4px 10px var(--bl-shadow-color-sm);
 }
 
 .cs-comment-body {
	 padding-left: 54px;
	 font-size: 14px;
	 line-height: 1.6;
	 color: var(--bl-text);
 }
 
 .cs-reply-comment {
	 margin-left: 54px;
	 margin-top: 8px;
	 padding: 8px 12px;
	 border-radius: 12px;
	 background: transparent;
	 border: 1px solid var(--bl-border);
	 backdrop-filter: none;
	 -webkit-backdrop-filter: none;
 }
 
 /* CommentStreams：玻璃讨论串 + 平面回复；沿用全站光边、柔光和阴影变量。 */
 html body.skin-citizen .cs-stream {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  padding: 16px 18px;
  margin: 0 0 18px;
  border: 1px solid var(--bl-border-strong);
  border-radius: 18px;
  background: var(--bl-glass-strong) !important;
  backdrop-filter: var(--bl-blur) !important;
  -webkit-backdrop-filter: var(--bl-blur) !important;
  box-shadow: 0 6px 20px var(--bl-shadow-color-sm);
  color: var(--bl-text);
  transition: box-shadow .2s, border-color .2s;
 }
 html body.skin-citizen .cs-stream:hover {
  border-color: var(--bl-edge);
  box-shadow: 0 10px 28px var(--bl-shadow-color-lg);
 }
 html body.skin-citizen .cs-stream::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 光圈线宽：原为 4px，太粗；与其它面板统一为 2px */
  padding: 2px;
  box-sizing: border-box;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring), var(--bl-glow-ring-2) 45%, transparent 85%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
 }
 html body.skin-citizen .cs-stream::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill), transparent 75%);
  opacity: .35;
  pointer-events: none;
  z-index: -1;
 }
 html body.skin-citizen .cs-stream > .cs-comment,
 html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-header,
 html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-body,
 html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-footer,
 html body.skin-citizen .cs-stream > .cs-stream-footer {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
 }
 html body.skin-citizen .cs-stream > .cs-comment {
  overflow: visible;
 }
 html body.skin-citizen .cs-stream > .cs-comment > .cs-comment-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0;
  border: 0;
 }
 html body.skin-citizen .cs-stream .cs-comment-header-left {
  flex: 0 0 44px;
 }
 html body.skin-citizen .cs-stream .cs-avatar {
  display: block;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--bl-border-strong);
 }
 html body.skin-citizen .cs-stream .cs-comment-header-center {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  opacity: 1;
  line-height: 1.5;
  color: var(--bl-text);
 }
 html body.skin-citizen .cs-stream .cs-comment-title {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--bl-text-strong);
 }
 html body.skin-citizen .cs-stream .cs-comment-author {
  font-size: .85rem;
 }
 html body.skin-citizen .cs-stream .cs-comment-details,
 html body.skin-citizen .cs-stream .cs-comment-author-anonymous {
  font-size: .78rem;
  color: var(--bl-text-muted);
  opacity: 1;
 }
 html body.skin-citizen .cs-stream .cs-comment-header-right {
  float: none;
  flex: 0 0 auto;
  margin-left: auto;
 }
 html body.skin-citizen .cs-stream .cs-comment-body {
  padding: 0;
  margin: 10px 0 0 54px;
  font-size: .925rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  color: var(--bl-text);
 }
 html body.skin-citizen .cs-stream .cs-comment-body > p:first-child { margin-top: 0; }
 html body.skin-citizen .cs-stream .cs-comment-body > p:last-child { margin-bottom: 0; }
 html body.skin-citizen .cs-stream > .cs-reply-comment {
  margin: 14px 0 0 54px;
  padding: 12px 0 0;
  border: 0;
  border-top: 1px solid var(--bl-divider);
  border-radius: 0;
  box-shadow: none;
 }
 html body.skin-citizen .cs-stream > .cs-reply-comment .cs-comment-header-left {
  flex-basis: 32px;
 }
 html body.skin-citizen .cs-stream > .cs-reply-comment .cs-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9px;
 }
 html body.skin-citizen .cs-stream > .cs-reply-comment .cs-comment-body {
  margin-left: 42px;
  margin-top: 8px;
 }
 html body.skin-citizen .cs-stream > .cs-stream-footer:not(:empty) {
  margin: 12px 0 0 54px;
 }
 @media screen and (max-width: 640px) {
  html body.skin-citizen .cs-stream { padding: 12px; }
  html body.skin-citizen .cs-stream > .cs-reply-comment { margin-left: 14px; }
  html body.skin-citizen .cs-stream .cs-comment-details { display: block; }
 }
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .cs-stream {
  background: light-dark(#ffffff, #16181b) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
 }
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .cs-stream::before,
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .cs-stream::after {
  content: none;
 }
 @media (prefers-reduced-motion: reduce) {
  html body.skin-citizen .cs-stream { transition: none; }
 }
 
 /* =====================================================================
  * 31. QQ 群聊记录 — Aero 毛玻璃美化
  * ===================================================================== */
 
 .qqchat {
	 position: relative;
	 z-index: 10;
	 margin: 1.2em 0;
	 border-radius: 20px;
	 background: var(--bl-glass-soft) !important;
	 backdrop-filter: blur( 16px ) saturate( 120% ) !important;
	 -webkit-backdrop-filter: blur( 16px ) saturate( 120% ) !important;
	 border: 1px solid var(--bl-edge) !important;
	 box-shadow: 0 12px 48px var( --bl-shadow-color-lg ), 0 2px 8px var( --bl-shadow-color-sm ) !important;
	 overflow: hidden !important;
	 transition: box-shadow 0.3s ease, transform 0.3s ease;
 }
 
 .qqchat::before {
	 content: "" !important;
	 position: absolute !important;
	 inset: -1.5px !important;
	 border-radius: 21px !important;
	 padding: 4px !important;
	 background: radial-gradient(
		 280px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		 var(--bl-glow-ring) 0%,
		 var(--bl-glow-ring-2) 40%,
		 transparent 85%
	 ) border-box !important;
	 -webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
	 -webkit-mask-clip: content-box, border-box !important;
	 -webkit-mask-composite: source-out !important;
	 mask-composite: subtract !important;
	 mix-blend-mode: screen !important;
	 z-index: 10 !important;
	 pointer-events: none !important;
 }
 
 .qqchat::after {
	 content: "" !important;
	 position: absolute !important;
	 inset: 0 !important;
	 border-radius: 20px !important;
	 background: radial-gradient(
		 500px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
		 light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.08 ) ) 0%,
		 transparent 75%
	 ) !important;
	 mix-blend-mode: soft-light !important;
	 z-index: 1 !important;
	 pointer-events: none !important;
 }
 
 .qqchat:hover {
	 box-shadow: 0 20px 56px var( --bl-shadow-color-lg ), 0 2px 12px var( --bl-shadow-color-sm ) !important;
	 transform: translateY( -2px );
 }
 
 .qqchat .mw-collapsible-toggle {
	 position: absolute;
	 top: 18px;
	 right: 20px;
	 z-index: 20;
	 background: light-dark( rgba( 255, 255, 255, 0.20 ), rgba( 255, 255, 255, 0.06 ) ) !important;
	 backdrop-filter: blur( 8px ) saturate( 100% ) !important;
	 -webkit-backdrop-filter: blur( 8px ) saturate( 100% ) !important;
	 border: 1px solid var(--bl-border) !important;
	 border-radius: 8px !important;
	 padding: 4px 14px !important;
	 font-size: 0.78rem !important;
	 font-weight: 500 !important;
	 color: var(--bl-text) !important;
	 cursor: pointer !important;
	 transition: all 0.25s ease !important;
	 letter-spacing: 0.3px;
	 user-select: none;
 }
 
 .qqchat .mw-collapsible-toggle:hover {
	 background: light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 255, 255, 255, 0.14 ) ) !important;
	 border-color: var(--bl-border-strong) !important;
	 transform: scale( 1.03 );
 }
 
 .qqchat .mw-collapsible-toggle .mw-collapsible-text { display: inline-block; }
 
 .qqchat-header {
	 display: flex;
	 align-items: center;
	 gap: 12px;
	 padding: 18px 24px 14px 24px;
	 border-bottom: 1px solid var(--bl-border);
	 position: relative;
	 z-index: 5;
 }
 
 .qqchat-icon {
	 font-size: 1.5rem;
	 line-height: 1;
	 filter: drop-shadow( 0 2px 4px rgba( 0, 0, 0, 0.06 ) );
 }
 
 .qqchat-title {
	 font-size: 1.05rem;
	 font-weight: 600;
	 color: var(--bl-text-strong);
	 letter-spacing: 0.2px;
	 flex: 1;
 }
 
 .qqchat-count {
	 font-size: 0.80rem;
	 font-weight: 400;
	 color: var(--bl-text);
	 opacity: 0.60;
	 background: light-dark( rgba( 128, 128, 128, 0.08 ), rgba( 255, 255, 255, 0.06 ) );
	 padding: 2px 14px;
	 border-radius: 20px;
	 border: 1px solid var(--bl-border-soft);
	 white-space: nowrap;
 }
 
 .qqchat-body {
	 padding: 12px 18px 18px 18px;
	 max-height: 600px;
	 overflow-y: auto;
	 position: relative;
	 z-index: 5;
	 scroll-behavior: smooth;
 }
 
 .qqchat-body::-webkit-scrollbar { width: 6px; }
 
 .qqchat-body::-webkit-scrollbar-track {
	 background: light-dark( rgba( 128, 128, 128, 0.04 ), rgba( 255, 255, 255, 0.02 ) );
	 border-radius: 10px;
	 margin: 8px 0;
 }
 
 .qqchat-body::-webkit-scrollbar-thumb {
	 background: light-dark( rgba( 128, 128, 128, 0.20 ), rgba( 255, 255, 255, 0.12 ) );
	 border-radius: 10px;
	 transition: background 0.3s ease;
 }
 
 .qqchat-body::-webkit-scrollbar-thumb:hover {
	 background: light-dark( rgba( 128, 128, 128, 0.35 ), rgba( 255, 255, 255, 0.22 ) );
 }
 
 .qqchat-message {
	 display: flex;
	 flex-direction: column;
	 padding: 8px 12px;
	 margin: 2px 0;
	 border-radius: 12px;
	 background: transparent;
	 transition: background 0.20s ease;
	 position: relative;
 }
 
 .qqchat-message:hover { background: var(--bl-hover); }
 
 .qqchat-meta {
	 display: flex;
	 align-items: center;
	 gap: 10px;
	 margin-bottom: 2px;
	 flex-wrap: wrap;
 }
 
 .qqchat-user {
	 font-weight: 600;
	 font-size: 0.88rem;
	 color: var(--bl-accent);
	 letter-spacing: 0.2px;
	 display: inline-flex;
	 align-items: center;
	 gap: 4px;
 }
 
 .qqchat-user::before {
	 content: "";
	 display: inline-block;
	 width: 8px;
	 height: 8px;
	 border-radius: 50%;
	 background: var(--bl-accent);
	 opacity: 0.50;
	 margin-right: 2px;
	 flex-shrink: 0;
 }
 
 /* 不同用户不同颜色（与主题无关，保持常量） */
 .qqchat-user[data-user="惟遠イエン"]::before { background: #e67e22; }
 .qqchat-user[data-user="Bluesky展翅腾飞"]::before { background: #3498db; }
 .qqchat-user[data-user="Kuranoka"]::before { background: #9b59b6; }
 .qqchat-user[data-user="高远天空"]::before { background: #1abc9c; }
 .qqchat-user[data-user="爱玩游戏的-欧卡t"]::before { background: #e74c3c; }
 .qqchat-user[data-user="FaustToasts"]::before { background: #f39c12; }
 .qqchat-user[data-user="威廉阿道夫"]::before { background: #2c3e50; }
 .qqchat-user[data-user="烂Lan兰恩"]::before { background: #d35400; }
 .qqchat-user[data-user="Ubi ventus Surgit"]::before { background: #16a085; }
 .qqchat-user[data-user="药瓶子"]::before { background: #8e44ad; }
 
 .qqchat-time {
	 font-size: 0.70rem;
	 color: var(--bl-text);
	 opacity: 0.40;
	 font-weight: 400;
	 letter-spacing: 0.2px;
	 white-space: nowrap;
	 margin-left: auto;
 }
 
 .qqchat-text {
	 font-size: 0.92rem;
	 line-height: 1.6;
	 color: var(--bl-text);
	 word-break: break-word;
	 padding-left: 20px;
	 position: relative;
 }
 
 .qqchat-empty {
	 color: var(--bl-text);
	 opacity: 0.30;
	 font-style: italic;
	 font-size: 0.85rem;
 }
 
 .qqchat-mention {
	 display: inline;
	 background: var(--bl-accent-soft);
	 padding: 1px 6px;
	 border-radius: 4px;
	 font-weight: 500;
	 color: var(--bl-accent);
	 border: 1px solid var(--bl-border-soft);
	 transition: background 0.2s ease;
 }
 
 .qqchat-mention:hover { background: var(--bl-accent-soft-2); }
 
 .qqchat .mw-collapsible-content {
	 transition: all 0.35s cubic-bezier( 0.34, 1.56, 0.64, 1 );
 }
 
 .qqchat.mw-collapsed .mw-collapsible-content { display: none; }
 
 /* —— 响应式 —— */
 @media screen and (max-width: 768px) {
	 .qqchat-header {
		 padding: 14px 16px 10px 16px;
		 flex-wrap: wrap;
		 gap: 6px;
	 }
 
	 .qqchat-title {
		 font-size: 0.95rem;
		 flex: 1 1 100%;
		 order: 2;
	 }
 
	 .qqchat-icon {
		 font-size: 1.3rem;
		 order: 1;
	 }
 
	 .qqchat-count {
		 font-size: 0.70rem;
		 padding: 1px 12px;
		 order: 3;
		 margin-left: auto;
	 }
 
	 .qqchat .mw-collapsible-toggle {
		 position: relative;
		 top: auto;
		 right: auto;
		 order: 4;
		 margin-left: auto;
		 font-size: 0.70rem;
		 padding: 2px 12px;
	 }
 
	 .qqchat-body {
		 padding: 8px 10px 12px 10px;
		 max-height: 420px;
	 }
 
	 .qqchat-message { padding: 6px 8px; }
	 .qqchat-meta { gap: 6px; }
	 .qqchat-user { font-size: 0.82rem; }
	 .qqchat-time { font-size: 0.62rem; }
	 .qqchat-text { font-size: 0.85rem; padding-left: 14px; }
 
	 .qqchat-user::before {
		 width: 6px;
		 height: 6px;
	 }
 
	 .qqchat-mention {
		 padding: 0 4px;
		 font-size: 0.85rem;
	 }
 }
 
 @media screen and (max-width: 480px) {
	 .qqchat-header { padding: 10px 12px 8px 12px; }
	 .qqchat-title { font-size: 0.85rem; }
 
	 .qqchat-body {
		 padding: 6px 6px 10px 6px;
		 max-height: 340px;
	 }
 
	 .qqchat-message {
		 padding: 4px 6px;
		 border-radius: 8px;
	 }
 
	 .qqchat-text { font-size: 0.80rem; padding-left: 10px; }
	 .qqchat-user { font-size: 0.76rem; }
	 .qqchat-time { font-size: 0.58rem; }
 
	 .qqchat .mw-collapsible-toggle {
		 font-size: 0.62rem;
		 padding: 1px 10px;
	 }
 }
 
 /* =====================================================================
  * 32. 性能模式（Basic）
  *     只改「效果」与「材质」，不改主题颜色：
  *     关掉模糊与光效、把毛玻璃换成不透明表面。
  *     表面色仍来自随主题切换的变量，所以这里没有任何颜色字面量。
  * ===================================================================== */
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-menu__card,
 html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-preferences-dropdown__card,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-sticky-header-background,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette,
 html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-page-actions-more__card,
 html[class*="citizen-feature-performance-mode-clientpref-1"] #mw-panel-toc,
 html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-toc,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-toc-card {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 /* 光效与玻璃光泽都做在 background-image 上（radial-gradient / linear-gradient），
		只关 backdrop-filter 是关不掉的，必须连背景图一起清掉。 */
	 background-image: none !important;
	 background-color: var(--color-surface-1) !important;
	 border: 1px solid var(--bl-border) !important;
	 box-shadow: none !important;
	 opacity: 1 !important;
	 animation: citizen-fade-in 0.1s ease forwards !important;
 }
 
 /* 一次性关掉所有光效伪元素
	（逐个列出，不用 :is() —— 见文件开头的校验器兼容说明） */
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-menu__card::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-toc-card::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] #mw-panel-toc::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .ambox::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .aero-news-box::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-menuSelectWidget::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups-container::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-popupWidget-popup::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .page-Main_Page .bl-mainpage::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .page-首页 .bl-mainpage::before,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-menu__card::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-toc-card::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] #mw-panel-toc::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .ambox::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .aero-news-box::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-menuSelectWidget::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups-container::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-popupWidget-popup::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .page-Main_Page .bl-mainpage::after,
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .page-首页 .bl-mainpage::after {
	 display: none !important;
	 content: none !important;
	 visibility: hidden !important;
 }
 
 /* 顶栏玻璃条 → 不透明 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-header::after {
	 backdrop-filter: none !important;
	 background-image: none !important;
	 border-image: none !important;
	 border-right: 1px solid var(--bl-border-strong);
	 background-color: var(--color-surface-1) !important;
	 opacity: 1 !important;
 }
 
 /* 命令面板：去掉弹性动画 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette {
	 transform: translate( -50%, -50% ) scale( 1 ) !important;
	 box-shadow: 0 10px 30px var(--bl-shadow-color) !important;
 }
 
 /* =====================================================================
  * 32.1 性能模式（Basic）下的信息框
  * 不做毛玻璃，改为「不透明实心」，且**跟随主题**：
  *   亮色 = 近白（#ffffff / 表头 #f3f3f3），暗色 = 近黑（#16181b / 表头 #23262b）。
  * 这正是原文件的写法（background: var(--color-surface-1)，亮白/暗黑），
  * 而不是两种主题都黑 —— 亮色下也黑是之前理解错了。
  * 外圈光线换成静态描边框（对应原文件底部 v4 的 Basic 分支）。
  * ===================================================================== */
 
 /* 1) 本体与表体：不透明实心（亮白 / 暗近黑） */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox tbody,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.geography,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.vcard {
	 background: light-dark( #ffffff, #16181b ) !important;
	 background-color: light-dark( #ffffff, #16181b ) !important;
	 background-image: none !important;
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 box-shadow: none !important;
	 border-color: light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
	 color: light-dark( #202122, #e6e8ea ) !important;
 }
 
 /* 2) 分部标题：底色交给模板（下面只在模板没写底色时才接管），只统一边框与阴影 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th[colspan="2"] {
	 background-image: none !important;
	 border-color: light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
	 text-shadow: none !important;
	 box-shadow: none !important;
 }
 
 /* Basic 下也只有在模板没写底色时才接管表头的底色与文字色 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title:not([style*="background"]),
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header:not([style*="background"]),
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above:not([style*="background"]),
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader:not([style*="background"]),
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th[colspan="2"]:not([style*="background"]) {
	 background-color: light-dark( #f3f3f3, #23262b ) !important;
	 color: light-dark( #202122, #e6e8ea ) !important;
 }
 
 /* 3) 单元格文字：亮色正文色、暗色转浅（带内联底色的单元格交给第 35 节） */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th:not(.infobox-above):not([style*="background"]),
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox td:not(.infobox-above):not([style*="background"]) {
	 color: light-dark( #202122, #d6d9dd ) !important;
 }
 
 /* 4) 模板写在行内的黑字：暗色下翻浅（亮色下本来就是黑字压白底，不动） */
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color:black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color: black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color:#000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color: #000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color:#000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="color: #000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color:black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color: black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color:#000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color: #000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color:#000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="color: #000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color:black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color: black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color:#000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color: #000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color:#000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="color: #000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-above[style*="rgb"][style*="0 0 0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color:black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color: black"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color:#000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color: #000;"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color:#000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="color: #000000"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="rgb"][style*="0,0,0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="rgb"][style*="0, 0, 0"]:not([style*="background"]),
	 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-subheader[style*="rgb"][style*="0 0 0"]:not([style*="background"]) {
	 color: light-dark( #000000, #eaecf0 ) !important;
 }
 
 
 
 /* 6) 静态描边框替代光线。
	原版用 :not(:has(caption[实心背景])) 让位给 caption 的同色外框，但 :has() 校验不过，
	所以这里始终画框；模板给了实心标题底色的信息框会同时出现「灰色内框 + 同色外框」。 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox::before {
	 content: "" !important;
	 display: block !important;
	 border-style: solid !important;
	 border-color: rgba( 128, 128, 128, 0.30 ) !important;
	 background: none !important;
	 -webkit-mask: none !important;
	 mask: none !important;
	 mix-blend-mode: normal !important;
	 border-radius: inherit !important;
	 pointer-events: none !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox::after {
	 display: none !important;
	 content: none !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-above {
	 text-shadow: none !important;
	 box-shadow: none !important;
 }
 
 /* 国家数据图表在 Basic 下一并转深，跟随信息框的近黑质感 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-country-chart {
	 background: light-dark( #f5f5f5, #1c1f23 ) !important;
	 background-color: light-dark( #f5f5f5, #1c1f23 ) !important;
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 border: 1px solid light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
	 box-shadow: none !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-country-chart > div:first-child {
	 background: light-dark( #e8f0fe, #1a3050 ) !important;
	 color: light-dark( #1a5a9e, #8ab8ff ) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox th.infobox-label:not([style*="background"]),
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox td.infobox-label:not([style*="background"]) {
	 color: light-dark( #202122, #c9ccd1 ) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .citizen-command-palette__footer {
	 background-color: var(--bl-surface-2) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-parser-output table.wikitable {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 box-shadow: none !important;
	 border: 1px solid var(--bl-border) !important;
 }
 
 /* Basic 下同样保留模板的彩色底（压深层由第 18 节的 ::before 负责） */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-parser-output table.wikitable td:not(.notheme) {
	 border-color: var(--bl-border) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"]:not(.ve-active) .mw-parser-output figure[typeof*="mw:File/Thumb"],
 html[class*="citizen-feature-performance-mode-clientpref-1"]:not(.ve-active) .mw-parser-output .thumbinner {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 box-shadow: none !important;
	 border: 1px solid var(--bl-border) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 border: 1px solid var(--bl-border) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups .mwe-popups-container {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 border: 1px solid var(--bl-border) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups footer,
 html[class*="citizen-feature-performance-mode-clientpref-1"] .mwe-popups.mwe-popups-type-generic .mwe-popups-container {
	 background: var(--color-surface-2) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] table.ambox {
	 backdrop-filter: none !important;
	 background-color: var(--color-surface-2) !important;
	 border-style: solid !important;
	 border-width: 1px !important;
	 border-color: var(--bl-border) !important;
	 border-left-width: 8px !important;
	 box-shadow: none !important;
	 transform: none !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 box-shadow: none !important;
	 border: 1px solid var(--bl-border) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .voy-box.warning {
	 background-color: light-dark( #fff3cd, #3d3520 ) !important;
	 border: 1px solid var(--bl-border) !important;
	 border-left: 4px solid #f0ad4e !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .aero-news-box {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 box-shadow: none !important;
	 border: 1px solid var(--bl-border) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .oo-ui-popupWidget {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 border: 1px solid var(--bl-border) !important;
	 box-shadow: none !important;
	 transform: none !important;
	 isolation: auto !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-color: var(--color-surface-1) !important;
	 border: 1px solid var(--bl-border) !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] .bl-hero:hover {
	 transform: translateY( -4px ) !important;
	 box-shadow: 0 12px 28px var(--bl-shadow-color) !important;
 }
 
 
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-page-aside-lastmod {
	 backdrop-filter: none !important;
	 -webkit-backdrop-filter: none !important;
	 background-image: none !important;
	 background-color: var(--color-surface-1) !important;
	 border: 1px solid var(--bl-border) !important;
	 box-shadow: none !important;
 }
 
 html[class*="citizen-feature-performance-mode-clientpref-1"] #citizen-page-aside-lastmod::before {
	 display: none !important;
 }
 
 /* =====================================================================
  * 33. 渐进增强回退
  *     light-dark() 需要 Chrome 123+ / Safari 17.5+ / Firefox 120+。
  *     不支持时上面的 light-dark() 声明会被整体丢弃，自定义属性变成未定义，
  *     面板背景会变成透明。这里给出等价的亮色值兜底，
  *     让老浏览器至少保持正确的亮色外观（暗色会退化为亮色）。
  * ===================================================================== */
 
 @supports not ( color: light-dark( #ffffff, #000000 ) ) {
	 :root {
		 --bl-glass: rgba( 255, 255, 255, 0.35 );
		 --bl-glass-soft: rgba( 255, 255, 255, 0.30 );
		 --bl-glass-strong: rgba( 255, 255, 255, 0.75 );
		 --bl-surface-2: #f5f5f5;
		 --bl-cell-filter: none;
		 --bl-border: rgba( 128, 128, 128, 0.10 );
		 --bl-border-strong: rgba( 128, 128, 128, 0.20 );
		 --bl-border-soft: rgba( 128, 128, 128, 0.08 );
		 --bl-divider: rgba( 128, 128, 128, 0.15 );
		 --bl-edge: rgba( 255, 255, 255, 0.45 );
		 --bl-text: #202122;
		 --bl-text-strong: #000000;
		 --bl-text-muted: #54595d;
		 --bl-accent: #3366cc;
		 --bl-accent-hover: #2a6bb0;
		 --bl-accent-soft: rgba( 54, 121, 204, 0.10 );
		 --bl-accent-soft-2: rgba( 54, 121, 204, 0.15 );
		 --bl-hover: rgba( 0, 0, 0, 0.04 );
		 --bl-hover-strong: rgba( 0, 0, 0, 0.06 );
		 --bl-shadow-color-sm: rgba( 0, 0, 0, 0.06 );
		 --bl-shadow-color: rgba( 0, 0, 0, 0.10 );
		 --bl-shadow-color-lg: rgba( 31, 38, 135, 0.15 );
		 --bl-glow-ring: rgba( 255, 255, 255, 0.90 );
		 --bl-glow-ring-2: rgba( 255, 255, 255, 0.30 );
		 --bl-glow-fill: rgba( 255, 255, 255, 0.35 );
		 --bl-glow-fill-2: rgba( 255, 255, 255, 0.20 );
		 --bl-page-bg: #fafafa;
		 --color-surface-0: #fafafa;
		 --color-surface-1: #ffffff;
		 --color-surface-2: #f5f5f5;
		 --color-surface-3: #e8e8e8;
		 --bl-ib-border: rgba( 128, 128, 128, 0.30 );
		 --bl-ib-divider: rgba( 128, 128, 128, 0.15 );
		 --bl-ib-hairline: rgba( 128, 128, 128, 0.10 );
	 }
 }
 
 /* =====================================================================
  * 34. 覆盖 MediaWiki:Common.css 对信息框的深色底
  *
  * Common.css 第 382 / 404 行有：
  *   html.skin-theme-clientpref-night .infobox {
  *       background-color: rgba(40, 40, 50, 0.6) !important;
  *       border-color: rgba(255, 255, 255, 0.15) !important;
  *   }
  *   @media (prefers-color-scheme: dark) {
  *       html.skin-theme-clientpref-os .infobox { ...同上... }
  *   }
  * 外加一批 .infobox.geography td/th 的 border-*-color !important。
  * 这些规则优先级是 (0,2,1)，高于本文件的 .infobox (0,1,0) ——
  * 结果就是暗色下信息框被盖成蓝灰色、毛玻璃也被顶掉。
  *
  * Common.css 还要给其他皮肤用，所以不删它，只在这里用更高优先级盖回来。
  * （MediaWiki:Citizen.css 只在 Citizen 皮肤下加载，天然就只影响 Citizen。）
  * ===================================================================== */
 
 /* Aero：恢复毛玻璃底 */
 html body.skin-citizen .infobox,
 html body.skin-citizen .infobox.ve-infobox-country,
 html body.skin-citizen .infobox.geography,
 html body.skin-citizen .infobox.vcard {
	 background-color: var(--bl-glass) !important;
	 background-image: none !important;
	 border-color: var(--bl-edge) !important;
 }
 
 /* 地理信息框的分隔线跟着本主题走 */
 html body.skin-citizen .infobox.geography td,
 html body.skin-citizen .infobox.geography th,
 html body.skin-citizen .infobox.geography .mergedtoprow td,
 html body.skin-citizen .infobox.geography .mergedtoprow th,
 html body.skin-citizen .infobox.geography .mergedrow td,
 html body.skin-citizen .infobox.geography .mergedrow th,
 html body.skin-citizen .infobox.geography .mergedbottomrow td,
 html body.skin-citizen .infobox.geography .mergedbottomrow th {
	 border-top-color: var(--bl-ib-divider) !important;
	 border-bottom-color: var(--bl-ib-divider) !important;
	 border-right-color: var(--bl-ib-divider) !important;
	 border-left-color: var(--bl-ib-divider) !important;
 }
 
 /* Basic：不透明近黑 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox,
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox.ve-infobox-country,
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox.geography,
 html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen .infobox.vcard {
	 background-color: light-dark( #ffffff, #16181b ) !important;
	 background-image: none !important;
	 border-color: light-dark( rgba( 128, 128, 128, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
 }
 
 /* =====================================================================
  * 35. Infobox 统一方案（普通 = 无实心 caption ／ 特殊 = 有实心 caption）
  *
  * 【判据】不看表格类名 —— 网站上的信息框大多同时带 vcard / geography /
  * ve-infobox-country，类名组合区分不了「普通」和「特殊」。改用 DOM 结构区分，
  * 纯 CSS 就能表达，不需要 :has()：
  *
  *   普通信息框（模板自己的默认外观）—— 两种形态：
  *     a) 表里没有 caption
  *        <table class="infobox …"><tbody>…            ← tbody 是 table 的第一个子元素
  *        实测：<table class="infobox geography vcard ve-infobox-country">（国家）
  *              <table class="infobox geography vcard ve-infobox-country">（城市）
  *              <table class="infobox ve-infobox-country tc-no-top-radius">（台风）
  *     b) 有 caption，但 caption 没有实心底色
  *        <table class="infobox ve-infobox-country tornado-no-top-radius">
  *          <caption class="infobox-title" style="border-radius: 0 !important;">（龙卷风）
  *     表头把浅色底写在 style 属性上：
  *        background-color:#f8f9fa ／ #f0f0f0 ／ #F3F3F3 ／ background:rgba(204,238,255,.6)
  *     那不是语义色，只是模板默认外观 ⇒ 一律压平。
  *
  *   特殊信息框（模板自带配色的那种）
  *     <table class="infobox vcard"><caption style="background:#4FD5E8; …"></caption><tbody>…
  *     实测：<table class="infobox vcard">，<caption class="infobox-title fn"
  *           style="background:#4FD5E8; color:#ffffff;">，
  *           <th class="infobox-header" style="background-color:#CFF3F7;">（角色）
  *     底色是模板的语义色 ⇒ 必须保留。
  *
  * 对应的三条选择器前缀：
  *   .infobox > tbody:first-child                          → 普通（形态 a）
  *   .infobox > caption:not([style*="background"]) + tbody  → 普通（形态 b）
  *   .infobox > caption[style*="background"] + tbody        → 特殊
  *
  * ⚠ 判据必须精确到「caption 带【实心底色】」。只判「有没有 caption」会误伤
  *   龙卷风表这种「有 caption 但没底色」的表 —— 那会让它的 #F3F3F3 灰底在暗色下
  *   留下来（2026-10-07 用户实测报的「小标题没适配暗色 / 显得旧」）。
  *
  * 【处置】
  *   普通（表头 above / header）：底色压平（Aero 透明 / Basic 中性实色）；
  *        并把模板写死的字色（多为 color:#000000）改跟主题，
  *        否则暗色下就是黑字压在暗底上 —— 这就是「字不会变白」的原因。
  *        ⚠ 必须带 !important：模板写在 style 属性上，无 !important 压不过。
  *        ⚠ 模板若把底色写成内联 !important（例如台风表的
  *          `background-color: #e6b8f2 !important`），样式表压不过，保持原样 ——
  *          那属于模板强制配色，不争。
  *   特殊（有实心 caption 的表头）：底色保留，只做一件事 —— 有底色却没写字色时
  *        补一个深色文字（--bl-ib-on-fill），否则暗色下会被主题刷成白字压在浅底上。
  *   小标题 .infobox-subheader：和「特殊」同一条路子 —— 底色保留。
 
  *        它是模板的分类色带（城市表那条 #CDDEFF 天蓝写的就是「地级市」），
  *        属于语义色，压掉就丢信息了。只补深色文字。
  *
  * 【不在本方案内】
  *   caption 自己：特殊信息框靠 caption 的实心底色生成同色描边（见第 11 节 v4 规则），
  *                所以 caption 的底色一律不碰。
  *   .infobox-country-chart：国家数据图表，单独在第 13 / 32.1 节处理。
  *   台风等级色 .tc-cat-*：底色写在 MediaWiki:Common.css 的类上，本文件另兜一次深字。
  *
  * ⚠ 判「有没有内联字色」用子串 " color:"（前面带空格）——
  *   用 [style*="color"] 会被 background-color: 里的 color 误命中，
  *   而特殊信息框的表头正是 background-color:#CFF3F7 这种写法，会区分不开。
  *   若模板把 style 写成 "background:red;color:#000"（分号后不留空格）会漏判，
  *   届时补 [style*=";color:"]（分支 ①）与 :not([style*=";color:"])（分支 ②）即可。
  *
  * 选择器只用校验器支持的写法：结构伪类 + 链式 :not() + [attr*="value"]，无 :is() / :has()。
  * ===================================================================== */
 
 /* —— 分支 ①：普通信息框的表头（above / header）—— 压平模板的内联底色 ——
	普通信息框的两种形态：
	  · 表里没有 caption            → tbody 是 table 的第一个子元素
	  · 有 caption 但 caption 没实心底色 → caption 后面紧跟的那个 tbody
		（实测：龙卷风表 <caption class="infobox-title" style="border-radius: 0 !important">）
	⚠ .infobox-subheader 故意不在这里：那是「分类色带」
	  （例如城市表的 background-color:#CDDEFF 天蓝，显示「地级市」），
	  属于模板的语义色，见下面分支 ②-b。 */
 
 /* Aero / 默认：透明，信息框回到「全透明 + 描边 + 光线」 */
 .infobox > tbody:first-child th:not(.infobox-subheader)[style*="background"],
 .infobox > tbody:first-child .infobox-above[style*="background"],
 .infobox > tbody:first-child .infobox-header[style*="background"],
 .infobox > caption:not([style*="background"]) + tbody th:not(.infobox-subheader)[style*="background"],
 .infobox > caption:not([style*="background"]) + tbody .infobox-above[style*="background"],
 .infobox > caption:not([style*="background"]) + tbody .infobox-header[style*="background"] {
	 background-color: transparent !important;
	 background-image: none !important;
 }
 
 /* Basic：换成不透明中性实色，与第 32.1 节「没写底色的表头」保持同一档观感 */
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > tbody:first-child th:not(.infobox-subheader)[style*="background"],
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > tbody:first-child .infobox-above[style*="background"],
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > tbody:first-child .infobox-header[style*="background"],
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > caption:not([style*="background"]) + tbody th:not(.infobox-subheader)[style*="background"],
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > caption:not([style*="background"]) + tbody .infobox-above[style*="background"],
 html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox > caption:not([style*="background"]) + tbody .infobox-header[style*="background"] {
	 background-color: light-dark( #f3f3f3, #23262b ) !important;
	 background-image: none !important;
 }
 
 /* 压平底色之后，模板写死的字色也必须跟主题：
	否则暗色下就是 color:#000000 的黑字压在暗底上（「字不会变白」）。
	同样排除 .infobox-subheader —— 它保留底色，字色由分支 ②-b 安排。 */
 .infobox > tbody:first-child th:not(.infobox-subheader)[style*=" color:"],
 .infobox > tbody:first-child td:not(.infobox-subheader)[style*=" color:"],
 .infobox > tbody:first-child .infobox-above[style*=" color:"],
 .infobox > tbody:first-child .infobox-header[style*=" color:"],
 .infobox > tbody:first-child .infobox-label[style*=" color:"],
 .infobox > tbody:first-child .infobox-data[style*=" color:"],
 .infobox > caption:not([style*="background"]) + tbody th:not(.infobox-subheader)[style*=" color:"],
 .infobox > caption:not([style*="background"]) + tbody td:not(.infobox-subheader)[style*=" color:"],
 .infobox > caption:not([style*="background"]) + tbody .infobox-above[style*=" color:"],
 .infobox > caption:not([style*="background"]) + tbody .infobox-header[style*=" color:"],
 .infobox > caption:not([style*="background"]) + tbody .infobox-label[style*=" color:"],
 .infobox > caption:not([style*="background"]) + tbody .infobox-data[style*=" color:"] {
	 color: var(--bl-text) !important;
 }
 
 /* —— 分支 ②：底色要保留的两类 —— 只补「浅底深字」，完全不碰底色 ——
	②-a 特殊信息框：caption 带【实心底色】的表（角色表 #4FD5E8 那种）
	②-b 所有信息框的小标题 .infobox-subheader —— 分类色带（#CDDEFF 天蓝等）
	不带 !important：模板自己写的字色（内联或 TemplateStyles）仍然优先。 */
 .infobox > caption[style*="background"] + tbody th[style*="background"]:not([style*=" color:"]),
 .infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*=" color:"]),
 .infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*=" color:"]),
 .infobox .infobox-subheader[style*="background"]:not([style*=" color:"]) {
	 color: var(--bl-ib-on-fill);
 }
 
 /* 台风等级色写在 Common.css 的类上（不在 style 属性里），单独兜一次深字。
	亮色下 --bl-ib-on-fill 本来就是正文色，所以这条只在暗色下改变外观。 */
 .infobox[class*="tc-cat"] caption,
 .infobox[class*="tc-cat"] .infobox-title {
	 color: var(--bl-ib-on-fill);
 }
 
 /* =====================================================================
  * 35.1 现代 wiki UI：信息框只保留一条主要分割线
  *
  * 现在的做法：数据行之间不画线；分区标题（.infobox-header）只在【上方】
  * 留一条 1px 分割线，作为「换一个分区」的提示。其余（标题下方、小标题
  * 上下、label/data 之间）一律不画。
  *
  * 颜色用 --bl-divider（明暗两侧都有值），所以不会再出现
  * 「亮色有线、暗色没线」这种只有单侧可见的分割线。
  *
  * ⚠ 放在文件最末、并用 html body.skin-citizen 提优先级 ——
  *   否则会被第 11 节 `th:not(.infobox-above) { border-top: none !important }`
  *   和第 12 节 `.infobox.geography.vcard th { border: 0 … !important }` 压掉。
  * ===================================================================== */
 
 html body.skin-citizen .infobox .infobox-header {
	 border-top: 1px solid var(--bl-divider) !important;
	 border-bottom: none !important;
 }
 
 /* =====================================================================
  * 36. Infobox 标题与外框：一张连续卡片（2026-10-07）
  * caption 只圆顶部，正文只圆底部；取消白色内光框。
  * 彩色 caption 的伪元素继承模板背景，保留同色外描边。
  * ===================================================================== */
 :root { --bl-ib-outline-width: 4px; }
 html body.skin-citizen table.infobox {
  padding: 0 !important;
  border-radius: 16px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: visible !important;
 }
 /* ⚠ 这里原来有一条把信息框两个光效伪元素全关掉的规则：
      html body.skin-citizen table.infobox::before,
      html body.skin-citizen table.infobox::after {
        content: none !important; display: none !important;
      }
    —— 于是信息框丢掉第 11 节定义的「光圈 + 柔光」，
      连光效边都没有了（2026-10-07 实测：国家信息框没有光效边）。
    已删除，回到第 11 / 12 节的写法：
      .infobox::before  = 鼠标跟随的光圈（mix-blend-mode: overlay）
      .infobox::after   = 鼠标跟随的柔光（mix-blend-mode: soft-light）
      .infobox.geography::after / .infobox.vcard::after = 另一档柔光色 */
 html body.skin-citizen table.infobox > caption,
 html body.skin-citizen table.infobox > caption.infobox-title {
  display: table-caption !important;
  caption-side: top !important;
  position: static !important;
  width: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 16px 16px 0 0 !important;
  overflow: visible !important;
  font-size: 1.1rem !important;
  font-weight: 700;
  line-height: 1.4 !important;
  letter-spacing: .015em;
  box-shadow: none !important;
  text-shadow: none !important;
 }
 /* ⚠ 这里原来有一条规则，已删除：
      html body.skin-citizen table.infobox > tbody {
        display: table-row-group !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
      }
    它把 tbody 的圆角清零、并把它改回普通的 table-row-group —— 于是
    第 11 节 .infobox tbody 的 `overflow: hidden` 不再生效，裁剪没了。
    §36 的本意是改由「首行 / 末行的单元格」各自带 15px 圆角，但
    台风表的 .infobox-above 自带【内联】`border-radius: 0 !important`
    （<th class="infobox-above" style="… border-radius: 0 !important;">），
    内联 !important 压不过 ⇒ 表头又变回方角。
    删掉之后，第 11 节的
      .infobox tbody { display: table; border-radius: 12px; overflow: hidden }
    重新生效 —— 圆角由 tbody 裁切产生，不受单元格内联值影响。 */
 html body.skin-citizen table.infobox > tbody > tr > th,
 html body.skin-citizen table.infobox > tbody > tr > td {
  border-radius: 0 !important;
 }
 html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > :first-child {
  border-bottom-left-radius: 15px !important;
 }
 html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > :last-child {
  border-bottom-right-radius: 15px !important;
 }
 /* 无 caption 的模板仍由第一行接住外框顶部圆角。 */
 html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > :first-child {
  border-top-left-radius: 15px !important;
 }
 html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > :last-child {
  border-top-right-radius: 15px !important;
 }
 html body.skin-citizen .infobox .infobox-header {
  padding: .5em .8em !important;
  font-size: .95em;
  text-transform: none !important;
  letter-spacing: .025em !important;
 }
 /* 只给实心底色生成外描边；不截取或猜测模板色值。 */
 html body.skin-citizen table.infobox > caption.infobox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="background-image"]):not([style*="transparent"])::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -4px !important;
  padding: var(--bl-ib-outline-width) !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 20px !important;
  background-color: inherit !important;
  background-image: none !important;
  -webkit-mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 ) border-box !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 ) border-box !important;
  mask-composite: exclude !important;
  filter: saturate(1.18) brightness(.93) !important;
  pointer-events: none !important;
  z-index: 102 !important;
 }
 /* caption 的内联字色优先。未指定字色时：有彩底取深字，无彩底跟主题。 */
 html body.skin-citizen table.infobox > caption {
  color: var(--bl-text);
 }
 html body.skin-citizen table.infobox > caption[style*="background"] {
  color: var(--bl-ib-on-fill);
 }
 html body.skin-citizen table.infobox > caption a {
  color: inherit !important;
 }
 
 
 /* 37. 保留彩色外框、恢复柔光；Basic 只关闭模糊，不移除静态装饰。 */
 html body.skin-citizen table.infobox {
  isolation: isolate;
  box-shadow: 0 8px 28px var(--bl-shadow-color-lg) !important;
 }
 /* ⚠ 这里原来是一条【替代版】柔光，它把信息框和 Navbox 的原始柔光盖掉了：
      html body.skin-citizen table.infobox::after,
      html body.skin-citizen .navbox::after {
        content: "" !important; display: block !important; visibility: visible !important;
        position: absolute !important; inset: 0 !important; border: 0 !important;
        border-radius: 16px !important;
        background: radial-gradient(380px …, var(--bl-glow-fill) 0%, transparent 75%) !important;
        opacity: .35 !important;              ← 只有三成强度
        mix-blend-mode: soft-light; pointer-events: none !important; z-index: 1 !important;
      }
    问题是它：
      · 只剩下柔光，没有光圈（::before）—— 所以边上看不到光效；
      · 强度被压到 35%，和侧栏 / ambox / voy-box 等面板不一致；
      · 半径写死 380px，覆盖掉了第 11 节 500px 与第 12 节
        .infobox.geography/.vcard 的那一档柔光。
    已删除，两处都回到上面（第 11 / 12 / 16 节）定义的写法。 */
 html body.skin-citizen .navbox .navbox::after {
  content: none !important;
  display: none !important;
 }
 html body.skin-citizen table.infobox > caption.infobox-title[style*="background"]::before {
  visibility: visible !important;
 }
 html body.skin-citizen .cs-stream::before,
 html body.skin-citizen .cs-stream::after {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
 }
 html body.skin-citizen .cs-stream::after {
  z-index: 1;
  opacity: .18;
  mix-blend-mode: soft-light;
 }
 /* 相同填色在夜间变为较暗色带；独立压背景，不给文字或整张表加滤镜。 */
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)) !important;
  color: #eaecf0 !important;
 }
 /* —— 信息框：只处理【有实心 caption】的表（角色那种）——
    ⚠ 无 caption 的表（台风）绝对不能压暗：那里表头的颜色是语义色，例如
      <th class="infobox-above" style="background-color:#e6b8f2 !important"> 表示"强度等级"。
      这里原来不分有没有 caption 一律压暗，把它也压掉了。
    判据 `caption[style*="background"] + tbody` 正好等价于第 35 节的「特殊信息框」。
    ⚠ 同时把 58% 黑减到 42%（= 保留 58% 原色）：58% 会把浅色底压成灰调
      （"小标题太灰"），再用 saturate 把彩度补回来 —— 只加 saturate，
      文字近似中性色，几乎不受影响，也不等于给整张表加滤镜。
    caption 单独一条、不加 filter：它的 ::before 是同色外描边，靠 static
      定位取 table 作包含块；一旦给 caption 加 filter，包含块就变成 caption
      自己，描边会缩到标题上。 */
 html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
 }
 html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-subheader[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-label[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-data[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
  filter: saturate(1.7);
 }
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)) !important;
  color: #eaecf0 !important;
 }
 /* 信息框：只处理有实心 caption 的表；42% 黑 + 补饱和。说明见 night 块。 */
 html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
 }
 html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-subheader[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-label[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-data[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
  filter: saturate(1.7);
 }
 @media (prefers-color-scheme: dark) {
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .58), rgba(0, 0, 0, .58)) !important;
  color: #eaecf0 !important;
 }
 /* 信息框：只处理有实心 caption 的表；42% 黑 + 补饱和。说明见 night 块。 */
 html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
 }
 html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-above[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-header[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-subheader[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-label[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]),
 html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption[style*="background"] + tbody .infobox-data[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"]) {
  background-image: linear-gradient(rgba(0, 0, 0, .42), rgba(0, 0, 0, .42)) !important;
  filter: saturate(1.7);
 }
 }
 html body.skin-citizen table.infobox > caption a[href],
 html body.skin-citizen table.infobox .infobox-header a[href],
 html body.skin-citizen table.infobox .infobox-subheader a[href] {
  color: var(--color-link, #36c) !important;
 }
 html body.skin-citizen table.infobox > caption a.new[href],
 html body.skin-citizen table.infobox .infobox-header a.new[href],
 html body.skin-citizen table.infobox .infobox-subheader a.new[href] {
  color: var(--color-link-red, #d33) !important;
 }
 
 /* 38. 移动信息框：独占一行，让正文从表格下方继续。 */
 @media screen and (max-width: 768px) {
  html body.skin-citizen table.infobox {
   float: none !important;
   clear: both !important;
   width: calc(100% - 16px) !important;
   min-width: 0 !important;
   max-width: calc(100% - 16px) !important;
   box-sizing: border-box !important;
   margin: 12px 8px 20px !important;
  }
  html body.skin-citizen table.infobox th,
  html body.skin-citizen table.infobox td {
   overflow-wrap: anywhere;
  }
  html body.skin-citizen table.infobox img {
   max-width: 100%;
   height: auto;
  }
 }
 /* 39. Navbox 夜间对比：深底 + 亮链接，保留彩色标题/分组。 */
 html.skin-theme-clientpref-night body.skin-citizen .navbox {
  --color-link: #8bb8ff;
  --color-link--visited: #b4a5ff;
  --color-link--hover: #b8d3ff;
  --color-link-red: #ff9ba6;
  --color-link-red--hover: #ffc0c7;
  --bl-navbox-divider: #454952;
 }
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-list {
  background-color: #202327 !important;
  background-image: none !important;
  color: #eaecf0 !important;
 }
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-even {
  background-color: #25282d !important;
 }
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]),
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]),
 html.skin-theme-clientpref-night body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
  background-image: linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.76)) !important;
  color: #f1f3f5 !important;
 }
 html.skin-theme-clientpref-night body.skin-citizen .navbox a[href] { color: var(--color-link) !important; }
 html.skin-theme-clientpref-night body.skin-citizen .navbox a[href]:visited { color: var(--color-link--visited) !important; }
 html.skin-theme-clientpref-night body.skin-citizen .navbox a[href]:hover { color: var(--color-link--hover) !important; }
 html.skin-theme-clientpref-night body.skin-citizen .navbox a.new[href] { color: var(--color-link-red) !important; }
 html.skin-theme-clientpref-night body.skin-citizen .navbox a.new[href]:hover { color: var(--color-link-red--hover) !important; }
 html.skin-theme-clientpref-black body.skin-citizen .navbox {
  --color-link: #8bb8ff;
  --color-link--visited: #b4a5ff;
  --color-link--hover: #b8d3ff;
  --color-link-red: #ff9ba6;
  --color-link-red--hover: #ffc0c7;
  --bl-navbox-divider: #454952;
 }
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-list {
  background-color: #202327 !important;
  background-image: none !important;
  color: #eaecf0 !important;
 }
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-even {
  background-color: #25282d !important;
 }
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]),
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]),
 html.skin-theme-clientpref-black body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
  background-image: linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.76)) !important;
  color: #f1f3f5 !important;
 }
 html.skin-theme-clientpref-black body.skin-citizen .navbox a[href] { color: var(--color-link) !important; }
 html.skin-theme-clientpref-black body.skin-citizen .navbox a[href]:visited { color: var(--color-link--visited) !important; }
 html.skin-theme-clientpref-black body.skin-citizen .navbox a[href]:hover { color: var(--color-link--hover) !important; }
 html.skin-theme-clientpref-black body.skin-citizen .navbox a.new[href] { color: var(--color-link-red) !important; }
 html.skin-theme-clientpref-black body.skin-citizen .navbox a.new[href]:hover { color: var(--color-link-red--hover) !important; }
 @media (prefers-color-scheme: dark) {
 html.skin-theme-clientpref-os body.skin-citizen .navbox {
  --color-link: #8bb8ff;
  --color-link--visited: #b4a5ff;
  --color-link--hover: #b8d3ff;
  --color-link-red: #ff9ba6;
  --color-link-red--hover: #ffc0c7;
  --bl-navbox-divider: #454952;
 }
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-list {
  background-color: #202327 !important;
  background-image: none !important;
  color: #eaecf0 !important;
 }
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-even {
  background-color: #25282d !important;
 }
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]),
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-group[style*="background"]:not([style*="gradient"]):not([style*="url"]),
 html.skin-theme-clientpref-os body.skin-citizen .navbox .navbox-abovebelow[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
  background-image: linear-gradient(rgba(0,0,0,.76), rgba(0,0,0,.76)) !important;
  color: #f1f3f5 !important;
 }
 html.skin-theme-clientpref-os body.skin-citizen .navbox a[href] { color: var(--color-link) !important; }
 html.skin-theme-clientpref-os body.skin-citizen .navbox a[href]:visited { color: var(--color-link--visited) !important; }
 html.skin-theme-clientpref-os body.skin-citizen .navbox a[href]:hover { color: var(--color-link--hover) !important; }
 html.skin-theme-clientpref-os body.skin-citizen .navbox a.new[href] { color: var(--color-link-red) !important; }
 html.skin-theme-clientpref-os body.skin-citizen .navbox a.new[href]:hover { color: var(--color-link-red--hover) !important; }
 }