MediaWiki:Citizen.css：修订间差异

2026年10月7日 (三) 09:44的版本

/* =====================================================================
 * 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 {
	/* —— 材质 —— */
	--bl-glass:         light-dark( rgba( 255, 255, 255, 0.35 ), rgba( 20, 20, 20, 0.55 ) );
	--bl-glass-soft:    light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 20, 20, 20, 0.50 ) );
	--bl-glass-strong:  light-dark( rgba( 255, 255, 255, 0.75 ), rgba( 28, 28, 28, 0.70 ) );
	--bl-blur:          blur( 14px ) saturate( 100% );

	/* —— 不透明表面：Basic 模式关掉模糊后使用，保证可读性 —— */
	--bl-surface-2:     light-dark( #f5f5f5, #2d2e2f );

	/* —— 描边与分隔线 —— */
	--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 {
	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);
	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%,
		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;
		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 ) ),
			transparent 80%
		) 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; }
#skin-client-prefs-citizen-feature-image-dimming     { order: 4 !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;
}

/* =====================================================================
 * 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);
}

.infobox tr:not(:last-child) th,
.infobox tr:not(:last-child) td {
	border-bottom: 1px solid var(--bl-ib-divider) !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;
}

.infobox .infobox-above {
	text-shadow: none !important;
	font-weight: bold !important;
	text-align: center !important;
	padding: 8px 5px !important;
	border-bottom: 1px solid var(--bl-ib-divider) !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;
	border-top: 1px solid var(--bl-ib-hairline) !important;
	border-bottom: 1px solid var(--bl-ib-hairline) !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;
}

/* —— 外圈光边 —— */
.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;
}

/* 实心标题背景：由 caption 自身的背景色接管外圈。
   写法说明：MediaWiki 的 CSS 校验器不支持 :is() / :has() / 多参数 :not()，
   也不支持属性选择器的 i 标志，所以这里一律用「链式单参数 :not()」。 */
table.infobox > caption.infobox-title[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="background-image"]):not([style*="transparent"]) {
	position: static !important;
	overflow: visible !important;
}

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;
	box-sizing: border-box !important;
	padding: var( --bl-ib-outline-width ) !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;
	pointer-events: none !important;
	z-index: 102 !important;
}

/* 原设计在「caption 自带实心背景」时会隐藏表格自身的白色光环，
   但那需要 :has() —— 校验器不支持。
   代价：模板给了实心标题底色的信息框，会同时出现「白色内圈 + 同色外框」。
   若要去掉白色内圈，可以在 common.js 里给这类表格加一个类，再用一行 CSS 隐藏。 */


	.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: 1px solid var(--bl-ib-divider) !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-ib-hairline) !important;
	border-bottom: 1px solid var(--bl-ib-hairline) !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
   （见 <table class="infobox ve-infobox-country tc-no-top-radius">），
   所以这条规则从来没有生效过。两个名字都保留，避免影响别处。 */
.infobox.tornado-no-top-radius > tbody,
.infobox.tc-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. Navbox 导航框
 * ===================================================================== */

.navbox,
.navbox-inner,
.navbox-subgroup {
	background: transparent !important;
	border: none !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border-radius: 16px !important;
}

.navbox {
	overflow: hidden !important;
	margin: 1.5em 0 !important;
	box-shadow: 0 4px 15px var(--bl-shadow-color) !important;
}

/* navbox 两套主题下都是玻璃面板（原先只有暗色有），这样它才接得住光效 */
.navbox-inner {
	background: var(--bl-glass) !important;
	backdrop-filter: var(--bl-blur) !important;
	-webkit-backdrop-filter: var(--bl-blur) !important;
}

/* 光效：与其它面板同源，光圈画在盒内（.navbox 自身是 overflow:hidden） */
.navbox {
	position: relative;
	isolation: isolate;
}

.navbox > * {
	position: relative;
	z-index: 2;
}

.navbox::before {
	content: "" !important;
	position: absolute;
	inset: 0;
	border: 2px solid transparent;
	border-radius: inherit;
	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 );
	-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;
}

.navbox::after {
	content: "" !important;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	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;
}

.navbox-title {
	background: light-dark( rgba( 204, 238, 255, 0.50 ), rgba( 54, 121, 204, 0.30 ) ) !important;
	color: light-dark( #004466, #ffffff ) !important;
	font-weight: bold !important;
}

.navbox-group {
	background: light-dark( rgba( 54, 121, 204, 0.10 ), rgba( 54, 121, 204, 0.15 ) ) !important;
	color: light-dark( #3366cc, #ffffff ) !important;
	font-weight: bold !important;
}

.navbox-list,
.navbox-list > div {
	background: transparent !important;
	color: var(--bl-text) !important;
}

/* bl-navbox-wrap 容器（首页模板） */
.bl-navbox-wrap table.navbox {
	background: var(--color-surface-1) !important;
	border-color: var(--bl-border) !important;
}

.bl-navbox-wrap .navbox-group {
	background: var(--color-surface-2) !important;
	color: var(--bl-accent) !important;
	border-color: var(--bl-border-soft) !important;
}

.bl-navbox-wrap .navbox-list { border-color: var(--bl-border-soft) !important; }
.bl-navbox-wrap .navbox-list a { color: var(--bl-text) !important; }
.bl-navbox-wrap .navbox-list a:hover { color: var(--bl-accent-hover) !important; }
.bl-navbox-wrap .navbox-odd { background: var(--color-surface-1) !important; }
.bl-navbox-wrap .navbox-even { background: var(--color-surface-2) !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;
}

.mw-parser-output table.wikitable th:not(.notheme),
.mw-parser-output table.wikitable td:not(.notheme) {
	border: 1px solid var(--bl-divider) !important;
	padding: 10px 16px !important;
}

.mw-parser-output table.wikitable th:not(.notheme) {
	background-color: transparent !important;
	color: var(--bl-text) !important;
}

.mw-parser-output table.wikitable td:not(.notheme) { color: var(--bl-text) !important; }

.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;
	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;
	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. 页面杂物
 * ===================================================================== */

.catlinks {
	border-color: var(--bl-divider) !important;
	background-color: light-dark( rgba( 0, 0, 0, 0.02 ), rgba( 0, 0, 0, 0.20 ) ) !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;
	}
}

/* =====================================================================
 * 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;

	/* —— 亮色侧的默认值 —— */
	--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 );
}

/* 暗色开关：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 );
			}
}

/* —— 首页组件：暗色下需要单独修正的文字色 —— */
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;
	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: var(--bl-glass);
	border: 1px solid var(--bl-border);
	backdrop-filter: var(--bl-blur);
	-webkit-backdrop-filter: var(--bl-blur);
}

/* =====================================================================
 * 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: 2px !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"] .navbox::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"] .navbox::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;
}

html[class*="citizen-feature-performance-mode-clientpref-1"] .mw-parser-output table.wikitable th:not(.notheme) {
	background-color: transparent !important;
}

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"] .navbox {
	box-shadow: none !important;
}

html[class*="citizen-feature-performance-mode-clientpref-1"] .navbox-inner {
	background-color: var(--color-surface-1) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !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-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()：
 *
 *   普通信息框（模板自己的默认外观）
 *     <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">（台风）
 *     表头把浅色底写在 style 属性上：
 *       background-color:#f8f9fa ／ #f0f0f0 ／ #CDDEFF ／ background:rgba(204,238,255,.6)
 *     那不是语义色，只是模板默认外观 ⇒ 一律压平。
 *
 *   特殊信息框（模板自带配色的那种）
 *     <table class="infobox vcard"><caption …></caption><tbody>…   ← tbody 前面有 caption
 *     实测：<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   → 普通
 *   .infobox > caption + tbody     → 特殊
 *
 * 【处置】
 *   普通：底色压平（Aero 透明 / Basic 中性实色）；
 *        并把模板写死的字色（多为 color:#000000）改跟主题，
 *        否则暗色下就是黑字压在暗底上 —— 这就是「字不会变白」的原因。
 *        ⚠ 必须带 !important：模板写在 style 属性上，无 !important 压不过。
 *        ⚠ 模板若把底色写成内联 !important（例如台风表的
 *          `background-color: #e6b8f2 !important`），样式表压不过，保持原样 ——
 *          那属于模板强制配色，不争。
 *   特殊：底色保留，只做一件事 —— 表头有底色却没写字色时补一个深色文字
 *        （--bl-ib-on-fill），否则暗色下会被主题刷成白字压在浅底上。
 *
 * 【不在本方案内】
 *   caption 自己：特殊信息框靠 caption 的实心底色生成同色描边（见第 11 节 v4 规则），
 *                所以 caption 的底色一律不碰。
 *   .infobox-country-chart：国家数据图表，单独在第 13 / 32.1 节处理。
 *
 * ⚠ 判「有没有内联字色」用子串 " color:"（前面带空格）——
 *   用 [style*="color"] 会被 background-color: 里的 color 误命中，
 *   而特殊信息框的表头正是 background-color:#CFF3F7 这种写法，会区分不开。
 *   若模板把 style 写成 "background:red;color:#000"（分号后不留空格）会漏判，
 *   届时补 [style*=";color:"]（分支 ①）与 :not([style*=";color:"])（分支 ②）即可。
 *
 * 选择器只用校验器支持的写法：结构伪类 + 链式 :not() + [attr*="value"]，无 :is() / :has()。
 * ===================================================================== */

/* —— 分支 ①：普通信息框 —— 压平模板的内联底色 —— */

/* Aero / 默认：透明，信息框回到「全透明 + 描边 + 光线」 */
.infobox > tbody:first-child th[style*="background"],
.infobox > tbody:first-child .infobox-above[style*="background"],
.infobox > tbody:first-child .infobox-header[style*="background"],
.infobox > tbody:first-child .infobox-subheader[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[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 > tbody:first-child .infobox-subheader[style*="background"] {
	background-color: light-dark( #f3f3f3, #23262b ) !important;
	background-image: none !important;
}

/* 压平底色之后，模板写死的字色也必须跟主题：
   否则暗色下就是 color:#000000 的黑字压在暗底上（「字不会变白」）。 */
.infobox > tbody:first-child th[style*=" color:"],
.infobox > tbody:first-child td[style*=" color:"],
.infobox > tbody:first-child .infobox-above[style*=" color:"],
.infobox > tbody:first-child .infobox-header[style*=" color:"],
.infobox > tbody:first-child .infobox-subheader[style*=" color:"],
.infobox > tbody:first-child .infobox-label[style*=" color:"],
.infobox > tbody:first-child .infobox-data[style*=" color:"] {
	color: var(--bl-text) !important;
}

/* —— 分支 ②：特殊信息框（有 caption）—— 保留模板配色，只修「浅底白字」 —— */
/* 不带 !important：模板自己写的字色（内联或 TemplateStyles）仍然优先。 */
.infobox > caption + tbody th[style*="background"]:not([style*=" color:"]),
.infobox > caption + tbody .infobox-above[style*="background"]:not([style*=" color:"]),
.infobox > caption + tbody .infobox-header[style*="background"]:not([style*=" color:"]),
.infobox > caption + tbody .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);
}