/* AI Citation Tools — shared stylesheet
   One visual identity for the whole site (V7 "stripe").
   There is deliberately no alternate theme: every page uses these tokens,
   so no page can drift out of the system.

   V7 vs V6 — same structure, new skin. Source of the palette is the Stripe
   design system registry (registry/stripe/globals.json), converted from oklch
   to sRGB. What carries the identity:
   · --ink is deep navy #0A2642, NOT black. This single choice is what makes
     the page read "product" instead of "document", and it costs nothing.
   · --accent is Stripe indigo #645CFF. It is the only saturated colour on the
     page, so it always means "action".
   · radii went DOWN (8/12/14/18 → 6/8/10/12). Stripe is restrained; large
     radii read consumer-friendly, small radii read engineering.
   · shadows carry a blue cast (rgba(50,50,93,…)), not neutral grey. That is
     the Stripe tell — grey shadows look like a drop-shadow filter, blue ones
     look like light.
   · --accent-text is a separate, darker indigo for indigo text ON WHITE.
     #645CFF is 4.7:1 against white — legal for a button, too tight for 11px
     mono labels. Do not use --accent for small text on light surfaces.

   V6 vs V5 — same identity, more finish. What changed and why:
   · --sh-1/2/3 depth tokens: every elevated surface was a 1px border on flat
     white, which is why the site read as a wireframe. Depth now has a scale.
   · one shared :focus-visible ring. V5 wrote `outline:none` on every input and
     put nothing back — a real keyboard-accessibility hole, not a style choice.
   · the hero gets a tinted field and content sections alternate on a hairline
     band, so the page has rhythm instead of four identical white slabs.
     ⛔ section padding became symmetric (48/48) so that NO gap between any two
     sections changed: normal→normal 96px, tight→tight 64px, tight→normal 64px.
     Four rules reproduce the old rhythm exactly. Do not "simplify" them.
   · type: text-wrap balance/pretty, tabular numerals, accent ::selection.
   · header keeps its shadow only once you scroll (class added by site.js).
   · mobile gets its nav back — V5 set `header.site nav{display:none}` under
     820px, which left phones with no navigation at all. */

:root{
  /* ink + surfaces —— Stripe: deep navy body text on white */
  /* ⛔ --muted / --faint 的深浅是被对比度算出来的，不是审美挑的。
     V6 的 faint 是 #8E9AA6 = 白底 2.87:1，而它承载 .micro / .fixlbl / .plan .tier /
     .quote cite / .count / .note3 这些 11–12.5px 的真实文字 —— 读不清。
     现在 muted 5.6:1 · faint 4.6:1，两级都过 WCAG AA，层次靠亮度差保住。
     改色前先跑 /tmp/ui-gallery/contrast.py，别凭眼睛调。 */
  --ink:#0A2642; --ink-2:#35475A; --muted:#5A6673; --faint:#687482;
  /* ⛔⛔ V9：底色关系反转 —— 对标 TrustMRR 的核心手法。
     页面底是浅灰 #F5F6F8，卡片是纯白，于是卡片「浮」起来。
     V8 是白底 + 灰卡（凹下去），同一套元素，观感差一个档次。
     ⛔⛔ V9 后半段：**隔段交替被删掉了**。这是 V8 留下的机制（白底 + 浅蓝带），
        底色一反转就自相矛盾 —— 白 band 上的白卡 = 卡没了，只剩一圈边框，
        看着像表格不像浮起的卡片（实测首页 .stats / .plans 两处都是这个症状）。
        TrustMRR 整页只有一层浅灰，段落节奏靠 88px 留白 + 标题短线承担，不靠换底色。
        ⇒ 全站统一 --bg。--band 保留为「万一要回来」的钩子，但没有规则再引用它。 */
  --line:#E4E8EC; --line-2:#CCD2D8; --bg:#F5F6F8; --bg-2:#FAFBFC; --paper:#EFF1F4;
  --band:#FFFFFF;                     /* unused in V9 — kept as an escape hatch, see note above */
  /* accent —— Stripe indigo */
  --accent:#645CFF; --accent-2:#EEF1FF; --accent-3:#D6DDFF; --accent-ink:#4434C3;
  --accent-hi:#7B74FF;                /* gradient top for accent buttons */
  --accent-text:#5646E5;              /* indigo that is safe as TEXT on white (6.2:1) */
  /* status —— semantic only, never decorative */
  --ok:#1B6B3F; --warn:#805600; --bad:#C81E3C;
  --ok-bg:#E3F8E9; --warn-bg:#FFF1D6; --bad-bg:#FFEAE9; --info-bg:#EEF1FF;
  /* code —— Stripe's dark navy, not neutral black */
  --code-bg:#0A2540; --code-fg:#E3E8EE;
  /* radii · elevation · easing */
  --r-1:6px; --r-2:8px; --r-3:10px; --r-4:12px;
  /* ⛔ 阴影带蓝调（50,50,93）不是中性灰 —— 灰阴影看起来像滤镜，蓝阴影看起来像光。 */
  --sh-1:0 1px 2px rgba(10,38,66,.05), 0 1px 1px rgba(10,38,66,.03);
  --sh-2:0 2px 5px rgba(10,38,66,.05), 0 12px 28px -12px rgba(50,50,93,.18);
  --sh-3:0 4px 12px rgba(10,38,66,.06), 0 30px 60px -26px rgba(50,50,93,.28);
  --sh-accent:0 1px 2px rgba(68,52,195,.30), 0 10px 24px -10px rgba(100,92,255,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* type */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --serif:ui-serif,Georgia,"Times New Roman","Songti SC","Noto Serif SC",serif;
  --max:1060px;

  /* ── 2026-10-18：从 site-v2.css 补齐的变量 ────────────────────────────
     ⛔ 这 36 个变量原本只在首页那套样式表里定义。checker-card / btn-primary
        搬过来之后，因为变量不存在，background 变成透明、border 失效 ——
        提交页的输入框和按钮直接看不见了。补变量才算真的搬完。

     ⭐ 三个 primary 用站内色 #645CFF，不用 v2 的 #4F46E5：
        否则提交页的按钮是靛蓝，全站其他按钮是紫色，同一页出现两种主色。 */
  --primary-600: #645CFF;
  --primary-700: #4F46E5;
  --primary-50: #EEEDFE;
  --green-500: #10B981;
  --green-50: #ECFDF5;
  --orange-500: #F59E0B;
  --orange-50: #FEF3C7;
  --red-500: #EF4444;
  --red-50: #FEE2E2;
  --blue-500: #3B82F6;
  --blue-50: #DBEAFE;
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-600: #4B5563;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50: #F9FAFB;
  --bg-page: #FFFFFF;
  --bg-light: #F8F9FC;
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --border-color: var(--gray-200);
  --border-light: var(--gray-100);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --container-width: 1200px;
  --container-narrow: 800px;
  --section-padding: 80px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:78px}
body{margin:0;background-color:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--accent-3);color:var(--accent-ink)}
/* 一个共用的键盘焦点环。⛔ 不要再用 outline:none 而不补回替代物。 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(245,246,248,.86);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line);transition:box-shadow .2s var(--ease),background .2s var(--ease)}
/* .is-scrolled 由 site.js 在滚动后加上 —— 停在页顶时挂阴影看起来像 bug。 */
header.site.is-scrolled{background:rgba(245,246,248,.94);box-shadow:0 1px 0 rgba(10,38,66,.02),0 10px 26px -18px rgba(50,50,93,.30)}
header.site .wrap{display:flex;align-items:center;gap:32px;height:62px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:16px;letter-spacing:-.022em;flex:none}
.glyph{width:24px;height:24px;border-radius:7px;background:linear-gradient(150deg,#123A5C,#061A2E);position:relative;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px -2px rgba(10,38,66,.45)}
.glyph::before{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;background:#fff;border-radius:1.5px}
.glyph::after{content:"";position:absolute;right:5px;bottom:5px;width:6px;height:6px;background:var(--accent-hi);border-radius:1.5px;box-shadow:0 0 7px rgba(123,116,255,.9)}
header.site nav{display:flex;gap:26px;font-size:14px;color:var(--ink-2)}
header.site nav a{position:relative;flex:none;padding:3px 0;transition:color .15s var(--ease)}
header.site nav a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--accent-text)}
header.site nav a:hover::after,header.site nav a[aria-current]::after{transform:scaleX(1)}
header.site .spacer{flex:1}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:9px;background:var(--bg-2);padding:2px;flex:none}
.lang .langbtn{border:0;background:none;padding:5px 11px;border-radius:6px;cursor:pointer;color:var(--muted);font-family:var(--sans);font-size:12.5px;text-decoration:none;display:inline-block;line-height:1.5;transition:background .15s var(--ease),color .15s var(--ease)}
.lang .langbtn:hover{color:var(--ink)}
.lang .langbtn.on{background:var(--accent);color:#fff}
.lang .langbtn.on:hover{color:#fff}

/* ---------- buttons ---------- */
/* Stripe 的主 CTA 就是那个紫蓝。全站只有它是饱和色，所以它永远等于「动作」。 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:13px 22px;font-size:15px;font-weight:500;font-family:var(--sans);cursor:pointer;letter-spacing:-.005em;box-shadow:var(--sh-accent);transition:background .14s var(--ease),box-shadow .18s var(--ease),transform .14s var(--ease),border-color .14s var(--ease)}
.btn:hover{background:var(--accent-text);box-shadow:0 2px 4px rgba(68,52,195,.32),0 14px 30px -10px rgba(100,92,255,.62);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:var(--sh-1)}
.btn.sm{padding:9px 16px;font-size:13.5px;border-radius:7px}
.btn.lg{padding:15px 26px;font-size:16px;border-radius:9px}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--sh-1)}
.btn.ghost:hover{background:#fff;border-color:var(--ink-2);box-shadow:var(--sh-2)}
/* accent 变体 = 同一紫蓝但带一点纵向渐变，用于「这一屏只有一个动作」的位置。 */
.btn.accent{background:linear-gradient(180deg,var(--accent-hi),var(--accent));box-shadow:var(--sh-accent)}
.btn.accent:hover{background:linear-gradient(180deg,var(--accent),var(--accent-text));box-shadow:0 2px 4px rgba(68,52,195,.32),0 16px 32px -12px rgba(100,92,255,.68)}
.btn.block{width:100%}
/* ⛔ 置灰不要用 opacity —— V7 把主按钮从黑换成紫蓝之后，紫蓝 ×0.45 = 淡紫底配白字，
   实测按钮上写什么都读不出来（黑色 ×0.45 还看得出，紫色不行）。改成明确的
   灰底 + 灰字：一眼就是「不可用」，但文字仍然读得清（--muted on --paper ≈ 4.3:1）。
   ⛔⛔ :disabled 必须排在上面所有变体之后 —— .btn.accent 的 linear-gradient 是
   background-image，写在后面会把这里的 background 盖回去（选择器权重相同，靠顺序）。 */
.btn:disabled{background:var(--paper);color:var(--muted);box-shadow:none;opacity:1;cursor:not-allowed}
.btn.ghost:disabled{background:#fff;color:var(--muted);border-color:var(--line);box-shadow:none}
/* 置灰的按钮不许参与 hover 变色/位移 —— 否则「灰按钮一悬停就抬起来」看起来像还能点。
   四个变体各写一条：:disabled:hover 的选择器权重高于不带 :disabled 的那条，顺序无所谓。 */
.btn:disabled:hover{background:var(--paper);box-shadow:none;transform:none}
.btn.ghost:disabled:hover{background:#fff;border-color:var(--line);box-shadow:none;transform:none}
.btn.accent:disabled:hover{background:var(--paper);box-shadow:none;transform:none}

/* ---------- 正文里的文字链接 ---------- */
/* body 的 a 是 color:inherit（为了 .btn 和导航），正文里的链接需要单独一个类。 */
.link{color:var(--accent-text);font-weight:500}
.link:hover{color:var(--accent-ink);text-decoration:underline}

/* ---------- hero ---------- */
/* 顶部那片光晕挂在 main 自己的背景上，并用 background-size 把定位区域
   限制在顶部 680px。⛔ 不要改成挂 body 的百分比定位 —— body 很高，-6% 会跑到屏幕外。
   V8：hero 改居中后光晕也必须居中（原来是 at 8% 左偏），否则标题在中间、光在左边，不平衡。 */
main{background-image:radial-gradient(1040px 520px at 50% -10%,rgba(100,92,255,.13),transparent 64%);background-repeat:no-repeat;background-size:100% 700px}
/* ⛔⛔ 这里只能写 padding-top，不能写 padding 简写。
   .hero 和 .wrap 同为 0-1-0 权重，而 .hero 在后面 —— 写简写会把 .wrap 的
   左右 28px 内边距整个覆盖成 0（V5 的老 bug：hero 内容宽 414 而正文段 358，
   桌面端 hero 比下方每个 section 外突 28px，移动端文字直接贴屏边）。 */
.hero{padding-top:88px;text-align:center}
/* ⛔⛔ 只让 hero 的「标题区」居中，其余一切拉回左对齐。
   ⛔ 踩过：只写 .hero{text-align:center} 就完事 —— 结果 /tools/readability-check 的
   .shell 表单继承了居中，label、placeholder、textarea 里的代码全跑到中间，
   整个工具没法用；定价页的 .caveat 也居中了但左边还挂着竖线，很怪。
   ⇒ 用 :not() 反向排除直接子元素，再用一长串兜底防止它们被包在别的容器里。
   ⛔ 以后往 hero 里加新组件，要么加进 :not() 白名单，要么加进下面这串兜底。 */
.hero > *:not(.eyebrow):not(h1):not(.lede):not(.cta):not(.micro):not(.err){text-align:left}
.hero .report,.hero .shell,.hero .caveat,.hero .prose,.hero .split,.hero .stats,.hero .tools,.hero .plans,.hero .grid,.hero .checklist,.hero .limits,.hero .bar,.hero .chips,.hero .out,.hero .methodline,.hero .empty,.hero .finding{text-align:left}
/* ⛔ 带 max-width 的块级元素不会因为 text-align:center 而居中，必须给左右 auto。 */
.hero h1,.hero .lede{margin-left:auto;margin-right:auto}
.hero .cta{justify-content:center}
.hero .scan{margin-left:auto;margin-right:auto;text-align:left}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--accent-ink);background:var(--accent-2);border:1px solid var(--accent-3);border-radius:999px;padding:6px 13px 6px 11px;box-shadow:0 1px 2px rgba(68,52,195,.08)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-hi);flex:none;animation:cg-pulse 2.6s var(--ease) infinite}
@keyframes cg-pulse{0%{box-shadow:0 0 0 0 rgba(100,92,255,.45)}70%{box-shadow:0 0 0 7px rgba(100,92,255,0)}100%{box-shadow:0 0 0 0 rgba(100,92,255,0)}}
/* ⛔ 字距 -0.025em 是量出来的，不是猜的：DataFast -1.5px@60px、TrustMRR -1.2px@48px、
   Peec -1.28px@64px —— 三家都落在 -0.02 ~ -0.025em。V7 用的 -0.045em 在 62px 上挤掉
   2.8px，字是压在一起的（挤 ≠ 精致）。字重 700 同理：竞品 700–800，600 撑不住大字号。 */
h1{font-size:clamp(36px,5.6vw,62px);line-height:1.02;letter-spacing:-.025em;font-weight:700;margin:26px 0 0;max-width:16em;text-wrap:balance}
/* ⛔⛔ V8 去掉了记号笔色块。四家对标（Stripe / DataFast / TrustMRR / Peec）**没有一家用
   背景色块** —— Peec 用的是「第一行黑、第二行灰」，靠**明度**做层级，不靠颜色。
   色块高亮的问题是：它把标题变成一块补丁，而且 em 换行时背景盒子会跟着走，很脆。
   现在 em = 灰一档，主句仍是最深的 --ink，层级反而更清楚。 */
h1 em{font-style:normal;color:var(--faint)}
.lede{font-size:19.5px;color:var(--ink-2);max-width:33em;margin:24px 0 0;line-height:1.58;text-wrap:pretty}
.scan{margin:34px 0 0;display:flex;gap:10px;max-width:600px}
.cta{margin:34px 0 0;display:flex;gap:12px;flex-wrap:wrap;max-width:640px}
.scan input{flex:1;border:1px solid var(--line-2);border-radius:8px;padding:14px 16px;font-size:15.5px;font-family:var(--mono);color:var(--ink);background:#fff;box-shadow:var(--sh-1);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.scan input::placeholder{color:var(--faint)}
.scan input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,92,255,.16)}
.micro{font-size:12.5px;color:var(--faint);margin:12px 0 0;font-family:var(--mono)}
.err{font-size:13px;color:var(--bad);margin:12px 0 0;font-family:var(--mono)}

/* ---------- proof band (信任信号) ---------- */
/* ⛔ 这是「信任信号」，但用的是**真数据** —— 48 源 / 30 次运行 / 1 模型 / 0 付费位，
   全是我们自己实验里的事实，不是编的客户 logo 或「Loved by N users」。
   ⛔ 为什么不做假 logo 墙：假 logo 大小不一、灰度处理粗糙，一眼就假；而且这个站
   卖的就是「口径公开」，被抓到一次全站的可信度就没了 —— 那是最贵的一种省钱。
   卡片语言照抄 TrustMRR：小标签全大写 + 等宽大数字 + 一行说明，gap 只有 8px。 */
.proof{margin:40px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:780px}
.proof .p{background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px 16px 17px;text-align:left}
.proof .k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);line-height:1.4}
.proof .v{font-family:var(--mono);font-size:27px;font-weight:600;letter-spacing:-.03em;line-height:1;margin-top:9px;color:var(--ink);font-variant-numeric:tabular-nums}
.proof .d{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45}

/* ---------- report artifact ---------- */
/* V8：从「文档卡片」改成「应用窗口」—— 大圆角 + 更深的投影 + macOS 三圆点标题栏。
   这是 DataFast 最值得抄的一手：产品截图带窗口 chrome，观感立刻从 HTML 表格变成软件。 */
.report{margin:72px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;position:relative;box-shadow:0 2px 6px rgba(10,38,66,.05),0 30px 70px -28px rgba(50,50,93,.32)}
.report::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(100,92,255,.55),transparent)}
/* ⛔ 三个窗口点用 background-image 画，不改 HTML —— .report-h 的文本节点被
   data-en/data-zh 双语机制接管，动 DOM 会牵连 site.js 的重渲染。
   层叠顺序：第一个 radial-gradient 在最上层，linear-gradient 垫底。
   ⛔⛔ padding-left 必须比「最后一个点的右边缘」大出至少 14px —— 第一版写 62px，
   而第三个点在 56px、半径 5px 即右边缘 61px，只差 1px，截图上看着就是点在压字。 */
.report-h{display:flex;align-items:center;gap:12px;padding:13px 20px 13px 76px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--muted);flex-wrap:wrap;background-image:radial-gradient(circle at 20px 50%,#FF5F57 0 4.5px,transparent 5.1px),radial-gradient(circle at 37px 50%,#FEBC2E 0 4.5px,transparent 5.1px),radial-gradient(circle at 54px 50%,#28C840 0 4.5px,transparent 5.1px),linear-gradient(180deg,#FCFDFE,var(--paper));background-repeat:no-repeat;background-size:100% 100%}
/* 三个窗口点已经说明「这是应用界面」，原来那个脉冲绿点就多余了。 */
.report-h .dot{display:none}
.report-h .sep{color:var(--line-2)}
.report-h .score{margin-left:auto;color:var(--bad);background:var(--bad-bg);border-radius:6px;padding:4px 10px;font-weight:500;letter-spacing:.02em}
.finding{display:grid;grid-template-columns:1fr 1.35fr;border-top:1px solid var(--line)}
.finding:first-of-type{border-top:0}
/* ⛔ min-width:0 不是装饰。grid 的 1fr 隐含 minmax(auto,1fr)，最小值取内容
   的 min-content —— 而 .right 里的 <pre> 是 white-space:pre，最长那行会把
   整列顶到 ~496px（容器只有 356px），列溢出后被 .report 的 overflow:hidden 裁掉，
   手机上代码块右边直接缺一截。V5 就有这个洞，桌面端只是碰巧没撑破。 */
.finding .left{padding:26px 26px 28px 22px;border-right:1px solid var(--line);min-width:0}
.finding .right{padding:26px 22px 28px 26px;background:var(--bg-2);transition:background .18s var(--ease);min-width:0}
.finding:hover .right{background:#F1F5FB}
.fhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fhead .n{font-family:var(--mono);font-size:11px;color:var(--accent-text);letter-spacing:.08em;font-weight:500}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:3px 7px;border-radius:5px;font-weight:600}
.t-bad{background:var(--bad-bg);color:var(--bad)}
.t-warn{background:var(--warn-bg);color:var(--warn)}
.t-ok{background:var(--ok-bg);color:var(--ok)}
.t-info{background:var(--info-bg);color:var(--accent-ink)}
.finding h3{font-size:17px;margin:13px 0 0;font-weight:600;letter-spacing:-.018em;text-wrap:balance}
.why{margin:12px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.64;text-wrap:pretty}
.why b{font-weight:600;color:var(--ink)}
.fixlbl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase}
.fix{margin-top:12px;position:relative}
.fix pre{margin:0;background:var(--code-bg);color:var(--code-fg);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:16px;font-family:var(--mono);font-size:12.5px;line-height:1.75;overflow-x:auto;white-space:pre;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 24px -14px rgba(10,37,64,.55)}
.fix pre .k{color:#A5B4FC}
.fix pre .s{color:#7FE7C4}
.fix pre .c{color:#7C8FA8}
.fixnote{margin:12px 0 0;font-size:13px;color:var(--muted);line-height:1.62}
.copy{position:absolute;top:10px;right:10px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:var(--code-fg);border-radius:7px;padding:5px 11px;font-family:var(--mono);font-size:11.5px;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.copy:hover{background:rgba(255,255,255,.2)}
.copy.done{background:var(--ok);border-color:var(--ok);color:#fff}
.report-f{padding:18px 22px;border-top:1px solid var(--line);background:linear-gradient(180deg,#FCFDFE,var(--paper));display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:14px}
.report-f .spacer{flex:1}
.report-f .cnt{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* ---------- sections ---------- */
/* ⛔ 上下对称内边距，四种组合要成对算：
      normal→normal 88+88=176 · tight→tight 40+40=80 · tight→normal 128 · normal→tight 128
   V8 把节奏从 48 拉到 88：48px 是「文档」的节奏，88px 才是「落地页」的。
   对标实测 —— DataFast 160/128/192 · Peec ~120。⛔ 改任一条都要重算这四组。 */
section{padding:88px 0}
section.tight{padding-top:40px}
main > section:first-of-type{padding-top:108px}
main > section:first-of-type.tight{padding-top:72px}
/* ⛔⛔ V9 删掉了隔段换底色（原来是 nth-of-type(even) 铺 --band）。
   原因：底色反转成浅灰之后，白 band 上的白卡等于没有卡片 —— 首页 .stats 和
   .plans 实测都退化成「一圈边框围起来的表格」。整页一层灰，白卡才处处浮得起。
   段落节奏现在只靠两条：88px 留白 + .shead 下面那条紫色短线。⛔ 别再把它加回来。 */
.shead{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line-2);padding-bottom:16px}
.shead::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;border-radius:2px;background:var(--accent)}
h2{font-size:clamp(24px,3.2vw,34px);letter-spacing:-.022em;font-weight:700;margin:0;max-width:26em;text-wrap:balance}
h3.sub{font-size:18px;letter-spacing:-.016em;font-weight:700;margin:34px 0 0}
.shead .meta{font-size:12.5px;color:var(--muted);white-space:nowrap;font-family:var(--mono)}
.prose{max-width:44em;font-size:15.5px;color:var(--ink-2);line-height:1.75}
/* 行内代码。站上原来没有这条 —— fix-generator 的「验证命令」需要它。
   ⛔ 必须用 :not(pre) > code 限定，否则会污染 <pre> 里的代码块（那里已经有 .fix pre 的样式）。 */
:not(pre) > code{font-family:var(--mono);font-size:.9em;background:var(--bg-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:var(--ink);overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.prose p{margin:16px 0 0;text-wrap:pretty}
.prose b{color:var(--ink);font-weight:600}
.prose ul{margin:16px 0 0;padding-left:20px}
.prose li{margin:7px 0}
.prose li::marker{color:var(--accent-3)}

/* ---------- tools list ---------- */
/* ⛔ V9：加了白卡容器。灰底上一排裸文字会显得「散」，而白卡让它成为一块面板 ——
   这是 TrustMRR 的做法（外层纯白容器 + 内层分隔线）。
   ⛔ 加容器后 .tool 的 padding 必须左右都写，不能再靠「第一列 0、其余 30px」那套。 */
.tools{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
/* 只有一张卡时不要撑成 1/3 宽、右边留一条空框 —— tools/index.html 的「查阅」组用到。
   ⛔ 别改成 repeat(auto-fit,...)：卡片数少于 3 时 auto-fit 会让单卡铺满，
      与三卡页面的卡片宽度不一致，看上去像两套组件。 */
.tools.one{grid-template-columns:1fr}
/* 单卡铺满整行时正文会横跨 1100px（一行 ~150 字符），比我们自己的体检工具判红线的行宽还长。
   改成左标题 / 右描述：左边固定 260px 放编号、标题、标签和按钮，右边放正文并限 72ch。
   ⛔ 只用 grid-area 重排、不改 HTML 结构 —— 卡片里的 data-en/data-zh 顺序不能动。 */
.tools.one .tool{display:grid;grid-template-columns:260px minmax(0,1fr);gap:6px 44px;align-items:start}
.tools.one .tool .n{grid-area:1/1}
.tools.one .tool h3{grid-area:2/1;margin:0}
.tools.one .tool p{grid-area:1/2/span 4/3;max-width:72ch;margin:0}
.tools.one .tool .tagline{grid-area:3/1;margin-top:14px;justify-self:start}
.tools.one .tool a.more{grid-area:4/1;margin:8px 0 0;justify-self:start}
@media (max-width:760px){
  .tools.one .tool{display:block}
  .tools.one .tool h3{margin:12px 0 8px}
  .tools.one .tool .tagline{margin-top:16px}
  .tools.one .tool a.more{margin-top:16px;margin-left:10px}
}
.tool{padding:30px 30px 32px 30px;border-right:1px solid var(--line)}
.tool:last-child{border-right:0}
.tool .n{font-family:var(--mono);font-size:11px;color:var(--accent-text);letter-spacing:.08em;font-weight:500}
.tool h3{font-size:17px;margin:12px 0 8px;font-weight:600;letter-spacing:-.018em}
.tool p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.65}
.tool .tagline{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--ok);background:var(--ok-bg);border-radius:5px;padding:4px 9px;font-weight:500}
.tool .tagline.soon{color:var(--warn);background:var(--warn-bg)}
.tool a.more{display:inline-block;margin-top:16px;margin-left:10px;font-size:13.5px;color:var(--accent-text);font-weight:500}
.tool a.more:hover{text-decoration:underline}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;margin-top:36px;box-shadow:var(--sh-2)}
.stat{background:#fff;padding:32px 28px}
.stat::before{content:"";display:block;width:26px;height:2px;border-radius:2px;background:var(--accent);margin-bottom:20px}
/* V8：数字再放大一档。TrustMRR 的卡片里数字是绝对主角（粗体 + 大字号），
   我们原来 38px 在三栏里压不住 28px 的说明文字。 */
.stat .num{font-family:var(--mono);font-size:44px;letter-spacing:-.045em;line-height:1;font-weight:600}
.stat .num small{font-size:15px;color:var(--faint);letter-spacing:0;font-weight:500}
.stat .cap{font-size:13.5px;color:var(--muted);margin-top:16px;line-height:1.58}
.caveat{margin-top:20px;border-left:2px solid var(--accent-3);padding:2px 0 2px 18px;font-size:13.5px;color:var(--muted);line-height:1.7;max-width:64em}
/* hero 里的 caveat 是「重要声明」，比 lede 宽一档但仍居中摆放，
   否则左边竖线会贴到容器边缘、和上面居中的正文完全不对齐。 */
.hero .caveat{max-width:52em;margin-left:auto;margin-right:auto}
.caveat b{color:var(--ink-2);font-weight:600}

/* ---------- split (free / paid) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;margin-top:30px;border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden;box-shadow:var(--sh-2);background:#fff}
/* ⛔ V9：左半原本是「透明」的 —— 白底时代等于白，灰底时代等于灰，
   整块 split 就不再是白卡（实测首页那一块退成灰上灰）。现在显式给白。
   右半仍用 --paper，靠一点点明度差把「免费 / 付费」两栏分开，不靠更重的线。 */
.half{padding:32px 30px 36px;background:#fff}
.half+.half{border-left:1px solid var(--line);background:var(--paper)}

/* ---------- FAQ (details / summary) ---------- */
/* ⛔ 用原生 <details>，不写 JS 折叠：q 页的文本节点全部被 data-en/data-zh 接管，
   换语言时由 applyLang 重写 innerHTML —— 自己维护一个 open/closed 状态迟早会跟它打架。
   <details> 的开合是浏览器管的，换字不影响。
   ⛔ 折叠标记用 ::before 的 + / –，不用背景图也不用 SVG —— 它必须跟着文字一起读得清，
      而伪元素不会被双语机制替换掉。 */
.qa{margin-top:26px;border:1px solid var(--line);border-radius:var(--r-3);background:#fff;overflow:hidden}
.qa-item{border-top:1px solid var(--line)}
.qa-item:first-child{border-top:0}
.qa-item > summary{cursor:pointer;padding:17px 22px;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.012em;list-style:none;display:flex;align-items:baseline;gap:12px;transition:background .15s var(--ease)}
.qa-item > summary::-webkit-details-marker{display:none}
.qa-item > summary::before{content:"+";font-family:var(--mono);font-size:14px;color:var(--accent-text);flex:none;width:12px;line-height:1.35}
.qa-item[open] > summary::before{content:"\2013"}
.qa-item > summary:hover{background:var(--bg-2)}
/* ⛔ padding-left 46px = summary 的 22px + 标记宽 12px + gap 12px —— 答案正文要和问题文字左对齐，
   不是和 + 号对齐。改 summary 的 padding 或 gap，这里必须跟着算。 */
.qa-item > p{margin:0;padding:0 22px 19px 46px;font-size:14.5px;color:var(--ink-2);line-height:1.72;max-width:62em}
.half .tag2{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.half h3{font-size:17.5px;margin:10px 0 0;font-weight:600;letter-spacing:-.018em}
.half ul{list-style:none;margin:20px 0 0;padding:0;font-size:14.5px;color:var(--ink-2)}
.half li{padding:9px 0 9px 22px;position:relative;border-top:1px solid var(--line)}
.half li:first-child{border-top:0}
.half li::before{position:absolute;left:0;top:9px;font-family:var(--mono);font-size:12px}
.half.free li::before{content:"\2713";color:var(--ok)}
.half.paid li::before{content:"\2192";color:var(--accent-text)}
.half.paid .btn{margin-top:24px;width:100%}
.half.paid .note2{margin:12px 0 0;font-size:12.5px;color:var(--muted);text-align:center;font-family:var(--mono)}

/* ---------- 两栏对照（/compare/ 用）---------- */
/* .half 的 li 符号原本绑死在 .free / .paid 上，语义是「免费档 vs 付费档」。
   对照页要的是中性的「同一维度的两边」，所以补一对通用变体：
   .that = 对方/另一种做法，.this = 我们/这一种做法。任何对照页都可复用。 */
.half.that li::before{content:"\2192";color:var(--muted)}
.half.this li::before{content:"\2713";color:var(--ok)}

/* ---------- 引用第三方原话 ---------- */
/* 引文必须保持原文，中英两版都不翻译 —— 与 data-quote="1" 配合使用
   （两个 visible_text() 会把整块删掉，因此不计入「中文页英文泄漏」）。
   衬线体是刻意的：引文是「别人的话」，与我们的无衬线正文区分开。 */
.quote{margin:20px 0 0;border-left:2px solid var(--accent-3);padding:4px 0 4px 20px;font-family:var(--serif);font-size:15.5px;color:var(--ink-2);line-height:1.74;font-style:italic;max-width:62em}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:var(--faint);font-family:var(--mono);line-height:1.6}

/* ---------- pricing plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;align-items:start}
/* 两卡一排的变体。⛔ 曾经写成内联 style="grid-template-columns:1fr 1fr" ——
   内联样式优先级高于媒体查询，320~360px 下那一排仍是两列、被内容撑爆
   （实测页面横滑 48px）。类可以被媒体查询覆盖。 */
.plans.two-up{grid-template-columns:1fr 1fr}
/* 单卡变体（2026-10-18 删掉 $599 的 Done-For-You 后只剩 Fix Pack 一张）。
   ⛔ 不能继续用 two-up：grid 只放一个子元素时它仍占半宽，右边空一半。 */
.plans.one-up{grid-template-columns:1fr;max-width:560px;margin:30px auto 0}
.plan{border:1px solid var(--line);border-radius:var(--r-4);padding:32px 28px 34px;background:#fff;display:flex;flex-direction:column;height:100%;box-shadow:var(--sh-1);transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s var(--ease)}
.plan:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.plan.featured{border:2px solid var(--accent);box-shadow:var(--sh-2)}
.plan.featured:hover{box-shadow:var(--sh-3)}
.plan .tier{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint)}
.plan .price{font-size:36px;font-weight:600;letter-spacing:-.04em;margin:12px 0 0;line-height:1}
.plan .price small{font-size:14px;font-weight:500;color:var(--faint);letter-spacing:0}
.plan .per{font-size:13px;color:var(--muted);margin:6px 0 0}
.plan h3{font-size:17px;margin:18px 0 0;font-weight:600;letter-spacing:-.018em}
.plan ul{list-style:none;margin:18px 0 0;padding:0;font-size:14.5px;color:var(--ink-2);flex:1}
.plan li{padding:8px 0 8px 22px;position:relative;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li::before{content:"\2713";position:absolute;left:0;top:8px;font-family:var(--mono);font-size:12px;color:var(--ok)}
.plan li.off{color:var(--faint)}
.plan li.off::before{content:"\2013";color:var(--line-2)}
.plan .btn{margin-top:24px;width:100%}
.plan .cur{margin:12px 0 0;font-size:12.5px;color:var(--muted);font-family:var(--mono);text-align:center}
/* ---------- pricing note (replaces the old currency switcher) ---------- */
.currencynote{margin-top:24px;font-size:13px;color:var(--muted);line-height:1.62}
.currencynote a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--accent-3)}
.currencynote a:hover{border-bottom-color:var(--accent)}
.footlang{color:var(--faint)}

/* ---------- tool shell (interactive pages) ---------- */
.shell{margin:44px 0 0;border:1px solid var(--line);border-radius:var(--r-3);background:#fff;overflow:hidden;box-shadow:var(--sh-2)}
.shell-h{display:flex;align-items:center;gap:10px;padding:15px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#FCFDFE,var(--paper));font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.shell-h .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 0 4px var(--accent-2)}
.shell-b{padding:28px 22px 32px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.field{display:flex;flex-direction:column;gap:7px}
.field.wide{grid-column:1/-1}
.field label{font-size:13px;color:var(--ink-2);font-weight:500}
.field .hintx{font-size:12px;color:var(--faint);font-weight:400;margin-top:-2px}
.field input,.field textarea,.field select{border:1px solid var(--line-2);border-radius:8px;padding:11px 13px;font-size:14.5px;font-family:var(--sans);color:var(--ink);background:#fff;width:100%;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.field textarea{font-family:var(--mono);font-size:13px;line-height:1.6;min-height:92px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,92,255,.16)}
.field .rows{display:flex;flex-direction:column;gap:8px}
.field .rows .row{display:flex;gap:8px}
.field .rows .row input{flex:1}
.field .rows .row button{border:1px solid var(--line-2);background:#fff;border-radius:8px;padding:0 12px;cursor:pointer;color:var(--muted);font-family:var(--mono);font-size:15px;line-height:1;transition:border-color .15s var(--ease),color .15s var(--ease)}
.field .rows .row button:hover{border-color:var(--ink);color:var(--ink)}
.shell-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.shell-f .spacer{flex:1}
.shell-f .note3{font-size:12.5px;color:var(--faint);font-family:var(--mono)}
.out{margin-top:26px}
.out-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.out-tabs button{border:0;background:none;padding:10px 14px;cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s var(--ease),border-color .15s var(--ease)}
.out-tabs button:hover{color:var(--ink-2)}
.out-tabs button.on{color:var(--accent-text);border-bottom-color:var(--accent)}
.out-pane{display:none;padding-top:16px}
.out-pane.on{display:block}
.out-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.out-head .path{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:4px 9px}
.out-head .spacer{flex:1}
.out-head .size{font-family:var(--mono);font-size:12px;color:var(--faint)}
.checklist{margin-top:22px;border:1px solid var(--line);border-radius:var(--r-2);overflow:hidden}
.checklist .ci{display:grid;grid-template-columns:1fr auto;gap:14px;padding:13px 18px;border-top:1px solid var(--line);align-items:center;font-size:14px}
.checklist .ci:first-child{border-top:0}
.checklist .ci .lab{display:flex;align-items:center;gap:11px;color:var(--ink-2)}
.checklist .ci .mk{width:18px;height:18px;border-radius:5px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;font-weight:600}
.m-ok{background:var(--ok)}.m-no{background:var(--bad)}.m-warn{background:var(--warn)}.m-info{background:var(--line-2)}

/* 窄屏：.ci 的 1fr / auto 两列在 320–520px 会撑破容器。
   ⛔ 实测（390px，tools/citation-gap-audit.html 的报告区）：.ci 只有 240px，
      标签 183px + 值 113px = 296px，值列不能收缩（white-space:nowrap），
      于是整行溢出到卡片外面。改成上下堆叠，值落到第二行左对齐。
   ⛔ 这是全站通用修正，不是某一页的私有样式 —— .checklist 是共用组件。 */
@media(max-width:520px){
  .checklist .ci{grid-template-columns:1fr;gap:6px;padding:12px 15px}
  .checklist .ci>b{justify-self:start;white-space:normal}
  /* 报告头：三个窗口点的 padding-left 不能低于 68px（第三个点右边缘在 61px），
     所以只能在字号和间距上省，把三行压回两行。 */
  .report-h{padding-left:68px;gap:8px;font-size:11.5px}
  .report-h .sep{display:none}
}

/* ---------- numbered limitation list (methodology) ---------- */
.limits{margin-top:28px;border-top:1px solid var(--line)}
.limit{border-bottom:1px solid var(--line);padding:20px 0;display:grid;grid-template-columns:52px 1fr;gap:20px;align-items:baseline}
.limit .no{font-family:var(--mono);font-size:12.5px;color:var(--accent-text);letter-spacing:.08em;line-height:1.7;font-weight:500}
.limit p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.72;max-width:46em;text-wrap:pretty}
.limit p b{color:var(--ink);font-weight:600}

/* ---------- directory: toolbar + listing grid ---------- */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.bar input{flex:1;min-width:220px;border:1px solid var(--line-2);border-radius:8px;padding:11px 14px;font-size:14.5px;font-family:var(--sans);color:var(--ink);background:#fff;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.bar input::placeholder{color:var(--faint)}
.bar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,92,255,.16)}
.bar select{border:1px solid var(--line-2);border-radius:8px;padding:11px 12px;font-size:13.5px;font-family:var(--mono);color:var(--ink-2);background:#fff;cursor:pointer;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.bar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(100,92,255,.16)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{border:1px solid var(--line-2);background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;color:var(--ink-2);cursor:pointer;font-family:var(--sans);transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.count{font-family:var(--mono);font-size:12.5px;color:var(--faint);margin-top:16px}
.methodline{font-family:var(--mono);font-size:12px;line-height:1.72;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-1);padding:12px 15px;margin-top:10px}
.methodnote{font-size:12.5px;line-height:1.65;color:var(--muted);margin-top:8px;max-width:78ch}
/* ========================================================================
   Card Grid - 基于 UX Patterns Card Grid 最佳实践优化
   3-tier information architecture: Badge > Content > Metadata
   ======================================================================== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
/* ⛔⛔ 2026-10-17 修复：这个区块曾被整体换成「3 层结构」
   （.card-header / .card-body / .card-footer），但生成卡片的 card() 函数
   （build_directory.py:106）输出的仍然是旧结构（.top / .ttl / .rows / .rw / .foot）。
   两套对不上 ⇒ directory 与 rankings 两个页面的卡片全部粘连成一行
   （实测「Search rank on entry#3」「CITED 6/6how to get cited by chatgptVisit →」）。
   ⛔ 判据：改卡片样式必须同时确认「HTML 是哪个结构」—— 现在用的是 .card > .top/.rows/.foot。
      下面那套 .card-header 规则目前没有任何 HTML 使用，保留但不生效。 */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-3);padding:20px;display:flex;flex-direction:column;transition:box-shadow .18s var(--ease),transform .18s var(--ease),border-color .18s var(--ease)}
.card:hover{box-shadow:var(--sh-3);transform:translateY(-4px);border-color:var(--accent)}
.card.hide{display:none}

/* ---- 卡片实际在用的结构（与 card() 输出一一对应，删任何一条都会粘连）---- */
.card .top{display:flex;gap:11px;align-items:flex-start}
.card .av{width:34px;height:34px;border-radius:8px;background:linear-gradient(160deg,#fff,var(--paper));border:1px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:14px;font-weight:500;color:var(--ink-2);text-transform:uppercase}
.card h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.014em;line-height:1.32;word-break:break-word;color:var(--ink)}
/* 榜单名次徽章 —— 由 build_directory.card() 写入，数值来自 pilot_stats.board_order()。
   margin-left:auto 把它顶到 .top 的最右；⛔ 不要给 h3 加 flex:1 来挤它，
   长域名在窄卡片里会被 flex 压缩换行。 */
.card .rk{margin-left:auto;flex:none;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:2px 6px;line-height:1.5}
.card .ttl{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .rows{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.card .rw{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted)}
.card .rw b{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500}
.card .rw b.no{color:var(--bad)}
.card .rw b.yes{color:var(--ok)}
.card .foot{margin-top:13px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.card .cite{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;padding:3px 7px;border-radius:5px;font-weight:600}
.card .cat{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:3px 7px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .go{margin-left:auto;font-size:12.5px;color:var(--accent-text);font-weight:500;white-space:nowrap}
.card .go+.go{margin-left:0}
/* 引用徽章的三档底色用的是全局 .t-ok/.t-warn/.t-bad（文件上方 status 段），
   ⛔ 不在这里重复定义 —— 同一件事两份口径，改一处忘一处就会打架。
   三档由 card() 按「被引用比例 ≥ 2/3」算出来，改阈值要同时改 card()。 */

/* LAYER 1: Card Header - Visual Anchor */
.card-header{padding:18px 20px 16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:linear-gradient(180deg,var(--bg-2),#fff);border-bottom:1px solid var(--line)}

/* Citation Badge - 核心视觉元素 */
.citation-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:90px;height:70px;border-radius:var(--r-3);transition:transform .2s var(--ease)}
.card:hover .citation-badge{transform:scale(1.05)}
.badge-perfect{background:linear-gradient(135deg,#16A34A,#22C55E);color:#fff;box-shadow:0 2px 8px rgba(22,163,74,.3)}
.badge-good{background:linear-gradient(135deg,#22C55E,#4ADE80);color:#fff;box-shadow:0 2px 8px rgba(34,197,94,.3)}
.badge-partial{background:#F59E0B;color:#fff;box-shadow:0 2px 8px rgba(245,158,11,.3)}
.badge-zero{background:#DC2626;color:#fff;border:2px dashed #B91C1C;box-shadow:0 2px 8px rgba(220,38,38,.3)}
.citation-badge .score{font-family:var(--mono);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1}
.citation-badge .label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;opacity:.9}
.rank-tag{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:4px 9px;white-space:nowrap}

/* LAYER 2: Card Body - Primary Content */
.card-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:14px}
.site-identity{display:flex;align-items:center;gap:10px}
.favicon{width:32px;height:32px;border-radius:7px;background:linear-gradient(160deg,#fff,var(--paper));border:1px solid var(--line);flex:none;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-2);text-transform:uppercase}
.domain{font-size:15px;margin:0;font-weight:600;letter-spacing:-.014em;line-height:1.32;word-break:break-word;color:var(--ink)}
.page-title{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Factors Grid - 快速扫描 */
.factors-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.factor{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:6px;font-size:11.5px;font-weight:500;transition:background .15s var(--ease)}
.factor .icon-check::before{content:"\2713";font-size:12px;font-weight:700}
.factor .icon-cross::before{content:"\2717";font-size:12px;font-weight:700}
.factor .icon-dash::before{content:"\2014";font-size:12px}
.factor.pass{background:#ECFDF5;color:var(--ok)}
.factor.fail{background:#FEF2F2;color:var(--bad)}
.factor.neutral{background:var(--bg-2);color:var(--muted)}

/* LAYER 3: Card Footer - Supporting Metadata */
.card-footer{padding:14px 20px 16px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;background:var(--bg-2)}
.query-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:5px;padding:4px 8px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.visit-link{margin-left:auto;font-size:12.5px;color:var(--accent-text);font-weight:500;white-space:nowrap;transition:color .15s var(--ease)}
.visit-link:hover{color:var(--accent-ink);text-decoration:underline}
.visit-link+.visit-link{margin-left:0}

/* Empty State */
.empty{grid-column:1/-1;padding:64px 32px;text-align:center;color:var(--muted);font-size:15px;background:#fff;border:2px dashed var(--line);border-radius:var(--r-3)}
.empty::before{content:"\1F50D";font-size:48px;opacity:.5;display:block;margin-bottom:16px}
.empty b{color:var(--ink);font-weight:600;display:block;font-size:16px;margin-bottom:8px}

/* Focus States */
.card:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.visit-link:focus{outline:2px dashed var(--accent);outline-offset:4px;border-radius:4px}

/* Responsive */
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr);gap:20px}
  .citation-badge{min-width:80px;height:64px}
  .citation-badge .score{font-size:24px}
}
@media(max-width:820px){
  .grid{grid-template-columns:1fr;gap:16px}
  .bar select{flex:1}
  .citation-badge{min-width:90px;height:70px}
  .citation-badge .score{font-size:28px}
  .factors-grid{grid-template-columns:1fr;gap:6px}
  .factor{padding:6px 10px}
  .rank-tag{display:none}
}

/* ⛔ 入场动画不能带 fill-mode:both —— 它会把最终帧的 transform:none 一直按在元素上，
   于是 .card:hover 的抬起永远不生效。backwards 只负责动画开始前不闪一下。 */
@keyframes cg-card-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{animation:cg-card-in .28s var(--ease) backwards}

/* ---------- footer ---------- */
/* 灰底页面上，页脚做成白面板（和卡片同一套语言），而不是「比底色亮一点的灰」。 */
footer.site{margin-top:52px;border-top:1px solid var(--line);background:#fff;padding:30px 0 46px}
footer.site .wrap{display:flex;gap:22px;align-items:center;font-size:13.5px;color:var(--muted);flex-wrap:wrap}
footer.site .spacer{flex:1}
footer.site a{transition:color .15s var(--ease)}
footer.site a:hover{color:var(--accent-text)}

@media(max-width:820px){
  /* V8：桌面 88px 的段间距搬到手机上会太长（一屏装不下一个 section），收到 56px。
     ⛔ 只覆盖数值，不改变「上下对称」这个结构，四种组合仍然成对。 */
  section{padding:56px 0}
  section.tight{padding-top:28px}
  main > section:first-of-type{padding-top:76px}
  main > section:first-of-type.tight{padding-top:52px}
  .hero{padding-top:56px}
  /* 4 列在 360px 上每列只剩 ~78px，数字会折行；两列刚好。 */
  .proof{grid-template-columns:repeat(2,1fr);max-width:440px;margin-top:30px}
  .proof .v{font-size:24px}
  .report{margin-top:52px}
  /* ⛔ 手机上 .report-h 会折成多行（内容太长），而三个点是 `at … 50%` ——
     50% 是相对整个元素高度算的，折行后点会掉到第二行的高度上，第一行只剩缩进。
     ⇒ 窄屏把 Y 改成绝对值（13px padding + 半行高 ≈ 21px），锁在第一行。 */
  .report-h{padding-left:70px;background-image:radial-gradient(circle at 20px 21px,#FF5F57 0 4.5px,transparent 5.1px),radial-gradient(circle at 37px 21px,#FEBC2E 0 4.5px,transparent 5.1px),radial-gradient(circle at 54px 21px,#28C840 0 4.5px,transparent 5.1px),linear-gradient(180deg,#FCFDFE,var(--paper))}
  .stat .num{font-size:40px}
  .finding{grid-template-columns:1fr}
  .finding .left{border-right:0;border-bottom:1px solid var(--line)}
  .tools{grid-template-columns:1fr}
  .tool{border-right:0;border-bottom:1px solid var(--line);padding:22px 22px!important}
  .tool:last-child{border-bottom:0}
  .stats{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .half+.half{border-left:0;border-top:1px solid var(--line)}
  .plans,.plans.two-up{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .limit{grid-template-columns:32px 1fr;gap:12px}
  /* .shead .meta 是 nowrap（V5 起就这样），窄屏下它不肯换行，把段标题整行顶出屏幕
     —— 390px 实测 /alternatives/otterly-ai.html 溢出 46px。 */
  .shead{flex-wrap:wrap;gap:8px 20px}
  .shead .meta{white-space:normal}
  /* ⛔⛔ V5 在这里写的是 nav{display:none} —— 手机上整个站点没有任何导航。
     用 grid 明确排两行：第一行 brand / 语言，第二行 导航（可横滑）/ 主按钮。
     ⛔ 不要退回 flex + wrap：导航的 flex-basis 是 0，所以它「永远放得下」第一行，
     结果是自己挤上去、把按钮顶到第二行（实测页头 156px 高）。
     grid 的列宽是算出来的，320px 宽也不会塌。 */
  header.site .wrap{display:grid;height:auto;grid-template-columns:auto 1fr auto;align-items:center;gap:9px 14px;padding:11px 28px 10px}
  header.site .brand{grid-area:1/1}
  header.site .spacer{grid-area:1/2}
  header.site .lang{grid-area:1/3}
  header.site nav{grid-area:2/1/3/3;min-width:0;gap:20px;overflow-x:auto;font-size:13.5px;white-space:nowrap;padding:3px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
  header.site nav::-webkit-scrollbar{display:none}
  header.site .btn.sm{grid-area:2/3;padding:8px 13px;font-size:12.5px;white-space:nowrap}
  html{scroll-padding-top:116px}
  .scan{flex-direction:column}
  .scan .btn{width:100%}
  .cta{flex-direction:column}
  .cta .btn{width:100%}
}

/* ⛔ 390px 实测：上面那套 `auto 1fr auto` 在 390px 会失效 —— 品牌(150px) + 主按钮(156px)
   两个 auto 列就把 334px 的内容宽度吃干了，中间的 1fr 被压成 0px。
   结果：导航只剩 164px 还得横滑，而按钮在列 3 里折成两行、直接压到导航上面（实测页头 121px）。
   ⇒ ≤430px 排成三行：品牌/语言 → 导航（通栏、可横滑）→ 主按钮（通栏）。
   判据：probe 里 `cols` 不该出现 `0px`，`nav.y + nav.h <= btn.y`。 */
@media(max-width:430px){
  header.site .wrap{grid-template-columns:auto 1fr auto}
  header.site nav{grid-area:2/1/3/4}
  header.site .btn.sm{grid-area:3/1/4/4;justify-content:center;width:100%}
  html{scroll-padding-top:170px}
}
@media print{
  header.site,footer.site,.btn{display:none}
  body{background:#fff;background-image:none}
  main{background-image:none}
  .report,.shell,.split,.plan,.stats,.card{box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- article / guide page ---------- */
/* ⛔ 背景：how-to-get-cited-by-chatgpt/ 这类长文页用的类名（wrap-article /
   article-header / factor-deep / case-study …）在 site.css 和 homepage.css 里
   都不存在 —— 它是照着一套从未实现的类名写的，所以整页「无容器、文字通栏」。
   这里把这一套补进基础层（不是给某一页开后门），后续任何 guide 页直接复用。
   ⛔ 所有颜色/间距都用现有 token，不引入第二套色。 */
.landing-page{background:var(--bg)}
.wrap-article{max-width:760px;margin:0 auto;padding:56px 28px 0}
.article-header{margin-bottom:32px}
.article-header h1{font-size:clamp(30px,4.2vw,44px);line-height:1.08;letter-spacing:-.025em;font-weight:700;margin:0}
.article-lead{margin:16px 0 0;font-size:17px;line-height:1.62;color:var(--ink-2);max-width:44em}
.article-meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--faint);text-transform:uppercase}
.inline-cta{margin:30px 0;padding:20px 22px;border:1px solid var(--accent-3);border-radius:var(--r-3);background:var(--accent-2)}
.inline-cta .cta-content p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.content-section{padding:34px 0;border-top:1px solid var(--line)}
.content-section h2{font-size:clamp(21px,2.6vw,26px);line-height:1.2;letter-spacing:-.018em;font-weight:700;margin:0 0 14px}
.content-section h3{font-size:17px;line-height:1.3;margin:22px 0 8px;font-weight:600}
.content-section p{font-size:15.5px;line-height:1.68;color:var(--ink-2);margin:0 0 14px}
.content-section ul{margin:0 0 16px;padding-left:20px}
.content-section li{font-size:15.5px;line-height:1.68;color:var(--ink-2);margin-bottom:7px}
.content-section code{font-family:var(--mono);font-size:.9em;background:var(--paper);padding:1px 5px;border-radius:4px}
.content-section pre{background:var(--code-bg);color:var(--code-fg);border-radius:var(--r-2);padding:16px 18px;overflow-x:auto;margin:0 0 16px}
.content-section pre code{font-family:var(--mono);font-size:12.5px;line-height:1.6;background:none;color:inherit;padding:0}
.case-study{margin:22px 0;padding:20px 22px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-3);background:#fff}
.case-badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-2);padding:3px 8px;border-radius:5px;margin-bottom:10px}
.case-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:500;color:var(--accent-text)}
.factor-deep{margin:24px 0;padding:22px 22px 6px;border:1px solid var(--line);border-radius:var(--r-3);background:#fff}
.factor-deep h3{margin-top:0}
.checklist-card{margin:20px 0;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--bg-2)}
.checklist-card ul{margin:0}

/* 横向提示条：一行话 + 一个按钮。用于「这件事在另一个页面上做」的指引。
   ⛔ 收录页原来在这里放了一整个扫描区块，于是页面上出现两个搜索框（扫描 + 浏览），
      排版重复。2026-10-18 把扫描搬到 /submit.html，这里只留一条指路。 */
.strip{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-3);background:#fff;box-shadow:var(--sh-1)}
.strip p{margin:0;flex:1;min-width:220px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.strip .btn{margin-left:auto;flex:none}
@media(max-width:520px){.strip{padding:16px 18px}.strip .btn{margin-left:0;width:100%}}

/* 蜜罐字段：真用户看不见，也不会填；只有把页面里所有 input 都填一遍的机器人会踩。
   ⛔ 不用 display:none / visibility:hidden —— 一部分填充器会跳过隐藏字段，蜜罐就白放了。
      这里用「移出视口 + 一像素」，对屏幕和键盘都不可达（配合 tabindex="-1" + aria-hidden）。 */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.cta-final{margin:44px 0;padding:32px 26px;text-align:center;border:1px solid var(--line);border-radius:var(--r-4);background:#fff;box-shadow:var(--sh-2)}
.cta-final h2{margin:0 0 10px}
.cta-subtitle{margin-top:14px;font-size:12.5px;color:var(--muted)}
.faq-item{padding:18px 0;border-bottom:1px solid var(--line)}
.faq-item h3{margin:0 0 8px;font-size:15.5px;font-weight:600}
.faq-item p{margin:0}
footer.site-footer{margin-top:56px;border-top:1px solid var(--line);background:#fff;padding:34px 0 44px}
footer.site-footer .wrap{max-width:760px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.footer-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 12px;font-weight:500}
.footer-col p{font-size:13px;color:var(--muted);margin:0}
.footer-col a{display:block;font-size:13.5px;color:var(--ink-2);padding:4px 0;transition:color .15s var(--ease)}
.footer-col a:hover{color:var(--accent-text)}
.footer-bottom{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.footer-bottom p{margin:0}
@media (max-width:820px){
  .wrap-article{padding:40px 22px 0}
  .article-lead{font-size:16px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:22px}
  .cta-final{padding:26px 20px}
}

/* ─────────────────────────────────────────────────────────────────────────
   2026-10-18 · 从 site-v2.css 搬过来的「操作区」组件

   ⛔ 为什么会有这一段：站点当时有两套样式表 —— 首页用 site-v2.css，
      其余 63 页用 site.css。checker-card / btn-primary / trust-pills
      这些操作区组件**只在 v2 里存在**，所以提交页那个输入框和按钮是裸的，
      看起来像后台表单。owner 的原话是「UI 确实不好看」。

      这里只搬「v2 有、site.css 没有」的部分，一条都不覆盖 site.css 已有的规则
      —— 这样首页不会变，其余页面只是多拿到组件。

      ⛔ 待办：两套表最终要合成一套（铁律：全站只能有一个视觉身份）。
         合并需要逐页视觉比对，不能靠脚本一把梭。
   ───────────────────────────────────────────────────────────────────────── */

.hero-badge{
  display: inline-block;
  background: var(--primary-50);
  color: var(--primary-600);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.trust-pills{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  
  margin-bottom: 24px;
}
.pill{
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 14px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.checker-card{
  background: #FFFFFF;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 18px 40px -22px rgba(17, 24, 39, .28);
  
  margin-bottom: 0;
}
.checker-label{
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.45;
}
.checker-row{
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.checker-row input{
  
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--gray-50);
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.checker-row input::placeholder{
  
  color: var(--gray-500);
}
.checker-row input:focus{
  outline: none;
  background: #FFFFFF;
  border-color: var(--primary-600);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.checker-row .btn-primary{
  height: 52px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.checker-note{
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.checker-out{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}
.btn-primary{
  background: var(--primary-600);
  color: #FFFFFF;
  border: none;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary:hover{
  background: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
a.btn-primary{
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
  @media (max-width: 768px){.trust-pills{
    gap: 8px;
    margin-bottom: 20px;
  }}
  @media (max-width: 768px){.pill{
    padding: 6px 13px;
    font-size: 13px;
  }}
  @media (max-width: 768px){.checker-row{
    flex-direction: column;
  }}
  @media (max-width: 768px){.checker-row .btn-primary{
    width: 100%;
  }}
  @media (max-width: 768px){.btn-primary{
    width: 100%;
  }}

/* ── 收录卡（.listing）· 2026-10-18
   提交页要用它展示「收录后长什么样」。⛔ 不要和 .card 合并 ——
   .card 是数据表里的一行（48 条引用记录），字段完全不同，混用会让两边都难改。 */
.listing{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;border:1px solid #e5e7eb;border-radius:14px;background:#fff}
.listing .av{width:52px;height:52px;border-radius:12px;background:#EEEDFE;color:#645CFF;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:500;flex:none}
.listing .body{flex:1;min-width:0}
.listing .nm{margin:0 0 4px;font-size:15.5px;font-weight:500;color:#111827}
.listing .tg{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#6b7280}
.listing .tags{display:flex;gap:8px;flex-wrap:wrap}
.listing .tag{font-size:11.5px;padding:3px 10px;border-radius:999px;background:#F1EFE8;color:#5F5E5A;white-space:nowrap}
.listing .rk{font-size:11.5px;font-weight:500;color:#5F5E5A;background:#F1EFE8;padding:4px 10px;border-radius:999px;flex:none;white-space:nowrap;letter-spacing:.02em}
/* 2026-10-18：整张卡是一个链接（指向那条收录页本身）。
   ⛔ 用 <a class="listing"> 而不是 <div>：卡片整体可点，比在卡里塞一个小「查看」链接
      更符合 owner 要的「看、点、付」三步 —— 能点的地方就一个，别让人找。 */
a.listing{text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s}
a.listing:hover{border-color:#c7c3ff;box-shadow:0 2px 12px rgba(100,92,255,.09)}
a.listing:focus-visible{outline:2px solid #645CFF;outline-offset:2px}
@media(max-width:520px){.listing{padding:16px;gap:12px}.listing .av{width:44px;height:44px;font-size:18px}.listing .rk{font-size:11px;padding:3px 8px}}