/* ==========================================================================
   restart-fluent · fluent.css
   设计令牌、壁纸、应用外壳（侧栏 + 内容区）与 Fluent 的 Reveal / 按压效果。
   页面级组件在 feed.css，正文排版在 content.css。
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
	color-scheme: dark;

	--accent: #0078d4;
	--accent-text: #6db3f2;
	--accent-text: color-mix(in srgb, var(--accent) 66%, white);
	--accent-soft: rgba(0, 120, 212, .18);
	--accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
	--accent-line: rgba(0, 120, 212, .55);
	--accent-line: color-mix(in srgb, var(--accent) 55%, transparent);

	--acrylic-blur: 24px;
	--ease: cubic-bezier(.1, .9, .2, 1);
	--ease-out: cubic-bezier(.16, .84, .44, 1);

	--body-bg: #06101f;
	--text: rgba(255, 255, 255, .94);
	--text-dim: rgba(255, 255, 255, .64);
	--text-mute: rgba(255, 255, 255, .42);
	--stroke: rgba(255, 255, 255, .08);
	--stroke-strong: rgba(255, 255, 255, .17);
	--surface: rgba(255, 255, 255, .05);
	--surface-hover: rgba(255, 255, 255, .09);
	--panel: rgba(19, 23, 30, .78);
	--panel-solid: #151a22;
	--field: rgba(0, 0, 0, .28);
	--field-focus: rgba(0, 0, 0, .4);
	--code-bg: rgba(0, 0, 0, .35);
	--shadow: 0 10px 30px rgba(0, 0, 0, .45);
	--shadow-strong: 0 18px 48px rgba(0, 0, 0, .58);
	--reveal: rgba(255, 255, 255, .16);
	--reveal-strong: rgba(255, 255, 255, .34);
	--edge: rgba(255, 255, 255, .8);
	--scrollbar: rgba(255, 255, 255, .18);
	--scrollbar-hover: rgba(255, 255, 255, .32);

	--dash-w: 260px;
	--header-h: 56px;
	--topnav-h: 40px;
	--nav-h: 16px;
	--feed-max: 1180px;

	/* ---------- 正文增强组件的变量别名 ----------
	   这些组件从 restart 迁入，类名与结构保持不变，统一映射到本主题令牌，
	   免得两套主题各维护一份重复的样式。 */
	--c-bg: var(--body-bg);
	--c-border: var(--stroke);
	--c-border-strong: var(--stroke-strong);
	--c-code-bg: var(--code-bg);
	--c-faint: var(--text-mute);
	--c-muted: var(--text-mute);
	--c-primary: var(--accent);
	--c-primary-dark: var(--accent-text);
	--c-primary-soft: var(--accent-soft);
	--c-surface: var(--surface);
	--c-text: var(--text-dim);
	--c-title: var(--text);
	--font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

	--sx-comment: #7f848e;
	--sx-punct: #9aa0a6;
	--sx-number: #d19a66;
	--sx-string: #98c379;
	--sx-operator: #56b6c2;
	--sx-keyword: #c678dd;
	--sx-func: #61afef;
	--sx-special: #e06c75;
}

html[data-theme="light"] {
	color-scheme: light;

	--accent-text: #0067b8;
	--accent-text: color-mix(in srgb, var(--accent) 72%, black);
	--accent-soft: rgba(0, 120, 212, .12);
	--accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
	--accent-line: rgba(0, 120, 212, .45);
	--accent-line: color-mix(in srgb, var(--accent) 45%, transparent);

	--body-bg: #eef4fb;
	--text: rgba(12, 20, 32, .92);
	--text-dim: rgba(12, 20, 32, .64);
	--text-mute: rgba(12, 20, 32, .44);
	--stroke: rgba(12, 20, 32, .1);
	--stroke-strong: rgba(12, 20, 32, .2);
	--surface: rgba(255, 255, 255, .58);
	--surface-hover: rgba(255, 255, 255, .84);
	--panel: rgba(244, 248, 253, .82);
	--panel-solid: #f4f8fd;
	--field: rgba(255, 255, 255, .66);
	--field-focus: rgba(255, 255, 255, .92);
	--code-bg: rgba(12, 20, 32, .06);
	--shadow: 0 12px 32px rgba(23, 48, 84, .16);
	--shadow-strong: 0 20px 48px rgba(23, 48, 84, .22);
	--reveal: rgba(255, 255, 255, .7);
	--reveal-strong: rgba(255, 255, 255, .95);
	--edge: rgba(255, 255, 255, .95);
	--scrollbar: rgba(12, 20, 32, .2);
	--scrollbar-hover: rgba(12, 20, 32, .34);

	--sx-comment: #708090;
	--sx-punct: #999999;
	--sx-number: #990055;
	--sx-string: #669900;
	--sx-operator: #9a6e3a;
	--sx-keyword: #0077aa;
	--sx-func: #dd4a68;
	--sx-special: #ee9900;
}

/* ---------- 基础 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	height: 100%;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* 关掉移动端点击时的蓝色/灰色高亮块 */
	-webkit-tap-highlight-color: transparent;
}

body {
	min-height: 100%;
	margin: 0;
	font-family: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", system-ui, -apple-system, sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: var(--text);
	background: var(--body-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.drawer-locked { overflow: hidden; }

/* 抽屉打开时，页面上的浮动按钮不该浮在遮罩之上 */
body.drawer-locked .to-top,
body.drawer-locked .toc-toggle,
body.drawer-locked .player { display: none; }

input,
button,
select,
textarea { font-family: inherit; }

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

button { font: inherit; }

::selection {
	background: var(--accent-soft);
	color: var(--text);
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 8px 14px;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	transform: translateY(-160%);
	transition: transform .16s var(--ease);
}

.skip-link:focus { transform: translateY(0); }

/* ---------- 壁纸 ---------- */
.wallpaper {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 50% at 16% 10%, rgba(30, 110, 200, .42), transparent 60%),
		radial-gradient(ellipse 52% 46% at 86% 80%, rgba(20, 90, 170, .34), transparent 62%),
		radial-gradient(ellipse 44% 40% at 64% 18%, rgba(60, 150, 235, .22), transparent 60%),
		linear-gradient(160deg, #071a30 0%, #0a2440 48%, #04101f 100%);
}

.wallpaper::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, .62) 100%);
}

.wallpaper-glow {
	position: absolute;
	inset: -20%;
	background: conic-gradient(from 200deg at 50% 50%,
		transparent 0deg, rgba(120, 200, 255, .13) 45deg, transparent 110deg,
		rgba(80, 160, 240, .09) 180deg, transparent 250deg);
	filter: blur(60px);
	opacity: .7;
	animation: wallpaper-drift 32s linear infinite;
}

.wallpaper-noise {
	position: absolute;
	inset: 0;
	opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

html[data-theme="light"] .wallpaper {
	background:
		radial-gradient(ellipse 62% 52% at 14% 8%, rgba(120, 180, 240, .5), transparent 62%),
		radial-gradient(ellipse 50% 44% at 88% 82%, rgba(150, 196, 245, .45), transparent 64%),
		linear-gradient(160deg, #f7fbff 0%, #e7f0fa 52%, #dce9f7 100%);
}

html[data-theme="light"] .wallpaper::after {
	background: radial-gradient(ellipse at center, transparent 42%, rgba(58, 90, 128, .16) 100%);
}

html[data-theme="light"] .wallpaper-glow { opacity: .38; }

@keyframes wallpaper-drift {
	to { transform: rotate(360deg); }
}

/* ---------- 应用外壳 ---------- */
.app {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--dash-w) minmax(0, 1fr);
	grid-template-rows: var(--topnav-h) minmax(0, 1fr);
	min-height: 100vh;
	transition: grid-template-columns .2s var(--ease);
}

/* ---------- UWP 标题栏 ----------
   跨两列的顶端栏：左返回键（强调色）+ 页面标题，移动端右端再放侧栏入口。 */
.topnav {
	grid-column: 1 / -1;
	grid-row: 1;
	position: sticky;
	top: 0;
	z-index: 65;
	display: flex;
	align-items: center;
	gap: 6px;
	height: var(--topnav-h);
	padding: 0 12px 0 0;
	background: var(--panel);
	border-bottom: 1px solid var(--stroke);
	-webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
	backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
}

.topnav .topnav-back {
	margin: 0;
	width: 56px;
	height: var(--topnav-h);
	flex: none;
	border: 0;
	border-radius: 0;
	background: var(--accent);
	color: #fff;
	transition: background-color .12s var(--ease);
}

/* 只有按下时颜色变深，不做 Reveal / 缩放反馈 */
.topnav .topnav-back:hover {
	background: var(--accent);
}

.topnav .topnav-back:active {
	background: var(--accent);
	background: color-mix(in srgb, var(--accent) 78%, #000);
}

.topnav-title {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.topnav-menu {
	display: none;
	width: 32px;
	height: 32px;
	flex: none;
	place-items: center;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}

.topnav-menu:hover {
	background: var(--surface-hover);
	border-color: var(--stroke);
	color: var(--text);
}

.topnav-menu svg {
	width: 16px;
	height: 16px;
	display: block;
}

.scrim {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(0, 0, 0, .52);
	opacity: 0;
	transition: opacity .2s var(--ease);
}

.scrim[hidden] { display: none; }

.scrim.is-open { opacity: 1; }

/* ---------- 侧栏 ---------- */
.dash {
	grid-column: 1;
	grid-row: 2;
	position: sticky;
	top: var(--topnav-h);
	z-index: 30;
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--topnav-h));
	min-width: 0;
	overflow: hidden;
	background: var(--panel);
	-webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
	backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
}

.dash-head {
	flex: none;
	display: flex;
	align-items: center;
	height: var(--header-h);
	padding: 0 12px 0 14px;
}

.brand {
	display: flex;
	align-items: center;
	min-width: 0;
	flex: 1;
	padding: 6px 0;
}

.brand-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.brand-name {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Win10 开始菜单式的方形图标按钮：32×32，透明底，悬停才出现填充 */
.dash-back,
.dash-toggle {
	width: 32px;
	height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-dim);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}

.dash-back { margin-right: 6px; }

.dash-back svg,
.dash-toggle svg {
	width: 16px;
	height: 16px;
	display: block;
	flex: none;
}

.dash-back:hover,
.dash-toggle:hover {
	background: var(--surface-hover);
	color: var(--text);
	border-color: var(--stroke);
}

/* ---------- 侧栏折叠/展开（在 dash 底部） ---------- */
.dash-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 12px 14px 16px;
	scrollbar-width: thin;
	scrollbar-color: var(--scrollbar) transparent;
}

.dash-body::-webkit-scrollbar { width: 8px; }
.dash-body::-webkit-scrollbar-track { background: transparent; }

.dash-body::-webkit-scrollbar-thumb {
	background: var(--scrollbar);
	border: 2px solid transparent;
	background-clip: content-box;
}

.dash-body::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); background-clip: content-box; }

/* 搜索 */
.dash .dash-search-btn { display: none; }

.side-search {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 14px;
}

.side-search > .fa-search {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: var(--text-mute);
	pointer-events: none;
}

.side-search input {
	width: 100%;
	height: 36px;
	padding: 0 10px 0 30px;
	font-size: 13px;
	color: var(--text);
	background: var(--field);
	border: 1px solid var(--stroke);
	border-bottom: 2px solid var(--stroke-strong);
	border-radius: 0;
	outline: none;
	transition: background .15s var(--ease), border-color .15s var(--ease);
}

.side-search input::placeholder { color: var(--text-mute); }

.side-search input:focus {
	background: var(--field-focus);
	border-bottom-color: var(--accent);
}

/* 导航 */
.side-nav { padding-bottom: 4px; }

.ctrl-label {
	display: flex;
	align-items: center;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--text-mute);
}

/* Win10 开始菜单式导航行：40px 高、直角、透明底，悬停才填充。
   选中项用左侧 3px 强调色短条，而不是渐变背景或箭头。 */
.nav-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 10px;
	color: var(--text-dim);
	font-size: 14px;
	transition: background .12s var(--ease), color .12s var(--ease);
}

.nav-item::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 1;
	width: 3px;
	height: 0;
	background: var(--accent);
	transform: translateY(-50%);
	transition: height .15s var(--ease);
}

.nav-item > .fa:first-child {
	width: 18px;
	flex: none;
	font-size: 15px;
	text-align: center;
}

.nav-text {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.nav-item:hover {
	background: var(--surface-hover);
	color: var(--text);
}

.nav-item.active {
	background: var(--surface-hover);
	color: var(--text);
	font-weight: 600;
	box-shadow: inset 0 0 0 1px var(--stroke);
}

.nav-item.active::after { height: 100%; }
.nav-item.active > .fa:first-child { color: var(--accent-text); }

.nav-item:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* 外观区：独立于 .dash-body 的滚动区，始终贴在侧栏底部 */
.dash-look {
	flex: none;
	padding: 12px 14px 14px;
	transition: opacity .16s var(--ease);
}

/* 展开过程中先藏起外观区：此时栏宽还在从 56px 长回来，
   主题色板会被挤成两行再跳回一行；等宽度到位再淡入。 */
html.dash-expanding .dash-look {
	visibility: hidden;
	opacity: 0;
}

/* 底栏：折叠/展开侧栏的入口（原在 dash-head 里） */
.dash-foot {
	flex: none;
	display: flex;
	justify-content: flex-end;
	padding: 8px 14px calc(10px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--stroke);
}

.dash-foot .dash-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 30px;
	padding: 0;
}

/* 色板 */
.swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.swatch {
	position: relative;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--stroke-strong);
	border-radius: 50%;
	background: var(--c);
	cursor: pointer;
	transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}

.swatch:hover { transform: scale(1.14); }

.swatch.active {
	box-shadow: 0 0 0 2px var(--c), 0 0 0 3px var(--text);
}

/* 开关 */
.switch-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 0;
	font-size: 13px;
	color: var(--text-dim);
}

.switch {
	position: relative;
	width: 38px;
	height: 20px;
	flex: none;
	padding: 0;
	border: 1.5px solid var(--stroke-strong);
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	transition: background .18s var(--ease), border-color .18s var(--ease);
}

.switch::after {
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--text-dim);
	transform: translateY(-50%);
	transition: left .18s var(--ease), width .18s var(--ease), height .18s var(--ease), background .18s var(--ease);
}

.switch.on {
	background: var(--accent);
	border-color: var(--accent);
}

.switch.on::after {
	left: 20px;
	width: 12px;
	height: 12px;
	background: #fff;
}

/* ---------- 折叠态：64px 开始菜单图标栏 ----------
   只在桌面生效。移动端是抽屉，永远显示完整侧栏。 */
@media (min-width: 901px) {
	html.dash-collapsed { --dash-w: 56px; }

	html.dash-collapsed .dash-foot {
		justify-content: center;
		padding-left: 4px;
		padding-right: 4px;
	}

	html.dash-collapsed .dash-foot .dash-toggle {
		width: 36px;
		height: 36px;
		padding: 0;
	}

	html.dash-collapsed .side-search,
	html.dash-collapsed .ctrl-label,
	html.dash-collapsed .dash-look { display: none; }

	html.dash-collapsed .dash-search-btn {
		display: grid;
		margin: 0 auto 6px;
	}

	html.dash-collapsed .dash-body {
		padding: 8px 4px;
	}

	html.dash-collapsed .side-nav { padding: 0; }

	html.dash-collapsed .nav-item {
		justify-content: center;
		width: 36px;
		height: 36px;
		margin: 2px auto;
		padding: 0;
	}

	html.dash-collapsed .nav-item .nav-text { display: none; }
}

/* ---------- 主内容区 ---------- */
.feed {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: calc(100vh - var(--topnav-h));
	/* pjax 换页横向推入时，别让位移撑出横向滚动条 */
	overflow-x: clip;
}

/* Win10 式页面标题：小字面包屑，不再是 56px 的 feed-head */
.feed-titlebar {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: var(--feed-max);
	margin: 0 auto;
	padding: 16px 24px 0;
	flex: none;
}

/* 页面标题在 #content 内，pjax 换页时能随内容一起更新 */
#content > .feed-titlebar {
	max-width: none;
	margin: 0;
	padding: 0 0 10px;
}

.page-crumb {
	display: flex;
	align-items: center;
	gap: 7px;
	flex: 0 1 auto;
	min-width: 0;
	font-size: 13.5px;
	color: var(--text-mute);
}

.crumb-parent { white-space: nowrap; }

.crumb-sep { opacity: .45; }

.crumb-current {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 17px;
	line-height: 1.4;
	color: var(--text-dim);
	font-weight: 600;
}

.page-count {
	flex: none;
	font-size: 12px;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.title-actions {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: none;
	margin-left: auto;
}

.icon-btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid transparent;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}

.icon-btn:hover {
	background: var(--tile-tint-hover);
	border-color: var(--stroke);
	color: var(--text);
}

.theme-ico-light { display: none; }

html[data-theme="light"] .theme-ico-dark { display: none; }
html[data-theme="light"] .theme-ico-light { display: inline-block; }

.feed-main {
	flex: 1;
	width: 100%;
	max-width: var(--feed-max);
	min-width: 0;
	margin: 0 auto;
	padding: 10px 24px 46px;
}

.feed-main:focus { outline: none; }

.feed-foot {
	flex: none;
	border-top: 1px solid var(--stroke);
	background: var(--panel);
	-webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
	backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
}

.feed-foot-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
	max-width: var(--feed-max);
	margin: 0 auto;
	padding: 18px 24px;
	font-size: 12.5px;
	color: var(--text-mute);
}

.foot-copy { margin: 0; }
.foot-copy span { color: var(--text-dim); }

.foot-saying {
	flex: 1;
	min-width: 220px;
	margin: 0;
	text-align: center;
	color: var(--text-mute);
}

.foot-meta { margin: 0 0 0 auto; }

.foot-meta a,
.foot-meta span { color: var(--text-dim); }

.foot-dot { margin: 0 6px; color: var(--text-mute); }

/* ---------- 通用控件 ---------- */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 11px;
	font-size: 12.5px;
	color: var(--text-dim);
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}

.chip:hover {
	background: var(--tile-tint-hover);
	color: var(--text);
	border-color: var(--stroke-strong);
}

.chip.is-active {
	color: var(--text);
	background: var(--tile-tint-hover);
	border-color: var(--stroke-strong);
	box-shadow: inset 0 -2px 0 var(--accent);
}

.chip sup {
	font-size: 9px;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}

/* 标签也是按钮：直角、1px 描边、固定高度，不再用 # 前缀或箭头。
   只匹配 a.tag，避免命中 Prism 的 <span class="token tag">，
   否则 HTML 代码块里的标签会真的被画成按钮。
   底色走 --tile-tint + backdrop-filter，和 chip / btn 同一套亚克力语义。 */
a.tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 0 10px;
	font-size: 11.5px;
	color: var(--text-dim);
	background: var(--tile-tint);
	border: 1px solid var(--stroke);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}

a.tag:hover {
	color: var(--text);
	background: var(--tile-tint-hover);
	border-color: var(--stroke-strong);
}

.view-seg {
	display: flex;
	flex: none;
	border: 1px solid var(--stroke);
	background: var(--tile-tint);
}

.seg-btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 30px;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--stroke);
	background: transparent;
	color: var(--text-mute);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease);
}

.seg-btn:last-child { border-right: 0; }

.seg-btn:hover {
	background: var(--tile-tint-hover);
	color: var(--text);
}

.seg-btn.is-active {
	background: var(--accent);
	color: #fff;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 16px;
	font-size: 13.5px;
	color: var(--text);
	background: var(--tile-tint);
	border: 1px solid var(--stroke-strong);
	cursor: pointer;
	transition: background .12s var(--ease), border-color .12s var(--ease), filter .12s var(--ease);
}

.btn:hover {
	background: var(--tile-tint-hover);
	border-color: var(--text-mute);
}

.btn-accent {
	background: var(--accent);
	border-color: transparent;
	color: #fff;
}

.btn-accent:hover {
	background: var(--accent);
	border-color: transparent;
	filter: brightness(1.14);
}

/* ---------- Fluent 效果 ---------- */
.reveal {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.reveal::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%),
		var(--reveal), transparent 46%, transparent 72%);
	transition: opacity .18s var(--ease);
}

.reveal:hover::before { opacity: 1; }

.reveal.pressing::before {
	opacity: .95;
	background: radial-gradient(100px circle at var(--mx, 50%) var(--my, 50%),
		var(--reveal-strong), transparent 46%, transparent 70%);
	transition: opacity .04s ease-out;
}

html.no-effects .reveal::before { opacity: 0 !important; }

/* 触屏没有 hover 语义：点按后别再闪一层 Reveal 高光 */
@media (hover: none) {
	.reveal::before { opacity: 0 !important; }
}

.edge-glow {
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 1px;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(80px circle at var(--bx, 50%) var(--by, 50%),
		var(--edge), color-mix(in srgb, var(--edge) 28%, transparent) 42%, transparent 72%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
}

html.no-effects .edge-glow { display: none; }

.pressable {
	position: relative;
	transform-origin: center;
	will-change: transform;
	transition:
		background-color .12s var(--ease),
		border-color .12s var(--ease),
		color .12s var(--ease),
		filter .12s var(--ease),
		box-shadow .28s var(--ease-out),
		transform .32s var(--ease-out);
}

.pressable.pressing {
	/* 点击位置决定倾斜方向：左半边向左倾，右半边向右倾 */
	transform:
		perspective(700px)
		rotateY(calc(var(--rx, 0deg) * .65))
		rotateX(calc(var(--ry, 0deg) * -.45))
		scale(.965);
	box-shadow: none;
	filter: brightness(1.06);
	transition:
		background-color .05s var(--ease),
		border-color .05s var(--ease),
		color .05s var(--ease),
		filter .05s var(--ease),
		box-shadow .05s ease-out,
		transform .055s ease-out;
}

.pressable.pressing .edge-glow { opacity: 0 !important; }

html.no-effects .pressable.pressing {
	transform: none;
	box-shadow: none;
	filter: none;
}

/* ---------- 回到顶部 ---------- */
.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 40;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--stroke-strong);
	background: var(--tile-tint);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	color: var(--text-dim);
	font-size: 18px;
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .18s var(--ease), transform .18s var(--ease), color .12s var(--ease);
}

.to-top.show {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.to-top:hover { color: var(--text); }

/* ---------- 空状态 ---------- */
.empty-state {
	padding: 54px 20px;
	text-align: center;
	color: var(--text-mute);
	font-size: 13px;
	border: 1px dashed var(--stroke-strong);
	background: var(--tile-tint);
}

.empty-state > .fa {
	display: block;
	margin-bottom: 10px;
	font-size: 30px;
	opacity: .55;
}

.empty-state p { margin: 0; }
.empty-state a { color: var(--accent-text); }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {
	background: var(--scrollbar);
	border: 3px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scrollbar-hover);
	background-clip: content-box;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1180px) {
	:root { --dash-w: 250px; }
	.feed-titlebar,
	.feed-main,
	.feed-foot-inner { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 900px) {
	.app { grid-template-columns: minmax(0, 1fr); }

	.feed { grid-column: 1; }

	.dash {
		position: fixed;
		top: var(--topnav-h);
		bottom: 0;
		left: 0;
		width: min(300px, 86vw);
		height: auto;
		z-index: 60;
		transform: translateX(-101%);
		transition: transform .22s var(--ease);
		box-shadow: 0 0 44px rgba(0, 0, 0, .55);
	}

	.app.drawer-open .dash { transform: translateX(0); }

	.dash-toggle { display: none; }
	.dash-foot { display: none; }

	/* 移动端在标题栏右侧给出侧栏入口 */
	.topnav-menu { display: grid; }

	.feed-main { padding-top: 10px; }

	.to-top { right: 16px; bottom: 16px; }
}

@media (max-width: 640px) {
	.feed-main { padding: 8px 12px 34px; }

	.feed-foot-inner {
		display: block;
		padding: 16px 12px;
		text-align: center;
	}

	.foot-saying { margin-top: 4px; }
	.foot-meta { margin: 4px 0 0; }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.wallpaper-glow { animation: none; }
}

/* ---------- 明暗：跟随系统 / 浅色 / 深色 ---------- */
.look-row {
	margin-top: 12px;
}

.look-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--text-dim);
}

.theme-modes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	background: var(--surface);
	border: 1px solid var(--stroke);
}

.theme-mode {
	height: 28px;
	padding: 0 2px;
	font-family: inherit;
	font-size: 11px;
	color: var(--text-mute);
	background: transparent;
	border: 0;
	border-right: 1px solid var(--stroke);
	cursor: pointer;
	transition: background .12s var(--ease), color .12s var(--ease);
}

.theme-mode:last-child { border-right: 0; }

.theme-mode:hover {
	color: var(--text);
	background: var(--surface-hover);
}

.theme-mode.is-active {
	color: var(--text);
	font-weight: 600;
	background: var(--surface-hover);
	box-shadow: inset 0 -2px 0 var(--stroke-strong);
}

/* ---------- 壁纸：路径与压暗程度都可以在主题配置里改 ---------- */
body { background: var(--body-bg); }

.wallpaper {
	display: none;
	background-color: var(--body-bg) !important;
	background-image: var(--wallpaper-image) !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: var(--wallpaper-opacity, 1);
}

.wallpaper.is-on { display: block; }

.wallpaper::after {
	background: rgba(0, 0, 0, var(--wallpaper-dim, .42));
}

.wallpaper-glow,
.wallpaper-noise { display: none; }

html[data-theme="light"] .wallpaper {
	background-color: var(--body-bg) !important;
	background-image: var(--wallpaper-image) !important;
}

.dash {
	background: var(--panel-solid);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

@media (max-width: 900px) {
	.dash { box-shadow: none; }
	.app.drawer-open .dash { box-shadow: 0 0 44px rgba(0, 0, 0, .55); }
}

/* ---------- 亚克力：dash、按钮与卡片 ---------- */
.dash,
.home-hero,
.post-card,
.featured,
.side-card,
.page-card,
.about-profile,
.search-panel,
.notfound,
.term-card,
.friend-card,
.ghcard,
.music-card,
.countdown,
.toc-box,
.empty-state,
.cal-card,
.archive-stats,
.player {
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

:root {
	--tile-tint: rgba(42, 48, 58, .72);
	--tile-tint-hover: rgba(54, 60, 72, .82);
}

html[data-theme="light"] {
	--tile-tint: rgba(255, 255, 255, .78);
	--tile-tint-hover: rgba(255, 255, 255, .92);
}

.dash,
.home-hero,
.post-card,
.featured,
.side-card,
.page-card,
.about-profile,
.search-panel,
.notfound,
.term-card,
.friend-card,
.ghcard,
.music-card,
.countdown,
.toc-box,
.empty-state,
.cal-card {
	background-color: var(--tile-tint);
}

.btn:not(.btn-accent),
.icon-btn,
.hero-nav,
.hero-dot,
.seg-btn,
.pager-btn,
.share-btn,
.archive-item {
	background-color: var(--tile-tint);
}

.btn:not(.btn-accent):hover,
.btn:not(.btn-accent):focus,
.icon-btn:hover,
.icon-btn:focus,
.hero-nav:hover,
.hero-dot:hover,
.seg-btn:hover,
.pager-btn:hover,
.share-btn:hover,
.archive-item:hover {
	background-color: var(--tile-tint-hover);
}

.btn:not(.btn-accent),
.icon-btn,
.theme-mode,
.hero-nav,
.hero-dot,
.seg-btn,
.pager-btn,
.share-btn,
.chip,
.archive-item {
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}

.dash {
	background: var(--tile-tint);
	-webkit-backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
	backdrop-filter: blur(var(--acrylic-blur)) saturate(140%);
}

/* 其余按钮类控件也补亚克力 */
.post-nav-item,
.cal-step,
.cal-title,
.cal-posts a,
.code-copy,
.code-fold,
.code-folder,
.viewer-btn,
.viewer-close {
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
}