/* ========== 社交链接样式 ========== */
.social-links {
  margin: 10px 0; /* 社交图标容器上下间距 */
}
.social-links a {
  margin-right: 10px;        /* 图标之间水平间距 */
  color: #888;               /* 图标默认颜色 */
  font-size: 1.3rem;         /* 图标大小 */
  transition: color 0.3s;    /* 颜色变换动画过渡 */
}
.social-links a:hover {
  color: #1da1f2; /* 鼠标悬停时变成推特蓝色 */
}

/* ========== 主页头像特效 ========== */
.avatar {
  display: inline-block;
  border-radius: 50%; /* 头像圆形 */
  padding: 5px;       /* 头像内边距 */
  background: rgba(200, 200, 200, 0.3); /* 半透明背景 */
  box-shadow:
    0 0 10px 4px rgba(150, 150, 150, 0.8),
    0 0 20px 8px rgba(100, 100, 100, 0.5); /* 发光阴影效果 */
  transition: box-shadow 0.5s ease; /* 阴影过渡 */
}
.avatar:hover {
  box-shadow:
    0 0 20px 8px rgba(150, 150, 150, 1),
    0 0 40px 16px rgba(100, 100, 100, 0.85); /* 悬停时阴影加强 */
}
.avatar img {
  border-radius: 50%; /* 头像图片圆形 */
  display: block;
  width: 100%;        /* 图片宽度填满容器 */
  height: auto;
  transition: transform 0.8s ease; /* 图片旋转动画过渡 */
  cursor: pointer;    /* 鼠标变成指针，提示可点击 */
}
.avatar img:hover {
  transform: rotateY(360deg); /* 鼠标悬停时图片绕Y轴旋转一圈 */
}

/* ========== 阅读进度“绳子”样式 ========== */
#rope-progress {
  position: fixed;      /* 固定定位在屏幕 */
  top: 0;
  right: 20px;          /* 右侧距离 */
  width: 4px;           /* 细条宽度 */
  border-radius: 3px;   /* 圆角 */
  cursor: pointer;      /* 鼠标指针样式 */
  z-index: 9999;        /* 层级最高，保证在最上层 */

  display: flex;
  flex-direction: column;  /* 竖直排列 */
  justify-content: flex-end; /* 内容靠底部 */
  align-items: center;
  overflow: visible;

  /* 斜线纹理背景 */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.25) 0,
      rgba(255, 255, 255, 0.25) 4px,
      transparent 4px,
      transparent 8px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.15) 0,
      rgba(255, 255, 255, 0.15) 4px,
      transparent 4px,
      transparent 8px
    );
  background-color: rgba(30, 30, 30, 0.6); /* 半透明深色底 */
  background-blend-mode: overlay;          /* 背景混合模式 */
  background-size: 8px 8px;                 /* 纹理大小 */
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);  /* 细微阴影 */

  opacity: 0;                               /* 初始透明不可见 */
  transform: translateY(-30px) scaleY(0.8); /* 初始位置上移缩放 */
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;                    /* 渐变过渡 */
}
#rope-progress.rope-visible {
  opacity: 1;            /* 显示时完全不透明 */
  transform: translateY(0) scaleY(1); /* 位置和大小复原 */
}
#rope-progress:hover {
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.3); /* 悬停阴影加强 */
  background-color: rgba(60, 60, 60, 0.7);            /* 背景颜色加深 */
}
#rope-progress img {
  position: absolute;
  bottom: -32px;          /* 图片放在进度条下方 */
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: auto;
  pointer-events: auto;
  cursor: pointer;
  animation: bounceHeart 1.6s ease-in-out infinite; /* 心跳动画 */
}
@keyframes bounceHeart {
  0%, 100% {
    transform: translateX(-50%) scale(1);
  }
  25% {
    transform: translateX(-50%) scale(1.1) translateY(-3px);
  }
  50% {
    transform: translateX(-50%) scale(1) translateY(0);
  }
  75% {
    transform: translateX(-50%) scale(1.05) translateY(-2px);
  }
}

/* ========== 页面底部心跳动画备用 ========== */
#heartbeat {
  display: inline-block;
  animation: heartbeat 2.0s ease-in-out infinite; /* 心跳动画 */
  transform-origin: center; /* 变换中心点 */
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%, 42% { transform: scale(1.3); }
  28%, 70% { transform: scale(1); }
}

/* ========== 阅读进度百分比文字样式 ========== */
.rope-percent {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 3px #000; /* 文字阴影 */
  pointer-events: none;      /* 不响应鼠标事件 */
  user-select: none;         /* 不可选中 */
}

/* ========== 文章标题区域样式 ========== */
.post-title-area {
  text-align: center;
  margin-top: 10rem;   /* 标题上方大间距 */
  margin-bottom: 10rem; /* 标题下方大间距 */
}

/* ========== 文章目录（TOC）样式 ========== */

/* sticky 整体包裹容器，顶部固定 */
.card-sticky-wrapper {
  position: sticky;
  top: 4rem; /* 距离顶部4rem */
  z-index: 10;
}

/* TOC 容器样式 */
#toc-container {
  background: #fff; /* 与今日诗词模块一致的纯白背景 */
  border-radius: 12px; /* 相同圆角 */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* 相同阴影 */
  padding: 1rem;
  margin-top: 2rem;
  max-height: 60vh;
  overflow-y: auto;
}


/* 默认隐藏所有二级目录 */
#toc-container ol.toc > li > ol.toc-child {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 激活的一级目录展开对应的二级目录 */
#toc-container ol.toc > li.active > ol.toc-child {
  max-height: 1000px; /* 充分展开 */
}

/* TOC 内部链接样式 */
#toc-container a {
  color: #333;
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  margin: 0.3rem 0;
}
#toc-container a:hover {
  color: #409eff; /* 悬停变成蓝色 */
}

/* 目录标题和图标 */
.toc-header {
  font-weight: bold;
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.toc-header i {
  font-size: 1.3rem;
  color: #515253;
}

/* 取消 TOC 列表默认数字 */
#toc-container ol {
  list-style: none;
  counter-reset: none;
}

/* 页面平滑滚动效果 */
html {
  scroll-behavior: smooth;
}

/* 跳转锚点标题滚动时预留顶部间距，防止被固定导航遮挡 */
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
  scroll-margin-top: 50px;
}

/* ========== 跳转区域（上一篇/下一篇导航）样式 ========== */
#post-nav {
  display: flex;
  justify-content: space-between; /* 两端对齐 */
  margin: 3rem 0;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  background-color: rgba(255, 255, 255, 0.05); /* 半透明背景 */
}
#post-nav a {
  text-decoration: none;
  color: #ccc; /* 默认文字颜色 */
}
#post-nav a:hover span:last-child {
  text-decoration: underline; /* 悬停时给标题加下划线 */
  color: #fff; /* 字体变白 */
}

/* 跳转卡片容器样式 */
.post-nav-inner a > div {
  background: linear-gradient(135deg, #606960, #caa2a2); /* 灰色渐变背景 */
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 6px 15px rgba(0,0,0,0.6); /* 阴影 */
  border: 1px solid rgba(255,255,255,0.15);
  transform: scale(1);
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
  background-size: 200% 200%;
  background-position: 0% 50%;
  cursor: pointer;
  position: relative;
  color: #ddd;
  animation: bgGradientShift 10s ease-in-out infinite; /* 背景渐变动画 */
}

/* 跳转卡片悬停效果 */
.post-nav-inner a:hover > div {
  transform: scale(1.07) translateY(-4px); /* 放大并上移 */
  box-shadow: 0 16px 40px rgba(0,0,0,0.9); /* 阴影加强 */
  border-color: #6a9cff;
  background: #585858; /* 悬停背景色 */
}

/* 背景渐变动画关键帧 */
@keyframes bgGradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 跳转卡片中图标动画 */
.post-nav-inner a > div i,
.post-nav-inner a > div .fa-calendar,
.post-nav-inner a > div .fa-folder-open,
.post-nav-inner a > div .fa-tags {
  color: #a0a8cc;
  transition: color 0.3s ease;
  animation: iconPulse 2.5s infinite ease-in-out;
  animation-play-state: running;
  opacity: 0.7;
}
/* 悬停时图标颜色和透明度变化 */
.post-nav-inner a:hover > div i,
.post-nav-inner a:hover > div .fa-calendar,
.post-nav-inner a:hover > div .fa-folder-open,
.post-nav-inner a:hover > div .fa-tags {
  color: #c8d6ff;
  opacity: 1;
}

/* 图标呼吸动画关键帧 */
@keyframes iconPulse {
  0%, 100% {
    opacity: 0.7;
    filter: drop-shadow(0 0 2px #d40539);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 6px #14cb38);
  }
}

/* 悬停跳转链接文字 */
.post-nav-inner a:hover {
  color: #eee !important;
  text-decoration: none;
}
.author-status-sidebar {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 6px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  user-select: none;
  cursor: default;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  transition: background-color 0.3s ease;
  z-index: 20;
}

.author-status-sidebar:hover,
.author-status-sidebar:focus {
  background-color: rgba(0, 0, 0, 0.85);
  outline: none;
}

.status-text {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  display: inline-block;
  transform: translateX(20px); /* 往右移出 */
  transition:
    opacity 0.3s ease,
    max-width 0.3s ease,
    transform 0.3s ease;
  white-space: nowrap;
}

.author-status-sidebar:hover .status-text,
.author-status-sidebar:focus .status-text {
  opacity: 1;
  max-width: 150px; /* 展开宽度 */
  transform: translateX(0); /* 回到正常位置 */
}


/* 🔵 扩大点击区域：透明点击层 */
#rope-click-layer {
  position: absolute;
  bottom: -80px;   /* 向下延伸以包住绳子头 */
  left: -30px;     /* 向左扩展点击范围 */
  width: 140px;    /* 宽度覆盖绳子头两侧 */
  height: 140px;   /* 总体高度覆盖绳子头上下 */
  z-index: 11;     /* 高于图片，低于其他顶层UI */
  background: transparent;
  cursor: pointer;
}
.sticky_layout {
  position: sticky;
  top: 4rem;
  z-index: 10;
  margin-bottom: 1.5rem;  /* 让每个卡片sticky容器有间距 */
}

.card-widget {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 1rem;
}

/* 头像卡片 sticky 固定 */
.avatar-card {
  position: sticky;
  top: 88px; /* 根据导航栏高度调 */
  z-index: 10;
  margin-bottom: 20px;
}

/* 今日诗词卡片（独立容器） */
.poem-card {
  margin-top: 16px;
  margin-bottom: 20px;
}

/* 公告栏继续下面布局 */
.notice-card {
  margin-top: 0;
}

/* ✅ 让两个卡片保持独立风格 */
.avatar-card #card-div,
.notice-card #card-div {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08); /* 半透明背景，和整体风格一致 */
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  padding: 16px;
}

/* ⚠️ 移除会导致 sticky 失效的覆盖，不要加 !important */
#card-style, #card-div {
  height: auto;
  max-height: none;
  overflow: visible;
}

/* ===== 顶部工具栏样式 ===== */
.custom-code-toolbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 0.6rem;
  background: #2d2d2d !important;  /* 保证背景色 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-family: monospace;
  font-size: 0.85rem;
  color: #ccc;
  user-select: none;
}

/* 🔴🟡🟢 圆点区域 */
.custom-code-dots {
  display: flex;
  gap: 0.3rem;
}
.custom-code-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

/* 🧩 语言名 */
.code-lang-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: #aaa;
}

/* 📋 复制按钮 */
.copy-btn {
  background: none;
  border: none;
  color: #ccc;
  font-size: 1rem;
  cursor: pointer;
}
.copy-btn:hover {
  color: #fff;
}

/* 修改代码块整体圆角和背景一致 */
figure.highlight {
  background: #2d2d2d !important;
  border-radius: 12px !important;  /* 保留圆角 */
  overflow: hidden !important;
  box-shadow: none !important;
  border: none !important;
  margin: 1em 0 !important;
  padding: 0 !important;
}

/* 代码块内部 pre 标签 */
figure.highlight pre {
  margin: 0 !important;
  padding: 1em !important;   /* 保留内边距 */
  background: #2d2d2d !important;
  color: #f8f8f2;
  border: none !important;
  /* 取消下面的圆角清除，保留父元素圆角即可 */
  /* border-radius: 0 !important; */
  box-shadow: none !important;
}

/* Prism 的背景也覆盖 */
pre[class*="language-"],
code[class*="language-"] {
  background: #2d2d2d !important;
  border: none !important;
  /* 保留圆角取消，否则会变直角
  border-radius: 0 !important;
  */
  box-shadow: none !important;
}

/* 统一整个代码块区域背景和字体色 */
figure.highlight,
figure.highlight table,
figure.highlight pre,
figure.highlight td,
figure.highlight .gutter,
figure.highlight .code,
pre[class*="language-"],
code[class*="language-"] {
  background: #2d2d2d !important;
  border: none !important;
  /* 保留圆角 */
  /* border-radius: 0 !important; */
  box-shadow: none !important;
  color: #ccc !important;
}

/* 行号颜色 */
figure.highlight .gutter {
  color: #666 !important;
}

/* 表格布局取消边框与间距 */
figure.highlight table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

/* 代码单元格 padding */
figure.highlight td {
  padding: 0 !important;
}

/* 代码块本体 padding */
figure.highlight .code pre {
  padding: 1em !important;
  margin: 0 !important;
}

/* ===============================
   整体工具栏样式
   =============================== */
   .custom-code-toolbar {
    display: flex;                      /* 使用 Flexbox 布局 */
    align-items: center;                /* 垂直居中对齐 */
    justify-content: space-between;    /* 左右两端对齐，中间空隙自动分配 */
    padding: 4px 12px;                  /* 内边距，上下4px，左右12px */
    background: rgba(0, 0, 0, 0.7);    /* 深色半透明背景，更突出亮色字体 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* 底部半透明边框 */
    font-size: 0.9rem;                  /* 字体大小 */
    user-select: none;                  /* 禁止文本被选中 */
    position: relative;                 /* 方便内部绝对定位元素定位 */
  }
  
  /* ===============================
     左侧三个圆点容器
     =============================== */
  .custom-code-dots {
    display: flex;                      /* 横向排列圆点 */
    gap: 6px;                          /* 圆点之间间距 */
    flex-shrink: 0;                    /* 不允许收缩 */
  }
  
  /* ===============================
     单个圆点样式
     =============================== */
  .custom-code-dots .dot {
    width: 10px;                       /* 宽度10px */
    height: 10px;                      /* 高度10px */
    border-radius: 50%;                /* 圆形 */
    display: inline-block;             /* 行内块元素 */
  }
  
  /* 红色圆点 */
  .dot.red {
    background-color: #ff5f56;
  }
  /* 黄色圆点 */
  .dot.yellow {
    background-color: #ffbd2e;
  }
  /* 绿色圆点 */
  .dot.green {
    background-color: #27c93f;
  }
  
  /* ===============================
     语言名标签样式（绝对居中）
     =============================== */
  .code-lang-label {
    position: absolute;                /* 绝对定位 */
    left: 50%;                        /* 水平位置在容器宽度中间 */
    transform: translateX(-50%);      /* 通过平移自身宽度的50%实现真正居中 */
    font-weight: 600;                 /* 加粗 */
    color: #fff !important;           /* 白色字体，重要级别高 */
    white-space: nowrap;              /* 不换行 */
    pointer-events: none;             /* 禁止鼠标事件，不影响点击 */
  }
  
  /* ===============================
     右侧按钮组容器
     =============================== */
  .right-group {
    display: flex;                    /* 横向排列按钮 */
    gap: 8px;                        /* 按钮之间间距 */
    flex-shrink: 0;                  /* 不允许收缩 */
  }
  
  /* ===============================
     复制按钮 和 折叠按钮 公共样式
     =============================== */
  .copy-btn,
  .collapse-btn {
    background: none;                 /* 无背景 */
    border: none;                    /* 无边框 */
    cursor: pointer;                 /* 鼠标变成手型 */
    color: #fff !important;          /* 白色字体 */
    font-size: 1.1rem;               /* 字体大小 */
    padding: 2px 6px;                /* 内边距 */
    border-radius: 3px;              /* 圆角 */
    transition: background-color 0.2s ease; /* 背景颜色变化过渡 */
  }
  
  /* 按钮上的图标颜色 */
  .copy-btn i,
  .collapse-btn i {
    color: #fff !important;          /* 白色图标 */
  }
  
  /* 按钮 hover 状态 - 变为浅色半透明背景，字体保持白色 */
  .copy-btn:hover,
  .collapse-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff !important;
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
  
    a, span {
      display: inline-block;
      min-width: 32px;
      height: 32px;
      margin: 0 4px;
      line-height: 32px;
      text-align: center;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background-color: rgba(255, 255, 255, 0.05);
      color: #ccc;
      font-weight: bold;
      transition: all 0.2s ease-in-out;
  
      &:hover {
        background-color: rgba(255, 255, 255, 0.2);
        color: #fff;
      }
    }
  
    .current {
      background-color: #89bbc1;
      color: #fff;
      border: none;
    }
  }
  
  /* 包裹器：控制导航整体水平居中 */
  .menu-wrapper {
    display: flex;                  /* 使用弹性布局 */
    justify-content: center;        /* 水平居中子元素 */
    align-items: center;            /* 垂直居中子元素 */
    height: 60px;                   /* 导航栏高度 */
    padding: 0 20px;                /* 左右内边距 */
    box-sizing: border-box;         /* 包括内边距和边框在内的宽高计算 */
    position: relative;             /* 方便子元素绝对定位 */
  }

  /* 左侧 logo / 标题容器：绝对定位靠左，垂直居中 */
  .menu-left {
    position: absolute;             /* 脱离文档流，定位相对于父容器 */
    left: 20px;                    /* 距离左侧 20px */
    top: 0;                        /* 顶部对齐父容器 */
    bottom: 0;                     /* 底部对齐父容器 */
    display: flex;                 /* 使用弹性布局 */
    align-items: center;           /* 垂直居中 */
  }

  /* 居中导航栏菜单项容器 */
  .menu-center {
    display: flex;                 /* 使用弹性布局排列菜单项 */
    justify-content: center;       /* 水平居中菜单项 */
    gap: 30px;                    /* 菜单项间隔 30px */
  }

  /* 导航菜单链接样式 */
  .menu-center a {
    text-decoration: none;         /* 去掉下划线 */
    color: #fff;                   /* 白色字体 */
    font-weight: 500;              /* 字体中等粗细 */
    display: flex;                 /* 方便垂直居中图标或文字 */
    align-items: center;           /* 垂直居中 */
    transition: all 0.3s ease;     /* 平滑过渡效果 */
  }

  /* 导航菜单链接鼠标悬停效果 */
  .menu-center a:hover {
    color: #00a596;                /* 变为青绿色 */
  }

  /* 左侧标题颜色和字体样式 */
  .menu-left .title {
    color: #00a596;                /* 主题色，青绿色 */
    font-size: 1.2rem;             /* 字号 1.2rem */
    font-weight: bold;             /* 加粗字体 */
    text-decoration: none;         /* 无下划线 */
  }

  /* 左侧标题鼠标悬停颜色 */
  .menu-left .title:hover {
    color: #ffffff;                /* 悬停变白 */
  }

  /* 左侧标题中 span 的特殊样式：淡蓝色文字 + 呼吸光圈动画 */
  .menu-left .title span {
    color: #e0f7fa;                /* 淡蓝白色字体 */
    font-size: 1.5rem;             /* 字号稍大 */
    font-weight: bold;             /* 加粗 */
    text-decoration: none;         /* 无下划线 */
    animation: textGlowBreath 3s ease-in-out infinite;  /* 无限循环呼吸动画 */
  }

  /* 呼吸光圈动画关键帧定义（蓝灰色调） */
  @keyframes textGlowBreath {
    0% {
      text-shadow: 
        0 0 4px rgba(128, 216, 255, 0.2),
        0 0 10px rgba(128, 216, 255, 0.2),
        0 0 15px rgba(128, 216, 255, 0.1);
    }
    50% {
      text-shadow: 
        0 0 8px rgba(128, 216, 255, 0.7),
        0 0 16px rgba(128, 216, 255, 0.5),
        0 0 24px rgba(128, 216, 255, 0.3);
    }
    100% {
      text-shadow: 
        0 0 4px rgba(128, 216, 255, 0.2),
        0 0 10px rgba(128, 216, 255, 0.2),
        0 0 15px rgba(128, 216, 255, 0.1);
    }
  }

  /* 导航栏左侧标题初始隐藏 + 呼吸光圈 + 渐显 */
.menu-left .title span {
  color: #e0f7fa; /* 字体颜色，搭配灰色背景 */
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  opacity: 0;
  animation: fadeInGlow 1.5s ease-in-out forwards, textGlowBreath 3s ease-in-out infinite;
}

/* 页面载入时淡入发光动画 */
@keyframes fadeInGlow {
  0% {
    opacity: 0;
    text-shadow: none;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(128, 216, 255, 0.7),
                 0 0 16px rgba(128, 216, 255, 0.5),
                 0 0 24px rgba(128, 216, 255, 0.3);
  }
}

/* custom.styl 或 style.css 中 */
.no-gallery {
  pointer-events: none;
}

#menu {
  transition: top 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

/* 向下滚动隐藏 */
#menu.menu-hidden {
  top: -100px;
}

/* 向上滚动显示白色背景 + 阴影 */
#menu.menu-visible {
  background: rgba(147, 143, 143, 0.455);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 页面顶部状态：透明无阴影，菜单可点 */
#menu.menu-top {
  background: transparent !important;
  box-shadow: none !important;
}

/* ✅ 页面顶部：中间菜单可见并可点击 */
#menu.menu-top .menu-center {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}

/* ✅ 页面顶部：左侧标题可见 */
#menu.menu-top .menu-left {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* 通用：中间菜单布局 */
.menu-center {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
}


/* 搜索弹窗遮罩层 */
.search-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* 搜索弹窗内容框 */
.search-box {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 500px;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  /* ✅ 新增：向上偏移位置 */
  margin-top: -280px; /* 根据需要可调整为 -50px 或 -150px 等 */
}

/* 搜索输入框 */
#search-input {
  width: 100%;
  font-size: 16px;
  padding: 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* 搜索结果列表 */
#search-result {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 50vh;
  overflow-y: auto;
}

/* 每项搜索结果 */
#search-result li {
  margin-bottom: 8px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}

/* 搜索结果链接 */
#search-result li a {
  text-decoration: none;
  color: #333;
}

/* ✅ 搜索按钮图标容器（导航栏右上角） */
.menu-right {
  position: absolute;
  right: 50px;
  display: flex;
  align-items: center;
  height: 100%;
}

/* 搜索图标样式 */
#search-button {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 8px;
  transition: color 0.3s;
}

#search-button:hover {
  color: #00adb5;
}

/* 分类图表主容器，设置固定宽高 */
#category-chart { 
  width: 100%;
  height: 420px;
}

/* 分类图表外层包装容器，解除宽度限制，并居中显示 */
.category-chart-wrapper {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1200px;
  margin-top: 240px;
  height: 460px;
  background: transparent;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  z-index: 1;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ✅ 分类标签区域（类似标签云样式） */
.categories-tags {
  margin: 40px auto;
  text-align: center;
  line-height: 2.4;
  max-width: 780px;
}

/* ✅ 单个分类按钮（替代原 .category-pill） */
.category-cloud-item {
  display: inline-block;
  margin: 6px 10px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  opacity: 0.9;
}

/* ✅ 鼠标悬停：放大并加阴影 */
.category-cloud-item:hover {
  transform: scale(1.2);
  opacity: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

/* 页面顶部标题容器 */
.category-title-container {
  text-align: center;
  margin-top: 200px;
  margin-bottom: 40px;
}

/* 分类标题文字 */
.category-title {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  animation: fadeInDown 1s ease;
}

/* 副标题样式 */
.category-subtitle {
  text-align: center;
  font-size: 16px;
  color: #ddd;
  margin-top: -20px;
  margin-bottom: 20px;
  opacity: 0.85;
}

/* 打字机字幕（可带动画） */
.category-typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #fff;
  width: 0;
  margin: 0 auto;
  animation: typing 3.5s steps(28, end) forwards, blink 0.75s step-end infinite;
  color: #fff;
  font-size: 18px;
  text-align: center;
  max-width: fit-content;
  opacity: 0.8;
}

/* 打字动画 */
@keyframes typing {
  to {
    width: 100%;
  }
}

/* 光标闪烁 */
@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* 标题淡入下滑动画 */
@keyframes fadeInDown {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


/* 华丽分割线样式 */
.fancy-divider {
  width: 160px;
  height: 4px;
  margin: 30px auto 40px;
  background: linear-gradient(to right, #00ffe0, #ff7bff);
  border-radius: 4px;
  animation: glow 3s ease-in-out infinite;
  opacity: 0.9;
}

/* 分割线发光动画 */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 6px #00ffe0;
  }
  50% {
    box-shadow: 0 0 16px #ff7bff;
  }
}

/* 分类副标题，居中，字体颜色浅，带透明度 */
.category-subtitle {
  text-align: center;
  font-size: 16px;
  color: #ddd;
  margin-top: -20px;
  margin-bottom: 20px;
  opacity: 0.85;
}

/* 打字机效果容器，隐藏溢出，单行不换行，带闪烁光标 */
.category-typewriter {
  color: #fff;
  font-size: 18px;
  text-align: center;
  opacity: 0.8;
  max-width: fit-content;
  margin: 20px auto 30px;

  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #fff;
  width: 0;

  animation:
  typing 3.5s steps(28, end) forwards,     /* 打字效果 */
  blink 0.75s step-end infinite,           /* 光标闪烁 */
  cursor-hide 0s 4.0s forwards;            /* 4.0s 后隐藏光标 */
}

/* 打字机文字逐字展开动画，28个字符宽度 */
@keyframes typing {
  from { width: 0 }
  to { width: 28ch; }  /* 28字符宽度 */
}

/* 光标闪烁动画 */
@keyframes blink {
  50% { border-color: transparent; }
}

/* 打字完成后隐藏光标 */
@keyframes cursor-hide {
  to { border-right: none; }
}

/* 🌈 标签页副标题样式（渐变颜色 + 呼吸动效） */
.tag-subtitle {
  text-align: center;
  font-size: 16px;
  color: #ddd;
  margin-top: -20px;
  margin-bottom: 20px;
  opacity: 0.85;
}

/* ✨ 标签页打字机字幕样式（打字 + 光标 + 自动隐藏） */
.tag-typewriter {
  font-size: 18px;
  color: #ddd;                        /* 字体颜色 */
  overflow: hidden;                  /* 溢出隐藏 */
  white-space: nowrap;              /* 不换行 */
  border-right: 2px solid #fff;      /* 光标样式 */
  width: 0;                          /* 初始宽度为 0，逐字展开 */
  margin: 0 auto;

  animation:
    typing 3.5s steps(28, end) forwards, /* 打字动画 */
    blink 0.75s step-end infinite,       /* 光标闪烁 */
    cursor-hide 0s 4.0s forwards;        /* 光标 4 秒后隐藏 */
}

/* ⬇️ 图表上方标题的容器（用于整体定位） */
.tag-chart-wrapper {
  text-align: center;
  margin-top: 200px;
  margin-bottom: 40px;
}

/* 🏷️ “标签”大标题样式 */
.tag-title {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  animation: fadeInDown 1s ease;
}

/* 📊 图表主容器（可容纳图表和标签云） */
.tag-chart-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: 1200px;
  margin-top: 240px;
  height: 460px;
  padding: 20px;

  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  z-index: 1;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 📱 响应式布局：图表容器在移动端高度缩小 */
@media screen and (max-width: 768px) {
  .tag-chart-container {
    height: 400px;
    padding: 10px;
  }
}

/* ☁️ 标签云容器样式 */
.tag-cloud {
  text-align: center;
  margin-bottom: 60px;
  line-height: 2em;
}

/* 🏷️ 单个标签链接样式 */
.tag-cloud a {
  margin: 8px;
  display: inline-block;
  transition: transform 0.3s ease;
  text-decoration: none;
}

/* 🌟 鼠标悬停放大效果 */
.tag-cloud a:hover {
  transform: scale(1.2);
  opacity: 0.85;
}

/* ⬇️ 图表上方标题的容器（用于整体定位） */
.archive-header {
  text-align: center;               /* 居中 */
  margin-top: 200px;               /* 顶部外边距 */
  margin-bottom: 40px;             /* 底部外边距 */
}

.archive-title {
  text-align: center;              /* 居中标题文字 */
  font-size: 48px;                 /* 标题字号 */
  font-weight: bold;              /* 加粗 */
  color: #fff;                     /* 白色字体 */
  animation: fadeInDown 1s ease;  /* 向下淡入动画 */
}

/* 📊 图表区域 */
#archive-chart {
  margin-top: 20px;                /* 上边距 */
  width: 100%;                     /* 宽度占满父容器 */
  height: 360px;                   /* 图表高度 */
}

/* 📊 统计图容器样式 */
#archive-chart-wrapper {
  position: relative;              /* 相对定位用于居中 */
  left: 50%;                       /* 向右偏移50% */
  transform: translateX(-50%);     /* 水平居中修正 */
  width: 100vw;                    /* 占满视口宽度 */
  max-width: 1200px;               /* 最大宽度 */
  margin-top: 240px;               /* 上边距 */
  background: transparent;         /* 背景透明 */
  padding: 20px;                   /* 内边距 */
  border: 1px solid rgba(255, 255, 255, 0.1); /* 浅白边框 */
  border-radius: 12px;             /* 圆角 */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* 阴影 */
  transition: all 0.3s ease-in-out; /* 平滑过渡 */
  z-index: 1;                      /* 层级提升 */
  backdrop-filter: blur(6px);      /* 背景模糊 */
  -webkit-backdrop-filter: blur(6px); /* 兼容 Safari */

  /* ✅ 修改点：让高度自适应内容 */
  height: auto;
  overflow: visible;
}

/* 📊 统计图顶部标题和下拉菜单 */
.archive-chart-header {
  display: flex;                   /* 横向布局 */
  justify-content: space-between; /* 两端对齐 */
  align-items: center;            /* 垂直居中 */
  padding: 0 10px;                 /* 左右内边距 */
}

.archive-chart-header h2 {
  color: white;                    /* 标题白色 */
  font-size: 20px;                 /* 标题字号 */
}

/* 📁 年份下拉选择器容器 */
.selector-wrapper {
  position: relative;              /* 相对定位，为了内部箭头定位 */
  display: inline-block;           /* 行内块元素 */
}

/* 📁 年份选择器样式 */
#year-selector {
  appearance: none;                /* 去除原生样式 */
  background: rgba(255, 255, 255, 0.05); /* 半透明背景 */
  color: #fff;                     /* 白字 */
  padding: 6px 18px 6px 14px;      /* 上右下左内边距（右边缩小） */
  font-size: 14px;                 /* 字体大小 */
  border: 1px solid rgba(255, 255, 255, 0.2); /* 边框半透明 */
  border-radius: 12px;             /* 圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* 阴影 */
  cursor: pointer;                /* 鼠标指针 */
  transition: all 0.3s ease;       /* 平滑变化 */
  line-height: 1.5;                /* 行高 */
}

/* 🔽 年份选择器右侧箭头 */
.selector-arrow {
  position: absolute;             /* 绝对定位 */
  right: 12px;                    /* 靠右边对齐 */
  top: 50%;                       /* 垂直居中 */
  transform: translateY(-50%);    /* 修正居中位置 */
  pointer-events: none;           /* 不可点 */
  font-size: 10px;                /* 字体大小 */
  color: #fff;                    /* 白色 */
  transition: transform 0.3s ease; /* 箭头旋转动画 */
}

/* 🔄 聚焦时效果：高亮 + 箭头旋转 */
#year-selector:focus {
  color: #000;                                      /* 黑字 */
  background: rgba(255, 255, 255, 0.85);            /* 白背景 */
  border-color: #00e3ff;                           /* 边框高亮 */
  box-shadow: 0 0 0 3px rgba(0, 227, 255, 0.4);     /* 外阴影 */
  outline: none;                                   /* 去掉蓝边 */
}

#year-selector:focus + .selector-arrow {
  transform: translateY(-50%) rotate(180deg);      /* 箭头旋转 */
  color: #000;                                     /* 黑色箭头 */
}

/* 🌈 存档页副标题样式（渐变颜色 + 呼吸动效） */
.archive-subtitle {
  text-align: center;              /* 居中 */
  font-size: 16px;                 /* 字号 */
  color: #ddd;                     /* 灰色字体 */
  margin-top: -20px;              /* 向上偏移 */
  margin-bottom: 20px;            /* 下边距 */
  opacity: 0.85;                   /* 透明度 */
  animation: archive-breathing 3s ease-in-out infinite; /* 呼吸动画 */
}

/* ✨ 存档页打字机字幕样式（打字 + 光标 + 自动隐藏） */
.archive-typewriter {
  font-size: 18px;                 /* 字号 */
  color: #ddd;                     /* 灰字 */
  overflow: hidden;               /* 隐藏溢出 */
  white-space: nowrap;            /* 单行文本 */
  border-right: 2px solid #fff;   /* 光标样式 */
  width: 0;                        /* 初始宽度为0，用于打字效果 */
  margin: 0 auto;                 /* 水平居中 */
  animation:
    typing 3.5s steps(28, end) forwards,    /* 打字效果 */
    blink 0.75s step-end infinite,          /* 光标闪烁 */
    cursor-hide 0s 4.0s forwards;           /* 光标自动隐藏 */
}


.archive-posts-of-year {
  overflow: hidden;
  max-height: 1000px;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

.archive-posts-of-year.collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}



.simple-archive-list a:hover {
  color: #00e3ff;
  text-decoration: underline;
}

.archive-chart-header select {
  margin-left: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #666;
  background: #111;
  color: #fff;
}

.archive-search {
  margin-top: 20px;
  text-align: center;
}
.archive-search .input {
  width: 60%;
  padding: 8px 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #ccc;
}


.hover-slide {
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
}

.hover-slide:hover {
  transform: translateX(10px); /* 向右移动 10px */
  color: #4783c8 !important; /* 可选：悬停时改变颜色 */
}