/* ==========================================================================
   知岁本源 · Zhisui Benyuan  —  样式表 v0.1
   浅色主题 / 无外部依赖 / 响应式
   ========================================================================== */

:root {
  --bg:        #fbfbf9;
  --bg-soft:   #f3f4f1;
  --surface:   #ffffff;
  --border:    #e5e6e1;
  --border-2:  #d5d7d0;

  --ink:       #1b1d1a;
  --ink-2:     #4a4f48;
  --ink-3:     #7d857c;

  --brand:     #0f766e;
  --brand-2:   #14b8a6;
  --brand-soft:#e6f4f1;
  /* v2.16：从标志原图采样出的深青，专供站名/标志类元素。
     与 --brand(#0f766e) 区分开 —— 江哥要的是「站名颜色改成跟图一样」，
     不是「全站主色都换」，所以新开一个变量、不动 --brand。 */
  --brand-deep:#0c4850;
  /* 标志图里的金色（年轮/叶脉），备用 */
  --gold:      #bf8f57;

  --accent:    #b45309;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 1px 2px rgba(20,30,25,.04), 0 8px 24px -12px rgba(20,30,25,.10);
  --shadow-hi: 0 2px 6px rgba(20,30,25,.06), 0 18px 40px -18px rgba(20,30,25,.18);

  --maxw:      1200px;
  --font: "Inter", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Songti SC", "SimSun", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand-2); }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------------------------------------------------------------- tools */
.tool {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.tool h3 { font-size: 17px; margin: 0 0 6px; }
.tool .t-desc { font-size: 13.5px; color: var(--ink-2); margin: 0 0 16px; }
.tool .t-note { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; }
.fields { display: grid; gap: 11px; grid-template-columns: 1fr 1fr; }
.fields label {
  font-size: 12.5px; color: var(--ink-2); display: flex; flex-direction: column; gap: 5px;
}
.fields label:has(select), .fields label:first-child:last-child { grid-column: auto; }
.fields input, .fields select {
  padding: 8px 11px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink); width: 100%;
}
.fields input:focus, .fields select:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.tbtn {
  margin-top: 16px; width: 100%; padding: 10px; border: none; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-size: 14.5px; font-family: inherit; cursor: pointer;
}
.tbtn:hover { background: var(--brand-2); }
.tresult {
  margin-top: 14px; font-size: 14px; color: var(--ink-2); line-height: 1.7; display: none;
  padding: 13px 15px; border-radius: var(--radius-sm); background: var(--bg-soft);
}
.tresult.on { display: block; }
.tresult b { color: var(--ink); font-size: 19px; font-weight: 700; }
.tresult .lv { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; margin-left: 6px; }
.lv-good { background: #dcfce7; color: #15803d; }
.lv-warn { background: #fef3c7; color: #a16207; }
.lv-bad  { background: #fee2e2; color: #b91c1c; }

@media (max-width: 780px) {
  .fields { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- evidence badge */
.evbadge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--ev) 11%, #fff);
  color: var(--ev); border: 1px solid color-mix(in srgb, var(--ev) 26%, #fff);
  margin-left: 6px; font-weight: 500; white-space: nowrap;
}

.evbox {
  display: flex; gap: 13px; align-items: flex-start;
  margin-top: 20px; padding: 13px 18px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ev) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--ev) 22%, #fff);
  max-width: 620px;
}
.evbox-icon { font-size: 20px; line-height: 1.3; flex-shrink: 0; }
.evbox b { display: block; font-size: 13.5px; color: var(--ev); margin-bottom: 2px; }
.evbox div span { font-size: 13px; color: var(--ink-2); }

/* 证据等级说明卡（关于页 / 工具页） */
.evgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); margin: 22px 0; }
.evcard {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 15px 17px; background: var(--surface);
  border-left: 3px solid var(--ev);
}
.evcard b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 5px; }
.evcard span { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* 渐进增强的进视口动画：默认可见，JS 加 .vpre 才隐藏，落到 .vin 恢复 */
.card.vpre, .acard.vpre {
  opacity: 0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.card.vin, .acard.vin {
  opacity: 1; transform: none;
}

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,251,249,.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.head-inner {
  display: flex; align-items: center; gap: 22px;
  /* ⚠️ 用 `min-height` 而不是 `height`（v2.23）：导航支持自动折行后，
     宽屏临界处万一折成两行，固定 66px 会把第二行**顶出顶栏**；
     min-height 则在宽屏仍稳定输出 66px（内容 34px 居中），折行时自动增高。 */
  min-height: 66px;
}
/* 站标：徽章图 + 站名（纯文字）+「ZHISUI BENYUAN」
   ⚠️ .logo-img 与 .logo-text 在 .logo 里 center 对齐；
   原 baseline 是给纯文字的，加了 34px 图才会错位，已统一用 center。
   2026-10-13：站名由「图片字体」改回「HTML 文字」（用户要求），
   直接用系统字体渲染，SEO/选中/翻译都更友好。 */
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-img {
  width: 34px; height: 34px; display: block; flex-shrink: 0;
  object-fit: contain;
}
.logo-text { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* 站名纯文字：深青 + 加粗，与原图字体观感接近 */
.logo-word {
  font-size: 22px; font-weight: 700; letter-spacing: .03em;
  color: var(--brand-deep); line-height: 1; flex-shrink: 0;
}
/* 旧图片字体的兜底样式，现已不用 */
.logo-mark {
  font-size: 21px; font-weight: 700; letter-spacing: .04em; color: var(--brand-deep);
}
.logo-mark .dot { color: var(--brand-2); }
.logo-sub {
  font-size: 11px; color: var(--ink-3); letter-spacing: .13em;
  text-transform: uppercase; font-weight: 500;
  white-space: nowrap;
}

/* 顶栏导航（v2.23）：所有项**平铺** + `flex-wrap` 自动折行 ——
   宽屏一行放下、窄屏自动折到第二行（江哥 2026-10-13：「随宽度的多少，一排放不下，
   多出的部分自动换到第二行」）。`margin-left:auto` 负责把它推到站标右侧。
   ⚠️ v2.20 那套「`.nav-row-cats` / `.nav-row-site` 固定两排」已废弃，不要再写回来。 */
.nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; flex-wrap: wrap; row-gap: 2px;
}
.nav > a {
  font-size: 13.5px; color: var(--ink-2); padding: 7px 10px;
  border-radius: var(--radius-sm); white-space: nowrap;
}
.nav > a:hover { background: var(--bg-soft); color: var(--ink); }
.nav > a.on { color: var(--brand); background: var(--brand-soft); font-weight: 500; }

.search-btn {
  border: 1px solid var(--border-2); background: var(--surface);
  border-radius: 999px; padding: 6px 15px; font-size: 13px; color: var(--ink-3);
  cursor: pointer; font-family: inherit;
}
.search-btn:hover { border-color: var(--brand); color: var(--brand); }

/* 导航"更多"下拉 */
.navmore { position: relative; }
.navmore-btn { font-size: 13.5px; color: var(--ink-2); padding: 7px 10px; border-radius: var(--radius-sm); white-space: nowrap; display: block; }
.navmore:hover .navmore-btn { background: var(--bg-soft); color: var(--ink); }
.navmore-btn.on { color: var(--brand); background: var(--brand-soft); font-weight: 500; }
.navmore-menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 60;
  padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-hi);
  display: none;
  /* 列由后端按条目数均衡分配，这里只负责并排 */
  grid-auto-flow: column;
  grid-auto-columns: minmax(178px, 1fr);
  align-items: start;
  gap: 10px 22px;
}
/* 展开方式一：桌面 hover / 键盘聚焦。
   ⚠️ 必须用 @media (hover: hover) 圈起来 —— 触摸屏上「点一下」会同时触发**合成 hover**，
   和 JS 的 .open 切换打架：第二次点想关掉，hover 却把它摁住不放。 */
@media (hover: hover) {
  .navmore:hover .navmore-menu,
  .navmore:focus-within .navmore-menu { display: grid; }
}
/* 展开方式二：点击切换（触摸屏唯一可靠的方式，见 app.js 的 IIFE） */
.navmore.open .navmore-menu { display: grid; }
.navcol { display: flex; flex-direction: column; gap: 8px; }
.navgrp { padding-bottom: 2px; }
.navgrp-t {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  color: var(--ink-3, #9aa3af); text-transform: uppercase;
  padding: 3px 11px 5px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.navgrp-list { display: flex; flex-direction: column; gap: 1px; }
.navmore-menu a { border-radius: 6px; padding: 6px 11px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.navmore-menu a:hover { background: var(--bg-soft); color: var(--ink); }
.navmore-menu a.on { color: var(--brand); background: var(--brand-soft); font-weight: 500; }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative;
  padding: 42px 0 34px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(900px 340px at 12% -10%, rgba(20,184,166,.09), transparent 62%),
    radial-gradient(700px 300px at 88% 0%, rgba(99,102,241,.07), transparent 60%);
}
.hero h1 {
  font-size: 36px; line-height: 1.22; margin: 0 0 12px;
  letter-spacing: -.02em; font-weight: 700; max-width: 720px;
}
.hero h1 em { font-style: normal; color: var(--brand); }
.hero p.lede {
  font-size: 15.5px; color: var(--ink-2); max-width: 660px; margin: 0 0 18px;
}
.hero .wrap, .phead .wrap, .art-head .wrap, .searchpage .wrap, .authpage, .nf { position: relative; }
.hero-mark {
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 240px; height: 240px;
  background: center/contain no-repeat;
  opacity: 0.09;
  pointer-events: none;
  z-index: -1;
}
.hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.hstat b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.hstat span { font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------- section */
.sec { padding: 34px 0; }
.sec + .sec { border-top: 1px solid var(--border); }
/* 区块小标题栏。⚠️ h2 / .more 必须 `flex:none` + `white-space:nowrap` ——
   默认它们可被压缩，窄屏下 flex 会把 h2 压到 min-content（一个汉字宽）→ 逐字换行，
   「知识总目录」变成「知识 / 总目 / 录」；「更多 87 篇 →」也会在空格处断成 3 行。
   实测三项自然宽合计 **509px**，容器一小于它就开始碎（约视口 596px）。 */
.sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.sec-head h2 { font-size: 20px; margin: 0; letter-spacing: -.01em; flex: none; white-space: nowrap; }
.sec-head .hint { font-size: 12.5px; color: var(--ink-3); flex: 1 1 auto; min-width: 0; }
.sec-head .more { margin-left: auto; font-size: 13.5px; flex: none; white-space: nowrap; }

.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 26px 0 6px; }
.pager .pg { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-2); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 13.5px; transition: all .15s; }
.pager a.pg:hover { border-color: var(--brand-2); color: var(--brand); }
.pager .pg.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.pager .pg.off { opacity: .45; cursor: default; }
.pager .pg.gap { border: none; background: none; min-width: 18px; color: var(--ink-3); }
.pager .pg-prev, .pager .pg-next { font-weight: 500; }

/* ---------------------------------------------------------------- grid */
.grid { display: grid; gap: 12px; }
.grid.cat { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
.grid.art { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }

/* ---------------------------------------------------------------- 首页知识总目录 */
/* （v2.5）首页「知识总目录」已改为热榜式列表（.hotlist / .hotrow.hot--cat），
   原先的 .catlog / .catblk / .tlist / .evdot 卡片样式已废弃删除。 */

/* ---------------------------------------------------------------- 左侧总目录 + 内容区外壳 */
.shell { display: flex; gap: 26px; align-items: flex-start; }
.toc {
  flex: 0 0 212px; width: 212px;
  position: sticky; top: 82px;              /* 顶栏 66px + 呼吸位 */
  max-height: calc(100vh - 104px);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 12px 14px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scrollbar-width: thin;
}
.toc::-webkit-scrollbar { width: 6px; }
.toc::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.toc-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
}
.toc-t { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.toc-n { font-size: 10.5px; color: var(--ink-3); margin-left: auto; }
.toc-grp { margin-bottom: 8px; }
.toc-grp-t {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  color: var(--ink-3); text-transform: uppercase;
  padding: 6px 8px 4px;
}
.toc-nav a {
  display: flex; align-items: baseline; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  font-size: 13px; color: var(--ink-2); line-height: 1.45;
}
.toc-nav a:hover { background: var(--bg-soft); color: var(--ink); }
.toc-nav a.on { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.toc-nav .ti { font-size: 12.5px; flex-shrink: 0; }
.toc-nav .tn { min-width: 0; }

.content { flex: 1 1 auto; min-width: 0; }
/* 侧栏存在时，内容区的 .wrap 不再自己居中（居中由 .shell 的 padding 负责） */
.content > .wrap, .content > section > .wrap { max-width: none; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 17px;
  box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s, border-color .16s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); border-color: var(--border-2); }

.card .ico { font-size: 21px; line-height: 1; margin-bottom: 8px; }
.card h3 { font-size: 15.5px; margin: 0 0 3px; letter-spacing: -.005em; }
.card h3 a { color: var(--ink); }
.card h3 a:hover { color: var(--brand); }
.card .sub { font-size: 10px; color: var(--ink-3); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 7px; }
.card p {
  font-size: 12.5px; line-height: 1.58; color: var(--ink-2); margin: 0; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card .foot { margin-top: 10px; font-size: 11.5px; color: var(--ink-3); display: flex; gap: 12px; align-items: center; }

/* color rail on category cards */
.card.rail { position: relative; overflow: hidden; }
.card.rail::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--rail, var(--brand-2));
}

/* ---------------------------------------------------------------- article card */
.acard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: transform .16s, box-shadow .16s;
}
.acard:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); }
.acard .top { padding: 15px 17px 0; }
/* 通用 chip：此前只定义了 .acard .chip，导致 category/search/article 页的
   chip 全是裸文本。这里给出通用基础样式，.acard .chip 仅额外加下边距。 */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-soft); color: var(--ink-2);
}
.acard .chip { margin-bottom: 9px; }
.acard h3 { font-size: 16px; margin: 0 0 7px; line-height: 1.42; letter-spacing: -.005em; }
.acard h3 a { color: var(--ink); }
.acard h3 a:hover { color: var(--brand); }
.acard p {
  font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.acard .bot {
  margin-top: auto; padding: 10px 17px 13px;
  font-size: 12px; color: var(--ink-3); display: flex; gap: 14px; align-items: center;
  border-top: 1px solid var(--border); margin-top: 13px;
}

/* ------------------------------------------- 首页深度文章：热榜式单行列表
   形态参考热榜：左序号 → 标题 → 右侧板块与时长，无卡片框、靠分隔线切分。
   前三名序号用品牌色加重，其余为浅灰。
   v2.5：知识总目录 / 前沿资讯 也统一用这套列表语言，分别加 .hot--cat / .hot--news 修饰。 */
.hotlist { display: flex; flex-direction: column; }
.hotrow {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 6px; border-bottom: 1px solid var(--border);
  transition: background .14s;
}
.hotrow:hover { background: rgba(243,244,241,.6); }
.hotrow:first-child { border-top: 1px solid var(--border); }
.hrank {
  flex: 0 0 22px; text-align: center;
  font-size: 15px; font-weight: 400; font-style: normal;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.hrank.top3 { color: var(--accent); }   /* 前三名：琥珀色，与站点 --accent 一致（不加粗，靠颜色区分） */
/* 知识总目录：左侧换成板块图标，宽度需容纳 emoji */
.hrank.hico { flex: 0 0 20px; font-size: 15px; font-style: normal; font-weight: 400; text-align: left; }
.htitle {
  flex: 1 1 auto; min-width: 0;
  font-size: 15.5px; line-height: 1.5; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hotrow:hover .htitle { color: var(--brand); }
.hcat, .hread {
  flex: 0 0 auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap;
}
.hcat { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

/* 前沿资讯：左侧是「月+日」日期（月份在前），**必须单行不折行**
   月份小号灰字，日期大号黑字（江哥 v2.8 口径）。 */
.hdate {
  flex: 0 0 62px; display: inline-block;
  font-size: 12px; color: var(--ink-3); line-height: 1.5;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.hdate b { font-size: 15px; font-weight: 600; font-style: normal; color: var(--ink); margin-left: 3px; }
.hevdot {
  flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ev, var(--brand-2)); transform: translateY(-2px);
}
/* 资讯来源：比板块名更长的文本，给更宽的省略上限 */
.hsrc { max-width: 260px; }

/* 知识总目录：板块行 + 其下文章行。
   板块行是「组头」——加粗、字号略大、无悬停变色；文章行缩进、字号回到正文。
   v2.6：行与行之间**只保留一条横线**，不再额外加组间分隔线。
   ⚠️ v2.9：组头样式必须用 `:not(.sub)` 限定，否则 `.hot--cat .htitle` 的
   `font-weight:600` 会漏到文章行（文章行也带 `.hot--cat.sub`），把标题误加粗。 */
.hot--cat { align-items: center; padding: 12px 6px 10px; }
.hot--cat:not(.sub) .htitle { font-size: 15px; font-weight: 600; }
.hot--cat .hcat { font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; max-width: 220px; }
.hot--cat .hread { font-size: 11.5px; }
/* 组头本身不画线，让「组头 → 首条文章」之间只靠留白区分 */
.hot--cat:first-child { border-top: none; }
.hot--cat:not(.sub) { border-bottom: none; }
.hot--cat + .hot--cat.sub { border-top: none; }
/* 组与组之间：上一组最后一条文章行 → 下一组**组头**之间留 16px
   ⚠️ v2.10：必须用 `> .hot--cat:not(.sub)` 限定。原先写成 `.hotrow.sub + .hot--cat`，
   而**文章行本身也带 `.hot--cat`（外加 .sub）**，于是「组间距」漏到了组内每一条文章行上，
   给每行都加了 16px margin-top —— 与 v2.9 的字重泄漏是同一类选择器塌陷。 */
.hotrow.sub + .hot--cat:not(.sub) { margin-top: 16px; border-top: none; }
/* 文章行的序号：阿拉伯数字，**不加粗** */
.hotrow.sub { padding: 5px 6px; }
.hotrow.sub .hrank {
  font-size: 12px; font-weight: 400; font-style: normal;
  color: var(--ink-3); flex: 0 0 20px;
}
/* 文章行标题：**故意收窄**，并收紧行高让列表更紧凑
   （江哥 v2.10 口径：字号 15.5px → 13.5px；序号 13px → 12px；行高 1.5 → 1.4）。
   ⚠️ v2.31 起这句话要**分页看**：首页的「深度文章 / 前沿资讯」也收到 13.5px（见下方 `.hot--deep`），
      所以在**首页上三处齐平**；而与**板块页 / 搜索页 / /articles**（仍 15.5px）相比才是「小两号」。
   ⚠️ 已不追求与深度文章「三属性全等」，v2.9 那条等值断言已删除，改为这里的定值断言。 */
.hotrow.sub .htitle { font-size: 13.5px; font-weight: 400; color: var(--ink); line-height: 1.4; }

/* 🔴 v2.31（江哥 2026-10-14）：「首页：深度文章和前沿资讯里面的文章标题字号改小2号。」
   首页这两块原本都吃 `.htitle` 基础值 15.5px → 各收两号到 **13.5px**，与首页「知识总目录」
   的文章行齐平（首页三处列表标题统一 13.5px）。
   ⚠️ **只作用于首页这两个区块**，故意不写进 `.htitle` 基础规则：
     - `.hot--deep` 只在 `templates/index.html` 的「深度文章」行上用；
     - `.hot--news` 全站也只出现在 `templates/index.html`（已 grep 确认）。
   板块页 `/c/...`、搜索页 `/search`、`/articles` 仍走基础 **15.5px**（基础值没动）。
   如果哪天要全站统一，改这里而不是改基础规则以外的地方 —— 别把 13.5 写进 `.htitle`。
   ⚠️ 前沿资讯左侧的「月+日」日期（`.hdate` 12px / `.hdate b` 15px）江哥本次**只说标题**，
     所以日期未动 —— 注意 `b` 的 15px 现在比标题 13.5px 还大一号。 */
.hot--deep .htitle,
.hot--news .htitle { font-size: 13.5px; }

/* 🔴 v2.32 + v2.33（江哥 2026-10-14）：「列表行」统一收成**紧凑口径**
   · v2.32 原话：「全部文章页：文章列表标题字号改为13.5px，行距也对应的改小一些。」
   · v2.33 原话：「第一张截图（板块页）里面的文章标题，全部按第二张截图（/articles）的
     字号和行距修改。首页的深度文章和前沿资讯下面的文章行距，也按第二张截图修改。」
   → 收敛成**一个共用修饰类 `.hot--tight`**，挂在 `.hotlist` **容器**上。当前用在四处：
       `/articles`（articles.html）· 板块页 `/c/...`（category.html）
       · 首页「深度文章」· 首页「前沿资讯」（index.html 的两个 `.hotlist`）。
   🔴 **不包含**：首页「知识总目录」（子行本来就 5px 内边距 / 13.5px）、搜索页 `/search`、
      详情页「同板块继续读」、`/me`、`/news` —— 它们仍是基础 **15.5px / 52px 行盒**。
       这些页与板块页共用**裸 `.hotrow`**，**加类时别漏、别多加**（探针有范围护栏守着）。
   ⚠️ 光降 `.htitle` 的字号/行高**不足以让行变矮**：`.hotrow` 是 `align-items:baseline`，
      行的内容高由**最高的行盒**决定，而这一行里最高的**不是标题**：
        · 右侧板块名 / 时长（`.hcat`/`.hread`，12.5px）没写 line-height，**继承了全站 1.75**
          → 行盒 21.875px；
        · 序号 `.hrank` 是 15px×1.5＝22.5px（`.hrank` **自带 `line-height:1.5`**，
          **写在 `.hotrow` 上的 line-height 继承不到它**）；
        · 首页「前沿资讯」还有 `.hdate b`（15px，同样只吃到 `.hdate` 的 1.5 → 22.5px）。
      三者都高过 13.5px×1.4＝18.9px 的标题 → 只改标题，行高纹丝不动。
      正解四条：① 容器给 `line-height:1.35`（`.hcat`/`.hread` 跟着继承收紧到 16.875px）；
            ② `.hrank` 显式覆盖行高；③ `.hdate` / `.hdate b` 显式覆盖行高；④ 行内边距 13px → 10px。
      实测行盒：**51.9px → 43px**（≈ -17%）。
   ⚠️ 收行内边距用 **`padding-block`**，不要用 `padding` 简写 —— 会吃掉手机端
      `@media(max-width:900px) .hotrow{padding:11px 2px}` 的**左右 2px**。 */
.hot--tight .hotrow { padding-block: 10px; line-height: 1.35; }
.hot--tight .hrank { line-height: 1.35; }   /* ⚠️ 自带 line-height:1.5，继承盖不住，必须显式覆盖 */
.hot--tight .htitle { font-size: 13.5px; line-height: 1.4; }
.hot--tight .hdate { line-height: 1.35; }
.hot--tight .hdate b { line-height: 1.35; }

/* ---------------------------------------------------------------- article page */
.art-head { padding: 46px 0 30px; border-bottom: 1px solid var(--border); }
.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand); }
.art-head h1 {
  font-size: 34px; line-height: 1.35; margin: 0 0 14px; letter-spacing: -.02em; font-weight: 700;
  max-width: 800px;
}
.art-head .lede { font-size: 17px; color: var(--ink-2); max-width: 760px; margin: 0 0 18px; }
.meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }

.art-body {
  max-width: 760px; padding: 40px 0 20px; font-size: 16.5px; line-height: 1.85;
}
.art-body h2 {
  font-size: 23px; margin: 44px 0 14px; letter-spacing: -.01em;
  padding-left: 13px; border-left: 3px solid var(--brand-2);
}
.art-body h2:first-child { margin-top: 0; }
.art-body h3 { font-size: 18px; margin: 30px 0 10px; color: var(--ink); }
.art-body p { margin: 0 0 18px; color: var(--ink-2); }
.art-body strong { color: var(--ink); font-weight: 600; }
.art-body em { color: var(--ink-3); font-style: normal; font-size: .93em; }
.art-body ul, .art-body ol { margin: 0 0 18px; padding-left: 24px; color: var(--ink-2); }
.art-body li { margin-bottom: 8px; }
.art-body li::marker { color: var(--brand-2); }
.art-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14.5px;
}
.art-body th, .art-body td {
  border: 1px solid var(--border); padding: 10px 13px; text-align: left; vertical-align: top;
}
.art-body th { background: var(--bg-soft); font-weight: 600; font-size: 13.5px; }
.art-body td { color: var(--ink-2); }

.srcbox {
  margin: 34px 0 0; padding: 16px 20px; background: var(--bg-soft);
  border-radius: var(--radius-sm); border-left: 3px solid var(--border-2);
  font-size: 13.5px; color: var(--ink-3); line-height: 1.7;
}
.srcbox b { color: var(--ink-2); display: block; margin-bottom: 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.tagrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.tagrow .tag {
  font-size: 12.5px; padding: 4px 11px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid transparent;
}
.tagrow .tag:hover { border-color: var(--brand-2); }

.disclaim {
  margin: 40px 0; padding: 18px 22px; border-radius: var(--radius-sm);
  background: #fffaf0; border: 1px solid #f5e3c0; font-size: 13.5px; color: #7a5a1e;
}

/* ---------------------------------------------------------------- list rows (news) */
.rows { display: flex; flex-direction: column; gap: 0; }
.row {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 4px; border-bottom: 1px solid var(--border);
}
.row:hover { background: rgba(243,244,241,.5); }
.row .di {
  flex-shrink: 0; width: 48px; text-align: center; font-size: 11px;
  color: var(--ink-3); padding-top: 2px; line-height: 1.35;
}
/* 月份小号灰字（承自 .di），日期大号黑字且单独成行 */
.row .di b { display: block; font-size: 15px; color: var(--ink); font-weight: 600; }
.row .body { flex: 1; }
.row h3 { font-size: 15.5px; margin: 0 0 5px; line-height: 1.45; }
.row h3 a { color: var(--ink); }
.row h3 a:hover { color: var(--brand); }
.row p {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.row .m { font-size: 12px; color: var(--ink-3); margin-top: 5px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- 资讯流（前沿资讯页） */
.digest-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 12px 16px; margin-bottom: 26px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--ink-2);
}
.digest-bar .db-item b { color: var(--ink); font-weight: 600; }
.digest-bar .db-note { color: var(--ink-3); font-size: 12.5px; }
.digest-bar .db-link { margin-left: auto; color: var(--brand); }
.digest-bar .db-link:hover { text-decoration: underline; }

/* 月份归档条（v2.28）：资讯每天自动写入 3 条，页面不能无限变长，超出部分按月下钻。
   与「更多 ▾」下拉、总目录一样靠 flex-wrap 自适应，窄屏自动折行。 */
.march {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 24px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.mchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--ink-2); white-space: nowrap;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg-soft);
}
.mchip span { font-size: 11px; color: var(--ink-3); }
.mchip:hover { border-color: var(--brand); color: var(--brand); }
.mchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.mchip.on span { color: rgba(255, 255, 255, .78); }

.dmonth { margin-bottom: 30px; }
.dmonth-t {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  padding-bottom: 8px; margin-bottom: 2px;
  border-bottom: 2px solid var(--border-2);
}
.dmonth-t span {
  font-size: 11.5px; font-weight: 400; color: var(--ink-3);
  background: var(--bg-soft); border-radius: 20px; padding: 1px 9px;
}
.chip.sm { font-size: 11.5px; padding: 2px 8px; }
.evbadge.sm { font-size: 11.5px; padding: 2px 8px; }
.row .src {
  color: var(--ink-3); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px;
}
.row .m .chip { display: inline-flex; align-items: center; gap: 3px; }

/* ---------------------------------------------------------------- search */
.searchpage { padding: 46px 0; }
.searchbox { display: flex; gap: 10px; margin: 22px 0 34px; max-width: 620px; }
.searchbox input {
  flex: 1; padding: 12px 16px; border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; background: var(--surface); color: var(--ink);
}
.searchbox input:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft); }
.searchbox button {
  padding: 12px 24px; border: none; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-size: 15px; font-family: inherit; cursor: pointer;
}
.searchbox button:hover { background: var(--brand-2); }

/* ---------------------------------------------------------------- page head */
.phead {
  padding: 50px 0 34px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-soft), var(--bg));
  isolation: isolate;
}
.phead h1 { font-size: 33px; margin: 0 0 4px; letter-spacing: -.02em; line-height: 1.12; }
.phead .sub { font-size: 11.5px; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; margin-bottom: 14px; }
.phead p { font-size: 16px; color: var(--ink-2); max-width: 680px; margin: 0; }

/* 板块页头部：图标在左，中文名 + 英文名竖排在右（中文↔英文行距刻意收紧）
   —— category / articles / news / tools 共用这一块。 */
.phead-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.phead-head .ico { font-size: 34px; line-height: 1; margin: 0; flex: none; }
.phead-txt { min-width: 0; }
.phead-txt h1 { font-size: 33px; margin: 0; letter-spacing: -.02em; line-height: 1.12; }
.phead-txt .sub {
  font-size: 11.5px; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase;
  margin: 2px 0 0; line-height: 1.2;
}

.empty { padding: 60px 0; text-align: center; color: var(--ink-3); font-size: 15px; }

/* ---------------------------------------------------------------- about */
.prose { max-width: 720px; padding: 40px 0; font-size: 16px; line-height: 1.85; color: var(--ink-2); }
.prose h2 { font-size: 22px; color: var(--ink); margin: 38px 0 12px; }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 7px; }

/* 关于页顶部：本站标志（徽章 + 站名一体）
   ⚠️ 只给宽度、高度 auto —— 标志是「徽章 + 字」的竖长构图，写死 height 会拉变形。 */
.about-brand { margin: 34px 0 6px; }
.about-brand img {
  width: 240px; height: auto; max-width: 62%; display: block;
}
.about-brand figcaption {
  margin-top: 14px; font-size: 14.5px; color: var(--ink-3);
  letter-spacing: .01em;
}

/* 联系区（关于页底部）。排版参考《爱不消失》站，变量换成本站这套 */
.contact-box {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 24px; margin: 18px 0 0;
}
.contact-main { flex: 1; min-width: 200px; }
.contact-main b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 7px; }
.contact-main p { font-size: 13.5px; color: var(--ink-2); margin: 4px 0; line-height: 1.75; }
.contact-main a { color: var(--brand); font-weight: 600; }
.contact-main a:hover { color: var(--brand-2); text-decoration: underline; }
.qr { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qr img {
  width: 112px; height: 112px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #fff;
  transition: transform .15s; display: block;
}
.qr:hover img { transform: scale(1.04); }
.qr span { font-size: 12px; color: var(--ink-3); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 60px;
  padding: 42px 0 34px; background: var(--bg-soft);
}
.foot-grid { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.foot-col { min-width: 120px; }
.foot-col.foot-brand { flex: 0 1 210px; min-width: 180px; }
/* v2.27 起「关于」不再是独立的 `.foot-col.foot-about`，它已并进 `.foot-cats-cols` 当第 5 列
   （`h4` 标题改成同款 `.foot-grp-t`，这样 5 列一字排开、列距一致）。 */
.foot-col h4 { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; font-weight: 600; }
.foot-col a { display: block; font-size: 13.5px; color: var(--ink-2); padding: 2px 0; line-height: 1.5; }
.foot-col a:hover { color: var(--brand); }
/* 知识板块：v2.26 起改为「**每组一列竖排**、列随宽度自动换行、列距最小」（江哥 2026-10-14）。
   之前 v2.24 用 grid `repeat(4, minmax(0,1fr))` / `auto-fit minmax(96px,1fr)` 把每组的 6 个
   板块名**横向铺满整行**，列与列之间被 1fr 拉出大片空白 —— 江哥看后要求改回竖排、并收紧列距。
   ⚠️ 所以这里必须是 **flex-wrap + 内容宽度的列**（`flex: 0 1 auto`），列宽 = 最长板块名。 */
.foot-cats { flex: 1 1 560px; min-width: 0; }
/* 🔴 v2.29（江哥 2026-10-14 发截图）：「底部的目录，改为**两边对齐**」。
   桌面端 `.foot-cats` 有 ~890px 净宽，而 5 列内容宽合计只有 ~420px，
   靠左紧排会让**右半屏整片空着**（截图里很明显）。
   ✅ **v2.34（江哥 2026-10-14 第二张截图）**：「手机端也要两端对齐，如果一排放不下时，
      自动到第二排，如果二排有两个以上，也是两端对齐。」
      → **全宽度统一 `space-between`**，手机端不再覆盖成 `flex-start`。
   🔑 关键机制：`justify-content` 在 `flex-wrap: wrap` 的多行容器里是**逐行生效**的
      （管行与行之间的是 `align-content`），所以**每一排都会自己两端对齐**：
      放不下就自动折到下一排，那一排若有 ≥2 列同样贴齐两端；
      某排**只剩 1 列**时 `space-between` 等价于靠左，不会被拉伸变形。
   ⚠️ v2.29 曾担心「末排只剩 2 列会被硬拉到两端（360px 实测间隙 179px）」，
      并因此在 ≤900px 回退 `flex-start` —— **v2.34 起江哥要的就是这个效果**，别再回退。
   ⚠️ 这条**推翻了 v2.26 的「列距最小」**（那是针对窄屏的口径）。 */
.foot-cats-cols { display: flex; flex-wrap: wrap; gap: 16px 12px; align-items: flex-start;
                  justify-content: space-between; }
.foot-cats-col { display: flex; flex-direction: column; flex: 0 1 auto; }
/* 组内链接容器（v2.24 新增一层）：桌面端与手机端都**竖排**（v2.26 起不再在手机端转 grid）。 */
.foot-links { display: flex; flex-direction: column; }
.foot-grp-t {
  font-size: 12px; letter-spacing: .02em; color: var(--ink-2);
  font-weight: 700; white-space: nowrap;
  margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.foot-cats-col a { font-size: 13.5px; white-space: nowrap; }
/* 🔴 v2.35（江哥 2026-10-14，附截图红框）：「在截图红框的位置，放上友情链接 · AI工具导航 ·
   在线小工具站 · 开口集 · 爱情实验室 · 爱不消失 · 让爱不消失。**文字大小和字体大小等，
   按我们本店的风格设计。**」
   → 位置：`.foot-grid`（品牌 + 5 列目录）与 `.foot-bottom`（© 版权行）之间。
   → **照本站自己的语言来**（不去抄导航站的居中 14px 灰字）：
       · 标签「友情链接」= 列首标题 `.foot-grp-t` 的写法（12px / 700 / letter-spacing .02em / --ink-2）；
       · 链接 = `.foot-col a` 的写法（13.5px / --ink-2 / line-height 1.5），hover 转 --brand；
       · 不加下划线（本站页脚链接都没有下划线）。
   ⚠️ **不加 `border-top`** —— 分隔线交给下面 `.foot-bottom` 自带的那条，
      否则两条横线会挨在一起。
   ⚠️ 地址与「AI工具导航」站页脚那一份是同一批，改地址记得两边同步。 */
.foot-friend {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px 20px; margin-top: 26px;
}
.foot-friend .ff-label {
  font-size: 12px; letter-spacing: .02em; font-weight: 700;
  color: var(--ink-2); white-space: nowrap;
}
.foot-friend a {
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
  white-space: nowrap; text-decoration: none;
}
.foot-friend a:hover { color: var(--brand); }
.foot-bottom {
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink-3); display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;
}

/* ---------------------------------------------------------------- 术语词典 */
.gblock { margin-bottom: 34px; }
.gtitle {
  font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink);
  margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 9px;
}
.gcount {
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 20px; padding: 1px 8px; letter-spacing: 0;
}
.glist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.gitem {
  background: var(--card); border: 1px solid var(--border); border-radius: 11px;
  padding: 15px 17px; transition: border-color .18s, transform .18s;
}
.gitem:hover { border-color: var(--border-2); transform: translateY(-1px); }
.gterm { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 6px; }
.gterm b { font-size: 15.5px; color: var(--ink); }
.gterm em { font-style: normal; font-size: 12px; color: var(--ink-3); letter-spacing: .02em; }
.gitem p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.gsrc { font-size: 11.5px; color: var(--ink-3); }
.gsrc::before { content: "◦ "; }

/* ---------------------------------------------------------------- 404 */
.nf { text-align: center; padding: 100px 0; }
.nf h1 { font-size: 60px; margin: 0; color: var(--border-2); }

/* ---------------------------------------------------------------- responsive */
/* 中屏：侧栏收窄；知识总目录保持两列 */
@media (max-width: 1180px) {
  .grid.cat { grid-template-columns: repeat(3, 1fr); }
  .grid.art { grid-template-columns: repeat(2, 1fr); }
  .shell { gap: 18px; }
  .toc { flex-basis: 186px; width: 186px; padding: 10px 9px 12px 11px; }
  .toc-nav a { font-size: 12.5px; padding: 3px 7px; }
}

/* 移动 ≤900px：侧栏整块隐藏、导航自动折行、正文左右各留 16px */
@media (max-width: 900px) {
  /* 🔴 手机端正文左右各留 **16px**（v2.23，江哥 2026-10-13：「内容还是要离两边一点距离才好看」）。
     ⚠️ 关键：`.wrap` 在正文里是**嵌套**的（`.shell.wrap` 外层 + hero / 各 sec 内层），
     两层各给一次会叠成 32px（v2.22 之前就是这么来的 36px）——
     所以这里做分工：**外层 `.shell.wrap` / 页脚 / 顶栏给 16px，内容区里那层 `.wrap` 归零**，
     全站只保留一层边距。见下方 `.content .wrap`。
     桌面端（≥901px）仍走基础规则 `.wrap { padding: 0 24px }`，不受影响。 */
  .wrap { padding: 0 16px; }
  /* 内容区（`.shell.wrap > main.content`）里的那层 `.wrap` 归零，避免与外层叠加 */
  .content .wrap { padding: 0; }
  .shell { flex-direction: column; gap: 0; }
  /* 立式后 flex-basis:auto 会按内容宽撑开，主内容必须显式占满，否则横向溢出 */
  .shell > .content { width: 100%; flex-basis: auto; }
  /* 🔴 移动端：知识总目录**整块隐藏**（江哥 2026-10-13）。
     实测 390px 手机上它高 **922px**（比 844px 的整屏还高），正文被推到 **1028px** 之下 ——
     也就是首屏一整屏全是目录，正文一个字都看不到。手机上改用顶栏「更多 ▾」进板块。
     （原来这里是「折叠成正文上方两列网格」，因为太高，已废弃。） */
  .toc { display: none; }
  .head-inner { height: auto; padding: 11px 16px; flex-wrap: wrap; gap: 9px; }
  /* 移动端：导航整条占满一行、**靠左**，项与项之间自动折行（v2.23）。
     390px 下会自然折成 2–3 行，一屏看完 —— 不再横向溢出，也不再人为分「板块排 / 站内排」。 */
  .nav {
    margin-left: 0; width: 100%;
    row-gap: 3px;
  }
  /* ⚠️「更多 ▾」是 `.navmore > a`，**不是** `.nav` 的直接子元素，
     只写 `.nav > a` 会漏掉它 —— 实测它仍按桌面的 13.5px / 7px 10px 渲染，
     比左右邻居（13px / 6px 8px）大一圈，看着像被特意放大。必须一起收。 */
  .nav > a,
  .nav .navmore-btn { padding: 6px 8px; font-size: 13px; }
  .nav > a.nav-cta { padding: 6px 12px; }
  /* 🔴 手机端「点更多不显示」的真因（v2.18 查出的）：.nav 当年为了横滑设了 overflow-x:auto，
     而绝对定位的 .navmore-menu 是它的后代 → **被整个裁掉**。
     （实测 DOM 里 display:grid、18 个链接都在，屏幕上却一片空白。）
     修法：跳出裁剪上下文，改成相对视口的固定浮层。
     top 由 app.js 按顶栏实际底边写进 --navmore-top（顶栏 sticky 恒贴顶，坐标稳定）。
     ⚠️ v2.23 顶栏已不再横滑、也没有 overflow-x:auto，
     但**不要再把浮层改回 absolute** —— 它靠 position:fixed 逃出裁剪上下文，且要跟着折行后的顶栏高度走。 */
  .navmore-menu {
    position: fixed;
    left: 12px; right: 12px; top: var(--navmore-top, 116px);
    width: auto; max-width: none;
    max-height: calc(100vh - var(--navmore-top, 116px) - 16px);
    overflow-y: auto;
    grid-auto-flow: row; grid-auto-columns: auto;
  }
  /* 用户菜单同理，但它是窄的，贴右边就行 */
  .navuser-menu { left: auto; right: 12px; min-width: 0; }
  .hero { padding: 30px 0 26px; }
  .hero h1 { font-size: 28px; }
  .hero p.lede { font-size: 14.5px; }
  .hero-stats { gap: 22px; }
  .hero-mark { display: none; }
  .art-head h1 { font-size: 26px; }
  .phead h1 { font-size: 26px; }
  .phead-head { gap: 10px; margin-bottom: 12px; }
  .phead-head .ico { font-size: 27px; }
  .phead-txt h1 { font-size: 26px; }
  .sec { padding: 26px 0; }
  .sec-head { margin-bottom: 14px; }
  .grid.cat { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .grid.art { grid-template-columns: 1fr; }
  /* 热榜列表：中屏收起较长的板块/来源列，避免标题被挤成省略号 */
  .hcat { max-width: 130px; }
  .hsrc { max-width: 180px; }
  .hot--cat .hcat { display: none; }
  .card { padding: 14px; }
  .foot-grid { gap: 28px; }
  .foot-col h4 { min-width: 0; }
  .foot-col { min-width: 44%; }
  .foot-cats { min-width: 100%; flex: 1 1 100%; }
  /* 🔴 页脚手机端（v2.26，江哥 2026-10-14）：**每组一列竖排、列随宽度自动换行**。
     v2.24 那套「组内 auto-fit 多列铺满整行」与 v2.25 的「关于整行 + 链接转 grid」
     都已**整体删除**，别再写回来 —— 基础规则（flex-wrap + 内容宽度列 + 12px 列距）
     在所有宽度下都生效。
     ✅ v2.34：这里**不再覆盖 `justify-content`** —— 手机端同样两端对齐（逐行生效，
        详见基础规则处的说明）。原来那句 `.foot-cats-cols { justify-content: flex-start }`
        已删除，别加回来。 */
  .glist { grid-template-columns: 1fr; }
}

/* 901–1080px：桌面那一行「站标 + 全部导航项」需要约 1000px 净宽，而 901px 只有 865px
   （实测 901px 曾横向溢出 140px）。这一档让导航**整行落到站标下方**、独占全宽，
   于是 901–1080px 仍能一行放下全部项；再窄就自然折行。
   ⚠️ 不要再靠隐藏 .logo-sub 去挤 —— 省下的 ~104px 不够（缺 140px），还得牺牲站名。 */
@media (min-width: 901px) and (max-width: 1080px) {
  /* ⚠️ 这里必须写 `11px 24px` 而不是 `11px 0` —— `.head-inner` 自己就带 `.wrap` 类，
     写 `0` 会把它从 `.wrap` 继承来的 24px 左右内边距一起抹掉，
     于是顶栏站标贴边、正文却还缩进 24px（v2.20 留下的不一致，v2.22 修）。 */
  .head-inner { height: auto; padding: 11px 24px; flex-wrap: wrap; gap: 9px; }
  .nav { width: 100%; margin-left: 0; }
  /* 🔴 导航整行落到**最左侧**之后，「更多」下拉若仍用桌面的 `right:0`（对齐按钮右缘），
     会从视口左边溢出去 —— 实测 1080px 时浮层 left = **-227px**（被切掉一大半）。
     （v2.20–v2.22 一直没发现：旧探针量的是**未展开**的浮层，box 恒为 0×0，`inside` 恒真。）
     这一档改成相对顶栏固定定位、靠左展开，与手机端同一套做法。
     ⚠️ 顶栏是 sticky + backdrop-filter，`position:fixed` 的包含块就是顶栏自身，
     顶栏贴顶时其坐标与视口一致，所以 left/top 直接按视口算即可。 */
  .navmore-menu {
    position: fixed;
    left: 24px; right: auto;
    top: var(--navmore-top, 118px);
    max-height: calc(100vh - var(--navmore-top, 118px) - 20px);
    overflow-y: auto;
  }
  .navuser-menu { left: auto; right: 24px; }
}

/* 窄机（≤400px）：导航项默认 6px/8px 内边距下，360px 会折成 3 行（14 项确实多）。
   收一点内边距与列间距，把 360px 也压回 2 行（v2.20 是「压回一行」，v2.23 起自动折行，
   这里只求「尽量少折一行」）。 */
@media (max-width: 400px) {
  .nav { column-gap: 1px; }
  .nav > a,
  .nav .navmore-btn { padding: 6px 6px; }
}

/* 窄屏区块小标题：`.sec-head` 三项自然宽 509px，容器小于它就装不下。
   h2 / .more 已经不收缩、不换行（上面基础规则），但**说明文字**还是会跟它们抢位置，
   结果是「更多 87 篇 →」被顶到第三行、孤零零一行。
   这一档把「带更多链接」的区块里的说明文字整行挪到第 2 行：
     第 1 行 = 标题 + 更多 →      第 2 行 = 说明文字（整行）
   没带「更多」的区块（板块页/全部文章页的「共 N 篇」）不受影响，仍与标题同行。 */
@media (max-width: 640px) {
  .sec-head:has(.more) .hint { order: 3; flex: 1 1 100%; }
}

/* 小屏手机：板块压成 1 列，侧栏目录也改单列 */
@media (max-width: 560px) {
  .grid.cat { grid-template-columns: 1fr; }
  /* 顶栏小屏：徽章略缩，英文副标题收起（空间不够，优先保中文站名） */
  .logo-img { width: 28px; height: 28px; }
  .logo-sub { display: none; }
  .logo-word { font-size: 19px; }
  .logo-mark { font-size: 19px; }
  /* 关于页：标志收窄、联系区改成竖排居中 */
  .about-brand img { width: 180px; max-width: 70%; }
  .contact-box { gap: 18px; padding: 18px; justify-content: center; }
  .contact-main { min-width: 100%; text-align: center; }
  .qr img { width: 100px; height: 100px; }
  /* 注：`.toc-nav` 的移动端降列规则已随「≤900px 整块隐藏 .toc」一并删除 */
  /* 热榜列表：只留序号/日期 + 标题，右侧副信息全部收起 */
  .hotrow { gap: 10px; padding: 11px 2px; }
  .hcat, .hsrc { display: none; }
  .hot--cat .hcat { display: none; }
  .hotrow.sub .htitle { padding-left: 8px; }
  .row .di { display: none; }
  /* 注：页脚自 v2.26 起是「每组一列竖排 + flex-wrap 自动换行」（见基础规则），
     这里不需要任何覆盖 —— v2.24 之前的「≤560px 降成 1 列」就是右侧空一片的元凶，别再写回来。 */
}

/* ---------------------------------------------------------------- 回到顶部
   v2.12：全站悬停按钮（对齐《开口集》的那一只）。
   滚过一屏（560px）后淡入，固定右侧中下；点击平滑回顶。
   ⚠️ 用本站变量（--border / --ink-2 / --brand / --surface / --shadow），
   别照搬开口集的 --line / --shadow 命名，那套在本站不存在。 */
#backTop {
  position: fixed; right: 18px; bottom: 16vh; z-index: 60;
  width: 52px; padding: 10px 0 8px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: inherit; font-size: 12px; line-height: 1.2; color: var(--ink-2);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, color .15s, border-color .15s;
}
#backTop.show { opacity: 1; visibility: visible; transform: none; }
#backTop:hover { border-color: var(--brand); color: var(--brand); }
#backTop:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
#backTop svg { display: block; }

@media (max-width: 900px) {
  /* 900px 起侧栏转 static，按钮下移避开内容区底部，别压住正文 */
  #backTop { right: 12px; bottom: 24px; width: 46px; padding: 9px 0 7px; border-radius: 11px; }
}
@media (max-width: 560px) {
  #backTop { right: 10px; bottom: 18px; width: 42px; font-size: 11px; border-radius: 10px; }
  /* 尊重系统「减少动态效果」偏好 */
}
@media (prefers-reduced-motion: reduce) {
  #backTop { transition: none; }
}

/* ---------------------------------------------------------------- 用户系统
   v2.14：顶栏用户菜单 / 登录注册表单 / 文章页收藏按钮。
   ⚠️ 全部用本站变量（--border / --ink / --brand / --surface / --shadow），
   别照搬开口集的 --line 命名。
   ------------------------------------------------------------------ */

/* 顶栏「注册」按钮：与普通导航项区分开，给一点重量 */
.nav > a.nav-cta {
  background: var(--brand); color: #fff; font-weight: 500;
  padding: 6px 13px; border-radius: 999px; margin-left: 4px;
}
.nav > a.nav-cta:hover { background: #0c5f59; color: #fff; }
.nav > a.nav-cta.on { background: var(--brand); color: #fff; }

/* 顶栏用户菜单：复用 .navmore 的下拉机制，只做窄化与对齐调整 */
.navuser .navmore-btn { display: flex; align-items: center; gap: 6px; }
.uavatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-size: 11px; font-weight: 600; line-height: 1; flex-shrink: 0;
}
.navuser-menu {
  grid-auto-flow: row; grid-auto-columns: auto;
  min-width: 172px; padding: 7px 8px; gap: 1px;
}
.navuser-menu button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--ink-2);
  background: none; border: 0; border-radius: 6px; padding: 6px 11px;
  white-space: nowrap;
}
.navuser-menu button:hover { background: var(--bg-soft); color: var(--ink); }
.navuser-menu .ti { margin-right: 5px; }

/* 登录 / 注册页 */
.authpage { padding: 54px 0 76px; }
.authbox {
  max-width: 396px; margin: 0 auto; padding: 32px 30px 26px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.auth-t { font-size: 25px; margin: 0 0 8px; letter-spacing: -.02em; }
.auth-sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; margin: 0 0 22px; }
.authform { display: flex; flex-direction: column; }
.authform label {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  margin-bottom: 6px; letter-spacing: .01em;
}
.authform label .req { font-weight: 400; color: var(--ink-3); }
.authform input {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 12px; margin-bottom: 16px;
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.authform input:focus {
  outline: none; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.authbtn {
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: #fff; background: var(--brand); cursor: pointer;
  border: 0; border-radius: var(--radius-sm); padding: 11px 16px;
  margin-top: 4px; transition: background .15s;
}
.authbtn:hover { background: #0c5f59; }
.auth-err {
  font-size: 13px; line-height: 1.55; color: #9a3412;
  background: #fef4ec; border: 1px solid #f6d9c4;
  border-radius: var(--radius-sm); padding: 10px 13px; margin-bottom: 18px;
}
.auth-foot {
  font-size: 13px; color: var(--ink-3); text-align: center;
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
}
.auth-foot a { color: var(--brand); }

/* 文章页收藏按钮 */
.art-tools { margin: 14px 0 0; }
.favbtn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-size: 13px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 6px 15px; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.favbtn:hover { border-color: var(--brand); color: var(--brand); }
.favbtn.on { background: var(--brand-soft); border-color: var(--brand-2); color: var(--brand); font-weight: 500; }
.favbtn.busy { opacity: .6; cursor: default; }
.favicon { font-size: 11px; line-height: 1; }

@media (max-width: 560px) {
  .authpage { padding: 32px 0 52px; }
  .authbox { padding: 26px 20px 22px; }
  .auth-t { font-size: 22px; }
}

/* 我的空间头部：头像 + 昵称并排，别复用 .phead .ico（那是给板块 emoji 用的整块大字） */
.me-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.me-avatar {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
  font-size: 24px; font-weight: 600; line-height: 1;
}
.me-id { min-width: 0; }
.phead-user h1 { font-size: 33px; margin: 0 0 6px; letter-spacing: -.02em; }
@media (max-width: 560px) {
  .me-avatar { width: 46px; height: 46px; font-size: 20px; }
  .phead-user h1 { font-size: 25px; }
}

/* --------------------------------------------------- 首页交互板块（v2.38） */
.hlm-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.hlm-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hlm {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 14px; font-family: inherit; color: var(--ink);
  transition: border-color .15s, background .15s, transform .1s;
}
.hlm:hover { border-color: var(--brand-2); }
.hlm:active { transform: translateY(1px); }
.hlm.active { border-color: var(--brand); background: var(--brand-soft); }
.hlm-ico { font-size: 20px; line-height: 1.2; }
.hlm-name { font-size: 14.5px; font-weight: 600; }
.hlm-tag { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.hlm-panel {
  position: sticky; top: 90px; min-height: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow);
}
.hlm-ph { color: var(--ink-3); font-size: 14px; padding: 30px 0; text-align: center; }
.hlm-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hlm-card-h .hlm-ico { font-size: 30px; }
.hlm-card .hlm-name { font-size: 19px; }
.hlm-en { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.hlm-detail { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 14px; }
.hlm-act { font-size: 13.5px; color: var(--ink-2); line-height: 1.65; background: var(--bg-soft); border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 10px; }
.hlm-act b { color: var(--ink); margin-right: 4px; }
.hlm-ev { font-size: 12.5px; color: var(--ink-3); margin: 0 0 10px; }
.hlm-link { font-size: 13.5px; }
.hlm-src { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; }
.bioage { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); max-width: 760px; }
.bioage .tresult { white-space: normal; }
.ba-rows { margin: 12px 0 4px; border-top: 1px dashed var(--border-2); padding-top: 10px; }
.ba-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; padding: 4px 0; }
.ba-row b { font-weight: 700; }
.ba-row b.neg { color: #15803d; }
.ba-row b.pos { color: #b91c1c; }
.ba-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin: 10px 0 0; }
@media (max-width: 860px) {
  .hlm-layout { grid-template-columns: 1fr; }
  .hlm-panel { position: static; min-height: 0; }
}
@media (max-width: 520px) {
  .hlm-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- 文末上一篇/下一篇（v2.24，v2.24c 去框）
   全站文章按「板块 order → 板块内 id DESC」串成一条链，跨板块直连。
   结构：分隔横线 + 三栏（上一篇 | 返回 | 下一篇），纯文字链接、不带边框。 */
.art-pn { padding: 2px 0 8px; }
.art-pn-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px; align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.pn-item {
  display: flex; align-items: center; min-width: 0;
  text-decoration: none; color: var(--ink-2);
  padding: 8px 0; font-size: 14px;
  transition: color .15s;
}
.pn-item:hover { color: var(--brand); }
.pn-next { justify-content: flex-end; }
.pn-label { white-space: nowrap; }
.pn-back {
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  white-space: nowrap; padding: 8px 4px; transition: color .15s;
}
.pn-back:hover { color: var(--brand); }
.pn-off { visibility: hidden; }