/* ========================
   全局重置与基础设置
======================== */
:root {
  /* 颜色变量 - 浅色模式 */
  --primary-color: #4facfe;
  --primary-gradient: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  --secondary-color: #2c3e50;
  --text-color: #333;
  --text-secondary: #555;
  --text-light: #666;
  --background-color: #f5f7fa;
  --background-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
  --card-color: #ffffff;
  --border-color: #eee;
  --error-color: #e74c3c;
  --error-gradient: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%);
  
  /* 尺寸变量 */
  --border-radius: 16px;
  --border-radius-small: 12px;
  --border-radius-full: 50%;
  --spacing-xs: 6px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 60px;
  
  /* 阴影变量 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
  
  /* 过渡动画 */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* 深色模式 */
body.dark-mode {
  --primary-color: #74b9ff;
  --primary-gradient: linear-gradient(90deg, #74b9ff 0%, #00ceff 100%);
  --secondary-color: #dfe6e9;
  --text-color: #f8f9fa;
  --text-secondary: #adb5bd;
  --text-light: #6c757d;
  --background-color: #2d3436;
  --background-gradient: linear-gradient(135deg, #2d3436 0%, #343a40 100%);
  --card-color: #454d55;
  --border-color: #5d6d7e;
  --error-color: #ff7675;
  --error-gradient: linear-gradient(90deg, #ff7675 0%, #fd79a8 100%);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4);
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	line-height: 1.7;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
	color: #333;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: 70px;
	/* ≈ footer 高度 + 安全余量 */
	margin: 0;
}

/* ========================  
   网站头部样式
======================== */
:root {
	/* 颜色变量 */
	--primary-color: #4facfe;
	--primary-gradient: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
	--secondary-color: #2c3e50;
	--text-color: #333;
	--text-secondary: #555;
	--text-light: #666;
	--background-color: #f5f7fa;
	--background-gradient: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
	--card-color: #ffffff;
	--border-color: #eee;
	--error-color: #e74c3c;
	--error-gradient: linear-gradient(90deg, #ff6b6b 0%, #ff8e53 100%);
	
	/* 尺寸变量 */
	--border-radius: 16px;
	--border-radius-small: 12px;
	--border-radius-full: 50%;
	--spacing-xs: 6px;
	--spacing-sm: 12px;
	--spacing-md: 20px;
	--spacing-lg: 30px;
	--spacing-xl: 60px;
	
	/* 阴影变量 */
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
	
	/* 过渡变量 */
	--transition-fast: 0.15s ease;
	--transition-normal: 0.3s ease;
}

/* 深色模式变量 */
body.dark-mode {
	--primary-color: #5fb8ff;
	--primary-gradient: linear-gradient(90deg, #5fb8ff 0%, #00d1ff 100%);
	--secondary-color: #34495e;
	--text-color: #ecf0f1;
	--text-secondary: #bdc3c7;
	--text-light: #95a5a6;
	--background-color: #2c3e50;
	--background-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	--card-color: #37474f;
	--border-color: #475761;
	--error-color: #ff7675;
	--error-gradient: linear-gradient(90deg, #ff7675 0%, #ff9f43 100%);
	
	background: var(--background-gradient);
	color: var(--text-color);
}

/* 全局重置与基础设置 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	line-height: 1.7;
	background: var(--background-gradient);
	color: var(--text-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-bottom: 70px;
	/* ≈ footer 高度 + 安全余量 */
	margin: 0;
	transition: background var(--transition-normal);
}

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-color);
	z-index: 1001;
	transition: all var(--transition-normal);
}

/* 深色模式下的头部样式 */
body.dark-mode .site-header {
	background: rgba(69, 77, 85, 0.95);
	border-bottom: 1px solid var(--border-color);
}

.header-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 网站Logo */
.site-logo {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--primary-color);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.site-logo:hover {
	color: var(--secondary-color);
}

/* 桌面导航 */
.desktop-nav {
	display: flex;
	align-items: center;
}

.nav-menu {
	list-style: none;
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
}

.nav-link {
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
	padding: 8px 0;
	position: relative;
	transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
	color: var(--primary-color);
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-gradient);
	transition: width var(--transition-normal);
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
}

/* 主题切换按钮 */
.theme-toggle {
	background: none;
	border: none;
	font-size: 1.5rem;
	cursor: pointer;
	padding: 8px;
	border-radius: var(--border-radius-full);
	transition: background-color var(--transition-fast);
	margin-left: 16px;
}

.theme-toggle:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

body.dark-mode .theme-toggle:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.theme-icon {
	display: none;
}

.theme-icon.light-icon {
	display: inline;
}

body.dark-mode .theme-icon.light-icon {
	display: none;
}

body.dark-mode .theme-icon.dark-icon {
	display: inline;
}

/* 移动端菜单按钮 */
.mobile-menu-btn {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	position: relative;
	width: 32px;
	height: 24px;
}

.menu-icon {
	display: block;
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: var(--text-color);
	border-radius: 3px;
	transition: all var(--transition-normal);
	left: 0;
}

.menu-icon::before,
.menu-icon::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 3px;
	background-color: var(--text-color);
	border-radius: 3px;
	transition: all var(--transition-normal);
	left: 0;
}

.menu-icon::before {
	top: -8px;
}

.menu-icon::after {
	top: 8px;
}

/* 移动端导航菜单 */
.mobile-nav {
	display: none;
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	background: var(--card-color);
	border-bottom: 1px solid var(--border-color);
	z-index: 1000;
	box-shadow: var(--shadow-md);
}

.mobile-nav-menu {
	list-style: none;
	margin: 0;
	padding: 16px 0;
}

.mobile-nav-link {
	display: block;
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
	padding: 12px 24px;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.mobile-nav-link:hover,
.mobile-nav-link.active {
	background-color: rgba(0, 0, 0, 0.03);
	color: var(--primary-color);
}

body.dark-mode .mobile-nav-link:hover,
body.dark-mode .mobile-nav-link.active {
	background-color: rgba(255, 255, 255, 0.05);
}

/* 移动端导航显示状态 */
.mobile-nav.show {
	display: block;
	animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 个人简介卡片样式 */
.author-profile {
	display: flex;
	align-items: center;
	gap: 20px;
	background: rgba(255, 255, 255, 0.5);
	padding: 24px;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
	margin-bottom: 32px;
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

body.dark-mode .author-profile {
	background: rgba(69, 77, 85, 0.5);
}

.author-profile:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.author-avatar {
	flex-shrink: 0;
}

.avatar-placeholder {
	width: 80px;
	height: 80px;
	border-radius: var(--border-radius-full);
	background: var(--primary-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 1.2rem;
	box-shadow: 0 4px 12px rgba(79, 172, 254, 0.3);
}

.author-info {
	flex: 1;
	text-align: left;
}

.author-info h3 {
	margin-bottom: 8px;
	color: var(--secondary-color);
}

.author-info p {
	margin: 0 0 16px 0;
	font-size: 1rem;
	color: var(--text-secondary);
	max-width: 100%;
}

.author-social {
	display: flex;
	gap: 12px;
}

.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--border-radius-full);
	background-color: rgba(0, 0, 0, 0.05);
	color: var(--text-color);
	text-decoration: none;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
}

body.dark-mode .social-link {
	background-color: rgba(255, 255, 255, 0.08);
}

.social-link:hover {
	background-color: var(--primary-color);
	color: white;
	transform: translateY(-2px);
}

.social-icon {
	font-size: 1rem;
}

/* ========================\n   博客特性区域样式\n======================== */
.blog-features {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--border-color);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.feature-item {
	flex: 1 1 280px;
	background: rgba(250, 250, 250, 0.7);
	padding: 20px;
	border-radius: var(--border-radius-small);
	transition: transform 0.2s, box-shadow 0.2s;
	border: 1px solid var(--border-color);
}

.feature-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-sm);
}

.feature-item h3 {
	color: var(--primary-color);
	font-size: 1.2rem;
	margin-bottom: 10px;
}

.feature-item p {
	font-size: 1rem;
	margin: 0;
	color: var(--text-light);
}

/* ========================\n   博客文章预览样式\n======================== */
.latest-posts {
	margin-top: 40px;
	padding-top: 30px;
	border-top: 1px solid var(--border-color);
}

.latest-posts h3 {
	margin-bottom: 24px;
	color: var(--secondary-color);
	position: relative;
	display: inline-block;
}

.latest-posts h3::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--primary-gradient);
	border-radius: 3px;
}

.post-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.post-card {
	background: var(--card-color);
	border-radius: var(--border-radius-small);
	border: 1px solid var(--border-color);
	padding: 20px;
	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-md);
}

.post-card-header h4 {
	margin: 0 0 12px 0;
	font-size: 1.2rem;
}

.post-card-header a {
	color: var(--secondary-color);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.post-card-header a:hover {
	color: var(--primary-color);
}

.post-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 0.85rem;
	color: var(--text-light);
}

.post-date,
.post-category,
.post-read-time {
	display: flex;
	align-items: center;
	gap: 4px;
}

.post-card-excerpt p {
	margin: 0 0 16px 0;
	font-size: 0.95rem;
	color: var(--text-secondary);
	line-height: 1.6;
}

.post-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transition-fast);
}

.post-card-link:hover {
	color: var(--secondary-color);
}

.post-card-link::after {
	content: '→';
	transition: transform var(--transition-fast);
}

.post-card-link:hover::after {
	transform: translateX(3px);
}

/* ========================\n   错误页面样式\n======================== */
.error-page {
	max-width: 600px;
}

.error-page::before {
	background: var(--error-gradient);
}

.error-code {
	font-size: 5rem;
	font-weight: 800;
	color: var(--error-color);
	margin-bottom: 16px;
	line-height: 1;
	animation: bounceIn 0.6s ease-out;
}

.recommended-links {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
}

.recommended-links h3 {
	font-size: 1.1rem;
	margin-bottom: 15px;
	color: var(--text-light);
}

.recommended-link {
	color: var(--primary-color);
	text-decoration: none;
	margin: 0 10px;
	transition: color 0.2s;
}

.recommended-link:hover {
	color: var(--secondary-color);
	text-decoration: underline;
}

.link-separator {
	color: var(--text-light);
}

/* 新动画：弹跳效果 */
@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(0.3);
	}
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	70% {
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ========================\n   全站统一页脚（含备案信息）\n======================== */
/* 固定在视口最底部的全宽备案栏 */
.site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #f8f9fa;
	border-top: 1px solid var(--border-color);
	padding: 12px 0;
	font-size: 0.85rem;
	color: var(--text-light);
	text-align: center;
	z-index: 1000;
	/* 确保不被其他内容遮挡 */
	box-shadow: var(--shadow-sm);
}

.footer-content {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 20px;
	/* 防止文字贴边 */
}

.icp-info {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	line-height: 1.5;
}

.icp-info img {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.icp-info a {
	color: #5d8af5 !important;
	text-decoration: none;
	transition: color 0.2s;
}

.icp-info a:hover {
	color: #2a5bd6 !important;
	text-decoration: underline;
}

/* ========================\n   响应式适配（平板）\n======================== */
@media (max-width: 992px) {
	.nav-menu {
		gap: 16px;
	}
	
	.post-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ========================\n   响应式适配（移动端）\n======================== */
@media (max-width: 768px) {
	/* 隐藏桌面导航，显示移动端菜单按钮 */
	.mobile-menu-btn {
		display: block;
	}
	
	/* 调整头部内容 */
	.header-content {
		padding: 12px 16px;
	}
	
	.main-container {
		padding: 80px 15px 20px;
	}
	
	.content-card {
		padding: 30px 20px;
		border-radius: var(--border-radius-small);
	}
	
	/* 调整字体大小 */
	.content-card h1 {
		font-size: 1.8rem;
	}
	
	.content-card h2 {
		font-size: 1.5rem;
	}
	
	.content-card h3 {
		font-size: 1.2rem;
	}

	.content-card p {
		font-size: 1rem;
	}
	
	/* 博客特性样式 */
	.blog-features {
		flex-direction: column;
		gap: 15px;
	}
	
	.feature-item {
		flex: 1 1 100%;
	}
	
	/* 按钮样式 */
	.btn {
		padding: 10px 24px;
		font-size: 1rem;
		width: 100%;
		max-width: 200px;
	}
	
	/* 页脚样式 */
	.icp-info {
		flex-direction: column;
		gap: 6px;
	}
	
	/* 错误页面样式 */
	.error-code {
		font-size: 3rem;
	}
	
	.recommended-links {
		text-align: center;
	}
	
	.recommended-link {
		display: block;
		margin: 8px 0;
	}
	
	.link-separator {
		display: none;
	}
}

@media (max-width: 480px) {
	.content-card h1 {
		font-size: 1.6rem;
	}
	
	.error-code {
		font-size: 2.5rem;
	}
	
	.site-footer {
		font-size: 0.8rem;
		padding: 8px 0;
	}
}
/* 以下是新页面需要的CSS样式，添加到现有CSS文件末尾 */

/* ========================\n   关于我页面样式\n======================== */
.about-section {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 40px;
	padding: 20px;
	background: var(--card-color);
	border-radius: var(--border-radius-large);
	box-shadow: var(--shadow-sm);
}

.about-avatar {
	flex-shrink: 0;
}

.avatar-placeholder.large {
	width: 120px;
	height: 120px;
	font-size: 1.8rem;
	font-weight: bold;
}

.about-bio h2 {
	margin-top: 0;
	margin-bottom: 15px;
	color: var(--primary-color);
}

.about-bio p {
	margin-bottom: 15px;
	line-height: 1.6;
}

/* 技能部分样式 */
.skills-section {
	margin-bottom: 40px;
}

.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 20px;
}

.skill-category {
	background: var(--card-color);
	padding: 25px;
	border-radius: var(--border-radius-large);
	box-shadow: var(--shadow-sm);
}

.skill-category h3 {
	margin-top: 0;
	margin-bottom: 20px;
	color: var(--primary-color);
}

.skill-item {
	margin-bottom: 15px;
}

.skill-name {
	display: block;
	margin-bottom: 5px;
	font-weight: 500;
}

.skill-progress {
	height: 8px;
	background: var(--bg-secondary);
	border-radius: 4px;
	overflow: hidden;
}

.skill-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
	border-radius: 4px;
	transition: width 1s ease-in-out;
}

/* 时间线样式 */
.timeline-section {
	margin-bottom: 40px;
}

.timeline {
	position: relative;
	padding-left: 30px;
}

.timeline::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 2px;
	background: var(--primary-color);
}

.timeline-item {
	position: relative;
	margin-bottom: 30px;
	padding-bottom: 30px;
}

.timeline-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

.timeline-item::before {
	content: '';
	position: absolute;
	left: -35px;
	top: 5px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary-color);
	border: 3px solid var(--bg-color);
}

.timeline-date {
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 10px;
}

.timeline-company {
	color: var(--text-secondary);
	font-size: 0.9rem;
	margin-bottom: 8px;
}

/* 教育背景样式 */
.education-section {
	margin-bottom: 40px;
}

.education-item {
	background: var(--card-color);
	padding: 25px;
	border-radius: var(--border-radius-large);
	box-shadow: var(--shadow-sm);
}

.education-school {
	color: var(--primary-color);
	margin-bottom: 5px;
}

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

/* 兴趣爱好样式 */
.hobbies-section {
	margin-bottom: 40px;
}

.hobbies-list {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 20px;
}

.hobby-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: var(--card-color);
	border-radius: var(--border-radius-full);
	font-size: 1rem;
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-fast);
}

.hobby-item:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.hobby-icon {
	font-size: 1.2rem;
}

/* 社交媒体链接样式 */
.social-section {
	text-align: center;
}

.social-links {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.social-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: var(--card-color);
	color: var(--text-color);
	text-decoration: none;
	border-radius: var(--border-radius-full);
	transition: all var(--transition-fast);
	box-shadow: var(--shadow-sm);
}

.social-button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	background: var(--primary-color);
	color: white;
}

/* ========================\n   博客列表页面样式\n======================== */
.blog-filter {
	background: var(--card-color);
	padding: 20px;
	border-radius: var(--border-radius-large);
	margin-bottom: 30px;
	box-shadow: var(--shadow-sm);
}

.search