/* ============================================================
   theme.css — 「正于雨幕之下」Sangre 主题设计系统
   与 3D 主页 (source/index.html) 同一套视觉语言：
   暗色 · 等宽 HUD 小字 · 十字网格 · 蓝色玻璃 · 芯片标签
   ============================================================ */
:root {
  --bg: #04060a;
  --bg2: #0a0f18;
  --panel: rgba(13, 18, 30, .72);
  --ink: #e9eff7;
  --dim: rgba(197, 215, 238, .62);
  --faint: rgba(197, 215, 238, .34);
  --blue: #6ea8ff;
  --line: rgba(146, 176, 216, .16);
  --line2: rgba(146, 176, 216, .3);
  --mono: "Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Consolas, "Courier New", monospace;
  --sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.22, .9, .24, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(140% 100% at 50% -10%, #0a1220 0%, var(--bg) 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: rgba(110, 168, 255, .35); }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(146, 176, 216, .22); border-radius: 9px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 头部 ============ */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 14px clamp(18px, 4vw, 42px);
  background: rgba(4, 6, 10, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  letter-spacing: .3em; flex: 0 0 auto;
}
.logo svg { display: block; }
.head-nav {
  flex: 1; display: flex; justify-content: flex-end;
  gap: clamp(10px, 1.8vw, 22px); flex-wrap: wrap;
}
.head-nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--dim); padding: 5px 2px; position: relative;
  transition: color .3s;
}
.head-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--ink); transition: right .35s var(--ease);
}
.head-nav a:hover, .head-nav a.on { color: var(--ink); }
.head-nav a:hover::after, .head-nav a.on::after { right: 0; }
.head-nav a.on { color: var(--blue); }
.head-nav a.on::after { background: var(--blue); }

#burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: 1px solid var(--line2); border-radius: 6px;
  padding: 9px 10px; cursor: pointer;
}
#burger i {
  display: block; width: 18px; height: 2px; background: var(--ink);
  transform-origin: 50% 50%;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  will-change: transform;
}

/* ============ ☰ 覆盖菜单 ============ */
.menu-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4, 6, 10, .96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  display: flex; align-items: center; justify-content: center;
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.mo-inner { width: min(560px, 88vw); }
.mo-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .34em;
  color: var(--faint); margin-bottom: 22px;
}
.mo-nav { display: flex; flex-direction: column; }
.mo-link {
  display: flex; align-items: baseline; gap: 16px;
  padding: 11px 6px; border-bottom: 1px solid var(--line);
  font-size: 19px; font-weight: 700; letter-spacing: .06em;
  transform: translateY(14px); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease), color .3s;
}
.menu-overlay.open .mo-link { transform: none; opacity: 1; }
.mo-link em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--blue); }
.mo-link:hover { color: var(--blue); }
.mo-foot { margin-top: 26px; font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--faint); }

/* ============ 布局 ============ */
.wrap {
  max-width: 1080px; margin: 0 auto;
  padding: clamp(28px, 5vh, 54px) clamp(18px, 4vw, 42px) 60px;
  min-height: 62vh;
}

/* ---- 页面英雄区 ---- */
.page-hero { padding: 12px 0 26px; position: relative; }
.ph-kicker {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  color: var(--blue); display: flex; gap: 10px; flex-wrap: wrap;
  text-transform: uppercase; margin-bottom: 12px;
}
.ph-kicker span { color: var(--blue); }
.ph-title {
  font-size: clamp(30px, 5vw, 52px); font-weight: 900;
  letter-spacing: .02em; line-height: 1.15; margin-bottom: 10px;
}
.ph-sub {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--dim);
}
.ph-line { flex: 1; min-width: 60px; height: 1px; background: var(--line2); }

/* ---- 滚动显现 ---- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============ 芯片 ============ */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em;
  color: var(--dim); border: 1px solid var(--line); border-radius: 3px;
  padding: 3px 8px; white-space: nowrap;
}
.chip-cat { color: var(--blue); border-color: rgba(110, 168, 255, .35); }

/* ============ 文章卡片流（/blog/） ============ */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.card {
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background: var(--panel);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
  display: flex; flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(110, 168, 255, .45);
  box-shadow: 0 18px 44px rgba(40, 90, 180, .16);
}
.card-cover {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border-bottom: 1px solid var(--line); position: relative; background: #0a0f1a;
}
.card-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease), filter .4s;
}
.card:hover .card-cover img { transform: scale(1.05); }
.cover-fallback {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px 18px;
  background: linear-gradient(145deg, #0c121d 0%, #16233c 100%);
}
.cf-num {
  font-family: var(--mono); font-size: 52px; font-weight: 700; line-height: 1;
  /* 保留描边质感，同时给一层淡填充兜底：不支持 -webkit-text-stroke 时数字也不会消失 */
  color: rgba(233, 239, 247, .22);
  -webkit-text-stroke: 1px rgba(233, 239, 247, .5);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.cf-txt { font-family: var(--mono); font-size: 9px; letter-spacing: .3em; color: var(--faint); }
.card-body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-meta {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
}
.cm-date { color: var(--blue); }
.cm-file { color: var(--faint); }
.cm-lock { color: #ffd479; }
.card-title { font-size: 17.5px; font-weight: 800; line-height: 1.45; }
.card-title a { transition: color .3s; }
.card-title a:hover { color: var(--blue); }
.card-abs {
  font-family: var(--mono); font-size: 11.5px; color: var(--faint); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============ 列表行（隧道 / 分类 / 标签列表） ============ */
.list-rows { display: flex; flex-direction: column; }
.row-item {
  display: flex; align-items: center; gap: 16px;
  padding: 13px 6px; border-bottom: 1px solid var(--line);
  transition: background .25s, padding-left .25s var(--ease);
}
.row-item:hover { background: rgba(110, 168, 255, .05); padding-left: 14px; }
.ri-date { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--faint); flex: 0 0 auto; }
.ri-title { font-weight: 700; font-size: 15px; flex: 1; line-height: 1.5; }
.row-item:hover .ri-title { color: var(--blue); }
.ri-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.archives .year-block { display: flex; gap: clamp(16px, 4vw, 44px); padding: 26px 0; border-bottom: 1px solid var(--line); }
.archives .year-num {
  font-family: var(--mono); font-size: clamp(30px, 5vw, 46px); font-weight: 700;
  color: rgba(146, 176, 216, .2);
  -webkit-text-stroke: 1px rgba(146, 176, 216, .45);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1; flex: 0 0 auto; padding-top: 6px;
}
.archives .year-list { flex: 1; display: flex; flex-direction: column; }

/* ============ 分类/标签 总览 ============ */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cat-card {
  border: 1px solid var(--line); border-radius: 8px; padding: 18px;
  display: flex; flex-direction: column; gap: 6px; background: var(--panel);
  transition: transform .3s var(--ease), border-color .3s;
}
.cat-card:hover { transform: translateY(-3px); border-color: rgba(110, 168, 255, .5); }
.cc-name { font-weight: 800; font-size: 15px; }
.cc-count { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--faint); }
.cc-count b { color: var(--blue); font-size: 14px; margin-right: 4px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  border: 1px solid var(--line2); border-radius: 999px; padding: 7px 15px;
  color: var(--dim); display: inline-flex; gap: 7px; align-items: baseline;
  transition: all .25s var(--ease);
}
.tag-chip .tc { font-size: 9.5px; color: var(--faint); }
.tag-chip:hover { color: #0a0e14; background: var(--ink); border-color: var(--ink); }
.tag-chip:hover .tc { color: #3c4650; }

/* ============ 友链 ============ */
.link-group { margin-bottom: 34px; }
.lg-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lg-name { font-family: var(--mono); font-size: 11px; letter-spacing: .26em; color: var(--dim); }
.lg-line { flex: 1; height: 1px; background: var(--line); }
.lg-count { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; color: var(--faint); }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.link-card {
  display: flex; align-items: center; gap: 13px;
  border: 1px solid var(--line); border-radius: 9px; padding: 14px 15px;
  background: var(--panel); transition: transform .3s var(--ease), border-color .3s;
}
.link-card:hover { transform: translateY(-3px); border-color: rgba(110, 168, 255, .5); }
.lc-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.lc-body { flex: 1; min-width: 0; }
.lc-name { font-weight: 800; font-size: 14.5px; }
.lc-descr {
  font-size: 11.5px; color: var(--faint); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-go { font-style: normal; color: var(--faint); font-family: var(--mono); transition: color .3s, transform .3s; }
.link-card:hover .lc-go { color: var(--blue); transform: translate(2px, -2px); }

/* ============ 相册 ============ */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.album-card {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 4 / 3;
  transition: transform .35s var(--ease), border-color .35s;
}
.album-card:hover { transform: translateY(-4px); border-color: rgba(110, 168, 255, .5); }
.ac-cover { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.75); cursor: zoom-in; transition: filter .4s, transform .6s var(--ease); }
.album-card:hover .ac-cover { filter: brightness(.95); transform: scale(1.04); }
.ac-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(4, 6, 10, .92));
}
.ac-name { font-weight: 900; font-size: 18px; letter-spacing: .04em; }
.ac-descr { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: .08em; }
.ac-meta { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; color: var(--faint); margin-top: 6px; }
.ac-meta em { color: var(--blue); font-style: normal; }

.album-detail-hero { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; }
.adh-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: saturate(.8); }
.adh-inner { position: relative; padding: clamp(26px, 5vw, 52px); background: linear-gradient(120deg, rgba(4,6,10,.88) 30%, rgba(4,6,10,.45)); }
.adh-back {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--dim);
  border: 1px solid var(--line2); border-radius: 999px; padding: 7px 15px; transition: all .3s;
}
.adh-back:hover { color: var(--ink); border-color: var(--ink); }

.album-shot { margin: 34px 0; }
.as-meta {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.as-date { color: var(--blue); }
.as-content { font-weight: 700; font-size: 14px; font-family: var(--sans); letter-spacing: .02em; }
.as-addr, .as-from { color: var(--faint); font-size: 10px; }
.album-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.album-imgs img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--line); cursor: zoom-in;
  transition: transform .35s var(--ease), filter .3s;
}
.album-imgs img:hover { transform: translateY(-3px); filter: brightness(1.08); }

/* ============ 关于页 ============ */
.about-avatar {
  width: 108px; height: 108px; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--line2); margin-top: 16px;
  filter: grayscale(.4); transition: filter .4s;
}
.about-avatar:hover { filter: none; }
.about-avatar img { width: 100%; height: 100%; object-fit: cover; }
.about-motto { margin: 26px 0 34px; }
.am-line { margin-bottom: 8px; }
.am-line .hl {
  display: inline-block; background: var(--ink); color: #0a0e14;
  font-weight: 900; font-size: clamp(17px, 2.4vw, 24px);
  padding: 3px 12px; letter-spacing: .04em;
}
.am-words { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.am-words .w {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--faint);
  border-bottom: 1px dashed var(--line2); padding-bottom: 3px;
}
.about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.a-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 18px;
  background: var(--panel); display: flex; flex-direction: column; gap: 9px;
  transition: border-color .3s;
}
.a-card:hover { border-color: rgba(110, 168, 255, .4); }
.a-wide { grid-column: 1 / -1; }
.a-lbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .28em;
  color: var(--faint); text-transform: uppercase;
}
.a-rows { display: flex; flex-direction: column; gap: 7px; }
.a-row { display: flex; gap: 12px; font-size: 13.5px; }
.a-row em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--faint); letter-spacing: .14em; flex: 0 0 58px; padding-top: 3px; }
.a-row b { font-weight: 700; }
.a-big { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--blue); letter-spacing: .06em; }
.a-sub { font-size: 13.5px; }
.a-sub.dim { color: var(--faint); font-family: var(--mono); font-size: 11px; }
.a-photo { border-radius: 6px; border: 1px solid var(--line); max-height: 150px; object-fit: cover; }
.a-maxim .hl { display: inline-block; background: var(--ink); color: #0a0e14; font-weight: 800; padding: 2px 10px; }
.a-careers { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.career-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.a-link { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--blue); }
.a-link:hover { color: var(--ink); }
.comic-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.comic-item { display: flex; flex-direction: column; gap: 7px; font-size: 11.5px; font-family: var(--mono); color: var(--dim); }
.comic-item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); transition: transform .3s var(--ease); }
.comic-item:hover img { transform: translateY(-3px); }

/* ============ 音乐馆 ============ */
.music-stage { max-width: 760px; }
.aplayer { background: var(--panel) !important; border: 1px solid var(--line); border-radius: 10px; box-shadow: none !important; font-family: var(--sans); }
.aplayer .aplayer-lrc { background: transparent !important; }
.aplayer .aplayer-info .aplayer-music .aplayer-author { color: var(--faint); }
.aplayer .aplayer-lrc p { color: var(--dim) !important; }
.aplayer .aplayer-lrc p.aplayer-lrc-current { color: var(--blue) !important; }
.aplayer .aplayer-icon path { fill: var(--dim); }

/* ============ 正文 prose ============ */
.prose {
  font-size: 15.5px; line-height: 2.05; color: rgba(233, 239, 247, .88);
  max-width: 76ch;
}
.prose > * + * { margin-top: 1.1em; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 800; line-height: 1.4; margin-top: 2em; letter-spacing: .02em;
}
.prose h1 { font-size: 26px; }
.prose h2 {
  font-size: 22px; padding-left: 14px; position: relative;
}
.prose h2::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em;
  width: 3px; background: linear-gradient(var(--blue), transparent);
}
.prose h3 { font-size: 18px; color: var(--blue); }
.prose h4 { font-size: 15.5px; }
.prose a { color: var(--blue); border-bottom: 1px dashed rgba(110, 168, 255, .5); transition: all .25s; }
.prose a:hover { color: var(--ink); border-bottom-style: solid; }
.prose strong { color: var(--ink); }
.prose blockquote {
  border-left: 3px solid var(--blue); background: rgba(110, 168, 255, .05);
  padding: 12px 18px; border-radius: 0 8px 8px 0; color: var(--dim);
  font-size: 14px;
}
.prose img {
  display: block; margin: 1.4em auto; border-radius: 8px;
  border: 1px solid var(--line); cursor: zoom-in;
}
.prose iframe { display: block; width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.prose hr { border: none; height: 1px; background: var(--line); margin: 2.4em auto; width: 60%; }
.prose ul, .prose ol { padding-left: 1.5em; }
.prose li::marker { color: var(--blue); }
.prose code {
  font-family: var(--mono); font-size: .86em;
  background: rgba(110, 168, 255, .1); color: #9cc8ff;
  border-radius: 4px; padding: 2px 7px;
}
.prose table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  display: block; overflow-x: auto;
}
.prose th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--blue);
  border-bottom: 1px solid var(--line2); padding: 9px 12px; text-align: left;
  white-space: nowrap;
}
.prose td { border-bottom: 1px solid var(--line); padding: 8px 12px; vertical-align: top; }
.prose tr:hover td { background: rgba(110, 168, 255, .04); }

/* 代码块（highlight.js 输出结构） */
.prose figure.highlight, .prose pre {
  background: #070b13 !important; border: 1px solid var(--line);
  border-radius: 9px; margin: 1.4em 0; overflow-x: auto;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
  color: #b8c8e2;
}
.prose figure.highlight table, .prose figure.highlight td { border: none !important; margin: 0; }
.prose figure.highlight td { padding: 0; }
.prose figure.highlight .gutter {
  width: 40px; text-align: right; padding: 14px 10px 14px 14px !important;
  color: rgba(146, 176, 216, .3); user-select: none; background: rgba(255,255,255,.015);
}
.prose figure.highlight .code { padding: 14px 16px !important; width: 100%; }
.prose figure.highlight pre, .prose pre { margin: 0; padding: 14px 16px; background: transparent !important; border: none; }
.prose pre code { background: none; padding: 0; color: inherit; border: none; }
.prose figure.highlight .comment, .prose figure.highlight .quote { color: #55627a; font-style: italic; }
.prose figure.highlight .keyword, .prose figure.highlight .selector-tag { color: #7ea6ff; }
.prose figure.highlight .string, .prose figure.highlight .attr { color: #8fd0a8; }
.prose figure.highlight .number, .prose figure.highlight .literal { color: #e8b07a; }
.prose figure.highlight .title, .prose figure.highlight .name { color: #e2c08d; }

/* 目录 */
.toc-box {
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
  margin-bottom: 1.6em; font-family: var(--mono);
}
.toc-box summary {
  cursor: pointer; padding: 11px 16px; font-size: 10px;
  letter-spacing: .28em; color: var(--dim); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.toc-box summary::before { content: "▸"; transition: transform .3s; color: var(--blue); }
.toc-box[open] summary::before { transform: rotate(90deg); }
.toc-inner { padding: 4px 18px 14px; font-size: 12px; }
.toc-inner ol { padding-left: 1.4em; }
.toc-inner a { color: var(--dim); border: none; }
.toc-inner a:hover { color: var(--blue); }

/* ============ 上下篇 ============ */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 44px 0 10px; }
.pn {
  border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 5px; background: var(--panel);
  transition: border-color .3s, transform .3s var(--ease);
  min-width: 0;
}
.pn:hover { border-color: rgba(110, 168, 255, .5); transform: translateY(-2px); }
.pn em { font-style: normal; font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; color: var(--faint); }
.pn span { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-next { text-align: right; align-items: flex-end; }

/* ============ 评论 ============ */
.comments { margin-top: 40px; }
.cm-lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: .3em;
  color: var(--faint); margin-bottom: 16px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
/* 变量名以 @waline/client@3.3.1 的 dist/waline.css 为准。
   注意 v2 → v3 改过名：--waline-bgcolor → --waline-bg-color、
   --waline-info-bgcolor → --waline-info-bg-color。写错就静默失效。 */
#waline {
  --waline-theme-color: var(--blue);
  --waline-active-color: #8fbcff;
  --waline-color: var(--ink);

  --waline-bg-color: rgba(13, 18, 30, .55);
  --waline-bg-color-light: rgba(146, 176, 216, .07);
  --waline-bg-color-hover: rgba(146, 176, 216, .12);
  --waline-border-color: var(--line);
  --waline-border: 1px solid var(--line);
  --waline-disable-bg-color: rgba(146, 176, 216, .06);
  --waline-disable-color: var(--faint);

  --waline-code-bg-color: #070b13;
  --waline-bq-color: rgba(110, 168, 255, .18);
  --waline-info-bg-color: rgba(110, 168, 255, .08);
  --waline-info-color: var(--dim);
  --waline-info-font-size: .625em;

  --waline-font-size: 15px;
  --waline-avatar-size: 3rem;
  --waline-avatar-radius: 4px;
  --waline-badge-color: var(--blue);
  --waline-badge-font-size: .72em;
  --waline-box-shadow: none;

  /* 这两个是 waline 内置的浅色灰阶，暗色站点必须覆盖，否则按钮文字/页脚是白的 */
  --waline-white: #0a0e14;
  --waline-light-grey: rgba(197, 215, 238, .45);
  --waline-dark-grey: rgba(197, 215, 238, .62);

  font-family: var(--sans);
}
#waline .wl-empty, #waline .wl-loading { color: var(--faint); }
.cm-fail {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--faint); border: 1px dashed var(--line2);
  border-radius: 8px; padding: 18px; text-align: center;
}

/* ============ 加密文章框 ============ */
#hexo-blog-encrypt { padding: 44px 8px; }
.read-crypt-item { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.read-crypt-input {
  background: var(--panel); border: 1px solid var(--line2); border-radius: 6px;
  color: var(--ink); font-family: var(--mono); font-size: 13px;
  padding: 11px 16px; outline: none; letter-spacing: .14em;
}
.read-crypt-input:focus { border-color: var(--blue); }
.read-crypt-button {
  background: var(--ink); color: #0a0e14; border: none; border-radius: 6px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .2em;
  padding: 11px 22px; cursor: pointer; transition: transform .25s var(--ease);
}
.read-crypt-button:hover { transform: translateY(-2px); }
#hexo-blog-encrypt > div:first-child { font-family: var(--mono); letter-spacing: .2em; color: var(--dim); }

/* ============ 分页 ============ */
nav.pagination, .pagination {
  display: flex; justify-content: center; gap: 8px; margin: 42px 0 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; flex-wrap: wrap;
}
.pagination a, .pagination span {
  min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 6px; padding: 0 10px;
  color: var(--dim); transition: all .25s;
}
.pagination span.current { background: var(--ink); color: #0a0e14; border-color: var(--ink); }
.pagination a:hover { border-color: var(--blue); color: var(--blue); }

/* ============ 页脚 ============ */
.site-foot {
  position: relative; padding: 34px clamp(18px, 4vw, 42px);
  border-top: 1px solid var(--line); overflow: hidden;
}
.foot-grid {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M70 62v16M62 70h16' stroke='%239aa4ad' stroke-width='1' opacity='.2'/%3E%3C/svg%3E");
}
.foot-inner {
  position: relative; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--faint);
}
.foot-inner a { transition: color .3s; }
.foot-inner a:hover { color: var(--blue); }

/* ============ 灯箱 ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(2, 4, 8, .93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 30px 90px rgba(0,0,0,.6); }

/* ============ 响应式 ============ */
@media (max-width: 900px) {
  .head-nav { display: none; }
  #burger { display: flex; margin-left: auto; }
  /* 2px 线宽 + 5px 间距 → 位移取整 7px，避免半像素导致旋转抖动 */
  #burger.open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  #burger.open i:nth-child(2) { opacity: 0; transform: scaleX(.4); }
  #burger.open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .cards { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .archives .year-block { flex-direction: column; gap: 10px; }
  .wrap { padding-top: 20px; }
}