Kuke Wiki - 用户贡献 [zh]

MediaWiki:Citizen.css

2026-08-20T05:40:18Z

Admin：footer: 1:1 kuke.ink 样式

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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;
}
}

MediaWiki:Citizen-footer-tagline

2026-08-20T05:40:16Z

Admin：footer: 底栏版权

<div class="kuke-fbot">
<div class="kuke-fbot__copy">
<div class="kuke-fbot__c1">© 2026 KukeMC Server. All rights reserved.</div>
<div class="kuke-fbot__c2">Not affiliated with Mojang Studios.</div>
</div>
<div class="kuke-fbot__made"><span>Made with</span><span class="kuke-heart"></span><span>by KukeMC Team</span></div>
</div>

MediaWiki:Citizen-footer-desc

2026-08-20T05:40:12Z

Admin：footer: 1:1 kuke.ink 四栏结构

<div class="kuke-fnav">
<div class="kuke-fnav__cols">
<div class="kuke-fnav__col kuke-fnav__col--brand">
<div class="kuke-fnav__brand"><span class="kuke-fnav__logo"></span><span class="kuke-fnav__names"><span class="kuke-fnav__name">KukeMC</span><span class="kuke-fnav__sub">Minecraft Server</span></span></div>
<div class="kuke-fnav__about">一个温馨和谐的多玩法群组服务器，致力于提供稳定流畅的游戏体验。在这里，你可以找到属于自己的快乐。</div>
<div class="kuke-fnav__social"><span class="kuke-si kuke-si--qq">[https://qm.qq.com/q/GLZnakrlaq QQ 群]</span><span class="kuke-si kuke-si--bili">[https://space.bilibili.com/3546652948302452 哔哩哔哩]</span><span class="kuke-si kuke-si--gh">[https://github.com/kukemc/KukeMC-WebSite GitHub]</span><span class="kuke-si kuke-si--mail">[mailto:admin@kuke.ink 邮箱]</span></div>
</div>
<div class="kuke-fnav__col">
<div class="kuke-fnav__title">关注我们</div>
* [https://klpbbs.com/thread-151387-1-1.html 苦力怕论坛宣传贴]
* [https://space.bilibili.com/3546652948302452/ B站官方账号]
* [https://www.mclists.cn/server/7682.html MClists服务器列表]
* [https://www.minebbs.com/threads/1-6-1-21-kukemc.29497/ Minebbs宣传贴]
</div>
<div class="kuke-fnav__col">
<div class="kuke-fnav__title">实用工具</div>
* [[首页|KukeWiki 官方百科]]
* [https://kuke.ink/bans 服务器封禁玩家列表]
* [https://kuke.ink/players 服务器在线玩家]
* [https://kuke.ink/messages 服务器玩家留言板]
</div>
<div class="kuke-fnav__col">
<div class="kuke-fnav__title">友情链接</div>
* [https://sipc.ink/ SIPC的个人主页]
* [https://bd6jzu.ink/ BD6JZU的主页]
* [https://lyrify.cloud/ lyrify]
* [https://www.minecraft.net/ Minecraft]
</div>
</div>
</div>

MediaWiki:Common.js

2026-08-20T05:20:27Z

Admin：auth modal: local form + API submit

/* 在 Citizen 顶栏的官方预留槽位 .citizen-header__start 内注入横向主导航。
注意：不要插到 .citizen-header 根节点上——那里是 logo / 搜索 / 抽屉的 flex 行，
插进去会跟它们抢空间导致错位。__start 是皮肤留空的导航槽。 */
( function () {
'use strict';

var LINKS = [
{ text: '首页', page: '首页', match: /^(首页|Main_Page)$/ },
{ text: '子服一览', page: '子服一览', match: /^(子服一览|趣味生存|粘液空岛|纯净生存|机械动力|职业战争|起床战争|僵尸末日|避暑山庄)(\/|$)/ },
{ text: '总规章', page: 'KukeMC群组服总规章', match: /^KukeMC群组服总规章(\/|$)/ },
{ text: '常见问题', page: '服务器常见问题', match: /^服务器常见问题(\/|$)/ },
{ text: '历史资料', page: '历史资料展览馆', match: /^历史资料展览馆(\/|$)/ },
{ text: '全部条目', page: 'Special:AllPages', match: /^Special:AllPages$/i },
{ text: '分类', page: 'Special:Categories', match: /^Special:Categories$/i },
{ text: '最近更改', page: 'Special:RecentChanges', match: /^Special:RecentChanges$/i }
];

function build() {
var slot = document.querySelector( '.citizen-header__start' );
if ( !slot || slot.querySelector( '.kuke-nav' ) ) {
return;
}

var page = mw.config.get( 'wgPageName' );
var nav = document.createElement( 'nav' );
nav.className = 'kuke-nav';
nav.setAttribute( 'aria-label', '主导航' );

LINKS.forEach( function ( item ) {
var a = document.createElement( 'a' );
a.className = 'kuke-nav__link';
a.href = mw.util.getUrl( item.page );
a.textContent = item.text;
if ( item.match.test( page ) ) {
a.classList.add( 'kuke-nav__link--active' );
a.setAttribute( 'aria-current', 'page' );
}
nav.appendChild( a );
} );

slot.appendChild( nav );
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', build );
} else {
build();
}
}() );
/* 横版登录 / 注册弹窗。
表单在本地直接渲染（不再抓取 Special 页面的 HTML），提交走 Action API
clientlogin / createaccount，token 在页面加载时就后台预取，
因此弹窗打开即可用，没有等待。
独立页面 Special:UserLogin / Special:CreateAccount 保留，无 JS 时仍可用。 */
( function () {
'use strict';

var LOGO = 'https://m.ccw.site/gandi_application/user_assets/2a6bb37880317d2bb5525ab560618e04.png';

var MODES = {
login: {
page: 'Special:UserLogin',
tab: '登录',
title: '登录到 Kuke Wiki',
sub: '登录后即可编辑条目、参与讨论并同步个人偏好设置。',
submit: '登录',
busy: '正在登录…'
},
signup: {
page: 'Special:CreateAccount',
tab: '注册',
title: '创建账号',
sub: '加入 KukeMC 官方百科的编辑与维护，只需一分钟。',
submit: '创建账号',
busy: '正在创建…'
}
};

var FIELDS = {
login: [
{ name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },
{ name: 'password', label: '密码', type: 'password', autocomplete: 'current-password', required: true },
{ name: 'rememberMe', label: '在此浏览器上保持登录', type: 'checkbox' }
],
signup: [
{ name: 'username', label: '用户名', type: 'text', autocomplete: 'username', required: true },
{ name: 'password', label: '密码', type: 'password', autocomplete: 'new-password', required: true },
{ name: 'retype', label: '确认密码', type: 'password', autocomplete: 'new-password', required: true },
{ name: 'email', label: '电子邮件', type: 'email', autocomplete: 'email', hint: '选填，用于找回密码' },
{ name: 'captchaWord', label: '验证码', type: 'captcha', required: true }
]
};

var POINTS = [
{ icon: 'pencil', text: '编辑与创建条目，完善服务器资料' },
{ icon: 'chat', text: '参与讨论页，与其他编辑者协作' },
{ icon: 'star', text: '保存个人偏好、监视列表与编辑历史' },
{ icon: 'clock', text: '追踪最近更改，第一时间了解更新' }
];

var ICONS = {
pencil: 'M13.5 2.5a2.12 2.12 0 0 1 3 3L7 15l-4 1 1-4Z',
chat: 'M3 5.5A1.5 1.5 0 0 1 4.5 4h11A1.5 1.5 0 0 1 17 5.5v7a1.5 1.5 0 0 1-1.5 1.5H8l-4 3v-3h-.5A1.5 1.5 0 0 1 3 12.5Z',
star: 'm10 2.6 2.3 4.66 5.15.75-3.72 3.63.88 5.12L10 14.34l-4.6 2.42.87-5.12L2.55 8l5.15-.75Z',
clock: 'M10 2.5a7.5 7.5 0 1 1 0 15 7.5 7.5 0 0 1 0-15Zm0 3.6v4.2l3 1.8',
close: 'M5 5l10 10M15 5L5 15',
eye: 'M1.8 10S4.9 4.7 10 4.7 18.2 10 18.2 10 15.1 15.3 10 15.3 1.8 10 1.8 10Zm8.2 2.2a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z',
eyeOff: 'M3 3l14 14M8.2 8.3A2.2 2.2 0 0 0 10 12.2c.6 0 1.1-.2 1.6-.6M6.1 6.2C3.6 7.6 1.8 10 1.8 10s3.1 5.3 8.2 5.3c1.4 0 2.6-.4 3.7-1M15.5 13C17.3 11.8 18.2 10 18.2 10S15.1 4.7 10 4.7c-.7 0-1.4.1-2 .3',
alert: 'M10 6.6v4.2m0 2.6h.01M8.6 3.2 2.2 14.4A1.6 1.6 0 0 0 3.6 16.8h12.8a1.6 1.6 0 0 0 1.4-2.4L11.4 3.2a1.6 1.6 0 0 0-2.8 0Z'
};

var root = null;
var main = null;
var body = null;
var titleEl = null;
var subEl = null;
var alertEl = null;
var lastFocus = null;
var current = null;
var api = null;
var apiReady = null;
var tokens = {};
var captcha = null;
var submitting = false;

function svg( d, cls, size ) {
var s = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
s.setAttribute( 'viewBox', '0 0 20 20' );
s.setAttribute( 'width', size || '18' );
s.setAttribute( 'height', size || '18' );
s.setAttribute( 'aria-hidden', 'true' );
s.setAttribute( 'fill', 'none' );
s.setAttribute( 'stroke', 'currentColor' );
s.setAttribute( 'stroke-width', '1.6' );
s.setAttribute( 'stroke-linecap', 'round' );
s.setAttribute( 'stroke-linejoin', 'round' );
if ( cls ) {
s.setAttribute( 'class', cls );
}
var p = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
p.setAttribute( 'd', d );
s.appendChild( p );
return s;
}

function el( tag, cls, text ) {
var n = document.createElement( tag );
if ( cls ) {
n.className = cls;
}
if ( text ) {
n.textContent = text;
}
return n;
}

function returnTarget() {
var page = mw.config.get( 'wgPageName' );
if ( /^Special:(UserLogin|CreateAccount|UserLogout)$/i.test( page ) ) {
return mw.config.get( 'wgMainPageTitle' ) || '首页';
}
return page;
}

function returnUrl() {
return location.origin + mw.util.getUrl( returnTarget() );
}

/* ---------- API ---------- */

function ready() {
if ( !apiReady ) {
apiReady = mw.loader.using( [ 'mediawiki.api', 'mediawiki.util' ] ).then( function () {
api = new mw.Api();
return api;
} );
}
return apiReady;
}

function token( type ) {
if ( tokens[ type ] ) {
return tokens[ type ];
}
tokens[ type ] = ready().then( function () {
return api.get( {
action: 'query',
meta: 'tokens',
type: type,
formatversion: 2
} );
} ).then( function ( d ) {
return d.query.tokens[ type + 'token' ];
} );
return tokens[ type ];
}

/* QuestyCaptcha 的题面与 id，每次进入注册态重新取（旧 id 会失效） */
function loadCaptcha() {
return ready().then( function () {
return api.get( {
action: 'query',
meta: 'authmanagerinfo',
amirequestsfor: 'create',
formatversion: 2
} );
} ).then( function ( d ) {
var reqs = ( d.query && d.query.authmanagerinfo && d.query.authmanagerinfo.requests ) || [];
var hit = null;
reqs.forEach( function ( r ) {
if ( r.id && r.id.indexOf( 'Captcha' ) !== -1 && r.fields && r.fields.captchaId ) {
hit = r;
}
} );
if ( !hit ) {
return null;
}
return {
id: hit.fields.captchaId.value,
question: hit.fields.captchaInfo ? hit.fields.captchaInfo.value : '',
label: ( hit.fields.captchaWord && hit.fields.captchaWord.label ) || '验证码'
};
} ).catch( function () {
return null;
} );
}

/* ---------- 结构 ---------- */

function build() {
root = el( 'div', 'kuke-auth' );
root.hidden = true;

var backdrop = el( 'div', 'kuke-auth__backdrop' );
backdrop.addEventListener( 'click', close );
root.appendChild( backdrop );

var dialog = el( 'div', 'kuke-auth__dialog' );
dialog.setAttribute( 'role', 'dialog' );
dialog.setAttribute( 'aria-modal', 'true' );
dialog.setAttribute( 'aria-labelledby', 'kuke-auth-title' );

var closeBtn = el( 'button', 'kuke-auth__close' );
closeBtn.type = 'button';
closeBtn.setAttribute( 'aria-label', '关闭' );
closeBtn.appendChild( svg( ICONS.close ) );
closeBtn.addEventListener( 'click', close );
dialog.appendChild( closeBtn );

// 左：品牌栏
var aside = el( 'aside', 'kuke-auth__aside' );
var logo = el( 'img', 'kuke-auth__logo' );
logo.src = LOGO;
logo.alt = '';
logo.width = 44;
logo.height = 44;
aside.appendChild( logo );
aside.appendChild( el( 'p', 'kuke-auth__brand', 'Kuke Wiki' ) );
aside.appendChild( el( 'p', 'kuke-auth__tagline', 'KukeMC 群组服官方百科' ) );

var ul = el( 'ul', 'kuke-auth__points' );
POINTS.forEach( function ( item ) {
var li = el( 'li', 'kuke-auth__point' );
li.appendChild( svg( ICONS[ item.icon ], 'kuke-auth__point-icon' ) );
li.appendChild( el( 'span', null, item.text ) );
ul.appendChild( li );
} );
aside.appendChild( ul );
aside.appendChild( el( 'p', 'kuke-auth__note', '本站内容由社区共同维护，欢迎参与。' ) );
dialog.appendChild( aside );

// 右：表单栏
main = el( 'div', 'kuke-auth__main' );

var head = el( 'div', 'kuke-auth__head' );
var tabs = el( 'div', 'kuke-auth__tabs' );
tabs.setAttribute( 'role', 'tablist' );
Object.keys( MODES ).forEach( function ( key ) {
var b = el( 'button', 'kuke-auth__tab', MODES[ key ].tab );
b.type = 'button';
b.dataset.mode = key;
b.setAttribute( 'role', 'tab' );
b.addEventListener( 'click', function () {
render( key );
} );
tabs.appendChild( b );
} );
head.appendChild( tabs );

titleEl = el( 'h2', 'kuke-auth__title' );
titleEl.id = 'kuke-auth-title';
head.appendChild( titleEl );
subEl = el( 'p', 'kuke-auth__sub' );
head.appendChild( subEl );
main.appendChild( head );

body = el( 'div', 'kuke-auth__body' );
main.appendChild( body );
dialog.appendChild( main );

root.appendChild( dialog );
document.body.appendChild( root );
}

/* ---------- 表单 ---------- */

function passwordToggle( input ) {
var btn = el( 'button', 'kuke-auth__peek' );
btn.type = 'button';
btn.setAttribute( 'aria-label', '显示密码' );
btn.appendChild( svg( ICONS.eye, null, '17' ) );
btn.addEventListener( 'click', function () {
var show = input.type === 'password';
input.type = show ? 'text' : 'password';
btn.setAttribute( 'aria-label', show ? '隐藏密码' : '显示密码' );
btn.textContent = '';
btn.appendChild( svg( show ? ICONS.eyeOff : ICONS.eye, null, '17' ) );
input.focus();
} );
return btn;
}

function field( spec, form ) {
if ( spec.type === 'checkbox' ) {
var wrap = el( 'label', 'kuke-auth__check' );
var box = el( 'input' );
box.type = 'checkbox';
box.name = spec.name;
wrap.appendChild( box );
wrap.appendChild( el( 'span', null, spec.label ) );
return wrap;
}

var id = 'kuke-auth-' + spec.name;
var row = el( 'div', 'kuke-auth__field' );
var label = el( 'label', 'kuke-auth__label', spec.label );
label.htmlFor = id;
if ( !spec.required ) {
label.appendChild( el( 'span', 'kuke-auth__optional', '选填' ) );
}
row.appendChild( label );

var control = el( 'div', 'kuke-auth__control' );
var input = el( 'input', 'kuke-auth__input' );
input.id = id;
input.name = spec.name;
input.type = spec.type === 'captcha' ? 'text' : spec.type;
if ( spec.autocomplete ) {
input.autocomplete = spec.autocomplete;
}
if ( spec.required ) {
input.required = true;
}
if ( spec.type === 'captcha' ) {
input.autocomplete = 'off';
input.inputMode = 'text';
row.classList.add( 'kuke-auth__field--captcha' );
}
control.appendChild( input );
if ( spec.type === 'password' ) {
control.classList.add( 'kuke-auth__control--peek' );
control.appendChild( passwordToggle( input ) );
}
row.appendChild( control );

if ( spec.type === 'captcha' ) {
var q = el( 'p', 'kuke-auth__captcha' );
q.appendChild( el( 'span', 'kuke-auth__captcha-q', '正在获取…' ) );
row.appendChild( q );
form.captchaQuestion = q.firstChild;
loadCaptcha().then( function ( data ) {
if ( !form.isConnected ) {
return;
}
captcha = data;
q.firstChild.textContent = data ? data.question : '（暂不可用，请稍后重试）';
} );
}
if ( spec.hint ) {
row.appendChild( el( 'p', 'kuke-auth__hint', spec.hint ) );
}
return row;
}

function showAlert( text ) {
if ( !alertEl ) {
return;
}
alertEl.textContent = '';
if ( !text ) {
alertEl.hidden = true;
return;
}
alertEl.appendChild( svg( ICONS.alert, 'kuke-auth__alert-icon' ) );
alertEl.appendChild( el( 'span', null, text ) );
alertEl.hidden = false;
}

function setSubmitting( btn, mode, on ) {
submitting = on;
btn.disabled = on;
btn.classList.toggle( 'kuke-auth__submit--busy', on );
btn.textContent = '';
if ( on ) {
btn.appendChild( el( 'span', 'kuke-auth__spinner' ) );
btn.appendChild( el( 'span', null, MODES[ mode ].busy ) );
} else {
btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );
}
}

function values( form ) {
var out = {};
Array.prototype.forEach.call( form.querySelectorAll( 'input' ), function ( i ) {
out[ i.name ] = i.type === 'checkbox' ? ( i.checked ? '1' : '' ) : i.value;
} );
return out;
}

function submit( mode, form, btn ) {
if ( submitting ) {
return;
}
var v = values( form );
if ( mode === 'signup' && v.password !== v.retype ) {
showAlert( '两次输入的密码不一致。' );
return;
}
showAlert( '' );
setSubmitting( btn, mode, true );

var type = mode === 'login' ? 'login' : 'createaccount';
ready().then( function () {
return token( type );
} ).then( function ( tk ) {
var params;
if ( mode === 'login' ) {
params = {
action: 'clientlogin',
loginreturnurl: returnUrl(),
logintoken: tk,
username: v.username,
password: v.password,
formatversion: 2,
errorformat: 'html',
errorlang: 'zh'
};
if ( v.rememberMe ) {
params.rememberMe = '1';
}
} else {
params = {
action: 'createaccount',
createreturnurl: returnUrl(),
createtoken: tk,
username: v.username,
password: v.password,
retype: v.retype,
formatversion: 2,
errorformat: 'html',
errorlang: 'zh'
};
if ( v.email ) {
params.email = v.email;
}
if ( captcha ) {
params.captchaId = captcha.id;
params.captchaWord = v.captchaWord;
}
}
return api.post( params );
} ).then( function ( d ) {
var res = d.clientlogin || d.createaccount || {};
if ( res.status === 'PASS' ) {
location.href = returnUrl();
return;
}
// 需要额外步骤（如二次验证）时交给完整页面处理
if ( res.status === 'UI' || res.status === 'REDIRECT' ) {
location.href = mw.util.getUrl( MODES[ mode ].page, { returnto: returnTarget() } );
return;
}
setSubmitting( btn, mode, false );
showAlert( res.message || '提交失败，请稍后重试。' );
// token 与验证码一次性，失败后重取
delete tokens[ type ];
if ( mode === 'signup' ) {
refreshCaptcha( form );
}
} ).catch( function ( code, data ) {
setSubmitting( btn, mode, false );
var msg = ( data && data.error && data.error.info ) || '网络异常，请稍后重试。';
showAlert( msg );
delete tokens[ type ];
} );
}

function refreshCaptcha( form ) {
var q = form.captchaQuestion;
if ( !q ) {
return;
}
q.textContent = '正在获取…';
loadCaptcha().then( function ( data ) {
captcha = data;
if ( q.isConnected ) {
q.textContent = data ? data.question : '（暂不可用，请稍后重试）';
}
} );
}

function render( mode ) {
if ( current === mode ) {
return;
}
current = mode;
captcha = null;

titleEl.textContent = MODES[ mode ].title;
subEl.textContent = MODES[ mode ].sub;
Array.prototype.forEach.call( root.querySelectorAll( '.kuke-auth__tab' ), function ( b ) {
var on = b.dataset.mode === mode;
b.classList.toggle( 'kuke-auth__tab--active', on );
b.setAttribute( 'aria-selected', on ? 'true' : 'false' );
} );

body.textContent = '';

alertEl = el( 'div', 'kuke-auth__alert' );
alertEl.setAttribute( 'role', 'alert' );
alertEl.hidden = true;
body.appendChild( alertEl );

var form = el( 'form', 'kuke-auth__form' );
form.setAttribute( 'novalidate', 'novalidate' );
FIELDS[ mode ].forEach( function ( spec ) {
form.appendChild( field( spec, form ) );
} );

var btn = el( 'button', 'kuke-auth__submit' );
btn.type = 'submit';
btn.appendChild( el( 'span', null, MODES[ mode ].submit ) );
form.appendChild( btn );

form.addEventListener( 'submit', function ( e ) {
e.preventDefault();
submit( mode, form, btn );
} );
body.appendChild( form );

var foot = el( 'p', 'kuke-auth__foot' );
if ( mode === 'login' ) {
var reset = el( 'a', null, '忘记密码？' );
reset.href = mw.util.getUrl( 'Special:PasswordReset' );
foot.appendChild( reset );
foot.appendChild( el( 'span', 'kuke-auth__dot', '·' ) );
var toSignup = el( 'a', null, '还没有账号？立即注册' );
toSignup.href = '#';
toSignup.addEventListener( 'click', function ( e ) {
e.preventDefault();
render( 'signup' );
} );
foot.appendChild( toSignup );
} else {
foot.appendChild( el( 'span', null, '已有账号？' ) );
var toLogin = el( 'a', null, '直接登录' );
toLogin.href = '#';
toLogin.addEventListener( 'click', function ( e ) {
e.preventDefault();
render( 'login' );
} );
foot.appendChild( toLogin );
}
body.appendChild( foot );

main.scrollTop = 0;
// 预热对应的 token
token( mode === 'login' ? 'login' : 'createaccount' );

var first = form.querySelector( 'input' );
if ( first ) {
first.focus();
}
}

/* ---------- 开关 ---------- */

function onKey( e ) {
if ( e.key === 'Escape' ) {
close();
return;
}
if ( e.key !== 'Tab' || root.hidden ) {
return;
}
var items = root.querySelectorAll(
'a[href], button:not([disabled]), input:not([type=hidden]), select, textarea'
);
if ( !items.length ) {
return;
}
var first = items[ 0 ];
var last = items[ items.length - 1 ];
if ( e.shiftKey && document.activeElement === first ) {
e.preventDefault();
last.focus();
} else if ( !e.shiftKey && document.activeElement === last ) {
e.preventDefault();
first.focus();
}
}

function open( mode ) {
if ( !root ) {
build();
}
lastFocus = document.activeElement;
root.hidden = false;
document.body.classList.add( 'kuke-auth-open' );
document.addEventListener( 'keydown', onKey );
render( mode );
}

function close() {
if ( !root || root.hidden ) {
return;
}
root.hidden = true;
current = null;
document.body.classList.remove( 'kuke-auth-open' );
document.removeEventListener( 'keydown', onKey );
if ( lastFocus && lastFocus.focus ) {
lastFocus.focus();
}
}

function modeOf( href ) {
var target;
try {
target = new URL( href, location.href );
} catch ( e ) {
return null;
}
if ( target.origin !== location.origin ) {
return null;
}
var path = decodeURIComponent( target.pathname + '?' + target.search );
if ( /Special:UserLogin|特殊:用户登录|Special:登录/i.test( path ) ) {
return 'login';
}
if ( /Special:CreateAccount|特殊:创建账户|Special:创建账号/i.test( path ) ) {
return 'signup';
}
return null;
}

function onClick( e ) {
if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) {
return;
}
var a = e.target.closest ? e.target.closest( 'a[href]' ) : null;
if ( !a || a.target === '_blank' ) {
return;
}
var mode = modeOf( a.getAttribute( 'href' ) );
if ( !mode ) {
return;
}
e.preventDefault();
open( mode );
}

function init() {
if ( mw.config.get( 'wgUserName' ) ) {
return;
}
document.addEventListener( 'click', onClick );
// 后台预取登录 token，弹窗打开时表单已可直接提交
token( 'login' );
var direct = /[?&]kukeauth=(login|signup)/.exec( location.search );
if ( direct ) {
open( direct[ 1 ] );
}
}

if ( document.readyState === 'loading' ) {
document.addEventListener( 'DOMContentLoaded', init );
} else {
init();
}
}() );

MediaWiki:Common.js

2026-08-20T05:18:23Z

Admin：temp debug 4

MediaWiki:Common.js

2026-08-20T05:16:37Z

Admin：temp debug 3

MediaWiki:Common.js

2026-08-20T05:15:25Z

Admin：temp debug 2

MediaWiki:Common.js

2026-08-20T05:10:46Z

Admin：temp debug

MediaWiki:Citizen.css

2026-08-20T05:02:36Z

Admin：auth modal styles

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
页脚内容由 MediaWiki:Citizen-footer-desc 提供：一段站点简介 + 四列站内
导航（浏览 / 子服 / 规则与帮助 / 关于）。注意模板把它塞进 <p id="footer-desc">，
而 <p> 不能包含 <div>，浏览器解析时会提前闭合 <p>，因此 .kuke-fnav 实际是
.citizen-footer__siteinfo 的直接子元素，样式按这个真实结构写。
整体：通栏平铺 + 顶边品牌渐变线，左侧品牌区、右侧导航网格。
-------------------------------------------------------------------------- */

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

/* 顶边一条品牌渐变细线，替代生硬的纯色分界 */
.citizen-footer::before {
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 3px;
content: '';
background-image: linear-gradient(
90deg,
var( --kuke-brand ) 0%,
var( --kuke-brand-light ) 35%,
transparent 75%
);
}

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

/* 上半区：左品牌 / 右导航。siteinfo 里已经包含导航（见文件头注释），
所以真正的两栏切分放在 siteinfo 内部。 */
.citizen-footer__content {
display: block;
padding-block-end: 1.5rem;
}

.citizen-footer__siteinfo {
display: grid;
grid-template-columns: minmax( 220px, 1fr ) 3fr;
gap: 2rem 3rem;
align-items: start;
max-width: none;
margin: 0;
}

/* 品牌区：logo + 站名，占左栏 */
.citizen-footer__sitetitle {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 0;
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
box-shadow: var( --kuke-shadow );
}

/* footer-desc 是空的 <p> 外壳（内容被浏览器提到外面了），压掉它的边距 */
.citizen-footer__desc {
margin: 0;
font-size: 0.875rem;
line-height: 1.7;
color: var( --color-subtle );
}

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

/* ---- 站内导航 ---------------------------------------------------------- */

.kuke-fnav {
grid-column: 2;
grid-row: 1 / span 2;
}

.kuke-fnav__intro {
max-width: 60ch;
margin-block-end: 1.5rem;
font-size: 0.875rem;
line-height: 1.75;
color: var( --color-subtle );
}

.kuke-fnav__intro p {
margin: 0;
}

.kuke-fnav__cols {
display: grid;
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
gap: 1.25rem 1.5rem;
}

.kuke-fnav__title {
margin-block-end: 0.7rem;
font-size: 0.75rem;
font-weight: 700;
color: var( --color-emphasized );
letter-spacing: 0.08em;
}

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

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

.kuke-fnav__col a {
display: inline-block;
font-size: 0.8125rem;
color: var( --color-subtle );
text-decoration: none;
transition: color 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );
}

.kuke-fnav__col a:hover,
.kuke-fnav__col a:focus-visible {
color: var( --kuke-brand );
text-decoration: none;
transform: translateX( 2px );
}

/* ---- footer-places：核心的隐私 / 关于 / 免责声明 ------------------------ */

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: 2;
align-self: start;
}

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

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

.citizen-footer__content #footer-places a {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: 0.75rem;
color: var( --color-subtle );
text-decoration: none;
background-color: var( --color-surface-0 );
border: 1px solid var( --kuke-card-border );
border-radius: 999px;
transition: color 0.18s var( --kuke-ease ), border-color 0.18s var( --kuke-ease );
}

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

/* ---- 底栏：tagline + MediaWiki 徽标 ------------------------------------ */

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

.citizen-footer__bottom #footer-tagline {
margin: 0;
font-size: 0.75rem;
line-height: 1.6;
color: var( --color-subtle );
opacity: 0.85;
}

.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.65;
transition: opacity 0.18s var( --kuke-ease );
}

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

@media ( max-width: 1000px ) {
.citizen-footer__siteinfo {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.kuke-fnav {
grid-column: 1;
grid-row: auto;
}

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: auto;
}

.kuke-fnav__cols {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}

@media ( max-width: 560px ) {
.kuke-fnav__cols {
grid-template-columns: 1fr;
gap: 1rem;
}

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

MediaWiki:Common.js

2026-08-20T05:02:32Z

Admin：auth modal: local form + API

MediaWiki:Common.js

2026-08-20T04:44:55Z

Admin：auth modal: direct query entry

MediaWiki:Citizen.css

2026-08-20T04:42:09Z

Admin：新增 section 23：登录/注册弹窗样式

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
页脚内容由 MediaWiki:Citizen-footer-desc 提供：一段站点简介 + 四列站内
导航（浏览 / 子服 / 规则与帮助 / 关于）。注意模板把它塞进 <p id="footer-desc">，
而 <p> 不能包含 <div>，浏览器解析时会提前闭合 <p>，因此 .kuke-fnav 实际是
.citizen-footer__siteinfo 的直接子元素，样式按这个真实结构写。
整体：通栏平铺 + 顶边品牌渐变线，左侧品牌区、右侧导航网格。
-------------------------------------------------------------------------- */

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

/* 顶边一条品牌渐变细线，替代生硬的纯色分界 */
.citizen-footer::before {
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 3px;
content: '';
background-image: linear-gradient(
90deg,
var( --kuke-brand ) 0%,
var( --kuke-brand-light ) 35%,
transparent 75%
);
}

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

/* 上半区：左品牌 / 右导航。siteinfo 里已经包含导航（见文件头注释），
所以真正的两栏切分放在 siteinfo 内部。 */
.citizen-footer__content {
display: block;
padding-block-end: 1.5rem;
}

.citizen-footer__siteinfo {
display: grid;
grid-template-columns: minmax( 220px, 1fr ) 3fr;
gap: 2rem 3rem;
align-items: start;
max-width: none;
margin: 0;
}

/* 品牌区：logo + 站名，占左栏 */
.citizen-footer__sitetitle {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 0;
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
box-shadow: var( --kuke-shadow );
}

/* footer-desc 是空的 <p> 外壳（内容被浏览器提到外面了），压掉它的边距 */
.citizen-footer__desc {
margin: 0;
font-size: 0.875rem;
line-height: 1.7;
color: var( --color-subtle );
}

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

/* ---- 站内导航 ---------------------------------------------------------- */

.kuke-fnav {
grid-column: 2;
grid-row: 1 / span 2;
}

.kuke-fnav__intro {
max-width: 60ch;
margin-block-end: 1.5rem;
font-size: 0.875rem;
line-height: 1.75;
color: var( --color-subtle );
}

.kuke-fnav__intro p {
margin: 0;
}

.kuke-fnav__cols {
display: grid;
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
gap: 1.25rem 1.5rem;
}

.kuke-fnav__title {
margin-block-end: 0.7rem;
font-size: 0.75rem;
font-weight: 700;
color: var( --color-emphasized );
letter-spacing: 0.08em;
}

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

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

.kuke-fnav__col a {
display: inline-block;
font-size: 0.8125rem;
color: var( --color-subtle );
text-decoration: none;
transition: color 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );
}

.kuke-fnav__col a:hover,
.kuke-fnav__col a:focus-visible {
color: var( --kuke-brand );
text-decoration: none;
transform: translateX( 2px );
}

/* ---- footer-places：核心的隐私 / 关于 / 免责声明 ------------------------ */

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: 2;
align-self: start;
}

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

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

.citizen-footer__content #footer-places a {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: 0.75rem;
color: var( --color-subtle );
text-decoration: none;
background-color: var( --color-surface-0 );
border: 1px solid var( --kuke-card-border );
border-radius: 999px;
transition: color 0.18s var( --kuke-ease ), border-color 0.18s var( --kuke-ease );
}

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

/* ---- 底栏：tagline + MediaWiki 徽标 ------------------------------------ */

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

.citizen-footer__bottom #footer-tagline {
margin: 0;
font-size: 0.75rem;
line-height: 1.6;
color: var( --color-subtle );
opacity: 0.85;
}

.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.65;
transition: opacity 0.18s var( --kuke-ease );
}

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

@media ( max-width: 1000px ) {
.citizen-footer__siteinfo {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.kuke-fnav {
grid-column: 1;
grid-row: auto;
}

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: auto;
}

.kuke-fnav__cols {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}

@media ( max-width: 560px ) {
.kuke-fnav__cols {
grid-template-columns: 1fr;
gap: 1rem;
}

.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:UserLogin / Special:CreateAccount 的原生表单
fetch 回来塞进 .kuke-auth__body，所以第 22 节那些 .mw-special-* 前缀的
规则在弹窗里一条都不生效——控件样式必须在本节按 .kuke-auth 作用域重写。
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.18s var( --kuke-ease );
}

.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;
max-height: 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.2s var( --kuke-ease );
}

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

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

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

.kuke-auth__aside {
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 2rem 1.75rem;
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;
padding: 2rem 2rem 1.75rem;
overflow-y: auto;
}

.kuke-auth__close {
position: absolute;
z-index: 2;
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.25rem;
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 1.5rem;
font-size: 0.8125rem;
line-height: 1.6;
color: var( --color-subtle );
}

/* 加载 / 失败态 */
.kuke-auth__state {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: center;
justify-content: center;
min-height: 13rem;
font-size: 0.875rem;
color: var( --color-subtle );
text-align: center;
}

.kuke-auth__spinner {
display: block;
width: 22px;
height: 22px;
border: 2px solid var( --kuke-brand-pale );
border-block-start-color: var( --kuke-brand );
border-radius: 50%;
animation: kuke-auth-spin 0.7s linear infinite;
}

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

.kuke-auth__fallback {
font-weight: 600;
color: var( --kuke-brand );
}

/* ---- 弹窗内的原生表单控件 ---------------------------------------------- */

.kuke-auth #userloginForm,
.kuke-auth .mw-htmlform,
.kuke-auth .cdx-field,
.kuke-auth .cdx-field__control,
.kuke-auth .cdx-text-input {
box-sizing: border-box;
display: block;
width: 100%;
max-width: none;
min-width: 0;
padding: 0;
margin: 0;
background: transparent;
border: 0;
box-shadow: none;
}

.kuke-auth .cdx-field {
margin-block-end: 0.875rem;
}

.kuke-auth .cdx-label__label {
font-size: 0.8125rem;
font-weight: 600;
color: var( --color-emphasized );
}

.kuke-auth .cdx-text-input__input {
box-sizing: border-box;
width: 100%;
max-width: none;
min-width: 0;
min-height: 42px;
padding: 0.55rem 0.8rem;
font-size: 0.9375rem;
color: var( --color-base );
background-color: var( --color-surface-0 );
border: 1px solid var( --border-color-base );
border-radius: 8px;
transition: border-color 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease );
}

.kuke-auth .cdx-text-input__input:focus {
border-color: var( --kuke-brand );
outline: 0;
box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

.kuke-auth .cdx-checkbox {
display: flex;
gap: 0.5rem;
align-items: center;
}

.kuke-auth .cdx-checkbox__label,
.kuke-auth .mw-htmlform-field-HTMLCheckField {
font-size: 0.8125rem;
color: var( --color-subtle );
}

.kuke-auth .mw-htmlform-submit,
.kuke-auth .cdx-button--action-progressive {
box-sizing: border-box;
width: 100%;
max-width: none;
min-height: 44px;
font-size: 0.9375rem;
font-weight: 600;
color: #fff;
cursor: pointer;
background-color: var( --kuke-brand );
background-image: linear-gradient( 135deg, var( --kuke-brand ), var( --kuke-brand-strong ) );
border: 0;
border-radius: 8px;
transition: filter 0.18s var( --kuke-ease ), box-shadow 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );
}

.kuke-auth .mw-htmlform-submit:hover {
color: #fff;
filter: brightness( 1.06 );
border: 0;
box-shadow: var( --kuke-shadow-brand );
transform: translateY( -1px );
}

.kuke-auth .mw-htmlform-field-HTMLSubmitField {
margin-block: 1.25rem 0;
}

/* 忘记密码等辅助链接 */
.kuke-auth .mw-form-related-link-container {
padding: 0;
margin-block-start: 0.875rem;
font-size: 0.8125rem;
text-align: center;
border: 0;
}

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

.kuke-auth .mw-form-related-link-container a:hover {
text-decoration: underline;
}

.kuke-auth .cdx-message {
box-sizing: border-box;
width: 100%;
margin-block-end: 1rem;
font-size: 0.8125rem;
border-radius: 8px;
}

/* 注册页抓回来的权益栏在弹窗里是重复信息（左栏已有），隐掉 */
.kuke-auth .mw-createacct-benefits-container,
.kuke-auth .mw-createacct-benefits-heading,
.kuke-auth #mw-createaccount-cta,
.kuke-auth #mw-form-poweredby {
display: none;
}

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

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

.kuke-auth__dialog {
grid-template-columns: minmax( 0, 1fr );
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: 1.5rem;
}
}

MediaWiki:Common.js

2026-08-20T04:42:06Z

Admin：新增横版登录/注册弹窗脚本

MediaWiki:Citizen.css

2026-08-20T04:33:13Z

Admin：登录/注册页标题居中

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
页脚内容由 MediaWiki:Citizen-footer-desc 提供：一段站点简介 + 四列站内
导航（浏览 / 子服 / 规则与帮助 / 关于）。注意模板把它塞进 <p id="footer-desc">，
而 <p> 不能包含 <div>，浏览器解析时会提前闭合 <p>，因此 .kuke-fnav 实际是
.citizen-footer__siteinfo 的直接子元素，样式按这个真实结构写。
整体：通栏平铺 + 顶边品牌渐变线，左侧品牌区、右侧导航网格。
-------------------------------------------------------------------------- */

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

/* 顶边一条品牌渐变细线，替代生硬的纯色分界 */
.citizen-footer::before {
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 3px;
content: '';
background-image: linear-gradient(
90deg,
var( --kuke-brand ) 0%,
var( --kuke-brand-light ) 35%,
transparent 75%
);
}

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

/* 上半区：左品牌 / 右导航。siteinfo 里已经包含导航（见文件头注释），
所以真正的两栏切分放在 siteinfo 内部。 */
.citizen-footer__content {
display: block;
padding-block-end: 1.5rem;
}

.citizen-footer__siteinfo {
display: grid;
grid-template-columns: minmax( 220px, 1fr ) 3fr;
gap: 2rem 3rem;
align-items: start;
max-width: none;
margin: 0;
}

/* 品牌区：logo + 站名，占左栏 */
.citizen-footer__sitetitle {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 0;
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
box-shadow: var( --kuke-shadow );
}

/* footer-desc 是空的 <p> 外壳（内容被浏览器提到外面了），压掉它的边距 */
.citizen-footer__desc {
margin: 0;
font-size: 0.875rem;
line-height: 1.7;
color: var( --color-subtle );
}

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

/* ---- 站内导航 ---------------------------------------------------------- */

.kuke-fnav {
grid-column: 2;
grid-row: 1 / span 2;
}

.kuke-fnav__intro {
max-width: 60ch;
margin-block-end: 1.5rem;
font-size: 0.875rem;
line-height: 1.75;
color: var( --color-subtle );
}

.kuke-fnav__intro p {
margin: 0;
}

.kuke-fnav__cols {
display: grid;
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
gap: 1.25rem 1.5rem;
}

.kuke-fnav__title {
margin-block-end: 0.7rem;
font-size: 0.75rem;
font-weight: 700;
color: var( --color-emphasized );
letter-spacing: 0.08em;
}

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

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

.kuke-fnav__col a {
display: inline-block;
font-size: 0.8125rem;
color: var( --color-subtle );
text-decoration: none;
transition: color 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );
}

.kuke-fnav__col a:hover,
.kuke-fnav__col a:focus-visible {
color: var( --kuke-brand );
text-decoration: none;
transform: translateX( 2px );
}

/* ---- footer-places：核心的隐私 / 关于 / 免责声明 ------------------------ */

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: 2;
align-self: start;
}

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

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

.citizen-footer__content #footer-places a {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: 0.75rem;
color: var( --color-subtle );
text-decoration: none;
background-color: var( --color-surface-0 );
border: 1px solid var( --kuke-card-border );
border-radius: 999px;
transition: color 0.18s var( --kuke-ease ), border-color 0.18s var( --kuke-ease );
}

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

/* ---- 底栏：tagline + MediaWiki 徽标 ------------------------------------ */

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

.citizen-footer__bottom #footer-tagline {
margin: 0;
font-size: 0.75rem;
line-height: 1.6;
color: var( --color-subtle );
opacity: 0.85;
}

.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.65;
transition: opacity 0.18s var( --kuke-ease );
}

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

@media ( max-width: 1000px ) {
.citizen-footer__siteinfo {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.kuke-fnav {
grid-column: 1;
grid-row: auto;
}

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: auto;
}

.kuke-fnav__cols {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}

@media ( max-width: 560px ) {
.kuke-fnav__cols {
grid-template-columns: 1fr;
gap: 1rem;
}

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

MediaWiki:Citizen.css

2026-08-20T03:54:53Z

Admin：登录/注册页：标题居中、统计卡重制、底部CTA整理

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
页脚内容由 MediaWiki:Citizen-footer-desc 提供：一段站点简介 + 四列站内
导航（浏览 / 子服 / 规则与帮助 / 关于）。注意模板把它塞进 <p id="footer-desc">，
而 <p> 不能包含 <div>，浏览器解析时会提前闭合 <p>，因此 .kuke-fnav 实际是
.citizen-footer__siteinfo 的直接子元素，样式按这个真实结构写。
整体：通栏平铺 + 顶边品牌渐变线，左侧品牌区、右侧导航网格。
-------------------------------------------------------------------------- */

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

/* 顶边一条品牌渐变细线，替代生硬的纯色分界 */
.citizen-footer::before {
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 3px;
content: '';
background-image: linear-gradient(
90deg,
var( --kuke-brand ) 0%,
var( --kuke-brand-light ) 35%,
transparent 75%
);
}

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

/* 上半区：左品牌 / 右导航。siteinfo 里已经包含导航（见文件头注释），
所以真正的两栏切分放在 siteinfo 内部。 */
.citizen-footer__content {
display: block;
padding-block-end: 1.5rem;
}

.citizen-footer__siteinfo {
display: grid;
grid-template-columns: minmax( 220px, 1fr ) 3fr;
gap: 2rem 3rem;
align-items: start;
max-width: none;
margin: 0;
}

/* 品牌区：logo + 站名，占左栏 */
.citizen-footer__sitetitle {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 0;
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
box-shadow: var( --kuke-shadow );
}

/* footer-desc 是空的 <p> 外壳（内容被浏览器提到外面了），压掉它的边距 */
.citizen-footer__desc {
margin: 0;
font-size: 0.875rem;
line-height: 1.7;
color: var( --color-subtle );
}

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

/* ---- 站内导航 ---------------------------------------------------------- */

.kuke-fnav {
grid-column: 2;
grid-row: 1 / span 2;
}

.kuke-fnav__intro {
max-width: 60ch;
margin-block-end: 1.5rem;
font-size: 0.875rem;
line-height: 1.75;
color: var( --color-subtle );
}

.kuke-fnav__intro p {
margin: 0;
}

.kuke-fnav__cols {
display: grid;
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
gap: 1.25rem 1.5rem;
}

.kuke-fnav__title {
margin-block-end: 0.7rem;
font-size: 0.75rem;
font-weight: 700;
color: var( --color-emphasized );
letter-spacing: 0.08em;
}

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

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

.kuke-fnav__col a {
display: inline-block;
font-size: 0.8125rem;
color: var( --color-subtle );
text-decoration: none;
transition: color 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );
}

.kuke-fnav__col a:hover,
.kuke-fnav__col a:focus-visible {
color: var( --kuke-brand );
text-decoration: none;
transform: translateX( 2px );
}

/* ---- footer-places：核心的隐私 / 关于 / 免责声明 ------------------------ */

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: 2;
align-self: start;
}

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

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

.citizen-footer__content #footer-places a {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: 0.75rem;
color: var( --color-subtle );
text-decoration: none;
background-color: var( --color-surface-0 );
border: 1px solid var( --kuke-card-border );
border-radius: 999px;
transition: color 0.18s var( --kuke-ease ), border-color 0.18s var( --kuke-ease );
}

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

/* ---- 底栏：tagline + MediaWiki 徽标 ------------------------------------ */

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

.citizen-footer__bottom #footer-tagline {
margin: 0;
font-size: 0.75rem;
line-height: 1.6;
color: var( --color-subtle );
opacity: 0.85;
}

.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.65;
transition: opacity 0.18s var( --kuke-ease );
}

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

@media ( max-width: 1000px ) {
.citizen-footer__siteinfo {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.kuke-fnav {
grid-column: 1;
grid-row: auto;
}

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: auto;
}

.kuke-fnav__cols {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}

@media ( max-width: 560px ) {
.kuke-fnav__cols {
grid-template-columns: 1fr;
gap: 1rem;
}

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

.mw-special-Userlogin .citizen-page-header-inner,
.mw-special-CreateAccount .citizen-page-header-inner,
.mw-special-PasswordReset .citizen-page-header-inner {
border: 0;
}

/* .firstHeading 是 .firstHeading-container（flex）的子项，居中要落在容器上 */
.mw-special-Userlogin .firstHeading-container,
.mw-special-CreateAccount .firstHeading-container,
.mw-special-PasswordReset .firstHeading-container {
justify-content: center;
}

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

.mw-special-Userlogin .firstHeading,
.mw-special-CreateAccount .firstHeading,
.mw-special-PasswordReset .firstHeading {
justify-content: center;
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;
}
}

MediaWiki:Citizen.css

2026-08-20T03:23:51Z

Admin：重构页脚与登录/注册页样式

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
页脚内容由 MediaWiki:Citizen-footer-desc 提供：一段站点简介 + 四列站内
导航（浏览 / 子服 / 规则与帮助 / 关于）。注意模板把它塞进 <p id="footer-desc">，
而 <p> 不能包含 <div>，浏览器解析时会提前闭合 <p>，因此 .kuke-fnav 实际是
.citizen-footer__siteinfo 的直接子元素，样式按这个真实结构写。
整体：通栏平铺 + 顶边品牌渐变线，左侧品牌区、右侧导航网格。
-------------------------------------------------------------------------- */

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

/* 顶边一条品牌渐变细线，替代生硬的纯色分界 */
.citizen-footer::before {
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 3px;
content: '';
background-image: linear-gradient(
90deg,
var( --kuke-brand ) 0%,
var( --kuke-brand-light ) 35%,
transparent 75%
);
}

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

/* 上半区：左品牌 / 右导航。siteinfo 里已经包含导航（见文件头注释），
所以真正的两栏切分放在 siteinfo 内部。 */
.citizen-footer__content {
display: block;
padding-block-end: 1.5rem;
}

.citizen-footer__siteinfo {
display: grid;
grid-template-columns: minmax( 220px, 1fr ) 3fr;
gap: 2rem 3rem;
align-items: start;
max-width: none;
margin: 0;
}

/* 品牌区：logo + 站名，占左栏 */
.citizen-footer__sitetitle {
display: flex;
gap: 0.75rem;
align-items: center;
margin: 0;
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
box-shadow: var( --kuke-shadow );
}

/* footer-desc 是空的 <p> 外壳（内容被浏览器提到外面了），压掉它的边距 */
.citizen-footer__desc {
margin: 0;
font-size: 0.875rem;
line-height: 1.7;
color: var( --color-subtle );
}

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

/* ---- 站内导航 ---------------------------------------------------------- */

.kuke-fnav {
grid-column: 2;
grid-row: 1 / span 2;
}

.kuke-fnav__intro {
max-width: 60ch;
margin-block-end: 1.5rem;
font-size: 0.875rem;
line-height: 1.75;
color: var( --color-subtle );
}

.kuke-fnav__intro p {
margin: 0;
}

.kuke-fnav__cols {
display: grid;
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
gap: 1.25rem 1.5rem;
}

.kuke-fnav__title {
margin-block-end: 0.7rem;
font-size: 0.75rem;
font-weight: 700;
color: var( --color-emphasized );
letter-spacing: 0.08em;
}

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

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

.kuke-fnav__col a {
display: inline-block;
font-size: 0.8125rem;
color: var( --color-subtle );
text-decoration: none;
transition: color 0.18s var( --kuke-ease ), transform 0.18s var( --kuke-ease );
}

.kuke-fnav__col a:hover,
.kuke-fnav__col a:focus-visible {
color: var( --kuke-brand );
text-decoration: none;
transform: translateX( 2px );
}

/* ---- footer-places：核心的隐私 / 关于 / 免责声明 ------------------------ */

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: 2;
align-self: start;
}

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

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

.citizen-footer__content #footer-places a {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: 0.75rem;
color: var( --color-subtle );
text-decoration: none;
background-color: var( --color-surface-0 );
border: 1px solid var( --kuke-card-border );
border-radius: 999px;
transition: color 0.18s var( --kuke-ease ), border-color 0.18s var( --kuke-ease );
}

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

/* ---- 底栏：tagline + MediaWiki 徽标 ------------------------------------ */

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

.citizen-footer__bottom #footer-tagline {
margin: 0;
font-size: 0.75rem;
line-height: 1.6;
color: var( --color-subtle );
opacity: 0.85;
}

.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.65;
transition: opacity 0.18s var( --kuke-ease );
}

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

@media ( max-width: 1000px ) {
.citizen-footer__siteinfo {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.kuke-fnav {
grid-column: 1;
grid-row: auto;
}

.citizen-footer__content #footer-places {
grid-column: 1;
grid-row: auto;
}

.kuke-fnav__cols {
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}
}

@media ( max-width: 560px ) {
.kuke-fnav__cols {
grid-template-columns: 1fr;
gap: 1rem;
}

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

.mw-special-Userlogin .citizen-page-header-inner,
.mw-special-CreateAccount .citizen-page-header-inner,
.mw-special-PasswordReset .citizen-page-header-inner {
border: 0;
}

.mw-special-Userlogin .firstHeading,
.mw-special-CreateAccount .firstHeading,
.mw-special-PasswordReset .firstHeading {
justify-content: center;
text-align: center;
}

.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 {
display: none;
}

.mw-special-Userlogin .mw-form-related-link-container,
.mw-special-CreateAccount .mw-form-related-link-container {
padding-block-start: 1.25rem;
margin-block-start: 1.25rem;
font-size: 0.8125rem;
text-align: center;
border-block-start: 1px solid var( --kuke-card-border );
}

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

.mw-special-CreateAccount .mw-createacct-benefits-list {
padding: 0;
margin: 0;
list-style: none;
counter-reset: none;
}

.mw-special-CreateAccount .mw-createacct-benefits-list li {
position: relative;
padding-inline-start: 1.9rem;
margin-block: 0 1.1rem;
font-size: 0.8125rem;
line-height: 1.7;
color: var( --color-subtle );
}

.mw-special-CreateAccount .mw-createacct-benefits-list li::before {
position: absolute;
inset-block-start: 0.15rem;
inset-inline-start: 0;
width: 20px;
height: 20px;
content: '';
background-color: var( --kuke-brand );
border-radius: 50%;
opacity: 0.15;
}

/* 用 CSS 画一个勾，避免 emoji */
.mw-special-CreateAccount .mw-createacct-benefits-list li::after {
position: absolute;
inset-block-start: 0.42rem;
inset-inline-start: 0.44rem;
box-sizing: border-box;
width: 5px;
height: 9px;
content: '';
border-color: var( --kuke-brand-strong );
border-style: solid;
border-width: 0 2px 2px 0;
transform: rotate( 45deg );
}

.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text {
display: block;
font-size: 1.125rem;
font-weight: 700;
color: var( --kuke-brand-strong );
}

.mw-special-CreateAccount .mw-createacct-benefits-list .mw-number-text::after {
content: '';
}

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

MediaWiki:Privacypage

2026-08-20T03:21:51Z

Admin：隐私政策目标页

关于本文档/文档协议版权与服务器声明

MediaWiki:Privacy

2026-08-20T03:21:49Z

Admin：启用隐私政策链接

隐私政策

MediaWiki:Citizen-footer-desc

2026-08-20T03:20:41Z

Admin：页脚导航重构：四列站内导航

<div class="kuke-fnav">
<div class="kuke-fnav__intro">
KukeMC 群组服官方百科，收录服务器规章、玩法指南、子服资料与历史存档，由服务器管理组与文档编辑组共同维护。
</div>
<div class="kuke-fnav__cols">
<div class="kuke-fnav__col">
<div class="kuke-fnav__title">浏览</div>
* [[首页|百科首页]]
* [[子服一览]]
* [[Special:AllPages|全部条目]]
* [[Special:Categories|分类索引]]
* [[Special:RecentChanges|最近更改]]
* [[Special:Random|随机页面]]
</div>
<div class="kuke-fnav__col">
<div class="kuke-fnav__title">子服</div>
* [[纯净生存]]
* [[趣味生存]]
* [[粘液空岛]]
* [[职业战争]]
* [[起床战争]]
* [[僵尸末日]]
</div>
<div class="kuke-fnav__col">
<div class="kuke-fnav__title">规则与帮助</div>
* [[KukeMC群组服总规章|总规章]]
* [[KukeMC群组服总规章/关于各项处罚说明|处罚说明]]
* [[服务器常见问题|常见问题]]
* [[服务器常见问题/账号的注册与登录|注册与登录]]
* [[服务器管理组]]
* [[玩家自主管理委员会]]
</div>
<div class="kuke-fnav__col">
<div class="kuke-fnav__title">关于</div>
* [[关于我们|关于 KukeMC]]
* [[历史资料展览馆]]
* [[关于本文档/文档编辑组|文档编辑组]]
* [[关于本文档/文档编辑组/加入文档编辑组|参与编辑]]
* [[关于本文档/文档协议版权与服务器声明|协议与版权]]
* [[Special:SpecialPages|特殊页面]]
</div>
</div>
</div>

MediaWiki:Citizen.css

2026-08-19T19:44:46Z

Admin：temp debug

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
皮肤原生页脚是「一整块 --color-surface-1 平铺 + 两段 flex」，在本站的
浅色玻璃质感下显得生硬：整块纯白压在光斑背景上，没有边界感；
footer-places 的三个链接靠 grid auto-fit 撑成 10rem 一格，链接之间距离
极大且左对齐失衡；底部 tagline / MediaWiki 徽标一行没有呼吸感。
这里保持整幅通栏平铺（不做悬浮卡片），只修正排版：顶边一条品牌渐变细线、
logo 与文字并排、链接收成自然行。
-------------------------------------------------------------------------- */

.citizen-footer {
position: relative;
z-index: 1;
padding-block: var( --space-xxl, 2rem );
margin-top: 4rem;
background-color: var( --color-surface-1 );
border-block-start: 1px solid var( --kuke-glass-border );
}

/* 顶边一条品牌渐变，替代原本硬邦邦的整块底色 */
.citizen-footer::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 2px;
background-image: linear-gradient(
90deg,
transparent 0%,
var( --kuke-brand ) 22%,
var( --kuke-brand-light ) 50%,
var( --kuke-brand ) 78%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}

.citizen-footer__container {
padding-inline: var( --space-xl, 1.5rem );
}

/* 上半区：站点信息（左）+ 链接组（右） */
.citizen-footer__content {
gap: var( --space-xl, 1.5rem ) var( --space-xxl, 2rem );
align-items: flex-start;
padding-block: var( --space-xl, 1.5rem );
}

.citizen-footer__siteinfo {
gap: var( --space-sm, 0.75rem );
max-width: 46ch;
}

/* 图标与文字标改成并排，原生是纵向堆叠，占高太多 */
.citizen-footer__sitetitle {
flex-direction: row;
align-items: center;
gap: var( --space-sm, 0.75rem );
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: var( --border-radius-medium, 8px );
}

.citizen-footer__sitetitle .mw-logo-wordmark {
width: auto;
height: 22px;
}

.citizen-footer__desc {
color: var( --color-subtle );
line-height: 1.7;
}

/* 三个页脚链接：原生 grid auto-fit minmax(10rem) 会把它们摊得极散，
改成自然换行的行内组，右对齐贴着站点信息 */
#footer-places {
flex-grow: 0;
align-items: center;
margin: 0;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: var( --space-xs, 0.5rem );
justify-content: flex-end;
}

#footer-places a {
padding: var( --space-xs, 0.5rem ) var( --space-md, 1rem );
font-weight: 500;
color: var( --color-base );
border: 1px solid transparent;
border-radius: var( --border-radius-pill, 9999px );
transition: color 0.2s var( --kuke-ease ),
background-color 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-places a:hover,
#footer-places a:focus {
color: var( --kuke-brand-strong );
background-color: var( --kuke-brand-pale );
border-color: var( --kuke-card-border-hover );
}

/* 下半区：tagline + MediaWiki 徽标 */
.citizen-footer__bottom {
gap: var( --space-md, 1rem ) var( --space-xl, 1.5rem );
padding-block: var( --space-md, 1rem );
border-block-start: 1px solid var( --kuke-glass-border );
}

#footer-tagline {
color: var( --color-subtle );
line-height: 1.6;
}

#footer-icons a {
padding: var( --space-xxs, 0.25rem ) var( --space-xs, 0.5rem );
/* 保留固定浅底：poweredby 徽标含黑色文字路径，暗色下不可翻转 */
background-color: var( --background-color-base-fixed, #fff );
border: 1px solid var( --kuke-glass-border );
border-radius: var( --border-radius-medium, 8px );
opacity: 0.75;
transition: opacity 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-icons a:hover {
border-color: var( --kuke-card-border-hover );
opacity: 1;
}

/* 首页：正文已经自带底部分类墙，页脚不必再拉开 4rem */
.page-首页 .citizen-footer,
.page-Main_Page .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.citizen-footer {
padding-inline: var( --space-md, 1rem );
margin-top: 2.5rem;
}

.citizen-footer__container {
padding-inline: var( --space-md, 1rem );
}

#footer-places ul {
justify-content: flex-start;
}
}

/* --------------------------------------------------------------------------
22. 登录 / 注册 / 找回密码
Special:UserLogin 等页面走的是 MediaWiki 核心的 HTMLForm + Codex，
Citizen 没有为它做任何版式；核心默认给 #userloginForm 一个 28rem 宽度，
但里面的 input 受 size="20" 属性限制只有 256px，卡片里两侧大片留白。
这里把表单收成居中卡片，并强制表单控件撑满卡片内宽。
作用域限定在 body.mw-special-* 上，不影响其他 Special 页。
注意：站点 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;
}

/* 页面标题：去掉分隔线与操作区。
核心 .citizen-page-header-inner 是 max-width: var(--width-layout) 的 flex 容器，
在里面给 h1 加 text-align 是无效的（容器比标题宽得多，标题只是靠左）。
这里把头部块收成与下方卡片同宽同位，标题自然与卡片左边缘对齐。 */
.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;
}

.mw-special-Userlogin .citizen-page-header-inner,
.mw-special-PasswordReset .citizen-page-header-inner {
max-width: 25rem;
}

.mw-special-CreateAccount .citizen-page-header-inner {
max-width: 52rem;
border: 0;
}

.mw-special-Userlogin .citizen-page-header .firstHeading,
.mw-special-CreateAccount .citizen-page-header .firstHeading,
.mw-special-PasswordReset .citizen-page-header .firstHeading {
font-size: 1.75rem;
}

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

/* 表单卡片本体 */
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
box-sizing: border-box;
width: 100%;
max-width: 25rem;
padding: var( --space-xl, 1.5rem );
margin-inline: auto;
background-color: var( --kuke-card-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
box-shadow: var( --kuke-shadow );
}

/* 核心把 #userloginForm 定死成 28rem，这里覆盖以便与 max-width 协同 */
@media screen and ( min-width: 640px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm {
width: 25rem;
}
}

/* 登录页也裹在 .mw-ui-container 里，它是 flex 容器，不约束就会靠左 */
.mw-special-Userlogin .mw-ui-container,
.mw-special-PasswordReset .mw-ui-container {
max-width: 25rem;
margin-inline: auto;
}

/* 表单内所有控件撑满卡片内宽。
Codex 核心给 .cdx-text-input 定了 min-width: 256px 和 max-width: 29.5em，
登录页实测就卡在 256px 且左右各留 70px，所以这里必须把三个约束一起解掉。 */
.mw-special-Userlogin .cdx-field__control,
.mw-special-CreateAccount .cdx-field__control,
.mw-special-PasswordReset .cdx-field__control {
display: block;
width: 100%;
}

.mw-special-Userlogin .cdx-text-input,
.mw-special-CreateAccount .cdx-text-input,
.mw-special-PasswordReset .cdx-text-input {
width: 100%;
min-width: 0;
max-width: none;
margin-inline: 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%;
padding-block: 0.6rem;
border-radius: var( --border-radius-medium, 8px );
transition: border-color 0.2s var( --kuke-ease ),
box-shadow 0.2s 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 );
box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

/* 注册页：表单 + 「加入我们的理由」两列居中并排 */
.mw-special-CreateAccount .mw-ui-container {
display: flex;
flex-wrap: wrap;
gap: var( --space-xl, 1.5rem );
align-items: stretch;
justify-content: center;
max-width: 52rem;
margin-inline: auto;
border: 0;
}

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

.mw-special-CreateAccount .mw-ui-container .mw-createacct-benefits-container {
box-sizing: border-box;
flex: 0 1 24rem;
align-self: stretch;
max-width: 24rem;
padding: var( --space-xl, 1.5rem );
color: var( --color-subtle );
background-color: var( --kuke-notice-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
}

/* 右列比左列表单矮一大截，拉伸后让内容垂直居中，避免下方一大片空白 */
.mw-special-CreateAccount .mw-createacct-benefits-list {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc( 100% - 3rem );
}

.mw-special-CreateAccount .mw-createacct-benefits-heading {
padding-block-start: 0;
margin-block: 0 var( --space-md, 1rem );
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.5;
color: var( --color-emphasized );
}

/* 三个统计项原生是 95px 左内边距塞一张浅灰图标 + 居中文本。
那三张图标是给深色底设计的，在本站浅底上对比度几乎为零，直接去掉，
改成「数字 + 说明」左对齐的一行。 */
.mw-special-CreateAccount .mw-number-text {
min-height: 0;
padding: 0;
margin-block-start: var( --space-md, 1rem );
font-size: 0.95rem;
text-align: start;
background-image: none;
}

.mw-special-CreateAccount .mw-body-content .mw-number-text strong {
display: inline;
margin-inline-end: 0.35rem;
font-family: inherit;
font-size: 1.35rem;
font-weight: 700;
color: var( --kuke-brand-strong );
text-align: start;
}

/* 字段：标签加重、间距拉开 */
.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field {
margin-block-end: var( --space-md, 1rem );
}

.mw-special-Userlogin .cdx-label__label__text,
.mw-special-CreateAccount .cdx-label__label__text,
.mw-special-PasswordReset .cdx-label__label__text {
font-weight: 600;
color: var( --color-emphasized );
}

/* 主按钮：与站内 .mp-button--primary 同一套观感 */
.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit {
box-sizing: border-box;
width: 100%;
min-width: 0;
max-width: none;
height: auto;
padding-block: 0.65rem;
margin-block-start: var( --space-xs, 0.5rem );
margin-inline: 0;
font-weight: 600;
border-radius: var( --border-radius-medium, 8px );
transition: transform 0.2s var( --kuke-ease ),
box-shadow 0.2s var( --kuke-ease );
}

.mw-special-Userlogin .mw-htmlform-submit:hover,
.mw-special-CreateAccount .mw-htmlform-submit:hover,
.mw-special-PasswordReset .mw-htmlform-submit:hover {
transform: translateY( -1px );
box-shadow: var( --kuke-shadow-brand );
}

/* 验证码容器：与输入框对齐 */
.mw-special-CreateAccount .fancycaptcha-captcha-container,
.mw-special-CreateAccount .fancycaptcha-captcha-and-reload {
box-sizing: border-box;
width: 100%;
border-radius: var( --border-radius-medium, 8px );
}

/* 「忘记密码 / 登录帮助」两条辅助链接：缩小、居中 */
.mw-special-Userlogin .mw-form-related-link-container {
margin-block-end: var( --space-xs, 0.5rem );
font-size: 0.875rem;
text-align: center;
}

/* 底部「还没有账号？」做成分隔线以下的次级区块。
核心给它塞了一张 glyph-people 背景图 + 7.8em 上内边距，去掉。 */
#mw-createaccount-cta {
max-width: none;
padding-block-start: var( --space-md, 1rem );
margin-block-start: var( --space-xs, 0.5rem );
font-size: 0.9rem;
color: var( --color-subtle );
text-align: center;
background-image: none;
border-block-start: 1px solid var( --kuke-card-border );
}

#mw-createaccount-cta #mw-createaccount-join {
display: block;
box-sizing: border-box;
width: 100%;
margin-block-start: var( --space-sm, 0.75rem );
border-radius: var( --border-radius-medium, 8px );
}

/* 登录页的错误 / 提示框跟表单同宽居中 */
.mw-special-Userlogin .cdx-message,
.mw-special-CreateAccount .cdx-message,
.mw-special-PasswordReset .cdx-message {
box-sizing: border-box;
max-width: 25rem;
margin-inline: auto;
border-radius: var( --border-radius-medium, 8px );
}

/* 登录类页面正文短，缩掉页脚上方多余的 4rem 间距 */
.mw-special-Userlogin .citizen-footer,
.mw-special-CreateAccount .citizen-footer,
.mw-special-PasswordReset .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
width: 100%;
padding: var( --space-md, 1rem );
border: 0;
box-shadow: none;
}

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

/* ==== TEMP DEBUG ==== */
.mw-special-Userlogin #userloginForm { background: #ffcccc !important; }
.mw-special-Userlogin form.mw-htmlform { background: #ffe0b2 !important; }
.mw-special-Userlogin .cdx-field { background: #fff59d !important; }
.mw-special-Userlogin .cdx-field__control { background: #a5d6a7 !important; }
.mw-special-Userlogin .cdx-text-input { background: #90caf9 !important; }
/* ==== /TEMP DEBUG ==== */

MediaWiki:Citizen.css

2026-08-19T19:21:06Z

Admin：登录/注册页：解开 Codex 输入框 min-width 限制，标题与卡片对齐

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
皮肤原生页脚是「一整块 --color-surface-1 平铺 + 两段 flex」，在本站的
浅色玻璃质感下显得生硬：整块纯白压在光斑背景上，没有边界感；
footer-places 的三个链接靠 grid auto-fit 撑成 10rem 一格，链接之间距离
极大且左对齐失衡；底部 tagline / MediaWiki 徽标一行没有呼吸感。
这里保持整幅通栏平铺（不做悬浮卡片），只修正排版：顶边一条品牌渐变细线、
logo 与文字并排、链接收成自然行。
-------------------------------------------------------------------------- */

.citizen-footer {
position: relative;
z-index: 1;
padding-block: var( --space-xxl, 2rem );
margin-top: 4rem;
background-color: var( --color-surface-1 );
border-block-start: 1px solid var( --kuke-glass-border );
}

/* 顶边一条品牌渐变，替代原本硬邦邦的整块底色 */
.citizen-footer::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 2px;
background-image: linear-gradient(
90deg,
transparent 0%,
var( --kuke-brand ) 22%,
var( --kuke-brand-light ) 50%,
var( --kuke-brand ) 78%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}

.citizen-footer__container {
padding-inline: var( --space-xl, 1.5rem );
}

/* 上半区：站点信息（左）+ 链接组（右） */
.citizen-footer__content {
gap: var( --space-xl, 1.5rem ) var( --space-xxl, 2rem );
align-items: flex-start;
padding-block: var( --space-xl, 1.5rem );
}

.citizen-footer__siteinfo {
gap: var( --space-sm, 0.75rem );
max-width: 46ch;
}

/* 图标与文字标改成并排，原生是纵向堆叠，占高太多 */
.citizen-footer__sitetitle {
flex-direction: row;
align-items: center;
gap: var( --space-sm, 0.75rem );
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: var( --border-radius-medium, 8px );
}

.citizen-footer__sitetitle .mw-logo-wordmark {
width: auto;
height: 22px;
}

.citizen-footer__desc {
color: var( --color-subtle );
line-height: 1.7;
}

/* 三个页脚链接：原生 grid auto-fit minmax(10rem) 会把它们摊得极散，
改成自然换行的行内组，右对齐贴着站点信息 */
#footer-places {
flex-grow: 0;
align-items: center;
margin: 0;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: var( --space-xs, 0.5rem );
justify-content: flex-end;
}

#footer-places a {
padding: var( --space-xs, 0.5rem ) var( --space-md, 1rem );
font-weight: 500;
color: var( --color-base );
border: 1px solid transparent;
border-radius: var( --border-radius-pill, 9999px );
transition: color 0.2s var( --kuke-ease ),
background-color 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-places a:hover,
#footer-places a:focus {
color: var( --kuke-brand-strong );
background-color: var( --kuke-brand-pale );
border-color: var( --kuke-card-border-hover );
}

/* 下半区：tagline + MediaWiki 徽标 */
.citizen-footer__bottom {
gap: var( --space-md, 1rem ) var( --space-xl, 1.5rem );
padding-block: var( --space-md, 1rem );
border-block-start: 1px solid var( --kuke-glass-border );
}

#footer-tagline {
color: var( --color-subtle );
line-height: 1.6;
}

#footer-icons a {
padding: var( --space-xxs, 0.25rem ) var( --space-xs, 0.5rem );
/* 保留固定浅底：poweredby 徽标含黑色文字路径，暗色下不可翻转 */
background-color: var( --background-color-base-fixed, #fff );
border: 1px solid var( --kuke-glass-border );
border-radius: var( --border-radius-medium, 8px );
opacity: 0.75;
transition: opacity 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-icons a:hover {
border-color: var( --kuke-card-border-hover );
opacity: 1;
}

/* 首页：正文已经自带底部分类墙，页脚不必再拉开 4rem */
.page-首页 .citizen-footer,
.page-Main_Page .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.citizen-footer {
padding-inline: var( --space-md, 1rem );
margin-top: 2.5rem;
}

.citizen-footer__container {
padding-inline: var( --space-md, 1rem );
}

#footer-places ul {
justify-content: flex-start;
}
}

/* --------------------------------------------------------------------------
22. 登录 / 注册 / 找回密码
Special:UserLogin 等页面走的是 MediaWiki 核心的 HTMLForm + Codex，
Citizen 没有为它做任何版式；核心默认给 #userloginForm 一个 28rem 宽度，
但里面的 input 受 size="20" 属性限制只有 256px，卡片里两侧大片留白。
这里把表单收成居中卡片，并强制表单控件撑满卡片内宽。
作用域限定在 body.mw-special-* 上，不影响其他 Special 页。
注意：站点 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;
}

/* 页面标题：去掉分隔线与操作区。
核心 .citizen-page-header-inner 是 max-width: var(--width-layout) 的 flex 容器，
在里面给 h1 加 text-align 是无效的（容器比标题宽得多，标题只是靠左）。
这里把头部块收成与下方卡片同宽同位，标题自然与卡片左边缘对齐。 */
.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;
}

.mw-special-Userlogin .citizen-page-header-inner,
.mw-special-PasswordReset .citizen-page-header-inner {
max-width: 25rem;
}

/* 与下方两列的实际总宽（左卡 25rem + 右卡 24rem + 列间距）严格相等，
否则标题会比左卡左缘外溢十来个像素 */
.mw-special-CreateAccount .citizen-page-header-inner {
max-width: calc( 49rem + var( --space-xl, 1.5rem ) );
border: 0;
}

.mw-special-Userlogin .citizen-page-header .firstHeading,
.mw-special-CreateAccount .citizen-page-header .firstHeading,
.mw-special-PasswordReset .citizen-page-header .firstHeading {
font-size: 1.75rem;
}

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

/* 表单卡片本体 */
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
box-sizing: border-box;
width: 100%;
max-width: 25rem;
padding: var( --space-xl, 1.5rem );
margin-inline: auto;
background-color: var( --kuke-card-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
box-shadow: var( --kuke-shadow );
}

/* 核心把 #userloginForm 定死成 28rem，这里覆盖以便与 max-width 协同 */
@media screen and ( min-width: 640px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm {
width: 25rem;
}
}

/* 登录页也裹在 .mw-ui-container 里，它是 flex 容器，不约束就会靠左 */
.mw-special-Userlogin .mw-ui-container,
.mw-special-PasswordReset .mw-ui-container {
max-width: 25rem;
margin-inline: auto;
}

/* 表单内所有控件撑满卡片内宽。
Codex 核心给 .cdx-text-input 定了 min-width: 256px 和 max-width: 29.5em，
登录页实测就卡在 256px 且左右各留 70px，所以这里必须把三个约束一起解掉。 */
.mw-special-Userlogin .cdx-field__control,
.mw-special-CreateAccount .cdx-field__control,
.mw-special-PasswordReset .cdx-field__control {
display: block;
width: 100%;
}

.mw-special-Userlogin .cdx-text-input,
.mw-special-CreateAccount .cdx-text-input,
.mw-special-PasswordReset .cdx-text-input {
width: 100%;
min-width: 0;
max-width: none;
margin-inline: 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%;
padding-block: 0.6rem;
border-radius: var( --border-radius-medium, 8px );
transition: border-color 0.2s var( --kuke-ease ),
box-shadow 0.2s 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 );
box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

/* 注册页：表单 + 「加入我们的理由」两列居中并排 */
.mw-special-CreateAccount .mw-ui-container {
display: flex;
flex-wrap: wrap;
gap: var( --space-xl, 1.5rem );
align-items: stretch;
justify-content: center;
max-width: calc( 49rem + var( --space-xl, 1.5rem ) );
margin-inline: auto;
}

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

.mw-special-CreateAccount .mw-ui-container .mw-createacct-benefits-container {
box-sizing: border-box;
flex: 0 1 24rem;
align-self: stretch;
max-width: 24rem;
padding: var( --space-xl, 1.5rem );
color: var( --color-subtle );
background-color: var( --kuke-notice-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
}

/* 右列比左列表单矮一大截，拉伸后让内容垂直居中，避免下方一大片空白 */
.mw-special-CreateAccount .mw-createacct-benefits-list {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc( 100% - 3rem );
}

.mw-special-CreateAccount .mw-createacct-benefits-heading {
padding-block-start: 0;
margin-block: 0 var( --space-md, 1rem );
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.5;
color: var( --color-emphasized );
}

/* 三个统计项原生是 95px 左内边距塞一张浅灰图标 + 居中文本。
那三张图标是给深色底设计的，在本站浅底上对比度几乎为零，直接去掉，
改成「数字 + 说明」左对齐的一行。 */
.mw-special-CreateAccount .mw-number-text {
min-height: 0;
padding: 0;
margin-block-start: var( --space-md, 1rem );
font-size: 0.95rem;
text-align: start;
background-image: none;
}

.mw-special-CreateAccount .mw-body-content .mw-number-text strong {
display: inline;
margin-inline-end: 0.35rem;
font-family: inherit;
font-size: 1.35rem;
font-weight: 700;
color: var( --kuke-brand-strong );
text-align: start;
}

/* 字段：标签加重、间距拉开 */
.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field {
margin-block-end: var( --space-md, 1rem );
}

.mw-special-Userlogin .cdx-label__label__text,
.mw-special-CreateAccount .cdx-label__label__text,
.mw-special-PasswordReset .cdx-label__label__text {
font-weight: 600;
color: var( --color-emphasized );
}

/* 主按钮：与站内 .mp-button--primary 同一套观感 */
.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit {
box-sizing: border-box;
width: 100%;
min-width: 0;
max-width: none;
height: auto;
padding-block: 0.65rem;
margin-block-start: var( --space-xs, 0.5rem );
margin-inline: 0;
font-weight: 600;
border-radius: var( --border-radius-medium, 8px );
transition: transform 0.2s var( --kuke-ease ),
box-shadow 0.2s var( --kuke-ease );
}

.mw-special-Userlogin .mw-htmlform-submit:hover,
.mw-special-CreateAccount .mw-htmlform-submit:hover,
.mw-special-PasswordReset .mw-htmlform-submit:hover {
transform: translateY( -1px );
box-shadow: var( --kuke-shadow-brand );
}

/* 验证码容器：与输入框对齐 */
.mw-special-CreateAccount .fancycaptcha-captcha-container,
.mw-special-CreateAccount .fancycaptcha-captcha-and-reload {
box-sizing: border-box;
width: 100%;
border-radius: var( --border-radius-medium, 8px );
}

/* 「忘记密码 / 登录帮助」两条辅助链接：缩小、居中 */
.mw-special-Userlogin .mw-form-related-link-container {
margin-block-end: var( --space-xs, 0.5rem );
font-size: 0.875rem;
text-align: center;
}

/* 底部「还没有账号？」做成分隔线以下的次级区块。
核心给它塞了一张 glyph-people 背景图 + 7.8em 上内边距，去掉。 */
#mw-createaccount-cta {
max-width: none;
padding-block-start: var( --space-md, 1rem );
margin-block-start: var( --space-xs, 0.5rem );
font-size: 0.9rem;
color: var( --color-subtle );
text-align: center;
background-image: none;
border-block-start: 1px solid var( --kuke-card-border );
}

#mw-createaccount-cta #mw-createaccount-join {
display: block;
box-sizing: border-box;
width: 100%;
margin-block-start: var( --space-sm, 0.75rem );
border-radius: var( --border-radius-medium, 8px );
}

/* 登录页的错误 / 提示框跟表单同宽居中 */
.mw-special-Userlogin .cdx-message,
.mw-special-CreateAccount .cdx-message,
.mw-special-PasswordReset .cdx-message {
box-sizing: border-box;
max-width: 25rem;
margin-inline: auto;
border-radius: var( --border-radius-medium, 8px );
}

/* 登录类页面正文短，缩掉页脚上方多余的 4rem 间距 */
.mw-special-Userlogin .citizen-footer,
.mw-special-CreateAccount .citizen-footer,
.mw-special-PasswordReset .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
width: 100%;
padding: var( --space-md, 1rem );
border: 0;
box-shadow: none;
}

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

MediaWiki:Citizen.css

2026-08-19T19:01:19Z

Admin：登录页：修正标题对齐、控件宽度、注册页两列高度与隐形图标

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
皮肤原生页脚是「一整块 --color-surface-1 平铺 + 两段 flex」，在本站的
浅色玻璃质感下显得生硬：整块纯白压在光斑背景上，没有边界感；
footer-places 的三个链接靠 grid auto-fit 撑成 10rem 一格，链接之间距离
极大且左对齐失衡；底部 tagline / MediaWiki 徽标一行没有呼吸感。
这里保持整幅通栏平铺（不做悬浮卡片），只修正排版：顶边一条品牌渐变细线、
logo 与文字并排、链接收成自然行。
-------------------------------------------------------------------------- */

.citizen-footer {
position: relative;
z-index: 1;
padding-block: var( --space-xxl, 2rem );
margin-top: 4rem;
background-color: var( --color-surface-1 );
border-block-start: 1px solid var( --kuke-glass-border );
}

/* 顶边一条品牌渐变，替代原本硬邦邦的整块底色 */
.citizen-footer::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 2px;
background-image: linear-gradient(
90deg,
transparent 0%,
var( --kuke-brand ) 22%,
var( --kuke-brand-light ) 50%,
var( --kuke-brand ) 78%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}

.citizen-footer__container {
padding-inline: var( --space-xl, 1.5rem );
}

/* 上半区：站点信息（左）+ 链接组（右） */
.citizen-footer__content {
gap: var( --space-xl, 1.5rem ) var( --space-xxl, 2rem );
align-items: flex-start;
padding-block: var( --space-xl, 1.5rem );
}

.citizen-footer__siteinfo {
gap: var( --space-sm, 0.75rem );
max-width: 46ch;
}

/* 图标与文字标改成并排，原生是纵向堆叠，占高太多 */
.citizen-footer__sitetitle {
flex-direction: row;
align-items: center;
gap: var( --space-sm, 0.75rem );
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: var( --border-radius-medium, 8px );
}

.citizen-footer__sitetitle .mw-logo-wordmark {
width: auto;
height: 22px;
}

.citizen-footer__desc {
color: var( --color-subtle );
line-height: 1.7;
}

/* 三个页脚链接：原生 grid auto-fit minmax(10rem) 会把它们摊得极散，
改成自然换行的行内组，右对齐贴着站点信息 */
#footer-places {
flex-grow: 0;
align-items: center;
margin: 0;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: var( --space-xs, 0.5rem );
justify-content: flex-end;
}

#footer-places a {
padding: var( --space-xs, 0.5rem ) var( --space-md, 1rem );
font-weight: 500;
color: var( --color-base );
border: 1px solid transparent;
border-radius: var( --border-radius-pill, 9999px );
transition: color 0.2s var( --kuke-ease ),
background-color 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-places a:hover,
#footer-places a:focus {
color: var( --kuke-brand-strong );
background-color: var( --kuke-brand-pale );
border-color: var( --kuke-card-border-hover );
}

/* 下半区：tagline + MediaWiki 徽标 */
.citizen-footer__bottom {
gap: var( --space-md, 1rem ) var( --space-xl, 1.5rem );
padding-block: var( --space-md, 1rem );
border-block-start: 1px solid var( --kuke-glass-border );
}

#footer-tagline {
color: var( --color-subtle );
line-height: 1.6;
}

#footer-icons a {
padding: var( --space-xxs, 0.25rem ) var( --space-xs, 0.5rem );
/* 保留固定浅底：poweredby 徽标含黑色文字路径，暗色下不可翻转 */
background-color: var( --background-color-base-fixed, #fff );
border: 1px solid var( --kuke-glass-border );
border-radius: var( --border-radius-medium, 8px );
opacity: 0.75;
transition: opacity 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-icons a:hover {
border-color: var( --kuke-card-border-hover );
opacity: 1;
}

/* 首页：正文已经自带底部分类墙，页脚不必再拉开 4rem */
.page-首页 .citizen-footer,
.page-Main_Page .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.citizen-footer {
padding-inline: var( --space-md, 1rem );
margin-top: 2.5rem;
}

.citizen-footer__container {
padding-inline: var( --space-md, 1rem );
}

#footer-places ul {
justify-content: flex-start;
}
}

/* --------------------------------------------------------------------------
22. 登录 / 注册 / 找回密码
Special:UserLogin 等页面走的是 MediaWiki 核心的 HTMLForm + Codex，
Citizen 没有为它做任何版式；核心默认给 #userloginForm 一个 28rem 宽度，
但里面的 input 受 size="20" 属性限制只有 256px，卡片里两侧大片留白。
这里把表单收成居中卡片，并强制表单控件撑满卡片内宽。
作用域限定在 body.mw-special-* 上，不影响其他 Special 页。
注意：站点 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;
}

/* 页面标题：去掉分隔线与操作区。
核心 .citizen-page-header-inner 是 max-width: var(--width-layout) 的 flex 容器，
在里面给 h1 加 text-align 是无效的（容器比标题宽得多，标题只是靠左）。
这里把头部块收成与下方卡片同宽同位，标题自然与卡片左边缘对齐。 */
.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;
}

.mw-special-Userlogin .citizen-page-header-inner,
.mw-special-PasswordReset .citizen-page-header-inner {
max-width: 25rem;
}

.mw-special-CreateAccount .citizen-page-header-inner {
max-width: 52rem;
}

.mw-special-Userlogin .citizen-page-header .firstHeading,
.mw-special-CreateAccount .citizen-page-header .firstHeading,
.mw-special-PasswordReset .citizen-page-header .firstHeading {
font-size: 1.75rem;
}

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

/* 表单卡片本体 */
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
box-sizing: border-box;
width: 100%;
max-width: 25rem;
padding: var( --space-xl, 1.5rem );
margin-inline: auto;
background-color: var( --kuke-card-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
box-shadow: var( --kuke-shadow );
}

/* 核心把 #userloginForm 定死成 28rem，这里覆盖以便与 max-width 协同 */
@media screen and ( min-width: 640px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm {
width: 25rem;
}
}

/* 登录页也裹在 .mw-ui-container 里，它是 flex 容器，不约束就会靠左 */
.mw-special-Userlogin .mw-ui-container,
.mw-special-PasswordReset .mw-ui-container {
max-width: 25rem;
margin-inline: auto;
}

/* 表单内所有控件撑满卡片内宽：input 自带 size="20"，不覆盖就只有 256px */
.mw-special-Userlogin .cdx-text-input,
.mw-special-CreateAccount .cdx-text-input,
.mw-special-PasswordReset .cdx-text-input,
.mw-special-Userlogin .cdx-field__control,
.mw-special-CreateAccount .cdx-field__control,
.mw-special-PasswordReset .cdx-field__control {
width: 100%;
}

.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%;
padding-block: 0.6rem;
border-radius: var( --border-radius-medium, 8px );
transition: border-color 0.2s var( --kuke-ease ),
box-shadow 0.2s 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 );
box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

/* 注册页：表单 + 「加入我们的理由」两列居中并排 */
.mw-special-CreateAccount .mw-ui-container {
display: flex;
flex-wrap: wrap;
gap: var( --space-xl, 1.5rem );
align-items: stretch;
justify-content: center;
max-width: 52rem;
margin-inline: auto;
}

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

.mw-special-CreateAccount .mw-ui-container .mw-createacct-benefits-container {
box-sizing: border-box;
flex: 0 1 24rem;
align-self: stretch;
max-width: 24rem;
padding: var( --space-xl, 1.5rem );
color: var( --color-subtle );
background-color: var( --kuke-notice-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
}

/* 右列比左列表单矮一大截，拉伸后让内容垂直居中，避免下方一大片空白 */
.mw-special-CreateAccount .mw-createacct-benefits-list {
display: flex;
flex-direction: column;
justify-content: center;
min-height: calc( 100% - 3rem );
}

.mw-special-CreateAccount .mw-createacct-benefits-heading {
padding-block-start: 0;
margin-block: 0 var( --space-md, 1rem );
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.5;
color: var( --color-emphasized );
}

/* 三个统计项原生是 95px 左内边距塞一张浅灰图标 + 居中文本。
那三张图标是给深色底设计的，在本站浅底上对比度几乎为零，直接去掉，
改成「数字 + 说明」左对齐的一行。 */
.mw-special-CreateAccount .mw-number-text {
min-height: 0;
padding: 0;
margin-block-start: var( --space-md, 1rem );
font-size: 0.95rem;
text-align: start;
background-image: none;
}

.mw-special-CreateAccount .mw-body-content .mw-number-text strong {
display: inline;
margin-inline-end: 0.35rem;
font-family: inherit;
font-size: 1.35rem;
font-weight: 700;
color: var( --kuke-brand-strong );
text-align: start;
}

/* 字段：标签加重、间距拉开 */
.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field {
margin-block-end: var( --space-md, 1rem );
}

.mw-special-Userlogin .cdx-label__label__text,
.mw-special-CreateAccount .cdx-label__label__text,
.mw-special-PasswordReset .cdx-label__label__text {
font-weight: 600;
color: var( --color-emphasized );
}

/* 主按钮：与站内 .mp-button--primary 同一套观感 */
.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit {
box-sizing: border-box;
width: 100%;
height: auto;
padding-block: 0.65rem;
margin-block-start: var( --space-xs, 0.5rem );
font-weight: 600;
border-radius: var( --border-radius-medium, 8px );
transition: transform 0.2s var( --kuke-ease ),
box-shadow 0.2s var( --kuke-ease );
}

.mw-special-Userlogin .mw-htmlform-submit:hover,
.mw-special-CreateAccount .mw-htmlform-submit:hover,
.mw-special-PasswordReset .mw-htmlform-submit:hover {
transform: translateY( -1px );
box-shadow: var( --kuke-shadow-brand );
}

/* 验证码容器：与输入框对齐 */
.mw-special-CreateAccount .fancycaptcha-captcha-container,
.mw-special-CreateAccount .fancycaptcha-captcha-and-reload {
box-sizing: border-box;
width: 100%;
border-radius: var( --border-radius-medium, 8px );
}

/* 「忘记密码 / 登录帮助」两条辅助链接：缩小、居中 */
.mw-special-Userlogin .mw-form-related-link-container {
margin-block-end: var( --space-xs, 0.5rem );
font-size: 0.875rem;
text-align: center;
}

/* 底部「还没有账号？」做成分隔线以下的次级区块。
核心给它塞了一张 glyph-people 背景图 + 7.8em 上内边距，去掉。 */
#mw-createaccount-cta {
max-width: none;
padding-block-start: var( --space-md, 1rem );
margin-block-start: var( --space-xs, 0.5rem );
font-size: 0.9rem;
color: var( --color-subtle );
text-align: center;
background-image: none;
border-block-start: 1px solid var( --kuke-card-border );
}

#mw-createaccount-cta #mw-createaccount-join {
display: block;
box-sizing: border-box;
width: 100%;
margin-block-start: var( --space-sm, 0.75rem );
border-radius: var( --border-radius-medium, 8px );
}

/* 登录页的错误 / 提示框跟表单同宽居中 */
.mw-special-Userlogin .cdx-message,
.mw-special-CreateAccount .cdx-message,
.mw-special-PasswordReset .cdx-message {
box-sizing: border-box;
max-width: 25rem;
margin-inline: auto;
border-radius: var( --border-radius-medium, 8px );
}

/* 登录类页面正文短，缩掉页脚上方多余的 4rem 间距 */
.mw-special-Userlogin .citizen-footer,
.mw-special-CreateAccount .citizen-footer,
.mw-special-PasswordReset .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
width: 100%;
padding: var( --space-md, 1rem );
border: 0;
box-shadow: none;
}

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

MediaWiki:Citizen.css

2026-08-19T18:40:27Z

Admin：登录/注册页：控件撑满卡片、标题居中、注册页两列均衡

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
皮肤原生页脚是「一整块 --color-surface-1 平铺 + 两段 flex」，在本站的
浅色玻璃质感下显得生硬：整块纯白压在光斑背景上，没有边界感；
footer-places 的三个链接靠 grid auto-fit 撑成 10rem 一格，链接之间距离
极大且左对齐失衡；底部 tagline / MediaWiki 徽标一行没有呼吸感。
这里保持整幅通栏平铺（不做悬浮卡片），只修正排版：顶边一条品牌渐变细线、
logo 与文字并排、链接收成自然行。
-------------------------------------------------------------------------- */

.citizen-footer {
position: relative;
z-index: 1;
padding-block: var( --space-xxl, 2rem );
margin-top: 4rem;
background-color: var( --color-surface-1 );
border-block-start: 1px solid var( --kuke-glass-border );
}

/* 顶边一条品牌渐变，替代原本硬邦邦的整块底色 */
.citizen-footer::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 2px;
background-image: linear-gradient(
90deg,
transparent 0%,
var( --kuke-brand ) 22%,
var( --kuke-brand-light ) 50%,
var( --kuke-brand ) 78%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}

.citizen-footer__container {
padding-inline: var( --space-xl, 1.5rem );
}

/* 上半区：站点信息（左）+ 链接组（右） */
.citizen-footer__content {
gap: var( --space-xl, 1.5rem ) var( --space-xxl, 2rem );
align-items: flex-start;
padding-block: var( --space-xl, 1.5rem );
}

.citizen-footer__siteinfo {
gap: var( --space-sm, 0.75rem );
max-width: 46ch;
}

/* 图标与文字标改成并排，原生是纵向堆叠，占高太多 */
.citizen-footer__sitetitle {
flex-direction: row;
align-items: center;
gap: var( --space-sm, 0.75rem );
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: var( --border-radius-medium, 8px );
}

.citizen-footer__sitetitle .mw-logo-wordmark {
width: auto;
height: 22px;
}

.citizen-footer__desc {
color: var( --color-subtle );
line-height: 1.7;
}

/* 三个页脚链接：原生 grid auto-fit minmax(10rem) 会把它们摊得极散，
改成自然换行的行内组，右对齐贴着站点信息 */
#footer-places {
flex-grow: 0;
align-items: center;
margin: 0;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: var( --space-xs, 0.5rem );
justify-content: flex-end;
}

#footer-places a {
padding: var( --space-xs, 0.5rem ) var( --space-md, 1rem );
font-weight: 500;
color: var( --color-base );
border: 1px solid transparent;
border-radius: var( --border-radius-pill, 9999px );
transition: color 0.2s var( --kuke-ease ),
background-color 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-places a:hover,
#footer-places a:focus {
color: var( --kuke-brand-strong );
background-color: var( --kuke-brand-pale );
border-color: var( --kuke-card-border-hover );
}

/* 下半区：tagline + MediaWiki 徽标 */
.citizen-footer__bottom {
gap: var( --space-md, 1rem ) var( --space-xl, 1.5rem );
padding-block: var( --space-md, 1rem );
border-block-start: 1px solid var( --kuke-glass-border );
}

#footer-tagline {
color: var( --color-subtle );
line-height: 1.6;
}

#footer-icons a {
padding: var( --space-xxs, 0.25rem ) var( --space-xs, 0.5rem );
/* 保留固定浅底：poweredby 徽标含黑色文字路径，暗色下不可翻转 */
background-color: var( --background-color-base-fixed, #fff );
border: 1px solid var( --kuke-glass-border );
border-radius: var( --border-radius-medium, 8px );
opacity: 0.75;
transition: opacity 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-icons a:hover {
border-color: var( --kuke-card-border-hover );
opacity: 1;
}

/* 首页：正文已经自带底部分类墙，页脚不必再拉开 4rem */
.page-首页 .citizen-footer,
.page-Main_Page .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.citizen-footer {
padding-inline: var( --space-md, 1rem );
margin-top: 2.5rem;
}

.citizen-footer__container {
padding-inline: var( --space-md, 1rem );
}

#footer-places ul {
justify-content: flex-start;
}
}

/* --------------------------------------------------------------------------
22. 登录 / 注册 / 找回密码
Special:UserLogin 等页面走的是 MediaWiki 核心的 HTMLForm + Codex，
Citizen 没有为它做任何版式；核心默认给 #userloginForm 一个 28rem 宽度，
但里面的 input 受 size="20" 属性限制只有 256px，卡片里两侧大片留白。
这里把表单收成居中卡片，并强制表单控件撑满卡片内宽。
作用域限定在 body.mw-special-* 上，不影响其他 Special 页。
注意：站点 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 .citizen-page-header,
.mw-special-CreateAccount .citizen-page-header,
.mw-special-PasswordReset .citizen-page-header {
padding-block-end: 0;
border-block-end: 0;
}

.mw-special-Userlogin .citizen-page-heading,
.mw-special-CreateAccount .citizen-page-heading,
.mw-special-PasswordReset .citizen-page-heading {
justify-content: center;
text-align: center;
}

.mw-special-Userlogin .firstHeading-container,
.mw-special-CreateAccount .firstHeading-container,
.mw-special-PasswordReset .firstHeading-container {
justify-content: center;
width: 100%;
}

.mw-special-Userlogin .citizen-page-header .firstHeading,
.mw-special-CreateAccount .citizen-page-header .firstHeading,
.mw-special-PasswordReset .citizen-page-header .firstHeading {
font-size: 1.75rem;
text-align: center;
}

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

/* 表单卡片本体 */
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
box-sizing: border-box;
width: 100%;
max-width: 25rem;
padding: var( --space-xl, 1.5rem );
margin-inline: auto;
background-color: var( --kuke-card-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
box-shadow: var( --kuke-shadow );
}

/* 核心把 #userloginForm 定死成 28rem，这里覆盖以便与 max-width 协同 */
@media screen and ( min-width: 640px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm {
width: 25rem;
}
}

/* 表单内所有控件撑满卡片内宽：input 自带 size="20"，不覆盖就只有 256px */
.mw-special-Userlogin .cdx-text-input,
.mw-special-CreateAccount .cdx-text-input,
.mw-special-PasswordReset .cdx-text-input,
.mw-special-Userlogin .cdx-field__control,
.mw-special-CreateAccount .cdx-field__control,
.mw-special-PasswordReset .cdx-field__control {
width: 100%;
}

.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%;
padding-block: 0.6rem;
border-radius: var( --border-radius-medium, 8px );
transition: border-color 0.2s var( --kuke-ease ),
box-shadow 0.2s 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 );
box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

/* 注册页：表单 + 「加入我们的理由」两列居中并排 */
.mw-special-CreateAccount .mw-ui-container {
display: flex;
flex-wrap: wrap;
gap: var( --space-xl, 1.5rem );
align-items: stretch;
justify-content: center;
max-width: 52rem;
margin-inline: auto;
}

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

.mw-special-CreateAccount .mw-ui-container .mw-createacct-benefits-container {
box-sizing: border-box;
flex: 0 1 24rem;
max-width: 24rem;
padding: var( --space-xl, 1.5rem );
color: var( --color-subtle );
background-color: var( --kuke-notice-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
}

.mw-special-CreateAccount .mw-createacct-benefits-heading {
padding-block-start: 0;
margin-block: 0 var( --space-md, 1rem );
font-family: inherit;
font-size: 1.05rem;
font-weight: 600;
line-height: 1.5;
color: var( --color-emphasized );
}

/* 三个统计项原生是 95px 左内边距塞图标 + 居中文本，这里改成图标左、数字右的行 */
.mw-special-CreateAccount .mw-number-text {
padding: 0 0 0 3.25rem;
margin-block-start: var( --space-md, 1rem );
min-height: 2.5rem;
font-size: 0.95rem;
text-align: start;
background-size: 2.25rem auto;
}

.mw-special-CreateAccount .mw-body-content .mw-number-text strong {
display: inline;
margin-inline-end: 0.35rem;
font-family: inherit;
font-size: 1.35rem;
font-weight: 700;
text-align: start;
color: var( --kuke-brand-strong );
}

/* 字段：标签加重、间距拉开 */
.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field {
margin-block-end: var( --space-md, 1rem );
}

.mw-special-Userlogin .cdx-label__label__text,
.mw-special-CreateAccount .cdx-label__label__text,
.mw-special-PasswordReset .cdx-label__label__text {
font-weight: 600;
color: var( --color-emphasized );
}

/* 主按钮：与站内 .mp-button--primary 同一套观感 */
.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit {
box-sizing: border-box;
width: 100%;
height: auto;
padding-block: 0.65rem;
margin-block-start: var( --space-xs, 0.5rem );
font-weight: 600;
border-radius: var( --border-radius-medium, 8px );
transition: transform 0.2s var( --kuke-ease ),
box-shadow 0.2s var( --kuke-ease );
}

.mw-special-Userlogin .mw-htmlform-submit:hover,
.mw-special-CreateAccount .mw-htmlform-submit:hover,
.mw-special-PasswordReset .mw-htmlform-submit:hover {
transform: translateY( -1px );
box-shadow: var( --kuke-shadow-brand );
}

/* 验证码容器：与输入框对齐 */
.mw-special-CreateAccount .fancycaptcha-captcha-container,
.mw-special-CreateAccount .fancycaptcha-captcha-and-reload {
box-sizing: border-box;
width: 100%;
border-radius: var( --border-radius-medium, 8px );
}

/* 「忘记密码 / 登录帮助」两条辅助链接：缩小、居中 */
.mw-special-Userlogin .mw-form-related-link-container {
margin-block-end: var( --space-xs, 0.5rem );
font-size: 0.875rem;
text-align: center;
}

/* 底部「还没有账号？」做成分隔线以下的次级区块 */
#mw-createaccount-cta {
padding-block-start: var( --space-md, 1rem );
margin-block-start: var( --space-xs, 0.5rem );
font-size: 0.9rem;
color: var( --color-subtle );
text-align: center;
border-block-start: 1px solid var( --kuke-card-border );
}

#mw-createaccount-cta #mw-createaccount-join {
display: block;
box-sizing: border-box;
width: 100%;
margin-block-start: var( --space-sm, 0.75rem );
border-radius: var( --border-radius-medium, 8px );
}

/* 登录页的错误 / 提示框跟表单同宽居中 */
.mw-special-Userlogin .cdx-message,
.mw-special-CreateAccount .cdx-message,
.mw-special-PasswordReset .cdx-message {
box-sizing: border-box;
max-width: 25rem;
margin-inline: auto;
border-radius: var( --border-radius-medium, 8px );
}

/* 登录类页面正文短，缩掉页脚上方多余的 4rem 间距 */
.mw-special-Userlogin .citizen-footer,
.mw-special-CreateAccount .citizen-footer,
.mw-special-PasswordReset .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
width: 100%;
padding: var( --space-md, 1rem );
border: 0;
box-shadow: none;
}

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

MediaWiki:Citizen.css

2026-08-19T18:14:57Z

Admin：页脚改回通栏平铺，去掉悬浮卡片形态

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
皮肤原生页脚是「一整块 --color-surface-1 平铺 + 两段 flex」，在本站的
浅色玻璃质感下显得生硬：整块纯白压在光斑背景上，没有边界感；
footer-places 的三个链接靠 grid auto-fit 撑成 10rem 一格，链接之间距离
极大且左对齐失衡；底部 tagline / MediaWiki 徽标一行没有呼吸感。
这里保持整幅通栏平铺（不做悬浮卡片），只修正排版：顶边一条品牌渐变细线、
logo 与文字并排、链接收成自然行。
-------------------------------------------------------------------------- */

.citizen-footer {
position: relative;
z-index: 1;
padding-block: var( --space-xxl, 2rem );
margin-top: 4rem;
background-color: var( --color-surface-1 );
border-block-start: 1px solid var( --kuke-glass-border );
}

/* 顶边一条品牌渐变，替代原本硬邦邦的整块底色 */
.citizen-footer::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 2px;
background-image: linear-gradient(
90deg,
transparent 0%,
var( --kuke-brand ) 22%,
var( --kuke-brand-light ) 50%,
var( --kuke-brand ) 78%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}

.citizen-footer__container {
padding-inline: var( --space-xl, 1.5rem );
}

/* 上半区：站点信息（左）+ 链接组（右） */
.citizen-footer__content {
gap: var( --space-xl, 1.5rem ) var( --space-xxl, 2rem );
align-items: flex-start;
padding-block: var( --space-xl, 1.5rem );
}

.citizen-footer__siteinfo {
gap: var( --space-sm, 0.75rem );
max-width: 46ch;
}

/* 图标与文字标改成并排，原生是纵向堆叠，占高太多 */
.citizen-footer__sitetitle {
flex-direction: row;
align-items: center;
gap: var( --space-sm, 0.75rem );
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: var( --border-radius-medium, 8px );
}

.citizen-footer__sitetitle .mw-logo-wordmark {
width: auto;
height: 22px;
}

.citizen-footer__desc {
color: var( --color-subtle );
line-height: 1.7;
}

/* 三个页脚链接：原生 grid auto-fit minmax(10rem) 会把它们摊得极散，
改成自然换行的行内组，右对齐贴着站点信息 */
#footer-places {
flex-grow: 0;
align-items: center;
margin: 0;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: var( --space-xs, 0.5rem );
justify-content: flex-end;
}

#footer-places a {
padding: var( --space-xs, 0.5rem ) var( --space-md, 1rem );
font-weight: 500;
color: var( --color-base );
border: 1px solid transparent;
border-radius: var( --border-radius-pill, 9999px );
transition: color 0.2s var( --kuke-ease ),
background-color 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-places a:hover,
#footer-places a:focus {
color: var( --kuke-brand-strong );
background-color: var( --kuke-brand-pale );
border-color: var( --kuke-card-border-hover );
}

/* 下半区：tagline + MediaWiki 徽标 */
.citizen-footer__bottom {
gap: var( --space-md, 1rem ) var( --space-xl, 1.5rem );
padding-block: var( --space-md, 1rem );
border-block-start: 1px solid var( --kuke-glass-border );
}

#footer-tagline {
color: var( --color-subtle );
line-height: 1.6;
}

#footer-icons a {
padding: var( --space-xxs, 0.25rem ) var( --space-xs, 0.5rem );
/* 保留固定浅底：poweredby 徽标含黑色文字路径，暗色下不可翻转 */
background-color: var( --background-color-base-fixed, #fff );
border: 1px solid var( --kuke-glass-border );
border-radius: var( --border-radius-medium, 8px );
opacity: 0.75;
transition: opacity 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-icons a:hover {
border-color: var( --kuke-card-border-hover );
opacity: 1;
}

/* 首页：正文已经自带底部分类墙，页脚不必再拉开 4rem */
.page-首页 .citizen-footer,
.page-Main_Page .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.citizen-footer {
padding-inline: var( --space-md, 1rem );
margin-top: 2.5rem;
}

.citizen-footer__container {
padding-inline: var( --space-md, 1rem );
}

#footer-places ul {
justify-content: flex-start;
}
}

/* --------------------------------------------------------------------------
22. 登录 / 注册 / 找回密码
Special:UserLogin 等页面走的是 MediaWiki 核心的 HTMLForm + Codex，
Citizen 没有为它做任何版式，默认是「左上角一个 400px 窄条」，
周围大片空白，很不像一个正经站点的登录页。
这里把表单包成居中卡片，并给页面标题做成卡片内的头部。
作用域限定在 body.mw-special-* 上，不影响其他 Special 页。
-------------------------------------------------------------------------- */

.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 .citizen-page-header,
.mw-special-CreateAccount .citizen-page-header,
.mw-special-PasswordReset .citizen-page-header {
max-width: 26rem;
padding-block-end: 0;
margin-inline: auto;
border-block-end: 0;
}

.mw-special-Userlogin .citizen-page-header .firstHeading,
.mw-special-CreateAccount .citizen-page-header .firstHeading,
.mw-special-PasswordReset .citizen-page-header .firstHeading {
font-size: 1.75rem;
text-align: center;
}

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

/* 表单卡片本体 */
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
box-sizing: border-box;
width: 100%;
max-width: 26rem;
padding: var( --space-xl, 1.5rem );
margin-inline: auto;
background-color: var( --kuke-card-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
box-shadow: var( --kuke-shadow );
}

/* 注册页多一列「加入我们的理由」，让它跟表单并排且不抢焦点 */
.mw-special-CreateAccount .mw-ui-container {
display: flex;
flex-wrap: wrap;
gap: var( --space-xxl, 2rem );
align-items: flex-start;
justify-content: center;
}

.mw-special-CreateAccount #userloginForm {
flex: 0 1 26rem;
}

.mw-special-CreateAccount .mw-createacct-benefits-container {
flex: 0 1 22rem;
padding: var( --space-xl, 1.5rem );
color: var( --color-subtle );
background-color: var( --kuke-notice-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
}

.mw-special-CreateAccount .mw-createacct-benefits-heading {
margin-block-end: var( --space-md, 1rem );
font-size: 1.05rem;
font-weight: 600;
color: var( --color-emphasized );
}

/* 字段：标签加重、间距拉开 */
.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field {
margin-block-end: var( --space-md, 1rem );
}

.mw-special-Userlogin .cdx-label__label__text,
.mw-special-CreateAccount .cdx-label__label__text,
.mw-special-PasswordReset .cdx-label__label__text {
font-weight: 600;
color: var( --color-emphasized );
}

.mw-special-Userlogin .cdx-text-input__input,
.mw-special-CreateAccount .cdx-text-input__input,
.mw-special-PasswordReset .cdx-text-input__input {
padding-block: 0.6rem;
border-radius: var( --border-radius-medium, 8px );
transition: border-color 0.2s var( --kuke-ease ),
box-shadow 0.2s 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 );
box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

/* 主按钮：与站内 .mp-button--primary 同一套观感 */
.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit {
height: auto;
padding-block: 0.65rem;
margin-block-start: var( --space-xs, 0.5rem );
font-weight: 600;
border-radius: var( --border-radius-medium, 8px );
transition: transform 0.2s var( --kuke-ease ),
box-shadow 0.2s var( --kuke-ease );
}

.mw-special-Userlogin .mw-htmlform-submit:hover,
.mw-special-CreateAccount .mw-htmlform-submit:hover,
.mw-special-PasswordReset .mw-htmlform-submit:hover {
transform: translateY( -1px );
box-shadow: var( --kuke-shadow-brand );
}

/* 「忘记密码 / 登录帮助」两条辅助链接：缩小、并排、居中 */
.mw-special-Userlogin .mw-form-related-link-container {
margin-block-end: var( --space-xs, 0.5rem );
font-size: 0.875rem;
text-align: center;
}

/* 底部「还没有账号？」做成分隔线以下的次级区块 */
#mw-createaccount-cta {
padding-block-start: var( --space-md, 1rem );
margin-block-start: var( --space-xs, 0.5rem );
font-size: 0.9rem;
color: var( --color-subtle );
text-align: center;
border-block-start: 1px solid var( --kuke-card-border );
}

#mw-createaccount-cta #mw-createaccount-join {
display: block;
margin-block-start: var( --space-sm, 0.75rem );
}

/* 登录页的错误 / 提示框跟表单同宽居中 */
.mw-special-Userlogin .cdx-message,
.mw-special-CreateAccount .cdx-message,
.mw-special-PasswordReset .cdx-message {
box-sizing: border-box;
max-width: 26rem;
margin-inline: auto;
border-radius: var( --border-radius-medium, 8px );
}

@media screen and ( max-width: 850px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
padding: var( --space-md, 1rem );
border: 0;
box-shadow: none;
}

.mw-special-CreateAccount .mw-createacct-benefits-container {
flex-basis: 100%;
}
}

MediaWiki:Citizen.css

2026-08-19T17:26:46Z

Admin：注册页表单列宽

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

.kuke-nav__link--active,
.kuke-nav__link--active:visited {
color: var( --kuke-brand-strong );
font-weight: 600;
}

.kuke-nav__link--active::after {
position: absolute;
right: 12px;
bottom: -6px;
left: 12px;
height: 2px;
content: '';
background-color: var( --kuke-brand-strong );
border-radius: 2px;
}

.kuke-nav__link--active:hover,
.kuke-nav__link--active:focus {
background-color: var( --kuke-brand-pale );
color: var( --kuke-brand-strong );
}

/* 左 / 右侧竖排顶栏：改为纵向堆叠，下划线换成左侧竖条 */
.citizen-header-position-left .kuke-nav,
.citizen-header-position-right .kuke-nav {
flex-direction: column;
align-items: stretch;
width: 100%;
overflow-x: visible;
}

.citizen-header-position-left .kuke-nav__link--active::after,
.citizen-header-position-right .kuke-nav__link--active::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
皮肤原生页脚是「一整块 --color-surface-1 平铺 + 两段 flex」，在本站的
浅色玻璃质感下显得生硬：整块纯白压在光斑背景上，没有边界感；
footer-places 的三个链接靠 grid auto-fit 撑成 10rem 一格，链接之间距离
极大且左对齐失衡；底部 tagline / MediaWiki 徽标一行没有呼吸感。
这里重做成：与正文同宽的卡片式面板 + 顶部品牌渐变细线 + 链接收成自然行。
-------------------------------------------------------------------------- */

.citizen-footer {
position: relative;
z-index: 1;
padding-block: var( --space-xxl, 2rem );
margin-top: 4rem;
background-color: transparent;
border-block-start: 1px solid var( --kuke-glass-border );
}

/* 顶边一条品牌渐变，替代原本硬邦邦的整块底色 */
.citizen-footer::before {
content: "";
position: absolute;
inset-block-start: -1px;
inset-inline: 0;
height: 2px;
background-image: linear-gradient(
90deg,
transparent 0%,
var( --kuke-brand ) 22%,
var( --kuke-brand-light ) 50%,
var( --kuke-brand ) 78%,
transparent 100%
);
opacity: 0.55;
pointer-events: none;
}

.citizen-footer__container {
background-color: var( --kuke-glass );
border: 1px solid var( --kuke-glass-border );
border-radius: var( --border-radius-large, 12px );
padding-inline: var( --space-xl, 1.5rem );
-webkit-backdrop-filter: blur( 24px ) saturate( 180% );
backdrop-filter: blur( 24px ) saturate( 180% );
box-shadow: var( --kuke-shadow );
}

/* 上半区：站点信息（左）+ 链接组（右） */
.citizen-footer__content {
gap: var( --space-xl, 1.5rem ) var( --space-xxl, 2rem );
align-items: flex-start;
padding-block: var( --space-xl, 1.5rem );
}

.citizen-footer__siteinfo {
gap: var( --space-sm, 0.75rem );
max-width: 46ch;
}

/* 图标与文字标改成并排，原生是纵向堆叠，占高太多 */
.citizen-footer__sitetitle {
flex-direction: row;
align-items: center;
gap: var( --space-sm, 0.75rem );
}

.citizen-footer__sitetitle .mw-logo-icon {
width: 40px;
height: 40px;
border-radius: var( --border-radius-medium, 8px );
}

.citizen-footer__sitetitle .mw-logo-wordmark {
width: auto;
height: 22px;
}

.citizen-footer__desc {
color: var( --color-subtle );
line-height: 1.7;
}

/* 三个页脚链接：原生 grid auto-fit minmax(10rem) 会把它们摊得极散，
改成自然换行的行内组，右对齐贴着站点信息 */
#footer-places {
flex-grow: 0;
align-items: center;
margin: 0;
}

#footer-places ul {
display: flex;
flex-wrap: wrap;
gap: var( --space-xs, 0.5rem );
justify-content: flex-end;
}

#footer-places a {
padding: var( --space-xs, 0.5rem ) var( --space-md, 1rem );
font-weight: 500;
color: var( --color-base );
border: 1px solid transparent;
border-radius: var( --border-radius-pill, 9999px );
transition: color 0.2s var( --kuke-ease ),
background-color 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-places a:hover,
#footer-places a:focus {
color: var( --kuke-brand-strong );
background-color: var( --kuke-brand-pale );
border-color: var( --kuke-card-border-hover );
}

/* 下半区：tagline + MediaWiki 徽标 */
.citizen-footer__bottom {
gap: var( --space-md, 1rem ) var( --space-xl, 1.5rem );
padding-block: var( --space-md, 1rem );
border-block-start: 1px solid var( --kuke-glass-border );
}

#footer-tagline {
color: var( --color-subtle );
line-height: 1.6;
}

#footer-icons a {
padding: var( --space-xxs, 0.25rem ) var( --space-xs, 0.5rem );
/* 保留固定浅底：poweredby 徽标含黑色文字路径，暗色下不可翻转 */
background-color: var( --background-color-base-fixed, #fff );
border: 1px solid var( --kuke-glass-border );
border-radius: var( --border-radius-medium, 8px );
opacity: 0.75;
transition: opacity 0.2s var( --kuke-ease ),
border-color 0.2s var( --kuke-ease );
}

#footer-icons a:hover {
border-color: var( --kuke-card-border-hover );
opacity: 1;
}

/* 首页：正文已经自带底部分类墙，页脚不必再拉开 4rem */
.page-首页 .citizen-footer,
.page-Main_Page .citizen-footer {
margin-top: var( --space-xxl, 2rem );
}

@media screen and ( max-width: 850px ) {
.citizen-footer {
padding-inline: var( --space-md, 1rem );
margin-top: 2.5rem;
}

.citizen-footer__container {
padding-inline: var( --space-md, 1rem );
}

#footer-places ul {
justify-content: flex-start;
}
}

/* --------------------------------------------------------------------------
22. 登录 / 注册 / 找回密码
Special:UserLogin 等页面走的是 MediaWiki 核心的 HTMLForm + Codex，
Citizen 没有为它做任何版式，默认是「左上角一个 400px 窄条」，
周围大片空白，很不像一个正经站点的登录页。
这里把表单包成居中卡片，并给页面标题做成卡片内的头部。
作用域限定在 body.mw-special-* 上，不影响其他 Special 页。
-------------------------------------------------------------------------- */

.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 .citizen-page-header,
.mw-special-CreateAccount .citizen-page-header,
.mw-special-PasswordReset .citizen-page-header {
max-width: 26rem;
padding-block-end: 0;
margin-inline: auto;
border-block-end: 0;
}

.mw-special-Userlogin .citizen-page-header .firstHeading,
.mw-special-CreateAccount .citizen-page-header .firstHeading,
.mw-special-PasswordReset .citizen-page-header .firstHeading {
font-size: 1.75rem;
text-align: center;
}

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

/* 表单卡片本体 */
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
box-sizing: border-box;
width: 100%;
max-width: 26rem;
padding: var( --space-xl, 1.5rem );
margin-inline: auto;
background-color: var( --kuke-card-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
box-shadow: var( --kuke-shadow );
}

/* 注册页多一列「加入我们的理由」，让它跟表单并排且不抢焦点 */
.mw-special-CreateAccount .mw-ui-container {
display: flex;
flex-wrap: wrap;
gap: var( --space-xxl, 2rem );
align-items: flex-start;
justify-content: center;
}

.mw-special-CreateAccount #userloginForm {
flex: 0 1 26rem;
}

.mw-special-CreateAccount .mw-createacct-benefits-container {
flex: 0 1 22rem;
padding: var( --space-xl, 1.5rem );
color: var( --color-subtle );
background-color: var( --kuke-notice-bg );
border: 1px solid var( --kuke-card-border );
border-radius: var( --border-radius-large, 12px );
}

.mw-special-CreateAccount .mw-createacct-benefits-heading {
margin-block-end: var( --space-md, 1rem );
font-size: 1.05rem;
font-weight: 600;
color: var( --color-emphasized );
}

/* 字段：标签加重、间距拉开 */
.mw-special-Userlogin .cdx-field,
.mw-special-CreateAccount .cdx-field,
.mw-special-PasswordReset .cdx-field {
margin-block-end: var( --space-md, 1rem );
}

.mw-special-Userlogin .cdx-label__label__text,
.mw-special-CreateAccount .cdx-label__label__text,
.mw-special-PasswordReset .cdx-label__label__text {
font-weight: 600;
color: var( --color-emphasized );
}

.mw-special-Userlogin .cdx-text-input__input,
.mw-special-CreateAccount .cdx-text-input__input,
.mw-special-PasswordReset .cdx-text-input__input {
padding-block: 0.6rem;
border-radius: var( --border-radius-medium, 8px );
transition: border-color 0.2s var( --kuke-ease ),
box-shadow 0.2s 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 );
box-shadow: 0 0 0 3px var( --kuke-brand-pale );
}

/* 主按钮：与站内 .mp-button--primary 同一套观感 */
.mw-special-Userlogin .mw-htmlform-submit,
.mw-special-CreateAccount .mw-htmlform-submit,
.mw-special-PasswordReset .mw-htmlform-submit {
height: auto;
padding-block: 0.65rem;
margin-block-start: var( --space-xs, 0.5rem );
font-weight: 600;
border-radius: var( --border-radius-medium, 8px );
transition: transform 0.2s var( --kuke-ease ),
box-shadow 0.2s var( --kuke-ease );
}

.mw-special-Userlogin .mw-htmlform-submit:hover,
.mw-special-CreateAccount .mw-htmlform-submit:hover,
.mw-special-PasswordReset .mw-htmlform-submit:hover {
transform: translateY( -1px );
box-shadow: var( --kuke-shadow-brand );
}

/* 「忘记密码 / 登录帮助」两条辅助链接：缩小、并排、居中 */
.mw-special-Userlogin .mw-form-related-link-container {
margin-block-end: var( --space-xs, 0.5rem );
font-size: 0.875rem;
text-align: center;
}

/* 底部「还没有账号？」做成分隔线以下的次级区块 */
#mw-createaccount-cta {
padding-block-start: var( --space-md, 1rem );
margin-block-start: var( --space-xs, 0.5rem );
font-size: 0.9rem;
color: var( --color-subtle );
text-align: center;
border-block-start: 1px solid var( --kuke-card-border );
}

#mw-createaccount-cta #mw-createaccount-join {
display: block;
margin-block-start: var( --space-sm, 0.75rem );
}

/* 登录页的错误 / 提示框跟表单同宽居中 */
.mw-special-Userlogin .cdx-message,
.mw-special-CreateAccount .cdx-message,
.mw-special-PasswordReset .cdx-message {
box-sizing: border-box;
max-width: 26rem;
margin-inline: auto;
border-radius: var( --border-radius-medium, 8px );
}

@media screen and ( max-width: 850px ) {
.mw-special-Userlogin #userloginForm,
.mw-special-CreateAccount #userloginForm,
.mw-special-PasswordReset #mw-content-text > form {
padding: var( --space-md, 1rem );
border: 0;
box-shadow: none;
}

.mw-special-CreateAccount .mw-createacct-benefits-container {
flex-basis: 100%;
}
}