/* ============================================
   银程EYC · 壁纸玻璃拟态风格（Apple 简约 + Firefly 壁纸）
   ============================================ */

:root {
	--bg: #f5f5f7;
	--veil: rgba(255, 255, 255, 0.4);
	--card: rgba(255, 255, 255, 0.72);
	--card-border: rgba(0, 0, 0, 0.08);
	--card-blur: 20px;
	--text: #1d1d1f;
	--text-secondary: #4a4a50;
	--text-tertiary: #6e6e73;
	--shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
	--accent: #0071e3;
	--accent-bg: rgba(0, 113, 227, 0.12);
	--radius-card: 24px;
	--radius-pill: 980px;
	--nav-h: 52px;
	--splash-glow: rgba(255, 158, 191, 0.22);
}

/* 深色主题：手动 data-theme="dark" 或跟随系统（未显式 light 时） */
html[data-theme="dark"] {
	--bg: #0b0b0d;
	--veil: rgba(0, 0, 0, 0.5);
	--card: rgba(28, 28, 30, 0.68);
	--card-border: rgba(255, 255, 255, 0.1);
	--text: #f5f5f7;
	--text-secondary: #b0b0b6;
	--text-tertiary: #86868b;
	--shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65);
	--accent: #2997ff;
	--accent-bg: rgba(41, 151, 255, 0.18);
	--splash-glow: rgba(255, 158, 191, 0.1);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) {
		--bg: #0b0b0d;
		--veil: rgba(0, 0, 0, 0.5);
		--card: rgba(28, 28, 30, 0.68);
		--card-border: rgba(255, 255, 255, 0.1);
		--text: #f5f5f7;
		--text-secondary: #b0b0b6;
		--text-tertiary: #86868b;
		--shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
		--shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65);
		--accent: #2997ff;
		--accent-bg: rgba(41, 151, 255, 0.18);
		--splash-glow: rgba(255, 158, 191, 0.1);
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	background: var(--bg);
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
		"SF Pro Display", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	transition: background 0.3s ease, color 0.3s ease;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: opacity 0.2s ease;
}

a:hover {
	opacity: 0.8;
}

button {
	font-family: inherit;
	border: none;
	background: none;
	cursor: pointer;
	color: inherit;
}

/* ------- 全屏壁纸背景 ------- */
#bg-wallpaper {
	position: fixed;
	inset: 0;
	z-index: -1;
	background-image: url("https://t.alcy.cc/pc"), url("assets/bg/d1.jpg");
	background-size: cover, cover;
	background-position: center, center;
	opacity: 0;
	transition: opacity 0.9s ease;
}

#bg-wallpaper.loaded {
	opacity: 1;
}

/* 遮罩：让玻璃卡片和文字始终可读 */
#bg-wallpaper::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--veil);
}

@media (max-width: 640px) {
	#bg-wallpaper {
		background-image: url("https://t.alcy.cc/mp"), url("assets/bg/m1.jpg");
	}
}

/* ------- 顶部壁纸横幅 ------- */
/* 背景图由 JS 加载设置（显示与下载同一张）；此处仅本地兜底，避免 CSS 另请求随机图 */
.hero-banner {
	position: relative;
	width: 100%;
	height: clamp(220px, 36vh, 340px);
	background-image: url("assets/bg/d1.jpg");
	background-size: cover;
	background-position: center 20%;
	transition: opacity 0.3s ease;
}

/* 切换壁纸时淡出，换图后再淡入 */
.hero-banner.fading {
	opacity: 0;
}

/* 底部渐变过渡到页面背景 */
.hero-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.22),
		rgba(0, 0, 0, 0) 38%,
		var(--bg)
	);
}

@media (max-width: 640px) {
	.hero-banner {
		background-image: url("assets/bg/m1.jpg");
		background-size: cover;
		background-position: center, center;
		height: clamp(180px, 30vh, 260px);
	}
}

/* ------- 顶栏 ------- */
.nav {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--nav-h);
	background: var(--card);
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
	border-bottom: 1px solid var(--card-border);
	box-shadow: var(--shadow);
}

.nav-inner {
	height: 100%;
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
}

.nav-logo {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: var(--text);
}

.nav-logo:hover {
	opacity: 0.85;
}

.nav-right {
	position: relative;
}

.nav-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--card-border);
	border-radius: 50%;
	background: var(--accent-bg);
	color: var(--accent);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
	flex-shrink: 0;
}

.nav-menu-btn:hover {
	background: var(--accent);
	color: #fff;
}

.nav-menu-btn:active {
	transform: scale(0.9);
}

/* 下拉菜单：右上角对齐，淡入滑下 */
.nav-menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 60;
	min-width: 168px;
	padding: 6px;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 14px;
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.96);
	transform-origin: top right;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav-menu.open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.nav-menu-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border: none;
	border-radius: 9px;
	background: transparent;
	color: var(--text);
	font-size: 13.5px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nav-menu-item iconify-icon {
	color: var(--accent);
	flex-shrink: 0;
}

.nav-menu-item:hover {
	background: var(--accent-bg);
}

.nav-menu-item:active {
	transform: scale(0.98);
}

/* ------- 主体容器 ------- */
/* 宽屏下收一栏，别让卡片横着摊满整屏 */
.container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ------- Hero 资料卡 ------- */
.hero {
	margin-top: -56px;
	padding: 0 0 28px;
	animation: fadeUp 0.7s ease both;
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.profile-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 26px 28px;
}

/* 宽屏：资料靠左、社交竖排在右，别让卡片右侧空一大片 */
@media (min-width: 641px) {
	.profile-card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 32px;
		padding: 28px 32px;
	}

	.profile-card .social {
		flex-direction: column;
		flex-shrink: 0;
	}

	.profile-card .social-btn {
		justify-content: center;
	}
}

.profile-top {
	display: flex;
	align-items: center;
	gap: 22px;
}

.avatar-ring {
	position: relative;
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient(135deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd);
	box-shadow: var(--shadow-lg), 0 0 32px rgba(255, 154, 158, 0.35);
	cursor: pointer;
	transition: transform 0.2s ease;
}

.avatar-ring:hover {
	transform: scale(1.05);
}

.avatar-ring.petting {
	animation: pet-shake 0.6s ease;
}

/* 摸摸头抖动：小幅左右摇摆 + 轻微上下浮动，像被抚摸 */
@keyframes pet-shake {
	0%   { transform: rotate(0deg); }
	15%  { transform: rotate(-8deg) translateY(-4px); }
	30%  { transform: rotate(7deg) translateY(2px); }
	45%  { transform: rotate(-6deg) translateY(-3px); }
	60%  { transform: rotate(5deg) translateY(1px); }
	75%  { transform: rotate(-3deg) translateY(-2px); }
	90%  { transform: rotate(2deg); }
	100% { transform: rotate(0deg) translateY(0); }
}

/* 摸摸头气泡：头像上方冒一句萌语，弹出→停留→上浮淡出 */
.pet-bubble {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	z-index: 20;
	transform: translateX(-50%);
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--card-border);
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
	box-shadow: var(--shadow);
	padding: 6px 12px;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 500;
	white-space: nowrap;
	opacity: 0;
	animation: pet-pop 1.8s ease forwards;
	pointer-events: none;
}

.pet-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: var(--card);
}

@keyframes pet-pop {
	0%   { opacity: 0; transform: translate(-50%, 8px) scale(0.85); }
	12%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
	18%  { transform: translate(-50%, -2px) scale(1.03); }
	75%  { opacity: 1; transform: translate(-50%, -3px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -12px) scale(0.95); }
}

.avatar-ring img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--card);
}

.profile-id {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.profile-id h1 {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.25;
	transition: transform 0.25s ease;
}

.profile-id h1:hover {
	transform: scale(1.02);
}

.profile-id .typewriter {
	margin-top: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--accent);
	min-height: 1.5em;
	line-height: 1.5;
}

.typewriter .tw-cursor {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 2px;
	vertical-align: -0.12em;
	background: var(--accent);
	animation: tw-blink 0.9s steps(1) infinite;
}

@keyframes tw-blink {
	50% { opacity: 0; }
}

.profile-id .bio {
	margin-top: 6px;
	font-size: 14px;
	color: var(--text-secondary);
	line-height: 1.5;
}

/* ------- 社交按钮 ------- */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
}

.social-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	background: var(--card);
	border: 1px solid var(--card-border);
	box-shadow: var(--shadow);
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.social-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
	opacity: 1;
}

.social-btn:active {
	transform: translateY(0) scale(0.97);
}

.social-btn svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.social-btn iconify-icon {
	font-size: 18px;
}

.social-btn--bili {
	color: #fb7299;
}

.social-btn--bili:hover {
	box-shadow: 0 10px 30px rgba(251, 114, 153, 0.28);
}

.social-btn--qq {
	color: #12b7f5;
}

.social-btn--qq:hover {
	box-shadow: 0 10px 30px rgba(18, 183, 245, 0.28);
}

/* ------- 区块 ------- */
.section {
	padding: 28px 0;
}

.section-title {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: var(--text-tertiary);
	text-transform: uppercase;
	margin-bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--card-border);
}

.section-ic {
	font-size: 16px;
}

/* 区块标题行（标题 + 右侧操作按钮，如「查看全部」） */
.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.section-title-row .section-title {
	margin-bottom: 0;
	flex: 1;
}

.view-all {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: var(--accent);
	font-size: 13px;
	font-weight: 500;
	padding: 4px 6px;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.view-all:hover {
	background: var(--accent-bg);
}

.view-all:active {
	transform: scale(0.96);
}

/* ------- 标签胶囊 ------- */
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-start;
}

.tag {
	display: inline-block;
	padding: 7px 18px;
	border-radius: var(--radius-pill);
	background: var(--accent-bg);
	color: var(--accent);
	font-size: 14px;
	font-weight: 500;
	transition: transform 0.2s ease;
}

.tag:hover {
	transform: translateY(-2px);
}

/* ------- 小工具网格 ------- */
.widget-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.widget {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 24px;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow);
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
}

.widget--wide {
	grid-column: 1 / -1;
}

.widget-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.widget-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--text-tertiary);
}

.widget-title iconify-icon {
	font-size: 18px;
}

/* 生日倒计时 */
.birthday-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.birthday-main {
	font-size: 17px;
	font-weight: 600;
	color: var(--text);
}

.birthday-sub {
	margin-top: 5px;
	font-size: 13px;
	color: var(--text-tertiary);
}

.birthday-days {
	display: flex;
	align-items: center;
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* iconify 是自定义元素，默认基线对齐会偏上，压成块级 */
.birthday-days iconify-icon {
	display: block;
}

.birthday-days span {
	margin-left: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-tertiary);
}

/* 最后一周数字转强调色，算个预告 */
.birthday-card.is-soon .birthday-days {
	color: var(--accent);
}

/* 生日当天：卡片柔光 + 蛋糕缓缓上下浮 */
.birthday-card.is-today {
	border-color: var(--accent-bg);
	box-shadow: var(--shadow), 0 0 24px var(--accent-bg);
}

.birthday-card.is-today .birthday-days {
	color: var(--accent);
	animation: bday-float 1.8s ease-in-out infinite;
}

@keyframes bday-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

/* 时钟 */
.clock-body {
	text-align: center;
	padding: 6px 0 2px;
}

.clock-time {
	font-size: 40px;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

.clock-date {
	margin-top: 6px;
	font-size: 13px;
	color: var(--text-secondary);
}

/* 天气 */
.weather-body {
	display: flex;
	align-items: center;
	gap: 16px;
}

.weather-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	flex-shrink: 0;
}

.weather-temp {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
}

.weather-desc {
	margin-top: 2px;
	font-size: 14px;
	color: var(--text-secondary);
}

.weather-city {
	margin-top: 2px;
	font-size: 12px;
	color: var(--text-tertiary);
}

/* 音乐 */
.music-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.music-title {
	max-width: 100%;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.music-ctrl {
	display: flex;
	align-items: center;
	gap: 18px;
}

.music-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--card);
	border: 1px solid var(--card-border);
	box-shadow: var(--shadow);
	color: var(--text);
	transition: transform 0.2s ease, background 0.2s ease;
}

.music-btn:hover {
	transform: translateY(-2px);
}

.music-btn iconify-icon {
	font-size: 22px;
}

.music-btn--main {
	width: 52px;
	height: 52px;
	background: var(--accent);
	color: #fff;
	border: none;
}

.music-progress {
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--card-border);
	overflow: hidden;
}

.music-bar {
	height: 100%;
	width: 0;
	border-radius: 2px;
	background: var(--accent);
	transition: width 0.2s linear;
}

/* 运行时间 */
.uptime-body {
	text-align: center;
	padding: 6px 0 2px;
}

.uptime-num {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 1px;
	font-variant-numeric: tabular-nums;
}

.uptime-time {
	margin-top: 6px;
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

/* 状态列表 */
.status-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.status-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.status-item > span:first-child {
	color: var(--text-secondary);
}

.status-value {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 500;
	color: var(--text);
}

.status-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--text-tertiary);
}

.status-dot.online {
	background: #34c759;
	box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.22);
}

.status-dot.offline {
	background: #ff3b30;
	box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.22);
}

/* 随机语录 */
.quote-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-bg);
	color: var(--accent);
	transition: transform 0.3s ease, background 0.2s ease;
}

.quote-btn:hover {
	transform: rotate(180deg);
	background: var(--accent);
	color: #fff;
}

.quote-btn iconify-icon {
	font-size: 18px;
}

.quote-text {
	padding: 10px 16px;
	font-size: 17px;
	line-height: 1.85;
	letter-spacing: 0.2px;
	color: var(--text);
	text-align: center;
}

/* ------- 卡片 ------- */
.card {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow);
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
}

/* ------- 文章列表 ------- */
.post-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.post-item {
	display: block;
	padding: 22px 24px;
	position: relative;
	color: var(--text);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-item::after {
	content: "→";
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-tertiary);
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.post-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	opacity: 1;
}

.post-item:hover::after {
	opacity: 1;
	transform: translateY(-50%) translateX(3px);
}

.post-item h3 {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.2px;
	line-height: 1.35;
	padding-right: 20px;
}

/* 首篇做成头条，列表有主次 */
.post-item:first-child {
	padding: 26px 28px;
}

.post-item:first-child h3 {
	font-size: 22px;
}

.post-item .post-meta {
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--text-tertiary);
}

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

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.post-tags span {
	font-size: 12px;
	color: var(--accent);
	background: var(--accent-bg);
	padding: 2px 10px;
	border-radius: var(--radius-pill);
}

/* 文章卡片升级：左侧强调色条 + 摘要 + 阅读时长 */
.post-item .post-accent {
	position: absolute;
	left: 0;
	top: 18px;
	bottom: 18px;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--accent), rgba(0, 113, 227, 0.15));
}

.post-item .post-summary {
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-secondary);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.post-item .post-date {
	font-weight: 500;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

.post-item .read-time {
	opacity: 0.85;
}

.post-empty {
	text-align: center;
	padding: 56px 24px;
	color: var(--text-secondary);
	font-size: 15px;
}

/* ------- 阅读视图 ------- */
.back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	background: var(--card);
	border: 1px solid var(--card-border);
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	margin-bottom: 20px;
	box-shadow: var(--shadow);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: transform 0.2s ease;
}

.back-btn:hover {
	transform: translateY(-2px);
}

.post-view {
	padding: 40px 44px;
	margin-bottom: 40px;
}

.post-view h2 {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.4px;
	line-height: 1.25;
}

.post-view .post-meta {
	margin-top: 14px;
	font-size: 14px;
	color: var(--text-tertiary);
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.post-view .post-body {
	max-width: 760px;
	margin: 28px auto 0;
	font-size: 16px;
	color: var(--text);
}

.post-view .post-body p {
	margin-bottom: 1.2em;
}

.post-view .post-body h1,
.post-view .post-body h2,
.post-view .post-body h3 {
	margin: 1.6em 0 0.6em;
	line-height: 1.35;
}

.post-view .post-body h2 {
	font-size: 22px;
}

.post-view .post-body h3 {
	font-size: 18px;
}

.post-view .post-body ul,
.post-view .post-body ol {
	padding-left: 1.4em;
	margin-bottom: 1.2em;
}

.post-view .post-body code {
	background: var(--accent-bg);
	color: var(--accent);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: 0.9em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.post-view .post-body pre {
	background: rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	padding: 14px 16px;
	overflow-x: auto;
	margin: 0 0 1.2em;
	font-size: 13px;
	line-height: 1.6;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html[data-theme="dark"] .post-view .post-body pre {
	background: rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .post-view .post-body pre {
		background: rgba(0, 0, 0, 0.35);
	}
}

.post-view .post-body pre code {
	background: none;
	color: inherit;
	padding: 0;
}

.post-view .post-body blockquote {
	border-left: 3px solid var(--accent);
	padding: 4px 16px;
	margin: 0 0 1.2em;
	color: var(--text-secondary);
}

.post-view .post-body blockquote p {
	margin-bottom: 0.5em;
}

.post-view .post-body hr {
	border: none;
	border-top: 1px solid var(--card-border);
	margin: 1.6em 0;
}

.post-view .post-body img {
	max-width: 100%;
	border-radius: 12px;
	margin: 0.4em 0;
}

.post-view .post-body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------- 点赞 ------- */
.like-bar {
	display: flex;
	justify-content: center;
	padding: 30px 0 40px;
}

.like-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 26px;
	border: 1px solid var(--card-border);
	border-radius: 999px;
	background: var(--card);
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	color: var(--text-secondary);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
}

.like-btn:hover {
	color: #ff6b81;
	border-color: rgba(255, 107, 129, 0.4);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 107, 129, 0.15);
}

.like-btn:active {
	transform: scale(0.9);
}

.like-btn .like-count {
	min-width: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.like-btn.liked {
	color: #ff4757;
	border-color: rgba(255, 71, 87, 0.35);
	background: rgba(255, 71, 87, 0.08);
	box-shadow: 0 2px 12px rgba(255, 71, 87, 0.12);
}

/* 点赞成功爱心弹跳 */
.like-btn.liked .like-ic {
	animation: like-pop 0.35s ease;
}

@keyframes like-pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* ------- 页脚 ------- */
.footer {
	text-align: center;
	padding: 48px 20px 40px;
	color: var(--text-tertiary);
	font-size: 13px;
}

.footer .heart {
	color: #ff6b81;
}

/* ------- 模态弹窗 ------- */
.modal-mask {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.modal-mask.open {
	opacity: 1;
	visibility: visible;
}

.modal {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
	padding: 32px;
	width: 280px;
	text-align: center;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transform: scale(0.92);
	transition: transform 0.25s ease;
}

.modal-mask.open .modal {
	transform: scale(1);
}

.modal img {
	width: 200px;
	height: 200px;
	border-radius: 14px;
	margin: 0 auto 18px;
	object-fit: cover;
	border: 1px solid var(--card-border);
}

.modal h3 {
	font-size: 17px;
	font-weight: 600;
}

.modal p {
	margin-top: 6px;
	font-size: 13px;
	color: var(--text-secondary);
}

.modal .close {
	margin-top: 20px;
	width: 100%;
	padding: 10px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	transition: opacity 0.2s ease;
}

.modal .close:hover {
	opacity: 0.9;
}

/* ------- Toast ------- */
/* ------- 阅读进度条 + 回顶 ------- */
.scroll-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 3px;
	border-radius: 0 2px 2px 0;
	background: linear-gradient(90deg, var(--accent), var(--accent-bg));
	z-index: 300;
}

.to-top {
	position: fixed;
	right: 22px;
	bottom: 26px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--card);
	border: 1px solid var(--card-border);
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
	box-shadow: var(--shadow);
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, background 0.2s ease;
	z-index: 200;
}

.to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

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

.to-top:active {
	transform: scale(0.92);
}

.toast {
	position: fixed;
	top: 64px;
	right: 16px;
	z-index: 1000;
	max-width: 300px;
	padding: 10px 16px;
	border-radius: 12px;
	background: var(--card);
	color: var(--text);
	border: 1px solid var(--card-border);
	backdrop-filter: blur(var(--card-blur)) saturate(160%);
	-webkit-backdrop-filter: blur(var(--card-blur)) saturate(160%);
	box-shadow: var(--shadow);
	font-size: 13px;
	line-height: 1.5;
	word-break: break-word;
	opacity: 0;
	transform: translateX(24px) scale(0.9);
	pointer-events: none;
}

.toast.show {
	opacity: 1;
	animation: toast-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.toast.out {
	opacity: 0;
	animation: toast-out 0.3s ease forwards;
}

/* 右上角弹窗：从右侧滑入 + 弹性回弹 */
@keyframes toast-in {
	0%   { opacity: 0; transform: translateX(40px) scale(0.8); }
	60%  { opacity: 1; transform: translateX(-6px) scale(1.03); }
	80%  { transform: translateX(2px) scale(0.99); }
	100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toast-out {
	0%   { opacity: 1; transform: translateX(0) scale(1); }
	100% { opacity: 0; transform: translateX(24px) scale(0.9); }
}

/* ------- 开屏动画 ------- */
.splash {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	background: radial-gradient(120% 130% at 50% 30%, var(--splash-glow), var(--bg) 72%);
	animation: splash-fade 2.2s ease forwards; /* 纯 CSS 兜底，JS 挂了也自动淡出 */
}

.splash-logo {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 3px;
	color: var(--text);
	animation: splash-logo-in 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both,
		splash-glow 2.2s ease-in-out infinite alternate;
}

/* 品牌名渐变文字：蓝→粉，不支持 background-clip:text 的旧内核回退为普通文字色 */
@supports (-webkit-background-clip: text) {
	.nav-logo,
	.profile-id h1,
	.splash-logo {
		background: linear-gradient(90deg, var(--accent), #ff9ecf);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.splash-bar {
	width: 140px;
	height: 3px;
	border-radius: 3px;
	background: var(--card-border);
	overflow: hidden;
}

.splash-bar i {
	display: block;
	position: relative;
	height: 100%;
	width: 0;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--accent), #ff9ecf);
	overflow: hidden;
	animation: splash-load 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* 进度条流动高光 */
.splash-bar i::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
	animation: bar-shine 0.9s linear forwards;
}

@keyframes splash-logo-in {
	0%   { opacity: 0; transform: scale(0.72) translateY(14px); filter: blur(12px); letter-spacing: 12px; }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); letter-spacing: 3px; }
}

@keyframes splash-load {
	from { width: 0; }
	to   { width: 100%; }
}

@keyframes bar-shine {
	from { left: -45%; }
	to   { left: 100%; }
}

@keyframes splash-glow {
	from { text-shadow: 0 2px 14px rgba(255, 158, 191, 0.28); }
	to   { text-shadow: 0 2px 26px rgba(255, 158, 191, 0.6); }
}

@keyframes splash-fade {
	0%, 72% { opacity: 1; visibility: visible; }
	100%    { opacity: 0; visibility: hidden; }
}

/* 开屏期间 UI 隐藏，body.loaded 后各区块错峰自然归位 */
body.anim .nav,
body.anim #view-home > *,
body.anim .footer {
	opacity: 0;
	transform: translateY(18px) scale(0.98);
}

body.loaded .nav,
body.loaded #view-home > *,
body.loaded .footer {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.loaded .nav { transition-delay: 0.05s; }
body.loaded #view-home > :nth-child(1) { transition-delay: 0.12s; }
body.loaded #view-home > :nth-child(2) { transition-delay: 0.2s; }
body.loaded #view-home > :nth-child(3) { transition-delay: 0.28s; }
body.loaded #view-home > :nth-child(4) { transition-delay: 0.36s; }
body.loaded #view-home > :nth-child(5) { transition-delay: 0.44s; }
body.loaded .footer { transition-delay: 0.52s; }

/* ------- 樱花飘落 ------- */
#sakuraLayer {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1500;
}

.sakura {
	position: absolute;
	top: -30px;
	pointer-events: none;
	opacity: 0.85;
	background: url("/assets/sakura.png") center / contain no-repeat;
}

@keyframes sakura-fall {
	0%   { transform: translate(0, 0) rotate(0deg); }
	30%  { transform: translate(var(--sx), 30vh) rotate(120deg); }
	60%  { transform: translate(calc(var(--sx) * -0.5), 65vh) rotate(240deg); }
	100% { transform: translate(0, 112vh) rotate(360deg); }
}

/* ------- 标签物理引擎 ------- */
.tag.phys {
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	z-index: 1400;
	pointer-events: auto;
	will-change: transform;
	transition: none;
}

/* ------- 响应式 ------- */
@media (max-width: 640px) {
	.widget-grid {
		grid-template-columns: 1fr;
	}

	.hero {
		margin-top: -48px;
		padding-top: 0;
	}

	.profile-card {
		padding: 20px;
	}

	.profile-top {
		gap: 16px;
	}

	.avatar-ring {
		width: 84px;
		height: 84px;
	}

	.profile-id h1 {
		font-size: 22px;
	}

	.profile-id .bio {
		font-size: 13px;
	}

	.social {
		gap: 8px;
	}

	.post-view {
		padding: 28px 24px;
	}

	.post-view h2 {
		font-size: 24px;
	}

	.social-btn {
		padding: 9px 16px;
		font-size: 13px;
	}

	/* ---- 手机版观感优化 ---- */
	.container,
	.nav-inner {
		padding: 0 16px;
	}

	.section {
		padding: 20px 0;
	}

	.section-title {
		margin-bottom: 14px;
	}

	.widget {
		padding: 18px 18px;
		gap: 14px;
	}

	.clock-time {
		font-size: 30px;
	}

	.birthday-main {
		font-size: 16px;
	}

	.birthday-days {
		font-size: 26px;
	}

	.uptime-num {
		font-size: 26px;
	}

	.weather-temp {
		font-size: 24px;
	}

	.weather-icon {
		width: 48px;
		height: 48px;
	}

	.weather-body {
		gap: 12px;
	}

	.music-btn--main {
		width: 48px;
		height: 48px;
	}

	.tag {
		padding: 6px 14px;
		font-size: 13px;
	}

	.post-item {
		padding: 18px 20px;
	}

	.post-item h3 {
		font-size: 17px;
	}

	.post-item::after {
		right: 20px;
	}

	.post-tags span {
		font-size: 11px;
		padding: 2px 8px;
	}

	.quote-text {
		font-size: 14px;
	}
}

/* 加载圆圈旋转动画（音乐缓冲提示） */
.spin {
	display: inline-block;
	animation: spin 1s linear infinite;
}
@keyframes spin {
	to { transform: rotate(360deg); }
}


/* ------- 版本切换（放菜单里，用本站自己的变量，深浅色自动跟着走） ------- */
.nav-ver {
	cursor: default;
}

.nav-ver-opts {
	display: flex;
	gap: 2px;
	margin-left: auto;
	padding: 2px;
	border-radius: var(--radius-pill);
	background: var(--accent-bg);
}

.nav-ver-opts a {
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
	color: var(--text-secondary);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.nav-ver-opts a:hover {
	color: var(--text);
}

.nav-ver-opts a.is-on {
	background: var(--accent);
	color: #fff;
}


/* ------- 萌ICP 备案（放页脚，用本站自己的文字色） ------- */
.foot-icp {
	margin-bottom: 6px;
}

.foot-icp a {
	color: var(--text-tertiary);
	text-decoration: none;
	transition: color 0.18s ease;
}

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