/* 让「要干活的页面」安静下来：不放视频、不叠毛玻璃。
 *
 * 🔴 为什么做（2026-09-20 实测，不是感觉）：
 *    龙哥报「网站整体特别卡」。在他那台 3440 宽的屏上，
 *    /bridge 这一页 **把渲染进程直接卡死了** —— 我远程执行一段 3 秒的帧率测量脚本，
 *    CDP 45 秒超时返回 "The renderer may be frozen or unresponsive"。
 *    成本来自三件事叠在一起：
 *      ① 一个 20.7 MB / 1920×1080 / 58.6 秒的视频常驻播放
 *      ② 它被 object-fit:cover 放大到 3440 宽（1.8 倍）
 *      ③ 上面还压着 5 个 backdrop-filter 毛玻璃元素，每一帧都要重新模糊一次
 *    而卡片本身已经是 94% 不透明度了 —— 毛玻璃在视觉上几乎看不出来，代价却是满的。
 *
 * 🔴 这同时也是把我们自己的规范补回来：
 *    设计资产总纲 04_选型与验收.md 的表面路由写着，
 *    交易壳（收银台/订单/转账）和产品壳（工作台）：空间感 = 无，动效 = 1，
 *    🔴「禁营销 3D 常驻到支付页」。视频背景本来就只该留在首页那种营销壳上。
 *
 * 🔴 不损失画质：视频撤掉之后露出的是它自己的 poster（background-v14.jpg，同一帧画面），
 *    不是换了一张图，也没有降分辨率。首页的视频一动没动。
 */
/* 这几页的 <video> 元素已经整个从 HTML 里删掉了（隐藏还会被浏览器下载，删掉才干净）。
   这条留着当第二道保险：将来谁把 video 加回来，也不会在这些页面上播。 */
body.quiet #scene-video { display: none !important; }

/* 毛玻璃全部去掉。卡片改成实心，颜色取自它原来的半透明值，肉眼看过去是同一张卡。 */
body.quiet *,
body.quiet *::before,
body.quiet *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.quiet .card,
body.quiet .launch-card,
body.quiet .bridge-scene .card { background: #f7fbfd; }
body.quiet header button,
body.quiet header select { background: rgba(255,255,255,0.14); }

/* ══════════════════════════════════════════════════════════════
   2026-09-21 · 把「干活的页面」彻底安静下来 —— 连背景图也去掉
   ──────────────────────────────────────────────────────────────
   上面那几条只关了视频和毛玻璃，**body 的静态背景图还在**
   （cinema.css: body{background:#254652 url('/media/background-v14.jpg')...}）
   所以功能页依然是「半透明卡片浮在草地天空上」。

   龙哥 2026-09-21 拿 Pons 的截图对照：
     「人家几个页面干干净净的，没有多余的任何复杂的东西，咱们那乱七八糟的」
   Pons 的干净来自三件事：纯色浅灰背景 + 实心白卡片 + 只有 3 个导航。
   前两件在这里补上，导航那件在 site-nav.js 做了（11 → 5）。

   🔴 首页【不加】body.quiet，电影感背景留给它 ——
      龙哥 2026-09-18 定过「我们只有这一个画面，其他所有功能都在视频上面实现」，
      那句话说的是首页那个壳，不是每一个表单页都要压着草地。
   ══════════════════════════════════════════════════════════════ */
body.quiet {
  background: #eef2f5 !important;
  color: #1d3d4c;
}
body.quiet .scene-shade,
body.quiet #scene-video { display: none !important; }

/* 顶栏原来是白字压在深色视频上，换成浅背景后必须改深，否则整条看不见 */
body.quiet .wordmark,
body.quiet .workspace-nav a,
body.quiet .workspace-nav .active,
body.quiet .network,
body.quiet header button,
body.quiet header select { color: #24485c; }
body.quiet .workspace-nav a { opacity: .72; }
body.quiet .workspace-nav a:hover,
body.quiet .workspace-nav .active { opacity: 1; }
body.quiet header { border-bottom: 1px solid #dde7ec; }
body.quiet header button,
body.quiet header select { background: #ffffff; border: 1px solid #d5e2e9; }
body.quiet .brand-mark { background: #ffffff; border: 1px solid #dde7ec; }
body.quiet .beta { border-color: #cfdde5; color: #5d7c8c; }

/* hero 区的白字同理。
   🔴 第一版我写的是 .intro h1，而 launch 页实际用的是 .launch-intro —— 选择器没对上，
      结果「Launch a token」是纯白字压在浅背景上，实测对比度 1.13（等于看不见）。
      改成属性选择器覆盖所有 *intro* 容器（launch-intro / directory-intro / bridge-intro / intro），
      不再靠一个个猜类名。判据不是肉眼看，是用 WCAG 相对亮度算对比度，全站扫一遍。 */
body.quiet .trade-title h1,
body.quiet [class*="intro"] h1,
body.quiet main.shell > section > h1 { color: #16323f; text-shadow: none; }
/* 2026-09-26 补：h1 里的 <em>（bridge 页「Every fee, before you sign.」）另有一条
   cinema.css .bridge-intro h1 em{color:white}，比上面那条更具体 —— 标题黑了、第二行还是白的。 */
body.quiet [class*="intro"] h1 em { color: #416a80; }
body.quiet [class*="intro"] p,
body.quiet [class*="intro"] span,
body.quiet .scene-eyebrow,
body.quiet .eyebrow { color: #55748a; text-shadow: none; }
/* 量出来 2.44~2.82 的那几处脚注标签，加深到 4.5 以上 */
body.quiet .spec-foot,
body.quiet .spec-foot span,
body.quiet .logo-pick span,
body.quiet #logo-placeholder { color: #5b7a8b; }

/* 卡片改成实心白，靠一道细边和极淡的影子分层，不用毛玻璃 */
body.quiet .card,
body.quiet .launch-card,
body.quiet .token-card,
body.quiet .chart-card,
body.quiet .trade-box {
  background: #ffffff;
  border: 1px solid #e2eaef;
  box-shadow: 0 1px 2px rgba(25,60,78,.04);
}
body.quiet .x-bar a { color: #4a6b7d; }

/* 发币人实际持仓偏高时标出来。这不是恐吓，是把买家本来就能自己查到的数
   直接摆在页面上 —— 我们的卖点一直是「每个数字你自己能验」。 */
.holding-hot { color: #a33a31 !important; }
p.split-note.holding-hot { color: #8a3a32 !important; font-weight: 500; }

/* 一键跨链买。只在这条链钱不够、别的链有钱时才出现，所以样式要显眼但不吵。 */
.xchain-box {
  margin-top: 12px; padding: 11px 13px;
  border: 1px dashed #b9cfdd; border-radius: 10px;
  background: #f4f9fc;
}
.xchain-head { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: #2b4a5b; }
.xchain-box .split-note { margin: 0; font-size: 11.5px; line-height: 1.6; }
.xchain-go {
  margin-top: 9px; width: 100%;
  font-size: 13px; padding: 9px 12px;
  border-radius: 8px; cursor: pointer;
}
.xchain-go[disabled] { opacity: .55; cursor: default; }

/* bridge 页的链覆盖表。每格一条链 + 实测耗时 —— 数字是量出来的不是估的，
   所以敢摆在最显眼的地方。 */
.chain-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px; margin: 18px 0 10px;
}
.chain-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 11px; border-radius: 9px;
  background: #ffffffcc; border: 1px solid #e2eaef;
}
.chain-cell b { font-size: 12.5px; font-weight: 600; color: #2b4a5b; }
.chain-cell span { font-size: 11px; color: #7b94a3; font-variant-numeric: tabular-nums; }
.bridge-sub { font-size: 11.5px; line-height: 1.65; margin-top: 2px; }
@media (max-width: 560px) { .chain-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; } }