/* ============================================================
   Loadout · 原型页面基架 proto-shell.css
   来源：redesign-home.html v123 style 块机械抽取（extract-shell.js 生成，勿手改结构；
   改样式请改本文件并同步回归首页观感）。所有新页面（games/hardware/...）通过
   <link rel="stylesheet" href="_shell/proto-shell.css"> 引用，页面专属样式写在各自页内 <style>。
   已含：设计 token / 基础 / 两侧贴纸带 / 滚动进度条 / 导航+搜索下拉 / 按钮体系 /
        区块标题+贴纸眉标 / 卡片语言 / 页脚横条 / 愉悦层(v42/v51) / 交互升级层(v118 wx-)
        —— 含少量首页专属残留（hero/涂鸦/贴纸带移动端），对子页无害，待模板稳定后修剪。
   ============================================================ */
:root{
  /* v80 全站换色（用户拍板对齐参考图）：**冷紫白底 + 蓝紫为主色**，品红只留给数字/热标。
     实测参考图：底色 #f5f2fd（B>R 偏紫）、卡片 #fcfcfe、强调色相集中在 240–270° 蓝紫（3752px）+ 300–315° 品红（1562px）。
     旧方案是暖米底 #fbfaf8 + 莓红 330° 为主，故整体转冷紫调。 */
  --bg:#f5f2fd; --surface:#fcfcfe; --surface-2:#f2eefd;
  --text:#171432; --muted:#6b6788; --border:rgba(72,52,160,.14);
  --border-2:rgba(72,52,160,.30);/* v106 L2 控件描边：卡片统一深墨后，控件仍用 .14 淡边会发虚 → 提一档 */
  --track:rgba(72,52,160,.08); --chip:rgba(91,69,255,.07);
  --radius:16px; --ease:cubic-bezier(.2,.8,.2,1);
  --brand:#5b45ff; --brand-2:#8b5cf6; --on-brand:#ffffff;/* 蓝紫主色：白字 5.33:1 过 AA */
  --accent:#7c5cff;      /* 蓝紫·填充级：对比条 fill、hover 边框 */
  --accent-btn:#5b45ff;  /* 蓝紫·按钮底（两主题同值）：白字 5.33:1 过 AA */
  --accent-ink:#4b35d6;  /* 蓝紫·文字级（小字链接/小价格）：紫白底 6.84:1 过 AA */
  --accent-num:#f43d92;  /* 品红·大号数字/热标专用：仅用于 ≥24px 或 ≥18.66px bold；v80 紫底实测 3.15:1（#ff4d9e 只有 2.71 不达标） */
  --on-accent:#ffffff;   /* 按钮文字：白字（配 --accent-btn 蓝紫底） */
  --ok:#22c55e; --warn:#ef9f27; --bad:#ef4444;
  /* v107 候选卡补的 4 个 token（2026-09-16）：
     --muted-2 比 --muted 再深一档 —— 规格行 / 副标题这类 11.5px 小字用，白卡上 6.56:1（--muted 是 5.23:1）；
     --ok-ink / --bad-ink 是**文字级**语义色 —— --ok #22c55e 当文字用只有 2.22:1（线上现状就是这样，
       「更便宜」的差价根本读不清），-ink 版实测 6.96:1 / 6.31:1；
     --trough 是候选卡外面那层凹槽的底（浅紫、无边框）—— 卡片白底浮在上面，材质不同 ⇒ 不构成盒中盒。 */
  --muted-2:#5c5878; --ok-ink:#166534; --bad-ink:#b91c1c;
  --trough:color-mix(in srgb,var(--accent) 5%,var(--surface-2));
  /* v94 标签单色（紫系）：浅色对白底 6.3:1 */
  --t1:#5b45ff;
  /* v80 渐变：仍只做品牌锚点（logo dot / 进度条 / 区块眉标 / h1 强调 / 图标块），不铺面。
     三段整体提浅到「深墨字 --pop-ink 全段过 AA」的区间：#7c8cff 4.6 / #a98cff 6.1 / #ff8fc4 7.9
     （旧深渐变 #ff5aa3→#9b5cff→#5b8cff 配深字是 6.62/4.91/6.07，换主色后蓝段加深会掉到 3.6，故提浅） */
  --grad:linear-gradient(135deg,#7c8cff 0%,#a98cff 50%,#ff8fc4 100%);
  --grad-rev:linear-gradient(135deg,#ff8fc4 0%,#a98cff 50%,#7c8cff 100%);
  --stroke:#171432;            /* 描边：实色深墨紫 */
  --edge:#171432;              /* v105 卡片描边：浅色主题 = 实色深墨（贴纸/票券的硬边语言） */
  --pop:rgba(91,69,255,.26);   /* 兼容旧规则：硬投影色（v80 卡片统一改柔阴影 --sh，仅贴纸类仍在用） */
  --pop-ink:#12082a;           /* 渐变底字色 */
  /* v80 柔阴影（替代 v72 硬投影 offset-shadow，对齐参考图圆润卡片 + 柔和投影） */
  --sh:0 10px 24px -12px rgba(60,40,160,.26);
  --sh-h:0 16px 34px -14px rgba(60,40,160,.34);
}
html[data-theme="dark"]{
  --bg:#0f0e17; --surface:#171625; --surface-2:#201e30;
  --text:#eceafc; --muted:#9b98bd; --border:rgba(255,255,255,.13); --border-2:rgba(236,234,252,.28);/* v106 L2 (dark) */
  --track:rgba(255,255,255,.09); --chip:rgba(255,255,255,.07);
  --brand:#a78bfa; --brand-2:#8fb0ff; --on-brand:#0f0e17;/* 深色主题紫提亮 #a78bfa */
  --accent:#8b7bff; --accent-btn:#5b45ff; --accent-ink:#c4b5fd; --accent-num:#ff8fc4; --on-accent:#ffffff;/* 按钮两主题同蓝紫底 + 白字 */
  --grad:linear-gradient(135deg,#8fb0ff 0%,#c4b5fd 50%,#ff8fc4 100%);
  --grad-rev:linear-gradient(135deg,#ff8fc4 0%,#c4b5fd 50%,#8fb0ff 100%);
  --stroke:#eceafc; --pop:rgba(167,139,250,.32); --pop-ink:#12082a;
  --edge:rgba(236,234,252,.46);/* v105 深色主题不能直接拿 --stroke 当卡片描边（实色浅边会变成发光亮边，太抢）→ 降透明度 */
  --t1:#a78bfa;/* v94 标签单色（深色主题提亮，对 #171625 约 7.5:1） */
  --sh:0 10px 26px -12px rgba(0,0,0,.60);
  --sh-h:0 18px 38px -14px rgba(0,0,0,.72);
  /* v107 候选卡 4 个 token · 深色主题提亮（浅色那套深绿/深红在深底上会糊掉） */
  --muted-2:#b3b0d0; --ok-ink:#4ade80; --bad-ink:#f87171;
  --trough:color-mix(in srgb,var(--accent) 12%,var(--surface-2));
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);overflow-x:clip;position:relative;/* v72：position:relative 供 .rails 撑满整份文档高度（随滚动，非 fixed） */
  font-family:'Inter','Noto Sans SC',system-ui,-apple-system,sans-serif;
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s}
h1,h2,h3,.disp{font-family:'Sora','Noto Sans SC',system-ui,sans-serif;letter-spacing:-.01em}
.wrap{max-width:1320px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
/* 1920 留白填补：极淡网点纹理（2-3% 级），有质感不抢内容。
   v72：原版「拼贴装饰带」以 .rails 低密度回注到宽屏两侧（见下），网点降级为纯底纹，两者叠用 */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(0,0,0,.028) 1px,transparent 1px);
  background-size:26px 26px}
html[data-theme="dark"] body::before{background-image:radial-gradient(circle,rgba(255,255,255,.035) 1px,transparent 1px)}
a{color:inherit;text-decoration:none}

/* ---------- v72 两侧拼贴带（原版 side-rails 的克制版）：硬件线条图标 + 游戏名歪贴纸 + 速度线小块 ----------
   纪律：① 只在 ≥1500px 出现（1320 栅格两侧需留 ≥90px，1440 屏不挤内容）；
        ② 全部 aria-hidden + pointer-events:none，不进无障碍树、不吃点击；
        ③ 随文档滚动（absolute 撑满 body），不是 fixed，滚动时不同区块看到不同贴纸；
        ④ 呼吸动画只在 prefers-reduced-motion:no-preference 下启用。 */
.rails{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;display:none}
@media (min-width:1500px){.rails{display:block}}
.rail{position:absolute;top:0;bottom:0;width:calc((100vw - 1320px)/2);min-width:70px}
.rail.l{left:0}.rail.r{right:0}
.rail-i{position:absolute;display:flex;align-items:center;justify-content:center;color:var(--muted);opacity:.5}
.rail-i svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rail-i.p{color:var(--brand);opacity:.55}
.rail-i.b{color:var(--brand-2);opacity:.5}
.rail-c{position:absolute;display:none;font-family:'Sora',sans-serif;font-weight:800;font-size:9px;letter-spacing:.1em;
  padding:3px 8px;background:var(--surface);border:1.5px solid var(--stroke);box-shadow:var(--sh);
  color:var(--muted);white-space:nowrap}
@media (min-width:1780px){.rail-c{display:inline-block}}
.rail-s{position:absolute;width:46px;height:46px;opacity:.12;
  background:repeating-linear-gradient(45deg,transparent,transparent 4px,var(--brand) 4px,var(--brand) 5px)}
@media (prefers-reduced-motion:no-preference){
  .rails{animation:railBreathe 16s ease-in-out infinite alternate}
}
@keyframes railBreathe{from{opacity:.72}to{opacity:1}}
/* 全站统一键盘焦点环（.card 等已有专属 :focus-visible 的会按后置规则覆盖）；v69 焦点=粉（文字级粉，白底 4.56:1 过非文字 3:1） */
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:4px}

/* 滚动进度条 */
/* v72：滚动进度条改用三色渐变（品牌锚点 ①），纯色粉 → logo 渐变，滚动时是唯一会「走」的品牌条 */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:99;transition:width .05s linear}

/* 原型条 */
.navbar{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:saturate(160%) blur(8px)}
.nav-in{max-width:none;margin:0;padding:0 max(24px,2.4vw);display:flex;align-items:center;gap:16px;height:64px}
.nav-logo{font-family:'Sora',sans-serif;font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;color:var(--text)}
/* v90c：顶导 Logo 换成原版图片（原是「● Loadout」文字 + logo-dot）；高度 24px 对齐 64px 导航条 */
.nav-logo-img{height:24px;width:auto;display:block}
/* v72 品牌锚点 ②：logo dot 补齐蓝色段，与 --grad 同序（粉→紫→蓝），小尺寸下三段合一仍是品牌色 */
.logo-dot{width:11px;height:11px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(91,69,255,.55)}
.nav-links{display:flex;gap:2px}
.nav-link{font-size:13px;color:var(--muted);padding:6px 12px;border-radius:8px;transition:color .15s,background .15s}
.nav-link:hover{color:var(--text);background:var(--chip)}
.nav-link.on{color:var(--text);font-weight:600}
.nav-search{flex:1 1 auto;display:flex;justify-content:center;padding:0 22px;min-width:0}
/* v29：首页不显示导航搜索——Hero 已有主搜索，导航只留 logo/链接/工具（子页无 data-page=home 即常驻）
   🔄 2026-09-23（R93d 第四轮，用户拍板「搜索页同屏一个」）：**搜索页也隐藏** ——
      该页页头自带一个更大的 `.sr-search`，两个搜索框同屏 = 同一功能摆两遍。
      ⇒ `data-page` 因此有了两个取值：`home`（Hero 有主搜索）/ `search`（页头有主搜索），两者都退让。 */
html[data-page="home"] .nav-search,
html[data-page="search"] .nav-search{display:none}
/* 🚨 2026-09-23（R93x 对齐）：这条推力**必须与上面那条隐藏规则同域** ——
   `.nav-links{margin-right:auto}` 是把「它右边的一切」顶到容器末端的那个弹簧。
   子页有搜索框时，弹簧其实是 `.nav-search{flex:1 1 auto}`（它把工具组顶到右边）；
   而首页/搜索页把搜索框 display:none 了 ⇒ 弹簧没了 ⇒ 工具组**掉回 logo 右边**
   （实测搜索页 1440 下工具组左缘 437，首页 1200.9）。
   📌 用物理属性 `margin-right`（不是 `margin-inline-end`）：实测两种方向都对 ——
      LTR 下吸右侧余量把后面全顶到右缘，RTL 下同一侧余量把后面全顶到左缘，正是两边想要的效果。
      而 `.nav-tools` 那条反过来必须用**逻辑**属性，原因见 ≤1200 媒体块里的注释。 */
html[data-page="home"] .nav-links,
html[data-page="search"] .nav-links{margin-right:auto}
/* 🔄 2026-09-23「搜索框按首页的来」：圆角 10 → 12，与首页 Hero 的 .hs-wrap 同值（形状语言统一）。
   🔑 底色保持 --surface-2 是有意的：本壳贴在 .navbar 上，而 .navbar 的底就是 --surface，
      换成 --surface 会把搜索框糊进导航条里。首页 Hero 反过来（底是 --bg ⇒ 壳用 --surface）。
      这条「底色随场景」是全站唯一允许的差异，别机械照抄（判据见 .workbuddy/artifacts/R93-搜索框一致性-实测与方案.md）。
   🔑 本壳不加落影：导航条是 sticky，且自身已有 .navbar.scrolled 的投影，再叠一层会糊到下面内容上。
   ⚠️ 尺寸按角色取 md 档（600 / 40.8 / 13px），与首页 lg 档（640 / 60 / 15px）同形不同尺。 */
.ns-inner{position:relative;display:flex;align-items:center;gap:8px;flex:1;max-width:600px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:12px;padding:0 6px 0 12px;transition:border-color .15s}
.ns-inner:focus-within{border-color:var(--accent-ink)}
.nav-search input{flex:1;min-width:0;border:none;background:transparent;font:inherit;font-size:13px;color:var(--text);padding:9px 0;outline:none}
/* 🔄 2026-09-23：按钮圆角 7 → 9，与首页 .btn-pri 的按钮配方同值（配色仍走铁律㉖：--accent-btn + --on-accent）。 */
.nav-search button{font-family:'Sora',sans-serif;font-size:12px;font-weight:600;color:var(--on-accent);background:var(--accent-btn);border:none;border-radius:9px;padding:5px 14px;cursor:pointer;white-space:nowrap;transition:filter .15s,transform .15s}
.nav-search button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.search-drop{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;box-shadow:0 16px 40px -18px rgba(0,0,0,.3);overflow:hidden;z-index:70}
.search-drop .sd-item{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border)}
.search-drop .sd-item:last-child{border-bottom:none}
.search-drop .sd-item:hover{background:var(--chip)}
.search-drop .sd-item.kb-on{background:var(--chip)}
.search-drop .sd-item .ic{color:var(--accent-ink);font-size:11px}
.search-drop .sd-item .nm{color:var(--text)}
.search-drop .sd-item .tag2{margin-left:auto;font-size:11px;color:var(--muted)}
.search-drop .sd-empty{padding:12px;font-size:12px;color:var(--muted);text-align:center}
.nav-tools{display:flex;gap:8px;align-items:center}
.nd{position:relative}
.nd .nd-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:156px;background:var(--surface);border:1px solid var(--border-2);border-radius:12px;padding:6px;box-shadow:0 16px 40px -18px rgba(0,0,0,.32);z-index:70}
/* 🚨 v126 桥接空隙（缺陷①）：菜单 `top:calc(100% + 8px)`，而菜单是 absolute、不撑高 `.nd`
   → `.nd` 的盒子只到**按钮底边**。指针从按钮往下走，一进那 8px 空隙就出了 `.nd` 的 border-box，
   祖先 `:hover` 立刻断 → 菜单 `display:none` → **指针永远到不了菜单**（实测 y=48 开、y=50 关）。
   这条 `::before` 什么都不画，只是把空隙在几何上纳进**菜单自己的命中区**：
   指针先踩到它 → 菜单仍 :hover → `.nd` 仍 :hover → 菜单不关。
   ⚠️ 不能用 `margin-top` 顶替：absolute 元素的 margin 区不参与命中测试，等于没桥。
   ⚠️ 数值：菜单 border-box 顶 - 1px 边框 = padding-box 顶；`top:-9px` 正好回到按钮底边，
      `height:10px` 覆盖 8px 空隙 + 2px 进菜单，**不压到按钮**（否则按钮底部 1px 点不动）。 */
/* 🆕 2026-09-12 设置三合一：桥接条从 `.nd-menu::before` 改挂 `.nd::after`。
   原因：.nd-menu 现在带 `overflow:auto`（合并后菜单高 ~580px 需限高内滚），
   非 visible 的 overflow 会把 top:-9px 的外侧 ::before 整条裁掉 → 8px 空隙失去命中区
   → 指针一进空隙 .nd:hover 断 → 菜单关（v126 缺陷复发，实测 N2 y=49 即断）。
   .nd 自身无 overflow 裁剪，::after 从 .nd 底边向下铺 10px，覆盖空隙 + 菜单首行。 */
.nd::after{content:'';position:absolute;top:100%;left:0;right:0;height:10px}
/* 🚨 v126 互斥（缺陷②）：`.open`（点击置位）与 `:hover`（纯 CSS）原本是**两条并列规则**，
   互不知情 → 点开 A 再把指针移到 B，两个菜单同时可见。`.nd-off` = 「用户刚做了决定，
   指针没离开前先别按 hover 展开」，由 JS 在「点触发器关闭」和「点了菜单项」两处挂上，
   在 `mouseleave` 摘掉；`:not(.nd-off)` 同时压住 hover 与 .open 两条路径。 */
.nd:hover:not(.nd-off) .nd-menu,.nd.open:not(.nd-off) .nd-menu{display:block}
.nd .nd-menu button{display:block;width:100%;text-align:left;font:inherit;font-size:12.5px;padding:6px 10px;border:none;background:transparent;color:var(--text);border-radius:7px;cursor:pointer}
.nd .nd-menu button:hover{background:var(--chip)}
/* v90 B：顶导用户区 —— 玩家头像组 + 登录/注册（对齐参考图右端）。
   ⚠️ v90b 暂时停用：用户说「暂时没有」账号体系 → HTML 已移除，CSS 保留待用。
      恢复方法：把 .nav-user 那块 HTML 加回顶导即可，字号/圆角/描边都已调好，不用重写。
   头像组是「社区感」证据（+2.4k 玩家在用），纯装饰 → aria-hidden，不进 tab 序。
   按钮仍守 v70 体系：注册=实心主操作（--accent-btn），登录=描边次操作；渐变不铺面。 */
.nav-user{display:flex;align-items:center;gap:9px}
.avatar-stack{display:flex;align-items:center}
.avatar-stack .av{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Sora',sans-serif;font-size:10px;font-weight:800;color:#fff;background:var(--av,var(--accent));
  border:2px solid var(--surface);margin-left:-8px;box-shadow:0 2px 6px -2px rgba(60,40,160,.45)}
.avatar-stack .av:first-child{margin-left:0}
.avatar-stack .av.more{background:var(--text);color:var(--bg);font-size:8.5px;width:auto;padding:0 7px;border-radius:99px;letter-spacing:.02em}
.nav-login,.nav-signup{font-family:'Sora','Noto Sans SC',sans-serif;font-size:12px;font-weight:600;
  border-radius:9px;padding:7px 14px;cursor:pointer;white-space:nowrap;
  transition:transform .15s var(--ease),box-shadow .18s,filter .15s,border-color .15s}
.nav-login{background:transparent;color:var(--text);border:1px solid var(--border-2)}
.nav-login:hover{border-color:var(--accent-ink);background:var(--chip)}
.nav-signup{background:var(--accent-btn);color:var(--on-accent);border:none}
.nav-signup:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.nav-signup:active{transform:none;filter:brightness(.96)}
/* 断点 820 → 1200（2026-09-10 第九轮）：821–1100 这一带原来**同时**塞 6 个栏目名 + 搜索框 + 5 个工具，
   实测已经破版 —— 1024 ja 下「ホーム/ゲーム/ハードウェア」全被压成 2–3 行、货币按钮「¥/./JPY」折三行、
   搜索按钮压在工具上；900 en 下 BUILD SHEETS 被裁成「B… S…」、DISPATCH 被 $ USD 盖住、placeholder 拦腰截断。
   算过账：en 要同时装下 栏目名435 + placeholder247 + 工具311 + logo47 + 边距，需要 ≥1254px；
   ja 需要 ≥1240px。所以要么把断点抬到 1300（1280 笔记本会丢栏目名），要么缩短 placeholder —— 第九轮选了后者：
   placeholder 压到 ~110–150px，断点抬到 1200（en/ja 计算值 1152/1157 + 约 45px 余量）。
   >1200 保留完整导航；721–1200 走「汉堡 + 搜索 + 工具」（搜索是转化主路径，优先保留）；
   ≤720 见下面的手机统一口径。导航能力一条不丢：6 个栏目名在 .nav-menu 里原样可用。
   🚨 2026-09-23（R93x 对齐）：本档 `.nav-links` 被 display:none ⇒ 上一条「弹簧」跟着失效，
      而首页/搜索页**又没有** `.nav-search{flex:1 1 auto}` 那个备用弹簧 ⇒ 工具组会掉回 logo 右边。
      所以这两页在本档必须自己把工具组顶到边上（首页一直有这条，本轮补上搜索页）。
   ⚠️ 这里用 **`margin-inline-start`（逻辑属性）而不是 `margin-left`**：后者是物理属性，
      `dir=rtl`（ar）下会把工具组推错边（实测 ar 1440 工具左缘 317，应为 35）。
      注意它和上面 `.nav-links` 那条**方向相反**是**故意**的 —— 一个是「把后面顶到末端」，
      一个是「本元素自己吃起始侧余量」，语义本就不同，别为了对称改成同一种。 */
@media(max-width:1200px){.nav-links{display:none}.nav-search{flex:1 1 auto}.avatar-stack{display:none}
  html[data-page="home"] .nav-tools,
  html[data-page="search"] .nav-tools{margin-inline-start:auto}}
/* ≤560px 顶导只剩 logo + 货币/主题/语言 + 注册：登录降级（注册是转化主路径，优先保留） */
@media(max-width:560px){.nav-login{display:none}}
.tag{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--chip);color:var(--muted);white-space:nowrap}
.spacer{flex:1}
.sbtn{font:inherit;font-size:12px;padding:5px 12px;border-radius:8px;cursor:pointer;background:transparent;color:var(--text);border:1px solid var(--border-2);transition:background .15s,border-color .15s}
.sbtn:hover{background:var(--chip);border-color:var(--muted)}
.sbtn.on{background:var(--text);color:var(--bg);border-color:var(--text)}
/* 2026-09-13 无障碍：导航里的图标按钮实测 28×30 —— 刚够 WCAG 2.2 AA 的 24×24 下限，
   但手机上（尤其带成就角标那个）偏窄。窄屏统一抬到 **32×32**：
   ⚠️ 只动 min-width/min-height，不动 font-size 与 padding —— 否则会顶开导航栏高度。 */
@media(max-width:860px){
  .sbtn.icon-btn{min-width:32px;min-height:32px;padding:5px 8px}
}


/* ---------- 融合版：统一按钮体系（v70 主操作=莓红底白字，次操作=描边；半径/字重/位移反馈全站一致） ---------- */
.btn-pri{font-family:'Sora','Noto Sans SC',sans-serif;font-size:12.5px;font-weight:600;color:var(--on-accent);
  background:var(--accent-btn);border:none;border-radius:9px;padding:8px 18px;
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  transition:transform .15s var(--ease),box-shadow .18s,filter .15s}
.btn-pri:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--accent) 60%,transparent);filter:brightness(1.05)}
.btn-pri:active{transform:none;filter:brightness(.96)}
.btn-ghost{font:inherit;font-size:12.5px;font-weight:600;color:var(--text);background:transparent;
  border:1px solid var(--border-2);border-radius:9px;padding:7px 16px;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.btn-ghost:hover{border-color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* Hero */
.hero{padding:52px 0 30px;text-align:center}
.hero-eyebrow{font-family:'Sora','Noto Sans SC',sans-serif;font-size:12px;font-weight:600;letter-spacing:.22em;color:var(--brand);margin-bottom:14px}/* v88 11→12 让 hero 副标「LOADOUT·…」在 1440 宽屏下更显 */
/* v90c：首屏大 Logo —— 直接用原版站的图片（已复制到原型 assets/img/loadout_logo.webp），不再用文字/SVG 拼。
   尺寸沿用原版量级：clamp(88px,11vw,132px)，让 Logo 当首屏主角。 */
.hero-logo-img{display:block;height:clamp(100px,13vw,158px);width:auto;margin:0 auto 20px}/* v90c：原版是 clamp(110,16vw,180)，这里取稍收敛的一档，但比首版 132 更接近原版量级 */
/* v90c：h1 由「44px 大标题」降级为「标语」——主角让给 Logo（参考图版式）。
   --muted #6b6788 在 --bg #f5f2fd 上 ≈5.6:1，过 AA；深色主题下 muted 同步提亮。 */
/* v100：既然 H1 改成了观点句，就不能再用 muted 灰 22px 当副标题读——提为 24px / 700 / --text，
   Logo 仍是首屏主角（158px 高），但这句话得被看见、被记住 */
.hero h1{font-size:24px;font-weight:700;margin:0 auto 26px;line-height:1.5;max-width:30ch;cursor:pointer;
  color:var(--text);letter-spacing:.01em;transition:transform .12s var(--ease);font-family:'Sora','Noto Sans SC',sans-serif}
.hero h1:hover{transform:translateY(-1px)}
.hero .hero-sub{margin:0 auto;color:var(--muted);max-width:58ch;font-size:15px;line-height:1.7}
/* v52 数据带票据脚注化：上下虚线 hairline + mono 数字——首屏就有「出货单」身份，不再像通用 SaaS hero */
/* v52 票据边缘竖排备注（桌面端）：像小票侧边的孔位注释，呼应全站 mono 编号语言 */
/* v112：.hero-side（首屏两侧竖排小字）整组删除，样式一并清掉，不留死代码 */
.hero .budget{margin:28px auto 0;max-width:460px;text-align:left}
/* 移动端 hero 尺寸统一在文件尾部 640px 断点单点定义（此处不再重复声明） */
.hint{margin-top:14px;font-size:12px;color:var(--muted);padding:10px 14px;border:1px solid var(--border-2);border-radius:10px;display:inline-block}
.hint kbd{font-family:'Sora',sans-serif;font-size:11px;background:var(--chip);border:1px solid var(--border-2);border-radius:4px;padding:1px 5px;margin:0 1px}

/* ---------- v90 A：首屏涂鸦背景层（对齐参考图：游戏名贴纸 + 手绘箭头 + 手写体散布） ----------
   取代旧 Heartsteel 极光 SVG（v90 已删）：极光是「氛围贴图」，涂鸦是「玩家态度」，后者才对得上游戏语境。
   硬规则：① 纯装饰 → aria-hidden + pointer-events:none，不参与对比度审计；
          ② z-index:0 落在 .wrap 内容之下，卡片不透明会自然遮住，只在留白/缝隙可见；
          ③ 移动端 ≤900px 隐藏手写体与箭头、贴纸缩小，避免干扰阅读。 */
.doodle-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.dl-sticker{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r,0deg));
  font-family:'Sora','Noto Sans SC',sans-serif;font-size:12.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;color:var(--accent-ink);
  background:var(--surface);border:1.5px solid var(--stroke);border-radius:5px;padding:4px 11px;
  box-shadow:var(--sh);opacity:.9}
.dl-sticker.mag{color:var(--accent-num)}/* 品红只留给热标/数字，涂鸦里作为点缀出现 1–2 个 */
.dl-script{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r,-6deg));
  font-family:'Sora',sans-serif;font-size:clamp(24px,3.2vw,44px);font-weight:800;font-style:italic;
  letter-spacing:-.015em;white-space:nowrap;color:var(--accent-ink);opacity:.12}
.dl-arrow{position:absolute;left:var(--x);top:var(--y);width:var(--w,72px);transform:rotate(var(--r,0deg));opacity:.45}
html[data-theme="dark"] .dl-sticker{opacity:.72}
html[data-theme="dark"] .dl-script{opacity:.15}
@media(max-width:900px){.doodle-layer{display:none}}/* ≤900px 整层关掉：右侧贴纸（left 79–83%）在窄屏会被裁成半截，且会压住居中的 Hero 正文 —— 涂鸦是桌面端的氛围加成，移动端不值得冒这个险 */
/* v100 移动端贴纸带（首屏下方，替代桌面端散布涂鸦；桌面 display:none） */
.dl-strip{display:none}
@media(max-width:900px){
  .dl-strip{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 24px}
  .dl-strip .dl-s{font-family:'Sora','Noto Sans SC',sans-serif;font-size:10px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;white-space:nowrap;color:var(--accent-ink);background:var(--surface);
    border:1.5px solid var(--stroke);border-radius:5px;padding:3px 9px;box-shadow:var(--sh);opacity:.92}
  .dl-strip .dl-s:nth-child(2){color:var(--accent-num);transform:rotate(-2deg)}
  .dl-strip .dl-s:nth-child(3){transform:rotate(1.5deg)}
}
.hero{position:relative}
.hero h1 em{font-style:normal;background:linear-gradient(92deg,#ff4d9e,#8b5cf6 55%,#5b45ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 融合版：图标化工具按钮（对齐旧版 navbar 图标语言） ---------- */
.sbtn.icon-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px}
.sbtn.icon-btn svg{width:14px;height:14px;display:block}
/* [防呆 2026-09-10] 导航工具按钮里的 svg 一律 14px。
   背景：hardware.html 的 #langBtn 漏写 .icon-btn → 内联 svg 无尺寸约束，撑到 29px，
   390 视口「行1 = 汉堡 + logo + 工具」溢出 2px（docW 392）。基架级兜底，作用域仅 .nav-tools，
   不碰别处的 .sbtn（如 .sort-group）。新页面照抄导航时即使漏类名也不会再溢出。 */
.nav-tools .sbtn svg{width:14px;height:14px;display:block}

/* 区块 */
/* v90 F：区块分割线回注 + 间距①更宽松（区块上下 +40%）。
   ⚠️ 历史反转：v71 用户说过「分割线去掉吧，不好看」——当时撤的是「通栏硬线 + 线上下没留白」。
   这次按参考图重做成**纸张分页感**：线随内容区宽度、用最淡的 --border、线上下留足呼吸（50/10 → 70/18）。
   若后续仍有异议，删掉 .blk 的 border-top 一行即可回到 v71，无需找备份。 */
.blk{padding:70px 0 18px;margin-top:0;border-top:1px solid var(--border)}
/* v90b：首屏（Hero +「大家都在查」热门词）与第一个区块之间**不画线**——用户反馈那条横线多余。
   首屏本身已有足够区分度，区块之间（02 起）的分割线保留。 */
.blk:first-of-type{border-top:none}
.blk-head{display:flex;align-items:baseline;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.blk-head h2{font-size:24px;margin:0;font-weight:700;letter-spacing:-.015em}
/* v68 标题前小方点：logo-dot 的缩小回声（品牌紫，全页唯一装饰记号），替代被撤掉的色条 */
.blk-head h2::before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--brand);margin-right:10px;vertical-align:2px}
/* v52 出货单坐标 → v72 升级为「区块贴纸眉标」（原版 section-sticker 回注，品牌锚点 ③）：
   h2 右侧英文小标 = 渐变贴纸：1.5px 硬描边 + 2px 硬投影 + 微旋转 -1.5°，Sora 800 大写。
   隔块用反向渐变（--grad-rev）并翻转旋转方向，七个区块不会长成一个样；
   渐变底配深墨字（白字在粉段仅 2.9:1 不达标）；hover 贴纸「被按住」归正 —— 微交互，非必要不动。 */
.blk-en{display:inline-block;font-family:'Sora',sans-serif;font-size:10px;font-weight:800;letter-spacing:.14em;
  color:var(--pop-ink);text-transform:uppercase;
  background:var(--grad);border:1.5px solid var(--stroke);border-radius:3px;padding:3px 9px;
  box-shadow:var(--sh);transform:rotate(-1.5deg);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.blk:nth-of-type(even) .blk-en{background:var(--grad-rev);transform:rotate(1.5deg)}
.blk-head:hover .blk-en{transform:rotate(0deg) translateY(-1px);box-shadow:var(--sh)}
@media (prefers-reduced-motion:reduce){.blk-en,.blk:nth-of-type(even) .blk-en,.blk-head:hover .blk-en{transform:none}}
.blk-tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.sort-group{display:inline-flex;border:1px solid var(--border-2);border-radius:8px;overflow:hidden}
.sort-group .sbtn{border-radius:0;border:none;border-right:1px solid var(--border);padding:5px 10px;font-size:11px}
.sort-group .sbtn:last-child{border-right:none}
.sort-group .sbtn.on{background:var(--text);color:var(--bg)}

/* 卡片栅格 */
.grid{display:grid;gap:17px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}/* v90 间距①：14→17（+20%） */
.grid.tight{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.grid.builds{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}

/* 卡片通用 */
/* v74：卡片破边 + 常态硬投影回归（半档：原版 2px 描边 / 6px 投影 → 1.5px / 3px）
   原版 .card-collage 是「2px 硬描边 + 不对称破边圆角 2px 24px + 常态 6px 6px 0 硬投影」；
   本页无图（卡片内是纯文字/价目单），满档重描边会显笨重，故降档到 1.5px / 3px、破边 5px 18px。 */
.card{background:var(--surface);border:1.5px solid var(--edge);border-radius:14px;
  padding:20px;display:flex;flex-direction:column;color:inherit;
  transition:transform .2s var(--ease),border-color .18s,box-shadow .18s;
  position:relative;overflow:hidden;cursor:pointer;user-select:none;
  box-shadow:var(--sh)}
.card::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent);opacity:.4;transition:opacity .18s}
/* v72：悬停硬投影（v74 提档到 5px，与常态 3px 形成"压得更实"的层次） */
.card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--sh-h)}
.card:hover::before{opacity:1}
.card:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

.c-top{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.c-ico{width:24px;height:24px;color:var(--muted);flex:none}
.c-ico svg{width:100%;height:100%;display:block}
  .c-cat{font-family:'Sora',sans-serif;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.05em}
.c-brand{margin-left:auto;font-size:11px;color:var(--muted);text-align:right}
.c-name{font-family:'Sora','Noto Sans SC',sans-serif;font-size:14.5px;font-weight:600;margin:0 0 4px;line-height:1.35}
.c-price{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:baseline;gap:6px}
.c-price small{font-size:11px;font-weight:400;color:var(--muted);letter-spacing:0}
.c-price .num{font-variant-numeric:tabular-nums;display:inline-block}
.c-why{font-size:12px;color:var(--muted);margin:8px 0 0;line-height:1.55}

/* 核心方块阵列 */
.cores{margin:12px 0 4px}
.cores-lab{font-size:11px;color:var(--muted);margin-bottom:7px}
.core-row{display:flex;gap:5px;flex-wrap:wrap}
.core{width:20px;height:20px;border-radius:4px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--brand);
  background:color-mix(in srgb,var(--brand) 12%,transparent);opacity:0;transform:scale(.55);
  transition:opacity .32s var(--ease),transform .32s var(--ease);cursor:help}
.in .core{opacity:1;transform:none}
.core i{flex:1;background:var(--brand);opacity:.9}
.core i.light{opacity:.26}

/* 对比条 */
.bars{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.bar-item{opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.in .bar-item{opacity:1;transform:none}
.bar-top{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.bar-k{font-size:11px;color:var(--muted)}
.bar-v{margin-left:auto;font-family:'Sora',sans-serif;font-size:12.5px;font-weight:600}
.track{height:6px;border-radius:99px;background:var(--track);overflow:hidden}
.fill{height:100%;border-radius:99px;background:var(--accent);width:0;transition:width .95s var(--ease)}/* v67 对比条=数值 → 粉 */
.in .fill{width:var(--w)}
.bar-note{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.45}

/* 规格网格 */
.specs{margin-top:14px;padding-top:13px;border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr;gap:11px 14px}
.sp-k{font-size:11px;color:var(--muted);margin-bottom:1px}
.sp-v{font-size:12.5px}
.chips{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:11px;padding:3px 9px;border-radius:99px;background:var(--chip);color:var(--muted);border:1px solid var(--border-2)}
.c-go{margin-top:auto;padding-top:14px;font-size:12px;color:var(--accent-ink);font-weight:600}

/* 简化卡（无条） */

/* ---------- 关于本站 ---------- */
/* v97：整块 about 卡退位为一条页脚横条（删指标/标题/正文后，白卡套横条是多余的壳）
   底色 --surface-2 双主题自动跟随；横条即整块收尾，不再有「卡中卡」 */
.about{background:var(--surface-2);border:1.5px solid var(--edge);border-radius:14px;padding:14px 20px;position:relative}/* v98 加回 position:relative：合规贴纸要压在框外右上角 */
/* v98：.about-sticker 恢复使用（合规贴纸回到框外右上角）；.about 已加回 position:relative。
   .about-metrics / .about p 的 DOM 仍已删（指标与正文不再要），规则保留待用。 */
/* v72 品牌锚点 ⑤「信任贴纸」：压在「关于本站」纸盒右上角（原版 sticker 的 pinned 用法），
   微旋转 2.5° + 硬描边 + 硬投影 —— 站点最想被记住的一句话，用最品牌的方式说出来 */
.about-sticker{position:absolute;top:-13px;right:26px;z-index:2;
  font-family:'Sora','Noto Sans SC',sans-serif;font-size:10px;font-weight:800;letter-spacing:.1em;
  color:var(--pop-ink);background:var(--grad);border:1.5px solid var(--stroke);border-radius:3px;
  padding:4px 11px;box-shadow:var(--sh);transform:rotate(2.5deg);white-space:nowrap;
  transition:transform .18s var(--ease)}
.about-sticker:hover{transform:rotate(0deg) translateY(-1px)}
@media (prefers-reduced-motion:reduce){.about-sticker,.about-sticker:hover{transform:rotate(2.5deg)}}
@media (max-width:560px){.about-sticker{right:14px;font-size:9px;padding:3px 8px}}
/* v50 页脚回执：条码收尾随 v91 合并进品牌行（.about-banner）退役 */
.about-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.metric{background:var(--surface-2);border-radius:10px;padding:16px}
.metric .v{font-family:'Sora',sans-serif;font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--accent-num);font-variant-numeric:tabular-nums}/* v69 30px=大字号 → 浅粉 accent-num */
.metric .k{font-size:11.5px;color:var(--muted);margin-top:2px}
.about p{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.7}

/* ============ v42 愉悦体验层（全部在 prefers-reduced-motion 全局开关覆盖下） ============ */
/* A. 首屏开场编排：眉标→标语→副标→搜索→数据带 级联浮入，只播一次 */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-logo-img,.hero h1,.hero-search{animation:riseIn .55s var(--ease) both}
.hero-logo-img{animation-delay:.05s}.hero h1{animation-delay:.16s}/* v90c：eyebrow / hero-sub 已删，入场顺序改为 Logo → 标语 → 搜索 */
.hero-search{animation-delay:.38s}
/* D. 规格面板/货单切换入场：innerHTML 重渲染即重播，零 JS */
@keyframes fadeSlide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gp-pick>*{animation:fadeSlide .3s var(--ease)}/* v56 选件聚焦条：hover 换品类时重播入场 */
#g-builds .build-single{animation:fadeSlide .32s var(--ease)}
/* v52 的 fadeSlide（#edCard .ed-cover/.ed-main）—— v122 下线：入场统一交给下面 .ed-in。
   ⚠️ 两条不能并存：摘掉 .ed-in 时 animation-name 从 edIn 回落成 fadeSlide，浏览器会**重新触发**
   fadeSlide（translateY 8px），卡内容在滑入结束后又纵向抖一下 —— 逐帧实测 +559ms 起出现
   7px→3px→1px 的二次衰减，观感就是「图片底漏出来」。留一条规则，二选一。 */
/* v121 编辑精选切换：方向性交叉换卡——点右边的「旧卡向左退、新卡从右进」，点左边则反向。
   原来每次切卡只有纵向 fadeSlide，方向上没信息，看着像「原地闪一下」。
   --ed-x 由 JS 按切换方向写入（退场 / 入场方向相反），关掉动效时 JS 直接不播。 */
.ed-card{--ed-x:0px}
.ed-card.ed-out{opacity:0;transform:translateX(var(--ed-x));transition:opacity .15s ease,transform .15s ease}
#edCard.ed-in .ed-cover,#edCard.ed-in .ed-main{animation:edIn .34s var(--ease) both}
#edCard.ed-in .ed-main{animation-delay:.06s}/* 文字比封面晚一点进场，层次感来自错位不是时长 */
@keyframes edIn{from{opacity:0;transform:translateX(var(--ed-x))}to{opacity:1;transform:none}}

/* v122 自动切换进度条：挂在墨条 .wx-ink 里，长度即「距离下一张还有多久」。
   单一时钟：进度条动画本身当计时器（animationend 触发切下一张），暂停只改 animation-play-state，
   不用 setInterval —— 不会出现「进度条走完了但还没切」的漂移。 */
.wx-prog{position:absolute;left:0;top:0;height:100%;width:100%;border-radius:2px;background:var(--accent-ink);
  transform:scaleX(0);transform-origin:left;pointer-events:none}
.wx-prog.run{animation:edProg var(--ed-dur,6000ms) linear forwards}
.wx-prog.paused{animation-play-state:paused}
.wx-ink.no-auto .wx-prog{transform:scaleX(1);animation:none}/* 关动效/不支持时：回填满，回到纯「当前项」指示 */
html[dir="rtl"] .wx-prog{transform-origin:right}/* RTL 从左往右改成从右往左长 */
@keyframes edProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* F. 搜索下拉 stagger 入场 */
.search-drop .sd-item{animation:fadeSlide .2s var(--ease) both}
.search-drop .sd-item:nth-child(2){animation-delay:.04s}
.search-drop .sd-item:nth-child(3){animation-delay:.08s}
.search-drop .sd-item:nth-child(4){animation-delay:.12s}
.search-drop .sd-item:nth-child(5){animation-delay:.16s}
/* H. 快捷档点击小票轻摆 */
@keyframes wiggle{0%,100%{transform:none}30%{transform:rotate(.5deg)}65%{transform:rotate(-.35deg)}}
.budget.wiggle{animation:wiggle .35s var(--ease)}

/* ============ v51 愉悦层补强 + 深色按钮观感校正（同样在 reduced-motion 全局开关覆盖下） ============ */
/* I. 深色模式按钮"缩一圈"校正：暗底下 13% 白描边太弱，按钮视觉体量小于浅色模式——补一层微底色 + 描边加亮，两主题体量一致 */
html[data-theme="dark"] .sbtn{border-color:var(--border-2);background:rgba(255,255,255,.05)}/* v106 硬编码 .24 → 收编进 --border-2 令牌 */
html[data-theme="dark"] .sbtn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.42)}
/* I2. v51b 导航工具按钮统一身高：主题/语言图标按钮内容只有 14px 图标(26px)，比货币按钮(31px)/CTA(36px)矮一圈——统一锁 32px */
.nav-tools .sbtn{height:32px;display:inline-flex;align-items:center;padding:0 12px}
.nav-tools .sbtn.icon-btn{padding:0 10px}
.nav-tools .btn-pri{height:32px;padding:0 18px}

/* 🆕 2026-09-12「设置」三合一：#setMenu 一个菜单里三个分组（外观→语言→货币）。
   .nd-grp = 分组标题：非交互、不悬停变色；与 .nd-sep 搭配切段。 */
.nd .nd-grp{padding:6px 10px 3px;font-size:11px;color:var(--muted);letter-spacing:.02em;pointer-events:none;user-select:none}
/* 合并后菜单最高 16 项 + 3 标题 ≈ 580px：矮视口（≤600）会顶出屏 → 限高内滚。 */
.nd .nd-menu{max-height:calc(100vh - 96px);overflow:auto}

/* ============ 手机导航统一口径（≤720）—— 2026-09-10 第九轮搬进基架 ============
   来源 = games.html v9.2 + v9.9 的定案。此前三个页面各写一套，同一个导航三种形态：
     首页 单行 52 · 游戏库 单行 52（v9.9）· 硬件库 **两行 101**（行1 工具 + 行2 全宽搜索框）
   → 320/390 下切页导航高度差一倍，会明显闪一下；手机端还把「工具条」和搜索劈成上下两层。
   现在统一成：**单行 52px + 隐藏顶部搜索**，站内导航交给 ☰ 汉堡（`.nav-menu`）。
   ⚠️ 这是**公共规则**：改这里 = 所有页面一起变。页面里不要再写第二份（写过的地方已清掉）。
   📌 与首页的唯一差异是「首页本来就没有搜索框」（`html[data-page="home"] .nav-search{display:none}`），
      本块对它无害。
   📌 **2026-09-11 更正**：下面那句「320 档余量只有 5px」是**第九轮的旧数**
      （当时 logo 图 24px、工具区 gap 3px），此后第九/十轮又瘦过一轮，实测余量更大。
      加装「收藏」入口（第 6 个控件）后重新量过：320 下工具区右缘 315.4、内容区右界 310，
      **超 5.4px（不出滚动条）** → 由紧接着的 ≤400 块用「gap 2→1px + 内边距 10→9px」补平，
      按钮尺寸与触控目标一个都不用动。完整档位对照见 `脚本/_probe_nav6.js`。 */
@media(max-width:720px){
  .nav-in{height:auto;column-gap:10px;padding:0 16px}
  .nav-logo{height:52px}
  .nav-logo-img{height:20px}                    /* ① logo 图 24 → 20（只动手机，省 8px） */
  .nav-tools{margin-left:auto;gap:3px}          /* ② 工具区 gap 8 → 3（省 15px） */
  /* ③ 按钮内边距 0 12/10 → 0 8/6（省 24px）
     ⚠️ `white-space:nowrap` 必须留着：320 屏挤到极限时货币按钮的「¥ CNY」会**折成两行**，
        按钮高度撑破 30px（实测截图里 ¥ / CNY 上下排）。 */
  .nav-tools .sbtn{height:30px;padding:0 8px;white-space:nowrap}
  .nav-tools .sbtn.icon-btn{padding:0 6px}
  /* ④ 隐掉两个 ▾ caret（各 13px）+ 成就计数徽标（≈30px）。徽标只是计数，功能一条不丢。
     🚨 这里必须写 **`.nav-tools .nd .caret`（三个类）**，不能只写 `.nav-tools .caret`：
        文件后面还有一条 `.nd .caret{display:inline-block}`（给下拉箭头做过渡用的），
        两者特异性都是 (0,2,0)，后者位置更靠后 → **后者赢** → 本条的 caret 从来没被真正隐藏过。
        第九轮把本块从 games.html 搬进基架后才暴露：v9.9 时这条在页面自己的 <style> 里（排最后）所以碰巧生效，
        搬进基架就落到了 `.nd .caret` **之前** → caret 复活 → 320 下工具区凭空胖 26px → 溢出。
        提升到 (0,3,0) 才是治本（顺序无关）。 */
  .nav-tools .nd .caret{display:none}
  #wxAchCount{display:none}
  /* 顶部搜索在手机上让位给内容：Hero / 筛选条各自都有搜索，导航不必再占一整行。
     桌面（>720）原样保留，不受影响。 */
  .nav-search{display:none}
}
/* ≤400：这一档只剩 320–400 的老机型，工具区要再挤一档才放得下 5 个按钮 + 汉堡 + logo。
   合并来源 = games.html v9.9b 的 `@media(max-width:380px)`（原为游戏库独有，第九轮收编）+ 首页原有两条。
   实测（zh-Hant 最坏，货币按钮是 `NT$ TWD`）：修前 320 需要 348px（溢出 28）
     → 收起 caret 后 332 → 再砍符号 + 上述瘦身后 **305**（余量 15px）。
   ① 货币按钮**只留 ISO 代码**（`TWD`/`CNY`/`USD`/`JPY`），隐掉符号 —— 消歧靠 ISO，符号在窄屏让位。
      纯 CSS 实现：按钮内容由 syncCurrencyBtn() 写成 `<span class="cur-sym">¥</span> <span class="cur-iso">CNY</span>`。
      ⚠️ 别反过来「只留符号」：`¥` 同时是 CNY 和 JPY，窄屏没有 hover 提示反而更歧义。
   ② 汉堡 36 → 32、导航左右内边距 24 → 20、logo 图 20 → 18、工具区 gap 3 → 2、按钮内边距 8 → 6。
   📌 **2026-09-11**：本档再加装第 6 个控件（收藏入口）后实测仍差 5.4px → 把
      `内边距 10 → 9`、`工具区 gap 2 → 1` 各收一档（只收空隙，**不缩按钮**）。
      实测（`脚本/_probe_nav6.js`）：320 下超出内容区右界 5.4px → 0.0px，不出滚动条。
      ⚠️ 若将来还要再加控件，别再靠收空隙了 —— 先跑那个探针看真实余量，
        再考虑把某个低频控件挪进 ☰ 菜单（而不是继续缩小触控目标）。 */
@media(max-width:400px){
  .nav-in{padding:0 9px;column-gap:8px}          /* 10 → 9：为第 6 个控件（收藏）让 2px */
  .nav-logo-img{height:18px}
  /* 🚨 2026-09-23（R93x 对齐）：这里原来写的是 `.nav-burger{width:32px}` —— **一条从来没生效过的死规则**。
     本块位于基架前部，而文件后面（`.nav-burger` 的基础定义处）还有一条**无条件**的
     `.nav-burger{width:36px}`；两者特异性都是 (0,1,0)，后者位置更后 ⇒ **后者赢**。
     后果：基架系的 2960 余页在 ≤400 档汉堡一直是 36px，「36 → 32」这档瘦身**一条都没落地**；
     而首页自包含副本把本块排在全文件最后，所以首页是 32px —— 这就是两页在 390/320 下
     左侧簇宽度差 4px 的来源（`脚本/_diag_nav_tools_align.js` 量出来的）。
     治本 = **提升特异性到 (0,2,0)**（写成 `.nav-in .nav-burger`），与顺序无关 ——
     与上面 `.nav-tools .nd .caret` 那条坑同一个处方，别再用「挪位置」救。
     静态复查工具：`脚本/_diag_css_dead_rule.js`（应报 0 条）。 */
  .nav-in .nav-burger{width:32px}
  .nav-tools{gap:1px}                            /* 2 → 1：5 个 gap 省 5px（与上面合计 7px > 缺口 5.4px） */
  .nav-tools .sbtn{padding:0 6px}
  #setBtn{padding:0 8px}                         /* 🆕 合并后货币符号/ISO 不在按钮上了；此槽给「⚙ 设置 ▾」压字号 */
}
/* J. 触觉按压：按下去缩 3% 松手回弹（档位签自带 translateY 不参与，避免跳动） */
.sbtn:active,.b-chip:active,.hs-chip:active,.btn-pri:active,.b-btn:active,.gi:active,.ed-rail-item:active{transform:scale(.98)}
/* K. 主题切换小仪式：日/月图标旋转落位 */
@keyframes icoSpin{from{transform:rotate(-150deg) scale(.5);opacity:.2}to{transform:none;opacity:1}}
.icon-btn.spin svg{animation:icoSpin .45s var(--ease)}
/* L. 小票打印出场：滚动到配置单，估价小票像从打印机吐出来（IO 首入视口触发一次） */
@keyframes printOut{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.budget.printed{animation:printOut .5s var(--ease) both}
.budget.printed.wiggle{animation:wiggle .35s var(--ease)}/* 已打印后快捷档轻摆仍生效（后置覆盖 printOut） */
/* M. 货币下拉 caret 翻转 */
.nd .caret{display:inline-block;transition:transform .2s var(--ease)}
.nd.open .caret{transform:rotate(180deg)}
/* v116 语言下拉：图标 / 语种短标 / caret 之间要留缝（sbtn 是 inline-flex，不给 gap 会贴死） */
#langBtn{gap:5px}
#langBtn svg{flex:none}
/* v9.2：语种标签统一两位代码后，定宽居中 —— 否则 ZH/AR/JA 字宽不同会推着按钮左右跳 */
#langLabel{display:inline-block;min-width:24px;text-align:center;letter-spacing:.02em}
/* v125 外观下拉：图标与 ▾ 之间沿用 `.sbtn.icon-btn` 的 gap:6px，不另设（货币按钮才是 gap:4 的特例）；
   这里只锁住 svg 不被压缩 —— 同 #langBtn svg 的理由。 */
#lookBtn svg{flex:none}
/* v125 外观下拉里「主题三态」与「弱化动效」之间的分隔线：只占 1px 高，不额外占一个控件的宽度 */
.nd .nd-sep{height:1px;background:var(--border);margin:5px 4px}
/* v116 菜单里当前选中项：加粗 + 行尾打勾（不靠颜色单打独斗，色弱也能分辨） */
.nd .nd-menu button.on{color:var(--text);font-weight:600;background:var(--chip)}
.nd .nd-menu button.on::after{content:'✓';float:right;margin-left:8px;color:var(--accent-ink)}
/* v116 RTL：菜单项文字右对齐，打勾改到行首 */
html[dir="rtl"] .nd .nd-menu button{text-align:right}
html[dir="rtl"] .nd .nd-menu button.on::after{float:left;margin-left:0;margin-right:8px}
/* v116 阿语菜单项用阿文字形，别被父级的中文字体接管 */
#setMenu button[lang="ar"]{font-family:'Noto Sans Arabic','Segoe UI',system-ui,sans-serif}

/* v75 底部品牌横幅：左 Loadout 手写 logo + 标语 / 中 链接 / 右 社交圆按钮
   —— 不抢 about 区（v74 仍保留），做"压轴"位，给整页一个有结束感的收口 */
/* v89：去掉 7% 淡粉→紫→蓝渐变底 → 纯白 var(--surface)（全站配色规范是「渐变只做品牌锚点，不铺面」，
   底部横幅铺渐变既抢 about 区收口感，又跟刚统一的票据白卡片语言打架） */
/* v91：独立 .brand-banner 区块已并入关于本站卡片，其容器样式随 DOM 退役（bb-* 品牌行样式保留复用） */
/* v91：原独立 brand-banner 区块并入关于本站卡片；bb-* 样式保留复用，容器在卡内加分隔线 */
/* v96：品牌行改版——从「上分隔线 + 裸排」改为原站页脚参考图的浅紫底横条（卡中卡），
   左 logo+标语 / 中链接 / 右版权；底色用 --surface-2 双主题自动跟随，不用品牌渐变铺面 */
.about-banner{margin-top:0}
.bb-inner{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.bb-side{display:flex;align-items:center;gap:14px;min-width:0}
.bb-logo{height:34px;width:auto;flex:none;display:block}/* v96 30→34，参考图里 logo 更有存在感 */
.bb-tag{font-family:'Sora','Noto Sans SC',sans-serif;font-size:13px;font-weight:700;color:var(--accent-ink);letter-spacing:.02em}/* v96 标语升级：11.5/600/muted → 13/700/品牌紫 */
/* v89：logo 42px→30px（原先横幅整体字重/尺寸压过上方关于本站，收口位不该抢戏） */
.bb-links{display:flex;gap:18px;flex:1;justify-content:flex-end;flex-wrap:wrap}/* v98 居中 → 靠右（链接组与版权并到右侧，左半边留给 logo+标语） */
/* 2026-09-13 无障碍：页脚链接实测 **48×19**，高度 19px **低于 WCAG 2.2 AA 的 24px 下限**（2.5.8），
   手机上几乎点不中。改成 inline-flex + 内边距把可点区长到 32；
   ⚠️ 用 padding 而不是 height —— 页脚是 flex 行，撑高元素会顶开整条底栏。 */
.bb-links a{font-size:12px;color:var(--muted);text-decoration:none;transition:color .15s;white-space:nowrap;
  display:inline-flex;align-items:center;min-height:32px;padding:6px 2px}
.bb-links a:hover{color:var(--accent-ink)}
/* v92：社交图标撤掉（原站页脚没有社媒入口，不放假入口）→ 右端改为原站同款版权行 © 2026 Loadout */
.bb-copy{margin-left:22px;font-family:'Sora','Noto Sans SC',sans-serif;font-size:11.5px;color:var(--muted);letter-spacing:.04em;white-space:nowrap}/* v98 14→22：链接靠右后与版权贴太近 */
.bb-socials{display:flex;gap:8px;flex:none}
.bb-socials a{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);
  border:1.5px solid var(--border-2);border-radius:50%;background:var(--surface-2);transition:color .15s,border-color .15s,transform .18s var(--ease)}
.bb-socials a:hover{color:var(--accent-ink);border-color:var(--brand);transform:translateY(-2px)}
.bb-socials svg{width:16px;height:16px;display:block}
@media(max-width:720px){
  .bb-links{order:3;flex:1 1 100%;justify-content:flex-start;gap:14px}/* v97 flex-basis:100% 强制独占一行——原 width:100% 对 flex-basis:0 的项不生效，链接曾被挤进徽章行只剩 88px 宽竖排 */
  .bb-copy{order:4;margin-left:0}/* v97 版权沉底：logo标语 → 链接 → 版权，从上到下一眼扫完 */
}

/* v76 配置单 3 卡并排 + 紧凑清单 —— 对齐图2 的样式（卡片有边框、清单紧凑、票据条码） */
#g-builds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:980px){#g-builds{grid-template-columns:1fr}}
/* v89：去掉全部 border（撕下来的纸本无描边，全靠 shadow 区分）——
   跟左小票 .budget 完全统一：无 border + 上圆角 12px + 底部直角 + 锯齿外伸。
   v74 引入的「破边 + 常态硬投影」在保留品类 chip 卡上仍生效，本处是票据货单特例。 */
.build-single{padding:0;background:var(--surface);border:none;border-bottom:none;border-radius:12px 12px 0 0;display:flex;flex-direction:column;transition:transform .18s var(--ease),box-shadow .18s;box-shadow:0 2px 0 color-mix(in srgb,var(--brand) 8%,transparent),0 6px 18px -8px rgba(91,69,255,.18)}/* v89：box-shadow 改用「2px 顶色染 + 6px 柔投影」组合，代替 v74 描边破边 + 硬投影；左小票同款柔投影 */
.build-single:nth-child(even){border-radius:12px 12px 0 0}
.build-single:hover{transform:translateY(-2px);box-shadow:0 2px 0 color-mix(in srgb,var(--brand) 14%,transparent),0 10px 24px -10px rgba(91,69,255,.28)}
/* v89：内部左右 padding 统一 16→20（原先价格/清单离卡片左边缘只有 16-18px，太靠边） */
.bs-sub{font-family:'Sora','Noto Sans SC',sans-serif;font-size:15px;font-weight:700;padding:14px 20px 4px;line-height:1.35;color:var(--text)}
.bs-spec-list{list-style:none;margin:0;padding:4px 20px 12px;border-top:1px solid var(--border);display:flex;flex-direction:column}
.bs-spec-list li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px}/* v84 行距 7→9 */
.bs-spec-list li:last-child{border-bottom:none}
.bs-spec-k{color:var(--muted);font-weight:600;flex:none}
.bs-spec-v{font-weight:600;text-align:right;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* v88：bs-foot padding 12/16/14 → 14/16/14 整体加高 2px；bf-act padding 6/14→8/16 字号 11.5→12.5 对齐左小票 b-btn 节奏 */
/* v89：底圆角 0 0 10px 10px → 0（底部是锯齿撕边，圆角是裁切语言，冲突）；padding 左右 16→20 */
/* v91：底栏与卡身同色（浅色模式下 surface-2 浅紫底条 vs 白卡身的割裂感去除），仅留 1px 分隔线 */
.bs-foot{padding:14px 20px;border-top:1px solid var(--border);background:var(--surface);border-radius:0;display:flex;align-items:center;gap:10px;margin-top:auto;flex-wrap:wrap}
.bs-foot .bf-note{font-size:11px;color:var(--muted);font-family:'Sora',monospace;letter-spacing:.06em}
.bs-foot .bf-act{margin-left:auto;font-size:12.5px;padding:8px 16px}
/* v88：bf-barcode 12px→14px 与左小票 b-barcode 14px 视觉同语言；宽度 60→80 显出条形密度 */
.bs-foot .bf-barcode{width:80px;height:14px}
.bs-hot{position:absolute;top:10px;right:-6px;font-size:9.5px;padding:4px 10px}

/* v115：footer.note 整组删除（元素已删，样式一并清掉，不留死代码。原为「融合版原型说明」开发备注） */
/* v115：footer.note code 一并删除（同上，元素已删） */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .core,.bar-item{opacity:1;transform:none}
  .fill{width:var(--w)}
}
@media (max-width:640px){
  .hero{padding:28px 0 6px}.hero h1{font-size:18px}.hero-logo-img{height:84px;margin-bottom:14px}/* v90c：h1 现在是标语不是大标题（原 24px 是给 44px 大标题设的），24→18；Logo 窄屏收小 */
  .grid,.grid.tight,.grid.builds,.other-grid{grid-template-columns:1fr}
}

/* ==================== v118 交互升级层（wx- 前缀，零重名） ====================
   五块：① 动效总开关  ② 微交互（涟漪 / 光标高光 / Tab 滑块 / 下划线 / 扫光）
        ③ 滚动叙事（标题扫光 / 卡片错峰入场 / 导航滚动态）  ④ 成就系统  ⑤ 状态与文案
   纪律：① html[data-motion="off"] 与系统 prefers-reduced-motion 双闸，任一触发即整体停动效；
        ② 光标跟随类只在 (hover:hover) and (pointer:fine) 下启用，触屏不空转；
        ③ 只新增类名、不改既有类名 —— 与 v117 及更早的样式互不干扰。 */

/* ① 动效总开关：关掉后 JS 侧读同一个属性，不再播彩带/成就横幅
   ⚠️ 必须同时锁 iteration-count:1 —— 只压 duration 不限次数的话，
   .rails 贴纸呼吸（16s infinite）这类循环动画会变成 0.001ms/次 的高频爆闪（v119 实测踩坑） */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;transition-delay:0ms!important}
html[data-motion="off"] .confetti,html[data-motion="off"] .wx-skel{display:none!important}
html[data-motion="off"] .wx-skel-wrap{display:none}
/* ⚠️ 不能用 .on：会撞上 .sbtn.on 的「深底浅字」反色规则，图标被染成 --bg 色在浅底上隐形 */

/* ②-a 点击涟漪：只给按钮/标签类控件（卡片不裁 overflow，改用光标高光） */
.wx-ripple-host{position:relative;overflow:hidden}
.wx-ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:5;
  transform:translate(-50%,-50%) scale(0);opacity:.3;
  background:radial-gradient(circle,currentColor 0%,transparent 70%);
  animation:wxRipple .55s var(--ease) forwards}
@keyframes wxRipple{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ②-b 光标高光：卡片 hover 时一层极淡品牌光跟着指针走，纯装饰不吃点击 */
@media (hover:hover) and (pointer:fine){
  .wx-spot::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:radial-gradient(240px circle at var(--wx-x,50%) var(--wx-y,50%),
      color-mix(in srgb,var(--accent) 13%,transparent),transparent 72%);
    opacity:0;transition:opacity .25s var(--ease)}
  .wx-spot:hover::after{opacity:1}
}

/* ②-c 编辑精选 Tab 下划线滑块：切换时滑过去（原逐个 border-bottom 是硬切） */
.ed-rail{position:relative}
/* v122：墨条改成「底轨 + 进度填充」双层——浅底轨表示当前 Tab，实心填充表示距下一张还有多久 */
.wx-ink{position:absolute;left:0;top:0;height:2px;width:0;border-radius:2px;overflow:hidden;
  background:color-mix(in srgb,var(--accent-ink) 26%,transparent);
  pointer-events:none;transition:transform .28s var(--ease),width .28s var(--ease),top .28s var(--ease)}
.ed-rail.has-ink .ed-rail-item.on{border-bottom-color:transparent}

/* ②-d 导航链接下划线滑入（RTL 从右往左长） */
.nav-link{position:relative}
.nav-link::after{content:'';position:absolute;left:12px;right:12px;bottom:2px;height:1.5px;border-radius:2px;
  background:var(--accent-ink);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.nav-link:hover::after,.nav-link.on::after{transform:scaleX(1)}
html[dir="rtl"] .nav-link::after{transform-origin:right}

/* ②-e 主按钮 hover 一道光扫过：只播一次，不循环闪 */
.btn-pri,.b-btn{position:relative;overflow:hidden}
.btn-pri::after,.b-btn::after{content:'';position:absolute;top:0;bottom:0;left:-45%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent)}
.btn-pri:hover::after,.b-btn:hover::after{animation:wxShine .7s var(--ease)}
@keyframes wxShine{to{left:125%}}

/* ③-a 区块标题进视口扫光（JS 只负责加 .in，动画纯 CSS）
   ⚠️ v120 修：.wx-shine 必须自己 position:relative —— 原来没设，absolute 的 ::after 一路向上找不到定位祖先，
   最终挂在「初始包含块」上，光带扫过整个视口宽度（视觉尺寸离谱）。h2 是 flex 项（宽度=文字宽），
   加了 relative 后光带正好只盖住标题本身。 */
.wx-shine{position:relative}
/* v121：不做爆闪——① 亮度 20%→13% ② 光带拉宽（38/50/62 → 30/50/70）③ 首尾各留一段淡入淡出，
   整条扫过 1.15s（原 .95s）。观感是「一道很淡的光掠过」，不是「啪地闪一下」。 */
.wx-shine::after{content:'';position:absolute;inset:-3px -8px;border-radius:8px;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--accent) 13%,transparent) 50%,transparent 70%);
  background-size:260% 100%;background-position:-160% 0;opacity:0}
.wx-shine.in::after{animation:wxSweep 1.15s cubic-bezier(.4,0,.2,1)}
@keyframes wxSweep{
  0%{opacity:0;background-position:-160% 0}
  25%{opacity:.85}
  75%{opacity:.85}
  100%{opacity:0;background-position:160% 0}}
/* v121：最新资讯的焦点卡标题 .nf-title 也纳入扫光（见 wxBindShine 选择器）——
   区块标题本来就有，但它在页面最底部，下滑时容易被一带而过；
   焦点卡在视口里停留更久，扫光才看得见。列表行标题 .nt 不加——5 行一起扫会变成跑马灯。 */

/* ③-b 卡片错峰入场：JS 只负责加 .wx-rise/.in 与 --wx-d，动画结束即移除 class
   —— 关键：不能用 animation-fill-mode:both/forwards，终态 transform:none 会盖掉 hover 的 translateY */
.wx-rise.in{animation:wxRise .5s var(--ease);animation-delay:var(--wx-d,0ms)}
@keyframes wxRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ③-c 导航滚动态：只加投影，高度锁死 64px 不变（改高会把内容顶一下） */
.navbar{transition:box-shadow .2s var(--ease),border-color .2s}
.navbar.scrolled{box-shadow:0 10px 26px -20px rgba(60,40,160,.65);border-bottom-color:var(--border-2)}

/* ④ 成就系统：徽章 + 面板 + 解锁横幅 */
.wx-ach-badge{font-family:'Sora',sans-serif;font-size:9.5px;font-weight:800;font-variant-numeric:tabular-nums;
  padding:1px 5px;border-radius:99px;background:var(--chip);color:var(--muted);white-space:nowrap}
.wx-ach-btn.has-new .wx-ach-badge{background:var(--accent-num);color:#fff}
.wx-ach-btn.has-new{animation:wxNudge 1.4s var(--ease) 2}
@keyframes wxNudge{0%,100%{transform:none}25%{transform:translateY(-2px)}}
/* 2026-09-13 改版：**成就一个没删，只换容器** ——
   ① 面板加宽到 520px + **两列网格** → 29 条从 29 行压到 15 行（窄屏自动回单列）；
   ② 整面板**一个滚动区**（原来每个分组一段 max-height 各自滚，观感就是「无限长」）；
   ③ 头部 sticky 常驻，收起按钮从底部挪到头部。 */
.wx-ach-pop{position:fixed;top:70px;right:18px;z-index:120;width:min(520px,calc(100vw - 28px));
  max-height:min(74vh,calc(100vh - 96px));overflow:auto;overscroll-behavior:contain;
  background:var(--surface);border:1.5px solid var(--edge);border-radius:14px;box-shadow:var(--sh-h);
  padding:0;transform-origin:top right;animation:wxPop .22s var(--ease)}
@keyframes wxPop{from{opacity:0;transform:scale(.96) translateY(-6px)}}
.wx-ach-top{position:sticky;top:0;z-index:3;display:flex;gap:10px;align-items:flex-start;
  padding:13px 14px 10px;background:var(--surface);border-bottom:1px solid var(--border);
  border-radius:14px 14px 0 0}
.wx-ach-pop h3{margin:0 0 2px;font-size:14px;font-weight:700}
.wx-ach-pop .sub{margin:0;font-size:11px;color:var(--muted)}
.wx-ach-top .close{margin-inline-start:auto;flex:none;height:28px;min-width:28px;padding:0 8px;
  border-radius:8px;font-size:13px;line-height:1}
.wx-ach-list{list-style:none;margin:0;padding:8px 12px 10px;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 8px}
@media(max-width:600px){.wx-ach-list{grid-template-columns:1fr}}
.wx-ach{display:flex;gap:8px;align-items:flex-start;min-width:0;padding:7px 9px;border-radius:10px;
  background:var(--surface-2);opacity:.6}
.wx-ach.got{opacity:1;background:color-mix(in srgb,var(--accent) 9%,var(--surface-2))}
.wx-ach .ic{font-size:14px;line-height:1.35;flex:none;filter:grayscale(1)}
.wx-ach.got .ic{filter:none}
.wx-ach .tx{min-width:0}
/* 隐藏成就（未解锁）：比普通未解锁更「虚」一点 + 名字打问号，暗示「这里有东西等你发现」。
   ⚠️ 只做视觉降噪，不隐藏条目本身 —— 玩家该知道这一页有几个成就可拿。 */
.wx-ach.hid{opacity:.5;background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,color-mix(in srgb,var(--surface-2) 82%,var(--accent)) 6px 12px)}
.wx-ach.hid .ic{filter:none;opacity:.75}
.wx-ach.hid .tx b{font-family:'Sora',sans-serif;letter-spacing:.14em;color:var(--muted)}
.wx-ach.hid .tx span{font-style:italic}
/* 两列之后每条宽度只有 ~240px：名字与描述都改成**单行截断**（完整文案在 title 里），
   否则一条会撑成三行，两列省下来的高度又还回去了。 */
.wx-ach .tx b{display:block;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wx-ach .tx span{display:block;font-size:10.5px;color:var(--muted);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 分组标题吸顶（top = 头部高度），滚动到中段也知道在看哪一组 */
.wx-ach-grp{position:sticky;top:57px;z-index:2;background:var(--surface);
  padding:8px 12px 4px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.wx-ach-toast{position:fixed;right:18px;bottom:18px;z-index:121;display:flex;gap:11px;align-items:center;
  background:var(--surface);border:1.5px solid var(--edge);border-radius:12px;box-shadow:var(--sh-h);
  padding:10px 14px;max-width:min(320px,calc(100vw - 36px));animation:wxSlideIn .34s var(--ease);
  transition:bottom .28s var(--ease)}   /* R77 连击保护：被顶上来的那条要滑上去，不要瞬移 */
.wx-ach-toast.out{opacity:0;transform:translateX(18px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
@keyframes wxSlideIn{from{opacity:0;transform:translateX(18px)}}
.wx-ach-toast .ic{font-size:22px;flex:none}
.wx-ach-toast b{display:block;font-size:12.5px}
.wx-ach-toast .k{display:block;font-family:'Sora',sans-serif;font-size:9px;font-weight:800;letter-spacing:.12em;
  color:var(--accent-num);text-transform:uppercase}
.wx-ach-toast span{display:block;font-size:11px;color:var(--muted)}
html[dir="rtl"] .wx-ach-pop{right:auto;left:18px;transform-origin:top left}
html[dir="rtl"] .wx-ach-toast{right:auto;left:18px}
html[dir="rtl"] .wx-ach-toast.out{transform:translateX(-18px)}

/* ⑤ 状态：骨架屏 + 更有人味的空态 */
.wx-skel{height:14px;border-radius:7px;
  background:linear-gradient(100deg,var(--surface-2) 28%,color-mix(in srgb,var(--accent) 9%,var(--surface-2)) 50%,var(--surface-2) 72%);
  background-size:240% 100%;animation:wxSkel 1.3s linear infinite}
@keyframes wxSkel{from{background-position:130% 0}to{background-position:-130% 0}}
.wx-skel-wrap{display:flex;flex-direction:column;gap:10px}
.wx-skel-wrap.tall .wx-skel:first-child{height:168px}
.wx-empty{display:flex;flex-direction:column;gap:6px;align-items:center;padding:18px 16px;text-align:center}
.wx-empty .face{font-size:22px;line-height:1}
.wx-empty .tip{font-size:11.5px;color:var(--muted);line-height:1.6}
.wx-empty .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:4px}
@media(max-width:560px){
  .wx-ach-badge{display:none}/* 窄屏只留奖杯图标：徽章文字会把工具区挤成两行 */
  .wx-ach-toast{left:18px;right:18px;bottom:76px}
}
/* ==================== 彩蛋层（2026-09-14 补漏） ====================
   🚨 这一块原本只存在于**自包含的首页**（redesign-home.html 918-927），基架抽取时漏掉了。
      后果不是「少点装饰」，而是**功能性反馈整体隐形**：
        · `.toast` 没有任何定位规则 → 裸 div 被追加到 <body> 末尾（文档最底部、屏幕外）→
          「已跳到 X」「购买渠道还没接上」「链接指向的商品不存在」这些提示**谁都看不到**；
        · `.confetti/.ct/@keyframes fall` 缺失 → 秘籍彩带不落；
        · `html.rainbow` 缺失 → Konami 的「全站彩虹」点了没反应（而它的 toast 也看不见 → 完全静默）。
      引基架的三个页面（games / hardware / peripheral）都受影响；首页自带一份、不受影响。
   ⚠️ 数值与 redesign-home.html 918-927 **逐字同源** —— 自包含约定：改这里必须同步改那边。 */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
.ct{position:absolute;top:-14px;width:8px;height:8px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.15}}
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);background:var(--surface);border:1px solid var(--c,#888);color:var(--text);
  padding:11px 20px;border-radius:99px;font-size:13px;z-index:101;box-shadow:0 12px 30px -12px rgba(0,0,0,.35);
  animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(10px)}}
/* 🆕 2026-09-15 修（第二十二轮）：原来的选择器只写了首页的 `.card,.other-card` ⇒
   这个彩蛋在**游戏库 / 资讯列表 / 资讯详情**三处是**空头支票** ——
   键盘敲完 Konami，toast 弹了、confetti 也落了，**彩虹偏偏不出现**。
   实测各页卡片类名：游戏库 `.gcard`（**故意不带** `.card`，见 games.html 第 141 行注释）
   · 资讯列表 `.nw-card` / `.nw-top-card` · 资讯详情 `.nwd-rel-a` / `.nwd-rx-a` / `.nwd-nav-a`。
   硬件与外设的卡**都带 `.card`**（`.card hw-card` / `.card pm-item`），本来就命中，不必补。
   ⚠️ 用**并列选择器**、不用 `:where()` 收拢：`:where()` 权重为 0，会把整条规则从 (0,2,1)
      压到 (0,1,1)，低于 `html[data-motion="off"]`（(0,2,1)）—— 关动效时的行为会跟着变。
      保持与原写法同权重，这次改的**只有命中范围**，不多不少。
   ⚠️ 不加 `prefers-reduced-motion` 闸门：Konami 是**用户显式敲出来的**（不是自动播放），
      此时「彩虹」就是那句提示的**全部信息量**；关掉它等于把一个彩蛋变成一次静默。
      （面板里的「弱化动效」开关走的是 `html[data-motion="off"]`，那条仍然生效。）
   📌 以后新增卡片类名，**记得挂进这一条** —— 否则又是一张空头支票。
   ⚠️ 还有一条容易漏的：若某页给卡片挂了**自己的入场动画**且权重高于本条 (0,2,1)
      （资讯页的 `.nw-grid .nw-card.nw-in` 是 (0,3,0)），那 300 多毫秒里卡片会被入场动画接管、
      **只有它没有彩虹**。基架不认识各页的入场类名，只能由该页自己补一条压过去
      （资讯页已补 `html.rainbow .nw-card.nw-in{animation:rb 5s linear infinite}`）。
      首页那套 `.wx-rise.in` 是 (0,2,0)，低于本条，所以那边不存在这个问题。
   🆕 同日第二轮：**首页自己的名额也没列全**。首页真实卡片清单见 `redesign-home.html`
      第 3659 行 `WX_SPOT` ＋ 第 722 行「首页其它卡片」注释，去重后 8 类：
      `.card / .other-card / .gp-card / .news-card2 / .news-feat / .g-tile
       / .build-single / .ed-card`。原规则只命中前 2 类（`.card` 在首页几乎已成死代码：
      全局仅 1 处、出自 `fullCardHTML`），于是游戏专区 9 张 `.gp-card`、资讯 4 张
      `.news-card2`、资讯主打 `.news-feat`、游戏封面 `.g-tile`、编辑精选大卡 `.ed-card`
      **这 5 类在首页同样没有彩虹** —— 一并挂进来。
      （这 5 类是**首页专属**，挂在基架这条上是无害的空选择器；`.gp-card-pr` 是价格 span 的
       **完整类名**，与 `.gp-card` 不相等 ⇒ 不会误命中硬件/外设的价格数字。）
   ⚠️ 第 6 类 `.build-single` 要**单独一行写**：它的入场动画 `#g-builds .build-single`
      （首页第 969 行）是 **ID 选择器 (1,1,0)**，权重高于本条 (0,2,1) ⇒ 只写
      `html.rainbow .build-single` 会是**死选择器**（照样看不到彩虹）。
      所以在本规则的**最后一个选择器**里补上 ID ⇒ (1,2,1) 才压得住。
      代价：彩虹期间切档的 fadeSlide 入场被换成彩虹；卡片仍静止可见
      （fadeSlide 无 fill，元素常态 opacity:1），不会留白。
   📌 `.news-card2` 已核对：`redesign-home.html` 的 `renderNews()` 只出 `.news-feat`
      ＋ `.news-list` ＋ `.n-row` ⇒ 它在首页目前是**死 CSS**（只剩样式与 selector 字面量）。
      **仍然留在列表里**：一是首页自己的 `WX_SPOT` 也带着它，二是哪天复活就自动有彩虹。
   ⚠️ 首页另一处已核对：入场靠**内联 `opacity:0` 兜底**、放行时先清内联再加 `.in`
      （redesign-home.html 3727-3742），所以哪怕彩虹接管了 `.wx-rise.in` 的动画，
      也不会留下隐形卡。 */
html.rainbow .card,html.rainbow .other-card,html.rainbow .gcard,
html.rainbow .nw-card,html.rainbow .nw-top-card,
html.rainbow .nwd-rel-a,html.rainbow .nwd-rx-a,html.rainbow .nwd-nav-a,
html.rainbow .gp-card,html.rainbow .news-card2,html.rainbow .news-feat,
html.rainbow .g-tile,html.rainbow .ed-card,
/* 🆕 2026-09-23 R93W：搜索页 —— `.sr-card` 是结果卡；`.sr-stamp` / `.sr-script` 是页头两枚装饰贴纸。
   ⚠️ **贴纸那条不是凑数**：搜索页**默认视图（无词无分类）`#srGrid` 是隐藏的**，
   只挂 `.sr-card` 的话，在默认视图敲 Konami 依然是「有 toast、零像素变化」＝**空头支票**。
   贴纸是常显的，补上它们才让秘籍在本页**任何状态下都看得见**。
   ⚠️ `rb` 只动 `filter:hue-rotate`（不动 transform / background）⇒ 不会碰贴纸的 `rotate(3deg)`，
      也不会跟卡片的 `:hover{transform}` 打架。 */
html.rainbow .sr-card,html.rainbow .sr-stamp,html.rainbow .sr-script,
html.rainbow #g-builds .build-single{animation:rb 5s linear infinite}
@keyframes rb{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(330deg)}}

/* v119：成就横幅在场时，普通 toast 上移避让（横幅窄屏近全宽，z-index 又更高，实测会盖住状态文案） */
body.wx-banner-live .toast{bottom:118px}
@media(max-width:560px){body.wx-banner-live .toast{bottom:184px}}

/* ⑥ v120 配置单「查看详情」= 跳转钮（用户拍板：不展开）。按钮手感三件套：
   hover 箭头朝目标方向滑出（去哪儿一眼看懂）→ 按下整颗压下去 → 键盘 Tab 有可见焦点环。 */
.bs-foot .bf-act{cursor:pointer}
.bs-foot .bf-act .bf-caret{display:inline-block;transition:transform .2s var(--ease)}
.bs-foot .bf-act:hover .bf-caret{transform:translateX(4px)}
.bs-foot .bf-act:active{transform:translateY(0) scale(.97);box-shadow:none}
.bs-foot .bf-act:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
html[dir="rtl"] .bs-foot .bf-act:hover .bf-caret{transform:translateX(-4px)}/* RTL 箭头朝左滑 */
/* 系统减动效：与手动开关同效果（补 .wx-* 自身的兜底，避免只剩静态高亮块） */
@media (prefers-reduced-motion:reduce){
  .wx-shine.in::after{animation:none;opacity:0}
  .wx-ach-pop,.wx-ach-toast{animation:none}
}

/* ============ 移动端汉堡菜单（[追加] 非首页抽取，勿与上面去重） ============ */
.nav-burger{display:none;align-items:center;justify-content:center;width:36px;height:32px;
  padding:0;flex:none;border:1px solid var(--border-2);border-radius:8px;
  background:transparent;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}
.nav-burger:hover{background:var(--chip);border-color:var(--muted)}
.nav-burger:focus-visible{outline:2px solid var(--accent-num);outline-offset:2px}
.nav-burger[aria-expanded="true"]{background:var(--chip);border-color:var(--muted)}
.nav-burger .nb-box{display:flex;flex-direction:column;align-items:center;gap:3.5px}
.nav-burger i{display:block;width:16px;height:1.5px;border-radius:1px;background:currentColor}
.nav-menu{position:absolute;top:100%;left:0;right:0;z-index:65;
  display:flex;flex-direction:column;padding:4px 16px 10px;
  background:var(--surface);border-bottom:1px solid var(--border);
  box-shadow:0 18px 40px -22px rgba(60,40,160,.5)}
.nav-menu[hidden]{display:none}
.nav-menu-a,.nav-menu-search{display:flex;align-items:center;min-height:48px;padding:0 4px;
  font-size:15px;font-weight:600;color:var(--text);text-decoration:none;
  border-bottom:1px solid var(--border)}
.nav-menu-a:last-child,.nav-menu-search:last-child{border-bottom:none}
.nav-menu-a:hover,.nav-menu-search:hover{color:var(--accent-ink)}
.nav-menu-a.on{color:var(--accent-ink)}
.nav-menu-a.on::after{content:'\00B7';margin-left:auto;font-size:20px;line-height:1}
/* 🆕 2026-09-23（R93d 第四轮）：汉堡菜单里的「搜索」入口，由 `proto-shell.js` 的 `setupNavMenu()`
   运行时注入到 `#navMenu` **顶部**（所以它排在 6 个栏目之前）。
   🔑 用**独立类名** `.nav-menu-search`、不复用 `.nav-menu-a`，两条理由：
      ① **语义**：6 个 `.nav-menu-a` 是「站内栏目」，搜索是「工具入口」，不是同一类东西；
      ② **判据**：现有两处按 `.nav-menu-a` 数「6 栏目」——
         `脚本/_probe_games_v2.js:515`（`menu.n === 6`）与 `脚本/_probe_wire.js:119`（`grab('a.nav-menu-a')`），
         复用类名会把它俩一起带红，而它们想断言的其实是「栏目还是那 6 个」。
   🔗 外观靠**上面那行选择器并列**共享 ⇒ 样式只有一份真源，不会跟 `.nav-menu-a` 分叉。 */
.nav-menu-search{gap:9px}
.nav-menu-search svg{width:15px;height:15px;flex:0 0 auto;color:var(--accent-ink)}   /* 放大镜走品牌色：一眼把「工具入口」和「栏目」分开 */
@media(max-width:1200px){.nav-burger{display:inline-flex}}   /* 与 .nav-links 的折叠断点**必须同值**，否则栏目名没了、汉堡也没出来 = 不可导航 */

/* ============ v124 收藏层（基架）============
   消费者：nav 入口（#keepBtn）/ 硬件卡 .hw-i-bt / 游戏卡 .gc-foot / 我的页（B4 待做）
   🚨 只在这里定义一份。各页复制 = 3 份实现、改一处漏两处（本项目踩过的坑）。
   🚨 不照抄线上 `pc-cmp`：那套是「2px 描边 + 偏移阴影」的 sticker，
      本页已是纸片风，抄过来会把紫色泛滥重新引回来。
   🚨 新增动作控件时**先在这个文件加**，别在页面 <style> 里另起一份。 */

/* 动作控件：24px 高纸片。常态只有 1px 淡边 + 灰字，不抢视觉；
   hover / 选中才上 --chip 底 + --accent 边 —— 加法只发生在交互态。 */
.act{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 7px;
  border:1px solid var(--border-2);border-radius:4px;background:transparent;
  font-family:'Sora','Noto Sans SC',sans-serif;font-size:10.5px;font-weight:700;line-height:1;
  color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:color .15s,border-color .15s,background .15s}
.act:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--chip)}
.act:focus-visible{outline:2px solid var(--accent-num);outline-offset:2px}
.act.on{color:var(--accent-ink);border-color:var(--accent);background:var(--chip)}
.act:active{transform:scale(.97)}
.act svg{width:12px;height:12px;display:block;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 空心 → 实心：只改 fill，一个 SVG 表达两种状态（省一个图标，也保证宽度不抖）。
   🚨 文案恒为「收藏」，**不要**做成「收藏 / 已收藏」两句话 —— 文案一变宽度就变，
      卡片右下角会跟着跳，网格里一排卡片对不齐。 */
.act.on svg{fill:currentColor}

/* 动作行：卡片底部「价格 → 动作组」的统一容器。
   ⚠️ 动作组靠 `margin-inline-start:auto` 推右，**不要**改用 justify-content:space-between：
      那会让中间那个元素被拉到正中 —— 动作组会飘到卡片中央去。
   ⚠️ 必须用逻辑属性：ar 是 RTL，physical 的 margin-left 会把动作组推到错误的一侧。 */
.card-acts{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto}

/* nav 入口的本机计数徽章。规格**对齐 #wxAchCount** —— 同一排里两个计数长得不一样很扎眼。 */
.keep-badge{font-family:'Sora',sans-serif;font-size:9.5px;font-weight:800;
  font-variant-numeric:tabular-nums;padding:1px 5px;border-radius:99px;
  background:var(--chip);color:var(--muted);white-space:nowrap}
/* 🚨 `hidden` 会被元素自带的 display 盖掉 → 必须显式写一条（本项目通用坑） */
.keep-badge[hidden]{display:none}
#keepBtn[hidden]{display:none!important}
/* v125「我的」两个可见字。⚠️ 它是**独立 span**、不参与 aria-label ——
   `nav.mineShort`（我的）只负责可见文字，无障碍名仍是 `nav.mine`（我的收藏）。
   WCAG 2.5.3 要求可见标签包含在无障碍名里，「我的」⊂「我的收藏」成立。 */
.keep-label{font-weight:700;white-space:nowrap}
/* ≤720 跟随 #wxAchCount 一起收起来：窄屏只留图标（徽章 + 文字都收，工具区才放得下）。
   实测 320 档的容量见 脚本/_probe_v5.js。 */
@media(max-width:720px){ .keep-badge{display:none} .keep-label{display:none} }

/* ============ R95e-落地：名词速查（全站共用 · 一处定义四页同款）============
   消费者：build.html #glossarySection · laptop.html #pmGloss ·
          hardware.html #hwGloss · peripheral.html #pmGloss
   🚨 **只在这里定义一份**。渲染器 = proto-shell.js 的 glossMountAll()；
      四个页面各写一个空壳（`<div class="gl" data-gloss-scope="…">`），零重复内容。
      四页各复制一遍 = 4 份实现，改一处漏三处（本项目踩过的坑）。

   ▍形制（用户拍板）：「用游戏详情那种常见问题的样式」⇒ 逐值对齐 game_detail.html 的 .gd-faq：
     · 高度动画 `grid-template-rows:0fr → 1fr`，**不猜 max-height**（答案长度从 2 行到 40 行差太大，
       猜一个「够大」的值会让短的先停住、长的慢半拍）
     · 加号→减号 = 两根 1.6px 条；外盒 rotate、内条各自 center 定位 ⇒ RTL 下也不歪
   ▍两级折叠：组级 .gl-g → 条目级 .gl-i。为什么不用原生 <details>：
     原生 details 收起时内容 `display:none`，0fr→1fr 那条动画**根本播不出来**
     （game_detail 是自绘 DOM，这里与它同口径；build.html 原来的 <details> 方案随之退役）。

   ▍布局纪律
     · 全部用**逻辑属性**（margin/padding/border-inline/inset-inline）—— ar 是 RTL
     · 表格靠 .gl-tw 横向滚动承载：最宽的表 5 列（分辨率那张 15 行），窄屏必须能滚
     · ⚠️ 词条正文里的 `**粗体**` 由渲染器转 <b>，这里只管 .gl-tx b 的样式
*/
.gl{display:block}
/* `[hidden]` 的 UA display:none 会被作者样式盖掉 ⇒ 点名补一条（本项目通用坑）。
   四页的宿主 section 另外都带 .hw-d / .pm-d，那两条点名守卫已覆盖；这条是兜底。 */
.gl-block[hidden]{display:none!important}

/* ---- 区块头：小字说明行（标题走各页自己的 .pm-d-sec / .hw-d-sec，不在这里造第二套） ---- */
/* ⛔ `.gl-note`（区块计数说明）已于 2026-09-23 用户拍板删除：四页的 note 槽 + 词典里的 `gloss.note`
   + 这条样式一并下线（用户原话「直接都去掉吧」）。组头右侧的条数徽章已足够表达「每组几条」。
   留档旧值备查：margin:-8px 0 14px; font-size:12.5px; line-height:1.65; color:var(--muted); text-wrap:pretty */

/* ---- 组级卡片 ---- */
.gl-g{position:relative;border:1px solid var(--border);border-radius:12px;background:var(--surface);
  overflow:hidden;margin-bottom:8px}
.gl-gq{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;margin:0;
  padding:12px 16px;font-family:inherit;font-size:13.5px;font-weight:700;line-height:1.5;
  color:var(--text);text-align:start;background:transparent;border:0;cursor:pointer;
  transition:color .16s var(--ease)}
.gl-gq .t{flex:1 1 auto;min-width:0}
/* ⛔ 条数徽标 `.gl-gq .c`（含 `:hover` / `.on` 两条派生色）已于 2026-09-24 用户拍板整条去掉，
   三条规则一并删除 —— 留着就是「从来没生效过」的死规则（铁律 130d：零症状）。
   要恢复：`glossGroupHTML()` 里补回 `<span class="c" aria-hidden="true">'+grp.n+'</span>`。*/
.gl-gq:hover{color:var(--accent-ink)}
.gl-g.on>.gl-gq{color:var(--accent-ink)}

/* ---- 加号 / 减号（与 .gd-faq-q .chev 同配方，改前缀而已） ---- */
.gl-chev{flex:none;width:16px;height:16px;position:relative;opacity:.55;
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.gl-chev::before,.gl-chev::after{content:'';position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:2px;transform:translate(-50%,-50%)}
.gl-chev::before{width:11px;height:1.6px}
.gl-chev::after{width:1.6px;height:11px;transition:height .3s var(--ease),opacity .2s var(--ease)}
.gl-g.on>.gl-gq .gl-chev,.gl-i.on>.gl-iq .gl-chev{transform:rotate(180deg);opacity:1}
.gl-g.on>.gl-gq .gl-chev::after,.gl-i.on>.gl-iq .gl-chev::after{height:0;opacity:0}

/* ---- 折叠体：0fr → 1fr。`min-height:0` 不能省 —— grid 子项默认 min-height:auto
   会把 0fr 撑成内容高度，动画等于没写（本项目的通用坑）。 ---- */
.gl-gb,.gl-ib{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)}
.gl-g.on>.gl-gb,.gl-i.on>.gl-ib{grid-template-rows:1fr}
.gl-gbin,.gl-ibin{overflow:hidden;min-height:0}

/* ---- 组描述：一行说清这一组在讲什么 ---- */
.gl-gdesc{margin:0;padding:0 16px 10px;font-size:12px;line-height:1.65;color:var(--muted);text-wrap:pretty}

/* ---- 条目行 ---- */
.gl-list{border-top:1px solid var(--border)}
.gl-i{position:relative;border-top:1px solid var(--border);overflow:hidden}
.gl-i:first-child{border-top:0}
.gl-iq{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;margin:0;
  padding:11px 16px;font-family:inherit;font-size:13px;font-weight:600;line-height:1.55;
  color:var(--text);text-align:start;background:transparent;border:0;cursor:pointer;
  transition:color .16s var(--ease)}
.gl-iq .t{flex:1 1 auto;min-width:0;text-wrap:pretty}
.gl-iq:hover{color:var(--accent-ink)}
.gl-i.on>.gl-iq{color:var(--accent-ink)}

/* ---- 条目正文：四段（是什么 / 怎么算 / 查表 / 坑） ---- */
.gl-body{padding:2px 16px 16px}
.gl-sec+.gl-sec{margin-top:11px}
.gl-k{display:block;font-family:'Sora','Noto Sans SC',sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.06em;color:var(--accent-ink);margin-bottom:4px}
.gl-tx{font-size:12.5px;line-height:1.72;color:var(--muted);margin:0;text-wrap:pretty}
.gl-tx b,.gl-pit b{color:var(--text);font-weight:700}

/* 分步：序号圆点 + 小标题 + 正文。第几步靠代码现算，不写进文案（翻译后长度不同也对得齐） */
.gl-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.gl-steps>li{display:flex;gap:9px;align-items:flex-start}
.gl-steps .n{flex:none;width:16px;height:16px;border-radius:50%;background:var(--chip);color:var(--accent-ink);
  font-family:'Sora',sans-serif;font-size:9.5px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;margin-top:3px}
.gl-steps .c{flex:1 1 auto;min-width:0}
.gl-steps .h{margin:0 0 2px;font-size:12.5px;font-weight:700;color:var(--text);line-height:1.55}

/* 查表：窄屏横向滚动（最宽的 5 列 × 15 行）；表头不换行、正文可换行 */
.gl-tw{overflow-x:auto;border:1px solid var(--border);border-radius:8px;background:var(--surface)}
.gl-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.gl-tbl th{padding:7px 10px;background:var(--surface-2);color:var(--text);font-weight:800;
  text-align:start;white-space:nowrap;line-height:1.45}
.gl-tbl td{padding:6px 10px;color:var(--muted);line-height:1.55;vertical-align:top;
  border-top:1px solid var(--border);overflow-wrap:anywhere}
.gl-tbl tr:first-child td{border-top:0}
.gl-tbl td:first-child{color:var(--text);font-weight:600}

/* 坑：给一层淡紫底，与前三段拉开 —— 「坑」是这一族里最该被扫到的一段 */
.gl-pit{background:var(--chip);border-radius:8px;padding:9px 11px;font-size:12px;line-height:1.7}

/* 动效：跟随全站「弱化动效」开关（html[data-motion="off"]）与系统偏好，两条都要有 */
@media (prefers-reduced-motion:reduce){
  .gl-gb,.gl-ib,.gl-chev,.gl-chev::after,.gl-gq,.gl-iq{transition:none}
}
html[data-motion="off"] .gl-gb,html[data-motion="off"] .gl-ib,html[data-motion="off"] .gl-chev,
html[data-motion="off"] .gl-chev::after,html[data-motion="off"] .gl-gq,html[data-motion="off"] .gl-iq{
  transition:none}

/* 窄屏：正文与表都收一档字号，行内边距也收（375 档可视宽度只剩 ~340） */
@media(max-width:520px){
  .gl-gq{padding:11px 12px;font-size:13px}
  .gl-gdesc{padding:0 12px 9px}
  .gl-iq{padding:10px 12px;font-size:12.5px}
  .gl-body{padding:2px 12px 14px}
  .gl-tbl{font-size:11px}
  .gl-tbl th,.gl-tbl td{padding:5px 8px}
}