/* ==================== 全局字体设置 ==================== */
:root {
  --bg-primary: #faf9f6;
  --bg-secondary: #f5f3ef;
  --bg-tertiary: #efebe5;
  --text-primary: #4a4a4a;
  --text-secondary: #6b6b6b;
  --accent-color: #d4a574;
  --accent-soft: #e8c4a0;
  --border-soft: rgba(212, 165, 116, 0.2);
  --shadow-soft: rgba(0, 0, 0, 0.05);
  --code-bg-light: #f8f7f2;
  --code-bg-dark: #3a3a3a;

  /* 柔和渐变 */
  --gradient-soft: linear-gradient(135deg, #faf9f6 0%, #f5f3ef 50%, #efebe5 100%);
  --gradient-accent: linear-gradient(135deg, #e8c4a0 0%, #d4a574 100%);
}

/* 使用系统字体 */
:root {
  --font-handwriting: 'KaiTi', 'STKaiti', '楷体', cursive;
  --font-title: '微软雅黑', 'KaiTi', 'STKaiti', '楷体', sans-serif;
  --font-body: '微软雅黑', 'KaiTi', 'STKaiti', '楷体', sans-serif;
  --font-code: 'Cascadia Code', 'Consolas', 'Monaco', 'Courier New', monospace;
}

html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
}

/* 隐藏页面加载动画的初始状态 */
.page-loader {
  opacity: 0;
  visibility: hidden;
}

/* 页面进入动画 - 使用margin代替transform，避免影响fixed定位的子元素 */
.fade-in-section {
  opacity: 0;
  margin-top: -30px;
  transition: opacity 0.6s ease-out, margin-top 0.6s ease-out;
}

.fade-in-section.visible {
  opacity: 1;
  margin-top: 0;
}

/* 延迟动画 */
.fade-in-section.delay-1 { transition-delay: 0.1s; }
.fade-in-section.delay-2 { transition-delay: 0.2s; }
.fade-in-section.delay-3 { transition-delay: 0.3s; }
.fade-in-section.delay-4 { transition-delay: 0.4s; }
.fade-in-section.delay-5 { transition-delay: 0.5s; }

body {
  font-family: var(--font-body);
  background: var(--gradient-soft);
  color: var(--text-primary);
  overflow: hidden !important;
}

/* 标题字体 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--text-primary);
}

/* ==================== 过场动画（已移除加载动画，改用进入动画） ==================== */

/* ==================== 布局系统 ==================== */
#container {
  display: flex;
  height: 100vh;
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

/* 头部导航 */
header#top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  z-index: 1000;
  box-shadow: 0 2px 10px var(--shadow-soft);
}

header#top-nav .logo {
  font-family: var(--font-handwriting);
  font-size: 1.8rem;
  color: var(--text-primary);
  text-decoration: none;
}

header#top-nav nav ul {
  display: flex;
  list-style: none;
  gap: 30px;
  margin: 0;
  padding: 0;
}

header#top-nav nav ul li a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 1.1rem;
  position: relative;
  padding: 5px 0;
  transition: color 0.3s ease;
}

header#top-nav nav ul li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-accent);
  transition: width 0.3s ease;
}

header#top-nav nav ul li a:hover::after {
  width: 100%;
}

header#top-nav nav ul li a:hover {
  color: var(--accent-color);
}

/* 主题切换按钮 */
.theme-toggle {
  cursor: pointer;
  padding: 8px 15px;
  border-radius: 20px;
  background: var(--gradient-accent);
  color: white;
  border: none;
  font-family: 'KaiTi', '微软雅黑', sans-serif;
  font-size: 1rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px var(--shadow-soft);
}

/* 主题切换动画 */
.theme-toggle.switching {
  transform: rotateY(180deg);
}

.dark .theme-toggle {
  background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%);
}

/* 左侧边栏 */
aside.left-sidebar {
  position: fixed;
  top: 70px;
  left: 0;
  width: 250px;
  height: calc(100vh - 70px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border-soft);
  padding: 30px 20px;
  overflow-y: auto;
  z-index: 900;
  box-sizing: border-box;
}

.left-sidebar .profile-card {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 15px;
  box-shadow: 0 4px 15px var(--shadow-soft);
  width: 100%;
  box-sizing: border-box;
}

.left-sidebar .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent-soft);
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}

.left-sidebar .avatar:hover {
  transform: rotate(360deg);
}

.left-sidebar .author-name {
  font-size: 1.4rem;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.left-sidebar .author-bio {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 15px;
  line-height: 1.6;
}

.left-sidebar .social-links {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.left-sidebar .social-links a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.left-sidebar .social-links a:hover {
  transform: scale(1.1);
}

/* 统计信息 */
.left-sidebar .stats {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
}

.left-sidebar .stat-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
}

.left-sidebar .stat-item:last-child {
  border-bottom: none;
}

.left-sidebar .stat-label {
  color: var(--text-secondary);
}

.left-sidebar .stat-value {
  color: var(--accent-color);
  font-weight: 600;
}

/* 快捷链接 */
.left-sidebar .quick-links h3 {
  font-size: 1.2rem;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.left-sidebar .quick-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left-sidebar .quick-links ul li {
  margin-bottom: 10px;
}

.left-sidebar .quick-links ul li a {
  text-decoration: none;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.left-sidebar .quick-links ul li a:hover {
  background: rgba(212, 165, 116, 0.1);
  color: var(--accent-color);
}

/* 右侧边栏 */
aside.right-sidebar {
  position: fixed;
  top: 70px;
  right: 0;
  width: 250px;
  height: calc(100vh - 70px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--border-soft);
  padding: 30px 20px;
  overflow-y: auto;
  z-index: 900;
  box-sizing: border-box;
}

.right-sidebar h3 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: var(--text-primary);
  border-bottom: 2px solid var(--accent-soft);
  padding-bottom: 10px;
}

.right-sidebar .random-post {
  padding: 15px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 10px var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.right-sidebar .random-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 15px var(--shadow-soft);
}

.right-sidebar .random-post h4 {
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.right-sidebar .random-post h4 a {
  color: var(--text-primary);
  text-decoration: none;
}

.right-sidebar .random-post h4 a:hover {
  text-decoration: underline;
}

.right-sidebar .random-post .meta {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 主内容区域 - 扩大宽度，占据中间所有空间 */
main#main-content {
  margin-left: 250px;
  margin-right: 250px;
  margin-top: 70px;
  height: calc(100vh - 70px);
  background: rgba(255, 255, 255, 0.85);
  overflow-y: auto;
  padding: 40px 50px;
  position: relative;
  z-index: 800;
  box-sizing: border-box;
  flex: 1;
  width: calc(100% - 500px);
}

/* 左侧边栏 - 缩小 */
aside.left-sidebar {
  position: fixed;
  top: 70px;
  left: 0;
  width: 250px;
  height: calc(100vh - 70px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border-soft);
  padding: 30px 20px;
  overflow-y: auto;
  z-index: 900;
  box-sizing: border-box;
}

/* 右侧边栏 - 缩小 */
aside.right-sidebar {
  position: fixed;
  top: 70px;
  right: 0;
  width: 250px;
  height: calc(100vh - 70px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--border-soft);
  padding: 30px 20px;
  overflow-y: auto;
  z-index: 900;
  box-sizing: border-box;
}

/* 左侧边栏 - 缩小 */
aside.left-sidebar {
  position: fixed;
  top: 70px;
  left: 0;
  width: 250px;
  height: calc(100vh - 70px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border-soft);
  padding: 30px 20px;
  overflow-y: auto;
  z-index: 900;
}

/* 右侧边栏 - 缩小 */
aside.right-sidebar {
  position: fixed;
  top: 70px;
  right: 0;
  width: 250px;
  height: calc(100vh - 70px);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border-left: 1px solid var(--border-soft);
  padding: 30px 20px;
  overflow-y: auto;
  z-index: 900;
}

/* 文章卡片 - 竖排显示 */
main#main-content .article-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px var(--shadow-soft);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--border-soft);
  width: 100%;
  box-sizing: border-box;
}

main#main-content .article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px var(--shadow-soft);
}

main#main-content .article-card h2 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: var(--text-primary);
}

main#main-content .article-card h2 a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;
}

main#main-content .article-card h2 a:hover {
  color: var(--accent-color);
}

main#main-content .article-card .summary {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
}

/* 查看更多按钮 */
main#main-content .article-card .read-more-btn {
  margin-bottom: 20px;
  text-align: right;
}

.btn-small {
  display: inline-block;
  padding: 8px 20px;
  background: var(--gradient-accent);
  color: white;
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.btn-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow-soft);
}

main#main-content .article-card .meta {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-accent);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* ==================== 暗黑模式 ==================== */
.dark {
  --bg-primary: #2d2d2d;
  --bg-secondary: #3d3d3d;
  --bg-tertiary: #4d4d4d;
  --text-primary: #e8e8e8;
  --text-secondary: #b8b8b8;
  --accent-color: #c4a574;
  --accent-soft: #d8c4a0;
  --border-soft: rgba(196, 165, 116, 0.3);
  --shadow-soft: rgba(0, 0, 0, 0.3);
  
  --gradient-soft: linear-gradient(135deg, #2d2d2d 0%, #3d3d3d 50%, #4d4d4d 100%);
  --gradient-accent: linear-gradient(135deg, #d8c4a0 0%, #c4a574 100%);
}

.dark body {
  background: var(--gradient-soft);
  color: var(--text-primary);
}

.dark header#top-nav {
  background: rgba(45, 45, 45, 0.9);
  border-bottom: 1px solid var(--border-soft);
}

.dark aside.left-sidebar,
.dark aside.right-sidebar,
.dark main#main-content {
  background: rgba(45, 45, 45, 0.7);
}

.dark .left-sidebar .profile-card,
.dark .left-sidebar .stats,
.dark .right-sidebar .random-post,
.dark main#main-content .article-card {
  background: rgba(61, 61, 61, 0.6);
}

.dark .right-sidebar .random-post h4 a {
  color: var(--text-primary);
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 1400px) {
  aside.left-sidebar,
  aside.right-sidebar {
    width: 240px;
  }

  main#main-content {
    margin-left: 240px;
    margin-right: 240px;
  }
}

@media (max-width: 1100px) {
  aside.right-sidebar {
    display: none;
  }

  main#main-content {
    margin-right: 0;
  }
}

@media (max-width: 768px) {
  aside.left-sidebar {
    display: none;
  }

  main#main-content {
    margin-left: 0;
    margin-top: 70px;
    padding: 20px;
  }

  header#top-nav {
    padding: 0 15px;
  }

  header#top-nav nav {
    display: none;
  }
}

/* ==================== 页面特定样式 ==================== */

/* 全屏Hero区域 */
.hero-section {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: var(--gradient-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 1;
  transition: opacity 0.8s ease-out;
}

.hero-section.hidden {
  opacity: 0;
  pointer-events: none;
}

.hero-content {
  text-align: center;
  max-width: 800px;
  padding: 40px;
}

.hero-typewriter {
  font-family: var(--font-title);
  font-size: 3.5rem;
  color: var(--text-primary);
  margin-bottom: 20px;
  min-height: 80px;
  position: relative;
}

.hero-subtitle {
  font-size: 1.5rem;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.enter-btn {
  display: inline-block;
  padding: 15px 40px;
  background: var(--gradient-accent);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-size: 1.2rem;
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
}

.enter-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 25px var(--shadow-soft);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.section-title {
  font-family: var(--font-title);
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--accent-soft);
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-bottom: 40px;
}

.page-header {
  text-align: center;
  padding: 40px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 15px;
  margin-bottom: 40px;
}

.page-title {
  font-family: var(--font-handwriting);
  font-size: 2.5rem;
  color: var(--text-primary);
  margin-bottom: 15px;
}

.page-description {
  color: var(--text-secondary);
  line-height: 1.8;
}

.view-more {
  text-align: center;
  margin: 40px 0;
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  background: var(--gradient-accent);
  color: white;
  text-decoration: none;
  border-radius: 25px;
  font-family: 'Handlee', cursive;
  font-size: 1.1rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow-soft);
}

/* 文章详情页样式 */
.article-full {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px var(--shadow-soft);
  width: 100%;
  box-sizing: border-box;
}

.article-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-soft);
}

.article-title {
  font-family: var(--font-handwriting);
  font-size: 2.5rem;
  color: var(--text-primary);
  margin-bottom: 20px;
}

/* 文章内容标题锚点样式 */
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  cursor: pointer;
  position: relative;
  padding-left: 25px;
}

/* 锚点链接容器 - 常显示 */
.article-content h1 .absolute,
.article-content h2 .absolute,
.article-content h3 .absolute,
.article-content h4 .absolute,
.article-content h5 .absolute,
.article-content h6 .absolute {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.article-content h1:hover .absolute,
.article-content h2:hover .absolute,
.article-content h3:hover .absolute,
.article-content h4:hover .absolute,
.article-content h5:hover .absolute,
.article-content h6:hover .absolute {
  opacity: 1;
}

/* 锚点链接样式 - 大小与标题一致 */
.article-content h1 .absolute a,
.article-content h2 .absolute a,
.article-content h3 .absolute a,
.article-content h4 .absolute a,
.article-content h5 .absolute a,
.article-content h6 .absolute a {
  display: inline-block;
  text-decoration: none;
  font-size: inherit;
  font-family: 'KaiTi', '微软雅黑', sans-serif;
  font-weight: bold;
  opacity: inherit;
  transition: opacity 0.3s ease;
}

.article-content h1 .absolute a:hover,
.article-content h2 .absolute a:hover,
.article-content h3 .absolute a:hover,
.article-content h4 .absolute a:hover,
.article-content h5 .absolute a:hover,
.article-content h6 .absolute a:hover {
  opacity: 1;
}

/* 暗色模式下锚点标签颜色 */
.dark .article-content h1 .absolute a,
.dark .article-content h2 .absolute a,
.dark .article-content h3 .absolute a,
.dark .article-content h4 .absolute a,
.dark .article-content h5 .absolute a,
.dark .article-content h6 .absolute a {
  color: #b8b8b8;
}

.dark .article-content h1 .absolute a:hover,
.dark .article-content h2 .absolute a:hover,
.dark .article-content h3 .absolute a:hover,
.dark .article-content h4 .absolute a:hover,
.dark .article-content h5 .absolute a:hover,
.dark .article-content h6 .absolute a:hover {
  color: #e8e8e8;
}

.article-meta {
  display: flex;
  justify-content: center;
  gap: 20px;
  color: var(--text-secondary);
  font-size: 1rem;
}

.article-content {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--text-primary);
}

.article-content h2,
.article-content h3,
.article-content h4 {
  margin-top: 30px;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.article-content p {
  margin-bottom: 20px;
}

/* ==================== 目录管理器 ==================== */
.article-full {
  position: relative;
}

.toc-float {
  position: fixed; /* 固定位置，不随页面滚动 */
  top: 100px;
  right: 320px; /* 定位到主内容区域右侧（300px侧边栏 + 20px间距） */
  z-index: 1001; /* 确保在最上层 */
  transform: none !important; /* 重置transform，确保fixed定位相对于视口 */
  cursor: grab; /* 拖动光标 */
  user-select: none; /* 防止拖动时选中文本 */
}

.toc-float:active {
  cursor: grabbing;
}

.toc-toggle {
  cursor: grab;
}

.toc-toggle:active {
  cursor: grabbing;
}

.toc-toggle {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px var(--shadow-soft);
  transition: all 0.3s ease;
  font-size: 0.95rem;
  color: var(--text-primary);
  backdrop-filter: blur(10px);
}

.toc-toggle:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 4px 12px var(--shadow-soft);
  transform: translateY(-2px);
}

.dark .toc-toggle {
  background: rgba(45, 45, 45, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

.toc-content {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: 0 4px 16px var(--shadow-soft);
  min-width: 400px;
  max-width: 600px;
  max-height: 70vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.dark .toc-content {
  background: rgba(45, 45, 45, 0.98);
  border-color: rgba(255, 255, 255, 0.1);
}

.toc-content.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-soft);
  font-weight: 600;
  color: var(--text-primary);
  position: sticky;
  top: 0;
  background: inherit;
  backdrop-filter: blur(10px);
  z-index: 10;
}

.toc-header i {
  color: var(--accent-color);
}

.toc-close {
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.toc-close:hover {
  background: rgba(212, 165, 116, 0.2);
  color: var(--accent-color);
}

.toc-list {
  padding: 10px 0;
}

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

.toc-list ul.toc-level-1 {
  padding: 5px 0;
}

.toc-list ul.toc-level-2,
.toc-list ul.toc-level-3,
.toc-list ul.toc-level-4,
.toc-list ul.toc-level-5,
.toc-list ul.toc-level-6 {
  padding-left: 25px;
  margin-top: 5px;
}

.toc-item {
  margin: 0;
}

.toc-link {
  display: block;
  padding: 10px 20px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.95rem;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.toc-link:hover {
  background: rgba(212, 165, 116, 0.15);
  color: var(--accent-color);
  padding-left: 25px;
}

.toc-level-1 .toc-link {
  font-weight: 600;
  font-size: 1.05rem;
}

.toc-level-2 .toc-link {
  font-weight: 500;
  font-size: 0.95rem;
}

.toc-level-3 .toc-link {
  font-weight: 400;
  font-size: 0.9rem;
}

.toc-level-4 .toc-link,
.toc-level-5 .toc-link,
.toc-level-6 .toc-link {
  font-weight: 400;
  font-size: 0.85rem;
}

/* 滚动条样式 */
.toc-content::-webkit-scrollbar {
  width: 8px;
}

.toc-content::-webkit-scrollbar-track {
  background: transparent;
}

.toc-content::-webkit-scrollbar-thumb {
  background: var(--border-soft);
  border-radius: 4px;
}

.toc-content::-webkit-scrollbar-thumb:hover {
  background: var(--accent-soft);
}

/* 标题级数指示器 */
.heading-level-indicator {
  position: fixed;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--accent-color);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, top 0.3s ease, left 0.3s ease;
  pointer-events: none;
  z-index: 50;
  font-family: var(--font-title);
  white-space: nowrap;
}

.heading-level-indicator.visible {
  opacity: 1;
  transform: translateX(0);
}

.dark .heading-level-indicator {
  color: #d4a574;
  text-shadow: 0 0 10px rgba(212, 165, 116, 0.3), 0 0 20px rgba(212, 165, 116, 0.2);
}

/* 不同级别的标题级数指示器大小 */
.heading-level-indicator[data-level="1"] {
  font-size: 2.5rem;
  font-weight: 600;
}

.heading-level-indicator[data-level="2"] {
  font-size: 2rem;
  font-weight: 600;
}

.heading-level-indicator[data-level="3"] {
  font-size: 1.75rem;
  font-weight: 500;
}

.heading-level-indicator[data-level="4"] {
  font-size: 1.5rem;
  font-weight: 500;
}

.heading-level-indicator[data-level="5"] {
  font-size: 1.25rem;
  font-weight: 500;
}

.heading-level-indicator[data-level="6"] {
  font-size: 1.1rem;
  font-weight: 400;
}

/* 响应式调整 */
@media (max-width: 1400px) {
  .toc-float {
    right: 280px; /* 260px侧边栏 + 20px间距 */
  }
}

@media (max-width: 1100px) {
  .toc-float {
    right: 20px; /* 右侧边栏隐藏，直接定位到右侧 */
  }
}

@media (max-width: 768px) {
  .toc-float {
    right: 10px;
    top: 80px;
  }

  .toc-content {
    right: -10px;
    min-width: 280px;
    max-width: 350px;
  }

  .toc-toggle {
    padding: 10px 15px;
    font-size: 0.85rem;
  }

  .toc-toggle span {
    display: none;
  }

  .toc-link {
    padding: 8px 15px;
    font-size: 0.85rem;
  }
}

/* 文章摘要限制5行 */
.summary {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.8;
  color: var(--text-secondary);
}

.article-footer {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
}

.article-tags {
  margin-bottom: 20px;
}

.article-tags span {
  color: var(--text-secondary);
  margin-right: 10px;
}

.article-tags .tag {
  display: inline-block;
  padding: 5px 15px;
  background: rgba(212, 165, 116, 0.1);
  color: var(--accent-color);
  border-radius: 15px;
  text-decoration: none;
  margin-right: 8px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.article-tags .tag:hover {
  background: var(--gradient-accent);
  color: white;
}

.article-share {
  display: flex;
  align-items: center;
  gap: 15px;
}

.article-share span {
  color: var(--text-secondary);
}

.article-share a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(212, 165, 116, 0.1);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
}

.article-share a:hover {
  background: var(--gradient-accent);
  color: white;
  transform: scale(1.1);
}

/* 上一篇/下一篇导航 */
.article-nav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-soft);
}

.article-nav .nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  background: rgba(212, 165, 116, 0.1);
  border-radius: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 200px;
}

.article-nav .nav-btn:hover {
  background: var(--gradient-accent);
  transform: translateY(-3px);
  box-shadow: 0 4px 15px var(--shadow-soft);
}

.article-nav .nav-btn:hover span {
  color: white;
}

.article-nav .nav-btn i {
  font-size: 1.2rem;
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.article-nav .nav-btn:hover i {
  color: white;
}

.article-nav .nav-btn > span:not(.nav-title) {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.article-nav .nav-btn .nav-title {
  font-size: 0.95rem;
  color: var(--text-primary);
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-nav .nav-prev {
  align-items: flex-start;
  text-align: left;
}

.article-nav .nav-next {
  align-items: flex-end;
  text-align: right;
}

.article-nav .nav-next > span:not(.nav-title) {
  flex-direction: row-reverse;
}

/* 只有一个按钮时居中显示 */
.article-nav .nav-btn:only-child {
  max-width: 400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .article-nav {
    flex-direction: column;
  }

  .article-nav .nav-btn {
    width: 100%;
  }
}

/* 相关文章 */
.related-posts {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 15px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 4px 20px var(--shadow-soft);
}

.related-posts h3 {
  font-family: var(--font-handwriting);
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: var(--text-primary);
}

.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.related-post h4 a {
  text-decoration: none;
  color: var(--text-primary);
  transition: color 0.3s ease;
}

.related-post h4 a:hover {
  color: var(--accent-color);
}

.related-post p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-top: 10px;
}

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

.tags-cloud .tag {
  padding: 6px 16px;
  background: rgba(212, 165, 116, 0.1);
  color: var(--accent-color);
  border-radius: 15px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.tags-cloud .tag:hover {
  background: var(--gradient-accent);
  color: white;
  transform: translateY(-2px);
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 40px 0;
}

.pagination-prev,
.pagination-next {
  padding: 10px 25px;
  background: var(--gradient-accent);
  color: white;
  text-decoration: none;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.pagination-prev:hover,
.pagination-next:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow-soft);
}

.pagination-info {
  color: var(--text-secondary);
  font-size: 1rem;
}

/* 暗黑模式适配 */
.dark .hero {
  background: linear-gradient(135deg, rgba(196, 165, 116, 0.1) 0%, rgba(180, 150, 120, 0.1) 100%);
}

.dark .article-full,
.dark .related-posts,
.dark .page-header {
  background: rgba(61, 61, 61, 0.6);
}

.dark .article-title,
.dark .page-title,
.dark .related-posts h3 {
  color: var(--text-primary);
}

.dark .article-nav .nav-btn {
  background: rgba(196, 165, 116, 0.15);
}

.dark .article-nav .nav-btn > span:not(.nav-title) {
  color: #b8b8b8;
}

.dark .article-nav .nav-btn .nav-title {
  color: #e8e8e8;
}

/* 响应式设计 */
@media (max-width: 1400px) {
  aside.left-sidebar,
  aside.right-sidebar {
    width: 220px;
  }

  main#main-content {
    margin-left: 220px;
    margin-right: 220px;
    width: calc(100% - 440px);
  }
}

@media (max-width: 1100px) {
  aside.right-sidebar {
    display: none;
  }

  main#main-content {
    margin-right: 0;
    width: calc(100% - 220px);
  }
}

@media (max-width: 768px) {
  aside.left-sidebar {
    display: none;
  }

  main#main-content {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    margin-top: 70px;
    padding: 20px;
  }

  header#top-nav {
    padding: 0 15px;
  }

  header#top-nav nav {
    display: none;
  }
}