:root {
  --光标-默认: url("/Images/Common/鼠标-默认.cur"), auto;
  --光标-手指: url("/Images/Common/鼠标-指向.cur"), pointer;
  --中文字体: "Noto Sans SC", 微软雅黑, sans-serif;
  --代码字体: "JetBrains Mono", Consolas, monospace;
  --中文代码混合字体: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;

  /* 科技感配色 */
  --主色调: #00d4ff;
  --辅助色: #0066cc;
  --背景深色: #0a0a0a;
  --背景渐变: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
  --卡片背景: rgba(255, 255, 255, 0.05);
  --边框发光: 0 0 20px rgba(0, 212, 255, 0.3);
  --文字主色: #ffffff;
  --文字次色: #b0b0b0;
  --悬停效果: rgba(0, 212, 255, 0.1);

  /* 现代科技感效果变量 */
  --霓虹蓝: #00d4ff;
  --霓虹青: #00ffff;
  --科技紫: #8a2be2;
  --发光强度: 0 0 30px;
  --毛玻璃效果: blur(20px);
  --现代阴影: 0 8px 32px rgba(0, 0, 0, 0.1);
  --内发光: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.总区 {
  min-height: 100vh;
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--背景渐变);
  background-attachment: fixed;
  position: relative;
}

/* 添加科技感背景效果 */
.总区::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 60%, rgba(0, 212, 255, 0.07) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ===== 标题区：全新设计 ===== */

.标题区 {
  width: 100%;
  padding: 50px 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 0%, transparent 100%);
}

/* 容器：限制最大宽度，整体左对齐 */
.标题区内部 {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 眉标：小字 + 状态灯 */
.眉标 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--代码字体);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--主色调);
  text-transform: uppercase;
}

.眉标指示灯 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--主色调);
  opacity: 0.85;
}

/* 大标题：白 + 品牌色强调 */
.大标题 {
  display: flex;
  margin: 0;
  font-family: var(--中文字体);
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--文字主色);
}

.大标题强调 {
  font-style: normal;
  color: var(--主色调);
}

/* 描述文字 */
.标题描述 {
  margin: 0;
  font-family: var(--中文字体);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--文字次色);
  max-width: 480px;
}

/* 元信息行 */
.标题元信息 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  font-family: var(--代码字体);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--文字次色);
  text-transform: uppercase;
  opacity: 0.75;
}

.元信息分隔 {
  color: var(--主色调);
  opacity: 0.5;
}

/* 底部品牌色强调短线 */
.标题区::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--主色调);
  opacity: 0.55;
}

.目录总区 {
  width: max(95vw, 1200px);
  height: fit-content;
  display: flex;
  justify-content: center;
  gap: 30px;
  position: sticky;
  top: 100px;
  z-index: 1;
  --目录背景色: var(--主色调);
  --未选目录背景色: rgba(255, 255, 255, 0.05);
}

.目录区 {
  width: 180px;
  flex-shrink: 0;
  height: fit-content;
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  font-family: var(--中文代码混合字体);
  gap: 12px;
}

.目录 {
  position: relative;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: var(--卡片背景);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.目录:not(.当前目录):hover {
  cursor: var(--光标-手指);
}

.目录.当前目录 {
  background: rgba(0, 212, 255, 0.1);
  border-color: var(--主色调);
  box-shadow: var(--边框发光);
}

.目录:not(.当前目录):hover {
  transform: translateY(-1px);
}

.目录:not(.当前目录):hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.075);
}

.目录链接 {
  flex: 1;
  min-width: 0;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  transition: all 0.25s ease;
}

/* 文章数量徽标：位于目录链接之后，数量靠右显示 */
.文章数量 {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  font-family: var(--中文代码混合字体);
  font-size: 11px;
  color: var(--文字次色);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 7px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  white-space: nowrap;
  transition: all 0.25s ease;
}

.文章数量数字 {
  color: #cde;
  font-weight: 600;
}

.目录.当前目录 .文章数量 {
  color: var(--主色调);
  border-color: rgba(0, 212, 255, 0.4);
  background: rgba(0, 212, 255, 0.08);
}

.目录Logo容器 {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.25s ease;
}

.目录:not(.当前目录):hover .目录Logo容器 {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25));
  transform: scale(1.05);
}

.目录Logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.目录.当前目录 .目录标题 {
  color: var(--文字主色);
}

.目录标题 {
  flex-grow: 1;
  font-family: "Noto Sans SC", 微软雅黑, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #bbb;
  letter-spacing: 0.5px;
}

.二级目录区 {
  flex-shrink: 0;
  width: min(1200px, calc(100% - 300px));
  min-height: calc(100vh - 400px);
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 20px;
  font-family: "JetBrains Mono", Consolas, "Noto Sans SC", 微软雅黑, sans-serif;
  background: var(--卡片背景);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  /* 移除 backdrop-filter，避免多层模糊叠加造成的合成开销 */
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  position: relative;
}

.条目链接 {
  width: max(285px, calc(25% - 15px));
  transition: all 0.25s ease;
}

.条目链接:hover {
  cursor: var(--光标-手指);
}

/* 未完成的笔记条目：整体降低亮度 */
.条目链接.未完成 {
  filter: brightness(50%);
}

.条目链接:hover .条目链接旋转容器 {
  transform: translateY(-5px);
  background: var(--悬停效果);
  border-color: var(--主色调);
}

.条目链接旋转容器 {
  padding: 10px 15px;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  box-shadow: 2px 2px 6px 0 #0006;
  transition: all 0.25s ease;
}

.条目链接旋转容器:hover .链接作者,
.条目链接旋转容器:hover .链接时间 {
  color: var(--主色调);
}

.链接序号与标题 {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
}

.链接作者与时间 {
  font-size: 13px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.链接序号 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #37c;
  color: var(--文字主色);
  font-size: 10px;
  font-family: "Google Sans Code", monospace;
  text-align: center;
  align-content: center;
  flex-shrink: 0;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(36, 81, 157, 0.5);
}

.链接标题 {
  text-wrap: nowrap;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--文字主色);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.条目链接:hover .链接标题 {
  color: var(--主色调);
  text-shadow: 0 0 5px rgba(0, 212, 255, 0.3);
}

.链接作者与照片 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.链接作者照片 {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 作者视图下：链接图片为技术栈图标，20px，无圆角/阴影/边框 */
.作者视图 .链接作者照片 {
  width: 20px;
  height: 20px;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.链接作者 {
  color: var(--文字次色);
  font-weight: 400;
}

.链接时间 {
  color: var(--文字次色);
  font-weight: 400;
}

/* 按钮容器：放在二级目录区之后，内部按钮上下排列 */
.按钮容器 {
  width: 136px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
}

/* 分组切换按钮 */
.分组切换按钮 {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 18px;
  font-family: var(--中文字体);
  font-size: 14px;
  font-weight: 500;
  color: var(--文字主色);
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.25);
  border-radius: 8px;
  cursor: var(--光标-手指);
  transition: all 0.25s ease;
  white-space: nowrap;
  z-index: 10;
}

.分组切换按钮:hover {
  background: rgba(0, 212, 255, 0.15);
  border-color: rgba(0, 212, 255, 0.5);
}

.分组勾选标记 {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
  margin-left: 8px;
  filter: brightness(2);
  translate: 0 0.1275ch;
}

/* 切换一级目录按钮：视图标题 + 双 radio 切换器 */
.切换一级目录按钮 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border: 1px solid #fff3;
  border-radius: 8px;
  overflow: hidden;
  z-index: 10;
  position: relative;
  transition: 250ms;
}

/* 视图标题 */
.视图标题 {
  width: 100%;
  flex-shrink: 0;
  padding: 8px 12px;
  font-family: var(--中文字体);
  font-size: 15px;
  font-weight: 500;
  color: var(--文字次色);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  user-select: none;
  text-align: center;
  color: lightseagreen;
  display: flex;
  justify-content: center;
  align-items: center;
}

.视图图标 {
  width: 24px;
  height: 24px;
  object-fit: contain;
  vertical-align: middle;
  margin-left: 5px;
  filter: invert(1);
  transition: scale 250ms;
}

.切换一级目录按钮:hover .视图图标 {
  scale: 1.2;
}

/* 视图选项包装器：占据剩余宽度，内部选项按比例分配，作为滑动指示块的定位参照 */
.视图选项包装器 {
  flex: 1;
  display: flex;
  position: relative;
  width: 100%;
}

/* 滑动指示块：相对包装器定位，宽度与 flex 比例匹配（技术栈3 : 作者2） */
.视图选项包装器::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: #fffa;
  border-radius: 6px 0 0 6px;
  transition:
    transform 150ms ease,
    width 150ms ease,
    border-radius 150ms ease;
  pointer-events: none;
}

/* 技术栈选中：占包装器的 3/5，右侧无圆角 */
.视图选项包装器:has(.视图选项:nth-child(1) input[type="radio"]:checked)::before {
  width: 60%;
  transform: translateX(0);
  border-radius: 0 0 0 6px;
}

/* 作者选中：占包装器的 2/5，右移至 3/5 处，左侧无圆角 */
.视图选项包装器:has(.视图选项:nth-child(2) input[type="radio"]:checked)::before {
  width: 40%;
  transform: translateX(150%);
  border-radius: 0 0 6px 0;
}

/* 单个视图选项：相对定位作为 radio 绝对定位的参照 */
.视图选项 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  font-family: var(--中文字体);
  font-size: 14px;
  font-weight: 500;
  color: var(--文字主色);
  cursor: var(--光标-手指);
  transition: background 0.25s ease;
  user-select: none;
}

/* 原生 radio：绝对定位覆盖整个选项区域，透明不可见但可点击 */
.视图选项 input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: var(--光标-手指);
  z-index: 2;
}

/* 选项文本 */
.视图选项文本 {
  position: relative;
  z-index: 1;
  transition: color 0.25s ease;
}

/* 选中态：由 .切换一级目录按钮::before 滑动指示块实现 */

.视图选项:has(input[type="radio"]:checked) .视图选项文本 {
  color: black;
}

/* 悬停态 */
.视图选项:hover {
  background: #fff1;
}

.切换一级目录按钮:hover {
  border-color: #fff6;
}

/* 作者分组容器 */
.作者分组容器 {
  width: 100%;
  margin-bottom: 50px;
}

.作者分组容器:last-child {
  margin-bottom: 0;
}

/* 作者分组标题栏 */
.作者分组标题 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.作者分组头像 {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(0, 212, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.2);
}

/* 作者视图下：分组图标为技术栈图标，22px，无圆角/边框/阴影 */
.作者视图 .作者分组头像 {
  width: 22px;
  height: 22px;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.作者分组名称 {
  font-family: var(--中文字体);
  font-size: 15px;
  font-weight: 600;
  color: var(--文字主色);
  letter-spacing: 0.5px;
}

.作者分组计数 {
  font-family: var(--中文代码混合字体);
  font-size: 12px;
  color: var(--文字次色);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.作者分组计数数字 {
  color: #cde;
  font-weight: 600;
  margin-right: 4px;
}

/* 作者分组条目容器 */
.作者分组条目容器 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .标题区 {
    padding: 64px 20px 52px;
    margin-bottom: 32px;
  }

  .标题区内部 {
    gap: 16px;
  }

  .大标题 {
    font-size: 38px;
  }

  .标题描述 {
    font-size: 14px;
    max-width: 100%;
  }

  .标题元信息 {
    font-size: 11px;
    gap: 10px;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .标题区 {
    padding: 48px 16px 40px;
    margin-bottom: 24px;
  }

  .大标题 {
    font-size: 30px;
  }

  .标题描述 {
    font-size: 13px;
    line-height: 1.6;
  }

  .标题元信息 {
    font-size: 10px;
    gap: 8px;
  }
}

/* 减少动画偏好支持 */
@media (prefers-reduced-motion: reduce) {
  .标题区,
  .标题区内部,
  .眉标,
  .大标题,
  .大标题强调,
  .标题描述,
  .标题元信息 {
    transition: none;
  }
}