MediaWiki:Citizen.css：修订间差异

2026年10月6日 (二) 23:48的版本

/* =====================================================================
 * 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–12. Infobox · 一体式卡片（2026-10-06）
 * 标题只有上沿圆角；正文保留原生表格结构，底部统一圆角。
 * 不再把 tbody 变成另一张 table，也不再叠加白色光圈。
 * 不使用 :has() / :is()；背景色继续由模板提供。
 * ===================================================================== */
:root {
    --bl-ib-radius: 16px;
    --bl-ib-outline-width: 3px;
    --bl-ib-surface: rgba(255,255,255,.78);
    --bl-ib-text: #202122;
    --bl-ib-muted: #54595d;
    --bl-ib-link: #285bb7;
    --bl-ib-border: rgba(70,90,110,.20);
    --bl-ib-divider: rgba(70,90,110,.11);
    --bl-ib-hairline: rgba(70,90,110,.11);
    --bl-ib-section: rgba(90,130,160,.07);
    --bl-ib-wash: rgba(0,0,0,0);
    --bl-ib-shadow: rgba(30,50,70,.10);
}
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-black {
    --bl-ib-surface: rgba(26,29,34,.92);
    --bl-ib-text: #eaedf2;
    --bl-ib-muted: #b5bec9;
    --bl-ib-link: #91bbff;
    --bl-ib-border: rgba(180,200,220,.23);
    --bl-ib-divider: rgba(190,210,230,.11);
    --bl-ib-hairline: rgba(190,210,230,.11);
    --bl-ib-section: rgba(190,210,230,.065);
    --bl-ib-wash: rgba(10,15,24,.70);
    --bl-ib-shadow: rgba(0,0,0,.30);
}
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os {
        --bl-ib-surface: rgba(26,29,34,.92);
        --bl-ib-text: #eaedf2;
        --bl-ib-muted: #b5bec9;
        --bl-ib-link: #91bbff;
        --bl-ib-border: rgba(180,200,220,.23);
        --bl-ib-divider: rgba(190,210,230,.11);
        --bl-ib-hairline: rgba(190,210,230,.11);
        --bl-ib-section: rgba(190,210,230,.065);
        --bl-ib-wash: rgba(10,15,24,.70);
        --bl-ib-shadow: rgba(0,0,0,.30);
    }
}

/* 优先级足以覆盖 Common.css 的地理、国家、夜间规则。 */
html body.skin-citizen table.infobox {
    display: table !important;
    position: relative !important;
    isolation: isolate;
    float: right !important;
    clear: right !important;
    width: 22em;
    max-width: 100%;
    margin: .4em 0 1.1em 1.25em !important;
    padding: 0 !important;
    box-sizing: border-box;
    border: 1px solid var(--bl-ib-border) !important;
    border-radius: var(--bl-ib-radius) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--bl-ib-surface) !important;
    color: var(--bl-ib-text) !important;
    box-shadow: 0 8px 24px var(--bl-ib-shadow) !important;
    backdrop-filter: var(--bl-blur);
    -webkit-backdrop-filter: var(--bl-blur);
    font-size: .925rem !important;
    line-height: 1.55;
    overflow: visible !important;
    z-index: auto !important;
}
html body.skin-citizen table.infobox > tbody {
    display: table-row-group !important;
    width: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: static !important;
}
html body.skin-citizen table.infobox > tbody > tr,
html body.skin-citizen table.infobox > tfoot > tr {
    background: transparent !important;
}
html body.skin-citizen table.infobox > tbody > tr > th,
html body.skin-citizen table.infobox > tbody > tr > td,
html body.skin-citizen table.infobox > tfoot > tr > th,
html body.skin-citizen table.infobox > tfoot > tr > td {
    padding: 9px 12px !important;
    line-height: 1.55 !important;
    vertical-align: top;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: transparent;
    overflow-wrap: break-word;
}
html body.skin-citizen table.infobox > tbody > tr:not(:last-child) > th,
html body.skin-citizen table.infobox > tbody > tr:not(:last-child) > td {
    border-bottom: 1px solid var(--bl-ib-divider) !important;
}
html body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]),
html body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]) {
    color: var(--bl-ib-text) !important;
}
html body.skin-citizen table.infobox .infobox-label {
    font-weight: 600;
    text-align: left;
    width: 34%;
}
html body.skin-citizen table.infobox .infobox-data {
    text-align: left;
}

/* caption 与第一行标题使用同样的尺寸与轮廓；没有下沿圆角或间隙。 */
html body.skin-citizen table.infobox > caption,
html body.skin-citizen table.infobox .infobox-above,
html body.skin-citizen table.infobox .infobox-title {
    margin: 0 !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bl-ib-divider) !important;
    border-radius: 15px 15px 0 0 !important;
    background-color: var(--bl-ib-section);
    background-image: linear-gradient(var(--bl-ib-wash), var(--bl-ib-wash)) !important;
    color: var(--bl-ib-text);
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    outline: none !important;
    overflow: visible !important;
}
html body.skin-citizen table.infobox > caption {
    display: table-caption !important;
    caption-side: top !important;
    width: auto !important;
    position: static !important;
}
html body.skin-citizen table.infobox th.infobox-above,
html body.skin-citizen table.infobox td.infobox-above,
html body.skin-citizen table.infobox th.infobox-title,
html body.skin-citizen table.infobox td.infobox-title {
    display: table-cell !important;
}
/* 模板里副标题常用 small / div，保留其内联字号。 */
html body.skin-citizen table.infobox > caption small,
html body.skin-citizen table.infobox .infobox-above small {
    font-size: .78em;
    font-weight: 500;
    line-height: 1.5;
}
html body.skin-citizen table.infobox > caption p {
    margin: .25em 0 0 !important;
}

/* 中间栏目为平直色带，不再做独立胶囊。默认文字与正文同色。 */
html body.skin-citizen table.infobox .infobox-header,
html body.skin-citizen table.infobox .infobox-subheader,
html body.skin-citizen table.infobox .infobox-player-header {
    padding: 8px 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: .925rem !important;
    font-weight: 650 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: center !important;
    color: var(--bl-ib-text) !important;
    background-color: var(--bl-ib-section);
    background-image: linear-gradient(var(--bl-ib-wash), var(--bl-ib-wash)) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bl-ib-divider) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* 只给真实外角圆角，不给一行里每个单元格画四个圆角。 */
html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > th:first-child,
html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > td:first-child {
    border-top-left-radius: 15px !important;
}
html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > th:last-child,
html body.skin-citizen table.infobox > tbody:first-child > tr:first-child > td:last-child {
    border-top-right-radius: 15px !important;
}
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > th:first-child,
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > td:first-child,
html body.skin-citizen table.infobox > tfoot:last-child > tr:last-child > td:first-child {
    border-bottom-left-radius: 15px !important;
}
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > th:last-child,
html body.skin-citizen table.infobox > tbody:last-child > tr:last-child > td:last-child,
html body.skin-citizen table.infobox > tfoot:last-child > tr:last-child > td:last-child {
    border-bottom-right-radius: 15px !important;
}
html body.skin-citizen table.infobox > caption + tbody > tr:first-child > th,
html body.skin-citizen table.infobox > caption + tbody > tr:first-child > td {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}
html body.skin-citizen table.infobox .infobox-image {
    text-align: center;
    padding: 12px !important;
}
html body.skin-citizen table.infobox img {
    max-width: 100%;
    height: auto;
}
html body.skin-citizen table.infobox .mw-file-description img {
    background: transparent !important;
}

/* 关闭旧白色光圈与覆盖在内容上的发光层。 */
html body.skin-citizen table.infobox::before,
html body.skin-citizen table.infobox::after {
    display: none !important;
    content: none !important;
}
/* 继承 caption 的实心主题色画一圈外框；暗色时继承相同的压暗层。
   caption 保持 static，使伪元素以整个 table 为定位参照。
   仅 caption 提供颜色的模板自动同色；第一行 th 标题使用中性外框。 */
html body.skin-citizen table.infobox > caption[style*="background"]:not([style*="gradient"]):not([style*="url"]):not([style*="transparent"])::before {
    content: "";
    position: absolute;
    inset: -3px;
    padding: var(--bl-ib-outline-width);
    box-sizing: border-box;
    border: 0;
    border-radius: 19px;
    background-color: inherit;
    background-image: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

/* 性能模式仅移除材质效果，布局和配色不另写一套。 */
html[class*="citizen-feature-performance-mode-clientpref-1"] body.skin-citizen table.infobox {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    background-color: var(--bl-ib-surface) !important;
}
#map-ctx-1778649814 {
    border-radius: 10px !important;
    overflow: hidden !important;
}
@media screen and (max-width: 640px) {
    html body.skin-citizen table.infobox {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 1em 0 1.25em !important;
    }
}

html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption,
html.skin-theme-clientpref-night body.skin-citizen table.infobox > caption *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption,
html.skin-theme-clientpref-black body.skin-citizen table.infobox > caption *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-above,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-above *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-above,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-above *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-title,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-title *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-title,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-title *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-header,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-header *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-header,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-header *:not(a),
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-subheader,
html.skin-theme-clientpref-night body.skin-citizen table.infobox .infobox-subheader *:not(a),
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-subheader,
html.skin-theme-clientpref-black body.skin-citizen table.infobox .infobox-subheader *:not(a) {
    color: var(--bl-ib-text) !important;
}
html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]) { color: var(--bl-ib-text) !important; }
html.skin-theme-clientpref-night body.skin-citizen table.infobox a:not(.new),
html.skin-theme-clientpref-black body.skin-citizen table.infobox a:not(.new) { color: var(--bl-ib-link) !important; }

@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption,
html.skin-theme-clientpref-os body.skin-citizen table.infobox > caption *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-above,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-above *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-title,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-title *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-header,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-header *:not(a),
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-subheader,
html.skin-theme-clientpref-os body.skin-citizen table.infobox .infobox-subheader *:not(a) {
    color: var(--bl-ib-text) !important;
}
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > td:not([style*="background"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > th:not([style*="background"]) { color: var(--bl-ib-text) !important; }
html.skin-theme-clientpref-os body.skin-citizen table.infobox a:not(.new) { color: var(--bl-ib-link) !important; }
}

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

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


html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > td[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-night body.skin-citizen table.infobox > tbody > tr > th[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > td[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-black body.skin-citizen table.infobox > tbody > tr > th[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
    background-image: linear-gradient(var(--bl-ib-wash),var(--bl-ib-wash)) !important;
    color: var(--bl-ib-text) !important;
}

@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > td[style*="background"]:not([style*="gradient"]):not([style*="url"]),
html.skin-theme-clientpref-os body.skin-citizen table.infobox > tbody > tr > th[style*="background"]:not([style*="gradient"]):not([style*="url"]) {
    background-image: linear-gradient(var(--bl-ib-wash),var(--bl-ib-wash)) !important;
    color: var(--bl-ib-text) !important;
}
}
KK​（留言 | 贡献）

2026年10月6日 (二) 23:48的版本

KK（留言 | 贡献）
