/*
Theme Name: 家园
Description: 一个简洁优雅的博客主题，专为独立博客玩家设计。支持单栏布局、主题色定制、黑暗模式切换、TOC 目录导航和可定制的布局设置。防闪白优化，左对齐头部布局，无分页首页设计，紧凑容器布局，简洁链接导航。
Author: WordPress Expert
Version: 1.0.1
Text Domain: jiayuan
*/

/* CSS Variables for Theme Customization */
:root {
  /* Light Mode Colors */
  --primary-color: #0f5f0f;
  --primary-hover: #0a4a0a;
  --text-color: #1f2937;
  --text-secondary: #6b7280;
  --background-color: #ffffff;
  --background-secondary: #f9fafb;
  --border-color: #e5e7eb;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* Spacing */
  --container-max-width: 1200px;
  --content-width: 600px;
  --sidebar-width: 250px;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.75rem;
  --spacing-xxl: 2rem;
  
  /* Border Radius */
  --border-radius: 0.5rem;
  --border-radius-lg: 1rem;
}

/* Dark Mode Colors */
[data-theme="dark"] {
  --primary-color: #1a8a1a;
  --primary-hover: #0f5f0f;
  --text-color: #f9fafb;
  --text-secondary: #d1d5db;
  --background-color: #111827;
  --background-secondary: #1f2937;
  --border-color: #374151;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* 黑暗模式下的分页器优化 */
[data-theme="dark"] .pagination a,
[data-theme="dark"] .pagination span {
  color: var(--text-secondary);
}

[data-theme="dark"] .pagination .prev,
[data-theme="dark"] .pagination .next {
  color: var(--text-color);
}

[data-theme="dark"] .pagination a:hover,
[data-theme="dark"] .pagination .prev:hover,
[data-theme="dark"] .pagination .next:hover {
  color: var(--primary-color);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* 防止主题切换时的闪白 */
  color-scheme: light dark;
}

/* 确保在主题加载前有合适的背景色 */
html {
  background-color: #ffffff;
}

html[data-theme="dark"] {
  background-color: #111827;
  color-scheme: dark;
}

html[data-theme="light"] {
  background-color: #ffffff;
  color-scheme: light;
}

body {
  font-family: var(--font-family);
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--background-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.site-content {
  margin-top: 32px;
}

/* Container */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  width: 100%;
  overflow-wrap: break-word;
}

/* 三栏布局容器 */
.three-column-layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
}

/* 左侧边栏 */
.sidebar-left {
  position: sticky;
  top: var(--spacing-lg);
  height: fit-content;
  width: 250px;
  flex-shrink: 0;
}

/* 中间内容区域 */
.content-main {
  flex: 1;
  width: 600px;
  padding: var(--spacing-xxl) 0;
}

/* 右侧边栏 */
.sidebar-right {
  position: sticky;
  top: var(--spacing-lg);
  height: fit-content;
  width: 250px;
  flex-shrink: 0;
}

/* 侧边栏通用样式 */
.sidebar-widget {
  /* background: var(--background-secondary); */
  /* border: 1px solid var(--border-color); */
  /* border-radius: var(--border-radius); */
  /* padding: var(--spacing-md); */
  margin-bottom: var(--spacing-lg);
}

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

.sidebar-widget h3 {
  margin: 0 0 var(--spacing-md) 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

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

.sidebar-widget li {
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-widget li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

[data-theme="dark"] .sidebar-widget li {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.sidebar-widget a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
}

.sidebar-widget a:hover {
  color: var(--primary-color);
}

/* 占位符样式 */
.placeholder-widget {
  background: var(--background-secondary);
  border: 2px dashed var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.placeholder-widget::before {
  content: '📝';
  display: block;
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
}

/* 侧边栏小工具样式增强 */
.sidebar-widget.widget_pages ul,
.sidebar-widget.widget_categories ul,
.sidebar-widget.widget_archive ul,
.sidebar-widget.widget_meta ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-widget.widget_pages li,
.sidebar-widget.widget_categories li,
.sidebar-widget.widget_archive li,
.sidebar-widget.widget_meta li {
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-widget.widget_pages li:last-child,
.sidebar-widget.widget_categories li:last-child,
.sidebar-widget.widget_archive li:last-child,
.sidebar-widget.widget_meta li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

[data-theme="dark"] .sidebar-widget.widget_pages li,
[data-theme="dark"] .sidebar-widget.widget_categories li,
[data-theme="dark"] .sidebar-widget.widget_archive li,
[data-theme="dark"] .sidebar-widget.widget_meta li {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.sidebar-widget.widget_pages a,
.sidebar-widget.widget_categories a,
.sidebar-widget.widget_archive a,
.sidebar-widget.widget_meta a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
  display: block;
  padding: var(--spacing-xs) 0;
}

.sidebar-widget.widget_pages a:hover,
.sidebar-widget.widget_categories a:hover,
.sidebar-widget.widget_archive a:hover,
.sidebar-widget.widget_meta a:hover {
  color: var(--primary-color);
}

/* 分类小工具特殊样式 */
.sidebar-widget.widget_categories .cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sidebar-widget.widget_categories .cat-item a {
  flex: 1;
}

.sidebar-widget.widget_categories .cat-item .count {
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.2rem;
  margin-left: var(--spacing-xs);
}

/* 自定义分类列表样式 - 两端对齐 */
.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-item {
  margin-bottom: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.category-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

[data-theme="dark"] .category-item {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.category-item a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
}

.category-item a:hover {
  color: var(--primary-color);
}

.category-count {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-left: var(--spacing-xs);
}

/* 标签云样式 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.tag-link {
  background: var(--background-color);
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.2rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.8rem;
  border: 1px solid var(--border-color);
  transition: all 0.3s ease;
}

.tag-link:hover {
  color: white;
  border-color: var(--primary-color);
}

/* 网站信息小工具样式 */
.site-info-widget .site-info-content {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.site-info-widget .site-info-content p {
  margin-bottom: var(--spacing-sm);
}

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

.site-info-widget .site-info-content a:hover {
  text-decoration: underline;
}

.site-info-widget .footer-navigation {
  margin-top: var(--spacing-sm);
}

.site-info-widget .footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-info-widget .footer-links li {
  margin-bottom: var(--spacing-xs);
  border-bottom: none;
  padding-bottom: 0;
}

.site-info-widget .footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.site-info-widget .footer-links a:hover {
  color: var(--primary-color);
}

/* 左侧栏中的网站标题样式 */
.site-header-widget .site-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.site-header-widget .site-title a {
  text-decoration: none;
  color: inherit;
}

.site-header-widget .site-title:hover,
.site-header-widget .site-title a:hover {
  color: var(--primary-color);
}

.site-header-widget .site-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
  display: block;
}

/* 左侧栏中的导航样式 */
.navigation-widget .nav-menu {
  list-style: none;
  margin: 0 0 var(--spacing-md) 0;
  padding: 0;
}

.navigation-widget .nav-menu li {
  margin-bottom: var(--spacing-xs);
  border-bottom: none;
  padding-bottom: 0;
}

.navigation-widget .nav-menu a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  display: block;
  padding: var(--spacing-xs) 0;
}

.navigation-widget .nav-menu a:hover {
  color: var(--primary-color);
}

/* 左侧栏中的主题切换按钮 */
.theme-toggle-container {
  margin-top: var(--spacing-md);
  text-align: center;
}

.navigation-widget .theme-toggle {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.navigation-widget .theme-toggle:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* Header */
.site-header {
  background-color: var(--background-color);
  /* 移除下边框和滚动悬浮效果 */
  position: static;
  z-index: 100;
}

.header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: var(--spacing-lg) 0;
}

.site-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
  display: block;
}

.site-title a {
  text-decoration: none;
  color: inherit;
}

.site-title:hover,
.site-title a:hover {
  color: var(--primary-color);
}

.site-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-md);
  display: block;
}

/* Navigation */
.site-navigation {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: var(--spacing-md);
  margin: 0;
  padding: 0;
  margin-right: auto;
}

.nav-menu a {
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--spacing-xs) 0;
  transition: color 0.3s ease;
  font-weight: 400;
}

.nav-menu a:hover,
.nav-menu a.current {
  color: var(--primary-color);
}

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  margin-left: var(--spacing-md);
}

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

/* Main Content */
.site-main {
  /* padding: var(--spacing-lg) 0; */
}

/* Posts */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-item {
  margin-bottom: 0;
}

.post-list-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.post-date {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 400;
  white-space: nowrap;
  min-width: 80px;
  font-family: var(--font-mono);
}

.post-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  flex: 1;
}

.post-title a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  padding: var(--spacing-xs) 0;
}

.post-title a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* 搜索结果中的关键词高亮 */
.post-title mark {
  background-color: var(--primary-color);
  color: white;
  padding: 0.1em 0.2em;
  border-radius: 0.2em;
  font-weight: inherit;
}

[data-theme="dark"] .post-title mark {
  background-color: var(--primary-color);
  color: white;
}

/* 移动端适配 - 仅限列表页 */
@media (max-width: 768px) {
  .post-list .post-list-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .post-list .post-date {
    font-size: 0.8rem;
    min-width: auto;
  }
  
  .post-list .post-title {
    font-size: 0.95rem;
  }
  
  /* 单篇文章移动端样式 */
  .single-post .post-title,
  .page .post-title {
    font-size: 1.75rem;
  }
  
  .single-post .post-meta,
  .page .post-meta {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
  }
}

/* Single Post */
.single-post {
  max-width: none;
}

/* 单篇文章页面的标题和元数据样式 */
.single-post .post-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.single-post .post-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

.single-post .post-meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: wrap;
}

.single-post .post-meta a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.single-post .post-meta a:hover {
  color: var(--primary-color);
}

/* 确保列表页的简洁样式不影响单篇文章和页面 */
.single-post .post-list-row,
.page .post-list-row {
  display: block;
}

.single-post .post-date,
.page .post-date {
  display: inline;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: inherit;
  min-width: auto;
  white-space: normal;
}

/* 页面样式也需要保护 */
.page .post-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.page .post-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

.page .post-meta {
  color: var(--text-secondary);
  font-size: 0.9rem;
  display: flex;
  gap: var(--spacing-md);
  align-items: center;
  flex-wrap: wrap;
}

.post-content {
  line-height: 1.8;
  color: var(--text-color);
  font-size: 1.1rem;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
  line-height: 1.3;
  color: var(--text-color);
}

.post-content h1 { font-size: 2rem; }
.post-content h2 { font-size: 1.75rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }

.post-content p {
  margin-bottom: var(--spacing-sm);
}

.post-content a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease;
}

.post-content a:hover {
  border-bottom-color: var(--primary-color);
}

.post-content blockquote {
  border-left: 4px solid var(--primary-color);
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--background-secondary);
}

.post-content code {
  background-color: var(--background-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.post-content pre {
  background-color: var(--background-secondary);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  overflow-x: auto;
  margin: var(--spacing-sm) 0;
}

.post-content pre code {
  background: none;
  padding: 0;
}

/* Footer */
.site-footer {
  color: var(--text-secondary);
  padding: var(--spacing-lg) 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.footer-links {
  display: flex;
  gap: var(--spacing-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--primary-color);
}

/* Pagination - 简洁的上一页下一页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md) 0;
}

/* 隐藏 WordPress 自动生成的分页标题 */
.pagination h2,
.pagination .screen-reader-text,
.posts-navigation h2,
.posts-navigation .screen-reader-text,
nav[aria-label] h2,
.navigation h2 {
  display: none !important;
}

/* 确保分页容器没有多余的标题 */
.nav-links h2 {
  display: none !important;
}

.pagination .nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* 分页链接样式 - 文字按钮 */
.pagination a,
.pagination span {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  text-decoration: none;
  color: var(--text-secondary);
  background: none;
  border: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
  font-weight: 400;
}

/* 隐藏数字分页，只显示上一页下一页 */
.pagination .page-numbers {
  display: none;
}

.pagination .prev,
.pagination .next {
  display: inline-block !important;
}

.pagination a:hover {
  color: var(--primary-color);
}

/* 当前页面不显示（因为我们只显示上一页下一页） */
.pagination .current,
.pagination .page-numbers.current {
  display: none;
}

/* 上一页下一页按钮特殊样式 */
.pagination .prev,
.pagination .next {
  padding: var(--spacing-xs) var(--spacing-sm);
  color: var(--text-color);
  font-weight: 500;
}

.pagination .prev:hover,
.pagination .next:hover {
  color: var(--primary-color);
}

/* 占位符，确保左右对齐 */
.pagination .nav-links::before,
.pagination .nav-links::after {
  content: '';
  flex: 0 0 auto;
}

/* 首页特殊样式 */
.sticky-posts {
  margin-bottom: var(--spacing-lg);
}

.sticky-posts-title,
.recent-posts-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

.sticky-post {
  position: relative;
}

.sticky-post::before {
  content: '📌';
  position: absolute;
  left: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
}

.recent-posts {
  margin-bottom: var(--spacing-lg);
}

.more-posts-info {
  padding: var(--spacing-lg) 0;
  border-top: 1px solid var(--border-color);
  margin-top: var(--spacing-lg);
}

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

.more-posts-text a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.more-posts-text a:hover {
  text-decoration: underline;
}

/* WordPress 默认分页导航 */
.posts-navigation,
.post-navigation {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.posts-navigation .nav-previous,
.posts-navigation .nav-next,
.post-navigation .nav-previous,
.post-navigation .nav-next {
  flex: 1;
  max-width: 48%;
}

.posts-navigation a,
.post-navigation a {
  display: block;
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--text-color);
  background: var(--background-secondary);
  transition: all 0.3s ease;
}

.posts-navigation a:hover,
.post-navigation a:hover {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.posts-navigation .nav-next {
  text-align: right;
}

/* 分页在移动端的适配 */
@media (max-width: 768px) {
  .pagination {
    padding: var(--spacing-sm) 0;
  }
  
  .pagination a,
  .pagination span {
    font-size: 0.8rem;
    padding: var(--spacing-xs);
  }
  
  .pagination .prev,
  .pagination .next {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.85rem;
  }
  
  .posts-navigation .nav-links,
  .post-navigation .nav-links {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .posts-navigation .nav-previous,
  .posts-navigation .nav-next,
  .post-navigation .nav-previous,
  .post-navigation .nav-next {
    max-width: 100%;
  }
  
  .posts-navigation .nav-next {
    text-align: left;
  }
}

/* 移动端三栏布局适配 */
@media (max-width: 768px) {
  .three-column-layout {
    display: block;
    padding: 0 0.75rem;
  }
  
  .sidebar-left,
  .sidebar-right {
    position: static;
    margin-bottom: 1.25rem;
    width: 100%;
  }
  
  .content-main {
    max-width: none;
  }
  
  .sidebar-widget {
    margin-bottom: 1rem;
  }
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .three-column-layout {
    gap: 1.25rem;
  }
  
  .sidebar-left,
  .sidebar-right {
    width: 200px;
  }
}

/* 大屏幕优化 */
@media (min-width: 1025px) {
  .three-column-layout {
    gap: var(--spacing-xl);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
  
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
  }
  
  .site-navigation {
    width: 100%;
    justify-content: space-between;
  }
  
  .nav-menu {
    gap: var(--spacing-sm);
  }
  
  .post-title {
    font-size: 1.5rem;
  }
  
  .post-meta {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  /* 确保图片不超出容器 */
  img {
    max-width: 100% !important;
    width: auto !important;
  }
  
  .post-content img {
    max-width: calc(100vw - 2 * var(--spacing-sm)) !important;
  }
}

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

.text-center {
  text-align: center;
}

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mb-5 { margin-bottom: var(--spacing-xl); }

/* Post Navigation */
.post-navigation {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--border-color);
}

.nav-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-lg);
}

.nav-previous,
.nav-next {
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
}

.nav-previous:hover,
.nav-next:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow);
}

.nav-previous a,
.nav-next a {
  text-decoration: none;
  color: var(--text-color);
  display: block;
}

.nav-next {
  text-align: right;
}

.nav-subtitle {
  display: block;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.nav-title {
  display: block;
  font-weight: 500;
  line-height: 1.4;
}

/* Code Copy Button */
.code-wrapper {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1;
}

.code-copy-btn:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.code-copy-btn.copied {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 40px;
  height: 40px;
  background: var(--primary-color);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  box-shadow: var(--shadow-lg);
}

.back-to-top:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
}

/* Post Thumbnail */
.post-thumbnail {
  margin: var(--spacing-lg) 0;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* 通用图片响应式处理 */
img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: var(--border-radius);
  box-sizing: border-box;
}

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--spacing-sm) auto;
  border-radius: var(--border-radius);
}

/* 图片容器 */
.wp-block-image,
.aligncenter,
.alignleft,
.alignright {
  max-width: 100%;
}

.aligncenter {
  text-align: center;
  margin: var(--spacing-md) auto;
}

.alignleft {
  float: left;
  margin: 0 var(--spacing-md) var(--spacing-sm) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--spacing-sm) var(--spacing-md);
}

/* Page Links (for multi-page posts) */
.page-links {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  text-align: center;
}

.page-links a {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin: 0 0.25rem;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.3s ease;
}

.page-links a:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* Back Link */
.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.back-link:hover {
  color: var(--primary-color);
}

/* Loading Animation */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid var(--border-color);
  border-radius: 50%;
  border-top-color: var(--primary-color);
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Image Lazy Loading */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

img.lazy.loaded {
  opacity: 1;
}

/* Search Form */
.search-form {
  display: flex;
  max-width: 400px;
  margin: var(--spacing-lg) 0;
}

.search-form input[type="search"] {
  flex: 1;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  font-size: 1rem;
  background: var(--background-color);
  color: var(--text-color);
}

.search-form button {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--primary-color);
  color: white;
  border: 1px solid var(--primary-color);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-form button:hover {
  background: var(--primary-hover);
}

/* Comment Styles */
.comments-area {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
}

.comments-title {
  margin-bottom: var(--spacing-md);
  font-size: 1.5rem;
  color: var(--text-color);
}

.comment-list {
  list-style: none;
  margin-bottom: var(--spacing-md);
  padding: 0;
}

.comment {
  list-style: none;
  margin-bottom: var(--spacing-md);
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
}

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

.comment-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* 第一行：头像和作者信息 */
.comment-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.comment-avatar img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.comment-author-info {
  flex: 1;
}

.comment-author-name {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-weight: 600;
}

.comment-author-name a {
  color: var(--text-color);
  text-decoration: none;
}

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

.author-badge {
  background: var(--primary-color);
  color: white;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 500;
}

/* 第二行：评论内容 */
.comment-content {
  line-height: 1.6;
  color: var(--text-color);
}

.comment-content p {
  margin-bottom: var(--spacing-sm);
}

.comment-content p:last-child {
  margin-bottom: 0;
}

.comment-awaiting-moderation {
  background: #fff3cd;
  color: #856404;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius);
  font-size: 0.9rem;
  margin-bottom: var(--spacing-sm);
}

/* 第三行：时间和回复按钮 */
.comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
}

.comment-metadata {
  color: var(--text-secondary);
}

.comment-metadata a {
  color: inherit;
  text-decoration: none;
}

.comment-metadata a:hover {
  color: var(--primary-color);
}

.comment-actions a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border: 1px solid var(--primary-color);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
}

.comment-actions a:hover {
  background: var(--primary-color);
  color: white;
}

.children {
  margin-top: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.children .comment {
  border-left: 2px solid var(--border-color);
  padding-left: var(--spacing-sm);
}

/* Comment Form */
.comment-form {
  margin-top: var(--spacing-md);
  background: var(--background-secondary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius);
}

.comment-form h3 {
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
}

.comment-form p {
  margin-bottom: var(--spacing-sm);
}

.comment-form label {
  display: block;
  margin-bottom: var(--spacing-xs);
  font-weight: 500;
  color: var(--text-color);
}

.required {
  color: #e74c3c;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-family: inherit;
  font-size: 1rem;
  background: var(--background-color);
  color: var(--text-color);
  transition: border-color 0.3s ease;
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

.comment-form textarea {
  min-height: 120px;
  resize: vertical;
}

.comment-form button {
  background: var(--primary-color);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.comment-form button:hover {
  background: var(--primary-hover);
}

.comment-notes {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.no-comments {
  text-align: center;
  color: var(--text-secondary);
  margin: var(--spacing-md) 0;
}

/* Comments Pagination */
.comment-navigation {
  margin: var(--spacing-md) 0;
  text-align: center;
}

.comment-navigation a {
  color: var(--primary-color);
  text-decoration: none;
  padding: var(--spacing-xs) var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin: 0 var(--spacing-xs);
  transition: all 0.3s ease;
}

.comment-navigation a:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* TOC 目录样式 */
.toc-container {
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin: var(--spacing-lg) 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--background-color);
  border-bottom: 1px solid var(--border-color);
}

.toc-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-color);
}

.toc-toggle {
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.3s ease;
}

.toc-toggle:hover {
  color: var(--primary-color);
}

.toc-nav {
  max-height: 400px;
  overflow-y: auto;
  transition: all 0.3s ease;
}

.toc-nav.collapsed {
  max-height: 0;
  overflow: hidden;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: var(--spacing-sm) 0;
}

.toc-list li {
  margin: 0;
}

.toc-sublist {
  list-style: none;
  margin: 0;
  padding-left: var(--spacing-md);
}

.toc-link {
  display: block;
  padding: var(--spacing-xs) var(--spacing-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  position: relative;
}

.toc-link:hover {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.05);
  border-left-color: var(--primary-color);
}

.toc-link.active {
  color: var(--primary-color);
  background: rgba(99, 102, 241, 0.1);
  border-left-color: var(--primary-color);
  font-weight: 500;
}

/* TOC 层级样式 */
.toc-link[data-level="1"] {
  font-weight: 600;
  font-size: 0.95rem;
}

.toc-link[data-level="2"] {
  padding-left: calc(var(--spacing-md) + var(--spacing-sm));
}

.toc-link[data-level="3"] {
  padding-left: calc(var(--spacing-md) + var(--spacing-md));
  font-size: 0.85rem;
}

.toc-link[data-level="4"] {
  padding-left: calc(var(--spacing-md) + var(--spacing-lg));
  font-size: 0.85rem;
}

.toc-link[data-level="5"],
.toc-link[data-level="6"] {
  padding-left: calc(var(--spacing-md) + var(--spacing-xl));
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* 黑暗模式下的 TOC 样式 */
[data-theme="dark"] .toc-container {
  background: var(--background-secondary);
  border-color: var(--border-color);
}

[data-theme="dark"] .toc-header {
  background: var(--background-color);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .toc-link:hover {
  background: rgba(129, 140, 248, 0.1);
  border-left-color: var(--primary-color);
}

[data-theme="dark"] .toc-link.active {
  background: rgba(129, 140, 248, 0.15);
  border-left-color: var(--primary-color);
}

/* TOC 在移动端的样式 */
@media (max-width: 768px) {
  .toc-container {
    margin: var(--spacing-md) 0;
  }
  
  .toc-header {
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .toc-header h4 {
    font-size: 0.9rem;
  }
  
  .toc-nav {
    max-height: 300px;
  }
  
  .toc-link {
    font-size: 0.85rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .toc-link[data-level="2"] {
    padding-left: calc(var(--spacing-sm) + var(--spacing-sm));
  }
  
  .toc-link[data-level="3"] {
    padding-left: calc(var(--spacing-sm) + var(--spacing-md));
  }
  
  .toc-link[data-level="4"] {
    padding-left: calc(var(--spacing-sm) + var(--spacing-lg));
  }
  
  .toc-link[data-level="5"],
  .toc-link[data-level="6"] {
    padding-left: calc(var(--spacing-sm) + var(--spacing-xl));
  }
}

/* 归档页面样式 */
.archive-page {
  max-width: none;
}

.archive-page .page-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.archive-page .page-title {
  font-size: 2rem;
  margin-bottom: var(--spacing-sm);
  color: var(--text-color);
}

.archive-page .page-description {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin: 0;
}

.archive-content {
  margin-bottom: var(--spacing-xl);
}

.archive-year-section {
  margin-bottom: var(--spacing-xl);
}

.archive-year-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-sm) 0;
  border-bottom: 2px solid var(--primary-color);
  display: inline-block;
}

.archive-month {
  margin-bottom: var(--spacing-lg);
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
}

.archive-month-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.post-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 400;
}

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

.archive-post-item {
  margin-bottom: var(--spacing-xs);
  padding: var(--spacing-xs) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.archive-post-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

[data-theme="dark"] .archive-post-item {
  border-bottom-color: rgba(255, 255, 255, 0.05);
}

.archive-post-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.archive-post-date {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: var(--font-mono);
  min-width: 35px;
  white-space: nowrap;
}

.archive-post-title {
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0;
  flex: 1;
}

.archive-post-title a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.archive-post-title a:hover {
  color: var(--primary-color);
}

.archive-post-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 80px;
}

.archive-post-category a {
  color: inherit;
  text-decoration: none;
}

.archive-post-category a:hover {
  color: var(--primary-color);
}

/* 统计信息样式 */
.archive-stats {
  background: var(--background-secondary);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.stats-summary h3 {
  margin-bottom: var(--spacing-md);
  color: var(--text-color);
  font-size: 1.2rem;
}

.stats-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-sm);
}

.stats-list li {
  color: var(--text-secondary);
  font-size: 0.95rem;
  padding: var(--spacing-xs) 0;
}

.stats-list strong {
  color: var(--primary-color);
  font-weight: 600;
}

/* 移动端归档页面适配 */
@media (max-width: 768px) {
  .archive-page .page-title {
    font-size: 1.5rem;
  }
  
  .archive-months {
    margin-left: 0;
  }
  
  .archive-month {
    padding: var(--spacing-sm);
  }
  
  .archive-post-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .archive-post-date {
    font-size: 0.8rem;
    min-width: auto;
  }
  
  .archive-post-title {
    font-size: 0.9rem;
  }
  
  .archive-post-meta {
    min-width: auto;
    font-size: 0.75rem;
  }
  
  .stats-list {
    grid-template-columns: 1fr;
  }
}

/* 时间线归档页面样式 */
.timeline-archive {
  max-width: none;
}

.timeline-archive .page-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
}

.timeline-year {
  margin-bottom: var(--spacing-lg);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.timeline-year-header {
  background: var(--background-secondary);
  padding: var(--spacing-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.timeline-year-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--primary-color);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.year-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.timeline-toggle {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--text-color);
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.timeline-toggle:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.timeline-posts {
  padding: var(--spacing-md);
}

.timeline-month {
  margin-bottom: var(--spacing-lg);
}

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

.timeline-month-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--border-color);
}

.timeline-month-posts {
  display: grid;
  gap: var(--spacing-sm);
}

.timeline-post {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  transition: background-color 0.3s ease;
}

.timeline-post:hover {
  background: rgba(0, 0, 0, 0.02);
}

[data-theme="dark"] .timeline-post:hover {
  background: rgba(255, 255, 255, 0.05);
}

.timeline-post-date {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-family: var(--font-mono);
  min-width: 35px;
  white-space: nowrap;
}

.timeline-post-content {
  flex: 1;
}

.timeline-post-title {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.timeline-post-title a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.timeline-post-title a:hover {
  color: var(--primary-color);
}

.timeline-post-meta {
  display: flex;
  gap: var(--spacing-sm);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.timeline-post-category,
.timeline-post-comments {
  background: var(--background-secondary);
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  font-size: 0.75rem;
}

/* 快速导航 */
.timeline-navigation {
  position: sticky;
  top: var(--spacing-lg);
  background: var(--background-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.timeline-navigation h3 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: 1rem;
  color: var(--text-color);
}

.year-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
}

.year-link {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  color: var(--text-color);
  text-decoration: none;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}

.year-link:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

/* 时间线移动端适配 */
@media (max-width: 768px) {
  .timeline-year-header {
    padding: var(--spacing-sm);
  }
  
  .timeline-year-title {
    font-size: 1.1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .timeline-posts {
    padding: var(--spacing-sm);
  }
  
  .timeline-post {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .timeline-post-date {
    font-size: 0.8rem;
    min-width: auto;
  }
  
  .timeline-post-title {
    font-size: 0.9rem;
  }
  
  .timeline-navigation {
    position: static;
    margin-top: var(--spacing-lg);
  }
  
  .year-links {
    justify-content: center;
  }
}

/* Mobile Responsive Updates */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-sm);
    overflow-x: hidden;
  }
  
  /* Header移动端样式 */
  .header-content {
    padding: var(--spacing-md) 0;
  }
  
  .site-title {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
  }
  
  .site-description {
    font-size: 0.8rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .nav-menu {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }
  
  .theme-toggle {
    margin-left: var(--spacing-sm);
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
  
  /* 移动端首页样式 */
  .sticky-posts-title,
  .recent-posts-title {
    font-size: 1rem;
  }
  
  .sticky-post::before {
    left: -1.2rem;
    font-size: 0.7rem;
  }
  
  .more-posts-info {
    padding: var(--spacing-md) 0;
  }
  
  .more-posts-text {
    font-size: 0.8rem;
  }
  
  .nav-links {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .nav-next {
    text-align: left;
  }
  
  .back-to-top {
    bottom: var(--spacing-md);
    right: var(--spacing-md);
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  
  .code-copy-btn {
    position: static;
    display: block;
    margin-top: var(--spacing-xs);
    margin-left: auto;
    width: fit-content;
  }
  
  .search-form {
    flex-direction: column;
  }
  
  .search-form input[type="search"] {
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xs);
  }
  
  .search-form button {
    border-radius: var(--border-radius);
  }
  
  /* 移动端图片特别处理 */
  img {
    max-width: calc(100vw - 2 * var(--spacing-sm));
    width: auto !important;
  }
  
  .post-content img {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* 移动端评论区适配 */
  .comment-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .children {
    padding-left: var(--spacing-md);
  }
  
  .comment-form {
    padding: var(--spacing-md);
  }
}