MediaWiki:Citizen.css：修订间差异

2026年10月6日 (二) 19:56的版本

/* =====================================================================
 * 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 校准。
 * ===================================================================== */

/**
 * 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-dark-wash: light-dark( transparent, rgba( 20, 22, 25, 0.72 ) );
	--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 );
}

.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;
	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;
	backdrop-filter: var(--bl-blur);
	-webkit-backdrop-filter: var(--bl-blur);
	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;
	color: var(--bl-text);
	padding: 8px 5px !important;
	line-height: 1.4 !important;
	border-top: none !important;
}

.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: var(--bl-accent-soft);
	color: var(--bl-accent);
}

.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;
	border: 1px solid light-dark( rgba( 128, 128, 128, 0.30 ), transparent ) !important;
	box-shadow: 0 2px 8px var(--bl-shadow-color-sm) !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;
	border: 1px solid light-dark( rgba( 128, 128, 128, 0.30 ), transparent ) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: light-dark( rgba( 255, 255, 255, 0.40 ), rgba( 255, 255, 255, 0.06 ) ) !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;
	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: var(--bl-accent-soft);
	color: light-dark( #3366cc, #ffffff );
	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: inset 0 1px 3px rgba( 0, 0, 0, 0.04 ), 0 1px 2px rgba( 0, 0, 0, 0.03 ) !important;
}

.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;
	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 自身的背景色接管外圈，隐藏白色光环 */
table.infobox > caption.infobox-title[style*="background" i]:not( [style*="gradient(" i], [style*="url(" i], [style*="background-image" i], [style*="transparent" i] ) {
	position: static !important;
	overflow: visible !important;
}

table.infobox > caption.infobox-title[style*="background" i]:not( [style*="gradient(" i], [style*="url(" i], [style*="background-image" i], [style*="transparent" i] )::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;
}

table.infobox:has( > caption.infobox-title[style*="background" i]:not( [style*="gradient(" i], [style*="url(" i], [style*="background-image" i], [style*="transparent" i] ) )::before {
	display: none !important;
}

/* 实心标题背景在暗色下叠加压暗层；内联黑色文字在暗色下改为浅色 */
.infobox :is( .infobox-title, .infobox-header, .infobox-above, .infobox-subheader )[style*="background" i]:not( [style*="gradient(" i], [style*="url(" i], [style*="background-image" i], [style*="transparent" i] ) {
	background-image: linear-gradient( var( --bl-ib-dark-wash ), var( --bl-ib-dark-wash ) );
}

.infobox :is( .infobox-title, .infobox-header, .infobox-above, .infobox-subheader ):is( [style*="color:black" i], [style*="color: black" i], [style*="color:#000;" i], [style*="color: #000;" i], [style*="color:#000000" i], [style*="color: #000000" i], [style*="rgb(0,0,0)" i], [style*="rgb(0, 0, 0)" i], [style*="rgb(0 0 0" i] ) {
	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: 0 2px 8px var(--bl-shadow-color-sm) !important;
	color: var(--bl-text-strong);
}

.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: var(--bl-accent-soft);
	color: light-dark( #3366cc, #ffffff );
	text-shadow: light-dark( none, 0 1px 2px rgba( 0, 0, 0, 0.30 ) );
	backdrop-filter: var(--bl-blur);
	-webkit-backdrop-filter: var(--bl-blur);
	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: light-dark( rgba( 54, 121, 204, 0.12 ), rgba( 54, 121, 204, 0.30 ) );
	color: light-dark( var( --color-base-0, #202122 ), #ffffff );
	border-color: var(--bl-ib-divider) !important;
}

.infobox.geography .infobox-header,
.infobox.vcard .infobox-header {
	background-color: light-dark( rgba( 54, 121, 204, 0.10 ), rgba( 60, 60, 60, 0.50 ) );
	color: light-dark( #3366cc, #ffffff );
	border-color: var(--bl-ib-divider) !important;
}

.infobox.geography th.infobox-label,
.infobox.geography td.infobox-data,
.infobox.vcard th.infobox-label,
.infobox.vcard td.infobox-data {
	background-color: transparent;
	color: var(--bl-text);
	border-color: var(--bl-ib-divider) !important;
}

.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;
}

.infobox.tornado-no-top-radius > tbody {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	overflow: hidden;
}

/* =====================================================================
 * 13. Infobox · 国家数据图表
 * ===================================================================== */

.infobox.ve-infobox-country .infobox-country-chart {
	background: var(--bl-glass) !important;
	backdrop-filter: var(--bl-blur) !important;
	-webkit-backdrop-filter: var(--bl-blur) !important;
	border: 1px solid var(--bl-border-strong) !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	margin: 6px 0 !important;
	box-shadow: 0 2px 12px var(--bl-shadow-color-sm) !important;
}

.infobox.ve-infobox-country .infobox-country-chart > div:first-child {
	background: light-dark( rgba( 54, 121, 204, 0.12 ), rgba( 54, 121, 204, 0.20 ) ) !important;
	color: light-dark( #3366cc, #8ab8ff ) !important;
	font-weight: bold !important;
	font-size: 0.85rem !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	padding: 4px 0 !important;
	border-bottom: 1px solid var(--bl-border) !important;
}

.infobox.ve-infobox-country .infobox-country-chart > table {
	background: transparent !important;
	border: none !important;
	margin: 4px 0 !important;
}

.infobox.ve-infobox-country .infobox-country-chart > table tr {
	background: transparent !important;
	border: none !important;
}

.infobox.ve-infobox-country .infobox-country-chart > table td {
	background: transparent;
	border: none !important;
	padding: 4px 6px !important;
	font-size: 0.9rem !important;
	color: var(--bl-text);
}

.infobox.ve-infobox-country .infobox-country-chart > table td:first-child {
	font-weight: 500 !important;
	white-space: nowrap !important;
	width: 4.2em !important;
}

.infobox.ve-infobox-country .infobox-country-chart > table td:nth-child(2) {
	text-align: right !important;
	width: 4.5em !important;
	font-variant-numeric: tabular-nums !important;
}

.infobox.ve-infobox-country .infobox-country-chart > table td:last-child > div {
	border-radius: 7px !important;
	height: 14px !important;
	overflow: hidden !important;
	background: light-dark( rgba( 128, 128, 128, 0.10 ), rgba( 255, 255, 255, 0.12 ) );
}

.infobox.ve-infobox-country .infobox-country-chart > table td:last-child > div > div {
	border-radius: 7px !important;
	height: 14px !important;
	min-width: 2px !important;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.25 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.10 ) !important;
	transition: width 0.3s ease !important;
}

/* =====================================================================
 * 14. 通知中心 (Echo)
 * ===================================================================== */

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
	animation: none !important;
	filter: none !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	overflow: visible !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
	background-color: var(--bl-glass) !important;
	backdrop-filter: var(--bl-blur) !important;
	-webkit-backdrop-filter: var(--bl-blur) !important;
	border: 1px solid var(--bl-border) !important;
	border-radius: 16px !important;
	box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
	position: relative !important;
	transition: none !important;
	will-change: opacity, transform;
	backface-visibility: hidden;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: -1px !important;
	border: 2px solid transparent !important;
	border-radius: 17px !important;
	background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
	-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
	-webkit-mask-clip: content-box, border-box !important;
	-webkit-mask-composite: source-out !important;
	mask-composite: subtract !important;
	mix-blend-mode: screen !important;
	z-index: 10 !important;
	pointer-events: none !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 16px !important;
	background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
	mix-blend-mode: soft-light !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-footer,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-clippableElement-clippable,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-notificationsListWidget,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .mw-echo-ui-placeholderItemWidget {
	background: transparent !important;
	background-color: transparent !important;
	border-color: var(--bl-border-soft) !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-body,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-clippableElement-clippable {
	overflow-y: auto !important;
	overflow-x: hidden !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-anchor { display: none !important; }

.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button {
	background-color: light-dark( rgba( 255, 255, 255, 0.30 ), rgba( 255, 255, 255, 0.10 ) ) !important;
	border: 1px solid var(--bl-border) !important;
	border-radius: 8px !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement-button:hover {
	background-color: light-dark( rgba( 255, 255, 255, 0.50 ), rgba( 255, 255, 255, 0.20 ) ) !important;
	border-color: var(--bl-border-strong) !important;
	box-shadow: 0 2px 8px var(--bl-shadow-color) !important;
}

.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-labelElement-label,
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-iconElement-icon {
	color: var(--bl-text) !important;
}

.mw-echo-ui-notificationItemWidget {
	background: transparent !important;
	transition: background-color 0.2s ease !important;
}

.mw-echo-ui-notificationItemWidget:hover { background-color: var(--bl-hover) !important; }

.mw-echo-ui-bundleNotificationItemWidget-group,
.mw-echo-ui-sortedListWidget,
.mw-echo-ui-sortedListWidget-group {
	background: transparent !important;
}

.mw-echo-ui-notificationItemWidget-bundled {
	background: transparent !important;
	border-bottom: 1px solid light-dark( rgba( 0, 0, 0, 0.06 ), rgba( 255, 255, 255, 0.06 ) ) !important;
	transition: background-color 0.2s ease !important;
}

.mw-echo-ui-notificationItemWidget-bundled:last-child { border-bottom: none !important; }
.mw-echo-ui-notificationItemWidget-bundled:hover { background-color: var(--bl-hover) !important; }

.mw-echo-ui-notificationItemWidget-content-message-header,
.mw-echo-ui-notificationItemWidget-content-message-header strong { color: var(--bl-text) !important; }

.mw-echo-ui-notificationItemWidget-content-actions-timestamp { color: var(--bl-text-muted) !important; }

.mw-echo-ui-actionMenuPopupWidget .oo-ui-iconElement-icon {
	filter: var( --bl-f-invert ) !important;
	opacity: 0.6 !important;
}

.mw-echo-ui-toggleReadCircleButtonWidget-circle {
	border-color: light-dark( rgba( 0, 0, 0, 0.20 ), rgba( 255, 255, 255, 0.30 ) ) !important;
}

.mw-echo-ui-notificationItemWidget-unread .mw-echo-ui-toggleReadCircleButtonWidget-circle {
	background-color: var(--bl-accent) !important;
	border-color: var(--bl-accent) !important;
}

/* =====================================================================
 * 15. 弹出预览 (Page Previews / Popups)
 * ===================================================================== */

.mwe-popups,
.mwe-popups.mwe-popups-fade-in-up,
.mwe-popups.mwe-popups-fade-in-down,
.mwe-popups.mwe-popups-fade-out-up,
.mwe-popups.mwe-popups-fade-out-down {
	animation: none !important;
	transition: none !important;
}

.mwe-popups::before,
.mwe-popups::after {
	animation: none !important;
	transition: none !important;
	display: none !important;
}

.mwe-popups {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	isolation: auto !important;
}

.mwe-popups .mwe-popups-container {
	overflow: hidden !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	position: relative !important;
	background-color: var(--bl-glass) !important;
	backdrop-filter: var(--bl-blur) !important;
	-webkit-backdrop-filter: var(--bl-blur) !important;
	background-image: none !important;
	border-radius: 12px !important;
	border: 1px solid var(--bl-border) !important;
	box-shadow: 0 8px 32px var(--bl-shadow-color) !important;
}

.mwe-popups .mwe-popups-container::before {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: -1px !important;
	border: 2px solid transparent !important;
	border-radius: 13px !important;
	background: radial-gradient( 180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-ring) 0%, var(--bl-glow-ring-2) 40%, transparent 80% ) border-box !important;
	-webkit-mask: linear-gradient( #fff 0 0 ) padding-box, linear-gradient( #fff 0 0 ) !important;
	-webkit-mask-clip: content-box, border-box !important;
	-webkit-mask-composite: source-out !important;
	mask-composite: subtract !important;
	mix-blend-mode: screen !important;
	z-index: 10 !important;
	pointer-events: none !important;
}

.mwe-popups .mwe-popups-container::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 12px !important;
	background: radial-gradient( 400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--bl-glow-fill) 0%, transparent 70% ) !important;
	mix-blend-mode: soft-light !important;
	z-index: 1 !important;
	pointer-events: none !important;
}

.mwe-popups .mwe-popups-extract,
.mwe-popups .mwe-popups-scroll {
	background: transparent !important;
	overflow: hidden !important;
}

.mwe-popups .mwe-popups-extract::after { display: none !important; }

.mwe-popups footer {
	background: light-dark( rgba( 255, 255, 255, 0.10 ), rgba( 0, 0, 0, 0.15 ) ) !important;
	border-top: 1px solid var(--bl-border-soft) !important;
}

.mwe-popups .mwe-popups-extract,
.mwe-popups .mwe-popups-title,
.mwe-popups footer a { color: var(--bl-text) !important; }

.mwe-popups-is-tall .mwe-popups-container,
.mwe-popups:not( .mwe-popups-no-image-pointer ) .mwe-popups-container { clip-path: none !important; }

.mwe-popups .mwe-popups-discreet { background: transparent !important; }
.mwe-popups .mwe-popups-thumbnail { border-radius: 12px 12px 0 0 !important; }

.mwe-popups.mwe-popups-type-generic .mwe-popups-container {
	background-color: var(--bl-glass) !important;
	backdrop-filter: var(--bl-blur) !important;
	-webkit-backdrop-filter: var(--bl-blur) !important;
}

/* =====================================================================
 * 16. 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-inner 变为玻璃面板；亮色保持透明（不引入模糊） */
.navbox-inner {
	background: var( --bl-navbox-surface ) !important;
	backdrop-filter: var( --bl-navbox-blur ) !important;
	-webkit-backdrop-filter: var( --bl-navbox-blur ) !important;
}

.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;
	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 选择器，覆盖上面的组选择器） */
#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;
	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);
	border-radius: 16px !important;
	box-shadow: none !important;
	padding: 4px !important;
	width: fit-content !important;
	background-image: none !important;
}

#citizen-page-aside-lastmod::before {
	content: "" !important;
	position: absolute;
	inset: -1px;
	border: 2.4px solid transparent;
	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;
}

/* =====================================================================
 * 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-dark-navbox-surface: rgba( 20, 20, 20, 0.55 );
	--bl-dark-navbox-blur:    blur( 14px ) saturate( 100% );

	/* —— 亮色侧的默认值 —— */
	--bl-f-icon:           invert( 0 ) brightness( 1 );
	--bl-f-invert:         none;
	--bl-f-chart:          none;
	--bl-home-opacity:     0.35;
	--bl-navbox-surface:   transparent;
	--bl-navbox-blur:      none;
}

/* 暗色开关：night / black */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-black {
	--bl-f-icon: var( --bl-dark-f-icon );
	--bl-f-invert: var( --bl-dark-f-invert );
	--bl-f-chart: var( --bl-dark-f-chart );
	--bl-home-opacity: var( --bl-dark-home-opacity );
	--bl-navbox-surface: var( --bl-dark-navbox-surface );
	--bl-navbox-blur: var( --bl-dark-navbox-blur );
}

/* 暗色开关：os + 系统暗色 */
@media ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os {
		--bl-f-icon: var( --bl-dark-f-icon );
		--bl-f-invert: var( --bl-dark-f-invert );
		--bl-f-chart: var( --bl-dark-f-chart );
		--bl-home-opacity: var( --bl-dark-home-opacity );
		--bl-navbox-surface: var( --bl-dark-navbox-surface );
		--bl-navbox-blur: var( --bl-dark-navbox-blur );
	}
}

/* —— 首页组件：暗色下需要单独修正的文字色 —— */
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-dark-text-dim ) !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-dark-text-bright ) !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-dark-text-dim ) !important;
		border: none !important;
	}

	html.skin-theme-clientpref-os .bl-navitem a:hover {
		background-color: var( --bl-dark-hover-15 ) !important;
		color: var( --bl-dark-text-bright ) !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,
.bl-box-body * { color: var(--bl-text); }

.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-card,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox {
	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;
	opacity: 1 !important;
	animation: citizen-fade-in 0.1s ease forwards !important;
}

/* 一次性关掉所有光效伪元素 */
html[class*="citizen-feature-performance-mode-clientpref-1"] :is(
	.citizen-menu__card, .citizen-toc-card, #mw-panel-toc, .citizen-command-palette,
	.infobox, .ambox, .voy-box, .aero-news-box, .bl-hero, #citizen-page-aside-lastmod,
	.oo-ui-menuSelectWidget, .mwe-popups-container, .oo-ui-popupWidget-popup,
	.page-Main_Page .bl-mainpage, .page-首页 .bl-mainpage
)::before,
html[class*="citizen-feature-performance-mode-clientpref-1"] :is(
	.citizen-menu__card, .citizen-toc-card, #mw-panel-toc, .citizen-command-palette,
	.infobox, .ambox, .voy-box, .aero-news-box, .bl-hero,
	.oo-ui-menuSelectWidget, .mwe-popups-container, .oo-ui-popupWidget-popup,
	.page-Main_Page .bl-mainpage, .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;
}

/* Infobox / 表格 / 弹窗 / 预览 / 盒子：统一换成不透明表面 */
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox tbody {
	background: var(--color-surface-1) !important;
}

html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-header,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-header {
	background-color: var(--bl-surface-2);
	color: var(--bl-text);
	border-top: 1px solid var(--bl-border) !important;
	border-bottom: 1px solid var(--bl-border) !important;
	backdrop-filter: none !important;
}

html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox .infobox-title {
	box-shadow: none !important;
	text-shadow: none !important;
	border: 1px solid var(--bl-border) !important;
	background-color: var(--bl-surface-2);
	color: var(--bl-text);
}

html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country {
	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"] .infobox.ve-infobox-country .infobox-above {
	text-shadow: none !important;
	box-shadow: none !important;
}

html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox.ve-infobox-country .infobox-country-chart {
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	background: var(--color-surface-2) !important;
	border: 1px solid var(--bl-border-strong) !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,
html[class*="citizen-feature-performance-mode-clientpref-1"] .infobox td.infobox-label {
	color: light-dark( var( --color-base-0, #202122 ), #cccccc ) !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-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-dark-wash: transparent;
		--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 );
	}
}
ETTW​（留言 | 贡献）

2026年10月6日 (二) 19:56的版本

ETTW（留言 | 贡献）
