/* AI 挣钱案例库 — an index, so the craft is information density, not decoration.
   Light-first: ad-supported reading sites live in light, and the dark set is a
   full redefinition rather than an inversion. */
:root{
  --paper:#faf9f6; --card:#ffffff; --sunk:#f2f1ec;
  --ink:#15171b; --ink-2:#585e66; --ink-3:#8b9098;
  --line:#e6e5df; --line-2:#f0efe9;
  --money:#0d6b45;            /* ledger green: only ever used for real figures */
  --money-bg:#e7f2ec;
  --hot:#b4460f;              /* the top revenue band */
  --tagink:#3a4a86; --tagbg:#eef1fa;
  --mark:#111417;
  --shadow:0 1px 2px rgba(21,23,27,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111316; --card:#181a1e; --sunk:#1e2126;
    --ink:#e9eaec; --ink-2:#a2a8b0; --ink-3:#767d86;
    --line:#282c32; --line-2:#22262b;
    --money:#4fbe8b; --money-bg:#14301f;
    --hot:#e2854a;
    --tagink:#9fb0e8; --tagbg:#1d2333;
    --mark:#e9eaec;
    --shadow:0 1px 2px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#111316; --card:#181a1e; --sunk:#1e2126;
  --ink:#e9eaec; --ink-2:#a2a8b0; --ink-3:#767d86;
  --line:#282c32; --line-2:#22262b;
  --money:#4fbe8b; --money-bg:#14301f;
  --hot:#e2854a;
  --tagink:#9fb0e8; --tagbg:#1d2333;
  --mark:#e9eaec;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--paper); color:var(--ink);
  font:400 15px/1.6 "Source Sans 3","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:"Zilla Slab","Noto Sans SC","PingFang SC",Georgia,serif;margin:0;font-weight:700}
.mono,code{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
a{color:inherit}
.shell{max-width:1320px;margin:0 auto;padding:0 20px}

/* ── masthead ─────────────────────────────────────────────── */
.mast{background:var(--card);border-bottom:1px solid var(--line)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:26px;
  padding:18px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:13px}
.mark{width:40px;height:40px;flex:0 0 auto;border-radius:9px;background:var(--mark);color:var(--card);
  display:grid;place-items:center;font:700 21px/1 "Zilla Slab",Georgia,serif}
.brand h1{font-size:22px;letter-spacing:-.01em}
.tagline{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.tape{display:flex;gap:26px;margin:0;flex-wrap:wrap}
.tape div{display:flex;flex-direction:column}
.tape dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.tape dd{margin:1px 0 0;font:500 17px/1.2 "JetBrains Mono",monospace;font-variant-numeric:tabular-nums}

/* ── layout ───────────────────────────────────────────────── */
.layout{display:grid;grid-template-columns:212px minmax(0,1fr) 300px;gap:26px;
  align-items:start;padding-top:20px;padding-bottom:34px}
@media (max-width:1120px){ .layout{grid-template-columns:196px minmax(0,1fr)} .rail-right{display:none} }
@media (max-width:760px){ .layout{grid-template-columns:1fr} .rail-left{order:2} }

/* ── filters ──────────────────────────────────────────────── */
.filterbox{position:sticky;top:14px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;padding:14px;box-shadow:var(--shadow)}
.fb-hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.fb-hd h2{font-size:14px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--ink-3);cursor:pointer}
.linkbtn:hover{color:var(--ink)}
.fgroup{margin-bottom:15px}
.fgroup:last-child{margin-bottom:0}
.fgroup h3{margin:0 0 7px;font:600 10.5px/1 "Source Sans 3",sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-family:inherit}
.fopt{display:flex;align-items:center;gap:7px;width:100%;padding:4px 6px;border:0;border-radius:5px;
  background:none;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;text-align:left;line-height:1.4}
.fopt:hover{background:var(--sunk);color:var(--ink)}
.fopt .box{width:12px;height:12px;flex:0 0 auto;border:1.5px solid var(--ink-3);border-radius:3px}
.fopt .n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-family:"JetBrains Mono",monospace}
.fopt[aria-pressed="true"]{color:var(--ink);font-weight:600}
.fopt[aria-pressed="true"] .box{background:var(--ink);border-color:var(--ink)}
.fopt[aria-pressed="true"] .n{color:var(--ink-2)}

/* ── toolbar ──────────────────────────────────────────────── */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:8px;background:var(--card);
  border:1px solid var(--line);border-radius:7px;padding:0 12px;height:38px}
.search svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);
  outline:none;height:100%}
.sorts{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--card)}
.sorts button{font:inherit;font-size:13px;padding:8px 13px;border:0;background:none;color:var(--ink-2);cursor:pointer}
.sorts button+button{border-left:1px solid var(--line)}
.sorts button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:600}
.resultline{margin:0 0 10px;font-size:12.5px;color:var(--ink-3)}
.resultline b{color:var(--ink);font-family:"JetBrains Mono",monospace}
.chips-active{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.chips-active:empty{display:none}
.chip-x{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:3px 8px;border-radius:99px;
  background:var(--ink);color:var(--paper);border:0;cursor:pointer;font-family:inherit}
.chip-x i{font-style:normal;opacity:.7}

/* ── case rows ────────────────────────────────────────────── */
.list{display:flex;flex-direction:column;gap:10px}
.case{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;
  display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;box-shadow:var(--shadow)}
@media (max-width:560px){ .case{grid-template-columns:1fr} }
@media (max-width:560px){ .sorts button{padding:8px 9px;font-size:12px} }
.rev{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding-top:2px}
.rev .amt{font:700 17px/1.15 "JetBrains Mono",monospace;color:var(--money);letter-spacing:-.02em}
.rev.hot .amt{color:var(--hot)}
.rev .basis{font-size:10px;color:var(--ink-3);letter-spacing:.02em}
.rev.none .amt{font-size:12.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.rev .conf{font-size:9.5px;letter-spacing:.03em;color:var(--money);background:var(--money-bg);
  padding:1px 5px;border-radius:3px;margin-top:2px}
.case h3{margin:0 0 5px;font:600 16px/1.4 "Source Sans 3","Noto Sans SC",sans-serif;font-family:inherit}
.case h3 a{text-decoration:none}
.case h3 a:hover{text-decoration:underline;text-underline-offset:2px}
.case .meta{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--ink-3);margin-bottom:7px}
.case .meta .src{color:var(--ink-2);font-weight:600}
.case .meta .viac{background:var(--tagbg);color:var(--tagink);padding:0 6px;border-radius:3px;font-size:11px}
.case .ex{margin:0 0 9px;font-size:13.5px;color:var(--ink-2);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evi{margin:0 0 9px;padding:5px 9px;border-left:2px solid var(--money);background:var(--money-bg);
  border-radius:0 4px 4px 0;font:400 11.5px/1.5 "JetBrains Mono",monospace;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tags{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--tagbg);color:var(--tagink);
  border:0;cursor:pointer;font-family:inherit;line-height:1.5}
.tag:hover{filter:brightness(.96)}
.tag.eff{background:var(--sunk);color:var(--ink-2)}
/* 页码条。页码按钮做成等宽方块（min-width 34px + tabular-nums），这样从
   第 9 页翻到第 10 页时整条不会横向抖一下。 */
.pager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;padding:20px 0 0}
.pager:empty{display:none}
.pgnums{display:flex;align-items:center;gap:4px}
.pgbtn{font:inherit;font-size:13.5px;min-width:34px;padding:7px 10px;border-radius:7px;
  background:var(--card);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;
  font-variant-numeric:tabular-nums;text-align:center}
.pgbtn:hover:not(:disabled){color:var(--ink);border-color:var(--ink-3)}
.pgbtn:focus-visible{outline:2px solid var(--money);outline-offset:1px}
.pgbtn:disabled{opacity:.4;cursor:default}
.pgbtn[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--card);font-weight:700}
.pgstep{padding:7px 14px}
.pggap{color:var(--ink-3);padding:0 2px;user-select:none}
/* 「第几页，共几页」是给人读的那一份，页码按钮是给人点的那一份，两份都要有 */
.pgof{font-size:12.5px;color:var(--ink-3);margin-left:6px;font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .pgstep{padding:7px 11px}
  .pgof{width:100%;text-align:center;margin:2px 0 0}
}
.empty{padding:50px 20px;text-align:center;color:var(--ink-3);font-size:14px}

/* ── right rail ───────────────────────────────────────────── */
.panel{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px;
  margin-bottom:16px;box-shadow:var(--shadow)}
.panel-hd{font-size:14px;margin:0 0 10px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.panel-hd span{font-size:11px;color:var(--ink-3);font-weight:400;font-family:"Source Sans 3",sans-serif}
.board{list-style:none;margin:0;padding:0;counter-reset:b}
.board li{display:grid;grid-template-columns:16px 1fr auto;gap:8px;padding:7px 0;
  border-bottom:1px solid var(--line-2);font-size:13px;align-items:baseline}
.board li:last-child{border-bottom:0}
.board li:before{counter-increment:b;content:counter(b);font:500 11px/1 "JetBrains Mono",monospace;color:var(--ink-3)}
.board a{text-decoration:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.board a:hover{text-decoration:underline}
.board .amt{font:700 12.5px/1 "JetBrains Mono",monospace;color:var(--money);white-space:nowrap}
/* ── auto-ranked strip ────────────────────────────────────── */
/* Sits above the toolbar and reuses .panel/.board so it reads as part of the
   furniture, not as an ad. The "why" line is the point: every row states the
   signal that put it there. */
.push{margin-bottom:14px;border-left:3px solid var(--hot)}
.push-list li{grid-template-columns:16px minmax(0,1fr) auto;gap:4px 8px}
.push-list .why{grid-column:2;font:400 11px/1.4 "JetBrains Mono",monospace;color:var(--ink-3)}
.push-list .amt{grid-row:1;grid-column:3}
.case .meta .trend{background:var(--hot);color:var(--paper);padding:0 6px;border-radius:3px;
  font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}

.sticky-wrap{position:sticky;top:14px;margin-bottom:16px}
.note{font-size:12.5px;color:var(--ink-2)}
.note p{margin:0 0 8px}
.note p:last-child{margin:0}
.note code{font-size:11.5px;background:var(--sunk);padding:1px 4px;border-radius:3px}

/* ── ad slots ─────────────────────────────────────────────── */
/* Reserve the box before anything loads: a slot that pops in shifts the page. */
.adslot{margin:16px auto;display:flex;align-items:center;justify-content:center}
.ad-leaderboard{max-width:728px;min-height:90px}
.ad-rect{width:300px;min-height:250px;margin:0}
.ad-native{min-height:104px;margin:0}
.adslot-empty{border:1px dashed var(--line);border-radius:8px;background:var(--sunk);
  position:relative;width:100%;flex-direction:column;gap:4px;padding:14px;text-align:center}
.adslot-tag{position:absolute;top:6px;left:8px;font-size:9.5px;letter-spacing:.1em;color:var(--ink-3);
  text-transform:uppercase;font-weight:600}
.adslot-body{display:flex;flex-direction:column;gap:3px;color:var(--ink-3);font-size:11.5px}
.adslot-body b{font-size:13px;color:var(--ink-2)}
.adslot-body code{font-size:11px;font-family:"JetBrains Mono",monospace;color:var(--ink-3)}

/* 广告服务器 SDK 渲染出来的位。SDK 的样式表是后加载的，同权重会赢，所以这里
   一律用 .adslot 复合选择器抬一级，不靠顺序。 */
.adslot.ph-ad:not(.adslot-empty){background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);overflow:hidden}
/* 没广告时挂回虚线空框：SDK 的 .ph-ad 也在这个节点上，得压过它。 */
.adslot.adslot-empty{background:var(--sunk);border:1px dashed var(--line);border-radius:8px;box-shadow:none}
.adslot .ph-ad-native{gap:12px;padding:12px 14px;font-family:inherit;color:var(--ink)}
.adslot .ph-ad-native b{font:600 14.5px/1.3 "Source Sans 3","Noto Sans SC",system-ui;color:var(--ink)}
.adslot .ph-ad-native span{font:400 12.5px/1.4 "Source Sans 3","Noto Sans SC",system-ui;color:var(--ink-2);opacity:1}
.adslot .ph-ad-native em{background:var(--money);color:#fff;font:600 12px/1 "Source Sans 3",system-ui;
  padding:8px 14px;border-radius:6px}
/* 「Ad」角标：政策要求广告可辨认，所以它是浅底描边，不是压在图上的黑块。 */
.adslot .ph-ad-label{background:var(--sunk);color:var(--ink-3);border:1px solid var(--line);
  font:600 9px/1.4 "JetBrains Mono",monospace;top:5px;right:6px}
/* 300×250 这种高位，横排卡片会在中间留一条白 —— 竖排。 */
.ad-rect .ph-ad-native,.ad-inreport .ph-ad-native{flex-direction:column;align-items:flex-start;
  justify-content:center;gap:10px;height:100%}
.ad-rect .ph-ad-native em,.ad-inreport .ph-ad-native em{margin-left:0}

/* ── footer ───────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--card);margin-top:10px}
.foot-in{padding:20px;font-size:12.5px;color:var(--ink-2)}
.foot p{margin:0 0 4px}
.foot .dim{color:var(--ink-3);font-family:"JetBrains Mono",monospace;font-size:11.5px}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }
:focus-visible{outline:2px solid var(--tagink);outline-offset:2px;border-radius:4px}

/* ── 漏斗入口（右栏，取代原来的粘性广告位） ─────────────── */
.funnel{border-color:var(--money)}
.funnel p{margin:0 0 12px;font-size:13px;color:var(--ink-2);line-height:1.6}
.funnel-cta{display:block;text-align:center;background:var(--money);color:#fff;text-decoration:none;
  font-size:14.5px;font-weight:600;padding:11px 16px;border-radius:7px}
.funnel-cta:hover{filter:brightness(1.07)}
.funnel-note{display:block;text-align:center;margin-top:7px;font-size:11.5px;color:var(--ink-3)}

/* ── 诊断页（/quiz 与 /r/<id>）：同一个站，同一套字体与配色 ────────── */
.backlink{font-size:13px;color:var(--ink-2);text-decoration:none}
.backlink:hover{color:var(--ink)}
.quizwrap{max-width:760px;padding-top:22px;padding-bottom:40px}
.q-intro h2{font-size:clamp(21px,4vw,28px);line-height:1.3;margin:0 0 10px}
.q-intro p{color:var(--ink-2);margin:0;font-size:15px}
.tracks{display:grid;gap:11px;padding:20px 0 10px}
.track{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:9px;padding:16px 18px;cursor:pointer;font:inherit;color:inherit;box-shadow:var(--shadow)}
.track:hover{border-color:var(--money)}
.track b{display:block;font-size:16.5px;margin-bottom:3px;font-family:"Zilla Slab",serif}
.track span{font-size:13.5px;color:var(--ink-2)}
.track em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);margin-top:7px}
.qbar{height:3px;background:var(--sunk);border-radius:2px;overflow:hidden;margin-top:6px}
.qbar i{display:block;height:100%;background:var(--money);transition:width .22s}
.qhead{display:flex;justify-content:space-between;align-items:baseline;margin:12px 0 18px;font-size:12.5px;color:var(--ink-3)}
.qhead .back{background:none;border:0;padding:0;font:inherit;color:var(--ink-3);cursor:pointer;text-decoration:underline}
.qhead .back[disabled]{opacity:.35;cursor:default;text-decoration:none}
.q{font-size:20px;line-height:1.5;font-family:"Zilla Slab",serif;font-weight:700;margin:0 0 18px}
.opts{display:grid;gap:8px;padding-bottom:40px}
.opt{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:13px 15px;
  cursor:pointer;font:inherit;color:inherit;font-size:15px;display:flex;gap:11px;align-items:flex-start}
.opt:hover{border-color:var(--money);background:var(--money-bg)}
.opt .k{flex:0 0 auto;width:21px;height:21px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:11px;color:var(--ink-3);font-family:"JetBrains Mono",monospace}
.report{padding:4px 0 40px}
.verdict{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--money);
  border-radius:0 9px 9px 0;padding:18px 20px;box-shadow:var(--shadow)}
.verdict.warn{border-left-color:#b4460f} .verdict.bad{border-left-color:#a32a1c}
.verdict .lab{font-size:11px;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.verdict h2{font-size:24px;margin:5px 0 7px}
.verdict p{margin:0;color:var(--ink-2);font-size:14.5px}
.verdict .reason{margin-top:9px;font-size:13px;color:var(--ink-3)}
.verdict .total{float:right;text-align:right;margin-left:16px}
.verdict .total b{display:block;font:700 32px/1 "JetBrains Mono",monospace}
.verdict .total span{font-size:11px;color:var(--ink-3)}
h3.sec{font-size:17px;margin:30px 0 3px;font-family:"Zilla Slab",serif}
.sec-note{margin:0 0 12px;font-size:13px;color:var(--ink-3)}
.dims{display:grid;gap:9px}
.dim{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 14px}
.dim .r1{display:flex;justify-content:space-between;align-items:baseline}
.dim .nm{font-size:14.5px;font-weight:600}
.dim .sc{font:700 14.5px/1 "JetBrains Mono",monospace}
.dim .track-bar{height:5px;background:var(--sunk);border-radius:3px;overflow:hidden;margin:7px 0 6px}
.dim .track-bar i{display:block;height:100%;background:var(--ink-3)}
.dim.hi .track-bar i{background:var(--money)} .dim.hi .sc{color:var(--money)}
.dim.lo .track-bar i{background:#b4460f} .dim.lo .sc{color:#b4460f}
.dim .why{font-size:12px;color:var(--ink-3);margin:0}
.plays{display:grid;gap:10px}
.play{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:15px 17px;box-shadow:var(--shadow)}
.play .r1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.play .no{font:700 12px/1 "JetBrains Mono",monospace;color:var(--money)}
.play b{font-size:16px;font-family:"Zilla Slab",serif}
.play .pre{font-size:10.5px;background:var(--money-bg);color:var(--money);padding:2px 7px;border-radius:4px}
.play p{margin:7px 0 0;font-size:14.5px;color:var(--ink-2)}
.play .meta{margin-top:8px;font-size:12px;color:var(--ink-3);display:flex;gap:13px;flex-wrap:wrap}
.cases{display:grid;gap:9px}
.evnote{font-size:12.5px;color:var(--ink-3);margin:0 0 11px;padding-left:10px;border-left:2px solid var(--line)}
.cta{margin-top:30px;background:var(--card);border:1px solid var(--money);border-radius:9px;padding:20px;box-shadow:var(--shadow)}
.cta h3{font-size:18px;margin:0 0 6px;font-family:"Zilla Slab",serif}
.cta > p{margin:0 0 14px;color:var(--ink-2);font-size:14.5px}
.field{display:grid;gap:5px;margin-bottom:11px}
.field label{font-size:12.5px;color:var(--ink-2)}
.field input,.field textarea{font:inherit;font-size:14.5px;padding:9px 11px;border:1px solid var(--line);
  border-radius:6px;background:var(--paper);color:var(--ink)}
.field textarea{min-height:70px;resize:vertical}
.consent{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--ink-2);margin:5px 0 13px}
.consent input{margin-top:3px}
.btn{font:inherit;font-size:15px;font-weight:600;padding:11px 22px;border-radius:7px;border:0;cursor:pointer;
  background:var(--money);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.msg{margin-top:11px;font-size:13px;padding:9px 11px;border-radius:6px;background:var(--sunk);color:var(--ink-2)}
.msg.ok{background:var(--money-bg);color:var(--money)}
.share{margin-top:20px;font-size:12.5px;color:var(--ink-3)}
.share code{background:var(--sunk);padding:2px 6px;border-radius:4px;word-break:break-all}

/* Report case cards. Deliberately NOT .case: the index already owns that class
   with an 84px revenue column, which squeezed these titles into a narrow strip. */
.qcase{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.qcase a{color:inherit;font-size:14.5px;font-weight:600;text-decoration:none;line-height:1.45;display:block}
.qcase a:hover{text-decoration:underline}
.qcase .m{margin-top:7px;font-size:12px;color:var(--ink-3);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.qcase .rev{font:700 12.5px/1 "JetBrains Mono",monospace;color:var(--money)}
.qcase .tg{font-size:11px;background:var(--sunk);padding:2px 7px;border-radius:99px;color:var(--ink-3)}

/* Mid-report ad. Centred and boxed so it reads as a break in the report rather
   than as part of the advice. */
.ad-inreport{max-width:336px;min-height:280px;margin:26px auto}

/* ── 行业地图 ─────────────────────────────────────────────
   条长 = 案例密度，条内分段 = 收入证据。两档绿 + 一档中性灰，都跑过对比度校验：
   浅色底 #faf9f6 上 2.52 / 2.80 / 4.9:1，深色底 #111316 上 3.39 / 4.37 / 8.6:1。
   颜色定义在这里而不是 JS 里，深浅两套就只有一处开关，map.js 只负责读。 */
:root{
  --map-none:#97a0a8;      /* 没有任何金额证据 */
  --map-ev:#4aa77d;        /* 正文里有 A/B 级金额句，但没折成月额 */
  --map-rev:#0d6b45;       /* 有已披露的月收入 */
  --map-plate:#eeede7;     /* 行政区底板 */
  --map-grid:#e6e5df;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --map-none:#616a74; --map-ev:#2f8a63; --map-rev:#6fd0a5;
    --map-plate:#1c1f24; --map-grid:#23272d;
  }
}
:root[data-theme="dark"]{
  --map-none:#616a74; --map-ev:#2f8a63; --map-rev:#6fd0a5;
  --map-plate:#1c1f24; --map-grid:#23272d;
}

.maphead{background:var(--card);border-bottom:1px solid var(--line)}
.maphead-in{padding:20px}
.maphead h1{font-size:22px;letter-spacing:-.01em}
.maphead .sub{margin:5px 0 0;font-size:13.5px;color:var(--ink-2);max-width:70ch}
.crumb{font-size:12px;color:var(--ink-3);margin:0 0 8px}
.crumb a{color:var(--ink-3)}

/* 先把话说在前面：地图站在什么数据上，缺什么。放在图上面而不是脚注里，
   因为读图的人会先看图，看完就走。 */
.caveat{background:var(--sunk);border:1px solid var(--line);border-left:3px solid var(--hot);
  border-radius:6px;padding:12px 14px;margin:18px 0;font-size:13px;color:var(--ink-2);max-width:88ch}
.caveat strong{color:var(--ink)}
.caveat .mono{font-size:12.5px}

.mapwrap{background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.mapbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line-2)}
.mapbar .grow{flex:1}
.mapbar .hint{font-size:12px;color:var(--ink-3)}
.vbtn{font:inherit;font-size:12.5px;padding:6px 11px;border-radius:6px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);cursor:pointer}
.vbtn:hover{color:var(--ink);background:var(--sunk)}
.vbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card);font-weight:600}

/* 行政区网格。卡片宽度给到 300px 起 —— 再窄，细分行业的名字就要换行，一换行
   条和名字对不齐，扫一列条长的那个动作就断了。 */
.districts{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1px;background:var(--line-2);padding:1px;border-top:1px solid var(--line-2)}
.district{background:var(--card);padding:13px 15px 15px}
.district.hollow{background:var(--map-plate)}
.district header{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.district h3{margin:0;font-size:13px;font-weight:700;letter-spacing:-.005em;flex:1;min-width:0}
.district .dn{font:500 11.5px/1 "JetBrains Mono",monospace;color:var(--ink-3);white-space:nowrap}
.district .dn b{color:var(--money);font-weight:700}
.district .dn.zero{font-family:inherit;font-size:11px;font-style:italic}
.niches{display:flex;flex-direction:column;gap:3px}

/* 一格 = 一个细分行业。三列固定：名字 / 条 / 数字。条的轨道宽度在所有卡片里
   一样，所以隔着一整个网格也能比长短 —— 这是横条相对柱子城市真正赢的地方。 */
.niche{display:grid;grid-template-columns:minmax(0,1fr) 40% 2.4em;align-items:center;gap:9px;
  width:100%;padding:3px 5px;margin:0 -5px;border:0;border-radius:4px;background:none;
  font:inherit;text-align:left;color:var(--ink-2);cursor:pointer}
.niche:hover:not(:disabled){background:var(--sunk);color:var(--ink)}
.niche:focus-visible{outline:2px solid var(--money);outline-offset:1px}
.niche[aria-pressed="true"]{background:var(--tagbg);color:var(--ink);font-weight:600}
.niche .nm{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.niche .n{font:700 12px/1 "JetBrains Mono",monospace;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.niche .n.zero{color:var(--ink-3);font-weight:400}

/* 轨道画满整格，条按数量占其中一段 —— 空轨道就是「这一格还有多少空间」。 */
.niche .lane{height:11px;background:var(--map-grid);border-radius:3px;overflow:hidden;display:block}
.niche .bar{display:flex;height:100%;border-radius:3px;overflow:hidden;min-width:2px}
.niche .bar i{display:block;height:100%}

/* 一条案例都没有的格子不删也不藏：留一道空轨道，它说的是「这个细分我们查了，
   没查到」，跟「这个细分不存在」是两件事。 */
.niche.empty{cursor:default;color:var(--ink-3)}
.niche.empty .lane{background:none;border-top:1px dashed var(--line)}
/* 「只看报了数字的」模式下，其余的格子压暗但不抽走 —— 行数一变，整页会跳。 */
.niche.muted{opacity:.26}
.niche.muted:hover:not(:disabled){opacity:.6}

.maplegend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;
  padding:11px 14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-2)}
.maplegend .sw{display:inline-flex;align-items:center;gap:7px}
.maplegend .sw i{width:13px;height:13px;border-radius:3px;display:inline-block}
.maplegend .axis{color:var(--ink-3);margin-left:auto;font-size:12px}

/* 表格孪生体。图里读不出准确数字，这里能读，而且能被键盘和读屏走到。 */
.maptable{width:100%;border-collapse:collapse;font-size:13px}
.maptable th{text-align:left;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
.maptable th.num,.maptable td.num{text-align:right;font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums}
.maptable td{padding:7px 10px;border-bottom:1px solid var(--line-2)}
.maptable tbody tr{cursor:pointer}
.maptable tbody tr:hover{background:var(--sunk)}
.maptable tbody tr[aria-selected="true"]{background:var(--tagbg)}
.maptable .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:baseline}
.maptable .zero{color:var(--ink-3)}
.maptable .money{color:var(--money);font-weight:700}
.maptable .grp{font-size:11px;color:var(--ink-3)}

.mapcols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start;
  padding:22px 0 30px}
@media (max-width:980px){ .mapcols{grid-template-columns:1fr} }

.pickhd{font-size:13px;color:var(--ink-2);margin:0 0 10px}
.pickhd b{color:var(--ink)}
.picklist{display:flex;flex-direction:column;gap:9px;max-height:640px;overflow:auto}
.emptypick{font-size:13px;color:var(--ink-3);background:var(--sunk);border-radius:7px;padding:14px}

/* 首页去地图的入口。压在 tagline 下面，别跟诊断入口抢眼球。 */
.navlink{margin:6px 0 0;font-size:13px}
.navlink a{color:var(--money);font-weight:600;text-decoration:none}
.navlink a:hover{text-decoration:underline}
.navlink span{color:var(--ink-3);margin-left:6px}

/* ── 同意横幅 ─────────────────────────────────────────────
   两个按钮**必须**长得一样、一样近、一样一步到位。把「拒绝」做小、做灰、
   做成文字链、或者藏进「更多选项」，在欧盟就是无效同意（GDPR 第 4(11) 条
   要求同意是自由作出的），法国、比利时、爱尔兰的监管机关都为此开过罚单。
   要改这块样式，先想清楚改完两个按钮是不是还一样重。 */
/* 横幅是固定定位的，会盖住页面最后一屏内容。显示时给 body 垫一段，
   收起时撤掉 —— 别让访客为了看最后一行而先去点掉横幅。 */
body.consent-open{padding-bottom:132px}
@media (max-width:560px){ body.consent-open{padding-bottom:196px} }
.consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);
  border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(21,23,27,.08)}
.consent[hidden]{display:none}
.consent-in{max-width:1320px;margin:0 auto;padding:14px 20px;display:flex;gap:22px;
  align-items:center;flex-wrap:wrap}
.consent-say{flex:1;min-width:260px}
.consent-say b{display:block;font-size:13.5px;margin-bottom:3px}
.consent-say p{margin:0;font-size:12.5px;color:var(--ink-2);line-height:1.55;max-width:70ch}
.consent-say a{color:var(--money);font-weight:600}
.consent-do{display:flex;gap:10px;flex:0 0 auto}
.consent-btn{font:600 13.5px/1 inherit;padding:10px 22px;border-radius:7px;cursor:pointer;
  border:1px solid var(--ink);background:var(--card);color:var(--ink);min-width:104px}
.consent-btn:hover{background:var(--sunk)}
.consent-btn[data-a="yes"]{background:var(--ink);color:var(--card)}
.consent-btn[data-a="yes"]:hover{opacity:.88}
@media (max-width:560px){
  .consent-do{width:100%}
  .consent-btn{flex:1}
}

/* ── 搜索栏 ────────────────────────────────────────────────
   全站主入口，就在 logo 下面。刻意做得轻：它是一条栏，不是一屏落地页。
   写进去的话在下面展开成答案（.ask-thread）。 */
.askbar-wrap{padding:0 0 16px}
.askbar{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;
  background:var(--card);padding:0 6px 0 12px;box-shadow:var(--shadow)}
.askbar:focus-within{border-color:var(--money);box-shadow:0 0 0 3px var(--money-bg)}
.askbar svg{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2;
  stroke-linecap:round}
.askbar input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  padding:12px 0;font:400 14.5px/1.4 "Source Sans 3","Noto Sans SC",system-ui}
.askbar input:focus{outline:0}
.askbar input::-webkit-search-cancel-button{cursor:pointer}
.askbar button{flex:0 0 auto;border:0;border-radius:7px;cursor:pointer;padding:8px 15px;
  background:var(--money);color:#fff;font:600 13px/1 "Source Sans 3",system-ui}
.askbar button:disabled{opacity:.55;cursor:default}
.askbar-note{margin:6px 2px 0;font-size:11px;color:var(--ink-3);display:flex;gap:6px;flex-wrap:wrap}
.askbar-note a{color:var(--ink-3)}
#askHint{color:var(--hot)}
#askHint:not(:empty)+.askbar-dim{opacity:.6}

/* ── 一轮问答 ───────────────────────────────────────────── */
/* 答案是要读的，1320px 宽一行读不下去 —— 卡到一个正常的阅读宽度。 */
.ask-thread{margin:0;display:flex;flex-direction:column;gap:18px;max-width:900px}
.ask-thread:not(:empty){margin:16px 0 4px}
.ask-turn{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper)}
.ask-said{padding:11px 14px;background:var(--sunk);border-bottom:1px solid var(--line)}
.ask-said-k{font:600 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:4px}
.ask-said p{margin:0;font-size:14.5px;color:var(--ink);white-space:pre-wrap}
.ask-ans{padding:14px}

.ask-readhd,.ask-none{margin:0 0 8px;font-size:12.5px;color:var(--ink-2)}
.ask-sigs{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 10px}
.ask-sig{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ask-sig-k{font:600 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3)}
.ask-chip{border-radius:5px;padding:3px 8px;font-size:12px;background:var(--tagbg);color:var(--tagink)}
.ask-chip-money{background:var(--money-bg);color:var(--money)}
.ask-chip-term{background:var(--sunk);color:var(--ink-2);font-family:"JetBrains Mono",monospace;font-size:11px}

.ask-scope{margin:0 0 14px;padding:9px 11px;border-left:3px solid var(--money);background:var(--sunk);
  font-size:12.5px;color:var(--ink-2);border-radius:0 6px 6px 0}
.ask-thin{color:var(--hot)}
.ask-count{font:600 13px/1.3 "Source Sans 3",system-ui;color:var(--ink-2);margin:0 0 8px}
.ask-empty{margin:0 0 14px;font-size:13px;color:var(--ink-2);line-height:1.55}

.ask-case{border-top:1px solid var(--line-2);padding:11px 0}
.ask-case:first-of-type{border-top:0}
.ask-case-hd{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.ask-case-hd a{font:600 14.5px/1.35 "Source Sans 3","Noto Sans SC",system-ui;color:var(--ink);
  text-decoration:none}
.ask-case-hd a:hover{text-decoration:underline}
.ask-rev{flex:0 0 auto;font:700 12px/1 "JetBrains Mono",monospace;color:var(--money);
  background:var(--money-bg);border-radius:5px;padding:4px 7px}
.ask-case-ex{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ask-why{margin:6px 0 0;font-size:11.5px;color:var(--ink-3)}
.ask-why-k{font:600 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-right:4px}
.ask-case-meta{margin:4px 0 0;font:400 11px/1 "JetBrains Mono",monospace;color:var(--ink-3)}

.ask-next{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 0;
  padding-top:13px;border-top:1px solid var(--line)}
.ask-next-cta{background:var(--money);color:#fff;text-decoration:none;border-radius:7px;
  padding:9px 14px;font:600 13px/1 "Source Sans 3",system-ui}
.ask-next-alt{color:var(--tagink);text-decoration:none;font-size:12.5px}
.ask-next-alt:hover{text-decoration:underline}

.ask-follow{margin:13px 0 0;padding:12px;border:1px dashed var(--line);border-radius:8px;
  background:var(--sunk)}
.ask-follow-hd{margin:0 0 8px;font-size:12.5px;color:var(--ink-2)}
.ask-follow-line{display:flex;gap:7px}
.ask-input-mini{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:6px;
  background:var(--card);color:var(--ink);font:400 13px/1 "Source Sans 3",system-ui}
.ask-btn-mini{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;
  padding:8px 13px;cursor:pointer;font:600 12.5px/1 "Source Sans 3",system-ui}
.ask-consent{display:flex;gap:7px;align-items:flex-start;margin:8px 0 0;font-size:11.5px;
  color:var(--ink-3);line-height:1.45;cursor:pointer}
.ask-consent input{margin-top:2px;flex:0 0 auto}
.ask-say{margin:7px 0 0;font-size:12px;color:var(--ink-2)}

@media (max-width:640px){
  .ask-boxwrap{flex-direction:column;align-items:stretch}
  .ask-btn{width:100%}
  .ask-hd{font-size:21px}
}