/* ───────────────────────────────────────────────────────────
   extra.css —— 接进真内容之后才需要的三小组规则。
   设计仍只有一个源（arch.html 抽出的 site.css）。这份文件【只加】三类
   arch.html 当初没有的东西，不覆盖它任何一条：
     ① 真图：arch.html 里所有图位都是空的 .plate（CSS 柔光），
        真照片进来时用 <img> 替掉 —— 这里给盒子定形。
        深色瓷砖上的照片压一层暗罩，白字才压得住任何一张产品图。
     ② 分页 / 真链接筛选：老站有 page/15，新站必须给爬虫一条真翻页路；
        筛选也从 <button> 换成 <a>（按钮爬虫走不进去）。
     ③ 留言板：arch.html 里那个 cform 只是设计稿里的样子，生成器从不输出它；
        这一版才第一次真有表单落进 /contact/。
   ─────────────────────────────────────────────────────────── */

/* ① 真图 */
.ptile__art > img{width:100%;aspect-ratio:4/3;object-fit:cover}
.tile__art > img{width:100%;height:100%;object-fit:cover}
.tile__art--img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.68))}
.art{position:relative;overflow:hidden}
.art > img{width:100%;height:100%;object-fit:cover}
/* ★ 2026-10-14 用户："排版太松散" → 收间距；随后又："这个能否拉宽一点，
   并对不同平台自动适应" ⇒ 把【横向】改成跟屏宽自适应，纵向保持收紧后的间距。
   · 正文栏不再另限宽（回到容器宽），容器按屏宽分档：
     手机/平板 = 100%（容器自带 --gut 内边距）；桌面 = 1120；超大屏 = 1240
   · .wrap.vid（视频块）与正文同宽，两者不会一宽一窄。
   · 用 :has(> .prose) 只挑"正文页"，首页/列表页的 980 骨架不动。 */
.prose{max-width:none}
.prose img{margin-block:12px}
.prose p{margin-top:9px}
.prose h2,.prose h3{margin-top:var(--gap-md)}
.wrap:has(> .prose){max-width:min(100%,1120px)}
.wrap.vid{max-width:min(100%,1120px)}
@media (min-width:1600px){
  .wrap:has(> .prose),.wrap.vid{max-width:min(100%,1240px)}
}
/* ★ 同上：页头也收一遍 —— 设计稿里上内边距 clamp(40,6vw,84)（1280 屏约 77px），
   加面包屑/大标题/元信息后页头 370px。收成 clamp(30,3.6vw,50) 并把两处小间距收紧。 */
.phead{padding-block:clamp(30px,3.6vw,50px) clamp(16px,2vw,26px)}
.crumb{margin-bottom:10px}
.phead p{margin-top:8px}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:6px}

/* ② 筛选条与分页 —— 与 .filters button 同一套尺寸，只是换成 a
   ★ 2026-10-12：文字色原来沿用 --fg-2 中灰（110）。实测 apple.com.cn 的筛选行
     （UL.TabNav_items：所有产品/笔记本电脑/台式电脑/显示器）**未选中项是
     rgb(29,29,31) 近黑**，选中项才是白字+黑胶囊；而苹果那一页 11~17px 的小字去重后
     是 .8 / .88 / .72 / .56 / #1d1d1f / #333336，`rgb(110,110,115)` 只出现一次。
     ⇒ 界面文字用近黑，中灰留给脚注法务。分页同理（同一族的"真链接"）。
   ★★ 注意：这里必须写 `.filters a` —— 生成器发的是 <a>，
      arch.html 里那几条 `.filters button` 规则【一条都不匹配】（见 check_site 的对应闸门）。 */
.filters a,.pager a,.pager span{font-size:.875rem;color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 16px;text-decoration:none;
  transition:color .2s,border-color .2s,background-color .2s}
.filters a:hover,.pager a:hover{color:var(--fg);border-color:var(--fg-3);text-decoration:none}
.filters a[aria-current="page"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--gap-lg)}
.pager [aria-current="page"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pager .pager__gap{border-color:transparent}

/* ③ 留言板 —— 只有 /contact/ 用得上，但样式在这儿【一次性】定义，
   省得以后每加一个交互元件都要回去改设计稿。
   ★ 一个颜色常量都不新引：颜色全部走 :root 已有的变量。
     bad_var 闸门只认 CSS（arch.html 抽出来的那份）里定义过的变量，
     在这里现定义一个新 var 会被判「未定义」——所以别那么写。 */
.gb{display:grid;gap:var(--gap-sm);max-width:720px}
.gb__note{color:var(--fg-2);font-size:var(--fs-body);margin-bottom:var(--gap-sm)}
.gb__form{display:grid;gap:var(--gap-sm)}
.gb__row{display:grid;gap:6px}
/* ★ 栅格会把子项 blockify：.btn 本是 inline-flex，进了 grid 就变 flex，
   justify-self 默认 stretch ⇒ 提交按钮被拉满整行（实测 346px = 容器全宽）。
   苹果的按钮一律按内容宽，不拉通栏 —— 一条 justify-self 就够。
   选择器里两个类名（gb__row / btn）都是 bad_class 已认识的，安全。 */
.gb__row .btn{justify-self:start}
.gb__lab{font-size:var(--fs-small);color:var(--fg-2)}
.gb__opt{color:var(--fg-3)}
.gb__in{font:inherit;font-size:var(--fs-body);color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;width:100%}
.gb__in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
textarea.gb__in{min-height:7.5em;resize:vertical}
/* 蜜罐：真人看不见、也不会填；脚本照着 DOM 填就露馅。
   用 clip 而不是 display:none —— 有的机器人专挑 hidden 的字段跳过。 */
.gb__hp{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.gb__cap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gb__cap-img{height:44px;width:auto;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg-alt);cursor:pointer}
.gb__cap-new{font:inherit;font-size:var(--fs-small);color:var(--fg-2);background:none;
  border:0;padding:0;cursor:pointer;text-decoration:underline}
.gb__cap-in{max-width:8em}
.gb__msg{font-size:var(--fs-small);color:var(--fg-2);min-height:1.4em}
/* ★ 失败时【不引红色常量】—— 改用最高对比度的前景色。
   深色主题下 #c2410c 那种砖红落在纯黑上只有 2.9:1，读不清；
   --fg 在两个主题里都是「正常正文」，靠对比度说话，不靠色相。 */
.gb__msg[data-bad="1"]{color:var(--fg);font-weight:500}
.gb__list{display:grid;gap:var(--gap-sm);margin-top:var(--gap-md)}
.gb__item{border-top:1px solid var(--line);padding-top:var(--gap-sm)}
.gb__meta{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  font-size:var(--fs-small);color:var(--fg-2)}
.gb__who{color:var(--fg);font-weight:500}
.gb__body{margin-top:6px;color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere}
.gb__reply{margin-top:8px;padding:10px 12px;background:var(--bg-alt);
  border-radius:var(--r-sm);font-size:var(--fs-small);color:var(--fg-2)}
.gb__reply b{color:var(--fg);font-weight:500}
.gb__foot{display:flex;justify-content:center;margin-top:var(--gap-md)}
/* ★ 上面那条 display:flex 会【压过】浏览器对 [hidden] 的默认 display:none
   （作者样式赢 UA 样式）⇒ 不补这一行，「没有更多留言」时那个隐藏的按钮
   反而会显示出来。属性选择器不参与 bad_class 判定，安全。 */
.gb__foot[hidden]{display:none}
.gb__more{font:inherit;font-size:var(--fs-small);color:var(--fg-2);background:none;
  border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 16px;cursor:pointer}
.gb__more:hover{color:var(--fg);border-color:var(--fg-3)}
.gb__empty{color:var(--fg-3);font-size:var(--fs-body)}

/* ───────────────────────────────────────────────────────────
   视频播放器（记录上的 video 字段 → gen_full.py 的 video_block()，
   以及正文里手写的 <video>）
   ★ 与站内同一条口径：圆角只用 --r-sm、**不投影**（全站 box-shadow = 0）。
   ★ 宽度跟容器走 + height:auto ⇒ **不写 aspect-ratio**：
     视频的宽高比由文件本身决定，写死一个比例在竖屏视频上会留黑边。
   ★ 底色用 --bg-dark（站内唯一那个 #000 的 token）：
     视频没加载出来时那块是黑的，而不是白得发亮的一块空白。
   ─────────────────────────────────────────────────────────── */
.vid{max-width:760px;margin-inline:auto;margin-bottom:var(--gap-sm)}
.vid video,.prose video{width:100%;height:auto;display:block;
  background:var(--bg-dark);border-radius:var(--r-sm)}
/* ★ 第三方嵌入（视频站的播放器）：16:9 响应式盒子。
   这里【可以用】aspect-ratio —— 播放器页面本来就是固定宽高比，
   与 <video>（比例由文件决定、写死会留黑边）不同。 */
.vid--embed{position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--bg-dark);border-radius:var(--r-sm)}
.vid--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ───────────────────────────────────────────────────────────
   产品中心 ↔ 下载中心 打通后的两处呈现（2026-10-12）
   · 产品页：「该型号的资料」——列表，每行一条资料，链到它自己的下载页
   · 下载页：「适用型号」——反向索引（存在产品侧，这里是算出来的）
   ★ 与站内口径一致：不投影、只用 1px var(--line) 分隔。
   ─────────────────────────────────────────────────────────── */
.dlrows{list-style:none;margin:0;padding:0}
.dlrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.dlrow:last-child{border-bottom:0}
.dlrow__m{color:var(--fg-2);font-size:var(--fs-small)}
.dlfor{font-size:var(--fs-body);line-height:var(--lh-text);margin-top:6px}

/* ───────────────────────────────────────────────────────────
   图文块（2026-10-12 用户："把整体排版完全搬官方"）
   官网那种【左文右图 / 左图右文】交替的排版。
   ★ 由生成器输出标记（不清洗器那条路 —— 清洗器会删 class）。
   ─────────────────────────────────────────────────────────── */
/* ★★ 2026-10-12 用户："排版与英文还是不一样，还能修正吗" ——
   对照官网：每个图文块是一个【带浅灰描边的卡片】；小节名单独一行、字号朴素；
   英文正文就是【正文大小】。上一版无边框、小节名大号粗体、英文是小灰字 ⇒ 不像。 */
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  border:1px solid var(--line);background:var(--bg);margin:var(--gap-md) 0;
  overflow:hidden}
.figrow__art{display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);min-height:0}
.figrow__art img{width:100%;height:100%;object-fit:cover;display:block}
.figrow__txt{padding:2.5rem 2.75rem;display:flex;flex-direction:column;
  justify-content:center;gap:.5rem}
.figrow__hd{font-size:var(--fs-body);font-weight:600;color:var(--fg);
  line-height:var(--lh-head);margin:0}
.figrow__txt p{color:var(--fg);font-size:var(--fs-body);line-height:var(--lh-text);
  margin:0}
.figrow__en{color:var(--fg-2);font-size:var(--fs-small);line-height:var(--lh-text);
  margin-top:.4rem}
.figrow--flip .figrow__art{order:2}
.figrow--flip .figrow__txt{order:1}
@media (max-width:734px){
  .figrow{grid-template-columns:1fr}
  .figrow--flip .figrow__art,.figrow--flip .figrow__txt{order:0}
  .figrow__art img{height:auto}
  .figrow__txt{padding:1.5rem 1.25rem}
}

/* ───────────────────────────────────────────────────────────
   组合页「本组合包含」（2026-10-13 用户："配套没有与蜗牛官网的产品组合展示一致"）
   官网那一块的排版：一个描边大卡片，左 = Included Products 成员清单，
   右 = 一张产品大图。这里把纯文字列表升级成同一套可视化排版：
   · 左列每个成员一行：方形缩略图 + 型号名 + 型号代码，整行可点（链到成员页）
   · 右列大图：取第一个有封面图的成员（官网那里放的就是成员产品图）；
     成员都没图时退回组合自己的封面
   ★ 口径与 figrow 完全一致：1px var(--line) 描边、无投影、颜色/圆角全走 :root。
   ─────────────────────────────────────────────────────────── */
.bundlebox{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border:1px solid var(--line);background:var(--bg);margin-top:var(--gap-md);
  overflow:hidden}
.bundle__list{list-style:none;margin:0;padding:var(--gap-sm) 0}
.bitem__a{display:flex;align-items:center;gap:var(--gap-sm);
  padding:12px 1.5rem;color:var(--fg);text-decoration:none}
.bitem__a:hover{background:var(--accent-soft)}
.bitem__art{width:64px;height:64px;flex:none;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-alt)}
.bitem__art img{width:100%;height:100%;object-fit:cover;display:block}
.bitem__art--empty{border:1px solid var(--line);box-sizing:border-box}
.bitem__body{display:grid;gap:2px;min-width:0}
.bitem__t{font-size:var(--fs-body);font-weight:500;line-height:var(--lh-text);
  color:var(--fg);overflow-wrap:anywhere}
.bitem__m{font-size:var(--fs-small);color:var(--fg-2)}
.bundle__art{background:var(--bg-alt);display:flex;align-items:center;
  justify-content:center;min-height:0;border-left:1px solid var(--line)}
.bundle__art img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:734px){
  .bundlebox{grid-template-columns:1fr}
  .bundle__art{order:-1;border-left:0;border-bottom:1px solid var(--line)}
  .bundle__art img{height:auto}
  .bitem__a{padding:10px 1rem}
}

/* ───────────────────────────────────────────────────────────
   站内搜索【面板自己的位置规则】（srv/static/search.js）
   ★ 只有这一段写在 extra.css：面板是 JS 首次点击时才创建的，
     所以 arch.html 里的设计系统没有它（与客服小窗口同一个处境）。
   ★ 输入框 / 按钮 / 结果行的样式在 arch.html（两处共用同一套 DOM）。
   ★★ 底色【固定用 --bg（白）】，不用 --nav-drawer-bg：
      首页的导航是深色的，跟着它会变成一整块黑板，而面板里的摘要文字用的是
      灰阶（--fg-2）—— 白底上才读得清（实测截图里几乎看不见）。
      苹果也是这样：深色导航下的搜索面板仍是一块浅色面。
   ─────────────────────────────────────────────────────────── */
.srch__panel{
  display:none;position:absolute;left:0;right:0;top:100%;
  background:var(--bg);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:18px var(--gut) 24px;max-height:calc(100vh - 44px);overflow-y:auto;
}
.srch__panel.is-open{display:block}

/* ───────────────────────────────────────────────────────────
   在线客服（custsvc.py）—— 原生 <details>，零 JS。
   ★★ 尺寸 / 色彩 / 排版一律【复用站内既有规则】，不自己估。
      下面四处都是量出来对不上之后改回来的：
      · 按钮 = 站内的 `.btn .btn--pri`（11px 21px / lh20 / 1px 描边 ⇒ 高 44；
        arch.html 的注释写明「尺寸是实测值，不是估算」）。
        原来的写法是自己估 10px 20px / line-height:--lh-body(22.6) / 无描边 —— 三处都对不上。
      · 字距：`--ls-body` 只用于 `--fs-sub`(21px)，它自己的注释就写着
        「12~17px 与 40 以上都是 0」⇒ **17px 的按钮上不许加 letter-spacing**。
      · 焦点环 = 站内唯一的写法 `outline:2px solid var(--accent); outline-offset:1px`
        （arch.html 的 `.field input:focus` 与 extra.css 的 `.gb__in:focus` 两处先例）。
      · ★ **全站 box-shadow = 0**（arch.html:31 明文，全文没有一条 box-shadow 声明）
        ⇒ 这里【一个投影都不许加】；漂浮件的分隔只靠 1px `var(--line)`，
          与 `.gb__item` / `.gb__cap-img` 同一手法。
   ★ 字号只用 --fs-body / --fs-small / --fs-cap（与 .gb__* 的用法一致）；
     颜色全走站内变量 ⇒ 深色模式自动跟随，不另写一套。
   ★ 类名全部在 .cs* 名下（bad_class 闸门要求它们在这里出现）。
   ─────────────────────────────────────────────────────────── */
.cs{position:fixed;right:var(--gut);bottom:var(--gut);z-index:60;
  font-family:var(--font)}
/* <summary> 只补它自己的两件事；尺寸/配色/描边全部交给 .btn / .btn--pri */
.cs__btn{list-style:none}
.cs__btn::-webkit-details-marker{display:none}
.cs__lbl{white-space:nowrap}
/* 展开时给一个"按下去"的反馈 —— 用的就是站内的 hover 色，不引入新颜色 */
.cs[open] .cs__btn{background:var(--accent-btn-h)}
.cs__panel{position:absolute;right:0;bottom:calc(100% + 10px);width:290px;
  background:var(--bg);color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--gap-sm);text-align:left}
.cs__h{margin:0 0 10px;font-size:var(--fs-body);font-weight:600}
.cs__list{margin:0;padding:0;list-style:none}
.cs__a,.cs__a--static{display:flex;justify-content:space-between;gap:var(--gap-sm);
  align-items:baseline;padding:10px 8px;border-radius:var(--r-sm);
  color:var(--fg);text-decoration:none;min-height:44px;box-sizing:border-box}
a.cs__a:hover{background:var(--accent-soft);color:var(--accent)}
.cs__k{font-size:var(--fs-small);color:var(--fg-2);white-space:nowrap}
.cs__v{font-size:var(--fs-small);color:var(--fg);overflow-wrap:anywhere;text-align:right}
/* 焦点环：四处合并成站内那一句写法（2px var(--accent) / offset 1px） */
.cs__btn:focus-visible,.cs__a:focus-visible,.cs__x:focus-visible,.cs__grip:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px}
/* 智能客服 App 那一行：本块里的主推入口，给一层浅色底把它和"打电话/发邮件"分开 */
.cs__a--app{background:var(--accent-soft)}
a.cs__a--app:hover{background:var(--accent-soft);color:var(--accent)}
.cs__k--app{color:var(--accent);font-weight:600;white-space:normal}
.cs__qr{margin:10px 0 0;text-align:center}
.cs__qr img{max-width:150px;height:auto}
.cs__note{margin:10px 0 0;font-size:var(--fs-cap);color:var(--fg-3)}
@media (prefers-reduced-motion:no-preference){
  .cs__panel{animation:cs-in .18s ease-out}
  @keyframes cs-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media (max-width:734px){
  .cs{right:var(--gap-sm);bottom:var(--gap-sm)}
  .cs__panel{width:min(290px,calc(100vw - 2*var(--gap-sm)))}
}
/* 智能客服小窗口（site.js 首次点击时才创建；无 JS 时不存在，<a> 直接跳 /cs/）。
   桌面 = 右下浮动小窗；≤734px = 整屏铺满。
   ★ 仍然【不投影】—— 全站 box-shadow = 0，分隔只靠 1px var(--line)。 */
.cs__win{position:fixed;z-index:70;right:var(--gut);bottom:calc(var(--gut) + 56px);
  width:380px;height:min(620px,calc(100vh - 150px));display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden}
.cs__win[hidden]{display:none}
/* ★ flex:0 0 auto + min-height：标题栏是【唯一的关闭入口】，绝不能被压缩。
   实测过一次整屏态下标题栏只剩 22px 的样子 —— 那样 ✕ 看着就像不存在。 */
.cs__winbar{display:flex;align-items:center;gap:6px;padding:6px 6px 6px var(--gap-sm);
  flex:0 0 auto;min-height:44px;
  border-bottom:1px solid var(--line);background:var(--bg-alt)}
.cs__wint{flex:1;min-width:0;font-size:var(--fs-small);font-weight:600;color:var(--fg);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 缩放手柄 —— 在【标题栏】里、紧挨关闭按钮。
   ★ 为什么不放右下角：那个位置 44×44 会正好压住 App 自己的「发送」按钮
     （实测它距窗口右边缘只有 12px）—— 抓手盖住主操作按钮是最糟的。
   ≤734px 是整屏铺满、没什么可拉 ⇒ 隐藏。 */
.cs__grip{display:none;font:inherit;line-height:1;border:0;background:none;padding:0;
  color:var(--fg-3);cursor:nwse-resize;min-width:44px;min-height:44px;
  border-radius:var(--r-sm)}
.cs__grip::after{content:"";display:block;width:11px;height:11px;margin:0 auto;
  background:repeating-linear-gradient(135deg,currentColor 0 1.5px,transparent 1.5px 3.5px)}
.cs__grip:hover{color:var(--fg);background:var(--accent-soft)}
@media (min-width:735px){ .cs__grip{display:inline-block} }
/* ★ 关闭按钮【带文字】。2026-10-12 用户实测反馈："客服出来没有隐藏按键或功能"——
   光一个细 ✕ 太容易被当成装饰（尤其整屏态下）。文字来自 data-cs-close，
   中英各一份，JS 里仍然一个汉字都没有。 */
.cs__x{display:inline-flex;align-items:center;gap:7px;font:inherit;
  font-size:var(--fs-small);line-height:1;border:0;background:none;color:var(--fg-2);
  cursor:pointer;min-width:44px;min-height:44px;padding:0 12px;border-radius:var(--r-sm)}
.cs__x:hover{color:var(--fg);background:var(--accent-soft)}
.cs__frame{flex:1;width:100%;border:0;background:var(--bg)}
@media (max-width:734px){
  /* ★★ 2026-10-12 用户实测反馈："客服出来……无法让我操作菜单右上角"。
     原来这里是 `height:100dvh` 铺满整屏 ⇒ **把站点导航一起盖住**，
     右上角的搜索 / EN / 汉堡全都点不到 —— 而客服窗口里又没有导航。
     现在从导航下沿开始（站内导航高 44px，见 .nav），导航始终可用。
     ★ 用 top+bottom 而不是 height：省得再算一遍 dvh 的加减。 */
  .cs__win{left:0;right:0;top:44px;bottom:0;width:auto;
    border:0;border-radius:0}
}
@media (prefers-reduced-motion:no-preference){
  .cs__win{animation:cs-in .18s ease-out}
}
/* ───────────────────────────────────────────────────────────
   技术社区（srv/static/community.js）—— 与客服/搜索同一个处境：
   JS 才出现的 DOM，所以样式写在这里。配色全用设计 token，不投影。
   ─────────────────────────────────────────────────────────── */
.cm__auth{display:flex;align-items:center;justify-content:space-between;gap:var(--gap-sm);
  padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:var(--gap-md)}
.cm__view{min-height:32px}
.cm__auth .cm__who{font-size:var(--fs-body);color:var(--fg);font-weight:600}
.cm__auth .cm__actions{display:flex;gap:var(--gap-sm)}
.cm__cs{margin:var(--gap-lg) 0 0;font-size:var(--fs-cap);color:var(--fg-3);text-align:center}
.cm__cs a{color:var(--accent);text-decoration:none}
.cm__cs a:hover{text-decoration:underline}
/* 列表卡片（带封面缩略图）—— 与全站卡片的悬停动效一致 scale(1.01613) */
.cm__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--gap-sm)}
.cm__card{display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;text-decoration:none;color:inherit;
  background:var(--bg)}
a.cm__card:hover{transform:scale(1.01613)}
a.cm__card:hover .cm__t{color:var(--accent)}
.cm__card-art{display:block;aspect-ratio:16/9;background:var(--bg-alt);overflow:hidden}
.cm__card-art img{width:100%;height:100%;object-fit:cover;display:block}
/* ★ 2026-10-15 用户："这图片补得太差了…简单及对口的图片会舒服一些"——
   没有对口实拍时（保修/上门/返修这类政策题），占位图原来是一层层斜条纹，
   看着像"缺图"。改成平静的浅渐变 + 一个细圆环，像有意留白而不是破图。*/
.cm__card-ph{display:block;width:100%;height:100%;position:relative;
  background:linear-gradient(165deg,var(--bg-alt) 0%,var(--bg) 100%)}
.cm__card-ph::after{content:"";position:absolute;left:50%;top:50%;
  width:32%;aspect-ratio:1/1;transform:translate(-50%,-50%);
  border:1.5px solid var(--line);border-radius:50%;opacity:.6}
.cm__card-body{display:flex;flex-direction:column;gap:5px;padding:12px 14px}
.cm__t{font-size:var(--fs-body);font-weight:600;color:var(--fg);line-height:var(--lh-text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cm__meta{font-size:var(--fs-cap);color:var(--fg-3)}
.cm__tag{display:inline-block;padding:1px 8px;margin-left:8px;border-radius:999px;
  font-size:var(--fs-cap);border:1px solid var(--accent);color:var(--accent);font-weight:600}
.cm__empty{padding:var(--gap-lg) 0;text-align:center;color:var(--fg-3);font-size:var(--fs-body)}
.cm__detail{padding:var(--gap-md) 0}
.cm__d-title{font-size:var(--fs-head);font-weight:700;color:var(--fg);line-height:var(--lh-head)}
.cm__d-meta{font-size:var(--fs-cap);color:var(--fg-3);margin:8px 0 var(--gap-md)}
.cm__d-body{font-size:var(--fs-body);color:var(--fg);line-height:var(--lh-text);
  white-space:pre-wrap;overflow-wrap:anywhere}
.cm__reply{border-top:1px solid var(--line);padding:14px 0}
.cm__r-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--gap-sm)}
.cm__r-who{font-size:var(--fs-small);font-weight:600;color:var(--fg)}
.cm__r-at{font-size:var(--fs-cap);color:var(--fg-3)}
.cm__r-body{font-size:var(--fs-body);color:var(--fg);line-height:var(--lh-text);
  margin-top:6px;white-space:pre-wrap;overflow-wrap:anywhere}
.cm__r-foot{margin-top:6px}
.cm__vote{font:inherit;font-size:var(--fs-cap);line-height:1;border:1px solid var(--line);
  background:var(--bg);color:var(--fg-2);cursor:pointer;padding:4px 12px;border-radius:999px;
  min-height:30px}
.cm__vote.is-on{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.cm__editor{border-top:1px solid var(--line);padding:var(--gap-md) 0;margin-top:var(--gap-md)}
.cm__field{margin-bottom:var(--gap-sm)}
.cm__field label{display:block;font-size:var(--fs-cap);color:var(--fg-2);margin-bottom:4px}
.cm__field input,.cm__field textarea{width:100%;box-sizing:border-box;
  font:inherit;font-size:var(--fs-body);color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 12px}
.cm__field textarea{min-height:120px;resize:vertical}
.cm__cap{display:flex;align-items:center;gap:var(--gap-sm)}
.cm__cap img{height:36px;border:1px solid var(--line);border-radius:var(--r-sm)}
.cm__err{margin:8px 0;font-size:var(--fs-small);color:var(--fg-3)}
.cm__authform{max-width:420px}
/* 附件（照片/视频） */
.cm__media{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:var(--gap-sm);margin-top:8px}
.cm__media-item{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-alt)}
.cm__media-item img,.cm__media-item video{width:100%;height:140px;object-fit:cover;display:block}
.cm__media-link{display:block}
.cm__media-rm{position:absolute;top:6px;right:6px;font:inherit;font-size:var(--fs-cap);
  line-height:1;border:0;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;
  padding:4px 9px;border-radius:999px;min-height:26px}
.cm__media-rm:hover{background:rgba(0,0,0,.85)}
.cm__media-status{font-size:var(--fs-cap);color:var(--fg-3);padding:6px}
.cm__media--edit{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.cm__media--edit .cm__media-item img,.cm__media--edit .cm__media-item video{height:90px}
/* ★ 2026-10-14 用户："横向排列由三个改成四个，同时正比例缩小一点" ——
   列表栅格（产品/案例/新闻共用 .g3）由 repeat(3) 改 repeat(4)；
   窄屏按档降级，避免小屏挤成一列。 */
.g3{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){ .g3{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .g3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .g3{grid-template-columns:minmax(0,1fr)} }

/* 社区分区标签条（2026-10-13：音响技术区 / 蜗牛应用与技术）*/.cm__tabs{display:flex;gap:var(--gap-sm);flex-wrap:wrap;margin-bottom:var(--gap-md)}
/* ★ 分区标签配色（2026-10-13 用户口径，两轮）：选中=站内蓝（--accent-btn）实心，
   未选中=**深黑实心**（--fg 当底、--bg 当字）—— 用户原话"蓝色用选中，非选中用深黑色"。
   深色主题下 --fg / --bg 自动对调，未选中变浅底深字，不会黑底黑字看不见。 */
.cm__tab{font:inherit;font-size:var(--fs-body);cursor:pointer;border:1px solid var(--fg);
  background:var(--fg);color:var(--bg);padding:9px 18px;border-radius:999px;min-height:40px}
.cm__tab:hover{border-color:var(--accent-btn);color:var(--bg)}
.cm__tab--on,.cm__tab--on:hover{background:var(--accent-btn);color:#fff;
  border-color:var(--accent-btn)}
/* 服务支持页顶部的【常驻搜索条】（2026-10-15 用户：「增加一个固定搜索菜单，方便随时找资料」，
   随后又指出：「排好版，不要挡到了」）
   ★ 只有【输入行】吸顶 —— 一条 66px 的工具条，滚到哪都能搜；
     导航（relative，随页面滚走）之上/之下都不抢空间。
   ★ 结果不再常驻在吸顶块里（那样搜一次就整屏盖住，用户实测反馈"挡到了"）：
     改成【紧贴输入行的下拉】，输入才有、点空白或 Esc 就收；高度有上限 + 内部滚动。
   ★ z-index 40 < 导航的 60：导航还在屏上时，导航的搜索面板仍然盖在它上面。
   ★ 组件本身（.srch__form / .srch__in / .srch__go / .srch__out）全部复用站内既有规则。 */
.srch--inpage{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--bg);border-bottom:1px solid var(--line)}
.srch--inpage .srch__bar{padding:14px var(--gut)}
.srch--inpage .srch__form--inline{margin:0}
.srch--inpage .srch__res{position:absolute;left:0;right:0;top:100%;display:none;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:0 var(--gut) var(--gap-md);
  max-height:min(42vh,360px);overflow-y:auto}
.srch--inpage.is-open .srch__res{display:block}
.srch--inpage .srch__stat{margin-top:10px;text-align:center}
.srch--inpage .srch__out{margin-top:8px}
@media (max-width:620px){
  .srch--inpage .srch__bar{padding:10px var(--gut)}
  .srch--inpage .srch__res{max-height:52vh}
}
/* 最新下载（服务支持页）—— 二列排布（2026-10-15 用户：「改成二列，每列尽量排满一点」）
   ★ 只加一个修饰类，行本身的样式不动：半宽下 112/160 那两列太占地方，
     这里收窄成 88/74 并减小 gap，标题才有整行可读。 */
.rows--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,52px)}
.rows--2 .row{grid-template-columns:88px minmax(0,1fr) 74px;gap:12px}
@media (max-width:620px){
  .rows--2{grid-template-columns:minmax(0,1fr)}
  .rows--2 .row{grid-template-columns:minmax(0,1fr);gap:5px}
}
/* 荣誉证书（照国外官网：整张证书图竖排 + 名称；点击原图放大）*/
/* ★ 2026-10-15 用户：「把杜比、DTS 放在第一排中间二个位，最左 FCC、最右 CE，其他放下面」
   ⇒ 从 flex 折行改成【固定 4 列】网格：列数不再随窗口宽度漂，第一排就是前 4 张。 */
.certs{display:grid;grid-template-columns:repeat(4,170px);gap:var(--gap-md);
  justify-content:center}
@media (max-width:734px){.certs{grid-template-columns:repeat(2,1fr);gap:var(--gap-sm)}}
.cert{display:block;width:170px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px;text-align:center;cursor:zoom-in;
  font:inherit;color:inherit}
.cert:hover{border-color:var(--fg-3)}
.cert__art{display:block;aspect-ratio:7/10;background:var(--bg-alt);overflow:hidden}
.cert__art img{width:100%;height:100%;object-fit:contain;display:block}
.cert__nm{display:block;margin-top:10px;font-size:var(--fs-body);font-weight:600;color:var(--fg)}
/* 「FCC 认证报告」入口卡：占原来那张 FCC 证书的格子，点它进下层页 /honors/fcc/ */
.cert--link{text-decoration:none;cursor:pointer}
.cert--link .cert__art img{object-fit:contain;padding:8px}
.cert--link:hover .cert__nm{color:var(--accent)}
.lb{position:fixed;inset:0;z-index:9999;background:rgba(20,20,22,.88);
  display:none;align-items:center;justify-content:center;padding:var(--gap-lg)}
.lb.is-on{display:flex}
.lb__in{max-width:min(92vw,820px);max-height:88vh;text-align:center}
.lb__img{max-width:100%;max-height:76vh;object-fit:contain;display:block;margin:0 auto;
  background:#fff;border-radius:var(--r-sm)}
.lb__cap{margin-top:var(--gap-sm);color:#fff;font-size:var(--fs-body);font-weight:600}
.lb__desc{margin-top:6px;color:rgba(255,255,255,.72);font-size:var(--fs-cap);line-height:1.6}
.lb__x{position:absolute;top:var(--gap-md);right:var(--gap-md);font:inherit;
  font-size:var(--fs-body);border:0;background:rgba(255,255,255,.14);color:#fff;
  cursor:pointer;padding:8px 15px;border-radius:999px;min-height:40px}
.lb__x:hover{background:rgba(255,255,255,.26)}
/* ── FCC 认证报告（2026-10-15，B28 先上）─────────────────────────────
   门面用官方 FCC LOGO（用户给的 1146×1050 原图，不改像素）；
   型号列表每行 = 主承认页缩略图 + 型号 + FCC ID + 「查看报告」。
   点开进灯箱后可以 ← → 翻页看三份（主承认页 / 5.8G / MPE）。 */
.fccblock{margin-top:var(--gap-lg)}
.fcchead{display:flex;align-items:center;gap:var(--gap-md);flex-wrap:wrap;
  padding:var(--gap-md) 0;border-top:1px solid var(--line)}
.fcchead__logo{width:auto;height:72px;display:block}
.fcchead__tx{min-width:0}
.fcchead__t{margin:0;font-size:var(--fs-head);font-weight:700;color:var(--fg);line-height:1.3}
.fcchead__s{margin:0;font-size:var(--fs-body);color:var(--fg-2);line-height:1.7}
.fcclist{display:grid;gap:var(--gap-sm);margin-top:var(--gap-sm)}
.fccrow{display:flex;align-items:center;gap:var(--gap-md);width:100%;text-align:left;
  font:inherit;color:inherit;cursor:zoom-in;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.fccrow:hover{border-color:var(--fg-3)}
.fccrow__art{flex:0 0 auto;width:52px;height:74px;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.fccrow__art img{width:100%;height:100%;object-fit:contain;display:block}
.fccrow__main{flex:1 1 auto;min-width:0}
.fccrow__nm{display:block;font-weight:600;color:var(--fg)}
.fccrow__meta{display:block;margin-top:3px;font-size:var(--fs-cap);color:var(--fg-3)}
.fccrow__go{flex:0 0 auto;font-size:var(--fs-cap);color:var(--fg-3);white-space:nowrap}
.fccrow:hover .fccrow__go{color:var(--fg)}
.fccnote{margin:var(--gap-sm) 0 0;font-size:var(--fs-cap);color:var(--fg-3)}
/* ★ 2026-10-15 证书行下方的可见要点（编号 · 发证机构 · 签发日期）：一行小字，
   直接从 cert_text.json 的 _meta 取 —— 与 JSON-LD Certification 同源。 */
.certsum{display:block;margin-top:2px;font-size:var(--fs-cap);color:var(--fg-3);
  letter-spacing:.01em}
/* ★ 2026-10-15 「证书文字内容」折叠区（<details>）：默认收起，点开可读/可复制。
   不用 display:none —— 隐藏文字属作弊手段；details 是正常可访问内容。 */
.certext{margin-top:var(--gap-lg);border-top:1px solid var(--line);padding-top:var(--gap-sm)}
.certext summary{cursor:pointer;font-size:var(--fs-body);font-weight:600;color:var(--fg);
  padding:8px 0;list-style:none}
.certext summary::-webkit-details-marker{display:none}
.certext summary::after{content:" +";color:var(--fg-3);font-weight:400}
.certext details[open] summary::after{content:" −"}
.certext summary:hover{color:var(--accent)}
.certext__note{margin:0 0 var(--gap-sm);font-size:var(--fs-cap);color:var(--fg-3)}
.certext h3{margin:var(--gap-sm) 0 4px;font-size:var(--fs-body);font-weight:600;color:var(--fg)}
.certext ul{margin:0 0 var(--gap-sm);padding-left:18px}
.certext li{font-size:var(--fs-cap);color:var(--fg-2);line-height:1.85;
  user-select:text;-webkit-user-select:text}
/* 灯箱翻页条：只有多页报告才显示 */
.lb__nav{display:none;align-items:center;justify-content:center;gap:var(--gap-md);margin-top:var(--gap-sm)}
.lb.is-on .lb__nav.is-multi{display:flex}
.lb__btn{font:inherit;font-size:var(--fs-cap);border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;padding:6px 14px;
  border-radius:999px;min-height:36px}
.lb__btn:hover{background:rgba(255,255,255,.22)}
.lb__btn[disabled]{opacity:.35;cursor:default}
.lb__pg{color:rgba(255,255,255,.72);font-size:var(--fs-cap);min-width:8em;text-align:center}
/* 不可下载：图不可拖、不可选，右键落在遮罩上而不是图上 */
.no-dl,.no-dl img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.no-dl img{pointer-events:none}
.lb__in{position:relative}
/* 盾层：图已 pointer-events:none，右键落在它不是落在 <img> 上（浏览器就不会给
   "图片另存为"）；它自己【不吃点击】—— 否则把翻页按钮挡住（犯过：点不到「下一页」）。 */
.lb__shield{position:absolute;inset:0;background:transparent;pointer-events:none}
@media (max-width:620px){
  .fcchead__logo{height:38px}
  .fccrow{flex-wrap:wrap}
  .fccrow__go{width:100%;text-align:right}
}