/**
 * Cainiao2026 涓婚涓绘牱寮? * 瑙嗚椋庢牸鍙傜収 Vue.js 瀹樻柟涓枃鏂囨。锛氭棤琛嚎瀛椾綋銆佹竻鏅板眰绾с€佺暀鐧借垝閫傘€? */

/* ==========================================================================
   棰滆壊浠ょ墝锛堟棩闂?/ 澶滈棿锛?   ========================================================================== */

:root,
html[data-theme="light"] {
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--text-primary: #2c3e50;
	--text-secondary: #6b7280;
	--border-color: #e5e7eb;
	--card-border: #cbd5e1;
	--link-color: #01a8e9;
	--accent: #01a8e9;
	--accent-hover: #0188bd;
	--accent-soft: rgba(1, 168, 233, 0.12);
	--shadow: 0 1px 3px rgba(31, 41, 55, 0.07), 0 4px 16px rgba(31, 41, 55, 0.04);
	--shadow-hover: 0 4px 12px rgba(31, 41, 55, 0.10), 0 8px 28px rgba(31, 41, 55, 0.08);
}

html[data-theme="dark"] {
	--bg-primary: #1a1a1a;
	--bg-secondary: #242424;
	--text-primary: #e8e8e8;
	--text-secondary: #a0a0a0;
	--border-color: #3a3a3a;
	--card-border: #4a4f56;
	--link-color: #3fc3f5;
	--accent: #3fc3f5;
	--accent-hover: #6fd6ff;
	--accent-soft: rgba(63, 195, 245, 0.14);
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25);
	--shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   鍩虹鎺掔増
   ========================================================================== */

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

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

/* 粘性页脚：内容不足一屏时 footer 仍贴在视口底部。
   100vh 为兜底，100dvh 值高于尽力而为——移动端浏览器地址栏收起/autocomplete
   会让 100vh 超出实际可视高度，dvh 才是动态视口。 */
body {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
		"PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	transition: background-color .25s ease, color .25s ease;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 .6em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

a {
	color: var(--link-color);
	text-decoration: none;
	transition: color .2s ease, text-decoration-color .2s ease;
}

a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

p { margin: 0 0 1em; }

img {
	max-width: 100%;
	height: auto;
	border-radius: 5px;
}

code, pre {
	font-family: "SF Mono", Monaco, "Cascadia Code", Consolas, "Courier New", monospace;
}

code {
	font-size: .875em;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding: .15em .4em;
}

pre {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding: 1em 1.25em;
	overflow-x: auto;
	font-size: .875em;
	line-height: 1.6;
}

pre code {
	background: transparent;
	border: 0;
	padding: 0;
}

blockquote {
	margin: 0 0 1em;
	padding: .5em 1.25em;
	border-left: 3px solid var(--accent);
	background-color: var(--bg-secondary);
	border-radius: 0 5px 5px 0;
	color: var(--text-secondary);
}

/* 灞忓箷闃呰鍣ㄨ緟鍔?*/
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	overflow: hidden;
}

.skip-link {
	left: 8px;
	top: -48px;
	background: var(--accent);
	color: #fff;
	z-index: 1000;
	padding: 8px 16px;
	border-radius: 5px;
}

.skip-link:focus {
	top: 8px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
}

/* ==========================================================================
   椤靛ご
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-color);
	transition: background-color .25s ease, border-color .25s ease;
}

.site-header__inner {
	max-width: 1376px;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	align-items: center;
	gap: 0;
	min-height: 56px;
}

.site-branding {
	flex-shrink: 0;
	margin-right: 8px;
}

.site-branding .custom-logo {
	display: block;
	max-width: 234px;
	max-height: 50px;
}

.site-logo img {
	display: block;
	max-width: 175px;
	max-height: 50px;
	width: auto;
	height: auto;
}

.site-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}

.site-title a { color: var(--text-primary); text-decoration: none; }

/* 顶部菜单：参照 ipcmen.com —— 菜单紧随 Logo 左侧排列，56px 高，
   项内 0 14px 内边距、14px/500 文字，悬停主题色文字 + 浅色底，
   含子菜单时显示 CSS 三角箭头，悬停展开下拉面板。 */
.site-nav {
	flex: 1 1 auto;
	min-width: 0;
}

.nav-menu {
	display: flex;
	align-items: stretch;
	gap: 0;
	height: 56px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.nav-menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
	list-style: none;
}

.nav-menu > li > a {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 14px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--text-secondary);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, background-color .2s ease;
}

.nav-menu > li > a:hover {
	color: var(--accent);
	background-color: var(--accent-soft);
	text-decoration: none;
}

.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a {
	color: var(--accent);
}

/* 有子菜单的项：右侧下三角箭头 */
.nav-menu > .menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid;
	border-bottom: 1.5px solid;
	transform: rotate(45deg);
	margin-left: 4px;
	margin-top: -3px;
	opacity: .65;
}

/* 下拉面板 */
.nav-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 180px;
	display: block;
	background: var(--bg-primary);
	border: none;
	border-radius: 5px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .1);
	padding: 8px 0;
	list-style: none;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 100;
}

.nav-menu > li:hover > .sub-menu,
.nav-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu .sub-menu a {
	display: block;
	padding: 6px 16px;
	font-size: 14px;
	color: var(--text-secondary);
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease, background-color .2s ease;
}

.nav-menu .sub-menu a:hover {
	color: var(--accent);
	background-color: var(--accent-soft);
	text-decoration: none;
}

html[data-theme="dark"] .nav-menu .sub-menu {
	box-shadow: 0 8px 30px rgba(0, 0, 0, .45);
}

/* 汉堡按钮：三条线错开摆放 + overflow 裁切，悬停时对齐，打开时旋转成 X
   （参照 cn.vuejs.org 的 .vt-hamburger；仅小屏显示） */
.nav-toggle {
	display: none;
	flex-shrink: 0;
	width: 40px;
	height: 56px;
	padding: 0;
	border: none;
	background: none;
	color: var(--text-primary);
	cursor: pointer;
	justify-content: center;
	align-items: center;
	-webkit-tap-highlight-color: transparent;
}

.nav-toggle__container {
	position: relative;
	width: 16px;
	height: 14px;
	overflow: hidden;
}

.nav-toggle__top,
.nav-toggle__middle,
.nav-toggle__bottom {
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background-color: currentColor;
	transition: top .25s, transform .25s, background-color .25s;
}

.nav-toggle__top { top: 0; transform: translate(0); }
.nav-toggle__middle { top: 6px; transform: translate(8px); }
.nav-toggle__bottom { top: 12px; transform: translate(4px); }

.nav-toggle:hover .nav-toggle__top { transform: translate(4px); }
.nav-toggle:hover .nav-toggle__middle { transform: translate(0); }
.nav-toggle:hover .nav-toggle__bottom { transform: translate(8px); }

.nav-toggle.is-active .nav-toggle__top { top: 6px; transform: rotate(45deg); }
.nav-toggle.is-active .nav-toggle__middle { top: 6px; transform: translate(16px); }
.nav-toggle.is-active .nav-toggle__bottom { top: 6px; transform: rotate(-45deg); }

/* 娣辫壊妯″紡鍒囨崲鎸夐挳锛堝榻?cn.vuejs.org 瀹樼綉鏍峰紡锛?0脳22 鑳跺泭 + 18px 婊戝潡 + 鍙屽浘鏍囨贰鍏ユ贰鍑猴級 */
.theme-toggle {
	position: relative;
	flex-shrink: 0;
	display: block;
	width: 40px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--border-color);
	border-radius: 11px;
	background-color: var(--bg-secondary);
	cursor: pointer;
	transition: border-color .25s, background-color .25s;
}

.theme-toggle:hover {
	border-color: var(--text-secondary);
}

.theme-toggle__check {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background-color: var(--bg-primary);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 0 1px rgba(0, 0, 0, .14);
	transition: background-color .25s, transform .25s;
}

html[data-theme="dark"] .theme-toggle__check {
	background-color: #000;
	transform: translateX(18px);
}

.theme-toggle__icon {
	position: relative;
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	overflow: hidden;
}

.theme-toggle__icon svg {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 12px;
	height: 12px;
	fill: var(--text-secondary);
	transition: opacity .25s;
}

html[data-theme="light"] .theme-toggle-icon--sun { opacity: 1; }
html[data-theme="light"] .theme-toggle-icon--moon { opacity: 0; }
html[data-theme="dark"] .theme-toggle-icon--sun { opacity: 0; }
html[data-theme="dark"] .theme-toggle-icon--moon { opacity: 1; }

/* ==========================================================================
   头部搜索框
   ========================================================================== */

/* --search-inset 是面板自身的内边距；放大镜要贴着输入框而不是面板，
   所以 left 必须把这个值加回来（移动端面板有 1rem 内边距，桌面端为 0） */
.header-search {
	--search-inset: 0px;
	position: relative;
	flex: 0 1 200px;
	display: flex;
	align-items: center;
	min-width: 0;
	margin-right: 15px;
	padding: 0 var(--search-inset);
}

.header-search__icon {
	position: absolute;
	left: calc(var(--search-inset) + 11px);
	display: flex;
	align-items: center;
	color: var(--text-secondary);
	font-size: 13px;
	line-height: 1;
	pointer-events: none;
}

.header-search__input {
	width: 100%;
	height: 32px;
	padding: 0 12px 0 32px;
	border: 1px solid var(--border-color);
	border-radius: 16px;
	background-color: var(--bg-secondary);
	color: var(--text-primary);
	font-size: 13px;
	outline: none;
	transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}

.header-search__input::placeholder { color: var(--text-secondary); }

.header-search__input:focus {
	border-color: var(--accent);
	background-color: var(--bg-primary);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* WebKit 原生清除按钮的位置不好控制，统一隐藏 */
.header-search__input::-webkit-search-decoration,
.header-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* 仅在移动端出现（由 theme.js 控制 body.search-open） */
.search-toggle { display: none; }

/* ==========================================================================
   涓夋爮缃戞牸甯冨眬
   ========================================================================== */

/* 撑开剩余空间，把 footer 压到视口底部（配合 body 的 flex 列布局）。
   用 auto 而不是 0 做 flex-basis，避免内容高于可视区时被压缩。 */
.site-main { flex: 1 0 auto; }

.site-grid {
	max-width: 1376px;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 3rem;
	display: grid;
	grid-template-areas:
		"sidebar-left content"
		"sidebar-right sidebar-right";
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}

.content-col { grid-area: content; min-width: 0; }
.site-column--left { grid-area: sidebar-left; min-width: 0; position: sticky; top: 88px; }
.site-column--right { grid-area: sidebar-right; min-width: 0; position: sticky; top: 88px; }

/* 妗岄潰锛堚墺1280px锛夛細瀵归綈 cn.vuejs.org 鏂囨。甯冨眬 鈥斺€?宸︽爮 272px銆佷腑鏍忚嚜閫傚簲锛堝唴瀹规渶澶?960px 灞呬腑锛夈€佸彸鏍?320px锛堝叾鍐呴儴鍐呭 288px锛夛紝鍏ㄧ珯鐗堝績 1376px */
@media (min-width: 1280px) {
	.site-grid {
		grid-template-areas: "sidebar-left content sidebar-right";
		grid-template-columns: 272px minmax(0, 1fr) 320px;
		gap: 0;
		padding: 2rem 0 3rem;
	}

	.content-col {
		max-width: 1024px;
		margin: 0 auto;
		padding: 0 32px;
	}

	.site-column--left { padding-right: 32px; position: static; }
	.site-column--right { padding-left: 32px; position: static; }
}

/* 绉诲姩绔細鍗曟爮锛岄『搴忎负涓爮 鈫?宸︿晶鏍?鈫?鍙充晶鏍忥紱渚ц竟鏍忓彲鎶樺彔 */
@media (max-width: 767px) {
	body {
		font-size: 15px;
	}

	/* 取消具名区域，让收起的侧边栏不占用行（否则空行仍会撑出 gap） */
	.site-grid {
		grid-template-areas: "content";
		grid-template-columns: minmax(0, 1fr);
		padding: 1rem 1rem 2rem;
		gap: 1.25rem;
	}

	/* 灏忓睆瀵艰埅 */
	.site-header__inner {
		flex-wrap: wrap;
		padding: 0 1rem;
	}

	/* 小屏时导航已移出文档流，用 auto 外边距把开关组推到右侧
	   （顺序：Logo …… 夜间模式 | 菜单按钮） */
	.theme-toggle { margin-left: auto; }

	/* 有 JS 时搜索图标并入右侧按钮组：自动外边距只放在该行第一个元素上，
	   否则多个 auto margin 会把剩余空间平分，按钮被拆散 */
	html.js .search-toggle { margin-left: auto; }
	html.js .theme-toggle { margin-left: 0; }

	.site-logo img { max-width: 148px; }

	/* 搜索框：无 JS 时退化为头部第二行常显；有 JS 时折叠成图标按钮 */
	.header-search {
		flex: 1 1 100%;
		margin: 0 0 10px;
	}

	.header-search__input { height: 36px; font-size: 14px; }

	html.js .header-search {
		--search-inset: 1rem;
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		z-index: 100;
		margin: 0;
		padding: 10px var(--search-inset);
		background-color: var(--bg-primary);
		border-bottom: 1px solid var(--border-color);
		box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}

	html.js body.search-open .header-search {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	html.js .search-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		width: 40px;
		height: 56px;
		padding: 0;
		border: none;
		background: none;
		color: var(--text-primary);
		font-size: 16px;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	html.js .search-toggle.is-active { color: var(--accent); }

	.site-nav {
		order: 3;
		flex-basis: 100%;
		margin-left: 0;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.nav-menu { height: auto; }
	.nav-menu > li > a { padding: .5rem 10px; font-size: 14px; }

	/* 有 JS 时：汉堡按钮 + 自导航栏下方展开的全屏菜单面板（参照 cn.vuejs.org） */
	html.js .nav-toggle { display: flex; }

	html.js .site-nav {
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		background-color: var(--bg-primary);
		padding: 24px 20px 96px;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}

	html.js body.nav-open .site-nav {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	html.js .nav-menu {
		flex-direction: column;
		height: auto;
		max-width: 288px;
		margin: 0 auto;
	}

	html.js .nav-menu > li { display: block; }

	html.js .nav-menu > li > a {
		display: flex;
		padding: 12px 0 11px;
		font-size: 14px;
		font-weight: 500;
		color: var(--text-primary);
		border-bottom: 1px solid var(--border-color);
	}

	html.js .nav-menu > li > a:hover {
		background-color: transparent;
		color: var(--accent);
	}

	/* 触屏没有 hover，子菜单改为常驻展开 */
	html.js .nav-menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0 0 8px;
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	html.js .nav-menu .sub-menu a {
		padding: 8px 0 8px 16px;
		font-size: 13px;
	}

	/* 左右侧边栏各自独立折叠 */
	.site-column--left,
	.site-column--right {
		display: block;
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 101;
		width: calc(100vw - 64px);
		max-width: 320px;
		padding: 24px 20px 96px;
		background-color: var(--bg-primary);
		box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		transition: transform .5s cubic-bezier(.19, 1, .22, 1), visibility .5s;
	}

	.site-column--left { left: 0; transform: translateX(-100%); }
	.site-column--right { right: 0; transform: translateX(100%); }

	body.sidebar-left-open .site-column--left,
	body.sidebar-right-open .site-column--right {
		transform: translateX(0);
		visibility: visible;
	}

	/* 内容列居中 */
	.content-col {
		width: 100%;
		max-width: 640px;
		margin-inline: auto;
	}

}

/* 绉诲姩绔?骞虫澘涔嬪鐨勬姌鍙犳寜閽粯璁ら殣钘?*/
.sidebar-toggle-wrap { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 767px) {
	/* 两个折叠按钮分列左右，紧贴顶部菜单下方 */
	.sidebar-toggle-wrap {
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 56px;
		z-index: 98;
		width: 100%;
		border-bottom: 1px solid var(--border-color);
		background-color: var(--bg-primary);
	}

	.sidebar-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 0 20px;
		border: none;
		background: none;
		color: var(--text-secondary);
		font-size: 12px;
		font-weight: 500;
		line-height: 47px;
		cursor: pointer;
		transition: color .25s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.sidebar-toggle:hover,
	.sidebar-toggle.is-active { color: var(--text-primary); }

	.sidebar-toggle .fa {
		width: 16px;
		font-size: 16px;
		text-align: center;
	}

	.sidebar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99;
		background-color: rgba(0, 0, 0, .45);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility .3s;
	}

	body.sidebar-left-open .sidebar-backdrop,
	body.sidebar-right-open .sidebar-backdrop {
		opacity: 1;
		visibility: visible;
	}
}

/* ==========================================================================
   骞荤伅鍖哄煙锛圚eroSlider锛?   ========================================================================== */

.hero-slider {
	position: relative;
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--bg-secondary);
	margin-bottom: 2rem;
	box-shadow: var(--shadow);
}

.hero-slider__inner {
	position: relative;
}

.hero-slider__track {
	display: flex;
	transition: transform .45s ease;
	touch-action: pan-y;
}

.hero-slide {
	position: relative;
	flex: 0 0 100%;
	min-height: 320px;
	background-size: cover;
	background-position: center;
	background-color: var(--bg-secondary);
}

.hero-slide__mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .7));
}

.hero-slide__content {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 1.25rem 1.125rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* 分类徽章 */
.hero-slide__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 6px;
}

.hero-slide__cats span {
	display: inline-block;
	background: color-mix(in srgb, var(--accent) 85%, transparent);
	color: #fff;
	font-size: 11px;
	padding: 2px 10px;
	border-radius: 5px;
	line-height: 1.5;
}

.hero-slide__title {
	margin: 0 0 4px;
	color: #fff;
	font-size: clamp(1rem, 2.5vw, 1.3rem);
	font-weight: 700;
	line-height: 1.4;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.hero-slide__title a {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.hero-slide__excerpt {
	margin: 0 0 4px;
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	line-height: 1.6;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 42rem;
}

/* 日期（含时钟图标） */
.hero-slide__date {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, .75);
	font-size: 12px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.hero-slide__date::before {
	content: '';
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.hero-slider__dots {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	display: flex;
	gap: .5rem;
	z-index: 3;
}

.hero-slider__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background-color: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.hero-slider__dot.is-active {
	background-color: #fff;
	transform: scale(1.15);
}

.hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background-color: rgba(15, 23, 42, .35);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s ease, background-color .2s ease;
}

.hero-slider:hover .hero-slider__arrow,
.hero-slider:focus-within .hero-slider__arrow { opacity: 1; }

.hero-slider__arrow:hover { background-color: rgba(15, 23, 42, .6); }

.hero-slider__arrow--prev { left: .75rem; }
.hero-slider__arrow--next { right: .75rem; }

/* 鏃?JS 闄嶇骇锛氱旱鍚戝垪琛?*/
.hero-slider__fallback {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero-slider__fallback .hero-slide { position: relative; }

/* ==========================================================================
   鏂囩珷鍒楄〃锛堝乏鍥惧彸鏂囷級
   ========================================================================== */

.post-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

/* 首屏列表与 Vue 追加列表的包裹层透明化，让卡片直接参与 .post-list 的 5px 间距 */
.post-list-items,
.post-list-app > * {
	display: contents;
}

.post-card {
	display: flex;
	gap: 1.25rem;
	background: var(--bg-secondary);
	border-radius: 5px;
	padding: 1rem;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.post-card:hover {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color));
	box-shadow: var(--shadow-hover);
	transform: translateY(-2px);
}

.post-card__thumb {
	flex: 0 0 252px;
	max-width: 252px;
	border-radius: 5px;
	overflow: hidden;
}

.post-card__thumb img {
	display: block;
	width: 252px;
	height: 160px;
	object-fit: cover;
	border-radius: 5px;
	aspect-ratio: 252 / 160;
	transition: transform .3s ease;
}

.post-card:hover .post-card__thumb img { transform: scale(1.04); }

.post-card__body {
	min-width: 0;
	flex: 1;
}

.post-card__title {
	margin: .1rem 0 .4rem;
	font-size: 1.25rem;
	line-height: 1.45;
}

.post-card__title a {
	color: var(--text-primary);
}

.post-card__title a:hover {
	color: var(--link-color);
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
	color: var(--text-secondary);
	font-size: .85rem;
	margin-bottom: .55rem;
}

.post-card__meta-dot { opacity: .55; }

.post-card__excerpt {
	margin: 0;
	color: var(--text-secondary);
	font-size: .95rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-list__actions {
	display: flex;
	justify-content: center;
	padding: .5rem 0 .5rem;
}

/* JS 鍙敤鏃舵墠鏄剧ず鈥滃姞杞芥洿澶氣€?*/
.post-list__actions { display: none; }
html.js .post-list__actions { display: flex; }
html.js .button-loadmore { display: inline-flex; }
html:not(.js) .post-list-app { display: none; }

/* Vue 鎸傝浇鐐癸細瀛愬厓绱犵洿鎺ュ姞鍏?.post-list 鐨?flex 娴?*/
.post-list-app { display: contents; }

/* 小屏：卡片改竖排，缩略图在上，下面依次是标题、标签、摘要。
   必须放在 .post-card 基础规则之后——媒体查询不提升优先级，放在前面会被覆盖。 */
@media (max-width: 767px) {
	.post-card {
		flex-direction: column;
		gap: .75rem;
	}

	/* 缩略图撑满卡片宽度，高度交给 aspect-ratio(252/160) 推算 */
	.post-card__thumb {
		flex: none;
		max-width: none;
	}

	.post-card__thumb img {
		width: 100%;
		height: auto;
	}

	.post-card__title {
		margin: 0 0 .3rem;
		font-size: 1.15rem;
	}

	.post-card__meta { margin-bottom: .4rem; }

	/* 触屏没有真实 hover，去掉位移与阴影，避免点击后卡在悬停态 */
	.post-card:hover {
		transform: none;
		box-shadow: none;
	}
}

.button-loadmore {
	padding: .65rem 2.2rem;
	font-size: .95rem;
	color: var(--link-color);
	background: var(--accent-soft);
	border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border-color));
	border-radius: 5px;
	cursor: pointer;
	transition: background-color .2s ease, transform .15s ease, opacity .2s ease;
}

.button-loadmore:hover { background: var(--accent-soft); }
.button-loadmore:disabled { opacity: .6; cursor: not-allowed; }

.pagination-fallback {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.pagination-fallback .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.pagination-fallback .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 .5rem;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	color: var(--text-secondary);
	font-size: .9rem;
}

.pagination-fallback .page-numbers:hover {
	color: var(--link-color);
	border-color: var(--accent);
	text-decoration: none;
}

.pagination-fallback .current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

.no-posts {
	background: var(--bg-secondary);
	border: 1px dashed var(--card-border);
	border-radius: 5px;
	padding: 3rem 1.5rem;
	text-align: center;
	color: var(--text-secondary);
}

/* ==========================================================================
   鏂囩珷璇︽儏 / 椤甸潰
   ========================================================================== */

.post-single,
.page-single {
	max-width: 688px;
	background: var(--bg-primary);
}

.post-single__header,
.page-single header {
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--border-color);
}

.post-single__title,
.page-single h1 {
	font-size: 1.9rem;
	line-height: 1.35;
}

.post-single__meta { margin: 0; }

.post-single__thumbnail {
	margin: 0 0 1.5rem;
}

.post-single__thumbnail img {
	width: 100%;
	border-radius: 5px;
	border: 1px solid var(--border-color);
}

.entry-content {
	color: var(--text-primary);
	font-size: 1rem;
	overflow-wrap: break-word;
}

.entry-content > * { margin-bottom: 1.25em; }

.entry-content ul,
.entry-content ol {
	padding-left: 1.5em;
}

.entry-content img { border-radius: 5px; }

.post-single__footer {
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--border-color);
}

.post-single__tags a {
	display: inline-block;
	margin: 0 .35rem .35rem 0;
	padding: .25rem .7rem;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	font-size: .825rem;
	color: var(--text-secondary);
	background: var(--bg-secondary);
}

.post-single__tags a:hover {
	color: var(--link-color);
	border-color: var(--accent);
	text-decoration: none;
}

.post-single__author {
	display: flex;
	gap: 1rem;
	margin-top: 2rem;
	padding: 1.25rem;
	background: var(--bg-secondary);
	border-radius: 5px;
}

.post-single__author-avatar img { border-radius: 50%; }

.post-single__author-name { margin: 0 0 .25rem; font-size: 1.05rem; }

.post-single__author-bio { margin: 0; font-size: .9rem; color: var(--text-secondary); }

.post-single__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 2rem;
	font-size: .925rem;
}

.post-single__nav a {
	color: var(--text-secondary);
	text-decoration: none;
}

.post-single__nav a:hover { color: var(--link-color); }
.post-single__nav-next { text-align: right; }

.page-links { margin-top: 1.5rem; color: var(--text-secondary); }

@media (max-width: 767px) {
	.post-single { max-width: none; }
	.post-single__title { font-size: 1.5rem; }
	.post-single__nav { grid-template-columns: 1fr; }
	.post-single__nav-next { text-align: left; }
}

/* ==========================================================================
   渚ц竟鏍忓皬宸ュ叿
   ========================================================================== */

.widget {
	margin: 0 0 2rem;
	padding: 1.25rem;
	background: var(--bg-secondary);
	border-radius: 5px;
}

.widget:last-child { margin-bottom: 0; }

.widget-title {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--text-secondary);
	margin: 0 0 .9rem;
}

.widget ul,
.widget-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget ul li,
.widget-list li {
	padding: .4rem 0;
	border-bottom: 1px dashed var(--border-color);
	font-size: .925rem;
}

.widget ul li:last-child { border-bottom: 0; }

.widget ul li a,
.widget-list a { color: var(--text-primary); }

.widget ul li a:hover,
.widget-list a:hover { color: var(--link-color); }

.widget .count { color: var(--text-secondary); font-size: .8rem; }

.widget select {
	width: 100%;
	padding: .5rem;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-primary);
	color: var(--text-primary);
}

.widget .widget-tag-cloud { line-height: 1.9; }

/* 鎼滅储灏忓伐鍏?*/
.widget_search,
.widget form.search-form { margin-bottom: 0; }

.search-form {
	display: flex;
	gap: .4rem;
}

.search-form input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: .5rem .75rem;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-primary);
	color: var(--text-primary);
	font-size: .9rem;
}

.search-form input[type="search"]:focus {
	outline: 2px solid var(--accent);
	outline-offset: 0;
	border-color: var(--accent);
}

.search-form button,
.search-form input[type="submit"],
.widget_search input[type="submit"] {
	padding: .5rem 1rem;
	border: 1px solid var(--accent);
	border-radius: 5px;
	background: transparent;
	color: var(--link-color);
	cursor: pointer;
	font-size: .9rem;
	transition: background-color .2s ease, color .2s ease;
}

.search-form button:hover,
.search-form input[type="submit"]:hover {
	background: var(--accent);
	color: #fff;
}

/* 璇勮灏忓伐鍏?*/
.recentcomments { color: var(--text-secondary); }

/* 鏃ュ巻 */
.widget_calendar table { width: 100%; border-collapse: collapse; }
.widget_calendar caption { padding-bottom: .5rem; color: var(--text-secondary); font-size: .85rem; }
.widget_calendar th, .widget_calendar td { text-align: center; padding: .25rem; font-size: .85rem; }

/* ==========================================================================
   椤佃剼
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--border-color);
	background: var(--bg-secondary);
	transition: background-color .25s ease, border-color .25s ease;
}

.site-footer__inner {
	max-width: 1376px;
	margin: 0 auto;
	padding: 1.5rem;
	text-align: center;
	color: var(--text-secondary);
	font-size: .875rem;
}

.footer-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.25rem;
	margin: 0 0 .75rem;
	padding: 0;
	list-style: none;
}

.site-footer__text { margin: 0; }

/* 备案信息行 */
.cainiao-beian {
	margin: .5rem 0 0;
	color: var(--text-secondary);
	font-size: .8125rem;
	line-height: 1.8;
}

.cainiao-beian__sep {
	margin: 0 .5rem;
	opacity: .45;
}

.cainiao-beian__item {
	display: inline-flex;
	align-items: center;
}

.cainiao-beian__icon {
	margin-right: .3rem;
	font-size: .9em;
}

.cainiao-beian a {
	color: inherit;
	text-decoration: none;
	transition: color .25s ease;
}

.cainiao-beian a:hover,
.cainiao-beian a:focus-visible { color: var(--link-color); }

/* ==========================================================================
   璇勮
   ========================================================================== */

.comments-area {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border-color);
}

.comments-title {
	font-size: 1.25rem;
	margin-bottom: 1.5rem;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.comment-list .comment-body {
	display: flex;
	gap: .75rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	border-radius: 5px;
	padding: 1rem;
	transition: border-color .2s ease;
}

.comment-list .comment-body:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border-color)); }

.comment-list .comment-author {
	flex-shrink: 0;
	line-height: 0;
}

.comment-list .comment-author img { border-radius: 50%; }

.comment-main { min-width: 0; flex: 1; }

.comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem;
	margin-bottom: .35rem;
}

.comment-author-name {
	font-weight: 600;
	color: var(--text-primary);
	font-size: .95rem;
}

.comment-author-name a { color: var(--text-primary); }
.comment-author-name a:hover { color: var(--link-color); }

.comment-date {
	color: var(--text-secondary);
	font-size: .8rem;
}

.comment-text {
	color: var(--text-primary);
	font-size: .95rem;
	overflow-wrap: break-word;
}

.comment-text p { margin: 0 0 .5em; }
.comment-text p:last-child { margin-bottom: 0; }

.comment-foot {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: .5rem;
	font-size: .825rem;
}

.comment-foot a,
.comment-foot .comment-edit-link a {
	color: var(--text-secondary);
	text-decoration: none;
}

.comment-foot a:hover { color: var(--link-color); }

/* 嵌套回复 */
.comment-list .children {
	list-style: none;
	margin: .75rem 0 0;
	padding: 0 0 0 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	border-left: 2px solid var(--border-color);
}

@media (max-width: 767px) {
	.comment-list .children { padding-left: .75rem; }
}

.no-comments {
	padding: 1rem;
	background: var(--bg-secondary);
	border: 1px dashed var(--card-border);
	border-radius: 5px;
	color: var(--text-secondary);
	text-align: center;
}

/* 加载更多评论 */
.comments-loadmore-wrap {
	display: flex;
	justify-content: center;
	padding: 1rem 0;
}

/* 评论表单 */
.comment-form {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}

.comment-form p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.comment-form label {
	font-size: .875rem;
	color: var(--text-secondary);
}

.comment-form p.comment-notes,
.comment-form p.logged-in-as {
	color: var(--text-secondary);
	font-size: .85rem;
}

.comment-form p.form-submit {
	flex-direction: row;
	align-items: center;
	gap: .75rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	padding: .6rem .8rem;
	border: 1px solid var(--border-color);
	border-radius: 5px;
	background: var(--bg-primary);
	color: var(--text-primary);
	font: inherit;
}

.comment-form input[id^="author"],
.comment-form input[id^="email"],
.comment-form input[id^="url"] {
	max-width: 20rem;
}

.comment-form .submit {
	padding: .6rem 1.5rem;
	border: 1px solid var(--accent);
	border-radius: 5px;
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	font-weight: 600;
}

.comment-form .submit:hover { filter: brightness(1.06); }

/* AJAX 状态提示 */
.cainiao-form-status {
	margin-top: .5rem;
	border-radius: 5px;
	font-size: .875rem;
	display: none;
}

.cainiao-form-status:not(:empty) { display: block; padding: .6rem .9rem; }

.cainiao-form-status.is-loading {
	background: var(--bg-secondary);
	border: 1px solid var(--border-color);
	color: var(--text-secondary);
}

.cainiao-form-status.is-success {
	background: var(--accent-soft);
	border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-color));
	color: var(--link-color);
}

.cainiao-form-status.is-pending {
	background: rgba(255, 193, 7, .12);
	border: 1px solid rgba(255, 193, 7, .4);
	color: #8a6d3b;
}

html[data-theme="dark"] .cainiao-form-status.is-pending { color: #e6c26e; }

.cainiao-form-status.is-error {
	background: rgba(220, 53, 69, .1);
	border: 1px solid rgba(220, 53, 69, .35);
	color: #b02a37;
}

html[data-theme="dark"] .cainiao-form-status.is-error { color: #f28b93; }

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