/* ============================================================
   FXCN 排版系统 v1 —— 在 app.css 之后加载,负责"看起来是设计过的"
   ------------------------------------------------------------
   为什么需要这个文件:
   审计发现模板里散落着 32 个不同字号(9/9.5/10/10.5/11/11.5/12/12.5/13/13.5…)、
   29 个不同间距值(含 1/2/3/5/7/9/11/13px 这种脱离栅格的)、
   18 次硬编码 #94a3b8(连调色板里都没有这个色)。
   用户说不出哪里不对,但眼睛能感知到不统一 —— 同一屏文字差 0.5px,
   读起来就是"随手做的"而不是"设计过的"。

   这里定义三样东西,模板只允许用这些:
     1. 字号刻度(11 级,含行高与字重配对)
     2. 间距刻度(4/8 节奏,复用 app.css 已有的 --s-*)
     3. 组件类(区块头、面板、元信息网格、数据表、空状态)
   ============================================================ */

:root{
  /* ---------- 字号刻度 ----------
     每一级都自带行高:中英混排里行高比字号更影响可读性。
     大字号用 clamp() 做流体缩放,免得在 390px 屏上撑破。 */
  --fs-2xs : 14px;   --lh-2xs : 1.55;
  --fs-xs  : 15px;   --lh-xs  : 1.6;
  --fs-sm  : 16px;   --lh-sm  : 1.65;
  --fs-base: 17px;   --lh-base: 1.75;
  --fs-md  : 19px;   --lh-md  : 1.6;
  --fs-lg  : 22px;   --lh-lg  : 1.45;
  --fs-xl  : clamp(24px, 1.4vw + 17px, 28px);   --lh-xl : 1.35;
  --fs-2xl : clamp(28px, 2.2vw + 17px, 34px);   --lh-2xl: 1.25;
  --fs-3xl : clamp(32px, 3.2vw + 17px, 42px);   --lh-3xl: 1.18;
  --fs-4xl : clamp(38px, 4.5vw + 17px, 52px);   --lh-4xl: 1.1;
  --fs-5xl : clamp(44px, 6vw + 17px, 64px);     --lh-5xl: 1.05;

  /* ---------- 语义色别名 ----------
     模板里写 #dc2626 / #16a34a / #94a3b8 的地方全部改指这里。
     好处:将来调品牌色或做暗色模式,只动这一处。 */
  --c-pos      : var(--fx-up);
  --c-neg      : var(--fx-down);
  --c-warn     : var(--fx-warn);
  --c-muted    : var(--fx-text-3);
  --c-faint    : var(--fx-text-4);   /* "未收录 / 待补" 这类缺失态专用 */
  --c-pos-bg   : #e8f5ee;
  --c-neg-bg   : #fdecec;
  --c-warn-bg  : #fdf3e3;
  --c-faint-bg : var(--fx-line-2);

  /* ---------- 区块节奏 ----------
     一个页面只有两种纵向节奏:区块之间 & 区块内部。
     以前 48px/32px/24px/18px/16px 混用,读起来层级是糊的。 */
  --gap-section : var(--s-7);   /* 48px —— 大区块之间 */
  --gap-block   : var(--s-5);   /* 24px —— 区块内的组之间 */
  --gap-item    : var(--s-3);   /* 12px —— 组内条目之间 */

  /* ---------- 断点(新代码只用这三个) ----------
     旧 CSS 里有 560/640/768/780/880/960/1040/1100 八个,其中 768 与 780 只差 12px。
     新组件统一到:手机 <640,平板 <1024,其余桌面。 */
}

/* ============================================================
   1. 排版基元
   ============================================================ */
.t-2xs { font-size:var(--fs-2xs);  line-height:var(--lh-2xs) }
.t-xs  { font-size:var(--fs-xs);   line-height:var(--lh-xs) }
.t-sm  { font-size:var(--fs-sm);   line-height:var(--lh-sm) }
.t-base{ font-size:var(--fs-base); line-height:var(--lh-base) }
.t-md  { font-size:var(--fs-md);   line-height:var(--lh-md) }
.t-lg  { font-size:var(--fs-lg);   line-height:var(--lh-lg) }

.t-muted { color:var(--c-muted) }
.t-faint { color:var(--c-faint) }
.t-pos   { color:var(--c-pos) }
.t-neg   { color:var(--c-neg) }
.t-num   { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em }

/* 正文段落:最大 74 个字符宽。超过这个宽度眼睛换行会丢行,
   这是排版学里少数有实证支持的硬规则。 */
.t-prose { font-size:var(--fs-base); line-height:var(--lh-base); color:var(--fx-text-2); max-width:74ch }

/* ============================================================
   2. 区块骨架 —— 所有页面的纵向节奏由它统一
   ============================================================ */
.fx-section { margin-top:var(--gap-section) }
.fx-section:first-child { margin-top:0 }

/* 区块头:标题 + 右侧计数/操作。以前每个页面自己拼 flex,间距各写各的。 */
.fx-shead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-4); margin:0 0 var(--gap-block);
  flex-wrap:wrap;
}
.fx-shead h2{
  font-family:var(--serif); font-size:var(--fs-2xl); line-height:var(--lh-2xl);
  font-weight:650; color:var(--fx-ink); margin:0; letter-spacing:-.015em;
}
.fx-shead h3{
  font-size:var(--fs-lg); line-height:var(--lh-lg);
  font-weight:650; color:var(--fx-ink); margin:0;
}
/* 右上角那行小字(如 "13 FACTS" / "2 ENTITIES")—— 全站统一成这一种 */
.fx-shead .meta{
  font-family:var(--mono); font-size:var(--fs-2xs); letter-spacing:.08em;
  color:var(--c-muted); text-transform:uppercase; white-space:nowrap;
}
/* 独立的区块标题(没有右侧 meta 伴随时用) */
.fx-h2{
  font-family:var(--serif); font-size:var(--fs-2xl); line-height:var(--lh-2xl);
  font-weight:650; color:var(--fx-ink); margin:var(--gap-section) 0 var(--gap-block);
  letter-spacing:-.015em;
}
/* 放在 .fx-shead 里时,外层已经给了外边距,标题自己不再加 */
.fx-shead .fx-h2{ margin:0 }
.fx-shead{ margin-top:var(--gap-section) }
.fx-shead:first-child{ margin-top:0 }

/* 金色小眉题(SCORE BREAKDOWN / 5 DIMENSIONS 那种) */
.fx-eyebrow{
  font-family:var(--mono); font-size:var(--fs-2xs); font-weight:700;
  color:var(--fx-gold-deep); letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:var(--s-2);
}
/* 字段名(总部 / 成立年份 …) */
.fx-label{
  display:block; font-size:var(--fs-2xs); font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--c-muted); margin-bottom:var(--s-1);
}

/* 区块头下面的说明句 */
.fx-slead{ font-size:var(--fs-sm); line-height:1.75; color:var(--fx-text-2);
  margin:calc(var(--gap-block) * -1 + 4px) 0 var(--gap-block); max-width:74ch }

/* ============================================================
   3. 面板 / 卡片
   ============================================================ */
.fx-panel{
  background:var(--fx-surface); border:1px solid var(--fx-line);
  border-radius:var(--r-lg); overflow:hidden;
}
.fx-panel-pad{ padding:var(--s-5) }
.fx-panel-foot{
  padding:var(--s-3) var(--s-5); border-top:1px solid var(--fx-line-2);
  font-size:var(--fs-2xs); line-height:1.7; color:var(--c-muted);
}

/* ============================================================
   4. 元信息网格 —— "总部 / 成立年份 / 官网 / 牌照数" 那一排
   以前是 flex + 手写 gap,窄屏会挤成一坨。
   ============================================================ */
.fx-meta{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, max-content));
  gap:var(--s-3) var(--s-6); margin:var(--s-4) 0 0;
}
.fx-meta dt{
  font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-muted); margin:0 0 2px; font-weight:600;
}
.fx-meta dd{ font-size:var(--fs-sm); color:var(--fx-text); margin:0; font-weight:500 }

/* ============================================================
   5. 数据表 —— 宽表在手机上必须自己横向滚动,不能撑破页面
   ============================================================ */
.fx-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
.fx-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm) }
.fx-table th{
  text-align:left; font-size:var(--fs-2xs); letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-muted); font-weight:600; padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--fx-line); white-space:nowrap; background:var(--fx-line-2);
}
.fx-table td{
  padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--fx-line-2);
  vertical-align:top; line-height:1.65;
}
.fx-table tr:last-child td{ border-bottom:0 }
.fx-table tbody tr:hover{ background:var(--fx-gold-tint) }
.fx-table .num{ text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums }

/* ============================================================
   6. 徽章 —— 全站只有这一套,尺寸/圆角/字重不再各写各的
   ============================================================ */
.fx-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-2xs); line-height:1; font-weight:600;
  padding:4px 8px; border-radius:var(--r-pill); white-space:nowrap;
  background:var(--c-faint-bg); color:var(--c-muted);
}
.fx-tag--pos { background:var(--c-pos-bg);  color:#15803d }
.fx-tag--neg { background:var(--c-neg-bg);  color:#b91c1c }
.fx-tag--warn{ background:var(--c-warn-bg); color:#92400e }

/* ============================================================
   7. 缺失态 —— 「未收录 / 待补证据」的统一写法
   这个站的立身之本是诚实,所以"没有数据"必须有专门的、
   一眼能认出来的视觉,而不是用一个灰色的 "—" 蒙混过去。
   ============================================================ */
.fx-none{
  font-size:var(--fs-2xs); color:var(--c-faint); font-style:normal;
  border-bottom:1px dotted var(--fx-line); cursor:help; white-space:nowrap;
}
.fx-empty{
  padding:var(--s-6) var(--s-5); text-align:center;
  font-size:var(--fs-sm); color:var(--c-muted); line-height:1.8;
}

/* ============================================================
   8. 空广告位不许留死区
   AdSense 没填充时,原来会在正文中间留一个 ~270px 的空框 + 一个"广告"标签。
   这是页面上最刺眼的"low" —— 用 :has() 在没有真实广告时整块收起。
   ============================================================ */
/* AdSense 未填充时会把 data-ad-status="unfilled" 写到 <ins> 上 —— 这是唯一可靠的信号。
   仅凭"没有 iframe"判断会误伤正在加载的广告。 */
.ad-slot:has(ins[data-ad-status="unfilled"]){ display:none !important }

/* 不预留大坑:helper 里给 <ins> 写了 min-height:120~250px,广告不来就是个洞。
   宽度才是 AdSense 需要的,高度让它自己撑 —— 填充后不会被这条限制住。 */
.ad-slot ins.adsbygoogle{ min-height:0 !important }

/* 兜底:两秒后仍没有 iframe 也没有 status(脚本被墙/被拦),整块收起 */
.ad-slot.is-empty{ display:none }

/* ============================================================
   9. 响应式:三个断点,不再是八个
   ============================================================ */
@media (max-width:1024px){
  :root{ --gap-section:var(--s-6); }   /* 32px */
}
@media (max-width:640px){
  :root{ --gap-section:var(--s-5); --gap-block:var(--s-4); }
  .fx-shead{ gap:var(--s-2); align-items:flex-start }
  .fx-shead .meta{
    flex:1 1 100%; max-width:100%; white-space:normal; overflow-wrap:anywhere;
    font-size:var(--fs-sm); line-height:1.55;
  }
  .fx-panel-pad{ padding:var(--s-4) }
  .fx-table th, .fx-table td{ padding:var(--s-2) var(--s-3) }
  .fx-meta{ gap:var(--s-3) var(--s-4) }
}

/* ============================================================
   D80. Readability floor
   The former 14/15px body copy made evidence-heavy pages difficult to scan.
   Compact IDs and short metadata may remain on the smaller type scale, while
   prose, decisions, controls and table content use at least 16px.
   ============================================================ */
.fx-page .section-tight h1 + p,
.fx-page .section-sub,
.fx-page .doc-section > .sub,
.fx-page .doc-section > h2 + p,
.fx-page .doc-section > p,
.fx-page .doc-prose p,
.fx-page .doc-prose li,
.fx-page .commit-card .desc,
.fx-page .tier-card .grade-desc,
.fx-page .endpoint .desc,
.fx-page .contact-card .desc,
.fx-page .p-desc,
.fx-page .callout,
.fx-page .news-card h3{
  font-size:var(--fs-base);
  line-height:var(--lh-base);
}
.fx-page .commit-card .ttl,
.fx-page .contact-card .ttl,
.fx-page .weight-card ul li,
.fx-page .footer-link,
.fx-page .footer-tagline,
.fx-page .auth-card .sub,
.fx-page .auth-foot,
.fx-page .auth-status p{
  font-size:var(--fs-sm);
  line-height:var(--lh-sm);
}
.fx-page .btn,
.fx-page .btn-sm,
.fx-page .search-box input,
.fx-page .search-box button,
.fx-page .filter-bar,
.fx-page .filter-bar select,
.fx-page .table,
.fx-page .pagination a,
.fx-page .pagination span,
.fx-page .menu-link,
.fx-page .menu-title,
.fx-page .submenu-link,
.fx-page .menu-cta-btn,
.fx-page .auth-form label,
.fx-page .auth-form input[type=text],
.fx-page .auth-form input[type=email],
.fx-page .auth-form input[type=password],
.fx-page .auth-form button[type=submit],
.fx-page .auth-form .btn-submit{
  font-size:var(--fs-sm);
}
.fx-page main input,
.fx-page main select,
.fx-page main textarea,
.fx-page main button{
  font-size:max(16px, 1em);
}
.fx-page .table th{ font-size:var(--fs-xs) }
.fx-page .footer-inner{ font-size:var(--fs-sm) }
.fx-page .footer-bottom{ font-size:var(--fs-xs) }

/* ============================================================
   16b. SEO evidence tools
   Query URLs are noindex; the empty landing pages are the stable indexable assets.
   ============================================================ */
.tool-hero .lead{ max-width:820px }
.tool-wrap{ max-width:1180px; margin:0 auto; padding:var(--s-7) var(--s-5) var(--s-9) }
.tool-query{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr) auto;
  gap:var(--s-3); align-items:end; padding:var(--s-5); margin-bottom:var(--gap-block);
  background:#fff; border:1px solid var(--fx-line); border-radius:var(--r-lg);
}
.tool-field{ display:flex; flex-direction:column; gap:8px; min-width:0 }
.tool-field > span{ font-size:var(--fs-sm); line-height:1.45; font-weight:650; color:var(--fx-ink) }
.tool-field input,.tool-field select{
  width:100%; min-height:50px; padding:11px 14px; border:1px solid var(--fx-line);
  border-radius:var(--r-sm); background:#fff; color:var(--fx-ink); font:inherit; font-size:var(--fs-base);
}
.tool-query button{
  min-height:50px; padding:11px 24px; border:1px solid var(--fx-ink); border-radius:var(--r-sm);
  background:var(--fx-ink); color:#fff; font:inherit; font-size:var(--fs-base); font-weight:650; cursor:pointer;
}
.tool-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4) }
.tool-panel,.tool-empty,.tool-boundary{ padding:var(--s-5); border:1px solid var(--fx-line); border-radius:var(--r-lg); background:#fff }
.tool-panel h2,.tool-results h2,.tool-empty h3{ margin:0 0 var(--s-3); font-size:var(--fs-lg); line-height:1.35; color:var(--fx-ink) }
.tool-panel p,.tool-empty p,.tool-boundary{ margin:0; font-size:var(--fs-base); line-height:1.75; color:var(--fx-text-2) }
.tool-results{ margin-top:var(--s-6) }
.tool-tablewrap{ background:#fff; border:1px solid var(--fx-line); border-radius:var(--r-lg) }
.tool-table{ min-width:980px; font-size:var(--fs-sm) }
.tool-table th,.tool-table td{ vertical-align:top; padding:16px }
.tool-table td{ line-height:1.55 }
.tool-table code{ display:block; margin-top:6px; font-size:var(--fs-sm); color:var(--fx-ink) }
.tool-table small{ display:block; margin-top:7px; font-size:var(--fs-xs); line-height:1.45; color:var(--fx-text-3) }
.tool-broker{ display:flex; align-items:center; gap:10px; min-width:180px; color:var(--fx-ink); text-decoration:none }
.tool-broker img{ width:40px; height:40px; object-fit:contain; border-radius:8px; background:#fff }
.tool-alert{ margin:8px 0 0; font-size:var(--fs-xs); line-height:1.5; color:var(--c-neg) }
.tool-pagination{ display:flex; justify-content:center; gap:var(--s-3); margin-top:var(--s-4) }
.tool-pagination a{ padding:9px 18px; border:1px solid var(--fx-line); border-radius:var(--r-pill); color:var(--fx-ink); text-decoration:none; font-size:var(--fs-sm); font-weight:600 }
.tool-boundary{ margin-top:var(--s-6); background:var(--fx-canvas) }
.compare-picker{ padding:var(--s-5); margin-bottom:var(--s-6); border:1px solid var(--fx-line); border-radius:var(--r-lg); background:var(--fx-canvas) }
.compare-picker__head h2{ margin:0 0 var(--s-4); font-size:var(--fs-lg); line-height:1.35; color:var(--fx-ink) }
.compare-picker__fields{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-3) }
.compare-picker label{ display:flex; min-width:0; flex-direction:column; gap:7px }
.compare-picker label span{ font-size:var(--fs-sm); font-weight:600; color:var(--fx-text-2) }
.compare-picker select{ width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--fx-line); border-radius:var(--r-sm); background:#fff; color:var(--fx-ink); font:inherit; font-size:var(--fs-sm) }
.compare-picker > button,.compare-actions button{ min-height:44px; margin-top:var(--s-4); padding:9px 20px; border:1px solid var(--fx-ink); border-radius:var(--r-pill); background:var(--fx-ink); color:#fff; font:inherit; font-size:var(--fs-sm); font-weight:650; cursor:pointer }
.compare-boundary{ margin-top:var(--s-5); padding:var(--s-4) var(--s-5); border:1px solid var(--fx-line); border-radius:var(--r-md); background:var(--fx-canvas); color:var(--fx-text-2); font-size:var(--fs-base); line-height:1.7 }
.compare-actions{ display:flex; justify-content:center; gap:var(--s-3); flex-wrap:wrap; margin-top:var(--s-5) }
.compare-actions button{ margin-top:0 }
.compare-license-source{ display:inline-flex; flex-direction:column; gap:4px; align-items:flex-start }
.compare-license-source small{ font-size:var(--fs-xs); line-height:1.35; color:var(--fx-text-3) }
@media(max-width:800px){
  .tool-wrap{ padding:var(--s-5) var(--s-4) var(--s-7) }
  .tool-query{ grid-template-columns:1fr }
  .tool-grid{ grid-template-columns:1fr }
  .compare-picker__fields{ grid-template-columns:1fr }
}

/* Original research and downloadable datasets. */
.research-wrap{ max-width:1100px; margin:0 auto; padding:var(--s-7) var(--s-5) var(--s-9) }
.research-asof{ margin:var(--s-4) 0 0; font-family:var(--mono); font-size:var(--fs-sm); color:var(--fx-text-3) }
.research-intro{ max-width:78ch; margin:0 0 var(--s-5); padding:var(--s-4) var(--s-5); border-inline-start:3px solid var(--fx-gold); background:var(--fx-gold-tint); border-radius:var(--r-md) }
.research-intro p{ margin:0; font-size:var(--fs-base); line-height:1.8; color:var(--fx-text-2) }
.research-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4) }
.research-card,.research-panel{ padding:var(--s-5); border:1px solid var(--fx-line); border-radius:var(--r-lg); background:#fff }
.research-card time{ font-family:var(--mono); font-size:var(--fs-sm); color:var(--fx-gold-deep) }
.research-card h2,.research-panel h2,.research-section h2,.research-download h2{ margin:10px 0 var(--s-3); color:var(--fx-ink); font-size:var(--fs-xl); line-height:1.3 }
.research-card h2 a{ color:inherit; text-decoration:none }
.research-card p,.research-panel p,.research-panel li,.research-section p,.research-download p{ font-size:var(--fs-base); line-height:1.75; color:var(--fx-text-2) }
.research-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--fx-line); border-radius:var(--r-lg); overflow:hidden; background:#fff }
.research-stats div{ padding:var(--s-5); border-inline-end:1px solid var(--fx-line) }
.research-stats div:last-child{ border-inline-end:0 }
.research-stats strong{ display:block; font-family:var(--mono); font-size:var(--fs-2xl); color:var(--fx-ink) }
.research-stats span{ display:block; margin-top:7px; font-size:var(--fs-sm); color:var(--fx-text-2) }
.research-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-4); margin-top:var(--s-5) }
.research-tier{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-3) }
.research-tier strong{ display:block; font-family:var(--mono); font-size:var(--fs-xl); color:var(--fx-ink) }
.research-tier span{ display:block; margin-top:5px; font-size:var(--fs-sm); line-height:1.45; color:var(--fx-text-2) }
.research-section{ margin-top:var(--s-7) }
.research-section p{ max-width:80ch }
.research-bars{ display:flex; flex-direction:column; gap:12px }
.research-bar{ display:grid; grid-template-columns:90px minmax(0,1fr) 44px; align-items:center; gap:12px; font-size:var(--fs-sm) }
.research-bar>span,.research-bar>strong{ font-family:var(--mono); color:var(--fx-ink) }
.research-bar>strong{ text-align:end }
.research-bar i{ display:block; height:12px; border-radius:6px; overflow:hidden; background:var(--fx-line-2) }
.research-bar b{ display:block; height:100%; border-radius:6px; background:var(--fx-gold-deep) }
.research-download{ display:flex; justify-content:space-between; align-items:center; gap:var(--s-5); margin-top:var(--s-7); padding:var(--s-5); border:1px solid var(--fx-gold-soft); border-radius:var(--r-lg); background:var(--fx-gold-tint) }
.research-download__actions{ display:flex; flex-wrap:wrap; gap:10px }
.research-download__actions a{ min-height:44px; display:inline-flex; align-items:center; padding:9px 18px; border-radius:var(--r-pill); background:var(--fx-ink); color:#fff; text-decoration:none; font-size:var(--fs-sm); font-weight:650 }
@media(max-width:760px){
  .research-wrap{padding:var(--s-5) var(--s-4) var(--s-7)}
  .research-cards,.research-grid,.research-stats{grid-template-columns:1fr}
  .research-stats div{border-inline-end:0;border-bottom:1px solid var(--fx-line)}
  .research-stats div:last-child{border-bottom:0}
  .research-download{align-items:flex-start;flex-direction:column}
}

/* 手指可点区域:移动端所有可点元素至少 40px 高。
   这是 UX 里另一条有实证的硬规则,不是审美偏好。 */
@media (hover:none) and (pointer:coarse){
  .fx-table a, .fx-tag, .btn-sm{ min-height:40px; display:inline-flex; align-items:center }
}

/* ============================================================
   10. 资讯 —— 风险信息流
   设计意图见 templates/news.php 顶部注释。
   核心:来源分级是最强视觉信号;风险等级走左侧色条;
   三条要点是内容资产而不是可截断的字符串。
   ============================================================ */
.nf-wrap{ max-width:920px; margin:0 auto; padding:var(--s-7) var(--s-5) var(--s-9) }

.nf-head{ margin-bottom:var(--s-6) }
.nf-head h1{
  font-family:var(--serif); font-size:var(--fs-3xl); line-height:var(--lh-3xl);
  font-weight:650; letter-spacing:-.02em; color:var(--fx-ink); margin:0 0 var(--s-3);
}
.nf-lead{ font-size:var(--fs-base); line-height:1.75; color:var(--fx-text-2); margin:0; max-width:68ch }

/* ---- 筛选条 ---- */
.nf-filters{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-5);
  border-bottom:1px solid var(--fx-line); padding-bottom:var(--s-4) }
.nf-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:var(--fs-sm); font-weight:600; color:var(--fx-text-2);
  background:transparent; border:1px solid var(--fx-line); border-radius:var(--r-pill);
  padding:7px 14px; transition:all var(--t-fast); font-family:inherit;
}
.nf-chip span{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--c-muted) }
.nf-chip:hover{ border-color:var(--fx-text-4); color:var(--fx-ink) }
.nf-chip.is-on{ background:var(--fx-ink); border-color:var(--fx-ink); color:#fff }
.nf-chip.is-on span{ color:rgba(255,255,255,.6) }

/* ---- 列表 ---- */
.nf-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-3) }
.nf-item{
  position:relative; background:var(--fx-surface);
  border:1px solid var(--fx-line); border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5) var(--s-4) calc(var(--s-5) + 4px);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.nf-item:hover{ border-color:var(--fx-text-4); box-shadow:var(--shadow-1) }
/* 左侧风险色条 —— 扫一眼就知道哪条是预警 */
.nf-item::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:var(--r-md) 0 0 var(--r-md); background:transparent;
}
.nf-r-high::before{ background:var(--c-neg) }
.nf-r-med::before { background:var(--c-warn) }
.nf-r-low::before { background:var(--c-pos) }
.nf-r-edu::before { background:var(--fx-line) }

/* ---- 头部元信息 ---- */
.nf-top{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:var(--s-2) }
.nf-src{
  display:inline-flex; align-items:center; gap:4px;
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.03em;
  padding:3px 8px; border-radius:var(--r-xs);
}
/* 监管一手 —— 全站可信度最高的来源,给它最重的视觉 */
.nf-src-reg  { background:var(--fx-ink); color:var(--fx-gold) }
.nf-src-own  { background:var(--fx-gold-tint); color:var(--fx-gold-deep); border:1px solid var(--fx-gold-soft) }
/* 企业新闻稿 = 利益相关方自己发的,必须和媒体报道区分开 */
.nf-src-pr   { background:var(--c-warn-bg); color:#92400e }
.nf-src-media{ background:var(--fx-line-2); color:var(--fx-text-2) }
.nf-src-other{ background:var(--fx-line-2); color:var(--c-faint) }

.nf-dot { color:var(--c-faint); font-size:var(--fs-2xs) }
.nf-name{ font-size:var(--fs-2xs); color:var(--c-muted); font-weight:500 }
.nf-time{ margin-left:auto; font-family:var(--mono); font-size:var(--fs-2xs); color:var(--c-faint); white-space:nowrap }

.nf-risk{ font-size:var(--fs-2xs); font-weight:700; padding:2px 7px; border-radius:var(--r-pill) }
.nf-risk-high{ background:var(--c-neg-bg);  color:#b91c1c }
.nf-risk-med { background:var(--c-warn-bg); color:#92400e }
.nf-risk-low { background:var(--c-pos-bg);  color:#15803d }
.nf-risk-edu { background:var(--fx-line-2); color:var(--c-muted) }

/* ---- 标题 ---- */
.nf-title{ margin:0 0 var(--s-2); font-size:var(--fs-md); line-height:1.45; font-weight:650; letter-spacing:-.008em }
.nf-title a{ color:var(--fx-ink); text-decoration:none }
.nf-title a:hover{ color:var(--fx-gold-deep) }
/* 整卡可点,但保留标题的语义链接 */
.nf-title a::after{ content:''; position:absolute; inset:0 }

/* ---- 三条要点(这一页的核心资产) ---- */
.nf-bullets{ margin:0 0 var(--s-2); padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:4px var(--s-3) }
.nf-bullets li{
  position:relative; padding-left:11px;
  font-size:var(--fs-sm); line-height:1.6; color:var(--fx-text-2);
}
.nf-bullets li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:4px; height:4px; border-radius:50%; background:var(--fx-text-4);
}
.nf-excerpt{ margin:0 0 var(--s-2); font-size:var(--fs-sm); line-height:1.65; color:var(--fx-text-2) }

/* ---- 关联经纪商 ---- */
.nf-rel{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:var(--s-3);
  padding-top:var(--s-3); border-top:1px dashed var(--fx-line) }
.nf-rel-k{ font-size:var(--fs-2xs); color:var(--c-faint); letter-spacing:.04em }
.nf-rel-b{
  position:relative; z-index:1;   /* 盖过整卡链接,让它自己可点 */
  font-family:var(--mono); font-size:var(--fs-2xs); font-weight:600;
  color:var(--fx-text-2); background:var(--fx-line-2);
  padding:3px 8px; border-radius:var(--r-xs); text-decoration:none;
}
.nf-rel-b:hover{ background:var(--fx-gold-tint); color:var(--fx-gold-deep) }

.nf-ad{ list-style:none; margin:var(--s-2) 0 }

/* ---- 分页 ---- */
.nf-pager{ display:flex; gap:6px; justify-content:center; margin-top:var(--s-7); flex-wrap:wrap }
.nf-pager a, .nf-pager span{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--fx-line); border-radius:var(--r-sm);
  font-family:var(--mono); font-size:var(--fs-sm); color:var(--fx-text-2); text-decoration:none;
}
.nf-pager a:hover{ border-color:var(--fx-ink); color:var(--fx-ink) }
.nf-pager [aria-current]{ background:var(--fx-ink); border-color:var(--fx-ink); color:#fff; font-weight:700 }

@media (max-width:640px){
  .nf-wrap{ padding:var(--s-5) var(--s-4) var(--s-7) }
  .nf-item{ padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 4px) }
  .nf-time{ margin-left:0; width:100% }
  .nf-bullets{ flex-direction:column; gap:2px }
}

/* ============================================================
   11. 经纪商列表:两个决策列
   替换掉原来的「用户评价」(129 家全 0)和「更新」(全同一天) ——
   零区分度的列占着最值钱的横向空间,却帮不了任何人做决定。
   ============================================================ */
.bt-expo{ white-space:nowrap }
.bt-expo .fx-tag{ margin-right:4px }

/* 可追溯率:数字 + 细条,一眼比较行与行之间的差距 */
.bt-trace{ display:inline-flex; align-items:center; gap:7px; justify-content:flex-end }
.bt-trace-bar{
  width:44px; height:5px; border-radius:3px; background:var(--fx-line);
  overflow:hidden; flex:0 0 auto;
}
.bt-trace-bar i{ display:block; height:100%; background:var(--fx-gold); border-radius:3px }
.bt-trace b{ font-family:var(--mono); font-size:var(--fs-2xs); font-weight:700; color:var(--fx-text-2); min-width:30px; text-align:right }

@media (max-width:1024px){
  /* 窄屏优先保留分数与监管,可追溯率是次级信息 */
  .bt-table th:nth-child(7), .bt-table td:nth-child(7){ display:none }
}
@media (max-width:640px){
  .bt-table th:nth-child(3), .bt-table td:nth-child(3),
  .bt-table th:nth-child(6), .bt-table td:nth-child(6){ display:none }
}

/* 对比按钮:窄列里"+ 对比工具"必然折行成「+ 对比工 / 具」。
   这个动作用图标足够表达,文字放 title/aria-label 里不丢可访问性。 */
.bt-actcell{ width:44px; text-align:right }
.bt-cmp{
  width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--fx-line); background:#fff; border-radius:var(--r-pill);
  cursor:pointer; color:var(--fx-text-2); font-size:var(--fs-sm); line-height:1;
  transition:all var(--t-fast);
}
.bt-cmp:hover{ border-color:var(--fx-ink); color:var(--fx-ink); background:var(--fx-gold-tint) }
/* 总部/监管这类短词不该折行 */
.bt-table td:nth-child(3), .bt-tier .lab{ white-space:nowrap }

/* ============================================================
   12. 辖区保护事实卡(/regulator/{code} 与可复用处)
   ============================================================ */
.ju-card{
  background:var(--fx-surface); border:1px solid var(--fx-line);
  border-radius:var(--r-lg); padding:var(--s-5) var(--s-5) var(--s-4);
  margin-bottom:var(--gap-section);
}
.ju-offshore{ border-color:#f5d9b0; background:linear-gradient(180deg,#fffaf2,var(--fx-surface) 60%) }
.ju-head{
  font-family:var(--serif); font-size:var(--fs-lg); line-height:var(--lh-lg);
  font-weight:650; color:var(--fx-ink); margin:0 0 var(--s-4); letter-spacing:-.01em;
}
.ju-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s-4) var(--s-6); margin:0;
}
.ju-cell dt{
  font-size:var(--fs-2xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c-muted); margin:0 0 6px;
}
.ju-cell dd{ margin:0; font-size:var(--fs-sm); line-height:1.6; color:var(--fx-text) }
.ju-big{ font-family:var(--mono); font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; color:var(--fx-ink) }
.ju-dim{ color:var(--c-faint) }
.ju-warn{
  margin:var(--s-4) 0 0; padding:var(--s-3) var(--s-4);
  background:var(--c-warn-bg); border-radius:var(--r-sm);
  font-size:var(--fs-sm); line-height:1.65; color:#92400e;
}
.ju-foot{
  margin-top:var(--s-4); padding-top:var(--s-3); border-top:1px solid var(--fx-line-2);
  font-size:var(--fs-2xs); line-height:1.75; color:var(--c-muted);
}
.ju-foot a{ color:var(--fx-gold-deep); font-weight:600; margin-left:4px }
.ju-asof{ font-family:var(--mono); margin-left:8px; color:var(--c-faint) }

/* ============================================================
   13. 资讯详情 —— 与索引页共用来源分级/风险徽章的视觉语言,
   用户点进来不会觉得换了个网站。
   ============================================================ */
.nd-srclink{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--fs-sm); font-weight:600; color:var(--fx-gold-deep); text-decoration:none;
  border-bottom:1px solid var(--fx-gold-soft); padding-bottom:1px;
}
.nd-srclink:hover{ border-bottom-color:var(--fx-gold-deep) }

/* 关键要点:文章正文之前先给结论。这是"10 秒看懂"在详情页的兑现。 */
.nd-key{
  background:var(--fx-gold-tint); border:1px solid var(--fx-gold-soft);
  border-radius:var(--r-md); padding:var(--s-4) var(--s-5); margin:var(--s-5) 0 var(--s-6);
}
.nd-key h2{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fx-gold-deep); margin:0 0 var(--s-3);
}
.nd-key ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:var(--s-2) }
.nd-key li{
  position:relative; padding-left:16px;
  font-size:var(--fs-base); line-height:1.65; color:var(--fx-text);
}
.nd-key li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--fx-gold);
}

/* ============================================================
   14. Markdown 正文
   站里所有 _md 字段以前都是 htmlspecialchars + pre-wrap 直出,
   于是正文里满屏 "## 标题" 和 "1. 列表项"。现在走 md_html(),
   这里是它的排版。
   ============================================================ */
.md-body{ font-size:var(--fs-base); line-height:1.8; color:var(--fx-text); max-width:74ch }
.md-body > *:first-child{ margin-top:0 }
.md-body > *:last-child { margin-bottom:0 }
.md-body p{ margin:0 0 var(--s-4) }
.md-body h2{ font-family:var(--serif); font-size:var(--fs-xl); line-height:var(--lh-xl);
  font-weight:650; color:var(--fx-ink); margin:var(--s-6) 0 var(--s-3); letter-spacing:-.012em }
.md-body h3{ font-size:var(--fs-md); font-weight:650; color:var(--fx-ink);
  margin:var(--s-5) 0 var(--s-2) }
.md-body h4, .md-body h5, .md-body h6{
  font-size:var(--fs-base); font-weight:650; color:var(--fx-ink); margin:var(--s-4) 0 var(--s-2) }
.md-body ul, .md-body ol{ margin:0 0 var(--s-4); padding-left:1.35em }
.md-body li{ margin-bottom:6px }
.md-body li::marker{ color:var(--fx-text-4) }
.md-body blockquote{
  margin:var(--s-4) 0; padding:var(--s-3) var(--s-4);
  border-left:3px solid var(--fx-gold); background:var(--fx-gold-tint);
  border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--fx-text-2);
}
.md-body code{
  font-family:var(--mono); font-size:.92em; background:var(--fx-line-2);
  padding:2px 5px; border-radius:4px; color:var(--fx-ink);
}
.md-body a{ color:var(--fx-gold-deep); font-weight:500; border-bottom:1px solid var(--fx-gold-soft) }
.md-body a:hover{ border-bottom-color:var(--fx-gold-deep) }
.md-body hr{ border:0; border-top:1px solid var(--fx-line); margin:var(--s-6) 0 }
.md-body strong{ font-weight:650; color:var(--fx-ink) }

/* ============================================================
   15. 学习卡片
   level 与 category 翻译后会撞车(beginner→入门 / basics→入门),
   同一张卡出现两次"入门"。分类信息量更大 → 主位;
   等级与阅读时长是次级信息 → 右侧一行。
   ============================================================ */
.lc-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3) }
.lc-meta{ font-family:var(--mono); font-size:var(--fs-2xs); color:var(--c-muted); white-space:nowrap }

/* ============================================================
   16. 反诈检查 —— 全站用户意图最强的一页
   来的人可能已经入金了,所以判定结果之外必须给出「现在该做什么」。
   ============================================================ */
.sc-wrap{ max-width:820px; margin:0 auto; padding:var(--s-7) var(--s-5) var(--s-9) }
.sc-head{ margin-bottom:var(--gap-block) }
.sc-head h1{
  font-family:var(--serif); font-size:var(--fs-3xl); line-height:var(--lh-3xl);
  font-weight:650; letter-spacing:-.02em; color:var(--fx-ink); margin:0 0 var(--s-5);
}
.sc-form{ display:flex; gap:var(--s-2) }
.sc-form input{
  flex:1; min-width:0; padding:13px 16px; font:inherit; font-size:var(--fs-base);
  border:1px solid var(--fx-line); border-radius:var(--r-sm); background:#fff;
  font-family:var(--mono);
}
.sc-form input:focus{ outline:none; border-color:var(--fx-ink); box-shadow:0 0 0 3px rgba(0,0,0,.05) }
.sc-form button{
  padding:13px 26px; background:var(--fx-ink); color:#fff; border:0;
  border-radius:var(--r-sm); font:inherit; font-size:var(--fs-base); font-weight:650; cursor:pointer;
}

/* 判定横幅:等级用颜色 + 文字双编码,不能只靠颜色(色觉障碍者读不出) */
.sc-verdict{ border-radius:var(--r-lg); padding:var(--s-5); border:1px solid; margin-bottom:var(--gap-block) }
.sc-verdict h2{ font-size:var(--fs-xl); line-height:var(--lh-xl); font-weight:700; margin:var(--s-2) 0 var(--s-3) }
.sc-verdict p{ margin:0; font-size:var(--fs-base); line-height:1.75 }
.sc-vtop{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap }
.sc-vlabel{ font-size:var(--fs-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.75 }
.sc-domain{ font-family:var(--mono); font-size:var(--fs-sm); background:rgba(0,0,0,.06); padding:3px 8px; border-radius:var(--r-xs); word-break:break-all }
.sc-crit{ background:var(--c-neg-bg);  border-color:#f4b8b8; color:#7f1d1d }
.sc-high{ background:var(--c-warn-bg); border-color:#f0cf9a; color:#7c3a06 }
.sc-med { background:#fdfaf0; border-color:var(--fx-gold-soft); color:#6b5310 }
.sc-low { background:var(--c-pos-bg);  border-color:#b7dcc6; color:#14532d }
.sc-unk { background:var(--fx-line-2); border-color:var(--fx-line); color:var(--fx-text-2) }

.sc-h2{ font-size:var(--fs-md); font-weight:650; color:var(--fx-ink); margin:0 0 var(--s-4) }

/* 编号步骤 —— 「该做什么」必须是可执行的有序动作,不是一坨段落 */
.sc-steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-3) }
.sc-steps li{
  display:flex; gap:var(--s-3); align-items:flex-start;
  font-size:var(--fs-base); line-height:1.7; color:var(--fx-text);
}
.sc-steps li > span{
  flex:0 0 auto; width:22px; height:22px; margin-top:2px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--fx-ink); color:#fff; border-radius:50%;
  font-family:var(--mono); font-size:var(--fs-2xs); font-weight:700;
}
.sc-steps--warn li > span{ background:var(--c-neg) }

.sc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s-2) }
.sc-list li{ display:flex; gap:var(--s-3); align-items:baseline; font-size:var(--fs-sm); line-height:1.65 }

.sc-match{
  display:flex; align-items:center; gap:var(--s-3);
  background:var(--fx-surface); border:1px solid var(--fx-line); border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5); text-decoration:none; color:var(--fx-ink);
}
.sc-match:hover{ border-color:var(--fx-ink) }
.sc-arrow{ margin-left:auto; color:var(--c-muted) }

/* 受害者路径:无论查询结果如何都展示 */
.sc-victim{
  margin-top:var(--gap-section); padding:var(--s-5);
  background:#fffaf9; border:1px solid #f4d5d5; border-radius:var(--r-lg);
}
.sc-victim h2{
  font-family:var(--serif); font-size:var(--fs-lg); line-height:var(--lh-lg);
  font-weight:650; color:#7f1d1d; margin:0 0 var(--s-4);
}
.sc-cta{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-5) }
.sc-btn{
  display:inline-flex; align-items:center; padding:10px 18px;
  border:1px solid var(--fx-line); background:#fff; color:var(--fx-ink);
  border-radius:var(--r-pill); font-size:var(--fs-sm); font-weight:600; text-decoration:none;
}
.sc-btn--primary{ background:var(--fx-ink); border-color:var(--fx-ink); color:#fff }
.sc-btn:hover{ border-color:var(--fx-ink) }

@media (max-width:640px){
  .sc-wrap{ padding:var(--s-5) var(--s-4) var(--s-7) }
  .sc-form{ flex-direction:column }
  .sc-form button{ width:100% }
}

/* ============================================================
   17. 响应式栅格 —— 这一节是有代价换来的
   /brokers 的 `grid-template-columns:240px 1fr` 写在**内联 style 里**,
   媒体查询根本覆盖不到,于是手机上筛选栏和表格并排、内容被挤出屏幕。
   全站有 11 处同样的写法(broker 详情、监管机构、对比、地区、申诉、用户中心)。
   内联样式的真实代价就在这里:它不只是难维护,它让响应式失效。
   ============================================================ */
.fx-side-l, .fx-side-r, .fx-cols-2, .fx-cols-3, .fx-vs{ display:grid; align-items:start }
.fx-side-l{ grid-template-columns:240px minmax(0,1fr) }
.fx-side-r{ grid-template-columns:minmax(0,1fr) 320px }
.fx-cols-2{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.fx-cols-3{ grid-template-columns:repeat(3, minmax(0,1fr)) }
.fx-vs    { grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr) }

@media (max-width:1024px){
  .fx-side-r{ grid-template-columns:minmax(0,1fr) }
  .fx-cols-3{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  /* 右侧栏(评分面板等)在窄屏移到内容前面 —— 它是结论,应该先看到 */
  .fx-side-r > *:last-child{ order:-1 }
}
@media (max-width:768px){
  .fx-side-l{ grid-template-columns:minmax(0,1fr) }
  .fx-cols-2, .fx-cols-3{ grid-template-columns:minmax(0,1fr) }
  /* A vs B 在手机上竖排,中间的 "VS" 变成一条分隔 */
  .fx-vs{ grid-template-columns:minmax(0,1fr) }
  .fx-vs > *:nth-child(2){ justify-self:center; padding:var(--s-2) 0 }
}

/* 表格容器原本是 overflow:hidden(为了圆角),结果窄屏上表格被**裁掉**而不是可滚。
   用户看不到第 4 列之后的内容,还以为页面坏了。
   改成 overflow-x:auto 并保留圆角;加一条右侧渐隐提示"还能往右滑"。 */
.brokers-table-wrap{ overflow:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative }
@media (max-width:1024px){
  .brokers-table-wrap{
    background-image:linear-gradient(90deg, rgba(255,255,255,0) 85%, rgba(255,255,255,.95));
    background-repeat:no-repeat; background-position:right; background-size:44px 100%;
    background-attachment:local;
  }
}

/* 侧栏在桌面端 position:sticky 跟随滚动是对的,但单列堆叠后它就变成
   "粘在正文中间的一块",会跟着滚进表格里 —— /brokers 上表现为
   "Germany (4)" 这个筛选项孤零零浮在表格下方。
   窄屏一律取消 sticky。inline style 优先级高,只能用 !important 压。 */
@media (max-width:1024px){
  .fx-side-l > *, .fx-side-r > *{ position:static !important; top:auto !important }
}
/* 折叠后侧栏与主区之间要有呼吸,否则筛选和表格黏成一坨 */
@media (max-width:768px){
  .fx-side-l, .fx-side-r{ gap:var(--s-5) !important }
}

/* ============================================================
   18. 对比表 —— 对比的价值在于让差异跳出来
   以前每行长得一样,用户得逐个数字比;而三家「用户口碑 50.0」
   不是并列,是三家都没数据。
   ============================================================ */
.cmp-cell{ padding:14px 20px; position:relative }
.cmp-val{ display:flex; align-items:center; gap:12px }
.cmp-num{ font-family:var(--mono); font-size:var(--fs-base); font-weight:700; color:var(--fx-ink); min-width:44px }
.cmp-dim{ color:var(--c-faint); font-weight:600 }
.cmp-bar{ flex:1; max-width:140px; height:6px; border-radius:3px; background:var(--fx-line-2); overflow:hidden }
.cmp-bar i{ display:block; height:100% }
.cmp-na{ display:block; margin-top:4px; font-size:var(--fs-2xs); color:var(--c-faint) }

/* 领先项:左侧竖线 + 淡底。只在分差 ≥5 时出现 ——
   90.0 vs 89.8 也标"领先"是噪音,不是信息。
   不只用颜色,同时加了竖线,色觉障碍者也能分辨。 */
.cmp-cell.is-best{ background:linear-gradient(90deg, rgba(15,157,88,.07), transparent 70%) }
.cmp-cell.is-best::before{
  content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--c-pos); border-radius:0 2px 2px 0;
}
.cmp-cell.is-best .cmp-num{ color:#15803d }

/* ------------------------------------------------------------
   分享条 (_partials_share.php)

   品牌色只用在 hover / focus,静态时统一是中性灰 —— 一排彩色图标会把
   页面的视觉重心从内容抢走,而分享从来不是页面的主要行动。
   ------------------------------------------------------------ */
.fx-share{
  position:relative;                 /* 「更多」面板以整条分享条为定位基准,见下方说明 */
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--s-3);
  margin-top:var(--gap-block);
  padding-top:var(--s-4);
  border-top:1px solid var(--fx-line);
}
.fx-share__label{ flex:none }
.fx-share__row{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-2) }

.fx-share__btn{
  --share-brand:var(--fx-text-3);
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border:1px solid var(--fx-line);
  border-radius:8px;
  background:var(--fx-surface);
  color:var(--fx-text-3);
  font-size:18px; line-height:1;
  cursor:pointer;
  text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.fx-share__btn:hover,
.fx-share__btn:focus-visible{
  color:var(--share-brand);
  border-color:var(--share-brand);
  background:var(--fx-line-2);
}
.fx-share__btn:focus-visible{ outline:2px solid var(--share-brand); outline-offset:2px }
.fx-share__btn.is-done{ color:var(--c-pos); border-color:var(--c-pos) }

/* 「更多」用 <details>,没有 JS 也能展开 */
/* 面板**不能**以 <details> 为定位基准。<details> 位于按钮行末尾,
   在 375px 宽的手机上,296px 的面板从它的起始边展开会冲出屏幕右侧(实测溢出)。
   改以 .fx-share 为基准,面板永远从整条分享条的起始边展开;
   用 inset-inline-start 而非 left,阿拉伯语 RTL 下会自动镜像到右边。 */
.fx-share__more{ position:static; display:inline-block }
.fx-share__more > summary{ list-style:none }
.fx-share__more > summary::-webkit-details-marker{ display:none }
/* 必须显式隐藏。position:absolute 让面板脱离了 <details> 折叠时的隐藏机制,
   实测 Chrome 下折叠状态面板仍是 display:flex,整排「更多」按钮直接漏在页面上。
   不要删这条,也不要把 position 改回 static 就以为不需要它了。 */
.fx-share__more:not([open]) .fx-share__panel{ display:none }
.fx-share__panel{
  position:absolute; z-index:40; inset-inline-start:0; top:calc(100% + 4px);
  display:flex; flex-wrap:wrap; gap:var(--s-2);
  width:max-content; max-width:min(84vw, 296px);
  padding:var(--s-3);
  border:1px solid var(--fx-line);
  border-radius:10px;
  background:var(--fx-surface);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
}

/* 微信二维码弹层 */
.fx-share__qr{
  border:1px solid var(--fx-line); border-radius:12px;
  padding:var(--s-5); text-align:center;
  background:var(--fx-surface); color:var(--fx-text);
}
.fx-share__qr::backdrop{ background:rgba(0,0,0,.45) }
.fx-share__qr-title{ margin:0 0 var(--s-3); font-weight:600 }
.fx-share__qr canvas{ display:block; margin:0 auto; border-radius:6px }
.fx-share__qr-hint{ margin:var(--s-3) 0 0 }
.fx-share__qr-fail{ margin:var(--s-3) 0 0; color:var(--c-neg) }
.fx-share__qr-close{
  margin-top:var(--s-4); padding:6px 18px;
  border:1px solid var(--fx-line); border-radius:8px;
  background:var(--fx-surface); color:var(--fx-text-2); cursor:pointer;
}
.fx-share__qr-close:hover{ background:var(--fx-line-2) }

@media (max-width:560px){
  .fx-share__btn{ width:40px; height:40px; font-size:19px }   /* 触摸目标不小于 40px */
}