:root {
  /* —— 骨架 —— */
  --ink: #0E172E;        /* 墨蓝黑：文字色，暗黑下会翻转，严禁当背景用 */
  --ink-bg: #0E172E;      /* 深色面：hero / sos / 页脚，两套主题下都不变 */
  --on-ink: #FFFFFF;      /* 深色面上的文字，两套主题下都不变 */
  --ink-2: #222028;      /* 炭黑：次级重字 */
  --paper: #FFFFFF;
  --paper-2: #F7F7F5;    /* 暖白：浅底带 */
  --paper-3: #F1F0EC;    /* 表头 / 隔行 */
  --rule: #E4E3DE;       /* hairline */
  --rule-2: #CBC9C2;     /* 强 hairline */
  --ghost: #8A8A94;     /* 3.42:1 白底，仅限 26px/800 的大号装饰数字 */

  /* —— 信号色 —— */
  --red: #C8102E;        /* 品牌 + 高危 + 紧急，全站唯一高饱和色 */
  --red-deep: #9E0C24;
  --red-wash: #FDF2F3;
  --amber: #B45309;      /* 次级预警，面积必须小于红 */
  --amber-wash: #FDF6EC;
  --teal: #1F4E5F;       /* 辅助：链接 / 中性信息（已降级，不再做主色） */
  --teal-link: #1A6476;
  --teal-wash: #EDF3F5;
  --green: #1A7A46;      /* 已核实 / 已解决 */

  /* —— 文字 —— */
  --body: #2B2B31;
  --mid: #5C5C64;
  --faint: #696971;   /* 5.44:1 白底 / 4.77:1 表头底，小字达 AA */

  /* —— 尺度 —— */
  --wrap: 1240px;
  --nav-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* —— 字阶（mobile-first，桌面用 clamp 放大） ——
     原 --fs-sm=13px 是正文基准，中文 13px 偏小（长文细读吃力），
     连带 h2 只有 17px、侧栏标题与正文同号（13px）压不住层级。
     整体上调一档：正文 14、h3 15、h2 18、章节标题 21。 */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-base: 16px;
  --fs-lg: 18px;
  --fs-xl: 21px;
  --fs-2xl: 26px;
  --fs-3xl: 32px;
}

[data-theme="dark"] {
  --ink: #E8ECF4;
  --ink-bg: #0A0E15;
  --on-ink: #F2F5F8;
  --ink-2: #D6DBE6;
  --paper: #0F141C;
  --paper-2: #151B24;
  --paper-3: #1B222D;
  --rule: #262E3A;
  --rule-2: #39424F;
  --ghost: #7E8A96;

  --red: #F0465F;
  --red-deep: #FF6B7F;
  --red-wash: #24131A;
  --amber: #E08A2B;
  --amber-wash: #221A10;
  --teal: #6FB3C4;
  --teal-link: #7CC0D0;
  --teal-wash: #16262C;
  --green: #4FBF82;

  --body: #C6CCD6;
  --mid: #9AA3B0;
  --faint: #8A94A0;
}

/* ============================================================
   基础
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", 微软雅黑, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.8;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  /* 中文避头尾：标点（，。、；：」』）等不允许出现在行首。
     balance 重新分配断点后容易把标点挤到行首，必须显式声明 strict。 */
  line-break: strict;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); }
p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }
input, textarea { font: inherit; }
::selection { background: #FBD9DD; color: #6E0A1C; }
[data-theme="dark"] ::selection { background: #4A1620; color: #FFD9DE; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* 锚点跳转时给 sticky 头部留位，否则标题被压在导航下 */
:target, .art-content h2, .art-content h3 { scroll-margin-top: calc(var(--nav-h) + 18px); }
.sr-only {  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 跳转到主内容的键盘入口：平时移出视口，聚焦时才出现（WCAG 2.4.1） */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px; background: var(--ink-bg); color: var(--on-ink);
  font-size: var(--fs-sm); font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; outline: 2px solid var(--red); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ============================================================
   文字组件
   ============================================================ */
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .08em;
  color: var(--red); text-transform: uppercase;
}
.kicker::before { content: ''; width: 18px; height: 2px; background: var(--red); flex: none; }

/* 状态标签：文字 + 6px 色块，无底无边（取代 V2 的彩色 pill） */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.st::before { content: ''; width: 6px; height: 6px; background: currentColor; flex: none; }
.st-crit { color: var(--red); }
.st-warn { color: var(--amber); }
.st-case { color: var(--teal-link); }
.st-run { color: var(--faint); }
/* 证据强度：与状态是两个维度。空心方块=证据，实心方块=状态。 */
.ev { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.ev::before { content: ''; width: 6px; height: 6px; border: 1px solid currentColor; background: transparent; flex: none; }
.ev-ok { color: var(--teal-link); }
.ev-pend { color: var(--faint); }
.st-ok { color: var(--green); }
[data-theme="dark"] .st-crit { color: var(--red-deep); }
[data-theme="dark"] .st-warn { color: #E5A85C; }
[data-theme="dark"] .st-case { color: var(--teal-link); }
[data-theme="dark"] .st-ok { color: var(--green); }

/* 分段风险计：5 格刻度 */
.meter { display: inline-flex; gap: 3px; align-items: center; }
.meter i { width: 10px; height: 5px; background: var(--rule-2); }
.meter i.on { background: var(--amber); }
.meter.lv-crit i.on { background: var(--red); }
.meter.lv-case i.on { background: var(--teal-link); }
.meter.lv-run i.on { background: var(--faint); }
.meter.lv-ok i.on { background: var(--green); }
/* AfMeter()/AfMeterScore() 输出的是 flag key（d/w/l/r/v），设计稿用的是语义类
   （crit/warn/case/run/ok）。补齐别名，否则榜单的风险指数条只剩默认琥珀色。 */
.meter.lv-d i.on { background: var(--red); }
.meter.lv-w i.on { background: var(--amber); }
.meter.lv-l i.on { background: var(--teal-link); }
.meter.lv-r i.on { background: var(--faint); }
.meter.lv-v i.on { background: var(--green); }

/* 元信息行 */
.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); color: var(--faint); }
.meta > * { display: inline-flex; align-items: center; gap: 6px; }
.meta .num { font-variant-numeric: tabular-nums; }

/* 按钮：0 圆角 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 22px; font-size: var(--fs-md); font-weight: 600;
  cursor: pointer; white-space: nowrap; border-radius: 2px;
  transition: background .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-deep); }
.btn-ink { background: var(--ink-bg); color: var(--on-ink); }
.btn-ink:hover { background: #1E2A47; }
.btn-line { border: 1px solid var(--rule-2); color: var(--ink); background: var(--paper); }
.btn-line:hover { border-color: var(--ink); }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: var(--fs-sm); }

/* 区块标题：报纸式粗规则线 */
.sec-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 22px;
}
.sec-head h2 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.sec-head .en { font-size: 12px; color: var(--faint); letter-spacing: .14em; text-transform: uppercase; }
.sec-head .sub { font-size: var(--fs-xs); color: var(--faint); }
.sec-head .more { margin-left: auto; font-size: var(--fs-sm); font-weight: 600; color: var(--teal-link); display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 2px; }
.sec-head .more:hover { color: var(--red); }

/* 通栏带 */
/* 板块间距只有两档：异色相邻（白↔wash）0px 靠底色分隔；同色相邻必须 52px。
   原先 0/36/52/56/40/96 六种值混用，毫无体系。 */
.band { background: var(--paper); border-top: 1px solid var(--rule); padding: 52px 0 56px; }
.band-2 { background: var(--paper-2); }

/* 内联箭头（不用图标字体） */
.chev { width: 12px; height: 12px; flex: none; }
.chev path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   顶栏 + 站头
   ============================================================ */
.topbar { background: var(--paper); border-bottom: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--faint); }
.tb-inner { display: flex; align-items: center; gap: 6px 14px; height: 32px; overflow: hidden; }
.tb-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tb-item b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.tb-item.is-key b { color: var(--red); }
.tb-sep { width: 1px; height: 11px; background: var(--rule-2); flex: none; }
.tb-right { margin-left: auto; }
.tb-hide, .tb-hide-sm { display: none; }

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s var(--ease);
}
.site-head.is-stuck { box-shadow: 0 1px 0 var(--rule), 0 8px 24px -18px rgba(14, 23, 46, .35); }
.head-inner { display: flex; align-items: center; gap: 20px; height: var(--nav-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 32px; width: auto; }
.logo-rev { display: none; }
[data-theme="dark"] .logo-ink { display: none; }
[data-theme="dark"] .logo-rev { display: block; }

.nav { display: none; }
.site-head.is-open .nav {
  display: flex; position: absolute; left: 0; right: 0; top: var(--nav-h);
  flex-direction: column; gap: 0; background: var(--paper);
  border-bottom: 1px solid var(--rule); padding: 8px 20px 14px;
  box-shadow: 0 18px 30px -18px rgba(14, 23, 46, .3);
}
.site-head.is-open .nav a { height: 46px; padding: 0 4px; }
.site-head.is-open .nav a::after { left: 0; right: auto; width: 18px; }
.nav a {
  position: relative; display: inline-flex; align-items: center;
  padding: 0 12px; font-size: var(--fs-md); font-weight: 500; color: var(--ink-2);
  transition: color .16s var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .18s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); background: var(--rule-2); }
.nav a.is-on { color: var(--ink); font-weight: 700; }
.nav a.is-on::after { transform: scaleX(1); }

.head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; color: var(--mid); cursor: pointer; border-radius: 2px;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.icon-btn:hover { color: var(--ink); background: var(--paper-3); }
.nav-toggle { display: inline-flex; }

/* ============================================================
   首屏查询区（通栏深墨）
   ============================================================ */
.hero { background: var(--ink-bg); color: var(--on-ink); padding: 40px 0 0; position: relative; }
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red);
}
.hero .wrap { position: relative; }
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .16em; color: rgba(255, 255, 255, .55);
}
.hero-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--red); flex: none; }
.hero h1 {
  margin-top: 18px; font-size: clamp(27px, 6.4vw, 46px); font-weight: 700;
  line-height: 1.22; letter-spacing: -.02em; color: var(--on-ink); max-width: 15em;
}
.hero h1 em { font-style: normal; font-weight: 800; box-shadow: inset 0 -0.09em 0 var(--red); }
.hero-sub { margin-top: 14px; font-size: var(--fs-base); line-height: 1.85; color: rgba(255, 255, 255, .68); max-width: 40em; }

.hero-form { margin-top: 26px; }
.hero-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-tab {
  min-height: 32px; padding: 0 13px; font-size: var(--fs-sm); font-weight: 500;
  color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 2px; cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.hero-tab:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.hero-tab.is-on { background: var(--on-ink); color: var(--ink-bg); border-color: var(--on-ink); font-weight: 700; }

.hero-row { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.hero-box {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 10px 0 16px;
  background: var(--paper); border-radius: 2px;
}
.hero-box .hb-ic { color: var(--faint); display: flex; flex: none; }
.hero-box input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-size: var(--fs-base); color: var(--ink);
}
.hero-box input::placeholder { color: var(--faint); }
.hero-box .hb-clear {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--paper-3);
  color: var(--mid); cursor: pointer; display: none; align-items: center; justify-content: center;
}
.hero-box .hb-clear.is-on { display: inline-flex; }
.hero-btn { min-height: 56px; padding: 0 26px; font-size: var(--fs-base); }

.hero-hot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.hero-hot-t { font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); flex: none; }
.hero-chip {
  font-size: var(--fs-sm); color: rgba(255, 255, 255, .85); padding: 10px 0; margin: -9px 0;
  border-bottom: 1px dotted rgba(255, 255, 255, .35);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.hero-chip:hover { color: #fff; border-bottom-color: var(--red); }

.hero-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 32px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.hero-stats > div { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.hero-stats > div:nth-child(-n+2) { border-top: 0; }
.hero-stats b {
  display: block; font-size: clamp(22px, 5vw, 32px); font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--on-ink);
}
.hero-stats i { display: block; font-style: normal; font-size: var(--fs-xs); color: rgba(255, 255, 255, .6); margin-top: 6px; }
.hero-stats s { display: block; text-decoration: none; font-size: 12px; color: rgba(255, 255, 255, .55); margin-top: 1px; }
.hero-note {
  display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 14px 0 18px;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .55);
}
.hero-note b { color: rgba(255, 255, 255, .8); font-weight: 600; }

/* 十大危险信号自查清单：原生 checkbox（appearance:none 重绘），
   勾选由 initCheck() 汇总到 #ckBar，≥3 条触发红色处置提示。 */
.check { display: grid; gap: 0; margin-top: 8px; }
.ck {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr);
  gap: 0 14px; padding: 14px 0; border-bottom: 1px solid var(--rule);
  cursor: pointer; align-items: start;
}
.ck:last-child { border-bottom: 0; }
.ck input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 2px 0 0; padding: 0;
  border: 2px solid var(--rule-2); background: var(--paper);
  cursor: pointer; flex: none;
}
.ck input:checked { background: var(--red); border-color: var(--red); }
.ck input:checked::after {
  content: ''; display: block; width: 8px; height: 4px; margin: 3px auto 0;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.ck input:focus-visible { outline: 2px solid var(--teal-link); outline-offset: 2px; }
.ck:hover b { color: var(--red); }
.ck-t { min-width: 0; }
.ck-t b { display: block; font-size: var(--fs-base); font-weight: 600; color: var(--ink); line-height: 1.6; transition: color .14s var(--ease); }
.ck-t i { display: block; font-style: normal; margin-top: 3px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.7; max-width: 44em; }
.ck-bar {
  margin: 22px 0 0; padding: 13px 16px; background: var(--red-wash); border-left: 3px solid var(--red);
  font-size: var(--fs-sm); color: var(--body); line-height: 1.7; max-width: 44em;
}
/* 静态页证据固定清单容器 */
.ck-list { border: 1px solid var(--rule); border-radius: 12px; padding: 2px 18px; background: var(--paper); }
.ck-bar[hidden] { display: none; }
.ck-bar b { color: var(--red); font-weight: 800; font-variant-numeric: tabular-nums; }

/* 评论（先审后发）：文章页主栏内。列表即已通过审核的评论；
   表单提交后仅作前端示意（生产由 DedeBIZ ajax_comment_post 接管）。 */
.cm { margin-top: 34px; border-top: 2px solid var(--ink); padding-top: 26px; }
.cm-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.cm-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.cm-head h2 .num { font-size: var(--fs-md); color: var(--mid); }
.cm-rule { font-size: var(--fs-xs); color: var(--faint); }
.cm-warn {
  margin-top: 14px; padding: 12px 16px; background: var(--red-wash); border-left: 3px solid var(--red);
  font-size: var(--fs-sm); color: var(--body); line-height: 1.8; max-width: 44em;
}
.cm-warn b { color: var(--red); }
.cm-form { margin-top: 18px; }
.cm-form textarea {
  display: block; width: 100%; min-height: 96px; padding: 12px 14px;
  border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--body);
  font-size: var(--fs-sm); line-height: 1.7; border-radius: 2px; resize: vertical;
  font-family: inherit;
}
.cm-form textarea::placeholder, .cm-form-row input::placeholder { color: var(--ghost); }
.cm-form textarea:focus, .cm-form-row input:focus { outline: 2px solid var(--teal-link); outline-offset: -1px; }
.cm-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.cm-form-row input {
  flex: 0 1 160px; min-width: 0; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--rule-2); background: var(--paper-2);
  color: var(--body); font-size: var(--fs-sm); border-radius: 2px;
}
#cmValidate { flex: 0 1 120px; min-width: 100px; }
.cm-form-row input:disabled { opacity: .45; cursor: not-allowed; background: var(--paper); }
.cm-cap-img { border: 1px solid var(--rule-2); background: var(--paper-2); cursor: pointer; flex: none; width: 90px; height: 44px; object-fit: contain; box-sizing: border-box; }
.cm-anon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; min-height: 44px; font-size: var(--fs-sm); color: var(--mid);
  cursor: pointer; flex: none; user-select: none;
}
.cm-anon:hover { color: var(--ink); }
.cm-anon input {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin: 0; padding: 0;
  border: 2px solid var(--rule-2); background: var(--paper);
  cursor: pointer; flex: none; min-height: 0;
}
.cm-anon input:checked { background: var(--red); border-color: var(--red); }
.cm-anon input:checked::after {
  content: ''; display: block; width: 8px; height: 4px; margin: 3px auto 0;
  border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg);
}
.cm-form-row .btn { flex: none; min-height: 44px; }
.cm-tip { margin-top: 10px; font-size: var(--fs-xs); color: var(--teal-link); }
.cm-tip[hidden] { display: none; }
/* 登录态：昵称换成只读身份，不渲染验证码框（与后端「登录免验证码」同源） */
.cm-who { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); background: var(--paper-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.cm-list { list-style: none; margin: 26px 0 0; padding: 0; }
/* 空态：0 条线索时给一句引导，而不是只剩一个空 ul */
.cm-empty { padding: 14px 0; font-size: var(--fs-sm); color: var(--faint); line-height: 1.9; border-bottom: 0; display: block; }
/* 表格：编辑器直出的裸 table 由 AfBody 包一层 .table-wrap，小屏横向滚动 */
.table-wrap { overflow-x: auto; margin: 20px 0 0; -webkit-overflow-scrolling: touch; }
/* 给个下限：列多时宁可横向滚动，也不要把「业务真实性」挤成「业务真实 / 性」 */
.data-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th, .data-table td { padding: 9px 12px; border: 1px solid var(--rule); text-align: left; }
.data-table th { background: var(--paper-2); font-weight: 700; color: var(--ink); }
.cm-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 14px;
  padding: 16px 0; border-bottom: 1px solid var(--rule);
}
.cm-item:last-child { border-bottom: 0; }
.cm-ava {
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: var(--paper-3); color: var(--mid); font-size: var(--fs-sm); font-weight: 700;
}
.cm-item.is-ed .cm-ava { background: var(--teal); color: #fff; }
.cm-b { min-width: 0; }
.cm-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.cm-meta b { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.cm-badge {
  font-size: var(--fs-xs); font-weight: 700; color: var(--teal-link);
  border: 1px solid currentColor; padding: 0 6px; line-height: 18px;
}
.cm-meta span { font-size: var(--fs-xs); color: var(--faint); }
.cm-b p { margin-top: 6px; font-size: var(--fs-base); color: var(--body); line-height: 1.8; max-width: 44em; }
.cm-act { margin-top: 8px; display: flex; gap: 16px; align-items: center; }
/* 二级回复：左缩进线 + 小号头像（对齐 news 的 .replies 模型） */
.cm-replies { margin-top: 12px; border-left: 2px solid var(--rule); padding-left: 16px; }
.cm-item.is-sub {
  grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px;
  padding: 12px 0; border-bottom: 0;
}
.cm-item.is-sub + .cm-item.is-sub { border-top: 1px solid var(--rule); }
.cm-item.is-sub .cm-ava { width: 28px; height: 28px; font-size: var(--fs-xs); }
.cm-item.is-sub .cm-b p { font-size: var(--fs-sm); }
.children-more[hidden] { display: none; }
.cm-expand {
  margin-top: 10px; background: none; border: 0; padding: 4px 0; min-height: 24px; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; color: var(--teal-link); transition: color .14s var(--ease);
}
.cm-expand:hover { color: var(--red); }
.cm-reply {
  background: none; border: 0; padding: 4px 0; min-height: 24px; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; color: var(--faint); transition: color .14s var(--ease);
}
.cm-reply:hover { color: var(--red); }
.cm-replying {
  margin: 0 0 10px; padding: 7px 12px; background: var(--paper-3); border-left: 3px solid var(--teal-link);
  font-size: var(--fs-xs); color: var(--mid);
}
.cm-replying[hidden], .cm-cancel[hidden] { display: none; }
.cm-like {
  background: none; border: 0; padding: 4px 0; min-height: 24px; cursor: pointer;
  font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
  transition: color .14s var(--ease);
}
.cm-like:hover { color: var(--mid); }
.cm-like.is-on { color: var(--red); }
.cm-like b { font-weight: 700; }

/* 板块统一留白：顶 52（≥1024 顶 72，与 .band 对齐）+ 收尾 76。
   此前三个区块用内联 padding 52 顶，≥1024 下与 .band 的 72 差 20px，
   造成 128/149 两档断行并存的隐性不一致。 */
.wrap.sect { padding-top: 52px; padding-bottom: 76px; }

/* 崩盘时间线：日期驱动的窄列表，与骗局类型速查组成左右分栏。
   「268 已确认崩盘」此前在首页没有任何板块承载。 */
.tl { border-top: 1px solid var(--rule); }
.tl-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
}
.tl-item:last-child { border-bottom: 0; }
.tl-d { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.tl-main { min-width: 0; grid-column: 1; grid-row: 2; }
/* 注意：.st 只定行不定列时，自动放置算法会先放「定行」项，
   导致状态占 col1、项目名被挤到 col2（桌面端显式列号不受影响） */
.tl-n { display: block; font-size: var(--fs-md); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.tl-main p { margin-top: 3px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.7; max-width: 44em; }
.tl-item .st { grid-column: 2; grid-row: 2; align-self: start; margin-top: 4px; }

/* —— 不允许用 text-wrap: balance ——
   balance 会把两行强行拉成等长，「第一行故意不写到右边缘」，
   读起来像提前换行，违背自然阅读预期（用户明确否掉）。
   正确行为是：第一行写满到容器边缘 → 第二行接着写 → 超过限定行数才用省略号，
   这由 -webkit-line-clamp 原生提供（它自带 …）。
   这里只保留长正文的 pretty（避头尾，不影响断行位置）。 */
.art-content p, .static-doc p, .q-sig li, .tl-main p {
  text-wrap: pretty;
}

/* ============================================================
   紧急预警条
   ============================================================ */
.alert { background: var(--red-wash); border-bottom: 1px solid var(--rule); }
.alert-in { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 20px; }
.alert-tag {
  flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--red); letter-spacing: .1em;
  display: inline-flex; align-items: center; gap: 6px;
}
.alert-tag::before { content: ''; width: 7px; height: 7px; background: var(--red); border-radius: 50%; }
.alert-view { flex: 1; min-width: 0; position: relative; height: 40px; overflow: hidden; }
.alert-item {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 12px;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.alert-item.is-on { opacity: 1; pointer-events: auto; }
/* 两行截断而非单行省略号：单行省略在 768 及以下会把整条预警吃到只剩几个字 */
.alert-item span {
  flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500; color: #7A1226;
  line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
[data-theme="dark"] .alert-item span { color: #F2A9B6; }
.alert-item a { flex: none; display: inline-flex; align-items: center; min-height: 24px; font-size: var(--fs-xs); font-weight: 700; color: var(--red); }
.alert-item a:hover { text-decoration: underline; }
.alert-close { flex: none; color: var(--red); opacity: .5; cursor: pointer; padding: 7px; }
.alert-close:hover { opacity: 1; }

/* ============================================================
   左右分栏
   ============================================================ */
.split { display: grid; gap: 32px; }

/* —— 风险项目榜：终端式表格 —— */
.board { border: 1px solid var(--rule); }
.bd-head { display: none; }
.bd-head > :nth-child(6) { display: none; }
.bd-item {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
  /* 手机：第一行「序号 | 项目名 | 状态」，第二行「风险指数 | 涉案金额」。
     金额不再单独飘在右上角，避免还原成一枚孤零零的「—」。 */
  grid-template-areas: "n main st" "n risk amt";
  column-gap: 10px; row-gap: 6px; align-items: center;
  padding: 13px 14px; border-bottom: 1px solid var(--rule);
  transition: background .14s var(--ease);
}
.bd-item:last-child { border-bottom: 0; }
.bd-item:nth-child(even) { background: var(--paper-2); }
.bd-item:hover { background: var(--teal-wash); }
.bd-n { grid-area: n; align-self: start; padding-top: 2px; font-size: var(--fs-xs); font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
/* 前三名的序号标红：用 .top 而不是 nth-child —— .bd-head 也占一个子元素位，
   nth-child(-n+3) 实际只覆盖到第 1、2 名，第 3 名是灰的。 */
.bd-n.top, .bd-item:nth-child(-n+3) .bd-n { color: var(--red); }
.bd-main { grid-area: main; min-width: 0; }
/* 库里的标题是文章标题而不是项目名，最长会写满两行；两行封顶 + 省略号，
   避免个别长标题把整榜的行高拉得参差不齐 */
.bd-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--fs-md); font-weight: 600; color: var(--ink); line-height: 1.5;
}
.bd-kind { display: block; font-size: var(--fs-xs); color: var(--faint); margin-top: 1px; }
.bd-kind s { text-decoration: none; }
/* 手机上 .bd-side 直接摊平，让状态 / 风险指数各自落到 grid-area（桌面同样摊平） */
.bd-side { display: contents; }
.bd-st { grid-area: st; justify-self: end; align-self: start; }
.bd-risk { grid-area: risk; justify-self: start; display: inline-flex; align-items: center; gap: 7px; }
.bd-score { font-size: var(--fs-xs); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.bd-amt { grid-area: amt; justify-self: end; align-self: center; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bd-date { display: none; }
/* 手机上给两个仅为「—」的列补文字标签，避免两枚短横线含义不明 */
@media (max-width: 767px) {
  .bd-risk::before { content: '风险'; font-size: var(--fs-xs); font-weight: 400; color: var(--faint); }
  .bd-amt::before { content: '涉案'; margin-right: 4px; font-size: var(--fs-xs); font-weight: 400; color: var(--faint); }
}
.board-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  padding: 12px 14px; background: var(--paper-2);  /* 上方 bd-item 已带 1px 底线，此处不再画顶线 */
  font-size: var(--fs-xs); color: var(--mid);
}
.board-foot a { margin-left: auto; font-weight: 700; color: var(--teal-link); display: inline-flex; align-items: center; gap: 4px; min-height: 26px; }
.board-foot a:hover { color: var(--red); }
.board-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--faint); line-height: 1.85; }
.board-note > span { display: block; max-width: 44em; }
.board-note b { color: var(--mid); font-weight: 600; }
/* 注释里的行内链接不能和灰色说明文字同色，否则看不出可点 */
.board-note a { color: var(--teal-link); font-weight: 600; }
.board-note a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 2px; }
/* .board 自身不设 padding（让 .bd-item 的 hover 底色能铺满整行），
   因此框内每个子块都要自带左右内边距 —— 否则文字直接压在左边框上。 */
.board > .board-note { padding: 12px 14px 14px; }
/* 不挂在 .board 里的页脚注（/tags、/list/7 等）：规则线跟随文字宽度收窄，
   并与下方页脚留出间距 —— 原来 1176px 的横线只有 528px 文字、且紧贴页脚。 */
.wrap > .board-note { max-width: 46em; margin: 16px 0 44px; }

/* 评级口径图例：4 个等级复用 .st 状态标签，替代原来挤成一段的流水长句 */
.board-note.nv { padding: 12px 14px 14px; }
.nv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; }
.nv-head span { color: var(--faint); }
.nv-list { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 24px; }
.nv-list > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nv-list dt { flex: none; }
.nv-list dd { margin: 0; color: var(--faint); line-height: 1.7; }

/* —— 侧栏 —— */
.side-stack { display: grid; gap: 20px; }
/* 关键时间窗口：按紧急度递减着色（红→琥珀→灰），避免三个都是红色失去层级 */
.tw { padding: 2px 0; }
.tw li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.tw li:last-child { border-bottom: 0; }
.tw b { font-size: var(--fs-sm); font-weight: 800; color: var(--faint); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.tw li:nth-child(1) b { color: var(--red); }
.tw li:nth-child(2) b { color: var(--amber); }
.tw i { display: block; font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); line-height: 1.5; }
.tw p { margin-top: 3px; font-size: var(--fs-xs); color: var(--faint); line-height: 1.7; }
.panel { border: 1px solid var(--rule); background: var(--paper); }
.panel-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--rule); }
.panel-head h2, .panel-head h3 { font-size: var(--fs-md); font-weight: 700; }
.panel-head .tag { margin-left: auto; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
/* panel-body 内的可点击行（.rank a / .type-item）自带 ~16px 横向内边距，
   只有纯文本块没有 —— 统一到 16px 让正文与标题左缘对齐，不叠加双层 padding。 */
.panel-body > p { padding: 12px 16px 14px; }
.panel-foot { display: block; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--paper-2); font-size: var(--fs-xs); font-weight: 600; color: var(--teal-link); }
.panel-foot:hover { color: var(--red); }

.rank { padding: 2px 0; }
.rank li + li { border-top: 1px solid var(--rule); }
.rank a { display: flex; gap: 11px; padding: 12px 16px; align-items: flex-start; transition: background .14s var(--ease); }
.rank a:hover { background: var(--paper-2); }
.rank .n { flex: none; width: 16px; text-align: center; font-size: var(--fs-xs); font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; line-height: 1.7; }
.rank li:nth-child(1) .n, .rank li:nth-child(2) .n, .rank li:nth-child(3) .n { color: var(--red); }
/* 自然换行 + 2 行截断：第一行写满，第二行续，超出由 line-clamp 加省略号。
   不要 balance —— 它会让第一行故意不满，看着像提前换行。 */
.rank .t {
  font-size: var(--fs-sm); color: var(--body); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rank a:hover .t { color: var(--ink); }
.rank .m { display: block; font-size: var(--fs-xs); color: var(--faint); margin-top: 2px; font-variant-numeric: tabular-nums; }

.qk { padding: 4px 0; }
.qk a { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); transition: background .14s var(--ease); }
.qk a:hover { background: var(--paper-2); color: var(--ink); }
.qk .qk-ic { color: var(--faint); display: flex; flex: none; }
.qk .qk-d { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--faint); margin-top: 1px; }

/* —— 紧急求助卡 —— */
.sos { background: var(--ink-bg); color: var(--on-ink); padding: 20px; }
.sos h3 { font-size: var(--fs-md); font-weight: 700; color: var(--on-ink); }
.sos p { margin-top: 8px; max-width: 44em; font-size: var(--fs-sm); color: rgba(255, 255, 255, .74); line-height: 1.8; }
.sos .tel {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.sos .tel b { font-size: 34px; font-weight: 800; line-height: 1; color: var(--on-ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sos .tel span { font-size: var(--fs-xs); color: rgba(255, 255, 255, .64); }
.sos .sos-act { margin-top: 16px; }
.sos .sos-act .btn { width: 100%; }

/* ============================================================
   最新曝光：1 大 + 5 小
   ============================================================ */
.feed { display: grid; gap: 30px; }
.feed-lead .kicker { margin-bottom: 12px; }
.feed-lead .lead-fig { margin-bottom: 15px; }
.feed-lead .lead-fig img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 14%;
  background: var(--paper-3); border: 1px solid var(--rule);
}
.feed-lead h3 {
  font-size: clamp(19px, 4.4vw, 27px); font-weight: 700; line-height: 1.42; letter-spacing: -.015em;
}
.feed-lead h3 a { transition: color .16s var(--ease); padding: 3px 0; }
.feed-lead h3 a:hover { color: var(--red); }
.feed-lead .lead-p {
  margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--red);
  font-size: var(--fs-base); color: var(--mid); line-height: 1.9;
  max-width: 44em;
}
.feed-lead .meta { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.feed-lead .read { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; min-height: 30px; font-size: var(--fs-sm); font-weight: 700; color: var(--teal-link); }
.feed-lead .read:hover { color: var(--red); }

/* 不另加顶线：.sec-head 的 2px 底线已经在那，再来一条两条线只隔 22px，视觉上是断裂的双线 */
.feed-list { border-top: 0; }
.fl-item { display: flex; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.fl-item:last-child { border-bottom: 0; }
.fl-item h3 { font-size: var(--fs-md); font-weight: 500; line-height: 1.65; }
.fl-item h3 a { color: var(--ink-2); transition: color .16s var(--ease); padding: 3px 0; }
.fl-item h3 a:hover { color: var(--red); }
.fl-item .meta { margin-top: 5px; }
.fl-fig { flex: none; width: 96px; }
.fl-fig img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 14%; background: var(--paper-3); }
.fl-item .fl-go { flex: none; align-self: center; color: var(--rule-2); transition: color .16s var(--ease), transform .16s var(--ease); }
.fl-item:hover .fl-go { color: var(--red); transform: translateX(2px); }

/* ============================================================
   骗局类型速查：细线双列
   ============================================================ */
.type-grid { border: 1px solid var(--rule); }
.type-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--rule); transition: background .14s var(--ease);
}
.type-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .14s var(--ease); }
.type-item:hover { background: var(--paper-2); }
.type-item:hover::before { background: var(--red); }
.type-item .t-n { font-size: var(--fs-md); font-weight: 600; color: var(--ink); }
.type-item .t-d { display: block; font-size: var(--fs-xs); color: var(--faint); margin-top: 1px; }
.type-item .t-c { margin-left: auto; font-size: var(--fs-xs); color: var(--mid); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 已移除 hover 浮现的「进入 →」：有背景变色 + 左侧红条两个反馈就够了，
   再浮现一行引导文字属于冗余（且 opacity:0 的元素仍占宽度）。 */
/* 面板内复用 type-item（骗局类型速查移入侧栏后） */
.type-list { padding: 2px 0; }
.type-list .type-item:last-child { border-bottom: 0; }

/* ============================================================
   深度调查
   ============================================================ */
.deep { display: grid; gap: 32px; }
.deep-item { min-width: 0; }
.deep-fig { margin-bottom: 16px; }
.deep-fig img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 14%; background: var(--paper-3); }
.deep-item h3 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; letter-spacing: -.012em; }
.deep-item h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .16s var(--ease); padding: 3px 0; }
.deep-item h3 a:hover { color: var(--red); }
.deep-item p { margin-top: 10px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.85;
  /* 描述最多两行：超出部分裁掉，卡片高度与设计稿一致 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deep-item .meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--rule); }

/* ============================================================
   栏目入口
   ============================================================ */
/* 原方案 4 个 273px 窄列各塞五层信息 + 右边框 + hover 底色，读起来像表格。
   现在：编号红字、栏名 20px、描述裁一句、篇数加重，去右边框与常驻箭头，
   改 hover 红左条（与 .type-item 同一套视觉语言）。 */
.chan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.chan-item { position: relative; padding: 20px 20px 22px 20px; border-bottom: 1px solid var(--rule); transition: background .16s var(--ease); }
.chan-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; transition: background .16s var(--ease); }
.chan-item:hover { background: var(--paper-2); }
.chan-item:hover::before { background: var(--red); }
.chan-item:last-child { border-bottom: 0; }
.chan-item:hover { background: var(--paper-2); }
.chan-no { font-size: var(--fs-xs); font-weight: 700; color: var(--red); letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.chan-item h3 { margin-top: 7px; font-size: 20px; font-weight: 700; letter-spacing: -.012em; }
.chan-item p { margin-top: 6px; min-height: calc(2 * 1.8em); font-size: var(--fs-sm); color: var(--mid); line-height: 1.8; }
.chan-item .c-n { margin-top: 10px; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.chan-item .c-n b { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.chan-item .go { position: absolute; right: 20px; bottom: 22px; display: inline-flex; align-items: center; color: var(--red); opacity: 0; transition: opacity .16s var(--ease); }
.chan-item:hover .go { opacity: 1; }

/* ============================================================
   维权四步
   ============================================================ */
.guide { border-top: 2px solid var(--ink); padding-top: 30px; }
.guide-head { font-size: clamp(20px, 4.6vw, 28px); font-weight: 700; letter-spacing: -.015em; }
.guide-sub { margin-top: 10px; font-size: var(--fs-sm); color: var(--mid); max-width: 44em; }
.steps { display: grid; gap: 0; margin-top: 26px; counter-reset: step; }
.step { padding: 18px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.step:first-child { border-top: 0; }
.step-no {
  font-size: 26px; font-weight: 800; line-height: 1; color: var(--ghost);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.step:hover .step-no { color: var(--red); }
.step h3 { font-size: var(--fs-md); font-weight: 700; }
.step p { margin-top: 5px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.85; max-width: 44em; }
.guide-cta {
  display: flex; flex-direction: column; gap: 12px; margin-top: 26px; padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.guide-cta .btn { width: 100%; }
.guide-tel { font-size: var(--fs-sm); color: var(--mid); }
.guide-tel b { font-size: var(--fs-lg); font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------- 官方举报与求助渠道 ----------
   首页主体此前只有侧栏一张 SOS 卡提 96110，官方求助入口在通栏层面是缺失的。
   反诈平台必须把用户导向有执法权的入口，这是功能闭环，不是装饰。 */
.chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.chan-off { display: block; padding: 20px 22px 22px; background: var(--paper); transition: background .16s var(--ease); }
.chan-off:hover { background: var(--paper-2); }
.co-name { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.co-num { display: block; margin-top: 9px; font-size: 24px; font-weight: 800; line-height: 1.1; color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.chan-off.is-link .co-num { font-size: var(--fs-md); color: var(--teal-link); }
.chan-off.is-link:hover .co-num { color: var(--red); }
.co-d { display: block; margin-top: 9px; font-size: var(--fs-xs); color: var(--mid); line-height: 1.75; }

/* ============================================================
   页脚
   ============================================================ */
.site-foot { background: var(--ink-bg); color: rgba(255, 255, 255, .62); padding: 40px 0 0; }
.foot-grid { display: grid; gap: 28px; padding-bottom: 30px; }
/* logo 图形里已经带「测盘网」字样，不再重复一行文字；logo 放到 38px 保证小屏可读 */
.foot-brand img { height: 38px; width: auto; }
.foot-brand p { margin-top: 14px; max-width: 44em; font-size: var(--fs-xs); line-height: 1.9; color: rgba(255, 255, 255, .6); }
.foot-sub { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .14); max-width: 460px; }
.foot-sub-row { display: flex; gap: 10px; }
.foot-sub input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
  color: var(--on-ink); font-size: var(--fs-sm); border-radius: 2px;
}
.foot-sub input::placeholder { color: rgba(255, 255, 255, .45); }
.foot-sub input:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: transparent; }
.foot-sub .tip { margin-top: 8px; font-size: var(--fs-xs); color: rgba(255, 255, 255, .55); }
.foot-col h3 { font-size: var(--fs-sm); font-weight: 700; color: #fff; letter-spacing: .04em; }
.foot-col ul { margin-top: 12px; }
.foot-col li { margin-top: 8px; }
.foot-col a { display: inline-block; padding: 4px 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, .64); transition: color .16s var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-note { padding: 18px 0 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.foot-note p { max-width: 46em; font-size: var(--fs-xs); line-height: 1.95; color: rgba(255, 255, 255, .55); }
.foot-note b { color: rgba(255, 255, 255, .78); font-weight: 700; }
.foot-note .fn-2 { margin-top: 6px; color: rgba(255, 255, 255, .74); }
@media (min-width: 768px) {
  /* 声明左 + 紧急提示右：此前声明 46em 上限让整行右侧空出 ~600px */
  .foot-note { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 56px; align-items: start; }
  .foot-note .fn-2 { margin-top: 0; padding-left: 14px; border-left: 2px solid rgba(255, 255, 255, .22); }
}

/* ============================================================
   列表页
   ============================================================ */
/* 页头色带：内页原本是通篇白底 + 细线，没有任何视觉起点，读起来像后台管理系统。
   用 box-shadow 扩散 + clip-path 裁切做「全宽背景」——不必改 DOM 把 page-head 移出 .wrap。 */
.page-head {
  position: relative; padding: 30px 0 26px;
  /* 色带底边到正文的留白，由页头自己负责。此前是 10 个后继块各写一份
     margin-top（22/24/26/34px 四档），list.html 的 .art-layout 漏写 →
     色带底边与筛选栏只隔 2px，看上去「贴死」。改成单一来源后全站一致。 */
  margin-bottom: 30px;
  background: #E4EDF0;
  box-shadow: 0 0 0 100vmax #E4EDF0;
  clip-path: inset(0 -100vmax);
}
/* 紧随页头的块不再叠一层 margin-top（选择器 0,2,0 压过各自的 0,1,0）。
   q-layout/q-echo 在没有 page-head 的 topic.html 上仍保留原 margin-top。 */
.page-head + .art-layout,
.page-head + .wrap-inner,
.page-head + .q-echo { margin-top: 0; }
/* types.html 的页头后夹了一个 sr-only h2（绝对定位不占位），故用 ~ */
.page-head ~ .type-grid { margin-top: 0; }
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; font-size: var(--fs-xs); color: var(--faint); }
.crumb a { display: inline-flex; align-items: center; min-height: 26px; }
.crumb a:hover { color: var(--red); }
.crumb .sep { color: var(--rule-2); }
.page-head h1 { margin-top: 12px; font-size: clamp(24px, 5.6vw, 34px); font-weight: 800; letter-spacing: -.022em; }
.page-head .desc { margin-top: 10px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.9; max-width: 46em; }
.nums { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.nums > span { font-size: var(--fs-xs); color: var(--faint); }
.nums b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* 轨道必须 minmax(0,1fr)：隐式 auto 轨道等于 min-content 宽，
   一旦正文里有 pre/mermaid 这类宽内容，grid 项就拒绝收缩、把页面撑爆 */
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 48px; }
/* 原 padding-top:0 让上方靠 page-head 的 26px 撑，与下方 18px 不对称；
   统一为「上 2px margin + 下 20px」，上下视觉间距接近 */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.filter button, .filter a {
  min-height: 34px; padding: 0 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--mid);
  border: 1px solid var(--rule); background: var(--paper); border-radius: 2px; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
/* 模板里筛选走真链接（可点、可收藏、可被爬），补回 a 的盒模型 */
.filter a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.filter button:hover, .filter a:hover { color: var(--ink); border-color: var(--rule-2); }
.filter button.is-on, .filter a.is-on { background: var(--ink-bg); border-color: var(--ink-bg); color: var(--on-ink); font-weight: 700; }

.list-lead { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.list-lead .deep-fig { margin-bottom: 18px; }
.list-lead h2 { font-size: clamp(18px, 4.4vw, 24px); font-weight: 700; line-height: 1.5; letter-spacing: -.015em; }
.list-lead h2 a { transition: color .16s var(--ease); padding: 3px 0; }
.list-lead h2 a:hover { color: var(--red); }
.list-lead p { margin-top: 11px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.9; }
.list-lead .meta { margin-top: 14px; }

.entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.entry-t { font-size: var(--fs-lg); font-weight: 600; line-height: 1.6; letter-spacing: -.008em; }
.entry-t a { transition: color .16s var(--ease); padding: 3px 0; }
.entry-t a:hover { color: var(--red); }
.entry-d { margin-top: 7px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.85; }
.entry .meta { margin-top: 9px; }
.entry-fig { order: -1; }
/* 无配图条目：撤掉 ≥640px 预留的 168px 图区列，避免右侧空白带 */
.entry.no-fig { grid-template-columns: minmax(0, 1fr); }
/* 列表末项不画底线：否则与紧随其后的分隔线/容器边框叠成冗余双线 */
.entry:last-child { border-bottom: 0; }
.entry-fig img { width: 100%; height: 100%; min-height: 150px; max-height: 200px; object-fit: cover; object-position: center 16%; background: var(--paper-3); }
/* 搜索结果列表容器（设计稿 .entry-list） */
.entry-list { display: flex; flex-direction: column; }

.pagelist { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 26px 0 6px; font-size: var(--fs-sm); }
.pagelist a, .pagelist .this {
  min-width: 38px; height: 38px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: var(--paper); color: var(--mid); border-radius: 2px;
  font-variant-numeric: tabular-nums; font-weight: 500;
}
.pagelist a:hover { border-color: var(--ink); color: var(--ink); }
.pagelist .this { background: var(--ink-bg); border-color: var(--ink-bg); color: var(--on-ink); font-weight: 700; }
.pagelist .gap { border: 0; background: none; color: var(--faint); }
.pagelist .prev, .pagelist .next { padding: 0 14px; font-weight: 600; }

/* 空态：栏目无稿 / 风险标筛选无结果（复用 query 页的 empty-ic / empty-p） */
.empty { padding: 36px 0 44px; }
.empty h3 { margin-top: 2px; font-size: var(--fs-lg); font-weight: 700; }
.empty .btn { margin-top: 18px; }

/* ============================================================
   文章页
   ============================================================ */
.wrap.art-wrap { padding-top: 26px; }
.art-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 14px; font-size: var(--fs-xs); font-weight: 700; color: var(--teal-link); }
.art-kicker > span:not(.st) { color: var(--rule-2); font-weight: 400; }
.art-title { margin-top: 12px; font-size: clamp(21px, 5.2vw, 34px); font-weight: 700; line-height: 1.38; letter-spacing: -.02em; }
.art-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); font-size: var(--fs-xs); color: var(--faint); }
.art-meta .au { color: var(--ink); font-weight: 700; }
.art-meta .num { font-variant-numeric: tabular-nums; }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 20px; background: var(--rule); border: 1px solid var(--rule); }
.facts > div { background: var(--paper); padding: 12px 14px; }
.facts .k { font-size: var(--fs-xs); color: var(--faint); }
.facts .v { margin-top: 3px; font-size: var(--fs-md); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.facts .v.is-crit { color: var(--red); }

.art { min-width: 0; }
.art-content { margin-top: 24px; font-size: var(--fs-base); line-height: 1.95; }
.art-content p, .art-content ul, .art-content blockquote, .art-content .art-lead { max-width: 44em; }
.art-content p { margin-top: 17px; }
.art-content .art-lead {
  margin-top: 0; padding-left: 15px; border-left: 3px solid var(--red);
  font-size: var(--fs-md); line-height: 1.9; color: var(--ink); font-weight: 500;
}
.art-content h2 { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -.01em; }
.art-content h3 { margin-top: 24px; font-size: var(--fs-md); font-weight: 700; }
.art-content ul { margin-top: 14px; }
.art-content ul li { position: relative; padding-left: 17px; margin-top: 8px; }
.art-content ul li::before { content: ''; position: absolute; left: 2px; top: .78em; width: 5px; height: 5px; background: var(--teal-link); }
.art-content strong { color: var(--ink); font-weight: 700; }
.art-content figure { margin: 26px 0 0; }
/* 正文配图三件事必须同时满足，缺一个就出问题：
   1) height:auto —— 否则高度被 HTML 的 height 属性钉死，图被拉变形
   2) max-height —— 兜住 1080x1862 这类竖屏证据截图，不让它按自然比例涨到 1400px
   3) object-fit:contain + 白底无框 —— 竖图在列内居中，横图照常铺满；
      不加灰底和细边，否则竖图两侧会出现两条死气沉沉的图框边 */
.art-content figure img { display: block; width: 100%; height: auto; background: var(--paper); }
/* 构建期已按真实宽高比打标：竖屏截图 300px、方图 440px、横图铺满。
   统一 100% 会让竖图两侧留 280px 空白、方图发虚。 */
/* width 必须回 auto：只写 max-width 时 width 仍是 100%，max-height 一夹高度就变形。
   max-width 用 min(N, 100%)：光写 N 会在 375/320 窄列被图片内在宽度撑爆页面 */
.art-content img.fig-tall { width: auto; max-width: min(300px, 100%); max-height: 480px; margin-inline: auto; }
.art-content img.fig-square { width: auto; max-width: min(440px, 100%); max-height: 480px; margin-inline: auto; }
.art-content img.fig-wide { max-width: 100%; }
.art-content figcaption { margin-top: 9px; font-size: var(--fs-xs); color: var(--faint); text-align: center; }
.art-content blockquote { margin: 22px 0 0; padding: 15px 18px; background: var(--paper-2); border-left: 3px solid var(--teal-link); font-size: var(--fs-sm); color: var(--mid); line-height: 1.9; }
.notice { margin-top: 28px; padding: 16px 18px; background: var(--red-wash); border-left: 3px solid var(--red); }
.notice h3 { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 700; color: var(--red); }
.notice p { margin-top: 7px; font-size: var(--fs-sm); color: #7A1226; line-height: 1.85; }
[data-theme="dark"] .notice p { color: #F2A9B6; }

.art-foot { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.kb-tag {
  display: inline-flex; min-height: 30px; align-items: center; padding: 0 12px; margin: 0 7px 7px 0;
  border: 1px solid var(--rule); border-radius: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--mid);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.kb-tag:hover { border-color: var(--ink); color: var(--ink); }
.art-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 14px; padding: 16px 18px; background: var(--paper-2);
  border-left: 3px solid var(--ink); font-size: var(--fs-sm); color: var(--mid);
}
.art-share .btn { flex: none; }
.art-share .tel-num { display: inline-block; min-height: 24px; padding: 3px 0; line-height: 1.6; font-size: var(--fs-md); font-weight: 800; color: var(--red); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.art-share .tel-num:hover { text-decoration: underline; }

.side-box { border: 1px solid var(--rule); background: var(--paper); }
.side-box h3 { padding: 8px 16px; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); font-weight: 700; }
.rel, .toc { padding: 2px 0; }
/* 相关曝光：原来和「本文目录」都是 padding 10/16 的纯文字列表，两个板块视觉雷同，
   标题还因为不限行数而长短不一。改为编号列表：序号做纵向节律、标题两行截断、meta 独立成行。
   序号用 CSS counter 生成，不必在 HTML 里硬写。 */
.rel { counter-reset: rel; }
.rel li { counter-increment: rel; }
.rel li + li { border-top: 1px solid var(--rule); }
.rel a {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px;
  padding: 10px 16px; transition: background .14s var(--ease);
}
.rel a::before {
  content: counter(rel, decimal-leading-zero);
  grid-row: 1 / span 2; font-size: 12px; font-weight: 800;
  color: var(--rule-2); font-variant-numeric: tabular-nums; line-height: 1.72;
  transition: color .16s var(--ease);
}
.rel a:hover { background: var(--paper-2); }
.rel a:hover::before { color: var(--red); }
.rel .rt {
  font-size: var(--fs-sm); line-height: 1.6; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .14s var(--ease);
}
.rel a:hover .rt { color: var(--ink); }
.rel .rm { margin-top: 3px; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
/* 「查看全部」出口：明确告诉读者这里只是节选，而不是数据缺失 */
/* 相关曝光「展开全部」：按钮挂在标题行右侧，不额外占高度（侧栏一屏只有 816px） */
.side-box h3 { display: flex; align-items: center; gap: 8px; }
.rel-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  min-height: 24px; padding: 0 2px; font-size: var(--fs-xs); font-weight: 600;
  color: var(--teal-link); background: none; border: 0; cursor: pointer;
  transition: color .16s var(--ease);
}
.rel-toggle:hover { color: var(--red); }
.rel-toggle .ar { transition: transform .2s var(--ease); }
.side-stack.is-expanded .rel-toggle .ar { transform: rotate(180deg); }
/* 相关曝光「展开全部」按钮文字 */
.rt-lbl { font-size: var(--fs-xs); color: var(--mid); }

/* 收起态只显示前 3 条（正好一屏，不出现滚动条） */
.rel li:nth-child(n+4) { display: none; }
.side-stack.is-expanded .rel li:nth-child(n+4) { display: block; }

/* ⚠️ 这里原来是 .is-expanded { position: static } —— 严重 Bug 的来源。
   页面滚到中间时 sticky 元素被钉在视口顶部，它的「布局位置」却还在文章开头；
   一改 static 就瞬间跳回布局位置 = 跳到页面最顶部（实测 scrollY=2600 时位移 2504px，
   元素 top 变成 -2420，直接滚出视口「消失」）。
   现在展开态保持 sticky 不动，吸顶位置由 initRelDock() 动态算（见 app.js）。 */
/* 高度变化时把吸顶位置的调整做成过渡，避免「啪」地上跳一截 */
.art-side.side-dock .side-stack.is-sliding { transition: top .22s var(--ease); }

.toc li a { display: block; padding: 8px 16px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.6; border-left: 2px solid transparent;
  transition: color .14s var(--ease), background-color .14s var(--ease), border-left-color .14s var(--ease); }
.toc li a:hover { color: var(--ink); background: var(--paper-2); }
.toc li a.is-on { color: var(--red); border-left-color: var(--red); background: var(--red-wash); font-weight: 700; }

/* ---------- 正文代码块 / mermaid 图 ---------- */
.art-content pre {
  margin: 22px 0 0; padding: 14px 16px; background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 2px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px; line-height: 1.75; color: var(--body);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.art-content pre code { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; }
.art-content :not(pre) > code {
  padding: 2px 6px; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 2px; font-size: .9em; color: var(--red-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.art-content .mermaid {
  margin: 24px 0 0; padding: 18px 12px; text-align: center;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.art-content .mermaid svg { max-width: 100%; height: auto; }
.art-content .mermaid.is-error { text-align: left; color: var(--mid); font-size: var(--fs-sm); white-space: pre-wrap; }

/* ---------- 阅读进度（文章页） ---------- */
.readbar { position: fixed; top: 0; left: 0; z-index: 80; height: 2px; width: 0; background: var(--red); }

/* ============================================================
   回到顶部 + 弹层
   ============================================================ */
.totop {
  position: fixed; right: 16px; bottom: 18px; z-index: 70;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
  color: var(--mid); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .22s var(--ease), visibility .22s var(--ease), transform .22s var(--ease);
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { color: var(--on-ink); background: var(--ink-bg); border-color: var(--ink-bg); }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(10, 14, 21, .62); }
.modal-box { position: relative; width: 100%; max-width: 480px; background: var(--paper); border-radius: 2px; padding: 22px 24px 24px; }
.modal-head { display: flex; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.modal-head h3 { font-size: var(--fs-md); font-weight: 700; }
.modal-head button { margin-left: auto; color: var(--faint); cursor: pointer; padding: 6px; }
.modal-head button:hover { color: var(--ink); }
.modal-box form { margin-top: 16px; }
.modal-box label { display: block; margin-top: 13px; font-size: var(--fs-xs); font-weight: 600; color: var(--mid); }
.modal-box input, .modal-box textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: var(--fs-sm);
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule-2); border-radius: 2px;
}
.modal-box input:focus, .modal-box textarea:focus { outline: 0; border-color: var(--ink); }
.modal-box .btn { width: 100%; margin-top: 18px; }
.modal-box .tip { margin-top: 9px; font-size: var(--fs-xs); color: var(--red); min-height: 1.2em; }

/* ============================================================
   响应式（mobile-first：min-width 递增）
   ============================================================ */
/* 搜索行 480 起即可横排：<640 竖排会让「重新查询」变成整宽红块，
   视觉过重且白白多占 66px 高度（480 宽下输入框仍有 340px，够用）。 */
@media (min-width: 480px) {
  .hero-row { flex-direction: row; gap: 10px; }
  .hero-box { flex: 1; min-width: 0; }
  .hero-btn { flex: none; }
}

@media (min-width: 640px) {
  .hero-stats { grid-template-columns: repeat(4, 1fr); }
  .hero-stats > div { border-top: 0; padding: 18px 20px 20px; border-left: 1px solid rgba(255, 255, 255, .12); }
  .hero-stats > div:first-child { border-left: 0; padding-left: 0; }
  .type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .type-item:nth-child(odd) { border-right: 1px solid var(--rule); }
  .facts { grid-template-columns: repeat(4, 1fr); }
  .entry { grid-template-columns: minmax(0, 1fr) 168px; align-items: start; }
  .entry-fig { order: 0; }
  .entry-fig img { min-height: 0; height: 118px; max-height: none; }
  .guide-cta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .guide-cta .btn { width: auto; }
  .guide-tel { margin-left: auto; }
}

/* 小屏预警条：标签缩成红点、关闭钮绝对定位、文本独占宽度且高度自适应。
   原方案在 320 下标签+关闭钮+「查看详情」吃掉一半宽度，文本只剩 141px，
   两行截断后只剩 12 个字，等于把最高优先级的信息藏起来了。 */
/* 上移到 767：基础布局 .alert-view 定高 40px 只装 2 行，
   而 481-767 区间最长那条预警要 3 行（实测 540 档 sh=57 / ch=38 被裁）。
   768 起文本宽 >=505px，2 行足够，才用定高 + 轮播。 */
@media (max-width: 767px) {
  .alert-in { position: relative; gap: 10px; padding: 9px 34px 9px 14px; min-height: 0; }
  .alert-tag { font-size: 0; gap: 0; padding: 0; }
  .alert-tag::before { width: 8px; height: 8px; border-radius: 50%; }
  .alert-view { flex-basis: auto; height: auto; }
  /* 原先用 display:block，但 span 是 -webkit-box（块级容器），
     「查看详情」无处可跟只能另起一行，条高被撑到 4~5 行。
     改为 flex 横排：文字 3 行截断、链接靠右下角与末行基线对齐。 */
  .alert-item { position: static; display: flex; align-items: flex-end; gap: 10px; }
  .alert-item:not(.is-on) { display: none; }
  .alert-item span { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .alert-item a { flex: none; }
  .alert-close { position: absolute; top: 5px; right: 5px; padding: 6px; }
}
/* ≤360 极窄屏：横排会让文字只剩 ~164px（链接吃掉 58px），3 行装不下标题，
   信息损失过半。此处恢复整宽文字，链接换行后靠右对齐，而非左对齐孤零零一行。 */
@media (max-width: 360px) {
  .alert-item { display: block; }
  .alert-item a { display: block; margin-top: 2px; text-align: right; }
}

@media (min-width: 640px) {
  .tb-hide-sm { display: inline-flex; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 32px; }
  .foot-brand { grid-column: 1 / -1; }
  .tb-right.tb-hide-sm { display: block; }
}

@media (min-width: 768px) {
  .wrap { padding: 0 28px; }
  .chans { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tb-hide { display: inline-flex; }
  .tb-sep.tb-hide { display: inline-block; }
  .hero { padding: 52px 0 0; }
  .hero-row { flex-direction: row; }
  .hero-btn { flex: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .check { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
  .ck:nth-last-child(-n+2) { border-bottom: 0; }
  .step:nth-child(-n+2) { border-top: 0; }
  .side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chan { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .deep { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .feed { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 40px; }
  .band { padding: 60px 0 64px; }
  /* 风险榜：5 列（首次曝光并入类型行） */
  .bd-head {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 68px 104px 88px;
    gap: 12px; align-items: center; padding: 10px 16px; background: var(--paper-3);
    border-bottom: 1px solid var(--rule); font-size: var(--fs-xs); font-weight: 600;
    color: var(--mid); letter-spacing: .04em;
  }
  .bd-head > :nth-child(4), .bd-head > :nth-child(5) { text-align: right; }
  .bd-item {
    grid-template-columns: 34px minmax(0, 1fr) 68px 104px 88px;
    grid-template-areas: "n main st risk amt"; column-gap: 12px; padding: 13px 16px;
  }
  .bd-n { align-self: center; padding-top: 0; }
  .bd-st { grid-area: st; justify-self: start; align-self: center; }
  .bd-amt { align-self: center; font-size: var(--fs-md); }
  .bd-risk { grid-area: risk; justify-self: end; display: inline-flex; align-items: center; gap: 7px; }
  .foot-grid { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 36px; }
  .foot-brand { grid-column: auto; }
}

@media (min-width: 1024px) {
  :root { --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 27px; --fs-3xl: 34px; }
  .nav { display: flex; align-items: stretch; height: 100%; }
  .nav-toggle { display: none; }
  .hero { padding: 64px 0 0; }
  .hero-stats { margin-top: 40px; }
  .split { grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
  .side-stack { grid-template-columns: minmax(0, 1fr); }
  .art-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
  /* 左栏远长于右栏时，让侧栏跟随滚动（仅 guide 显式启用 .side-pin，
     避免影响 article 页依赖 align-self:stretch 的既有布局） */
  .art-side.side-pin { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; display: block; }
  /* 静态页（about/disclaimer）同款：左栏远长于右栏时侧栏吸附 */
  .layout > .sidebar { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; }
  /* 风险榜：6 列全开 */
  .bd-head, .bd-item { grid-template-columns: 40px minmax(0, 1fr) 68px 116px 96px 84px; }
  .bd-item { grid-template-areas: "n main st risk amt date"; }
  .bd-date { display: block; grid-area: date; text-align: right; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
  .bd-head > :nth-child(6) { display: block; text-align: right; }
  .bd-kind s { display: none; }
  .band { padding: 72px 0 76px; }
  .wrap.sect { padding-top: 72px; }
  .deep { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
  .tl-item { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 0 18px; align-items: baseline; }
  .tl-d { grid-column: 1; grid-row: 1; }
  .tl-main { grid-column: 2; grid-row: 1; }
  .tl-item .st { grid-column: 3; grid-row: 1; margin-top: 0; }
  .chan { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
  .chan-item { border-bottom: 0; padding: 20px 20px 22px 20px; }
  .site-head.is-open .nav { position: static; flex-direction: row; box-shadow: none; border: 0; padding: 0; }
  /* 侧栏必须拉伸到与文章等高：sticky 的约束范围是包含块（.side-stack），
     而 align-items:start 让它只有内容高 942px，文章有 2792px →
     目录在 scroll ~1100 就脱绑滚出视野。stretch + align-content:start
     既把约束范围拉到全文，又不把三个盒子撑高。 */
  /* 原方案只让「本文目录」单独 sticky + z-index:5 + 白底，
     滚动时后面的「相关曝光」「正在被骗」会从它底下滚过并被白底盖住 —— 遮挡 Bug。
     改为整列吸附：三个盒子一起固定、相对位置不变，永不互相覆盖；
     内容超过视口时列内自行滚动，避免底部看不到。 */
  /* 必须是 stretch：sticky 的约束范围 = 父容器高度，
     start 会让 .art-side 只高 796px，滚过去就脱绑（试过，top 一路滚到 -2222）。 */
  .art-side.side-dock { align-self: stretch; display: block; }
  /* 不再设 max-height / overflow：上一版按 900 视口精确配平（内容 316 vs 容器 318），
     换到 800/768 视口容器被压到 218/186，立刻出现内部滚动条且只显示 1 条。
     改为保持自然高度（收起 814 / 展开 995）。
     注意：sticky 不会「自动降级」——元素高于视口时，超出的部分会被永远钉在视口外，
     滚到哪都看不见。所以 top 由 initRelDock() 动态给：
       高度装得下 → top = nav+20（正常吸顶）
       高度装不下 → top = 负值，改成「底部对齐」，让末条也能滚出来看。 */
  .art-side.side-dock .side-stack {
    position: sticky; top: calc(var(--nav-h) + 20px);
  }
  .art-side.side-dock .side-box:first-child { position: static; z-index: auto; background: none; }
}

@media (min-width: 1280px) {
  .wrap { padding: 0 32px; }
  .hero { padding: 76px 0 0; }
}

@media (max-width: 400px) {
  .wrap { padding: 0 16px; }
  .head-inner { gap: 12px; }
  .head-tools { gap: 6px; }
  .brand img { height: 26px; }
  .icon-btn { width: 36px; height: 36px; }
  .head-tools .btn-sm { padding: 0 10px; font-size: var(--fs-xs); }
}

[data-theme="dark"] .page-head {
  background: #16232A;
  box-shadow: 0 0 0 100vmax #16232A;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ═══════ 扩展页面组件（query/report/ranking/guide/types/topic/search/tags/static） ═══════ */

/* 内页通用 */
.wrap-inner { margin-top: 34px; }
.q-layout { margin-top: 24px; }
.q-echo { margin-top: 22px; }
/* .hero-box 原本靠深色 hero 背景衬托，白底页上会「消失」，补一层描边 */
.q-echo .hero-box { border: 1px solid var(--rule-2); }
/* 标签胶囊容器（查询页「大家都在查」） */
.kb-tags { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.q-echo .hero-btn { padding: 0 26px; }
.tip-p { font-size: var(--fs-sm); color: var(--mid); line-height: 1.9; max-width: 46em; }
.crumb-rev { color: rgba(255,255,255,.65); }
.crumb-rev a { color: rgba(255,255,255,.85); }
.sec-rev h2 { color: var(--on-ink); }
.sec-rev .en { color: rgba(255,255,255,.5); }

/* 查询结果卡 */
.q-card { border: 2px solid var(--ink); background: var(--paper); padding: 24px 24px 22px; }
.q-card.empty-card { text-align: left; border-style: solid; border-color: var(--rule-2); }
.q-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.q-name { font-size: var(--fs-2xl, 26px); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; overflow-wrap: anywhere; }
.q-alias { margin-top: 6px; font-size: var(--fs-sm); color: var(--faint); overflow-wrap: anywhere; }
.q-alias a { color: var(--teal-link); font-weight: 600; }
.q-risk { margin-left: auto; display: flex; align-items: center; gap: 16px; }
/* 不设固定宽度：5 格自然占 62px（10×5 + 3×4），原来强设 130px 会留 68px 死空白 */
.q-risk .meter { flex: none; }
.q-num { text-align: right; }
.q-num b { display: block; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--red); }
.q-num i { display: block; margin-top: 5px; font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
.q-facts { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 20px; }
.q-facts div { background: var(--paper); padding: 12px 14px; }
.q-facts b { display: block; font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.q-facts i { display: block; margin-top: 3px; font-style: normal; font-size: var(--fs-xs); color: var(--faint); }
.q-status { margin-top: 16px; padding: 12px 14px; background: rgba(200,30,30,.06); font-size: var(--fs-sm); line-height: 1.8; color: var(--body); }
.q-status a { color: var(--teal-link); font-weight: 600; }
.q-sig { list-style: none; margin: 0; padding: 0; }
.q-sig li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); color: var(--body); line-height: 1.8; }
.q-sig li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 8px; height: 8px; background: var(--red); }
.q-sig li:last-child { border-bottom: 0; }
.q-sig.is-script li::before { background: var(--amber, #b8860b); }
.q-sim { list-style: none; margin: 0; padding: 0; }
.q-sim li { border-bottom: 1px solid var(--rule); }
.q-sim li:last-child { border-bottom: 0; }
.q-sim a { display: flex; align-items: center; gap: 14px; padding: 13px 0; }
.q-sim b:first-child { flex: 1; font-size: var(--fs-sm); min-width: 0; overflow-wrap: anywhere; }
.q-sim .st { flex: none; }
.q-sim .meter { flex: none; margin-left: auto; width: 70px; }
.q-sim .num { flex: none; min-width: 34px; font-size: var(--fs-sm); text-align: right; }
.empty-ic { width: 44px; height: 44px; border: 2px solid var(--rule-2); color: var(--faint); display: grid; place-items: center; font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.empty-p { margin-top: 12px; font-size: var(--fs-sm); color: var(--mid); line-height: 2; max-width: 46em; }

/* 四步大块 / 举报表单 / FAQ */
/* 四步处置：步骤本质是时序流程，用纵向编号流表达。
   原先的 2×2 网格有三处硬伤：① Z 字阅读割裂 1→2→3→4 的推进感；
   ② 序号只有 12px 小字，撑不起「步骤」的分量；③ query-miss 只有 3 步时，
   网格第二行会剩半个空格。大序号做视觉锚点，hairline 分隔，标题才是主角。 */
.gd-steps > li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 22px;
  padding: 22px 0; border-top: 1px solid var(--rule); align-items: start;
}
/* 首项不画顶线：.sec-head 已有 2px 底线，再叠一条会在 22px 外形成双线（同色同粗，纯冗余）。
   序号本身足够标记起点，不需要第二条线。 */
.gd-steps > li:first-child { border-top: 0; }
.gd-steps > li:first-child { padding-top: 6px; }
.gd-steps > li:last-child { padding-bottom: 6px; }
.gs-n {
  display: block; font-size: 40px; font-weight: 800; line-height: .88;
  letter-spacing: -.05em; color: var(--rule-2);
  font-variant-numeric: tabular-nums; transition: color .16s var(--ease);
}
/* 第一步最关键：唯一用红色，其余保持浅灰锚点，避免四处红色抢焦点 */
.gd-steps > li:first-child .gs-n { color: var(--red); }
.gd-steps > li:hover .gs-n { color: var(--faint); }
.gs-b h3 { font-size: var(--fs-lg); font-weight: 700; line-height: 1.45; }
.gs-b p { margin-top: 7px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.9; max-width: 42em; }
.gs-b p a { color: var(--teal-link); font-weight: 600; }
.rp-field { border: 0; padding: 0; margin: 26px 0 0; }
.rp-field legend { font-size: var(--fs-md); font-weight: 700; padding: 0 0 4px; }
.rp-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 14px; margin-top: 10px; }
.rp-grid label, .rp-block { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--mid); }
.rp-grid input, .rp-grid select, .rp-block textarea {
  display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--rule-2); background: var(--paper-2); color: var(--body);
  font-size: var(--fs-sm); border-radius: 2px; font-family: inherit;
}
/* select 自绘下拉箭头：原生粗三角与设计语言不符；箭头色跟随主题切换 */
.rp-grid select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C5C64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
[data-theme="dark"] .rp-grid select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239AA3B0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.rp-block { margin-top: 12px; }
.rp-block textarea { min-height: 120px; padding: 12px; line-height: 1.8; resize: vertical; }
.rp-grid input:focus, .rp-grid select:focus, .rp-block textarea:focus { outline: 2px solid var(--teal-link); outline-offset: -1px; }
/* 参与时间段：caption + 原生 month 双选 + 至今。
   ≤639px 纵向堆叠（两列并排时每格仅 ~60px，月份显示不全）；
   ≥640px 才排成「开始 至 结束」一行。 */
.rp-cell { font-size: var(--fs-xs); font-weight: 600; color: var(--mid); }
.rp-cap { display: block; }
.rp-range { display: grid; gap: 6px; margin-top: 6px; }
/* 竖排时「至」单独占一行居中，两个空月份框才不会分不清先后 */
.rp-range-sep { display: block; text-align: center; font-size: 11px; line-height: 1.2; color: var(--faint); font-weight: 400; }
/* 年月双下拉：年列略宽。两个 select 要塞进半个格子，收紧箭头位与内边距，避免文本截断 */
.rp-dt { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }
.rp-cell .rp-dt select { width: 100%; margin-top: 0; padding: 0 20px 0 10px; background-position: right 7px center; }
/* 涉及金额：输入框 + 单位（元 / U）。单位列自适应，输入框吃掉剩余宽度 */
.rp-amt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 6px; }
.rp-cell .rp-amt input { width: 100%; margin-top: 0; }
.rp-cell .rp-amt select { width: auto; min-width: 74px; margin-top: 0; }
/* .rp-grid label 会把 label 设成 display:block，这里必须用 .rp-cell 提高优先级压回来 */
.rp-cell .rp-now { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-xs); font-weight: 400; color: var(--mid); cursor: pointer; }
.rp-cell .rp-now input { display: inline-block; width: auto; min-height: 0; margin: 0; accent-color: var(--red); }
@media (min-width: 640px) {
  .rp-range { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
}
.rp-form .cm-form-row { margin-top: 26px; }
/* 曝光页顶部：会员投稿 / 审核进度入口（未登录也可匿名提交，这行只是补充说明） */
.rp-note { margin: 0 0 14px; padding: 10px 14px; background: var(--paper-2); border-left: 3px solid var(--teal-link); font-size: var(--fs-xs); color: var(--mid); line-height: 1.8; }
.rp-note a { color: var(--teal-link); font-weight: 600; }
.rp-note a:hover { color: var(--red); }
.faq { border-bottom: 1px solid var(--rule); }
.faq:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 14px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); list-style: none; display: flex; align-items: center; }
.faq summary::after { content: '+'; margin-left: auto; font-size: 18px; color: var(--faint); font-weight: 400; }
.faq[open] summary::after { content: '−'; }
.faq summary::-webkit-details-marker { display: none; }
.faq p { padding: 0 0 16px; font-size: var(--fs-sm); color: var(--mid); line-height: 2; max-width: 46em; }

/* 骗局类型卡片 */
.type-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px 30px; margin-top: 26px; padding-bottom: 60px; }
.type-card { border: 1px solid var(--rule); background: var(--paper); padding: 20px 20px 18px; display: flex; flex-direction: column; transition: border-color .16s var(--ease); }
.type-card:hover { border-color: var(--ink); }
.tc-head { display: flex; align-items: baseline; gap: 10px; }
.tc-head h3 { font-size: var(--fs-lg); font-weight: 700; }
.tc-en { font-size: var(--fs-xs); color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }
.tc-p { margin-top: 9px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.85; flex: 1; }
.tc-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--faint); }
.tc-foot .num { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.tc-foot .meter { margin-left: auto; width: 70px; }

/* 标签云 */
/* 标签云：/tags 会输出 240+ 个真实标签。
   1) 用 margin 代替 flex gap —— Safari ≤14 / 旧内核不支持 gap，会挤成一团；
   2) 芯片内边距压到 5px 10px，字号档位收窄（13–16px），
      否则手机端单个芯片 ~52px 高，整页标签墙超过 5000px。 */
.tagcloud { display: flex; flex-wrap: wrap; margin: 10px -5px 0; }
.tagcloud .tag { margin: 0 5px 10px; padding: 5px 10px; line-height: 1.35; }
.tagcloud .tag i { font-size: 11px; }
.tag { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--rule); background: var(--paper); font-weight: 600; color: var(--ink); border-radius: 2px; transition: border-color .16s var(--ease); }
.tag:hover { border-color: var(--ink); }
.tag i { font-style: normal; font-size: var(--fs-xs); color: var(--faint); font-variant-numeric: tabular-nums; }
.tag.t-crit { font-size: 19px; }
.tag.t-warn { font-size: 16px; }
.tag.t-case { font-size: 15px; }
.tag.t-ok, .tag.t-run { font-size: 14px; color: var(--mid); }

/* 专题页头 */
.topic-hero { background: var(--ink-bg); color: var(--on-ink); padding: 44px 0 38px; }
.topic-hero h1 { font-size: clamp(24px, 4vw, 34px); font-weight: 700; letter-spacing: -.015em; color: var(--on-ink); }
.topic-sub { margin-top: 10px; font-size: var(--fs-sm); color: rgba(255,255,255,.72); line-height: 1.9; max-width: 46em; }
.topic-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; margin-top: 24px; }
.topic-stats div { border-left: 2px solid var(--red); padding-left: 12px; }
.topic-stats b { font-size: 26px; font-weight: 700; }
.topic-stats i { display: block; margin-top: 4px; font-style: normal; font-size: var(--fs-xs); color: rgba(255,255,255,.6); }

/* 静态文档版式 */
.layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; align-items: start; padding: 30px 0 60px; }
.static-doc { max-width: 780px; }
.static-doc h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.015em; margin-top: 10px; }
.doc-meta { margin-top: 10px; font-size: var(--fs-xs); color: var(--faint); padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.static-doc h2 { margin-top: 30px; font-size: var(--fs-lg); font-weight: 700; }
.static-doc h2:first-of-type { margin-top: 22px; }
.static-doc p { margin-top: 12px; font-size: var(--fs-sm); color: var(--body); line-height: 2.1; max-width: 44em; }

/* —— 静态页结构化区块 ——
   原来 about/disclaimer 是「h2 + 段落」平铺，通篇纯文字像法务文书、没有任何视觉落点。
   加四种区块：数据条建立可信度、做/不做对比、核验流程、强调块。 */
.sd-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 24px 0 6px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
}
/* 紧接 doc-meta 时不再画顶线：doc-meta 已有 2px 底线，两者相隔 24px 会成双线 */
.doc-meta + .sd-stats { border-top: 0; }
.sd-stats > div { padding: 15px 0 17px; }
.sd-stats > div + div { border-left: 1px solid var(--rule); padding-left: 18px; }
.sd-stats dt { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); font-variant-numeric: tabular-nums; }
.sd-stats dd { margin: 3px 0 0; font-size: var(--fs-xs); color: var(--faint); }

/* 做 / 不做：1px hairline 分隔的双栏，用色区分正负 */
.sd-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 20px 0 4px; }
.sd-col { background: var(--paper); padding: 18px 20px 20px; }
.sd-col h3 { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: 700; }
.sd-col h3::before { content: ''; width: 8px; height: 8px; flex: none; background: currentColor; }
.sd-col.is-yes h3 { color: var(--green); }
.sd-col.is-no h3 { color: var(--red); }
.sd-col ul { margin-top: 11px; }
.sd-col li { position: relative; padding-left: 15px; font-size: var(--fs-sm); color: var(--mid); line-height: 1.85; }
.sd-col li + li { margin-top: 7px; }
/* 用圆点而非短横：短横在「我们做什么」里会被读成减号（否定语义） */
.sd-col li::before { content: ''; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--rule-2); }

/* 强调块：一句话结论，用红条标记而不是整块红底 */
.sd-note { margin: 22px 0 6px; padding: 14px 18px; background: var(--red-wash); border-left: 3px solid var(--red); font-size: var(--fs-sm); color: var(--body); line-height: 1.9; }
.sd-note b { color: var(--red-deep); font-weight: 700; }

/* 侧栏「相关页面」 */
.sd-links li + li { border-top: 1px solid var(--rule); }
.sd-links a { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; font-size: var(--fs-sm); color: var(--ink-2); transition: color .16s var(--ease); }
.sd-links a:hover { color: var(--red); }
.sd-links a::after { content: '\2192'; color: var(--faint); font-size: var(--fs-xs); }

/* 静态页里的步骤区与正文留白协调 */
.static-doc .gd-steps { margin: 18px 0 4px; }
.static-doc .gd-steps > li { padding: 16px 0; }

@media (min-width: 1024px) {
  .q-facts { grid-template-columns: repeat(6, minmax(0,1fr)); }
}
/* q-facts 单独用 1023 断点：原先 901–1023 没有覆盖，
   会从 900 的 3 列「跳回」基础 6 列（每列仅 163px），宽度变大反而更挤。 */
@media (max-width: 1023px) {
  .q-facts { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .gd-steps > li { grid-template-columns: 52px minmax(0, 1fr); gap: 2px 16px; }
  .gs-n { font-size: 32px; }
  .type-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sd-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* 2 列布局时，每行第 1 格既要去掉左边线，也要去掉 18px 左内边距；
     否则第二行第 1 格（累计阅读）比第一行（4,468）右缩 18px，两行左缘不齐。 */
  .sd-stats > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .sd-stats > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 640px) {
  .sd-2col { grid-template-columns: minmax(0, 1fr); }
  /* 4 项统计在窄屏改成 2×2：原来的 flex 换行会排成 3+1，末项孤零零一行 */
  .nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
}
@media (max-width: 767px) {
  .art-layout.q-layout { grid-template-columns: minmax(0,1fr); }
  .layout { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .static-doc { max-width: none; }
  .rp-grid { grid-template-columns: minmax(0,1fr); }
  .q-facts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .q-risk { margin-left: 0; width: 100%; justify-content: flex-end; gap: 12px; }
  .topic-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .type-grid { grid-template-columns: minmax(0,1fr); }
  /* 评级口径图例：两列在窄屏会把说明挤成三行，改单列 */
  .nv-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}

/* ═══════ 表单状态：出错字段 / 提示条 ═══════
   此前校验提示只是往 .tip 里塞纯文本，字段本身没有任何视觉反馈，
   用户不知道错在哪一格；且提示条没有 aria-live，读屏完全读不到。 */

/* 预警条收起：先淡出再置 hidden，避免高度瞬间塌陷把下方内容顶上来 */
.alert { transition: opacity .16s var(--ease); }
.alert.is-off { opacity: 0; }
.alert[hidden] { display: none; }

/* 出错字段：统一红框 + 红字（只用品牌红的高亮态，不新增色相） */
.is-invalid,
.hero-box input.is-invalid,
.cm-form textarea.is-invalid,
.cm-form-row input.is-invalid,
.rp-grid input.is-invalid,
.rp-grid select.is-invalid,
.rp-block textarea.is-invalid,
.modal-box input.is-invalid,
.modal-box textarea.is-invalid {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 1px var(--red) inset;
}
/* hero 框的输入本身无边框，改给外层 .hero-box 上框 */
.hero-box:has(input.is-invalid) { box-shadow: 0 0 0 2px var(--red) inset; }
.foot-sub input.is-invalid { border-color: #FF8A8A !important; background: rgba(200, 16, 46, .16); }

/* 提示条：成功 / 失败（默认色各自继承，这里只覆盖状态色） */
.tip.is-err, .cm-tip.is-err, .ck-bar.is-err { color: var(--red); }
.tip.is-ok, .cm-tip.is-ok, .ck-bar.is-ok { color: var(--teal-link); }
/* 页脚是深底，品牌红在深底上对比度不够，换成提亮红 / 提亮绿 */
.foot-sub .tip.is-err { color: #FF9A9A; }
.foot-sub .tip.is-ok { color: #7BD3A0; }
/* 隐藏态：hidden 属性必须压过 display，否则 .tip 有默认 display 就藏不住 */
.tip[hidden], .cm-tip[hidden], .hero-tip[hidden] { display: none; }

/* 搜索框提示（JS 动态插入，排在按钮下方） */
.hero-tip { margin-top: 10px; font-size: var(--fs-xs); color: var(--red); }
.hero-tip.is-ok { color: var(--teal-link); }

/* 蜜罐输入框：屏幕外定位，真人不可见也不会触发填写；机器人若自动填充则被后端判为伪造 */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Toast 提示 ----------
   视觉契约取自 assets/air/script/message.min.js（news 主题已先行原生移植）：
   顶部居中、左侧信号色图标、右侧关闭；配色改用本站信号色。 */
.c-message {
  position: fixed;
  top: calc(var(--nav-h) + 14px);
  left: 50%;
  z-index: 9999;
  min-width: 220px;
  max-width: calc(100vw - 32px);
  background: var(--paper);
  border: 1px solid var(--rule-2);
  box-shadow: 0 10px 30px rgba(10, 12, 16, .18), 0 2px 6px rgba(10, 12, 16, .1);
  overflow: hidden;
  opacity: 0;
  transform: translateX(-50%);
}
.c-message.is-in { animation: afMsgIn .22s ease-out forwards; }
.c-message.is-out { animation: afMsgOut .18s ease-in forwards; }
@keyframes afMsgIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes afMsgOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}
.c-message--main { display: flex; align-items: stretch; }
.c-message--icon {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 42px;
  color: #fff;
}
.c-message--success .c-message--icon { background: var(--green); }
.c-message--error   .c-message--icon { background: var(--red); }
.c-message--warning .c-message--icon { background: var(--amber); }
.c-message--info    .c-message--icon { background: var(--teal-link); }
.c-message--tip {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  font-size: var(--fs-sm);
  line-height: 1.7;
  word-break: break-word;
  color: var(--ink);
}
.c-message--close {
  flex: none;
  width: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  background: none;
  color: var(--faint);
  cursor: pointer;
}
.c-message--close:hover { color: var(--ink); }
@media (max-width: 640px) {
  .c-message { top: calc(var(--nav-h) + 8px); min-width: 0; width: calc(100vw - 32px); }
}
