/* =========================================================
   LUMEN — Hugo Theme (drop-in, no build step required)
   Modern · energetic · micro-rounded · accessible · single-column
   ========================================================= */
:root {
  /* 品牌主色：活力珊瑚（oklch，非 AI 套路紫蓝） */
  --brand:        oklch(0.62 0.19 30);
  --brand-strong: oklch(0.55 0.18 28);
  --brand-soft:   oklch(0.96 0.03 35);
  --brand-ring:   oklch(0.62 0.19 30 / 0.28);

  /* 分类强调色 */
  --c-design: oklch(0.62 0.19 30);
  --c-code:   oklch(0.55 0.14 250);
  --c-life:   oklch(0.62 0.15 145);
  --c-devops: oklch(0.58 0.16 300);

  /* 中性：暖纸白 + 暖墨 */
  --paper:   oklch(0.985 0.008 70);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.01 70);
  --line:    oklch(0.90 0.01 70);
  --line-strong: oklch(0.82 0.015 70);
  --ink:     oklch(0.24 0.02 50);
  --ink-2:   oklch(0.42 0.02 50);
  --ink-3:   oklch(0.58 0.02 50);

  --ok: oklch(0.62 0.15 150);
  --warn: oklch(0.72 0.15 75);
  --err: oklch(0.60 0.20 25);

  --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 1rem + 0.3vw, 1.18rem);
  --fs-lg: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  --fs-xl: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
  --fs-2xl: clamp(2.4rem, 1.6rem + 4vw, 4rem);
  --fs-3xl: clamp(3rem, 1.8rem + 6vw, 5.5rem);

  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;

  /* 极简微圆角：卡片克制，胶囊仅留给按钮/标签 */
  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-pill:999px;

  --sh-sm: 0 1px 2px oklch(0.24 0.02 50 / 0.06), 0 1px 2px oklch(0.24 0.02 50 / 0.07);
  --sh-md: 0 3px 10px oklch(0.24 0.02 50 / 0.08), 0 1px 3px oklch(0.24 0.02 50 / 0.05);
  --sh-lg: 0 14px 32px oklch(0.24 0.02 50 / 0.12), 0 4px 10px oklch(0.24 0.02 50 / 0.07);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 160ms var(--ease-out);
  --t-norm: 320ms var(--ease-out);

  --maxw: 1140px;
  --reading: 800px;   /* 单栏文章阅读宽度（更宽松，内容更充实） */
  --col: 800px;       /* 单栏列表 / 滚动文字宽度 */

  /* 代码高亮 token 颜色（跟随主题切换） */
  --code-fg: var(--ink);
  --code-bg: oklch(0.955 0.012 250);   /* 冷调浅灰蓝，与暖纸背景明显区分 */
  --code-comment: var(--ink-3);
  --code-keyword: var(--brand);
  --code-string: oklch(0.52 0.13 150);
  --code-number: oklch(0.62 0.16 55);
  --code-function: var(--c-code);
  --code-tag: oklch(0.55 0.16 25);
  --code-attr: oklch(0.58 0.12 95);
  --code-operator: var(--ink-2);

  /* Waline 评论区主题变量（原生 DOM，跟随 Lumen token，明暗自适应） */
  --waline-theme-color: var(--brand);
  --waline-active-color: var(--brand-strong);
  --waline-border-color: var(--line);
  --waline-bgcolor: var(--surface);
  --waline-bgcolor-light: var(--surface-2);
  --waline-bgcolor-hover: var(--surface-2);
  --waline-text-color: var(--ink);
  --waline-text-color-light: var(--ink-2);
  --waline-code-bgcolor: var(--code-bg);
  --waline-border-radius: var(--r-lg);
}

[data-theme="dark"] {
  color-scheme: dark;
  --brand: oklch(0.72 0.17 32);
  --brand-strong: oklch(0.80 0.16 32);
  --brand-soft: oklch(0.28 0.05 35);
  --brand-ring: oklch(0.72 0.17 32 / 0.4);
  --c-code: oklch(0.72 0.12 250);
  --c-life: oklch(0.74 0.14 145);
  --c-devops: oklch(0.74 0.14 300);
  --code-keyword: var(--brand);
  --code-bg: oklch(0.20 0.02 255);    /* 冷调深灰蓝，与暖色暗背景区分 */
  --code-string: oklch(0.78 0.14 150);
  --code-number: oklch(0.80 0.16 70);
  --code-function: var(--c-code);
  --code-tag: oklch(0.78 0.16 25);
  --code-attr: oklch(0.82 0.13 95);
  --code-operator: var(--ink-2);

  /* Waline 评论区主题变量（暗色） */
  --waline-theme-color: var(--brand);
  --waline-active-color: var(--brand-strong);
  --waline-border-color: var(--line);
  --waline-bgcolor: var(--surface);
  --waline-bgcolor-light: var(--surface-2);
  --waline-bgcolor-hover: var(--surface-2);
  --waline-text-color: var(--ink);
  --waline-text-color-light: var(--ink-2);
  --waline-code-bgcolor: var(--code-bg);
  --waline-border-radius: var(--r-lg);

  --paper: oklch(0.20 0.012 60);
  --surface: oklch(0.25 0.014 60);
  --surface-2: oklch(0.28 0.016 60);
  --line: oklch(0.34 0.015 60);
  --line-strong: oklch(0.44 0.02 60);
  --ink: oklch(0.94 0.01 70);
  --ink-2: oklch(0.80 0.012 70);
  --ink-3: oklch(0.62 0.015 70);
  --sh-sm: 0 1px 2px oklch(0 0 0 / 0.4);
  --sh-md: 0 3px 12px oklch(0 0 0 / 0.45);
  --sh-lg: 0 14px 36px oklch(0 0 0 / 0.55);

  /* 暗色滚动条：轨道更深、滑块用品牌亮色 */
  ::-webkit-scrollbar-track { background: var(--surface-2); }
  ::-webkit-scrollbar-thumb {
    background: var(--brand);                                        /* 兜底：纯色品牌色，保证任何浏览器都可见 */
    background: color-mix(in oklch, var(--brand) 72%, var(--paper)); /* 渐进增强：暗色下更亮的混色 */
    border-radius: 999px;
    border: 2px solid var(--surface-2);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--fs-base);
  line-height: 1.75; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; transition: background var(--t-norm), color var(--t-norm);
}
h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; margin: 0; }
a { color: var(--brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-strong); }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand-soft); color: var(--ink); }

/* 自定义滚动条：细轨道 + 品牌色滑块，暗色自适应 */
html { scrollbar-width: thin; scrollbar-color: var(--brand) var(--surface-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; }
::-webkit-scrollbar-thumb {
  background: var(--brand);                                        /* 兜底：纯色品牌色，保证任何浏览器都可见 */
  background: color-mix(in oklch, var(--brand) 70%, var(--ink-3)); /* 渐进增强：更柔和的混色 */
  border-radius: 999px;
  border: 2px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-strong); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-4); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--brand); color: #fff; padding: var(--s-2) var(--s-4); z-index: 200; }
.skip-link:focus { left: 0; }

/* 阅读进度条 */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--brand), var(--c-code)); z-index: 130; transition: width 80ms linear; opacity: 0; }
.progress.show { opacity: 1; }

/* Header / Nav */
.site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: saturate(160%) blur(12px); background: color-mix(in oklch, var(--paper) 82%, transparent); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: var(--s-4); height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); letter-spacing: -0.03em; }
.brand img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; flex-shrink: 0; }
.nav-links { display: flex; gap: var(--s-1); margin-left: var(--s-4); }
.nav-links a { color: var(--ink-2); font-weight: 500; padding: 0.5rem 0.85rem; border-radius: var(--r-pill); font-size: var(--fs-sm); transition: background var(--t-fast), color var(--t-fast); }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--surface-2); color: var(--ink); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; transition: all var(--t-fast); }
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.nav-burger { display: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); padding: 0.7rem 1.3rem; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; min-height: 44px; transition: all var(--t-fast); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--sh-sm); }
.btn--primary:hover { background: var(--brand-strong); transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }

/* Chips / tags */
.chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; padding: 0.3rem 0.75rem; border-radius: var(--r-pill); letter-spacing: 0.01em; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--design { color: var(--c-design); background: color-mix(in oklch, var(--c-design) 12%, transparent); }
.chip--code { color: var(--c-code); background: color-mix(in oklch, var(--c-code) 12%, transparent); }
.chip--life { color: var(--c-life); background: color-mix(in oklch, var(--c-life) 12%, transparent); }
.chip--devops { color: var(--c-devops); background: color-mix(in oklch, var(--c-devops) 12%, transparent); }
.tag { font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-2); background: transparent; border: 1px solid var(--line); padding: 0.2rem 0.7rem; border-radius: var(--r-pill); white-space: nowrap; transition: all var(--t-fast); display: inline-flex; align-items: center; }
.tag:hover { color: var(--brand); border-color: var(--brand); }

/* Hero */
.hero { padding: var(--s-9) 0 var(--s-7); position: relative; overflow: hidden; }
.hero .glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(80px); opacity: 0.5; background: radial-gradient(circle, var(--brand-soft), transparent 70%); top: -160px; right: -80px; z-index: 0; }
.hero-inner { position: relative; z-index: 1; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 600; color: var(--brand); margin-bottom: var(--s-4); }
.hero h1 { font-size: var(--fs-3xl); font-weight: 700; margin-bottom: var(--s-4); }
.hero h1 .ul { background: linear-gradient(transparent 62%, color-mix(in oklch, var(--brand) 35%, transparent) 0); padding: 0 0.1em; }
.hero p { font-size: var(--fs-md); color: var(--ink-2); max-width: 56ch; margin-bottom: var(--s-5); }
.hero-cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.marquee { max-width: var(--col); margin: var(--s-7) auto 0; border-block: 1px solid var(--line); padding: var(--s-3) var(--s-4); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: var(--s-5); width: max-content; animation: slide 26s linear infinite; }
.marquee span { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--ink-3); white-space: nowrap; }
.marquee span b { color: var(--brand); }
@keyframes slide { to { transform: translateX(-50%); } }

/* 首页：单栏文章流（居中舒适列宽，而非铺满 1180） */
.posts-single { max-width: var(--col); margin-inline: auto; padding: var(--s-7) 0 var(--s-9); }
.posts-single > .section-head { margin-bottom: var(--s-5); }
.posts { display: flex; flex-direction: column; gap: var(--s-5); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-2); }
.section-head h2 { font-size: var(--fs-lg); }
.section-head a { font-size: var(--fs-sm); font-weight: 600; }

/* Post card — 单栏流中的竖向卡片，悬停左侧品牌强调条（无留白占位） */
.card { container-type: inline-size; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-sm); transition: transform var(--t-norm), box-shadow var(--t-norm), border-color var(--t-norm); }
.card::before { content: ""; position: absolute; left: 0; top: var(--s-5); bottom: var(--s-5); width: 3px; border-radius: 999px; background: transparent; transition: background var(--t-norm); }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--line-strong); }
.card:hover::before { background: linear-gradient(var(--brand), var(--c-code)); }
.card--lead { padding: var(--s-6); }
.card--lead::before { top: var(--s-6); bottom: var(--s-6); }
.card-media { margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-4); aspect-ratio: 16/9; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); border-bottom: 1px solid var(--line); }
.card--lead .card-media { margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-4); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card .meta { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); margin-bottom: var(--s-3); flex-wrap: wrap; }
.card h3 { font-size: var(--fs-lg); margin-bottom: var(--s-2); line-height: 1.25; }
.card--lead h3 { font-size: var(--fs-xl); }
.card h3 a { color: var(--ink); background-image: linear-gradient(var(--brand), var(--brand)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--t-norm); }
.card:hover h3 a { background-size: 100% 2px; }
.card p { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 var(--s-4); }
.card .foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.card .tags { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--c-code)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: var(--fs-xs); flex: none; object-fit: cover; }

/* 归档/列表页：单栏 + 底部设计感面板条（非“侧栏掉到底部”的半成品） */
.feed { max-width: var(--col); margin-inline: auto; }
.sidebar { margin-top: var(--s-7); display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .sidebar { grid-template-columns: repeat(3, 1fr); } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); box-shadow: var(--sh-sm); }
.panel h4 { font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.about { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-3); }
.about .avatar { width: 40px; height: 40px; font-size: var(--fs-md); }
.cat-list { display: flex; flex-direction: column; }
.cat-list a { display: flex; justify-content: space-between; align-items: center; color: var(--ink-2); font-size: var(--fs-sm); padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.cat-list a:last-child { border-bottom: none; }
.cat-list a:hover { color: var(--brand); }
.cat-list .n { color: var(--ink-3); font-size: var(--fs-xs); background: var(--surface-2); border-radius: var(--r-pill); padding: 0.05rem 0.5rem; }
.news { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.news input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.55rem 0.9rem; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--fs-sm); }
.news input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring); }

/* ============================================================
   文章页 — 单栏居中，宽阅读区，清晰层级
   ============================================================ */
.article-page {
  max-width: var(--reading);
  margin-inline: auto;
  padding: var(--s-7) 0 var(--s-9);
}
.article-page > .chip { margin-bottom: var(--s-4); }
.article-page > h1 { font-size: var(--fs-2xl); margin-bottom: var(--s-4); line-height: 1.15; }
.article-page .lede { font-size: var(--fs-md); color: var(--ink-2); margin-bottom: var(--s-5); line-height: 1.65; }
.byline { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-5); margin-bottom: var(--s-5); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-3); flex-wrap: wrap; }

/* 正文内容区 */
.post-content { margin-top: var(--s-5); }
.post-content > h2 { font-size: var(--fs-xl); margin: var(--s-7) 0 var(--s-3); padding-top: var(--s-2); }
.post-content > h3 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); }
.post-content > h4 { font-size: var(--fs-md); font-weight: 600; margin: var(--s-4) 0 var(--s-2); }
.post-content > p { margin: 0 0 var(--s-4); line-height: 1.8; }
.post-content > p:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 2.8em; line-height: 1;
  float: left; padding: 0.06em 0.12em 0 0; color: var(--brand); font-weight: 700;
}
.post-content blockquote {
  margin: var(--s-5) 0; padding: var(--s-4) var(--s-5);
  border-left: 4px solid var(--brand); background: var(--brand-soft);
  border-radius: 0 var(--r-md) var(--r-md) 0; color: var(--ink); font-size: var(--fs-md);
}
.post-content blockquote p { margin: 0; }
.post-content pre {
  border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: var(--r-md);
  padding: var(--s-4); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.7;
  /* 背景跟随主题（暖色 / 暗色自动切换），覆盖 chroma 硬编码冷灰 */
  background: var(--code-bg);
}
/* 语言标签（chroma 在 pre 上加 language-xxx，无高亮时也有用） */
.post-content pre[data-lang]::before,
.post-content pre[class*="language-"]::before {
  content: attr(data-lang); display: block; font-size: var(--fs-xs);
  color: var(--ink-3); margin-bottom: var(--s-2); letter-spacing: 0.04em; text-transform: uppercase;
}
.post-content code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--surface-2); padding: 0.15em 0.4em; border-radius: 6px;
}
.post-content pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }

/* 代码块折叠：可折叠/展开，长代码默认折叠（JS 在 js/code-fold.js 注入操作栏） */
.code-block {
  position: relative; margin: var(--s-5) 0;
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-md);
  background: var(--code-bg); overflow: hidden;
  box-shadow: var(--sh-sm);
}
.code-block__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.45rem 0.75rem;
  background: color-mix(in oklch, var(--line) 35%, var(--surface));
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--ink-3); user-select: none;
}
.code-block__meta { display: inline-flex; align-items: center; gap: var(--s-3); }
.code-block__lang { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); }
.code-block__lines { color: var(--ink-3); }
.code-block__toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem;
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: var(--fs-xs); font-weight: 600;
  padding: 0.3rem 0.7rem; border-radius: var(--r-pill); cursor: pointer;
  transition: all var(--t-fast);
}
.code-block__toggle:hover { color: var(--brand); border-color: var(--brand); }
.code-block__toggle .chev { transition: transform var(--t-fast); }
.code-block pre {
  margin: 0; border: none; border-radius: 0; background: transparent;
  max-height: none; transition: max-height var(--t-norm);
}
/* 抑制旧式 pre 语言标签，避免与折叠栏重复 */
.code-block pre[data-lang]::before,
.code-block pre[class*="language-"]::before { content: none; }
.code-block.is-collapsed pre { max-height: 3.4em; overflow: hidden; position: relative; }
.code-block.is-collapsed pre::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.2em;
  background: linear-gradient(transparent, var(--code-bg)); pointer-events: none;
}
.code-block.is-collapsed .code-block__bar { border-bottom: none; }

/* 语法高亮配色由 css/highlight.css（github + github-dark）统一接管，明暗主题自适应 */
.post-content ul, .post-content ol { padding-left: 1.4em; margin: 0 0 var(--s-4); }
.post-content li { margin-bottom: var(--s-2); line-height: 1.7; }
.post-content li > ul, .post-content li > ol { margin-top: var(--s-2); margin-bottom: 0; }
.post-content img {
  border-radius: var(--r-md); margin: var(--s-5) 0;
  /* 外链图片不加边框，避免双重边框 */
  border: none;
}
.post-content figure { margin: var(--s-5) 0; }
.post-content figcaption { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s-2); text-align: center; }
.post-content table {
  width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: var(--fs-sm);
}
.post-content th, .post-content td { border: 1px solid var(--line); padding: var(--s-2) var(--s-3); text-align: left; }
.post-content th { background: var(--surface-2); font-weight: 600; }
.post-content hr { border: none; height: 1px; background: var(--line); margin: var(--s-6) 0; }
.post-content a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.post-content a:hover { text-decoration-thickness: 2px; }

/* TOC：折叠式目录（桌面端默认展开，移动端折叠） */
.toc-details {
  margin: var(--s-5) 0; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--sh-sm);
}
.toc-details summary {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); cursor: pointer;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-sm); color: var(--ink-2);
  list-style: none; user-select: none;
  transition: color var(--t-fast);
}
.toc-details summary::-webkit-details-marker { display: none; }
.toc-details summary::after { content: "▾"; margin-left: auto; font-size: 0.85em; transition: transform var(--t-fast); }
.toc-details[open] summary::after { transform: rotate(180deg); }
.toc-details summary:hover { color: var(--ink); }
.toc-nav { padding: 0 var(--s-4) var(--s-4); border-top: 1px solid var(--line); }
.toc-nav ul { list-style: none; margin: 0; padding: var(--s-3) 0 0; display: flex; flex-direction: column; gap: 0.25rem; }
.toc-nav ul ul { margin-left: var(--s-3); margin-top: 0.25rem; gap: 0.15rem; }
.toc-nav a {
  color: var(--ink-2); font-size: var(--fs-sm);
  border-left: 2px solid var(--line); padding: 0.3rem var(--s-3);
  transition: all var(--t-fast); display: block;
}
.toc-nav a:hover, .toc-nav a.active { color: var(--brand); border-color: var(--brand); }

/* 文章布局：桌面端仅在有目录时启用双栏（Flexbox），无目录时纯居中 */
.article-layout { max-width: var(--reading); margin-inline: auto; padding-inline: var(--s-4); }
@media (min-width: 1080px) {
  /* 有 TOC → 双栏布局（正文 + 右侧粘性目录） */
  .article-layout:has(.toc-side) {
    display: flex;
    justify-content: center;
    gap: var(--s-7);
    align-items: flex-start;
    max-width: calc(var(--reading) + 280px);
    padding-inline: var(--s-4);
  }
  .article-layout:has(.toc-side) .article-page { max-width: var(--reading); margin-inline: 0; flex-shrink: 0; }
  .article-layout:has(.toc-side) .toc-side {
    width: 220px; flex-shrink: 0;
    position: sticky; top: 88px;
    align-self: flex-start;
  }
  .article-layout:has(.toc-side) .toc-details { background: none; border: none; box-shadow: none; margin: 0; border-radius: 0; }
  .article-layout:has(.toc-side) .toc-details summary { padding-left: 0; color: var(--ink); }
  .article-layout:has(.toc-side) .toc-nav { border-top: none; padding: var(--s-3) 0 0; }

  /* 无 TOC → 纯居中，不受任何偏移影响 */
  .article-layout:not(:has(.toc-side)) {
    max-width: var(--reading);
    margin-inline: auto;
    padding-inline: var(--s-4);
  }
}

.post-foot { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-6); }
.author-card { display: flex; gap: var(--s-4); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); margin-top: var(--s-6); box-shadow: var(--sh-sm); }
.author-card .avatar { width: 56px; height: 56px; font-size: var(--fs-md); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-6); }
.pager a { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-4); transition: all var(--t-fast); }
.pager a:hover { border-color: var(--brand); transform: translateY(-2px); }
.pager span { font-size: var(--fs-xs); color: var(--ink-3); }
.pager strong { display: block; color: var(--ink); font-family: var(--font-display); margin-top: 0.2rem; font-weight: 600; }
.pager .next { text-align: right; }

/* Search modal */
.search-modal { position: fixed; inset: 0; z-index: 150; display: none; }
.search-modal.open { display: block; }
.search-backdrop { position: absolute; inset: 0; background: oklch(0.2 0.02 50 / 0.45); backdrop-filter: blur(4px); }
.search-box { position: relative; max-width: 620px; margin: 12vh auto 0; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; }
.search-box input { width: 100%; border: none; outline: none; background: transparent; color: var(--ink); font: inherit; font-size: var(--fs-md); padding: var(--s-5) var(--s-5); }
.search-results { max-height: 56vh; overflow: auto; border-top: 1px solid var(--line); }
.search-result { display: block; padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line); }
.search-result:hover { background: var(--surface-2); }
.search-result strong { display: block; color: var(--ink); font-family: var(--font-display); }

/* 评论区（Waline）— 视觉融入 Lumen 主题，原生 DOM 不受 iframe 限制 */
.comments { max-width: var(--reading); margin: var(--s-7) auto 0; }
.comments__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
}
.comments__title::before {
  content: ""; width: 4px; height: 1.1em; border-radius: 2px;
  background: var(--brand); display: inline-block;
}
/* 匿名访客的登录提醒条（force 登录模式下代替评论框显示，避免整页跳转） */
.comments__notice {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: color-mix(in oklch, var(--brand) 8%, var(--surface-2));
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--ink-2);
  line-height: 1.6;
}
.comments__notice[hidden] { display: none; }
.comments__notice-icon { font-size: 1.05em; line-height: 1; }
.comments__notice-link {
  color: var(--brand); font-weight: 600; text-decoration: none;
  margin-left: 0.25rem; white-space: nowrap;
}
.comments__notice-link:hover { text-decoration: underline; }
/* 聚焦态高亮跟随品牌色，与全站输入框一致 */
.wl-editor:focus-within,
.wl-input:focus,
.wl-react-popup:focus-within {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
}

/* Waline 卡片圆角与主题 .card 统一 (8px)；输入/按钮保持微圆角 (6px) */
.wl-card, .wl-panel { border-radius: var(--r-lg) !important; }
.wl-header, .wl-footer, .wl-reaction, .wl-content,
.wl-editor, .wl-input, .wl-btn, .wl-emoji-popup, .wl-dropdown-menu {
  border-radius: var(--r-md) !important;
}
.search-result span { font-size: var(--fs-xs); color: var(--ink-3); }
.search-empty { padding: var(--s-5); color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }

/* Pagination */
.pagination { display: flex; gap: var(--s-2); justify-content: center; align-items: center; padding: var(--s-6) 0; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 0.6rem; border-radius: var(--r-sm); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-sm); transition: all var(--t-fast); }
.pagination a:hover { border-color: var(--brand); color: var(--brand); }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Terms (tags/categories index) */
.terms { display: flex; flex-wrap: wrap; gap: var(--s-3); padding: var(--s-6) 0; }
.terms a { font-size: var(--fs-md); font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0.5rem 1.1rem; transition: all var(--t-fast); }
.terms a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.terms a span { color: var(--ink-3); font-weight: 400; font-size: var(--fs-xs); margin-left: 0.4rem; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); margin-top: var(--s-8); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); padding: var(--s-8) 0; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.6fr; } }
.brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.brand img { height: 26px; width: auto; border-radius: var(--r-sm); }
.footer-grid a.brand { display: inline-flex; }
.footer-tags { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.footer-tags .tag { font-size: var(--fs-xs); padding: 0.15rem 0.55rem; border-color: transparent; background: transparent; }
.footer-tags .tag:hover { border-color: var(--line); background: var(--surface-1); }
.footer-grid h4 { font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.footer-grid a { display: block; color: var(--ink-2); font-size: var(--fs-sm); padding: 0.25rem 0; }
.footer-grid a:hover { color: var(--brand); }
.footer-bottom { border-top: 1px solid var(--line); padding: var(--s-4) 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); }

/* Comments placeholder */
.comments { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.comments h3 { font-size: var(--fs-lg); margin-bottom: var(--s-3); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); animation: rise 0.7s var(--ease-out) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* Mobile nav */
@media (max-width: 820px) {
  .nav-burger { display: grid; }
  .nav-links { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding: var(--s-3); margin: 0; display: none; }
  .nav-links.open { display: flex; }
  .nav-links a { border-radius: var(--r-sm); }
  /* 移动端 TOC 默认折叠 */
  .toc-details:not([open]) summary { }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .marquee-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
}