/* ============================================================
   划算人生 · 站点样式
   设计语言：「橘signal × 靛蓝」—— 纯白底 + 高饱和橘红 + 靛蓝点缀

   本版重点解决的是**布局节奏**，不是配色。
   上一版量化诊断出来的问题：
     · 5 个区块的 h2 全是 27px      → 完全没有层级
     · 区块间距全是 64px           → 疏密无对比，节奏单调
     · 880px 容器塞 5 个 panel     → 每张仅 170px，文字全变省略号
     · 6 个区块全是「标题+同款白卡墙」→ 两个巨型同质卡片墙（18 张 + 34 张）
   专业感来自节奏对比。所以这一版：
     · 容器 880 → 1120px，卡片终于放得下完整文字
     · 区块间距按内容重量分三档：56 / 88 / 120px
     · 区块底色交替（白 / 浅灰），整页形成「白—灰—白」的呼吸
     · 标题层级拉开：区块主标 30px + 分区小标 13px（大写字距）
     · 巨型卡片墙改成「分组小节 + 紧凑行」，不再一次铺 34 张
   ============================================================ */

:root{
  /* 底与面 */
  --bg:#FFFFFF;
  --bg-2:#F7F7F8;
  --bg-3:#FAFAFB;
  --surface:#FFFFFF;
  --line:#EBEBED;
  --line-2:#DCDEE2;

  /* 文字 */
  --ink:#141414;
  --ink-2:#5C5C63;
  --ink-3:#8E8E96;

  /* 主色：brand 只做填充，brand-d 做文字（对比度原因见 brand.mjs 注释） */
  --brand:#FF3D1F;
  --brand-d:#E02E12;
  --brand-soft:#FFF0EB;
  --brand-line:#FFC9B8;

  /* 第二强调 */
  --indigo:#1D4ED8;
  --indigo-soft:#EEF3FF;

  /* 功能色 */
  --lime:#7BAE7F; --lime-d:#4E7A52; --lime-soft:#E9F2E8;
  --amber:#F5A524; --amber-d:#B87500; --amber-soft:#FFF4E0;

  --shadow-1:0 1px 2px rgba(20,20,20,.04), 0 4px 16px -8px rgba(20,20,20,.10);
  --shadow-2:0 2px 4px rgba(20,20,20,.05), 0 12px 32px -12px rgba(20,20,20,.16);
  --shadow-pop:0 4px 10px -3px rgba(255,61,31,.28), 0 16px 36px -16px rgba(255,61,31,.36);

  /* 毛玻璃。只给站头和搜索浮层 —— 背景一复杂就影响可读性。 */
  --glass-bg:rgba(255,255,255,.78);
  --glass-blur:blur(20px) saturate(1.7);

  --r:18px;
  --r-s:11px;
  --r-xs:7px;

  --w:min(1120px, 100% - 56px);
  --w-narrow:min(880px, 100% - 56px);
  --w-wide:min(1280px, 100% - 56px);

  /* 区块间距三档。这是「节奏」的核心变量。
     轻区块用 56，内容少的用 88，重的用 120。 */
  --sp-s:56px;
  --sp-m:88px;
  --sp-l:120px;

  --f:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f); font-size:16.5px; line-height:1.72;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* 年轻感不靠装饰，靠一点点极淡的色温偏移 —— 大面积会脏，所以只在角落 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(760px 420px at 4% -8%, rgba(255,61,31,.055), transparent 60%),
    radial-gradient(660px 380px at 98% 2%, rgba(29,78,216,.045), transparent 60%);
}
a{color:var(--brand-d); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.26}
p{margin:0}
code{
  font-family:var(--mono); font-size:.88em; background:var(--bg-2);
  padding:2px 7px; border-radius:6px; color:var(--brand-d); font-weight:600;
}
img{max-width:100%}
::selection{background:var(--brand-soft); color:var(--brand-d)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:10px;font-weight:600}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto}
}

/* ============================================================
   站头 —— 毛玻璃第一处
   ============================================================ */
.site-hd{
  position:sticky; top:0; z-index:30;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--line);
}
.hd-in{
  width:var(--w); margin:0 auto; height:62px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-width:0;
}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); white-space:nowrap}
.brand:hover{text-decoration:none}
/* logo 换成指南针之后，图形是外环 r=25 的紧凑图形（占视区约 78%），
   视觉重量比细线条大、比实心太阳略轻 —— 31px 与站名字号（16.5px）配重平衡。 */
.brand img{height:31px; width:auto; display:block}
.brand-tx{font-size:16.5px; font-weight:750; letter-spacing:-.01em}
.brand-tag{
  font-size:12px; color:var(--ink-3); font-weight:500; letter-spacing:.02em;
  padding-left:10px; border-left:1px solid var(--line-2);
}
/* min-width:0 让导航在挤压时收缩而不是把整页撑出横向滚动条。
   站头是 flex 容器，默认 flex 子项不会缩到内容宽度以下。 */
.nav{display:flex; gap:2px; align-items:center; min-width:0}
.nav .nv-s{display:none}
.nav a{
  font-size:13.5px; color:var(--ink-2); padding:7px 12px; border-radius:99px;
  transition:background .16s,color .16s; font-weight:500; white-space:nowrap;
}
.nav a:hover{background:var(--bg-2); color:var(--ink); text-decoration:none}
.nav a.on{color:#fff; background:var(--ink); font-weight:650}
.nav-search{
  display:flex; align-items:center; gap:6px; font-family:inherit; font-size:13px;
  color:var(--ink-3); background:var(--bg-2); border:1px solid transparent;
  padding:6px 11px; border-radius:99px; cursor:pointer;
  transition:border-color .16s,color .16s,background .16s; white-space:nowrap;
}
.nav-search:hover{border-color:var(--line-2); color:var(--ink); background:#fff}
.nav-search svg{width:14px; height:14px; flex:0 0 auto}
.nav-search kbd{
  font-family:var(--mono); font-size:10px; color:var(--ink-3);
  background:#fff; padding:2px 5px; border-radius:4px; line-height:1.4;
  border:1px solid var(--line);
}

/* ============================================================
   页面骨架
   ============================================================ */
.page{width:var(--w-narrow); margin:0 auto; padding:48px 0 96px}
.page-hd{margin-bottom:40px}
/* 内页标题比首页 hero 小，但仍然要有力量 */
.page-hd h1{font-size:clamp(30px,4.2vw,44px); margin-bottom:14px; font-weight:750; letter-spacing:-.035em}
.page-lead{color:var(--ink-2); font-size:17px; max-width:62ch; line-height:1.76}
.kicker{
  display:inline-block; font-size:11.5px; font-weight:750; color:var(--brand-d);
  background:var(--brand-soft); padding:5px 12px; border-radius:99px;
  margin-bottom:16px; letter-spacing:.08em;
}
.crumb{font-size:13.5px; color:var(--ink-3); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap}
.crumb a{color:var(--ink-3); font-weight:500}
.crumb a:hover{color:var(--brand-d)}

/* ============================================================
   按钮
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  font-family:inherit; font-size:14.5px; font-weight:650;
  padding:12px 24px; border-radius:99px; border:1px solid transparent;
  transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none}
.btn-main{background:var(--brand); color:#fff; box-shadow:var(--shadow-pop)}
.btn-main:hover{color:#fff; transform:translateY(-1px); box-shadow:0 6px 14px -4px rgba(255,61,31,.34),0 20px 40px -18px rgba(255,61,31,.46)}
.btn-main:active{transform:translateY(0)}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{color:#fff; transform:translateY(-1px)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3); transform:translateY(-1px)}
.btn-sm{font-size:13px; padding:8px 16px}

/* ============================================================
   首页 hero
   结构：左文案 + 右数据面板。数据面板改成「黑底主卡 + 两张浅灰次卡」
   ——用底色深浅做层级，是这版最重要的一处变化。
   ============================================================ */
/* hero 宽度必须和 .blk 一致（都用 --w）。
   之前写的是 --w-wide(1280px)，而所有区块是 --w(1120px)：
   1440px 视口下 hero 左边缘在 80px、区块左边缘在 160px，
   整页左右错开 80px —— 这就是「首页布局错位」的根因。
   站头同理，三个容器的左边缘必须在同一条竖线上。 */
.hero{width:var(--w); margin:0 auto; padding:0}
/* align-items 用 stretch 而不是 center：
   之前 center 让右侧数据卡（338px）在 494px 的左栏里居中，上下各差 78px，
   截图上就是「数据卡浮在半空、跟文案对不齐」。拉伸后三张卡构成一个
   与左栏等高的矩形，右侧才真正立得住。 */
.hero-in{
  display:grid; grid-template-columns:1.08fr .92fr; gap:56px;
  padding:64px 0 0; align-items:stretch;
}
.hero-copy .kicker{margin-bottom:18px}
/* 字号是这版最狠的一处调整：56 → 68px clamp。
   「年轻」首先是大字，不是颜色。 */
.hero h1{
  font-size:clamp(38px,5.6vw,66px); line-height:1.1; letter-spacing:-.045em;
  margin-bottom:20px; font-weight:800;
}
.hero h1 em{font-style:normal; color:var(--brand-d)}
/* 手写感下划线：微微歪，像人画的。
   bottom 用负值把线压到字脚下方 —— 之前的 .05em 会盖住字的中下段，
   大字号下尤其明显，像划掉了半截字。 */
.hero h1 em::after{
  content:""; position:absolute; left:-3px; right:-3px; bottom:-.04em; height:.10em;
  background:linear-gradient(90deg,rgba(255,61,31,.42),rgba(255,61,31,.12));
  border-radius:99px; transform:rotate(-.7deg);
}
.hero h1 em{position:relative; white-space:nowrap}
.hero-lead{color:var(--ink-2); font-size:17.5px; max-width:50ch; margin-bottom:32px; line-height:1.78}
.hero-lead strong{color:var(--ink); font-weight:700}
.hero-cta{display:flex; gap:11px; flex-wrap:wrap}

.hero-figs{
  display:grid; grid-template-columns:1fr 1fr; gap:11px;
  /* stretch 后要显式分配两行高度，否则三张卡会均分高度、黑底主卡显得不够重。
     1.12 : 0.88 —— 主卡拿大头，但别让次卡被压得太扁。 */
  grid-template-rows:1.12fr .88fr;
}
.hero-figs .fig{
  background:var(--bg-2); border-radius:var(--r); padding:22px 22px 20px;
  display:flex; flex-direction:column; justify-content:center;
  transition:transform .18s,box-shadow .18s;
}
.hero-figs .fig:hover{transform:translateY(-2px); box-shadow:var(--shadow-1)}
/* 主卡：黑底反白，横跨两列。这是整页最强的一块，
   也是「专业感」的主要来源 —— 明确的视觉主角，而不是三个平级数字。 */
.hero-figs .fig:first-child{
  grid-column:1 / -1; background:var(--ink); color:#fff;
  padding:26px 28px 24px;
}
/* 主卡内部改横向两栏：左边大数字，右边四个标签。
   之前是纯竖排，1.18fr 撑出来的 250px 高度里只放了 120px 内容，
   上下各留 65px 纯黑，看着像没排完。横向铺开正好把高度吃掉，
   而且「四样全中」这四个字被拆成四个可读的标签，比一句话说明更有力。 */
.fig-main{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:30px; align-content:center; justify-content:initial;
}
.fig-main-l{grid-row:1 / span 2; display:flex; flex-direction:column; justify-content:center}
.fig-main .quad{
  grid-column:2; grid-row:1;
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;
}
.fig-main .quad li{
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13);
  border-radius:9px; padding:9px 10px 8px;
  font-size:14px; font-weight:700; line-height:1.25; color:#fff;
  letter-spacing:-.01em;
}
.fig-main .quad small{
  display:block; font-size:11.5px; font-weight:500; color:rgba(255,255,255,.6);
  margin-top:3px; letter-spacing:0;
}
.fig-main .fig-note{
  grid-column:2; grid-row:2;
  font-size:13px; color:rgba(255,255,255,.62); margin:11px 0 0; line-height:1.5;
}
.fig b{
  font-size:clamp(40px,4.6vw,58px); font-weight:800; color:var(--brand);
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.055em;
}
.fig:first-child b{color:#fff}
.fig span{font-size:14px; color:var(--ink-2); line-height:1.55; margin-top:9px; font-weight:500}
.fig:first-child span{color:#fff; font-size:15px; font-weight:600}
.fig small{display:block; font-size:12.5px; color:var(--ink-3); margin-top:4px; font-weight:400}

/* ============================================================
   区块节奏 —— 这版的核心
   .blk 本身不带底色，由 .blk-alt 交替上浅灰，形成「白—灰—白」呼吸。
   间距由 --sp-s / --sp-m / --sp-l 三档控制，按内容重量选。
   ============================================================ */
.blk{width:var(--w); margin:0 auto; padding:var(--sp-l) 0 0}
.blk.md{padding-top:var(--sp-m)}
.blk.sm{padding-top:var(--sp-s)}
/* hero 之后的第一个区块降一档间距。
   原来 hero-in 有 padding-bottom:60px，叠加这里 120px = 180px 纯空白，
   截图上就是标题「凭空掉下去一截」。hero 自己已经给了 64px 上内边距，
   这里再给 --sp-m(88px) 就够了。 */
.hero + .blk{padding-top:var(--sp-m)}
/* 浅灰底区块。
   不能用 `margin-left:calc(50% - 50vw)` 那种「负 margin 铺满」的老写法：
   .blk 是 width:var(--w) + margin:0 auto，负 margin 会把 auto 居中一起覆盖掉，
   区块直接退到页面左边缘。而且子元素 width:var(--w) 里的 100% 此时相对
   1120px 的父元素解析、算出 1064px，又内缩 28px —— 这就是「布局错位」的全部来源。
   改用伪元素铺底色：section 自己维持 --w 居中，只有背景越出到视口两边。
   isolation:isolate 建栈，z-index:-1 的伪元素才不会掉到 body 背景后面。 */
.blk-alt{position:relative; isolation:isolate; padding-bottom:var(--sp-l)}
.blk-alt::before{
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:calc(50% - 50vw); right:calc(50% - 50vw);
  background:var(--bg-3);
}

.blk-hd{margin-bottom:30px}
/* 分区小标：给区块内部再分层。这是拉开标题层级的关键一档 */
.blk-hd .eyebrow{
  display:block; font-size:11.5px; font-weight:750; color:var(--ink-3);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px;
}
.blk-hd h2{font-size:clamp(24px,3vw,34px); margin-bottom:10px; font-weight:750; letter-spacing:-.035em}
.blk-sub{color:var(--ink-2); font-size:15.5px; max-width:64ch; line-height:1.72}
.blk-more{margin-top:28px; font-size:14.5px; font-weight:600}
.dim-count{font-size:14px; font-weight:500; color:var(--ink-3); letter-spacing:0}

/* 大引文块：黑底反白，和数据卡同源，形成全页的「黑—白—黑」节奏 */
.pull{
  background:var(--ink); color:#fff;
  border-radius:var(--r); padding:44px 46px;
  position:relative; overflow:hidden;
}
/* 光斑收敛：之前 .22 透明度 + 68% 铺开，在黑底上像右上角糊了一块橘红。
   降到 .14 并让中心更实、边缘更快收掉，只剩一点温度。 */
.pull::after{
  content:""; position:absolute; right:-40px; top:-70px; width:260px; height:260px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,61,31,.15) 0%,rgba(255,61,31,.05) 42%,transparent 62%);
  pointer-events:none;
}
/* 行长约束：1076px 宽的块里 17.5px 字一行能塞 60+ 个汉字，
   读起来眼睛要从行首扫到行尾很吃力。限到 62ch 上下。 */
.pull p{font-size:17.5px; color:rgba(255,255,255,.82); margin-bottom:12px; line-height:1.78; position:relative; max-width:62ch}
.pull p strong{color:#fff; font-weight:750}
.pull-sub{font-size:16px !important; color:rgba(255,255,255,.55) !important; margin-bottom:24px !important}
.pull .btn{position:relative}

/* ============================================================
   处境场景：18 张卡改成「分组小节 + 紧凑行」
   上一版一次铺 18 张同质白卡，像一堵墙。现在按组标题切段。
   ============================================================ */
.scene-group{margin-bottom:44px}
.scene-group:last-child{margin-bottom:0}
.sg-ti{
  font-size:12px; font-weight:750; color:var(--ink-3); margin-bottom:18px;
  display:flex; align-items:center; gap:12px; letter-spacing:.1em; text-transform:uppercase;
}
.sg-ti::after{content:""; flex:1; height:1px; background:var(--line)}
.sg-ti span{
  font-size:12.5px; font-weight:500; color:var(--ink-3);
  letter-spacing:0; text-transform:none;
}
.scene-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:10px}
.scene-card{
  display:block; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-s); padding:16px 18px;
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.scene-card:hover{
  text-decoration:none; border-color:var(--ink); transform:translateY(-2px);
  box-shadow:var(--shadow-2);
}
.sc-ti{display:block; font-weight:650; font-size:14.5px; margin-bottom:4px; line-height:1.45; color:var(--ink)}
.scene-card:hover .sc-ti{color:var(--brand-d)}
.sc-br{display:block; font-size:13px; color:var(--ink-3); line-height:1.6}

/* ============================================================
   路径卡（首页 4 条路）
   上一版是 5 个 panel 挤在 880px 里，每张 170px，文字全变省略号。
   现在容器加宽到 1120px，2×2 布局，每张 550px，文字完整。
   ============================================================ */
.paths{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.path{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 28px; box-shadow:var(--shadow-1);
  transition:transform .18s,box-shadow .18s,border-color .18s;
  display:flex; flex-direction:column;
}
.path:hover{transform:translateY(-2px); box-shadow:var(--shadow-2); border-color:var(--line-2)}
.path-hd{display:flex; align-items:baseline; gap:11px; margin-bottom:14px}
/* 序号用靛蓝，与主色区分 —— 这是引入第二色的地方 */
.path-no{
  font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--indigo);
  background:var(--indigo-soft); padding:3px 8px; border-radius:6px; flex:0 0 auto;
}
.path-ti{font-size:17.5px; font-weight:700; letter-spacing:-.02em; flex:1}
.path ul{list-style:none; padding:0; margin:0 0 20px; flex:1}
.path li{
  font-size:14.5px; color:var(--ink-2); line-height:1.7; margin-bottom:9px;
  padding-left:20px; position:relative;
}
.path li:last-child{margin-bottom:0}
.path li::before{
  content:""; position:absolute; left:1px; top:.62em; width:6px; height:6px;
  border-radius:2px; background:var(--brand);
}
/* 列表里的链接不该带下划线。04 卡那句「今天推荐」就是链接，
   带了线 + 橘红会读成"报错提示"。改用柔和的靛蓝，和序号呼应。 */
.path li a{
  color:var(--indigo); font-weight:550; text-decoration:none;
  border-bottom:1px solid rgba(29,78,216,.28);
}
.path li a:hover{border-bottom-color:var(--indigo)}
.path .btn{align-self:flex-start}

/* ============================================================
   章节索引：34 项不再一次铺满
   改成紧凑两列表格式行 —— 信息密度高但不显得是墙。
   ============================================================ */
.sec-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 28px;
  border-top:1px solid var(--line);
}
.sec-card{
  display:flex; align-items:center; gap:13px;
  padding:14px 4px; border-bottom:1px solid var(--line);
  transition:color .16s,background .16s;
}
.sec-card:hover{text-decoration:none; color:var(--brand-d)}
.sec-no{
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink-3);
  flex:0 0 auto; width:20px;
}
.sec-card:hover .sec-no{color:var(--brand)}
.sec-ti{font-size:14.5px; font-weight:500; flex:1; line-height:1.45; color:var(--ink)}
.sec-n{font-size:12px; color:var(--ink-3); flex:0 0 auto; font-variant-numeric:tabular-nums}

/* ============================================================
   条目卡
   ============================================================ */
.list{display:flex; flex-direction:column; gap:10px}
.item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px;
  transition:border-color .18s,box-shadow .18s;
}
.item:hover{border-color:var(--line-2); box-shadow:var(--shadow-2)}
.item-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; margin-bottom:10px;
}
.item-no{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--ink-3); flex:0 0 auto}
.item-no a{color:var(--ink-3)}
.item-no a:hover{color:var(--brand-d)}
.badges{display:flex; gap:5px; flex-wrap:wrap; align-items:center; justify-content:flex-end}

.ev{font-size:11px; font-weight:700; padding:3px 8px; border-radius:99px; white-space:nowrap}
.ev-A{background:var(--brand); color:#fff}
.ev-B{background:var(--amber-soft); color:var(--amber-d)}
.ev-C{background:var(--bg-2); color:var(--ink-3)}

.ratio{font-size:11px; padding:3px 8px; border-radius:99px; white-space:nowrap; font-weight:600}
.r-top{background:var(--amber); color:#4A3208}
.r-high{background:var(--amber-soft); color:var(--amber-d)}
.r-mid{background:var(--bg-2); color:var(--ink-3)}

.flag{font-size:10.5px; padding:3px 7px; border-radius:99px; white-space:nowrap; font-weight:550}
.flag-dispute{background:var(--brand-soft); color:var(--brand-d)}
.flag-todo{background:var(--bg-2); color:var(--ink-3)}

.item-ti{font-size:17px; font-weight:700; line-height:1.48; margin-bottom:12px; letter-spacing:-.02em}
.item-ti a{color:var(--ink)}
.item-ti a:hover{color:var(--brand-d); text-decoration:none}
.tags{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:13px}
.chip{
  font-size:11px; color:var(--ink-2); background:var(--bg-2); padding:3.5px 9px;
  border-radius:99px; white-space:nowrap; font-weight:500;
}
.chip-good{background:var(--lime-soft); color:var(--lime-d); font-weight:600}
.chip-dim{background:var(--bg-2); color:var(--ink-3)}
.chip-crowd{background:var(--indigo-soft); color:var(--indigo)}

/* 「说人话」块：靛蓝底，和主色区分 */
.plain{
  font-size:15.5px; color:var(--ink); line-height:1.8;
  background:var(--bg-2); border-radius:var(--r-s); padding:14px 16px;
}
.plain::before{content:"说人话 · "; color:var(--indigo); font-weight:750; font-size:12px; letter-spacing:.03em}

.item-more{margin-top:12px}
.item-more summary{
  font-size:12.5px; color:var(--ink-3); cursor:pointer; list-style:none; padding:6px 0;
  user-select:none; font-weight:500;
}
.item-more summary::-webkit-details-marker{display:none}
.item-more summary::before{content:"＋ "; font-size:11px}
.item-more[open] summary::before{content:"－ "; font-size:11px}
.item-more summary:hover{color:var(--brand-d)}
.more-in{padding:16px 0 4px; border-top:1px solid var(--line); margin-top:8px}
.field{margin-bottom:15px}
.field:last-child{margin-bottom:0}
.fname{
  display:block; font-size:11px; font-weight:750; color:var(--ink-3);
  margin-bottom:5px; letter-spacing:.08em;
}
.field p{font-size:14.5px; color:var(--ink-2); line-height:1.8}
.field p.src{font-size:12.5px; color:var(--ink-3); word-break:break-word; line-height:1.68}
.field p.src a{color:var(--ink-3); border-bottom:1px solid var(--line-2)}
.field p.src a:hover{color:var(--brand-d)}
.hint{font-size:12.5px; color:var(--ink-3)}

.item-ft{
  display:flex; align-items:center; gap:15px; flex-wrap:wrap;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3);
}
/* ---------- 清单标记（三态）----------
   三个按钮共用一套外观，靠底色区分：已做到=抹茶绿、待做=琥珀、收藏=靛蓝描边。
   颜色本身不传达唯一信息 —— 每个按钮都有 aria-pressed，且选中时加粗。 */
.marks{display:flex; gap:6px; flex-wrap:wrap}
.mk{
  font-family:inherit; font-size:12px; font-weight:650; padding:6px 13px;
  border:1px solid var(--line-2); background:#fff; color:var(--ink-2);
  border-radius:99px; cursor:pointer; transition:background .16s,border-color .16s,color .16s;
}
.mk:hover{border-color:var(--ink-3); color:var(--ink)}
.mk-done[aria-pressed="true"]{background:var(--lime); border-color:var(--lime); color:#fff}
.mk-done[aria-pressed="true"]::before{content:"✓ "}
.mk-todo[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:#fff}
.mk-todo[aria-pressed="true"]::before{content:"▸ "}
.mk-fav[aria-pressed="true"]{background:var(--indigo); border-color:var(--indigo); color:#fff}
.mk-fav[aria-pressed="true"]::before{content:"★ "}

/* 站头「我的清单」入口 + 已做到计数 */
.nav-list{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  padding:7px 12px; border-radius:99px; white-space:nowrap;
}
.nav-list:hover{background:var(--bg-2); color:var(--ink); text-decoration:none}
.nav-list .nl-s{display:none}
.nav-list.on{color:#fff; background:var(--ink); font-weight:650}
.nav-count{
  font-size:11.5px; font-weight:700; min-width:18px; text-align:center;
  background:var(--lime); color:#fff; border-radius:99px; padding:1px 5px;
  font-variant-numeric:tabular-nums;
}
.nav-list.on .nav-count{background:#fff; color:var(--ink)}
.nav-count[hidden]{display:none}

/* ---------- 我的清单页 ---------- */
.mylist{margin-bottom:var(--sp-m)}
.ml-loading{color:var(--ink-3); font-size:14px}
.ml-empty{
  border:1px dashed var(--line-2); border-radius:var(--r);
  padding:44px 32px; text-align:center; background:var(--bg-3);
}
.ml-empty-ti{font-size:19px; font-weight:700; color:var(--ink); margin-bottom:8px}
.ml-empty-tx{font-size:15px; color:var(--ink-2); margin-bottom:22px}
.ml-empty-cta{display:flex; gap:11px; justify-content:center; flex-wrap:wrap}

.ml-stats{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:11px; margin-bottom:12px;
}
.ml-stat{
  background:var(--bg-2); border-radius:var(--r); padding:20px 22px 18px;
}
.ml-stat b{
  display:block; font-size:clamp(30px,3.6vw,42px); font-weight:800; line-height:1;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.ml-stat b i{font-size:.52em; font-style:normal; font-weight:700; margin-left:1px}
.ml-stat span{display:block; font-size:13px; color:var(--ink-2); margin-top:9px; font-weight:500}
.ml-stat-done b{color:var(--lime-d)}
.ml-stat-done{background:var(--lime-soft)}
.ml-stat-pct b{color:var(--indigo)}
.ml-stat-pct{background:var(--indigo-soft)}
.ml-progress-note{font-size:13px; color:var(--ink-3); margin-bottom:30px}

/* 今日一件：黑底，和全站最强的数据块同一语言 */
.ml-today{
  background:var(--ink); color:#fff; border-radius:var(--r);
  padding:22px 26px; margin-bottom:30px;
  display:flex; flex-direction:column; gap:5px;
}
.ml-today-tag{
  font-size:11.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand);
}
.ml-today-ti{font-size:19px; font-weight:750; color:#fff; line-height:1.4}
.ml-today-ti:hover{color:var(--brand); text-decoration:none}
.ml-today-meta{font-size:13px; color:rgba(255,255,255,.55)}

.ml-group{margin-bottom:34px}
.ml-group-hd{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line);
}
.ml-group-hd h2{font-size:19px; font-weight:750; letter-spacing:-.02em}
.ml-group-hd h2 b{
  font-size:13px; font-weight:700; color:#fff; background:var(--ink-3);
  border-radius:99px; padding:1px 8px; margin-left:4px; vertical-align:2px;
  font-variant-numeric:tabular-nums;
}
.ml-group-hd h2.g-done b{background:var(--lime)}
.ml-group-hd h2.g-todo b{background:var(--amber)}
.ml-group-hd h2.g-fav b{background:var(--indigo)}
.ml-group-hint{font-size:13px; color:var(--ink-3)}

.ml-rows{list-style:none; margin:0; padding:0}
.ml-row{
  display:grid; grid-template-columns:1fr auto; gap:4px 20px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
.ml-row-ti{font-size:16px; font-weight:650; color:var(--ink); line-height:1.45}
.ml-row-ti:hover{color:var(--brand-d)}
.ml-row-meta{font-size:12.5px; color:var(--ink-3); grid-column:1}
.ml-row-note{
  grid-column:1; font-size:13px; color:var(--ink-2); line-height:1.6;
  background:var(--bg-3); border-left:2px solid var(--indigo);
  border-radius:0 8px 8px 0; padding:8px 12px; margin-top:5px;
}
.ml-row-act{grid-row:1 / span 3; grid-column:2; align-self:center; display:flex; gap:6px}

.ml-actions{
  display:flex; gap:11px; flex-wrap:wrap; align-items:center;
  padding-top:26px; border-top:1px solid var(--line);
}
.ml-danger{color:var(--brand-d); border-color:var(--brand-line)}
.ml-danger:hover{border-color:var(--brand); color:var(--brand-d)}
.ml-saved{font-size:13px; color:var(--ink-3); margin-left:auto}

.ml-howto{padding-top:26px; border-top:1px solid var(--line)}
.ml-howto h2{font-size:20px; font-weight:750; margin-bottom:16px; letter-spacing:-.02em}
.ml-steps{margin:0 0 18px; padding-left:20px; color:var(--ink-2); font-size:15px; line-height:1.9}
.ml-steps strong{color:var(--ink)}
.ml-note{font-size:13.5px; color:var(--ink-3); line-height:1.8; max-width:66ch}

/* 条目页的备注框 */
.note-box{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.note-box label{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  font-size:14px; font-weight:650; color:var(--ink); margin-bottom:9px;
}
.note-hint{font-size:12.5px; font-weight:400; color:var(--ink-3)}
.note-box textarea{
  width:100%; font-family:inherit; font-size:14.5px; line-height:1.7;
  color:var(--ink); background:var(--bg-3);
  border:1px solid var(--line); border-radius:var(--r-s);
  padding:12px 14px; resize:vertical;
}
.note-box textarea:focus{outline:none; border-color:var(--indigo); background:#fff}

/* 锚点目标要避开吸顶的站头，否则跳过来标题被盖住 */
:target{scroll-margin-top:86px}

.card-link{color:var(--ink-3); font-weight:500}
.card-link:hover{color:var(--brand-d)}
.sec-link{margin-left:auto}
.sec-link a{color:var(--ink-3)}
.sec-link a:hover{color:var(--brand-d)}

/* ============================================================
   结论块
   ============================================================ */
.verdict{
  background:var(--ink); color:#fff;
  border-radius:var(--r); padding:28px 32px; margin-bottom:36px;
}
.v-tag{
  display:inline-block; font-size:11px; font-weight:750; color:var(--ink);
  background:#fff; padding:4px 11px; border-radius:99px; margin-bottom:13px;
  letter-spacing:.04em;
}
.verdict p{font-size:16.5px; color:rgba(255,255,255,.86); line-height:1.85}
.verdict p strong{color:#fff; font-weight:700}

.fold{margin-top:6px}
.fold summary{
  font-size:14px; color:var(--brand-d); cursor:pointer; padding:14px 0; font-weight:600;
  list-style:none;
}
.fold summary::-webkit-details-marker{display:none}
.fold summary::before{content:"▸ "}
.fold[open] summary::before{content:"▾ "}
.fold-in{padding-top:8px}

.tip{
  margin-top:44px; padding:20px 24px; background:var(--bg-3);
  border-radius:var(--r); font-size:14px; color:var(--ink-2); line-height:1.8;
  border:1px solid var(--line);
}

/* ============================================================
   筛选器
   ============================================================ */
.filters{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:22px 24px; margin-bottom:18px;
  display:flex; flex-direction:column; gap:15px;
  box-shadow:var(--shadow-1);
}
.fgroup{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.flabel{font-size:12px; font-weight:700; color:var(--ink-3); flex:0 0 74px; letter-spacing:.02em}
.fgroup label{
  font-size:13px; color:var(--ink-2); display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; white-space:nowrap; font-weight:500;
  padding:6px 12px; border-radius:99px; background:var(--bg-2);
  transition:background .16s,color .16s;
}
.fgroup label:hover{background:var(--brand-soft); color:var(--brand-d)}
.fgroup input[type=radio]{margin:0; accent-color:var(--brand); cursor:pointer; width:13px; height:13px}
.fgroup label:has(input:checked){background:var(--ink); color:#fff; font-weight:600}
.fgroup select,.fgroup input[type=search]{
  font-family:inherit; font-size:13px; padding:9px 13px; border:1px solid var(--line-2);
  border-radius:99px; background:#fff; color:var(--ink); min-width:0; font-weight:500;
  transition:border-color .16s,box-shadow .16s;
}
.fgroup select:focus,.fgroup input[type=search]:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--bg-2);
}
.fg-wide{width:100%}
.fg-wide input[type=search]{flex:1; min-width:200px}
.fcount{font-size:13.5px; color:var(--ink-3); margin-bottom:14px; font-weight:500}
.fcount b{color:var(--brand-d); font-variant-numeric:tabular-nums; font-weight:700}
.fempty{text-align:center; color:var(--ink-3); padding:52px 0; font-size:15px}

/* ============================================================
   单条页面
   ============================================================ */
.single{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:32px 34px 24px; box-shadow:var(--shadow-1);
}
.single h1{font-size:clamp(23px,3.2vw,31px); line-height:1.4; margin-bottom:15px}
.box-plain{background:var(--indigo-soft); border-radius:var(--r-s); padding:20px 22px; margin:22px 0 24px}
.bpl-tag{
  display:inline-block; font-size:11px; font-weight:750; color:var(--indigo); margin-bottom:8px;
  letter-spacing:.05em;
}
.box-plain p{font-size:16.5px; line-height:1.85; color:var(--ink)}
.single-ft{
  display:flex; align-items:center; gap:17px; margin-top:26px; padding-top:17px;
  border-top:1px solid var(--line); font-size:13.5px;
}
.pager{
  display:flex; justify-content:space-between; gap:18px; margin-top:30px;
  padding-top:19px; border-top:1px solid var(--line); font-size:14px;
}
.pager a{color:var(--ink-2); max-width:46%; font-weight:500}
.pager a:hover{color:var(--brand-d)}

/* ============================================================
   章节页
   ============================================================ */
.sec-intro{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; margin-bottom:18px;
}
.sec-intro p{font-size:15px; color:var(--ink-2); margin-bottom:12px; line-height:1.82}
.sec-intro p:last-child{margin-bottom:0}
.toc-groups{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:24px 26px; margin-bottom:24px;
}
.tg-ti{font-size:11.5px; font-weight:750; color:var(--ink-3); margin-bottom:14px; letter-spacing:.1em; text-transform:uppercase}
.tg{display:flex; gap:15px; padding:11px 0; border-top:1px solid var(--line); font-size:14px}
.tg:first-of-type{border-top:none}
.tg:last-child{padding-bottom:0}
.tg-name{flex:0 0 88px; font-weight:650; color:var(--ink); font-size:13.5px}
.tg-items{flex:1; display:flex; flex-wrap:wrap; gap:5px 13px}
.tg-items a{color:var(--ink-2); font-weight:500}
.tg-items a:hover{color:var(--brand-d)}

/* ============================================================
   体检
   ============================================================ */
.checkup{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:8px 30px 30px; box-shadow:var(--shadow-1);
}
.q-item{padding:23px 0; border-bottom:1px solid var(--line)}
.q-item:last-child{border-bottom:none}
.q-ti{font-size:16.5px; font-weight:700; margin-bottom:5px; display:flex; gap:11px; align-items:baseline}
.q-num{
  font-family:var(--mono); font-size:11.5px; color:var(--indigo); font-weight:700; flex:0 0 auto;
  background:var(--indigo-soft); padding:2px 8px; border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.q-hint{font-size:13.5px; color:var(--ink-3); margin-bottom:13px; line-height:1.7}
.q-opts{display:flex; flex-direction:column; gap:7px}
.q-opt{
  display:flex; align-items:flex-start; gap:11px; font-size:15px; color:var(--ink-2);
  cursor:pointer; padding:12px 15px; border-radius:var(--r-s); background:var(--bg-2);
  transition:background .16s,color .16s; line-height:1.6; font-weight:500;
}
.q-opt:hover{background:var(--brand-soft); color:var(--ink)}
.q-opt input{margin:6px 0 0; accent-color:var(--brand); flex:0 0 auto; cursor:pointer; width:14px; height:14px}
.q-opt.checked{background:var(--brand); color:#fff; font-weight:600}
.quiz-nav{display:flex; gap:11px; margin-top:24px; flex-wrap:wrap}

.report{margin-top:42px}
.report-hd{border-top:2px solid var(--ink); padding-top:24px; margin-bottom:26px}
.report-hd h2{font-size:clamp(24px,3.2vw,31px); margin-bottom:11px; font-weight:750; letter-spacing:-.035em}
.report-lead{color:var(--ink-2); font-size:15.5px; line-height:1.82}
.score-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:24px 0 32px}
.score-grid > div{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px;
}
.score-grid b{
  display:block; font-size:clamp(34px,4.2vw,48px); font-weight:800; color:var(--brand);
  font-variant-numeric:tabular-nums; line-height:1; letter-spacing:-.05em;
}
.score-grid b.warn{color:var(--amber-d)}
.score-grid span{display:block; font-size:12.5px; color:var(--ink-2); line-height:1.6; margin-top:9px; font-weight:500}
.report-sec{margin-bottom:36px}
.report-sec h3{font-size:19px; margin-bottom:7px; display:flex; align-items:baseline; gap:11px; flex-wrap:wrap}
.report-sec .rs-sub{font-size:14px; color:var(--ink-3); margin-bottom:15px}
.rs-tag{font-size:11.5px; font-weight:650; color:var(--indigo); background:var(--indigo-soft); padding:3px 10px; border-radius:99px}
.report-foot{
  margin-top:38px; padding-top:19px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3); line-height:1.88;
}

/* ============================================================
   财务体检
   ============================================================ */
.m-num{display:flex; align-items:center; gap:10px; max-width:340px}
.m-num input{
  font-family:inherit; font-size:16px; font-weight:650; padding:11px 15px;
  border:1px solid var(--line-2); border-radius:var(--r-s); background:#fff;
  color:var(--ink); width:100%; font-variant-numeric:tabular-nums;
  transition:border-color .16s,box-shadow .16s;
}
.m-num input::placeholder{color:var(--ink-3); font-weight:400}
.m-num input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.m-unit{font-size:14px; color:var(--ink-3); font-weight:600; flex:0 0 auto}
.q-opt-tag{font-size:11px; font-weight:600; color:var(--ink-3); background:#fff; padding:2px 7px; border-radius:99px}

.m-live{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin:20px 0 4px; padding:18px 20px;
  background:var(--ink); border-radius:var(--r);
}
.m-live .ml-i{display:flex; flex-direction:column; gap:4px}
.m-live b{
  font-size:clamp(22px,2.6vw,30px); font-weight:800; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:-.035em; line-height:1.1;
}
.m-live span{font-size:12.5px; color:rgba(255,255,255,.6); font-weight:500; line-height:1.5}

/* ============================================================
   海报
   ============================================================ */
.poster-box{
  margin-top:42px; padding:28px 30px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-1);
}
.poster-box h3{font-size:19px; margin-bottom:9px}
.poster-box > p{font-size:14.5px; color:var(--ink-2); line-height:1.82; margin-bottom:19px; max-width:62ch}
.poster-actions{display:flex; gap:11px; flex-wrap:wrap}
.poster-out{margin-top:24px; display:flex; flex-direction:column; align-items:flex-start; gap:15px}
.poster-out img{
  width:min(290px,100%); height:auto; border-radius:var(--r-s);
  box-shadow:var(--shadow-2); background:#fff;
}

/* ============================================================
   搜索
   ============================================================ */
.sr-overlay{
  position:fixed; inset:0; z-index:60; display:none;
  background:rgba(20,20,20,.32);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:12vh 20px 20px; overflow-y:auto;
}
.sr-overlay.open{display:block}
.sr-panel{
  width:min(700px,100%); margin:0 auto;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border-radius:var(--r); box-shadow:0 28px 64px -22px rgba(20,20,20,.44);
  overflow:hidden;
}
.sr-top{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line)}
.sr-top svg{width:17px; height:17px; color:var(--ink-3); flex:0 0 auto}
.sr-input{
  flex:1; font-family:inherit; font-size:17px; font-weight:500;
  border:none; background:transparent; color:var(--ink); outline:none; min-width:0;
}
.sr-input::placeholder{color:var(--ink-3); font-weight:400}
.sr-esc{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-3);
  background:var(--bg-2); padding:3px 7px; border-radius:5px; flex:0 0 auto;
}
.sr-body{max-height:min(58vh,520px); overflow-y:auto; padding:8px}
.sr-hint{padding:26px 20px; font-size:14px; color:var(--ink-3); line-height:1.8; text-align:center}
.sr-hint kbd{
  font-family:var(--mono); font-size:11px; background:var(--bg-2);
  padding:2px 6px; border-radius:5px; color:var(--ink-2);
}
.sr-item{display:block; padding:11px 14px; border-radius:var(--r-s); transition:background .14s}
.sr-item:hover,.sr-item.sel{background:var(--bg-2); text-decoration:none}
.sr-ti{font-size:14.5px; font-weight:650; color:var(--ink); line-height:1.5; margin-bottom:3px}
.sr-ti mark{background:var(--brand-soft); color:var(--brand-d); padding:0 2px; border-radius:3px; font-weight:700}
.sr-meta{font-size:12px; color:var(--ink-3); line-height:1.6}
.sr-meta mark{background:var(--brand-soft); color:var(--brand-d); padding:0 2px; border-radius:3px}
.sr-ft{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:11px 20px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink-3);
}
.sr-ft a{color:var(--brand-d); font-weight:650}

.sr-page-form{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap}
.sr-page-form input[type=search]{
  flex:1; min-width:220px; font-family:inherit; font-size:16px; font-weight:500;
  padding:13px 18px; border:1px solid var(--line-2); border-radius:99px;
  background:#fff; color:var(--ink); outline:none;
  transition:border-color .16s,box-shadow .16s;
}
.sr-page-form input[type=search]:focus{border-color:var(--ink); box-shadow:0 0 0 3px var(--bg-2)}
.sr-sug{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:22px}
.sr-sug a{
  font-size:13.5px; color:var(--ink-2); background:var(--bg-2);
  padding:7px 14px; border-radius:99px; font-weight:500;
}
.sr-sug a:hover{color:var(--brand-d); text-decoration:none}

/* ============================================================
   留言
   ============================================================ */
.join-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:14px; align-items:start}
.join-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:28px 30px; box-shadow:var(--shadow-1);
}
.join-card h3{font-size:18px; margin-bottom:7px}
.join-card > p{font-size:14.5px; color:var(--ink-2); line-height:1.82; margin-bottom:19px}
.join-field{margin-bottom:15px}
.join-field label{display:block; font-size:11.5px; font-weight:750; color:var(--ink-3); margin-bottom:6px; letter-spacing:.06em}
.join-field input,.join-field textarea,.join-field select{
  width:100%; font-family:inherit; font-size:15px; padding:12px 15px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  background:#fff; color:var(--ink); outline:none; line-height:1.7;
  transition:border-color .16s,box-shadow .16s;
}
.join-field textarea{min-height:130px; resize:vertical}
.join-field input:focus,.join-field textarea:focus,.join-field select:focus{
  border-color:var(--ink); box-shadow:0 0 0 3px var(--bg-2);
}
.join-ok{
  margin-top:15px; padding:15px 17px; border-radius:var(--r-s);
  background:var(--lime-soft); color:var(--lime-d); font-size:14px; line-height:1.78; font-weight:550;
}
.join-err{
  margin-top:15px; padding:14px 17px; border-radius:var(--r-s);
  background:var(--brand-soft); color:var(--brand-d); font-size:14px; line-height:1.78;
}
.draft-note{
  margin-top:13px; font-size:12.5px; color:var(--ink-3); line-height:1.78;
  padding:12px 15px; background:var(--bg-2); border-radius:var(--r-s);
}
.draft-note b{color:var(--ink-2); font-weight:650}
.join-way{display:flex; gap:12px; padding:13px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.72}
.join-way:first-of-type{border-top:none}
.join-way b{display:block; color:var(--ink); font-weight:650; margin-bottom:2px}
.join-way span{color:var(--ink-2)}

/* ============================================================
   术语表 / 关于
   ============================================================ */
.gloss{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:8px 30px; box-shadow:var(--shadow-1);
}
.gl-item{padding:19px 0; border-bottom:1px solid var(--line); display:flex; gap:24px}
.gl-item:last-child{border-bottom:none}
.gl-item dt{flex:0 0 112px; font-weight:700; font-size:15px}
.gl-item dd{margin:0; flex:1; font-size:14.5px; color:var(--ink-2); line-height:1.82}

.prose h2{font-size:22px; margin:44px 0 13px; letter-spacing:-.03em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px; margin:30px 0 11px; letter-spacing:-.02em}
.prose p{font-size:16px; color:var(--ink-2); margin-bottom:14px; line-height:1.88}
.prose p strong{color:var(--ink); font-weight:700}
.prose ul{margin:0 0 15px; padding-left:22px}
.prose li{font-size:16px; color:var(--ink-2); margin-bottom:10px; line-height:1.84}
.tbl{width:100%; border-collapse:collapse; margin:15px 0 20px; font-size:14.5px}
.tbl th{
  text-align:left; font-weight:700; color:var(--ink); font-size:13px;
  padding:11px 15px 11px 0; border-bottom:1.5px solid var(--ink); vertical-align:top; width:92px;
}
.tbl td{padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink-2); line-height:1.78}

/* ============================================================
   页脚
   ============================================================ */
/* 页脚：三行结构 —— 品牌+规模 / 导航 / 一行法务。
   法务行压缩成一行，靠 1px 分隔线和上面隔开，视觉上「这是小字」。 */
.site-ft{background:var(--bg-3); border-top:1px solid var(--line); margin-top:32px}
.ft-in{width:var(--w); margin:0 auto; padding:40px 0 46px; font-size:13.5px; line-height:1.88; color:var(--ink-3)}
.ft-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px 24px; flex-wrap:wrap; margin-bottom:20px;
}
.ft-brand{display:flex; align-items:center; gap:9px}
.ft-brand img{height:26px; width:auto}
.ft-brand span{font-size:13px; color:var(--ink-3)}
.ft-facts{font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.ft-links{display:flex; gap:8px 20px; flex-wrap:wrap; margin-bottom:20px}
.ft-links a{color:var(--ink-2); font-weight:500}
.ft-links a:hover{color:var(--brand-d)}
.ft-legal{
  display:flex; gap:6px 22px; flex-wrap:wrap;
  padding-top:16px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-3);
}
.ft-legal a{color:var(--ink-2)}
.ft-legal a:hover{color:var(--brand-d)}

/* ============================================================
   图形系统
   ------------------------------------------------------------
   全站所有图形都走这一层。统一规格：24×24 视区、1.6 描边、currentColor。
   颜色一律继承所在位置的文字色 —— 这是用内联 SVG 而不是图片的直接回报：
   浅灰底、黑底反白、按钮里、筛选器的选中态（黑底白字）都不用另配一套图标。
   ============================================================ */
.ic{width:1.15em; height:1.15em; flex:0 0 auto; display:inline-block; vertical-align:-.18em}

/* ---------- 首页四张路径卡：图标 + 编号 ----------
   图标不套底色方块，直接是形状本身。去掉底色之后图标自己就是视觉锚点，
   所以尺寸从 21px 提到 28px —— 不然一张卡里 17.5px 的标题压着一个 21px 的小图形，
   重心会塌。四种颜色保留，负责区分四条路。 */
.path-hd{display:flex; align-items:center; gap:11px; margin-bottom:16px}
.path-ic{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto}
.path-ic .ic{width:28px; height:28px}
.pic-brand{color:var(--brand-d)}
.pic-indigo{color:var(--indigo)}
.pic-amber{color:var(--amber-d)}
.pic-lime{color:var(--lime-d)}

/* ---------- 处境场景卡：图标 + 两行文字 ----------
   宽度定死 25px 是必要的：场景卡是 flex 行，图标宽度不统一的话，
   每张卡的标题起始位置都会错开，一列看下来就是歪的。 */
.scene-card{display:flex; align-items:flex-start; gap:13px}
.sc-ic{
  width:25px; flex:0 0 25px; color:var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .16s; margin-top:1px;
}
.sc-ic .ic{width:23px; height:23px}
.scene-card:hover .sc-ic{color:var(--brand-d)}
.sc-tx{min-width:0; flex:1}

/* ---------- 章节索引卡：图标 + 节号/标题 两行 + 条数 ---------- */
.sec-card{gap:14px; padding:13px 4px}
.sec-ic{
  width:26px; flex:0 0 26px; color:var(--ink-2);
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .16s;
}
.sec-ic .ic{width:23px; height:23px}
.sec-card:hover .sec-ic{color:var(--brand-d)}
.sec-tx{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.sec-card .sec-no{width:auto; font-size:10.5px; letter-spacing:.06em}
.sec-card .sec-ti{flex:none}

/* ---------- 章节页头部：图标直接当锚点 ----------
   不加底色，靠 56px 的裸图形撑版面。kicker 会把标题往下推一截，
   所以图标要往上贴一点，否则看起来浮在标题右边。 */
.sec-hd{display:flex; align-items:flex-start; gap:20px}
.sec-hd-ic{
  flex:0 0 auto; color:var(--brand);
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:3px;
}
.sec-hd-ic .ic{width:56px; height:56px}
.sec-hd-tx{min-width:0; flex:1}

/* ---------- 数据全景（首页）---------- */
.pan{display:grid; grid-template-columns:1fr 1.2fr; gap:14px; align-items:start}
.pan-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:26px 28px; box-shadow:var(--shadow-1);
}
.pan-ti{
  font-size:11.5px; font-weight:750; color:var(--ink-3); letter-spacing:.12em;
  text-transform:uppercase; margin:0 0 18px;
}
/* 同一张卡里第二组标题要拉开距离，否则「性价比」会读成上一组条形的结尾 */
.pan-card .pan-ti:not(:first-child){margin-top:30px}
.pan-donut{display:flex; align-items:center; gap:26px}
.pan-donut .donut{width:158px; flex:0 0 auto}
.pan-lg{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.pan-lg li{display:flex; flex-direction:column; gap:3px; padding-left:22px; position:relative}
.pan-lg b{font-size:14px; font-weight:700; color:var(--ink)}
.pan-lg span{font-size:12.5px; color:var(--ink-3); line-height:1.62}
.sw{position:absolute; left:0; top:4px; width:11px; height:11px; border-radius:3px}
.sw-brand{background:#FF3D1F}
.sw-amber{background:#F5A524}
.sw-gray{background:#DCDEE2}

/* ---------- 条形图 ---------- */
/* 三列固定宽：标签列定宽，条形才能左右对齐；不定宽的话每行起点都不一样。 */
.bars{display:flex; flex-direction:column; gap:11px}
.bar-row{display:grid; grid-template-columns:112px 1fr 38px; gap:11px; align-items:center}
.bar-lb{
  font-size:12.5px; color:var(--ink-2); font-weight:550;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; min-width:0;
}
.bar-lb .ic{width:14px; height:14px; color:var(--ink-3)}
.bar-track{height:9px; background:var(--bg-2); border-radius:99px; overflow:hidden; min-width:40px}
.bar-fill{display:block; height:100%; border-radius:99px; background:var(--brand)}
.bar-n{font-size:12.5px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right}
.bars-ab{max-width:520px}

/* ---------- 条目页：成本 × 收益 定位图 ---------- */
.pos{
  border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:20px 22px 10px; margin-bottom:18px;
}
.pos-hd{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin-bottom:4px}
.pos-ti{font-size:12.5px; font-weight:700; color:var(--ink-3); letter-spacing:.06em}
.pos-sub{font-size:12.5px; color:var(--ink-3)}
.quadmap{max-width:340px; display:block}

/* ---------- 图标与既有组件接缝 ---------- */
/* eyebrow 原来是 block，塞了图标必须转 inline-flex，否则图标掉到下一行 */
.blk-hd .eyebrow{display:inline-flex; align-items:center; gap:7px}
.blk-hd .eyebrow .ic{width:15px; height:15px}
.chip-dim{display:inline-flex; align-items:center; gap:4px}
.chip-dim .ic{width:12px; height:12px}
/* 筛选器选中态是黑底白字，图标靠 currentColor 自动反白，不用额外规则 */
.fgroup label .ic{width:14px; height:14px; opacity:.8}
.fgroup label:has(input:checked) .ic{opacity:1}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:1080px){
  /* 单列后 hero-in 的 padding-bottom 要给回来 —— 桌面版改成 0 是因为
     下面的 .blk 会接手间距，单列时两栏变一栏，卡片贴着区块反而不松。 */
  .hero-in{grid-template-columns:1fr; gap:36px; padding:52px 0 0}
  .paths{grid-template-columns:1fr}
  .join-grid{grid-template-columns:1fr}
  .sec-list{grid-template-columns:1fr}
  /* 数据全景在 1080px 下环形图已被压到 130px 以内，两栏不如直接竖排 */
  .pan{grid-template-columns:1fr}
}
/* 导航短标签提前到 900px 切换。
   原来只在 640px 切，导致 760–900px 这一段「长标签放不下、又还没收窄」，
   768px 实测整页横向滚动 23px（scrollWidth 791 > 768）。
   站头高度固定 62px，换行会撑破，所以只能提前换短标签。 */
@media(max-width:900px){
  .nav .nv-f{display:none}
  .nav .nv-s{display:inline}
  .nav a{padding:7px 11px}
  /* 站头挤到 900px 时「我的清单」收成「清单」，把宽度让给主导航 */
  .nav-list .nl-f{display:none}
  .nav-list .nl-s{display:inline}
  .nav-list{padding:7px 10px}
  /* 环形图竖排：窄屏下横排会把图例挤成两三个字一行 */
  .pan-donut{flex-direction:column; align-items:stretch; gap:20px}
  .pan-donut .donut{width:150px; margin:0 auto}
  .sec-hd{gap:15px}
  .sec-hd-ic .ic{width:42px; height:42px}
}
@media(max-width:760px){
  .brand-tag{display:none}
}
@media(max-width:640px){
  :root{--w:calc(100% - 32px); --w-narrow:calc(100% - 32px); --w-wide:calc(100% - 32px)}
  body{font-size:16px}
  .hd-in{height:auto; min-height:58px; padding:9px 0; flex-wrap:wrap; gap:9px}
  .brand img{height:28px}
  .brand-tx{font-size:15px}
  /* 5 个入口 + 搜索在 390px 下放不进一行。宁可换行，不切成半截字。 */
  .nav{flex-wrap:wrap; justify-content:flex-end; gap:3px 5px}
  .nav a{padding:6px 10px; font-size:12.5px}
  .nav .nv-f{display:none}
  .nav .nv-s{display:inline}
  .nav-search kbd{display:none}
  .nav-search{padding:6px 9px}
  .page{padding:34px 0 64px}
  .page-hd{margin-bottom:26px}
  .hero h1{font-size:34px; line-height:1.16}
  .hero-in{padding:36px 0 0; gap:26px}
  .hero-lead{font-size:16px}
  .hero-figs{grid-template-columns:1fr 1fr; grid-template-rows:auto auto}
  .hero-figs .fig{padding:16px 15px}
  .hero-figs .fig:first-child{padding:20px 17px}
  .fig b{font-size:34px}
  /* 主卡在窄屏回到单列竖排：四个标签 2×2 比一行四个（每格 45px、
     「不需要毅力」会折行）好读。大数字单独占一行，视觉重心也更稳。 */
  .fig-main{grid-template-columns:1fr; grid-template-rows:auto auto auto; row-gap:13px}
  .fig-main-l{flex-direction:row; align-items:baseline; gap:10px}
  .fig-main-l span{margin-top:0}
  .fig-main .quad{grid-template-columns:1fr 1fr; gap:7px}
  .fig-main .fig-note{margin-top:11px}
  .blk{padding-top:var(--sp-m)}
  .blk.sm{padding-top:var(--sp-s)}
  /* .blk-alt 的宽度由 .blk 的 --w 控制，底色由 ::before 越出视口，
     所以这里只调纵向间距，不要碰左右。 */
  .blk-alt{padding-bottom:var(--sp-m)}
  .ml-stats{grid-template-columns:1fr 1fr; gap:9px}
  .ml-stat{padding:16px 16px 14px}
  .ml-stat b{font-size:30px}
  /* 375px 下「条目 + 三个按钮」一行放不下。让按钮换到标题下面自己占一行。 */
  .ml-row{grid-template-columns:1fr; gap:6px}
  .ml-row-act{grid-row:auto; grid-column:1; align-self:auto; margin-top:6px}
  .ml-actions{gap:9px}
  .ml-saved{margin-left:0; width:100%}
  .ml-today{padding:18px 18px}
  .ml-today-ti{font-size:17px}
  .pull{padding:26px 22px}
  .path{padding:22px 20px}
  .paths{grid-template-columns:1fr}
  .scene-grid{grid-template-columns:1fr}
  .score-grid{grid-template-columns:1fr; gap:9px}
  .score-grid > div{display:flex; align-items:baseline; gap:14px; padding:17px 19px}
  .score-grid b{font-size:32px}
  .score-grid span{margin-top:0}
  .item{padding:17px 17px 14px}
  .single{padding:22px 19px 19px}
  .verdict{padding:22px 20px}
  .filters{padding:17px 17px}
  .checkup{padding:4px 19px 22px}
  .gloss{padding:4px 19px}
  .gl-item{flex-direction:column; gap:5px}
  .gl-item dt{flex:none}
  .tg{flex-direction:column; gap:7px}
  .tg-name{flex:none}
  .flabel{flex:0 0 100%}
  .m-live{grid-template-columns:1fr; gap:9px; padding:15px 17px}
  .m-live .ml-i{flex-direction:row; align-items:baseline; gap:10px}
  .m-num{max-width:none}
  .poster-box{padding:22px 19px}
  .join-card{padding:22px 19px}
  .sr-overlay{padding:8vh 14px 20px}
  .ft-in{padding:32px 0 42px}
  /* 条形标签列收窄，数字列也收窄，给条形本身留出可读长度 */
  .bar-row{grid-template-columns:88px 1fr 32px; gap:8px}
  .pan-card{padding:20px 18px}
  .pos{padding:17px 18px 8px}
}

@media print{
  .site-hd,.site-ft,.btn,.nav-search,.nav-list,.poster-actions{display:none !important}
  body{background:#fff; font-size:12pt}
  .item,.path,.single{box-shadow:none; border:1px solid #ddd}
  /* 打印清单：只留「选中的状态」。纸上点不了按钮，但「打印出来当纸质清单打勾」
     这个用法很实在 —— 所以已做到/待做/收藏的标签要看得见，没选的不要出现。 */
  .mk{display:none !important}
  .mk[aria-pressed="true"]{
    display:inline-block !important; border:1px solid #888; color:#000;
    background:#fff !important; border-radius:4px; padding:2px 8px;
  }
  .ml-row{grid-template-columns:1fr}
  .ml-row-act{grid-column:1; grid-row:auto; align-self:auto; margin-top:6px}
}