/* 创建全屏背景波浪绸带 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body::before, body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh; /* 全屏高度 */
  z-index: -1;
  pointer-events: none;
  opacity: 0.6;
}

/* 第一条主波浪绸带 */
body::before {
  background: 
    radial-gradient(circle at 10% 10%, #000 1.2px, transparent 2px),
    radial-gradient(circle at 25% 25%, #000 1px, transparent 1.8px),
    radial-gradient(circle at 40% 40%, #000 1.5px, transparent 2.3px),
    radial-gradient(circle at 55% 55%, #000 1px, transparent 1.8px),
    radial-gradient(circle at 70% 70%, #000 1.3px, transparent 2.1px),
    radial-gradient(circle at 85% 85%, #000 1px, transparent 1.8px),
    radial-gradient(circle at 95% 95%, #000 1.4px, transparent 2.2px);
  background-size: 200px 200px; /* 增大背景尺寸覆盖全屏 */
  animation: elegantWave 15s ease-in-out infinite;
}

/* 第二条辅助波浪绸带 */
body::after {
  background: 
    radial-gradient(circle at 5% 15%, #000 0.8px, transparent 1.5px),
    radial-gradient(circle at 20% 35%, #000 1px, transparent 1.8px),
    radial-gradient(circle at 35% 65%, #000 0.7px, transparent 1.4px),
    radial-gradient(circle at 50% 85%, #000 1.1px, transparent 1.9px),
    radial-gradient(circle at 65% 15%, #000 0.9px, transparent 1.6px),
    radial-gradient(circle at 80% 45%, #000 1px, transparent 1.8px),
    radial-gradient(circle at 95% 75%, #000 0.8px, transparent 1.5px);
  background-size: 250px 250px;
  animation: elegantWave 12s ease-in-out infinite reverse;
  opacity: 0.4;
}

@keyframes elegantWave {
  0%, 100% {
    transform: translateY(0px);
    mask: 
      linear-gradient(90deg, transparent 0%, 
        white 10%, white 20%,
        transparent 30%, transparent 40%,
        white 50%, white 60%,
        transparent 70%, transparent 80%,
        white 90%, white 100%);
    mask-size: 800px 800px;
    mask-position: 0% 0%;
  }
  25% {
    transform: translateY(-5px);
    mask-position: 200px 50px;
  }
  50% {
    transform: translateY(0px);
    mask-position: 400px 0px;
  }
  75% {
    transform: translateY(5px);
    mask-position: 600px -50px;
  }
}

/* 降低密度避免太密集 */
body::before, body::after {
  opacity: 0.3; /* 降低透明度避免太抢眼 */
}

/* 确保在全屏模式下也能正常显示 */
@media (max-width: 768px) {
  body::before, body::after {
    background-size: 150px 150px;
  }
}

.spark-effect {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  animation: sparkFly 0.8s ease-out forwards;
}

.spark-effect::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: translate(-50%, -50%);
  animation: sparkGlow 0.8s ease-out;
}

@keyframes sparkFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--spark-tx), var(--spark-ty)) scale(0);
    opacity: 0;
  }
}

@keyframes sparkGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 12px rgba(255, 255, 255, 0);
  }
}
#hitokoto-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  padding: 15px 0;
  font-family: '仿宋', serif;
  font-size: 14px;
  z-index: 10000;
  text-align: center;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.1);
}

#hitokoto-footer a {
  color: rgba(0, 0, 0, 0.9);
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 25px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

#hitokoto-footer a:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* ===== 自动生成目录 - 修复版样式 ===== */
/* 目录容器（PC端不变，移动端改悬浮抽屉） */
.auto-toc {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px;
  width: 280px;
  max-height: 80vh;
  overflow-y: auto; /* PC端保持滚动 */
  z-index: 9999;
  transition: all 0.3s ease;
}

/* 目录标题（新增移动端点击区域样式） */
.auto-toc-title {
  font-size: 18px;
  color: #2d3748;
  margin: 0 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-weight: 600;
  cursor: pointer; /* 移动端显示手型，提示可点击 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 移动端目录折叠/展开图标（用CSS画箭头，不用图片） */
.auto-toc-title::after {
  content: "▼";
  font-size: 14px;
  color: #9ca3af;
  transition: transform 0.3s ease;
}
.auto-toc-title.collapsed::after {
  transform: rotate(-180deg);
}

/* 目录列表样式 */
.auto-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 层级优化：用左边框+缩进区分层级，更明显 */
/* h1 级（一级目录）- 无左边框，仅间距 */
.auto-toc > ul > li {
  margin: 12px 0;
  font-size: 16px;
  font-weight: 500; /* 一级目录加粗，突出层级 */
}

/* h2 级（二级目录）- 浅灰色左边框+缩进 */
.auto-toc > ul > li > ul > li {
  margin: 8px 0;
  font-size: 15px;
  padding-left: 12px;
  border-left: 2px solid #e5e7eb; /* 浅灰左边框 */
}

/* h3 级（三级目录）- 中灰色左边框+更深缩进 */
.auto-toc > ul > li > ul > li > ul > li {
  margin: 6px 0;
  font-size: 14px;
  padding-left: 24px;
  border-left: 2px solid #d1d5db; /* 中灰左边框 */
}

/* h4 级（四级目录）- 深灰色左边框+最深缩进 */
.auto-toc > ul > li > ul > li > ul > li > ul > li {
  margin: 4px 0;
  font-size: 13px;
  padding-left: 36px;
  border-left: 2px solid #9ca3af; /* 深灰左边框 */
  color: #6b7280; /* 文字颜色稍淡，区分层级 */
}

/* 目录链接样式（继承父级样式，保证层级区分） */
.auto-toc a {
  text-decoration: none;
  color: inherit; /* 继承父级颜色，层级颜色自动区分 */
  display: inline-block;
  padding: 2px 0;
  transition: all 0.2s ease;
}

/* hover 效果 */
.auto-toc a:hover {
  color: #2563eb;
  transform: translateX(3px);
}

/* 当前激活章节高亮（优化高亮位置，适配左边框） */
.auto-toc a.active {
  color: #2563eb;
  font-weight: 600;
  position: relative;
}
.auto-toc a.active::before {
  content: "";
  position: absolute;
  left: -17px; /* 调整高亮竖线位置，对齐左边框 */
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: #2563eb;
  border-radius: 2px;
}

/* 目录滚动条美化 */
.auto-toc::-webkit-scrollbar {
  width: 6px;
}
.auto-toc::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.auto-toc::-webkit-scrollbar-track {
  background: transparent;
}

/* 移动端适配 */
@media (max-width: 768px) {
 .auto-toc {
    position: fixed; /* 悬浮定位，不挤压正文 */
    top: auto;
    bottom: 20px; /* 靠底部显示 */
    left: 50%;
    transform: translateX(-50%); /* 水平居中 */
    width: 90%; /* 占90%宽度，不溢出 */
    max-height: 300px; /* 限制最大高度，确保可滚动 */
    overflow-y: auto !important; /* 强制开启垂直滚动 */
    margin: 0;
    padding: 12px;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.08); /* 底部阴影，更有层次 */
  }

  /* 移动端目录列表默认折叠（点击标题展开） */
  .auto-toc ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  /* 展开时显示列表，高度自适应内容（最大300px） */
  .auto-toc.expanded ul {
    max-height: 250px; /* 列表最大高度，超出滚动 */
    margin-top: 10px;
  }

  .auto-toc-title {
    font-size: 16px;
  }
}

/* 修复正文太挤：减少右侧内边距（关键修改） */
html {
  scroll-behavior: smooth;
}
@media (min-width: 769px) {
  .markdown-body { /* 替换成你的正文容器类名（如entry-content） */
    padding-right: 0px; /* 从300px减到260px，和目录宽度+右侧距离匹配 */
    /* 若还是挤，可改成 240px 或 220px，根据你的正文宽度调整 */
  }
/* 新增：PC端目录列表过渡效果 */
  .auto-toc ul {
    max-height: 80vh; /* 最大高度=目录容器高度 */
    transition: max-height 0.3s ease;
  }
  /* 折叠时隐藏列表 */
  .auto-toc:not(.expanded) ul {
    max-height: 0;
    overflow: hidden;
  }
}

/* ===== 自动标题底色+特效（低饱和淡色版）===== */
/* 基础标题样式：统一内边距、圆角、过渡动画 */
.auto-colored-heading {
  position: relative;
  margin: 25px 0 15px;
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  z-index: 1;
  color: #2d3748; /* 统一文字色（深灰，避免浅色底看不清） */
}

/* 标题伪元素：低饱和底色+高透明度+毛玻璃 */
.auto-colored-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  backdrop-filter: blur(12px); /* 加强毛玻璃，更柔和 */
  opacity: 0.1; /* 高透明度（0.3~0.4之间，越低越淡） */
  z-index: -1;
}

/* 标题伪元素：渐变光效（悬停时显示，更淡） */
.auto-colored-heading::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: rotate(30deg);
  transition: all 0.6s ease;
  z-index: -1;
  opacity: 0;
}

/* 悬停交互：更柔和的效果 */
.auto-colored-heading:hover {
  transform: translateY(-2px) scale(1.005); /* 轻微放大，不夸张 */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* 淡阴影 */
}

.auto-colored-heading:hover::after {
  opacity: 1;
  transform: rotate(30deg) translate(100%, 100%);
}

/* h1~h6 统一淡灰色系（从深灰到浅灰，层级分明） */
.auto-colored-h1 {
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1); /* 最深淡灰 */
  font-size: 28px;
}

.auto-colored-h2 {
  background: linear-gradient(135deg, #e5e7eb, #d1d5db); /* 深淡灰 */
  font-size: 24px;
}

.auto-colored-h3 {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb); /* 中淡灰 */
  font-size: 20px;
}

.auto-colored-h4 {
  background: linear-gradient(135deg, #f9fafb, #f3f4f6); /* 浅淡灰 */
  font-size: 18px;
}

.auto-colored-h5 {
  background: linear-gradient(135deg, #fafafa, #f9fafb); /* 更浅淡灰 */
  font-size: 16px;
}

.auto-colored-h6 {
  background: linear-gradient(135deg, #fcfcfc, #fafafa); /* 最浅淡灰 */
  font-size: 14px;
}

/* 移动端适配：缩小内边距和字体 */
@media (max-width: 768px) {
  .auto-colored-heading {
    padding: 10px 15px;
  }
  .auto-colored-h1 { font-size: 24px; }
  .auto-colored-h2 { font-size: 20px; }
  .auto-colored-h3 { font-size: 18px; }
  .auto-colored-h4 { font-size: 16px; }
  .auto-colored-h5 { font-size: 15px; }
  .auto-colored-h6 { font-size: 14px; }
}

/* 兼容目录：确保目录中的标题无底色 */
.auto-toc .auto-colored-heading {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.auto-toc .auto-colored-heading::before,
.auto-toc .auto-colored-heading::after {
  display: none !important;
}

/* ===== 仅给独行公式（$$...$$）加淡色底色 ===== */
/* 定位独行公式容器 */
.katex-display {
  position: relative;
  margin: 1.5em 0 !important; /* 上下间距，避免拥挤 */
  display: flex !important;
  justify-content: center !important; /* 公式居中（保持原有默认行为） */
}

/* 独行公式底色样式 */
.katex-display .katex {
 background: linear-gradient(135deg, #faf6ed, #f5e6c3);
  border-radius: 8px; /* 圆角，呼应标题/目录 */
  padding: 12px 20px; /* 内边距，包裹公式 */
  backdrop-filter: blur(8px); /* 毛玻璃效果，和整体风格一致 */
  opacity: 0.9; /* 轻微透明，不遮挡背景 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 淡阴影，增加层次感 */
  max-width: 90% !important; /* 限制最大宽度，避免移动端溢出 */
}

/* 行内公式（$...$）保持默认样式，不加底色 */
.katex:not(.katex-display .katex) {
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .katex-display .katex {
    padding: 8px 12px;
    font-size: 0.95em !important; /* 轻微缩小，避免溢出 */
  }
}