/* light mode colors */
  body {
    --primary-color: #5871a2;
    --primary-pale-color: #5871a233;
    --primary-decoration-color: #5871a210;
    --bg-color: #ffffff;
    --text-color: #2f3030;
    --text-pale-color: #767676;
    --text-decoration-color: #a9a9a9;
    --highlight-mark-color: #5f75b020;
    --marker-color: rgba(252, 220, 100, 0.5);

    --callout-note-color: #5871a2;
    --callout-tip-color: #268556;
    --callout-important-color: #885fc9;
    --callout-warning-color: #ab6632;
    --callout-caution-color: #c64e4e;
  }

  /* dark mode colors - 纯黑主题 */
  body.dark {
    --primary-color: #6f8fd1;
    --primary-pale-color: #6f8fd166;
    --primary-decoration-color: #6f8fd115;
    --bg-color: #000000;
    --text-color: #e0e0e0;
    --text-pale-color: #9e9e9e;
    --text-decoration-color: #4a4a4a;
    --highlight-mark-color: #8296cb3b;
    --marker-color: rgba(120, 180, 255, 0.25);

    --callout-note-color: #6f8fd1;
    --callout-tip-color: #47976f;
    --callout-important-color: #9776cd;
    --callout-warning-color: #ad7a52;
    --callout-caution-color: #d06161;
  }

  /* ========== 亮色模式背景覆盖（纯白，无装饰） ========== */
  /* 隐藏亮色模式的网格背景 */
  body:not(.dark)::before {
    display: none !important;
  }

  /* 隐藏亮色模式的 SVG 光照图 */
  body:not(.dark)::after {
    display: none !important;
  }

  /* 确保亮色模式背景为纯白 */
  body:not(.dark) {
    background-color: #ffffff !important;
  }

  /* ========== 移动端暗色模式网格优化 ========== */
  /* 手机上网格更淡，避免线条过粗 */
  @media (max-width: 768px) {
    body.dark::before {
      opacity: 0.3 !important;
    }
    body.dark::after {
      opacity: 0.2 !important;
    }
  }

  /* typography */
  body {
    --main-font: "Noto Serif CJK", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --code-font: "Fira Code", "Input Mono", "Consolas", "Monaco", ui-monospace, monospace;
    --homepage-max-width: 768px;
    --main-max-width: 768px;
    --avatar-size: 70px;
    --font-size: 18px;
    --line-height: 1.75;
    --icon-size-small: 1em;
    --icon-size-medium: 1.3em;
    --img-border-radius: 0px;
    --detail-border-radius: 0px;
    --dark-mode-img-brightness: 0.75;
    --dark-mode-chart-brightness: 0.75;
    --inline-code-border-radius: 2px;
    --inline-code-bg-color: var(--primary-decoration-color);
    --block-code-border-radius: 0px;
    --block-code-border-color: var(--primary-color);
    --detail-border-color: var(--primary-color);
  }

  /* 降低移动端上下滑时误触发选中/复制 */
  body {
    -webkit-touch-callout: none;
  }

  body * {
    -webkit-user-select: none;
    user-select: none;
  }

  input,
  textarea,
  [contenteditable="true"],
  pre,
  pre *,
  code,
  code * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }

  a,
  img,
  svg {
    -webkit-user-drag: none;
  }

  /* View Transitions 配置 - 主题切换动画 */
  /* 页面切换：简单淡入淡出 */
  ::view-transition-old(root) {
    animation: fadeOut 200ms ease-out forwards;
  }

  ::view-transition-new(root) {
    animation: fadeIn 200ms ease-in forwards;
  }

  @keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* 主题切换时禁用默认动画，由 JS 控制 clip-path */
  html.theme-transitioning ::view-transition-old(root),
  html.theme-transitioning ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* 默认（亮色模式）：new 在上面 */
  ::view-transition-old(root) {
    z-index: 1;
  }

  ::view-transition-new(root) {
    z-index: 9999;
  }

  /* 暗色模式：old 在上面（注意：用 html.dark 因为 view-transition 伪元素挂在 html 上） */
  html.dark::view-transition-old(root) {
    z-index: 9999;
  }

  html.dark::view-transition-new(root) {
    z-index: 1;
  }

  /* ========== 友链页面自定义样式 ========== */
  /* 完全按照 myBlog 项目的样式实现 */

  /* 友链容器 - 简单块级容器 */
  #friends-container {
    display: block !important;
    margin: 2rem 0;
  }

  /* 修复 Collection wrapper - flex 布局以支持 order 属性 */
  #friends-container .collection-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.875rem;
    width: 100%;
  }

  /* 响应式调整 gap */
  @media (min-width: 640px) {
    #friends-container .collection-wrapper {
      gap: 1rem;
    }
  }

  /* 友链卡片响应式宽度 - 强制覆盖主题样式 */
  #friends-container .collection-box-wrapper {
    /* 强制覆盖所有主题默认样式 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border: none !important;
    display: block !important;
    overflow: hidden !important;
    box-sizing: border-box !important;

    /* Flex 布局 - 移动端占满 */
    flex: 0 0 100% !important;
  }

  @media (min-width: 640px) {
    #friends-container .collection-box-wrapper {
      flex: 0 0 calc(50% - 0.5rem) !important;  /* 2列 */
    }
  }

  @media (min-width: 1024px) {
    #friends-container .collection-box-wrapper {
      flex: 0 0 calc(33.333% - 0.667rem) !important;  /* 3列 */
    }
  }

  /* 友链卡片 - 完全模仿 myBlog 样式 */
  #friends-container .collection.box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    height: 100% !important;
    width: 100% !important;

    /* 边框和背景 */
    border-radius: 1rem !important;
    border: 1px solid var(--primary-decoration-color) !important;
    background-color: var(--bg-color) !important;

    /* 内边距 */
    padding: 0.375rem 0.625rem !important;

    /* 过渡动画 - 移除 transform */
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;

    /* 溢出处理 */
    overflow: hidden !important;

    /* 取消默认样式 */
    text-decoration: none !important;
  }

  /* 暗色模式下增强边框可见度 */
  body.dark #friends-container .collection.box {
    border-color: rgba(111, 143, 209, 0.3) !important;
  }

  @media (min-width: 640px) {
    #friends-container .collection.box {
      padding: 0.5rem 1rem !important;
    }
  }

  /* Hover 效果 - 不向上浮动 */
  #friends-container .collection.box:hover {
    background-color: var(--primary-decoration-color) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 4px 12px rgba(88, 113, 162, 0.15) !important;
  }

  body.dark #friends-container .collection.box:hover {
    box-shadow: 0 4px 12px rgba(111, 143, 209, 0.25) !important;
    border-color: var(--primary-color) !important;
  }

  /* 头像样式 */
  #friends-container .collection.box img {
    position: relative !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background-color: white !important;
    order: -1 !important;
    margin: 0 !important;
    z-index: 5 !important;

    /* 取消主题的 rotate 效果 */
    transform: none !important;
    transition: none !important;
  }

  /* 文本区域 - 确保在背景装饰层之上 */
  #friends-container .collection.box .text {
    flex: 1 !important;
    min-width: 0 !important;
    min-height: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    overflow: hidden !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 5 !important;
  }

  #friends-container .collection.box::before {
    content: '';
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--text-color);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 10;
  }

  @media (min-width: 640px) {
    #friends-container .collection.box::before {
      left: 1rem;
    }
  }

  /* 箭头图标 */
  #friends-container .collection.box::after {
    content: '→';
    position: absolute;
    left: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--bg-color);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    z-index: 11;
    border-radius: 50%;
  }

  @media (min-width: 640px) {
    #friends-container .collection.box::after {
      left: 1rem;
    }
  }

  /* Hover 时显示遮罩和箭头 */
  #friends-container .collection.box:hover::before {
    opacity: 0.5;
  }

  #friends-container .collection.box:hover::after {
    opacity: 1;
  }

  /* 标题样式 */
  #friends-container .collection.box .text .title {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: var(--text-color) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* 副标题样式 */
  #friends-container .collection.box .text .subtitle {
    font-size: 0.75rem !important;
    color: var(--text-pale-color) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
  }

  /* 淡入动画 */
  #friends-container .collection-box-wrapper {
    animation: friendsFadeIn 0.5s ease-in-out;
  }

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

  /* ========== 纸质效果 ========== */
  /* 为文章页 main 容器添加纸质效果 + 上下留白 + 阴影 */
  body.post #wrapper > main {
    position: relative;
    max-width: 900px;
    margin: 0.5rem 10px 2rem 10px;  /* 移动端：左右留10px能看到边缘 */
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px 16px 3em;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  @media (min-width: 768px) {
    body.post #wrapper > main {
      margin: 3rem auto;  /* 桌面端居中 */
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      padding: 2.5rem 2.25rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08),
                  0 4px 16px rgba(0, 0, 0, 0.05);
    }
  }

  /* 暗色模式 - 深色纸张（方案A+B+D） */
  body.dark.post #wrapper > main {
    background-color: #1e1e1e !important;  /* A: 稍亮的深色 */
    border: 1px solid #333 !important;     /* A: 明显边框 */
    box-shadow: 0 0 30px rgba(111, 143, 209, 0.08),  /* B: 蓝色微光 */
                0 4px 20px rgba(0, 0, 0, 0.5) !important;
  }

  /* 纸质纹理叠加层 */
  body.post #wrapper > main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/noise.png);
    background-repeat: repeat;
    opacity: 0.03;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    border-radius: 10px;
  }

  /* D: 暗色模式纹理更明显 */
  body.dark.post #wrapper > main::before {
    opacity: 0.06;
  }

  @media (max-width: 767px) {
    body.post #wrapper > main::before {
      border-radius: 8px;
    }
  }

  /* 确保内容在纸质纹理之上 */
  body.post #wrapper > main > * {
    position: relative;
    z-index: 1;
  }

  /* 确保图片可以正常点击和放大 */
  body.post .prose img {
    position: relative;
    z-index: 2;
    cursor: zoom-in;
  }

  /* 亮色模式文字颜色 */
  body.post #wrapper > main {
    color: #2f3030 !important;  /* 深色文字 */
  }

  /* 暗色模式文字颜色 */
  body.dark.post #wrapper > main {
    color: #e0e0e0 !important;  /* 浅色文字 */
  }

  /* 亮色模式标题文字颜色 */
  body.post #wrapper > main h1,
  body.post #wrapper > main h2,
  body.post #wrapper > main h3,
  body.post #wrapper > main h4,
  body.post #wrapper > main h5,
  body.post #wrapper > main h6 {
    color: #1a1a1a !important;  /* 标题更深 */
  }

  /* 暗色模式标题文字颜色 */
  body.dark.post #wrapper > main h1,
  body.dark.post #wrapper > main h2,
  body.dark.post #wrapper > main h3,
  body.dark.post #wrapper > main h4,
  body.dark.post #wrapper > main h5,
  body.dark.post #wrapper > main h6 {
    color: #f0f0f0 !important;  /* 浅色标题 */
  }

  /* ========== 全局标题样式统一优化 ========== */
  /* 覆盖主题默认的过大 margin 和不统一的字号 */
  /* 设计原则：适度紧凑 + 梯度明显 + line-height 1.3 */

  /* 统一所有标题的行高和字重 */
  .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    line-height: 1.3 !important;
    font-weight: 500 !important;
  }

  /* 梯度明显的字号体系 - 移动端 */
  .prose h1 {
    font-size: 1.5rem !important;       /* 24px */
    margin: 1rem 0 0.75rem !important;  /* 16px 8px 12px */
  }

  .prose h2 {
    font-size: 1.25rem !important;      /* 20px */
    margin: 1.25rem 0 0.5rem !important; /* 20px 8px 8px */
  }

  .prose h3 {
    font-size: 1.125rem !important;     /* 18px */
    margin: 1rem 0 0.5rem !important;   /* 16px 8px 8px */
  }

  .prose h4 {
    font-size: 1.0625rem !important;    /* 17px */
    margin: 1rem 0 0.5rem !important;   /* 16px 8px 8px */
  }

  .prose h5, .prose h6 {
    font-size: 1rem !important;         /* 16px */
    margin: 0.875rem 0 0.5rem !important; /* 14px 8px 8px */
  }

  /* 桌面端（≥640px）- 字号适度放大 */
  @media (min-width: 640px) {
    .prose h1 {
      font-size: 1.875rem !important;     /* 30px */
      margin: 1.5rem 0 1rem !important;   /* 24px 16px */
    }

    .prose h2 {
      font-size: 1.5rem !important;       /* 24px */
      margin: 1.5rem 0 0.75rem !important; /* 24px 12px */
    }

    .prose h3 {
      font-size: 1.25rem !important;      /* 20px */
      margin: 1.5rem 0 0.5rem !important; /* 24px 8px */
    }

    .prose h4 {
      font-size: 1.125rem !important;     /* 18px */
      margin: 1.25rem 0 0.5rem !important; /* 20px 8px */
    }

    .prose h5, .prose h6 {
      font-size: 1rem !important;         /* 16px */
      margin: 1rem 0 0.5rem !important;   /* 16px 8px */
    }
  }

  /* 其他页面标题也应用统一标准 */
  .section-title h1,
  .tags-sidebar h3 {
    line-height: 1.3 !important;
    font-weight: 500 !important;
  }

  /* 调整标签侧边栏标题，移除之前的负 margin hack */
  .tags-sidebar h3 {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    font-size: 1.2rem !important;
  }

  /* ========== 文章标题样式优化（保留特殊颜色处理）========== */

  /* 文章 h1 标题颜色 - 已在上方定义 */

  /* 亮色模式链接颜色 */
  body.post #wrapper > main a {
    color: #5871a2 !important;
  }

  body.post #wrapper > main a:hover {
    color: #6f8fd1 !important;
  }

  /* 暗色模式链接颜色 */
  body.dark.post #wrapper > main a {
    color: #79a8e8 !important;
  }

  body.dark.post #wrapper > main a:hover {
    color: #a0c4f0 !important;
  }

  /* 亮色模式行内代码样式 */
  body.post #wrapper > main code {
    background-color: rgba(88, 113, 162, 0.1) !important;
    color: #2f3030 !important;
  }

  /* 暗色模式行内代码样式 */
  body.dark.post #wrapper > main code {
    background-color: rgba(111, 143, 209, 0.2) !important;
    color: #e0e0e0 !important;
  }

  /* 行内代码行高和字体优化 */
  body.post #wrapper > main :not(pre) > code,
  body.dark.post #wrapper > main :not(pre) > code {
    font-size: 0.9em !important;  /* catcodeme 风格：更小的行内代码 */
    font-weight: 500 !important;  /* Medium 权重 */
    line-height: 1.6 !important;  /* 行内代码更紧凑，视觉一致 */
  }

  /* 亮色模式代码块样式 - 淡背景，无边框 */
  body.post #wrapper > main pre {
    background-color: rgba(0, 0, 0, 0.03) !important;
    border: none !important;
    border-radius: 6px !important;
  }

  /* 暗色模式代码块样式 */
  body.dark.post #wrapper > main pre {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    border-radius: 6px !important;
  }

  body.post #wrapper > main pre code,
  body.dark.post #wrapper > main pre code {
    background-color: transparent !important;
    font-size: 1.015em !important;
    font-weight: 600 !important;
  }

  /* 亮色模式引用块样式 */
  body.post #wrapper > main blockquote {
    border-left-color: #5871a2 !important;
    color: #4a4a4a !important;
  }

  /* 暗色模式引用块样式 */
  body.dark.post #wrapper > main blockquote {
    border-left-color: #6f8fd1 !important;
    color: #b0b0b0 !important;
  }

  /* 亮色模式表格样式 */
  body.post #wrapper > main table {
    color: #2f3030 !important;
  }

  body.post #wrapper > main th {
    background-color: #f5f5f5 !important;
    color: #1a1a1a !important;
  }

  /* 暗色模式表格样式 */
  body.dark.post #wrapper > main table {
    color: #e0e0e0 !important;
  }

  body.dark.post #wrapper > main th {
    background-color: #252525 !important;
    color: #f0f0f0 !important;
  }

  /* 表格行高优化 */
  body.post #wrapper > main table th,
  body.post #wrapper > main table td,
  body.dark.post #wrapper > main table th,
  body.dark.post #wrapper > main table td {
    line-height: 1.6 !important;  /* 从默认2.0降至1.6，节省20%空间 */
  }

  /* ========== 智能折叠目录样式（毛玻璃效果 + 自动展开） ========== */

  /* 默认：目录在文章上方（静态布局） */
  body.post aside nav {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 2rem;
    font-size: 14px;
    padding: 16px !important;
    border-radius: 8px;

    /* 毛玻璃背景 */
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(88, 113, 162, 0.15);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  }

  /* 暗色模式毛玻璃 */
  body.dark.post aside nav {
    background: rgba(0, 0, 0, 0.85);
    border-color: rgba(111, 143, 209, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  }

  /* ========== TOC 多层级支持样式（全局） ========== */

  /* 目录列表基础样式 */
  body.post aside nav ul {
      list-style: none;
      padding-left: 0 !important;
      padding-right: 0 !important;
      margin: 0;
  }

  /* 重置列表样式 */
  body.post aside nav ul,
  body.post aside nav li {
      list-style: none;
      padding: 0;
      margin: 0;
  }

  /* 分组容器 */
  .toc-group {
      margin: 6px 0;
  }

  /* 层级缩进 */
  .toc-level-0 { margin-left: 0; }
  .toc-level-1 { margin-left: 12px; }
  .toc-level-2 { margin-left: 24px; }
  .toc-level-3 { margin-left: 36px; }
  .toc-level-4 { margin-left: 48px; }

  /* 通用 TOC 项容器 */
  .toc-item {
      position: relative;
  }

  /* 通用链接样式 */
  .toc-item > a {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 6px;
      color: var(--text-color);
      text-decoration: none;
      transition: all 200ms ease;
      cursor: pointer;
      line-height: 1.4;
  }

  /* 折叠图标 */
  .toc-collapse-icon {
      margin-right: 6px;
      font-size: 10px;
      color: var(--text-pale-color);
      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
      display: inline-block;
  }

  /* 展开时旋转图标 */
  .toc-item.expanded > a > .toc-collapse-icon {
      transform: rotate(90deg);
  }

  /* 层级指示器（圆点） */
  .toc-level-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      margin-right: 8px;
      flex-shrink: 0;
      background: var(--primary-color);
  }

  /* 按层级调整样式 */

  /* H2 项 - 最大最重要 */
  .toc-h2-item > a {
      font-weight: 500;
      font-size: 14px;
      padding: 8px 12px;
  }

  .toc-h2-item .toc-level-dot {
      width: 8px;
      height: 8px;
  }

  /* H3 项 - 略小 */
  .toc-h3-item > a {
      font-size: 13px;
      padding: 6px 10px;
      color: var(--text-pale-color);
  }

  .toc-h3-item .toc-level-dot {
      width: 6px;
      height: 6px;
      border: 1.5px solid var(--primary-color);
      background: transparent;
  }

  /* H4 项 - 更小 */
  .toc-h4-item > a {
      font-size: 12px;
      padding: 5px 8px;
      color: var(--text-pale-color);
  }

  .toc-h4-item .toc-level-dot {
      width: 5px;
      height: 5px;
      background: var(--text-decoration-color);
  }

  /* H5-H6 项 - 最小 */
  .toc-h5-item > a,
  .toc-h6-item > a {
      font-size: 11px;
      padding: 4px 8px;
      color: var(--text-pale-color);
      opacity: 0.85;
  }

  .toc-h5-item .toc-level-dot,
  .toc-h6-item .toc-level-dot {
      width: 4px;
      height: 4px;
      background: var(--text-decoration-color);
  }

  /* 悬停效果 */
  .toc-item > a:hover {
      background: var(--primary-pale-color);
      color: var(--text-color);
  }

  /* 激活状态（波动动画） */
  .toc-item.active > a {
      background: var(--primary-pale-color);
      color: var(--primary-color);
      font-weight: 600;
      border-left: 3px solid var(--primary-color);
      padding-left: 9px;
      animation: tocPulse 1.5s ease-in-out infinite;
  }

  /* H2 特殊激活效果 */
  .toc-h2-item.active > a {
      font-weight: 600;
  }

  /* 波动动画关键帧 */
  @keyframes tocPulse {
      0%, 100% {
          transform: scale(1);
      }
      50% {
          transform: scale(1.02);
      }
  }

  /* 子级容器（折叠/展开） */
  .toc-children-container {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 300ms ease;
  }

  /* 展开状态 */
  .toc-item.expanded > .toc-children-container {
      max-height: 1000px;
      opacity: 1;
  }

  /* 滚动条美化 */
  body.post aside nav::-webkit-scrollbar {
      width: 6px;
  }

  body.post aside nav::-webkit-scrollbar-track {
      background: transparent;
  }

  body.post aside nav::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 3px;
      opacity: 0.5;
  }

  body.post aside nav::-webkit-scrollbar-thumb:hover {
      background: var(--primary-color);
      opacity: 1;
  }

  /* 桌面端 TOC 默认隐藏，由 JS 根据空间动态显示 */
  body.post aside nav {
      display: none !important;
  }

  /* 当 JS 判断有足够空间时，添加 .toc-visible 类显示 */
  body.post.toc-visible aside nav {
      display: block !important;
      position: fixed !important;
      top: 90px;
      right: 20px;
      width: 220px !important;
      max-width: 220px !important;
      min-width: 220px !important;
      box-sizing: border-box !important;
      max-height: calc(100vh - 120px);
      margin-bottom: 0;
      z-index: 300;
      overflow-y: auto;
  }

  /* 有空间时隐藏移动端目录按钮 */
  body.post.toc-visible #mobile-toc-btn,
  body.post.toc-visible #mobile-toc-overlay,
  body.post.toc-visible #mobile-toc-panel {
      display: none !important;
  }

  /* 布局修正 */
  body.post.toc-visible aside {
      width: 0;
      position: static;
      margin-top: 0;
  }

  body.post.toc-visible #blank {
      width: 0;
  }

  /* ========== Back/Home 动态布局（全局生效） ========== */

  /* Header 基础布局 - 全局生效 */
  header {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 15px;
  }

  header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }

  /* Back 按钮默认样式 */
  header nav a#back-link {
    transition: opacity 0.3s ease, transform 0.3s ease;
    padding: 1em 0;
    font-size: 0.9rem;
    flex-shrink: 0;
  }

  /* Home 按钮基础定位 + 过渡动画 */
  header nav a#home-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: left 0.3s ease, transform 0.3s ease;
    padding: 1em 0;
    font-size: 0.9rem;
  }

  /* 主题切换按钮 - 固定在右侧 */
  header nav #theme-toggle {
    padding: 1em 0;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
    line-height: 0;
    flex-shrink: 0;
    color: var(--text-pale-color);  /* 默认使用主题变量颜色 */
  }

  header nav #theme-toggle:hover {
    color: var(--primary-color);
  }

  header nav #theme-toggle svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }

  /* 文章页的主题按钮（白纸背景）- 亮色模式用深色 */
  body.post header nav #theme-toggle {
    color: #666;
  }

  /* 文章页的主题按钮 - 暗色模式用浅色 */
  body.dark.post header nav #theme-toggle {
    color: var(--text-pale-color);
  }

  /* 黑色背景页面（blog列表、友链等）的主题按钮用浅色 */
  body.blog header nav #theme-toggle,
  body.prose-page header nav #theme-toggle {
    color: var(--text-pale-color);
  }

  /* 没有站内历史时：隐藏 Back，Home 滑到左边 */
  body.no-history header nav a#back-link {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-20px);
  }

  body.no-history header nav a#home-link {
    left: 0;
    transform: translateX(0);
  }

  /* 有站内历史时：显示 Back，Home 居中 */
  body.has-history header nav a#back-link {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }

  body.has-history header nav a#home-link {
    left: 50%;
    transform: translateX(-50%);
  }

  /* ========== 博客列表页两栏布局 ========== */
  /* 两栏容器 - 默认移动端单列 */
  .two-column-layout.blog-page {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 0;  /* 移除顶部边距，让布局更靠上 */
  }

  /* 桌面端两栏布局 */
  @media (min-width: 769px) {
    .two-column-layout.blog-page {
      grid-template-columns: 1fr 280px;
      gap: 3rem;
    }
  }

  /* 左栏文章列表 */
  .two-column-layout.blog-page .left-column {
    min-width: 0;
  }

  /* 右栏标签侧边栏 */
  .two-column-layout.blog-page .right-column.tags-sidebar {
    position: relative;
  }

  /* 标签侧边栏标题 */
  .tags-sidebar h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
    margin-top: -0.5rem;       /* 从 -0.25rem 改为 -0.5rem，再上升 4px */
    margin-bottom: 0.75rem;    /* 减小下边距，让标签更靠近线条 */
    padding-bottom: 0.375rem;  /* 减小内边距，让线条更靠近标题 */
    border-bottom: 2px solid var(--primary-color);
  }

  /* 标签云容器 */
  .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0;  /* 确保没有额外的顶部边距 */
  }

  /* 标签链接样式 */
  .tags-cloud .tag-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.75rem;
    background-color: var(--primary-decoration-color);
    border: 1px solid var(--primary-pale-color);
    border-radius: 1rem;
    font-size: 0.9rem;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.2s ease;
    line-height: 1.4;
  }

  .tags-cloud .tag-link:hover {
    background-color: var(--primary-pale-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(88, 113, 162, 0.2);
  }

  /* 暗色模式悬停效果 */
  body.dark .tags-cloud .tag-link:hover {
    box-shadow: 0 2px 8px rgba(111, 143, 209, 0.3);
  }

  /* 标签 hash 符号 */
  .tag-link .tag-hash {
    color: var(--primary-color);
    font-weight: 600;
  }

  /* 标签文章数量 */
  .tag-link .tag-count {
    margin-left: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-pale-color);
    background-color: var(--bg-color);
    padding: 0.1rem 0.4rem;
    border-radius: 0.5rem;
    font-weight: 500;
  }

  /* 移动端标签云调整 */
  @media (max-width: 768px) {
    .tags-sidebar {
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 1px solid var(--primary-decoration-color);
    }

    .tags-cloud {
      gap: 0.6rem;
    }

    .tags-cloud .tag-link {
      font-size: 0.85rem;
      padding: 0.35rem 0.65rem;
    }
  }

  /* ========== 头像切换动画 ========== */
  /* "微微一颤"动画效果 */
  @keyframes avatarShake {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    15% {
      transform: translateX(-3px);
      opacity: 0.7;
    }
    35% {
      transform: translateX(3px);
      opacity: 0.5;
    }
    50% {
      transform: translateX(0);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 0;
    }
  }

  #info img.avatar-shake {
    animation: avatarShake 0.4s ease-out forwards;
  }

  /* ========== Lightense 图片放大修复 ========== */
  /* 问题：图片放大后被 .lightense-backdrop 遮挡 */
  /* 原因：图片在 .lightense-wrap 中，而 wrap 在文章容器内，受父元素层叠上下文限制 */
  /* 解决：当图片放大时，让文章容器不创建新的层叠上下文 */

  /* 当有图片正在放大时，移除文章容器的 z-index 限制 */
  body.post:has(.lightense-open) #wrapper > main {
    z-index: auto !important;
  }

  body.post:has(.lightense-open) #wrapper > main > * {
    z-index: auto !important;
  }

  body.post:has(.lightense-open) .prose {
    z-index: auto !important;
  }

  /* 确保 backdrop 和 wrap 的 z-index 正确 */
  .lightense-backdrop {
    z-index: 99999 !important;
  }

  .lightense-wrap {
    z-index: 100000 !important;
  }

  /* ========== 文章更新热力图 ========== */
  .heatmap-container {
    margin: 1.5rem 0 2rem 0;
    padding: 1rem 1.2rem;
    background: var(--primary-decoration-color);
    border-radius: 8px;
    font-size: 0.85rem;
  }

  .heatmap-header {
    margin-bottom: 0.8rem;
  }

  .heatmap-stats {
    color: var(--text-pale-color);
    font-size: 0.75rem;
  }

  .heatmap-grid {
    display: flex;
    gap: 3px;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

  .heatmap-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .heatmap-day {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.1s ease;
  }

  .heatmap-day:hover {
    transform: scale(1.3);
  }

  /* 热力图颜色等级 - 浅色模式（蓝色） */
  .heatmap-day.level-0 {
    background: rgba(0, 0, 0, 0.06);
  }
  .heatmap-day.level-1 {
    background: #c6e0f5;
  }
  .heatmap-day.level-2 {
    background: #79b8e8;
  }
  .heatmap-day.level-3 {
    background: #3d8fd4;
  }
  .heatmap-day.level-4 {
    background: #1a5fb4;
  }
  .heatmap-day.level-future {
    background: transparent;
  }

  /* 热力图颜色等级 - 深色模式（蓝色） */
  body.dark .heatmap-day.level-0 {
    background: rgba(255, 255, 255, 0.08);
  }
  body.dark .heatmap-day.level-1 {
    background: #1a3a5c;
  }
  body.dark .heatmap-day.level-2 {
    background: #1e5a8a;
  }
  body.dark .heatmap-day.level-3 {
    background: #3d8fd4;
  }
  body.dark .heatmap-day.level-4 {
    background: #79b8e8;
  }

  /* 热力图底部（日期范围 + 图例） */
  .heatmap-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .heatmap-date-range {
    color: var(--text-pale-color);
    font-size: 0.7rem;
  }

  .heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-pale-color);
  }

  .heatmap-legend .heatmap-day {
    cursor: default;
  }

  .heatmap-legend .heatmap-day:hover {
    transform: none;
  }

  .heatmap-empty {
    text-align: center;
    color: var(--text-pale-color);
    padding: 1rem;
    font-size: 0.85rem;
  }

  .heatmap-loading {
    text-align: center;
    color: var(--text-pale-color);
    padding: 2rem;
  }

  /* 移动端适配 */
  @media (max-width: 768px) {
    .heatmap-container {
      padding: 0.8rem;
    }

    .heatmap-day {
      width: 8px;
      height: 8px;
    }

    .heatmap-grid {
      gap: 2px;
    }

    .heatmap-week {
      gap: 2px;
    }
  }

  /* ========== 移动端目录 ========== */

  /* 移动端目录按钮 - 默认显示，由 JS 通过 toc-visible 类控制隐藏 */
  #mobile-toc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s, box-shadow 0.2s;
  }

  #mobile-toc-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }

  #mobile-toc-btn:active {
    transform: scale(0.95);
  }

  /* 遮罩层 */
  #mobile-toc-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  #mobile-toc-overlay.show {
    display: block;
    opacity: 1;
  }

  /* 目录面板 */
  #mobile-toc-panel {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: var(--bg-color);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 201;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  #mobile-toc-panel.show {
    transform: translateY(0);
  }

  /* 面板头部 */
  #mobile-toc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 16px;
  }

  #mobile-toc-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  #mobile-theme-toggle {
    background: none;
    border: none;
    color: var(--text-pale-color);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
  }

  #mobile-theme-toggle:hover {
    color: var(--primary-color);
  }

  /* 亮色模式显示太阳，暗色模式显示月亮（和原主题一致） */
  #mobile-theme-toggle .moon-icon {
    display: none;
  }
  #mobile-theme-toggle .sun-icon {
    display: block;
  }
  body.dark #mobile-theme-toggle .moon-icon {
    display: block;
  }
  body.dark #mobile-theme-toggle .sun-icon {
    display: none;
  }

  #mobile-toc-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-pale-color);
    cursor: pointer;
    padding: 4px 8px;
  }

  /* 目录内容 */
  #mobile-toc-nav {
    padding: 12px 16px 24px;
    max-height: calc(70vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #mobile-toc-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #mobile-toc-nav li {
    margin: 4px 0;
  }

  #mobile-toc-nav a {
    display: block;
    padding: 10px 12px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s;
  }

  #mobile-toc-nav a:hover,
  #mobile-toc-nav a:active {
    background: var(--hover-bg-color, rgba(0, 0, 0, 0.05));
  }

  #mobile-toc-nav a.h2 {
    font-weight: 500;
    font-size: 15px;
  }

  #mobile-toc-nav a.h3 {
    padding-left: 24px;
    font-size: 14px;
    color: var(--text-pale-color);
  }

  #mobile-toc-nav a.h4 {
    padding-left: 36px;
    font-size: 13px;
    color: var(--text-pale-color);
  }

  #mobile-toc-nav a.h5,
  #mobile-toc-nav a.h6 {
    padding-left: 48px;
    font-size: 12px;
    color: var(--text-pale-color);
  }