/* ============================================================================
   博客 · 样式

   视觉参考 gr3yph4ntom.cn（WordPress · Sakurairo 主题）。下面每个数值都是从
   那个站**实际量出来的**（getComputedStyle），不是凭感觉调的：

     背景      rgb(235,231,224)  = #EBE7E0   米色
     正文色    rgb(17,17,17)     = #111
     正文字体  Courier Prime（拉丁）/ Noto Serif SC（中文）  16px / weight 300
     内容宽    820px（1440 屏上居中，两侧留白 310px）
     卡片      820×300，白底，圆角 12px，1px 描边 rgba(180,175,165,.8)
               阴影 0 10px 30px rgba(0,0,0,.1)
     缩略图    绝对定位，铺满右半边（654px 宽），全出血到卡片边
     日期/元信息 绝对定位压在图上：rgba(51,51,51,.376) 底，圆角 8px，
               1px 描边 rgba(125,125,125,.19)，字 12px
     标题      绝对定位，白底圆角 12px 浮在缩略图左下
     头像      120×120，圆角 24px（方形圆角，不是圆形）

   两套主题：默认浅色（就是那个米色），深色是给夜里看文章用的。
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Noto+Serif+SC:wght@300;400;600;700&display=swap');

:root {
  --bg: #ebe7e0;
  --bg-card: #ffffff;
  --bg-soft: #f3f0ea;
  --text: #111111;
  --text-soft: rgba(0, 0, 0, .66);
  --muted: rgba(0, 0, 0, .42);
  --line: rgba(180, 175, 165, .8);
  --line-soft: rgba(180, 175, 165, .45);
  --accent: #c27070;
  --accent-soft: #e0a4a4;
  --tag-bg: rgba(51, 51, 51, .376);
  --tag-border: rgba(125, 125, 125, .19);
  --shadow: 0 10px 30px rgba(0, 0, 0, .1);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .07);
  --radius: 12px;
  --radius-sm: 8px;
  --font-mono: "Courier Prime", ui-monospace, Menlo, Consolas, monospace;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
  --font-sans: var(--font-serif);
  --nav-h: 70px;
  --content-w: 820px;
}

[data-theme="dark"] {
  --bg: #1a1a18;
  --bg-card: #24241f;
  --bg-soft: #2c2c26;
  --text: #e8e5de;
  --text-soft: rgba(255, 255, 255, .7);
  --muted: rgba(255, 255, 255, .42);
  --line: rgba(120, 115, 105, .5);
  --line-soft: rgba(120, 115, 105, .3);
  --accent: #d98d8d;
  --accent-soft: #b87777;
  --tag-bg: rgba(255, 255, 255, .14);
  --tag-border: rgba(255, 255, 255, .12);
  --shadow: 0 10px 30px rgba(0, 0, 0, .42);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; transition: color .18s, opacity .18s; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.4; }
code, pre, kbd { font-family: var(--font-mono); }
::selection { background: var(--accent); color: #fff; }
img { max-width: 100%; height: auto; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.grow { flex: 1; }
.ic {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── 阅读进度条 ── */
.progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 0; z-index: 90;
  background: var(--accent);
  transition: width .1s linear;
}

/* ── 顶部浮动导航（两个胶囊并排，不占满整行） ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 12px;
  padding: 18px 40px;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }

.site-title {
  display: inline-flex; align-items: center;
  height: 33px; padding: 0 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}
.site-title:hover { color: var(--accent); }

.nav {
  display: inline-flex; align-items: center; gap: 2px;
  height: 33px; padding: 0 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.nav > a {
  position: relative;
  padding: 3px 11px; border-radius: 999px;
  font-size: 13.5px; font-weight: 400; color: var(--text-soft);
  transition: color .16s, background .16s;
}
.nav > a:hover { color: var(--accent); }

/*
 * 当前页的选中态。
 *
 * 参考站只是"加粗变黑"，实话说太弱了 —— 在一排文字里几乎看不出自己在哪一页。
 * 这里在它基础上补两个更明确的信号：
 *   · 底部一条圆角短横线（accent 色）
 *   · 背景淡淡的药丸底
 * 还是同一个色系，不破坏整体的克制感。
 */
.nav > a.on {
  color: var(--text); font-weight: 600;
  background: var(--bg-soft);
}
.nav > a.on::after {
  content: '';
  position: absolute; left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: 16px; height: 2px; border-radius: 2px;
  background: var(--accent);
}
.nav-sep {
  width: 1px; height: 15px; background: var(--line-soft);
  margin: 0 7px; flex: none;
}
.nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--text-soft); cursor: pointer;
  transition: color .16s, background .16s;
}
.nav-icon:hover { color: var(--accent); background: var(--bg-soft); }
.nav-icon .ic { width: 15px; height: 15px; }
.nav-icon .ic-moon { display: none; }
[data-theme="dark"] .nav-icon .ic-sun { display: none; }
[data-theme="dark"] .nav-icon .ic-moon { display: flex; }

/* ── 全屏落地页 ── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(var(--nav-h) + 20px) 20px 60px;
  position: relative;
  flex: none;
}
.hero-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 26px; text-align: center;
}
.hero-avatar {
  display: block;
  width: 120px; height: 120px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow);
  animation: floatY 6s ease-in-out infinite;
}
.hero-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-avatar-text {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 46px; font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero-typing {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-soft);
  min-height: 1.6em;
  letter-spacing: .5px;
}
.hero-typing .typed {
  display: inline-block;
  overflow: hidden; white-space: nowrap;
  border-right: 0;
  max-width: 0;
  animation: typing 2.6s steps(32, end) .3s forwards;
}
@keyframes typing { to { max-width: 40em; } }
.hero-typing .caret {
  display: inline-block;
  color: var(--accent);
  animation: blink 1s step-end infinite;
  margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-social {
  display: flex; align-items: center; gap: 10px;
}
.hero-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-soft);
  box-shadow: var(--shadow-sm);
  transition: transform .18s, color .18s, box-shadow .18s;
}
.hero-social a:hover {
  transform: translateY(-3px);
  color: var(--accent);
  box-shadow: var(--shadow);
}
.hero-social .ic { width: 16px; height: 16px; }

.scroll-down {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  color: var(--muted);
  animation: bounce 2s ease-in-out infinite;
}
.scroll-down .ic { width: 22px; height: 22px; }
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ── 主体 ── */
.content {
  flex: 1;
  width: 100%;
  max-width: calc(var(--content-w) + 40px);
  margin: 0 auto;
  padding: 0 20px 80px;
}
.content-pad { padding-top: calc(var(--nav-h) + 46px); }

/* 分区标题：小图标 + 英文标题（照参考站的 Status / Article） */
.section-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px;
}
.section-head h2 {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-serif);
  font-size: 18px; font-weight: 400;
  letter-spacing: .3px;
  color: var(--text);
}
.section-head .ic { width: 17px; height: 17px; color: var(--text-soft); }

/* ── 统计胶囊（Status 区） ── */
.stat-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 46px;
}
.stat-capsule {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 5.6px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(184, 122, 43, .25);
  font-family: var(--font-mono);
  font-size: 13.6px;
  min-width: 110px;
}
.stat-label { color: var(--muted); font-size: 11.5px; }
.stat-value { color: var(--text); font-weight: 700; }

/* ── 文章卡片（Sakurairo post-list-thumb） ── */
.post-list { display: flex; flex-direction: column; gap: 22px; }

.post-card {
  position: relative;
  height: 300px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
}

/* 缩略图：绝对定位铺满右侧（flip 时换到左侧） */
.post-thumb {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 654px; max-width: 80%;
  overflow: hidden; display: block;
}
.post-card.flip .post-thumb { right: auto; left: 0; }
.post-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-thumb-fallback { display: block; width: 100%; height: 100%; }

/* 摘要：卡片左侧竖排 */
.post-excerpt-wrap {
  position: relative;
  width: 150px;
  height: 100%;
  padding: 16px 10px 16px 14px;
  display: flex; flex-direction: column;
  z-index: 2;
}
.post-card.flip .post-excerpt-wrap {
  margin-left: auto; padding: 16px 14px 16px 10px;
}
.post-excerpt-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--muted);
  margin-bottom: 7px; flex: none;
}
.post-excerpt-label .ic { width: 12px; height: 12px; }
.post-excerpt {
  font-size: 15px; line-height: 1.7;
  color: var(--text-soft);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}

/* 日期 / 元信息：压在缩略图上的半透明胶囊 */
.post-date,
.post-meta {
  position: absolute;
  top: 11px;
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 5px 10px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, .8);
  font-size: 12px; font-weight: 400;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 3;
  white-space: nowrap;
}
.post-date { left: 175px; }
.post-meta { right: 15px; }
.post-meta span { display: inline-flex; align-items: center; gap: 4px; }
.post-meta span + span { margin-left: 9px; }
.post-meta a { color: inherit; }
.post-meta a:hover { color: #fff; }
.post-date .ic, .post-meta .ic { width: 12px; height: 12px; opacity: .9; }
.post-card.flip .post-date { left: 15px; }

/* 标题：白底卡片浮在缩略图左下 */
.post-title {
  position: absolute;
  left: 186px;
  bottom: 46px;
  max-width: 62%;
  padding: 10px 15px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-serif);
  font-size: 16px; font-weight: 400;
  color: var(--text);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  z-index: 3;
  transition: color .18s;
}
.post-title:hover { color: var(--accent); }
.post-card.flip .post-title { left: auto; right: 186px; }

/* ── 分页 ── */
.pager {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 40px; font-family: var(--font-mono); font-size: 13.5px;
}
.pager a {
  padding: 7px 18px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--line);
  color: var(--text-soft); box-shadow: var(--shadow-sm);
}
.pager a:hover { color: var(--accent); border-color: var(--accent); }
.pager-now { color: var(--muted); }

/* ── 列表页标题（标签/归档/搜索） ── */
.list-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 26px; flex-wrap: wrap;
}
.list-head h1 {
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 400;
  letter-spacing: .3px;
}
.list-head .count { color: var(--muted); font-size: 13px; font-family: var(--font-mono); }
.empty {
  color: var(--muted); padding: 60px 0; text-align: center;
  font-size: 14.5px;
}

/* ── 文章页 ── */
.post-head {
  margin-bottom: 30px; padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.post-head h1 {
  font-family: var(--font-serif);
  font-size: 30px; font-weight: 600;
  line-height: 1.45; margin-bottom: 14px;
}
.post-head .post-meta-line {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px; font-family: var(--font-mono);
}
.post-head .post-meta-line .ic { width: 13px; height: 13px; }
.post-head .post-tags { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }

.post-cover {
  width: 100%; border-radius: var(--radius); margin-bottom: 26px;
  display: block; box-shadow: var(--shadow);
}

/* 正文 */
.md-body {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.95;
  color: var(--text);
  font-weight: 300;
}
.md-body .md-p { margin: 0 0 20px; }
.md-body .md-h {
  margin: 36px 0 16px;
  font-size: 21px; font-weight: 600;
  padding-left: 13px;
  border-left: 3px solid var(--accent);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.md-body .md-ul, .md-body .md-ol { margin: 0 0 20px; padding-left: 26px; }
.md-body li { margin-bottom: 7px; }
.md-body .md-quote {
  margin: 0 0 20px; padding: 14px 20px;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-soft);
}
.md-body .md-quote .md-p:last-child { margin-bottom: 0; }
.md-body .md-hr { border: none; border-top: 1px dashed var(--line); margin: 30px 0; }
.md-body .md-link { color: var(--accent); border-bottom: 1px solid transparent; }
.md-body .md-link:hover { border-bottom-color: var(--accent); }
.md-body .md-img { border-radius: var(--radius-sm); box-shadow: var(--shadow); margin: 10px 0; }
.md-body strong { font-weight: 600; }
.md-body .md-table { border-collapse: collapse; width: 100%; margin: 0 0 20px; font-size: 14.5px; }
.md-body .md-table th, .md-body .md-table td {
  border: 1px solid var(--line-soft); padding: 9px 14px; text-align: left;
}
.md-body .md-table th { background: var(--bg-soft); font-weight: 600; }

/* 代码块 */
.code-block {
  margin: 0 0 22px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
}
.code-head {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
}
.code-lang { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.code-lines { margin-left: auto; }
.code-copy {
  background: transparent; border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 2px 9px; font-size: 11px; color: var(--text-soft);
  cursor: pointer; font-family: inherit; transition: all .16s;
}
.code-copy:hover { border-color: var(--accent); color: var(--accent); }
.md-pre {
  margin: 0; padding: 16px 18px; overflow-x: auto;
  background: var(--bg-soft);
  font-size: 13px; line-height: 1.75;
}
.md-pre code { font-family: var(--font-mono); }
.md-code {
  background: var(--bg-soft); padding: 2px 7px; border-radius: 5px;
  font-family: var(--font-mono); font-size: .9em;
  border: 1px solid var(--line-soft);
}
.tok-k { color: #b5451a; }
.tok-s { color: #1a6b2a; }
.tok-c { color: #8a949e; font-style: italic; }
.tok-n { color: #6b21a8; }
[data-theme="dark"] .tok-k { color: #ff9d6c; }
[data-theme="dark"] .tok-s { color: #a5d6a7; }
[data-theme="dark"] .tok-c { color: #6b7a8a; }
[data-theme="dark"] .tok-n { color: #d2a8ff; }

.h-anchor { opacity: 0; margin-left: -16px; padding-right: 6px; color: var(--accent); font-weight: 400; }
.md-body .md-h:hover .h-anchor { opacity: .55; }

/* 目录 */
.toc {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 22px; margin: 0 0 28px;
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
}
.toc-title {
  display: flex; align-items: center; gap: 7px;
  font-weight: 600; margin-bottom: 10px; color: var(--text-soft);
  font-size: 13px;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 5px 0; }
.toc li.lv3 { padding-left: 18px; font-size: 12.8px; }
.toc a { color: var(--text-soft); }
.toc a:hover, .toc a.on { color: var(--accent); }

/* 上下篇 */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 44px; }
.post-nav a {
  display: flex; flex-direction: column; gap: 5px;
  padding: 15px 20px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.post-nav a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--accent);
}
.post-nav .nav-label { font-size: 11.5px; color: var(--muted); font-family: var(--font-mono); }
.post-nav .nav-title { font-size: 14px; font-weight: 400; color: var(--text); }
.post-nav .next { text-align: right; grid-column: 2; }

/* ── 标签云 ── */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 17px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-soft); font-size: 13.5px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s, color .16s, border-color .16s;
}
.tag-cloud a:hover { transform: translateY(-2px); color: var(--accent); border-color: var(--accent); }
.tag-cloud .cnt { color: var(--muted); font-size: 11.5px; font-family: var(--font-mono); }

.tag {
  display: inline-block; padding: 2px 10px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 999px;
  color: var(--text-soft); font-size: 11.5px;
  transition: color .16s, background .16s;
}
.tag:hover { color: var(--accent); }

/* ── 归档 ── */
.archive-year { margin-bottom: 32px; }
.archive-year h2 {
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.archive-list li:last-child { border-bottom: 0; }
.archive-date {
  flex: none; color: var(--muted);
  font-size: 12.5px; font-family: var(--font-mono);
}
.archive-list a { color: var(--text-soft); }
.archive-list a:hover { color: var(--accent); }

/* ── 关于页 ── */
.about-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 38px;
  box-shadow: var(--shadow);
}

/* ── 搜索页 ── */
.search-page { display: flex; gap: 10px; margin-bottom: 30px; }
.search-page input {
  flex: 1; min-width: 0;
  padding: 11px 20px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-serif); font-size: 14.5px;
  outline: none; transition: border-color .16s, box-shadow .16s;
}
.search-page input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 112, 112, .14);
}
.search-page input::placeholder { color: var(--muted); }
.search-page button {
  padding: 11px 26px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-card); color: var(--text);
  font-family: var(--font-serif); font-size: 14.5px;
  box-shadow: var(--shadow-sm);
  transition: color .16s, border-color .16s, transform .16s;
}
.search-page button:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }

/* ── 页脚 ── */
.site-foot {
  border-top: 1px solid var(--line-soft);
  padding: 26px 20px;
}
.foot-inner {
  max-width: var(--content-w); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap;
  color: var(--muted); font-size: 12.5px; font-family: var(--font-mono);
}
.foot-main { display: flex; align-items: center; gap: 9px; }
.foot-sep { opacity: .45; }
.foot-links { display: flex; align-items: center; gap: 18px; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--accent); }

/* ── 窄屏 ── */
@media (max-width: 860px) {
  :root { --content-w: 100%; }
  .site-header { padding: 12px 14px; gap: 8px; height: auto; flex-wrap: wrap; }
  .site-title { height: 30px; padding: 0 15px; font-size: 14px; }
  .nav { height: 30px; padding: 0 10px; }
  .nav > a { padding: 2px 8px; font-size: 12.5px; }
  .nav-sep { margin: 0 4px; }

  .hero { min-height: 92vh; padding-top: 100px; }
  .hero-avatar { width: 92px; height: 92px; border-radius: 20px; }
  .hero-avatar-text { font-size: 36px; }
  .hero-typing { font-size: 13px; }
  .hero-social a { width: 32px; height: 32px; }
  .content { padding: 0 14px 60px; }
  .content-pad { padding-top: 96px; }

  .section-head h2 { font-size: 16px; }
  .stat-row { gap: 9px; margin-bottom: 34px; }
  .stat-capsule { min-width: 92px; padding: 5px 12px; font-size: 12.5px; }
  .stat-label { font-size: 10.5px; }

  /* 手机上卡片改成竖版：图在上、文在下 */
  .post-card { height: auto; }
  .post-thumb { position: relative; width: 100%; max-width: none; height: 170px; }
  .post-card.flip .post-thumb { left: auto; }
  .post-excerpt-wrap { width: 100%; padding: 14px; }
  .post-card.flip .post-excerpt-wrap { margin-left: 0; }
  .post-excerpt { -webkit-line-clamp: 3; font-size: 14px; }
  .post-date, .post-meta { top: 10px; height: 26px; font-size: 11px; padding: 4px 8px; }
  .post-date { left: 10px !important; }
  .post-meta { right: 10px; }
  .post-title {
    position: relative; left: auto !important; right: auto !important; bottom: auto;
    max-width: none; margin: 0 14px 14px; padding: 9px 13px; font-size: 15px;
  }
  .post-card.flip .post-title { right: auto; }

  .md-body { font-size: 15.5px; line-height: 1.9; }
  .md-body .md-h { font-size: 18.5px; }
  .post-head h1 { font-size: 23px; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { grid-column: 1; text-align: left; }
  .about-card { padding: 22px 20px; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
  .archive-list li { flex-wrap: wrap; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-typing .typed { max-width: 40em; }
}

/* ============================================================================
   后台（/admin）—— 只有本机能进

   重写前台样式时把这一整块漏掉了，导致后台变成浏览器默认样式（截图里那样）。
   现在补回来，并且和前台用同一套变量：
     · 左栏文章列表 + 右栏编辑器（左右分栏，宽屏才展开）
     · 编辑区左写右预览
     · 按钮统一成胶囊 + 白底描边
   ========================================================================== */

/* ── 通用按钮 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 16px;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-serif); font-size: 13.5px; font-weight: 400;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .16s, color .16s, border-color .16s, box-shadow .16s;
}
.btn:hover { transform: translateY(-1px); color: var(--accent); border-color: var(--accent); box-shadow: var(--shadow); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { color: #fff; background: var(--accent); border-color: var(--accent-soft); }

.mini {
  padding: 2px 9px; font-size: 11.5px; font-family: var(--font-serif);
  background: transparent; color: var(--text-soft);
  border: 1px solid var(--line-soft); border-radius: 999px;
  cursor: pointer; transition: color .16s, border-color .16s;
}
.mini:hover { color: var(--text); border-color: var(--line); }
.mini.danger:hover { color: #c0392b; border-color: #c0392b; }

/* ── 后台布局 ── */
.admin { max-width: 1180px; margin: 0 auto; }
/* 编辑器卡片不能被子元素撑破：overflow 兜底 + 内部元素允许收缩 */
.admin-editor { min-width: 0; }
.admin-grid > * { min-width: 0; }
.admin-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.admin-head h1 { font-size: 28px; font-weight: 400; letter-spacing: .3px; }
.admin-actions { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }
.admin > .muted { margin: 0 0 22px; line-height: 1.7; }
.admin > .muted code {
  background: var(--bg-soft); padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line-soft); font-size: 12px;
}

.admin-grid {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px;
  align-items: start;
}

/* 左栏：文章列表 */
.admin-list {
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 14px;
  position: sticky; top: calc(var(--nav-h) + 14px);
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow-y: auto;
}
.admin-list h2 {
  font-family: var(--font-serif); font-size: 13px; font-weight: 600;
  color: var(--muted); margin-bottom: 12px; letter-spacing: .5px;
}
.admin-list ul { list-style: none; margin: 0; padding: 0; }
.admin-list li {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.admin-list li:last-child { border-bottom: 0; }
.admin-list li > a { color: var(--text); font-weight: 400; line-height: 1.45; }
.admin-list li > a:hover { color: var(--accent); }
.admin-list li.is-draft > a { color: var(--muted); font-style: italic; }
.admin-list .muted { font-size: 11.5px; font-family: var(--font-mono); }
.admin-list .row-acts {
  display: flex; gap: 9px; align-items: center; margin-top: 2px;
}
.admin-list .row-acts a { font-size: 11.5px; color: var(--muted); }
.admin-list .row-acts a:hover { color: var(--accent); }

/* 右栏：编辑器 */
.admin-editor {
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
}

.fields {
  /* auto-fit + minmax：容器窄了自动减少列数，不会像固定 4 列那样把最后一列挤出卡片 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 11px 13px;
  margin-bottom: 15px;
}
.fields label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--muted); font-weight: 400;
}
.fields label.wide { grid-column: 1 / -1; }
.fields label.check {
  grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-soft); cursor: pointer;
}
.fields input[type="text"],
.fields input:not([type]),
.fields input[type="checkbox"] { font-family: var(--font-serif); }
.fields input:not([type="checkbox"]) {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 8px 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 13.5px; outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.fields input:not([type="checkbox"]):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 112, 112, .12);
}
.fields input::placeholder { color: var(--muted); }
.fields input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* 编辑 + 预览 分栏 */
.editor-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  align-items: stretch;
}
.editor-split textarea {
  width: 100%; min-height: 480px; resize: vertical;
  padding: 14px 16px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.75;
  outline: none; transition: border-color .16s, box-shadow .16s;
}
.editor-split textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 112, 112, .12);
}
.editor-split textarea::placeholder { color: var(--muted); }

.preview {
  min-height: 480px; max-height: 70vh; overflow-y: auto;
  padding: 14px 18px;
  background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.preview:empty::before {
  content: '右边会实时显示渲染结果 —— 发出去长什么样，这里就是什么样';
  color: var(--muted); font-size: 12.5px; line-height: 1.9;
}
/* 预览里的正文比文章页小一号，塞得下更多 */
.preview .md-body { font-size: 14.5px; line-height: 1.85; }
.preview .md-body .md-h { font-size: 17px; margin: 22px 0 10px; }
.preview .md-body .md-p { margin-bottom: 13px; }
.preview .md-pre { font-size: 12px; padding: 11px 13px; }
.preview .md-body .md-table { font-size: 12.5px; }

/* 编辑区底部 */
.editor-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 15px; padding-top: 15px;
  border-top: 1px solid var(--line-soft);
}
.editor-foot .muted { font-family: var(--font-mono); font-size: 12px; }

/* 编辑器「只看编辑」时隐藏预览 */
.editor-split.solo { grid-template-columns: 1fr; }
.editor-split.solo .preview { display: none; }

/* 后台窄屏 */
@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
  .admin-list { position: static; max-height: 260px; }
  .fields { grid-template-columns: 1fr 1fr; }
  .editor-split { grid-template-columns: 1fr; }
  .editor-split textarea { min-height: 320px; }
  .preview { min-height: 200px; max-height: 46vh; }
}
@media (max-width: 560px) {
  .fields { grid-template-columns: 1fr; }
  .admin-head h1 { font-size: 22px; }
  .admin-actions { margin-left: 0; width: 100%; }
  .admin-actions .btn { flex: 1; }
}

/* ── 后台面板切换 + 站点设置表单 ── */
.admin-panel[hidden] { display: none !important; }

.site-form {
  background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px 28px;
  max-width: 720px;
}
.site-form h2 {
  font-size: 18px; font-weight: 600; margin-bottom: 6px;
}
.site-form > .muted { margin: 0 0 20px; }
.site-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px;
}
.site-fields label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 12px; color: var(--muted);
}
.site-fields label.wide { grid-column: 1 / -1; }
.site-fields input {
  padding: 9px 13px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-family: var(--font-serif); font-size: 13.5px; outline: none;
  transition: border-color .16s, box-shadow .16s;
}
.site-fields input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(194, 112, 112, .12);
}
.site-fields input::placeholder { color: var(--muted); }

@media (max-width: 640px) {
  .site-fields { grid-template-columns: 1fr; }
  .site-form { padding: 18px 16px; }
}

/* ============================================================================
   后台：面板切换的 UI

   之前两个按钮只有"底色变粉"这一个信号，而且标题还固定写着"写文章"，
   切到站点设置后标题不变 —— 看起来就像"点了没反应"。

   现在三处一起给信号：
     1. 按钮：选中项实心 accent 底 + 白字 + 轻微内阴影，未选中是白底描边
     2. 标题：跟着面板变（写文章 / 站点设置）
     3. 内容：面板切换时淡入
   ========================================================================== */

/* 面板切换器做成一个整体的分段控件（segmented control），
   比三个散落的按钮更能表达"这是一组互斥选项" */
.admin-actions {
  position: relative;
  display: inline-flex; align-items: center; gap: 0;
  padding: 3px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
/* 滑块：用 JS 设 --slider-x / --slider-w，切换时它平滑滑过去，
   而不是两个按钮各自闪一下底色 —— 后者就是"生硬"的来源 */
.admin-actions::before {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: var(--slider-w, 0px); height: calc(100% - 6px);
  transform: translateX(var(--slider-x, 0px));
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(194, 112, 112, .32);
  transition: transform .32s cubic-bezier(.34, 1.4, .64, 1), width .32s cubic-bezier(.34, 1.4, .64, 1);
  z-index: 0;
}
.admin-actions .btn { position: relative; z-index: 1; }
.admin-actions .btn {
  border: 0; box-shadow: none; background: transparent;
  padding: 6px 15px; font-size: 13.5px;
  color: var(--text-soft);
}
.admin-actions .btn:hover { transform: none; color: var(--accent); box-shadow: none; }
.admin-actions .btn.btn-primary {
  background: transparent; color: #fff;
  box-shadow: none;
}
.admin-actions .btn.btn-primary:hover { color: #fff; }
/* 「关于页」是链接不是面板按钮，视觉上分开一点 */
.admin-actions > a.btn {
  margin-left: 4px; padding-left: 13px;
  border-left: 1px solid var(--line-soft) !important;
  border-radius: 0 999px 999px 0;
}

/* 面板淡入 */
.admin-panel { animation: panelIn .22s ease-out; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
}
.admin-panel[hidden] { display: none !important; animation: none; }

/* 后台标题跟着面板变 —— 由 JS 改 textContent */

/* ============================================================================
   主题切换 / 页面切换的过渡

   `document.startViewTransition()` 只是"拍两张快照然后交叉淡入"，
   但**默认时长极短、而且是整页一起淡**，所以看起来几乎等于硬切。
   要做出"平滑"的观感，必须自己写 ::view-transition 的动画：

     · 时长拉到 320ms（默认约 250ms，且被浏览器按内容量压缩）
     · 用 cubic-bezier(.4,0,.2,1) 这种"快出慢入"，比 linear 自然
     · 只淡一层，不做位移 —— 位移在长页面上会让人眼晕
   ========================================================================== */

@view-transition {
  navigation: auto;   /* 跨文档导航（点链接换页）也走这套过渡 */
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .32s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

/* 旧页面快速淡出、新页面稍慢淡入 —— 两边同速会显得"糊成一团" */
::view-transition-old(root) {
  animation-name: vt-fade-out;
  animation-duration: .22s;
}
::view-transition-new(root) {
  animation-name: vt-fade-in;
  animation-duration: .34s;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}
@keyframes vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 主题切换时，让"色块"整体过渡而不是每个元素各动各的 */
html.theme-anim,
html.theme-anim * {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease !important;
}

/* ── 后台面板切换的过渡 ──
   面板切换是纯 DOM 显隐，不走 view transition，
   所以自己给一个"淡入 + 轻微上浮"，比瞬间出现舒服 */
.admin-panel { animation: panelIn .26s cubic-bezier(.4, 0, .2, 1); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.admin-panel[hidden] { display: none !important; animation: none; }

/* 尊重"减弱动效"：全部关掉 */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .admin-panel { animation: none !important; }
}


/* 站内跳转的淡出（JS 加 .leaving 触发，120ms 后真正跳转） */
html.leaving body {
  opacity: 0;
  transition: opacity .12s ease;
}
/* 例外：跳转瞬间不要把固定定位的进度条也带走，否则会看到它突然消失 */
html.leaving .progress { opacity: 1; }

/* ============================================================================
   后台宽屏容器

   问题：后台沿用了前台 820px 的内容宽度，导致
     · 编辑器只有 562px，字段被挤成 3 列
     · 编辑/预览各 253px，写长行 Markdown 很憋屈
     · 左边 240px 的列表 + 右边 562px 的编辑器，高度差 600px，视觉上塌一边
   后台是"工作界面"，不是"阅读界面"，该用屏幕宽度。
   ========================================================================== */
.content.content-wide {
  max-width: 1240px;
  padding-left: 28px;
  padding-right: 28px;
}

/* 左栏固定 260，右栏吃掉剩余空间 */
.content-wide .admin-grid {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
}

/* 编辑器卡片：让内部元素能正常收缩 */
.content-wide .admin-editor { min-width: 0; }

/* 字段：宽屏下 4 列，太窄自动降 */
.content-wide .fields {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* 编辑/预览两栏各占一半，高度跟着视口走而不是写死 480px */
.content-wide .editor-split {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
/* 高度别用 calc(100vh - 固定值)：420px 只是猜的，视口一变就会把页脚顶出屏幕。
   改成"跟随内容 + 上限"，textarea 自己会撑开，页面还能滚。 */
.content-wide .editor-split textarea,
.content-wide .preview {
  min-height: 460px;
  max-height: 68vh;
}

/* 左栏列表跟着长，别只占 240px 高 */
.content-wide .admin-list {
  max-height: calc(100vh - 200px);
}

@media (max-width: 1000px) {
  .content.content-wide { max-width: 100%; padding-left: 14px; padding-right: 14px; }
  .content-wide .admin-grid { grid-template-columns: 1fr; }
  .content-wide .admin-list { max-height: 300px; position: static; }
  .content-wide .editor-split { grid-template-columns: 1fr; }
  .content-wide .editor-split textarea,
  .content-wide .preview { min-height: 320px; height: auto; max-height: 50vh; }
}

/* 站点设置面板的底部（原来和编辑器的 .editor-foot 撞名，导致 JS 选到隐藏的那个） */
.site-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 15px;
  border-top: 1px solid var(--line-soft);
}
.site-foot .muted { font-family: var(--font-mono); font-size: 12px; }

/* ============================================================================
   左栏高度对齐

   现状：左边"已有 N 篇"列表只有 240px 高，右边编辑器 950px，
   视觉上左边像被切掉了半截。两个修法：
     1. 左栏拉满到和右边同高（grid 的 align-items 已经是 start，改成 stretch）
     2. 列表内部自己滚动，不把外面撑开
   ========================================================================== */
/*
 * 左栏高度：**不要**用 align-items:stretch + height:100%。
 * 试过了 —— grid 的 stretch 遇到 position:sticky 的子元素会算错，
 * 左栏直接撑成 1904px 宽、右栏塌成 89px 高（截图里那一幕）。
 * 老老实实用 sticky + max-height，让左栏"跟着视口走但自己滚"。
 */
.content-wide .admin-list {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  position: sticky;
  top: calc(var(--nav-h) + 14px);
}
/* 空列表时也别塌成一小条 */
.admin-list ul:empty::after,
.admin-list li.muted {
  display: block; padding: 20px 0; text-align: center;
  color: var(--muted); font-size: 12.5px;
}

/* 页脚备案徽章：跟其他链接垂直居中对齐，别让 SVG 的基线把它顶歪 */
.foot-beian {
  display: inline-flex; align-items: center;
  line-height: 0;
  opacity: .9;
  transition: opacity .18s;
}
.foot-beian:hover { opacity: 1; }
.foot-beian img { display: block; }