MediaWiki:Citizen.css：修订间差异

/* ==========================================================================
   Kuke Wiki 主题 — 参考 kuke.ink 官网视觉语言
   天蓝品牌色 / slate 冷灰中性 / 16px 圆角 / 柔和扩散阴影 / 毛玻璃
   ========================================================================== */

/* --- 1. 字体 -------------------------------------------------------------- */

:root {
	--font-family-base: Inter, system-ui, -apple-system, "Segoe UI",
		"Noto Sans SC", "Microsoft YaHei", sans-serif;
	--font-family-heading: var( --font-family-base );
	--font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco,
		Consolas, "Liberation Mono", "Courier New", monospace;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- 2. 配色令牌 ---------------------------------------------------------- */

:root,
.skin-theme-clientpref-day {
	/* Citizen 的主色管线（oklch + hsl 双写） -> sky-600 #0284c7 */
	--color-progressive-oklch__l: 58%;
	--color-progressive-oklch__c: 0.135;
	--color-progressive-oklch__h: 236;
	--color-progressive-hsl__h: 201;
	--color-progressive-hsl__s: 96%;
	--color-progressive-hsl__l: 39%;

	/* slate 冷灰中性色 */
	--color-base: #0f172b;
	--color-emphasized: #020618;
	--color-subtle: #45556c;
	--color-subtle--hover: #0f172b;

	--color-surface-0: #f8fafc;
	--color-surface-1: #ffffff;
	--color-surface-2: #f1f5f9;
	--color-surface-3: #e2e8f0;
	--color-surface-4: #cbd5e1;

	--border-color-base: rgb( 226 232 240 / 0.6 );
	--border-color-subtle: rgb( 226 232 240 / 0.9 );
	--border-color-interactive: #cbd5e1;

	/* 私有令牌 */
	--kuke-brand: #0ea5e9;
	--kuke-brand-hover: #38bdf8;
	--kuke-brand-strong: #0284c7;
	--kuke-brand-light: #7dd3fc;
	--kuke-brand-pale: #e0f2fe;
	--kuke-card-bg: #ffffff;
	--kuke-card-border: rgb( 226 232 240 / 0.6 );
	--kuke-card-border-hover: rgb( 14 165 233 / 0.3 );
	--kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.1 ),
		0 4px 6px -4px rgb( 0 0 0 / 0.1 );
	--kuke-shadow-glow: 0 25px 50px -12px rgb( 14 165 233 / 0.2 );
	--kuke-shadow-brand: 0 6px 16px rgb( 2 132 199 / 0.28 );
	--kuke-glass: rgb( 255 255 255 / 0.94 );
	--kuke-glass-border: rgb( 226 232 240 / 0.5 );

	/* 毛玻璃加厚：皮肤默认 0.9 + blur( 8px )，正文透出来太明显 */
	--opacity-glass: 0.96;
	--backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );
	--kuke-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
	--kuke-overlay: linear-gradient(
		to top,
		rgb( 15 23 43 / 0.9 ),
		rgb( 15 23 43 / 0.2 ),
		transparent
	);
	--kuke-glow-a: rgb( 56 189 248 / 0.2 );
	--kuke-glow-b: rgb( 192 132 252 / 0.2 );
	--kuke-notice-bg: #f0f9ff;
	--kuke-warn: #f59e0b;
	--kuke-warn-bg: #fffbeb;
}

.skin-theme-clientpref-night,
.skin-theme-clientpref-black {
	--color-progressive-oklch__l: 74%;
	--color-progressive-oklch__c: 0.13;
	--color-progressive-hsl__l: 60%;

	--color-base: #e2e8f0;
	--color-emphasized: #ffffff;
	--color-subtle: #90a1b9;
	--color-subtle--hover: #cbd5e1;

	--color-surface-0: #020618;
	--color-surface-1: #0f172b;
	--color-surface-2: #1d293d;
	--color-surface-3: #314158;
	--color-surface-4: #45556c;

	--border-color-base: rgb( 49 65 88 / 0.5 );
	--border-color-subtle: rgb( 49 65 88 / 0.8 );
	--border-color-interactive: #45556c;

	--kuke-brand: #38bdf8;
	--kuke-brand-hover: #7dd3fc;
	--kuke-brand-strong: #0ea5e9;
	--kuke-brand-light: #7dd3fc;
	--kuke-brand-pale: #075985;
	--kuke-card-bg: rgb( 29 41 61 / 0.5 );
	--kuke-card-border: rgb( 49 65 88 / 0.5 );
	--kuke-card-border-hover: rgb( 56 189 248 / 0.35 );
	--kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),
		0 4px 6px -4px rgb( 0 0 0 / 0.3 );
	--kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );
	--kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );
	--kuke-glass: rgb( 15 23 43 / 0.95 );
	--kuke-glass-border: rgb( 49 65 88 / 0.5 );
	--kuke-glow-a: rgb( 2 132 199 / 0.12 );
	--kuke-glow-b: rgb( 147 51 234 / 0.12 );
	--kuke-notice-bg: rgb( 56 189 248 / 0.08 );
	--kuke-warn: #fbbf24;
	--kuke-warn-bg: rgb( 251 191 36 / 0.1 );

	--opacity-glass: 0.97;
	--backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );
}

@media ( prefers-color-scheme: dark ) {
	.skin-theme-clientpref-os {
		--color-progressive-oklch__l: 74%;
		--color-progressive-oklch__c: 0.13;
		--color-progressive-hsl__l: 60%;

		--color-base: #e2e8f0;
		--color-emphasized: #ffffff;
		--color-subtle: #90a1b9;
		--color-subtle--hover: #cbd5e1;

		--color-surface-0: #020618;
		--color-surface-1: #0f172b;
		--color-surface-2: #1d293d;
		--color-surface-3: #314158;
		--color-surface-4: #45556c;

		--border-color-base: rgb( 49 65 88 / 0.5 );
		--border-color-subtle: rgb( 49 65 88 / 0.8 );
		--border-color-interactive: #45556c;

		--kuke-brand: #38bdf8;
		--kuke-brand-hover: #7dd3fc;
		--kuke-brand-strong: #0ea5e9;
		--kuke-brand-light: #7dd3fc;
		--kuke-brand-pale: #075985;
		--kuke-card-bg: rgb( 29 41 61 / 0.5 );
		--kuke-card-border: rgb( 49 65 88 / 0.5 );
		--kuke-card-border-hover: rgb( 56 189 248 / 0.35 );
		--kuke-shadow: 0 10px 15px -3px rgb( 0 0 0 / 0.3 ),
			0 4px 6px -4px rgb( 0 0 0 / 0.3 );
		--kuke-shadow-glow: 0 25px 50px -12px rgb( 56 189 248 / 0.25 );
		--kuke-shadow-brand: 0 6px 16px rgb( 56 189 248 / 0.24 );
		--kuke-glass: rgb( 15 23 43 / 0.95 );
		--kuke-glass-border: rgb( 49 65 88 / 0.5 );
		--kuke-glow-a: rgb( 2 132 199 / 0.12 );
		--kuke-glow-b: rgb( 147 51 234 / 0.12 );
		--kuke-notice-bg: rgb( 56 189 248 / 0.08 );
		--kuke-warn: #fbbf24;
		--kuke-warn-bg: rgb( 251 191 36 / 0.1 );

		--opacity-glass: 0.97;
		--backdrop-filter-frosted-glass: blur( 32px ) saturate( 180% );
	}
}

/* --- 3. 圆角与缓动 -------------------------------------------------------- */

:root {
	--border-radius-base: 12px;
	--border-radius-medium: 16px;
	--border-radius-large: 24px;
	--border-radius-pill: 9999px;
	--border-radius-sharp: 8px;

	--transition-timing-function-ease: cubic-bezier( 0.4, 0, 0.2, 1 );
	--transition-timing-function-ease-out: cubic-bezier( 0.4, 0, 0.2, 1 );
	--transition-duration-base: 0.3s;
}

/* --- 4. 背景氛围光斑 ------------------------------------------------------ */

body::before,
body::after {
	content: "";
	position: fixed;
	z-index: 0;
	width: 40%;
	height: 40%;
	border-radius: 9999px;
	filter: blur( 100px );
	pointer-events: none;
}

body::before {
	top: -10%;
	left: -10%;
	background-color: var( --kuke-glow-a );
}

body::after {
	right: -10%;
	bottom: -10%;
	background-color: var( --kuke-glow-b );
}

/* 只抬升正文容器，让它盖住上面的光斑。
   顶栏不要在这里覆盖：皮肤原生是 position:fixed + z-index:200，
   一旦降成 z-index:1 就会形成低层叠上下文，把下拉菜单困在里面被正文盖住。 */
.citizen-body-container {
	position: relative;
	z-index: 1;
}

/* --- 5. 顶栏：毛玻璃 ------------------------------------------------------ */

.citizen-header {
	background-color: var( --kuke-glass );
	-webkit-backdrop-filter: blur( 32px ) saturate( 180% );
	backdrop-filter: blur( 32px ) saturate( 180% );
}

.citizen-header-position-top .citizen-header,
.citizen-header-position-mobile-top .citizen-header {
	border-block-end: 1px solid var( --kuke-glass-border );
	border-inline-end: 0;
}

.citizen-header-position-left .citizen-header {
	border-inline-end: 1px solid var( --kuke-glass-border );
}

.citizen-sticky-header,
.citizen-sticky-header-background {
	background-color: var( --kuke-glass );
	border-block-end: 1px solid var( --kuke-glass-border );
	-webkit-backdrop-filter: blur( 32px ) saturate( 180% );
	backdrop-filter: blur( 32px ) saturate( 180% );
}

.citizen-drawer__card,
.citizen-menu__card,
.citizen-search__card,
.citizen-dropdown__content {
	border: 1px solid var( --kuke-card-border );
	border-radius: 16px;
	box-shadow: var( --kuke-shadow );
}

.citizen-header__item a:hover,
.citizen-menu__content-list a:hover {
	border-radius: 12px;
}

/* --- 6. 排版 -------------------------------------------------------------- */

#firstHeading {
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.mw-body h2 {
	padding-bottom: 0.35em;
	border-bottom: 1px solid var( --border-color-subtle );
	font-weight: 700;
	letter-spacing: -0.015em;
}

.mw-body h3,
.mw-body h4 {
	font-weight: 700;
	letter-spacing: -0.01em;
}

.mw-parser-output {
	line-height: 1.7;
}

/* --- 7. 链接 -------------------------------------------------------------- */

.mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ) {
	text-decoration: none;
	transition: color 0.2s var( --kuke-ease );
}

.mw-parser-output a:not( .mp-portals a ):not( .mp-icons a ):not( .mp-actions a ):hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
}

::selection {
	background-color: rgb( 14 165 233 / 0.3 );
}

/* --- 8. 按钮 -------------------------------------------------------------- */

.cdx-button,
.mw-ui-button,
.oo-ui-buttonElement-button {
	border-radius: 12px;
	font-weight: 600;
	transition: background-color 0.3s var( --kuke-ease ),
		box-shadow 0.3s var( --kuke-ease ), transform 0.3s var( --kuke-ease );
}

.cdx-button--action-progressive.cdx-button--weight-primary,
.mw-ui-button.mw-ui-progressive {
	background-color: var( --kuke-brand-strong );
	border-color: var( --kuke-brand-strong );
	box-shadow: 0 10px 30px -10px rgb( 14 165 233 / 0.5 );
}

.cdx-button--action-progressive.cdx-button--weight-primary:hover,
.mw-ui-button.mw-ui-progressive:hover {
	background-color: var( --kuke-brand );
	border-color: var( --kuke-brand );
}

/* --- 9. 搜索框 ------------------------------------------------------------ */

.citizen-search-box,
.citizen-search__form,
.citizen-typeahead {
	border-radius: 12px;
}

.citizen-search__form:focus-within {
	border-color: var( --kuke-brand );
	box-shadow: 0 0 0 4px rgb( 14 165 233 / 0.2 );
}

/* --- 10. 表格 ------------------------------------------------------------- */

.wikitable {
	border: 1px solid var( --kuke-card-border );
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: var( --kuke-shadow );
}

.wikitable > * > tr > th,
.wikitable > * > tr > td {
	border: 0;
	border-bottom: 1px solid var( --border-color-base );
	padding: 0.6em 0.9em;
}

.wikitable > * > tr:last-child > th,
.wikitable > * > tr:last-child > td {
	border-bottom: 0;
}

.wikitable > * > tr > th {
	background-color: var( --color-surface-2 );
	color: var( --color-emphasized );
	font-weight: 700;
}

.wikitable > tbody > tr:hover > td {
	background-color: var( --color-surface-2 );
}

/* --- 11. 代码 ------------------------------------------------------------- */

code,
kbd,
samp,
tt {
	border: 1px solid var( --kuke-card-border );
	border-radius: 8px;
	background-color: var( --color-surface-2 );
	font-family: var( --font-family-monospace );
	font-size: 0.875em;
}

pre,
.mw-code {
	border: 1px solid var( --kuke-card-border );
	border-radius: 16px;
	background-color: var( --color-surface-2 );
	padding: 1em 1.2em;
	box-shadow: var( --kuke-shadow );
}

/* --- 12. 图片 ------------------------------------------------------------- */

.thumbinner,
.mw-halign-left,
.mw-halign-right {
	border-radius: 16px;
}

.thumbinner {
	border: 1px solid var( --kuke-card-border );
	background-color: var( --kuke-card-bg );
	padding: 8px;
	box-shadow: var( --kuke-shadow );
	transition: box-shadow 0.3s var( --kuke-ease ),
		border-color 0.3s var( --kuke-ease );
}

.thumbinner:hover {
	border-color: var( --kuke-card-border-hover );
	box-shadow: var( --kuke-shadow-glow );
}

.thumbimage,
.mw-file-element {
	border: 0;
	border-radius: 12px;
}

/* --- 13. 消息框 ----------------------------------------------------------- */

.cdx-message,
.mw-message-box,
.mw-warning,
.catlinks {
	border-radius: 16px;
	border: 1px solid var( --kuke-card-border );
}

.catlinks {
	background-color: var( --kuke-card-bg );
	box-shadow: var( --kuke-shadow );
}

.mw-normal-catlinks a {
	display: inline-block;
	padding: 2px 12px;
	border-radius: 9999px;
	background-color: var( --color-surface-2 );
	font-size: 0.875em;
	transition: background-color 0.2s var( --kuke-ease ),
		color 0.2s var( --kuke-ease );
}

.mw-normal-catlinks a:hover {
	background-color: var( --kuke-brand-strong );
	color: #fff;
	text-decoration: none;
}

/* --- 14. 滚动条 ----------------------------------------------------------- */

* {
	scrollbar-width: thin;
	scrollbar-color: var( --color-surface-4 ) transparent;
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background-color: var( --color-surface-2 );
}

::-webkit-scrollbar-thumb {
	border-radius: 9999px;
	background-color: var( --color-surface-4 );
}

::-webkit-scrollbar-thumb:hover {
	background-color: var( --color-subtle );
}

/* --- 15. 焦点环 ----------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var( --kuke-brand );
	outline-offset: 2px;
	border-radius: 8px;
}

/* --- 16. 文档组件（由 md 导入管线生成） ----------------------------------- */

.kw-figure {
	margin: 1.4em auto;
	text-align: center;
}

.kw-figure img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: var( --kuke-shadow );
}

.kw-figcaption {
	display: block;
	margin-top: 0.6em;
	color: var( --color-subtle );
	font-size: 0.875em;
	line-height: 1.5;
}

.kw-notice {
	margin: 1.2em 0;
	padding: 0.85em 1.1em;
	border: 1px solid var( --kuke-card-border );
	border-left: 4px solid var( --kuke-brand );
	border-radius: 12px;
	background-color: var( --kuke-notice-bg );
	color: var( --color-base );
	line-height: 1.7;
}

.kw-notice > :first-child {
	margin-top: 0;
}

.kw-notice > :last-child {
	margin-bottom: 0;
}

.kw-notice--warn {
	border-left-color: var( --kuke-warn );
	background-color: var( --kuke-warn-bg );
}

.kw-faq {
	margin: 1em 0;
	padding: 0.9em 1.2em;
	border: 1px solid var( --kuke-card-border );
	border-radius: 14px;
	background-color: var( --kuke-card-bg );
}

.kw-faq[ open ] {
	box-shadow: var( --kuke-shadow );
}

.kw-faq__q {
	color: var( --color-emphasized );
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.kw-faq__q::-webkit-details-marker {
	display: none;
}

.kw-faq__q::before {
	content: '';
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.7em;
	border-right: 2px solid var( --kuke-brand );
	border-bottom: 2px solid var( --kuke-brand );
	transform: rotate( -45deg ) translateY( -0.1em );
	transition: transform var( --transition-duration-medium ) var( --transition-timing-function-ease );
}

.kw-faq[ open ] > .kw-faq__q::before {
	transform: rotate( 45deg ) translateY( -0.15em );
}

.kw-faq[ open ] > .kw-faq__q {
	margin-bottom: 0.7em;
	padding-bottom: 0.7em;
	border-bottom: 1px solid var( --border-color-base );
}

/* --- 17. 减少动效 --------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   Kuke Wiki — 首页布局层
   排版骨架照搬 zh.minecraft.wiki 首页（MediaWiki Vector + TemplateStyles）：
     .mp-wrapper       通栏纵向流，gap 6px
     .mp-inline-sections  grid 2fr 1fr，左栏跨两行（"left site" / "left right"）
     .mp-section       统一 padding 12px 的内容盒
     .mp-icon-wrapper  flex-wrap 图标格子墙
   紧凑度（12px padding / 6px gap / 无大圆角）沿用原站；
   配色、图标、字体仍是 KukeMC 天蓝体系（--kuke-* 令牌定义于主题层）。
   ========================================================================== */

/* 首页取消正文最大宽度限制。
   Citizen 用 --width-layout（默认 1080px）限制 .citizen-body-container 的
   栅格宽度，首页是网格布局不受行长约束，这里放宽到接近视口宽度。 */
.page-首页,
.page-Main_Page {
	--width-layout: 1560px;
}

.page-首页 .mw-parser-output,
.page-Main_Page .mw-parser-output {
	max-width: none;
}

.page-首页 .mw-parser-output *,
.page-Main_Page .mw-parser-output * {
	box-sizing: border-box;
}

/* 首页隐藏 Citizen 自带的页面 chrome：
   - .citizen-page-header  标题「首页」+ 来自Kuke Wiki + 分享/语言/编辑/历史操作条
   - .citizen-page-footer  分类链接 + 「最后修改时间」
   - #citizen-page-header-sticky-sentinel  隐藏后 setupObservers.js 读到
     display:none，会跳过 StickyHeader 初始化，避免首页滚动时冒出空标题条
   首页是自带横幅的门户页，这些元信息只会干扰版面。 */
.page-首页 .citizen-page-header,
.page-Main_Page .citizen-page-header,
.page-首页 .citizen-page-footer,
.page-Main_Page .citizen-page-footer,
.page-首页 #citizen-page-header-sticky-sentinel,
.page-Main_Page #citizen-page-header-sticky-sentinel,
.page-首页 .printfooter,
.page-Main_Page .printfooter {
	display: none;
}

/* header 被移除后正文顶部不再有它撑出的间距，补回来 */
.page-首页 .citizen-body-container,
.page-Main_Page .citizen-body-container {
	padding-block-start: var( --space-md, 1rem );
}

/* MediaWiki 的 Remex 会把 wikitext 里的行内元素成串包进 <p>，这会在
   flex / grid 容器里多出一层匿名盒，把并排的格子压成一行。
   display:contents 让 <p> 在布局树中消失，子元素直接成为容器项。
   凡是「直接子元素需要参与 flex/grid 布局」的容器都要列在这里。 */
.mp-wrapper > p,
.mp-inline-sections > p,
.mp-left > p,
.mp-right > p,
.mp-banner > p,
.mp-banner-content > p,
.mp-portal-wrapper > p,
.mp-highlight-wrapper > p,
.mp-icon-wrapper > p,
.mp-platform-wrapper > p,
.mp-button-wrapper > p,
.mp-category-wrapper > p,
.mp-social-wrapper > p,
.mp-stat-wrapper > p,
.mp-community-wrapper > p {
	display: contents;
	margin: 0;
}

/* --------------------------------------------------------------------------
   0. 首页令牌
   -------------------------------------------------------------------------- */

.mp-wrapper {
	--mp-gap: 6px;
	--mp-pad: 12px;
	--mp-radius: 8px;
	--mp-border: 1px solid var( --kuke-card-border, #e2e8f0 );
	--mp-bg: var( --kuke-card-bg, #fff );
	--mp-bg-soft: #f8fafc;
	--mp-bg-tint: var( --kuke-brand-pale, #e0f2fe );
	--mp-brand: var( --kuke-brand-strong, #0284c7 );
	--mp-heading: var( --color-emphasized, #0f172a );
	--mp-muted: var( --color-subtle, #54595d );
	--mp-banner-bg: #0b2545;
	--mp-shadow-hover: 0 4px 14px rgb( 2 132 199 / 0.13 );
	--mp-on-brand: #fff;
	--mp-new: #d73333;
	--icon-base-width: 84px;
	--icon-max-width: 128px;

	display: flex;
	flex-wrap: wrap;
	width: 100%;
	gap: var( --mp-gap );
	margin-block-start: 0.25rem;
}

.mp-wrapper > .mp-section,
.mp-wrapper > .mp-portal-wrapper {
	width: 100%;
}

/* --------------------------------------------------------------------------
   1. 通用区块盒 .mp-section
   -------------------------------------------------------------------------- */

.mp-section {
	padding: var( --mp-pad );
	border: var( --mp-border );
	border-radius: var( --mp-radius );
	background-color: var( --mp-bg );
	min-width: 0;
}

.mp-section-title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding-block-end: 8px;
	border-block-end: var( --mp-border );
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --mp-heading );
}

.mp-section-title .mp-i {
	flex: none;
	width: 18px;
	height: 18px;
	background-color: var( --mp-brand );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mp-section-title .mp-more {
	margin-inline-start: auto;
	font-size: 0.75rem;
	font-weight: 500;
	color: var( --mp-muted );
	white-space: nowrap;
}

.mp-section-text {
	margin: 0 0 8px;
	font-size: 0.875rem;
	line-height: 1.65;
	color: var( --mp-muted );
}

.mp-section-text:last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   2. 顶部通栏横幅 .mp-banner（对应原站十五周年横幅）
   -------------------------------------------------------------------------- */

.mp-banner {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0;
	overflow: hidden;
	border-color: transparent;
}

.mp-banner-img {
	flex: 1 1 340px;
	min-height: 190px;
	background-color: var( --mp-banner-bg, #0b2545 );
	background-image:
		linear-gradient( to top, rgb( 2 24 46 / 0.45 ), rgb( 0 0 0 / 0.05 ) ),
		url( "https://m.ccw.site/gandi_application/user_assets/e2978a6d51d9f4f7448569637310f02c.png" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.mp-banner-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	flex: 1 1 420px;
	padding: 18px 20px;
}

.mp-banner-eyebrow {
	display: inline-flex;
	align-self: flex-start;
	padding: 3px 9px;
	border-radius: 999px;
	background-color: var( --mp-bg-tint );
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var( --mp-brand );
}

.mp-banner-title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.25;
	color: var( --mp-heading );
}

.mp-banner-desc {
	margin: 0;
	max-width: 62ch;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var( --mp-muted );
}

/* --------------------------------------------------------------------------
   3. 通栏 tab 排 .mp-portal-wrapper（对应原站 6 个游戏门户按钮）
   -------------------------------------------------------------------------- */

.mp-portal-wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 1px 0;
	gap: 0;
}

.mp-portal-wrapper .mp-portal {
	flex: 1 1 0;
	min-width: max-content;
	margin-inline-start: -1px;
}

.mp-portal-wrapper .mp-portal:first-child {
	margin-inline-start: 0;
}

.mp-portal > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 14px;
	border: var( --mp-border );
	background-color: var( --mp-bg );
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var( --mp-heading );
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.mp-portal:first-child > a {
	border-start-start-radius: var( --mp-radius );
	border-end-start-radius: var( --mp-radius );
}

.mp-portal:last-child > a {
	border-start-end-radius: var( --mp-radius );
	border-end-end-radius: var( --mp-radius );
}

.mp-portal > a:hover {
	z-index: 1;
	position: relative;
	border-color: var( --mp-brand );
	background-color: var( --mp-bg-tint );
	color: var( --mp-brand );
}

.mp-portal > a .mp-i {
	flex: none;
	width: 16px;
	height: 16px;
	background-color: currentcolor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --------------------------------------------------------------------------
   4. 主网格 .mp-inline-sections
      窄屏：单列 site → left → right
      宽屏：grid-template-areas "left site" / "left right"，左栏跨两行
   -------------------------------------------------------------------------- */

.mp-inline-sections {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas:
		'site'
		'left'
		'right';
	gap: var( --mp-gap );
	width: 100%;
}

.mp-site {
	grid-area: site;
}

.mp-left {
	grid-area: left;
}

.mp-right {
	grid-area: right;
}

.mp-left,
.mp-right {
	display: flex;
	flex-direction: column;
	gap: var( --mp-gap );
	min-width: 0;
}

/* 原站规则：右栏最后一个区块吃掉剩余高度，让两栏底边齐平 */
.mp-right > :last-child {
	flex: 1;
}

@media ( min-width: 1000px ) {
	.mp-inline-sections {
		grid-template-columns: 2fr 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			'left site'
			'left right';
	}
}

/* 右上角欢迎块 */
.mp-site-title {
	margin: 0 0 6px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var( --mp-heading );
}

.mp-site-text {
	margin: 0 0 10px;
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var( --mp-muted );
}

.mp-social-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mp-social-wrapper > * {
	flex: 1 1 0;
	min-width: max-content;
}

.mp-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 10px;
	border: var( --mp-border );
	border-radius: 6px;
	background-color: var( --mp-bg-soft );
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
	color: var( --mp-heading );
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

a:hover .mp-social {
	border-color: var( --mp-brand );
	background-color: var( --mp-bg-tint );
	color: var( --mp-brand );
}

.mp-social .mp-i {
	flex: none;
	width: 14px;
	height: 14px;
	background-color: currentcolor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --------------------------------------------------------------------------
   5. 左栏顶部两张大卡 .mp-highlight-wrapper
   -------------------------------------------------------------------------- */

.mp-highlight-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mp-highlight-wrapper > * {
	flex: 1 1 0;
	min-width: 300px;
}

.mp-highlight {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 14px 16px;
	border: var( --mp-border );
	border-radius: var( --mp-radius );
	background-color: var( --mp-bg );
	background-image: linear-gradient(
		135deg,
		var( --mp-bg-tint ) 0%,
		transparent 62%
	);
	transition: border-color 0.15s, box-shadow 0.15s;
}

a:hover .mp-highlight {
	border-color: var( --mp-brand );
	box-shadow: var( --mp-shadow-hover, 0 4px 14px rgb( 2 132 199 / 0.13 ) );
}

.mp-highlight-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1rem;
	font-weight: 700;
	color: var( --mp-heading );
}

.mp-highlight-head .mp-i {
	flex: none;
	width: 20px;
	height: 20px;
	background-color: var( --mp-brand );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mp-highlight-desc {
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var( --mp-muted );
}

.mp-highlight-cta {
	margin-block-start: auto;
	font-size: 0.75rem;
	font-weight: 600;
	color: var( --mp-brand );
}

/* --------------------------------------------------------------------------
   6. 图标格子墙 .mp-icon-wrapper（对应原站 16 格主图标）
   -------------------------------------------------------------------------- */

.mp-icon-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: auto;
}

.mp-icon-wrapper > * {
	flex: 1 auto;
	width: var( --icon-base-width );
	max-width: var( --icon-max-width );
}

.mp-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	height: 100%;
	padding: 10px 4px 8px;
	border: 1px solid transparent;
	border-radius: 6px;
	text-align: center;
	transition: background-color 0.15s, border-color 0.15s;
}

a:hover .mp-icon {
	border-color: var( --mp-brand );
	background-color: var( --mp-bg-tint );
}

.mp-icon .mp-i {
	flex: none;
	width: 30px;
	height: 30px;
	background-color: var( --mp-brand );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mp-icon-link {
	flex: 1;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.35;
	color: var( --mp-heading );
}

@media ( max-width: 720px ) {
	.mp-wrapper {
		--icon-base-width: 68px;
		--icon-max-width: 96px;
	}

	.mp-icon .mp-i {
		width: 24px;
		height: 24px;
	}
}

/* --------------------------------------------------------------------------
   7. 分类计数排 .mp-platform-wrapper（对应原站 12 个平台版本号）
   -------------------------------------------------------------------------- */

.mp-platform-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 5px;
}

.mp-platform-wrapper > * {
	flex: 1 1 210px;
	min-width: 210px;
}

.mp-platform {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	padding: 6px 10px;
	border-radius: 5px;
	background-color: var( --mp-bg-soft );
	font-size: 0.8125rem;
	transition: background-color 0.15s;
}

a:hover .mp-platform {
	background-color: var( --mp-bg-tint );
}

.mp-platform-name {
	font-weight: 600;
	color: var( --mp-heading );
}

.mp-platform-ver {
	margin-inline-start: auto;
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var( --mp-brand );
}

/* --------------------------------------------------------------------------
   8. 行内按钮组 .mp-button-wrapper（对应原站「深入了解 / 新手手册」）
   -------------------------------------------------------------------------- */

.mp-button-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 10px;
}

.mp-button-wrapper > * {
	flex: 1 0 0;
	min-width: max-content;
}

.mp-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 9px 14px;
	border: var( --mp-border );
	border-radius: 6px;
	background-color: var( --mp-bg-soft );
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	color: var( --mp-heading );
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.mp-button--primary {
	border-color: var( --mp-brand );
	background-color: var( --mp-brand );
	color: var( --mp-on-brand, #fff );
}

a:hover .mp-button {
	border-color: var( --mp-brand );
	background-color: var( --mp-bg-tint );
	color: var( --mp-brand );
}

a:hover .mp-button--primary {
	background-color: var( --kuke-brand, #0ea5e9 );
	color: var( --mp-on-brand, #fff );
}

.mp-button .mp-i {
	flex: none;
	width: 15px;
	height: 15px;
	background-color: currentcolor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* --------------------------------------------------------------------------
   9. 条目清单 .mp-list（左栏「历史资料展览馆」、右栏各列表共用）
   -------------------------------------------------------------------------- */

.mp-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-list li {
	margin: 0;
	border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );
}

.mp-list li:first-child {
	border-block-start: 0;
}

.mp-list a {
	display: flex;
	align-items: baseline;
	gap: 0.6em;
	padding: 7px 6px;
	border-radius: 4px;
	font-size: 0.875rem;
	line-height: 1.5;
	transition: background-color 0.15s;
}

.mp-list a:hover {
	background-color: var( --mp-bg-tint );
}

.mp-list small {
	margin-inline-start: auto;
	flex: none;
	font-size: 0.6875rem;
	color: var( --mp-muted );
}

/* --------------------------------------------------------------------------
   10. 时间线 .mp-timeline（对应原站「老玩家回坑？」）
   -------------------------------------------------------------------------- */

.mp-timeline {
	display: flex;
	flex-direction: column;
	margin: 0 0 0 6px;
	border-inline-start: 2px solid var( --mp-bg-tint );
}

.mp-timeline dl {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: 0;
	padding: 4px 0 10px 15px;
}

.mp-timeline dl:last-child {
	padding-block-end: 0;
}

.mp-timeline dl::before {
	content: '';
	position: absolute;
	inset-inline-start: -5px;
	inset-block-start: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var( --mp-brand );
}

.mp-timeline dt {
	flex: none;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var( --mp-heading );
}

.mp-timeline dd {
	flex: 1 1 100%;
	margin: 2px 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: var( --mp-muted );
}

/* --------------------------------------------------------------------------
   11. 站点数据 .mp-stat-wrapper
   -------------------------------------------------------------------------- */

.mp-stat-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mp-stat {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1 1 76px;
	padding: 8px 6px;
	border-radius: 6px;
	background-color: var( --mp-bg-soft );
	text-align: center;
}

.mp-stat-value {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	color: var( --mp-brand );
}

.mp-stat-label {
	font-size: 0.6875rem;
	color: var( --mp-muted );
}

/* --------------------------------------------------------------------------
   12. 最近更新（Special:NewPages 注入的 <ul>）
   -------------------------------------------------------------------------- */

.mp-feed ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mp-feed li {
	padding: 5px 0;
	border-block-start: 1px dashed var( --kuke-card-border, #e2e8f0 );
	font-size: 0.75rem;
	line-height: 1.55;
	color: var( --mp-muted );
}

.mp-feed li:first-child {
	border-block-start: 0;
}

.mp-feed li a {
	font-size: 0.8125rem;
	font-weight: 500;
}

/* NewPages 的字节数 / 用户 / 讨论 / 贡献 尾巴太吵，首页只留标题 */
.mp-feed .mw-newpages-length,
.mp-feed .mw-usertoollinks,
.mp-feed .comment {
	display: none;
}

/* --------------------------------------------------------------------------
   13. 底部通栏分类墙 .mp-category-wrapper（对应原站跨语言按钮墙）
   -------------------------------------------------------------------------- */

.mp-category-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mp-category-wrapper > * {
	flex: 1 1 130px;
	max-width: 220px;
}

.mp-category {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.4em;
	padding: 8px 10px;
	border: var( --mp-border );
	border-radius: 6px;
	background-color: var( --mp-bg-soft );
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	color: var( --mp-heading );
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

a:hover .mp-category {
	border-color: var( --mp-brand );
	background-color: var( --mp-bg-tint );
	color: var( --mp-brand );
}

.mp-category b {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --mp-brand );
}

a:hover .mp-category b {
	color: inherit;
}

/* --------------------------------------------------------------------------
   14. 相关社区 .mp-community-wrapper
   -------------------------------------------------------------------------- */

.mp-community-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mp-community-wrapper > * {
	flex: 1 1 100%;
}

.mp-community {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	background-color: var( --mp-bg-soft );
	font-size: 0.8125rem;
	transition: background-color 0.15s;
}

a:hover .mp-community {
	background-color: var( --mp-bg-tint );
}

.mp-community .mp-i {
	flex: none;
	width: 16px;
	height: 16px;
	background-color: var( --mp-brand );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mp-community-name {
	font-weight: 600;
	color: var( --mp-heading );
}

.mp-community-meta {
	margin-inline-start: auto;
	font-size: 0.6875rem;
	color: var( --mp-muted );
}

/* --------------------------------------------------------------------------
   15. 首页链接去掉全站下划线 / 主题色，交由组件自身控制
   -------------------------------------------------------------------------- */

.mp-wrapper a {
	color: inherit;
	text-decoration: none;
	background-image: none;
}

.mp-wrapper .mp-list a,
.mp-wrapper .mp-feed a,
.mp-wrapper .mp-section-title a {
	color: var( --mp-heading );
}

.mp-wrapper .mp-list a:hover,
.mp-wrapper .mp-feed a:hover {
	color: var( --mp-brand );
}

.mp-wrapper a.new,
.mp-wrapper a.new .mp-icon-link,
.mp-wrapper a.new .mp-platform-name {
	color: var( --mp-new, #d73333 );
}

/* --------------------------------------------------------------------------
   16. 暗色模式
   Citizen 的主题类挂在 <html> 上，共三种需要暗色令牌的形态：
     .skin-theme-clientpref-night  手动选「深色」
     .skin-theme-clientpref-black  手动选「纯黑」（OLED）
     .skin-theme-clientpref-os     跟随系统，仅在 prefers-color-scheme:dark 时
   三者令牌值相同（纯黑的表面色由皮肤自己的 pure-black 变量压到 0 chroma，
   这里只需保证首页私有令牌不是浅色即可），所以用一份选择器列表统一声明，
   不再按主题各抄一遍。
   -------------------------------------------------------------------------- */

html.skin-theme-clientpref-night .mp-wrapper,
html.skin-theme-clientpref-black .mp-wrapper {
	--mp-bg: rgb( 29 41 61 / 0.5 );
	--mp-bg-soft: rgb( 15 23 42 / 0.55 );
	--mp-bg-tint: rgb( 14 165 233 / 0.14 );
	--mp-border: 1px solid rgb( 49 65 88 / 0.6 );
	--mp-brand: var( --kuke-brand-hover, #38bdf8 );
	--mp-heading: #e8edf4;
	--mp-muted: #98a5b8;
	--mp-banner-bg: #050a12;
	--mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );
	--mp-on-brand: #04121f;
	--mp-new: #ff8080;
}

/* 纯黑模式再压一档：表面全部落到无彩黑，跟皮肤自身的 OLED 处理对齐 */
html.skin-theme-clientpref-black .mp-wrapper {
	--mp-bg: rgb( 255 255 255 / 0.04 );
	--mp-bg-soft: rgb( 255 255 255 / 0.02 );
	--mp-border: 1px solid rgb( 255 255 255 / 0.1 );
	--mp-banner-bg: #000;
}

/* 当前版本的「纯黑」是叠加在深色主题上的开关（v4 才拆成独立 black 主题），
   类名形如 .skin-theme-clientpref-night.citizen-feature-pure-black-clientpref-1，
   两条路径都要压，否则开了开关的用户首页卡片仍是带蓝调的深灰。 */
html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-wrapper {
	--mp-bg: rgb( 255 255 255 / 0.04 );
	--mp-bg-soft: rgb( 255 255 255 / 0.02 );
	--mp-border: 1px solid rgb( 255 255 255 / 0.1 );
	--mp-banner-bg: #000;
}

html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-list li,
html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-night .mp-feed li {
	border-block-start-color: rgb( 255 255 255 / 0.08 );
}

@media ( prefers-color-scheme: dark ) {
	html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-wrapper {
		--mp-bg: rgb( 255 255 255 / 0.04 );
		--mp-bg-soft: rgb( 255 255 255 / 0.02 );
		--mp-border: 1px solid rgb( 255 255 255 / 0.1 );
		--mp-banner-bg: #000;
	}

	html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-list li,
	html.citizen-feature-pure-black-clientpref-1.skin-theme-clientpref-os .mp-feed li {
		border-block-start-color: rgb( 255 255 255 / 0.08 );
	}
}

html.skin-theme-clientpref-night .mp-list li,
html.skin-theme-clientpref-night .mp-feed li,
html.skin-theme-clientpref-black .mp-list li,
html.skin-theme-clientpref-black .mp-feed li {
	border-block-start-color: var( --mp-hairline, rgb( 49 65 88 / 0.6 ) );
}

html.skin-theme-clientpref-black .mp-list li,
html.skin-theme-clientpref-black .mp-feed li {
	--mp-hairline: rgb( 255 255 255 / 0.08 );
}

html.skin-theme-clientpref-night .mp-highlight,
html.skin-theme-clientpref-black .mp-highlight {
	background-image: linear-gradient(
		135deg,
		rgb( 14 165 233 / 0.16 ) 0%,
		transparent 62%
	);
}

html.skin-theme-clientpref-night .mp-timeline,
html.skin-theme-clientpref-black .mp-timeline {
	border-inline-start-color: rgb( 56 189 248 / 0.28 );
}

/* 跟随系统：同样的令牌，只在系统为暗色时生效 */
@media ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os .mp-wrapper {
		--mp-bg: rgb( 29 41 61 / 0.5 );
		--mp-bg-soft: rgb( 15 23 42 / 0.55 );
		--mp-bg-tint: rgb( 14 165 233 / 0.14 );
		--mp-border: 1px solid rgb( 49 65 88 / 0.6 );
		--mp-brand: var( --kuke-brand-hover, #38bdf8 );
		--mp-heading: #e8edf4;
		--mp-muted: #98a5b8;
		--mp-banner-bg: #050a12;
		--mp-shadow-hover: 0 4px 14px rgb( 0 0 0 / 0.45 );
		--mp-on-brand: #04121f;
		--mp-new: #ff8080;
	}

	html.skin-theme-clientpref-os .mp-list li,
	html.skin-theme-clientpref-os .mp-feed li {
		border-block-start-color: rgb( 49 65 88 / 0.6 );
	}

	html.skin-theme-clientpref-os .mp-highlight {
		background-image: linear-gradient(
			135deg,
			rgb( 14 165 233 / 0.16 ) 0%,
			transparent 62%
		);
	}

	html.skin-theme-clientpref-os .mp-timeline {
		border-inline-start-color: rgb( 56 189 248 / 0.28 );
	}
}

/* --------------------------------------------------------------------------
   17. 窄屏收敛
   -------------------------------------------------------------------------- */

@media ( max-width: 720px ) {
	.mp-banner-title {
		font-size: 1.375rem;
	}

	.mp-banner-content {
		padding: 14px 16px;
	}

	.mp-banner-img {
		flex-basis: 100%;
		min-height: 150px;
	}

	.mp-portal-wrapper {
		gap: 6px;
	}

	.mp-portal-wrapper .mp-portal {
		flex: 1 1 calc( 50% - 3px );
		margin-inline-start: 0;
	}

	.mp-portal > a {
		border-radius: 6px;
	}

	.mp-platform-wrapper > * {
		flex-basis: 100%;
		min-width: 0;
	}

	.mp-highlight-wrapper > * {
		min-width: 0;
		flex-basis: 100%;
	}
}

/* --------------------------------------------------------------------------
   18. display:contents 穿透修正
   Remex 会把整串行内元素包进一个 <p>。上面用 display:contents 抹掉了这个
   <p> 的盒子，于是真正参与父 flex 布局的是 <p> 的子元素，而不是 <p> 本身。
   前面的 `.xxx-wrapper > *` 只选中了那个 <p>，flex 值全部落空，格子只能按
   内容宽度收缩。这里把同样的尺寸规则补给孙元素。
   -------------------------------------------------------------------------- */

.mp-social-wrapper > p > * {
	flex: 1 1 0;
	min-width: max-content;
}

.mp-highlight-wrapper > p > * {
	flex: 1 1 0;
	min-width: 300px;
}

.mp-icon-wrapper > p > * {
	flex: 1 auto;
	width: var( --icon-base-width );
	max-width: var( --icon-max-width );
}

.mp-platform-wrapper > p > * {
	flex: 1 1 210px;
	min-width: 210px;
}

.mp-button-wrapper > p > * {
	flex: 1 0 0;
	min-width: max-content;
}

.mp-category-wrapper > p > * {
	flex: 1 1 130px;
	max-width: 220px;
}

.mp-community-wrapper > p > * {
	flex: 1 1 100%;
}

/* .mp-portal 与 .mp-stat 是 <span>，自身带了 flex 值，只需保证撑满 */
.mp-portal-wrapper > p > .mp-portal {
	flex: 1 1 0;
}

.mp-stat-wrapper > p > .mp-stat {
	flex: 1 1 0;
}

@media ( max-width: 720px ) {
	.mp-platform-wrapper > p > * {
		flex-basis: 100%;
		min-width: 0;
	}

	.mp-highlight-wrapper > p > * {
		min-width: 0;
		flex-basis: 100%;
	}
}

/* 右栏最后一块被 flex:1 拉高后，内部内容会在底部留白。让它纵向铺开，
   把多出来的高度分摊进标题与列表之间，底边就贴齐左栏。 */
.mp-right > :last-child {
	display: flex;
	flex-direction: column;
}

.mp-right > :last-child > .mp-community-wrapper {
	flex: 1;
	align-content: space-between;
}

/* --------------------------------------------------------------------------
   19. 首页上下留白收敛
   实测（1600px 视口）：顶部导航栏底边 57px，.mp-wrapper 顶边 155px，中间 98px
   全是空白，由四段叠加而成——
     43px  wikitext 开头的行为开关（__NOTOC__ 等）留下的空 <p>
     24px  .citizen-body-container 的 margin-block-start
     16px  .citizen-body-container 的 padding-block-start
     16px  #mw-content-text 的 margin-block-start
   底部 152px = .citizen-body-container 的 margin-block-end 24px
              + .citizen-footer 的 margin-block-start 128px。
   首页是自带横幅的门户页，这些为长文行距准备的间距没有意义，收敛到 ~20/40px。
   只对首页生效，条目页排版不受影响。
   -------------------------------------------------------------------------- */

/* 首个 <p> 只装了行为开关留下的 <br>，没有可见文字，直接抹掉 */
.page-首页 .mw-parser-output > p:first-child,
.page-Main_Page .mw-parser-output > p:first-child {
	display: none;
}

/* Citizen 用 .page-Main_Page.action-view 加了 margin-top:var(--space-xl)，
   特异性 0-3-0，这里必须同等强度才压得住 */
.page-首页.action-view .citizen-body-container,
.page-Main_Page.action-view .citizen-body-container {
	margin-block: 0;
	padding-block-start: var( --space-md, 1rem );
}

.page-首页 #mw-content-text,
.page-Main_Page #mw-content-text {
	margin-block-start: 0;
}

.page-首页 .citizen-footer,
.page-Main_Page .citizen-footer {
	margin-block-start: var( --space-xl, 2rem );
}

/* --------------------------------------------------------------------------
   20. 分类墙收成一行
   11 个按钮在 1560px 栅格下按 flex-basis:130px 计算会溢出 6px，导致「全部条目」
   单独换行并居中。缩到 110px 后 11 个刚好同排，仍由 flex-grow 均分剩余宽度。
   -------------------------------------------------------------------------- */

.mp-category-wrapper > *,
.mp-category-wrapper > p > * {
	flex: 1 1 110px;
	max-width: 220px;
}

/* ==========================================================================
   Kuke Wiki 图标系统 — Font Awesome Free 6.7.2
   图形取自 fontawesome.com（Icons: CC BY 4.0），内联为 data-URI
   统一用 mask-image 渲染，颜色由 currentcolor / background-color 控制，
   因此深色模式自动适配，无需为每个图标单独配色。
   本文件由 gen-fa.php 生成，勿手改。
   ========================================================================== */

/* --- 1. 首页图标盒子 ------------------------------------------------------ */

.mp-card__icon,
.mp-pill__icon {
	display: block;
	flex: none;
	width: 28px;
	height: 28px;
	background-color: var( --kuke-brand-strong, #0284c7 );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mp-pill__icon {
	width: 18px;
	height: 18px;
	background-color: currentcolor;
}

/* --- 2. 首页图标 ---------------------------------------------------------- */
.mp-icon--book {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5l0-377.4c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8L0 454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5l0-370.3c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11L304 456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--folder {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M88.7 223.8L0 375.8 0 96C0 60.7 28.7 32 64 32l117.5 0c17 0 33.3 6.7 45.3 18.7l26.5 26.5c12 12 28.3 18.7 45.3 18.7L416 96c35.3 0 64 28.7 64 64l0 32-336 0c-22.8 0-43.8 12.1-55.3 31.8zm27.6 16.1C122.1 230 132.6 224 144 224l400 0c11.5 0 22 6.1 27.7 16.1s5.7 22.2-.1 32.1l-112 192C453.9 474 443.4 480 432 480L32 480c-11.5 0-22-6.1-27.7-16.1s-5.7-22.2 .1-32.1l112-192z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--clock {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--shuffle {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6l0-32-32 0c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--pencil {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--link {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--file {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--image {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--compass {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--award {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M173.8 5.5c11-7.3 25.4-7.3 36.4 0L228 17.2c6 3.9 13 5.8 20.1 5.4l21.3-1.3c13.2-.8 25.6 6.4 31.5 18.2l9.6 19.1c3.2 6.4 8.4 11.5 14.7 14.7L344.5 83c11.8 5.9 19 18.3 18.2 31.5l-1.3 21.3c-.4 7.1 1.5 14.2 5.4 20.1l11.8 17.8c7.3 11 7.3 25.4 0 36.4L366.8 228c-3.9 6-5.8 13-5.4 20.1l1.3 21.3c.8 13.2-6.4 25.6-18.2 31.5l-19.1 9.6c-6.4 3.2-11.5 8.4-14.7 14.7L301 344.5c-5.9 11.8-18.3 19-31.5 18.2l-21.3-1.3c-7.1-.4-14.2 1.5-20.1 5.4l-17.8 11.8c-11 7.3-25.4 7.3-36.4 0L156 366.8c-6-3.9-13-5.8-20.1-5.4l-21.3 1.3c-13.2 .8-25.6-6.4-31.5-18.2l-9.6-19.1c-3.2-6.4-8.4-11.5-14.7-14.7L39.5 301c-11.8-5.9-19-18.3-18.2-31.5l1.3-21.3c.4-7.1-1.5-14.2-5.4-20.1L5.5 210.2c-7.3-11-7.3-25.4 0-36.4L17.2 156c3.9-6 5.8-13 5.4-20.1l-1.3-21.3c-.8-13.2 6.4-25.6 18.2-31.5l19.1-9.6C65 70.2 70.2 65 73.4 58.6L83 39.5c5.9-11.8 18.3-19 31.5-18.2l21.3 1.3c7.1 .4 14.2-1.5 20.1-5.4L173.8 5.5zM272 192a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM1.3 441.8L44.4 339.3c.2 .1 .3 .2 .4 .4l9.6 19.1c11.7 23.2 36 37.3 62 35.8l21.3-1.3c.2 0 .5 0 .7 .2l17.8 11.8c5.1 3.3 10.5 5.9 16.1 7.7l-37.6 89.3c-2.3 5.5-7.4 9.2-13.3 9.7s-11.6-2.2-14.8-7.2L74.4 455.5l-56.1 8.3c-5.7 .8-11.4-1.5-15-6s-4.3-10.7-2.1-16zm248 60.4L211.7 413c5.6-1.8 11-4.3 16.1-7.7l17.8-11.8c.2-.1 .4-.2 .7-.2l21.3 1.3c26 1.5 50.3-12.6 62-35.8l9.6-19.1c.1-.2 .2-.3 .4-.4l43.2 102.5c2.2 5.3 1.4 11.4-2.1 16s-9.3 6.9-15 6l-56.1-8.3-32.2 49.2c-3.2 5-8.9 7.7-14.8 7.2s-11-4.3-13.3-9.7z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--tool {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M78.6 5C69.1-2.4 55.6-1.5 47 7L7 47c-8.5 8.5-9.4 22-2.1 31.6l80 104c4.5 5.9 11.6 9.4 19 9.4l54.1 0 109 109c-14.7 29-10 65.4 14.3 89.6l112 112c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-112-112c-24.2-24.2-60.6-29-89.6-14.3l-109-109 0-54.1c0-7.5-3.5-14.5-9.4-19L78.6 5zM19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L233.7 374.3c-7.8-20.9-9-43.6-3.6-65.1l-61.7-61.7L19.9 396.1zM512 144c0-10.5-1.1-20.7-3.2-30.5c-2.4-11.2-16.1-14.1-24.2-6l-63.9 63.9c-3 3-7.1 4.7-11.3 4.7L352 176c-8.8 0-16-7.2-16-16l0-57.4c0-4.2 1.7-8.3 4.7-11.3l63.9-63.9c8.1-8.1 5.2-21.8-6-24.2C388.7 1.1 378.5 0 368 0C288.5 0 224 64.5 224 144l0 .8 85.3 85.3c36-9.1 75.8 .5 104 28.7L429 274.5c49-23 83-72.8 83-130.5zM56 432a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--alert {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--list {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--search {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--upload {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.mp-icon--plus {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

/* --- 3. 首页图标暗色配色 -------------------------------------------------- */

html.skin-theme-clientpref-night .mp-card__icon {
	background-color: var( --kuke-brand-hover, #38bdf8 );
}

@media screen and ( prefers-color-scheme: dark ) {
	html.skin-theme-clientpref-os .mp-card__icon {
		background-color: var( --kuke-brand-hover, #38bdf8 );
	}
}

/* --- 4. Citizen 内置图标 --------------------------------------------------
   皮肤把 SVG 经 OOUIIconPackModule 挂在 .mw-ui-icon-wikimedia-{name}:before 上，
   这里同名覆盖 mask-image 即可换图；.citizen-ui-icon 前缀用来抬高特异性，
   避免被皮肤后续规则反超。尺寸/定位/颜色沿用皮肤自身设置。
   注意：不要改用 background-image —— Menu.less 里有
   `background-image: none !important` 会直接干掉它。
   -------------------------------------------------------------------------- */

/* 所有图形已在 gen-fa.php 里统一放进 640x640 方形画布并居中，
   图形本身只占画布 80%，因此这里让 mask 铺满整格，各图标视觉大小才一致。 */
.citizen-ui-icon::before {
	-webkit-mask-size: 100%;
	mask-size: 100%;
}
.citizen-ui-icon.mw-ui-icon-wikimedia-arrowPrevious::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-article::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-articleNotFound::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-articleRedirect::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M307 34.8c-11.5 5.1-19 16.6-19 29.2l0 64-112 0C78.8 128 0 206.8 0 304C0 417.3 81.5 467.9 100.2 478.1c2.5 1.4 5.3 1.9 8.1 1.9c10.9 0 19.7-8.9 19.7-19.7c0-7.5-4.3-14.4-9.8-19.5C108.8 431.9 96 414.4 96 384c0-53 43-96 96-96l96 0 0 64c0 12.6 7.4 24.1 19 29.2s25 3 34.4-5.4l160-144c6.7-6.1 10.6-14.7 10.6-23.8s-3.8-17.7-10.6-23.8l-160-144c-9.4-8.5-22.9-10.6-34.4-5.4z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-articleSearch::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M0 64C0 28.7 28.7 0 64 0L224 0l0 128c0 17.7 14.3 32 32 32l128 0 0 38.6C310.1 219.5 256 287.4 256 368c0 59.1 29.1 111.3 73.7 143.3c-3.2 .5-6.4 .7-9.7 .7L64 512c-35.3 0-64-28.7-64-64L0 64zm384 64l-128 0L256 0 384 128zm48 96a144 144 0 1 1 0 288 144 144 0 1 1 0-288zm0 240a24 24 0 1 0 0-48 24 24 0 1 0 0 48zM368 321.6l0 6.4c0 8.8 7.2 16 16 16s16-7.2 16-16l0-6.4c0-5.3 4.3-9.6 9.6-9.6l40.5 0c7.7 0 13.9 6.2 13.9 13.9c0 5.2-2.9 9.9-7.4 12.3l-32 16.8c-5.3 2.8-8.6 8.2-8.6 14.2l0 14.8c0 8.8 7.2 16 16 16s16-7.2 16-16l0-5.1 23.5-12.3c15.1-7.9 24.5-23.6 24.5-40.6c0-25.4-20.6-45.9-45.9-45.9l-40.5 0c-23 0-41.6 18.6-41.6 41.6z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-articlesSearch::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-bell::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-block::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-collapse::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-die::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M274.9 34.3c-28.1-28.1-73.7-28.1-101.8 0L34.3 173.1c-28.1 28.1-28.1 73.7 0 101.8L173.1 413.7c28.1 28.1 73.7 28.1 101.8 0L413.7 274.9c28.1-28.1 28.1-73.7 0-101.8L274.9 34.3zM200 224a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zM96 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 376a24 24 0 1 1 0-48 24 24 0 1 1 0 48zM352 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48zM224 120a24 24 0 1 1 0-48 24 24 0 1 1 0 48zm96 328c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-114.3 0c11.6 36 3.1 77-25.4 105.5L320 413.8l0 34.2zM480 328a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-edit::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160L0 416c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-96c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 96c0 17.7-14.3 32-32 32L96 448c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 64z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-editLock::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-ellipsis::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-eye::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-help::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-history::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M75 75L41 41C25.9 25.9 0 36.6 0 57.9L0 168c0 13.3 10.7 24 24 24l110.1 0c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24l0 104c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65 0-94.1c0-13.3-10.7-24-24-24z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-home::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-image::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M448 80c8.8 0 16 7.2 16 16l0 319.8-5-6.5-136-176c-4.5-5.9-11.6-9.3-19-9.3s-14.4 3.4-19 9.3L202 340.7l-30.5-42.7C167 291.7 159.8 288 152 288s-15 3.7-19.5 10.1l-80 112L48 416.3l0-.3L48 96c0-8.8 7.2-16 16-16l384 0zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm80 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-imageGallery::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M160 32c-35.3 0-64 28.7-64 64l0 224c0 35.3 28.7 64 64 64l352 0c35.3 0 64-28.7 64-64l0-224c0-35.3-28.7-64-64-64L160 32zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320l-144 0-48 0-80 0c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120L0 344c0 75.1 60.9 136 136 136l320 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-320 0c-48.6 0-88-39.4-88-88l0-224z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-infoFilled::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-labFlask::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-language::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64l192 0 48 0 16 0 256 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64l-256 0-16 0-48 0L64 448c-35.3 0-64-28.7-64-64L0 128zm320 0l0 256 256 0 0-256-256 0zM178.3 175.9c-3.2-7.2-10.4-11.9-18.3-11.9s-15.1 4.7-18.3 11.9l-64 144c-4.5 10.1 .1 21.9 10.2 26.4s21.9-.1 26.4-10.2l8.9-20.1 73.6 0 8.9 20.1c4.5 10.1 16.3 14.6 26.4 10.2s14.6-16.3 10.2-26.4l-64-144zM160 233.2L179 276l-38 0 19-42.8zM448 164c11 0 20 9 20 20l0 4 44 0 16 0c11 0 20 9 20 20s-9 20-20 20l-2 0-1.6 4.5c-8.9 24.4-22.4 46.6-39.6 65.4c.9 .6 1.8 1.1 2.7 1.6l18.9 11.3c9.5 5.7 12.5 18 6.9 27.4s-18 12.5-27.4 6.9l-18.9-11.3c-4.5-2.7-8.8-5.5-13.1-8.5c-10.6 7.5-21.9 14-34 19.4l-3.6 1.6c-10.1 4.5-21.9-.1-26.4-10.2s.1-21.9 10.2-26.4l3.6-1.6c6.4-2.9 12.6-6.1 18.5-9.8l-12.2-12.2c-7.8-7.8-7.8-20.5 0-28.3s20.5-7.8 28.3 0l14.6 14.6 .5 .5c12.4-13.1 22.5-28.3 29.8-45L448 228l-72 0c-11 0-20-9-20-20s9-20 20-20l52 0 0-4c0-11 9-20 20-20z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-link::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-linkExternal::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l82.7 0L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3l0 82.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-160c0-17.7-14.3-32-32-32L320 0zM80 32C35.8 32 0 67.8 0 112L0 432c0 44.2 35.8 80 80 80l320 0c44.2 0 80-35.8 80-80l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 112c0 8.8-7.2 16-16 16L80 448c-8.8 0-16-7.2-16-16l0-320c0-8.8 7.2-16 16-16l112 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L80 32z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-listBullet::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L192 64zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l288 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-288 0zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-lock::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-logIn::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1L32 320c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM352 416l64 0c17.7 0 32-14.3 32-32l0-256c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l64 0c53 0 96 43 96 96l0 256c0 53-43 96-96 96l-64 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-logOut::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-logoWikidata::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-message::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M160 368c26.5 0 48 21.5 48 48l0 16 72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6L448 368c8.8 0 16-7.2 16-16l0-288c0-8.8-7.2-16-16-16L64 48c-8.8 0-16 7.2-16 16l0 288c0 8.8 7.2 16 16 16l96 0zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3l0-21.3 0-6.4 0-.3 0-4 0-48-48 0-48 0c-35.3 0-64-28.7-64-64L0 64C0 28.7 28.7 0 64 0L448 0c35.3 0 64 28.7 64 64l0 288c0 35.3-28.7 64-64 64l-138.7 0L208 492z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-move::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M278.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4L224 224l-114.7 0 9.4-9.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-9.4-9.4L224 288l0 114.7-9.4-9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-9.4 9.4L288 288l114.7 0-9.4 9.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l64-64c12.5-12.5 12.5-32.8 0-45.3l-64-64c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L288 224l0-114.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-printer::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M128 0C92.7 0 64 28.7 64 64l0 96 64 0 0-96 226.7 0L384 93.3l0 66.7 64 0 0-66.7c0-17-6.7-33.3-18.7-45.3L400 18.7C388 6.7 371.7 0 354.7 0L128 0zM384 352l0 32 0 64-256 0 0-64 0-16 0-16 256 0zm64 32l32 0c17.7 0 32-14.3 32-32l0-96c0-35.3-28.7-64-64-64L64 192c-35.3 0-64 28.7-64 64l0 96c0 17.7 14.3 32 32 32l32 0 0 64c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-64zM432 248a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-qrCode::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 80C0 53.5 21.5 32 48 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48L0 80zM64 96l0 64 64 0 0-64L64 96zM0 336c0-26.5 21.5-48 48-48l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96zm64 16l0 64 64 0 0-64-64 0zM304 32l96 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-96 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm80 64l-64 0 0 64 64 0 0-64zM256 304c0-8.8 7.2-16 16-16l64 0c8.8 0 16 7.2 16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16l0 96c0 8.8-7.2 16-16 16l-64 0c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16l0 64c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-160zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-quotes::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M0 216C0 149.7 53.7 96 120 96l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72zm256 0c0-66.3 53.7-120 120-120l8 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-8 0c-30.9 0-56 25.1-56 56l0 8 64 0c35.3 0 64 28.7 64 64l0 64c0 35.3-28.7 64-64 64l-64 0c-35.3 0-64-28.7-64-64l0-32 0-32 0-72z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-recentChanges::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM72 272a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm104-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16s7.2-16 16-16zM72 368a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm88 0c0-8.8 7.2-16 16-16l128 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-128 0c-8.8 0-16-7.2-16-16z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-reference::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M448 296c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72zm-256 0c0 66.3-53.7 120-120 120l-8 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l8 0c30.9 0 56-25.1 56-56l0-8-64 0c-35.3 0-64-28.7-64-64l0-64c0-35.3 28.7-64 64-64l64 0c35.3 0 64 28.7 64 64l0 32 0 32 0 72z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-reload::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-sandbox::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M342.6 9.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l9.4 9.4L28.1 342.6C10.1 360.6 0 385 0 410.5L0 416c0 53 43 96 96 96l5.5 0c25.5 0 49.9-10.1 67.9-28.1L448 205.3l9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-32-32-96-96-32-32zM205.3 256L352 109.3 402.7 160l-96 96-101.5 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-search::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-settings::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-share::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-specialPages::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M234.7 42.7L197 56.8c-3 1.1-5 4-5 7.2s2 6.1 5 7.2l37.7 14.1L248.8 123c1.1 3 4 5 7.2 5s6.1-2 7.2-5l14.1-37.7L315 71.2c3-1.1 5-4 5-7.2s-2-6.1-5-7.2L277.3 42.7 263.2 5c-1.1-3-4-5-7.2-5s-6.1 2-7.2 5L234.7 42.7zM46.1 395.4c-18.7 18.7-18.7 49.1 0 67.9l34.6 34.6c18.7 18.7 49.1 18.7 67.9 0L529.9 116.5c18.7-18.7 18.7-49.1 0-67.9L495.3 14.1c-18.7-18.7-49.1-18.7-67.9 0L46.1 395.4zM484.6 82.6l-105 105-23.3-23.3 105-105 23.3 23.3zM7.5 117.2C3 118.9 0 123.2 0 128s3 9.1 7.5 10.8L64 160l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L128 160l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L128 96 106.8 39.5C105.1 35 100.8 32 96 32s-9.1 3-10.8 7.5L64 96 7.5 117.2zm352 256c-4.5 1.7-7.5 6-7.5 10.8s3 9.1 7.5 10.8L416 416l21.2 56.5c1.7 4.5 6 7.5 10.8 7.5s9.1-3 10.8-7.5L480 416l56.5-21.2c4.5-1.7 7.5-6 7.5-10.8s-3-9.1-7.5-10.8L480 352l-21.2-56.5c-1.7-4.5-6-7.5-10.8-7.5s-9.1 3-10.8 7.5L416 352l-56.5 21.2z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbleAdd::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3c0 0 0 0 0 0c0 0 0 0 0 0s0 0 0 0s0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM224 160c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 48 48 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-48 0 0 48c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-48-48 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16l48 0 0-48z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-speechBubbles::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2s0 0 0 0s0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.2-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9c0 0 0 0 0 0s0 0 0 0l-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-star::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-table::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 256l0-96 160 0 0 96L64 256zm0 64l160 0 0 96L64 416l0-96zm224 96l0-96 160 0 0 96-160 0zM448 256l-160 0 0-96 160 0 0 96zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-tableAddRowBefore::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 96C0 60.7 28.7 32 64 32l384 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 0l0 64 64 0 0-64L64 96zm384 0L192 96l0 64 256 0 0-64zM64 224l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64zM64 352l0 64 64 0 0-64-64 0zm384 0l-256 0 0 64 256 0 0-64z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-trash::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(96 64)'%3E%3Cpath d='M170.5 51.6L151.5 80l145 0-19-28.4c-1.5-2.2-4-3.6-6.7-3.6l-93.7 0c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80 368 80l48 0 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-8 0 0 304c0 44.2-35.8 80-80 80l-224 0c-44.2 0-80-35.8-80-80l0-304-8 0c-13.3 0-24-10.7-24-24S10.7 80 24 80l8 0 48 0 13.8 0 36.7-55.1C140.9 9.4 158.4 0 177.1 0l93.7 0c18.7 0 36.2 9.4 46.6 24.9zM80 128l0 304c0 17.7 14.3 32 32 32l224 0c17.7 0 32-14.3 32-32l0-304L80 128zm80 64l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0l0 208c0 8.8-7.2 16-16 16s-16-7.2-16-16l0-208c0-8.8 7.2-16 16-16s16 7.2 16 16z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-tray::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-92.1c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32L121 32zm0 64l270 0 48 192-51.2 0c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7l-120.4 0c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7L73 288 121 96z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-unBlock::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-unLock::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M352 144c0-44.2 35.8-80 80-80s80 35.8 80 80l0 48c0 17.7 14.3 32 32 32s32-14.3 32-32l0-48C576 64.5 511.5 0 432 0S288 64.5 288 144l0 48L64 192c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-192c0-35.3-28.7-64-64-64l-32 0 0-48z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-unStar::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-upload::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M288 109.3L288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-242.7-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352l128 0c0 35.3 28.7 64 64 64s64-28.7 64-64l128 0c35.3 0 64 28.7 64 64l0 32c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64l0-32c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-userAdd::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM504 312l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-userAvatar::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M399 384.2C376.9 345.8 335.4 320 288 320l-64 0c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-userContributions::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l293.1 0c-3.1-8.8-3.7-18.4-1.4-27.8l15-60.1c2.8-11.3 8.6-21.5 16.8-29.7l40.3-40.3c-32.1-31-75.7-50.1-123.9-50.1l-91.4 0zm435.5-68.3c-15.6-15.6-40.9-15.6-56.6 0l-29.4 29.4 71 71 29.4-29.4c15.6-15.6 15.6-40.9 0-56.6l-14.4-14.4zM375.9 417c-4.1 4.1-7 9.2-8.4 14.9l-15 60.1c-1.4 5.5 .2 11.2 4.2 15.2s9.7 5.6 15.2 4.2l60.1-15c5.6-1.4 10.8-4.3 14.9-8.4L576.1 358.7l-71-71L375.9 417z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-userGroup::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3zM609.3 512l-137.8 0c5.4-9.4 8.6-20.3 8.6-32l0-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2l61.4 0C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-userTalk::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M64 0C28.7 0 0 28.7 0 64L0 352c0 35.3 28.7 64 64 64l96 0 0 80c0 6.1 3.4 11.6 8.8 14.3s11.9 2.1 16.8-1.5L309.3 416 448 416c35.3 0 64-28.7 64-64l0-288c0-35.3-28.7-64-64-64L64 0z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-watchlist::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(32 64)'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-wikiText::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(0 64)'%3E%3Cpath d='M392.8 1.2c-17-4.9-34.7 5-39.6 22l-128 448c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l128-448c4.9-17-5-34.7-22-39.6zm80.6 120.1c-12.5 12.5-12.5 32.8 0 45.3L562.7 256l-89.4 89.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-112-112c-12.5-12.5-32.8-12.5-45.3 0zm-306.7 0c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l112 112c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256l89.4-89.4c12.5-12.5 12.5-32.8 0-45.3z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-configure::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(64 64)'%3E%3Cpath d='M0 416c0 17.7 14.3 32 32 32l54.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 448c17.7 0 32-14.3 32-32s-14.3-32-32-32l-246.7 0c-12.3-28.3-40.5-48-73.3-48s-61 19.7-73.3 48L32 384c-17.7 0-32 14.3-32 32zm128 0a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM320 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm32-80c-32.8 0-61 19.7-73.3 48L32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l246.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48l54.7 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-54.7 0c-12.3-28.3-40.5-48-73.3-48zM192 128a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm73.3-64C253 35.7 224.8 16 192 16s-61 19.7-73.3 48L32 64C14.3 64 0 78.3 0 96s14.3 32 32 32l86.7 0c12.3 28.3 40.5 48 73.3 48s61-19.7 73.3-48L480 128c17.7 0 32-14.3 32-32s-14.3-32-32-32L265.3 64z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

.citizen-ui-icon.mw-ui-icon-wikimedia-arrowUp::before {
	--kuke-i: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cg transform='translate(128 64)'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/g%3E%3C/svg%3E" );
	-webkit-mask-image: var( --kuke-i );
	mask-image: var( --kuke-i );
}

/* --- 5. 关闭图标的 hover 动效 ---------------------------------------------
   皮肤的 IconAnimation.less 会在 hover 时旋转/平移图标：齿轮转 180°、
   ellipsis 转 -90°、history 转 -270°、编辑笔右移等。换成 FA 图形后这些
   转动显得突兀，这里逐个点名改成静态。
   只覆盖 IconAnimation.less 里的这几个图标，不用通配也不用 !important，
   以免误伤真正靠 transform 工作的组件（目录展开箭头 .citizen-toc-toggle
   ::before 的 rotate3d、吸顶栏回到顶部按钮的 translateX 滑入）。
   -------------------------------------------------------------------------- */

:is( a, button, summary ):hover .citizen-ui-icon:is(
	.mw-ui-icon-wikimedia-configure,
	.mw-ui-icon-wikimedia-edit,
	.mw-ui-icon-wikimedia-ellipsis,
	.mw-ui-icon-wikimedia-arrowUp,
	.mw-ui-icon-wikimedia-speechBubbles,
	.mw-ui-icon-wikimedia-userAdd,
	.mw-ui-icon-wikimedia-history,
	.mw-ui-icon-wikimedia-logIn,
	.mw-ui-icon-wikimedia-share
) {
	transform: none;
}

/* ==========================================================================
   顶栏主导航（由 MediaWiki:Common.js 注入到 .citizen-header__start）
   ========================================================================== */

/* __start 是皮肤预留的空槽，本身已是 flex；这里只补溢出处理，
   不要覆盖 display / flex-direction，否则左侧竖排模式会坏。 */
.citizen-header__start {
	min-width: 0;
	overflow: hidden;
}

.kuke-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.kuke-nav::-webkit-scrollbar {
	display: none;
}

.kuke-nav__link {
	position: relative;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 8px;
	color: var( --color-subtle );
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition:
		background-color 0.2s var( --kuke-ease ),
		color 0.2s var( --kuke-ease );
}

.kuke-nav__link:visited {
	color: var( --color-subtle );
}

.kuke-nav__link:hover,
.kuke-nav__link:focus {
	background-color: var( --color-surface-2 );
	color: var( --color-emphasized );
	text-decoration: none;
}

/* 主导航 active 态：由 body class 驱动（服务端直出，无 JS 依赖） */
body.page-首页 .kuke-nav__link[data-nav="home"],
body.page-Main_Page .kuke-nav__link[data-nav="home"],
body.rootpage-子服一览 .kuke-nav__link[data-nav="servers"],
body.rootpage-趣味生存 .kuke-nav__link[data-nav="servers"],
body.rootpage-粘液空岛 .kuke-nav__link[data-nav="servers"],
body.rootpage-纯净生存 .kuke-nav__link[data-nav="servers"],
body.rootpage-机械动力 .kuke-nav__link[data-nav="servers"],
body.rootpage-职业战争 .kuke-nav__link[data-nav="servers"],
body.rootpage-起床战争 .kuke-nav__link[data-nav="servers"],
body.rootpage-僵尸末日 .kuke-nav__link[data-nav="servers"],
body.rootpage-避暑山庄 .kuke-nav__link[data-nav="servers"],
body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav="rules"],
body.rootpage-服务器常见问题 .kuke-nav__link[data-nav="faq"],
body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav="history"],
body.mw-special-Allpages .kuke-nav__link[data-nav="allpages"],
body.mw-special-Categories .kuke-nav__link[data-nav="cats"],
body.mw-special-Recentchanges .kuke-nav__link[data-nav="rc"],
body.page-首页 .kuke-nav__link[data-nav="home"]:visited,
body.page-Main_Page .kuke-nav__link[data-nav="home"]:visited,
body.rootpage-子服一览 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-趣味生存 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-粘液空岛 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-纯净生存 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-机械动力 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-职业战争 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-起床战争 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-僵尸末日 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-避暑山庄 .kuke-nav__link[data-nav="servers"]:visited,
body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav="rules"]:visited,
body.rootpage-服务器常见问题 .kuke-nav__link[data-nav="faq"]:visited,
body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav="history"]:visited,
body.mw-special-Allpages .kuke-nav__link[data-nav="allpages"]:visited,
body.mw-special-Categories .kuke-nav__link[data-nav="cats"]:visited,
body.mw-special-Recentchanges .kuke-nav__link[data-nav="rc"]:visited {
	color: var( --kuke-brand-strong );
	font-weight: 600;
}

body.page-首页 .kuke-nav__link[data-nav="home"]::after,
body.page-Main_Page .kuke-nav__link[data-nav="home"]::after,
body.rootpage-子服一览 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-趣味生存 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-粘液空岛 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-纯净生存 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-机械动力 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-职业战争 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-起床战争 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-僵尸末日 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-避暑山庄 .kuke-nav__link[data-nav="servers"]::after,
body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav="rules"]::after,
body.rootpage-服务器常见问题 .kuke-nav__link[data-nav="faq"]::after,
body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav="history"]::after,
body.mw-special-Allpages .kuke-nav__link[data-nav="allpages"]::after,
body.mw-special-Categories .kuke-nav__link[data-nav="cats"]::after,
body.mw-special-Recentchanges .kuke-nav__link[data-nav="rc"]::after {
	position: absolute;
	right: 12px;
	bottom: -6px;
	left: 12px;
	height: 2px;
	content: '';
	background-color: var( --kuke-brand-strong );
	border-radius: 2px;
}

body.page-首页 .kuke-nav__link[data-nav="home"]:hover,
body.page-Main_Page .kuke-nav__link[data-nav="home"]:hover,
body.rootpage-子服一览 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-趣味生存 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-粘液空岛 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-纯净生存 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-机械动力 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-职业战争 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-起床战争 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-僵尸末日 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-避暑山庄 .kuke-nav__link[data-nav="servers"]:hover,
body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav="rules"]:hover,
body.rootpage-服务器常见问题 .kuke-nav__link[data-nav="faq"]:hover,
body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav="history"]:hover,
body.mw-special-Allpages .kuke-nav__link[data-nav="allpages"]:hover,
body.mw-special-Categories .kuke-nav__link[data-nav="cats"]:hover,
body.mw-special-Recentchanges .kuke-nav__link[data-nav="rc"]:hover,
body.page-首页 .kuke-nav__link[data-nav="home"]:focus,
body.page-Main_Page .kuke-nav__link[data-nav="home"]:focus,
body.rootpage-子服一览 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-趣味生存 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-粘液空岛 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-纯净生存 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-机械动力 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-职业战争 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-起床战争 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-僵尸末日 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-避暑山庄 .kuke-nav__link[data-nav="servers"]:focus,
body.rootpage-KukeMC群组服总规章 .kuke-nav__link[data-nav="rules"]:focus,
body.rootpage-服务器常见问题 .kuke-nav__link[data-nav="faq"]:focus,
body.rootpage-历史资料展览馆 .kuke-nav__link[data-nav="history"]:focus,
body.mw-special-Allpages .kuke-nav__link[data-nav="allpages"]:focus,
body.mw-special-Categories .kuke-nav__link[data-nav="cats"]:focus,
body.mw-special-Recentchanges .kuke-nav__link[data-nav="rc"]:focus {
	background-color: var( --kuke-brand-pale );
	color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav__link::after,
.citizen-header-position-right .kuke-nav__link::after {
	top: 6px;
	right: auto;
	bottom: 6px;
	left: 0;
	width: 2px;
	height: auto;
}


/* 窄屏隐藏，导航交回汉堡抽屉 */
@media screen and ( max-width: 850px ) {
	.kuke-nav {
		display: none;
	}
}


/* ==========================================================================
   21. 页脚 .citizen-footer —— 1:1 复刻 kuke.ink 官网页脚
   结构由 MediaWiki:Citizen-footer-desc（四栏：品牌 / 关注我们 / 实用工具 /
   友情链接）与 MediaWiki:Citizen-footer-tagline（底栏版权）提供。
   注意：模板把 footer-desc 塞进 <p id="footer-desc">，<p> 不能包含 <div>，
   浏览器解析时会提前闭合 <p>，因此 .kuke-fnav 实际是 .citizen-footer__siteinfo
   的直接子元素；.kuke-fbot 同理是 #footer-tagline 的兄弟。样式按真实结构写。
   MediaWiki 会转义 wikitext 里的 <svg>，所以图标一律走 CSS mask-image。
   -------------------------------------------------------------------------- */

.citizen-footer {
	position: relative;
	z-index: 1;
	padding-block: 3rem;
	margin-top: 2.5rem;
	overflow: hidden;
	background-color: var( --color-surface-1 );
	border-block-start: 1px solid var( --border-color-base );
}

/* 顶边居中对称的 1px 品牌渐变线 */
.citizen-footer::before {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 1px;
	content: '';
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		rgb( 14 165 233 / 0.5 ) 50%,
		transparent 100%
	);
}

.citizen-footer__container {
	max-width: 1280px;
	padding-inline: 2rem;
	margin-inline: auto;
}

.citizen-footer__content {
	display: block;
	padding-block-end: 0;
}

/* siteinfo 交给 .kuke-fnav 自己排版 */
.citizen-footer__siteinfo {
	display: block;
	max-width: none;
	margin: 0;
}

/* 品牌 logo + 站名已在第一栏重建，隐藏皮肤自带的那一份 */
.citizen-footer__sitetitle {
	display: none;
}

/* footer-desc 是被浏览器掏空的 <p> 外壳 */
.citizen-footer__desc {
	margin: 0;
}

.citizen-footer__desc:empty {
	display: none;
}

/* ---- 四栏主体 ---------------------------------------------------------- */

.kuke-fnav__cols {
	display: grid;
	grid-template-columns: 1.35fr repeat( 3, minmax( 0, 1fr ) );
	gap: 2rem;
	margin-block-end: 3rem;
}

/* 第一栏：品牌 */
.kuke-fnav__brand {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.kuke-fnav__logo {
	flex: none;
	width: 40px;
	height: 40px;
	background-image: url( 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png' );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.2s var( --kuke-ease );
}

.kuke-fnav__brand:hover .kuke-fnav__logo {
	transform: scale( 1.1 );
}

.kuke-fnav__names {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.kuke-fnav__name {
	font-size: 1.25rem;
	font-weight: 700;
	color: var( --color-emphasized );
}

.kuke-fnav__sub {
	font-size: 0.75rem;
	color: var( --color-subtle );
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.85;
}

.kuke-fnav__about {
	margin-block-start: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: var( --color-subtle );
}

/* ---- 社交图标：36px 圆形按钮，图标走 mask ------------------------------ */

.kuke-fnav__social {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-block-start: 1.5rem;
}

.kuke-si a,
.kuke-si a.external {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	font-size: 0;
	line-height: 0;
	color: var( --color-subtle );
	text-decoration: none;
	background-image: none;
	background-color: transparent;
	border-radius: 999px;
	padding-inline-end: 0;
	transition: color 0.2s var( --kuke-ease ), background-color 0.2s var( --kuke-ease );
}

.kuke-si a::before {
	width: 20px;
	height: 20px;
	content: '';
	background-color: currentcolor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.kuke-si a:hover,
.kuke-si a:focus-visible {
	text-decoration: none;
	background-color: var( --color-surface-2 );
}

.kuke-si--qq a:hover {
	color: #0099ff;
}

.kuke-si--bili a:hover {
	color: #fb7299;
}

.kuke-si--gh a:hover,
.kuke-si--mail a:hover {
	color: var( --color-emphasized );
}

.kuke-si--qq a::before {
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M21.395 15.035a40 40 0 0 0-.803-2.264l-1.079-2.695c.001-.032.014-.562.014-.836C19.526 4.632 17.351 0 12 0S4.474 4.632 4.474 9.241c0 .274.013.804.014.836l-1.08 2.695a39 39 0 0 0-.802 2.264c-1.021 3.283-.69 4.643-.438 4.673.54.065 2.103-2.472 2.103-2.472 0 1.469.756 3.387 2.394 4.771-.612.188-1.363.479-1.845.835-.434.32-.379.646-.301.778.343.578 5.883.369 7.482.189 1.6.18 7.14.389 7.483-.189.078-.132.132-.458-.301-.778-.483-.356-1.233-.646-1.846-.836 1.637-1.384 2.393-3.302 2.393-4.771 0 0 1.563 2.537 2.103 2.472.251-.03.581-1.39-.438-4.673'/%3E%3C/svg%3E" );
}

.kuke-si--bili a::before {
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M17.813 4.653h.854c1.51.054 2.769.578 3.773 1.574 1.004.995 1.524 2.249 1.56 3.76v7.36c-.036 1.51-.556 2.769-1.56 3.773s-2.262 1.524-3.773 1.56H5.333c-1.51-.036-2.769-.556-3.773-1.56S.036 18.858 0 17.347v-7.36c.036-1.511.556-2.765 1.56-3.76 1.004-.996 2.262-1.52 3.773-1.574h.774l-1.174-1.12a1.234 1.234 0 0 1-.373-.906c0-.356.124-.658.373-.907l.027-.027c.267-.249.573-.373.92-.373.347 0 .653.124.92.373L9.653 4.44c.071.071.134.142.187.213h4.267a.836.836 0 0 1 .16-.213l2.853-2.747c.267-.249.573-.373.92-.373.347 0 .662.151.929.4.267.249.391.551.391.907 0 .355-.124.657-.373.906zM5.333 7.24c-.746.018-1.373.276-1.88.773-.506.498-.769 1.13-.786 1.894v7.52c.017.764.28 1.395.786 1.893.507.498 1.134.756 1.88.773h13.334c.746-.017 1.373-.275 1.88-.773.506-.498.769-1.129.786-1.893v-7.52c-.017-.765-.28-1.396-.786-1.894-.507-.497-1.134-.755-1.88-.773zM8 11.107c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c0-.373.129-.689.386-.947.258-.257.574-.386.947-.386zm8 0c.373 0 .684.124.933.373.25.249.383.569.4.96v1.173c-.017.391-.15.711-.4.96-.249.25-.56.374-.933.374s-.684-.125-.933-.374c-.25-.249-.383-.569-.4-.96V12.44c.017-.391.15-.711.4-.96.249-.249.56-.373.933-.373Z'/%3E%3C/svg%3E" );
}

.kuke-si--gh a::before {
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4'/%3E%3Cpath d='M9 18c-4.51 2-5-2-7-2'/%3E%3C/svg%3E" );
}

.kuke-si--mail a::before {
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E" );
}

/* ---- 2 / 3 / 4 栏：标题 + 链接列表 ------------------------------------- */

.kuke-fnav__title {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-block-end: 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	color: var( --color-emphasized );
	letter-spacing: 0;
}

.kuke-fnav__title::before {
	flex: none;
	width: 4px;
	height: 16px;
	content: '';
	background-color: var( --kuke-brand );
	border-radius: 999px;
}

.kuke-fnav__col ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.kuke-fnav__col li {
	margin-block: 0.75rem;
	line-height: 1.4;
}

.kuke-fnav__col li:first-child {
	margin-block-start: 0;
}

.kuke-fnav__col li:last-child {
	margin-block-end: 0;
}

.kuke-fnav__col li a,
.kuke-fnav__col li a.external {
	display: inline-block;
	font-size: 0.875rem;
	color: var( --color-subtle );
	text-decoration: none;
	background-image: none;
	padding-inline-end: 0;
	transition: color 0.2s var( --kuke-ease );
}

.kuke-fnav__col li a:hover,
.kuke-fnav__col li a:focus-visible {
	color: var( --kuke-brand-strong );
	text-decoration: none;
}

/* ---- footer-places：MediaWiki 必备的隐私 / 关于 / 免责声明 -------------- */

.citizen-footer__content #footer-places ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem 1.25rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.citizen-footer__content #footer-places li {
	margin: 0;
}

.citizen-footer__content #footer-places a {
	font-size: 0.75rem;
	color: var( --color-subtle );
	text-decoration: none;
	opacity: 0.8;
	transition: color 0.2s var( --kuke-ease ), opacity 0.2s var( --kuke-ease );
}

.citizen-footer__content #footer-places a:hover,
.citizen-footer__content #footer-places a:focus-visible {
	color: var( --kuke-brand-strong );
	text-decoration: none;
	opacity: 1;
}

/* ---- 底栏：版权 + Made with ♥ + MediaWiki 徽标 ------------------------- */

.citizen-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding-block-start: 2rem;
	margin-block-start: 2rem;
	border-block-start: 1px solid var( --border-color-base );
}

.citizen-footer__bottom #footer-tagline {
	flex: 1 1 auto;
	margin: 0;
}

.kuke-fbot {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
}

.kuke-fbot__c1 {
	font-size: 0.875rem;
	color: var( --color-subtle );
}

.kuke-fbot__c2 {
	margin-block-start: 0.25rem;
	font-size: 0.75rem;
	color: var( --color-subtle );
	opacity: 0.7;
}

.kuke-fbot__made {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.75rem;
	color: var( --color-subtle );
	opacity: 0.7;
}

.kuke-heart {
	width: 12px;
	height: 12px;
	background-color: #ef4444;
	mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E" );
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.citizen-footer__bottom #footer-icons {
	flex: none;
}

.citizen-footer__bottom #footer-icons ul {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0;
	margin: 0;
	list-style: none;
}

.citizen-footer__bottom #footer-icons img {
	opacity: 0.5;
	transition: opacity 0.2s var( --kuke-ease );
}

.citizen-footer__bottom #footer-icons a:hover img {
	opacity: 1;
}

/* ---- 响应式 ------------------------------------------------------------ */

@media ( max-width: 1024px ) {
	.kuke-fnav__cols {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: 2rem;
	}
}

@media ( max-width: 640px ) {
	.citizen-footer {
		padding-block: 2.5rem;
	}

	.citizen-footer__container {
		padding-inline: 1.25rem;
	}

	.kuke-fnav__cols {
		grid-template-columns: 1fr;
		gap: 2rem;
		margin-block-end: 2rem;
	}

	.kuke-fbot {
		flex-direction: column;
		align-items: flex-start;
	}

	.citizen-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* --------------------------------------------------------------------------
   22. 登录 / 注册 / 找回密码
   Special:UserLogin 等页面走 MediaWiki 核心的 HTMLForm + Codex，Citizen 只在
   skins.citizen.codex.styles 里给了一条：
       .skin-citizen .mw-ui-container > div { display:grid; place-content:center }
   #userloginForm 正是那个直接子 div，place-content:center 让 grid 轨道按内容
   收缩，整个表单塌到 input[size=20] 的固有宽度（196px），卡片里两侧大片留白。
   下面先定向解掉这条 grid 塌陷，再逐层把控件撑满卡片内宽。
   注意：站点 CSS 默认在登录页被禁用，需 LocalSettings.php 里
   $wgAllowSiteCSSOnRestrictedPages = true 才会加载本段。
   -------------------------------------------------------------------------- */

.mw-special-Userlogin .citizen-body-container,
.mw-special-CreateAccount .citizen-body-container,
.mw-special-PasswordReset .citizen-body-container {
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

/* 整页柔光背景：两团品牌色光斑，压在内容之下 */
.mw-special-Userlogin .mw-body,
.mw-special-CreateAccount .mw-body,
.mw-special-PasswordReset .mw-body {
	position: relative;
}

.mw-special-Userlogin .mw-body::before,
.mw-special-CreateAccount .mw-body::before,
.mw-special-PasswordReset .mw-body::before {
	position: fixed;
	z-index: -1;
	inset: 0;
	pointer-events: none;
	content: '';
	background-image:
		radial-gradient( circle at 18% 12%, var( --kuke-glow-a ), transparent 45% ),
		radial-gradient( circle at 82% 22%, var( --kuke-glow-b ), transparent 45% );
}

/* 页面标题：居中，去掉分隔线与操作区 */
.mw-special-Userlogin .citizen-page-header,
.mw-special-CreateAccount .citizen-page-header,
.mw-special-PasswordReset .citizen-page-header {
	padding-block-end: 0;
	border-block-end: 0;
}

/* 整条标题链路都拆成块级并撑满，否则 flex 子项按内容收缩，居中无从谈起 */
.mw-special-Userlogin .citizen-page-header-inner,
.mw-special-CreateAccount .citizen-page-header-inner,
.mw-special-PasswordReset .citizen-page-header-inner {
	display: block;
	width: 100%;
	border: 0;
}

.mw-special-Userlogin .citizen-page-heading,
.mw-special-CreateAccount .citizen-page-heading,
.mw-special-PasswordReset .citizen-page-heading {
	display: block;
	width: 100%;
}

.mw-special-Userlogin .firstHeading-container,
.mw-special-CreateAccount .firstHeading-container,
.mw-special-PasswordReset .firstHeading-container {
	display: block;
	width: 100%;
	text-align: center;
}

.mw-special-Userlogin .firstHeading,
.mw-special-CreateAccount .firstHeading,
.mw-special-PasswordReset .firstHeading {
	display: block;
	width: 100%;
	font-size: 1.75rem;
	text-align: center;
}

/* 标题下补一行说明文字，替代空荡的 siteSub */
.mw-special-Userlogin .firstHeading-container::after,
.mw-special-CreateAccount .firstHeading-container::after {
	display: block;
	width: 100%;
	margin-block-start: 0.5rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var( --color-subtle );
	text-align: center;
}

.mw-special-Userlogin .firstHeading-container::after {
	content: '登录后即可编辑条目、参与讨论并同步个人偏好设置';
}

.mw-special-CreateAccount .firstHeading-container::after {
	content: '创建账号，加入 KukeMC 官方百科的编辑与维护';
}

.mw-special-Userlogin .citizen-page-actions,
.mw-special-CreateAccount .citizen-page-actions,
.mw-special-PasswordReset .citizen-page-actions,
.mw-special-Userlogin .citizen-page-footer,
.mw-special-CreateAccount .citizen-page-footer,
.mw-special-PasswordReset .citizen-page-footer,
.mw-special-Userlogin .printfooter,
.mw-special-CreateAccount .printfooter,
.mw-special-PasswordReset .printfooter {
	display: none;
}

/* ---- 关键修复：解掉 Citizen 的 grid 塌陷 -------------------------------- */

.mw-special-Userlogin .mw-ui-container,
.mw-special-CreateAccount .mw-ui-container,
.mw-special-PasswordReset .mw-ui-container {
	gap: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
}

.mw-special-Userlogin .mw-ui-container > div,
.mw-special-CreateAccount .mw-ui-container > div,
.mw-special-PasswordReset .mw-ui-container > div {
	display: block;
	place-content: initial;
	padding: 0;
}

/* ---- 表单卡片 ---------------------------------------------------------- */

.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #userloginForm {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 25rem;
	padding: 2.25rem 2rem 2rem;
	margin-inline: auto;
	overflow: hidden;
	background-color: var( --kuke-card-bg );
	border: 1px solid var( --kuke-card-border );
	border-radius: 16px;
	box-shadow: var( --kuke-shadow-glow );
}

/* 卡片顶边品牌渐变条 */
.mw-special-Userlogin #userloginForm::before,
.mw-special-CreateAccount #userloginForm::before,
.mw-special-PasswordReset #userloginForm::before {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	content: '';
	background-image: linear-gradient(
		90deg,
		var( --kuke-brand ),
		var( --kuke-brand-light ),
		var( --kuke-brand-strong )
	);
}

/* 卡片内的站点 logo */
.mw-special-Userlogin #userloginForm::after,
.mw-special-CreateAccount #userloginForm::after,
.mw-special-PasswordReset #userloginForm::after {
	display: block;
	width: 52px;
	height: 52px;
	margin: 0 auto 1.25rem;
	content: '';
	background-image: url( https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png );
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border-radius: 13px;
	box-shadow: var( --kuke-shadow );
}

/* logo 是 ::after，默认排在最后，用 order 需要 flex —— 改用 flex 布局把它提到最前 */
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #userloginForm {
	display: flex;
	flex-direction: column;
}

.mw-special-Userlogin #userloginForm::after,
.mw-special-CreateAccount #userloginForm::after,
.mw-special-PasswordReset #userloginForm::after {
	order: -1;
	flex: 0 0 auto;
}

/* ---- 逐层撑满：表单 → 字段 → 控件 -------------------------------------- */

.mw-special-Userlogin .mw-htmlform,
.mw-special-CreateAccount .mw-htmlform,
.mw-special-PasswordReset .mw-htmlform,
.mw-special-Userlogin .mw-htmlform-codex,
.mw-special-CreateAccount .mw-htmlform-codex,
.mw-special-PasswordReset .mw-htmlform-codex {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
}

.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field,
.mw-special-Userlogin .cdx-field__control,
.mw-special-CreateAccount .cdx-field__control,
.mw-special-PasswordReset .cdx-field__control {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
}

.mw-special-Userlogin .cdx-text-input,
.mw-special-CreateAccount .cdx-text-input,
.mw-special-PasswordReset .cdx-text-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: none;
	min-width: 0;
}

.mw-special-Userlogin .cdx-text-input__input,
.mw-special-CreateAccount .cdx-text-input__input,
.mw-special-PasswordReset .cdx-text-input__input {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-width: 0;
	min-height: 44px;
	padding: 0.6rem 0.85rem;
	font-size: 0.9375rem;
	border-radius: 8px;
	transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );
}

.mw-special-Userlogin .cdx-text-input__input:focus,
.mw-special-CreateAccount .cdx-text-input__input:focus,
.mw-special-PasswordReset .cdx-text-input__input:focus {
	border-color: var( --kuke-brand );
	outline: 0;
	box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

/* 字段标签 */
.mw-special-Userlogin .cdx-label__label,
.mw-special-CreateAccount .cdx-label__label,
.mw-special-PasswordReset .cdx-label__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --color-emphasized );
}

.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field {
	margin-block: 0 1rem;
}

/* ---- 主按钮 ------------------------------------------------------------ */

.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit,
.mw-special-Userlogin #mw-createaccount-join,
.mw-special-CreateAccount #mw-createaccount-join {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 44px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	border: 0;
	border-radius: 8px;
	transition: transform 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), filter 0.18s var( --kuke-ease );
}

.mw-special-Userlogin .cdx-button--action-progressive,
.mw-special-CreateAccount .cdx-button--action-progressive,
.mw-special-PasswordReset .cdx-button--action-progressive,
.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit {
	background-color: var( --kuke-brand );
	background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );
}

.mw-special-Userlogin .mw-htmlform-submit:hover,
.mw-special-CreateAccount .mw-htmlform-submit:hover,
.mw-special-PasswordReset .mw-htmlform-submit:hover,
.mw-special-Userlogin #mw-createaccount-join:hover,
.mw-special-CreateAccount #mw-createaccount-join:hover {
	color: #fff;
	filter: brightness( 1.06 );
	border: 0;
	box-shadow: var( --kuke-shadow-brand );
	transform: translateY( -1px );
}

.mw-special-Userlogin .mw-htmlform-submit:active,
.mw-special-CreateAccount .mw-htmlform-submit:active,
.mw-special-PasswordReset .mw-htmlform-submit:active {
	transform: translateY( 0 );
}

/* 提交按钮所在字段：拉开与上一个输入框的距离 */
.mw-special-Userlogin .mw-htmlform-field-HTMLSubmitField,
.mw-special-CreateAccount .mw-htmlform-field-HTMLSubmitField,
.mw-special-PasswordReset .mw-htmlform-field-HTMLSubmitField {
	margin-block-start: 0.5rem;
	margin-block-end: 0;
}

/* ---- 辅助链接（忘记密码 / 创建账号 / 帮助）----------------------------- */

.mw-special-Userlogin .mw-htmlform-field-HTMLInfoField,
.mw-special-CreateAccount .mw-htmlform-field-HTMLInfoField {
	font-size: 0.8125rem;
	text-align: center;
}

.mw-special-Userlogin #mw-form-poweredby,
.mw-special-CreateAccount #mw-form-poweredby,
.mw-special-Userlogin #footer-poweredbyico,
.mw-special-CreateAccount #footer-poweredbyico {
	display: none;
}

/* 忘记密码 / 登录帮助：紧凑成一行，不各自画分隔线 */
.mw-special-Userlogin .mw-form-related-link-container,
.mw-special-CreateAccount .mw-form-related-link-container {
	display: inline-block;
	padding: 0;
	margin: 0.75rem 0.5rem 0;
	font-size: 0.8125rem;
	text-align: center;
	border: 0;
}

.mw-special-Userlogin .mw-form-related-link-container .cdx-field__control,
.mw-special-CreateAccount .mw-form-related-link-container .cdx-field__control {
	margin: 0;
}

.mw-special-Userlogin .mw-form-related-link-container a,
.mw-special-CreateAccount .mw-form-related-link-container a {
	font-weight: 600;
	color: var( --kuke-brand );
	text-decoration: none;
}

.mw-special-Userlogin .mw-form-related-link-container a:hover,
.mw-special-CreateAccount .mw-form-related-link-container a:hover {
	text-decoration: underline;
}

/* 底部「还没有账号？」区块：分隔线只画一次，按钮撑满 */
.mw-special-Userlogin #mw-createaccount-cta {
	display: block;
	padding-block-start: 1.25rem;
	margin-block-start: 1.25rem;
	font-size: 0.8125rem;
	color: var( --color-subtle );
	text-align: center;
	border-block-start: 1px solid var( --kuke-card-border );
}

.mw-special-Userlogin #mw-createaccount-join.cdx-button {
	box-sizing: border-box;
	display: block;
	width: 100%;
	min-height: 2.5rem;
	margin-block-start: 0.75rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var( --kuke-brand-strong );
	background: transparent;
	border: 1px solid var( --kuke-brand );
	border-radius: 10px;
	box-shadow: none;
	transition: background-color 0.2s var( --kuke-ease ), color 0.2s var( --kuke-ease );
}

.mw-special-Userlogin #mw-createaccount-join.cdx-button:hover {
	color: #fff;
	background: var( --kuke-brand );
}

/* 错误 / 提示消息盒 */
.mw-special-Userlogin .cdx-message,
.mw-special-CreateAccount .cdx-message,
.mw-special-PasswordReset .cdx-message {
	box-sizing: border-box;
	width: 100%;
	margin-block-end: 1rem;
	font-size: 0.8125rem;
	border-radius: 8px;
}

/* ---- 注册页：表单 + 权益说明两列 --------------------------------------- */

.mw-special-CreateAccount .mw-ui-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
	justify-content: center;
	max-width: 52rem;
	margin-inline: auto;
}

.mw-special-CreateAccount #userloginForm {
	flex: 0 1 25rem;
	margin-inline: 0;
}

.mw-special-CreateAccount .mw-createacct-benefits-container {
	box-sizing: border-box;
	flex: 0 1 23rem;
	max-width: 23rem;
	padding: 2rem 1.75rem;
	background-color: var( --kuke-notice-bg );
	border: 1px solid var( --kuke-card-border );
	border-radius: 16px;
}

.mw-special-CreateAccount .mw-createacct-benefits-heading {
	margin-block: 0 1rem;
	font-size: 1rem;
	font-weight: 700;
	color: var( --color-emphasized );
}

/* 核心把三条统计做成 div.mw-number-text，并用 95px 左内边距给一张 PNG 图标
   留位（background-image + no-repeat left center）。那三张 PNG 是灰底位图，
   在本站配色下很脏，这里整个换掉：改成三格统计卡，图标用 CSS 画。 */
.mw-special-CreateAccount .mw-createacct-benefits-list {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 0.75rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
	box-sizing: border-box;
	display: block;
	padding: 0.9rem 0.5rem;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --color-subtle );
	text-align: center;
	background-color: var( --kuke-card-bg );
	background-image: none;
	border: 1px solid var( --kuke-card-border );
	border-radius: 10px;
}

.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text p {
	margin: 0;
}

.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text strong {
	display: block;
	margin-block-end: 0.15rem;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --kuke-brand-strong );
	text-align: center;
}

/* 统计卡下面补一段说明 + 三条要点，让右栏不至于太空 */
.mw-special-CreateAccount .mw-createacct-benefits-container::after {
	display: block;
	padding-block-start: 1.25rem;
	margin-block-start: 1.25rem;
	font-size: 0.8125rem;
	line-height: 1.9;
	color: var( --color-subtle );
	white-space: pre-line;
	content: '注册后你可以：\A· 编辑与创建条目，完善服务器资料\A· 参与讨论页，与其他编辑者协作\A· 保存个人偏好、监视列表与编辑历史\A· 上传与整理子服玩法截图和数据';
	border-block-start: 1px solid var( --kuke-card-border );
}

@media ( max-width: 900px ) {
	.mw-special-CreateAccount .mw-ui-container {
		max-width: 27rem;
	}

	.mw-special-CreateAccount .mw-createacct-benefits-container {
		flex: 1 1 100%;
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   23. 横版登录 / 注册弹窗
   kuke-auth.js 在本地渲染表单（不再抓取 Special 页面的 HTML），提交走
   Action API，因此这里的控件样式全部按 .kuke-auth 作用域自己写。
   弹窗高度锁定，表单区内部滚动，标题与切换标签 sticky 不跟着滚。
   z-index 取 1000：Citizen 顶栏是 200，抽屉/下拉都在 300 以内。
   -------------------------------------------------------------------------- */

.kuke-auth {
	position: fixed;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	inset: 0;
}

.kuke-auth[hidden] {
	display: none;
}

body.kuke-auth-open {
	overflow: hidden;
}

.kuke-auth__backdrop {
	position: absolute;
	background-color: rgba( 15, 23, 42, 0.55 );
	backdrop-filter: blur( 6px );
	inset: 0;
	animation: kuke-auth-fade 0.25s var( --kuke-ease ) both;
}

.kuke-auth__dialog {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 17.5rem minmax( 0, 1fr );
	width: 100%;
	max-width: 46rem;
	height: min( 38rem, calc( 100vh - 3rem ) );
	overflow: hidden;
	background-color: var( --kuke-card-bg );
	border: 1px solid var( --kuke-card-border );
	border-radius: 18px;
	box-shadow: 0 24px 64px rgba( 15, 23, 42, 0.28 );
	animation: kuke-auth-pop 0.34s cubic-bezier( 0.34, 1.56, 0.64, 1 ) both;
}

@keyframes kuke-auth-fade {
	from {
		opacity: 0;
	}
}

@keyframes kuke-auth-pop {
	from {
		opacity: 0;
		transform: translateY( 24px ) scale( 0.94 );
	}
}

@keyframes kuke-auth-rise {
	from {
		opacity: 0;
		transform: translateY( 10px );
	}
}

@keyframes kuke-auth-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* ---- 左：品牌栏 -------------------------------------------------------- */

.kuke-auth__aside {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 2rem 1.75rem;
	overflow: hidden;
	color: #fff;
	background-image: linear-gradient(
		160deg,
		var( --kuke-brand ) 0%,
		var( --kuke-brand-strong ) 55%,
		#075985 100%
	);
}

.kuke-auth__logo {
	display: block;
	width: 44px;
	height: 44px;
	margin-block-end: 1rem;
	border-radius: 11px;
	box-shadow: 0 4px 14px rgba( 8, 47, 73, 0.35 );
}

.kuke-auth__brand {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

.kuke-auth__tagline {
	margin-block: 0.25rem 1.5rem;
	font-size: 0.8125rem;
	color: rgba( 255, 255, 255, 0.78 );
}

.kuke-auth__points {
	padding: 0;
	margin: 0;
	list-style: none;
}

.kuke-auth__point {
	display: flex;
	gap: 0.625rem;
	align-items: flex-start;
	margin-block-end: 0.875rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.92 );
}

.kuke-auth__point-icon {
	flex: 0 0 auto;
	margin-block-start: 1px;
	color: rgba( 255, 255, 255, 0.7 );
}

.kuke-auth__note {
	padding-block-start: 1.25rem;
	margin: auto 0 0;
	font-size: 0.75rem;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.68 );
	border-block-start: 1px solid rgba( 255, 255, 255, 0.22 );
}

/* ---- 右：表单栏（内部滚动） -------------------------------------------- */

.kuke-auth__main {
	box-sizing: border-box;
	min-height: 0;
	padding: 0 2rem 1.75rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var( --border-color-base ) transparent;
}

.kuke-auth__main::-webkit-scrollbar {
	width: 8px;
}

.kuke-auth__main::-webkit-scrollbar-track {
	background: transparent;
}

.kuke-auth__main::-webkit-scrollbar-thumb {
	background-color: var( --border-color-base );
	border: 2px solid var( --kuke-card-bg );
	border-radius: 8px;
}

.kuke-auth__main::-webkit-scrollbar-thumb:hover {
	background-color: var( --border-color-interactive );
}

/* 标题与切换标签固定在滚动区顶部 */
.kuke-auth__head {
	position: sticky;
	z-index: 3;
	padding-block: 2rem 1.25rem;
	background-color: var( --kuke-card-bg );
	inset-block-start: 0;
}

.kuke-auth__head::after {
	position: absolute;
	height: 1.25rem;
	pointer-events: none;
	content: '';
	background-image: linear-gradient( to bottom, var( --kuke-card-bg ), transparent );
	inset-block-start: 100%;
	inset-inline: 0;
}

.kuke-auth__close {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	color: var( --color-subtle );
	cursor: pointer;
	background-color: transparent;
	border: 0;
	border-radius: 8px;
	inset-block-start: 0.75rem;
	inset-inline-end: 0.75rem;
	transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );
}

.kuke-auth__close:hover {
	color: var( --color-emphasized );
	background-color: var( --color-surface-2 );
}

.kuke-auth__tabs {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	margin-block-end: 1.125rem;
	background-color: var( --color-surface-2 );
	border-radius: 10px;
}

.kuke-auth__tab {
	padding: 0.4rem 1.1rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var( --color-subtle );
	cursor: pointer;
	background-color: transparent;
	border: 0;
	border-radius: 8px;
	transition: background-color 0.18s var( --kuke-ease ), color 0.18s var( --kuke-ease );
}

.kuke-auth__tab:hover {
	color: var( --color-emphasized );
}

.kuke-auth__tab--active {
	color: var( --kuke-brand-strong );
	background-color: var( --kuke-card-bg );
	box-shadow: var( --kuke-shadow );
}

.kuke-auth__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var( --color-emphasized );
	border: 0;
}

.kuke-auth__sub {
	margin-block: 0.375rem 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var( --color-subtle );
}

.kuke-auth__body {
	animation: kuke-auth-rise 0.3s var( --kuke-ease ) 0.06s both;
}

/* ---- 表单控件 ---------------------------------------------------------- */

.kuke-auth__form {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	margin: 0;
}

.kuke-auth__field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.kuke-auth__label {
	display: flex;
	gap: 0.5rem;
	align-items: baseline;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var( --color-emphasized );
}

.kuke-auth__optional {
	font-size: 0.6875rem;
	font-weight: 500;
	color: var( --color-subtle );
}

.kuke-auth__control {
	position: relative;
	display: block;
}

.kuke-auth__input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	height: 2.75rem;
	padding: 0 0.875rem;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var( --color-base );
	background-color: var( --color-surface-0 );
	border: 1px solid var( --border-color-base );
	border-radius: 10px;
	transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );
}

.kuke-auth__input::placeholder {
	color: var( --color-subtle );
}

.kuke-auth__input:hover {
	border-color: var( --border-color-interactive );
}

.kuke-auth__input:focus {
	background-color: var( --kuke-card-bg );
	border-color: var( --kuke-brand );
	outline: 0;
	box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

.kuke-auth__control--peek .kuke-auth__input {
	padding-inline-end: 2.75rem;
}

.kuke-auth__peek {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	color: var( --color-subtle );
	cursor: pointer;
	background-color: transparent;
	border: 0;
	border-radius: 7px;
	inset-block-start: 50%;
	inset-inline-end: 0.375rem;
	transform: translateY( -50% );
	transition: color 0.18s var( --kuke-ease ), background-color 0.18s var( --kuke-ease );
}

.kuke-auth__peek:hover {
	color: var( --kuke-brand-strong );
	background-color: var( --color-surface-2 );
}

.kuke-auth__hint {
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var( --color-subtle );
}

/* 验证码题面 */
.kuke-auth__captcha {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	padding: 0.5rem 0.75rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var( --color-emphasized );
	background-color: var( --kuke-brand-pale );
	border-radius: 8px;
}

.kuke-auth__captcha-q {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.kuke-auth__check {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-size: 0.8125rem;
	color: var( --color-subtle );
	cursor: pointer;
}

.kuke-auth__check input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var( --kuke-brand );
	cursor: pointer;
}

.kuke-auth__submit {
	box-sizing: border-box;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 2.875rem;
	margin-block-start: 0.375rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );
	border: 0;
	border-radius: 10px;
	transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );
}

.kuke-auth__submit:hover {
	filter: brightness( 1.06 );
	box-shadow: var( --kuke-shadow-brand );
	transform: translateY( -1px );
}

.kuke-auth__submit:active {
	transform: translateY( 0 );
}

.kuke-auth__submit[disabled] {
	cursor: default;
	opacity: 0.75;
	box-shadow: none;
	transform: none;
}

.kuke-auth__spinner {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-block-start-color: #fff;
	border-radius: 50%;
	animation: kuke-auth-spin 0.7s linear infinite;
}

/* 错误提示条 */
.kuke-auth__alert {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	padding: 0.75rem 0.875rem;
	margin-block-end: 1rem;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: #b91c1c;
	background-color: rgba( 239, 68, 68, 0.1 );
	border-inline-start: 3px solid #ef4444;
	border-radius: 8px;
	animation: kuke-auth-rise 0.22s var( --kuke-ease ) both;
}

.kuke-auth__alert[hidden] {
	display: none;
}

.kuke-auth__alert-icon {
	flex: 0 0 auto;
	margin-block-start: 1px;
}

.kuke-auth__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
	justify-content: center;
	margin-block: 1.125rem 0;
	font-size: 0.8125rem;
	color: var( --color-subtle );
}

.kuke-auth__foot a {
	font-weight: 600;
	color: var( --kuke-brand );
	text-decoration: none;
}

.kuke-auth__foot a:hover {
	text-decoration: underline;
}

.kuke-auth__dot {
	color: var( --border-color-base );
}

/* ---- 窄屏：品牌栏收成顶部横条 ------------------------------------------ */

@media ( max-width: 720px ) {
	.kuke-auth {
		padding: 0;
		align-items: flex-end;
	}

	.kuke-auth__dialog {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-rows: auto minmax( 0, 1fr );
		height: auto;
		max-height: 92vh;
		border-radius: 18px 18px 0 0;
	}

	.kuke-auth__aside {
		flex-direction: row;
		gap: 0.75rem;
		align-items: center;
		padding: 1.25rem 1.5rem;
	}

	.kuke-auth__logo {
		width: 36px;
		height: 36px;
		margin-block-end: 0;
	}

	.kuke-auth__tagline {
		margin-block: 0;
	}

	.kuke-auth__points,
	.kuke-auth__note {
		display: none;
	}

	.kuke-auth__main {
		padding-inline: 1.5rem;
	}

	.kuke-auth__head {
		padding-block: 1.5rem 1rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.kuke-auth__backdrop,
	.kuke-auth__dialog,
	.kuke-auth__body,
	.kuke-auth__alert {
		animation: none;
	}

	.kuke-auth__submit:hover {
		transform: none;
	}
}
/* --------------------------------------------------------------------------
   25. 页面切换过渡
   以前点链接是硬切：旧页面整屏瞬间消失、新页面瞬间顶上来，中间那一下很跳。
   这里用浏览器原生的跨文档视图过渡（View Transitions），让新旧两页交叉淡接。
   整个过程跑在合成器线程上，不占主线程，也不加任何脚本或额外 DOM。
   不支持的浏览器会照旧直接切换，没有副作用，也不需要降级代码。
   -------------------------------------------------------------------------- */

@view-transition {
	navigation: auto;
}

/* 默认 0.25s 用在整屏交叉淡接上略显拖沓，收紧一点，切换才跟手 */
::view-transition-group( root ) {
	animation-duration: 0.22s;
	animation-timing-function: cubic-bezier( 0.4, 0, 0.2, 1 );
}

/* 系统开了「减少动态效果」就退回直接切换 */
@media ( prefers-reduced-motion: reduce ) {
	@view-transition {
		navigation: none;
	}
}