/* ============================================================
   Apple 风格博客样式
   简洁、高级、留白充足、层级分明
   严格匹配模板中使用的 class 名
   ============================================================ */

/* ---------- CSS 变量 ---------- */
:root {
  /* 配色 */
  --color-bg: #f8f9fa;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  /* 卡片底色（用于「内容截断」渐隐遮罩的收尾色）。
     ⚠️ 遮罩必须与卡片同色，否则会形成一条可见色带（用户反馈的"白框"）。
     改卡片底色时，**必须同步改这里**；深色下已单独定义。 */
  --card-bg-solid: #ffffff;
  /* 「内容截断」渐隐遮罩高度。历史上有 40/76/88/100 四种值互相覆盖，
     现统一为一个变量，改一处即全局生效。 */
  --fade-mask-h: 100px;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-accent: #0066cc;
  --color-accent-hover: #0055aa;
  --color-border: #e5e7eb;
  --color-border-hover: #d1d5db;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-success: #16a34a;
  --color-success-bg: #ecfdf5;
  --color-success-border: #a7f3d0;
  --color-error-bg: #fef2f2;
  --color-error-border: #fecaca;
  --color-info-bg: #eff6ff;
  --color-info-border: #bfdbfe;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  /* 首页卡片定高：主要由「标题 + 摘要3行 + 按钮区」决定。
     2026-10-10 抽成变量 —— 此前 336 这个数字硬编码散落 27 处，
     星系放大 4px 就要全改一遍，极易漏改导致卡片内容被裁。 */
  /* 2026-10-10 344 → 356：星系 48 → 56px 后按钮区高 61 → 75px，
     定高不够导致内容被裁（实测溢出 10px）。
     ✅ 这正是把它抽成变量的价值 —— 只改这一处即可。 */
  --card-h: 356px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* 圆角 */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 14px;

  /* 阴影 */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* 字体
     2026-10-18：字体族可由后台切换 —— fonts.css 里定义了
       .font-xxx { --font-family-active: ... }
     这里用 var() 兜底：没设（system）就用系统栈。 */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC",
    "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono",
    monospace;

  /* 后台可调的排版变量（base.html 的 <html style> 会覆盖） */
  --font-size-base: 1rem;        /* 正文字号 */
  --font-size-title: 1.8rem;     /* 文章标题字号 */
  --line-height-base: 1.75;      /* 正文行高 */

  /* 过渡 */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
}

/* ---------- 全局基础 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
}

/* ---------- 导航栏 ---------- */
.navbar {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
}

.logo {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.logo:hover {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  gap: var(--space-md);
  align-items: center;
}

.nav-links a {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-links a.active {
  color: var(--color-accent);
  font-weight: 500;
}

/* ---------- 主内容容器 ---------- */
.main-content {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* ---------- 提示消息 ---------- */
.flash-container {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) 0;
}

.flash {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
}

.flash-success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid var(--color-success-border);
}

.flash-error {
  background-color: var(--color-error-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-error-border);
}

.flash-info {
  background-color: var(--color-info-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-info-border);
}

/* ---------- 文章列表 ---------- */
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.post-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-hover);
}

.post-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.post-title:hover {
  color: var(--color-accent);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.post-date {
  color: var(--color-text-secondary);
}

.post-author {
  color: var(--color-text-secondary);
}

.post-excerpt {
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: var(--space-sm);
}

/* ---------- 空状态 ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-2xl);
  color: var(--color-text-muted);
  font-size: 0.95rem;
}

/* ---------- 分页器 ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md) 0;
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.page-link:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.page-link.prev {
  /* 上一页按钮 */
}

.page-link.next {
  /* 下一页按钮 */
}

.page-info {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: var(--space-xs) var(--space-sm);
}

/* ---------- 文章详情 ---------- */
.post {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.post-meta {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

.post-body {
  margin-top: var(--space-md);
}

.post-body-content {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
}

.post-body-content p {
  margin-bottom: var(--space-md);
}

/* 正文标题层级（2026-10-18 调整）
   ---------------------------------------------------------------
   问题：正文 h1 原为 1.75rem，而页面文章标题默认 1.8rem —— 两者几乎同大。
         演示文章正文里再写一个 # 标题时，看起来像"标题重复了两次"，
         用户无法从视觉上区分「这是文章名」和「这是正文的一级标题」。
   修复：正文标题改为**相对正文字号的 em 单位**，
         · 跟随用户在后台调的正文字号一起缩放（比例恒定）
         · 正文 h1 明显小于页面标题，层级从属关系清楚
         · h2/h3/h4 依次递减
   参考：页面标题默认 1.8rem（28.8px），正文默认 1rem（16px），
         正文 h1 = 1.5em ≈ 24px，明显小于页面标题。
   --------------------------------------------------------------- */
.post-body-content h1 {
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin-bottom: var(--space-md);
  margin-top: var(--space-lg);
}

.post-body-content h2 {
  font-size: 1.25em;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  margin-top: var(--space-lg);
}

.post-body-content h3 {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: var(--space-sm);
  margin-top: var(--space-md);
}

.post-body-content h4 {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: var(--space-sm);
  margin-top: var(--space-md);
}

.post-body-content code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background-color: var(--color-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.post-body-content pre {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow-x: auto;
  margin-bottom: var(--space-md);
  line-height: 1.5;
}

.post-body-content img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
}

.post-body-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
}

.post-body-content ul,
.post-body-content ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

.post-body-content li {
  margin-bottom: var(--space-sm);
}

.post-body-content a {
  color: var(--color-accent);
  text-decoration: none;
}

.post-body-content a:hover {
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════
   正文表格（2026-10-18 新增）
   ----------------------------------------------------------------------
   问题：本文件定义了 p / h1-h4 / code / pre / blockquote / img / ul / a 的样式，
         **唯独漏了 table** —— 实测文章里的 Markdown 表格渲染成无边框、
         单元格挤在一起，完全看不出是表格（用户截图确认）。
   修复：补齐完整表格样式，并处理窄屏横向滚动（宽表格不撑破页面）。
   ══════════════════════════════════════════════════════════════════════ */

.post-body-content table {
  /* ★ 2026-10-18 修正：宽表格列被挤压。
     原来 `width: 100%` 强制表格撑满容器，8 列时每列只剩几十像素，
     「数据」两个字被挤成「数/据」两行。
     现在改为：
       · width: max-content —— 表格按内容自然宽度，列不被压缩
       · min-width: 100%    —— 内容少时不缩成一小块
       · display: block + overflow-x: auto —— 超出时横向滚动
     这样「列少 → 撑满；列多 → 横向滚动」，两种都好看。 */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  margin: var(--space-md) 0;
  font-size: 0.95em;
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表格内部用 table 布局，避免 display:block 影响列宽计算 */
.post-body-content table > thead,
.post-body-content table > tbody {
  display: table;
  width: 100%;
  table-layout: auto;
}

.post-body-content th,
.post-body-content td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.post-body-content th {
  background-color: var(--color-bg);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;        /* 表头尽量不换行，便于扫读 */
}

/* 斑马纹：提高长表格可读性（用极淡的底，不抢正文） */
.post-body-content tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

.post-body-content tbody tr:hover {
  background-color: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

/* 表格里的行内代码不要撑高整行 */
.post-body-content td code,
.post-body-content th code {
  font-size: 0.9em;
  white-space: nowrap;
}

/* 深色主题下斑马纹要更明显一点，否则看不出 */
html[data-theme="dark"] .post-body-content tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, #ffffff 4%, transparent);
}
html[data-theme="dark"] .post-body-content tbody tr:hover {
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   局部字号（2026-10-18）
   ----------------------------------------------------------------------
   来源：编辑器工具栏「字号」下拉 → 生成 {{fs:xx}}…{{/fs}} 标记
        → markdown.py 渲染成 <span class="fs-xx"> → 这里定义档位字号

   为什么用 em 而不是 px：
     用 em 会跟随正文字号缩放，用户在后台把正文字号从 16 调到 20，
     局部字号也按比例跟着变（16px 的 1.35 倍 → 20px 的 1.35 倍），
     视觉节奏不会因为基础字号改变而错乱。

   档位差距刻意拉开：0.85 / 1 / 1.15 / 1.35。
     差距小于 0.1 肉眼几乎看不出，上去就没有意义。
   ══════════════════════════════════════════════════════════════════════ */

.post-body-content .fs-sm { font-size: 0.85em; }
.post-body-content .fs-md { font-size: 1em; }
.post-body-content .fs-lg { font-size: 1.15em; }
.post-body-content .fs-xl { font-size: 1.35em; }

/* 特大字号单独放宽行高，否则多行时会显得挤 */
.post-body-content .fs-xl { line-height: 1.6; }

/* 编辑器预览里也要一致，否则「所见」和「所得」不同 */
.preview-content .fs-sm { font-size: 0.85em; }
.preview-content .fs-md { font-size: 1em; }
.preview-content .fs-lg { font-size: 1.15em; }
.preview-content .fs-xl { font-size: 1.35em; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════════
   局部字体（2026-10-18）
   ----------------------------------------------------------------------
   来源：编辑器工具栏「局部字体」→ {{ff:xxx}}文字{{/ff}}
        → markdown.py 渲染成 <span class="ff-xxx">
   与「整篇字体」(.font-xxx) 的区别：
     · .font-xxx 加在正文容器上，变量 --font-family-active 由该元素定义，
       后代通过继承读到
     · .ff-xxx 加在行内 span 上，直接声明 font-family 即可
   注意 .ff-xxx 的优先级要高于容器上的 .font-xxx，否则「整篇宋体 + 局部黑体」
   时局部不生效。两者都是单类选择器，靠源码顺序（本规则更靠后）取胜。
   ══════════════════════════════════════════════════════════════════════ */

.post-body-content .ff-noto-sans,
.preview-content .ff-noto-sans {
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

.post-body-content .ff-noto-serif,
.preview-content .ff-noto-serif {
  font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
}

.post-body-content .ff-lxgw-wenkai,
.preview-content .ff-lxgw-wenkai {
  font-family: "LXGW WenKai TC", "Kaiti SC", "KaiTi", serif;
}

.post-body-content .ff-zcool-xiaowei,
.preview-content .ff-zcool-xiaowei {
  font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif;
}

/* ---------- 折叠按钮 ---------- */
.expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.expand-btn:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

/* ---------- 留言区 ---------- */
.comments-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.comments-header h2,
.comments-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.comment {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  transition: border-color var(--transition-fast);
}

.comment:hover {
  border-color: var(--color-border-hover);
}

.comment-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.comment-author {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text);
}

.comment-time {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.comment-content {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
}

.comment-form {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.comment-form textarea {
  min-height: 80px;
  margin-bottom: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.95rem;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  resize: vertical;
  line-height: 1.5;
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.comment-closed {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: var(--space-md);
  text-align: center;
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
}

/* ---------- 验证码 ---------- */
.captcha-area {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.captcha-img {
  display: block;
  width: 120px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
}

/* ---------- 表单通用 ---------- */
.form-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  max-width: 480px;
  margin: var(--space-lg) auto;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.form-input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.95rem;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.error {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: var(--space-md);
  background-color: var(--color-error-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-error-border);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-family);
  color: var(--color-surface);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast),
    box-shadow var(--transition-fast);
  text-decoration: none;
}

.btn:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-sm);
}

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-secondary:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border-hover);
}

.btn-danger {
  background-color: var(--color-danger);
}

.btn-danger:hover {
  background-color: var(--color-danger-hover);
}

.btn-save {
  background-color: var(--color-accent);
  color: var(--color-surface);
  padding: var(--space-sm) var(--space-lg);
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-save:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-sm {
  /* 独立可用的小按钮(不依赖 .btn 基类) */
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-sm:hover {
  background: var(--color-bg);
  border-color: var(--color-border-hover);
}

.btn-sm.btn-danger {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.btn-sm.btn-danger:hover {
  filter: brightness(0.92);
}

/* ---------- 管理后台 ---------- */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.badge-published {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.badge-draft {
  background-color: var(--color-bg);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

.admin-table th {
  background-color: var(--color-bg);
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table tr:hover td {
  background-color: var(--color-bg);
}

.actions {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

/* ---------- 编辑器布局 ---------- */
.container {
  max-width: 780px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

/* ★ 2026-10-18：.editor-layout / .editor-left / .editor-right 的布局定义
   已整体移到 06-admin-editor.css（视口自适应版本）。
   此处保留空占位以免其它模块引用断链 —— 不要在这里再加布局规则，
   否则会覆盖 06-admin-editor.css（本文件加载更晚，优先级更高）。 */

.preview-content {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: 0.95rem;
  line-height: 1.7;
  min-height: 200px;
}

.preview-content p {
  margin-bottom: var(--space-sm);
}

.preview-content code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  background-color: var(--color-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.preview-content pre {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

.preview-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
}

/* ---------- 图片上传 ---------- */
.upload-section {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast),
    background-color var(--transition-fast);
}

.upload-section:hover {
  border-color: var(--color-accent);
  background-color: var(--color-bg);
}

.upload-section p {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.upload-status {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
}

/* ── 后台左侧栏（v1.16.0 新增）── */
.admin-shell {
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
}

.admin-sidebar {
  flex: 0 0 220px;
  position: sticky;
  top: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-nav-item {
  display: block;
  padding: var(--space-sm) var(--space-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s, color 0.15s;
}

.admin-nav-item:hover {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* 2026-10-20：当前项改为"淡蓝底 + 深蓝字"（方案 E）。
   原来的实心 #0066cc + 白字太抢眼、像按钮不像导航项；用户明确否掉。
   这里只用 accent 的浅色衍生，不引入新色系。 */
.admin-nav-item.is-active {
  background-color: #eaf2fb;
  color: #0b4f9c;
  font-weight: 600;
}

.admin-nav-group {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.admin-nav-group-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--space-md) var(--space-xs);
}

.admin-nav-back {
  margin-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

/* ── 退出登录（2026-10-16 新增）────────────────────────────────────────────
   后台原先没有登出入口，用户登录后只能等 Cookie 过期。
   样式与普通导航项一致，只是文字用警示色，避免误点。 */
.admin-nav-logout-form {
  margin: 0;              /* 抵消浏览器对 form 的默认 margin */
  padding: 0;
}

.admin-nav-logout {
  width: 100%;            /* button 默认不撑满，和 <a> 对齐 */
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;   /* button 不继承字体，必须显式声明 */
  cursor: pointer;
  color: var(--color-danger);
}

.admin-nav-logout:hover {
  /* 覆盖 .admin-nav-item:hover 的普通底色，用淡红提示「这是退出」 */
  background-color: var(--color-error-bg);
  color: var(--color-danger-hover);
}

.admin-main {
  flex: 1;
  min-width: 0;
}

/* 设置索引页卡片 */
.settings-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
}

.settings-index-card {
  display: block;
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.settings-index-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.settings-index-title {
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.settings-index-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* 作者社交链接行 */
.link-row {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  align-items: center;
}

.link-row .form-input {
  flex: 1;
}

.link-row .link-remove {
  flex: 0 0 auto;
}

/* 导航栏 logo 副标题（v1.16.0） */
.logo-tagline {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin-left: var(--space-sm);
  font-weight: 400;
}

/* 响应式：平板收窄，手机折叠 */
@media (max-width: 1024px) {
  .admin-sidebar {
    flex-basis: 180px;
  }
}

@media (max-width: 829px) {
  .admin-shell {
    flex-direction: column;
  }
  .admin-sidebar {
    flex: none;
    width: 100%;
    position: static;
  }
  .admin-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-xs);
  }
  .admin-nav-item {
    white-space: nowrap;
  }
  .admin-nav-group {
    display: contents;
  }
  .admin-nav-group-title {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   深色后台 · 文字链接的对比度修正（2026-10-16）
   ──────────────────────────────────────────────────────────────────────
   问题（用户实测发现「表格标题发淡」）：
     全站深色强调色是 --color-accent: #3d7fc4。
     它用在**实心按钮底**上没问题（配白字，对比度 3.58），
     但直接当**文字色**放在深色底上只有 1.67 —— WCAG 正文要求 ≥4.5。

   原作者在 CSS 注释里记录过这个取舍（「区分度够、不刺眼」），
   但那是按「按钮」场景权衡的，漏了「文字链接」这一种用法。

   本段只修**文字链接**，不动 --color-accent 本身 ——
   这样按钮（用户已确认满意）完全不受影响。

   取值依据（深色卡片底 #4e5b68）：
     #3d7fc4（原 accent）  1.67  ❌ 不达标
     #8cc4ff               3.79  ⚠️ 改善但不够
     #a8d4ff               4.48  ⚠️ 差一点
     #b4dbff               4.81  ✅ 达标  ← 选它
   （WCAG 正文要求 ≥4.5；这个值刚过线，兼顾了「可读」与「不刺眼」）
   ══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body[class=""] .admin-table a,
html[data-theme="dark"] body[class=""] .post-title-link,
html[data-theme="dark"] body[class=""] .pending-post .post-title-link,
html[data-theme="dark"] body[class=""] .admin-page a:not(.btn):not(.btn-sm):not(.btn-small):not(.admin-nav-item) {
  color: #b4dbff;
}

html[data-theme="dark"] body[class=""] .admin-table a:hover,
html[data-theme="dark"] body[class=""] .post-title-link:hover,
html[data-theme="dark"] body[class=""] .pending-post .post-title-link:hover {
  color: #c8e4ff;
}

/* 编辑/删除这类小按钮：它们带自己的底色，不该被上面的规则改色。
   （.btn-danger 走 danger 色，.btn-muted 走次要色，都在别处定义） */
html[data-theme="dark"] body[class=""] .admin-table a.btn-sm,
html[data-theme="dark"] body[class=""] .admin-table a.btn-small {
  color: var(--color-text);
}

/* 深色后台侧栏文字 · 对比度补足（2026-10-16）
   ──────────────────────────────────────────────────────────────────────
   实测：.admin-nav-item 继承 --color-text-secondary: #b6c1cd，
        对深色侧栏底 #4e5b68 只有 3.81 —— 略低于 WCAG 正文要求 4.5。

   ⚠️ 为什么不直接改 --color-text-secondary：
      该变量全站 47 处引用（含前台的时间戳、返回顶部百分比、分页等），
      全局提亮会连带改变**前台**观感 —— 而用户要的是「前台效果不变」。

   → 所以只对后台侧栏这一处做局部提亮。
     取值 #ccd6e0 对 #4e5b68 = 4.72 ✅（达标里最保守的一档） */
html[data-theme="dark"] body[class=""] .admin-nav-item {
  color: #ccd6e0;
}

/* 当前项：深色下用深蓝底 + 浅蓝字（与浅色主题的淡蓝底对称） */
html[data-theme="dark"] body[class=""] .admin-nav-item.is-active {
  background-color: rgba(0, 102, 204, 0.22);
  color: #9ec6f0;
  font-weight: 600;
}

/* 分组标题同样偏暗，一并补足 */
html[data-theme="dark"] body[class=""] .admin-nav-group-title {
  color: #c2ccd8;
}

/* ── 后台侧栏版本号（2026-10-18）── */
.admin-version {
  margin-top: var(--space-sm);
  padding: 4px 10px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
  opacity: 0.7;
  border-top: 1px solid var(--color-border);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════════════════════════════════════════════
   设置项「恢复默认」按钮与「已自定义」徽标（2026-10-18）
   ----------------------------------------------------------------------
   用户要求：每项改了之后要能调回默认值，否则调乱了没法复位。
   设计：输入框/下拉框右侧一个轻量按钮，点一下清空为默认。
        非默认值时标题旁出现「已自定义」徽标，一眼看出哪些被改过。
   ══════════════════════════════════════════════════════════════════════ */

.setting-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.setting-row > .form-input {
  flex: 1 1 auto;
  min-width: 140px;
}

/* 恢复默认按钮：比主按钮更轻，不抢视觉焦点 */
.setting-reset {
  flex: 0 0 auto;
  font-size: 0.78rem;
  padding: 5px 10px;
  white-space: nowrap;
  /* 后台的 .btn 被统一成白底灰边（!important），
     「恢复默认」需要一个明确可点的边框，否则看着像纯文字。
     这里用虚线边框区分「这是操作、不是输入框」。 */
  border: 1px dashed var(--color-border-hover) !important;
  color: var(--color-text-secondary) !important;
  background: transparent !important;
}
.setting-reset:hover:not(:disabled) {
  border-style: solid !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}
.setting-reset:hover:not(:disabled) {
  opacity: 1;
}
.setting-reset:disabled {
  opacity: 0.55;
  cursor: default;
}

/* 「已自定义」徽标 */
.setting-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-accent);
  background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------- 复选框组 ---------- */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.checkbox-group label {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.checkbox-group input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  /* ══ 手机端导航重排（2026-10-20）══════════════════════════════
     目标布局：
       第一行 │ Aiozn.com            [登录]
       第二行 │ 探索无限可能  首页
     做法：navbar-inner 改用 grid，logo 与 nav-links 分两行；
     tagline 从 logo 右侧移到第二行左侧。
     ⚠️ 全部限定在 640px 断点内，桌面端一行不受影响。 */
  /* ⚠️ 必须带 body[class=""] 前缀 + !important：
     navbar 组件里有 `body[class=""] .navbar-inner { display:flex !important }`，
     普通 .navbar-inner 选择器会被它压掉（实测：导航仍是单行）。 */
  body[class=""] .navbar .navbar-inner,
  body:not([class]) .navbar .navbar-inner,
  html[data-theme="dark"] body[class=""] .navbar .navbar-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "logo    links"
      "tagline links" !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: var(--space-sm) !important;
    row-gap: 0 !important;
    padding: 10px var(--space-md) !important;
    min-height: 0 !important;
  }
  body[class=""] .navbar .navbar-inner > .logo,
  body:not([class]) .navbar .navbar-inner > .logo {
    grid-area: logo !important;
    font-size: 1.02rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: visible !important;   /* 不再截断成 "Ai..." */
    text-overflow: clip !important;
    margin: 0 !important;
  }
  body[class=""] .navbar .navbar-inner > .logo-tagline,
  body:not([class]) .navbar .navbar-inner > .logo-tagline {
    grid-area: tagline !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: .75;
  }
  body[class=""] .navbar .navbar-inner > .nav-links,
  body:not([class]) .navbar .navbar-inner > .nav-links {
    grid-area: links !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    font-size: 0.9rem !important;
  }
  .navbar-inner .nav-links a { white-space: nowrap !important; }
  /* 触控目标：不小于 40px，但不撑高导航 */
  .navbar-inner .nav-links > a,
  .navbar-inner .nav-links > .login-ghost > a {
    display: inline-flex; align-items: center; min-height: 40px;
  }

  /* ══ 手机端内容顺序（2026-10-20）══════════════════════════════
     用户要求：作者卡 → 搜索 → 分类 → 文章 → 标签云
     做法：page-layout 改 flex 纵向，把侧栏「拆成两段」插入文章前后 ——
       ① 侧栏只包含 作者卡 / 日期 / 搜索 / 分类（用 order 提到文章前）
       ② 标签云单独 order 到文章之后
     由于 DOM 里侧栏整体在文章后面，这里用 flex order 调整视觉顺序，
     **不改动桌面端任何一条规则**（全部在 640px 断点内）。 */
  .page-layout.layout-with-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-sm);
    gap: var(--space-md);
  }
  /* ══ 手机端顺序：作者 → 搜索 → 分类 → 文章 → 标签云 ══
     难点：标签云在 .sidebar 内部，而 .sidebar 整体在 DOM 里排在文章之后。
     单靠外层 order 无法把「侧栏的一部分」放到文章后面。

     解法：把 page-layout 与 sidebar 都设为 flex，用 order 排列四个块：
       page-layout 层：  sidebar(2)  →  main-col(3)
       sidebar 层内部： 作者(1) 搜索(2) 分类(3)  ← 这三个在文章前
                        标签云(10)              ← 这个要在文章后

     由于标签云被限制在 sidebar 内，无法跨越 main-col。因此改为：
     手机上把 sidebar 拆成两列渲染是不现实的（DOM 只有一个 aside），
     所以**接受一个折中**：标签云排在分类之后、文章之前，
     但默认折叠成一行（只占一行高度），视觉上与"文章前的小条目"无异。
     若用户展开，才看到完整标签云。

     ⚠️ 若将来要做到严格"文章之后"，需把 .sidebar-tags 从 aside 里
        移到 base.html 的页面级容器，改动面较大，暂不做。 */
  /* 手机端最终顺序（用户要求）：
       作者卡/搜索/分类（sidebar, order 1）
       → 文章（main-col, order 2）
       → 标签云（被 JS 移到 main-col 之后, order 3） */
  .page-layout.layout-with-sidebar .sidebar   { order: 1; }
  .page-layout.layout-with-sidebar .main-col  { order: 2; }
  .page-layout.layout-with-sidebar > .sidebar-tags { order: 3; }

  /* 手机上：日期卡隐藏（占空间且与手机状态栏信息重复） */
  .page-layout.layout-with-sidebar .sidebar .dtw { display: none; }
  .page-layout.layout-with-sidebar .sidebar .author-card { margin-top: 0; }
  /* 标签云挪到文章之后（视觉上排最后） */
  .page-layout.layout-with-sidebar .sidebar .sidebar-tags { order: 9; }
  /* ⚠️ tag-cloud-v3.css 里 .tag-cloud-bounce 带 display:block !important，
     必须用同等 specificity + !important 才能压住，否则折叠无效 */
  .sidebar-tags.is-collapsed .tag-cloud-bounce,
  .page-layout .sidebar-tags.is-collapsed .tag-cloud-bounce {
    display: none !important;
  }
  /* 被 JS 移到文章之后的标签云：作为独立卡片占满整行 */
  .page-layout.layout-with-sidebar > .sidebar-tags.is-mobile-moved {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box;
  }

  /* 折叠时容器高度必须归零 ——
     tag-cloud.css 里 .sidebar-tags 有 height:320px + min-height:300px!important，
     只隐藏内部标签云的话，外层卡片仍占 320px 空白（实测确认）。
     padding-bottom 也一并收掉，否则还会留 28px。 */
  .sidebar-tags.is-collapsed,
  .page-layout .sidebar-tags.is-collapsed {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 18px !important;
  }
  .page-layout.layout-with-sidebar .sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* 2026-10-20：手机上侧栏与文章必须同宽、占满整行。
       原来宽度由桌面 grid 的 320px 列决定，转 flex 后没重置，
       导致作者卡/搜索/分类比文章窄一截（用户截图指出）。 */
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    position: static !important;
    top: auto !important;
  }
  .page-layout.layout-with-sidebar .sidebar > * {
    margin-top: 0;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* 文章列同样占满 */
  .page-layout.layout-with-sidebar .main-col {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .page-layout.layout-with-sidebar .sidebar .author-card  { order: 1; }
  .page-layout.layout-with-sidebar .sidebar .sidebar-search { order: 2; }
  .page-layout.layout-with-sidebar .sidebar .sidebar-categories { order: 3; }
  .page-layout.layout-with-sidebar .sidebar .sidebar-tags { order: 10; }
  /* 正文：手机上字号与行距更易读 */
  .page-layout.layout-with-sidebar .post-body { font-size: 1rem; line-height: 1.75; }

  .main-content {
    padding: var(--space-md) var(--space-sm);
  }

  .post-card {
    padding: var(--space-md);
  }

  .post-title {
    font-size: 1.25rem;
  }

  .post {
    padding: var(--space-md);
  }

  .editor-layout {
    grid-template-columns: 1fr;
  }

  .editor-left,
  .editor-right {
    width: 100%;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .toolbar {
    flex-wrap: wrap;
  }

  .form-card {
    padding: var(--space-md);
    max-width: 100%;
  }

  .captcha-area {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* ---------- 减少动画 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .post-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }
}

/* ============================================================
   追加缺失样式（补全模板中使用的 class）
   ============================================================ */

/* ---------- 管理后台页面头部 ---------- */
/* admin_list.html 中标题 + 新建按钮的横排布局 */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
}

.admin-header h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin: 0;
}

/* ---------- 小尺寸按钮（兼容 .btn-small 写法） ---------- */
/* 模板中可能使用 .btn-small 或 .btn-sm，两者都支持 */
.btn-small {
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font-family);
  color: var(--color-surface);
  background-color: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast),
    box-shadow var(--transition-fast);
  text-decoration: none;
  line-height: 1.4;
}

.btn-small:hover {
  background-color: var(--color-accent-hover);
  box-shadow: var(--shadow-sm);
}

.btn-small.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-small.btn-secondary:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border-hover);
}

.btn-small.btn-danger {
  background-color: var(--color-danger);
}

.btn-small.btn-danger:hover {
  background-color: var(--color-danger-hover);
}

/* ---------- 文章分类标签 ---------- */
/* 用于文章卡片或详情页的分类标签 */
.category {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast);
}

.category:hover {
  background-color: var(--color-surface);
  border-color: var(--color-border-hover);
  color: var(--color-text);
}

/* ============================================================
   post-title-link —— 文章标题链接(去掉默认下划线,悬停变强调色)
   ============================================================ */
.post-title-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.post-title-link:hover {
  color: var(--color-accent);
}

/* 管理表格里的编辑链接 */
.admin-table a {
  color: var(--color-accent);
  text-decoration: none;
}

.admin-table a:hover {
  text-decoration: underline;
}

/* ---------- 首页卡片:两级折叠(一折预览 / 二折全文) ---------- */
.post-preview {
  position: relative;
  max-height: 110px;
  overflow: hidden;
  opacity: 1;
  margin-bottom: var(--space-sm);
  transition: opacity 0.35s ease, max-height 0.35s ease;
}
.post-preview::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-surface) 100%);
  pointer-events: none;
}
.post-content-full {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.35s ease, max-height 0.35s ease;
}
.post-content-full p {
  margin-bottom: var(--space-md);
  line-height: 1.8;
}
.post-content-full h1,
.post-content-full h2,
.post-content-full h3 {
  margin: var(--space-md) 0 var(--space-sm);
}
.post-content-full img {
  max-width: 100%;
  border-radius: var(--radius-sm);
}
.post-content-full pre {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  overflow-x: auto;
}
.post-content-full code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.post-card.expanded .post-preview {
  opacity: 0;
  max-height: 0;
}
.post-card.expanded .post-content-full {
  opacity: 1;
  max-height: 4000px;
}
.post-card.expanded:hover {
  transform: none;
}

.post-card-foot {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.post-permalink {
  font-size: 0.875rem;
  color: var(--color-accent);
  text-decoration: none;
}
.post-permalink:hover {
  text-decoration: underline;
}

/* ---------- 详情页正文：完整呈现，不折叠 ----------
   2026-10-09：取消正文折叠。用户原话：
     "详情页不要有折叠，不然点进去干嘛，在多点一次吗？
      逻辑是点了详情页是减少首页多个主题帖的干扰，不是再进去点一次展开。"
   故此处不再限制 max-height，也移除底部渐隐遮罩。
   （首页卡片的折叠保留 —— 那是为减少列表干扰，与此处目的不同。） */
.post .post-body-content {
  max-height: none;
  overflow: visible;
}
.comments-list {
  display: none;
}
.comments-list.expanded {
  display: block;
}


/* ---------- 编辑器容器：占满视口剩余高度 ----------
   ★ 2026-10-18 最终方案

   演进（踩过的坑都记在这里，避免以后再试）：
     ① 最初 min-height:60vh —— 预览框永远 60vh，下面一片空白 ✗
     ② 改 calc(100vh - 300px) —— 估算值不准，编辑器顶到屏幕外 ✗
     ③ 改 JS 实测 getBoundingClientRect —— 写入的高度会反过来撑大页面，
        下次测量被推下去 → 越算越小 → 退到 360px 下限（自锁）✗
     ④ 改 100dvh —— 无头 Chrome / 部分浏览器行为不稳 ✗

   最终：**不猜高度，用 sticky 让编辑器吸附在视口内**。
     · 编辑器容器本身高度 = 视口高度 - 32px（只依赖 100vh，最稳的单位）
     · margin-top 由上方表单字段自然撑开，不参与计算
     · position: sticky; top: 16px → 页面滚动时编辑器始终完整可见
   这样无论上方字段多高，编辑器都能完整显示且可操作。 */
.admin-page .editor-wrap {
  display: flex;
  flex-direction: column;
  /* ══ 2026-10-20 修复：高度不能再按 vh 估 ══
     原实现 height: clamp(380px, 57vh, 900px) 假设"编辑器顶部固定在 445px"，
     但上方表单高度会变（多一个标签、分类换行……），实测 1400×1000 下
     顶部在 519px，57vh=488px → 编辑器底部冲到 1007px，超出视口 150px，
     底部「保存」按钮被推出屏幕，长文内容也看不到。

     现在改为：**用 sticky 让编辑器贴住视口，高度 = 视口高度 − 上下留白**。
     · position: sticky + top: 16px：滚动时编辑器始终完整可见
     · height: calc(100vh - 100px)：给上下各留 50px，不依赖顶部位置
     · min-height 保证小屏至少 320px 可操作 */
  /* ══════════════════════════════════════════════════════════════════
     ★ 高度规则总览（2026-10-20 整理，改之前务必读完）
     ──────────────────────────────────────────────────────────────────
     历史演进与问题根源：
       · 6f0e8ab  旧 textarea 编辑器：只有 .editor-wrap 一层设高度
                  → height: clamp(380px, 57vh, 900px)
       · 4ebbb78  换成"叠加层"编辑器：多出 .editor-stack，它也设了
                  clamp(380px, 57vh, 900px) → 两层高度叠加
       · 1f6e104  换成 v2 编辑器（.be-wrapper）：editor.css 里又写了
                  height: clamp(400px, 60vh, 900px) + min-height: 420px
                  → 三层各自设高度，互相不知道对方存在

     后果：57vh 是"1920×1080 下顶部在 445px"时估出来的（注释自己写了"估的"）。
           上方表单一变高（多一个标签、分类换行），这个值就错，导致：
             · 编辑器底部冲出视口，底部「保存」按钮看不见
             · 长文内容被裁掉，也看不到滚动条

     现行规则（**唯一真源**）：
       1. 只有 .editor-wrap 管高度，由 JS（admin_edit.html 的
          fitEditorHeight）精确设置为"视口 − 顶部位置 − 底栏 − 留白"
       2. .editor-stack / .be-wrapper 一律 height:100% + min-height:0，
          不再有任何 clamp/vh/px 固定值（含移动端媒体查询）
       3. 改高度相关代码前，先跑 6 种分辨率的回归：
          1024×768 / 1280×720 / 1366×768 / 1440×900 / 1920×1080 / 2560×1440
     ══════════════════════════════════════════════════════════════════ */

  /* ★ 最终方案（2026-10-20，已弃用 vh 估算）：
     CSS 无法知道"编辑器顶部距视口多少"，任何 vh 百分比都会在上方表单
     变高时失效（实测顶部 519px 时 57vh=488px 导致底部冲出视口）。

     改用 **max-height + 内部滚动**：
       · 上限 = 视口高度 − 头部导航(约 60) − 上下留白(约 120)
       · 编辑器内部（.be-content / textarea）负责滚动
       · 屏幕矮时编辑器缩到 320px，页面整体滚动
     这样无论上方表单多高，编辑器都不会把底部按钮顶出屏幕。 */
  /* 高度由 JS 精确设置（见 admin_edit.html 的 fitEditorHeight）：
     CSS 拿不到"顶部距视口多远"，任何固定值在表单高度变化时都会错。
     JS 用 innerHeight − 顶部位置 − 底栏高度 − 留白 算出真实可用高度。
     这里给一个兜底值，JS 未执行时也不至于塌成 0。 */
  max-height: calc(100vh - 180px);
  min-height: 320px;
  margin-bottom: var(--space-lg);
}

/* 视图切换按钮条 */
.editor-view-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: var(--space-xs, 6px);
  flex-wrap: wrap;
}

/* 视图切换按钮 —— 与站点按钮同一套语言
   2026-10-18 改：原来是自己另写的一套（边框+文字色），与 .btn 不一致，
   看起来"不是同一个站"。现改为：
     · 未选中 = .btn-secondary 的观感（surface 底 + border + 文字色）
     · 选中   = .btn 的观感（accent 底 + surface 文字 + hover 深一档）
   所有颜色/圆角/过渡全部取自站点 token，跟随深浅主题。 */
.editor-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 16px;
  font-size: 0.86rem;
  font-weight: 500;
  font-family: var(--font-family);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.5;
  transition: background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.editor-view-btn:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-sm);
}

.editor-view-btn.is-active,
.editor-view-btn.is-active:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

/* 两个按钮各自独立（不做分段控件）——后台的按钮语义就是"独立动作"，
   贴在一起会让「编辑/预览」看起来像一个开关，而实际是两个并列选项。 */

.editor-view-hint {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  opacity: 0.75;
}

/* 布局：双栏（默认） */
/* 2026-10-18：默认单列 —— 编辑框占满整个宽度。
   点「预览」时才把预览区显示出来（见下方 .view-preview 规则）。
   原先是 1fr 1fr 双栏，编辑区只有一半宽。 */
.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  flex: 1;
  min-height: 0;   /* 关键：允许子元素在 flex 容器内正确收缩并滚动 */
}

/* 默认隐藏预览列 */
.editor-right { display: none; }

.editor-left,
.editor-right {
  display: flex;
  flex-direction: column;
  min-height: 0;   /* 关键 */
  min-width: 0;
}

/* 工具栏 */
.editor-left .toolbar {
  flex: 0 0 auto;
  margin-bottom: var(--space-xs, 6px);
}

/* 正文输入框：占满剩余高度 */
.editor-textarea {
  flex: 1;
  min-height: 0;          /* 关键：配合 flex 才能内部滚动而不是撑高 */
  width: 100%;
  resize: none;           /* 高度由容器决定，不让用户拖 */
  line-height: 1.7;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  tab-size: 4;
  overflow-y: auto;
}

/* 预览区：同样占满剩余高度并独立滚动 */
.editor-right .preview-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
}

/* ---------- 视图模式：编辑 ↔ 预览（二选一，同占满整宽）---------- */
/* 三模式（2026-10-18）：
     view-edit   所见即所得 —— 富文本区可见，源码框隐藏
     view-source 源码       —— 源码 textarea 可见，富文本区隐藏
     view-preview 预览      —— 只读渲染结果
   三者都在 .editor-left 内（源码/富文本互斥），预览在 .editor-right。 */
.editor-wrap.view-edit .editor-left  { display: flex; }
.editor-wrap.view-edit .editor-right { display: none; }

.editor-wrap.view-preview .editor-left  { display: none; }
.editor-wrap.view-preview .editor-right { display: flex; }

.editor-wrap.view-source .editor-left  { display: flex; }
.editor-wrap.view-source .editor-right { display: none; }

/* 富文本区 / 源码框的显示互斥 —— 由 JS 通过 hidden 属性控制，
   但这里再保一层，避免 JS 未执行时两者同时出现 */
.editor-wrap.view-source #content-rt { display: none; }
.editor-wrap.view-source #content {
  display: block;
  flex: 1 1 auto;
  min-height: 380px;
  height: clamp(380px, 57vh, 900px);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
  resize: none;
}
/* 源码模式工具栏里的字号/字体下拉不适用（那些是富文本操作） */
.editor-wrap.view-source .md-toolbar { opacity: 0.55; }

/* 宽屏（≥1401px）：视口更高时同比例放大，上限 1000px */
@media (min-width: 1401px) {
  .admin-page .editor-wrap {
    height: clamp(480px, 57vh, 1000px);
  }
}

/* 中等屏：单列，无需特殊处理（保留占位说明，避免以后误以为漏了） */

/* 窄屏（≤640px）：强制单栏 + 模式切换才有意义 */
@media (max-width: 640px) {
  .admin-page .editor-wrap {
    height: auto;
    min-height: 0;
  }
  .editor-layout {
    grid-template-columns: 1fr;
    flex: none;
  }
  .editor-textarea {
    min-height: 45vh;
    flex: none;
  }
  .editor-right .preview-content {
    min-height: 30vh;
    flex: none;
  }
  /* 窄屏：编辑/预览切换逻辑同上，无需额外规则 */
}

/* ══════════════════════════════════════════════════════════════════
   编辑器实时预览的排版（2026-10-18 新增）
   ------------------------------------------------------------------
   预览区原来只有 p / code / pre / blockquote 四条规则，表格与列表
   完全没样式 —— 加了表格支持后看起来是「挤在一起的文字」。
   这里补齐常用块级元素的排版，让预览接近发布后的样子。
   （正式文章样式在 post-detail.css，此处只求「看得清、结构分明」）
   ══════════════════════════════════════════════════════════════════ */

.editor-right .preview-content h1,
.editor-right .preview-content h2,
.editor-right .preview-content h3,
.editor-right .preview-content h4,
.editor-right .preview-content h5,
.editor-right .preview-content h6 {
  margin: 1.1em 0 0.5em;
  line-height: 1.35;
  font-weight: 600;
}
.editor-right .preview-content h1 { font-size: 1.55rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.3em; }
.editor-right .preview-content h2 { font-size: 1.3rem;  border-bottom: 1px solid var(--color-border); padding-bottom: 0.25em; }
.editor-right .preview-content h3 { font-size: 1.12rem; }
.editor-right .preview-content h4 { font-size: 1rem; }
.editor-right .preview-content h5,
.editor-right .preview-content h6 { font-size: 0.92rem; color: var(--color-text-secondary); }

.editor-right .preview-content > *:first-child { margin-top: 0; }

/* 代码块：加边框与左侧强调线，和行内代码区分开 */
.editor-right .preview-content pre {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  overflow-x: auto;
  margin: 0.9em 0;
}
.editor-right .preview-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.84rem;
  line-height: 1.65;
}

/* 表格 */
.editor-right .preview-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.9em 0;
  font-size: 0.88rem;
  display: block;
  overflow-x: auto;   /* 列多时横向滚动，不撑破预览框 */
}
.editor-right .preview-content th,
.editor-right .preview-content td {
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.editor-right .preview-content th {
  background-color: var(--color-bg);
  font-weight: 600;
  white-space: nowrap;
}
.editor-right .preview-content tbody tr:nth-child(even) {
  background-color: color-mix(in srgb, var(--color-bg) 55%, transparent);
}

/* 列表 */
.editor-right .preview-content ul,
.editor-right .preview-content ol {
  margin: 0.7em 0;
  padding-left: 1.5em;
}
.editor-right .preview-content li { margin: 0.25em 0; }

/* 引用 */
.editor-right .preview-content blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.4em 0.9em;
  margin: 0.9em 0;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  border-radius: var(--radius-sm);
}

/* 图片：不超出预览框 */
.editor-right .preview-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* 分隔线 */
.editor-right .preview-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.4em 0;
}

/* 链接 */
.editor-right .preview-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   编辑器增强（2026-10-18 第一档 + 第二档）
   ------------------------------------------------------------------
   标题常显 / 元信息折叠 / Markdown 工具栏 / 发布动作区 / 字数统计
   ══════════════════════════════════════════════════════════════════ */

/* ── 标题行 ── */
.editor-title-row {
  margin-bottom: var(--space-sm);
}
.editor-title-input {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 10px 14px;
}

/* ── 元信息折叠面板 ── */
.editor-meta {
  margin-bottom: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}
.editor-meta-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 0.86rem;
  color: var(--color-text-secondary);
  user-select: none;
}
.editor-meta-summary::-webkit-details-marker { display: none; }
.editor-meta-summary::before {
  content: '▸';
  font-size: 0.7rem;
  transition: transform 0.15s ease;
}
.editor-meta[open] .editor-meta-summary::before {
  transform: rotate(90deg);
}
.editor-meta-summary:hover { color: var(--color-text); }
.editor-meta-label { font-weight: 500; }
.editor-meta-badge {
  margin-left: auto;
  padding: 1px 8px;
  font-size: 0.76rem;
  border-radius: 999px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-meta-body {
  padding: 4px 14px 12px;
  border-top: 1px solid var(--color-border);
}
.editor-meta-body .form-group { margin-bottom: var(--space-sm); }
.editor-meta-body .form-hint { margin-top: 2px; }

/* ── Markdown 工具栏 ── */
/* ══════════════════════════════════════════════════════════════════════
   工具栏：两行分组（2026-10-18 重排）
   ----------------------------------------------------------------------
   旧版单行 18 个控件 + nowrap，右侧字数统计被挤出可视区（用户截图确认）。

   新版参考 Word「开始」选项卡：
     第一行：段落格式（标题）│ 字形（B I 代码）│ 字号 / 字体
     第二行：段落（列表 引用）│ 插入（链接 图片 表格 代码块 分隔线）│ 字数
   每组前有小标签说明，降低上手成本。
   ══════════════════════════════════════════════════════════════════════ */
.md-toolbar {
  display: flex;
  flex-direction: column;   /* 两行纵向堆叠 */
  gap: 3px;
  padding: 5px 6px;
  margin-bottom: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.md-toolbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;          /* 极窄屏时才换行，正常情况下两行足够 */
  min-height: 26px;
}

/* 组标签：小号灰字，说明这一组是干什么的 */
.md-tb-label {
  flex: 0 0 auto;
  padding: 0 2px 0 4px;
  font-size: 0.68rem;
  line-height: 1;
  color: var(--color-text-muted);
  user-select: none;
  white-space: nowrap;
}
.md-toolbar-row > .md-tb-label:first-child { padding-left: 0; }
.md-toolbar::-webkit-scrollbar { height: 3px; }
.md-toolbar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}
.md-tb-group {
  display: flex;
  gap: 1px;
  align-items: center;
  padding-right: 6px;
  border-right: 1px solid var(--color-border);
  flex: 0 0 auto;
}
.md-tb-group-last { border-right: none; padding-right: 0; }
/* 工具栏整体不换行；空间不足时只让「属性组」压缩，字数统计固定 */
.md-toolbar { align-items: stretch; }
.md-tb-group:last-child { border-right: none; }
/* 字数统计：不用 margin-left:auto（配合 overflow-x 会把内容挤出可视区），
   改为固定在右侧、不参与滚动 */
.md-tb-right {
  border-right: none;
  margin-left: auto;        /* 靠右 */
  padding: 0 2px 0 10px;
  flex-shrink: 0;
}

.md-tb {
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  font-size: 0.72rem;
  white-space: nowrap;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  line-height: 1;
  transition: background-color .12s, color .12s, border-color .12s;
}
.md-tb:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}
.md-tb:active { transform: translateY(1px); }
.md-tb-bold { font-weight: 700; font-family: var(--font-sans, inherit); }
.md-tb-italic { font-style: italic; font-family: var(--font-sans, inherit); }

.md-wordcount {
  font-size: 0.76rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding: 0 4px;
}

/* 拖拽高亮 */
.editor-textarea.is-dragover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 25%, transparent);
}

/* ── 发布动作区 ── */
.editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}
.editor-actions-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.editor-actions-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.editor-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.editor-autosave {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  opacity: .8;
}
.editor-autosave.is-ok  { color: var(--color-success, #16a34a); }
.editor-autosave.is-err { color: var(--color-danger, #dc2626); }
.editor-status {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin-right: 4px;
}
.editor-status .is-pub   { color: var(--color-success, #16a34a); }
.editor-status .is-draft { color: var(--color-warning-fg, #8a5a00); }

/* 发布按钮：在 .btn 基础之上仅加一点强调（字重、最小宽度、点击阴影） */
.btn-publish {
  font-weight: 600;
  min-width: 108px;
}
.btn-publish:hover {
  box-shadow: var(--shadow-md);
}

/* 窄屏：工具栏可横向滚动，动作区上下堆叠 */
@media (max-width: 640px) {
  .md-toolbar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .md-toolbar::-webkit-scrollbar { height: 4px; }
  .md-tb-right { margin-left: 8px; }
  .editor-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .editor-actions-right {
    justify-content: flex-end;
  }
  .editor-actions-right .btn { flex: 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   图片插入菜单（2026-10-18）
   ----------------------------------------------------------------------
   三种方式：上传本站 / 上传图床 / 填外部网址。
   下拉菜单而不做三个按钮：工具栏已经很挤，且三者是「同一件事的不同做法」，
   归到一个入口更符合心智模型。
   ══════════════════════════════════════════════════════════════════════ */

.md-img-group {
  position: relative;
  display: inline-flex;
}
.md-img-group .md-tb {
  white-space: nowrap;
}

.md-img-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 236px;
  padding: 4px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.md-img-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  line-height: 1.45;
}
.md-img-item:hover {
  background-color: var(--color-bg);
}
.md-img-item b {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
}
.md-img-item small {
  display: block;
  margin-top: 1px;
  font-size: 0.74rem;
  color: var(--color-text-secondary);
  font-weight: 400;
}
.md-img-i {
  flex: 0 0 auto;
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0.85;
}

/* 窄屏：菜单靠右展开，避免超出视口 */
@media (max-width: 640px) {
  .md-img-menu {
    left: auto;
    right: 0;
    min-width: 210px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   工具栏下拉（字号 / 字体）（2026-10-18）
   ----------------------------------------------------------------------
   工具栏已经很挤（H1-H3 / B I / 链接 图片 / 列表 1. 引用 表格 代码块 —），
   再塞两个 <select> 必须比按钮更紧凑，否则会换行破坏单行布局。
   做法：高度对齐按钮（24px）、无边框、hover 才显底，融入工具栏而非突兀。
   ══════════════════════════════════════════════════════════════════════ */

.md-tb-select {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  padding: 0 18px 0 7px;
  font-family: var(--font-family);
  font-size: 0.74rem;
  line-height: 22px;
  color: var(--color-text-secondary);
  background-color: transparent;
  /* 自绘小三角（appearance:none 后原生箭头消失） */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 10px, calc(100% - 6px) 10px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast);
}
.md-tb-select:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-text);
}
.md-tb-select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* 字体下拉稍宽（要放下「思源黑体」这类四字名称） */
.md-tb-select.md-tb-font {
  max-width: 108px;
  padding-right: 18px;
}

/* ══════════════════════════════════════════════════════════════════════
   富文本编辑区（2026-10-18）
   ----------------------------------------------------------------------
   用户反馈：「{{fs:xl}}…这个在编辑框太难受了」。
   编辑区从 textarea 改为 contenteditable，所见即所得：
   选中文字点字号，文字当场变大；点字体，当场变体。

   要点：
     · 视觉上要像「编辑框」而非「文章」—— 保留 1.6 行高、稍灰的字色，
       避免用户误以为是预览
     · 用 :empty:before 做 placeholder（contenteditable 不支持 placeholder 属性）
     · 块级元素的间距比正文紧凑，编辑时省空间
   ══════════════════════════════════════════════════════════════════════ */

.editor-richtext {
  flex: 1 1 auto;
  min-height: 380px;
  height: clamp(380px, 57vh, 900px);
  overflow-y: auto;
  padding: 14px 16px;
  font-family: var(--font-family);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.editor-richtext:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* placeholder */
.editor-richtext:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-muted);
  pointer-events: none;
}

/* 内部块级元素：编辑态用更紧凑的间距 */
.editor-richtext > * { margin: 0 0 6px; }
.editor-richtext > *:last-child { margin-bottom: 0; }

.editor-richtext h1 { font-size: 1.5em; font-weight: 700; line-height: 1.35; margin: 14px 0 6px; }
.editor-richtext h2 { font-size: 1.25em; font-weight: 600; line-height: 1.4; margin: 12px 0 5px; }
.editor-richtext h3 { font-size: 1.1em; font-weight: 600; line-height: 1.45; margin: 10px 0 4px; }

.editor-richtext blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 2px 0 2px 12px;
  margin: 8px 0;
  color: var(--color-text-secondary);
}

.editor-richtext ul,
.editor-richtext ol { padding-left: 1.6em; margin: 6px 0; }
.editor-richtext li { margin: 2px 0; }

.editor-richtext code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
}

/* 代码块 / 表格：保持源码文本，等宽显示 */
.editor-richtext pre.rt-pre {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.6;
  padding: 10px 12px;
  margin: 8px 0;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* 表格/分隔线这类保留源码的行，用等宽+淡底提示「这里不是所见即所得」 */
.editor-richtext p.rt-plain {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  background-color: var(--color-bg);
  padding: 2px 6px;
  border-radius: 4px;
}

/* 字号 / 字体在编辑区里直接生效（用户要的「所见即所得」） */
.editor-richtext .fs-sm { font-size: 0.85em; }
.editor-richtext .fs-md { font-size: 1em; }
.editor-richtext .fs-lg { font-size: 1.15em; }
.editor-richtext .fs-xl { font-size: 1.35em; line-height: 1.6; }

.editor-richtext .ff-noto-sans { font-family: "Noto Sans SC", var(--font-family); }
.editor-richtext .ff-noto-serif { font-family: "Noto Serif SC", "Songti SC", serif; }
.editor-richtext .ff-lxgw-wenkai { font-family: "LXGW WenKai TC", "Kaiti SC", serif; }
.editor-richtext .ff-zcool-xiaowei { font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif; }

/* 选中文字时的高亮，在浅色编辑区里要够醒目 */
.editor-richtext ::selection {
  background-color: color-mix(in srgb, var(--color-accent) 24%, transparent);
}

@media (max-width: 720px) {
  .editor-richtext { min-height: 300px; height: 46vh; padding: 12px; }
}

/* 编辑器脚本自检警告（2026-10-18）
   只在 JS 没正常加载时显示。用醒目的警示色，不要做成"可忽略的提示"。 */
.js-health {
  margin: 10px 0 0;
  padding: 10px 14px;
  font-size: 0.86rem;
  line-height: 1.65;
  color: #8a4b00;
  background-color: #fff6e6;
  border: 1px solid #f0c27a;
  border-left: 4px solid #e8a13a;
  border-radius: var(--radius-sm);
}
.js-health[hidden] { display: none; }
.js-health b { font-weight: 700; }
.js-health kbd {
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: #fff;
  border: 1px solid #e0c9a6;
  border-radius: 3px;
}
html[data-theme="dark"] .js-health {
  color: #ffd9a0;
  background-color: #33270f;
  border-color: #6b5220;
  border-left-color: #b8862e;
}


/* 整篇字体下拉：比局部字体宽一点，要放下「系统默认（苹方 / 微软雅黑）」
   这类长名称；同时限制最大宽度避免挤走其它控件。 */
.md-tb-select.md-tb-font-wide {
  max-width: 118px;
}

/* 编辑器构建版本徽标（2026-10-18）
   用途：排查「改了却没效果」时，一眼区分「新版页面」和「缓存旧页面」。
   做得低调（浅灰小字），不干扰正常使用，但足够辨认。 */
.editor-build {
  margin-left: auto;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  white-space: nowrap;
  user-select: all;   /* 方便用户选中复制给我 */
}

/* ══════════════════════════════════════════════════════════════════════
   三模式（回退版实现，2026-10-18）
   ----------------------------------------------------------------------
   编辑 / Markdown 源码 / 预览 共用同一个 textarea：
     · 编辑模式    —— 正文字体，工具栏可用
     · 源码模式    —— 等宽字体，方便看清标记符号
     · 预览模式    —— 只读渲染
   不做 contenteditable 双向转换，避免引入不稳定因素。
   ══════════════════════════════════════════════════════════════════════ */

/* 源码模式：textarea 切等宽字体 */
.editor-textarea.is-source {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.7;
}

/* 源码模式下工具栏半透明（字号/字体是给正文用的，源码里看到的是标记本身） */
.editor-wrap.view-source .md-toolbar {
  opacity: 0.6;
}

/* ══════════════════════════════════════════════════════════════════════
   编辑区叠加层（2026-10-18）
   ----------------------------------------------------------------------
   结构：
     .editor-stack
       ├─ pre.editor-highlight  ← 显示层（标记淡化 + 内容按效果显示）
       └─ textarea#content      ← 输入层（文字透明，只显光标）

   ★ 两层必须**像素级对齐**，否则光标准会被文字盖住。
     对齐清单（任何一项不一致都会错位）：
       font-family / font-size / line-height / letter-spacing / word-spacing
       padding / border / box-sizing / white-space / word-break / tab-size
     这里用 CSS 变量集中定义，两层共同引用 —— 只改一处，两层同步。

   textarea 本身不能用 font-weight/color 等会影响字形宽度的属性差异，
   所以显示层的 <strong> 等只加粗显示，textarea 里保持常规 —— 
   加粗会让字宽变化导致错位，故 textarea 里 ** 字符本身占位，
   显示层把 ** 淡化、内容加粗，宽度允许略有偏差（不影响光标定位，
   因为光标位置由 textarea 决定，与显示层无关）。
   ══════════════════════════════════════════════════════════════════════ */

.editor-stack {
  position: relative;
  flex: 1 1 auto;
  /* ★ 2026-10-20：高度由 .editor-wrap / .editor-left 的 flex 决定，
     自己**不再设固定高度**。
     原先这里有 height: clamp(380px, 57vh, 900px)，与外层 .editor-wrap
     的同类高度叠加，导致编辑区比可视区域高 → 长文内容尾部被裁掉、
     又看不到滚动条（用户实测：文章开头和结尾都不见了）。 */
  min-height: 0;
  height: 100%;

  /* ── 共用排版参数（两层唯一真源）── */
  --ed-font: var(--font-family);
  --ed-size: 0.95rem;
  --ed-line: 1.75;
  --ed-pad-y: 14px;
  --ed-pad-x: 16px;
  --ed-radius: var(--radius-md);
}

.editor-stack > * {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: var(--ed-pad-y) var(--ed-pad-x);
  font-family: var(--ed-font);
  font-size: var(--ed-size);
  line-height: var(--ed-line);
  font-weight: 400;
  letter-spacing: normal;
  word-spacing: normal;
  text-indent: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  tab-size: 4;
  border: 1px solid var(--color-border);
  border-radius: var(--ed-radius);
  box-sizing: border-box;
  overflow-y: auto;
}

/* ══ 2026-10-20 修复：v2 编辑器容器不要继承旧叠加层的排版 ══
   上面的 `.editor-stack > *` 是给**旧叠加层**（highlight + textarea 两层对齐）
   设计的：它给每个子元素强制 padding + border + 字族字号。
   但 v2 的 .be-wrapper 自己是完整的编辑器容器，内部 .be-content 已有
   16px/20px padding —— 再套一层 .editor-stack > * 的 padding，
   宽度被吃掉 32px、右侧空出一条，页面上看起来像并排了两个滚动条。
   实测：editor-stack 748px，be-wrapper 只有 696px（差 52px）。
   规则：v2 容器恢复自己的盒子模型，不受叠加层规则影响。 */
.editor-stack > .be-editor {
  position: static;
  inset: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  white-space: normal;
  box-sizing: border-box;
  /* 高度完全交给 .editor-stack，自己不另设高度 ——
     否则 .be-wrapper 的 clamp(400px,60vh,900px) 与容器的
     clamp(380px,57vh,900px) 打架，内容尾部被裁掉 */
  height: 100%;
  min-height: 0;
}

/* ══ v2 容器高度：完全交给外层，自己不留任何固定值 ══
   editor.css 里 .be-wrapper 原本有
       min-height: 420px;  height: clamp(400px, 60vh, 900px);
   这是 v2 编辑器独立使用时的高度，但嵌进后台后与外层
   .editor-wrap / .editor-stack 的高度叠加，导致：
     · 编辑器比容器高 → 长文内容被裁掉、看不到滚动条
     · 底部「保存」按钮被顶出视口
   选择器带上 .editor-stack 前缀提高优先级，压过 editor.css 的同名规则。 */
.editor-stack .be-wrapper {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* 显示层：在下面，不接收事件 */
.editor-highlight {
  z-index: 1;
  color: var(--color-text);
  background-color: var(--color-surface);
  pointer-events: none;
  /* 隐藏滚动条（滚动由 textarea 驱动，这里只跟随位置） */
  scrollbar-width: none;
}
.editor-highlight::-webkit-scrollbar { display: none; }

/* 输入层：在上面，文字透明只留光标 */
.editor-stack > textarea.editor-textarea {
  z-index: 2;
  color: transparent;
  caret-color: var(--color-text);
  background-color: transparent;
  resize: none;
  outline: none;
}
.editor-stack > textarea.editor-textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}
/* 占位符在透明文字模式下仍要正常显示 */
.editor-stack > textarea.editor-textarea::placeholder {
  color: var(--color-text-muted);
  -webkit-text-fill-color: var(--color-text-muted);
}
/* 选中高亮：让浏览器给 textarea 的选区着色（否则透明文字选中也看不见） */
.editor-stack > textarea.editor-textarea::selection {
  background-color: color-mix(in srgb, var(--color-accent) 28%, transparent);
  color: transparent;
}

/* ── 显示层里的标记样式 ──
   淡灰、略小、不加粗：视觉上退到背景，但依然看得见、可读。
   对比度刻意压低到约 1.6:1 —— 这里是「标记」不是「内容」，
   太清楚会喧宾夺主。 */
.editor-highlight .md-mark {
  color: color-mix(in srgb, var(--color-text-muted) 55%, transparent);
  font-size: 0.92em;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.02em;
}

.editor-highlight .md-h { font-weight: 700; }
.editor-highlight .md-h1 { font-size: 1.5em; }
.editor-highlight .md-h2 { font-size: 1.25em; }
.editor-highlight .md-h3 { font-size: 1.1em; }
.editor-highlight .md-h4,
.editor-highlight .md-h5,
.editor-highlight .md-h6 { font-size: 1em; font-weight: 600; }

.editor-highlight .md-quote { color: var(--color-text-secondary); }
.editor-highlight .md-linktext { color: var(--color-accent); }

/* 表格行：整行淡化（编辑态按源码看更好改） */
.editor-highlight .md-table-line {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* 内容按最终效果显示 —— 字号 / 字体 / 粗体 / 斜体 / 代码 */
.editor-highlight .fs-sm { font-size: 0.85em; }
.editor-highlight .fs-md { font-size: 1em; }
.editor-highlight .fs-lg { font-size: 1.15em; }
.editor-highlight .fs-xl { font-size: 1.35em; }

.editor-highlight .ff-noto-sans { font-family: "Noto Sans SC", var(--font-family); }
.editor-highlight .ff-noto-serif { font-family: "Noto Serif SC", "Songti SC", serif; }
.editor-highlight .ff-lxgw-wenkai { font-family: "LXGW WenKai TC", "Kaiti SC", serif; }
.editor-highlight .ff-zcool-xiaowei { font-family: "ZCOOL XiaoWei", "Noto Serif SC", serif; }

.editor-highlight strong { font-weight: 700; }
.editor-highlight em { font-style: italic; }
.editor-highlight code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0 2px;
  border-radius: 3px;
  background-color: var(--color-bg);
}

/* Markdown 源码模式：关闭叠加层，textarea 直接显示等宽文本 */
.editor-wrap.view-source .editor-highlight { display: none; }
.editor-wrap.view-source .editor-stack > textarea.editor-textarea {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  caret-color: var(--color-text);
}

@media (max-width: 720px) {
  /* 2026-10-20：移动端同样不能再写死高度，交给 JS 自适应 */
  .editor-stack { min-height: 300px; height: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   叠加层行对齐（2026-10-19）
   ----------------------------------------------------------------------
   问题：显示层里 fs-xl（1.35em）会让那一行变高，而 textarea 里行高不变，
        两层行高不一致 → 点击定位、光标、选区全部错位（用户截图确认）。

   解决：显示层的每个物理行包一层 .hl-line，行高用**固定 px**（与 textarea
        的 line-height 换算值一致），放大的字号通过 font-size 变化但不撑高行框。

   为什么用固定 px 而不是倍数：
        倍数行高 × 变大的字号 = 更大的行高。必须固定成绝对值才能锁死。
        这里 0.95rem × 1.75 ≈ 26.6px，取 26.6px 与 textarea 精确匹配。
   ══════════════════════════════════════════════════════════════════════ */

.editor-highlight .hl-line {
  /* 与 .editor-stack 的 --ed-size(--0.95rem) × --ed-line(1.75) 一致 */
  line-height: calc(0.95rem * 1.75);
  min-height: calc(0.95rem * 1.75);
  margin: 0;
  padding: 0;
}

/* 放大/缩小的字号**不得改变行框高度** —— 行高由上一条 lock 住 */
.editor-highlight .fs-sm,
.editor-highlight .fs-md,
.editor-highlight .fs-lg,
.editor-highlight .fs-xl,
.editor-highlight .md-h1,
.editor-highlight .md-h2,
.editor-highlight .md-h3,
.editor-highlight strong,
.editor-highlight em,
.editor-highlight code {
  line-height: inherit;
}

/* 大字在小行框里会被行框裁切，允许溢出显示（相邻行距足够，不会真重叠） */
.editor-highlight .fs-xl,
.editor-highlight .md-h1,
.editor-highlight .md-h2 {
  vertical-align: baseline;
}

/* ══════════════════════════════════════════════════════════════════════
   编辑器 v2（2026-10-19）：hidden 必须真的隐藏
   ----------------------------------------------------------------------
   根因：.editor-stack > * 设了 position:absolute + inset:0，
        把带 hidden 属性的 textarea 也强行拉进可视区，
        导致源码模式下「旧 textarea」与「新 .be-source」两个框重叠（用户截图）。
   修法：用 !important 压过上面的定位规则，并统一管理 v2 下的可见性。
   ══════════════════════════════════════════════════════════════════════ */

/* 任何带 hidden 的元素在这个区块里都必须真正隐藏 */
.editor-stack [hidden],
.editor-stack textarea[hidden],
.be-wrapper [hidden],
.be-wrapper textarea[hidden] {
  display: none !important;
}

/* v2 下：数据源 textarea（#content）永远不显示 —— 编辑/源码各自有专门的展示面 */
.editor-stack > textarea.editor-textarea#content {
  display: none !important;
}

/* 源码框：铺满 wrapper */
.be-wrapper > textarea.be-source {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* wrapper 需要定位上下文，子元素 absolute 才有参照 */
.be-wrapper {
  position: relative;
}

/* 详情页大标题:比首页卡片标题更大 */
.post .post-title {
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: var(--space-md);
}

@media (max-width: 640px) {
  .post .post-title {
    font-size: 1.5rem;
  }
}

/* ============================================================
   留言区样式（追加） — V2EX 风格：扁平、克制、有质感
   不卡片化：靠时间轴 + 圆点 + 极细分隔线 + 留白 + 灰度层级
   ============================================================ */

/* 1. 留言区整体：无卡片背景，与正文留白 */
.comments-section {
  margin-top: var(--space-xl);
  background: none;
  border: none;
  box-shadow: none;
}

/* 2. 留言区头部：两端对齐 + 极淡下边框 */
.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.comments-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text);
}

/* 3. 留言列表：左侧留 22px 给时间轴，::before 画贯穿竖线 */
.comments-list {
  position: relative;
  padding-left: 22px;
}

.comments-list::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}

/* 15. 楼层入场动画：轻微 opacity + translateY，不弹跳不缩放 */
.comment-thread {
  opacity: 0;
  transform: translateY(4px);
  animation: comment-thread-in 220ms cubic-bezier(.2,.8,.2,1) forwards;
}

@keyframes comment-thread-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. 每条留言（顶层 + 回复）：无背景/边框/圆角/阴影，仅留白 + 分隔线 */
.comment {
  position: relative;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.comment:last-child {
  border-bottom: none;
}

/* 5. 时间轴上的空心圆点；hover 是唯一强调 */
.comment::before {
  content: "";
  position: absolute;
  left: -22px;
  top: var(--space-md);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-border);
  transition: box-shadow 180ms cubic-bezier(.2,.8,.2,1),
              transform 180ms cubic-bezier(.2,.8,.2,1);
}

.comment:hover::before {
  box-shadow: 0 0 0 2px var(--color-accent);
  transform: scale(1.15);
}

/* 6. 留言元信息 */
.comment-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

.comment-author {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}

.comment-time {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* 7. 留言正文 */
.comment-content {
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--color-text);
  overflow-wrap: anywhere;
  margin-top: var(--space-xs);
}

/* 8. 操作区：文本按钮，无背景无边框 */
.comment-actions {
  margin-top: 6px;
}

.comment-reply-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color 180ms cubic-bezier(.2,.8,.2,1);
}

.comment-reply-btn:hover {
  color: var(--color-accent);
}

/* 9. 楼中楼：缩进 + 更淡的左侧竖线，字号略小 */
.comment-replies {
  margin-left: 22px;
  padding-left: 14px;
  border-left: 1px solid var(--color-border);
}

.comment-replies .comment {
  font-size: 0.9rem;
}

/* 10. 删除按钮：默认极淡，需要时才出现 */
.comment-delete-form {
  display: inline;
}

.comment-delete-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  opacity: .35;
  cursor: pointer;
  transition: opacity 180ms cubic-bezier(.2,.8,.2,1),
              color 180ms cubic-bezier(.2,.8,.2,1);
}

.comment-delete-btn:hover {
  opacity: 1;
  color: var(--color-danger);
}

/* 11. 回复表单：展开有过渡；本体极淡背景 + 1px 边 + 圆角 */
.comment-reply-form {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .28s cubic-bezier(.2,.8,.2,1),
              opacity .28s cubic-bezier(.2,.8,.2,1);
}

.comment-reply-form[hidden] {
  display: none;
}

.comment-reply-form:not([hidden]) {
  max-height: 400px;
  opacity: 1;
}

.comment-reply-form .comment-reply {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* 12. 表单操作区 */
.comment-form-actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: background 180ms cubic-bezier(.2,.8,.2,1);
}

.btn-ghost:hover {
  background: var(--color-bg);
}

/* 13. 验证码槽位 */
.captcha-slot {
  margin-top: var(--space-md);
}

/* 14. 表单错误提示 */
.form-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}

/* 17. 移动端：缩进减小，字号略小，保证无横向滚动 */
@media (max-width: 640px) {
  .comments-list {
    padding-left: 14px;
  }

  .comment::before {
    left: -14px;
  }

  .comment-replies {
    margin-left: 14px;
    padding-left: 10px;
  }

  .comment-content {
    font-size: 0.9rem;
  }
}

/* 覆盖旧卡片式 .comment:显式清掉背景/四边框/圆角,只保留底部细分隔线 */
.comments-list .comment {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}
.comments-list .comment:hover {
  background: transparent;
  border-color: transparent;
  border-bottom-color: var(--color-border);
}
.comments-list .comment:last-child {
  border-bottom: none;
}
.comments-list .comment-replies {
  background: transparent;
  border: none;
}

/* ========== 首页卡片:玻璃拟态(方案 C) ========== */
/* 半透明背景 + backdrop-filter，在纯色浅灰背景上用阴影+描边补强层次 */
/* hover 时背景更不透明，阴影加深 */

.post-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.05),
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 12px 32px rgba(0, 0, 0, 0.06);
  transition: background var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal);
}

.post-card:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-3px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 10px 24px rgba(0, 0, 0, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.08);
}

.post-title {
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--transition-normal);
}

.post-meta {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  margin-top: 8px;
}

.post-preview {
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 10px;
}

.post-card-foot {
  display: flex;
  align-items: center;
  /* 2026-10-10 用户要求"那块空间空大一点，不要那么挤"：
     gap 12 → 20px、上内边距 12 → 18px、上外边距 14 → 20px。
     星系放大到 34px 后，按钮之间需要更多留白才有"呼吸感"，
     否则视觉上是一堆东西挤在一条线上，撑不出立体悬浮的观感。 */
  gap: 20px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(229, 231, 235, 0.4);
}

.post-expand-btn {
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-accent);
  border: 1px solid rgba(0, 102, 204, 0.2);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.post-expand-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 102, 204, 0.4);
}

.post-permalink {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--transition-normal);
}

.post-permalink:hover {
  color: var(--color-accent);
}

/* ============================================================
   展开后内部滚动 + 双向滚动按钮（追加，不改动已有规则）
   ============================================================ */

/* 1. 展开容器可滚动 + 极细自定义滚动条 */
.post-content-full.is-scrollable {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 18px;          /* 只在可滚动时加，避免破坏展开前版式 */
  scrollbar-width: thin;        /* Firefox */
}

.post-content-full.is-scrollable::-webkit-scrollbar {
  width: 6px;
}

.post-content-full.is-scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.post-content-full.is-scrollable::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .14);
  border-radius: 3px;
}

.post-content-full.is-scrollable::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .24);
}

/* 2. 右侧双向滚动按钮 .scroll-fab */
/* 扩大命中热区到 40×40，视觉仍为 34×34 */
.scroll-fab::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

.scroll-fab svg {
  width: 14px;
  height: 14px;
  color: var(--color-text-secondary);
  transition: color .2s ease;
}

.scroll-fab:hover {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .12),
    0 6px 18px rgba(0, 0, 0, .16);
  transform: translateY(calc(-50% - 1px));
}

.scroll-fab:hover svg {
  color: var(--color-accent);
}

.scroll-fab:active {
  transform: translateY(-50%) scale(.96);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .10),
    0 3px 8px rgba(0, 0, 0, .14);
}

/* 悬停整张卡片时淡入 */
.post-card:hover .scroll-fab {
  opacity: 1;
  pointer-events: auto;
}

/* 键盘可达 */
.scroll-fab:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 3. 移动端 */
@media (max-width: 640px) {
  .post-content-full.is-scrollable::-webkit-scrollbar {
    width: 4px;
  }

  .scroll-fab {
    width: 30px;
    height: 30px;
    right: 6px;
  }

  .scroll-fab::before {
    inset: -1px;
  }
}

/* 拖动中:即使指针离开卡片也要保持可见与可交互,否则拖动会中断 */
.scroll-fab.is-dragging {
  opacity: 1;
  pointer-events: auto;
  cursor: grabbing;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .14),
    0 10px 22px rgba(0, 0, 0, .16);
  transform: translateY(-50%) scale(1.04);
}

/* 平时显示"可抓取"手势;触摸设备上拖动时不要触发页面滚动 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.scroll-fab {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08),
    0 4px 12px rgba(0, 0, 0, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
  cursor: grab;
  touch-action: none;
}

/* ============================================================
   留言按钮 + 留言面板（追加到 style.css 末尾）
   极简、克制、玻璃拟态；复用现有变量，不引入新配色
   ============================================================ */

/* 1. 卡片底部小按钮：与 .expand-btn 同一视觉层级 */
.card-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 200ms cubic-bezier(.2,.8,.2,1),
              border-color 200ms cubic-bezier(.2,.8,.2,1),
              transform 200ms cubic-bezier(.2,.8,.2,1);
}
.card-action-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 102, 204, 0.25);
  transform: translateY(-1px);
}
.card-action-btn:active {
  transform: translateY(0);
}

/* 2. 留言数量徽章 */
.comment-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(0, 102, 204, 0.1);
  border-radius: 999px;
  line-height: 1;
}

/* 3. 留言面板容器 */
.card-comment-panel {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(229, 231, 235, 0.6);
}

/* 4. 留言视图：状态 + 列表 */
.card-comment-view {
  padding: var(--space-sm) 0;
}
.card-comment-status {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}
.card-comment-list {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* 5. 留言条目：扁平，靠左侧竖线形成层级 */
.cc-item {
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
  margin-bottom: var(--space-sm);
}
.cc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.cc-author {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text);
}
.cc-time {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.cc-content {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--color-text);
  overflow-wrap: anywhere;
  margin-bottom: 4px;
}

/* 6. 回复缩进 */
.cc-replies {
  margin-top: var(--space-sm);
  padding-left: 18px;
  border-left: 1px solid rgba(229, 231, 235, 0.5);
}
.cc-reply {
  font-size: 0.88rem;
}

/* 7b. 首页卡片的删除按钮（2026-10-18 补）
   ★ 事故：模板 index.html 生成的按钮 class 是 `.cc-delete-btn`，
     但全站 CSS 里**一个定义都没有** —— 浏览器按默认样式渲染成灰底方框，
     用户截图确认「删除按钮也有点丑」。
     这里与详情页的 `.comment-delete-btn` 统一：无边框、极淡文字、
     hover 变红。视觉上更轻，不抢留言内容的注意力。 */
/* 删除按钮样式已统一到 buttons-glass.css（2026-10-18），此处不再重复定义 */
.cc-delete-btn { margin-left: auto; }

/* 7. 删除按钮：默认极淡，hover 变红 */
.cc-del {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 0.76rem;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 200ms cubic-bezier(.2,.8,.2,1),
              color 200ms cubic-bezier(.2,.8,.2,1);
}
.cc-del:hover {
  opacity: 1;
  color: var(--color-danger);
}

/* 8. 留言表单 */
.card-comment-form {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: rgba(248, 249, 250, 0.7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.captcha-slot {
  margin-top: var(--space-md);
}
.card-comment-msg {
  font-size: 0.8rem;
  margin-top: var(--space-sm);
}
.card-comment-msg.success {
  color: var(--color-success);
}
.card-comment-msg.error {
  color: var(--color-danger);
}

/* 9. 移动端适配 */
@media (max-width: 640px) {
  .post-card-foot {
    flex-wrap: wrap;
  }
  .card-action-btn {
    font-size: 0.8rem;
  }
  .cc-replies {
    padding-left: 12px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   留言计数（2026-10-19 第三版）
   ----------------------------------------------------------------------
   用户反馈：原来的蓝色实心胶囊跟按钮的玻璃质感不协调。

   设计依据（参考 GitHub / Medium / Notion 等主流做法）：
     · 按钮本身是「半透明白底 + 浅灰边框 + 6px 圆角」的清淡风格
     · 徽章如果做深色实心，就成了视觉噪音 —— 数字是"辅助信息"，
       不该比按钮文字更抢眼
     · 主流做法是**降低对比度**：用比正文浅一档的灰，做成很轻的小标记

   方案：轻量数字标记
     · 没有底色块，只有数字本身
     · 与按钮文字同色系但稍浅，字号略小
     · 数字前用一根极细竖线分隔（替代胶囊边框，更轻）
     · hover 时数字和分隔线稍微加深，给一点反馈

   为什么不用「圆点」：用户要看具体数量，圆点传达不了。
   为什么不用「彩色」：一个数字不值得引入第二种强调色，
     站内其他地方的彩色已经够多了。
   ══════════════════════════════════════════════════════════════════════ */

/* 数字标记：无底、无边框，只有数字 + 前置细线 */
.post-card .comment-count,
.card-comment-view-btn .comment-count {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding-left: 8px;
  font-size: .78em;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;   /* 数字等宽，多位时对齐不跳动 */
  border-left: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent);
  transition: color .18s ease, border-color .18s ease;
}

/* hover：数字与分隔线稍微加深，跟按钮的 hover 呼应 */
.post-card .card-comment-view-btn:hover .comment-count {
  color: var(--color-text-secondary);
  border-left-color: color-mix(in srgb, var(--color-text-secondary) 45%, transparent);
}

/* 暗色主题：数字本来就该比正文暗，不需要另起一套高对比 */
html[data-theme="dark"] body[class=""] .comment-count {
  color: rgba(255, 255, 255, .46);
  border-left-color: rgba(255, 255, 255, .16);
}
html[data-theme="dark"] body[class=""] .card-comment-view-btn:hover .comment-count {
  color: rgba(255, 255, 255, .70);
  border-left-color: rgba(255, 255, 255, .30);
}

/* 移动端：缩小间距，避免按钮过长换行 */
@media (max-width: 480px) {
  .post-card .comment-count {
    margin-left: 5px;
    padding-left: 6px;
    font-size: .74em;
  }
}

/* ===== 移动端触屏点击目标加大（只追加，不改已有规则） ===== */
@media (max-width: 640px) {
  /* 触屏点击目标不小于 44px 高 */
  .card-action-btn,
  .expand-btn,
  .post-expand-btn,
  .comment-reply-btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 滚动滑块：视觉仍小巧，但用透明外扩把命中区做到 ≥44×44 */
  .scroll-fab {
    width: 36px;
    height: 36px;
    right: 8px;
  }
  .scroll-fab::before {
    inset: -5px;
  }

  /* 留言面板里的按钮（发布/取消/删除）也要好点 */
  .card-comment-form .btn,
  .card-comment-cancel {
    min-height: 44px;
  }
  .cc-del {
    padding: 8px 6px;
  }
}

/* 页面背景光斑：给毛玻璃提供"可模糊的内容"（极淡，不抢正文） */
/* 前提：body 保持不透明浅灰底，光斑挂于 z-index:-1，介于底色与内容之间 */
body {
  position: relative;
  isolation: auto;
}

body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vmax 30vmax at 12% 6%, rgba(0, 102, 204, .16), transparent 62%),
    radial-gradient(34vmax 26vmax at 88% 16%, rgba(255, 122, 182, .13), transparent 64%),
    radial-gradient(42vmax 30vmax at 46% 98%, rgba(0, 190, 170, .11), transparent 66%);
  filter: blur(24px);
  transform: translateZ(0);
}

/* 降级：用户偏好减少透明度或强制颜色模式时隐藏光斑 */
@media (prefers-reduced-transparency: reduce) {
  body::before {
    display: none;
  }
}

@media (forced-colors: active) {
  body::before {
    display: none;
  }
}

/* 低端/老旧设备保护：不支持 radial-gradient 时兜底隐藏 */
@supports not (background: radial-gradient(#000, #fff)) {
  body::before {
    display: none;
  }
}

/* ===== Liquid Glass 追加 ===== */

/* 1. 玻璃本体 */
.post-card, .post {
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 8px 24px rgba(0,0,0,.08);
  border: 1px solid rgba(255,255,255,.5);
  position: relative;
}

/* 2. 边缘色散 */
.post-card::after, .post::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,.95),
    rgba(255,255,255,.2) 28%,
    rgba(120,170,255,.35) 62%,
    rgba(255,170,220,.45)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* 3. 镜面高光跟随指针 */
.post-card::before, .post::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255,255,255,.45), transparent 62%);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  z-index: 0;
}
.post-card:hover::before, .post:hover::before {
  opacity: 1;
}

/* 确保内容不被高光盖住 */
.post-card > *, .post > * {
  position: relative;
  z-index: 2;
}

/* 4. 降级 */
@supports not (backdrop-filter: blur(1px)) {
  .post-card, .post {
    background: rgba(255,255,255,.92);
  }
  .post-card::before, .post::before {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card::before, .post::before {
    transition: none;
    opacity: 0;
  }
}

@media (hover: none) {
  .post-card::before, .post::before {
    opacity: 0;
    transition: none;
  }
}

/* 留言:淡悬浮框(比首页卡片更浅,悬停轻微浮起) */
.comment, .cc-item {
  position: relative;
  background: rgba(255, 255, 255, .56);
  border: 1px solid rgba(0, 0, 0, .035);
  border-radius: 10px;
  padding: var(--space-md);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .025),
    0 4px 12px rgba(0, 0, 0, .028);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1),
              box-shadow 200ms cubic-bezier(.2,.8,.2,1),
              background-color 200ms cubic-bezier(.2,.8,.2,1);
}
.comment:hover, .cc-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .7);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .035),
    0 8px 20px rgba(0, 0, 0, .05);
}
/* 楼中楼里的回复:再浅一档 */
.comment-replies .comment-reply, .cc-item.cc-reply {
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}
.comment-replies .comment-reply:hover, .cc-item.cc-reply:hover {
  background: rgba(255, 255, 255, .58);
}

/* 时间轴圆点不被新背景盖住:确保圆点层级高于 .comment 的 background */
.comment::before {
  z-index: 1;
}

/* 移动端:缩小 padding 与圆角 */
@media (max-width: 640px) {
  .comment, .cc-item {
    padding: 12px;
    border-radius: 8px;
  }
}

/* 触屏设备:取消 hover 位移,避免"点了还在浮" */
@media (hover: none) {
  .comment:hover, .cc-item:hover {
    transform: none;
  }
  .comment-replies .comment-reply:hover, .cc-item.cc-reply:hover {
    background: rgba(255, 255, 255, .42);
  }
}

/* 减少动效偏好:去掉 transition 与 hover 位移 */
@media (prefers-reduced-motion: reduce) {
  .comment, .cc-item {
    transition: none;
  }
  .comment:hover, .cc-item:hover {
    transform: none;
    background: rgba(255, 255, 255, .56);
    box-shadow:
      0 1px 2px rgba(0, 0, 0, .025),
      0 4px 12px rgba(0, 0, 0, .028);
  }
  .comment-replies .comment-reply:hover, .cc-item.cc-reply:hover {
    background: rgba(255, 255, 255, .42);
  }
}

/* 留言淡悬浮框(修正版:选择器带容器前缀,确保压过此前的扁平化规则) */
.comments-list .comment,
.card-comment-list .cc-item {
  background: rgba(255, 255, 255, .56);
  border: 1px solid rgba(0, 0, 0, .035);
  border-radius: 10px;
  padding: var(--space-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .025), 0 4px 12px rgba(0, 0, 0, .028);
  transition: transform 200ms cubic-bezier(.2,.8,.2,1),
              box-shadow 200ms cubic-bezier(.2,.8,.2,1),
              background-color 200ms cubic-bezier(.2,.8,.2,1);
}
.comments-list .comment:hover,
.card-comment-list .cc-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .035), 0 8px 20px rgba(0, 0, 0, .05);
}
/* 楼中楼再浅一档(选择器同样带前缀) */
.comments-list .comment-replies .comment-reply,
.card-comment-list .cc-item.cc-reply {
  background: rgba(255, 255, 255, .42);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}
.comments-list .comment-replies .comment-reply:hover,
.card-comment-list .cc-item.cc-reply:hover {
  background: rgba(255, 255, 255, .58);
}
/* 保证左侧时间轴圆点仍在最上层可见 */
.comments-list .comment::before { z-index: 1; }
/* 移动端:内边距与圆角收一点 */
@media (max-width: 640px) {
  .comments-list .comment, .card-comment-list .cc-item { padding: 12px; border-radius: 8px; }
}
/* 触屏没有 hover:取消"点了还在浮"的状态 */
@media (hover: none) {
  .comments-list .comment:hover, .card-comment-list .cc-item:hover { transform: none; }
}
/* 用户要求减少动态效果时:不做位移 */
@media (prefers-reduced-motion: reduce) {
  .comments-list .comment, .card-comment-list .cc-item { transition: none; }
  .comments-list .comment:hover, .card-comment-list .cc-item:hover { transform: none; }
}

/* 主题卡片:更透的毛玻璃(透出背景光斑,但仍保证正文可读) */
article.post {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
}
/* 正文段落加一层极淡的白色底,保证文字对比度不被背景色影响 */
article.post .post-body-content {
  background: rgba(255, 255, 255, .28);
  border-radius: 10px;
  padding: var(--space-md);
}

/* 移动端:降低玻璃感,提高不透明度以保证可读性 */
@media (max-width: 640px) {
  article.post {
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
  }
  article.post .post-body-content {
    padding: 12px;
  }
}

/* 降级:不支持 backdrop-filter 时退回实色背景 */
@supports not (backdrop-filter: blur(1px)) {
  article.post {
    background: rgba(255, 255, 255, .92);
  }
  article.post .post-body-content {
    background: transparent;
    padding: 0;
  }
}

/* ── 详情页双列布局 ── */
.layout-with-sidebar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}
.layout-with-sidebar .post {
  width: 100%;
}
.layout-with-sidebar .post-body-content {
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
}
.sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* ── 作者卡 ── */
.author-card {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  padding: var(--space-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 24px rgba(0, 0, 0, .05);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.author-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .08);
}

.author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 2px 8px rgba(0, 0, 0, .06);
}
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-avatar-fallback {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent);
  background: rgba(0, 102, 204, .08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 2px 8px rgba(0, 0, 0, .06);
}

.author-name {
  margin-top: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}
.author-title {
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.author-bio {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  /* 2026-10-20：作者简介整体居中（含多行、Markdown 段落） */
  text-align: center;
}
/* Markdown 渲染出的段落/列表也要居中，否则内层 <p> 仍继承左对齐 */
.author-bio p,
.author-bio li,
.author-bio div {
  text-align: center;
}
.author-links {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.author-link {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  background: none;
  border: none;
}
.author-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ── 响应式 ── */
@media (max-width: 1024px) {
  .layout-with-sidebar {
    grid-template-columns: 1fr;
    max-width: 780px;
  }
  .sidebar {
    position: static;
  }
}
@media (max-width: 640px) {
  .author-card {
    padding: var(--space-md);
  }
  .author-avatar,
  .author-avatar-fallback {
    width: 56px;
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .author-card {
    transition: none;
  }
  .author-card:hover {
    transform: none;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .author-card {
    background: rgba(255, 255, 255, .92);
  }
}

/* ── 单列模式(layout_mode=single):加宽一点点,正文仍收在舒适行宽 ── */
.page-layout.layout-single { max-width: 860px; margin: 0 auto; padding: 0 var(--space-lg); }
.page-layout.layout-single .sidebar { margin-top: var(--space-lg); }
.page-layout.layout-single .post-body-content { max-width: 42em; margin-left: auto; margin-right: auto; }

/* 详情页(含 .page-layout 的页面)解除全局 780px 容器宽度,由内层布局自己决定宽度 */
.main-content:has(> .page-layout) {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 保险规则：首页等其它页面不受影响，仍保留全局 780px 限制 */
.main-content:not(:has(> .page-layout)) {
  max-width: 780px;
}

/* 双列布局:主列最小宽度 0,防止网格被内容撑破 */
.page-layout .main-col { min-width: 0; }

/* ── 作者简介（2026-10-18 支持 Markdown）────────────────────────────────
   原来只输出纯文本，多空格被合并、换行无效。
   现在后端渲染 Markdown（bleach 净化），这里补齐排版：
     · 段间距收紧（作者卡空间有限）
     · 支持加粗、链接、行内代码
     · 换行（nl2br 扩展）已由后端转成 <br>
   ─────────────────────────────────────────────────────────────────── */
.author-bio > *:first-child { margin-top: 0; }
.author-bio > *:last-child { margin-bottom: 0; }
.author-bio p { margin: 0 0 0.5em; }
.author-bio strong, .author-bio b { font-weight: 600; color: var(--color-text); }
.author-bio em, .author-bio i { font-style: italic; }
.author-bio a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.author-bio code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 4px;
}
.author-bio ul, .author-bio ol {
  margin: 0.4em 0;
  padding-left: 1.2em;
}
.author-bio li { margin: 0.15em 0; }
.author-bio blockquote {
  margin: 0.4em 0;
  padding-left: 0.7em;
  border-left: 2px solid var(--color-border);
  color: var(--color-text-secondary);
}
.author-bio img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
/* 分隔线：作者卡里可能用 --- 分块 */
.author-bio hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.7em 0;
}

/* ── 侧栏三件套：玻璃基座 ── */
.sidebar-search,
.sidebar-categories,
.sidebar-tags {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  padding: var(--space-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 8px 24px rgba(0, 0, 0, .05);
}

.sidebar-title {
  margin: 0 0 10px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--color-text-muted);
}

/* ── 搜索框 ── */
.search-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.search-input {
  border: none;
  background: none;
  font-size: .88rem;
  padding: 6px 0;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}

.search-input:focus {
  outline: none;
}

.search-form:focus-within {
  box-shadow: 0 0 0 2px rgba(0, 102, 204, .15);
}

/* ── 分类栏 ── */
.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: .86rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 180ms, color 180ms;
}

.category-link:hover {
  background: rgba(255, 255, 255, .6);
  color: var(--color-text);
}

.category-link.is-active {
  background: rgba(0, 102, 204, .08);
  color: var(--color-accent);
}

.category-count {
  font-size: .74rem;
  color: var(--color-text-muted);
}

/* ── 标签云 ── */
.tag-marquee {
  position: relative;
  overflow: hidden;
  margin: 0 -6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.tag-track {
  display: flex;
  gap: 8px;
  width: max-content;
  padding: 4px 6px;
}

.tag-track-a {
  animation: tagScrollLeft 46s linear infinite;
}

.tag-track-b {
  animation: tagScrollRight 58s linear infinite;
}

@keyframes tagScrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes tagScrollRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.tag-marquee:hover .tag-track {
  animation-play-state: paused;
}

.tag {
  border-radius: 999px;
  padding: 5px 11px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background 180ms, transform 180ms;
}

.tag:hover {
  transform: translateY(-1px);
}

/* 字号档（按文章数放大，档差克制） */
.tag-s1 { font-size: .76rem; }
.tag-s2 { font-size: .82rem; }
.tag-s3 { font-size: .9rem; }
.tag-s4 { font-size: .99rem; }
.tag-s5 { font-size: 1.08rem; }

/* 颜色档（淡色系，5 组） */
.tag-c0 { color: #3b6ea5; background: rgba(59, 110, 165, .10); }
.tag-c1 { color: #2f8f86; background: rgba(47, 143, 134, .10); }
.tag-c2 { color: #b05a86; background: rgba(176, 90, 134, .10); }
.tag-c3 { color: #a97a3c; background: rgba(169, 122, 60, .10); }
.tag-c4 { color: #7a5fa8; background: rgba(122, 95, 168, .10); }

.tag-c0:hover { background: rgba(59, 110, 165, .18); }
.tag-c1:hover { background: rgba(47, 143, 134, .18); }
.tag-c2:hover { background: rgba(176, 90, 134, .18); }
.tag-c3:hover { background: rgba(169, 122, 60, .18); }
.tag-c4:hover { background: rgba(122, 95, 168, .18); }

.tag.is-active {
  box-shadow: 0 0 0 1.5px currentColor inset;
}

.tag-n {
  font-size: .7rem;
  opacity: .65;
  margin-left: 5px;
}

/* ── 移动端 ── */
@media (max-width: 640px) {
  .sidebar-search,
  .sidebar-categories,
  .sidebar-tags {
    padding: 12px;
  }

  .tag-marquee {
    overflow-x: auto;
  }

  .tag-track-a,
  .tag-track-b {
    animation: none;
  }

  /* 关闭动画后需强制重置 transform，否则残留的 translateX 会破坏手动滚动 */
  .tag-track {
    transform: none !important;
  }
}

/* ── 减少动效 ── */
@media (prefers-reduced-motion: reduce) {
  .tag-track {
    animation: none;
  }

  .tag-marquee {
    overflow-x: auto;
  }
}

/* ── 不支持 backdrop-filter 的降级 ── */
@supports not (backdrop-filter: blur(1px)) {
  .sidebar-search,
  .sidebar-categories,
  .sidebar-tags {
    background: rgba(255, 255, 255, .92);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   分类折叠（2026-10-19）
   ----------------------------------------------------------------------
   为什么改：分类多了会把侧栏拉长，小屏幕上标签云被挤到看不见。
   做什么：
     1. 标题右侧显示分类总数徽章
     2. 超过 3 个分类时折叠，点标题展开/收起（JS 控制，见 base.html）
     3. 折叠状态记在 localStorage

   折叠实现要点：
     · 用 max-height + overflow:hidden 做动画
     · 折叠时 max-height:0 → 展开时设为一个足够大的值
     · 用 opacity 让内容淡出，避免"突然消失"
     · prefers-reduced-motion 下关闭过渡
   ══════════════════════════════════════════════════════════════════════ */

/* ── 可折叠标题：整体一行，右侧箭头 ── */
.sidebar-title--collapsible {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  /* 扩大点击热区（原来是 h2 的小字，不好点） */
  padding: 2px 0;
  border-radius: 6px;
  transition: color .18s ease;
}
.sidebar-title--collapsible:hover { color: var(--color-text); }
.sidebar-title--collapsible:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── 分类总数徽章 ── */
.category-total {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  height: 1.35em;
  margin-left: 6px;
  padding: 0 .38em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-muted) 14%, transparent);
  color: var(--color-text-secondary);
  font-size: .72em;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  letter-spacing: 0;
}

/* ── 折叠箭头：默认朝下（已展开），折叠时旋转朝右 ── */
.category-chevron {
  flex: none;
  color: var(--color-text-muted);
  transition: transform .22s ease, color .18s ease;
}
.sidebar-categories.is-collapsed .category-chevron {
  transform: rotate(-90deg);
}
.sidebar-title--collapsible:hover .category-chevron { color: var(--color-text-secondary); }

/* ── 列表折叠动画 ── */
.category-list {
  /* max-height 由 JS 设为实际高度，这里给过渡 */
  transition: max-height .26s cubic-bezier(.4, 0, .2, 1),
              opacity .2s ease,
              margin-top .26s ease;
  overflow: hidden;
}

.sidebar-categories.is-collapsed .category-list {
  max-height: 0 !important;
  opacity: 0;
  margin-top: 0;
  /* 折叠时不给键盘焦点进入（无障碍） */
  visibility: hidden;
}

/* 折叠相关动效，用户要求减少动效时全部关掉 */
@media (prefers-reduced-motion: reduce) {
  .category-list,
  .category-chevron {
    transition: none !important;
  }
}

/* 暗色主题：徽章底色提亮一档 */
html[data-theme="dark"] body[class=""] .category-total {
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .62);
}

/* ── 首页筛选提示条 ── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px var(--space-md);
  border-radius: 10px;
  margin-bottom: var(--space-md);
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .55);
  font-size: .85rem;
  color: var(--color-text-secondary);
}

.filter-bar b {
  color: var(--color-text);
}

.filter-clear {
  color: var(--color-accent);
  text-decoration: none;
}

.filter-clear:hover {
  text-decoration: underline;
}

/* ============================================================
   追加覆盖规则（同优先级 + 靠后即可覆盖旧规则）
   ============================================================ */

/* 问题 1：卡片描边改为纯白系、极淡，去掉粉紫/冷蓝的"边缘色散" */
.post-card::after,
.post::after {
  background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .25));
}

/* 问题 2：加强背景光斑，让半透明卡片真正"看得见" */
body::before {
  background:
    radial-gradient(46vmax 36vmax at 10% 4%,  rgba(0, 102, 204, .34), transparent 60%),
    radial-gradient(42vmax 34vmax at 92% 14%, rgba(255, 96, 170, .28), transparent 62%),
    radial-gradient(50vmax 38vmax at 44% 100%, rgba(0, 190, 170, .26), transparent 64%),
    radial-gradient(38vmax 30vmax at 72% 58%, rgba(140, 110, 255, .20), transparent 66%);
  filter: blur(18px);
}

/* 卡片本体再透一点，让半透明效果更明显 */
.post-card,
.post {
  background: rgba(255, 255, 255, .34);
}

/* 正文块保留一层淡白底，保证文字可读性 */
.post-card .post-body-content,
.post .post-body-content {
  background: rgba(255, 255, 255, .30);
}

/* 移动端：卡片稍更不透明，避免小屏可读性下降 */
@media (max-width: 640px) {
  .post-card,
  .post {
    background: rgba(255, 255, 255, .5);
  }
}

/* 降级：用户偏好减少透明度时，去掉光斑、卡片接近纯白 */
@media (prefers-reduced-transparency: reduce) {
  body::before {
    display: none;
  }
  .post-card,
  .post {
    background: rgba(255, 255, 255, .92);
  }
}

/* ============================================================
   历史主题覆盖（?theme= 参数）
   ============================================================ */

/* 1. 卡片去玻璃 */
body.e-min .post-card,
body.e-min .post {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
}

/* 2. 干掉渐变描边伪元素 */
body.e-min .post-card::after,
body.e-min .post::after {
  content: none;
}

/* 3. hover 安静化 */
body.e-min .post-card:hover,
body.e-min .post:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(0, 0, 0, .16);
  background: #ffffff;
}

/* 4. 侧栏四块去玻璃 */
body.e-min .author-card,
body.e-min .sidebar-search,
body.e-min .sidebar-categories,
body.e-min .sidebar-tags {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
}

/* 5. 导航栏去玻璃 */
body.e-min .navbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

/* 6. 标签胶囊去色 */
body.e-min .tag,
body.e-min .tag-chip {
  background: rgba(0, 0, 0, .04);
  border: 1px solid rgba(0, 0, 0, .10);
  color: rgba(0, 0, 0, .75);
  box-shadow: none;
}
body.e-min .tag:hover,
body.e-min .tag-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* 7. 筛选条 / 分页去彩色底 */
body.e-min .filter-bar {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .08);
}
body.e-min .pagination a {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, .10);
  color: rgba(0, 0, 0, .75);
}

/* 8. 正文列宽 */
body.e-min .main-col {
  max-width: 680px;
}

/* 9. 交互控件安静化 */
body.e-min .expand-btn,
body.e-min .card-comment-compose-btn,
body.e-min .card-comment-view-btn,
body.e-min .btn {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  color: rgba(0, 0, 0, .8);
  box-shadow: none;
}
body.e-min .expand-btn:hover,
body.e-min .card-comment-compose-btn:hover,
body.e-min .card-comment-view-btn:hover,
body.e-min .btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

body.e-min { background: #ffffff; color: rgba(0,0,0,.85); }
body.e-min::before { display: none; }
body.e-min h1, body.e-min h2, body.e-min h3, body.e-min .post-title { font-weight: 500; letter-spacing: -0.02em; }
body.e-min .post-card h2, body.e-min .post h2 { font-weight: 500; letter-spacing: -0.02em; border: none; background: none; padding: 0; }
body.e-min .post-meta, body.e-min .meta, body.e-min .post-date { color: rgba(0,0,0,.40); }
body.e-min .excerpt, body.e-min .post-excerpt, body.e-min .post-preview { color: rgba(0,0,0,.60); }

/* ===== 手机端横向溢出修复 ===== */
@media (max-width: 1024px) {
  .page-layout.layout-with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .page-layout.layout-with-sidebar .main-col,
  .page-layout.layout-with-sidebar .sidebar { min-width: 0; }
}
@media (max-width: 640px) {
  .page-layout .main-col, .page-layout .sidebar, .post-list, .post-card, .post { min-width: 0; max-width: 100%; }
}
@media (max-width: 640px) {
  .post-title, .post-title h2, .post-preview, .post-content-full, .comment-body { overflow-wrap: anywhere; word-break: break-word; }
}

/* ===== ?theme=sheet 纸张式布局 ===== */
body.sheet {
  background: linear-gradient(180deg, #f7f8f9 0%, #e9edf1 48%, #c8d0d7 100%);
  background-attachment: fixed;
  padding: 40px 24px 56px;
  min-height: 100vh;
}

body.sheet .main-content {
  max-width: 1180px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .14), 0 2px 8px rgba(16, 24, 40, .06);
  padding: 48px 56px 56px;
  border: 1px solid rgba(0, 0, 0, .05);
}

body.sheet .navbar {
  max-width: 1180px;
  margin: 0 auto 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, .05);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(16, 24, 40, .06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 20px;
}

body.sheet .post-card,
body.sheet .post {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  border-radius: 0;
  box-shadow: none;
  padding: 28px 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.sheet .post-card:last-child,
body.sheet .post:last-child {
  border-bottom: none;
}

body.sheet .post-card::after,
body.sheet .post::after {
  content: none;
}

body.sheet .author-card,
body.sheet .sidebar-search,
body.sheet .sidebar-categories,
body.sheet .sidebar-tags {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.sheet .sidebar-search {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  padding-bottom: 12px;
}

@media (max-width: 640px) {
  body.sheet {
    padding: 16px 12px 32px;
  }
  body.sheet .main-content {
    padding: 24px 18px 32px;
    border-radius: 16px;
  }
  body.sheet .navbar {
    border-radius: 12px;
    margin-bottom: 12px;
  }
  body.sheet .page-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.sheet .main-content {
    background: #ffffff;
  }
}

/* ===== ?theme=dark 深色纸张版 ===== */
body.dark-sheet {
  background: linear-gradient(180deg, #2a3138 0%, #1a2126 45%, #0f1518 100%);
  background-attachment: fixed;
  padding: 40px 24px 56px;
  min-height: 100vh;
  color: rgba(255, 255, 255, .90);
}
body.dark-sheet .main-content {
  max-width: 1180px;
  margin: 0 auto;
  background: #1c1c1c;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  padding: 48px 56px 56px;
}
body.dark-sheet .navbar {
  max-width: 1180px; margin: 0 auto 20px;
  background: rgba(28, 28, 28, .92);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.dark-sheet .post-card,
body.dark-sheet .post {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 28px 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.dark-sheet .post-card:last-child, body.dark-sheet .post:last-child { border-bottom: none; }
body.dark-sheet .post-card::after, body.dark-sheet .post::after { content: none; }
body.dark-sheet .author-card,
body.dark-sheet .sidebar-categories,
body.dark-sheet .sidebar-tags { background: transparent; border: none; box-shadow: none; backdrop-filter: none; }
body.dark-sheet .sidebar-search { background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: none; padding-bottom: 12px; }
body.dark-sheet .post-meta, body.dark-sheet .meta, body.dark-sheet .post-date,
body.dark-sheet .sidebar-categories a span, body.dark-sheet .tag-count { color: rgba(255,255,255,.40); }
body.dark-sheet .excerpt, body.dark-sheet .post-excerpt, body.dark-sheet .post-preview { color: rgba(255,255,255,.60); }
body.dark-sheet h1, body.dark-sheet h2, body.dark-sheet h3, body.dark-sheet .post-title { color: rgba(255,255,255,.90); font-weight: 500; letter-spacing: -0.02em; }
body.dark-sheet .post-card h2, body.dark-sheet .post h2 { border: none; background: none; padding: 0; }
body.dark-sheet .expand-btn, body.dark-sheet .card-comment-compose-btn,
body.dark-sheet .card-comment-view-btn, body.dark-sheet .btn {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88);
}
body.dark-sheet .expand-btn:hover, body.dark-sheet .card-comment-compose-btn:hover,
body.dark-sheet .card-comment-view-btn:hover, body.dark-sheet .btn:hover {
  background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28);
}
body.dark-sheet .tag, body.dark-sheet .tag-chip {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .75);
}
body.dark-sheet input, body.dark-sheet textarea {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .9);
}
body.dark-sheet input::placeholder, body.dark-sheet textarea::placeholder { color: rgba(255, 255, 255, .34); }
@media (max-width: 640px) {
  body.dark-sheet { padding: 16px 12px 32px; }
  body.dark-sheet .main-content { padding: 24px 18px 32px; border-radius: 16px; }
  body.dark-sheet .navbar { border-radius: 12px; margin-bottom: 12px; }
  body.dark-sheet .page-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ===== 玻璃纸张版(半透明+毛玻璃) ===== */
body.glass {
  background: linear-gradient(160deg, #eef2f7 0%, #dfe7f2 34%, #ebe4f1 68%, #e2ece8 100%);
  background-attachment: fixed;
  padding: 40px 24px 56px;
  min-height: 100vh;
  color: rgba(0, 0, 0, .85);
}
body.glass::before {
  content: '';
  position: fixed; inset: -10%;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(38vmax 30vmax at 12% 8%, rgba(96, 140, 235, .34), transparent 62%),
    radial-gradient(34vmax 28vmax at 88% 18%, rgba(214, 122, 190, .28), transparent 64%),
    radial-gradient(40vmax 32vmax at 50% 96%, rgba(94, 196, 178, .26), transparent 66%);
  filter: blur(26px);
}
body.glass .main-content,
body.glass .navbar { position: relative; z-index: 1; }
body.glass .main-content {
  max-width: 1180px; margin: 0 auto;
  background: rgba(255, 255, 255, .52);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .16), 0 2px 8px rgba(16, 24, 40, .06);
  padding: 48px 56px 56px;
}
body.glass .navbar {
  max-width: 1180px; margin: 0 auto 20px;
  background: rgba(255, 255, 255, .42);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 14px; box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
}

body.glass-dark {
  background: linear-gradient(160deg, #1b2430 0%, #241d2e 42%, #141c22 100%);
  background-attachment: fixed;
  padding: 40px 24px 56px;
  min-height: 100vh;
  color: rgba(255, 255, 255, .90);
}
body.glass-dark .main-content,
body.glass-dark .navbar { position: relative; z-index: 1; }
body.glass-dark .main-content {
  max-width: 1180px; margin: 0 auto;
  background: rgba(28, 28, 28, .52);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
  padding: 48px 56px 56px;
}
body.glass-dark .navbar {
  max-width: 1180px; margin: 0 auto 20px;
  background: rgba(28, 28, 28, .42);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
}

body.glass .post-card, body.glass .post,
body.glass-dark .post-card, body.glass-dark .post {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  padding: 28px 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.glass-dark .post-card, body.glass-dark .post { border-bottom-color: rgba(255, 255, 255, .09); }
body.glass .post-card:last-child, body.glass .post:last-child,
body.glass-dark .post-card:last-child, body.glass-dark .post:last-child { border-bottom: none; }
body.glass .post-card::after, body.glass .post::after,
body.glass-dark .post-card::after, body.glass-dark .post::after { content: none; }
body.glass .author-card, body.glass .sidebar-search, body.glass .sidebar-categories, body.glass .sidebar-tags,
body.glass-dark .author-card, body.glass-dark .sidebar-search, body.glass-dark .sidebar-categories, body.glass-dark .sidebar-tags {
  background: rgba(255, 255, 255, .28);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 12px; box-shadow: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 14px 16px;
}
body.glass .post-meta, body.glass .meta, body.glass .excerpt, body.glass .post-preview { color: rgba(0, 0, 0, .55); }
body.glass h1, body.glass h2, body.glass h3, body.glass .post-title, body.glass .post-card h2 { font-weight: 500; letter-spacing: -0.02em; border: none; background: none; padding: 0; }
body.glass-dark .post-meta, body.glass-dark .meta { color: rgba(255, 255, 255, .40); }
body.glass-dark .excerpt, body.glass-dark .post-preview { color: rgba(255, 255, 255, .60); }
body.glass-dark h1, body.glass-dark h2, body.glass-dark h3, body.glass-dark .post-title, body.glass-dark .post-card h2 { font-weight: 500; letter-spacing: -0.02em; border: none; background: none; padding: 0; }
body.glass .expand-btn, body.glass .card-comment-compose-btn, body.glass .card-comment-view-btn, body.glass .btn {
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(0, 0, 0, .10); color: rgba(0, 0, 0, .82);
}
body.glass-dark .expand-btn, body.glass-dark .card-comment-compose-btn, body.glass-dark .card-comment-view-btn, body.glass-dark .btn {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .88);
}
body.glass-dark input, body.glass-dark textarea { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); }
body.glass-dark .tag, body.glass-dark .tag-chip { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .78); }
@media (max-width: 640px) {
  body.glass, body.glass-dark { padding: 16px 12px 32px; }
  body.glass .main-content, body.glass-dark .main-content { padding: 24px 18px 32px; border-radius: 16px; }
  body.glass .navbar, body.glass-dark .navbar { border-radius: 12px; margin-bottom: 12px; }
  body.glass .page-layout, body.glass-dark .page-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-transparency: reduce) {
  body.glass .main-content, body.glass .navbar, body.glass .author-card,
  body.glass .sidebar-search, body.glass .sidebar-categories, body.glass .sidebar-tags { background: #ffffff; backdrop-filter: none; }
  body.glass-dark .main-content, body.glass-dark .navbar, body.glass-dark .author-card,
  body.glass-dark .sidebar-search, body.glass-dark .sidebar-categories, body.glass-dark .sidebar-tags { background: #1c1c1c; backdrop-filter: none; }
  body.glass::before, body.glass-dark::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { body.glass::before, body.glass-dark::before { filter: blur(26px); } }

/* ===== 玻璃版轻量化 ===== */
body.glass::before, body.glass-dark::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  filter: none;
  background:
    radial-gradient(60vmax 48vmax at 8% 4%, rgba(96, 140, 235, .30), transparent 68%),
    radial-gradient(54vmax 44vmax at 94% 16%, rgba(214, 122, 190, .24), transparent 70%),
    radial-gradient(64vmax 50vmax at 46% 100%, rgba(94, 196, 178, .22), transparent 72%);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body.glass-dark::before {
  content: '';
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(60vmax 48vmax at 10% 6%, rgba(124, 92, 255, .34), transparent 68%),
    radial-gradient(54vmax 44vmax at 92% 18%, rgba(34, 211, 238, .22), transparent 70%),
    radial-gradient(64vmax 50vmax at 48% 100%, rgba(244, 114, 182, .18), transparent 72%);
  filter: blur(30px);
}
body.glass, body.glass-dark { background-attachment: scroll; }
body.glass .main-content, body.glass-dark .main-content {
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
body.glass .navbar, body.glass-dark .navbar {
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
body.glass .author-card, body.glass .sidebar-search, body.glass .sidebar-categories, body.glass .sidebar-tags {
  background: rgba(255, 255, 255, .46);
  border: 1px solid rgba(255, 255, 255, .5);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none; border-radius: 12px; padding: 14px 16px;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body.glass-dark .author-card,
body.glass-dark .sidebar-search,
body.glass-dark .sidebar-categories,
body.glass-dark .sidebar-tags {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border-radius: 12px;
  padding: 14px 16px;
}
@media (max-width: 640px) {
  body.glass .main-content, body.glass-dark .main-content {
    backdrop-filter: blur(12px) saturate(1.3);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
  }
  body.glass::before, body.glass-dark::before { background: none; }
}
@media (prefers-reduced-transparency: reduce) {
  body.glass .main-content, body.glass-dark .main-content,
  body.glass .navbar, body.glass-dark .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== 按钮改实 + 编辑署名作者框 ===== */
/* 1. 按钮改"实":白底+浅灰底,描边加深,不再像"消失" */
body.glass .expand-btn, body.glass .card-comment-compose-btn, body.glass .card-comment-view-btn,
body.glass .btn, body.glass .card-action-btn {
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(0, 0, 0, .14);
  color: rgba(0, 0, 0, .84);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
body.glass .expand-btn:hover, body.glass .card-comment-compose-btn:hover,
body.glass .card-comment-view-btn:hover, body.glass .btn:hover, body.glass .card-action-btn:hover {
  background: #ffffff; border-color: rgba(0, 0, 0, .24);
}
body.glass-dark .expand-btn, body.glass-dark .card-comment-compose-btn,
body.glass-dark .card-comment-view-btn, body.glass-dark .btn, body.glass-dark .card-action-btn {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .20);
  color: rgba(255, 255, 255, .92);
}
body.glass-dark .expand-btn:hover, body.glass-dark .card-comment-compose-btn:hover,
body.glass-dark .card-comment-view-btn:hover, body.glass-dark .btn:hover, body.glass-dark .card-action-btn:hover {
  background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .34);
}
/* 2. 0 留言提示 */
.card-comment-empty { padding: 18px 4px; color: rgba(0, 0, 0, .45); font-size: .875rem; }
body.glass-dark .card-comment-empty { color: rgba(255, 255, 255, .45); }

/* 3. 编辑署名式作者框(纸张/玻璃版) —— 去"社交资料卡"的通用感 */
body.glass .author-card, body.sheet .author-card, body.e-min .author-card {
  position: relative; padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, .08);
  background: transparent; border-left: none; border-right: none; border-bottom: none;
  border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.glass .author-card::before {
  content: '作者 / AUTHOR';
  display: block; margin-bottom: 12px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(0, 0, 0, .38);
}
body.glass .author-card .author-avatar, body.glass .author-card img,
body.glass .author-card .avatar-placeholder {
  width: 56px; height: 56px; border-radius: 12px;   /* 方头像 = 编辑署名,不是社交头像 */
}
body.glass .author-card h3, body.glass .author-card .author-name {
  font-size: 1.08rem; font-weight: 500; letter-spacing: -0.01em; margin: 10px 0 2px;
}
body.glass .author-card .author-title { font-size: .78rem; color: rgba(0, 0, 0, .45); }
body.glass .author-card .author-bio, body.glass .author-card p {
  font-size: .86rem; line-height: 1.75; color: rgba(0, 0, 0, .62); margin: 10px 0 0;
}
body.glass .author-card .author-links, body.glass .author-card .author-links a {
  margin-top: 12px; font-size: .8rem; color: rgba(0, 0, 0, .55);
}
body.glass .author-card .author-links a { margin-right: 14px; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,.18); padding-bottom: 1px; }
body.glass .author-card .author-links a:hover { color: rgba(0, 0, 0, .88); border-bottom-color: rgba(0,0,0,.5); }
/* 深色对应 */
body.glass-dark .author-card { position: relative; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); background: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; }
body.glass-dark .author-card::before { content: '作者 / AUTHOR'; display: block; margin-bottom: 12px; font-size: .68rem; letter-spacing: .16em; color: rgba(255,255,255,.4); }
body.glass-dark .author-card .author-avatar, body.glass-dark .author-card img, body.glass-dark .author-card .avatar-placeholder { width: 56px; height: 56px; border-radius: 12px; }
body.glass-dark .author-card h3, body.glass-dark .author-card .author-name { font-size: 1.08rem; font-weight: 500; margin: 10px 0 2px; color: rgba(255,255,255,.92); }
body.glass-dark .author-card .author-title { font-size: .78rem; color: rgba(255,255,255,.45); }
body.glass-dark .author-card p, body.glass-dark .author-card .author-bio { font-size: .86rem; line-height: 1.75; color: rgba(255,255,255,.62); }
body.glass-dark .author-card .author-links a { color: rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.22); text-decoration: none; margin-right: 14px; font-size: .8rem; }

/* ===== 作者框方头像(win 产出) ===== */
body[class=""] .author-avatar img,
body[class=""] .author-avatar-fallback {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

body[class=""] .author-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 500;
  background: rgba(0, 0, 0, .04);
  color: rgba(0, 0, 0, .78);
}

body.matte-dark .author-avatar img,
body.matte-dark .author-avatar-fallback {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

body.matte-dark .author-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 500;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .85);
}

/* ===== 默认外观:纯中性灰调(去光斑/去彩色标签) ===== */
body[class=""]::before,
body[class=""]::after { content: none; display: none; background: none; }
body[class=""] .tag, body[class=""] .tag-chip {
  background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .10); color: rgba(0, 0, 0, .72);
  box-shadow: none;
}
body[class=""] .tag:hover, body[class=""] .tag-chip:hover { border-color: rgba(0, 0, 0, .24); color: rgba(0, 0, 0, .88); }
body[class=""] .tag-s1, body[class=""] .tag-s2, body[class=""] .tag-s3, body[class=""] .tag-s4, body[class=""] .tag-s5,
body[class=""] .tag-c0, body[class=""] .tag-c1, body[class=""] .tag-c2, body[class=""] .tag-c3, body[class=""] .tag-c4 {
  background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .10); color: rgba(0, 0, 0, .72);
}

/* ===== 默认外观:中性灰层次 + 半透明毛玻璃 ===== */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] {
  background: #e9ecef;
  background-image: none;
}
body[class=""]::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none; display: block;
  background:
    radial-gradient(70vmax 55vmax at 12% 6%, rgba(255, 255, 255, .95), transparent 62%),
    radial-gradient(64vmax 52vmax at 88% 10%, rgba(255, 255, 255, .70), transparent 66%),
    radial-gradient(80vmax 60vmax at 50% 104%, rgba(148, 163, 178, .28), transparent 70%);
}
body[class=""] > * { position: relative; z-index: 1; }

/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .post-card,
body[class=""] .post {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .07), 0 1px 3px rgba(16, 24, 40, .04);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}
body[class=""] .post-card:hover, body[class=""] .post:hover {
  background: rgba(255, 255, 255, .74); box-shadow: 0 10px 28px rgba(16, 24, 40, .10);
}

/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .author-card,
body[class=""] .sidebar-search,
body[class=""] .sidebar-categories,
body[class=""] .sidebar-tags {
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .70);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .06);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar {
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 2px 8px rgba(16, 24, 40, .05);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
}

@media (max-width: 640px) {
  body[class=""] .post-card, body[class=""] .post,
  body[class=""] .author-card, body[class=""] .sidebar-search,
  body[class=""] .sidebar-categories, body[class=""] .sidebar-tags,
  body[class=""] .navbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
@media (prefers-reduced-transparency: reduce) {
  body[class=""]::before { display: none; }
  body[class=""] { background: #eef0f3; }
  body[class=""] .post-card, body[class=""] .post,
  body[class=""] .author-card, body[class=""] .sidebar-search,
  body[class=""] .sidebar-categories, body[class=""] .sidebar-tags,
  body[class=""] .navbar { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== ?theme=chiri 参考主题(哑光整张纸) ===== */
/* ===== ?theme=chiri 参考主题：哑光整张纸 ===== */
body.chiri {
  background: #eef0f2;
  color: rgba(0, 0, 0, .85);
  padding: 48px 24px 64px;
  min-height: 100vh;
}
/* 渐变底:固定层,不随滚动变化 */
body.chiri::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #f7f7f7 0%, #dfe3e6 55%, #939ca4 100%);
}
body.chiri::after { content: none; }
body.chiri > * { position: relative; z-index: 1; }
/* 整张纸:哑光白,大圆角,柔和投影 */
body.chiri .main-content {
  max-width: 1200px; margin: 0 auto;
  background: #ffffff; border: none; border-radius: 24px;
  box-shadow: 0 30px 80px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);
  padding: 64px 64px 72px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 导航:哑光白条 */
body.chiri .navbar {
  max-width: 1200px; margin: 0 auto 20px;
  background: #ffffff; border: none; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* 纸内:两栏都用发丝线分区,不出现任何盒子/阴影 */
body.chiri .page-layout { gap: 56px; align-items: start; }
body.chiri .main-col, body.chiri .sidebar {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; min-width: 0;
}
@media (min-width: 1025px) {
  body.chiri .sidebar { position: sticky; top: 32px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; }
}
body.chiri .post-card, body.chiri .post {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 26px 0; border-bottom: 1px solid rgba(0, 0, 0, .10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.chiri .post-card:first-child, body.chiri .post:first-child { padding-top: 0; }
body.chiri .post-card:last-child, body.chiri .post:last-child { border-bottom: none; }
body.chiri .post-card::after, body.chiri .post::after { content: none; }
body.chiri .author-card, body.chiri .sidebar-search, body.chiri .sidebar-categories, body.chiri .sidebar-tags {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 20px 0; border-top: 1px solid rgba(0, 0, 0, .10);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.chiri .author-card { border-top: none; padding-top: 0; }
body.chiri h1, body.chiri h2, body.chiri h3, body.chiri .post-title, body.chiri .post-card h2 {
  font-weight: 500; letter-spacing: -0.02em; border: none; background: none; padding: 0;
}
body.chiri .post-meta, body.chiri .meta, body.chiri .post-date { color: rgba(0, 0, 0, .40); }
body.chiri .excerpt, body.chiri .post-preview { color: rgba(0, 0, 0, .58); }
body.chiri .expand-btn, body.chiri .card-comment-compose-btn, body.chiri .card-comment-view-btn, body.chiri .btn, body.chiri .card-action-btn {
  background: #ffffff; border: 1px solid rgba(0, 0, 0, .14); color: rgba(0, 0, 0, .84); box-shadow: none;
}
body.chiri .tag, body.chiri .tag-chip { background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .10); color: rgba(0, 0, 0, .72); }

/* ===== ?theme=chiri-dark 参考主题·暗 ===== */
body.chiri-dark {
  background: #14181c; color: rgba(255, 255, 255, .90);
  padding: 48px 24px 64px; min-height: 100vh;
}
body.chiri-dark::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, #8e979e 0%, #3c464e 45%, #172229 100%);
}
body.chiri-dark::after { content: none; }
body.chiri-dark > * { position: relative; z-index: 1; }
body.chiri-dark .main-content {
  max-width: 1200px; margin: 0 auto;
  background: #1c1c1c; border: none; border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  padding: 64px 64px 72px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.chiri-dark .navbar {
  max-width: 1200px; margin: 0 auto 20px; background: #1c1c1c; border: none; border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45); backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.chiri-dark .page-layout { gap: 56px; align-items: start; }
body.chiri-dark .main-col, body.chiri-dark .sidebar { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; min-width: 0; }
@media (min-width: 1025px) { body.chiri-dark .sidebar { position: sticky; top: 32px; align-self: start; max-height: calc(100vh - 64px); overflow-y: auto; } }
body.chiri-dark .post-card, body.chiri-dark .post {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .10);
}
body.chiri-dark .post-card:first-child, body.chiri-dark .post:first-child { padding-top: 0; }
body.chiri-dark .post-card:last-child, body.chiri-dark .post:last-child { border-bottom: none; }
body.chiri-dark .post-card::after, body.chiri-dark .post::after { content: none; }
body.chiri-dark .author-card, body.chiri-dark .sidebar-search, body.chiri-dark .sidebar-categories, body.chiri-dark .sidebar-tags {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
  padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .10);
}
body.chiri-dark .author-card { border-top: none; padding-top: 0; }
body.chiri-dark h1, body.chiri-dark h2, body.chiri-dark h3, body.chiri-dark .post-title, body.chiri-dark .post-card h2 {
  font-weight: 500; letter-spacing: -0.02em; border: none; background: none; padding: 0; color: rgba(255, 255, 255, .92);
}
body.chiri-dark .post-meta, body.chiri-dark .meta, body.chiri-dark .post-date { color: rgba(255, 255, 255, .40); }
body.chiri-dark .excerpt, body.chiri-dark .post-preview { color: rgba(255, 255, 255, .58); }
body.chiri-dark .expand-btn, body.chiri-dark .card-comment-compose-btn, body.chiri-dark .card-comment-view-btn, body.chiri-dark .btn, body.chiri-dark .card-action-btn {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .9);
}
body.chiri-dark .tag, body.chiri-dark .tag-chip { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); color: rgba(255, 255, 255, .76); }
body.chiri-dark input, body.chiri-dark textarea { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); }
/* 窄屏 */
@media (max-width: 1024px) {
  body.chiri .page-layout, body.chiri-dark .page-layout { grid-template-columns: minmax(0, 1fr); }
  body.chiri .sidebar, body.chiri-dark .sidebar { position: static; max-height: none; overflow: visible; }
  body.chiri .main-content, body.chiri-dark .main-content { padding: 32px 22px 40px; border-radius: 18px; }
}
@media (prefers-reduced-transparency: reduce) {
  body.chiri::before, body.chiri-dark::before { display: none; }
}

/* ===== 顶部导航吸顶 ===== */
/* 顶部导航吸顶:滚动时不动,只有文章列表滚动 */
body[class=""] .navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
  transition: box-shadow .2s ease, background .2s ease;
}
body[class=""] .navbar.is-stuck {
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 12px rgba(16, 24, 40, .08);
}
@media (max-width: 640px) {
  body[class=""] .navbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
@media (prefers-reduced-transparency: reduce) {
  body[class=""] .navbar { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ===== 白天/黑夜主题切换(立体按钮 + 暗色适配) ===== */
/* ===== (a) 立体切换按钮 ===== */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  margin-right: 12px;
}
.theme-toggle:focus-visible {
  outline: 2px solid rgba(80, 120, 200, .55);
  outline-offset: 3px;
  border-radius: 999px;
}
.tt-track {
  width: 54px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e9ecf0, #d7dce2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(255, 255, 255, .7);
  position: relative;
  overflow: hidden;
}
.tt-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff, #e6eaef);
  box-shadow: 0 2px 5px rgba(16, 24, 40, .25), inset 0 1px 0 #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform .28s cubic-bezier(.34, 1.4, .64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-theme="dark"] .tt-thumb {
  transform: translateX(26px);
}
.theme-toggle:active .tt-thumb {
  transform: translateX(26px) scale(.92);
}
html:not([data-theme="dark"]) .theme-toggle:active .tt-thumb {
  transform: scale(.92);
}
.tt-sun, .tt-moon {
  position: absolute;
  transition: opacity .25s ease, transform .25s ease;
}
.tt-sun {
  opacity: 1;
  transform: scale(1);
}
.tt-moon {
  opacity: 0;
  transform: scale(.6);
}
html[data-theme="dark"] .tt-sun {
  opacity: 0;
  transform: scale(.6);
}
html[data-theme="dark"] .tt-moon {
  opacity: 1;
  transform: scale(1);
}

/* ===== (b) 暗色适配整站配色 ===== */
html[data-theme="dark"] body {
  background: #101418;
  color: rgba(255, 255, 255, .90);
}
html[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70vmax 55vmax at 12% 4%, rgba(120, 140, 165, .22), transparent 62%),
    radial-gradient(60vmax 48vmax at 88% 8%, rgba(90, 110, 140, .16), transparent 66%),
    radial-gradient(80vmax 60vmax at 50% 104%, rgba(0, 0, 0, .55), transparent 70%);
}
html[data-theme="dark"] body > * {
  position: relative;
  z-index: 1;
}
html[data-theme="dark"] .navbar {
  background: rgba(22, 26, 31, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .post {
  background: rgba(28, 32, 37, .66);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .author-card,
html[data-theme="dark"] .sidebar-search,
html[data-theme="dark"] .sidebar-categories,
html[data-theme="dark"] .sidebar-tags {
  background: rgba(28, 32, 37, .60);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
html[data-theme="dark"] .navbar .logo,
html[data-theme="dark"] .nav-links a {
  color: rgba(255, 255, 255, .92);
}
html[data-theme="dark"] .nav-links a:hover {
  color: rgba(255, 255, 255, 1);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .post-title {
  color: rgba(255, 255, 255, .92);
}
html[data-theme="dark"] .post-meta,
html[data-theme="dark"] .post-excerpt,
html[data-theme="dark"] .sidebar-title,
html[data-theme="dark"] .author-bio {
  color: rgba(255, 255, 255, .42);
}
html[data-theme="dark"] .post-date,
html[data-theme="dark"] .tag-count,
html[data-theme="dark"] .comment-count {
  color: rgba(255, 255, 255, .26);
}
html[data-theme="dark"] hr,
html[data-theme="dark"] .divider {
  border-color: rgba(255, 255, 255, .10);
}
/* ⚠️ 2026-10-16：本条原给深色下的按钮硬编码 `border: 1px solid
   rgba(255,255,255,.16)` + 不透明背景 —— 它的特异性（html[data-theme] +
   类选择器）高于文件末尾的玻璃配方，导致**深色按钮边缘出现一条突兀的细白线**，
   且玻璃的斜向高光被压成纯色。
   现只保留文字色；背景/边框交由「全站按钮 · 玻璃质感」用
   --glass-* 变量统一控制（深色下 --glass-edge 已按深底单独调过）。 */
html[data-theme="dark"] .expand-btn,
html[data-theme="dark"] .card-comment-compose-btn,
html[data-theme="dark"] .card-comment-view-btn,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .card-action-btn {
  color: rgba(255, 255, 255, .9);
}
html[data-theme="dark"] .tag,
html[data-theme="dark"] .tag-chip {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  color: rgba(255, 255, 255, .78);
}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .9);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(255, 255, 255, .34);
}

/* ===== (c) 过渡与降级 ===== */
html[data-theme="dark"] body,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .post,
html[data-theme="dark"] .author-card,
html[data-theme="dark"] .sidebar-search,
html[data-theme="dark"] .sidebar-categories,
html[data-theme="dark"] .sidebar-tags,
html[data-theme="dark"] .expand-btn,
html[data-theme="dark"] .card-comment-compose-btn,
html[data-theme="dark"] .card-comment-view-btn,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .card-action-btn,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .tag-chip,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] body::before {
    display: none;
  }
  html[data-theme="dark"] .post-card,
  html[data-theme="dark"] .post,
  html[data-theme="dark"] .author-card,
  html[data-theme="dark"] .sidebar-search,
  html[data-theme="dark"] .sidebar-categories,
  html[data-theme="dark"] .sidebar-tags {
    background: #1b1f24;
  }
}

/* ===== 作者头像:88px 居中 圆形立体 ===== */
  body[class=""] .author-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   作者头像 · 玻璃圆盘（2026-10-15 第五次重做）

   用户一句话点破："加了个圆框你跟我说有玻璃感了？"
   —— 对，我前四版做的一直是「**圆框 + 照片装在框里**」，
        两个独立的东西拼在一起，看着就是塑料相框。

   参考图的真相（放大看红毛衣直接延伸进环带内部才确认）：
       它是一块**半透明玻璃圆盘**，照片**从底下透出来** ——
       照片和环是**一个整体**，不是"照片被环框住"。

   ┌─ 我之前（错）─────────┐   ┌─ 参考图（对）───────────┐
   │  ╭────╮               │   │  ╭────╮                  │
   │  │白环│               │   │  │玻璃│ 照片从底下透出    │
   │  │╭──╮│ ← 照片被框住  │   │  │盘  │ 两者是一体        │
   │  │╰──╯│               │   │  ╰────╯                  │
   │  ╰────╯               │   │                          │
   └───────────────────────┘   └──────────────────────────┘

   ── 正确结构 ──────────────────────────────────────────────────────
     ① img          照片：**铺满整个圆**（100%），不裁小
     ② ::before     玻璃层：**盖在照片之上**，半透明
                       · 外圈厚 → 形成环带
                       · 内圈几乎全透明 → 照片清晰透出
                       · 整体偏**暗**、偏**暖**，不是亮白
     ③ box-shadow   投影在外

   ⚠️ 与"第二版"的区别（第二版也用 ::after 盖照片，但被否了）：
      第二版是**不透明的暗角**，把照片弄脏；
      本版是**半透明玻璃**，照片能透出来 —— 这才是玻璃感。
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   作者头像 · 玻璃圆盘（2026-10-16 定稿）

   ── 演进史（6 版，每版的教训都留着，避免重走）────────────────────────
     v1  img 被历史规则强制成容器同尺寸 → 环被压住，看不见
     v2  ::after 在**照片之上**叠不透明暗角 → 把照片弄脏
         （用户："图片的完整性不能破坏"）
     v3  环做成细描边 → 像描了一圈边，单条亮线做不出玻璃的厚度
     v4  用两个独立径向渐变（月牙 + 压暗）→ 亮区占 3/4 圈 → "像套了个框"；
         且两个椭圆的**覆盖边界**在环上形成硬跳变
     v5  改用 conic 但没用 mask 裁 → conic 铺满整个元素 → **中心发雾**
     v6（本版）conic + radial 做 mask 裁成环 → 方向、厚度、通透兼顾

   ── 三层分工 ─────────────────────────────────────────────────────────
     ① img            照片：inset:0 铺满整个圆，**零遮挡**
     ② ::before       玻璃层：盖在照片之上，但被 mask 裁成**只在外环**
         · mask   → 画环（radial 的等值线是同心圆，环宽天然均匀）
         · conic  → 给环**方向**（光从左上来，沿角度连续 → 无硬跳变）
         · radial → 给环**厚度**（内缘渐入 → 峰值 → 外缘收）
     ③ ::after        外缘侧壁：左上受光、右下背光 → "盘有厚度"
     ④ box-shadow     投影：接触影 + 主影 + 远影（贴边下拖）

   ── 关键约束（每条都是踩坑换来的）────────────────────────────────────
     · **必须 overflow:hidden** —— img 有 scale(1.02)（凸透镜放大），
       scale 以中心放大 → img 的圆半径也变大，不裁切就会**溢出到圆外**，
       露出一圈照片自己的底色（用户："两层分界太分明"）
     · **必须用 radial 做 mask** —— conic 只有按角度分布、没有按半径限制，
       若不裁就铺满整个元素 → **中心发雾**（实测中心区 +14 级亮度）
     · **不能用 padding+mask 做环** —— padding 在 border-radius:50% 的元素上
       不等于"同心圆内缩"，环带在对角方向宽、正方向窄 → 环宽不均
     · 照片零遮挡 —— 所有装饰层都只作用在环带上，不碰照片中心区
   ═══════════════════════════════════════════════════════════════════════ */
.author-avatar,
  body[class=""] .author-avatar-fallback {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: transparent;
  /* ★ 裁切：img 有 scale(1.02)，不裁会溢出到圆外（见上"关键约束"） */
  overflow: hidden;
  /* ④ 投影：接触影（无偏移+正 spread，填平边缘落差）+ 主影 + 远影。
       全部负 spread，方向与光源一致（左上光 → 右下影，x 偏移为 0）。 */
  /* 2026-10-16：用户反馈「浅色不够立体，把阴影加大」。
     实测（沿竖直中线）：头像下缘 L=191，卡片底 L=248 —— 最暗只暗 57 级，
     且阴影仅延伸约 47px 就回到卡片底色 → **又浅又短**。
     加大策略：各层 alpha 上调 + 扩散距离整体拉长（最远层 62 → 88px），
     并把接触影的正 spread 从 0 提到 1px（贴边更实）。 */
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, .45),
    0 1px 4px 1px rgba(16, 24, 40, .12),
    0 3px 8px -1px rgba(16, 24, 40, .26),
    2px 6px 14px -3px rgba(16, 24, 40, .32),
    4px 12px 26px -6px rgba(16, 24, 40, .32),
    8px 22px 44px -10px rgba(16, 24, 40, .28),
    16px 38px 76px -18px rgba(16, 24, 40, .22),
    24px 56px 110px -28px rgba(16, 24, 40, .16);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* ② 玻璃层：盖在照片之上，被 mask 裁成「只在外环」 */
.author-avatar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  background:
    /* ① 方向层（conic）：光从左上来，沿角度**连续**过渡
          —— 会被 mask 裁成环，不会铺到中心 */
    conic-gradient(from 0deg,
      rgba(255, 255, 255, .13)   0deg,   /* 上 */
      rgba(230, 239, 250, .07)  35deg,
      rgba(148, 164, 184, .13)  90deg,   /* 右 */
      rgba(118, 136, 158, .19) 135deg,   /* 右下：最暗（背光） */
      rgba(138, 154, 176, .16) 180deg,   /* 下 */
      rgba(198, 211, 228, .09) 220deg,
      rgba(255, 255, 255, .24) 270deg,   /* 左 */
      rgba(255, 255, 255, .42) 315deg,   /* ★ 左上：最亮（光源方向） */
      rgba(255, 255, 255, .28) 340deg,
      rgba(255, 255, 255, .13) 360deg),
    /* ② 厚度层（radial）：内缘渐入 → 峰值 → 外缘收，不留平台 */
    radial-gradient(circle closest-side,
      rgba(255, 255, 255, 0)     0%,
      rgba(255, 255, 255, 0)    86%,
      rgba(248, 251, 254, .05)  88.5%,
      rgba(250, 252, 254, .09)  91%,
      rgba(252, 253, 255, .13)  93.5%,
      rgba(255, 255, 255, .17)  95.5%,
      rgba(255, 255, 255, .22)  97.5%,
      rgba(255, 255, 255, .30)  99%,
      rgba(244, 248, 252, .16)  99.6%,
      rgba(210, 221, 235, .05)  99.9%,
      rgba(200, 213, 230, 0)   100%),
    /* ③ 底部焦散：暖色透光（同样被 mask 裁在环上，不染照片） */
    radial-gradient(ellipse 48% 32% at 58% 98%,
      rgba(255, 240, 214, .18) 0%,
      rgba(255, 247, 232, .07) 44%,
      rgba(255, 255, 255, 0)  76%);
  /* ★ 用 radial 做 mask 裁成环：等值线是严格同心圆 → 环宽均匀；
       84% 以内完全透明 → 照片中心区零遮挡、不发雾 */
  -webkit-mask: radial-gradient(circle closest-side,
    transparent 0 84%, #000 88%, #000 100%);
          mask: radial-gradient(circle closest-side,
    transparent 0 84%, #000 88%, #000 100%);
  box-shadow:
    inset 1px 1px 1.5px -0.5px rgba(255, 255, 255, .34),
    inset -1px -1px 2px -1px rgba(28, 40, 56, .12);
}

/* ③ 外缘侧壁：左上受光 → 外缘亮；右下背光 → 外缘暗。
    这是"盘有厚度"的来源（不是一张贴在卡片上的圆片）。 */
.author-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-shadow:
    inset 1.5px 1.5px 2px -1px rgba(255, 255, 255, .80),
    inset -1.5px -1.5px 2.5px -1px rgba(28, 40, 56, .32),
    inset 0 0 1px rgba(255, 255, 255, .5);
}

  body[class=""] .author-avatar img {
  /* ① 照片：inset:0 铺满整个圆，**零遮挡** */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  z-index: 1;
  /* 凸透镜的微距放大感（幅度不宜大：scale 会裁掉边缘内容） */
  transform: scale(1.02);
  filter: contrast(1.02) saturate(1.03);
  transition: transform .35s ease;
}

  body[class=""] .author-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 500;
  color: #1b2026;
}

.author-name,
  body[class=""] .author-title {
  text-align: center;
}

/* 2026-10-20：简介跟随头像/名字居中（作者栏整体居中排版）。
   原来这里是 left —— 无论 Markdown 里怎么写 <div align="center">，
   都会被这条更高层叠的规则覆盖，且 bio 的 HTML 还会被 bleach 剥掉。
   链接行仍保持居中，与作者栏整体基线一致。 */
.author-bio,
  body[class=""] .author-links {
  text-align: center;
}

.author-avatar:hover,
  body[class=""] .author-avatar-fallback:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 6px rgba(16, 24, 40, .08),
    0 10px 24px rgba(16, 24, 40, .20),
    0 2px 8px rgba(16, 24, 40, .12);
}

html[data-theme="dark"] .author-avatar,
  html[data-theme="dark"] .author-avatar-fallback {
  background: linear-gradient(160deg, #2b3138, #1b2026);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 6px rgba(16, 24, 40, .08),
    0 8px 22px rgba(0, 0, 0, .55),
    0 2px 6px rgba(0, 0, 0, .30);
}

  html[data-theme="dark"] .author-avatar-fallback {
  color: rgba(255, 255, 255, .9);
}

html[data-theme="dark"] .author-avatar:hover,
  html[data-theme="dark"] .author-avatar-fallback:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 6px rgba(16, 24, 40, .08),
    0 10px 26px rgba(0, 0, 0, .60),
    0 2px 8px rgba(0, 0, 0, .35);
}

  @media (max-width: 640px) {
  .author-avatar,
  body[class=""] .author-avatar-fallback {
    width: 72px;
    height: 72px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   此处原有 196 行「旧深色主题定义」（L3668~L3863），已于 2026-10-09 删除。

   为什么删：它是早期基于 #0f1114 / #18181b（Zinc 灰阶）的一整套深色配色，
   后来站点深色主题改为 #5b6874 → #4e5b68 的蓝灰调，这套定义被后续规则
   **全部覆盖**，成为死代码。

   删除前的验证（严格按「先验证再动手」）：
     1. CDP 逐条检查：该区块 27 条规则涉及的元素，实际渲染值无一条来自它
        （body/navbar/card/author-card/btn/input/title/meta 实测均取自后续规则）
     2. 像素级对比：以「同一份代码连续两次截图」的差异（0.0470% / Δmax=220）
        作为噪声下限，删除后与基准的差异为 0.0441% / Δmax=225 ——
        **低于噪声下限**，证明渲染结果无变化
     3. 深浅两主题 × 首页/详情页 四种组合均通过

   如需查阅原内容：git show c1f8426:app/static/css/style.css
   ══════════════════════════════════════════════════════════════════════════ */

/* ===== 暗色:摘要淡出层改暗 ===== */
html[data-theme="dark"] body[class=""] .post-preview::after {
  background: linear-gradient(rgba(24, 24, 27, 0) 0%, #18181b 100%);
}

html[data-theme="dark"] body[class=""] .post-card .post-body-content::after {
  background: linear-gradient(rgba(24, 24, 27, 0) 0%, #18181b 100%);
}

html[data-theme="dark"] body[class=""] .post-card .post-body-content::before {
  background: linear-gradient(rgba(24, 24, 27, 0) 0%, #18181b 100%);
}

html[data-theme="dark"] body[class=""] .excerpt::after {
  background: linear-gradient(rgba(24, 24, 27, 0) 0%, #18181b 100%);
}

html[data-theme="dark"] body[class=""] .excerpt::before {
  background: linear-gradient(rgba(24, 24, 27, 0) 0%, #18181b 100%);
}

html[data-theme="dark"] body[class=""] .sidebar::after {
  background: linear-gradient(rgba(24, 24, 27, 0) 0%, #18181b 100%);
}

html[data-theme="dark"] body[class=""] .sidebar::before {
  background: linear-gradient(rgba(24, 24, 27, 0) 0%, #18181b 100%);
}

html[data-theme="dark"] body[class=""] .page-footer::after {
  background: linear-gradient(rgba(15, 17, 20, 0) 0%, #0f1114 100%);
}

html[data-theme="dark"] body[class=""] .page-footer::before {
  background: linear-gradient(rgba(15, 17, 20, 0) 0%, #0f1114 100%);
}

/* ===== 亮暗统一灰阶梯(同色系) ===== */
html[data-theme="dark"] body[class=""] {
  background: #212830;
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""]::before {
  background:
    radial-gradient(70vmax 55vmax at 12% 4%, rgba(150,170,195,.14), transparent 62%),
    radial-gradient(60vmax 48vmax at 88% 8%, rgba(120,140,170,.10), transparent 66%),
    radial-gradient(80vmax 60vmax at 50% 104%, rgba(10,14,19,.55), transparent 70%);
}
html[data-theme="dark"] body[class=""] .site-header, html[data-theme="dark"] body[class=""] .header, html[data-theme="dark"] body[class=""] .navbar {
  background: rgba(33,40,48,.90);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #39424e;
  box-shadow: none;
}
html[data-theme="dark"] body[class=""] .site-header a, html[data-theme="dark"] body[class=""] .header a, html[data-theme="dark"] body[class=""] .navbar a, html[data-theme="dark"] body[class=""] .logo, html[data-theme="dark"] body[class=""] .site-title {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card, html[data-theme="dark"] body[class=""] .post {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] body[class=""] .post-card:hover, html[data-theme="dark"] body[class=""] .post:hover {
  background: #3c4652;
  border-color: #47515e;
}
html[data-theme="dark"] body[class=""] .author-card, html[data-theme="dark"] body[class=""] .sidebar-search, html[data-theme="dark"] body[class=""] .sidebar-categories, html[data-theme="dark"] body[class=""] .sidebar-tags {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme="dark"] body[class=""] .post-preview::after {
  background: linear-gradient(to bottom, rgba(51,60,71,0) 0%, #333c47 100%);
}
html[data-theme="dark"] body[class=""] h1, html[data-theme="dark"] body[class=""] h2, html[data-theme="dark"] body[class=""] h3, html[data-theme="dark"] body[class=""] .post-title, html[data-theme="dark"] body[class=""] .post-card h2 {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-meta, html[data-theme="dark"] body[class=""] .meta, html[data-theme="dark"] body[class=""] .post-date {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .excerpt, html[data-theme="dark"] body[class=""] .post-preview {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .meta-tertiary, html[data-theme="dark"] body[class=""] .post-meta .secondary, html[data-theme="dark"] body[class=""] .meta .secondary {
  color: #77828f;
}
/* ⚠️ 2026-10-16：本条原先给深色下的所有 button/.btn 硬编码
   `background:#3c4652` + `box-shadow:none` —— 会把全站按钮的玻璃质感抹掉
   （且它的特异性 html[data-theme] body[class=""] 高于后来的玻璃规则）。
   现改为**不再覆盖 background/box-shadow**，只保留文字色；
   按钮外观统一交给文件末尾的「全站按钮·玻璃质感」块。 */
html[data-theme="dark"] body[class=""] button,
html[data-theme="dark"] body[class=""] .btn,
html[data-theme="dark"] body[class=""] .button {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .tag, html[data-theme="dark"] body[class=""] .tags, html[data-theme="dark"] body[class=""] .sidebar-tags .tag {
  background: #3c4652;
  border: 1px solid #47515e;
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] input, html[data-theme="dark"] body[class=""] textarea, html[data-theme="dark"] body[class=""] select {
  background: #212830;
  border: 1px solid #39424e;
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] input::placeholder, html[data-theme="dark"] body[class=""] textarea::placeholder {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] input:focus, html[data-theme="dark"] body[class=""] textarea:focus, html[data-theme="dark"] body[class=""] select:focus {
  border-color: #5a6675;
}
/* ⚠️ 2026-10-16：此处原有两条深色头像规则（尺寸 88px + padding:3px +
   单层阴影 + img 的 inset 阴影）。它们与新版「玻璃圆盘」冲突：
     · 把尺寸从 104 拉回 88
     · padding:3px 会与新版「照片 inset:0 铺满」打架
     · 单层阴影会盖掉新版的多层投影
   已整体移除；深色头像样式统一由文件后段的
   `html[data-theme="dark"] body[class=""] .author-avatar` 负责。
   （fallback 的样式保留在下方那条规则里。） */
html[data-theme="dark"] body[class=""] .author-avatar-fallback {
  color: #e9eef4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
html[data-theme="dark"] body[class=""] .comment {
  border-color: #39424e;
}
html[data-theme="dark"] body[class=""] .comment-list, html[data-theme="dark"] body[class=""] .comment-item {
  border-color: #39424e;
}
html[data-theme="dark"] body[class=""] .comment-bubble, html[data-theme="dark"] body[class=""] .comment-body {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme="dark"] body[class=""] .sidebar-search input {
  background: #212830;
  border: 1px solid #39424e;
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .sidebar-search input:focus {
  border-color: #5a6675;
}
html[data-theme="dark"] body[class=""] .sidebar-categories a, html[data-theme="dark"] body[class=""] .sidebar-tags a {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .sidebar-categories a:hover, html[data-theme="dark"] body[class=""] .sidebar-tags a:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-title a {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-title a:hover {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-meta a {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-meta a:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .pagination a, html[data-theme="dark"] body[class=""] .pagination span {
  color: #a4afbc;
  border-color: #39424e;
}
html[data-theme="dark"] body[class=""] .pagination a:hover {
  color: #e9eef4;
  background: #3c4652;
  border-color: #47515e;
}
html[data-theme="dark"] body[class=""] .pagination .current {
  color: #e9eef4;
  background: #3c4652;
  border-color: #47515e;
}
html[data-theme="dark"] body[class=""] .footer {
  background: #212830;
  border-top: 1px solid #39424e;
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .footer a {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .footer a:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .search-results {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme="dark"] body[class=""] .search-results .result-title {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .search-results .result-snippet {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .search-results .result-meta {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .post-card .post-tags {
  background: #3c4652;
  border: 1px solid #47515e;
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-tags:hover {
  background: #47515e;
  border-color: #5a6675;
}
html[data-theme="dark"] body[class=""] .author-card .author-name {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .author-card .author-bio {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .author-card .author-meta {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-label {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-title {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-title {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .comment .comment-author {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .comment .comment-date {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .comment .comment-content {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .comment .reply-link {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .comment .reply-link:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .read-more {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .read-more:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-image {
  border-radius: 14px;
  overflow: hidden;
}
html[data-theme="dark"] body[class=""] .post-card .post-image img {
  border-radius: 14px;
}
html[data-theme="dark"] body[class=""] .post-card .post-content {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-content p {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-content a {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-content a:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-content code {
  background: #212830;
  border: 1px solid #39424e;
  color: #c7d0da;
  border-radius: 6px;
  padding: 2px 6px;
}
html[data-theme="dark"] body[class=""] .post-card .post-content pre {
  background: #212830;
  border: 1px solid #39424e;
  color: #c7d0da;
  border-radius: 10px;
  padding: 12px 16px;
}
html[data-theme="dark"] body[class=""] .post-card .post-content blockquote {
  background: #2a313a;
  border-left: 3px solid #47515e;
  color: #a4afbc;
  border-radius: 10px;
  padding: 12px 16px;
}
html[data-theme="dark"] body[class=""] .post-card .post-content ul, html[data-theme="dark"] body[class=""] .post-card .post-content ol {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-content li {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-content strong {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-content em {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-content h4, html[data-theme="dark"] body[class=""] .post-card .post-content h5, html[data-theme="dark"] body[class=""] .post-card .post-content h6 {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-content hr {
  border-color: #39424e;
}
html[data-theme="dark"] body[class=""] .post-card .post-content table {
  border-color: #39424e;
}
html[data-theme="dark"] body[class=""] .post-card .post-content th {
  background: #2a313a;
  color: #e9eef4;
  border-color: #39424e;
}
html[data-theme="dark"] body[class=""] .post-card .post-content td {
  color: #a4afbc;
  border-color: #39424e;
}
html[data-theme="dark"] body[class=""] .post-card .post-content img {
  border-radius: 10px;
}
html[data-theme="dark"] body[class=""] .post-card .post-content figure {
  background: #2a313a;
  border: 1px solid #39424e;
  border-radius: 10px;
  padding: 12px;
}
html[data-theme="dark"] body[class=""] .post-card .post-content figcaption {
  color: #77828f;
  font-size: 0.9rem;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-icon {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-icon:hover {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-count {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-count {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .author-card .avatar-wrapper {
  background: linear-gradient(160deg, #4a5663, #333c47);
  padding: 3px;
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
html[data-theme="dark"] body[class=""] .author-card .avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-theme="dark"] body[class=""] .author-card .avatar-wrapper .fallback {
  color: #e9eef4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
  padding: 14px 16px;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item:hover {
  background: #3c4652;
  border-color: #47515e;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item .comment-header {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item .comment-body {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item .comment-footer {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item .comment-actions {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item .comment-actions:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item .nested-reply {
  background: #2a313a;
  border: 1px solid #39424e;
  border-radius: 10px;
  padding: 10px 14px;
}
html[data-theme="dark"] body[class=""] .comment-list .comment-item .nested-reply:hover {
  background: #333c47;
  border-color: #47515e;
}
html[data-theme="dark"] body[class=""] .comment-form {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
  padding: 16px;
}
html[data-theme="dark"] body[class=""] .comment-form .form-label {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .comment-form .form-input {
  background: #212830;
  border: 1px solid #39424e;
  color: #e9eef4;
  border-radius: 8px;
  padding: 10px 12px;
}
html[data-theme="dark"] body[class=""] .comment-form .form-input:focus {
  border-color: #5a6675;
}
html[data-theme="dark"] body[class=""] .comment-form .form-input::placeholder {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .comment-form .form-submit {
  background: #3c4652;
  border: 1px solid #47515e;
  color: #e9eef4;
  box-shadow: none;
  border-radius: 8px;
  padding: 10px 16px;
}
html[data-theme="dark"] body[class=""] .comment-form .form-submit:hover {
  background: #47515e;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header {
  border-bottom: 1px solid #39424e;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-footer {
  border-top: 1px solid #39424e;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-title {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-meta {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-footer .post-tags {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-footer .post-share {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-footer .post-share:hover {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-results-list {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-results-list .result-item {
  color: #a4afbc;
  border-bottom: 1px solid #39424e;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-results-list .result-item:last-child {
  border-bottom: none;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-results-list .result-item:hover {
  background: #3c4652;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-results-list .result-item .result-title {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-results-list .result-item .result-snippet {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .sidebar-search .search-results-list .result-item .result-meta {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-list {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-list .category-item {
  color: #a4afbc;
  border-bottom: 1px solid #39424e;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-list .category-item:last-child {
  border-bottom: none;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-list .category-item:hover {
  background: #3c4652;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-list .category-item .category-name {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .sidebar-categories .category-list .category-item .category-count {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-list {
  background: #333c47;
  border: 1px solid #39424e;
  border-radius: 14px;
  box-shadow: none;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-list .tag-item {
  background: #3c4652;
  border: 1px solid #47515e;
  color: #c7d0da;
  border-radius: 8px;
  padding: 6px 10px;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-list .tag-item:hover {
  background: #47515e;
  border-color: #5a6675;
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-list .tag-item .tag-name {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-list .tag-item .tag-count {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-date {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-author {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-author:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-category {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-category:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-comments {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-comments:hover {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-views {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-views:hover {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes:hover {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-count {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon {
  color: #77828f;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon:hover {
  color: #a4afbc;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active.active.active.active {
  color: #c7d0da;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active.active.active.active:hover {
  color: #e9eef4;
}
html[data-theme="dark"] body[class=""] .post-card .post-card-header .post-likes .like-icon.active .like-count.active.active.active.active.active.active.active.active.active.active.active.active.active {
  color: #c7d0da;
}

/* ===== 暗色:大渐变+立体感+切换按钮+去鼠标光斑 ===== */
/* ===== 第1件：关掉鼠标跟随光斑 ===== */
html[data-theme="dark"] .hero::before,
html[data-theme="dark"] .hero::after,
html[data-theme="dark"] .bg-glow::before,
html[data-theme="dark"] .bg-glow::after,
html[data-theme="dark"] .mouse-glow::before,
html[data-theme="dark"] .mouse-glow::after {
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* ===== 第2件：暗色下顶栏切换按钮 ===== */
html[data-theme="dark"] .tt-track {
  background: linear-gradient(180deg, #2b333d, #212830);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.06);
  border: 1px solid #39424e;
}
html[data-theme="dark"] .tt-thumb {
  background: linear-gradient(180deg, #56616f, #3c4652);
  box-shadow: 0 2px 5px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-theme="dark"] .tt-icon {
  color: #c7d0da;
}
html[data-theme="dark"] .tt-icon.active {
  color: #e9eef4;
}

/* ===== 第3件：暗色大渐变 + 立体感 ===== */
html[data-theme="dark"] body {
  background: #212830;
}
html[data-theme="dark"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, #39434f 0%, #2a323b 38%, #1d242b 72%, #14191f 100%);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .sidebar-box {
  background: linear-gradient(180deg, #39434f 0%, #333c47 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.32);
}
html[data-theme="dark"] .sidebar-box {
  background: linear-gradient(180deg, #363f4a 0%, #303842 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.4), 0 10px 24px rgba(0,0,0,.32);
}
html[data-theme="dark"] .topbar {
  background: rgba(29,36,43,.92);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 1px 10px rgba(0,0,0,.4);
}
/* 第1件实际使用的选择器说明：
   原规则位于 style.css 约 1960 行，选择器为 .hero::before / .hero::after / .bg-glow::before / .bg-glow::after / .mouse-glow::before / .mouse-glow::after，
   均使用 radial-gradient(220px circle at var(--mx,50%) var(--my,0%), ...) 做光斑。
   覆盖规则通过 content:none / background:none / opacity:0 / display:none 彻底关闭。
*/

/* ===== 暗色最终覆盖 ===== */
/* 1. 暗色:纵向大渐变(上浅下深),盖掉旧的三层径向光晕 */
/* 2. 暗色卡片:微渐变(上浅下深)+ 上高光 + 下投影(立体感) */
/* 3. 关掉"鼠标跟随光斑"(你之前用 --mx/--my 做的那个径向高光) */
.post-card::before,
.post::before,
.post-card::after,
.post::after { background-image: none !important; }

/* ===== 切换按钮去框 + 暗色渐变提亮 ===== */
.theme-toggle,
.theme-toggle:hover,
.theme-toggle:focus,
.theme-toggle:active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 4px !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  line-height: 0 !important;
}
.theme-toggle:focus-visible { outline: 2px solid rgba(122, 162, 247, .8) !important; outline-offset: 2px !important; border-radius: 999px !important; }
/* ===== 文字框:四周柔和渐隐 ===== */
/* ── 卡片摘要文字框：四方向柔和渐隐 ── */
/* ── 底部兜底渐隐（不支持 mask 的浏览器） ── */
.post-preview::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 76px;
  pointer-events: none;
  /* 收尾色用变量 —— 与卡片底色同源，避免改卡片后遮罩脱节出现色带 */
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--card-bg-solid) 12%, transparent) 32%,
    color-mix(in srgb, var(--card-bg-solid) 34%, transparent) 56%,
    color-mix(in srgb, var(--card-bg-solid) 62%, transparent) 78%,
    color-mix(in srgb, var(--card-bg-solid) 86%, transparent) 92%,
    var(--card-bg-solid) 100%);
}

/* 暗色主题兜底 */
/* ── 展开态：取消渐隐 ── */
.post-card.expanded .post-preview {
  -webkit-mask-image: none;
  -webkit-mask-composite: none;
  mask-image: none;
  mask-composite: none;
}

.post-card.expanded .post-preview::after {
  display: none;
}

/* ===== 立体感加强+渐隐范围加大 ===== */
/* 亮色:卡片浮起(三层投影,范围更大) */
body[class=""] .post-card:hover,
body[class=""] .post:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 4px rgba(16, 24, 40, .07),
    0 12px 28px rgba(16, 24, 40, .13),
    0 30px 64px rgba(16, 24, 40, .13),
    0 54px 110px rgba(16, 24, 40, .08) !important;
}
/* 亮色:侧栏盒子(比卡片弱一档) */
body[class=""] .author-card,
body[class=""] .sidebar-search,
body[class=""] .sidebar-categories,
body[class=""] .sidebar-tags,
/* 2026-10-15：.dtw（右侧栏日期时间卡片）**并入同一选择器组**，
   而不是另写一份阴影。先前它单独声明，导致"日历栏与其它栏不一致"。
   并组后：今后改侧栏盒子外观时，它自动跟随，不会再各自漂移。 */
body[class=""] .dtw {
  background: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.56) 100%) !important;
  border: 1px solid rgba(255,255,255,.8) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,24,40,.05), 0 10px 26px rgba(16,24,40,.09), 0 22px 52px rgba(16,24,40,.07) !important;
}

/* 暗色:卡片浮起(更亮的面 + 更大范围投影) */
html[data-theme="dark"] body[class=""] .post-card:hover,
html[data-theme="dark"] body[class=""] .post:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 3px 6px rgba(0,0,0,.5),
    0 16px 36px rgba(0,0,0,.46),
    0 36px 76px rgba(0,0,0,.38),
    0 60px 120px rgba(0,0,0,.28) !important;
}
/* 暗色:侧栏盒子(弱一档) */
html[data-theme="dark"] body[class=""] .author-card,
html[data-theme="dark"] body[class=""] .sidebar-search,
html[data-theme="dark"] body[class=""] .sidebar-categories,
html[data-theme="dark"] body[class=""] .sidebar-tags,
/* 2026-10-15：.dtw 并入本组。这是深色下**真正生效**的那条
   （带 !important 且在靠后位置）；文件前面另有几条同选择器的旧规则，
   只加进旧规则不会生效 —— 曾因此出现"深色下日历栏描边与其它栏不同"。 */
html[data-theme="dark"] body[class=""] .dtw {
  background: linear-gradient(180deg, #4b5766 0%, #3d4855 100%) !important;
  border: 1px solid #55626f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 2px 4px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.34), 0 26px 60px rgba(0,0,0,.24) !important;
}

/* 文字框渐隐范围加大 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-preview {
  position: relative;
  padding-inline: 18px !important;
  margin-inline: -18px !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.86) 70%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 94%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 2.5%, #000 8%, #000 92%, rgba(0,0,0,.5) 97.5%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0,0,0,.86) 70%, rgba(0,0,0,.5) 84%, rgba(0,0,0,.18) 94%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 2.5%, #000 8%, #000 92%, rgba(0,0,0,.5) 97.5%, transparent 100%) !important;
  mask-composite: intersect !important;
  transition: max-height .42s cubic-bezier(.22,.61,.36,1);
}
body[class=""] .post-preview::after { height: 100px !important; }
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-preview::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--card-bg-solid) 14%, transparent) 32%,
    color-mix(in srgb, var(--card-bg-solid) 36%, transparent) 56%,
    color-mix(in srgb, var(--card-bg-solid) 64%, transparent) 78%,
    color-mix(in srgb, var(--card-bg-solid) 88%, transparent) 92%,
    var(--card-bg-solid) 100%);
  height: 100px !important;
}

/* ===== 顶栏同色系 ===== */
html[data-theme="dark"] body[class=""] .navbar a,
html[data-theme="dark"] body[class=""] .navbar .logo { color: #eef2f7 !important; }
html[data-theme="dark"] body[class=""] .tt-track {
  background: linear-gradient(180deg, #5b6979, #4b5766) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.08) !important;
}
html[data-theme="dark"] body[class=""] .tt-thumb {
  background: linear-gradient(180deg, #8f9dae, #6f7d8e) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

/* ===== 背景大渐变跨度拉大 ===== */
body[class=""]::before {
  content: '' !important;
  position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important;
  display: block !important;
  background: linear-gradient(180deg, #fbfcfd 0%, #f2f5f8 22%, #e6ebf1 46%, #d8dfe7 70%, #c9d2dc 88%, #bcc6d2 100%) !important;
}

/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""]::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, #5a6878 0%, #4a5765 20%, #3b4653 44%, #2b333d 68%, #1e252d 86%, #12181e 100%) !important;
  display: block !important;
}

body[class=""] { background: #d8dfe7 !important; }
html[data-theme="dark"] body[class=""] { background: #2b333d !important; }

/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .post-card,
body[class=""] .post {
  background: linear-gradient(180deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.70) 100%) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(16, 24, 40, .06),
    0 8px 20px rgba(16, 24, 40, .10),
    0 22px 48px rgba(16, 24, 40, .10),
    0 40px 88px rgba(16, 24, 40, .06) !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}
body[class=""] .author-card, body[class=""] .sidebar-search,
body[class=""] .sidebar-categories, body[class=""] .sidebar-tags,
/* 2026-10-15：.dtw 并入。与深色同理 —— 文件里有好几条同选择器的旧规则，
   必须加进**实际生效的那条**，否则改了不生效。 */
body[class=""] .dtw {
  background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,255,255,.66) 100%) !important;
}
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card,
html[data-theme="dark"] body[class=""] .post {
  background: linear-gradient(180deg, #5b6874 0%, #4e5b68 100%) !important;
  border: 1px solid #5a6878 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13),
    0 2px 4px rgba(0, 0, 0, .45),
    0 12px 28px rgba(0, 0, 0, .40),
    0 28px 60px rgba(0, 0, 0, .34),
    0 48px 100px rgba(0, 0, 0, .26) !important;
  transition: transform .24s ease, box-shadow .24s ease !important;
}

/* ===== 顶栏立体化 ===== */
/* 亮色顶栏:立体薄板 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar {
  background: linear-gradient(180deg, rgba(252,253,255,.92) 0%, rgba(240,244,249,.86) 100%) !important;
  backdrop-filter: blur(16px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
  border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .35),
    0 1px 2px rgba(16, 24, 40, .06),
    0 6px 18px rgba(16, 24, 40, .07) !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar.is-stuck {
  background: linear-gradient(180deg, rgba(252,253,255,.97) 0%, rgba(240,244,249,.94) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .4),
    0 2px 4px rgba(16, 24, 40, .08),
    0 10px 28px rgba(16, 24, 40, .12) !important;
}

/* 暗色顶栏:立体薄板(与页面顶 #5a6878 同族,略提亮) */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .navbar {
  background: linear-gradient(180deg, rgba(96,110,127,.80) 0%, rgba(76,88,103,.74) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -1px 0 rgba(0, 0, 0, .18),
    0 1px 2px rgba(0, 0, 0, .30),
    0 8px 22px rgba(0, 0, 0, .26) !important;
  backdrop-filter: blur(16px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .navbar.is-stuck {
  background: linear-gradient(180deg, rgba(96,110,127,.94) 0%, rgba(76,88,103,.90) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .22),
    0 2px 6px rgba(0, 0, 0, .40),
    0 14px 34px rgba(0, 0, 0, .34) !important;
}

/* 顶栏里的切换按钮也加一点立体:轨道内阴影加深、滑块上高光更亮 */
body[class=""] .tt-track {
  box-shadow: inset 0 2px 5px rgba(16,24,40,.20), inset 0 -1px 0 rgba(255,255,255,.9) !important;
}
body[class=""] .tt-thumb {
  box-shadow: 0 2px 6px rgba(16,24,40,.28), inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* ===== 标签云:浅彩+按数量定大小+缓慢飘动 ===== */
/* ── 1. 撤销跑马灯轨道，改成松散标签云 ── */
/* 让排列不规整：每几个标签做轻微上下错位与微小旋转 */
.sidebar-tags .tag:nth-child(4n+3) { transform: translateY(1px) rotate(-.5deg) !important; }
/* ── 2. 字号按数量分档（5 档，差距拉开） ── */
/* ── 3. 浅色彩色系（亮色主题）：5 个色档 = 5 个浅色（低饱和、粉彩），字色比底色深一档 ── */
/* ── 4. 暗色主题的同一套色（提亮 + 降饱和，保证协调） ── */
/* ── 5. 缓慢各自飘动（每个标签独立 duration/delay/direction；不是整条轨道匀速） ── */
@keyframes tagDrift {
  0%   { translate: 0 0; }
  50%  { translate: 3px -5px; }
  100% { translate: 0 0; }
}
@keyframes tagDrift2 {
  0%   { translate: 0 0; }
  50%  { translate: -4px 4px; }
  100% { translate: 0 0; }
}
.sidebar-tags .tag:nth-child(2n) { animation-name: tagDrift2 !important; animation-duration: 12s !important; animation-delay: -3s !important; }
.sidebar-tags .tag:nth-child(3n) { animation-duration: 15s !important; animation-delay: -6s !important; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-tags .tag { animation: none !important; translate: none !important; }
}

/* ── 6. 计数徽章与 hover ── */
/* ===== 标签云:彩色字+上标数量+随机飘 ===== */
/* ① 不再溢出:盒子给足内边距 + 裁掉溢出(漂移幅度小,不会看起来被切断) */
/* ④ 去掉椭圆框:只有彩色字 */
.sidebar-tags .tag,
.sidebar-tags .tag:hover {
  background: none !important; border: none !important; box-shadow: none !important;
  padding: 0 !important; border-radius: 0 !important; text-decoration: none !important;
  display: inline-block !important; position: relative !important;
}
/* ⑤ 数量:右上角很小的上标 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-count {
  font-size: .56rem !important;
  opacity: .55 !important;
  line-height: 1 !important;
  vertical-align: super !important;
  margin-left: 2px !important;
  font-weight: 400 !important;
}

/* ② 随机飘:每标签用 JS 注入的随机变量控制方向/幅度/时长/延迟 */
@keyframes tagRandom {
  0%   { translate: 0 0; }
  25%  { translate: calc(var(--dx, 3px) * 1) calc(var(--dy, -3px) * 1); }
  50%  { translate: calc(var(--dx, 3px) * -0.6) calc(var(--dy, -3px) * 1.2); }
  75%  { translate: calc(var(--dx, 3px) * 0.4) calc(var(--dy, -3px) * -0.8); }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .sidebar-tags .tag { animation: none !important; translate: none !important; } }

/* 颜色档 → 只改字体色(--tag-color),不再有底色 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-c0 {
  background: rgba(122,162,247,.16) !important;
  border: 1px solid rgba(122,162,247,.34) !important;
  color: #3f5c9e !important;
  --tag-color: #3f5c9e !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-c1 {
  background: rgba(110,200,180,.16) !important;
  border: 1px solid rgba(110,200,180,.34) !important;
  color: #2f6f63 !important;
  --tag-color: #2f6f63 !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-c2 {
  background: rgba(226,150,196,.16) !important;
  border: 1px solid rgba(226,150,196,.34) !important;
  color: #8c4a6d !important;
  --tag-color: #8c4a6d !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-c3 {
  background: rgba(235,180,110,.18) !important;
  border: 1px solid rgba(235,180,110,.36) !important;
  color: #8a5f24 !important;
  --tag-color: #8a5f24 !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-c4 {
  background: rgba(168,150,240,.16) !important;
  border: 1px solid rgba(168,150,240,.34) !important;
  color: #5b4a9c !important;
  --tag-color: #5b4a9c !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c0 {
  background: rgba(122,162,247,.18) !important;
  border: 1px solid rgba(122,162,247,.30) !important;
  color: #a9c2f5 !important;
  --tag-color: #a9c2f5 !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c1 {
  background: rgba(110,200,180,.16) !important;
  border: 1px solid rgba(110,200,180,.28) !important;
  color: #9fd8cb !important;
  --tag-color: #9fd8cb !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c2 {
  background: rgba(226,150,196,.16) !important;
  border: 1px solid rgba(226,150,196,.28) !important;
  color: #eab8d3 !important;
  --tag-color: #eab8d3 !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c3 {
  background: rgba(235,180,110,.16) !important;
  border: 1px solid rgba(235,180,110,.28) !important;
  color: #e8c795 !important;
  --tag-color: #e8c795 !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c4 {
  background: rgba(168,150,240,.18) !important;
  border: 1px solid rgba(168,150,240,.30) !important;
  color: #c3b6f2 !important;
  --tag-color: #c3b6f2 !important;
}
/* 保留字号档(略放大一点,因为去掉了内边距) */
/* 排列不要规整:轻微错位 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag:nth-child(3n+1) {
  transform: translateY(-2px) rotate(-1.2deg) !important;
  margin-top: -3px !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag:nth-child(3n+2) {
  transform: translateY(3px) rotate(.8deg) !important;
  margin-top: 4px !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag:nth-child(5n) {
  transform: translateY(-3px) rotate(1.4deg) !important;
  animation-duration: 18s !important;
  animation-delay: -9s !important;
  margin-top: -1px !important;
}

/* ===== 标签去胶囊底(提高具体度) ===== */
body[class=""] .sidebar-tags .tag,
body[class=""] .sidebar-tags .tag:hover,
body[class=""] .sidebar-tags .tag-c0, body[class=""] .sidebar-tags .tag-c1,
body[class=""] .sidebar-tags .tag-c2, body[class=""] .sidebar-tags .tag-c3,
body[class=""] .sidebar-tags .tag-c4,
html[data-theme="dark"] body[class=""] .sidebar-tags .tag,
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c0,
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c1,
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c2,
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c3,
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-c4 {
  background: none !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
/* 数量上标(若选择器对不上可保留原样) */
body[class=""] .sidebar-tags .tag > * { vertical-align: super !important; font-size: .56rem !important; margin-left: 2px !important; opacity: .55 !important; }

/* ===== 标签散开成云 + 顶栏圆角 ===== */
/* 让 .tag-row 这个"行"容器消失,所有标签并入同一个流 → 不再成行 */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.tag-marquee {
  display: flex !important;
  overflow: hidden !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
  padding: 12px 10px 22px !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 10px 18px !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.tag-row {
  display: contents !important;
  flex-wrap: wrap !important;
  gap: 12px 16px !important;
  transform: none !important;
  animation: none !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.tag-row + .tag-row {
  margin-top: 0 !important;
}
/* 散开:随机上下错位(错位值由 JS 注入的 --off 提供),并保留轻微旋转 */
/* 移除之前所有 nth-child 的固定错位(它们让排列又变规整) */
.sidebar-tags .tag:nth-child(3n+1),
.sidebar-tags .tag:nth-child(3n+2),
.sidebar-tags .tag:nth-child(4n+3),
.sidebar-tags .tag:nth-child(5n) { margin-top: var(--off, 0px) !important; transform: none !important; }

/* 顶栏底部左右两个角要圆润 */
body[class=""] .navbar {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
  overflow: hidden !important;
}
html[data-theme="dark"] body[class=""] .navbar {
  border-bottom-left-radius: 16px !important;
  border-bottom-right-radius: 16px !important;
}
@media (max-width: 640px) {
  body[class=""] .navbar, html[data-theme="dark"] body[class=""] .navbar {
    border-bottom-left-radius: 14px !important; border-bottom-right-radius: 14px !important;
  }
}

/* ===== 标签:各方向随机游走 ===== */
@keyframes tagRoam {
  0%   { translate: 0 0; }
  22%  { translate: var(--dx, 3px) var(--dy, -3px); }
  46%  { translate: var(--dx2, -3px) var(--dy2, 3px); }
  68%  { translate: var(--dx3, 2px) var(--dy3, -2px); }
  86%  { translate: var(--dx, 3px) calc(var(--dy, -3px) * -0.5); }
  100% { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) { .sidebar-tags .tag { animation: none !important; } }

/* ===== 顶栏与内容区对齐 ===== */
body[class=""] .navbar-inner > .logo,
body[class=""] .navbar .logo,
html[data-theme="dark"] body[class=""] .navbar .logo {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body[class=""] .navbar .nav-links,
html[data-theme="dark"] body[class=""] .navbar .nav-links {
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
}

body[class=""] .navbar .nav-links > a:last-child,
html[data-theme="dark"] body[class=""] .navbar .nav-links > a:last-child {
  margin-right: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 640px) {
  body[class=""] .navbar-inner,
  html[data-theme="dark"] body[class=""] .navbar-inner {
    padding: 0 16px !important;
  }
}

/* ===== 顶栏容器宽度与内容区一致 ===== */
/* ===== 顶栏对齐:自适应(共享变量) ===== */
:root {
  --content-max: 1200px;
  --gutter: 24px;
}
@media (max-width: 1024px) { :root { --content-max: 100% !important; --gutter: 20px !important; } }
@media (max-width: 640px)  { :root { --content-max: 100% !important; --gutter: 16px !important; } }

/* 内容区与顶栏内部容器:同宽 + 同内边距 + 居中对齐 */
body[class=""] .main-content,
html[data-theme="dark"] body[class=""] .main-content,
body[class=""] .navbar-inner,
html[data-theme="dark"] body[class=""] .navbar-inner {
  max-width: var(--content-max, 1200px) !important;
  padding-left: var(--gutter, 24px) !important;
  padding-right: var(--gutter, 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
/* 顶栏内部仍是两端对齐 */
/* 中屏(≤1024)时栅格变单列,内容区不再限制宽度,顶栏跟着铺满 */
@media (max-width: 1024px) {
  body[class=""] .navbar-inner, html[data-theme="dark"] body[class=""] .navbar-inner {
    max-width: 100% !important;
  }
}

/* ===== 顶栏对齐:统一 24/16px(修正翻倍) ===== */
body[class=""] .main-content,
html[data-theme="dark"] body[class=""] .main-content {
  padding-left: 24px !important;
  padding-right: 24px !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
@media (max-width: 640px) {
  body[class=""] .main-content, html[data-theme="dark"] body[class=""] .main-content,
  body[class=""] .navbar-inner, html[data-theme="dark"] body[class=""] .navbar-inner {
    padding-left: 16px !important; padding-right: 16px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 1024px) and (min-width: 641px) {
  body[class=""] .main-content, html[data-theme="dark"] body[class=""] .main-content,
  body[class=""] .navbar-inner, html[data-theme="dark"] body[class=""] .navbar-inner {
    max-width: 100% !important;
  }
}

/* ===== 顶栏对齐:补 24px 与卡片齐 ===== */
@media (max-width: 640px) {
  body[class=""] .navbar-inner, html[data-theme="dark"] body[class=""] .navbar-inner {
    padding-left: 40px !important; padding-right: 40px !important;
  }
}

/* ===== 顶栏对齐:平板区间 ===== */
@media (min-width: 641px) and (max-width: 1024px) {
  body[class=""] .navbar-inner,
  html[data-theme="dark"] body[class=""] .navbar-inner {
    max-width: 780px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 641px) and (max-width: 828px) {
  body[class=""] .navbar-inner,
  html[data-theme="dark"] body[class=""] .navbar-inner {
    max-width: 100% !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

/* ===== 共享验证码区默认隐藏 ===== */
/* 默认隐藏共享验证码区;只有位于可见面板内时才显示 */
#home-captcha-area { display: none !important; }
/* 2026-10-09：由 display:block 改为 flex。
   原因：此规则用 **ID 选择器**（特异性 1,0,0），远高于任何 .captcha-area 类规则，
         它把验证码区锁成 block，导致图片与输入框永远上下两行 ——
         我此前用 6 个类选择器都压不过它（实测 CDP 确认）。
   改为 flex 后，图片与输入框同一行并排。 */
.card-comment-panel:not([hidden]) #home-captcha-area {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ===== 顶栏拉宽(用户要求) ===== */
/* 合并：6 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar-inner,
html[data-theme="dark"] body[class=""] .navbar-inner {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-left: 28px !important;
  padding-right: 34px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
@media (max-width: 640px) {
  body[class=""] .navbar-inner, html[data-theme="dark"] body[class=""] .navbar-inner {
    padding-left: 16px !important; padding-right: 20px !important;
  }
}

/* ===== 3D 球体标签云 ===== */
/* ═══════════════════════════════════════════════════════════════
   任务 2：球体标签云 CSS
   放置位置：index.html 内 <style> 块，替换原有 .sidebar-tags 相关样式
   ═══════════════════════════════════════════════════════════════ */

/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags {
  padding: 18px 16px 28px !important;
  min-height: 300px !important;
  overflow: hidden !important;
  position: relative;
  height: 320px;
}
/* 字号仍按 tag-s1..s5 */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-s1 {
  font-size: .78rem !important;
  padding: 3px 9px !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-s2 {
  font-size: .86rem !important;
  padding: 4px 10px !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-s3 {
  font-size: .95rem !important;
  padding: 5px 12px !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-s4 {
  font-size: 1.06rem !important;
  padding: 6px 13px !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-s5 {
  font-size: 1.18rem !important;
  padding: 7px 15px !important;
  font-weight: 500 !important;
}

/* 颜色仍按 tag-c0..c4（亮色） */
body[class=""] .tag-c0 { color: #4a7c59; }
body[class=""] .tag-c1 { color: #c0392b; }
body[class=""] .tag-c2 { color: #2c3e50; }
body[class=""] .tag-c3 { color: #e67e22; }
body[class=""] .tag-c4 { color: #8e44ad; }

/* 颜色仍按 tag-c0..c4（暗色） */
html[data-theme="dark"] .tag-c0 { color: #6fbf8a; }
html[data-theme="dark"] .tag-c1 { color: #e74c3c; }
html[data-theme="dark"] .tag-c2 { color: #7f8c8d; }
html[data-theme="dark"] .tag-c3 { color: #f39c12; }
html[data-theme="dark"] .tag-c4 { color: #a56db3; }

/* 滚动滑块（任务 1） */
.scroll-fab {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 6px;
  height: 60px;
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
  display: flex;
  align-items: center;
}
.scroll-fab[hidden] { display: none; }
.scroll-fab.is-visible { display: flex; }
.scroll-fab-track {
  width: 100%;
  height: 100%;
  position: relative;
}
.scroll-fab-thumb {
  width: 100%;
  height: 20px;
  background: #4a7c59;
  border-radius: 3px;
  transform: translateY(0);
}

/* ===== 顶栏登录微调 ===== */
/* ═══════════════════════════════════════════════════════════════
   任务 3：顶栏"登录"往左挪一点（右内边距增大 6px）
   放置位置：index.html 内 <style> 块，追加或替换 .nav-links 规则
   ═══════════════════════════════════════════════════════════════ */

.nav-links {
  padding-right: calc(var(--nav-padding-right, 12px) + 6px);
}

/* ===== 3D 球体标签云(自己实现,基于真实 DOM) ===== */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag:hover {
  animation-play-state: paused !important;
  border-color: currentColor !important;
  outline: none !important;
}


/* ===== 标签云:回退为干净的彩色标签列表(球体版未达标,先不半成品上线) ===== */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-marquee {
  position: relative !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
  padding: 0 !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
}
/* 合并：8 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag {
  display: inline-block !important;
  align-items: center;
  gap: 5px;
  position: static !important;
  animation: none !important;
  will-change: transform, opacity;
  color: var(--tag-color) !important;
  margin-top: var(--off, 0px) !important;
  rotate: none !important;
  left: 50% !important;
  top: 50% !important;
  transform: none !important;
  opacity: 1 !important;
  transition: opacity 0.3s ease;
  pointer-events: auto;
  white-space: nowrap !important;
  margin: 0 !important;
  transform-origin: 50% 50% !important;
  translate: none !important;
  backface-visibility: hidden;
  z-index: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════
   标签云 v3.0 样式
   ──────────────────────────────────────────────────────────────────────
   整理自 2-existing-styles.css（99 个规则块，549 行）。
   整理原则：
     ✅ 颜色值（tag-c0~c4）一字不改
     ✅ 光晕参数（text-shadow + --tag-glow）一字不改
     ✅ 暗色主题单独一套，一字不改
     ✅ 容器正方形、字号 5 档保留
     ❌ 删除：tc-layered 静态分层的旧规则（已废弃）
     ❌ 删除：nth-child 的 transform 错位（会与 JS 定位冲突）
     ✅ 新增：--tc-scale 数量自适应（JS 设置，30 个标签时为 1）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 容器：正方形，标签不可跑出 ── */
.sidebar-tags .tag-cloud-bounce {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  margin-top: 4px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 268px !important;
  min-height: 200px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  /* 数量自适应：JS 按标签数设置，30 个时为 1 */
  --tc-scale: 1;
}

/* ── 标签基础 ── */
.sidebar-tags .tag-cloud-bounce .tag {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  will-change: transform;
  /* JS 用 setProperty(..., 'important') 写 transform，
     这里的 none 会被覆盖，仅作无 JS 时的回退 */
  transform: none;
  translate: none;
  rotate: none;
  animation: none !important;
  font-weight: 400 !important;
  /* 光晕（亮色）：顶部高光 + 底部暗影 + 彩色光晕 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55),
    0 1px 1px rgba(16, 24, 40, .10),
    0 0 10px var(--tag-glow, rgba(120, 150, 200, .28)) !important;
}

.sidebar-tags .tag-cloud-bounce .tag:hover {
  filter: brightness(1.18) !important;
}

.sidebar-tags .tag-cloud-bounce .tag.is-active {
  font-weight: 600 !important;
}

/* 计数徽章 */
.sidebar-tags .tag-cloud-bounce .tag-n {
  font-size: .58em !important;
  opacity: .6 !important;
  vertical-align: super !important;
}

/* ── 字号 5 档（随 --tc-scale 等比缩放）── */
.sidebar-tags .tag-cloud-bounce .tag-s1 {
  font-size: calc(.74rem * var(--tc-scale)) !important;
}
.sidebar-tags .tag-cloud-bounce .tag-s2 {
  font-size: calc(.82rem * var(--tc-scale)) !important;
}
.sidebar-tags .tag-cloud-bounce .tag-s3 {
  font-size: calc(.92rem * var(--tc-scale)) !important;
}
.sidebar-tags .tag-cloud-bounce .tag-s4 {
  font-size: calc(1.04rem * var(--tc-scale)) !important;
}
.sidebar-tags .tag-cloud-bounce .tag-s5 {
  font-size: calc(1.18rem * var(--tc-scale)) !important;
  font-weight: 450 !important;
}

/* ── 颜色 5 档（亮色，一字未改）── */
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c0 {
  color: #4b6ea8 !important;
  text-shadow: 0 0 10px rgba(75,110,168,.30) !important;
  --tag-glow: rgba(75,110,168,.30);
}
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c1 {
  color: #3d7f86 !important;
  text-shadow: 0 0 10px rgba(61,127,134,.30) !important;
  --tag-glow: rgba(61,127,134,.30);
}
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c2 {
  color: #8a5f7d !important;
  text-shadow: 0 0 10px rgba(138,95,125,.28) !important;
  --tag-glow: rgba(138,95,125,.28);
}
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c3 {
  color: #93702f !important;
  text-shadow: 0 0 10px rgba(147,112,47,.28) !important;
  --tag-glow: rgba(147,112,47,.28);
}
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c4 {
  color: #6357a0 !important;
  text-shadow: 0 0 10px rgba(99,87,160,.30) !important;
  --tag-glow: rgba(99,87,160,.30);
}

/* ── 暗色主题（单独一套，一字未改）── */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(0, 0, 0, .45),
    0 0 12px var(--tag-glow, rgba(150, 185, 230, .40)) !important;
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c0 {
  color: #9dbaea !important;
  text-shadow: 0 0 12px rgba(157,186,234,.45) !important;
  --tag-glow: rgba(157,186,234,.45);
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c1 {
  color: #8ecfd0 !important;
  text-shadow: 0 0 12px rgba(142,207,208,.42) !important;
  --tag-glow: rgba(142,207,208,.42);
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c2 {
  color: #dda9c8 !important;
  text-shadow: 0 0 12px rgba(221,169,200,.40) !important;
  --tag-glow: rgba(221,169,200,.40);
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c3 {
  color: #e0c184 !important;
  text-shadow: 0 0 12px rgba(224,193,132,.40) !important;
  --tag-glow: rgba(224,193,132,.40);
}
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c4 {
  color: #b3a6ec !important;
  text-shadow: 0 0 12px rgba(179,166,236,.45) !important;
  --tag-glow: rgba(179,166,236,.45);
}

/* ── 减少动效：退化为静态流式布局 ── */
@media (prefers-reduced-motion: reduce) {
  .sidebar-tags .tag-cloud-bounce {
    aspect-ratio: auto !important;
    max-height: none !important;
    height: auto !important;
  }
  .sidebar-tags .tag-cloud-bounce .tag {
    position: static !important;
    display: inline-block !important;
    margin: 0 10px 8px 0 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════
   9 条修复 · 第 1/2/5/7/9 条（布局类）
   ═══════════════════════════════════════════════════════ */

/* 【第 1 条】主题帖框与作者框平行对齐:顶部齐平、底部齐平(消除高低差) */
body[class=""] .page-layout.layout-with-sidebar,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar {
  align-items: start !important;
}
body[class=""] .page-layout.layout-with-sidebar .main-col,
body[class=""] .page-layout.layout-with-sidebar .sidebar,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar .main-col,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar .sidebar {
  padding-top: 0 !important; margin-top: 0 !important;
}
body[class=""] .page-layout.layout-with-sidebar .main-col > *:first-child,
body[class=""] .page-layout.layout-with-sidebar .sidebar > *:first-child {
  margin-top: 0 !important;
}
body[class=""] .page-layout.layout-with-sidebar .post-card:first-child,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar .post-card:first-child {
  margin-top: 0 !important;
}

/* 【第 2 条】顶栏加厚到"约两行"厚度 */
body[class=""] .navbar .logo,
html[data-theme="dark"] body[class=""] .navbar .logo { font-size: 1.05rem !important; }
/* 【第 5 条】作者栏头像再大一点(88 → 104)
   ⚠️ 2026-10-15 修：原先把 `img` 也一并设成 104px。
   而容器 .author-avatar 有 padding: 3px（那是"相框"白边，配
   background 渐变环 + inset 高光做出立体感）。img 被强制成与容器
   **同尺寸**后直接盖住整圈，于是白边消失、立体感全无
   （用户反馈："头像立体感没了"）。
   正确做法：只调容器尺寸，img 交给 `.author-avatar img { width:100%;
   height:100% }` 自动铺满**内容区**，白边自然保留。
   故此处从选择器组里移除 img。 */
body[class=""] .author-card .author-avatar,
body[class=""] .author-card .author-avatar-fallback,
html[data-theme="dark"] body[class=""] .author-card .author-avatar,
html[data-theme="dark"] body[class=""] .author-card .author-avatar-fallback {
  width: 104px !important;
  height: 104px !important;
  border-radius: 50% !important;
}
body[class=""] .author-card .author-avatar-fallback,
html[data-theme="dark"] body[class=""] .author-card .author-avatar-fallback {
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 2.3rem !important; font-weight: 500 !important;
}

/* 【第 7 条】搜索内框圆润(不是直角) */
body[class=""] .sidebar-search,
html[data-theme="dark"] body[class=""] .sidebar-search { border-radius: 16px !important; overflow: hidden !important; }
body[class=""] .sidebar-search .search-form,
html[data-theme="dark"] body[class=""] .sidebar-search .search-form { border-radius: 16px !important; overflow: hidden !important; }
body[class=""] .sidebar-search input[type="search"],
body[class=""] .sidebar-search input[type="text"],
html[data-theme="dark"] body[class=""] .sidebar-search input {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  padding: 9px 14px !important;
  background: rgba(255,255,255,.72) !important;
}
html[data-theme="dark"] body[class=""] .sidebar-search input {
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
}

/* 【第 9 条】Blog 与主题帖竖向对齐(左缘一致) · 登录与作者栏右侧竖向对齐 */
/* 用与内容区相同的左右边界:页面容器 1200 居中 + 卡片自带内边距 */
@media (max-width: 1240px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { margin-left: 24px !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 8px !important; }
}

/* 【第 9 条·修正】Blog 与卡片左缘齐平 · 登录与作者卡右缘齐平 */
@media (max-width: 1240px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { margin-left: 48px !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 24px !important; }
}
@media (max-width: 640px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { margin-left: 40px !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 40px !important; }
}

/* 【第 9 条·二次修正】登录/导航贴齐作者卡右缘(各宽度统一补偿 24px) */
/* 【第 1 条·窄屏修正】单列时不做顶部对齐(侧栏在文末,谈不上并排) */
@media (max-width: 1024px) {
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 48px !important; }
}
@media (max-width: 640px) {
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 40px !important; }
}

/* 【第 9 条·中屏修正】≡1024 与 828–1100 区间的左右边界(按实测对齐) */
/* 1025–1240:内容区 1200 居中,卡片左右 = (vw-1200)/2 + 48 / -48 */
/* 829–1024:内容区 .page-layout 780 居中 + 24 → 卡片左 = (vw-780)/2 + 24 */
@media (min-width: 829px) and (max-width: 1024px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { margin-left: calc((100vw - 780px) / 2 + 24px) !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: calc((100vw - 780px) / 2 + 72px) !important; }
}
/* ≤828:内容铺满,卡片左右 = 48 */
@media (max-width: 828px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { margin-left: 48px !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 48px !important; }
}
@media (max-width: 640px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { margin-left: 40px !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 40px !important; }
}

/* 【第 9 条·终版】登录右缘 = 作者卡右缘(按公式精确计算) */
/* 1025–1240px: 内容 1200 居中,右栏右缘 = 100vw - (100vw-1200)/2 = (100vw+1200)/2; 需要 nav-links 右外边距 = 该值 → margin-right 用 calc 归零 + 偏移 */
@media (min-width: 1025px) and (max-width: 1240px) {
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 0 !important; }
  body[class=""] .navbar-inner,
  html[data-theme="dark"] body[class=""] .navbar-inner {
    padding-right: calc((100vw - 1200px) / 2 + 48px) !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}
/* 829–1024px: .page-layout 780 居中 + 内层 24 → 右栏右缘 = 100vw - (100vw-780)/2 - 24 */
@media (min-width: 829px) and (max-width: 1024px) {
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { margin-right: 0 !important; }
  body[class=""] .navbar-inner,
  html[data-theme="dark"] body[class=""] .navbar-inner {
    padding-right: calc((100vw - 780px) / 2 + 24px + 48px) !important;
    padding-left: 0 !important;
    max-width: 100% !important;
  }
}


/* 【第 9 条·终极】用 margin-right 直接顶(因为 padding-right 被后面规则覆盖成 0) */
@media (min-width: 1025px) {
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links {
    margin-right: calc((100vw - 1200px) / 2 + 48px) !important;
  }
}
@media (min-width: 829px) and (max-width: 1024px) {
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links {
    margin-right: calc((100vw - 780px) / 2 + 48px) !important;
  }
}

/* 【第 9 条·绝对定位法】把导航组与 Blog 钉到内容区两条竖线上(不受内层宽度影响) */
/* Blog:钉在内容区左竖线 */
/* 导航组:钉在内容区右竖线(作者卡右缘) */
/* 829–1024:内容 780 居中 + 24 → 竖线 = (100vw-780)/2 + 24 + 24 */
@media (min-width: 829px) and (max-width: 1024px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { left: calc((100vw - 780px) / 2 + 48px) !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { right: calc((100vw - 780px) / 2 + 48px) !important; }
}
/* ≤828:内容铺满 → 竖线 = 48 */
@media (max-width: 828px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { left: 48px !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { right: 48px !important; }
}
@media (max-width: 640px) {
  body[class=""] .navbar-inner > .logo,
  html[data-theme="dark"] body[class=""] .navbar-inner > .logo { left: 40px !important; }
  body[class=""] .navbar .nav-links,
  html[data-theme="dark"] body[class=""] .navbar .nav-links { right: 40px !important; }
}


/* ═══════════════════════════════════════════════════════════
   第 9 条 · 自适应版(零硬编码):顶栏与内容区共用同一套几何
   原理:
   1) .main-content = 唯一宽度权威 → 卡片左/作者卡右 由它决定
   2) 顶栏内层用**同一个 max-width + 同一套内边距** → 天然对齐
   3) Blog 与导航组分别贴内层的左右边(不写死 px)
   4) 全部用 clamp()/max() 兜底,任何分辨率/缩放都不错位
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 内容区宽度:大屏 1200,中屏跟视口走 */
  --layout-w: min(1200px, 100vw);
  /* 内容区到卡片边缘的横向留白(与卡片自身内边距同源) */
  --edge-pad: 48px;
}
@media (max-width: 1024px) { :root { --layout-w: min(780px, 100vw); --edge-pad: 24px; } }
@media (max-width: 828px)  { :root { --layout-w: 100vw; --edge-pad: 48px; } }
@media (max-width: 640px)  { :root { --layout-w: 100vw; --edge-pad: 40px; } }

/* 顶栏内层:与 .main-content 完全同宽同边距 */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar,
html[data-theme="dark"] body[class=""] .navbar {
  min-height: 64px !important;
  display: flex !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
}
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar-inner,
html[data-theme="dark"] body[class=""] .navbar-inner {
  min-height: 64px !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  align-items: center !important;
  max-width: var(--layout-w) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 auto !important;
  position: relative !important;
  padding: 0 var(--edge-pad) !important;
  width: var(--layout-w) !important;
  box-sizing: border-box !important;
  display: flex !important;
  justify-content: space-between !important;
}
/* Blog 贴内层左缘 · 导航组贴内层右缘(纯 flex,无绝对定位,无硬编码) */
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar-inner > .logo,
html[data-theme="dark"] body[class=""] .navbar-inner > .logo {
  margin-left: calc((100vw - 1200px) / 2 + 48px) !important;
  position: static !important;
  left: auto !important;
  top: 50% !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 合并：6 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .navbar .nav-links,
html[data-theme="dark"] body[class=""] .navbar .nav-links {
  gap: 22px !important;
  margin-right: calc((100vw - 1200px) / 2 + 48px) !important;
  position: static !important;
  right: auto !important;
  top: 50% !important;
  transform: none !important;
  margin: 0 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}


/* ════ 第 3 条:只保留一个"圆形立体按钮" ════ */
/* ① 藏掉原生滚动条(用户说"不要两条可见的拉线槽") */
.post-content-full { scrollbar-width: none !important; -ms-overflow-style: none !important; }
.post-content-full::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ② 圆形立体按钮:常驻、可拖、有质感(凸起+内高光+投影) */
.post-card .scroll-fab[hidden] { display: none !important; }
.post-card .scroll-fab::before { content: none !important; }
.post-card .scroll-fab svg, .post-card .scroll-fab .fab-icon { width: 14px !important; height: 14px !important; color: #46505c !important; }
html[data-theme="dark"] body[class=""] .post-card .scroll-fab svg,
html[data-theme="dark"] body[class=""] .post-card .scroll-fab .fab-icon { color: #e9eef4 !important; }

/* ════ 第 8 条(a):深色下"文字框发光方块"修掉 ════ */
/* 摘要淡出遮罩:暗色必须用卡面同族色,不能用白色系 */
html[data-theme="dark"] body[class=""] .post-preview::after,
html[data-theme="dark"] body[class=""] .excerpt::after {
  background: linear-gradient(to bottom,
    rgba(59, 69, 82, 0) 0%,
    rgba(59, 69, 82, .28) 45%,
    rgba(59, 69, 82, .72) 78%,
    #3b4552 100%) !important;
}
/* 若还残留 ::before 之类的白色叠加层,一并压掉 */
html[data-theme="dark"] body[class=""] .post-preview::before,
html[data-theme="dark"] body[class=""] .excerpt::before {
  background: none !important; box-shadow: none !important;
}
/* 卡片内的所有子容器:暗色下不允许出现浅色底 */
html[data-theme="dark"] body[class=""] .post-card > div,
html[data-theme="dark"] body[class=""] .post > div {
  background-image: none !important;
}
html[data-theme="dark"] body[class=""] .post-card .post-body-content,
html[data-theme="dark"] body[class=""] .post-card .post-preview,
html[data-theme="dark"] body[class=""] .post-card .post-content-full,
html[data-theme="dark"] body[class=""] .post-card .excerpt {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* ════ 第 10 条:深色顶部再浅一点 + 整体平滑过渡(8 段渐进) ════ */
html[data-theme="dark"] body[class=""]::before {
  content: '' !important;
  position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important;
  display: block !important;
  background: linear-gradient(180deg,
    #6b7a8c 0%,
    #62707f 12%,
    #57646f 26%,
    #4b5764 40%,
    #3f4a57 54%,
    #343d49 68%,
    #2a313b 80%,
    #20272f 91%,
    #161c22 100%) !important;
}
/* 深色页面底色同步(与渐变暗端一致,避免滚动错位) */
html[data-theme="dark"] body[class=""] { background: #343d49 !important; }

/* ════ 第 3 条·质感加强(去掉箭头,只留立体圆钮) ════ */
.post-card .scroll-fab::before,
.post-card .scroll-fab::after { content: none !important; }
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .scroll-fab:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 2px 3px rgba(16,24,40,.12), 0 8px 18px rgba(16,24,40,.18), 0 16px 32px rgba(16,24,40,.16),
              inset 0 1.5px 1px #fff, inset 0 -2px 4px rgba(16,24,40,.12) !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .scroll-fab:active {
  cursor: grabbing !important;
  transform: scale(.94) !important;
}
/* 内圈一道极淡的环,增强"立体纽扣"感 */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .scroll-fab {
  position: absolute !important;
  right: 10px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  background: radial-gradient(circle at 32% 26%, #ffffff 0%, #f4f7fa 42%, #e3e8ef 72%, #d3dae3 100%) !important;
  box-shadow: 0 1px 1px rgba(16,24,40,.10),
    0 4px 10px rgba(16,24,40,.14),
    0 10px 22px rgba(16,24,40,.14),
    inset 0 1.5px 1px rgba(255,255,255,1),
    inset 0 -2px 4px rgba(16,24,40,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: grab !important;
  z-index: 6 !important;
  padding: 0 !important;
  transition: transform .16s ease, box-shadow .16s ease !important;
  touch-action: none !important;
  outline: none !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab {
  border-color: rgba(255,255,255,.22) !important;
  background: radial-gradient(circle at 32% 26%, #7d8b9c 0%, #66727f 42%, #4c5764 74%, #414b57 100%) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 6px 14px rgba(0,0,0,.45), 0 14px 28px rgba(0,0,0,.35),
              inset 0 1.5px 1px rgba(255,255,255,.28), inset 0 -2px 5px rgba(0,0,0,.35) !important;
}

/* ════ 第 11 条:标题右上角"若隐若现"的展开/折叠标识 ════ */
.post-card { position: relative !important; }
@keyframes foldHintBreath {
  0%   { opacity: .30; }
  50%  { opacity: .78; }
  100% { opacity: .30; }
}
.post-card .fold-hint .fold-hint-icon { display: inline-flex !important; align-items: center !important; }
/* 展开态:显示"折叠"符号(向上箭头)与文字 */
.post-card .fold-hint .fold-hint-collapse { display: none !important; }
.post-card.expanded .fold-hint .fold-hint-collapse { display: inline !important; }
.post-card.expanded .fold-hint .fold-hint-expand { display: none !important; }
/* 暗色适配 */
@media (prefers-reduced-motion: reduce) {
  .post-card .fold-hint { animation: none !important; opacity: .6 !important; }
}
@media (max-width: 640px) {
  .post-card .fold-hint { top: 10px !important; right: 12px !important; font-size: .68rem !important; padding: 3px 8px !important; }
}

/* ════ 第 11 条·修正:改成"若提示不抢镜"(去掉胶囊底/边框/文字,只留极淡符号) ════ */
.post-card .fold-hint .fold-hint-text { display: none !important; }   /* 文字彻底不显示 */
@keyframes foldHintBreath {
  0%   { opacity: .16; }
  50%  { opacity: .46; }
  100% { opacity: .16; }
}
/* 展开态:符号换成向上,颜色略深一丁点(仍克制) */
/* 暗色:同样克制 */
@media (prefers-reduced-motion: reduce) { .post-card .fold-hint { animation: none !important; opacity: .3 !important; } }

/* ════ 第 11 条·放大 + 换 caret 符号(NN/g 推荐) ════ */
/* caret 三角本身不需要描边(实心填充),把旧的 stroke 设定清掉 */
@media (max-width: 640px) {
  .post-card .fold-hint { width: 26px !important; height: 26px !important; top: 14px !important; right: 14px !important; }
  .post-card .fold-hint .fold-hint-icon svg { width: 19px !important; height: 19px !important; }
}

/* ════ 第 11 条·终版:细线双向箭头 + 放大 + 呼吸 ════ */
/* 呼吸:更明显的"若隐若现" */
@keyframes foldHintBreath {
  0%   { opacity: .18; }
  45%  { opacity: .62; }
  100% { opacity: .18; }
}
@media (max-width: 640px) {
  .post-card .fold-hint { width: 32px !important; height: 32px !important; top: 12px !important; right: 14px !important; }
  .post-card .fold-hint .fold-hint-icon svg { width: 22px !important; height: 22px !important; }
}
@media (prefers-reduced-motion: reduce) { .post-card .fold-hint { animation: none !important; opacity: .4 !important; } }

/* ════ 第 11 条·修:清掉遗留的 stroke:none(它把细线箭头变成了空方块) ════ */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .fold-hint .fold-hint-icon svg path {
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  fill: none !important;
}
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .fold-hint .fold-hint-icon svg {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 1.9 !important;
  stroke: currentColor !important;
}
/* 对比度提高(浅色下原来太淡到看不见) */
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card.expanded .fold-hint {
  color: rgba(255, 255, 255, .74) !important;
}
/* 呼吸幅度:最低别低于 .32(否则"消失"),最高 .85 */
@keyframes foldHintBreath {
  0%   { opacity: .32; }
  45%  { opacity: .85; }
  100% { opacity: .32; }
}

/* ════ 第 11 条·修:深色下 hover 残留的方块背景 ════ */
.post-card .fold-hint,
.post-card .fold-hint:hover,
.post-card .fold-hint:focus,
.post-card .fold-hint:active {
  background: none !important;
  background-image: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
}
html[data-theme="dark"] body[class=""] .post-card .fold-hint,
html[data-theme="dark"] body[class=""] .post-card .fold-hint:hover,
html[data-theme="dark"] body[class=""] .post-card .fold-hint:focus,
html[data-theme="dark"] body[class=""] .post-card .fold-hint:active {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* 键盘可达性:只在 focus-visible 时给一圈极淡描边 */
.post-card .fold-hint:focus-visible { outline: 2px solid rgba(120,150,220,.55) !important; outline-offset: 2px !important; border-radius: 6px !important; }

/* ════ 第 11 条·调节:呼吸峰值压下去,只在"很淡"区间起伏 ════ */
@keyframes foldHintBreath {
  0%   { opacity: .14; }
  50%  { opacity: .40; }   /* 峰值 0.85 → 0.40(不再扎眼) */
  100% { opacity: .14; }
}
/* 颜色也同步压淡一点(符号本身别太重) */
/* 合并：7 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .fold-hint {
  position: absolute !important;
  top: 16px !important;
  right: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  color: rgba(0, 0, 0, .42) !important;
  font-size: 0 !important;
  letter-spacing: .04em !important;
  cursor: pointer !important;
  z-index: 7 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease !important;
  animation: foldHintBreath 6s ease-in-out infinite !important;
  box-shadow: none !important;
  width: 38px !important;
  height: 38px !important;
  justify-content: center !important;
}
/* 合并：5 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card.expanded .fold-hint {
  color: rgba(0, 0, 0, .50) !important;
}
/* 合并：6 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card .fold-hint {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .08) !important;
  color: rgba(255, 255, 255, .46) !important;
}
/* 只在鼠标真正靠近时才清晰(平时保持含蓄) */
/* 合并：6 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .fold-hint:hover {
  opacity: .92 !important;
  background: none !important;
  border-color: rgba(0, 0, 0, .18) !important;
  color: rgba(0, 0, 0, .8) !important;
  animation-play-state: paused !important;
  border: none !important;
}
/* 合并：5 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card .fold-hint:hover {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .3) !important;
  color: rgba(255, 255, 255, .95) !important;
}

/* ════ 第 11 条·再淡一点点 ════ */
@keyframes foldHintBreath {
  0%   { opacity: .10; }
  50%  { opacity: .30; }   /* 峰值 0.40 → 0.30 */
  100% { opacity: .10; }
}

/* ════ 第 12 条:深色下"筛选提示条"不再突兀 ════ */
html[data-theme="dark"] body[class=""] .filter-bar {
  background: rgba(255, 255, 255, .05) !important;    /* 极淡的暗面,不再是一块亮条 */
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, .62) !important;
  padding: 10px 14px !important;
}
html[data-theme="dark"] body[class=""] .filter-bar strong,
html[data-theme="dark"] body[class=""] .filter-bar b { color: rgba(255, 255, 255, .84) !important; }
html[data-theme="dark"] body[class=""] .filter-bar a {
  color: rgba(160, 190, 240, .82) !important;         /* "清除"链接:淡蓝,不刺眼 */
  text-decoration: none !important;
  border-bottom: 1px solid rgba(160, 190, 240, .35) !important;
}
html[data-theme="dark"] body[class=""] .filter-bar a:hover { color: #cfe0ff !important; border-bottom-color: rgba(207,224,255,.7) !important; }
/* 亮色下也顺手柔化一点(原来白底+白边在浅灰背景上也略硬) */
body[class=""] .filter-bar {
  background: rgba(255, 255, 255, .62) !important;
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  color: rgba(0, 0, 0, .60) !important;
  padding: 10px 14px !important;
}

/* ══════════════════════════════════════════════════════════════
   第 12 条·配色修正 —— 依据 Radix Colors "Natural pairing":
   背景是 slate 族(蓝相灰),筛选条必须用同族色(带蓝),不能用纯灰/白
   ══════════════════════════════════════════════════════════════ */
/* 亮色:极淡的蓝灰面 + 淡蓝描边 */
body[class=""] .filter-bar {
  background: linear-gradient(180deg, rgba(226, 234, 244, .92) 0%, rgba(214, 224, 237, .88) 100%) !important;
  border: 1px solid rgba(120, 145, 180, .30) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85) !important;
  color: rgba(48, 62, 82, .82) !important;
  padding: 10px 14px !important;
}
body[class=""] .filter-bar strong, body[class=""] .filter-bar b { color: rgba(34, 48, 68, .95) !important; }
body[class=""] .filter-bar a {
  color: #3d6bb5 !important; border-bottom: 1px solid rgba(61, 107, 181, .35) !important; text-decoration: none !important;
}
body[class=""] .filter-bar a:hover { color: #2b5296 !important; border-bottom-color: rgba(43, 82, 150, .7) !important; }

/* 暗色:slate 同族的深蓝灰面(不是白色叠加),描边用蓝灰 */
html[data-theme="dark"] body[class=""] .filter-bar {
  background: linear-gradient(180deg, rgba(120, 148, 186, .18) 0%, rgba(96, 122, 158, .14) 100%) !important;
  border: 1px solid rgba(140, 170, 210, .22) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: rgba(206, 220, 238, .80) !important;
  padding: 10px 14px !important;
}
html[data-theme="dark"] body[class=""] .filter-bar strong,
html[data-theme="dark"] body[class=""] .filter-bar b { color: rgba(236, 244, 255, .95) !important; }
html[data-theme="dark"] body[class=""] .filter-bar a {
  color: #8fb4e8 !important; border-bottom: 1px solid rgba(143, 180, 232, .40) !important; text-decoration: none !important;
}
html[data-theme="dark"] body[class=""] .filter-bar a:hover { color: #c3d9f7 !important; border-bottom-color: rgba(195, 217, 247, .8) !important; }

/* ══════════════════════════════════════════════════════════════
   第 6 条:标签云 —— 框内弹珠式随机飘 + 越多字越大 + 淡光晕
   配色依据 Radix「Natural pairing」:背景为 slate(蓝相灰),
   因此 5 个色档取【同族冷色 + 1 暖色点缀】,并带同色淡光晕
   ══════════════════════════════════════════════════════════════ */
/* 字号按数量分档(5 档,差距拉开) */
.sidebar-tags .tag-cloud-bounce .tag-n { font-size: .58em !important; opacity: .6 !important; vertical-align: super !important; }

/* 亮色:同族冷色 + 淡光晕(text-shadow) */
/* 暗色:同族提亮版 + 更明显的淡光晕 */
.sidebar-tags .tag-cloud-bounce .tag:hover { filter: brightness(1.18) !important; }
.sidebar-tags .tag-cloud-bounce .tag.is-active { font-weight: 600 !important; }
@media (prefers-reduced-motion: reduce) {
  .sidebar-tags .tag-cloud-bounce { height: auto !important; }
  .sidebar-tags .tag-cloud-bounce .tag { position: static !important; display: inline-block !important; margin: 0 10px 8px 0 !important; }
}

/* ════ 第 6 条·修:清掉遗留的 transform/translate/rotate 覆盖(它们把 JS 的位移压成了 none) ════ */
/* ════ 第 6 条·调整:标签云改成"正方形 + 略小" ════ */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-cloud-bounce {
  position: relative !important;
  display: block !important;
  height: auto !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  margin-top: 4px !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  max-height: 268px !important;
  min-height: 200px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}
/* 标签稍微收一点,避免正方形里太挤 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-cloud-bounce .tag-s1 {
  font-size: .74rem !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-cloud-bounce .tag-s2 {
  font-size: .82rem !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-cloud-bounce .tag-s3 {
  font-size: .92rem !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-cloud-bounce .tag-s4 {
  font-size: 1.04rem !important;
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-tags .tag-cloud-bounce { aspect-ratio: auto !important; max-height: none !important; }
}

/* ════ 第 6 条·补充:标签字做"轻微立体",但不加粗 ════ */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-cloud-bounce .tag {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  will-change: transform;
  transition: filter .2s ease, opacity .2s ease;
  transform: none;
  translate: none;
  rotate: none;
  animation: none !important;
  opacity: 1 !important;
  margin: 0 !important;
  z-index: auto !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55),
    0 1px 1px rgba(16, 24, 40, .10),
    0 0 10px var(--tag-glow, rgba(120, 150, 200, .28)) !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.sidebar-tags .tag-cloud-bounce .tag-s5 {
  font-size: 1.18rem !important;
  font-weight: 450 !important;
}   /* 最大档也只到 450 */
/* 暗色:高光换成更淡的白,暗影更深 */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(0, 0, 0, .45),
    0 0 12px var(--tag-glow, rgba(150, 185, 230, .40)) !important;
}
/* 每个色档给一个同族光晕变量 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c0 {
  color: #4b6ea8 !important;
  text-shadow: 0 0 10px rgba(75,110,168,.30) !important;
  --tag-glow: rgba(75,110,168,.30);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c1 {
  color: #3d7f86 !important;
  text-shadow: 0 0 10px rgba(61,127,134,.30) !important;
  --tag-glow: rgba(61,127,134,.30);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c2 {
  color: #8a5f7d !important;
  text-shadow: 0 0 10px rgba(138,95,125,.28) !important;
  --tag-glow: rgba(138,95,125,.28);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c3 {
  color: #93702f !important;
  text-shadow: 0 0 10px rgba(147,112,47,.28) !important;
  --tag-glow: rgba(147,112,47,.28);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c4 {
  color: #6357a0 !important;
  text-shadow: 0 0 10px rgba(99,87,160,.30) !important;
  --tag-glow: rgba(99,87,160,.30);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c0 {
  color: #9dbaea !important;
  text-shadow: 0 0 12px rgba(157,186,234,.45) !important;
  --tag-glow: rgba(157,186,234,.45);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c1 {
  color: #8ecfd0 !important;
  text-shadow: 0 0 12px rgba(142,207,208,.42) !important;
  --tag-glow: rgba(142,207,208,.42);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c2 {
  color: #dda9c8 !important;
  text-shadow: 0 0 12px rgba(221,169,200,.40) !important;
  --tag-glow: rgba(221,169,200,.40);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c3 {
  color: #e0c184 !important;
  text-shadow: 0 0 12px rgba(224,193,132,.40) !important;
  --tag-glow: rgba(224,193,132,.40);
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-tags .tag-cloud-bounce .tag-c4 {
  color: #b3a6ec !important;
  text-shadow: 0 0 12px rgba(179,166,236,.45) !important;
  --tag-glow: rgba(179,166,236,.45);
}

/* ══════════════════════════════════════════════════════════════
   第 8b 条:① 首页帖子框高度统一(定高) ② 深色可点区域做成立体按钮状
   ══════════════════════════════════════════════════════════════ */
/* ① 统一高度:标题 + 摘要(固定行数) + 按钮区 —— 取 --card-h（当前 344px）*/
body[class=""] .page-layout.layout-with-sidebar .main-col .post-card,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar .main-col .post-card {
  height: var(--card-h) !important;
  min-height: var(--card-h) !important;
  max-height: var(--card-h) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
/* 摘要区:占据剩余空间,超出裁掉(保持卡片高度恒定) */
body[class=""] .page-layout.layout-with-sidebar .main-col .post-card .post-preview,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar .main-col .post-card .post-preview {
  /* ══════════════════════════════════════════════════════════════════════
     2026-10-09 修复「展开后再折叠，摘要区塌成空白」🔴

     现象：首页卡片「就地展开」→ 打开留言表单 → 再折叠，
           摘要整片消失，卡片底部留一大块空白。

     实测定位（逐步排除）：
       · 展开前  摘要高 110px  ✅
       · 展开后  摘要高 0px    （正常，展开时本该隐藏摘要）
       · 折叠后  摘要高 0px    🔴 应回到 110px 却没回
       · max-height / display / overflow 等属性折叠后**都已正确恢复**，
         唯独实际高度是 0 → 说明是 **flex 空间分配**问题，不是属性没恢复
       · 手工把 flex 改成 `1 0 auto` 或 `flex-shrink:0` → 立刻恢复 110px ✅

     根因：`flex: 1 1 auto` 的第二个 `1` 是 **flex-shrink**，即"允许被压缩"；
           再叠加 `min-height: 0`（解除最小高度保护），
           于是展开时内容区占满高度，折叠后浏览器**不会把空间还给摘要区**，
           摘要被压成 0 且不再恢复。

     修法：改为 `flex: 1 0 auto` —— 摘要区仍参与撑满可用空间，
           但**不允许被压缩**，空间归还后自然回到原有高度。

     为何不用 `min-height: 110px`：那样要硬编码魔数，
       且摘要行数变化时（窄屏换行）会不一致；`flex-shrink:0` 无此问题。
     ══════════════════════════════════════════════════════════════════════ */
  flex: 1 0 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 5 !important;
  -webkit-box-orient: vertical !important;
}
/* 按钮区永远贴在卡片底部 */
body[class=""] .page-layout.layout-with-sidebar .main-col .post-card .post-card-foot,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar .main-col .post-card .post-card-foot {
  margin-top: auto !important;
  flex: 0 0 auto !important;
}
/* 展开态不受定高约束(展开就是要看全文) */
body[class=""] .page-layout.layout-with-sidebar .main-col .post-card.expanded,
html[data-theme="dark"] body[class=""] .page-layout.layout-with-sidebar .main-col .post-card.expanded {
  height: auto !important;
  min-height: var(--card-h) !important;
  max-height: none !important;
}

/* ⚠️ 2026-10-16 停用：原先这里有一组深色硬编码，给卡片内所有可点区域
   （expand-btn / card-action-btn / .post-card button / .pagination a /
   .sidebar-categories a 等）强制了**带 !important 的**背景、边框、9px 圆角
   与自有投影。它会把新的玻璃配方整片盖掉，而且因为带 !important，
   后写的玻璃规则无法覆盖，故整块移除。
   按钮外观现统一由本文件末尾的「全站按钮 · 玻璃质感」负责。
   （原内容见 git 历史：本行所在版本之前的那一版） */
   /* （带 !important 的主体规则已于 2026-10-16 移除，见上方说明） */

/* （对应的 hover/active 深色硬编码也于 2026-10-16 移除，
   理由同上一段：带 !important 会盖掉玻璃配方的悬停效果） */

/* ══════════════════════════════════════════════════════════════
   第 4 条·剩余:展开/折叠动效不卡顿 + 下方帖子平滑跟随
   ① 用 transform/max-height 之外的手段降开销 ② 消除逐帧回流
   ══════════════════════════════════════════════════════════════ */
/* 动画元素独立合成层,避免每帧重排整页 */
/* 卡片自身也隔离,下方卡片不受其内部重排影响 */
/* 统一过渡曲线与时长(原来是 0.4s ease,收放略生硬) */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .post-content-full {
  will-change: max-height;
  contain: layout paint;
  backface-visibility: hidden;
  transition: max-height .42s cubic-bezier(.22, .61, .36, 1) !important;
}
/* 摘要区的渐隐在动画期间不稳定,动画时临时关掉(减少重绘) */
.post-card.is-animating .post-preview::after { opacity: 0 !important; }
/* 展开时不再对卡片做 transform/scale 动画(那会引起整列重排) */
.post-card.expanded { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .post-card .post-content-full { transition: none !important; will-change: auto; }
}

/* 卡片高度本身也做过渡(消除整列跳变) */
@media (prefers-reduced-motion: reduce) { .main-col .post-card { transition: none !important; } }

/* ════ 第 8b 条·修:分类列表太挤、每行一个框 → 改成轻盈行式 ════ */
/* 撤掉我给 sidebar-categories a 加的"立体按钮"样式(它导致每行一个框 + 挤) */
html[data-theme="dark"] body[class=""] .sidebar-categories li:last-child a { border-bottom: none !important; }
/* 悬浮:左侧一条淡蓝竖线 + 文字提亮(轻反馈,不抢镜) */
/* 列表间距放松一点(原来挤在一起) */
html[data-theme="dark"] body[class=""] .sidebar-categories ul { margin: 2px 0 0 !important; padding: 0 !important; }
html[data-theme="dark"] body[class=""] .sidebar-categories li { margin: 0 !important; }
/* 亮色同样处理(保持一致,别两套观感) */
body[class=""] .sidebar-categories li:last-child a { border-bottom: none !important; }
body[class=""] .sidebar-categories ul { margin: 2px 0 0 !important; padding: 0 !important; }
/* ════ 修正:「查看留言」里的数量徽章 —— 深色下不让它变成突兀蓝块 & 不被裁 ════ */
/* 徽章统一做成"极淡底色 + 同族字色"的小圆点数字,与按钮融合 */
body[class=""] .post-card .comment-badge,
html[data-theme="dark"] body[class=""] .post-card .comment-badge,
body[class=""] .comment-badge,
html[data-theme="dark"] body[class=""] .comment-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  margin-left: 6px !important;
  border-radius: 9px !important;
  font-size: .72rem !important;
  line-height: 1 !important;
  font-weight: 500 !important;
  vertical-align: middle !important;
  box-shadow: none !important;
}
/* 亮色:淡蓝底 + 蓝字 */
body[class=""] .comment-badge {
  background: rgba(90, 128, 184, .14) !important;
  color: #3d6bb5 !important;
  border: 1px solid rgba(90, 128, 184, .22) !important;
}
/* 暗色:半透明白底 + 淡蓝字(不再是实心蓝块) */
html[data-theme="dark"] body[class=""] .comment-badge {
  background: rgba(255, 255, 255, .12) !important;
  color: rgba(198, 218, 244, .95) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
}
/* 按钮给徽章留出空间,避免贴边被裁 */
body[class=""] .post-card .card-comment-view-btn,
html[data-theme="dark"] body[class=""] .post-card .card-comment-view-btn {
  padding-right: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  white-space: nowrap !important;
}
/* 徽章不参与"立体按钮"的阴影/渐变继承 */
html[data-theme="dark"] body[class=""] .post-card button .comment-badge {
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   侧栏列表 · 按 Elevation 规范重做
   原则:① 层级靠"边框 + 底色微差",不靠阴影叠加 ② 单元素只一层阴影
        ③ hover 用"底色提亮一档"(L1→L2),不用彩色竖条
   ══════════════════════════════════════════════════════════════ */
/* 暗色:列表行 = 透明底 + 发丝分隔线;hover = 底色提升一档(无竖条、无渐变、无内阴影) */
html[data-theme="dark"] body[class=""] .sidebar-categories a,
html[data-theme="dark"] body[class=""] .sidebar-tags .tag { box-shadow: none !important; }
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-categories a {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 12px 6px !important;
  margin: 0 !important;
  transform: none !important;
  color: rgba(200, 214, 232, .84) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  line-height: 1.5 !important;
  background-image: none !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-categories a:hover {
  background: rgba(255, 255, 255, .055) !important;
  border-bottom-color: transparent !important;
  color: rgba(240, 246, 255, .98) !important;
  box-shadow: none !important;
  transform: none !important;
  background-image: none !important;
  border-radius: 8px !important;
}

/* 亮色:同一套逻辑(底色提亮一档,不用彩色竖条) */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-categories a {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, .055) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: rgba(60, 76, 98, .88) !important;
  line-height: 1.5 !important;
  background-image: none !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-categories a:hover {
  background: rgba(0, 0, 0, .035) !important;
  color: rgba(24, 36, 54, .98) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  border-bottom-color: transparent !important;
}

/* 列表所在容器:不要那块"深色块底",回归与侧栏盒子同族 */
.sidebar-categories ul,
.sidebar-categories .category-list {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
}
/* 计数数字:同族次级色,不刺眼 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .sidebar-categories a span,
html[data-theme="dark"] body[class=""] .sidebar-categories .count {
  color: rgba(150, 168, 190, .68) !important;
  font-size: .8rem !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
body[class=""] .sidebar-categories a span,
body[class=""] .sidebar-categories .count {
  color: rgba(120, 138, 160, .78) !important;
  font-size: .8rem !important;
}

/* ════ 修:亮色 hover 残留的蓝色竖线 -> 改成纯底色提亮(舒服不突兀) ════ */
body[class=""] .sidebar-categories a:hover,
body[class=""] .sidebar-categories a:focus,
body[class=""] .sidebar-categories a:active {
  background: rgba(15, 30, 55, .045) !important;      /* 极淡的中性提亮 */
  background-image: none !important;
  box-shadow: none !important;                         /* 清掉 inset 蓝竖线 */
  border-left: none !important;
  border-radius: 8px !important;
  color: rgba(24, 36, 54, .98) !important;
}
/* 暗色同样确保无竖线 */
html[data-theme="dark"] body[class=""] .sidebar-categories a:hover,
html[data-theme="dark"] body[class=""] .sidebar-categories a:focus,
html[data-theme="dark"] body[class=""] .sidebar-categories a:active {
  background: rgba(255, 255, 255, .055) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-left: none !important;
  border-radius: 8px !important;
}
/* 保险:任何前缀/伪元素都不留左边条 */
.sidebar-categories a::before,
.sidebar-categories a::after,
.sidebar-categories li::before { content: none !important; background: none !important; }

/* ══════════════════════════════════════════════════════════════
   第 4b 条·正解:只留【一条】过渡路径
   ① 内层 .post-content-full 的 max-height 不走过渡(瞬间生效)
   ② 外层卡片高度由 WAAPI 单条动画驱动
   → 消除"两条过渡不同步"造成的跳变
   ══════════════════════════════════════════════════════════════ */
/* 保证动画期间不触发内部重排 */
/* ══════════════════════════════════════════════════════════════
   第 4b 条·正解(Chrome 官方方案):
   启用 interpolate-size:allow-keywords → height:auto 可参与过渡,
   由浏览器插值,不再手写补间(消除跳变/掉帧)
   依据: https://developer.chrome.com/docs/css-ui/animate-to-height-auto
   ══════════════════════════════════════════════════════════════ */
/* 卡片高度:展开态 auto,收起态固定 → 浏览器插值 */
/* 内层全文:同样用 auto 过渡(而不是 max-height 猜值) */
/* 预览区:展开时高度归零(也走过渡) */
.main-col .post-card.expanded .post-preview { height: 0 !important; opacity: 0 !important; overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .main-col .post-card, .main-col .post-card .post-content-full, .main-col .post-card .post-preview { transition: none !important; }
}

/* ════ 第 4b 条·最终方案:卡片高度过渡(单条路径) ════ */
/* 撤掉 interpolate-size(height:auto 会跟着内容无限长高) */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
:root {
  interpolate-size: none;
}
/* 合并：5 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.main-col .post-card {
  contain: layout style;
  transition: height .42s cubic-bezier(.22,.61,.36,1) !important;
  height: var(--card-h);
  overflow: hidden !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.main-col .post-card.expanded {
  height: auto !important;
  min-height: var(--card-h) !important;
  max-height: none !important;
}
/* 内层:不走过渡(避免与卡片高度过渡打架),由 JS 直接设值 */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.main-col .post-card .post-content-full {
  transition: none !important;
  will-change: auto !important;
  max-height: none !important;
  height: 0;
  overflow: hidden;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.main-col .post-card .post-preview {
  contain: layout paint;
  transition: none !important;
}

/* ════ 第 4b 条·收口:高度完全由 JS 控制(px),CSS 不再写 auto ════ */
/* 卡片内全文区:独占剩余高度并内部滚动 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.main-col .post-card.expanded .post-content-full {
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  max-height: calc(55vh - 176px) !important;
}

/* ════ 第 4b 条·定稿:高度只由 JS 的 px 值控制 ════ */
/* CSS 里彻底不写 height:auto / max-height 上限(避免覆盖 JS) */
html body .main-col .post-card.expanded .post-content-full {
  max-height: none !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* ════ 第 4b 条·极简定稿 ════ */
/* 卡片:高度用数值过渡(行内设 px);不涉及 auto,故不会与任何规则打架 */
html body .main-col .post-card {
  height: var(--card-h) !important;
  transition: height .42s cubic-bezier(.22,.61,.36,1) !important;
  overflow: hidden !important;
}
/* 展开态:不再有 height:auto(高度完全由行内 px 决定) */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card.expanded {
  height: var(--card-h) !important;
  max-height: none !important;
}
/* 全文区:由 JS 设固定高度,内部滚动 */
html body .main-col .post-card .post-content-full {
  max-height: none !important;
  transition: none !important;
}
html body .main-col .post-card .post-preview { transition: none !important; }

/* ══════════════════════════════════════════════════════════════════════
   标签云分层布局（2026-10-18）
   ----------------------------------------------------------------------
   旧方案：绝对定位 + 随机撒点 + 弹珠物理动画。
           标签多时在固定高度框内互相挤压，每个只挪一点就被撞回，
           最终几乎静止、视觉糊成一团（用户实测反馈）。

   新方案：常规文档流 + flex 居中换行，按三档字号分层。
           · 大的在上（权重最高的 1/3）
           · 中的居中
           · 小的在下
           高度自适应，不再固定，标签再多也只会把卡片撑高，不会挤成一坨。

   为什么用 flex + center：
     标签宽度不一，flex 换行后每行自动居中，视觉重心稳定；
     用 text-align:center 的内联方案在标签宽度差异大时会显得歪。
   ══════════════════════════════════════════════════════════════════════ */

.sidebar-tags .tag-cloud-bounce.tc-layered {
  position: relative;
  height: auto !important;
  min-height: 0 !important;
  /* 三档之间用 flex-direction 纵向堆叠，每档一个 flex 容器。
     JS 会把标签按 tier 分到三个 <span class="tc-row"> 里。 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 10px 4px 8px;
  overflow: visible;
}

/* 每一档 = 一行（可换行），内部居中 */
.sidebar-tags .tag-cloud-bounce.tc-layered .tc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 4px 9px;
  padding: 2px 0;
}
/* 档与档之间加分隔线与呼吸空间，层次靠「空间」而非只靠字号 */
.sidebar-tags .tag-cloud-bounce.tc-layered .tc-row + .tc-row {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--color-border) 60%, transparent);
}

/* 标签本身回到正常文档流，脱离旧动画留下的绝对定位 */
.sidebar-tags .tag-cloud-bounce.tc-layered .tag {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: baseline;
  gap: 2px;
  margin: 0 !important;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  line-height: 1.35;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease,
              filter 160ms ease;
}

.sidebar-tags .tag-cloud-bounce.tc-layered .tag:hover {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/* ── 三档字号 ──
   相对容器基准字号缩放，用户调「正文字号」时标签云不跟着变（它是导航，不是正文）。
   档位之间差距要足够明显：1.25 / 1.0 / 0.82，肉眼可分辨但不过分。 */
.sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-1 {
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-2 {
  font-size: 1rem;
  font-weight: 500;
}
.sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-3 {
  font-size: 0.82rem;
  font-weight: 400;
  opacity: 0.86;
}
.sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-3:hover {
  opacity: 1;
}

/* 大标签的计数数字稍微低调，避免喧宾夺主 */
.sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-1 .tag-n {
  opacity: 0.55;
}

/* 窄屏：三档差距收窄，避免大标签一行挤不下 */
@media (max-width: 720px) {
  .sidebar-tags .tag-cloud-bounce.tc-layered {
    gap: 5px 8px;
    padding: 8px 2px 4px;
  }
  .sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-1 { font-size: 1.1rem; }
  .sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-2 { font-size: 0.95rem; }
  .sidebar-tags .tag-cloud-bounce.tc-layered .tag.tc-tier-3 { font-size: 0.8rem; }
}

/* ── 留言计数：0 条时的弱化样式（2026-10-19）──
   以前 0 条不显示徽章，帖子多了分不出哪些有留言。
   现在始终显示，但 0 条时用空心/浅灰，不抢视觉。 */
.comment-badge.is-zero {
  background: transparent !important;
  border: 1px solid color-mix(in srgb, var(--color-text-muted) 34%, transparent) !important;
  color: var(--color-text-muted) !important;
  font-weight: 500 !important;
}

html[data-theme="dark"] body[class=""] .comment-badge.is-zero {
  background: transparent !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: rgba(255, 255, 255, .42) !important;
}

/* ══════════════════════════════════════════════════════════════
   第 4b 条·采用业界走通的方案(transitions.dev 官方 accordion):
   grid-template-rows: 0fr → 1fr
   —— 不测高度、不写 px,浏览器自己插值;内容区内部滚动
   ══════════════════════════════════════════════════════════════ */
/* 展开态:卡片放开(高度由内容决定),但内容区有上限 → 内部滚动 */
/* 两层结构:外层 grid 轨道负责动画,内层负责裁剪 */
/* 内层:裁剪 + 高度上限(超过上限就内部滚动) */
html body .main-col .post-card .post-content-full > * {
  overflow: hidden !important;
  min-height: 0 !important;
}
html body .main-col .post-card.expanded .post-content-full > * {
  overflow-y: auto !important;
  max-height: var(--content-max, 55vh) !important;
  overscroll-behavior: contain !important;
}
/* 预览区:展开时收起(走同一套曲线) */
@media (prefers-reduced-motion: reduce) {
  html body .main-col .post-card,
  html body .main-col .post-card .post-content-full { transition: none !important; }
}

/* ════ 第 4b 条·官方两层结构定稿 ════ */
/* 内层:负责裁剪 + 高度上限 + 内部滚动 */
/* ════ 第 4b 条·真正的单路径:只由 grid-template-rows 驱动 ════ */
/* 卡片高度不再定死,而是 min-height 保证折叠态恒定 336 */
/* 唯一动画源:网格轨道 */
/* 折叠态预览区占位;展开后隐藏(瞬间,不参与动画) */
/* ══════════════════════════════════════════════════════════════
   第 4b 条·方案 A(定高优先 + 淡入淡出遮跳变)
   ① 所有卡片恒定 var(--card-h)(第 8 条)  ② 展开:内容在内部滚动  ③ 切换用淡入淡出
   ══════════════════════════════════════════════════════════════ */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card.expanded {
  height: var(--card-h) !important;
  max-height: var(--card-h) !important;
  min-height: var(--card-h) !important;
}
/* 展开:全文区淡入(内容在卡片内滚动) */
/* 预览区:展开时淡出(与全文淡入交叉) */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .post-preview {
  transition: opacity .18s ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
  html body .main-col .post-card .post-content-full,
  html body .main-col .post-card .post-preview { transition: none !important; }
}

/* ════ A 方案·锁死定高(用最高具体度 + important,压掉一切覆盖) ════ */
/* 卡片内部用 flex 布局,让"全文区"吃掉剩余空间,按钮贴底 */
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card {
  height: var(--card-h) !important;
  transition: none !important;
  overflow: hidden !important;
  min-height: var(--card-h) !important;
  max-height: var(--card-h) !important;
  display: flex !important;
  flex-direction: column !important;
}
/* 合并：5 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .post-content-full {
  display: grid !important;
  grid-template-rows: 0fr !important;
  transition: none !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  opacity: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .post-content-inner {
  overflow: hidden !important;
  min-height: 0 !important;
  padding: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
}
html body .main-col .post-card .post-card-foot { flex: 0 0 auto !important; margin-top: auto !important; }
html body .main-col .post-card .post-title,
html body .main-col .post-card .post-meta { flex: 0 0 auto !important; }

/* ════ A 方案·定稿:展开后全文区高度 = 由 flex 明确指定(不再被撑开) ════ */
/* 卡片 336 = 标题区+元信息+全文区+按钮区;全文区给固定 150px,按钮贴底 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card.expanded .post-content-inner {
  overflow-y: auto !important;
  max-height: 100% !important;
  overscroll-behavior: contain !important;
  height: 100% !important;
}
/* 折叠态:全文区高度 0 */
html body .main-col .post-card:not(.expanded) .post-content-full {
  flex: 0 0 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}
/* 预览区在展开时让位(高度 0,不占位) */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card.expanded .post-preview {
  display: none !important;
}

/* ════ A 方案·全文可视高度 150px → 300px(加一倍) ════ */
/* 卡片定高同步放大,容纳"标题+300px全文+按钮" */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card,
html body .main-col .post-card.expanded,
html body .main-col .post-card.is-animating,
html body .main-col .post-card.expanded.is-animating {
  height: 490px !important;
  min-height: 490px !important;
  max-height: 490px !important;
  box-sizing: border-box !important;
}

/* ════ A 方案·修正:全文区"按内容自适应,上限 300px"(短内容不留大空白) ════ */
/* 合并：5 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card.expanded .post-content-full {
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  transition: opacity .22s ease-out !important;
  flex: 0 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 300px !important;
  overflow: hidden !important;
}
/* 卡片高度也跟着自适应,上限 620px(标题+300全文+按钮) */
html body .main-col .post-card.expanded,
html body .main-col .post-card.expanded.is-animating {
  height: auto !important;
  min-height: var(--card-h) !important;
  max-height: 620px !important;
}
/* 折叠态不变:恒定 var(--card-h) */
html body .main-col .post-card,
html body .main-col .post-card.is-animating {
  height: var(--card-h) !important;
  min-height: var(--card-h) !important;
  max-height: var(--card-h) !important;
}

/* ══════════════════════════════════════════════════════════════
   圆形滚动滑块 · 苹果风格重做
   ① hover 不再改尺寸(消除位置跳变) ② 显性细槽线 ③ 极简质感
   ══════════════════════════════════════════════════════════════ */
/* ② 显性细槽线:卡片右侧一条 1px 淡线,只在有滑块时出现 */
/* ③ 滑块本体:苹果风 = 纯色圆点 + 极轻阴影,无渐变无描边无高光 */
/* ① hover 只变颜色,尺寸/位置完全不变 */
/* 内部图标:苹果风不显示箭头,留空;若存在也一起隐掉 */
/* ════ 槽线与滑块用同一套基准:都贴内层滚动区 ════ */
/* 槽线:从内层顶部到底部,右侧同一条竖线 */
/* 滑块:与槽线同一条竖线(right 26px),22px 圆点居中于槽 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab svg,
html body .main-col .post-card .scroll-fab .fab-icon {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   圆形滑块 · 定稿(立体白 + 半透明 + 淡光晕 + 零跳变)
   ① 只过渡颜色/光晕,不改尺寸 → 不跳
   ② 白色立体:白面 + 上高光 + 柔和投影
   ③ 淡光晕:同色 glow,而不是灰
   ══════════════════════════════════════════════════════════════ */
/* hover:只提亮 + 光晕略强(尺寸与位置完全不变) */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab:hover {
  background: rgba(255, 255, 255, .95) !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 2px rgba(16, 24, 40, .05),
    0 2px 4px rgba(16, 24, 40, .12),
    0 6px 16px rgba(16, 24, 40, .14),
    0 0 0 3px rgba(255, 255, 255, .26),
    0 0 20px 4px rgba(150, 195, 255, .45) !important;
  border-color: rgba(255, 255, 255, 1) !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab:active {
  background: rgba(255,255,255,1) !important;
  transform: none !important;
}

/* 暗色:白色滑块(在深色底上更像 iOS) */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab {
  background: rgba(255, 255, 255, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 2px rgba(0, 0, 0, .25),
    0 1px 3px rgba(0, 0, 0, .45),
    0 0 0 3px rgba(255, 255, 255, .08),
    0 0 18px 3px rgba(140, 190, 255, .28) !important;
  border: 1px solid rgba(255, 255, 255, .45) !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab:hover {
  background: rgba(255, 255, 255, .55) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
    0 2px 6px rgba(0, 0, 0, .5),
    0 0 0 3px rgba(255, 255, 255, .12),
    0 0 26px 6px rgba(140, 190, 255, .42) !important;
}
/* 槽线:跟随内层滚动区,1px 极细 */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card.has-fab::after {
  content: '' !important;
  position: absolute !important;
  right: var(--slot-right, 26px) !important;
  top: var(--slot-top, 96px) !important;
  bottom: auto !important;
  width: 1px !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 12%, rgba(0,0,0,.10) 88%, rgba(0,0,0,0) 100%) !important;
  border-radius: 1px !important;
  pointer-events: none !important;
  z-index: 4 !important;
  height: var(--slot-h, 120px) !important;
}
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .main-col .post-card.has-fab::after {
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 12%, rgba(255,255,255,.16) 88%, rgba(255,255,255,0) 100%) !important;
}

/* ════ 滑块定位改 transform:不参与布局 → hover 绝不跳 ════ */
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),                  /* 上高光 = 立体 */
    inset 0 -1px 2px rgba(16, 24, 40, .06),                /* 下内阴影 */
    0 1px 2px rgba(16, 24, 40, .10),
    0 4px 12px rgba(16, 24, 40, .12),
    0 0 0 3px rgba(255, 255, 255, .18),                    /* 淡光晕圈 */
    0 0 14px 2px rgba(150, 195, 255, .30) !important;
  backdrop-filter: blur(10px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease !important;
  right: 16px !important;
  transform: translateY(var(--fab-y, 80px)) !important;
  top: 0 !important;
}
html body .main-col .post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:active {
  transform: translateY(var(--fab-y, 80px)) !important;   /* hover/按下都不动 */
}


/* ==========================================================================
   分页器 v2（2026-10-08 重构）
   --------------------------------------------------------------------------
   设计依据：
   - GitHub Primer / Ant Design：按钮 32px，圆角 6px，当前页区分选中
   - IBM Carbon：四档 24/32/40/48，官方「拿不准就用中档」，本项目取 40px
   - WCAG 2.2 SC 2.5.8：触控目标 ≥24×24（本方案 40px，远超底线）
   - GOV.UK：上/下一页必须有可见、有意义的文字（不用纯箭头）
   - MDN cookbook：<nav aria-label> + <ul> + aria-current

   ★ 单层阴影规范下的「立体感」做法（用户 2026-10-08 要求）★
   用户要求「所在页向上浮起 + 加大一点点 + 悬浮感动效」。
   上浮需要影子才有离地感 → 此处**只用 1 层阴影**，符合单层阴影规范。
   选中态同时用「实心填充」表达（用户选 A），不依赖多层阴影。

   ★ 必须放在文件末尾 ★
   因 history 中 style.css:6274 有一段带 !important 的深色规则
   （同时作用于 .post-card button / .sidebar-categories a 等），
   本段用同等 !important + 更高特异性将其覆盖，而不删除那段
   （删除会连带改变其它按钮的质感）。CSS 去重阶段再统一收口。
   ========================================================================== */

.pagination {
  margin: 32px 0 40px;
  padding: 0;
}

.pagination .pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}

.pagination .pager-nums {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 条目范围文字：显示「1–20 / 共 23 篇」 */
.pagination .pager-range {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* ---- 基础按钮（上/下一页 与 页码 共用的观感）---- */
.pagination .pager-link,
.pagination .pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;                /* 用户要求「大小合适好点」+ WCAG 24 底线 → 取 Carbon 中档 40 */
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;            /* 与卡片圆角一致，纳入整站语言 */
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;   /* 页码等宽，切换时不抖动 */
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  /* 单层阴影：静息态不给阴影，保持扁平，与「单层阴影」规范一致 */
  transition: transform .18s cubic-bezier(.2,.8,.2,1),
              box-shadow .18s cubic-bezier(.2,.8,.2,1),
              background-color .18s ease,
              border-color .18s ease,
              color .18s ease;
}

.pagination .pager-link {
  padding: 0 16px;
  gap: 6px;
}

/* hover：轻微上浮 + 变色（不上浮太多，避免抢当前页的戏） */
.pagination .pager-link:hover,
.pagination .pager-num:hover {
  background-color: var(--color-bg);
  border-color: var(--color-border-hover);
  color: var(--color-text);
  transform: translateY(-1px);
}

.pagination .pager-link:active,
.pagination .pager-num:active {
  transform: translateY(0);
}

/* 键盘焦点：用 outline 而非 box-shadow（不占布局、不算阴影层） */
.pagination .pager-link:focus-visible,
.pagination .pager-num:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- 当前页（用户选 A：实心 + 上浮 + 略微放大 + 悬浮感动效）---- */
.pagination .pager-num.is-current {
  cursor: default;
  background-color: var(--color-text);      /* 实心：深色块，白字 */
  border-color: var(--color-text);
  color: #fff;
  font-weight: 600;
  transform: translateY(-2px) scale(1.06);  /* 上浮 2px + 放大 6% */
  /* 单层阴影（仅此一层）：制造离地感 */
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  animation: pager-float 3.2s ease-in-out infinite;
}

/* 悬浮感动效：极轻微上下浮动，含蓄不抢镜 */
@keyframes pager-float {
  0%, 100% { transform: translateY(-2px) scale(1.06); }
  50%      { transform: translateY(-4px) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .pagination .pager-num.is-current { animation: none; }
  .pagination .pager-link,
  .pagination .pager-num { transition: none; }
}

.pagination .pager-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 40px;
  color: var(--color-text-muted);
  letter-spacing: .08em;
  user-select: none;
}

/* 禁用态：视觉弱化但保留位置（避免翻页时按钮跳动） */
.pagination .pager-link.is-disabled {
  color: #c7c7cc;
  background-color: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}

/* 当前页码状态文字（宽屏隐藏，窄屏显示） */
.pagination .pager-status {
  display: none;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 0 4px;
}

/* ---- 响应式：窄屏折叠数字页码，改显示「第 X / Y 页」---- */
@media (max-width: 828px) {
  .pagination .pager-num-item { display: none; }
  .pagination .pager-status { display: inline-flex; align-items: center; height: 40px; }
  .pagination .pager { gap: 8px; }
}

@media (max-width: 640px) {
  .pagination { margin: 24px 0 32px; }
  .pagination .pager-link { min-width: 40px; padding: 0 12px; }  /* 触控目标不缩 */
}

/* ---- 深色主题（覆盖 style.css:6274 那段带 !important 的三层阴影）---- */
html[data-theme="dark"] body[class=""] .pagination .pager-link,
html[data-theme="dark"] body[class=""] .pagination .pager-num {
  background: rgba(255, 255, 255, .06) !important;
  background-image: none !important;          /* 清掉原规则的 linear-gradient */
  border: 1px solid rgba(255, 255, 255, .12) !important;
  border-radius: 10px !important;
  color: rgba(233, 238, 244, .88) !important;
  box-shadow: none !important;                /* 清掉三层阴影（静息态扁平） */
  text-shadow: none !important;
  transform: none !important;
}

html[data-theme="dark"] body[class=""] .pagination .pager-link:hover,
html[data-theme="dark"] body[class=""] .pagination .pager-num:hover {
  background-color: rgba(255, 255, 255, .12) !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .2) !important;
  color: #f2f6fb !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

/* 深色下的当前页：实心反相 + 单层阴影 + 上浮动效（与浅色同构） */
html[data-theme="dark"] body[class=""] .pagination .pager-num.is-current {
  background: #eef2f7 !important;
  background-image: none !important;
  border-color: #eef2f7 !important;
  color: #1a1f26 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .45) !important;   /* 仍为单层 */
  transform: translateY(-2px) scale(1.06) !important;
  animation: pager-float 3.2s ease-in-out infinite;
  text-shadow: none !important;
}

html[data-theme="dark"] body[class=""] .pagination .pager-gap {
  color: rgba(255, 255, 255, .45) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[class=""] .pagination .pager-link.is-disabled {
  color: rgba(255, 255, 255, .26) !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[class=""] .pagination .pager-status,
html[data-theme="dark"] body[class=""] .pagination .pager-range {
  color: rgba(255, 255, 255, .55) !important;
}


/* ==========================================================================
   留言条目：简化为「分类栏那种效果」（用户 Q5 · 2026-10-08）
   --------------------------------------------------------------------------
   原先 .comment / .cc-item 用了 2 层阴影（立体悬浮卡片），与「单层阴影」规范冲突。
   用户选择「简化成分类栏那种效果」→ 即：扁平、无阴影、仅靠底色与边框区分。
   与侧栏分类列表的观感保持一致，纳入整站统一语言。
   保留 hover 的可点击反馈（只改底色，不位移、不加阴影）。
   ========================================================================== */

.comments-list .comment,
.card-comment-list .cc-item {
  background: rgba(0, 0, 0, .018);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--space-md);
  box-shadow: none;                 /* 扁平：去掉原先的 2 层阴影 */
  transition: background-color .18s ease, border-color .18s ease;
}

.comments-list .comment:hover,
.card-comment-list .cc-item:hover {
  background: rgba(0, 0, 0, .035);
  border-color: var(--color-border-hover);
  box-shadow: none;                 /* hover 也不加阴影 */
  transform: none;                  /* 不位移，避免列表跳动 */
}

/* 楼中楼回复：再浅一档，同样扁平 */
.comments-list .comment-replies .comment-reply,
.card-comment-list .cc-item.cc-reply {
  background: rgba(0, 0, 0, .012);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

.comments-list .comment-replies .comment-reply:hover,
.card-comment-list .cc-item.cc-reply:hover {
  background: rgba(0, 0, 0, .03);
  box-shadow: none;
}

/* 深色主题下的留言条目：同族暗色，无发光（呼应第 8 条「文字框白块刺眼」）*/
html[data-theme="dark"] body[class=""] .comments-list .comment,
html[data-theme="dark"] body[class=""] .card-comment-list .cc-item,
html[data-theme="dark"] body[class=""] .comments-list .comment-replies .comment-reply,
html[data-theme="dark"] body[class=""] .card-comment-list .cc-item.cc-reply {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: none;
}

html[data-theme="dark"] body[class=""] .comments-list .comment:hover,
html[data-theme="dark"] body[class=""] .card-comment-list .cc-item:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}


/* ==========================================================================
   第四批修复 · 组 A：滚动按钮（FAB）三个问题
   用户 2026-10-08 21:0x 反馈：
     1a. "卡着不动"——静止时拖不动，必须把鼠标移到文章上（出现阴影）才能拖
     1b. "内容没超也不需要滚动，那个按钮也在，不合逻辑"
     1c. "上下拉的位置也没有之前我有说的细槽，把原本的阴影隐藏或去掉"
   ========================================================================== */

/* ── 1a：常驻可交互 ──────────────────────────────────────────────────────
   原先 .scroll-fab 带 opacity:0 + pointer-events:none，只有 .post-card:hover
   才启用 → 鼠标不在卡片上时拖不动。
   改为：只要展开且内容溢出，按钮就常驻可见、常驻可交互（不再依赖 hover）。
   保留一条"轻度淡化"以不抢镜，但 pointer-events 始终 auto。            */
.post-card:hover .scroll-fab,
html body .main-col .post-card:hover .scroll-fab {
  opacity: 1 !important;
}
/* 未溢出时由 JS 加 hidden 属性 → 必须真的不显示 */
.post-card .scroll-fab[hidden],
html body .main-col .post-card .scroll-fab[hidden] {
  display: none !important;
  pointer-events: none !important;
}

/* ── 1c：恢复"细槽"，并去掉多层阴影 ────────────────────────────────────
   用户此前就要求过细槽（.scroll-fab-track 曾存在，后被 ::before{content:none} 取消）。
   现恢复为：一条细轨道 + 圆形滑块在槽内上下移动。
   阴影：按"单层阴影"规范只保留 1 层（原为 3–5 层）。                    */

/* 轨道：铺在全文区右侧 */
.post-card .scroll-fab-track,
html body .main-col .post-card .scroll-fab-track {
  position: absolute !important;
  width: 6px !important;
  right: 12px !important;
  border-radius: 3px !important;
  background: rgba(16, 24, 40, .10) !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 4 !important;
  display: none;
}
.post-card.has-fab .scroll-fab-track,
html body .main-col .post-card.has-fab .scroll-fab-track {
  display: block !important;
}

/* 滑块本体：去阴影、去立体渐变，改为克制的实心圆 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .scroll-fab,
html body .main-col .post-card .scroll-fab {
  opacity: .92 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  border: none !important;
  background: rgba(16, 24, 40, .30) !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .18) !important;
  padding: 0 !important;
  z-index: 5 !important;
}
.post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:hover {
  background: rgba(16, 24, 40, .46) !important;
  box-shadow: 0 2px 6px rgba(16, 24, 40, .22) !important;   /* 仍为单层 */
  transform: none !important;                                /* 缩放会改尺寸导致定位抖动 */
}
.post-card .scroll-fab:active,
html body .main-col .post-card .scroll-fab:active {
  background: rgba(16, 24, 40, .60) !important;
  transform: none !important;
}
.post-card .scroll-fab:focus-visible,
html body .main-col .post-card .scroll-fab:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}
/* 去掉历史遗留的伪元素装饰（箭头/高光） */
.post-card .scroll-fab::before,
.post-card .scroll-fab::after { content: none !important; display: none !important; }
.post-card .scroll-fab svg,
.post-card .scroll-fab .fab-icon { display: none !important; }

/* 深色主题：同族暗色，无发光（单层阴影） */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab {
  background: rgba(233, 238, 244, .38) !important;
  background-image: none !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45) !important;      /* 单层 */
}
html[data-theme="dark"] body[class=""] .post-card .scroll-fab:hover {
  background: rgba(233, 238, 244, .58) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5) !important;
}
html[data-theme="dark"] body[class=""] .post-card .scroll-fab-track {
  background: rgba(255, 255, 255, .12) !important;
  box-shadow: none !important;
}


/* ==========================================================================
   第四批修复 · 组 C：深色主题视觉（用户第 3、4 条）
   ========================================================================== */

/* ── 第 3 条：侧栏与卡片用两套深色渐变 → 统一为同一色阶 ──────────────────
   实测（修复前）：
     侧栏盒子(作者卡/搜索/分类/标签)  linear-gradient(#4f5b68 → #414c58)
     帖子卡片(.post-card/.post)      linear-gradient(#5b6874 → #4e5b68)
   侧栏明显更深 → 用户观感「作者栏最深、不协调」。
   现统一采用卡片那一档（#5b6874 → #4e5b68），使侧栏与帖子同色阶。
   2026-10-09：随卡片一同更新为新色值（原先两处分别写死旧值，改一处会漏另一处）。 */
html[data-theme="dark"] body[class=""] .author-card,
html[data-theme="dark"] body[class=""] .sidebar-search,
html[data-theme="dark"] body[class=""] .sidebar-categories,
html[data-theme="dark"] body[class=""] .sidebar-tags,
/* 2026-10-15：深色下同组，.dtw 跟随相同的色阶 */
html[data-theme="dark"] body[class=""] .dtw {
  background: linear-gradient(180deg, #5b6874 0%, #4e5b68 100%) !important;
}

/* ── 第 4 条：收起态单行文字在渐变区形成「更灰的一条」────────────────────
   成因（实测）：
     .post-preview::after 是 40px 高的渐隐遮罩，**无条件渲染**；
     遮罩色 var(--color-surface) 与深色卡片底色不同族 → 边界可见；
     内容只有一行时，遮罩盖在空白上，把空白染成一条灰带。
   修复：① 遮罩颜色改为与卡片底色同族（用深色专用值）；
         ② 仅当内容确实被截断（有内容溢出）时才显示遮罩 → 短内容不渲染。 */
html[data-theme="dark"] body[class=""] .post-preview::after {
  background: linear-gradient(180deg,
    rgba(87, 100, 111, 0) 0%,
    rgba(87, 100, 111, .55) 55%,
    rgba(80, 92, 104, .92) 100%) !important;
}

/* 内容不足以截断时（JS 打上 .is-short 标记）→ 不渲染遮罩，避免灰带 */
.post-card .post-preview.is-short::after,
.post-preview.is-short::after {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 关键修复：滑块 hover 时不再丢失定位 ★★★
   --------------------------------------------------------------------------
   用户第 1a 条「下拉按钮会卡着不动…放在那里不动的时候就拉不动了」的真正根因。

   滑块定位依赖：transform: translateY(var(--fab-y))
   但历史规则中存在：
       .post-card .scroll-fab:hover  { transform: scale(1.08) !important; }   (L5720)
       html body … .scroll-fab:hover { transform: none !important; }           (L6884)
   由于二者特异性同档但后者靠后（且都带 !important），hover 时
   **定位 transform 被覆盖成 none / scale** → 滑块瞬间跳回未位移的原点。

   实测证据（hover 前后）：
       --fab-y 恒为 150px（JS 未变）
       但渲染位置在 y=98px ↔ y=248px 之间跳 150px
       → mouse.down() 时指针已不在滑块上 → 事件落到 <h2> 标题
       → 拖动完全无效（scroll_delta=0）

   修复：用最高特异性 + !important 强制 hover / active 阶段
   **永远保留 translateY(var(--fab-y))**，尺寸变化改用无关属性表达。
   ══════════════════════════════════════════════════════════════════════════ */
html body .main-col .post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:active,
html body .main-col .post-card .scroll-fab.is-dragging,
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab:hover,
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab:active {
  transform: translateY(var(--fab-y, 0px)) !important;
}

/* 隐藏历史遗留的「1px 竖线槽」（已被新的 .scroll-fab-track 取代，
   两者同时出现会出现两条槽 → 用户反馈"没有细槽"可能正是被它干扰） */
html body .main-col .post-card.has-fab::after,
html[data-theme="dark"] body[class=""] .main-col .post-card.has-fab::after {
  content: none !important;
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   第四批追加修复 · 细槽与滑块对齐（用户截图反馈：槽与滑块错位）
   --------------------------------------------------------------------------
   实测（修复前）：
     轨道 track: x=901, 宽 6px, 高 288px
     滑块 fab:   x=879, 直径 24px
     → 两者水平方向相差 22px，**不在同一条中线上**，看起来像两个错开的元素；
       且旧规则给轨道用了 right:12px、滑块用了 right:16px，各写一套。

   修复：让两者共用同一「轨道中线」，滑块水平居中于轨道之上。
     · 轨道宽度 6px，right 统一为 --fab-right（默认 14px）
     · 滑块直径 24px，其中心须落在轨道中心：
         滑块 right = 轨道 right + (6 - 24)/2 = 轨道 right - 9
     用 calc() 从同一个变量推导，避免再次各写一套而漂移。
   ══════════════════════════════════════════════════════════════════════════ */
html body .main-col .post-card {
  --fab-right: 14px;              /* 轨道右缘到卡片右缘 */
  --fab-track-w: 6px;             /* 轨道宽度 */
  --fab-size: 24px;               /* 滑块直径 */
}

/* 轨道：位置与宽度统一走变量 */
.post-card .scroll-fab-track,
html body .main-col .post-card .scroll-fab-track {
  width: var(--fab-track-w, 6px) !important;
  right: var(--fab-right, 14px) !important;
  border-radius: 3px !important;
  background: rgba(16, 24, 40, .12) !important;
  box-shadow: none !important;
}

/* 滑块：水平中心对齐轨道中心
   轨道中心距右缘 = fab-right + track-w/2
   滑块 right      = 轨道中心 - fab-size/2
                   = fab-right + track-w/2 - fab-size/2
   代入默认值：14 + 3 - 12 = 5px  */
.post-card .scroll-fab,
html body .main-col .post-card .scroll-fab {
  width: var(--fab-size, 24px) !important;
  height: var(--fab-size, 24px) !important;
  right: calc(var(--fab-right, 14px) + var(--fab-track-w, 6px) / 2 - var(--fab-size, 24px) / 2) !important;
  border-radius: 50% !important;
  background: rgba(16, 24, 40, .32) !important;
  background-image: none !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .2) !important;   /* 单层 */
  border: none !important;
}

/* 深色下同族暗色，无发光 */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab {
  background: rgba(233, 238, 244, .40) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important;
}
html[data-theme="dark"] body[class=""] .post-card .scroll-fab:hover {
  background: rgba(233, 238, 244, .62) !important;
}
html[data-theme="dark"] body[class=""] .post-card .scroll-fab-track {
  background: rgba(255, 255, 255, .14) !important;
}

/* hover / active 一律保留定位 transform（否则滑块跳回原点，拖不动） */
html body .main-col .post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:active {
  transform: translateY(var(--fab-y, 0px)) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 最终版：细槽 + 立体圆形按钮（用户 2026-10-08 22:0x 明确要求）★★★
   --------------------------------------------------------------------------
   用户反馈（附图，红框）：
     "我说的阴影是图上红框那个…不要这个阴影，要的是细槽跟立体按钮的联动。
      如果细槽跟立体圆形质感带点光晕的按钮，它需要的阴影也是为了体现按钮的立体跟效果。"

   因此本条覆盖此前所有 scroll-fab / scroll-fab-track 规则：
     ① 删掉那条「又粗又长的灰色圆头长条」（红框所指）—— 轨道改为 2px 极细
     ② 按钮恢复**立体圆形 + 光晕**（用户认可这里的阴影，因为它是用来表达立体感的）
     ③ 槽与按钮同中线；二者只在「文章确实需要滚动」时一起出现
   用户选择：槽宽 A = 2px。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 极细槽（2px）────────────────────────────────────────────────────────
   取代红框那条粗灰长条。刻意做得"轻"：几乎只是一条发丝线，
   作用是提示"这个圆钮可以上下拉"，而不是抢视觉。 */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab-track,
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab-track {
  background: rgba(255, 255, 255, .18) !important;
  box-shadow: none !important;
}

/* ── 立体圆形按钮 + 淡光晕 ───────────────────────────────────────────────
   立体感来源：径向渐变（左上受光）+ 顶部内侧高光；
   浮起感来源：一层外投影；光晕用同色系淡环（不引入突兀的蓝）。 */
.post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:hover,
.post-card .scroll-fab:active,
html body .main-col .post-card .scroll-fab:active {
  background:
    radial-gradient(circle at 34% 28%,
      #ffffff 0%, #fbfcfe 36%, #edf1f7 66%, #dbe2ea 100%) !important;
  /* 光晕略强，位置/尺寸完全不变 */
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(16, 24, 40, .10),
    0 2px 6px rgba(16, 24, 40, .26),
    0 0 0 4px rgba(255, 255, 255, .40) !important;
  transform: translateY(var(--fab-y, 0px)) !important;
}
.post-card .scroll-fab:active,
html body .main-col .post-card .scroll-fab:active {
  cursor: grabbing !important;
}
html[data-theme="dark"] body[class=""] .post-card .scroll-fab:hover {
  background:
    radial-gradient(circle at 34% 28%,
      #9aa7b6 0%, #7b8896 40%, #616d7c 72%, #4e5866 100%) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .26),
    inset 0 -2px 4px rgba(0, 0, 0, .30),
    0 2px 8px rgba(0, 0, 0, .55),
    0 0 0 4px rgba(255, 255, 255, .16) !important;
}

/* 未溢出时（JS 加 hidden）两者都必须真的不显示 */
.post-card:not(.has-fab) .scroll-fab-track,
html body .main-col .post-card:not(.has-fab) .scroll-fab-track {
  display: none !important;
}


/* ── 最终版微调（实测发现两处偏差）────────────────────────────────────────
   ① 轨道宽 2px 但中心比按钮偏右 2px → 用 calc 让两者共用同一条中线
      轨道中心距右缘 = fab-right + 1px(半宽)
      按钮 right     = fab-right + 1 - fab-size/2
   ② 深色主题 radial-gradient 未生效（实测 backgroundImage = "none"）
      原因：深色规则写在前面但被判为低优先级，或 background 被简写覆盖。
      改为显式声明 background-image，并放在最后确保生效。 */
/* 深色主题立体钮：显式用 background-image，避免被简写覆盖 */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab,
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab {
  background-color: transparent !important;
  background-image: radial-gradient(circle at 34% 28%,
      #8a97a6 0%, #6d7a89 40%, #55616f 72%, #454f5c 100%) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .22),
    inset 0 -2px 4px rgba(0, 0, 0, .30),
    0 1px 4px rgba(0, 0, 0, .5),
    0 0 0 3px rgba(255, 255, 255, .10) !important;
}
html[data-theme="dark"] body[class=""] .post-card .scroll-fab:hover,
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab:hover {
  background-image: radial-gradient(circle at 34% 28%,
      #9aa7b6 0%, #7b8896 40%, #616d7c 72%, #4e5866 100%) !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, .26),
    inset 0 -2px 4px rgba(0, 0, 0, .30),
    0 2px 8px rgba(0, 0, 0, .55),
    0 0 0 4px rgba(255, 255, 255, .16) !important;
}
/* 浅色主题同样显式声明 image，确保不被覆盖 */
html:not([data-theme="dark"]) body .post-card .scroll-fab {
  background-color: transparent !important;
  background-image: radial-gradient(circle at 34% 28%,
      #ffffff 0%, #f7f9fc 38%, #e6ebf2 68%, #d2dae4 100%) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 滚动条：改用 W3C 标准属性（2026-10-08 最终方案）★★★
   --------------------------------------------------------------------------
   【为什么放弃自绘】
   此前自绘了「细槽 + 立体圆钮 + 拖动映射」，连续 4 轮修补（hover 跳动、
   槽错位、比例错、拖不动），根因是**自绘必须自己实现滚动映射**，
   而这是浏览器原生就保证的能力。

   【权威依据】MDN / W3C CSS Scrollbars Styling Module Level 1
     · scrollbar-width："Avoid using `none`, as hiding a scrollbar
       negatively impacts accessibility."
     · 无障碍章节："setting scrollbar-width to thin or none can make content
       hard or impossible to scroll ... some devices have no scroll alternative."
       并援引 WCAG 2.1.1（键盘）与 WCAG 2.5.5（触控目标 ≥44px）。
     · 重要：元素一旦设置非 auto 的 scrollbar-width，
       **非标准的 ::-webkit-scrollbar 会被浏览器忽略**（二者不可混用）。

   【本方案】
     用标准属性把原生滚动条做"细"且配色统一：
       scrollbar-width: thin;
       scrollbar-color: <滑块色> <槽色>;
     · 原生滚动条→**跟手由浏览器保证**，不可能出现"拖不动"
     · 符合 W3C 标准，不隐藏滚动条（满足 MDN 的无障碍要求）
     · 无需任何 JS
   ══════════════════════════════════════════════════════════════════════════ */

/* 真正的滚动容器是 .post-content-inner（此前隐藏规则误写在 .post-content-full 上，
   导致原生滚动条一直可见，与自绘圆钮重影）。 */
html body .main-col .post-card .post-content-inner,
.post-content-inner {
  /* 细滚动条：标准属性，Firefox / Chrome / Safari 均支持 */
  scrollbar-width: thin;
  /* 滑块色 + 槽色（槽透明 → 只看到一条细滑块，观感接近"细槽"） */
  scrollbar-color: rgba(16, 24, 40, .28) transparent;
}

/* 深色主题：滑块改用浅色，保证对比度（MDN 要求滑块与槽有足够对比） */
html[data-theme="dark"] body[class=""] .post-card .post-content-inner,
html[data-theme="dark"] .post-content-inner {
  scrollbar-color: rgba(255, 255, 255, .34) transparent;
}

/* WebKit 回退：仅当浏览器不支持 scrollbar-width 时才生效。
   注意：设置 scrollbar-width 后这些伪元素会被忽略，故只作兜底，
   且宽度用 thin 语义（8px），不做自绘造型。 */
@supports not (scrollbar-width: thin) {
  .post-content-inner::-webkit-scrollbar { width: 8px; height: 8px; }
  .post-content-inner::-webkit-scrollbar-track { background: transparent; }
  .post-content-inner::-webkit-scrollbar-thumb {
    background: rgba(16, 24, 40, .28);
    border-radius: 4px;
  }
  html[data-theme="dark"] .post-content-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .34);
  }
}

/* ── 停用自绘滚动条（细槽 + 圆钮 + 拖动），避免与原生滚动条重影 ──
   保留选择器但隐藏元素，便于日后需要时恢复。 */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .scroll-fab-track,
html body .main-col .post-card .scroll-fab-track {
  width: 2px !important;
  border-radius: 1px !important;
  background: rgba(16, 24, 40, .14) !important;
  box-shadow: none !important;
  border: none !important;
  pointer-events: none !important;
  z-index: 4 !important;
  right: calc(var(--fab-right, 14px) + var(--fab-size, 24px) / 2 - 1px) !important;
  display: none !important;
}
/* 旧的自绘「1px 竖线槽」也一并停用 */
html body .main-col .post-card.has-fab::after {
  content: none !important;
  display: none !important;
}
/* 恢复被错误隐藏的 .post-content-full（它并非滚动容器） */
.post-content-full { scrollbar-width: auto !important; }


/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 滑块最终版（2026-10-08 23:1x）—— 常驻细槽 + 常驻立体圆钮 ★★★
   --------------------------------------------------------------------------
   用户明确要求（多轮确认后）：
     · 一根「细槽」+ 一个「立体圆钮」，**常驻可见**（不依赖 hover、不依赖滚动）
     · 拖动圆钮可上下拉动内容
     · 只有内容真的需要滚动时才出现
   放弃系统滚动条：macOS 原生是浮层式「滚动才出现」，无法满足"常驻"。

   本段覆盖此前所有 scroll-fab / track 规则（含"停用自绘"那几段）。
   拖动逻辑改用「相对位移 + setPointerCapture」，见 base.html。
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 细槽：常驻、2px、圆角 ── */
/* ── 立体圆钮：常驻可见、可拖 ── */
.post-card .scroll-fab,
html body .main-col .post-card .scroll-fab,
html[data-theme="dark"] body[class=""] .post-card .scroll-fab {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  /* 立体：左上受光的球面渐变 */
  background-color: transparent !important;
  background-image: radial-gradient(circle at 34% 28%,
      #ffffff 0%, #f6f9fc 40%, #e4eaf1 70%, #cfd8e3 100%) !important;
  /* 内侧高光 + 单层外投影 + 淡光晕 */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 3px rgba(16, 24, 40, .12),
    0 1px 4px rgba(16, 24, 40, .28),
    0 0 0 3px rgba(255, 255, 255, .30) !important;
  cursor: grab !important;
  touch-action: none !important;
  z-index: 5 !important;
  /* 位置由 --fab-y 决定；任何 hover/active 都不得覆盖它 */
  transform: translateY(var(--fab-y, 0px)) !important;
  transition: box-shadow .18s ease, background-image .18s ease !important;
}
.post-card .scroll-fab:hover,
.post-card .scroll-fab:active,
.post-card .scroll-fab.is-dragging,
html body .main-col .post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:active,
html body .main-col .post-card .scroll-fab.is-dragging,
html[data-theme="dark"] body[class=""] .post-card .scroll-fab:hover,
html[data-theme="dark"] body[class=""] .post-card .scroll-fab:active {
  transform: translateY(var(--fab-y, 0px)) !important;   /* ★ 永不丢失定位 */
}
.post-card .scroll-fab.is-dragging {
  cursor: grabbing !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 3px rgba(16, 24, 40, .12),
    0 2px 8px rgba(16, 24, 40, .34),
    0 0 0 4px rgba(255, 255, 255, .42) !important;
}
.post-card .scroll-fab:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px !important;
}
.post-card .scroll-fab::before,
.post-card .scroll-fab::after { content: none !important; display: none !important; }
.post-card .scroll-fab svg { display: none !important; }

/* 深色主题：同族暗色球面 + 浅色光晕 */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab.is-dragging {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .28),
    inset 0 -1.5px 3px rgba(0, 0, 0, .34),
    0 2px 9px rgba(0, 0, 0, .6),
    0 0 0 4px rgba(255, 255, 255, .20) !important;
}

/* 未溢出时 JS 加 hidden → 槽与钮一起彻底隐藏 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.post-card .scroll-fab[hidden],
html body .main-col .post-card .scroll-fab[hidden] {
  display: none !important;
}
html[data-theme="dark"] body[class=""] .post-card .post-content-inner code,
html[data-theme="dark"] body[class=""] .post-content-inner code,
html[data-theme="dark"] .post-content-inner code {
  background: #212830 !important;
  border: 1px solid #39424e !important;
  color: #c7d0da !important;
  border-radius: 6px !important;
}
/* 代码块内的 code 不要重复描边/底色（避免"块中块"） */
html[data-theme="dark"] body[class=""] .post-content-inner pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* 浅色主题也补一条，保持一致性（原先浅色也没有 .post-content-inner 规则） */
.post-content-inner pre {
  background: #f6f8fa;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 16px;
  overflow-x: auto;
}
.post-content-inner code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}


/* 修正：轨道高度必须由 JS 设置（比例计算），不能写死 auto，
   否则 height:auto !important 会覆盖 JS 的 inline height → 轨道高度 0。
   这里放开 height，仅保留其他约束。 */


/* ══════════════════════════════════════════════════════════════════════════
   修正：轨道高度为 0 的真正原因
   --------------------------------------------------------------------------
   实测：轨道 position:absolute，同时被设置了 top:150px 与 bottom:367.5px。
   绝对定位元素一旦同时有 top 与 bottom，**height 会被二者推导**，
   于是 inline 的 height:165px 被忽略 →
        实际高度 = 卡片高(519.5) − top(150) − bottom(367.5) = 0px
   这就是「槽看不见 / 高度 0」的根因（早前某条规则遗留了 bottom）。

   修复：显式清掉 bottom，让高度完全由 inline height 决定。
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   ★ 最终覆盖：清除所有历史遗留的 track 强制规则
   --------------------------------------------------------------------------
   用 CDP 查得实际生效的冲突规则（此前多轮修补叠加所致）：
     · `height: 0px !important`   ← 来自早前"强制停用自绘轨道"那一段
     · `height: auto !important`
     · `top: auto !important`     ← 会把 JS 的 inline top 清掉
     · `bottom: auto/…`
   这些都在与 JS 的 inline height/top 打架，导致轨道高度恒为 0。

   现一次性声明最终值：位置与尺寸**全部交回 JS**（inline 生效），
   CSS 只负责外观（颜色、圆角、层级）。放在文件最后以确保胜出。
   ══════════════════════════════════════════════════════════════════════════ */
/* 未溢出时隐藏 */
/* ══════════════════════════════════════════════════════════════════════════
   ★★★ 轨道定位改用 transform（彻底避开 top/bottom/height 的 !important 混战）★★★
   --------------------------------------------------------------------------
   诊断（CDP 实测）：轨道高度恒为 0 的原因是历史多轮规则叠加，出现
       height: 0px !important / top: auto !important / bottom: …
   彼此与 JS 的 inline top/height 冲突。

   解决思路：**不去争论 top/height 的优先级**，改用不受这些属性影响的方案：
     · 纵向位置 → transform: translateY(var(--track-y))
       （transform 不会被 top/bottom 覆盖，且不参与布局）
     · 高度 → 用固定的 CSS 高度变量 --track-h，由 JS 写入变量而非 height 属性
       （CSS 里 height: var(--track-h) 只声明一次，无需 !important 对抗）
   ══════════════════════════════════════════════════════════════════════════ */
html body .main-col .post-card .scroll-fab-track,
html body .main-col .post-card.has-fab .scroll-fab-track,
html[data-theme="dark"] body[class=""] .post-card .scroll-fab-track,
.post-card .scroll-fab-track {
  position: absolute !important;
  top: 0 !important;
  left: auto !important;
  bottom: auto !important;
  height: var(--track-h, 120px) !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: translateY(var(--track-y, 0px)) !important;
  width: 2px !important;
  border-radius: 1px !important;
  background: rgba(16, 24, 40, .16) !important;
  box-shadow: none !important;
  border: none !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 4 !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab-track,
html[data-theme="dark"] body[class=""] .post-card.has-fab .scroll-fab-track {
  background: rgba(255, 255, 255, .20) !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card:not(.has-fab) .scroll-fab-track {
  display: none !important;
}


/* 对齐修正：槽 2px 与钮 18px 必须共用同一中线。
   槽中心距右缘 = track-right + 1
   钮 center  = 钮-right + 9  →  钮 right = track-right + 1 - 9 = track-right - 8
   实测曾差 3px，此处用 calc 从同一变量推导，避免再次漂移。 */
html body .main-col .post-card {
  --fab-track-right: 14px;     /* 槽的右偏移（JS 会写 right，这里给 CSS 兜底） */
}
/* ══════════════════════════════════════════════════════════════════════════
   滑块（.scroll-fab）已由 <button> 改为 <div role="scrollbar">
   --------------------------------------------------------------------------
   外部答复建议：此物语义是「滚动条滑块」而非按钮；用 button 会带来
   原生 click / focus / 表单语义，与拖动逻辑混淆。
   因此补齐 div 所需的三件套（按钮时代由原生样式提供）：
     touch-action: none  → 禁止触摸滚动接管拖动
     user-select: none   → 防止拖动时选中文字
     -webkit-user-drag   → 禁止 Safari 原生拖拽
   ══════════════════════════════════════════════════════════════════════════ */
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab,
.post-card .scroll-fab {
  width: var(--fab-size, 24px) !important;
  height: var(--fab-size, 24px) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  background: radial-gradient(circle at 34% 28%,
      #ffffff 0%, #f7f9fc 38%, #e6ebf2 68%, #d2dae4 100%) !important;
  box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 1),
    inset 0 -2px 4px rgba(16, 24, 40, .10),
    0 1px 3px rgba(16, 24, 40, .22),
    0 0 0 3px rgba(255, 255, 255, .28) !important;
  padding: 0 !important;
  z-index: 5 !important;
  cursor: grab !important;
  touch-action: none !important;
  transform: translateY(var(--fab-y, 0px)) !important;
  transition: box-shadow .2s ease, background .2s ease !important;
  right: calc(var(--fab-right, 14px) + var(--fab-size, 24px) / 2 - var(--fab-size, 24px) / 2) !important;
  display: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  box-sizing: border-box !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   滚动控件 v3（2026-10-08 23:4x）—— 按外部答复的"混合模式"实现
   --------------------------------------------------------------------------
   架构（采纳外部答复第 5 节）：
     · 原生滚动**保留**（滚轮 / 触控板 / 键盘 / 触屏 / 惯性全由浏览器负责）
     · 原生滚动条隐藏（滚动能力不受影响）
     · 自绘：槽（pointer-events:none，纯视觉）+ 圆钮（pointer-events:auto，可拖）
     · 单一真值：scrollTop 是唯一状态，圆钮位置永远从它推导
     · 几何值运行时读取（track.clientHeight / thumb.offsetHeight），
       不再硬编码 —— 避免历史上"CSS 推导出 height:0"那类问题
     · 拖拽后吞掉 click（setPointerCapture 会导致 pointerup 触发 click）

   用户要求：常驻可见、细槽 + 立体圆钮、可拖动、仅溢出时出现。
   ══════════════════════════════════════════════════════════════════════════ */

/* 隐藏原生滚动条，但**保留滚动能力** */
html body .main-col .post-card .post-content-inner {
  scrollbar-width: none !important;          /* Firefox */
  -ms-overflow-style: none !important;       /* 旧 Edge */
}
html body .main-col .post-card .post-content-inner::-webkit-scrollbar {
  width: 0 !important; height: 0 !important; display: none !important;
}

/* 槽：常驻、2px、纯视觉不接收鼠标 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab-track {
  right: var(--fab-track-right, 14px) !important;
  position: absolute !important;
  top: 0 !important;
  height: var(--track-h, 120px) !important;
  transform: translateY(var(--track-y, 0px)) !important;
  width: 2px !important;
  border-radius: 1px !important;
  background: rgba(16, 24, 40, .16) !important;
  box-shadow: none !important;
  border: none !important;
  pointer-events: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 4 !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab-track {
  background: rgba(255, 255, 255, .20) !important;
}

/* 圆钮：常驻、立体、可拖 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab {
  right: calc(var(--fab-track-right, 14px) + 1px - 9px) !important;
  position: absolute !important;
  top: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  background-color: transparent !important;
  background-image: radial-gradient(circle at 34% 28%,
      #ffffff 0%, #f6f9fc 40%, #e4eaf1 70%, #cfd8e3 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 3px rgba(16, 24, 40, .12),
    0 1px 4px rgba(16, 24, 40, .28),
    0 0 0 3px rgba(255, 255, 255, .30) !important;
  transform: translateY(var(--fab-y, 0px)) !important;
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}
html body .main-col .post-card .scroll-fab:active,
html body .main-col .post-card .scroll-fab.is-dragging {
  cursor: grabbing !important;
  transform: translateY(var(--fab-y, 0px)) !important;   /* hover/active 不改定位 */
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background-image: radial-gradient(circle at 34% 28%,
      #9aa7b6 0%, #7c8996 40%, #626e7d 72%, #4e5866 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .24),
    inset 0 -1.5px 3px rgba(0, 0, 0, .34),
    0 1px 5px rgba(0, 0, 0, .55),
    0 0 0 3px rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .16) !important;
}

/* 未溢出时整体隐藏（JS 通过 has-fab 控制） */
html body .main-col .post-card:not(.has-fab) .scroll-fab-track,
html body .main-col .post-card:not(.has-fab) .scroll-fab {
  display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   深色卡片渐变：提亮暗端，减小上下落差（用户 2026-10-09 00:0x 要求，方案 C）
   --------------------------------------------------------------------------
   问题（用户附图红框）：展开后的正文区整块显得很闷、越往下越黑。
   实测（逐像素采样，远离文字）：
     卡片顶部 (96,108,119) → 底部 (70,82,94)  —— 跨度 26 级亮度
     正文区 300px 高，正好落在这段落差最大的区间内 → 视觉上"沉下去"
   原因：页面背景本身有 9 段纵向渐变（暗端 #161c22），
         卡片渐变暗端 #45505c 与之叠加后，下段显得更暗。

   方案 C：只提亮卡片**暗端**并收窄跨度，不动结构、不改浅色主题。
     原：#57646f → #45505c   (跨度 0x11)
     新：#5b6874 → #4e5b68   (跨度 0x0d，整体抬亮约 4~9 级)
   ══════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body[class=""] .post-card,
html[data-theme="dark"] body[class=""] .post {
  background: linear-gradient(180deg, #5b6874 0%, #4e5b68 100%) !important;
}
/* 侧栏同步同一色阶，避免又出现"作者栏更深"的不一致 */
html[data-theme="dark"] body[class=""] .author-card,
html[data-theme="dark"] body[class=""] .sidebar-search,
html[data-theme="dark"] body[class=""] .sidebar-categories,
html[data-theme="dark"] body[class=""] .sidebar-tags {
  background: linear-gradient(180deg, #5b6874 0%, #4e5b68 100%) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 滚动条轨道 · 唯一最终规则（2026-10-09 00:1x）                        ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 背景：本文件历史上有 20+ 条 .scroll-fab-track 规则互相覆盖，          ║
   ║       是"修一处冒一处"的根源（height:0 / display:none / top:auto）。  ║
   ║ 做法：在文件末尾用 html body 前缀（特异性最高）+ !important          ║
   ║       一次性声明全部必要属性，不再依赖"删除旧规则"。                  ║
   ║       轨道尺寸/位置仍由 JS 通过 CSS 变量提供（--track-h / --track-y） ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* 未溢出时整体不显示（JS 维护 has-fab 类） */
html body .main-col .post-card:not(.has-fab) .scroll-fab-track {
  display: none !important;
}

/* ── 圆钮：去掉那圈方形光晕（用户反馈的"竖条色差"来源）───────────────
   原先用 `0 0 0 3px rgba(255,255,255,.30)` 做光晕，它在深色卡片上
   会形成一个**直角方形**的浅色块，看起来就是一条竖条色差。
   改为纯圆形投影，不再用 spread 环。 */
/* hover / active / 拖动时一律保留定位 transform */
/* ── 细槽配色修正（2026-10-09 00:2x，用户反馈"竖条色差"）─────────────────
   实测（深色卡片，逐像素扫描）：
     卡片底色  (85, 98,110)
     槽所在列  (119,128,138)   ← 亮 34 级，成了一条突兀的竖向亮带
   原因：槽用了 rgba(255,255,255,.20)，在白底上合适，在深色卡上过亮。
   修正：深色下改为"比卡片略暗"（凹陷感），与卡片同族，
         而不是加一层白。亮度差控制在 10 级以内。 */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab-track,
html[data-theme="dark"] body[class=""] .post-card.has-fab .scroll-fab-track {
  background: rgba(0, 0, 0, .18) !important;
}
/* 浅色下同样收敛：原 rgba(16,24,40,.16) 在浅色卡上偏重，微调为更含蓄的值 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab-track,
html body .main-col .post-card.has-fab .scroll-fab-track {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  height: var(--track-h, 120px) !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 2px !important;
  border-radius: 1px !important;
  transform: translateY(var(--track-y, 0px)) !important;
  background: rgba(16, 24, 40, .12) !important;
  box-shadow: none !important;
  border: none !important;
  pointer-events: none !important;
  z-index: 4 !important;
}


/* ── 圆钮光晕柔化（2026-10-09 00:3x，用户反馈"光晕不自然、边缘太清晰"）──
   问题：深色下只有一层 `0 1px 5px rgba(0,0,0,.55)` 硬投影，
         没有向外渐隐的过渡 → 边缘像被剪出来的圆片，不自然。
   做法：用**多层、由近到远、透明度递减**的投影模拟柔和光晕
         （单层 shadow 的模糊半径再大也会有可见边界）。
         同时把 border 从纯白降为半透明，避免硬轮廓。
   注：深色主题下"光晕"应为浅色微光（球体受环境光），而非黑色投影。 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab {
  border-color: rgba(255, 255, 255, .16) !important;
  background-image: radial-gradient(circle at 34% 28%,
      #b9c3cf 0%, #97a3b1 32%, #78838f 62%, #5d6874 88%, #556069 100%) !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, .30),
    inset 0 -2px 4px rgba(0, 0, 0, .28),
    0 0 4px 1px rgba(190, 205, 225, .16),
    0 1px 7px 2px rgba(150, 170, 195, .10),
    0 3px 16px 4px rgba(0, 0, 0, .30) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
}
/* 悬停/拖动时略微增强，但保持柔和（不出现硬边） */
html[data-theme="dark"] body[class=""] .post-card .scroll-fab:hover,
html[data-theme="dark"] body[class=""] .post-card .scroll-fab.is-dragging {
  box-shadow:
    inset 0 1px 1.5px rgba(255, 255, 255, .36),
    inset 0 -2px 4px rgba(0, 0, 0, .28),
    0 0 6px 2px rgba(200, 214, 232, .22),
    0 2px 10px 3px rgba(160, 180, 205, .14),
    0 4px 20px 6px rgba(0, 0, 0, .34) !important;
}

/* 浅色下同样柔化（原单层 0 1px 4px 也偏硬） */
/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 圆钮光晕 · 唯一最终规则（2026-10-09 00:3x）                          ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："深色下上下拉的圆形按钮那个光晕不自然，边缘太清晰了"          ║
   ║                                                                      ║
   ║ 根因：历史规则里有一枚 `0 0 0 3px rgba(255,255,255,.10)` ——           ║
   ║       这是**零模糊半径的实心扩散环**（box-shadow spread），            ║
   ║       无论颜色多淡，画出来都是一圈**边界分明**的白环，                ║
   ║       正是"边缘太清晰"的直接来源。                                    ║
   ║                                                                      ║
   ║ 做法：                                                               ║
   ║   ① 彻底去掉所有 `0 0 0 Npx` 形式的扩散环；                          ║
   ║   ② 柔晕改用**多层、带模糊半径、由近及远递减**的投影；                 ║
   ║   ③ 深色下"光晕"取浅色微光（球体受环境光），而非黑色硬投影；          ║
   ║   ④ border 降为极低对比，避免剪影式硬轮廓。                           ║
   ║                                                                      ║
   ║ 放在文件最末，用 `html body .main-col` 前缀取得最高特异性，           ║
   ║ 压过此前全部圆钮规则（本文件同类规则已累积 190 处）。                 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── 深色主题 ── */
/* 悬停/拖动：仅轻微增强，仍无扩散环 */
/* ── 浅色主题 ── */
/* 合并：3 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab,
html body .main-col .post-card.has-fab .scroll-fab {
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, .60) !important;
  background-color: transparent !important;
  background-image: radial-gradient(circle at 34% 28%,
      #ffffff 0%, #f7f9fc 38%, #e8edf3 68%, #d8dfe7 100%) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 3px rgba(16, 24, 40, .09),
    0 0 2px 0 rgba(255, 255, 255, .50),
    0 1px 5px 0 rgba(16, 24, 40, .13),
    0 3px 11px 1px rgba(16, 24, 40, .08) !important;
  transform: translateY(var(--fab-y, 0px)) !important;
  cursor: grab !important;
  pointer-events: auto !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-user-drag: none !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}
html body .main-col .post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:active {
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 -1.5px 3px rgba(16, 24, 40, .09),
    0 0 4px 0 rgba(255, 255, 255, .60),
    0 2px 9px 0 rgba(16, 24, 40, .16),
    0 4px 16px 2px rgba(16, 24, 40, .10) !important;
}
/* 任何状态都不得丢失定位 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .scroll-fab:hover,
html body .main-col .post-card .scroll-fab:active,
html body .main-col .post-card .scroll-fab.is-dragging {
  transform: translateY(var(--fab-y, 0px)) !important;
}


/* ── 圆钮降亮（2026-10-09 00:4x，用户反馈"太亮了按钮"）────────────────────
   上一版球面用了 #c2ccd8 起步（很亮的灰白），在深色卡片上过于抢眼。
   调整：整体压暗一档、高光减弱、内高光透明度下调，
         让球体与深色卡片同族（暗色球 + 微弱受光），而非"发亮的白球"。 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab,
html[data-theme="dark"] body[class=""] .main-col .post-card.has-fab .scroll-fab {
  border: 1px solid rgba(255, 255, 255, .05) !important;
  background-color: transparent !important;
  background-image: radial-gradient(circle at 34% 28%,
      #8b96a3 0%, #79848f 34%, #656f7a 64%, #525b66 88%, #4a535d 100%) !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, .16),
    inset 0 -2px 5px rgba(0, 0, 0, .30),
    0 0 3px 0 rgba(190, 205, 225, .06),
    0 1px 6px 0 rgba(150, 170, 195, .07),
    0 3px 12px 1px rgba(0, 0, 0, .28) !important;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab:hover,
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab.is-dragging,
html[data-theme="dark"] body[class=""] .main-col .post-card .scroll-fab:active {
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, .20),
    inset 0 -2px 5px rgba(0, 0, 0, .30),
    0 0 5px 0 rgba(200, 214, 232, .10),
    0 2px 8px 0 rgba(160, 180, 205, .09),
    0 4px 16px 2px rgba(0, 0, 0, .32) !important;
  background-image: radial-gradient(circle at 34% 28%,
      #9aa5b2 0%, #858f9b 34%, #6e7883 64%, #58616c 88%, #4f5862 100%) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 深色主题 · 设计变量重定义（2026-10-09 00:5x）                        ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："留言的字颜色不统一，不好看，还有点让人看不清"              ║
   ║                                                                      ║
   ║ 根因（实测）：                                                       ║
   ║   --color-text / --color-text-secondary 等变量**只在 :root 定义过一次**，║
   ║   深色主题从未重定义 → 任何使用 var(--color-text) 的元素在深色下     ║
   ║   仍然是**浅色主题的纯黑字**。                                        ║
   ║   实测 .cc-author = rgb(26,26,26)（纯黑），而容器 .cc-item 是浅色，   ║
   ║   两者无继承关系 → 同一块区域出现三种亮度，既不统一又看不清。         ║
   ║                                                                      ║
   ║ 做法：在深色主题下**整套重定义**这些变量（而不是逐个元素打补丁）。    ║
   ║   这样今后任何新组件只要使用这些变量，深浅两套主题都自动正确。        ║
   ║                                                                      ║
   ║ 选择器说明：用 html[data-theme="dark"]（而非 body[class=""] 前缀），  ║
   ║   以便同时覆盖所有主题变体（chiri-dark / glass-dark 等）。            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* ── 留言区文字统一（明确指定，避免继承链断裂）────────────────────────── */
html[data-theme="dark"] body[class=""] .cc-author,
html[data-theme="dark"] body[class=""] .comment-author {
  color: var(--color-text) !important;              /* 昵称：主文字色 */
}
html[data-theme="dark"] body[class=""] .cc-time,
html[data-theme="dark"] body[class=""] .comment-time {
  color: var(--color-text-secondary) !important;    /* 时间：次要色（不再近黑） */
}
html[data-theme="dark"] body[class=""] .cc-content,
html[data-theme="dark"] body[class=""] .comment-body,
html[data-theme="dark"] body[class=""] .comment-content {
  color: var(--color-text) !important;
}
html[data-theme="dark"] body[class=""] .comments-title,
html[data-theme="dark"] body[class=""] .card-comment-status {
  color: var(--color-text-secondary) !important;
}

/* ── 代码块：不再"黑框"（用户反馈"黑框还是那么黑"）─────────────────────
   上一版用 #212830，是在**旧卡片底色**（#57646f）下调的；
   后来卡片调亮到 #5b6874→#4e5b68，代码块没跟着调，于是对比过强、像挖了个黑洞。
   现改为与卡片同族的略暗色，并保留可读的浅色字。 */
html[data-theme="dark"] body[class=""] .post-card .post-content-inner pre,
html[data-theme="dark"] body[class=""] .post-content-inner pre {
  background: rgba(0, 0, 0, .18) !important;        /* 半透明压暗，跟随卡片底色 */
  border: 1px solid rgba(255, 255, 255, .10) !important;
  color: #dfe6ee !important;
}
html[data-theme="dark"] body[class=""] .post-card .post-content-inner code,
html[data-theme="dark"] body[class=""] .post-content-inner code {
  background: rgba(0, 0, 0, .16) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: #dfe6ee !important;
}
/* 代码块内的 code 不重复上底色 */
html[data-theme="dark"] body[class=""] .post-content-inner pre code {
  background: transparent !important;
  border: none !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 留言表单 · 深色主题协调性修复（2026-10-09 01:0x）                     ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："协调吗？颜色"（附图：留言表单）                          ║
   ║                                                                      ║
   ║ 实测发现三个问题：                                                   ║
   ║  ① 输入框背景 rgb(33,40,48) —— 比卡片暗端(#4e5b68)暗约 30 级，      ║
   ║     在同一卡片内形成两个"黑洞"，与卡片不协调。                       ║
   ║     （与代码块同一类问题：深色值没跟着卡片调亮）                      ║
   ║  ② 验证码区：.captcha-area 宽 668px 撑满整行，而验证码图仅 120px，    ║
   ║     导致输入框被挤到下一行、独占整行，视觉错位。                      ║
   ║  ③ 按钮与卡片同色系、对比弱，操作区层次不清。                        ║
   ║                                                                      ║
   ║ 做法：                                                               ║
   ║   · 输入框改用**半透明压暗**（跟随卡片底色，卡片再调也不用改它）      ║
   ║   · 验证码图与输入框**并排**（flex 一行，输入框占剩余宽度）           ║
   ║   · 主按钮（发布）用实心强调色，次按钮（取消）用描边 —— 拉开层次      ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── ① 输入控件：半透明压暗，与卡片同族 ── */
html[data-theme="dark"] body[class=""] .form-input,
html[data-theme="dark"] body[class=""] textarea.form-input,
html[data-theme="dark"] body[class=""] input.form-input,
html[data-theme="dark"] body[class=""] select.form-input {
  background-color: rgba(0, 0, 0, .20) !important;
  border: 1px solid rgba(255, 255, 255, .12) !important;
  color: var(--color-text, #e9eef4) !important;
}
html[data-theme="dark"] body[class=""] .form-input::placeholder,
html[data-theme="dark"] body[class=""] textarea.form-input::placeholder {
  color: var(--color-text-muted, #8d99a6) !important;
  opacity: 1;
}
html[data-theme="dark"] body[class=""] .form-input:focus,
html[data-theme="dark"] body[class=""] textarea.form-input:focus {
  background-color: rgba(0, 0, 0, .26) !important;
  border-color: var(--color-accent, #6aa9ff) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(106, 169, 255, .18) !important;
}

html body .main-col .post-card .captcha-img,
.card-comment-form .captcha-img {
  flex: 0 0 auto !important;
  width: 120px !important;
  height: 40px !important;
  border-radius: 6px !important;
  object-fit: cover;
}
@media (max-width: 640px) {
  html body .main-col .post-card .captcha-img { width: 96px !important; height: 36px !important; }
}

/* ── ③ 按钮层次：主按钮实心，次按钮描边 ── */
html[data-theme="dark"] body[class=""] .comment-form .btn:not(.btn-ghost),
html[data-theme="dark"] body[class=""] .card-comment-form .btn:not(.btn-ghost) {
  background: var(--color-accent, #6aa9ff) !important;
  background-image: none !important;
  border: 1px solid var(--color-accent, #6aa9ff) !important;
  color: #10161d !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body[class=""] .comment-form .btn:not(.btn-ghost):hover,
html[data-theme="dark"] body[class=""] .card-comment-form .btn:not(.btn-ghost):hover {
  background: var(--color-accent-hover, #8cbcff) !important;
  border-color: var(--color-accent-hover, #8cbcff) !important;
}
html[data-theme="dark"] body[class=""] .comment-form .btn-ghost,
html[data-theme="dark"] body[class=""] .card-comment-form .btn-ghost {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  color: var(--color-text, #e9eef4) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body[class=""] .comment-form .btn-ghost:hover,
html[data-theme="dark"] body[class=""] .card-comment-form .btn-ghost:hover {
  background: rgba(255, 255, 255, .08) !important;
  border-color: rgba(255, 255, 255, .32) !important;
}


.post .captcha-img, .comment-form .captcha-img {
  flex: 0 0 auto !important; width: 160px !important; height: 56px !important; }
.post .captcha-area input.form-input, .comment-form .captcha-area input.form-input {
  flex: 1 1 auto !important; width: auto !important; height: 56px !important; }

@media (max-width: 640px) {
  html body .main-col .post-card .captcha-img, .post .captcha-img { width: 120px !important; height: 44px !important; }
  html body .main-col .post-card .captcha-area input.form-input,
  .post .captcha-area input.form-input { height: 44px !important; }
}


/* 输入的占位文字居中且不模糊 */
html[data-theme="dark"] body[class=""] .captcha-area input.form-input::placeholder {
  letter-spacing: normal !important;
  font-size: .95rem !important;
}
@media (max-width: 640px) {
  html body .main-col .post-card .captcha-area input.form-input,
  .post .captcha-area input.form-input {
    width: 104px !important; max-width: 104px !important; height: 44px !important;
  }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 强调色修正（2026-10-09 01:5x）                                       ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："发布为啥是那么亮的蓝？原来的方案是什么"                     ║
   ║                                                                      ║
   ║ 查明：                                                               ║
   ║   原方案（备份 style.css:606）就是「实心强调色 + 反色文字」：         ║
   ║       .btn { color: var(--color-surface); background: var(--color-accent); } ║
   ║   原强调色 = #0066cc（中深蓝，配白字，对比度 4.77 ✓）。               ║
   ║                                                                      ║
   ║   我今晚重定义深色变量时把 --color-accent 改成了 #6aa9ff（亮蓝），     ║
   ║   又给按钮配了深色文字 → 变成"亮蓝底 + 黑字"，与原来完全相反，        ║
   ║   且亮蓝在整站克制的灰蓝调里非常突兀。                                ║
   ║                                                                      ║
   ║ 实测对比度（深色卡片 #4e5b68）：                                      ║
   ║   #0066cc 对卡片 1.25（几乎融入背景，故当初确需提亮，方向没错）      ║
   ║   #6aa9ff 对卡片 2.89（过亮、抢眼，即用户所见）                       ║
   ║   #3d7fc4 对卡片 1.67 / 配白字 3.58 → 区分度够、不刺眼               ║
   ║                                                                      ║
   ║ 修正：深色强调色取 #3d7fc4 一档（介于原始与我的亮蓝之间），           ║
   ║       按钮**回归原方案**：实心强调色 + 白色文字。                     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* 按钮回归原方案：实心强调色 + 白字（不是亮蓝底黑字） */
html[data-theme="dark"] body[class=""] .comment-form .btn:not(.btn-ghost),
html[data-theme="dark"] body[class=""] .card-comment-form .btn:not(.btn-ghost),
html[data-theme="dark"] body[class=""] .btn:not(.btn-ghost) {
  background: var(--color-accent, #3d7fc4) !important;
  background-image: none !important;
  border: 1px solid var(--color-accent, #3d7fc4) !important;
  color: #ffffff !important;        /* 白字（原方案） */
  font-weight: 500 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body[class=""] .comment-form .btn:not(.btn-ghost):hover,
html[data-theme="dark"] body[class=""] .card-comment-form .btn:not(.btn-ghost):hover,
html[data-theme="dark"] body[class=""] .btn:not(.btn-ghost):hover {
  background: var(--color-accent-hover, #4a8fd6) !important;
  border-color: var(--color-accent-hover, #4a8fd6) !important;
  color: #ffffff !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 输入控件底色统一（2026-10-09 02:0x）                                 ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："留言的大黑框还在不协调啊"                                  ║
   ║                                                                      ║
   ║ 实测（像素采样）：                                                    ║
   ║   卡片底色  ( 84, 97,109)                                            ║
   ║   输入框内  ( 41, 48, 57)   ← 暗 43 级，成了两个"黑洞"               ║
   ║                                                                      ║
   ║ 根因：本文件有 15+ 处**硬编码**深色（#0f1114 / #212830），            ║
   ║       它们是早期为更暗的卡片（#57646f 及以下）配的；                  ║
   ║       后来卡片整体调亮（现为 #5b6874→#4e5b68），这些值没跟着变，      ║
   ║       CDP 实测有 4 条规则同时作用于同一输入框，叠出近黑色。            ║
   ║                                                                      ║
   ║ 做法：定义单一变量 --input-bg，用**最高特异性 + !important**           ║
   ║       统一覆盖所有输入控件的底色；今后卡片再调，只需改这一个值。       ║
   ║       取值原则：比卡片底色**略深一档**（形成凹陷感），而非深一大截。   ║
   ║       卡片暗端 #4e5b68 → 输入框取 rgba(0,0,0,.10)，实测约暗 8–10 级。  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] body[class=""] input.form-input,
html[data-theme="dark"] body[class=""] textarea.form-input,
html[data-theme="dark"] body[class=""] select.form-input,
html[data-theme="dark"] body[class=""] .comment-form .form-input,
html[data-theme="dark"] body[class=""] .card-comment-form .form-input,
html[data-theme="dark"] body[class=""] .card-comment-panel input:not([type="hidden"]):not([type="submit"]):not([type="checkbox"]),
html[data-theme="dark"] body[class=""] .card-comment-panel textarea,
html[data-theme="dark"] body[class=""] .comment-form input:not([type="hidden"]):not([type="submit"]),
html[data-theme="dark"] body[class=""] .comment-form textarea {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  background-image: none !important;
  border: 1px solid var(--input-border) !important;
  color: var(--color-text, #e9eef4) !important;
}
html[data-theme="dark"] body[class=""] input.form-input::placeholder,
html[data-theme="dark"] body[class=""] textarea.form-input::placeholder,
html[data-theme="dark"] body[class=""] .card-comment-panel input::placeholder,
html[data-theme="dark"] body[class=""] .card-comment-panel textarea::placeholder {
  color: var(--color-text-muted, #8d99a6) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] body[class=""] input.form-input:focus,
html[data-theme="dark"] body[class=""] textarea.form-input:focus,
html[data-theme="dark"] body[class=""] .card-comment-panel input:focus,
html[data-theme="dark"] body[class=""] .card-comment-panel textarea:focus {
  background: var(--input-bg-focus) !important;
  background-color: var(--input-bg-focus) !important;
  border-color: var(--color-accent, #3d7fc4) !important;
  box-shadow: 0 0 0 3px rgba(61, 127, 196, .20) !important;
  outline: none !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 输入框 & 验证码 · 最终协调（2026-10-09 02:2x）                       ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈：                                                           ║
   ║   "你太夸张了吧，这么大，要协调啊，跟整个风格站点大小"                ║
   ║   "还有黑框改成上面代码那个灰，统一色调"                              ║
   ║                                                                      ║
   ║ ① 色调统一：以**代码块**为基准（实测 rgba(0,0,0,.18) 底 +           ║
   ║    rgba(255,255,255,.1) 边），输入框改用同一组值，                  ║
   ║    使"可输入区域"在全站呈现一致的灰调。                              ║
   ║ ② 尺寸收敛：验证码上一版放大到 160x64，在深色页面里像一块白补丁，     ║
   ║    与整站克制的比例不符。改为 132x44（贴近输入框 40px 高），         ║
   ║    字号自动适配（后端已按画布自动求最大字号，无需改代码）。           ║
   ║ ③ 白底刺眼：验证码图片底色由 #f5f5f5 改为柔和的 #eceff3，            ║
   ║    并加圆角与描边，使其融入深色卡片而非"贴上去"。                    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* 合并：4 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html[data-theme="dark"] {
  --color-text: #e9eef4;
  --card-bg-solid: #4e5b68;
  --fade-mask-h: 100px;
  --color-text-secondary: #b6c1cd;
  --color-text-muted: #8d99a6;
  --color-bg: #343d49;
  --color-surface: #4e5b68;
  --color-accent: #3d7fc4;
  --color-accent-hover: #4a8fd6;
  --color-border: rgba(255, 255, 255, .12);
  --color-border-hover: rgba(255, 255, 255, .22);
  --color-danger: #ff7b72;
  --color-danger-hover: #ff9a92;
  --color-success: #56d364;
  --color-success-bg: rgba(86, 211, 100, .10);
  --color-success-border: rgba(86, 211, 100, .28);
  --color-error-bg: rgba(255, 123, 114, .10);
  --color-error-border: rgba(255, 123, 114, .28);
  --color-info-bg: rgba(106, 169, 255, .10);
  --color-info-border: rgba(106, 169, 255, .28);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .34);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .40);
  --input-bg: rgba(0, 0, 0, .18);
  --input-bg-focus: rgba(0, 0, 0, .24);
  --input-border: rgba(255, 255, 255, .10);
}

/* ── 验证码：尺寸收敛 + 融入深色卡片 ── */
html body .main-col .post-card .captcha-img,
.post-card .captcha-img,
.card-comment-form .captcha-img,
.post .captcha-img,
.comment-form .captcha-img {
  width: 132px !important;
  height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid var(--input-border, rgba(255,255,255,.10)) !important;
  object-fit: cover !important;
  background: #eceff3 !important;
  display: block !important;
}
/* 验证码输入框：与图片等高的窄框 */
html body .main-col .post-card .captcha-area input.form-input,
.post-card .captcha-area input.form-input,
.card-comment-form .captcha-area input.form-input,
.captcha-area .form-input,
.post .captcha-area input.form-input,
.comment-form .captcha-area input.form-input {
  width: 108px !important;
  max-width: 108px !important;
  flex: 0 0 auto !important;
  height: 44px !important;
  font-size: 1rem !important;
  text-align: center !important;
  letter-spacing: .14em !important;
}
/* 验证码区整体左对齐、间距紧凑 */
html body .main-col .post-card .captcha-area,
.post-card .captcha-area,
.card-comment-form .captcha-area,
.post .captcha-area,
.comment-form .captcha-area {
  gap: 10px !important;
  align-items: center !important;
}
@media (max-width: 640px) {
  html body .main-col .post-card .captcha-img, .post .captcha-img { width: 112px !important; height: 40px !important; }
  html body .main-col .post-card .captcha-area input.form-input,
  .post .captcha-area input.form-input { width: 92px !important; max-width: 92px !important; height: 40px !important; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 作者头像 · 色调统一（2026-10-09 02:3x）                              ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："我的头像框为啥就变成一个很黑的块？"                        ║
   ║                                                                      ║
   ║ 实测：                                                               ║
   ║   头像渐变  rgb(74,86,99) → rgb(51,60,71)   ← 偏暗                  ║
   ║   卡片底色  rgb(91,104,116) → rgb(78,91,104) ← 已调亮               ║
   ║   → 头像比卡片暗 17~27 级，再加 0 8px 22px rgba(0,0,0,.45) 重投影，   ║
   ║     视觉上就是一个"黑块"。                                           ║
   ║                                                                      ║
   ║ 原因：头像用的是**独立硬编码深色**，我今晚把卡片整体调亮（第 10 条：   ║
   ║   深色顶部提亮）时它没跟着变 —— 属连带影响，非独立问题。              ║
   ║                                                                      ║
   ║ 修正：头像渐变改为与卡片同族、**略亮**（体现"浮起"而非"凹陷"），      ║
   ║       投影减弱为柔和一层，与全站单层阴影规范一致。                    ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* ⚠️ 2026-10-15 修：本条原先把 .author-avatar 也写在选择器组里，
   并用 !important 把它的 box-shadow 压成**单层柔投影**
   `0 2px 10px rgba(0,0,0,.28)`。
   实测深色下头像下方只比卡片底暗 5 级（L93 vs L98）→ 完全看不出投影。
   立体感依赖多层投影（接触影/主影/远影），单层在深色底上被吃掉。
   现把 .author-avatar 移出本组（保留 fallback 与 avatar-placeholder ——
   它们是纯色圆，单层阴影足够），头像投影交给下面那条 5 层规则。 */
html[data-theme="dark"] body[class=""] .author-avatar-fallback,
html[data-theme="dark"] body[class=""] .avatar-placeholder {
  background: linear-gradient(160deg, #8b97a5, #6f7c8a) !important;  /* 比卡片略亮 */
  color: #f2f6fa !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .18),
    0 2px 10px rgba(0, 0, 0, .28) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
}

/* 深色：头像的**独立 5 层投影** —— 深色底会吃掉 alpha，故用纯黑 + 更高不透明度。
   方向仍与光源一致（左上光 → 右下影），全部负 spread 保持"贴边下拖"的形状。 */
/* ══════════════════════════════════════════════════════════════════════
   深色主题 · 作者头像（2026-10-16）

   为什么深色要单独一套：
     · **投影**：深色底本身就暗，同样的 alpha 被吃掉大半。
       实测浅色的 rgba(16,24,40,.10~.26) 在深色底上几乎看不出，
       故换纯黑 + 更高不透明度。
     · **玻璃层**：深色底上如果沿用浅色的冷灰蓝，环带会发脏、发灰。
       改为**暖白**（偏奶油色的高光），并整体降低 alpha ——
       因为在深底上同样的白会更"跳"。
     · **外缘侧壁**：深色下左上受光的白要更强，右下的暗要更实，
       否则圆盘会"糊"进背景、失去厚度。
   ══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body[class=""] .author-avatar {
  /* 2026-10-16：与浅色同步加大。
     实测深色头像下方 L=93、卡片底 L=111 —— 只暗 18 级（比浅色更平），
     因为深色底本就暗、alpha 被吃掉。故用纯黑 + 更高不透明度 + 更长扩散。 */
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, .16),
    0 1px 4px 1px rgba(0, 0, 0, .50),
    0 3px 8px -1px rgba(0, 0, 0, .55),
    2px 7px 16px -3px rgba(0, 0, 0, .58),
    4px 14px 30px -6px rgba(0, 0, 0, .54),
    9px 26px 52px -12px rgba(0, 0, 0, .46),
    18px 44px 88px -20px rgba(0, 0, 0, .36),
    28px 66px 128px -32px rgba(0, 0, 0, .26);
}

/* 深色玻璃层：暖白高光 + 更克制的 alpha */
html[data-theme="dark"] body[class=""] .author-avatar::before {
  background:
    conic-gradient(from 0deg,
      rgba(255, 250, 240, .16)   0deg,   /* 上 */
      rgba(250, 244, 232, .09)  35deg,
      rgba(200, 194, 182, .13)  90deg,   /* 右 */
      rgba(150, 146, 140, .20) 135deg,   /* 右下：最暗 */
      rgba(178, 172, 162, .17) 180deg,   /* 下 */
      rgba(232, 224, 210, .11) 220deg,
      rgba(255, 253, 246, .28) 270deg,   /* 左 */
      rgba(255, 252, 242, .50) 315deg,   /* ★ 左上：最亮（暖白） */
      rgba(255, 251, 240, .32) 340deg,
      rgba(255, 250, 240, .16) 360deg),
    radial-gradient(circle closest-side,
      rgba(255, 255, 255, 0)     0%,
      rgba(255, 255, 255, 0)    86%,
      rgba(255, 250, 242, .05)  88.5%,
      rgba(255, 250, 242, .09)  91%,
      rgba(255, 252, 245, .13)  93.5%,
      rgba(255, 253, 248, .18)  95.5%,
      rgba(255, 253, 248, .24)  97.5%,
      rgba(255, 254, 250, .34)  99%,
      rgba(250, 246, 238, .17)  99.6%,
      rgba(232, 226, 214, .05)  99.9%,
      rgba(220, 214, 202, 0)   100%),
    radial-gradient(ellipse 48% 32% at 58% 98%,
      rgba(255, 238, 208, .22) 0%,
      rgba(255, 245, 226, .09) 44%,
      rgba(255, 255, 255, 0)  76%);
}

/* 深色外缘侧壁：左上白更亮、右下暗更实 → 圆盘有厚度、不糊进背景 */
html[data-theme="dark"] body[class=""] .author-avatar::after {
  box-shadow:
    inset 1.5px 1.5px 2px -1px rgba(255, 252, 244, .55),
    inset -1.5px -1.5px 2.5px -1px rgba(0, 0, 0, .55),
    inset 0 0 1px rgba(255, 255, 255, .22);
}
/* 头像内若有 img，去掉可能存在的暗底 */
html[data-theme="dark"] body[class=""] .author-avatar img {
  background: transparent !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 留言表单容器 · 色调统一（2026-10-09 02:4x）                          ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："留言的大黑框还在不协调"（附图：包住输入区的外层深色盒）     ║
   ║                                                                      ║
   ║ 实测定位：罪魁是 **<form> 容器本身**，不是输入框：                    ║
   ║   FORM.card-comment-form  bg = rgb(51,60,71)                         ║
   ║   卡片底色              = rgb(91,104,116) → rgb(78,91,104)           ║
   ║   → 表单容器比卡片暗 27~40 级，整块像嵌进去的黑盒。                   ║
   ║                                                                      ║
   ║ 原因：该值同样是为更暗的旧卡片配的，卡片调亮后未同步（连带影响）。     ║
   ║                                                                      ║
   ║ 修正：容器底色改为与**代码块同族的半透明压暗**（rgba(0,0,0,.10)），   ║
   ║       比输入框（.18）略浅，形成"容器 < 输入框"的层次；                ║
   ║       既与卡片协调，又保持输入区可辨识。                              ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] body[class=""] .card-comment-form,
html[data-theme="dark"] body[class=""] form.card-comment-form,
html[data-theme="dark"] body[class=""] .comment-form {
  background: rgba(0, 0, 0, .10) !important;
  background-color: rgba(0, 0, 0, .10) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-radius: 14px !important;
}
/* 隐藏的辅助 input（旧值 rgb(33,40,48) 残留）不再显示深色 */
html[data-theme="dark"] body[class=""] .card-comment-form input[type="hidden"],
html[data-theme="dark"] body[class=""] .comment-form input[type="hidden"] {
  background: transparent !important;
  border: none !important;
}
/* 详情页的留言表单同样处理 */
html[data-theme="dark"] body[class=""] .post .comment-form,
html[data-theme="dark"] body[class=""] .post form[action*="/comment"] {
  background: rgba(0, 0, 0, .10) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}


/* ── 验证码尺寸：与「收起全文」按钮同量级（2026-10-09 02:5x）──────────────
   用户明确要求："给我换成我框的大小"
   参照实测：.post-content-toggle（收起全文）= 90x38
   用户框选比例约 3.6:1 → 取 120x34，与按钮同高、略宽。
   后端画布同步改为 120x34，字号仍由"自适应最大字号"填满，保证小图里字也清楚。 */
html body .main-col .post-card .captcha-img,
.post-card .captcha-img,
.card-comment-form .captcha-img,
.post .captcha-img,
.comment-form .captcha-img {
  width: 120px !important;
  height: 34px !important;
  border-radius: 5px !important;
  object-fit: cover !important;
}
html body .main-col .post-card .captcha-area,
.post-card .captcha-area,
.card-comment-form .captcha-area,
.post .captcha-area,
.comment-form .captcha-area {
  gap: 8px !important;
  align-items: center !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 发布按钮 · 改为暗色（2026-10-09 03:0x）                              ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户要求："发布给我改颜色" → "不要亮！！！"                          ║
   ║                                                                      ║
   ║ 原状态：rgb(61,127,196) 中亮蓝实心 —— 在灰蓝调站点里突兀、刺眼。     ║
   ║                                                                      ║
   ║ 改法：不引入鲜艳色，改用**与卡片同族的暗灰蓝**，靠"比卡片略亮一档 +   ║
   ║       白色文字 + 清晰描边"来体现主操作地位，而非靠高饱和底色。        ║
   ║       与整站（卡片、侧栏、输入框）保持同一色相，仅明度分层：          ║
   ║         输入框 rgba(0,0,0,.18)  <  卡片渐变  <  发布按钮             ║
   ║       取值 #46525f：比卡片暗端(#4e5b68)略暗、比输入框略亮，           ║
   ║       配白字对比度约 6.5:1（远超 WCAG AA 的 4.5）。                   ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
html[data-theme="dark"] body[class=""] .comment-form .btn:not(.btn-ghost),
html[data-theme="dark"] body[class=""] .card-comment-form .btn:not(.btn-ghost),
html[data-theme="dark"] body[class=""] .btn:not(.btn-ghost) {
  background: #46525f !important;          /* 暗灰蓝，与卡片同族 */
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  color: #f2f6fa !important;               /* 白字，保证对比 */
  font-weight: 500 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body[class=""] .comment-form .btn:not(.btn-ghost):hover,
html[data-theme="dark"] body[class=""] .card-comment-form .btn:not(.btn-ghost):hover,
html[data-theme="dark"] body[class=""] .btn:not(.btn-ghost):hover {
  background: #52606e !important;          /* 悬停仅微亮，仍属暗色 */
  border-color: rgba(255, 255, 255, .26) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body[class=""] .comment-form .btn:not(.btn-ghost):active,
html[data-theme="dark"] body[class=""] .card-comment-form .btn:not(.btn-ghost):active {
  background: #3c4753 !important;          /* 按下略暗 */
}
/* 「取消」与「发布」拉开层级：取消更弱（透明 + 更淡描边） */
html[data-theme="dark"] body[class=""] .comment-form .btn-ghost,
html[data-theme="dark"] body[class=""] .card-comment-form .btn-ghost {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  color: var(--color-text-secondary, #b6c1cd) !important;
}
html[data-theme="dark"] body[class=""] .comment-form .btn-ghost:hover,
html[data-theme="dark"] body[class=""] .card-comment-form .btn-ghost:hover {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .24) !important;
  color: var(--color-text, #e9eef4) !important;
}


/* ── 验证码输入框：占位文字不再被截断（2026-10-09 03:1x）──────────────────
   用户附图：占位文字"输入验证码"在窄框里被切掉半截。
   原因：框宽 92px，减去左右 padding 放不下 5 个汉字。
   修法：占位文字改为"验证码"（模板已同步改），框宽略放宽到 104px，
         并给 placeholder 单独设定较小字号，确保完整显示。 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
html body .main-col .post-card .captcha-area input.form-input,
.post-card .captcha-area input.form-input,
.card-comment-form .captcha-area input.form-input,
.captcha-area .form-input,
.post .captcha-area input.form-input,
.comment-form .captcha-area input.form-input {
  width: 104px !important;
  max-width: 104px !important;
  height: 34px !important;
  font-size: .92rem !important;
  flex: 0 0 auto !important;
  padding: 0 8px !important;
}
html body .main-col .post-card .captcha-area input.form-input::placeholder,
.post-card .captcha-area input.form-input::placeholder,
.captcha-area .form-input::placeholder,
.post .captcha-area input.form-input::placeholder {
  font-size: .85rem !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 代码块语法高亮 · Pygments（2026-10-09 生成）                         ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 生成方式：HtmlFormatter(style=...).get_style_defs('.highlight')       ║
   ║   浅色 = friendly 风格                                               ║
   ║   深色 = monokai 风格（**背景已强制 transparent**）                   ║
   ║                                                                      ║
   ║ 为什么深色背景必须透明：                                              ║
   ║   monokai 自带不透明底 #272822，会覆盖已有的 rgba(0,0,0,.18) 半透明   ║
   ║   代码块底 —— 那样代码块会重新变回用户明确否掉的"黑框"。               ║
   ║   故只取 monokai 的 **token 前景色**，底色继续沿用卡片同族的半透明灰。 ║
   ║                                                                      ║
   ║ 重新生成：tools/gen_pygments_css.py                                   ║
   ║   （下列 BEGIN/END 之间的内容全部由该脚本生成，**不要手改**）          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ==== PYGMENTS-GENERATED-BEGIN 由 tools/gen_pygments_css.py 生成，勿手改 ==== */
/* 浅色：friendly 风格的 token 前景色，底色 transparent */
.highlight .hll { background-color: #ffffcc }
.highlight { background: transparent; color: #24292f; }
.highlight .c { color: #60A0B0; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #F00 } /* Error */
.highlight .k { color: #007020; font-weight: bold } /* Keyword */
.highlight .o { color: #666 } /* Operator */
.highlight .ch { color: #60A0B0; font-style: italic } /* Comment.Hashbang */
.highlight .cm { color: #60A0B0; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #007020 } /* Comment.Preproc */
.highlight .cpf { color: #60A0B0; font-style: italic } /* Comment.PreprocFile */
.highlight .c1 { color: #60A0B0; font-style: italic } /* Comment.Single */
.highlight .cs { color: #60A0B0; background-color: #FFF0F0 } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.highlight .gr { color: #F00 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888 } /* Generic.Output */
.highlight .gp { color: #C65D09; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #04D } /* Generic.Traceback */
.highlight .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #007020 } /* Keyword.Pseudo */
.highlight .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #902000 } /* Keyword.Type */
.highlight .m { color: #40A070 } /* Literal.Number */
.highlight .s { color: #4070A0 } /* Literal.String */
.highlight .na { color: #4070A0 } /* Name.Attribute */
.highlight .nb { color: #007020 } /* Name.Builtin */
.highlight .nc { color: #0E84B5; font-weight: bold } /* Name.Class */
.highlight .no { color: #60ADD5 } /* Name.Constant */
.highlight .nd { color: #555; font-weight: bold } /* Name.Decorator */
.highlight .ni { color: #D55537; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #007020 } /* Name.Exception */
.highlight .nf { color: #06287E } /* Name.Function */
.highlight .nl { color: #002070; font-weight: bold } /* Name.Label */
.highlight .nn { color: #0E84B5; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #062873; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #BB60D5 } /* Name.Variable */
.highlight .ow { color: #007020; font-weight: bold } /* Operator.Word */
.highlight .w { color: #BBB } /* Text.Whitespace */
.highlight .mb { color: #40A070 } /* Literal.Number.Bin */
.highlight .mf { color: #40A070 } /* Literal.Number.Float */
.highlight .mh { color: #40A070 } /* Literal.Number.Hex */
.highlight .mi { color: #40A070 } /* Literal.Number.Integer */
.highlight .mo { color: #40A070 } /* Literal.Number.Oct */
.highlight .sa { color: #4070A0 } /* Literal.String.Affix */
.highlight .sb { color: #4070A0 } /* Literal.String.Backtick */
.highlight .sc { color: #4070A0 } /* Literal.String.Char */
.highlight .dl { color: #4070A0 } /* Literal.String.Delimiter */
.highlight .sd { color: #4070A0; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #4070A0 } /* Literal.String.Double */
.highlight .se { color: #4070A0; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #4070A0 } /* Literal.String.Heredoc */
.highlight .si { color: #70A0D0; font-style: italic } /* Literal.String.Interpol */
.highlight .sx { color: #C65D09 } /* Literal.String.Other */
.highlight .sr { color: #235388 } /* Literal.String.Regex */
.highlight .s1 { color: #4070A0 } /* Literal.String.Single */
.highlight .ss { color: #517918 } /* Literal.String.Symbol */
.highlight .bp { color: #007020 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #06287E } /* Name.Function.Magic */
.highlight .vc { color: #BB60D5 } /* Name.Variable.Class */
.highlight .vg { color: #BB60D5 } /* Name.Variable.Global */
.highlight .vi { color: #BB60D5 } /* Name.Variable.Instance */
.highlight .vm { color: #BB60D5 } /* Name.Variable.Magic */
.highlight .il { color: #40A070 } /* Literal.Number.Integer.Long */

/* 深色：monokai 风格的 token 前景色，底色 transparent */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
pre {
  line-height: 125%;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
td.linenos .normal {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
span.linenos {
  color: inherit;
  background-color: transparent;
  padding-left: 5px;
  padding-right: 5px;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
td.linenos .special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
span.linenos.special {
  color: #000000;
  background-color: #ffffc0;
  padding-left: 5px;
  padding-right: 5px;
}
html[data-theme="dark"] .highlight .hll { background-color: #49483e }
html[data-theme="dark"] .highlight { background: transparent; color: #dfe6ee }
html[data-theme="dark"] .highlight .c { color: #959077 } /* Comment */
html[data-theme="dark"] .highlight .err { color: #ED007E; background-color: #1E0010 } /* Error */
html[data-theme="dark"] .highlight .esc { color: #F8F8F2 } /* Escape */
html[data-theme="dark"] .highlight .g { color: #F8F8F2 } /* Generic */
html[data-theme="dark"] .highlight .k { color: #66D9EF } /* Keyword */
html[data-theme="dark"] .highlight .l { color: #AE81FF } /* Literal */
html[data-theme="dark"] .highlight .n { color: #F8F8F2 } /* Name */
html[data-theme="dark"] .highlight .o { color: #FF4689 } /* Operator */
html[data-theme="dark"] .highlight .x { color: #F8F8F2 } /* Other */
html[data-theme="dark"] .highlight .p { color: #F8F8F2 } /* Punctuation */
html[data-theme="dark"] .highlight .ch { color: #959077 } /* Comment.Hashbang */
html[data-theme="dark"] .highlight .cm { color: #959077 } /* Comment.Multiline */
html[data-theme="dark"] .highlight .cp { color: #959077 } /* Comment.Preproc */
html[data-theme="dark"] .highlight .cpf { color: #959077 } /* Comment.PreprocFile */
html[data-theme="dark"] .highlight .c1 { color: #959077 } /* Comment.Single */
html[data-theme="dark"] .highlight .cs { color: #959077 } /* Comment.Special */
html[data-theme="dark"] .highlight .gd { color: #FF4689 } /* Generic.Deleted */
html[data-theme="dark"] .highlight .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
html[data-theme="dark"] .highlight .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
html[data-theme="dark"] .highlight .gr { color: #FF4689 } /* Generic.Error */
html[data-theme="dark"] .highlight .gh { color: #F8F8F2 } /* Generic.Heading */
html[data-theme="dark"] .highlight .gi { color: #A6E22E } /* Generic.Inserted */
html[data-theme="dark"] .highlight .go { color: #66D9EF } /* Generic.Output */
html[data-theme="dark"] .highlight .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
html[data-theme="dark"] .highlight .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
html[data-theme="dark"] .highlight .gu { color: #959077 } /* Generic.Subheading */
html[data-theme="dark"] .highlight .gt { color: #66D9EF } /* Generic.Traceback */
html[data-theme="dark"] .highlight .kc { color: #66D9EF } /* Keyword.Constant */
html[data-theme="dark"] .highlight .kd { color: #66D9EF } /* Keyword.Declaration */
html[data-theme="dark"] .highlight .kn { color: #FF4689 } /* Keyword.Namespace */
html[data-theme="dark"] .highlight .kp { color: #66D9EF } /* Keyword.Pseudo */
html[data-theme="dark"] .highlight .kr { color: #66D9EF } /* Keyword.Reserved */
html[data-theme="dark"] .highlight .kt { color: #66D9EF } /* Keyword.Type */
html[data-theme="dark"] .highlight .ld { color: #E6DB74 } /* Literal.Date */
html[data-theme="dark"] .highlight .m { color: #AE81FF } /* Literal.Number */
html[data-theme="dark"] .highlight .s { color: #E6DB74 } /* Literal.String */
html[data-theme="dark"] .highlight .na { color: #A6E22E } /* Name.Attribute */
html[data-theme="dark"] .highlight .nb { color: #A6E22E } /* Name.Builtin */
html[data-theme="dark"] .highlight .nc { color: #A6E22E } /* Name.Class */
html[data-theme="dark"] .highlight .no { color: #66D9EF } /* Name.Constant */
html[data-theme="dark"] .highlight .nd { color: #A6E22E } /* Name.Decorator */
html[data-theme="dark"] .highlight .ni { color: #F8F8F2 } /* Name.Entity */
html[data-theme="dark"] .highlight .ne { color: #A6E22E } /* Name.Exception */
html[data-theme="dark"] .highlight .nf { color: #A6E22E } /* Name.Function */
html[data-theme="dark"] .highlight .nl { color: #F8F8F2 } /* Name.Label */
html[data-theme="dark"] .highlight .nn { color: #F8F8F2 } /* Name.Namespace */
html[data-theme="dark"] .highlight .nx { color: #A6E22E } /* Name.Other */
html[data-theme="dark"] .highlight .py { color: #F8F8F2 } /* Name.Property */
html[data-theme="dark"] .highlight .nt { color: #FF4689 } /* Name.Tag */
html[data-theme="dark"] .highlight .nv { color: #F8F8F2 } /* Name.Variable */
html[data-theme="dark"] .highlight .ow { color: #FF4689 } /* Operator.Word */
html[data-theme="dark"] .highlight .pm { color: #F8F8F2 } /* Punctuation.Marker */
html[data-theme="dark"] .highlight .w { color: #F8F8F2 } /* Text.Whitespace */
html[data-theme="dark"] .highlight .mb { color: #AE81FF } /* Literal.Number.Bin */
html[data-theme="dark"] .highlight .mf { color: #AE81FF } /* Literal.Number.Float */
html[data-theme="dark"] .highlight .mh { color: #AE81FF } /* Literal.Number.Hex */
html[data-theme="dark"] .highlight .mi { color: #AE81FF } /* Literal.Number.Integer */
html[data-theme="dark"] .highlight .mo { color: #AE81FF } /* Literal.Number.Oct */
html[data-theme="dark"] .highlight .sa { color: #E6DB74 } /* Literal.String.Affix */
html[data-theme="dark"] .highlight .sb { color: #E6DB74 } /* Literal.String.Backtick */
html[data-theme="dark"] .highlight .sc { color: #E6DB74 } /* Literal.String.Char */
html[data-theme="dark"] .highlight .dl { color: #E6DB74 } /* Literal.String.Delimiter */
html[data-theme="dark"] .highlight .sd { color: #E6DB74 } /* Literal.String.Doc */
html[data-theme="dark"] .highlight .s2 { color: #E6DB74 } /* Literal.String.Double */
html[data-theme="dark"] .highlight .se { color: #AE81FF } /* Literal.String.Escape */
html[data-theme="dark"] .highlight .sh { color: #E6DB74 } /* Literal.String.Heredoc */
html[data-theme="dark"] .highlight .si { color: #E6DB74 } /* Literal.String.Interpol */
html[data-theme="dark"] .highlight .sx { color: #E6DB74 } /* Literal.String.Other */
html[data-theme="dark"] .highlight .sr { color: #E6DB74 } /* Literal.String.Regex */
html[data-theme="dark"] .highlight .s1 { color: #E6DB74 } /* Literal.String.Single */
html[data-theme="dark"] .highlight .ss { color: #E6DB74 } /* Literal.String.Symbol */
html[data-theme="dark"] .highlight .bp { color: #A6E22E } /* Name.Builtin.Pseudo */
html[data-theme="dark"] .highlight .fm { color: #A6E22E } /* Name.Function.Magic */
html[data-theme="dark"] .highlight .vc { color: #F8F8F2 } /* Name.Variable.Class */
html[data-theme="dark"] .highlight .vg { color: #F8F8F2 } /* Name.Variable.Global */
html[data-theme="dark"] .highlight .vi { color: #F8F8F2 } /* Name.Variable.Instance */
html[data-theme="dark"] .highlight .vm { color: #F8F8F2 } /* Name.Variable.Magic */
html[data-theme="dark"] .highlight .il { color: #AE81FF } /* Literal.Number.Integer.Long */
/* ==== PYGMENTS-GENERATED-END ==== */


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 修复四连（2026-10-09 13:0x，用户附图反馈）                          ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ ① 详情页正文"又白了"                                                 ║
   ║    实测：.post-body-content = rgba(255,255,255,.28)                  ║
   ║    根因：所有深色修正规则都写成 `... .post-card .post-body-content`， ║
   ║          **而详情页的容器是 `.post`，不是 `.post-card`** →           ║
   ║          详情页从未被覆盖，浅色主题的 28% 白底一直生效。              ║
   ║    修法：补上 `.post` 分支（首页 .post-card 与详情页 .post 同时覆盖）。║
   ║                                                                      ║
   ║ ② 验证码图留白太多                                                   ║
   ║    实测画布 120x34 中，墨迹仅占约 40x13 → 左右各留 ~40px 空白。       ║
   ║    修法：画布宽度收到 104px（后端），并让输入框同步收窄。             ║
   ║                                                                      ║
   ║ ③ 「提交留言」与验证码挤在一起                                       ║
   ║    根因：详情页模板里 <button> 紧跟在 .captcha-area 之后，            ║
   ║          而 .captcha-area 已是 flex 行 → 按钮被吸附到验证码右侧。     ║
   ║    修法：给按钮加 display:block + margin-top，回到独立一行。          ║
   ║                                                                      ║
   ║ ④ 按钮文字不统一（首页"发布" vs 详情页"提交留言"）                    ║
   ║    修法：模板统一为「发布」。                                         ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ── ① 详情页（.post）与首页（.post-card）统一处理正文区背景 ── */
html[data-theme="dark"] body[class=""] .post .post-body-content,
html[data-theme="dark"] body[class=""] .post .post-preview,
html[data-theme="dark"] body[class=""] .post .post-content-full,
html[data-theme="dark"] body[class=""] .post .excerpt,
html[data-theme="dark"] body[class=""] .post .post-body {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
/* 浅色主题下详情页也保持一致（首页 .post-card 已是透明） */
html body .main-col .post .post-body-content {
  background: transparent;
}

/* ── ③ 提交按钮独占一行，不再与验证码并排 ── */
html body .main-col .post .captcha-area + .btn,
html body .main-col .post form .btn[type="submit"],
.post .captcha-area + .btn,
.post form button[type="submit"] {
  display: inline-flex !important;
  margin-top: 14px !important;
  margin-left: 0 !important;
}
/* 验证码区本身占满一行，其后的按钮自然换行 */
html body .main-col .post .captcha-area,
.post .captcha-area {
  width: 100% !important;
  flex: 1 1 100% !important;
}

/* ── ② 验证码：收窄留白 ── */
html body .main-col .post .captcha-img,
html body .main-col .post-card .captcha-img,
.post .captcha-img,
.post-card .captcha-img,
.card-comment-form .captcha-img {
  width: 88px !important;
  height: 34px !important;
}
html body .main-col .post .captcha-area input.form-input,
html body .main-col .post-card .captcha-area input.form-input,
.post .captcha-area input.form-input,
.post-card .captcha-area input.form-input {
  width: 88px !important;
  max-width: 88px !important;
  height: 34px !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 浅色主题：留言表单按钮去蓝色，与站内常规按钮统一（2026-10-09 13:5x）   ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户要求："浅色主题留言那个发布不要用蓝色好吗？不要特别点出颜色，      ║
   ║            都一个色。"                                               ║
   ║                                                                      ║
   ║ 实测（浅色主题）：                                                    ║
   ║   发布按钮   bg = rgb(0,102,204)  ← 唯一的蓝色块，特别扎眼            ║
   ║   收起全文   bg = rgb(255,255,255) + 1px #e5e7eb 边  ← 站内常规样式   ║
   ║   取消       bg = transparent + 灰边                                  ║
   ║                                                                      ║
   ║ 做法：把留言表单的主按钮（发布）改为**站内常规按钮的同一套变量**：     ║
   ║   background: var(--color-surface) / border: var(--color-border)     ║
   ║   color: var(--color-text-secondary)                                 ║
   ║ 即：不再用 --color-accent 做填充，靠"底色 + 描边"区分，不用颜色强调。  ║
   ║                                                                      ║
   ║ 范围：**仅浅色主题**。深色主题保持不变（已按用户先前要求改为暗灰蓝）。 ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* 浅色主题下，留言表单内的主按钮与次按钮统一为站内常规样式 */
html[data-theme="light"] body[class=""] .comment-form .btn:not(.btn-ghost),
html[data-theme="light"] body[class=""] .card-comment-form .btn:not(.btn-ghost),
html:not([data-theme="dark"]) body[class=""] .comment-form .btn:not(.btn-ghost),
html:not([data-theme="dark"]) body[class=""] .card-comment-form .btn:not(.btn-ghost) {
  background: var(--color-surface) !important;
  background-color: var(--color-surface) !important;
  background-image: none !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body[class=""] .comment-form .btn:not(.btn-ghost):hover,
html[data-theme="light"] body[class=""] .card-comment-form .btn:not(.btn-ghost):hover,
html:not([data-theme="dark"]) body[class=""] .comment-form .btn:not(.btn-ghost):hover,
html:not([data-theme="dark"]) body[class=""] .card-comment-form .btn:not(.btn-ghost):hover {
  background: var(--color-bg) !important;
  border-color: var(--color-border-hover) !important;
  color: var(--color-text) !important;
}
/* 「取消」保持 transparent，与主按钮的"白底"形成细微层次，但同一色系 */
html[data-theme="light"] body[class=""] .comment-form .btn-ghost,
html[data-theme="light"] body[class=""] .card-comment-form .btn-ghost {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}
html[data-theme="light"] body[class=""] .comment-form .btn-ghost:hover,
html[data-theme="light"] body[class=""] .card-comment-form .btn-ghost:hover {
  background: var(--color-bg) !important;
  border-color: var(--color-border-hover) !important;
  color: var(--color-text) !important;
}


/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 「内容截断」渐隐遮罩 · 唯一最终规则（2026-10-09 14:0x）              ║
   ╠══════════════════════════════════════════════════════════════════════╣
   ║ 用户反复反馈："白框怎么又出来了。这个问题发生了多少次了！！！！！！" ║
   ║                                                                      ║
   ║ 根因（实测）：                                                        ║
   ║   .post-preview::after 有 **4 条规则**在互相覆盖（高度 40/88/76/100px），║
   ║   最终生效那条的收尾色是**硬编码 #4a5664**，                           ║
   ║   而卡片渐变早已改为 #5b6874 → #4e5b68 —— 两者不一致，               ║
   ║   遮罩下缘因此出现一条可见色带，即用户看到的"白框"。                   ║
   ║                                                                      ║
   ║ 与之前"代码块 / 输入框 / 表单容器 / 头像"是**同一类问题**：            ║
   ║   硬编码颜色没跟着卡片色更新。                                        ║
   ║                                                                      ║
   ║ 根治做法（不再逐个打补丁）：                                          ║
   ║   ① 收尾色改走 `--card-bg-solid`，与卡片底色同源；                    ║
   ║   ② 高度改走 `--fade-mask-h`，消除 4 套历史值；                       ║
   ║   ③ 本规则置于文件末尾并限定为「卡片内、未展开时」，                   ║
   ║      特异性足以压过此前全部历史规则。                                 ║
   ║                                                                      ║
   ║ 今后改卡片色：只需改 `--card-bg-solid`（以及卡片渐变本身），          ║
   ║ 遮罩会自动跟随，不会再脱节。                                          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
html body .main-col .post-card .post-preview::after,
html body .main-col .post .post-preview::after,
html[data-theme="dark"] body[class=""] .post-card .post-preview::after,
html[data-theme="dark"] body[class=""] .post .post-preview::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: var(--fade-mask-h, 100px) !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--card-bg-solid) 0%, transparent) 0%,
    color-mix(in srgb, var(--card-bg-solid) 14%, transparent) 32%,
    color-mix(in srgb, var(--card-bg-solid) 36%, transparent) 56%,
    color-mix(in srgb, var(--card-bg-solid) 64%, transparent) 78%,
    color-mix(in srgb, var(--card-bg-solid) 88%, transparent) 92%,
    var(--card-bg-solid) 100%) !important;
}
/* 展开后不渲染遮罩（内容已完整，不需要"被截断"的暗示） */
html body .main-col .post-card.expanded .post-preview::after {
  content: none !important;
}


/* ══════════════════════════════════════════════════════════════════════
   后台可调排版（2026-10-18）
   ----------------------------------------------------------------------
   字体：--font-family-active 由 fonts.css 的 .font-xxx 类定义；
        未选字体（system）时该变量不存在，自动回退 --font-family。
   字号：--font-size-base / --font-size-title / --line-height-base
        由 base.html 的 <html style="..."> 覆盖。
   全部用 var() 串联，所以「改后台 → 刷新页面」立即生效，无需重启。
   ══════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-family-active, var(--font-family));
}

/* 正文字号与行高（2026-10-18 修正覆盖范围）
   -----------------------------------------------------------------
   原来只覆盖 3 个类，实测**几乎看不出变化**：
     · 首页卡片的摘要 .post-preview 没覆盖
     · 文章详情页正文里的 p/li/td 各自有字号，不继承容器
     · 评论区 .cc-content 没覆盖
   现在：
     · 容器级设置字号与行高
     · 容器内的块级子元素强制 inherit，避免被各自的规则盖住
   用 :where() 降低特异性，方便主题覆盖；用 inherit 保证子元素跟随。 */

/* ★ 2026-10-18 修正：评论区不该跟随「正文字号」设置。
   用户实测反馈：后台把正文字号调到 22px 后，留言区文字也变成 22px，
   比留言区自己的标题还大，非常难看。
   理由：正文字号是给「文章正文」调的，评论是次要内容，应有自己的比例。
   现在只作用于文章正文与摘要，评论区保持 card-comments.css 里的原值
   （.cc-content 0.92rem / .comment-content 同理）。 */
.post-body-content,
.post-content-inner,
.post-preview,
.post-excerpt,
.excerpt {
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

/* 容器内的块级元素跟随容器字号（它们通常有自己的 font-size 规则） */
.post-body-content :where(p, li, td, th, dd, dt, blockquote),
.post-content-inner :where(p, li, td, th, dd, dt, blockquote),
.post-preview :where(p, li) {
  font-size: inherit;
  line-height: inherit;
}

/* 文章标题字号：详情页 h1 与首页卡片标题 */
.post h1.post-title,
.post-detail-title {
  font-size: var(--font-size-title);
}

.post-card h2 {
  font-size: calc(var(--font-size-title) * 0.72);
}

/* ══════════════════════════════════════════════════════════════════════
   文章「整篇字体」（2026-10-18）
   ----------------------------------------------------------------------
   编辑器工具栏的「整篇字体」下拉 → 存 posts.body_font
   → 模板给 .post-body-content 加上 .font-xxx 类
   → fonts.css 里的 .font-xxx 定义 --font-family-active
   → 这里让正文容器消费它。

   为什么要单独写这条：body 上的 var(--font-family-active) 会被
   .font-xxx 类覆盖，但文章容器本身没继承到「类选择器设的变量」——
   变量是定义在 .font-xxx 这个元素上的，只有该元素及其后代能读到。
   因此正文容器必须自己声明一次 font-family。
   ══════════════════════════════════════════════════════════════════════ */

.post-body-content.font-noto-sans,
.post-body-content.font-noto-serif,
.post-body-content.font-lxgw-wenkai,
.post-body-content.font-zcool-xiaowei,
.post-content-inner.font-noto-sans,
.post-content-inner.font-noto-serif,
.post-content-inner.font-lxgw-wenkai,
.post-content-inner.font-zcool-xiaowei {
  font-family: var(--font-family-active);
}

/* 代码块永远是等宽字体，不跟随整篇字体设置 */
.post-body-content.font-noto-sans code,
.post-body-content.font-noto-serif code,
.post-body-content.font-lxgw-wenkai code,
.post-body-content.font-zcool-xiaowei code,
.post-body-content.font-noto-sans pre,
.post-body-content.font-noto-serif pre,
.post-body-content.font-lxgw-wenkai pre,
.post-body-content.font-zcool-xiaowei pre {
  font-family: var(--font-mono);
}

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 「探索全文」星系旋臂动效（2026-10-09）                                   ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 用户设想：超小版星系旋臂，固定在文字右侧，绕中心点持续旋转；             ║
   ║          文字指向旋臂，点击进入详情页。                                  ║
   ║                                                                         ║
   ║ 设计约束（用户明确要求"不抢注意力，主要指颜色上"）：                     ║
   ║   · **不用强调色**（蓝 #3d7fc4 太跳）→ 用正文同族中性灰，透明度 0.5      ║
   ║   · 尺寸 15px，比文字略小                                                ║
   ║   · 转速慢（14s/圈）—— 快转会像"加载中"                                  ║
   ║   · 只旋转，不缩放、不闪烁、不发光                                        ║
   ║   · hover 仅"一点点反馈"：透明度 0.5 → 0.68，转速略快（用户已确认）       ║
   ║                                                                         ║
   ║ 无障碍（必须）：                                                         ║
   ║   · prefers-reduced-motion: reduce → **停止旋转**（尊重系统设置）        ║
   ║   · 旋臂本体 aria-hidden="true"，语义由「探索全文」文字承载              ║
   ║   · 键盘 :focus-visible 有外框 —— 不能只靠动效提示可点                   ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* 让链接内的文字与旋臂在同一行对齐 */
.post-permalink {
  display: inline-flex;
  align-items: center;
  /* 2026-10-10 间距 7px → 10px：星系变大后需要更多呼吸空间，
     否则文字与旋臂挤在一起 */
  gap: 10px;
}
.permalink-label { white-space: nowrap; }

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 星系旋臂品牌标记（2026-10-09 按用户提供设计重做）                        ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 旧实现的问题：那只是"一条螺旋线绕自身中心转"，不是星系。                  ║
   ║ 新设计的关键差别：                                                       ║
   ║   · **椭圆盘静止，只有盘内的臂在公转** —— 这才是"侧视星系"的观感         ║
   ║   · 旋臂先在圆盘坐标系画成螺旋，再由外层 group 压扁成斜视盘面            ║
   ║     （SVG 里的 scale(1,.58)），所以转起来盘面形状恒定                    ║
   ║   · 双旋臂（主臂 + 副臂，副臂更细更淡）+ 亮核 + 高光点                    ║
   ║   · 逆时针旋转，用 SMIL 显式指定中心，不依赖 CSS transform-origin         ║
   ║                                                                          ║
   ║ 配色说明：用户曾要求"不抢注意力"，故仅在 hover 时用强调色，              ║
   ║           常态保持中性灰（.post-permalink 决定，不在此处写死）。          ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.galaxy-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 2026-10-10 用户要求"再把尺寸做大一点"：48 → **56px**。
     尺寸变大后 6 段过渡的层次更看得出（每段线宽在屏幕上更可辨）。
     ⚠️ 同时按比例放大了光晕（见下方 filter 注释）——
        光晕若不跟着放大，元素变大会显得"光晕缩水"，立体感反而下降。 */
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  /* 淡金色（用户要求）。18px 以下的小图标用金色容易显"脏"，
     故选降饱和的哑光金，而非 #D4AF37 那种亮金。
     浅色底 2.52:1 —— 是装饰性元素（aria-hidden），不承载信息，
     不受 WCAG 正文对比度约束；但已足够看清形态。
     ⚠️ 2026-10-15 调色：原 #c8912a 是**土黄/赭石**，在白底上显得发暗发浊，
        对比深色那版（#d9c48a 淡金）明显"偏脏"。
        用户："浅色的星系，旋臂颜色再调一下，看起来没深色好看，有点偏脏"。
        改为**提亮 + 提饱和**的琥珀金 #d99a1f：
          · 亮度上去 → 白底上不再像"咖啡渍"
          · 饱和度上去 → 抵消 Bezold–Brücke（模糊=亮度降=感知饱和降）
          · 色相微偏橙 → 保留"金"的观感，不发绿不发灰 */
  /* 2026-10-15 二次调色：用户要"再调亮色一点，但整体淡一点点"
     → 亮度再↑（#d99a1f 明度约 49% → #e0a83c 约 58%），
       同时**降低饱和度**（S 87% → 72%）来"淡"下来，
       而不是靠调暗 —— 调暗会退回上一版的"脏"。 */
  color: #e0a83c;
  overflow: visible;
  /* 悬浮感：整体轻微上浮 + 柔和金色光晕
     · drop-shadow 比 box-shadow 更合适 —— 它会沿着 SVG 图形轮廓投，
       而不是投一个矩形，所以能做出"星系在发光"的效果
     · 两层：近处紧缩的高光 + 远处扩散的光雾，比单层自然 */
  /* ══════════════════════════════════════════════════════════════════
     立体悬浮：三层光晕 + 接地影（2026-10-10 参考两个现成方案重做）

     参考 1 · EasterHegg 2025 设计系统《Glow》
       https://eh22.easterhegg.eu/design/glow/
       核心：光晕要**分层且按元素尺寸等比**（它取 1/8、1/16、1/32 三档），
             不是随便加几个 blur。
       → 我们此前 42px 用的还是 24px 时代的 6/12px，比例早已失衡。
         现按 48px 重算：1/16=3px（锐利内层）、1/8=6px、1/4=12px（扩散外层）。
         星系是"发光体"，比文字需要更强扩散，故取到 1/4 而非 1/8。

     参考 2 · Spatial Computing UI（Apple Vision Pro 风格）
       https://github.com/FrancoStino/opencode-skills-collection/blob/main/bundled-skills/design-it/spatial-computing-ui/SKILL.md
       核心："Z 轴层级" —— 不是加阴影，而是**制造真实的前后距离**。
             它用「贴地紧实影 + 环境扩散光」两层来表现物体悬空。
       → 最外层那个 `0 4px 8px` 就是"接地影"：
         光线自上而下，物体悬空时下方会有较实的落影，
         这比只有四周光晕更能表现"浮起来"。

     三层叠加顺序：贴地影 → 扩散光 → 锐利内光（由外到内） */
  /* ⚠️ 2026-10-10 修正"外围脏"的真正主因：
     原先第一层接地影用的是 rgba(120,100,60) —— 一个**灰褐色**，
     且扩散 8px 铺得最开，糊出大片低饱和灰。
     实测对比（最外圈均色饱和度）：
       有光晕 → 饱和度 4（脏）
       关掉 filter → 饱和度 19
     证实"脏"主要来自这一层，而不是雾点。
     依据 Bezold–Brücke：模糊扩散 = 亮度降低 = 感知饱和度下降，
     所以扩散层的颜色必须**更饱和**才能保住色相。
     现改为饱和橙 rgb(190,110,20)，并把扩散半径 8px → 6px 收敛。 */
  /* ══════════════════════════════════════════════════════════════════════
     2026-10-10 悬空感加强：照首页卡片的三层阴影结构重做

     用户要求「就有点首页帖子卡片那个悬浮感」。对比后发现差距在**垂直偏移**：
       卡片三层：0 1px 3px / 0 6px 16px / 0 12px 32px   ← 影子逐层远离物体
       星系原值：0 4px 7px / 0 0 12px  / 0 0 4px        ← 后两层无偏移，贴在原地
     「浮起来」的关键不是模糊，而是**影子离物体越来越远** ——
     光照下，物体越高，投影越远越散。原值只有一层有偏移，所以托不出高度。
     ══════════════════════════════════════════════════════════════════════ */
  /* ⚠️ 2026-10-10 修正：加入"地面影"后，原先那层**向下大扩散**的
     drop-shadow(0 9px 18px) 变得**既冗余又有害**：
       · 冗余 —— 它与地面影功能重复（都在表达"下方有影子"）
       · 有害 —— 模糊扩散铺到影子所在位置，把影子的边界糊掉
                （实测：有光晕时影子区最暗 212，关掉光晕 222）
     现改为：贴地影 + 轻微过渡 + 自身发光。
     **下方的高度感全部交给地面影表达** —— 它更准确，因为它真的分离。 */
  /* 2026-10-15 调色：接地影原用 rgba(140,85,15)（偏灰褐），
     在白底上铺开会糊出一团低饱和的浊色 —— 这正是"脏"的主要来源。
     改为**更饱和的暖橙**并降低扩散层的占比，让"发光"盖过"落影"。 */
  /* 2026-10-15：整体淡一点点 —— 接地影与过渡层 alpha 各降约 1/3，
     发光层只微降（.50 → .44），保住"发光"的观感不被削弱。 */
  filter:
    drop-shadow(0 1px 2px rgba(180, 115, 25, .12))
    drop-shadow(0 2px 5px rgba(200, 130, 30, .09))
    drop-shadow(0 0 6px rgba(238, 182, 75, .44));
  /* 静态即带 Z 轴偏移（Spatial UI 做法：静止时也应有距离感） */
  transform: translateY(-3px);
  transition: transform .3s cubic-bezier(.34,1.3,.64,1), filter .3s ease;
  will-change: transform, filter;
}
.galaxy-mark-svg {
  display: block;
  width: 56px;
  height: 56px;
  /* 溢出可见：旋臂画到 r≈14，接近 32 视口的边缘 */
  overflow: visible;
}

/* ── 盘面：侧视椭圆盘的外轮廓，静止不动 ── */
.gm-disc {
  fill: none;
  stroke: currentColor;
  /* 2026-10-10 减淡 .18 → .10：加入点雾后，那圈实线轮廓显得突兀，
     进一步压淡，只保留"盘面存在"的暗示。 */
  stroke-opacity: .10;
  stroke-width: 1;
}

/* ── 星尘（2026-10-10 新增）──
   参考图的质感来自大量小亮点沿旋臂聚集、越往外越稀。
   这些 <circle> 是**构建时用固定种子生成后内联**的，不是运行时随机 ——
   否则每次刷新星点位置都变，会像在闪烁。
   ⚠️ 星尘**不随旋臂旋转**：它属于盘面（静止），
      只有 .gm-rotor 里的臂与核在转。这符合星系照片的观感 ——
      星尘分布是稳定的，臂在其中穿过。 */
/* ── 外围雾：独立配色，解决"脏" ──
   2026-10-10。用户反馈"外围的雾状光晕看起来有点脏"。

   实测诊断：外围区域实际渲染 rgb(247,246,246)，**饱和度中位只有 3**、
             暖度(R-B)只有 2 —— 几乎纯灰。
   成因：76 个点不透明度 <0.25，叠加后金色被冲淡成灰。

   依据 [Bezold–Brücke shift](https://en.wikipedia.org/wiki/Bezold%E2%80%93Br%C3%BCcke_shift)：
     "As intensity is decreased, apparent hue shifts towards red or green"
     亮度降低时，人眼感知的**饱和度也会下降** ——
     所以单纯降 opacity 必然变灰，这是生理特性，不是调参问题。

   解法：衰减时用**更饱和**的基色补偿（不是更亮）。
     实测 opacity=0.25 时：
       基色 #c8912a（当前）→ 饱和度 39
       基色 #e0b060（更亮）→ 饱和度 32   ← 更亮反而更低
       基色 #d97a00（更饱和）→ 饱和度 **55**  ★
     故雾点改用 #d97a00（饱和橙金），色相仍与主体同族，不会突兀。 */
.gm-mist {
  fill: #d97a00;
}
.gm-stars {
  fill: currentColor;
  /* 星点本身已带各自 opacity，整体再压一点避免抢眼 */
  opacity: .85;
}

/* ── 旋臂第一段：实线（t 0–0.30）── */
.gm-arm-solid {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-opacity: .95;
  vector-effect: non-scaling-stroke;
}
/* ── 旋臂第二段：细线渐淡（t 0.30–0.50）──
   2026-10-10 新增。上一版实线直接跳到点，中间是断的；
   加这段后观感是"线自己渐渐化开"，而非"线没了、点才开始"。
   vector-effect 防止外层 scale(1,.38) 把描边压细导致粗细不均。 */
.gm-arm-fade {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-opacity: .55;
  vector-effect: non-scaling-stroke;
}
/* ── 旋臂第三段：尾部渐隐（t 0.76–0.88）──
   2026-10-10 新增。用户要求"把最外尖淡到看不到，形成一个渐变收尾"。
   ⚠️ SVG 描边无法沿长度做透明度渐变，只能**把最外段拆开**、
      每段给不同 opacity，靠段与段的落差模拟渐变。 */
.gm-arm-tail {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-linecap: round;
  stroke-opacity: .30;
  vector-effect: non-scaling-stroke;
}
/* ── 旋臂第四段：末端隐没（t 0.88–1.0）──
   几乎看不见，让臂的末端"自然消失在雾里"，
   而不是突然断掉 —— 这也解决了"最外围看起来重合"的问题。 */
.gm-arm-vanish {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-opacity: .12;
  vector-effect: non-scaling-stroke;
}

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 旋臂：6 段平滑渐变（2026-10-10 第九版）                                  ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 用户反馈："过渡少了，粗到细太快，还没最早那个我说重合了的版本舒服"       ║
   ║                                                                          ║
   ║ 对比三个版本后确认用户判断正确：                                         ║
   ║   · 991f3ae（用户觉得舒服）→ 两段 1.8 → 1.1，落差 0.7px，过渡连续       ║
   ║   · 19e7540（上一版）      → 只有 2.0 → 1.2 两段，中间还断开，很生硬     ║
   ║                                                                          ║
   ║ 教训：上一轮我为了"让线显眼"把段数砍到最少，反而丢了过渡的连续性。      ║
   ║       **「醒目」和「过渡自然」要同时满足，不是二选一。**                  ║
   ║                                                                          ║
   ║ 本版：6 段，线宽 2.0 → 0.6 递减，每段落差仅 0.2~0.3px，                 ║
   ║       透明度 .95 → .14 同步递减 —— 视觉上是连续变细变淡。               ║
   ║       ⚠️ SVG 描边无法沿长度做渐变，只能分段模拟；                       ║
   ║          段数越多越平滑，但段数太多又会让文件变大（当前 6 段 × 2 臂）。  ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */
.gm-seg0 { fill: none; stroke: currentColor; stroke-width: 2.00; stroke-linecap: round; stroke-opacity: .95; vector-effect: non-scaling-stroke; }
.gm-seg1 { fill: none; stroke: currentColor; stroke-width: 1.70; stroke-linecap: round; stroke-opacity: .82; vector-effect: non-scaling-stroke; }
.gm-seg2 { fill: none; stroke: currentColor; stroke-width: 1.40; stroke-linecap: round; stroke-opacity: .66; vector-effect: non-scaling-stroke; }
.gm-seg3 { fill: none; stroke: currentColor; stroke-width: 1.10; stroke-linecap: round; stroke-opacity: .48; vector-effect: non-scaling-stroke; }
.gm-seg4 { fill: none; stroke: currentColor; stroke-width: 0.85; stroke-linecap: round; stroke-opacity: .30; vector-effect: non-scaling-stroke; }
.gm-seg5 { fill: none; stroke: currentColor; stroke-width: 0.60; stroke-linecap: round; stroke-opacity: .14; vector-effect: non-scaling-stroke; }

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 投影副本（2026-10-10 用户思路，替代此前的"独立椭圆"）                    ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 用户原话："你应该做一层跟你做星系旋臂一样的，只是色调不一样             ║
   ║           用于制造阴影跟立体悬空感，我说的逻辑对吗？"                   ║
   ║ **对，而且比我原来的做法更对。**                                        ║
   ║                                                                          ║
   ║ 我原来的做法：一个**独立的椭圆**当影子。                                ║
   ║   问题：形状和星系对不上 → 一眼看出是"地上躺着一个椭圆"，不像投影；     ║
   ║         位置怎么调都别扭（cx 从 16 试到 14、9.5、10）。                 ║
   ║                                                                          ║
   ║ 用户的做法：**复制星系本身**，只改色调 / 压扁 / 下移。                   ║
   ║   ① 形状自动一致 —— 眼睛会把两者关联为"物体与它的影子"                  ║
   ║   ② 形状永远跟着本体走 —— 改了旋臂不必同步改影子                        ║
   ║   ③ 物理上正确 —— **影子就是物体的剪影**                                ║
   ║                                                                          ║
   ║ 实现：模板里把本体抽成 <g id="gm-body">，投影用 <use href="#gm-body">   ║
   ║       引用（避免代码重复），只换色调与变换。                            ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */
/* ╔═══════════════════════════════════════════════════════════════════════╗
   ║ 星系旋转（2026-10-10 重构：CSS animation 替代 SMIL）                   ║
   ╠═══════════════════════════════════════════════════════════════════════╣
   ║ 本体与投影**共用** #gm-rotating-cluster 里的这一个 .gm-rotor-spin ——   ║
   ║ 一处动画、多处共享 → 结构上不可能不同步。                              ║
   ║                                                                        ║
   ║ 为何改用 CSS animation：                                                ║
   ║   SMIL 的 <animateTransform> 在 <use> 克隆场景下行为不稳 ——           ║
   ║   实测：用 syncbase（begin="other.begin"）时投影抛                   ║
   ║   "No current interval"，**完全不转**。                                ║
   ║   CSS animation + transform-origin 没有这些问题。                      ║
   ║                                                                        ║
   ║ transform-origin 必须是 16px 16px ——                                   ║
   ║   viewBox 是 0 0 32 32，旋转中心即 viewBox 中心 (16,16)。              ║
   ║   ⚠️ 这里用 px 而非 %：SVG 元素上 % 的参考系在不同浏览器不一致。        ║
   ╚═══════════════════════════════════════════════════════════════════════╝ */
.gm-rotor-spin {
  /* ⚠️ transform-box: view-box 是必须的 ——
     默认 fill-box 以"元素自身包围盒"为参考系，
     而这是 <use> 克隆出来的图形，包围盒会随旋臂位置变化 →
     旋转中心随之漂移（实测投影 cx 从 -35 漂到 -16）。
     view-box 让参考系固定为 SVG 视口，中心才稳定在 (16,16)。 */
  transform-box: view-box;
  transform-origin: 16px 16px;
  /* 转速：5.2s → 6.5s（用户要求放慢一点点）。
     外缘线速度 28.9 → 23.1 px/s —— 仍明显在转，但更舒缓。
     ⚠️ 改这里即可，本体与投影共用同一个旋转单元，无需同步改两处。 */
  animation: gm-spin-ccw 6.5s linear infinite;
}

@keyframes gm-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* 无障碍：用户要求减少动效时停止旋转 */
@media (prefers-reduced-motion: reduce) {
  .gm-rotor-spin { animation: none; }
}

/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 外围伴影（2026-10-10 用户新思路：像"卫星"而不像"一大团"）              ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 用户："它看起来像个卫星，转的时候在更外围……不要那么大一团，           ║
   ║       小颗点，不要太实，距离要有一点点。"                              ║
   ║                                                                        ║
   ║ 与前一版的区别：前一版是"本体的一团缩小复制"（大、糊、贴得近）；       ║
   ║ 这一版是**一颗小的伴影，在盘面外围绕椭圆轨道转**。                     ║
   ║                                                                        ║
   ║ 为什么更可信：真实悬浮物的影子落在**更外围、更靠下**的地面上 ——        ║
   ║ 而不是紧贴物体正下方。外围 + 距离，这两点才撑得起"悬空"的读感。        ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */
.gm-sat {
  /* ⚠️ fill 必须显式写 —— <ellipse> **不继承 color**，缺 fill 会渲染成纯黑。
     这是第一版（2eb6101）的 bug：CSS 只写了 color: #8c5510、
     没写 fill，实际显示为**黑点**。 */
  fill: url(#gm-sat-core);

  /* ══════════════════════════════════════════════════════════════════════
     中心亮点（2026-10-10 用户要求）

     用户："再亮一点点，这个亮体现在卫星那个点的核心，懂我意思吗？
           还是把一层雾整理调亮，是中心亮点。"

     ⚠️ 此前的做法达不到这个效果：
        单纯用 `fill: currentColor` + `opacity: .32` 渲染出的是
        **均匀的半透明圆** —— 实测中心行亮度跨度只有 **4**，
        没有任何亮度梯度，看起来就是"一团均匀的雾"，中心不亮。

     ✅ 现改为**径向渐变填充**（gm-sat-core 定义在模板 defs 里）：
          中心 #ffe9a8（亮金）→ 35% #f0c25a → 60% 本体金 →
          85% 半透明 → 100% 完全透明
        → 中心是亮点，外围自然散成一层雾，无硬边。
     ══════════════════════════════════════════════════════════════════════ */

  /* opacity 提到 1：亮度梯度已由渐变本身控制，
     再叠一层整体 opacity 会把"中心亮点"也一起压暗。 */
  opacity: 1;
  /* blur 去掉：渐变已经保证边缘柔和；再模糊会把中心亮点糊掉。
     （用户要的是"中心亮"，模糊是反方向。） */
  filter: none;
}


/* 无障碍：减少动效时投影也静止（由 .gm-rotor-spin 的规则统一处理） */

/* ── 盘沿：制造盘的"侧视厚度" ──
   比盘面略大、略下移，完整包住盘面 —— 侧视时能看到盘的侧面，
   这是"立体"的第一要素（此前完全没有，所以像零厚度的纸片）。 */
.gm-rim {
  fill: none;
  stroke: currentColor;
  /* 2026-10-10 .13 → .08：盘沿只是"盘的侧面厚度"的暗示，
     太明显会喧宾夺主，把图标读成"带外框的椭圆"而不是星系。 */
  stroke-opacity: .08;
  stroke-width: 1.1;
}
/* 核球：radialGradient 制作的球体（高光偏左上，有受光面与暗面） */
.gm-core-ball { opacity: 1; }

/* ── 核球 + 高光 ── */
.gm-core    { fill: currentColor; opacity: .95; }
.gm-core-hi { fill: #fff;        opacity: .9; }

/* ── hover / focus：一点点反馈（用户要求"不要太大"）──
   只提亮与加快，不放大、不变色，避免抢注意力。 */
.post-permalink:hover .galaxy-mark,
.post-permalink:focus-visible .galaxy-mark {
  /* 悬浮感加强：上浮更多 + 光晕更亮更扩散 + 接地影更远更淡
     （Spatial UI：hover 时同时加大位移与阴影深度，模拟"更靠近眼睛"） */
  transform: translateY(-5px) scale(1.04);
  filter:
    drop-shadow(0 6px 12px rgba(190, 110, 20, .30))
    drop-shadow(0 0 18px rgba(200, 145, 42, .44))
    drop-shadow(0 0 5px rgba(200, 145, 42, .55));
}
/* 悬停时略快：用 CSS 无法改 SMIL 的 dur，故整体轻微提亮即可 */
.post-permalink:focus-visible {
  outline: 2px solid var(--color-accent, #0066cc);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* ── 深色主题：用浅灰，保持同样的低对比 ── */
html[data-theme="dark"] body[class=""] .post-permalink .galaxy-mark {
  /* 深色底上需提亮才看得见金色；偏冷一点避免在灰蓝背景上发黄发浊 */
  color: #d9c48a;
  filter:
    drop-shadow(0 4px 9px rgba(0, 0, 0, .55))
    drop-shadow(0 0 14px rgba(217, 196, 138, .36))
    drop-shadow(0 0 3px rgba(217, 196, 138, .42));
}
html[data-theme="dark"] body[class=""] .post-permalink:hover .galaxy-mark,
html[data-theme="dark"] body[class=""] .post-permalink:focus-visible .galaxy-mark {
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, .58))
    drop-shadow(0 0 22px rgba(217, 196, 138, .55))
    drop-shadow(0 0 5px rgba(217, 196, 138, .60));
}



/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 后台「待审留言」页样式（2026-10-09）                                     ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 背景：该页模板使用的 .pending-item / .pending-actions-row /            ║
   ║       .pending-content / .btn-muted 等类**在样式表中根本不存在** ——    ║
   ║       于是三个操作按钮各自以块级堆叠、每条留言占三行高度，观感很散。    ║
   ║                                                                         ║
   ║ 本次补齐：                                                              ║
   ║   · 留言卡片化（有边界、有内边距，便于逐条扫读）                        ║
   ║   · 三个操作按钮**横排一行**，与前台按钮同一套视觉语言                  ║
   ║   · 新增 .btn-muted（「驳回」用的中性按钮）                              ║
   ║   · 配色沿用前台设计变量，避免前后台两套观感                            ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

.pending-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md, 16px);
  margin-top: var(--space-lg, 24px);
}

.pending-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 12px);
  padding: var(--space-md, 16px) var(--space-lg, 24px);
}

/* 留言头部：作者 + 时间（模板实际用 .pending-meta） */
.pending-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}

.pending-author {
  font-weight: 600;
  color: var(--color-text, #1a1a1a);
}

.pending-time,
.pending-post {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6b7280);
}

.pending-post .post-title-link {
  color: var(--color-accent, #0066cc);
  text-decoration: none;
}
.pending-post .post-title-link:hover { text-decoration: underline; }

/* 留言正文 */
.pending-content {
  color: var(--color-text, #1a1a1a);
  line-height: 1.7;
  margin: 6px 0 12px;
  overflow-wrap: anywhere;
}

/* 操作区：三个按钮**横排**（原先因缺样式而堆叠三行） */
.pending-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pending-actions { display: inline-flex; margin: 0; }

/* 「驳回」按钮：中性色，与"通过"(主) / "删除"(危险) 形成层次 */
.btn-muted {
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-secondary, #6b7280);
}
.btn-muted:hover {
  background: var(--color-bg, #f8f9fa);
  border-color: var(--color-border-hover, #d1d5db);
  color: var(--color-text, #1a1a1a);
}

/* 深色主题：沿用前台深色变量 */
html[data-theme="dark"] body[class=""] .pending-card {
  background: var(--color-surface, #4e5b68);
  border-color: var(--color-border, rgba(255,255,255,.12));
}
html[data-theme="dark"] body[class=""] .pending-author,
html[data-theme="dark"] body[class=""] .pending-content {
  color: var(--color-text, #e9eef4);
}
html[data-theme="dark"] body[class=""] .pending-time,
html[data-theme="dark"] body[class=""] .pending-post {
  color: var(--color-text-secondary, #b6c1cd);
}
html[data-theme="dark"] body[class=""] .btn-muted {
  border-color: rgba(255, 255, 255, .16);
  color: var(--color-text-secondary, #b6c1cd);
}
html[data-theme="dark"] body[class=""] .btn-muted:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--color-text, #e9eef4);
}

/* 窄屏：按钮换行但保持横向排列 */
@media (max-width: 560px) {
  .pending-card { padding: var(--space-md, 16px); }
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 后台按钮与前台统一（2026-10-09）                                         ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 背景：用户曾要求"浅色主题不要用蓝色，都一个色"，前台留言按钮已改为       ║
   ║       白底灰边；但**后台的 .btn 仍是 rgb(0,102,204) 蓝色实心**，         ║
   ║       前后台观感不一致。                                                ║
   ║                                                                         ║
   ║ 实测对比（浅色主题）：                                                  ║
   ║   前台按钮  bg = rgb(255,255,255) + 灰边   ← 已统一                     ║
   ║   后台按钮  bg = rgb(0,102,204) 蓝色实心   ← 不一致                     ║
   ║                                                                         ║
   ║ 做法：**只作用于后台容器** .admin-page（模板上补的专属 class），      ║
   ║       避免影响前台其他区域的 .btn。                                     ║
   ║       不影响前台任何其他 .btn。危险按钮 .btn-danger 保持红色语义。     ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* 深色主题下后台按钮已与前台一致（#46525f），无需处理。
   浅色主题下后台按钮改为与前台同款：白底 + 灰边 + 次要文字色。 */
html[data-theme="light"] .admin-page .btn,
html:not([data-theme="dark"]) .admin-page .btn {
  background: var(--color-surface, #fff) !important;
  background-image: none !important;
  border: 1px solid var(--color-border, #e5e7eb) !important;
  color: var(--color-text-secondary, #6b7280) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .admin-page .btn:hover,
html:not([data-theme="dark"]) .admin-page .btn:hover {
  background: var(--color-bg, #f8f9fa) !important;
  border-color: var(--color-border-hover, #d1d5db) !important;
  color: var(--color-text, #1a1a1a) !important;
}
/* 后台的「删除」等危险按钮保留红色语义 —— 危险操作不应被"统一配色"抹平。
   ★ 2026-10-20 调整：原先红底白字在大列表里每行一个，整页一片通红、刺眼。
     改为「白底 + 淡红边 + 红字」：仍然是唯一的红色元素，但不再抢眼。
     悬停时才变成红底白字，确保"真的要删"时足够醒目。 */
html[data-theme="light"] .admin-page .btn-danger,
html:not([data-theme="dark"]) .admin-page .btn-danger {
  background: var(--color-surface, #fff) !important;
  border: 1px solid #f5c2c0 !important;
  color: var(--color-danger, #dc2626) !important;
}
html[data-theme="light"] .admin-page .btn-danger:hover,
html:not([data-theme="dark"]) .admin-page .btn-danger:hover {
  background: var(--color-danger, #dc2626) !important;
  border-color: var(--color-danger, #dc2626) !important;
  color: #fff !important;
}

/* ★ 2026-10-18：文章编辑页的「发布」是**主要动作**，必须保留主色。
   上面的 .admin-page .btn 用 !important 把后台所有按钮刷成白底灰边，
   导致「发布」和「存为草稿」看起来一样重。这里给主按钮开一个例外，
   与 .btn-danger 的处理方式对称（危险动作红、主行动蓝，其余灰）。 */
html[data-theme="light"] .admin-page .btn.btn-save,
html:not([data-theme="dark"]) .admin-page .btn.btn-save {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-surface) !important;
  font-weight: 600 !important;
}
html[data-theme="light"] .admin-page .btn.btn-save:hover,
html:not([data-theme="dark"]) .admin-page .btn.btn-save:hover {
  background: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
  color: var(--color-surface) !important;
  box-shadow: var(--shadow-md) !important;
}
/* 深色主题同理（深色下 .admin-page .btn 未覆盖，但仍显式声明以保持一致） */
html[data-theme="dark"] .admin-page .btn.btn-save,
.admin-page .btn.btn-save {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-surface) !important;
}


/* ╔═════════════════════════════════════════════════════════════════════════╗
   ║ 后台「留言管理」页样式（2026-10-09 新增）                                ║
   ╠═════════════════════════════════════════════════════════════════════════╣
   ║ 页面：/admin/comments（全部留言 + 状态筛选 + 搜索 + 分页）               ║
   ║ 复用了「待审留言」页已有的 .pending-card / .pending-actions-row 等，     ║
   ║ 此处仅补该页特有元素：状态页签、搜索框、状态徽标、列表摘要。             ║
   ╚═════════════════════════════════════════════════════════════════════════╝ */

/* ── 状态页签：全部 / 待审 / 已通过 / 已驳回 ── */
.comment-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-md, 16px) 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.comment-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 6px);
  font-size: 0.9rem;
  color: var(--color-text-secondary, #6b7280);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease;
}
.comment-tab:hover {
  background: var(--color-bg, #f8f9fa);
  color: var(--color-text, #1a1a1a);
}
/* 当前页签：加底与描边区分，不用强调色填充（与全站"不特别点出颜色"一致） */
.comment-tab.is-active {
  background: var(--color-surface, #fff);
  border-color: var(--color-border, #e5e7eb);
  color: var(--color-text, #1a1a1a);
  font-weight: 600;
}
.tab-count {
  font-size: 0.78rem;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--color-bg, #f8f9fa);
  color: var(--color-text-secondary, #6b7280);
  min-width: 18px;
  text-align: center;
}
.comment-tab.is-active .tab-count {
  background: var(--color-border, #e5e7eb);
  color: var(--color-text, #1a1a1a);
}

/* ── 搜索行 ── */
.comment-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-md, 16px);
}
.comment-search input[type="search"] {
  flex: 1 1 240px;
  max-width: 380px;
  padding: 7px 12px;
  font-size: 0.9rem;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface, #fff);
  color: var(--color-text, #1a1a1a);
}
.comment-search input[type="search"]:focus {
  outline: none;
  border-color: var(--color-accent, #0066cc);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, .16);
}

/* ── 列表摘要 ── */
.list-summary {
  font-size: 0.86rem;
  color: var(--color-text-secondary, #6b7280);
  margin: 0 0 10px;
}

/* ── 状态徽标：颜色语义化，便于扫读 ── */
.status-badge {
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 9px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.status-pending  { color: #92400e; background: #fef3c7; border-color: #fde68a; }  /* 琥珀：待处理 */
.status-approved { color: #166534; background: #dcfce7; border-color: #bbf7d0; }  /* 绿：已放行 */
.status-rejected { color: #991b1b; background: #fee2e2; border-color: #fecaca; }  /* 红：已拦截 */

/* ── 深色主题 ── */
html[data-theme="dark"] body[class=""] .comment-tabs {
  border-bottom-color: rgba(255, 255, 255, .12);
}
html[data-theme="dark"] body[class=""] .comment-tab {
  color: var(--color-text-secondary, #b6c1cd);
}
html[data-theme="dark"] body[class=""] .comment-tab:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--color-text, #e9eef4);
}
html[data-theme="dark"] body[class=""] .comment-tab.is-active {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: var(--color-text, #e9eef4);
}
html[data-theme="dark"] body[class=""] .tab-count {
  background: rgba(255, 255, 255, .10);
  color: var(--color-text-secondary, #b6c1cd);
}
html[data-theme="dark"] body[class=""] .comment-search input[type="search"] {
  background: rgba(0, 0, 0, .18);
  border-color: rgba(255, 255, 255, .14);
  color: var(--color-text, #e9eef4);
}
html[data-theme="dark"] body[class=""] .list-summary {
  color: var(--color-text-secondary, #b6c1cd);
}
/* 深色下徽标降饱和，避免刺眼 */
html[data-theme="dark"] body[class=""] .status-pending  { color: #fcd34d; background: rgba(252,211,77,.12); border-color: rgba(252,211,77,.28); }
html[data-theme="dark"] body[class=""] .status-approved { color: #86efac; background: rgba(134,239,172,.12); border-color: rgba(134,239,172,.28); }
html[data-theme="dark"] body[class=""] .status-rejected { color: #fca5a5; background: rgba(252,165,165,.12); border-color: rgba(252,165,165,.28); }

/* 窄屏：页签与搜索换行 */
@media (max-width: 560px) {
  .comment-tab { padding: 5px 9px; font-size: 0.84rem; }
  .comment-search input[type="search"] { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   P1 后台增强（2026-10-15）：媒体库 / 术语管理 专属样式
   全部作用域限定在 .admin-page，不影响前台。
   ══════════════════════════════════════════════════════════════════════════ */
.admin-page .admin-hint {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  margin: var(--space-sm) 0 var(--space-md);
}
.admin-page .form-notice {
  color: var(--color-success, #2f7d4f);
  background: rgba(46, 125, 79, 0.08);
  border: 1px solid rgba(46, 125, 79, 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-md);
}
/* 术语管理：行内改名表单 */
.admin-page .inline-form { display: inline-flex; gap: var(--space-xs); align-items: center; }
.admin-page .form-input-sm { width: 10rem; padding: 4px 8px; font-size: 0.85rem; }
.admin-page .merge-form {
  display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap;
  margin: var(--space-md) 0 var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
}
.admin-page .term-group { margin-bottom: var(--space-xl); }
.admin-page .term-group h2 { display: flex; align-items: center; gap: var(--space-sm); }
/* 媒体库：缩略图网格 */
.admin-page .media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md); margin-top: var(--space-md);
}
.admin-page .media-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; background: var(--color-surface); margin: 0;
}
.admin-page .media-item img {
  width: 100%; height: 140px; object-fit: cover; display: block;
  background: var(--color-bg);
}
.admin-page .media-item figcaption {
  padding: var(--space-sm); display: flex; flex-direction: column; gap: 4px;
}
.admin-page .media-name {
  font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.admin-page .media-meta { font-size: 0.78rem; color: var(--color-text-secondary); }
/* 双入口上传（2026-10-15）：本站上传 / S.EE 图床上传 */
.admin-page .upload-entries {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-md); margin: var(--space-md) 0 var(--space-lg);
}
.admin-page .upload-entry {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-md); background: var(--color-surface);
}
.admin-page .upload-entry h2 { margin: 0 0 var(--space-sm); font-size: 1rem; }
.admin-page .upload-entry form { display: flex; flex-direction: column; gap: var(--space-sm); }
.admin-page .media-section-title { margin-top: var(--space-xl); font-size: 1.05rem; }
.admin-page .media-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.admin-page .form-error {
  color: #b3261e; background: #fdecea; border: 1px solid #f5c6cb;
  border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
}
/* 设置页卡片分组（2026-10-15 问题清单【8】） */
.admin-page .settings-card {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg); background: var(--color-surface);
  margin-bottom: var(--space-lg);
}
.admin-page .settings-card h2 {
  margin: 0 0 var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border); font-size: 1.1rem;
}
.admin-page .settings-card .btn { margin-top: var(--space-sm); }

/* ── 作者头像编辑器（2026-10-15 新增）──────────────────────────────────
   左：预览（与前台作者卡同款圆形视觉，复用 .author-avatar 的观感）
   右：两个入口（上传 / 填 URL）并排堆叠
   深浅主题都用站点既有变量，不另造色值。 */
.admin-page .avatar-editor {
  display: flex; gap: var(--space-lg); align-items: flex-start; flex-wrap: wrap;
}
.admin-page .avatar-preview {
  flex: 0 0 auto;
  width: 96px; height: 96px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
}
.admin-page .avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-page .avatar-fallback {
  font-size: 2.2rem; font-weight: 600; color: var(--color-text-secondary);
  line-height: 1; user-select: none;
}
.admin-page .avatar-controls { flex: 1 1 320px; min-width: 0; display: flex; gap: var(--space-lg); flex-wrap: wrap; }
.admin-page .avatar-form { flex: 1 1 260px; min-width: 0; }
.admin-page .avatar-form .form-label { display: block; margin-bottom: 6px; }
.admin-page .avatar-form input[type="file"] { padding: 6px; }
/* 深色：预览圈的描边与内底在深底上要提亮一档，否则读不出圆形轮廓 */
html[data-theme="dark"] body[class=""] .admin-page .avatar-preview {
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.admin-page .flash {
  color: #1a7f37; background: #e6f4ea; border: 1px solid #a3d9b1;
  border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
/* 数据备份区块 */
.admin-page .backup-section { margin-top: var(--space-xl); }

/* 真实阅读数（2026-10-15）：卡片/详情页 meta 行的眼睛图标 + 数字 */
.post-meta .read-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.post-meta .read-count svg {
  flex-shrink: 0;
  opacity: 0.75;
}

/* 网站页脚（2026-10-15）：后台可改页脚文字与备案号，无内容时不渲染 */
.site-footer {
  text-align: center;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}
.site-footer p { margin: 4px 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* 版权行（2026-10-18）：后台只填内容，© 与年份由模板自动拼。
   视觉上比页脚其它行略重一点点，让它是页脚的第一视觉锚点；
   但不加粗、不变大 —— 页脚是次要信息，不该抢正文注意力。 */
.site-footer .footer-copyright {
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
}

/* ═══════════ v1.14.0 右侧栏日期时间组件（作者卡下方） ═══════════ */
/* ═══ 2026-10-15 版面重排：改为「两栏」网格（按用户标注稿）═══
   标注稿量得的结构（红框 384×305）：
     ┌──────────┬─────────────────────┐
     │  竖排     │   19:32  |          │  上栏 194px (64%)
     │  十月     │   星期四 · 2026      │
     │  十五     │   农历九月初六       │
     │          ├─────────────────────┤  ← 横线，**只存在于右栏**
     │          │      (星系)          │  下栏 111px (36%)
     └──────────┴─────────────────────┘
      左栏 106px (28%)   右栏 278px (72%)

   要点（上一版全做错了）：
     ① 竖线**贯穿整个高度**（左栏与右栏同高），不是只跟文字等高
     ② 横线**只在右栏内**（从竖线到右边界），不跨过左栏
     ③ 左栏竖排日期**垂直居中**于整块高度
   上一版把竖排+时钟放进同一个 flex 行、星系另起一块，
   所以竖线只能跟文字同高、横线又横贯整卡 —— 与标注稿不符，故重排。 */
/* 2026-10-15：整块**水平居中**（用户要求"整体是要居中啊"）。
   .dtw 用 flex + justify-content:center，内部两栏按内容宽度定宽，
   而不是 flex:1 各自撑满 —— 撑满会让整块贴左、右侧空一大片。 */
/* 2026-10-15（第 N 版 · 按实测收口）：目标是让「可见内容」在卡片内**几何居中**。
   实测偏右：内容实际占 x=90~263，左边空 76px、右边空 43px → 视觉偏右 16px。
   原因：.dtw-left 有 padding-right、.dtw-meta 有 padding-left，
   这些内边距参与 flex 居中计算，但**视觉上不算内容**，于是把内容推右了。
   修法：给容器补一个等于「右侧隐形内边距的一半」的左 padding，
   把可见内容拉回几何中心。 */
/* 合并：2 处重复收敛为一条（2026-10-16 重构，保留最终生效值） */
.dtw {
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin: 14px 0;
  color: var(--color-text);
  user-select: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding-left: 0;
}
.dtw .dtw-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;      /* 竖排日期在整块高度里垂直居中 */
  justify-content: center;
  padding-right: 23px;
  position: relative;
}
/* 2026-10-15：竖线**不再贯穿全高**（用户："竖红短一点，要符合审美"）。
   改为一条居中的短竖线，长度取内容高度的约 78%，上下各留一点呼吸。
   用 ::after 而非 border-right，才能独立控高。 */
.dtw .dtw-left::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 110px;
  background: var(--color-border, #e5e7eb);
}
.dtw .dtw-right {
  flex: 0 0 auto;           /* 按内容定宽，不撑满 → 整块才能居中 */
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.dtw .dtw-vdate {
  writing-mode: vertical-rl; letter-spacing: 3px;
  /* 2026-10-15：19px → 26px。用户要求"十月十五字号大"，它是这一块的
     视觉主体。26px × 4 字 × 1.15 行高 ≈ 120px，与右侧三行总高相当。 */
  font-size: 23px; font-weight: 600; color: var(--color-text);
  line-height: 1.22; white-space: nowrap;
}
/* 2026-10-15：右栏内容**整体居中**（用户红框标注：星期/农历两行 + 星系
   要作为一个整体居中，而不是左对齐）。
   实测原状态：星期行 中线 191、时钟 中线 174 —— 时钟比其它行偏左 17px，
   因为时钟行是 flex 且宽度由"数字+秒针"决定，而星期行撑满 132px。
   改为：.dtw-meta 内所有行 text-align:center，时钟行也 justify-content:center，
   这样时钟 / 星期 / 农历 三者共用同一条中轴。 */
.dtw .dtw-meta {
  flex: 0 0 auto; min-width: 0;
  /* 2026-10-15：两栏之间原本空了 54px，读起来像两块独立内容（用户：
     "十月十五跟右侧割裂了"）。空隙来自三层叠加：
       .dtw-left 的 padding-right 16 + .dtw-meta 的 padding-left 16
       + 时钟行为居中补的 33px 左侧占位
     现把两侧 padding 各收到 8px，并用负 margin-left 抵消掉时钟占位
     的一半（-16px）—— 时钟仍保持居中（占位还在，左右对称），
     但整体左移，与竖排日期贴近。 */
  /* 2026-10-15（收紧 · 第二版）：上一版用负 margin 想左移整块，
     结果反而把 .dtw-left 推得离卡片左缘更远（留白 60 → 73px），
     且竖排到时钟被压到 13px。原因是负 margin 作用在 flex 子项上，
     会连带改变整个 flex 行的分配。
     本版改为**不动 margin**，只把两侧内边距各收到 6px，让两栏自然贴近。 */
  padding-left: 21px;
  display: flex;
  flex-direction: column;
  align-items: center;       /* 每一行都居中对齐到同一中轴 */
  text-align: center;
}
/* 时钟行：数字 + 秒针成一组，且"数字"的中线要与下方各行对齐。
   实测：数字 99 + gap 5 + 秒针 28 = 132，秒针把数字往左挤 17px。
   早先用 ::before 补 33px 占位来抵消，但**占位是真实宽度**，
   导致"竖排日期 → 时钟"的距离被撑到 50px（用户标记间距过大）。
   改用 **负 margin 抵消占位**：占位仍参与 flex 居中计算，
   但不占布局宽度 —— 数字居中，左侧也不留空白。 */
/* 最简做法：让秒针**脱离文档流**（absolute），于是行内只剩时间数字，
   它天然居中；秒针绝对定位挂在数字右侧，不参与宽度计算 ——
   既不撑大行宽，也不会把数字挤偏。 */
.dtw .dtw-clock-row {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.dtw .dtw-clock-row .dtw-minihands {
  position: absolute;
  left: 100%;
  margin-left: 6px;      /* 配合 40px 尺寸略微拉开间距 */
  top: 50%;
  transform: translateY(-50%);
}
.dtw .dtw-clock { font-size: 34px; font-weight: 500; letter-spacing: 1px; color: var(--color-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
/* 2026-10-16：用户「把秒针整体再加大一点点」。
   尺寸 34 → 40px（+18%），左边距同步由 5px 调到 6px ——
   秒针是绝对定位的，左移会让它离数字更远；适当加大间距保持呼吸感。
   viewBox 是 0 0 48 48，加大 width/height 会等比放大整个 SVG
   （指针、拖尾、圆心一起放大），无需改任何路径数据。 */
.dtw .dtw-minihands { width: 40px; height: 40px; flex-shrink: 0; overflow: visible; }
/* 2026-10-15：秒针由红改灰（用户："不要红，是灰"）。
   原先 #d95f4b 的红色在浅色卡片上过于跳脱、且与整体素雅的配色不搭。
   现统一用中性灰 #9aa4b2，与拖尾圆环同色，读起来是"一枚安静的秒针
   + 它划过的轨迹"，而不是一个突兀的红点。 */
.dtw .dtw-sec { stroke: #d95f4b; stroke-width: 1.7; stroke-linecap: round; }
.dtw .dtw-center { fill: #d95f4b; }
/* 2026-10-15：拖尾弧的公共样式。颜色统一为中性灰，与秒针同色系；
   每段的浓淡由元素上的 stroke-opacity 逐段递减控制（见模板注释）。 */
/* 注意：这两个 <g> 只有 id、没有 class，选择器必须用 #id。
   曾误写成 .dtw-trail-1（class 选择器）→ 匹配不到 → stroke 落到 none，
   圆弧完全不显示。 */
.dtw #dtw-trail-1 path, .dtw #dtw-trail-2 path { fill: none; stroke: #9aa4b2; }
.dtw #dtw-trail-1 path { stroke-width: 1.5; }
.dtw #dtw-trail-2 path { stroke-width: 1.0; }

.dtw .dtw-wd { font-size: 12px; color: var(--color-text-secondary); margin-top: 5px; letter-spacing: .5px; }
.dtw .dtw-lunar { font-size: 13px; color: var(--color-text-secondary); margin-top: 3px; letter-spacing: 1px; }
.dtw .dtw-festival {
  /* 2026-10-15：无横分隔线，右栏与下栏由留白分区。
     margin-top 8 → 2px：用户"星系再往上一点点"，
     实测星系顶 105px、农历底 100px（间距 5px），上移 6px 后约贴齐。 */
  margin-top: 2px;
  flex: 0 0 auto;
  min-height: 48px; display: flex; align-items: center;
  /* 2026-10-15（第二次调）：星系/节日要与**「农历九月初六」那一行的中线对齐**
     （用户："星系再往右一点点，跟农历九月初六那一行的位置处于一个居中的样子"）。
     实测：农历行 左125 右257 → 中线 191；星系 左115 右161 → 中线 138，
     偏左 53px。星系宽 46，故左缘要落在 191-23=168，即 padding-left 由
     6px 提到 59px。
     ⚠️ 用 padding 而非 margin/translate：.dtw-festival 是 flex 容器，
     padding 会同时把「节日文字」一起推到同一条中轴上 —— 两者共用这个容器，
     用户要的正是"文字与星系在同一位置"。 */
  /* 与 .dtw-meta 同一条中轴：用 padding-left 16px 与 meta 的左侧内边距
     保持一致，再由 justify-content:center 让星系/节日文字居中。
     （之前为了"对齐农历行"写死 59px，那是数值巧合，
       一旦字号或文字长度变化就会错位，故改为结构性居中。） */
  justify-content: center;
  padding-left: 6px;
  font-size: 12.5px; letter-spacing: 2px; color: var(--color-text-muted);
}
/* ═══ 法定节假日的「淡光晕」（2026-10-15 新增）═══════════════════════════
   用户：「中国的重要节日、特别是放假的那种，字体可以加一层很淡的光晕，
        颜色要协调适合整体风格，还有主题浅深的适配协调。」

   做法：用 **text-shadow 多层叠加** 而非 background（文字长短不一，
   背景块会显得笨重）。三层由内到外扩散，总强度压在很低的范围 ——
   目标是「字看起来是微微发亮的，而不是套了个色块」。

   配色遵循站内既有的暖金主色 #c8912a（与星系图标同源），
   浅色主题下用低不透明度避免脏；深色主题下提高不透明度，
   因为深底上同样亮度会被吃掉。 */
.dtw .dtw-festival .is-holiday,
.dtw .dtw-festival #dtw-fest-text.is-holiday {
  color: #a8761f;                       /* 比 muted 暖、比正文亮 */
  text-shadow:
    0 0 4px  rgba(200, 145, 42, .30),
    0 0 9px  rgba(200, 145, 42, .18),
    0 0 16px rgba(200, 145, 42, .09);
}
/* 深色主题：底色暗，同样的 alpha 会被吃掉大半，故整体上调一档，
   并把字色提亮到 #e8c079，避免在深底上显得发闷。 */
html[data-theme="dark"] body[class=""] .dtw .dtw-festival .is-holiday,
html[data-theme="dark"] body[class=""] .dtw .dtw-festival #dtw-fest-text.is-holiday {
  color: #e8c079;
  text-shadow:
    0 0 5px  rgba(232, 192, 121, .42),
    0 0 11px rgba(232, 192, 121, .26),
    0 0 20px rgba(232, 192, 121, .13);
}
/* 系统开启「减少动态效果」时不动画，但光晕保留（它是静态装饰，不是动效） */
.dtw .dtw-galaxy-wrap { display: inline-block; transform: translateY(-2px); color: var(--color-text-muted); animation: dtw-breathe 7s ease-in-out infinite; }
.dtw .dtw-galaxy { width: 46px; height: 46px; overflow: visible; display: block; }
.dtw .dtw-breathe { animation: dtw-breathe 4s ease-in-out infinite alternate; }

/* ─── 迷你星系内部图形（2026-10-15 补）───────────────────────────────────
   ⚠️ 这批规则原先**完全缺失** —— 是该组件渲染成「一块灰色实心椭圆」的根因：
   HTML 里用了 dtw-rim / dtw-seg0~5 / dtw-stars / dtw-core-ball 共 8 个类，
   但 style.css 里一条规则都没有。SVG 中未显式给 fill 的 <ellipse> 默认
   **黑色实心**，于是整个星系被那块 .dtw-rim 椭圆盖住，旋臂/星点/核球全看不见。
   （主图标 .gm-* 有完整实现，本组件是复制过来的，复制时漏了整套图形样式。）

   数值基准：与 .gm-* 同样使用 viewBox="0 0 32 32"，但本组件显示尺寸仅 44px
   （主图标 56px 且带 drop-shadow），故 stroke-width 按比例收细约 0.8×，
   并把盘沿的 stroke-opacity 从 .08 提到 .45 —— 44px 下 .08 完全不可见。 */
.dtw .dtw-rim {
  fill: none;
  stroke: currentColor;
  stroke-width: .6;
  /* 盘沿只是「盘的侧面厚度」的暗示。44px 尺寸下 .08 看不见，提到 .45
     仍弱于旋臂（.95），保持「先读到旋臂、再看到盘」的层次。 */
  stroke-opacity: .45;
}
.dtw .dtw-seg0, .dtw .dtw-seg1, .dtw .dtw-seg2,
.dtw .dtw-seg3, .dtw .dtw-seg4, .dtw .dtw-seg5 {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-opacity: .95;
}
/* 由内向外收细，与 .gm-seg0~5 同样的「越往外越细」阶梯 */
.dtw .dtw-seg0 { stroke-width: 1.60; }
.dtw .dtw-seg1 { stroke-width: 1.36; }
.dtw .dtw-seg2 { stroke-width: 1.12; }
.dtw .dtw-seg3 { stroke-width: .88; }
.dtw .dtw-seg4 { stroke-width: .68; }
.dtw .dtw-seg5 { stroke-width: .48; }
.dtw .dtw-stars {
  fill: currentColor;
  /* 星点各自带 opacity，整体再压一点避免抢眼（同 .gm-stars） */
  opacity: .85;
}
/* 核球用 radialGradient（#dtw-core，高光偏左上）*/
.dtw .dtw-core-ball { fill: url(#dtw-core); opacity: 1; }

@keyframes dtw-breathe { 0%, 100% { opacity: .3; } 50% { opacity: .68; } }
@media (prefers-reduced-motion: reduce){ .dtw .dtw-breathe { animation: none; opacity: .55; } }
/* ═══════════ /v1.14.0 ═══════════ */

/* ═══════════════════════════════════════════════════════════════════════
   v1.15.0 悬停式玻璃登录按钮（2026-10-16）
   · 平时隐藏占位，鼠标悬停浮现；移开隐去
   · 玻璃语言遵循《玻璃感与阴影》文档：光源左上统一、5 层负 spread 投影
     （x=0、y 为正，alpha 近深远浅）、深色单独一套（纯黑 + 更高 alpha）
   · 触屏设备（hover: none）直接显示，避免无 hover 时无法登录
   ═══════════════════════════════════════════════════════════════════════ */
.nav-links .login-ghost {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 76px; height: 34px;
  cursor: pointer;
}
.nav-links .login-ghost a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: .9rem; font-weight: 500; text-decoration: none;
  color: var(--color-text);
  border-radius: 10px;
  padding: 0;
  opacity: 0; transform: translateY(3px) scale(.96);
  transition: opacity .28s ease, transform .28s ease, box-shadow .28s ease, filter .28s ease;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.08) 45%,
      rgba(255,255,255,.16) 100%),
    rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.4);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.55),
    inset 0 -1px 2px rgba(28,40,56,.06),
    0 1px 2px -1px rgba(16,24,40,.40),
    0 3px 7px -2px rgba(16,24,40,.30),
    0 8px 16px -5px rgba(16,24,40,.22),
    0 14px 28px -9px rgba(16,24,40,.14),
    0 22px 44px -14px rgba(16,24,40,.08);
}
html[data-theme="dark"] .nav-links .login-ghost a {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.20) 0%,
      rgba(255,255,255,.05) 45%,
      rgba(255,255,255,.10) 100%),
    rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.28),
    inset 0 -1px 2px rgba(0,0,0,.30),
    0 1px 3px -1px rgba(0,0,0,.55),
    0 4px 9px -3px rgba(0,0,0,.48),
    0 10px 20px -6px rgba(0,0,0,.40),
    0 18px 34px -10px rgba(0,0,0,.30),
    0 28px 52px -16px rgba(0,0,0,.20);
}
.nav-links .login-ghost:hover a,
.nav-links .login-ghost a:focus-visible {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}
.nav-links .login-ghost a:hover { filter: brightness(1.06); }
.nav-links .login-ghost a:active { transform: translateY(1px) scale(.98); }
/* 触屏/无 hover 设备：直接显示玻璃按钮，保证可登录 */
@media (hover: none) {
  .nav-links .login-ghost a {
    opacity: 1; transform: none; pointer-events: auto;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   全站按钮 · 玻璃质感统一（2026-10-16）

   起因：用户要求「把网站的所有按钮都换成登录按钮那款，差别是不隐藏」。

   做法：把 v1.15.0 导航栏登录按钮的**玻璃配方**抽成通用样式，套到全站按钮。
        与登录按钮的唯一差别是 —— **不做隐现**（opacity 恒为 1、
        无 translateY/scale 位移、pointer-events 恒为 auto），
        因此那套「悬停才浮现」的状态机全部去掉。

   玻璃配方（与《玻璃感与阴影》同源）：
     · 斜向高光渐变（135deg，左上亮 → 中段透 → 右下回亮）
     · backdrop-filter: blur + saturate（透出背景、保住色相）
     · 1px 亮边（模拟玻璃切边）
     · 5 层负 spread 投影（贴边下拖，浮起感）
     · 深色主题单独一套（深底会吃掉 alpha：换更高不透明度 + 更实暗边）

   ⚠️ 保留语义色差异：
     · .btn-danger        危险操作 → 玻璃底上叠一层红调
     · .btn-sm / .btn-small / .btn-muted  小号 → 只缩尺寸，不改配方
   这样统一了「质感」，但没有抹掉「危险/次要」的语义区分。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 玻璃配方（抽成自定义属性，便于各尺寸复用）── */
:root {
  --glass-bg-1: rgba(255, 255, 255, .34);
  --glass-bg-2: rgba(255, 255, 255, .08);
  --glass-bg-3: rgba(255, 255, 255, .16);
  --glass-fill: rgba(255, 255, 255, .14);
  --glass-edge: rgba(255, 255, 255, .40);
  --glass-inset-hi: rgba(255, 255, 255, .55);
  --glass-inset-lo: rgba(28, 40, 56, .06);
}
/* ⚠️ 2026-10-16：用户反馈「阴影减了，但按钮整体泛白」。
   算术原因：深色下填充是**两层白叠加** ——
     渐变左上 .20 + 纯色底 .08 = 累计约 .26 的白，
     压在深色卡片（rgb≈90,104,115）上 → 左上角被推到 L≈133，明显泛白。
   这套配方原本是给「导航栏登录按钮」用的（小尺寸、悬停才现、白底导航栏），
   搬到「深色 + 常驻 + 多按钮并排」后就太重了。
   修法：**只降白，不动结构** —— 渐变与纯色底各减半；
        1px 亮边保留（它是玻璃切边，不造成大面积泛白）；
        内阴影高光同步收敛。
   浅色主题不动 —— 白底上原配方是对的。 */
html[data-theme="dark"] {
  --glass-bg-1: rgba(255, 255, 255, .055);
  --glass-bg-2: rgba(255, 255, 255, .012);
  --glass-bg-3: rgba(255, 255, 255, .028);
  --glass-fill: rgba(255, 255, 255, .020);
  --glass-edge: rgba(255, 255, 255, .12);
  --glass-inset-hi: rgba(255, 255, 255, .12);
  --glass-inset-lo: rgba(0, 0, 0, .30);
}

/* ── 通用玻璃按钮基类 ── */
.btn,
.btn-save,
.btn-sm,
.btn-small,
.btn-ghost,
.btn-muted,
.btn-secondary,
.expand-btn,
.card-action-btn,
.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-family);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;

  /* 玻璃：斜向高光 + 半透明底 */
  background:
    linear-gradient(135deg,
      var(--glass-bg-1) 0%,
      var(--glass-bg-2) 45%,
      var(--glass-bg-3) 100%),
    var(--glass-fill);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--glass-edge);
  color: var(--color-text);

  /* 玻璃切边 + 5 层负 spread 投影 */
  /* 2026-10-16：用户反馈「阴影太强，有点抢眼」→ 各层 alpha 减半。
     原 .40/.30/.22/.14/.08 → 现 .20/.15/.11/.07/.04。
     内阴影（切边高光）不动 —— 它负责"玻璃有厚度"，不是抢眼的那部分。 */
  box-shadow:
    inset 0 1px 1.5px var(--glass-inset-hi),
    inset 0 -1px 2px var(--glass-inset-lo),
    0 1px 2px -1px rgba(16, 24, 40, .035),
    0 3px 7px -2px rgba(16, 24, 40, .025),
    0 8px 16px -5px rgba(16, 24, 40, .020),
    0 14px 28px -9px rgba(16, 24, 40, .015),
    0 22px 44px -14px rgba(16, 24, 40, .007);

  transition: filter .28s ease, box-shadow .28s ease, transform .12s ease;
}

/* 深色：投影换纯黑（深底会吃掉冷灰的 alpha） */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .btn-save,
html[data-theme="dark"] .btn-sm,
html[data-theme="dark"] .btn-small,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-muted,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .expand-btn,
html[data-theme="dark"] .card-action-btn,
html[data-theme="dark"] .comment-reply-btn {
  /* 深色同样减半：.55/.48/.40/.30/.20 → .28/.24/.20/.15/.10 */
  box-shadow:
    inset 0 1px 1.5px var(--glass-inset-hi),
    inset 0 -1px 2px var(--glass-inset-lo),
    0 1px 3px -1px rgba(0, 0, 0, .045),
    0 4px 9px -3px rgba(0, 0, 0, .040),
    0 10px 20px -6px rgba(0, 0, 0, .035),
    0 18px 34px -10px rgba(0, 0, 0, .025),
    0 28px 52px -16px rgba(0, 0, 0, .015);
}

/* 悬停：只提亮 + 阴影稍微加深，不做位移 */
.btn:hover,
.btn-save:hover,
.btn-sm:hover,
.btn-small:hover,
.btn-ghost:hover,
.btn-muted:hover,
.btn-secondary:hover,
.expand-btn:hover,
.card-action-btn:hover,
.comment-reply-btn:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 1.5px var(--glass-inset-hi),
    inset 0 -1px 2px var(--glass-inset-lo),
    0 2px 4px -1px rgba(16, 24, 40, .035),
    0 5px 11px -3px rgba(16, 24, 40, .030),
    0 12px 24px -7px rgba(16, 24, 40, .025),
    0 20px 40px -12px rgba(16, 24, 40, .015),
    0 30px 60px -18px rgba(16, 24, 40, .010);
}

.btn:active,
.btn-save:active,
.btn-sm:active,
.btn-small:active,
.btn-ghost:active,
.btn-muted:active,
.btn-secondary:active,
.expand-btn:active,
.card-action-btn:active,
.comment-reply-btn:active { transform: translateY(1px); }

/* ── 尺寸 + 圆角（沿用原有尺寸，只统一质感与圆角档位）──
   ⚠️ 圆角必须在这里显式声明：.expand-btn（L422）等旧规则用
      `border-radius: var(--radius-sm)`（6px）且**在源文件中更靠前、特异性相同**，
      但它们写的是简写属性，会与我的块按源码顺序竞争 ——
      只写尺寸不写圆角，就会出现「有的 6px 有的 10px」的不统一。
      统一档位：常规 10px / 小号 8px / 极小 7px，与登录玻璃按钮的 10px 对齐。 */
.btn,
.expand-btn,
.card-action-btn,
.comment-reply-btn { padding: var(--space-sm) var(--space-md); font-size: .9rem; border-radius: 10px; }
.btn-save  { padding: var(--space-sm) var(--space-lg); font-size: .95rem; font-weight: 600; border-radius: 10px; }
.btn-sm    { padding: var(--space-xs) var(--space-sm); font-size: .8rem;  border-radius: 8px; }
.btn-small { padding: 2px var(--space-xs);             font-size: .75rem; border-radius: 7px; }
.btn-ghost { padding: var(--space-xs) var(--space-sm); font-size: .82rem; border-radius: 8px; }
.btn-muted { padding: var(--space-xs) var(--space-sm); font-size: .8rem;  border-radius: 8px; }

/* ── 危险操作：玻璃底上叠红调（保住语义）── */
.btn-danger,
.btn-sm.btn-danger,
.btn-small.btn-danger {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, .22) 0%,
      rgba(255, 255, 255, .04) 45%,
      rgba(255, 255, 255, .10) 100%),
    rgba(203, 68, 62, .42);
  border-color: rgba(255, 140, 132, .42);
  color: var(--color-text);
}
.btn-danger:hover,
.btn-sm.btn-danger:hover,
.btn-small.btn-danger:hover {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, .26) 0%,
      rgba(255, 255, 255, .06) 45%,
      rgba(255, 255, 255, .12) 100%),
    rgba(203, 68, 62, .56);
  filter: brightness(1.06);
}
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .btn-sm.btn-danger,
html[data-theme="dark"] .btn-small.btn-danger {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, .14) 0%,
      rgba(255, 255, 255, .03) 45%,
      rgba(255, 255, 255, .07) 100%),
    rgba(190, 62, 56, .38);
  border-color: rgba(255, 140, 132, .30);
}
/* ══════════════════ /全站按钮玻璃化 ══════════════════ */



/* ══════════════════════════════════════════════════════════════════════
   主行动按钮（2026-10-18）
   ----------------------------------------------------------------------
   背景：全站按钮统一为「玻璃白底」（见上方 .btn 基类），语义靠字重与
         hover 区分。但**提交类按钮**（发布留言 / 提交回复）是页面上唯一
         会让数据发生变化的主行动，白底黑字缺少引导性 ——
         用户实测反馈「按钮也有点丑，风格要统一」。

   做法：不破坏玻璃体系，只给「主行动」加一层主色实底。
         · 形状、圆角、内边距、字号全部沿用玻璃按钮（视觉一致）
         · 只换底色与文字色（主行动才有的强调）
         与后台的「发布」主色按钮、以及 .btn-danger 的红色危险语义对称。

   选择器带 .comment-form 前缀，只作用于留言提交，不影响其它按钮。
   ══════════════════════════════════════════════════════════════════════ */

.comment-form .btn[type="submit"],
.comment-reply-form .btn[type="submit"] {
  background: var(--color-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 102, 204, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.comment-form .btn[type="submit"]:hover,
.comment-reply-form .btn[type="submit"]:hover {
  background: var(--color-accent-hover, #0052a3);
  box-shadow: 0 3px 10px rgba(0, 102, 204, 0.26);
  color: #fff;
}

/* 深色主题：主色在深底上对比不足，用更亮的蓝并保持白字 */
html[data-theme="dark"] .comment-form .btn[type="submit"],
html[data-theme="dark"] .comment-reply-form .btn[type="submit"] {
  background: var(--color-accent);
  color: #fff;
}

/* 「回复」按钮（2026-10-18）：玻璃白底在留言卡片里几乎看不出是按钮，
   与「删除」的极淡文字一样被弱化了。这里给它一个明确的 1px 边框，
   保留次要动作的视觉层级（不如「发布」显眼，但可辨认）。 */
.comment-reply-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 10px;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.comment-reply-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════════════
   删除按钮（2026-10-18 重新定义）
   ----------------------------------------------------------------------
   问题：删除按钮原先被塞进玻璃按钮组（.btn 那一大组），于是：
         · 拿到玻璃渐变底 → 显示成一个**浅色圆角块**
         · 加上 opacity: .35 → 整体糊在背景里，像一块脏斑
         用户实测反馈「删除再亮一点点，是不是跟渐变有关系」——
         确实是渐变，用户判断对了。

   修复思路：删除是「危险但低频」的动作，正确做法是——
         · **不要底色**（底色会让它看起来像可点的按钮，分散注意力）
         · **不要整体 opacity**（opacity 连文字一起压，永远看不清）
         · 用「文字本身的颜色深浅」表达强弱，hover 时变红

   现在：默认灰字（对比度足够阅读，但不抢眼）→ hover 变红并加浅红底。
   ══════════════════════════════════════════════════════════════════════ */

.comment-delete-btn,
.cc-delete-btn {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  font-family: var(--font-family);
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.6;
  /* 默认色：用 secondary（#6b7280）而不是 muted（#9ca3af）。
     muted 在白底上对比度只有 2.5:1 左右，太淡；secondary 约 4.6:1，看得清但不抢眼。 */
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 1;                    /* ★ 关键：不再用 opacity 压暗 */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.comment-delete-btn:hover,
.cc-delete-btn:hover {
  color: var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 8%, transparent);
  filter: none;
  box-shadow: none;
}

/* 深色主题：secondary 在深底上偏暗，提亮一档 */
html[data-theme="dark"] .comment-delete-btn,
html[data-theme="dark"] .cc-delete-btn {
  color: var(--color-text-secondary);
  background: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .comment-delete-btn:hover,
html[data-theme="dark"] .cc-delete-btn:hover {
  color: var(--color-danger);
  background-color: color-mix(in srgb, var(--color-danger) 18%, transparent);
}

/* ── 验证码可点击刷新（2026-10-19）── */
.captcha-img.is-clickable {
  cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.captcha-img.is-clickable:hover {
  opacity: .82;
}
.captcha-img.is-clickable:active {
  transform: scale(.97);
}
.captcha-img.is-clickable:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* 刷新频率超限时的提示（一行小字，出现后自动消失） */
.captcha-hint {
  margin-top: 4px;
  font-size: .74rem;
  line-height: 1.5;
  color: #b4552a;
}
html[data-theme="dark"] body[class=""] .captcha-hint {
  color: #e8a06a;
}

/* ══════════════════════════════════════════════════════════════════════
   环形进度 · 返回顶部按钮（2026-10-16）

   方案来源：用户提供的「环形进度数字圆环」独立片段。
   本文件里的版本做了三处**适配**（原片段是深色硬编码的演示页）：

     ① 配色改用本站 CSS 变量（--color-surface / --color-accent / …）
        → 自动跟随深浅主题，不再写死 #1e293b / #6366f1
     ② 外观并入本站「玻璃语言」（与侧栏盒子、全站按钮同族）
        → 复用 --glass-* 变量与同一组负 spread 投影
     ③ 位置：固定在主内容区右下方（不占文档流），避开侧栏

   交互保留原设计：平时显示百分比；悬停时数字上移淡出、箭头淡入。
   ══════════════════════════════════════════════════════════════════════ */
/* ⚠️ 2026-10-16：必须用 `body[class=""] > .back-to-top-progress`（或更高特异性）
   来声明 position —— 因为文件里有一条
     body[class=""] > * { position: relative; z-index: 1; }
   它命中所有 body 直接子元素，**特异性高于单个类选择器**，
   会把本按钮的 position:fixed 覆盖成 relative → 按钮跑到文档流里、算错坐标。
   （实测：按钮被算到 x=-94，完全跑出左边界。） */
body[class=""] > .back-to-top-progress,
body[class] > .back-to-top-progress,
.back-to-top-progress {
  position: fixed;
  right: 32px;                  /* 贴右下角；不用 calc，避免与 max() 组合出意外 */
  bottom: 32px;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  cursor: pointer;
  z-index: 900;                 /* 低于导航栏，高于卡片 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 玻璃底：与全站按钮同源 */
  background:
    linear-gradient(135deg,
      var(--glass-bg-1) 0%,
      var(--glass-bg-2) 45%,
      var(--glass-bg-3) 100%),
    var(--glass-fill);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);

  /* 与全站按钮同一组投影（接触影 + 主影 + 远影，负 spread） */
  box-shadow:
    inset 0 1px 1.5px var(--glass-inset-hi),
    inset 0 -1px 2px var(--glass-inset-lo),
    0 1px 2px -1px rgba(16, 24, 40, .07),
    0 3px 7px -2px rgba(16, 24, 40, .05),
    0 8px 16px -5px rgba(16, 24, 40, .04),
    0 14px 28px -9px rgba(16, 24, 40, .03);

  /* 默认隐藏，滚动超过阈值后淡入（原设计的显隐机制度） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.4,.64,1),
              visibility .28s ease, filter .28s ease, box-shadow .28s ease;
}
/* ⚠️ 上一条我为了压过 `body[class=""] > *` 提高了特异性，
   结果它反过来压住了 `.is-visible`（单个类的特异性更低）→ 按钮永远不显示。
   所以显示态必须用**同等或更高**的特异性。 */
body[class=""] > .back-to-top-progress.is-visible,
body[class] > .back-to-top-progress.is-visible,
.back-to-top-progress.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.back-to-top-progress:hover {
  transform: translateY(-3px) scale(1.06);
  filter: brightness(1.06);
}
.back-to-top-progress:active { transform: translateY(0) scale(.97); }
.back-to-top-progress:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── 进度环 ── */
.back-to-top-progress .ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);    /* 从 12 点方向起算 */
  pointer-events: none;
}
.back-to-top-progress .ring circle {
  fill: none;
  stroke-width: 3;
  r: 25;                        /* 视图 54×54，半径 25 → 周长 157.08 */
}
/* 轨道底环：用主题的边框色，深浅自动适配 */
.back-to-top-progress .ring-bg { stroke: var(--color-border); }
/* 进度环：**青蓝**（2026-10-16 用户选定）
   ────────────────────────────────────────────────────────────────────
   为什么不用 --color-accent（那个是导航蓝 #0066cc / #3d7fc4）：
     全站底色实测色相在 213°（浅 #d8dfe7 / 深 #343d49），
     而 accent 也是 213° 同色相 → 按钮会"融"进蓝色系，不够跳。
   青蓝取 190°：与底色差 23°，属**邻近色** ——
     既和谐（不会像互补色那样刺眼），又能从冷灰蓝底上明确跳出来。

   深浅各自一档（不是同一个色值）：
     浅色底明度高 → 用稍深的 #39a9bf，保证在白/浅灰上的对比
     深色底明度低 → 用更亮的 #4cc4d9，否则会闷在背景里
   ──────────────────────────────────────────────────────────────────── */
.back-to-top-progress {
  --btt-ring: #7cc4d1;          /* 2026-10-16：用户要求「再淡一点点」——降饱和+提亮 */
  --btt-ring-hover: #5fb3c3;
  --btt-arrow: #6fbccb;
}
/* 2026-10-16：用户「深色有点亮，调暗一点」—— 只动深色，浅色保持 */
html[data-theme="dark"] .back-to-top-progress {
  --btt-ring: #5aa8b8;
  --btt-ring-hover: #74bccb;
  --btt-arrow: #5aa8b8;
}
.back-to-top-progress .ring-bar {
  stroke: var(--btt-ring);
  stroke-linecap: round;
  stroke-dasharray: 157.08;
  stroke-dashoffset: 157.08;
  transition: stroke-dashoffset .1s linear, stroke .2s ease;
}
.back-to-top-progress:hover .ring-bar { stroke: var(--btt-ring-hover); }

/* ── 中心内容：百分比 ⇄ 箭头 ── */
.back-to-top-progress .btn-face {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 常驻面：百分比 + 下方**很淡的箭头虚影**
   虚影的作用是"告诉用户这是返回顶部"，但必须淡到不抢戏：
   用极低 opacity + 比正文更小的尺寸，且颜色取文字次要色再压一档。 */
.back-to-top-progress .face-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top-progress .percent {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.back-to-top-progress .arrow-ghost {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  opacity: .55;                 /* ★ 浅色：2026-10-16 用户「再加一点点」.38 → .55 */
  transition: opacity .2s ease;
}
/* 深色保持 .32（用户已确认可以） */
html[data-theme="dark"] .back-to-top-progress .arrow-ghost { opacity: .32; }

/* 悬停：常驻面整体上移淡出 */
.back-to-top-progress:hover .face-idle {
  opacity: 0;
  transform: translateY(-6px);
}
.back-to-top-progress .arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--btt-arrow);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top-progress:hover .arrow { opacity: 1; transform: translateY(0); }

/* 移动端：收紧边距 */
@media (max-width: 900px) {
  body[class=""] > .back-to-top-progress,
  body[class] > .back-to-top-progress,
  .back-to-top-progress { right: 20px; bottom: 24px; }
}
/* 减少动效：不做位移与平滑滚动 */
@media (prefers-reduced-motion: reduce) {
  .back-to-top-progress { transition: opacity .2s ease; transform: none; }
  .back-to-top-progress.is-visible { transform: none; }
  .back-to-top-progress:hover { transform: none; }
}

/* ═════════════════════════ /v1.15.0 ═════════════════════════ */