/* ============================================================
   Shyue 个人站 · 设计系统
   暖纸 + 松绿的编辑级排版；宋体系标题 / 黑体系正文；双主题。
   所有 token 集中在 :root / [data-theme="dark"]，master 可一处调色。
   ============================================================ */

/* ---------- 设计 token ---------- */
:root {
	/* 色彩（亮） */
	--bg: #faf9f6;
	--bg-soft: #f1efe9;
	--card: #ffffff;
	--ink: #23282b;
	--ink-strong: #14181a;
	--muted: #5d6862;
	--faint: #5c6862;
	--accent: #0e6e52;
	--accent-strong: #0a5a43;
	--accent-soft: rgba(14, 110, 82, 0.08);
	--accent-border: rgba(14, 110, 82, 0.22);
	--line: #e5e2d9;
	--line-soft: #edeadf;
	--code-bg: #f5f3ec;
	--selection: rgba(14, 110, 82, 0.16);

	/* 字体 */
	--font-sans: -apple-system, BlinkMacSystemFont, 'PingFang SC',
		'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', 'Noto Sans SC',
		'Helvetica Neue', sans-serif;
	--font-serif: 'Songti SC', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun',
		Georgia, serif;
	--font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, Menlo,
		monospace;

	/* 排版尺度 */
	--prose-width: 42rem;
	--page-width: 64rem;
	--radius: 10px;
	--radius-sm: 6px;

	/* 阴影：克制，1px 线 + 微投影 */
	--shadow-card: 0 1px 2px rgba(20, 24, 26, 0.04);
	--shadow-pop: 0 8px 30px rgba(20, 24, 26, 0.1);

	/* 头部高度 */
	--header-h: 60px;
}

[data-theme='dark'] {
	--bg: #101614;
	--bg-soft: #17201c;
	--card: #151d1a;
	--ink: #e6ebe7;
	--ink-strong: #f4f7f4;
	--muted: #9db0a6;
	--faint: #85988e;
	--accent: #46c79c;
	--accent-strong: #6bd6b2;
	--accent-soft: rgba(70, 199, 156, 0.09);
	--accent-border: rgba(70, 199, 156, 0.25);
	--line: #243029;
	--line-soft: #1d2723;
	--code-bg: #131b18;
	--selection: rgba(70, 199, 156, 0.22);
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-pop: 0 8px 30px rgba(0, 0, 0, 0.45);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.8;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	transition: background-color 0.25s ease, color 0.25s ease;
}

::selection {
	background: var(--selection);
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	color: var(--accent-strong);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

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

/* 中文标点悬挂微调（可选增强，不支持的浏览器自动忽略） */
:lang(zh-CN) p {
	text-autospace: ideograph-alpha ideograph-numeric;
}

/* ---------- 布局骨架 ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-h);
	background: color-mix(in srgb, var(--bg) 86%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--line-soft);
}

.site-header .inner {
	max-width: var(--page-width);
	height: 100%;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.site-main {
	min-height: calc(100vh - var(--header-h));
	display: flex;
	flex-direction: column;
}

.site-main > .inner {
	max-width: var(--page-width);
	width: 100%;
	margin: 0 auto;
	padding: 32px 20px 72px;
	flex: 1;
}

.site-footer {
	border-top: 1px solid var(--line-soft);
	background: var(--bg-soft);
	font-size: 13.5px;
	color: var(--muted);
}

.site-footer .inner {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 28px 20px 36px;
}

/* ---------- 头部 ---------- */
.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-serif);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--ink-strong);
}

.brand:hover {
	color: var(--ink-strong);
}

.brand .mark {
	width: 26px;
	height: 26px;
	flex: none;
	color: var(--accent);
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: 8px;
}

.main-nav a {
	color: var(--muted);
	font-size: 14.5px;
	padding: 7px 11px;
	border-radius: 8px;
	white-space: nowrap;
}

.main-nav a:hover {
	color: var(--ink-strong);
	background: var(--accent-soft);
}

.main-nav a.active {
	color: var(--accent-strong);
	font-weight: 600;
}

.header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.icon-btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: var(--muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn:hover {
	background: var(--accent-soft);
	color: var(--ink-strong);
}

.icon-btn svg {
	width: 20px;
	height: 20px;
}

/* 移动端汉堡 */
.nav-toggle {
	display: none;
}

.mobile-nav {
	display: none;
}

/* ---------- 首页 ---------- */
.hero {
	margin-bottom: 44px;
}

.hero-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	padding: 30px 30px 24px;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hero-card h1 {
	font-family: var(--font-serif);
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.32;
	margin: 0;
	color: var(--ink-strong);
	letter-spacing: 0.02em;
}

.hero-card p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
	max-width: 40em;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin-top: 6px;
	font-size: 13.5px;
	color: var(--muted);
}

.hero-meta svg {
	width: 16px;
	height: 16px;
	color: var(--accent);
	vertical-align: -3px;
	margin-right: 5px;
}

.hero-meta a {
	color: var(--accent);
	font-size: 13.5px;
}

.hero-meta a:hover {
	color: var(--accent-strong);
}

.hero-meta .sep {
	color: var(--line);
}

.section-title {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin: 44px 0 18px;
}

.section-title h2 {
	font-family: var(--font-serif);
	font-size: 22px;
	margin: 0;
	color: var(--ink-strong);
	letter-spacing: 0.03em;
}

.section-title .more {
	font-size: 13px;
	color: var(--muted);
	margin-left: auto;
}

.section-title .more:hover {
	color: var(--accent-strong);
}

.section-title .more:hover {
	color: var(--accent-strong);
}

/* 栏目卡 */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.cat-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 19px;
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: 8px;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.cat-card:hover {
	border-color: var(--accent-border);
	transform: translateY(-2px);
}

.cat-card.empty {
	border-style: dashed;
}

.cat-card .name {
	font-weight: 650;
	font-size: 16px;
	color: var(--ink-strong);
}

.cat-card .blurb {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.65;
	flex: 1;
}

.cat-card .count {
	font-size: 12px;
	color: var(--faint);
	margin-top: auto;
	padding-top: 8px;
}

.cat-card:not(.empty) .count {
	color: var(--accent);
}

.cat-card.empty {
	background: var(--bg-soft);
	box-shadow: none;
	border-style: dashed;
}

.cat-card.empty:hover {
	transform: none;
}

/* ---------- 文章列表 ---------- */
.post-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.post-item {
	border-bottom: 1px solid var(--line);
}

.post-item a {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 18px;
	padding: 22px 4px;
	color: inherit;
	border-radius: 8px;
	align-items: baseline;
}

.post-item a:hover {
	background: var(--accent-soft);
}

.post-item time {
	font-size: 13px;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
	line-height: 1.55;
}

.post-item .title {
	font-size: 17.5px;
	font-weight: 640;
	color: var(--ink-strong);
	line-height: 1.55;
	margin: 0 0 6px;
}

.post-item a:hover .title {
	color: var(--accent-strong);
}

.post-item .desc {
	margin: 0 0 9px;
	font-size: 14px;
	color: var(--muted);
	line-height: 1.75;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-item .meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--faint);
	flex-wrap: wrap;
}

.post-item .meta .cat {
	color: var(--accent);
	font-weight: 550;
}

.tag-chip {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	line-height: 1;
	padding: 6px 11px;
	border-radius: 99px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	color: var(--muted);
	white-space: nowrap;
}

.tag-chip:hover {
	border-color: var(--accent-border);
	color: var(--accent-strong);
	background: var(--accent-soft);
}

/* ---------- 栏目页头 ---------- */
.page-head {
	margin: 6px 0 26px;
}

.page-head h1 {
	font-family: var(--font-serif);
	font-size: 30px;
	margin: 0 0 8px;
	color: var(--ink-strong);
	letter-spacing: 0.03em;
}

.page-head .sub {
	color: var(--muted);
	font-size: 15px;
	margin: 0;
}

/* ---------- 分页 ---------- */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 34px;
	font-size: 14px;
}

.pagination a,
.pagination span {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border-radius: 9px;
	color: var(--muted);
	border: 1px solid var(--line);
	background: var(--card);
}

.pagination .cur {
	color: var(--accent-strong);
	border-color: var(--accent-border);
	background: var(--accent-soft);
	font-weight: 640;
}

.pagination a:hover {
	border-color: var(--accent-border);
	color: var(--accent-strong);
}

.pagination .gap {
	border: 0;
	background: none;
}

/* ---------- 归档 ---------- */
.archive-year {
	font-family: var(--font-serif);
	font-size: 24px;
	color: var(--ink-strong);
	margin: 34px 0 6px;
}

.archive-year:first-of-type {
	margin-top: 10px;
}

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

.archive-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 9px 2px;
	border-bottom: 1px dashed var(--line-soft);
}

.archive-list time {
	font-size: 12.5px;
	color: var(--faint);
	font-variant-numeric: tabular-nums;
	flex: none;
	width: 56px;
}

.archive-list a {
	color: var(--ink);
	font-size: 15.5px;
}

.archive-list a:hover {
	color: var(--accent-strong);
}

/* ---------- 标签云 ---------- */
.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tag-cloud .tag-chip {
	font-size: 13.5px;
	padding: 7px 13px;
}

.tag-cloud .tag-chip .n {
	margin-left: 6px;
	font-size: 11.5px;
	color: var(--faint);
}

/* ============================================================
   文章页
   ============================================================ */
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 230px;
	gap: 44px;
	align-items: start;
}

.post-header {
	margin: 14px 0 30px;
}

.post-header .cats {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--faint);
	margin-bottom: 12px;
}

.post-header .cats .cat-link {
	color: var(--accent);
	font-weight: 550;
}

.post-header h1 {
	font-family: var(--font-serif);
	font-size: clamp(26px, 5vw, 36px);
	line-height: 1.45;
	margin: 0 0 14px;
	color: var(--ink-strong);
	letter-spacing: 0.02em;
}

.post-header .desc {
	color: var(--muted);
	font-size: 15.5px;
	margin: 0 0 14px;
	line-height: 1.75;
}

.post-header .post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 13px;
	color: var(--faint);
}

.post-header .post-meta .dot {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--faint);
}

/* ---------- 正文排版 ---------- */
.prose {
	font-size: 16.5px;
	line-height: 1.88;
	overflow-wrap: break-word;
}

.prose > * + * {
	margin-top: 1.1em;
}

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--font-serif);
	color: var(--ink-strong);
	line-height: 1.5;
	margin-top: 1.9em;
	margin-bottom: 0.55em;
	letter-spacing: 0.02em;
}

.prose h2 {
	font-size: 24.5px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 0.35em;
}

.prose h3 {
	font-size: 19.5px;
}

.prose h4 {
	font-size: 17px;
}

.prose p {
	margin: 0;
}

.prose a {
	text-decoration: underline;
	text-decoration-color: var(--accent-border);
	text-underline-offset: 4px;
}

.prose a:hover {
	text-decoration-color: var(--accent);
}

.prose blockquote {
	margin: 1.3em 0;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--accent-border);
	color: var(--muted);
}

.prose blockquote p {
	margin: 0.3em 0;
}

.prose ul,
.prose ol {
	padding-left: 1.5em;
	margin: 1.1em 0;
}

.prose li + li {
	margin-top: 0.4em;
}

.prose li::marker {
	color: var(--faint);
}

.prose strong {
	color: var(--ink-strong);
	font-weight: 660;
}

.prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.2em 0;
}

.prose img {
	border-radius: var(--radius);
	border: 1px solid var(--line-soft);
}

/* 标题锚点：hover 显示 */
.h-anchor {
	margin-left: 8px;
	font-size: 0.72em;
	color: var(--faint);
	opacity: 0;
	text-decoration: none;
	transition: opacity 0.15s ease;
	font-family: var(--font-sans);
	font-weight: 400;
}

h2:hover .h-anchor,
h3:hover .h-anchor,
h4:hover .h-anchor,
.h-anchor:focus-visible {
	opacity: 1;
}

/* ---------- 表格（横滚容器，移动端规格） ---------- */
.table-scroll {
	overflow-x: auto;
	margin: 1.4em 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	background: var(--card);
	position: relative;
	-webkit-overflow-scrolling: touch;
}

.table-scroll table {
	min-width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
	line-height: 1.65;
}

.table-scroll th {
	font-weight: 640;
	text-align: left;
	white-space: nowrap;
	background: var(--bg-soft);
	color: var(--ink-strong);
}

.table-scroll th,
.table-scroll td {
	padding: 9px 14px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
}

.table-scroll tr:last-child td {
	border-bottom: 0;
}

/* 右缘渐隐提示：能滚时提示还有内容 */
.table-scroll::after {
	content: '';
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 28px;
	background: linear-gradient(
		to right,
		transparent,
		var(--card) 75%
	);
	pointer-events: none;
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.table-scroll.scrolled-end::after {
	opacity: 0;
}

/* ---------- 代码块 ---------- */
.prose code:not(pre code) {
	font-family: var(--font-mono);
	font-size: 0.86em;
	background: var(--code-bg);
	border: 1px solid var(--line-soft);
	border-radius: 5px;
	padding: 2px 6px;
	overflow-wrap: anywhere;
}

.prose pre {
	margin: 1.4em 0;
	padding: 15px 18px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line-soft);
	overflow-x: auto;
	font-size: 13.5px;
	line-height: 1.7;
	font-family: var(--font-mono);
	-webkit-overflow-scrolling: touch;
}

.prose pre code {
	font-family: inherit;
	background: none;
	border: 0;
	padding: 0;
}

/* shiki 双主题：亮色为默认，暗色读 CSS 变量（构建产物带 --shiki-dark*） */
.prose pre.astro-code {
	background-color: var(--shiki-light-bg, #f5f3ec) !important;
	color: var(--shiki-light, #24292e) !important;
}

[data-theme='dark'] .prose pre.astro-code {
	background-color: var(--shiki-dark-bg, #0d1117) !important;
	color: var(--shiki-dark, #c9d1d9) !important;
}

[data-theme='dark'] .prose pre.astro-code span {
	color: var(--shiki-dark, inherit);
}

/* ---------- TOC ---------- */
.toc {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	max-height: calc(100vh - var(--header-h) - 60px);
	overflow-y: auto;
	font-size: 13.5px;
	line-height: 1.7;
	padding: 16px 16px 14px;
	background: var(--bg-soft);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-border);
	border-radius: var(--radius);
}

.toc .toc-title {
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--faint);
	margin-bottom: 10px;
}

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

.toc li {
	margin: 0;
}

.toc a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--muted);
	padding: 4px 6px;
	border-radius: 6px;
}

.toc a:hover {
	color: var(--accent-strong);
	background: var(--accent-soft);
}

.toc a.l2 {
	font-weight: 550;
	color: var(--ink);
}

.toc a.l3 {
	padding-left: 16px;
}

.toc a.l4 {
	padding-left: 28px;
	color: var(--faint);
}

.toc a.active {
	color: var(--accent-strong);
	background: var(--accent-soft);
}

/* 移动端浮动 TOC 按钮 */
.toc-fab {
	display: none;
	position: fixed;
	right: 14px;
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	z-index: 40;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--card);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-pop);
	color: var(--ink-strong);
	align-items: center;
	justify-content: center;
}

.toc-fab svg {
	width: 20px;
	height: 20px;
}

.toc-sheet {
	display: none;
	position: fixed;
	inset: auto 12px calc(140px + env(safe-area-inset-bottom, 0px)) 12px;
	z-index: 45;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow-pop);
	padding: 16px 18px;
	max-height: 52vh;
	overflow-y: auto;
}

.toc-sheet.open {
	display: block;
}

.toc-sheet a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	padding: 6px 8px;
	color: var(--muted);
	border-radius: 6px;
}

.toc-sheet a.l2 {
	font-weight: 550;
	color: var(--ink);
}

.toc-sheet a.l3 {
	padding-left: 18px;
}

.toc-sheet a:hover,
.toc-sheet a.active {
	color: var(--accent-strong);
	background: var(--accent-soft);
}

/* ---------- 分享 ---------- */
.share-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	flex-wrap: wrap;
}

.share-row .label {
	font-size: 13px;
	color: var(--faint);
}

.share-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	padding: 0 16px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--card);
	font-size: 13.5px;
	color: var(--ink);
	transition: border-color 0.15s ease, background 0.15s ease;
	min-width: 44px;
	justify-content: center;
}

.share-btn:hover {
	border-color: var(--accent-border);
	background: var(--accent-soft);
}

.share-btn svg {
	width: 16px;
	height: 16px;
	color: var(--accent);
}

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

.share-btn.primary:hover {
	background: var(--accent-strong);
	color: #fff;
}

.share-btn.primary svg {
	color: #fff;
}

/* 移动端吸底分享条（安全区，规格 §6）；
   滚动方向感知：向下滚隐藏防遮挡正文，向上滚/停在页面尾部时出现 */
.share-dock {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 48;
	display: none;
	background: color-mix(in srgb, var(--card) 92%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--line);
	padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
	gap: 8px;
	justify-content: center;
	align-items: center;
	transition: transform 0.25s ease;
}

.share-dock.dock-hidden {
	transform: translateY(calc(100% + 12px));
}

.share-dock .share-btn {
	flex: 1;
	max-width: 200px;
}

/* 微信 webview 引导气泡 */
.wx-guide {
	display: none;
	margin-top: 18px;
	padding: 13px 16px;
	border-radius: var(--radius);
	background: var(--accent-soft);
	border: 1px solid var(--accent-border);
	font-size: 14px;
	color: var(--ink);
	line-height: 1.7;
}

.wx-guide .t {
	font-weight: 650;
	color: var(--accent-strong);
	margin-bottom: 2px;
}

/* toast */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%) translateY(8px);
	background: var(--ink-strong);
	color: var(--bg);
	font-size: 13.5px;
	padding: 9px 18px;
	border-radius: 99px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 90;
	white-space: nowrap;
}

.toast.show {
	opacity: 0.96;
	transform: translateX(-50%) translateY(0);
}

/* ---------- 搜索（Pagefind 懒加载） ---------- */
.search-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(16, 22, 20, 0.45);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	display: none;
}

.search-overlay.open {
	display: block;
}

.search-panel {
	max-width: 640px;
	margin: 9vh auto 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow-pop);
	overflow: hidden;
}

.search-inputbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--line-soft);
}

.search-inputbar svg {
	width: 18px;
	height: 18px;
	color: var(--faint);
	flex: none;
}

#search-input {
	flex: 1;
	border: 0;
	background: none;
	font: inherit;
	font-size: 16.5px;
	color: var(--ink);
	outline: none;
	min-width: 0;
}

#search-input::placeholder {
	color: var(--faint);
}

.search-results {
	max-height: 56vh;
	overflow-y: auto;
	padding: 8px;
	min-height: 90px;
}

.search-hint {
	font-size: 13.5px;
	color: var(--faint);
	padding: 18px 12px;
	text-align: center;
}

.search-result {
	display: block;
	padding: 11px 12px;
	border-radius: 10px;
	color: inherit;
}

.search-result:hover,
.search-result.sel {
	background: var(--accent-soft);
}

.search-result .r-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--ink-strong);
	margin-bottom: 2px;
}

.search-result .r-excerpt {
	font-size: 13px;
	color: var(--muted);
	line-height: 1.65;
}

.search-result mark {
	background: none;
	color: var(--accent-strong);
	font-weight: 650;
}

/* ---------- 主题切换三态 ---------- */
.theme-btn svg {
	transition: opacity 0.15s ease;
}

.theme-btn .i-auto,
.theme-btn .i-light,
.theme-btn .i-dark {
	display: none;
}

.theme-btn[data-mode='system'] .i-auto {
	display: block;
}

.theme-btn[data-mode='light'] .i-light {
	display: block;
}

.theme-btn[data-mode='dark'] .i-dark {
	display: block;
}

/* ---------- MDX Callout 组件 ---------- */
.callout {
	margin: 1.4em 0;
	padding: 14px 17px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--accent-border);
	background: var(--accent-soft);
	font-size: 15px;
	line-height: 1.75;
}

.callout .callout-title {
	font-weight: 650;
	color: var(--accent-strong);
	margin-bottom: 4px;
	font-size: 14px;
}

.callout p {
	margin: 0.25em 0;
}

/* ---------- 关于页 / 通用窄页 ---------- */
.narrow {
	max-width: var(--prose-width);
	margin: 0 auto;
}

/* ---------- 空状态 ---------- */
.empty-state {
	text-align: center;
	color: var(--faint);
	padding: 48px 0;
	font-size: 14.5px;
}

/* ---------- 404 ---------- */
.notfound {
	text-align: center;
	padding: 72px 0 40px;
}

.notfound .code {
	font-family: var(--font-serif);
	font-size: 84px;
	color: var(--accent);
	line-height: 1;
	margin-bottom: 12px;
}

.notfound h1 {
	font-family: var(--font-serif);
	font-size: 24px;
	color: var(--ink-strong);
	margin: 0 0 10px;
}

.notfound p {
	color: var(--muted);
	margin: 0 0 22px;
}

/* ---------- 页脚 ---------- */
.foot-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin-bottom: 22px;
}

.foot-col h3 {
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--muted);
	margin: 0 0 10px;
	font-weight: 600;
}

.foot-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.foot-col a {
	color: var(--muted);
	font-size: 13.5px;
}

.foot-col a:hover {
	color: var(--accent-strong);
}

.foot-legal {
	border-top: 1px solid var(--line);
	padding-top: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	font-size: 12.5px;
	color: var(--muted);
}

.foot-legal a {
	color: var(--muted);
}

.foot-legal a:hover {
	color: var(--accent-strong);
}

.foot-legal .copyright {
	margin-right: auto;
}

/* ============================================================
   响应式（移动优先基线 375px，向下兼容 320px）
   ============================================================ */
@media (max-width: 900px) {
	/* 锚点跳转不吃吸底条的亏 */
	html {
		scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	}

	.hero {
		margin-bottom: 36px;
	}

	.cat-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* 文章页：侧栏 TOC 收进浮动按钮 */
	.post-layout {
		display: block;
	}

	.toc {
		display: none;
	}

	.toc-fab {
		display: inline-flex;
	}

	.share-dock {
		display: flex;
	}

	/* 吸底条不遮正文：正文区留出空间 */
	.post-body-wrap {
		padding-bottom: 80px;
	}
}

@media (max-width: 720px) {
	.site-header .inner {
		padding: 0 14px;
	}

	.site-main > .inner {
		padding: 22px 16px 64px;
	}

	/* 移动端导航折叠 */
	.main-nav {
		display: none;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.mobile-nav.open {
		display: block;
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		z-index: 49;
		background: var(--card);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow-pop);
		padding: 8px 14px 14px;
	}

	.mobile-nav a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 13px 10px;
		font-size: 16px;
		color: var(--ink-strong);
		border-bottom: 1px solid var(--line-soft);
	}

	.mobile-nav a .cnt {
		font-size: 12px;
		color: var(--faint);
	}

	.hero-card {
		padding: 20px 18px 18px;
	}

	.hero-card h1 {
		font-size: 24px;
	}

	.cat-grid {
		gap: 10px;
	}

	.post-item a {
		grid-template-columns: 1fr;
		gap: 3px;
		padding: 16px 2px;
	}

	.post-item time {
		order: 2;
	}

	.post-item .title {
		font-size: 16.5px;
	}

	.prose {
		font-size: 16px;
	}

	.prose h2 {
		font-size: 22px;
	}

	.prose h3 {
		font-size: 18.5px;
	}

	.share-row {
		display: none;
	}

	.search-panel {
		margin: 4vh 10px 0;
	}
}

@media (max-width: 360px) {
	/* 320px 兜底：收字号收间距，不破版 */
	body {
		font-size: 15.5px;
	}

	.cat-grid {
		grid-template-columns: 1fr;
	}

	.share-dock {
		gap: 6px;
	}

	.share-dock .share-btn {
		padding: 0 8px;
		font-size: 13px;
	}
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- CSP 纪律补充：以下全部替代内联 style 属性（style-src 'self'） ---------- */
.nf-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.icon-sm {
	width: 16px;
	height: 16px;
}

.chip-draft {
	background: rgba(204, 120, 30, 0.12);
	color: #b06a1c;
	border-color: rgba(204, 120, 30, 0.3);
}

.pagination .page-dis {
	opacity: 0.35;
	border-color: transparent;
	background: none;
}

/* 吸底条滚动哨兵（JS 插入，样式走 class 而非 cssText） */
.dock-sentinel {
	position: absolute;
	width: 1px;
	height: 1px;
	bottom: 0;
}

/* 微信引导显示态（JS 只切 class，不写 style） */
.wx-guide.shown {
	display: block;
}

/* 邮箱图片（防爬）：亮暗双图随主题切换，尺寸与正文行高对齐 */
.email-img {
	display: inline-block;
	vertical-align: -5px;
	height: 26px;
	width: auto;
	margin: 2px 0;
}

[data-theme='dark'] .only-light {
	display: none;
}

[data-theme='light'] .only-dark,
.only-dark {
	display: none;
}

[data-theme='dark'] .only-dark {
	display: inline-block;
}

/* markdown 图语法带不了 class：邮箱双图按文件名走同一套主题切换与尺寸 */
img[src$='/email-light.png'],
img[src$='/email-dark.png'] {
	display: inline-block;
	vertical-align: -5px;
	height: 26px;
	width: auto;
	margin: 2px 0;
}

img[src$='/email-dark.png'] {
	display: none;
}

[data-theme='dark'] img[src$='/email-light.png'] {
	display: none;
}

[data-theme='dark'] img[src$='/email-dark.png'] {
	display: inline-block;
}

/* ============================================================
   v2 动态站补充样式（继承 v1 设计系统）
   ============================================================ */
.gated-box {
	margin: 30px 0;
	padding: 26px 24px;
	border: 1px solid var(--accent-border);
	border-radius: var(--radius);
	background: var(--accent-soft);
	text-align: center;
}

.gated-box .g-t {
	font-weight: 650;
	color: var(--accent-strong);
	font-size: 17px;
	margin-bottom: 8px;
}

.gated-box p {
	color: var(--muted);
	font-size: 14.5px;
	margin: 0 0 16px;
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}

.chip-gated {
	background: rgba(14, 110, 82, 0.14);
	color: var(--accent-strong);
	border-color: var(--accent-border);
}

.preview-banner {
	position: sticky;
	top: var(--header-h);
	z-index: 45;
	background: rgba(204, 120, 30, 0.12);
	border-bottom: 1px solid rgba(204, 120, 30, 0.35);
	color: #a05a14;
	font-size: 13.5px;
	padding: 8px 16px;
	text-align: center;
}

.post-meta .views {
	font-variant-numeric: tabular-nums;
}

/* 搜索页表单 */
.search-page-form form {
	display: flex;
	gap: 10px;
	margin: 0 0 24px;
}

.search-page-input {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card);
	color: var(--ink);
	font: inherit;
	padding: 0 14px;
}

.search-page-input:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
	border-color: transparent;
}

/* ---------- 首页精选置顶（SPEC v2.1 §B2）---------- */
.featured-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin-bottom: 6px;
}

.featured-card {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.featured-card:hover {
	border-color: var(--accent-border);
	transform: translateY(-2px);
}

.featured-card .fc-cover {
	aspect-ratio: 1200 / 630;
	overflow: hidden;
	background: var(--bg-soft);
}

.featured-card .fc-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.featured-card .fc-body {
	padding: 14px 16px 15px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.featured-card .fc-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--faint);
}

.featured-card .fc-meta .cat {
	color: var(--accent);
	font-weight: 550;
}

.featured-card .fc-title {
	margin: 0;
	font-size: 17.5px;
	line-height: 1.5;
	color: var(--ink-strong);
	font-weight: 650;
}

.featured-card:hover .fc-title {
	color: var(--accent-strong);
}

.featured-card .fc-desc {
	margin: 0;
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.65;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 640px) {
	.featured-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   v2.1 美化 pass（方向 A「生产台账」，frontend-design skill 方法论）
   出处的视觉语言：实测台账——账本双线、等宽数据行、标时点。
   体检修复（web-design-guidelines）：color-scheme / touch-action /
   overscroll-behavior / scroll-margin / tabular-nums / text-wrap / skip-link
   ============================================================ */
:root {
	color-scheme: light;
}

[data-theme='dark'] {
	color-scheme: dark;
}

a,
button {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

/* 跳到正文（键盘可达性） */
.skip-link {
	position: absolute;
	left: 12px;
	top: -48px;
	z-index: 100;
	background: var(--accent);
	color: #fff;
	font-size: 13.5px;
	padding: 9px 16px;
	border-radius: 0 0 9px 9px;
	transition: top 0.15s ease;
}

.skip-link:focus-visible {
	top: 0;
}

/* 滚动容器：手势不打穿 */
.search-overlay,
.search-results,
.toc,
.toc-sheet,
.preview-sheet {
	overscroll-behavior: contain;
}

/* 锚点跳转不被吸顶头部遮住 */
.prose h2[id],
.prose h3[id],
.prose h4[id] {
	scroll-margin-top: calc(var(--header-h) + 16px);
}

h1,
h2,
.fc-title {
	text-wrap: balance;
}

.post-item time,
.post-meta .views,
.mast-status,
.archive-list time {
	font-variant-numeric: tabular-nums;
}

/* ---------- 刊头（台账气质：页面级账本双线 + 等宽数据行）---------- */
.hero {
	/* 账本双线：粗线之下 2px 一条细线——台账「账线」，贯穿内容区全宽 */
	border-top: 3px solid var(--accent);
	position: relative;
}

.hero::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 5px;
	height: 1px;
	background: var(--accent);
	opacity: 0.5;
}

.hero-card {
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
	padding: 26px 0 0;
}

.mast-title {
	font-family: var(--font-serif);
	font-size: clamp(30px, 4.6vw, 44px);
	line-height: 1.22;
	margin: 28px 0 0;
	color: var(--ink-strong);
	letter-spacing: 0.015em;
}

.mast-sub {
	margin: 14px 0 0;
	color: var(--muted);
	font-size: 15px;
	max-width: 38em;
}

.mast-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
	padding: 13px 0 15px;
	border-top: 1px solid var(--line);
	background: none;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--ink);
	gap: 8px;
}

.mast-status .ms-sep {
	color: var(--faint);
	opacity: 0.45;
	margin: 0 1px;
}

.mast-status .ms-link {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--accent-border);
	padding-bottom: 1px;
}

.mast-status .ms-link:hover {
	color: var(--accent-strong);
	border-bottom-color: var(--accent-strong);
}

@media (max-width: 720px) {
	.hero-card > :not(.mast-status) {
		margin-left: 20px;
		margin-right: 20px;
	}

	.mast-title {
		margin-top: 24px;
		font-size: 29px;
	}

	.mast-status {
		padding: 11px 0 13px;
		gap: 6px;
	}
}

/* ---------- 精选大卡：栏目角标 + 更强存在感 ---------- */
.featured-card .fc-cover {
	position: relative;
}

.featured-card .fc-cover::after {
	/* 台账记号延续：封面底部一道 2px 强调线 */
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--accent);
	opacity: 0.7;
}

.featured-card .fc-cover .fc-tag {
	position: absolute;
	left: 12px;
	top: 12px;
	background: color-mix(in srgb, var(--card) 88%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--accent-strong);
	font-size: 12px;
	font-weight: 600;
	padding: 5px 11px;
	border-radius: 99px;
	border: 1px solid var(--accent-border);
}

.featured-card .fc-title {
	font-size: 19px;
}

@media (min-width: 900px) {
	.featured-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---------- 分区标题：安静的细线延伸 ---------- */
.section-title h2 {
	position: relative;
	padding-left: 14px;
}

.section-title h2::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.28em;
	bottom: 0.28em;
	width: 3px;
	border-radius: 2px;
	background: var(--accent);
}

.section-title .more {
	font-size: 13px;
}