/* ============================================================
   纸上春秋 · 站点样式（继承纸墨质感设计语言）
   章节：基础 / 进度条 / 导航 / 英雄区 / 筛选 / 文章网格 /
         日记详情 / 正文排版 / 目录 / 关于页 / 页脚 / 动效 / 响应式
   ============================================================ */

/* ---------- 1. 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;                          /* 锚点平滑滚动 */
  scroll-padding-top: calc(var(--nav-h) + 24px);    /* 固定导航偏移，标题不被遮挡 */
}

body {
  min-height: 100vh;
  /* 手工纸纹理：径向纸浆光斑 + 45° 细斜纹 */
  background-color: var(--color-paper);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(200, 180, 160, 0.08) 0%, transparent 50%),
    repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.015) 2px, rgba(0, 0, 0, 0.015) 4px);
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 2;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); }
::selection { background: rgba(192, 57, 43, 0.18); }
img { max-width: 100%; height: auto; }

/* ---------- 2. 阅读进度条 ---------- */
.progress {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  z-index: 300;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-deep));
  box-shadow: 0 0 8px rgba(192, 57, 43, 0.5);
  pointer-events: none;
}

/* ---------- 3. 顶部导航 ---------- */
.topnav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--nav-h);
  padding: 0 max(20px, calc((100vw - var(--page-max)) / 2));
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
/* 滚动后：半透明纸色 + 毛玻璃 */
.topnav.scrolled {
  background: var(--color-paper);
  background: color-mix(in srgb, var(--color-paper) 85%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--color-line);
}
.brand {
  font-family: var(--font-handwriting);
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--color-ink);
  text-decoration: none;
  position: relative;
}
.brand-seal {           /* 朱红小印 */
  position: absolute; right: -0.7em; bottom: 0.35em;
  width: 7px; height: 7px;
  background: var(--color-accent);
  border-radius: 1.5px;
  transform: rotate(6deg);
}
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  font-size: 0.92rem;
  letter-spacing: 0.15em;
  color: var(--color-ink-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.3s, border-color 0.3s;
}
.nav-links a:hover { color: var(--color-accent); }
.nav-links a.active { color: var(--color-ink); border-color: var(--color-accent); }
.theme-toggle {
  width: 38px; height: 38px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-soft);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
}
.theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); transform: rotate(18deg); }

/* ---------- 4. 英雄区 ----------
   布局要点：
   - flex 纵向 + min-height: 100vh（svh），占满视口
   - 主内容（印章/标题/副标题）包在 .hero-main 中整体垂直居中（略偏上）
   - 「向下翻阅」不再用 absolute 定位（曾与副标题重叠），
     改为 flex 子项 + margin-top: var(--hero-gap)，间距至少 2rem */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;              /* 至少占满视口高度 */
  min-height: 100svh;             /* 移动端地址栏收起时更精准 */
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) 24px 1.2rem;
  overflow: hidden;
}
.hero--slim {                     /* 关于页等短英雄区：不占满视口 */
  min-height: 0;
  padding-bottom: 2.6rem;
}
/* 主内容组：flex:1 占满提示器上方的全部空间，内部垂直居中 */
.hero-main {
  position: relative;             /* 建立层叠上下文，浮在装饰大字之上 */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding-bottom: calc(var(--hero-gap) * 0.75);   /* 视觉重心略偏上 */
}
.hero-deco {          /* 背景装饰大字（柳建毛草），水印层 */
  position: absolute; right: -1rem; top: -4rem;
  z-index: 0;                     /* 明确压在内容层之下，避免遮挡文字 */
  font-family: var(--font-deco);
  font-size: clamp(9rem, 26vw, 20rem);
  line-height: 1;
  color: var(--color-ink);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}
.hero-seal {          /* 2×2 朱红印章，弹簧入场 */
  display: grid; grid-template-columns: repeat(2, 1fr);
  place-items: center;
  width: 60px; height: 60px;
  margin: 0 auto 2rem;
  background: var(--color-accent);
  color: var(--color-paper);
  border-radius: 7px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 6px 14px rgba(147, 38, 28, 0.3);
  font-family: var(--font-handwriting);
  font-size: 1rem;
  line-height: 1;
  transform: rotate(-8deg);
  animation: seal-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s both;
}
@keyframes seal-in {
  from { transform: scale(0.45) rotate(10deg); opacity: 0; }
  to   { transform: scale(1) rotate(-8deg); opacity: 1; }
}
.hero-title {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4.2rem);
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  color: var(--color-ink);
  /* 墨迹晕染：三层半透明黑 */
  text-shadow:
    0 0 1px rgba(0, 0, 0, 0.16),
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 2px 5px rgba(0, 0, 0, 0.05);
}
.type-cursor {
  display: inline-block;
  width: 0.06em; height: 0.92em;
  margin-left: 0.14em;
  vertical-align: -0.1em;
  background: var(--color-accent);
  animation: cursor-blink 0.95s step-end infinite;
}
@keyframes cursor-blink { 50% { opacity: 0; } }
.hero-sub {
  margin-top: 1.4rem;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}
/* 副标题渐显：仅在 JS 可用时启用隐藏初始态 */
.js .hero-sub {
  opacity: 0; translate: 0 12px;
  transition: opacity 0.9s ease 0.2s, translate 0.9s ease 0.2s;
}
.js .hero-sub.show { opacity: 1; translate: 0 0; }
/* 「向下翻阅」：flex 子项固定在底部，margin-top 保证与主内容 ≥2rem 间距 */
.scroll-hint {
  position: relative;
  z-index: 1;
  flex-shrink: 0;                 /* 防止垂直空间不足时被压缩变形 */
  margin-top: var(--hero-gap, 2rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--color-ink-faint);
  font-size: 0.78rem; letter-spacing: 0.3em;
}
.scroll-hint .line {
  width: 1px; height: 40px;
  background: linear-gradient(var(--color-ink-faint), transparent);
  animation: drip 2.2s ease-in-out infinite;
}
@keyframes drip {
  0% { transform: scaleY(0); opacity: 0; }
  45% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- 5. 分类筛选条 ---------- */
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 24px 3rem; }
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  margin: 0 auto 1.8rem;
}
.chip {
  font-family: var(--font-handwriting);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  color: var(--color-ink-soft);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.3em 1.1em;
  cursor: pointer;
  transition: all 0.3s;
}
.chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.chip.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-paper); }
.filter-count { margin-left: auto; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--color-ink-faint); }

/* ---------- 6. 文章网格（沉浸式非对称排布） ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  grid-auto-flow: dense;          /* 密集回填，避免宽卡造成空洞 */
}
.post-card {
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  transition: transform 0.35s var(--ease-ink), box-shadow 0.35s ease, border-color 0.35s ease;
}
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--color-accent);
}
.post-card.card--featured { grid-column: span 2; }   /* 首篇焦点卡 */
.post-card:nth-child(4n) { grid-column: span 2; }    /* 杂志节奏：每 4 张一张宽卡 */
.post-card.hidden { display: none; }                 /* 分类筛选 */
.card-link {
  display: flex; flex-direction: column; height: 100%;
  padding: 1.5rem 1.6rem 1.3rem;
  color: inherit;
  text-decoration: none;
}
.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.tag {
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  border: 1px solid rgba(192, 57, 43, 0.4);
  border-radius: 999px;
  padding: 0.15em 0.85em;
  white-space: nowrap;
}
.date { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--color-ink-faint); }
.card-title {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.7rem;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
}
.card--featured .card-title { font-size: 1.9rem; }
.card-excerpt {
  flex: 1;
  color: var(--color-ink-soft);
  font-size: 0.92rem;
  line-height: 1.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.2rem; }
.more { font-size: 0.9rem; letter-spacing: 0.12em; color: var(--color-accent); }
.more .arrow { display: inline-block; transition: transform 0.3s ease; }
.post-card:hover .more .arrow { transform: translateX(5px); }
.meta { font-size: 0.78rem; color: var(--color-ink-faint); }
.empty { grid-column: 1 / -1; text-align: center; padding: 3rem 0; color: var(--color-ink-faint); }

/* ---------- 7. 日记详情页 ---------- */
.page--post { padding-top: 2rem; }
.post-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
/* 无目录时（#toc 处于 hidden，含 JS 未生成的情况）：网格折叠为单列，
   正文占满全宽，避免被塞进 220px 首列导致版面挤压 */
.post-layout:has(.toc[hidden]) { grid-template-columns: 1fr; }
.diary {
  position: relative;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: var(--shadow-paper);
  padding: clamp(1.6rem, 4vw, 3rem);
}
/* 顶部朱红短横（纸页压印感） */
.diary::before {
  content: '';
  position: absolute; top: -1px; left: 12%; right: 12%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}
.diary-meta { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1rem; flex-wrap: wrap; }
.diary-title {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.09), 0 2px 4px rgba(0, 0, 0, 0.04);
}
.diary-sub { color: var(--color-ink-faint); font-size: 0.86rem; letter-spacing: 0.12em; }
.diary-body { margin-top: 2.2rem; }

/* ---------- 8. Markdown 正文排版 ---------- */
.diary-body h2 {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: 0.05em;
  margin: 2.6em 0 0.8em;
}
.diary-body h2::before {        /* 朱红菱形记号 */
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 0.55em;
  background: var(--color-accent);
  transform: rotate(45deg);
  border-radius: 1px;
}
.diary-body h3 { font-size: 1.2rem; font-weight: 600; margin: 2em 0 0.7em; }
.diary-body p { margin-bottom: 1.2em; text-align: justify; }
.diary-body > p:first-of-type::first-letter {   /* 首字下沉（书法体） */
  font-family: var(--font-calligraphy);
  float: left;
  font-size: 3.2em;
  line-height: 1;
  margin: 0.1em 0.16em 0 0;
  color: var(--color-accent);
}
.diary-body a {
  text-decoration: underline;
  text-decoration-color: rgba(192, 57, 43, 0.35);
  text-underline-offset: 4px;
}
.diary-body blockquote {        /* 引用块：毛笔竖线 + 书法体 */
  position: relative;
  margin: 1.8em 0;
  padding: 0.6em 0 0.6em 2em;
  font-family: var(--font-calligraphy);
  font-size: 1.15em;
  line-height: 2;
  color: var(--color-ink);
}
.diary-body blockquote::before {
  content: '';
  position: absolute; left: 0; top: -0.5em; bottom: -0.5em;
  width: 6px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    rgba(192, 57, 43, 0) 0%, rgba(192, 57, 43, 0.5) 6%,
    rgba(192, 57, 43, 0.72) 16%, rgba(192, 57, 43, 0.3) 28%,
    rgba(192, 57, 43, 0.62) 42%, rgba(192, 57, 43, 0.2) 55%,
    rgba(192, 57, 43, 0.68) 70%, rgba(192, 57, 43, 0.3) 84%,
    rgba(192, 57, 43, 0) 100%);
  box-shadow: 2px 0 8px rgba(192, 57, 43, 0.12);
}
.diary-body pre {
  margin: 1.6em 0;
  padding: 1.1em 1.4em;
  overflow-x: auto;
  background: var(--color-paper-deep);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-accent);
  border-radius: 8px;
  font-family: var(--font-calligraphy);
  font-size: 0.92rem;
  line-height: 1.9;
  color: var(--color-ink);
}
.diary-body code {
  font-family: var(--font-calligraphy);
  font-size: 0.92em;
  background: rgba(192, 57, 43, 0.08);
  color: var(--color-accent-deep);
  padding: 0.08em 0.4em;
  border-radius: 4px;
}
.diary-body pre code { background: none; padding: 0; color: inherit; }
.diary-body ul { list-style: none; margin: 1em 0 1.4em; }
.diary-body ul li { position: relative; padding-left: 1.1em; margin-bottom: 0.45em; }
.diary-body ul li::before {     /* 墨点项目符号 */
  content: '';
  position: absolute; left: 0.1em; top: 0.85em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-ink);
  opacity: 0.65;
}
.diary-body ol { margin: 1em 0 1.4em; padding-left: 1.6em; }
.diary-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.9rem;
  background: var(--color-paper-card);
}
.diary-body th, .diary-body td {
  padding: 0.55em 0.9em;
  border: 1px solid var(--color-line);
  text-align: left;
}
.diary-body th { color: var(--color-accent); font-weight: 600; }
.diary-body img { border-radius: 8px; box-shadow: var(--shadow-paper); }
.diary-body hr {
  border: none;
  height: 2px;
  max-width: 55%;
  margin: 2.6em auto;
  background: linear-gradient(90deg, transparent, rgba(192, 57, 43, 0.35), transparent);
}

/* 上 / 下一篇导航 */
.diary-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 2.6rem; }
.nav-card {
  display: block;
  padding: 0.9em 1.2em;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s;
}
.nav-card:hover { border-color: var(--color-accent); transform: translateY(-3px); box-shadow: var(--shadow-paper); }
.nav-card--next { text-align: right; }
.nav-label { display: block; font-size: 0.78rem; letter-spacing: 0.15em; color: var(--color-ink-faint); margin-bottom: 0.2em; }
.nav-title { font-family: var(--font-handwriting); font-size: 1.05rem; color: var(--color-ink); }
.nav-card--empty { visibility: hidden; }

/* ---------- 9. 目录 ---------- */
.toc-side {
  position: sticky;
  top: calc(var(--nav-h) + 20px);
  max-height: calc(100vh - var(--nav-h) - 40px);
  overflow: auto;
  padding-right: 6px;
}
.toc { font-size: 0.88rem; }
.toc-head {
  font-family: var(--font-handwriting);
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}
.toc ul { list-style: none; }
.toc a {
  display: block;
  padding: 0.3em 0.8em;
  margin: 0.1em 0;
  color: var(--color-ink-soft);
  text-decoration: none;
  border-left: 2px solid var(--color-line);
  transition: all 0.3s;
}
.toc a:hover { color: var(--color-accent); }
.toc a.active {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: linear-gradient(90deg, rgba(192, 57, 43, 0.08), transparent);
}
.toc .lvl-h3 { padding-left: 1.6em; font-size: 0.84rem; }
/* 移动端折叠目录 */
.toc-mobile {
  margin-bottom: 1.6rem;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  background: var(--color-paper-card);
}
.toc-mobile summary {
  cursor: pointer;
  padding: 0.6em 1.1em;
  font-family: var(--font-handwriting);
  letter-spacing: 0.2em;
  color: var(--color-accent);
  list-style: none;
}
.toc-mobile summary::after { content: '＋'; float: right; }
.toc-mobile[open] summary::after { content: '－'; }
.toc-mobile-body { padding: 0 1.1em 0.8em; }
.toc-mobile-body a { display: block; padding: 0.25em 0.6em; color: var(--color-ink-soft); text-decoration: none; border-left: 2px solid var(--color-line); }
.toc-mobile-body a:hover { color: var(--color-accent); }

/* ---------- 10. 关于页 ---------- */
.page--about { max-width: 860px; }
.about-body { margin-top: 0.5rem; }
.about-body p { margin-bottom: 1.2em; text-align: justify; }
.drop-cap::first-letter {
  font-family: var(--font-calligraphy);
  float: left;
  font-size: 3.2em;
  line-height: 1;
  margin: 0.1em 0.16em 0 0;
  color: var(--color-accent);
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 2.4rem;
}
.about-card {
  padding: 1.2rem 1.3rem;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  box-shadow: var(--shadow-paper);
}
.about-card .ic { display: block; font-size: 1.3rem; color: var(--color-accent); margin-bottom: 0.5em; }
.about-card h3 { font-family: var(--font-handwriting); font-weight: 400; font-size: 1.1rem; margin-bottom: 0.4em; }
.about-card p { font-size: 0.88rem; color: var(--color-ink-soft); line-height: 1.8; }
.tokens { margin-top: 3.4rem; }
.sec-head { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 1.6rem; }
.sec-head .sec-no { font-family: var(--font-calligraphy); font-size: 1.3rem; color: var(--color-accent); }
.sec-head h2 { font-family: var(--font-handwriting); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.1em; }
.token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.token {
  font-size: 0.82rem;
  padding: 0.7em 1em;
  background: var(--color-paper-card);
  border: 1px dashed var(--color-line);
  border-radius: 8px;
  color: var(--color-accent-deep);
  overflow-x: auto;
}

/* ---------- 通用按钮与后台登录页 ---------- */
.btn {
  display: inline-block;
  padding: 0.45em 1.2em;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-paper);
  font-family: var(--font-handwriting);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
}
.btn:hover { background: var(--color-accent-deep); transform: translateY(-2px); box-shadow: var(--shadow-paper); }
.btn--ghost { background: transparent; color: var(--color-accent); }
.btn--danger { background: transparent; color: var(--color-accent); border-color: rgba(192, 57, 43, 0.5); }
.btn--danger:hover { background: var(--color-accent); color: var(--color-paper); }
.btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.btn--block { display: block; width: 100%; text-align: center; }

.page--login { max-width: 420px; padding-top: 2rem; }
.login-card {
  text-align: center;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: var(--shadow-paper);
  padding: 2.6rem 2.4rem 1.8rem;
}
.login-card .hero-seal { margin-bottom: 1.5rem; }
.login-title {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
}
.login-sub { color: var(--color-ink-faint); font-size: 0.85rem; letter-spacing: 0.2em; margin-bottom: 1.6rem; }
.login-error {
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.3);
  color: var(--color-accent-deep);
  font-size: 0.88rem;
  border-radius: 8px;
  padding: 0.5em 0.9em;
  margin-bottom: 1.2rem;
}
.login-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.login-form label {
  display: flex; flex-direction: column; gap: 0.35em;
  font-size: 0.85rem; letter-spacing: 0.1em;
  color: var(--color-ink-soft);
}
.login-form input[type="text"],
.login-form input[type="email"],
.login-form input[type="password"] {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.6em 0.9em;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.login-form input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.login-back { margin-top: 1.5rem; font-size: 0.85rem; }
.login-back a { color: var(--color-ink-faint); text-decoration: none; transition: color 0.3s; }
.login-back a:hover { color: var(--color-accent); }

/* ---------- 10.5 用户系统：表单控件 / 徽章 / 提示横幅 ---------- */
.sec-head .sec-note { margin-left: auto; font-size: 0.85rem; color: var(--color-ink-faint); letter-spacing: 0.1em; }

/* 状态徽章（待审核=赭黄 / 已发布=墨绿 / 已驳回=朱红灰） */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  border-radius: 999px;
  padding: 0.15em 0.85em;
  white-space: nowrap;
}
.badge--pending   { color: #9a6b2f; background: rgba(185, 141, 82, 0.15); border: 1px solid rgba(185, 141, 82, 0.45); }
.badge--published { color: #3f7d4e; background: rgba(63, 125, 78, 0.12); border: 1px solid rgba(63, 125, 78, 0.4); }
.badge--rejected  { color: #a94442; background: rgba(169, 68, 66, 0.1);  border: 1px solid rgba(169, 68, 66, 0.35); }

/* 提示横幅：成功=墨绿 / 错误=朱红 */
.banner { padding: 0.7em 1em; border-radius: 8px; font-size: 0.9rem; margin-bottom: 1.2rem; }
.banner--success { color: #3f7d4e; background: rgba(63, 125, 78, 0.1); border: 1px solid rgba(63, 125, 78, 0.35); }
.banner--error   { color: var(--color-accent-deep); background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.3); }

.muted { color: var(--color-ink-faint); font-size: 0.85rem; }
.form-actions { display: flex; align-items: center; gap: 0.8rem; }
.form-status { font-size: 0.85rem; }
.form-status.ok  { color: #3f7d4e; }
.form-status.err { color: var(--color-accent-deep); }

/* 投稿页：左右分栏（编辑 + 实时预览） */
.submit-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.submit-fields { display: flex; flex-direction: column; gap: 1.1rem; }
.submit-fields label {
  display: flex; flex-direction: column; gap: 0.4em;
  font-size: 0.88rem; letter-spacing: 0.1em;
  color: var(--color-ink-soft);
}
.submit-fields input[type="text"],
.submit-fields textarea {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.6em 0.9em;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.submit-fields input:focus,
.submit-fields textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.submit-fields textarea {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.88rem;
  line-height: 1.7;
  resize: vertical;
  min-height: 380px;
}
.submit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.submit-actions { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.preview-pane { position: sticky; top: calc(var(--nav-h) + 20px); }
.preview-label { font-size: 0.8rem; letter-spacing: 0.2em; color: var(--color-ink-faint); margin-bottom: 0.5em; }
.preview-body {
  min-height: 420px;
  max-height: 72vh;
  overflow: auto;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  font-size: 0.95rem;
}
/* 预览区正文（与后台预览一致的精简纸墨风格） */
.preview-body h2 {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.3rem;
  margin: 1.4em 0 0.6em;
  letter-spacing: 0.05em;
}
.preview-body h2::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 0.5em;
  background: var(--color-accent);
  transform: rotate(45deg);
  border-radius: 1px;
}
/* 预览区标题层级：h1 缩到预览窗适合的尺度、h3/h4 明确字号，
   否则会吃全局 2.6rem / 1.45rem 的大字号，在窄预览窗里显得“样式失效” */
.preview-body h1 {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  margin: 1.4em 0 0.6em;
}
.preview-body h1::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 0.5em;
  background: var(--color-accent);
  transform: rotate(45deg);
  border-radius: 1px;
}
.preview-body h3 { font-size: 1.05rem; font-weight: 600; margin: 1.2em 0 0.5em; }
.preview-body h4 { font-size: 0.95rem; font-weight: 600; margin: 1em 0 0.4em; }
.preview-body p { margin-bottom: 0.9em; text-align: justify; }
.preview-body blockquote {
  margin: 1.2em 0;
  padding: 0.3em 0 0.3em 1.4em;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-calligraphy);
  color: var(--color-ink-soft);
}
.preview-body pre {
  margin: 1.2em 0;
  padding: 0.9em 1.2em;
  overflow-x: auto;
  background: var(--color-paper-deep);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  font-family: Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.7;
}
.preview-body code {
  font-family: Consolas, monospace;
  font-size: 0.88em;
  background: rgba(192, 57, 43, 0.08);
  color: var(--color-accent-deep);
  padding: 0.08em 0.35em;
  border-radius: 4px;
}
.preview-body pre code { background: none; padding: 0; color: inherit; }
.preview-body ul { list-style: none; margin: 0.8em 0; }
.preview-body ul li { position: relative; padding-left: 1em; margin-bottom: 0.3em; }
.preview-body ul li::before {
  content: '';
  position: absolute; left: 0; top: 0.78em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-ink);
  opacity: 0.6;
}
.preview-body hr {
  border: none;
  height: 2px;
  margin: 2em auto;
  max-width: 60%;
  background: linear-gradient(90deg, transparent, rgba(192, 57, 43, 0.35), transparent);
}
.preview-body a { color: var(--color-accent); }
.preview-body table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: 1em 0; }
.preview-body th, .preview-body td { border: 1px solid var(--color-line); padding: 0.4em 0.7em; }

/* 个人中心 */
.page--profile { max-width: 860px; }
.profile-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  box-shadow: var(--shadow-paper);
  padding: 1.4rem 1.6rem;
  margin-bottom: 2.4rem;
}
.avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--color-accent);          /* 兜底色（正常由内联背景色覆盖） */
  color: var(--color-ink);                  /* 墨色首字母，与作者页头像一致 */
  border: 1.5px solid var(--color-accent);  /* 朱红描边，印章感 */
  font-family: var(--font-handwriting);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(147, 38, 28, 0.25);
}
.profile-name {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}
.profile-info p { font-size: 0.85rem; color: var(--color-ink-soft); }
.profile-stats { display: flex; gap: 0.7rem; margin-left: auto; }
.stat {
  display: flex; flex-direction: column; align-items: center;
  background: var(--color-paper-deep);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 0.45em 0.9em;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}
.stat b {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--color-ink);
}
.profile-forms { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-forms .login-form { gap: 1rem; }

/* 错误页大字 */
.err-code {
  font-family: var(--font-handwriting);
  font-size: 4rem;
  color: var(--color-accent);
  line-height: 1.2;
}

/* 用户系统响应式 */
@media (max-width: 900px) {
  .submit-layout,
  .profile-forms { grid-template-columns: 1fr; }
  .preview-pane { position: static; }
}
@media (max-width: 640px) {
  .nav-links .link-about { display: none; }   /* 关于移入页脚，给登录/注册腾位置 */
  .submit-row { grid-template-columns: 1fr; }
  .submit-fields textarea { min-height: 300px; }
  .profile-card { flex-direction: column; text-align: center; }
  .profile-stats { margin-left: 0; width: 100%; justify-content: center; }
  .sec-head .sec-note { margin-left: 0; width: 100%; }
}

/* ---------- 11. 页脚 ---------- */
.site-foot {
  text-align: center;
  padding: 2.2rem 24px 2.8rem;
  color: var(--color-ink-faint);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
}
.foot-note { margin-top: 0.4rem; font-size: 0.78rem; letter-spacing: 0.12em; }

/* 滚动渐入动画：translate 与 transform 相互独立——渐入用 translate，
   悬停上浮用 transform，二者互不干扰。
   仅当 <html class="js">（脚本正常加载）时隐藏初始态，避免 JS 异常导致整页不可见 */
.js .reveal {
  opacity: 0;
  translate: 0 26px;
  transition: opacity 0.8s ease var(--d, 0s), translate 0.8s ease var(--d, 0s);
}
.js .reveal.visible { opacity: 1; translate: 0 0; }

/* ---------- 13. 响应式 ---------- */
@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px) {
  body { font-size: 16px; }
  .post-layout { grid-template-columns: 1fr; }
  .toc-side { display: none; }       /* 侧栏目录交给 JS 生成的折叠目录 */
}
@media (max-width: 640px) {
  html { -webkit-text-size-adjust: 100%; }        /* 防止 iOS 横竖屏切换时文字自动放大 */

  /* —— 导航 —— */
  .topnav { padding: 0 14px; }
  .nav-links { gap: 0.8rem; }
  .nav-links a { font-size: 0.85rem; letter-spacing: 0.12em; }
  .theme-toggle { width: 34px; height: 34px; }

  /* —— 首页英雄区：标题缩小，避免窄屏溢出/折行 —— */
  .hero { padding: 2.4rem 18px 1rem; }
  .hero-main { padding-bottom: 0.5rem; }   /* 小屏上移偏置减小，间距仍由 --hero-gap 保证 */
  .hero-title { font-size: clamp(1.9rem, 9vw, 2.6rem); letter-spacing: 0.08em; text-indent: 0.08em; }
  .hero-sub { font-size: 0.88rem; letter-spacing: 0.28em; text-indent: 0.28em; }
  .hero-seal { width: 54px; height: 54px; margin-bottom: 1.4rem; }

  /* —— 文章网格 —— */
  .post-grid { grid-template-columns: 1fr; gap: 16px; }
  .post-card.card--featured,
  .post-card:nth-child(4n) { grid-column: auto; }
  .card-link { padding: 1.2rem 1.3rem 1.1rem; }
  .card-title { font-size: 1.3rem; }
  .card-foot { flex-wrap: wrap; gap: 0.4rem; }
  .chip { font-size: 0.85rem; padding: 0.25em 0.9em; }
  .filter-count { display: none; }

  /* —— 页面留白 + 刘海屏安全区 —— */
  .page {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .site-foot { padding: 1.8rem 16px 2.2rem; }

  /* —— 文章详情：紧凑的日记排版 —— */
  .page--post { padding-top: 1.2rem; }
  .diary { padding: 1.4rem 1.1rem 1.6rem; border-radius: 10px; }
  .diary-title { font-size: 1.55rem; line-height: 1.5; margin-bottom: 0.5rem; }
  .diary-sub { font-size: 0.8rem; }
  .diary-meta { gap: 0.6rem; }
  .diary-body { margin-top: 1.6rem; }
  .diary-body h2 { font-size: 1.3rem; margin: 2em 0 0.7em; }
  .diary-body h3 { font-size: 1.08rem; }
  .diary-body p { line-height: 1.9; }
  .diary-body blockquote { font-size: 1.05em; padding-left: 1.5em; }
  /* 表格 / 代码块：横向滚动，防止撑破版面 */
  .diary-body table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .diary-body pre { font-size: 0.85rem; -webkit-overflow-scrolling: touch; }

  /* —— 上 / 下一篇 —— */
  .diary-nav { grid-template-columns: 1fr; }
  .nav-title { font-size: 0.95rem; }

  /* —— 登录页：输入框字号 ≥16px，避免 iOS 聚焦时自动放大页面 —— */
  .login-card { padding: 2rem 1.4rem 1.6rem; }
  .login-form input[type="text"],
  .login-form input[type="email"],
  .login-form input[type="password"] { font-size: 16px; }
}

/* 超窄屏（≤400px）：进一步收紧 */
@media (max-width: 400px) {
  .brand { font-size: 1.1rem; }
  .nav-links { gap: 0.6rem; }
  .nav-links a { font-size: 0.8rem; letter-spacing: 0.08em; }
  .diary-title { font-size: 1.4rem; }
}

/* 无障碍：减弱动态效果 */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; translate: 0 0; transition: none; }
  .hero-seal, .type-cursor, .scroll-hint .line { animation: none; }
  .post-card, .nav-card, .chip, .theme-toggle { transition: none; }
}

/* ============================================================
   14. 通知中心：铃铛 + 未读红点 + 下拉面板
   ============================================================ */
.bell-wrap { position: relative; }
.bell {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink);                 /* 墨色铃铛 */
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.bell:hover { color: var(--color-accent); border-color: var(--color-accent); }  /* 悬停朱红 */
.bell svg { display: block; }

/* 未读红点：朱红圆形，白色数字，定位铃铛右上角 */
.bell-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  border-radius: 9px;
  background: var(--color-accent);
  color: var(--color-paper);
  font-size: 11px; line-height: 18px; text-align: center;
  padding: 0 4px;
  box-shadow: 0 0 0 2px var(--color-paper);
}
.bell-badge[hidden] { display: none; }

/* 下拉面板：仿宣纸底 + 纸感阴影 */
.bell-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 360px; max-width: 88vw;
  display: flex; flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  z-index: 200;
  overflow: hidden;
}
.bell-panel[hidden] { display: none; }

.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-paper-deep);
}
.bell-title { font-family: var(--font-handwriting); letter-spacing: 0.2em; color: var(--color-accent); }
.bell-clear {
  background: none; border: none; cursor: pointer;
  font-size: 0.8rem; color: var(--color-ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.3s;
}
.bell-clear:hover { color: var(--color-accent); }

/* 列表：最大高度 400px 内滚动 */
.bell-list { list-style: none; overflow-y: auto; max-height: 320px; }
.bell-item {
  position: relative;
  display: flex; gap: 0.7em;
  padding: 0.8em 1em;
  border-bottom: 1px solid var(--color-line);
  transition: background 0.25s;
}
.bell-item:last-child { border-bottom: none; }
.bell-item--link { cursor: pointer; }
.bell-item--link:hover { background: rgba(192, 57, 43, 0.05); }
/* 未读：背景略深 + 左侧朱红竖条 */
.bell-item--unread { background: rgba(192, 57, 43, 0.05); }
.bell-item--unread::before {
  content: '';
  position: absolute; left: 0; top: 0.6em; bottom: 0.6em;
  width: 3px; border-radius: 2px;
  background: var(--color-accent);
}
.bell-item-body { flex: 1; min-width: 0; }
/* 标题：手写体；正文：衬线体，pre-line 保留驳回理由换行 */
.bell-item-title {
  font-family: var(--font-handwriting);
  font-size: 0.95rem;
  color: var(--color-ink);
  line-height: 1.4;
  margin-bottom: 0.2em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bell-item-content {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--color-ink-soft);
  white-space: pre-line;
  word-break: break-word;
}
.bell-item-time { display: block; font-size: 0.75rem; color: var(--color-ink-faint); margin-top: 0.3em; }
.bell-item-del {
  align-self: flex-start;
  background: none; border: none; cursor: pointer;
  color: var(--color-ink-faint); font-size: 0.8rem; line-height: 1;
  padding: 2px 4px; border-radius: 4px;
  transition: color 0.3s;
}
.bell-item-del:hover { color: var(--color-accent); }

/* 空状态：篆刻印章风格「暂无新消息」 */
.bell-empty { padding: 2.2rem 1rem; text-align: center; }
.bell-empty[hidden] { display: none; }
.bell-empty::before {
  content: '暂无新消息';
  display: inline-block;
  padding: 0.5em 1em;
  font-family: var(--font-calligraphy);
  font-size: 1rem;
  letter-spacing: 0.3em;
  color: rgba(192, 57, 43, 0.75);
  border: 2px solid rgba(192, 57, 43, 0.35);
  border-radius: 6px;
  transform: rotate(-2deg);
}

/* 移动端：铃铛 / 切换按钮收紧，避免导航溢出 */
@media (max-width: 640px) {
  .bell, .theme-toggle { width: 32px; height: 32px; }
  .bell-panel { width: min(360px, 92vw); }
}

/* ============================================================
   16. 文章信息条：阅读时长 · 城市 · 天气
   ============================================================ */
.post-meta-info {
  display: flex;
  flex-wrap: wrap;                 /* 移动端空间不足时换行 */
  align-items: center;
  gap: 0.45em 0.6em;
  margin: 0 0 1.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(192, 57, 43, 0.3);   /* 细朱红分隔线 */
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--color-ink);
  opacity: 0.7;                    /* 墨色半透明（适配明暗主题） */
}
.post-meta-info[hidden] { display: none; }
.post-meta-info .sep { color: var(--color-ink); opacity: 0.35; }
.post-meta-info .reading-time strong { font-weight: 600; }
.post-meta-info .weather-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.post-meta-info .weather-wrap[hidden] { display: none; }
.post-meta-info .weather-icon {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-accent);      /* 朱红图标 */
}
.post-meta-info .temperature {
  font-family: Georgia, 'Times New Roman', serif;   /* 温度数字衬线加粗 */
  font-weight: 700;
  color: var(--color-ink);
}

@media (max-width: 640px) {
  .post-meta-info { font-size: 0.8rem; margin-bottom: 1.2rem; }
  .post-meta-info .weather-icon { font-size: 1rem; }
}

/* 无障碍：减弱动态效果时禁用过渡 */
@media (prefers-reduced-motion: reduce) {
  .bell, .bell-clear, .bell-item, .bell-item-del { transition: none; }
}

/* ============================================================
   17. 友情链接：展示页卡片网格
   ============================================================ */
.page--links { max-width: 960px; }
.link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
}
/* 数量少时横幅式布局（避免网格空旷） */
.link-grid--few {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
}
.link-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.25rem;
  background: var(--color-paper-card);          /* 宣纸半透明，随主题切换 */
  border: 1px solid var(--color-line);
  border-radius: 12px;
  box-shadow: var(--shadow-paper);
  color: inherit;
  text-decoration: none;
  transition: all 0.25s ease;
}
/* 悬停：上浮 4px + 阴影加深 + 边框渐染朱红 */
.link-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(192, 57, 43, 0.3);
}
.link-card.hidden { display: none; }
.link-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
.link-icon-img {
  width: 32px; height: 32px;
  border-radius: 8px;
  object-fit: contain;
}
/* favicon 失败时的首字母占位：朱红圆形 */
.link-letter {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-paper);
  font-family: var(--font-handwriting);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.link-name {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--color-ink);
}
.link-desc {
  flex: 1;
  font-family: var(--font-serif);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--color-ink);
  opacity: 0.6;
}
/* 分类标签：朱红描边胶囊，卡片悬停时实心化 */
.link-tag {
  align-self: flex-start;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 0.12em 0.8em;
  transition: all 0.25s ease;
}
.link-card:hover .link-tag { background: var(--color-accent); color: var(--color-paper); }
.links-note {
  text-align: center;
  margin-top: 2.4rem;
  letter-spacing: 0.2em;
}

/* 响应式：平板 2 列、手机 1 列（auto-fill 已覆盖大部分断点） */
@media (max-width: 1024px) {
  .link-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .link-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .link-card, .link-tag { transition: none; }
}

/* ============================================================
   18. 页脚运行时长：朱红呼吸圆点 + 时钟文字
   ============================================================ */
.uptime-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  margin-top: 0.5rem;
}
/* 呼吸圆点：朱红，像一盏还亮着的灯 */
.uptime-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  animation: uptime-pulse 2s ease-in-out infinite;
}
@keyframes uptime-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
  .uptime-dot { animation: none; }
}

/* ============================================================
   19. 作者个人主页
   ============================================================ */
/* 作者名链接（文章页 / 首页卡片）：保持原色，悬停变朱红 + 下划线 */
.author-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s;
}
.author-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page--author { max-width: 820px; }
.author-head { text-align: center; padding: 2.2rem 0 1.2rem; }
/* 头像：HSL 柔和底色（随用户名恒定）+ 朱红描边印章感 */
.author-avatar {
  width: 100px; height: 100px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-handwriting);
  font-size: 2.5rem;
  color: var(--color-ink);
  border: 1.5px solid var(--color-accent);
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.08);
  transition: transform 0.3s ease;
}
.author-avatar:hover { transform: rotate(3deg); }
.author-name {
  font-family: var(--font-handwriting);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}
.author-meta {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  opacity: 0.55;
}
.author-head .rule {
  display: block;
  width: 42px; height: 3px;
  margin: 1.2rem auto 0;
  border-radius: 2px;
  background: var(--color-accent);
}
/* 简介：衬线正文 */
.author-bio {
  margin-top: 1.4rem;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-ink);
  text-align: justify;
}
.author-bio p { margin-bottom: 0.8em; }
/* 社交链接：描边胶囊，悬停朱红 + 上浮 */
.author-social {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.4rem;
}
.social-link {
  font-family: var(--font-handwriting);
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
  text-decoration: none;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.2em 0.8em;
  transition: all 0.3s ease;
}
.social-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}
.author-email {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4em;
}
/* Gmail 标志（本地 SVG）：与文字垂直居中，字号跟随正文 */
.email-icon {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  object-fit: contain;
}
/* 统计：衬线数字（Georgia） */
.author-stats {
  margin: 2.2rem 0 1.2rem;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
}
.author-stats b {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.15rem;
  color: var(--color-accent);
}
/* 文章时间线：朱红圆点 + 左侧竖线 */
.author-timeline {
  position: relative;
  padding-left: 1.6rem;
}
.author-timeline::before {
  content: '';
  position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--color-line);
}
.author-tl-item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1rem;
}
.author-tl-item::before {
  content: '';
  position: absolute; left: -1.6rem; top: 0.5em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.author-tl-date {
  flex-shrink: 0;
  width: 6.5em;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--color-ink-faint);
}
.author-tl-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--color-ink);
  text-decoration: none;
  transition: color 0.3s;
}
.author-tl-title:hover { color: var(--color-accent); }

/* 个人中心：资料设置（与账号设置同款双列分组） */
.profile-form-col {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.profile-form-col .label-title {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
}
.profile-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
/* 简介文本框：表单类名是 profile-forms（双列网格），选择器需匹配 */
.profile-forms textarea,
.profile-form-col .label-title textarea {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.6em 0.9em;
  resize: vertical;
  min-height: 120px;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.profile-forms textarea:focus,
.profile-form-col .label-title textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
/* 头像颜色选择器：纸墨色板圆点 + 自动选项 */
.avatar-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.avatar-swatch {
  width: 30px; height: 30px;
  border-radius: 50%;
  /* 黑色（墨色）边框：浅色色块在纸白背景上清晰可见，选中态由朱红边框接管 */
  border: 2px solid rgba(44, 42, 40, 0.55);
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}
.avatar-swatch:hover { transform: scale(1.12); }
.avatar-swatch.active {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}
.avatar-swatch.sw-auto {
  width: auto;
  padding: 0 0.7em;
  border-radius: 999px;
  border-color: var(--color-line);
  background: var(--color-paper-deep);
  color: var(--color-ink-soft);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
}
.social-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.social-row { display: flex; gap: 0.6rem; align-items: center; }
.social-row input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--color-ink);
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.5em 0.8em;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.social-row input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.social-row .sf-name { max-width: 150px; }
.inline-check {
  flex-direction: row !important;
  align-items: center;
  gap: 0.6em !important;
}
.inline-check input[type="checkbox"] {
  width: 18px; height: 18px;
  accent-color: var(--color-accent);
}

/* 响应式：平板 80px 头像 / 手机 60px 紧凑 */
@media (max-width: 768px) {
  .author-avatar { width: 80px; height: 80px; font-size: 2rem; }
  .author-name { font-size: 1.7rem; }
}
@media (max-width: 480px) {
  .author-avatar { width: 60px; height: 60px; font-size: 1.6rem; }
  .author-name { font-size: 1.5rem; }
  .author-social { gap: 0.6rem; }
  .author-tl-item { flex-direction: column; gap: 0.2rem; }
  .author-tl-date { width: auto; }
  .social-row { flex-wrap: wrap; }
  .social-row .sf-name { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .author-avatar, .social-link, .author-tl-title, .author-link { transition: none; }
}

/* ============================================================
   15. 历史版本：版本列表 + 行级对比（diff）
   ============================================================ */
.version-list { display: flex; flex-direction: column; gap: 10px; }
.version-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
  box-shadow: var(--shadow-paper);
}
.version-info { flex: 1; min-width: 0; }
.version-title {
  font-family: var(--font-handwriting);
  font-size: 1.05rem;
  color: var(--color-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.version-info .muted { font-size: 0.82rem; }

/* 行级 diff：加绿删红，等宽字体 */
.page--diff { max-width: 900px; }
.diff-legend { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.8rem; flex-wrap: wrap; }
.diff-legend .diff-add,
.diff-legend .diff-del { padding: 0.1em 0.5em; border-radius: 4px; font-size: 0.85rem; }
.diff {
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85rem;
  line-height: 1.8;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
}
.diff-line { white-space: pre-wrap; word-break: break-word; }
.diff-add { color: #3f7d4e; background: rgba(63, 125, 78, 0.08); }
.diff-del { color: #a94442; background: rgba(169, 68, 66, 0.08); }
.diff-ctx { color: var(--color-ink-soft); }

/* ============================================================
   16. 无障碍：跳过导航链接（仅键盘聚焦时显示）
   ============================================================ */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -3rem;
  z-index: 300;
  background: var(--color-accent);
  color: var(--color-paper);
  padding: 0.5em 1em;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  transition: top 0.2s ease;
}
.skip-link:focus-visible { top: 1rem; }
.content-start { scroll-margin-top: calc(var(--nav-h) + 8px); }

/* ============================================================
   17. 作者页：Gmail 图标悬停放大（原尺寸 1em，悬停放大 1.4 倍）
   ============================================================ */
.email-icon { transition: transform 0.25s var(--ease-ink); }
.author-email:hover .email-icon,
.author-email:focus-visible .email-icon { transform: scale(1.4); }

/* ============================================================
   18. 友链申请表单（公开页 /links 底部纸面卡片）
   ============================================================ */
.link-apply {
  margin-top: 3rem;
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 1.8rem 2rem 2rem;
  box-shadow: var(--shadow-paper);
}
.link-apply-head {
  display: flex;
  align-items: baseline;
  gap: 0.8em;
  margin-bottom: 1.2rem;
}
.link-apply-head h2 {
  font-family: var(--font-handwriting);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  margin: 0;
}
.link-apply-head p {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--color-ink-faint);
}
.link-apply-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
}
.link-apply-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--color-ink-soft);
}
.link-apply-grid label.full { grid-column: 1 / -1; }
.link-apply-grid input {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.55em 0.8em;
  transition: border-color 0.25s ease;
}
.link-apply-grid input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.link-apply-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.2rem;
}
.link-apply-note {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--color-ink-faint);
}
.link-apply-msg { font-size: 0.85rem; }
.link-apply-msg.ok { color: #3f7d4e; }
.link-apply-msg.err { color: var(--color-accent); }

/* 首页站内搜索框（与分类 chips 同排） */
.post-search {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--color-ink);
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.45em 1.1em;
  margin-right: auto;
  min-width: 180px;
  max-width: 260px;
  transition: border-color 0.25s ease;
}
.post-search:focus {
  outline: none;
  border-color: var(--color-accent);
}
.post-search::placeholder { color: var(--color-ink-faint); letter-spacing: 0.08em; }

/* 投稿 / 编辑器：插图工具条 */
.submit-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.6rem 0 1.2rem;
  flex-wrap: wrap;
}
.img-hint { font-size: 0.8rem; letter-spacing: 0.05em; }
.img-hint.ok { color: #3f7d4e; }
.img-hint.err { color: var(--color-accent); }
/* 蜜罐字段：对真人隐藏 */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}
@media (max-width: 640px) {
  .link-apply-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   19. 打印样式：纸墨博客天生适合打印
   ============================================================ */
@media print {
  /* 隐藏交互元素 */
  .topnav, .progress, .toc-side, .bell-wrap, .theme-toggle,
  .diary-nav, .skip-link, .hero-deco, .hero-seal,
  .filter-bar, .link-card, .link-apply, .post-meta-info,
  .site-foot .uptime-line { display: none !important; }
  /* 文章布局改为单列（隐藏目录侧栏后不再占位） */
  .post-layout { display: block !important; }
  .toc-side { display: none !important; }
  /* 渐入动画强制可见（避免打印时正文透明） */
  .js .reveal { opacity: 1 !important; translate: none !important; }
  /* 纸白底墨字，去纸感投影 */
  body { background: #fff !important; color: #000 !important; }
  .page { max-width: none !important; }
  .diary, .post-layout { box-shadow: none !important; }
  /* 分页控制 */
  h1, h2, h3, h4 { page-break-after: avoid; }
  pre, blockquote, table, .diary-body img { page-break-inside: avoid; }
  a { color: #000 !important; text-decoration: underline; }
  /* 页脚打印落款 */
  .site-foot::after {
    content: '本文由「纸上春秋」打印 · 愿字里行间，皆有温度';
    display: block;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: #666;
    letter-spacing: 0.1em;
  }
}

/* 页脚 ICP 备案标识（工信部合规要求：低调但清晰可见） */
.icp-line { margin-top: 0.5rem; font-size: 0.78rem; letter-spacing: 0.06em; }
.icp-line a { color: var(--color-ink-faint); text-decoration: none; }
.icp-line a:hover { color: var(--color-accent); }

/* 页脚公安联网备案标识（警徽图标 + 编号，官方建议图标 16×17px） */
.beian-line { margin-top: 0.35rem; font-size: 0.78rem; letter-spacing: 0.06em; }
.beian-line a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-ink-faint);
  text-decoration: none;
}
.beian-line a:hover { color: var(--color-accent); }
.beian-icon { width: 16px; height: auto; flex-shrink: 0; }

/* 关于页：举报表单（GA 1277 投诉举报入口） */
.report-form { margin-top: 1rem; max-width: 640px; }
.report-form textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-paper-card);
  border: 1px solid var(--color-line);
  border-radius: 8px;
  padding: 0.6em 0.8em;
  resize: vertical;
  transition: border-color 0.25s ease;
}
.report-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.report-form textarea::placeholder { color: var(--color-ink-faint); }