/* ============================================================
   Article Styling for Butterfly Hexo Blog (Cool & Elegant)
   ============================================================ */

/* 字体加载已上移到 _config.yml 的 inject.head：
   中文走自托管的霞鹜文楷分片（/css/fonts-lxgw.css），拉丁走 Google Fonts 的
   Inter + Fira Code（异步 link）。原先这里的 @import 是串行阻塞——浏览器得先
   下完本文件、解析到 @import、再去下 Google 的 CSS、再下 woff2，白白多两跳。 */

:root {
  /* ============================
     配色体系 - 契合博客冷色调
     ============================ */
     
  /* 正文与排版 */
  --blog-text: #34495e;
  --blog-heading: #2c3e50;
  --blog-muted: #7f8c8d;
  --blog-accent: #49B1F5;       /* 主题亮蓝 */
  --blog-accent-hover: #00c4b6; /* 主题青色 */
  --blog-border: #e2e8f0;

  /* 代码块 (冷灰纸面：回退到暖纸精修前的配色) */
  --blog-code-bg: #F7F9FA;
  --blog-code-text: #24292E;
  --blog-code-border: #EAECEF;
  
  /* 行内代码 */
  --blog-inline-code-color: #FF7242; /* 浅橙色，凸显 */
  --blog-inline-code-bg: rgba(255, 114, 66, 0.06);
  --blog-inline-code-border: rgba(255, 114, 66, 0.2);

  /* 引用块 */
  --blog-quote-bg: rgba(73, 177, 245, 0.08);
  --blog-quote-border: #49B1F5;
  --blog-quote-text: #596b7d;

  /* 表格（线性纸面风:中性冷灰框线,表头与代码块 --blog-code-bg 同族,蓝只在悬停） */
  --blog-table-border: #e3eaf3;
  --blog-table-alt: #f7f9fc;
  --blog-table-hover: rgba(73, 177, 245, 0.05);

  /* 字体栈 —— 全站唯一来源，claude-pages.css 只消费不定义。
     霞鹜文楷自托管分片见 tools/subset-fonts.py；文楷自带拉丁字形，
     正文中英文一体，标题走同一家族的 Medium(500-900) 字面而非伪粗。

     ⚠ --font-mono 里 WenKai Mono 必须排在 Fira Code **前面**：代码块要的是
     中英文对齐同一字符网格，而这只有在拉丁和汉字来自同一家族时才成立
     （WenKai Mono 拉丁 0.5em / 汉字 1.0em = 严格 2:1）。若让 Fira Code 吃拉丁
     （0.6em）、WenKai Mono 只吃汉字，比值退化成 1.667，网格根本对不上——
     那样 Mono 这个字重就白下载了（它的汉字字形和正文文楷完全相同）。
     浏览器实测过，别再把 Fira Code 挪回第一位。 */
  --font-heading: "LXGW WenKai", "Noto Serif SC", ui-serif, Georgia, "Songti SC", serif;
  --font-body: "LXGW WenKai", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
  --font-mono: "LXGW WenKai Mono", "Fira Code", "JetBrains Mono", "SF Mono", Menlo, Monaco, Consolas, "Cascadia Code", monospace;
}

/* ============================================================
   1. 文章内容区 - 全局排版
   ============================================================ */

#post .post-content,
.container {
  font-family: var(--font-body);
  color: var(--blog-text);
  line-height: 1.8;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

#post .post-content p {
  margin: 0 0 1.25em;
}

/* ============================================================
   2. 标题 - 经典衬线
   ============================================================ */

#post .post-content h1,
#post .post-content h2,
#post .post-content h3,
#post .post-content h4,
#post .post-content h5,
#post .post-content h6 {
  font-family: var(--font-heading);
  color: var(--blog-heading);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 1.8em;
  margin-bottom: 0.8em;
}

#post .post-content h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid var(--blog-border); }
#post .post-content h2 { font-size: 1.6em; }
#post .post-content h3 { font-size: 1.35em; }
#post .post-content h4 { font-size: 1.2em; }
#post .post-content h5 { font-size: 1.1em; }
#post .post-content h6 { font-size: 0.95em; color: var(--blog-muted); }

/* ============================================================
   3. 链接
   ============================================================ */

#post .post-content a {
  color: var(--blog-accent) !important;
  text-decoration: none;
  border-bottom: 1px dashed var(--blog-accent);
  transition: all 0.3s ease;
}

#post .post-content a:hover {
  color: var(--blog-accent-hover) !important;
  border-bottom-style: solid;
  border-bottom-color: var(--blog-accent-hover);
}

/* ============================================================
   4. 行内代码
   ============================================================ */

#post .post-content code,
.container code {
  font-family: var(--font-mono) !important;
  background-color: var(--blog-inline-code-bg) !important;
  color: var(--blog-inline-code-color) !important;
  border: 1px solid var(--blog-inline-code-border) !important;
  border-radius: 4px !important;
  /* 调小横向内边距，并增加一点外边距留白，防止和文字挤到一起 */
  padding: 0.1em 0.3em !important;
  margin: 0 0.15em !important;
  font-size: 0.85em !important;
  font-weight: 600 !important;
  transition: all 0.2s ease;
  word-break: break-word;
}

#post .post-content code:hover,
.container code:hover {
  background-color: rgba(255, 114, 66, 0.15) !important;
  border-color: rgba(255, 114, 66, 0.4) !important;
}

/* ============================================================
   5. 代码块 - 去除行号，冷灰纸面 + 轻阴影悬停美化（无顶栏）
   ============================================================ */

/* 代码块外壳：冷灰纸面 + 轻投影，悬停仅加深阴影/边框（不位移，避免抖动） */
#post .post-content figure.highlight,
#post .post-content pre {
  background: var(--blog-code-bg) !important;
  border: 1px solid var(--blog-code-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
  margin: 1.5em 0 !important;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

#post .post-content figure.highlight:hover {
  border-color: #D1D5DB !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* 完全隐藏行号列 */
#post .post-content figure.highlight .gutter {
  display: none !important;
}

/* 代码区域重置：强制转换为块级元素并开启横向滚动条 */
#post .post-content figure.highlight table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  background: transparent !important;
}

#post .post-content figure.highlight table td {
  border: none !important;
  padding: 0 !important;
}

/* 阻止普通的表格悬停样式（也就是你看到的深蓝色）生效于代码块的单行代码上 */
#post .post-content figure.highlight table tr:hover td {
  background-color: transparent !important;
}

/* 主代码文本区（margin:0 必须显式声明：上方外壳规则的 1.5em/1.25em
   margin 会连带命中这里的内层 pre，是旧版代码块上下留白虚胖的元凶） */
#post .post-content figure.highlight .code pre,
#post .post-content pre code {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  color: var(--blog-code-text) !important;
  font-size: 0.9em !important;
  font-weight: 400 !important;
  font-family: var(--font-mono) !important;
  line-height: 1.55;
  white-space: pre; /* 确保长代码不被强制换行，从而能撑出滚动条 */
}

/* 让每行代码最少占据100%宽度（短代码能铺满防锯齿），但允许自适应更宽以触发滚动条 */
#post .post-content figure.highlight .line {
  display: inline-block;
  min-width: 100%;
  width: auto;
}

/* =================== 代码语法高亮优化 =================== */

/* 注释 - 重点高亮醒目色 */
#post .post-content figure.highlight .comment,
#post .post-content figure.highlight .hljs-comment {
  color: #00A67E !important; /* 护眼的翡翠绿，足够醒目 */
  font-style: italic;
  font-weight: 600 !important;
}

/* 关键字 */
#post .post-content figure.highlight .keyword,
#post .post-content figure.highlight .hljs-keyword,
#post .post-content figure.highlight .built_in,
#post .post-content figure.highlight .hljs-built_in {
  color: #E03597 !important; /* 靓丽的紫红 */
  font-weight: 600;
}

/* 字符串 */
#post .post-content figure.highlight .string,
#post .post-content figure.highlight .hljs-string {
  color: #F07A38 !important; /* 活力橙色 */
}

/* 数字 */
#post .post-content figure.highlight .number,
#post .post-content figure.highlight .hljs-number {
  color: #49B1F5 !important;
}

/* 标签/属性 */
#post .post-content figure.highlight .tag,
#post .post-content figure.highlight .hljs-tag,
#post .post-content figure.highlight .attr,
#post .post-content figure.highlight .hljs-attr {
  color: #00c4b6 !important;
}

/* 函数 / 类名 */
#post .post-content figure.highlight .function,
#post .post-content figure.highlight .hljs-function,
#post .post-content figure.highlight .title,
#post .post-content figure.highlight .hljs-title,
#post .post-content figure.highlight .class .title {
  color: #4561E8 !important; /* 克莱因蓝 */
  font-weight: 600;
}

/* 符号等 */
#post .post-content figure.highlight .punctuation,
#post .post-content figure.highlight .operator {
  color: #555555 !important;
}

/* 代码块顶栏已移除：language/copy 在主题配置关闭，
   残余工具栏/复制气泡由 _highlight/highlight.styl 兜底 display:none */

/* ============================================================
   6. 图片交互
   ============================================================ */

#post .post-content img {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  margin: 1.5em auto;
  max-width: 100%;
}

#post .post-content img:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(73, 177, 245, 0.15);
}

.img-alt {
  text-align: center !important;
  color: var(--blog-muted) !important;
  font-size: 0.85em !important;
  margin-top: -8px !important;
}

/* ============================================================
   7. 引用块
   ============================================================ */

#post .post-content blockquote {
  border-left: 4px solid var(--blog-quote-border) !important;
  background-color: var(--blog-quote-bg) !important;
  padding: 1em 1.5em !important;
  color: var(--blog-quote-text) !important;
  border-radius: 0 8px 8px 0 !important;
  margin: 1.5em 0 !important;
  transition: all 0.3s ease;
}

#post .post-content blockquote:hover {
  background-color: rgba(73, 177, 245, 0.12) !important;
}

#post .post-content blockquote p {
  margin: 0.5em 0 !important;
}

/* ============================================================
   8. 表格 — 线性纸面风（GitHub/Notion 式）
   （全部收敛在 .table-wrap 作用域：main.js addTableWrap 只包裹
   非高亮表格，天然隔离 figure.highlight 内部的代码表格。
   包裹发生在 JS 阶段，此前一帧回落主题原生样式，无害。）
   设计语言：只留横向分隔线；表头纸面色与代码块 --blog-code-bg
   同族；框线中性冷灰；主题蓝仅在行悬停出现（旧版蓝框+蓝头+
   蓝斑马+蓝悬停四层叠蓝显浑浊，已废）。不写 text-align，
   markdown 的对齐语法照常生效。
   ============================================================ */

/* 滚动容器：外框+圆角在 wrap 上（横滚时边框不随内容滚走）；
   overflow-x:auto 保住宽表横向滚动——旧版 overflow:hidden 是
   宽表被硬压缩、单元格内容词中折断的根因。
   纯白实底也在 wrap 上：底下蓝紫渐变内容卡不再透进单元格 */
#article-container .table-wrap {
  overflow-x: auto;
  margin: 1.75em 0;
  border: 1px solid var(--blog-table-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(45, 90, 140, 0.05);
}

#article-container .table-wrap > table {
  margin: 0 !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 0.92em;
  line-height: 1.65;
}

#article-container .table-wrap thead {
  background: var(--blog-table-alt) !important;
}

/* 只留横向分隔线；border:none 同时灭掉主题给每格画的灰色右/下边框 */
#article-container .table-wrap th {
  padding: 10px 16px !important;
  font-weight: 600;
  color: var(--blog-heading) !important;
  border: none !important;
  border-bottom: 1px solid var(--blog-table-border) !important;
  white-space: nowrap;
}

#article-container .table-wrap td {
  padding: 10px 16px !important;
  border: none !important;
  border-bottom: 1px solid #eef2f8 !important;
  transition: background-color 0.2s ease;
}

#article-container .table-wrap tr:last-child td {
  border-bottom: none !important;
}

/* 主题蓝只在交互出现：tbody 行悬停极淡蓝，表头不吃悬停 */
#article-container .table-wrap tbody tr:hover td {
  background-color: var(--blog-table-hover) !important;
}

/* 单元格内行内代码禁止词中折断；宽表交给容器横滚 */
#article-container .table-wrap code {
  white-space: nowrap;
  word-break: normal;
}

#article-container .table-wrap::-webkit-scrollbar {
  height: 6px;
}

#article-container .table-wrap::-webkit-scrollbar-thumb {
  background: rgba(144, 153, 166, 0.3);
  border-radius: 4px;
}

/* 窄屏：内边距与字号同步收敛 */
@media screen and (max-width: 768px) {
  #article-container .table-wrap th,
  #article-container .table-wrap td {
    padding: 8px 12px !important;
  }

  #article-container .table-wrap > table {
    font-size: 0.88em;
  }
}

/* ============================================================
   9. 列表分界线粗体等
   ============================================================ */

#post .post-content hr {
  border: none !important;
  border-top: 1px dashed var(--blog-border) !important;
  margin: 2.5em 0 !important;
}

#post .post-content ::selection {
  background-color: rgba(73, 177, 245, 0.3) !important;
  color: inherit !important;
}

#post .post-content strong {
  font-weight: 600;
  color: var(--blog-heading);
}

#post .post-content mark {
  background: rgba(255, 114, 66, 0.2);
  padding: 0.1em 0.3em;
  border-radius: 3px;
  color: var(--blog-text);
}

/* 代码块滚动条增强（极简 Mac 原生质感） */
#post .post-content figure.highlight table::-webkit-scrollbar,
#post .post-content figure.highlight::-webkit-scrollbar,
#post .post-content pre::-webkit-scrollbar {
  width: 6px;
  height: 6px; /* 横向滚动条的关键就是 height */
}

#post .post-content figure.highlight table::-webkit-scrollbar-track,
#post .post-content figure.highlight::-webkit-scrollbar-track,
#post .post-content pre::-webkit-scrollbar-track {
  background: transparent; /* 轨道全透明，不占视觉重量 */
}

#post .post-content figure.highlight table::-webkit-scrollbar-thumb,
#post .post-content figure.highlight::-webkit-scrollbar-thumb,
#post .post-content pre::-webkit-scrollbar-thumb {
  background: rgba(144, 153, 166, 0.3); /* 雾面质感的纯净灰 */
  border-radius: 4px;
  transition: background 0.3s ease;
}

#post .post-content figure.highlight table::-webkit-scrollbar-thumb:hover,
#post .post-content figure.highlight::-webkit-scrollbar-thumb:hover,
#post .post-content pre::-webkit-scrollbar-thumb:hover {
  background: rgba(144, 153, 166, 0.6); /* 鼠标悬停时稍微加深，提供互动感 */
}

/* ============================================================
   10. TOC 侧边栏目录优化 (防止拥挤，提升专业感)
   ============================================================ */

#aside-content #card-toc .toc-content .toc-item {
  /* 增加目录项之间的垂直间距 */
  margin-top: 6px !important;
  margin-bottom: 6px !important;
  line-height: 1.5;
}

#aside-content #card-toc .toc-content .toc-link {
  /* 两行夹断替代单行省略号。加宽侧栏单独解决不了深层条目被切的问题:
     ol 逐级 18px 缩进 + .toc-child 再 20px,三级标题已吃掉约 56px 可用宽,
     像「2.1 制品自带 sbom 物料」必然截断——而截断的目录条目等于导航失效。
     两行夹断是本站侧栏既有语言(_layout/aside.styl 的 .limit-more-line 同为
     line-clamp:2),不是新发明。 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  word-break: break-word;   /* 长 ASCII 串(sbom / CVE-2021-44228)不撑破卡片 */

  /* 字体和颜色优化 */
  font-size: 0.9em;
  color: var(--blog-text);
  /* ↓ 下面两行是 :hover / .active 强调条的基座,改动会让悬停时文字横跳 2px */
  padding: 2px 4px 2px 8px !important;
  border-left: 2px solid transparent !important;
  transition: all 0.3s ease;
}

#aside-content #card-toc .toc-content .toc-link:hover {
  color: var(--blog-accent) !important;
  background-color: rgba(73, 177, 245, 0.05); /* 悬浮加入极浅蓝色以提升可点感 */
  border-left-color: var(--blog-accent) !important;
  border-radius: 0 4px 4px 0;
}

/* 当前阅读所在的活跃目录项 */
#aside-content #card-toc .toc-content .toc-link.active {
  background-color: rgba(73, 177, 245, 0.08) !important;
  color: var(--blog-accent) !important;
  border-left-color: var(--blog-accent) !important;
  border-radius: 0 4px 4px 0;
  font-weight: 600 !important;
}

/* 目录卡滚动条:全局滚动条的近白轨道在玻璃卡片里像一条白杠,很突兀。
   透明轨道 + 4px 细蓝滑块,且静息全透明、悬停目录卡才显——
   避免侧栏常驻一条细蓝竖线。 */
#aside-content #card-toc .toc-content {
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

#aside-content #card-toc:hover .toc-content {
  scrollbar-color: rgba(73, 177, 245, 0.35) transparent;
}

#aside-content #card-toc .toc-content::-webkit-scrollbar {
  width: 4px;
}

#aside-content #card-toc .toc-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

#aside-content #card-toc .toc-content::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}

#aside-content #card-toc:hover .toc-content::-webkit-scrollbar-thumb {
  background: rgba(73, 177, 245, 0.28);
}

#aside-content #card-toc .toc-content::-webkit-scrollbar-thumb:hover {
  background: rgba(73, 177, 245, 0.5);
}

/* 目录卡现在是侧栏 sticky 区唯一的卡片(card_recent_post 已从 widget/index.pug
   的 post 分支移除),把 stylus 的 calc(100vh - 120px) 放宽。X = 190 的账:
     70  claude-aside.js gapTop()——#page-header.nav-visible 时的让位
     20  claude-aside.js GAP_BOTTOM
     40  #card-toc 上下内边距(aside.styl 的 padding: 20px 24px)
     34  .item-headline 行高 + 下间距
     26  余量:卡片边框/阴影、toc-percentage 浮标、亚像素
   于是卡片满高时 H + 70 + 20 = 100vh - 26 < vh,claude-aside.js 的 isShort()
   恒为真 → 目录退化成「钉在 gapTop」,整卡永远在视口内,不会被 clamp 出屏幕上沿。

   必须包在 min-width 里:stylus 在 +maxWidth900() 给移动端浮层目录
   (position:fixed 的 #card-toc)另有 calc(100vh - 140px),同特异性且在前,
   不加断点会被本规则按加载顺序压掉。900.02 与 maxWidth900() 互补不重叠。 */
@media (min-width: 900.02px) {
  #aside-content #card-toc .toc-content {
    max-height: calc(100vh - 190px);
  }
}

/* ============================================================
   11. 侧栏标签卡 — 等宽网格彩虹胶囊(淡彩渐变版)
   模板(widget/card_tags.pug)按标签名哈希注入 tag-c0..7 槽位类,
   专属色跟名字走、重建/排名变化不漂移。
   版式:auto-fill 等宽网格(桌面侧栏内宽≈234px 恰为双列),胶囊
   撑满单元格、计数右对齐——取代旧流式排布(胶囊宽度随文字长短
   参差,用户嫌不规整;更早的 JS 交错缩进同理已删,勿复活)。
   静息:白玻璃上罩一层极淡的同色渐变纱 + 柔化 # 与描边;
   悬停:柔和粉彩渐变填充 + 深色同色字(同 Follow Me 按钮的淡彩语言)。
   色板 8 hue 与 --blog-accent 同明度域,槽 0 即站点蓝锚点。
   ============================================================ */

#aside-content .claude-aside-tags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  padding-top: 6px;
}

#aside-content .claude-aside-tag {
  --tag-accent: var(--blog-accent);   /* 兜底:未拿到槽位类也不裸奔 */
  display: flex;                      /* 撑满网格单元:所有胶囊等宽 */
  align-items: center;
  gap: 5px;
  height: 27px;                       /* 统一胶囊高度,行行齐平 */
  padding: 0 10px 0 11px;
  border-radius: 999px;
  line-height: 1;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.72) 0%,
    color-mix(in srgb, var(--tag-accent) 13%, rgba(255, 255, 255, 0.5)) 100%);
  border: 1px solid color-mix(in srgb, var(--tag-accent) 22%, transparent);
  box-shadow: 0 1px 2px rgba(45, 90, 140, 0.05);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  font-family: var(--font-body);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #5b6b7f;
  text-decoration: none;
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 槽位色板 */
#aside-content .tag-c0 { --tag-accent: #49b1f5; }  /* 主题蓝(锚点) */
#aside-content .tag-c1 { --tag-accent: #23b8ad; }  /* 青 */
#aside-content .tag-c2 { --tag-accent: #5cb87a; }  /* 豆绿 */
#aside-content .tag-c3 { --tag-accent: #e0a03c; }  /* 琥珀 */
#aside-content .tag-c4 { --tag-accent: #ef8a63; }  /* 珊瑚 */
#aside-content .tag-c5 { --tag-accent: #e77c9b; }  /* 蔷薇 */
#aside-content .tag-c6 { --tag-accent: #9b83e0; }  /* 雾紫 */
#aside-content .tag-c7 { --tag-accent: #6f92d8; }  /* 灰雾蓝 */

#aside-content .claude-aside-tag-hash {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--tag-accent);
  opacity: 0.66;
  transition: inherit;
}

#aside-content .claude-aside-tag-name {
  flex: 1 1 auto;                     /* 撑开中段,把计数推到胶囊右缘对齐 */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.7;                   /* 行框须罩住中文墨迹:胶囊 line-height:1 时
                                         行框只有 1 字号高,overflow:hidden 会把
                                         汉字下缘剪掉("字少下一截") */
}

/* 计数弱化:去底色徽章,只留小号灰字 */
#aside-content .claude-aside-tag-count {
  flex-shrink: 0;
  font-size: 0.78em;
  font-weight: 600;
  color: #9aa7b4;
  transition: inherit;
}

/* 悬停:柔和粉彩渐变填充 + 深色同色字,轻上浮(淡彩语言) */
#aside-content .claude-aside-tag:hover {
  color: color-mix(in srgb, var(--tag-accent) 55%, #2b4a70);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--tag-accent) 18%, rgba(255, 255, 255, 0.92)) 0%,
    color-mix(in srgb, var(--tag-accent) 34%, rgba(255, 255, 255, 0.65)) 100%);
  border-color: color-mix(in srgb, var(--tag-accent) 40%, transparent);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--tag-accent) 20%, transparent);
  transform: translateY(-2px);
}

#aside-content .claude-aside-tag:hover .claude-aside-tag-hash {
  color: color-mix(in srgb, var(--tag-accent) 70%, #24466b);
  opacity: 1;
}

#aside-content .claude-aside-tag:hover .claude-aside-tag-count {
  color: color-mix(in srgb, var(--tag-accent) 45%, #6b8098);
}

#aside-content .claude-aside-tag:active {
  transform: translateY(0) scale(0.97);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--tag-accent) 18%, transparent);
}

/* ============================================================
   12. 列表页配色统一（分页 / 归档封面）— 冷调玻璃
   ============================================================ */

/* ---- 分页 Pagination：干掉默认橙色，统一蓝/青冷调 ---- */
#pagination .page-number,
#pagination .pagination .page-number {
  border-radius: 9px !important;
  background: rgba(255, 255, 255, 0.55) !important;
  color: #5b6b7f !important;
  border: 1px solid rgba(73, 177, 245, 0.16) !important;
  box-shadow: 0 1px 2px rgba(45, 90, 140, 0.05) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
#pagination .page-number.current {
  background: linear-gradient(135deg, #4aa6f2 0%, #84c8f8 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(73, 177, 245, 0.32) !important;
}
#pagination .page-number:hover:not(.current),
#pagination .extend:hover {
  background: rgba(73, 177, 245, 0.14) !important;
  color: var(--blog-accent) !important;
  border-color: rgba(73, 177, 245, 0.35) !important;
  transform: translateY(-2px) !important;
}
#pagination .extend {
  color: #8a99ab !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#pagination .space { color: #aeb8c4 !important; }

/* ---- 归档封面（tag/category 落地页）：圆角 + 悬停轻微放大 ----
   /archives/ 已改为无封面时间轴,这里只作用于 tag/category 落地页的 article-sort 列表。 */
.article-sort-item-img {
  border-radius: 10px !important;
  overflow: hidden !important;
}
.article-sort-item-img img {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.article-sort-item:hover .article-sort-item-img img {
  transform: scale(1.05) !important;
}

/* ============================================================
   13. 侧栏名片杂项覆盖
   头像 hover 360° 旋转在 _layout/aside.styl 与 _highlight/theme.styl
   (影子副本)各有一份同名规则——这里用同选择器靠加载顺序一并压制,
   不去动 styl(影子副本陷阱)。社交图标同理(仅影子副本残留)。
   ============================================================ */

.avatar-img img:hover {
  transform: none;
}

.card-info-social-icons i:hover {
  transform: none;
}

/* ============================================================
   14.（已移除）侧栏视口内滚面板
   旧 pane 模式（.claude-aside-scrollpane）随 claude-aside.js 简化
   一并删除（2026-07-22 用户决定）：差速内滚与面板外的作者卡脱节、
   交互割裂，页面滚不动时下部卡片无法到达。保留编号占位，
   §15 及文档引用不受影响。勿复活。
   ============================================================ */

/* ============================================================
   15. 正文内容卡内边距（压过 _page/common.styl 的 50px 40px）
   三档呼吸感：宽屏留白充裕、中屏收敛、窄屏贴边不局促
   ============================================================ */

.layout > div:first-child:not(.nc) {
  padding: 56px 64px !important;
}

@media screen and (max-width: 1024px) {
  .layout > div:first-child:not(.nc) {
    padding: 44px 36px !important;
  }
}

@media screen and (max-width: 768px) {
  .layout > div:first-child:not(.nc) {
    padding: 32px 18px !important;
  }
}

/* ============================================================
   16. 文章页两列版式（post 分支侧栏只剩「关于我 + 目录」后重配比）
   作用域 #body-wrap.post（layout.pug 的 `#body-wrap(class=pageType)`，
   文章页恒为 'post'），首页 / about / tags / categories / archives 以及
   tag、category 下钻页（依赖 claude-pages.css §7 的主列 sticky）全不受影响。

   ⚠ 两条红线，都是能静默把版式改坏的：
   1) 所有宽度规则必须锁在 min-width: 900.02px 内。aside.styl 在
      +maxWidth900() 给 #aside-content 的 width:100% **没有 !important**，
      本段的 3-ID 选择器会无条件压过它，把手机侧栏卡死在 28% 宽。
   2) 第二个 @media (min-width:2000px) 块不是装饰。common.styl 的
      `.layout { max-width: 60% }` 虽在媒体查询里，却只有 1 个 class 的特异性，
      3-ID 规则会在**所有**宽度压掉它——2560px 屏会从 1536px 静默缩到 1300px，
      净退化。所以超宽屏必须在这里手动接管。
   :not(.hide-aside) 是给「将来某篇 post 写 aside:false」留的后路，
   免得压掉 common.styl 的 .layout.hide-aside{max-width:1000px}。
   ============================================================ */

@media (min-width: 900.02px) {
  #body-wrap.post #content-inner.layout:not(.hide-aside) {
    max-width: 1300px;
  }

  #body-wrap.post #content-inner.layout > #post {
    width: 72%;
  }

  #body-wrap.post #content-inner.layout > #aside-content {
    width: 28%;
  }
}

/* 超宽屏接管：1500px ≈ 保住原 60% 在 2560 屏上的观感；70/30 + 96px 内边距
   把多出来的横向空间大部分给留白和目录，而不是把中文行长推到 900px 以上。 */
@media (min-width: 2000px) {
  #body-wrap.post #content-inner.layout:not(.hide-aside) {
    max-width: 1500px;
  }

  #body-wrap.post #content-inner.layout > #post {
    width: 70%;
    padding: 56px 96px !important;
  }

  #body-wrap.post #content-inner.layout > #aside-content {
    width: 30%;
  }
}