/* 锦城修鲤 · 首屏样式合并包（index.html 专用）
 *
 * 为什么要合并而不是拆分：
 * 线上还没有 HTTPS，只能跑 HTTP/1.1 —— 没有多路复用，6 个 <link> 就是 6 次串行往返。
 * 实测 6 个文件共 152KB（gzip 后 43KB），合并后请求数 6→1，首绘少 5 个 RTT。
 * 等 HTTPS + HTTP/2 上线后，再按「首屏 / 非首屏」拆成两个文件才划算。
 *
 * 内容 = base + home + refine + feedback + workbench + mobile-adapt，顺序与原来一致，
 * 层叠结果不变（禁止调整顺序，否则 refine / mobile-adapt 的覆盖会失效）。
 * 源文件保留：其他页面仍各自引用 base.css 等，改动请改源文件后重新生成本文件。
 */
:root {
color-scheme: light;
--bg-black:        #ffffff;
--bg-dark:         #f5f5f7;
--bg-elevated:     #fbfbfd;
--ink-primary:     #1d1d1f;
--ink-secondary:   #6e6e73;
--brand:      #F37021;
--brand-strong: #C2410C;
--brand-bg-soft:     #FFF2E9;
--brand-border:      #FFD2B8;
--success:         #34c759;
--price:           #ff3b30;
--divider:         #d2d2d7;
/* v19.9-r3 VQ8：表单控件边界色（WCAG 1.4.11 要求 UI 组件边界 ≥3:1）。
   改前 .pickup-input 用 1.5px solid transparent + 白底 → 白页面上输入框完全不可见（0:1）。
   #8e877e 对白底实测 3.55:1（--divider #d2d2d7 只有 1.51:1，不达标）。 */
--field-border:    #8e877e;
--brand-grad:         linear-gradient(135deg, #FF8A3D, #C2410C);
--brand-text:         #1d1d1f;
--brand-accent:       #F37021;
--brand-accent-light: #C2410C;
/* v19.9：首屏 H1 渐变专用令牌。此前直接复用 --brand-text（正文主色），
   夜间正文近白但首段渐变起点仍是深色，导致夜间标题首段对比度 1.11:1。
   独立成令牌后，日/夜各取一套，正文颜色不受影响。 */
--hero-grad-a: #1d1d1f;
--hero-grad-b: #D9560F;
--hero-grad-c: #C2410C;
--aurora-a:           rgba(255,138,61,0.06);
--aurora-b:           rgba(255,150,80,0.08);
--aurora-c:           rgba(243,112,33,0.05);
--lift-dur:           0.35s;
--lift-ease:          cubic-bezier(0.22, 1, 0.36, 1);
/* ---- v19.8-r8 动效时长三档（第19版第8轮 M6）----
   改前全站 transition 有 11 种时长（0.08–0.4s），同为"悬停反馈"却有 4 种不同值。
   收敛为三档后，节奏可预期；--lift-dur 保留，属品牌动效（卡片抬起）不在收敛范围。
   归类按数值：≤0.18s→fast；0.2–0.35s→base；≥0.38s→slow。 */
--dur-fast:           150ms;   /* 点击 / 悬停反馈 */
--dur-base:           250ms;   /* 常规过渡 */
--dur-slow:           400ms;   /* 入场 / 展开 */
/* 类型/间距/圆角令牌：从 home.css 提升到 base.css，
   否则 used / privacy / 4 品牌页会因未定义 var() 全部回落到 0/默认值 */
--fs-xs:  12px;
--fs-sm:  13px;
--fs-md:  15px;
--fs-lg:  17px;
--fs-xl:  20px;
--fs-2xl: 28px;
--fs-3xl: clamp(28px, 6vw, 32px);
--fs-4xl: clamp(30px, 8vw, 40px);
--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
--r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;
--nav-h: 66px;      /* nav 实际高度（上下 16px + 34px 控件），JS 会按实测值覆写；默认取 66 避免首帧跳动 */
/* ---- v19.1-r9 版式标尺令牌（单一真相源）----
   过去 --measure / 垂直节奏以字面量散落在 home.css 的 6 处 breakpoint 覆写里
   （hero-inner 600/700/980、section 600/960、footer 600/960），改一处要同步改 6 处。
   统一收成三个令牌后，节宽与 section 垂直节奏各只有一个定义入口。
   参考 Norrly《State of Web Design 2026》 n=285：获奖站内容列宽中位数 1140px、
   圆角中位数 10px —— 本站取 960/600 两档是服务型单页的合理收敛，保留不改。 */
--measure: 960px;          /* 宽屏内容列宽（≥768px 生效） */
--measure-sm: 600px;       /* 窄屏 / 阅读型区块列宽 */
--space-section: 64px;     /* section 上下留白（窄屏），8px 网格 */
--space-section-lg: 96px;  /* section 上下留白（≥768px） */
--gutter: clamp(20px, 5vw, 32px);  /* 横向安全外距，随视口平滑收缩 */
/* ---- v19.1-r8 顶部安全区令牌 ----
   · --sat/--sal/--sar：系统上报的安全区（index.html 已 viewport-fit=cover）。
     非刘海设备、macOS 普通窗口一律上报 0px => 不会多出任何留白，观感与 nmb 版一致；
     只有刘海机 / 灵动岛 / standalone PWA 才有非零值。
     注意：不要再叠 "display-mode: fullscreen" 之类的兜底值——那会在非刘海的
     macOS 全屏窗口上凭空造出一条白边，正是本次要修的问题。
   · --header-bg：nav + 标签栏共用的毛玻璃底色，夜间模式有覆盖。 */
--sat: env(safe-area-inset-top, 0px);
--sal: env(safe-area-inset-left, 0px);
--sar: env(safe-area-inset-right, 0px);
--header-bg: rgba(255,255,255,0.72);
--header-bg-solid: #ffffff;
/* home.css 行 1-17 提升：used / privacy / 4 品牌页用到这些命名 */
--bg: var(--bg-black);
--card: #ffffff;
--text: #1d1d1f;            /* 等同 --text-primary 的别名（home.css/privacy.css 用它） */
--text-primary: #1d1d1f;
--text-secondary: #6e6e73;
--text2: #6e6e73;           /* 等同 --text-secondary 的别名（privacy.css 用它） */
--accent: #F37021;
--accent-hover: #A83A06;
--accent-light: #C2410C;
--accent-text: #C2410C;
/* ---- v19.4-r1 C1–C3：白字载体角色令牌（单一真相源，依据 19,4.txt §2.4）----
   规则：给「白字 / 白色图标」当背景的填充色，只许引用本组令牌；不得直接用
   --accent / --green / --red / --success / --price / --text-primary —— 它们或被夜间
   反转（--text-primary 夜值 #f5f5f7：白字 on 它 = 1.09:1，实测全站最差，见 used.css
   .filter-chip.active）、或昼值过浅（--accent 昼 #E85A0C 白字 3.56；--green #34c759
   白字 2.22；--success #30d158 白字 2.02），当白字底必然不达 SC 1.4.3 的 4.5:1。
   取值全部本机复算（sRGB 相对亮度 L=0.2126R+0.7152G+0.0722B，对比度=(L1+.05)/(L2+.05)）：
     · --accent-text-bg  昼 #a04a00（白 6.04）/ 夜 #0071e3（白 4.70）
     · --accent-hover    昼 #C24A08（白 4.91）/ 夜 #005bb8（白 6.59）← 白字载体的 hover
     · --green-text      #1a7f37（白 5.08，昼夜同值）
     · --red-text        #d70015（白 5.38，昼夜同值）
     · --amber-text      昼 #b25000 / 夜 #D98A45（夜值 6.36 on #0e1a2e；原昼夜同值时仅 3.35）
     · --chip-active-bg 昼 #1d1d1f（白 13.94）/ 夜 #3a3a3c（白 11.02）← 筛选芯片选中态
   --green / --red / --success 保留原亮值，但只许作状态点 / 进度 / 描边等非白字用途。
   色相一律不变，只降亮度：替换后视觉仍是「这个绿 / 这个红」，只是深一档。 */
--accent-text-bg: #C2410C;
--chip-active-bg: #1d1d1f;
--accent-rgb: 243,112,33;
--accent-glow-rgb: 255,140,80;
--accent-wash: rgba(243,112,33,0.08);
--green: #34c759;
--orange: #ff9500;
--red: #ff3b30;
--green-text: #1a7f37;
--red-text: #d70015;
--amber-text: #b25000;
--star: #ff9f0a;
--shadow-card: 0 1px 2px rgba(0,0,0,0.03), 0 6px 28px rgba(0,0,0,0.06);
--shadow-card-hover: 0 2px 4px rgba(0,0,0,0.04), 0 18px 48px rgba(0,0,0,0.10);
--shadow-float: 0 24px 80px rgba(0,0,0,0.25);   /* v19.8-r8 M11：弹窗/命令面板唯一一档 */
--radius: var(--r-lg);  --radius-lg: var(--r-lg);   /* v19.8-r8 M5：旧 token 归并到新档，不删除（约12处引用跟着变） */
--radius-xs: 4px;  --radius-sm: 8px;  --radius-pill: 999px;
--line: #d2d2d7;            /* 等同 --divider 的别名（used.css 第 119 行） */
--safe-bottom: env(safe-area-inset-bottom, 0px);
--font-stack: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}
:root[data-theme="night"] {
color-scheme: dark;
--bg-black:          #0b1220;
--bg-dark:           #141a2a;
--bg-elevated:       #1a2236;
--ink-primary:       #f5f5f7;
--ink-secondary:     #aeaeb2;
--divider:           #2a3142;
/* v19.9-r3 VQ8：夜间控件边界 #6e7484 —— 对 #0b1220 实测 4.01:1、对卡面 #1a2236 3.39:1。 */
--field-border:      #6e7484;
--brand:        #0071e3;   /* 深底 + 白字填充载体：#fff on #0071e3 = 4.70 OK(AA) */
/* v19.1-r9：夜间「文字 / 图标 / 描边」角色用的蓝由 #005bb8 提亮为 #4aa3ff。
   #005bb8 在夜间三个卡面上的实测对比度：on #1a2236 = 2.40、on #141a2a = 2.63、on #0b1220 = 2.84，
   全部低于 WCAG 2.2 SC 1.4.3 的 4.5:1（S01）。#4aa3ff 同三面实测：6.01 / 6.59 / 7.11，全部过 AA。
   色相仍是品牌蓝，只提亮度；白天的品牌橙 #E85A0C 未动。
   --accent-hover / --accent-light / --brand-accent-light 保留 #005bb8：
   它们是「深底 + 白字」的填充载体，白字 6.59:1 本来就达标，提亮反而会掉对比度。 */
--brand-strong:   #4aa3ff;
--brand-grad:           linear-gradient(135deg, #0071e3, #005bb8);
--brand-accent:         #0071e3;
--brand-accent-light:   #005bb8;
/* v19.9：夜间 H1 渐变令牌（与日间同名，值不同）。
   取 #f5f5f7 / #4aa3ff / #0071e3，对 #0b1220 背景对比度 17.2 / 7.11 / 3.99，均 ≥3:1。 */
--hero-grad-a: #f5f5f7;
--hero-grad-b: #4aa3ff;
--hero-grad-c: #0071e3;
--aurora-a:             rgba(0,113,227,0.10);
--aurora-b:             rgba(41,151,255,0.12);
--aurora-c:             rgba(0,91,184,0.08);
--brand-bg-soft:        #0e1a2e;
--brand-border:         #1e3a5f;
--price:                #ff453a;
--success:              #30d158;
/* home.css 18-25 行提升：accent 系列在夜间统一变蓝 */
--accent:               #0071e3;
--accent-hover:         #005bb8;   /* 白字载体：#fff on #005bb8 = 6.59 OK(AA) */
--accent-light:         #005bb8;
/* 文字 / 图标 / 描边角色：#4aa3ff（在夜间三个卡面上 6.01 / 6.59 / 7.11，全过 AA）。
   白字载体角色：--accent-text-bg 必须保持深色，见下条。 */
--accent-text:          #4aa3ff;
/* v19.3-r1 C1：r9 的回归修复。
   r9 为修夜间文字对比度，把 --accent-text-bg 与 --accent-text 一起提亮成 #4aa3ff——
   但 --accent-text-bg 是「白字载体」（给白字当背景的填充色），白字 on #4aa3ff = 2.63:1，
   全站主按钮夜间集体不达 AA，比修之前（#005bb8 白字 6.59）更糟。
   正解：把「文字角色」与「白字载体角色」拆开——
     · --accent-text      = #4aa3ff  文字/图标/描边（深底之上，需要亮）
     · --accent-text-bg   = #0071e3  白字载体（需深，白字 4.70 达标）
     · --accent-hover     = #005bb8  白字载体的 hover（更深，白字 6.59 达标）
   于是「默认 → 悬停」方向正确：默认比悬停亮一档、悬停变深，符合 3.3 C1 与前沿 Q7 的推荐答案。 */
--accent-text-bg:       #0071e3;
/* 筛选芯片选中态专用深底。不取 #0b1220：它等于夜间 --bg，芯片会与页底同色、形状不可辨；
   #3a3a3c 与未选中芯片（--card 夜 #1a2236）和页底（#0b1220）都有可感知差。白字 11.02 OK(AA)。 */
--chip-active-bg:       #3a3a3c;
/* V10-01：--amber-text 夜间必须覆写。
   原注释写「夜间沿用昼值 #b25000（白 5.20 达标）」——那个 5.20 是**白字压琥珀底**的比值，
   不是**琥珀字压深底**的比值。夜间实际渲染是琥珀字放在 #0e1a2e 卡片上，复算只有 3.35:1；
   #b25000 作文字用在深底上另有 3.60（on #0b1220），两者都低于 4.5。
   影响 3 处文字：home.css:139 .store-card__nav / home.css:176 .scope-chip__tag /
   used.css:169 .badge-stock；另 3 处图标（trust-item svg / price-ico / svc-ico--board）
   同值但图标阈值 3:1，本来达标，改后只会更清晰。
   取值 #D98A45：on #0e1a2e = 6.36、on #0b1220 = 6.88，色相仍是琥珀。
   --green-text / --red-text 维持「夜间沿用昼值」不变（它们是白字载体，提亮反而掉对比度）。 */
--amber-text:           #D98A45;
/* --green-text / --red-text 夜间不覆写，沿用昼值 #1a7f37 / #d70015：
   白字载体需要「深」，夜间提亮会掉对比度（5.08 / 5.38 已达标），改了反而是回归。
   （--amber-text 已不在此列，见上一条 —— 它作「深底上的文字」用，必须提亮。） */
--accent-rgb:           0,113,227;
--accent-glow-rgb:      41,151,255;
--accent-wash:          rgba(0,113,227,0.10);
/* 文本/边框/卡片在夜间的暗色化（home.css 缺这些，index.html 之前会留白底） */
--text:                 #f5f5f7;
--text-primary:         #f5f5f7;
--text-secondary:       #aeaeb2;
--text2:                #aeaeb2;
--card:                 #1a2236;
--bg:                   #0b1220;
--line:                 #2a3142;
--shadow-card:          0 1px 2px rgba(0,0,0,0.30), 0 6px 28px rgba(0,0,0,0.50);
--shadow-card-hover:    0 2px 4px rgba(0,0,0,0.35), 0 18px 48px rgba(0,0,0,0.60);
--shadow-float:         0 24px 80px rgba(0,0,0,0.55);
/* 顶部两条（nav + 标签栏）夜间不再留白底 */
--header-bg:            rgba(11,18,32,0.72);
--header-bg-solid:      #0b1220;
/* V9-02：底部浮动栏夜间改深色玻璃。--dock-bg 全站只在第 441 行定义一次（昼值
   rgba(255,255,255,.78)），夜间块此前无任何 dock 覆写，导致深蓝页面上悬着一条近白胶囊，
   比首屏标题还抢眼。改与页底同族、保留毛玻璃。NN/g《Dark Mode》原文要求浮动组件
   在两个模式下「equally distinctive」——过亮与过暗同样是缺陷（S02）。 */
--dock-bg:              rgba(11, 18, 32, 0.78);
/* 同上：0.5px 的 rgba(0,0,0,.06) 顶边线在深底上会被吞掉，改白色极淡描边勾出边界。 */
--dock-border-top:      rgba(255, 255, 255, 0.08);
/* 夜间中性填充走蓝灰族（与 --bg-elevated #1a2236 同族再深一档），白字 12.59 达标。 */
--fill-neutral:         #2c3346;
}
/* v19.8-r8 · M3 夜间信任条绿字修复（第19版第8轮）
   依据：本地 WCAG 复算（A 级）。.pickup-trust__main（home.css）用 --green-text #1a7f37，
   所在容器是 <section class="section" id="pickup">（非暗带），夜间压在页面深底
   #0b1220 上 = 3.69:1，不达 AA 4.5。日间白底本已达标，故只在夜间覆写。
   处置：夜间改用 --success #30d158（压 #0b1220 = 9.26，过 AA），保持绿色「安心」语义。 */
:root[data-theme="night"] .pickup-trust__main { color: var(--success); }
/* v19.8-r8 · M2（收窄版）夜间保修绿字修复
   Edge CDP 实测：日间 .price-warranty = #1a7f37 on rgb(255,255,255) = 5.08 PASS，
   但夜间压 .price-card 的 #1a2236 只有 3.12 FAIL。故只做夜间覆写，日间不动。
   改用 --success（夜 #30d158）= 7.83，过 AA；--green-text 本身仍保持 #1a7f37
   以维持"白字按钮载体"（白压它 5.08 达标）。 */
:root[data-theme="night"] .price-warranty { color: var(--success); }
/* v19.8-r8 · M3 扩展：夜间其余绿字落点（Edge CDP 实测后追加，2026-10-20）
   实测夜间失败：.vote-result #1a7f37 on #0b1220 = 3.69（文字，需 4.5）
                 .trust-item svg  #1a7f37 on 合成底 = 2.49（图标，需 3.0）
   修法同上：夜间改用 --success（#30d158）；--green-text 不动，保留其"白字载体"角色。
   未改的 .voice__action--wx / .pickup-done__check / .pickup-slider--* 是"背景填充"，
   判据是白字压它们（5.08 已达标）或纯装饰，不属本规则范围。 */
:root[data-theme="night"] .vote-result,
:root[data-theme="night"] .trust-item:nth-child(2) svg,
:root[data-theme="night"] #battery .price-ico,
:root[data-theme="night"] .service-card .svc-ico--battery { color: var(--success); }
/* v19.1-r8 刘海 / 灵动岛避让策略（替代 r7）：
   · 顶部：不再给 nav 打负 margin、也不再给 voicebar 打补丁——统一由 body 的
     padding-top: var(--sat) 承接，并在最顶层铺一条同色固定色带（见 home.css body::before），
     保证"背景完整铺满顶部"且内容不被刘海压住。sat=0 时该色带高度为 0，零副作用。
   · 中央：nav 是 title 居左 / actions 居右的 space-between 布局，正中本来就是空白，
     不存在被刘海压住的内容；标签栏的标签从左起排，同理。因此取消 r7 的 --island-gap
     强制留白（它在窄窗口下会挤压 title 与 actions，属于本次要修的错位来源）。
   · macOS 刘海屏说明：Safari 普通窗口 / 全屏下系统仍保留菜单栏带，页面不会被刘海覆盖，
     env() 上报 0 即为正确值；只有 standalone PWA 才会上报真实 inset，本方案已覆盖。 */
* { margin:0; padding:0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none; }
:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* v19.1-r9：全站减少动效的唯一总闸。
   home.css 里分散着 6 处 @media (prefers-reduced-motion) 局部关闭（reveal / devsel /
   float-bar / nav-theme-btn / hearing 等），但 html 的平滑滚动、及各 upstream pseudo
   元素的 transform 没人管 —— 单独局部开关漏一处就前功尽弃。
   这里用一条带 !important 的总闸兜底：放在链首也能压住后续文件的同特异性规则。
   依据 WCAG 2.2 SC 2.3.3（Animation from Interactions）与 19.1.txt S01。 */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto !important; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
}
/* 锚点跳转补偿：v19.1-r8 把 nav 高度恢复成 nmb 的 66px（上下 16px + 34px 控件），
   故补偿值同步改为 66px，配合 home.css 的 scroll-padding-top:20px => 总偏移 86px，
   落点在导航下方留 20px 呼吸位；再叠 --sat 保证刘海机上也不被顶部色带压住。 */
[id]:not(body) { scroll-margin-top: calc(66px + var(--sat, 0px)); }
body {
background: var(--bg-black);
color: var(--ink-primary);
/* V9-14：原来这里硬编码了一份「五字族」字体栈（缺 system-ui / SF Pro Display /
   Noto Sans SC / Helvetica Neue），而 index/used/weixiu 的 body 各自又用 var(--font-stack)
   覆盖了它 —— 结果 ask / privacy 两页落到这份短栈上，同一段中文在 Windows 上少了
   Noto Sans SC 兜底、在 macOS 上少了 SF Pro Display。改为引用唯一令牌。 */
font-family: var(--font-stack);
font-size: var(--fs-lg);
line-height: 1.65;
overscroll-behavior-y: contain;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a, button, input, select, textarea, label, summary {
touch-action: manipulation;
}
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
color: var(--ink-primary);
letter-spacing: -0.02em;
font-weight: 600;
}
em { font-style: normal; }
p { color: var(--ink-primary); }
img { border-radius: var(--r-md); display: block; max-width: 100%; }
.nav {
position: sticky; top: 0; z-index: 50;
/* v19.1-r9：删除原先的 height: 48px。
   base.css 的 48px 与 home.css/used.css 的 padding:16px 20px 是同一元素的两套几何：
   box-sizing border-box 下内容区被压到 16px，而内部控件为 32px —— nav 子元素纵向溢出、
   且 --nav-h 被 JS 读成 48px 导致标签栏吸顶偏移错位（19.1.txt D7）。
   高度改由内边距自然撑开，index / used / privacy 三处一并修正。 */
background: rgba(255,255,255,0.72);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid transparent;
display: flex; align-items: center; justify-content: space-between;
padding: 0 var(--sp-5);
padding-top: calc(0px + env(safe-area-inset-top, 0px));
padding-left: calc(20px + env(safe-area-inset-left, 0px));
padding-right: calc(20px + env(safe-area-inset-right, 0px));
transition:border-color var(--dur-base) ease;
}
.nav-scrolled .nav { border-bottom-color: var(--divider); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.nav { background: #fff; }
}
:root[data-theme="night"] .nav { background: rgba(11,18,32,0.72); border-bottom-color: var(--divider); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
:root[data-theme="night"] .nav { background: #0b1220; }
}
.nav-brand { font-size: var(--fs-lg); font-weight: 600; color: var(--ink-primary); }
.nav-phone { font-size: var(--fs-md); color: var(--brand-strong); white-space: nowrap; }
.btn-primary {
display: inline-flex; align-items: center; justify-content: center;
height: 48px; border-radius: var(--r-pill);
/* v19.1-r9：原 background: var(--brand) 即白字 on #E85A0C = 3.56:1，
   不达 SC 1.4.3。改 --accent-text-bg（白天 #a04a00）= 6.04:1；夜间该令牌为 #0071e3
   （白字 4.70 达标），角色拆分说明见 base.css 昼/夜两处 --accent-text-bg 上方注释。
   v19.4-r1 C4：上版注释里的夜间取值与那句「深底另算」的免责话术，与 r10 落地值不符，
   已按 base.css 昼/夜两处 --accent-text-bg 的实际值同步。注释不再复述被推翻的旧色值，
   以免后续 grep 把它当有效取值取走。
   #E85A0C 仍作装饰色（条/边框/图标/徽章）保留。 */
background: var(--accent-text-bg);
color: #fff;
font-size: var(--fs-md); font-weight: 600;
padding: 0 var(--sp-7);
border: none;
transition:background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
/* hover 不再提亮（提亮会把刚补回来的对比度又吃掉）：白天 #C24A08 白字 4.91 达标，夜间 #005bb8 白字 6.59 达标 */
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
display: inline-flex; align-items: center; justify-content: center;
height: 48px; border-radius: var(--r-pill);
background: transparent;
border: 1px solid var(--brand-strong);
color: var(--brand-strong);
font-size: var(--fs-md); font-weight: 600;
padding: 0 var(--sp-7);
transition:background var(--dur-fast) ease;
}
.btn-secondary:hover { background: var(--aurora-a); text-decoration: none; }
.card {
background: var(--bg-dark);
border-radius: var(--r-md);
padding: var(--sp-5);
}
.card-elevated {
background: var(--bg-elevated);
border-radius: var(--r-md);
padding: var(--sp-5);
}
.divider { border: none; border-top: 1px solid var(--divider); margin:0; }
input, textarea, select {
background: var(--bg-elevated);
border: 1px solid var(--divider);
border-radius: var(--r-md);
color: var(--ink-primary);
font-size: var(--fs-md);
padding: var(--sp-3) var(--sp-4);
font-family: inherit;
}
input::placeholder { color: var(--ink-secondary); }
input:focus, textarea:focus, select:focus {
border-color: var(--brand-strong);
outline: none;
}
.trust-line {
font-size: var(--fs-sm);
font-weight: 500;
color: var(--ink-secondary);
text-align: center;
letter-spacing: 0.01em;
}
.scan-controls {
display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.scan-btn {
height: 36px; border-radius: var(--r-pill);
background: var(--bg-elevated);
border: 1px solid var(--divider);
color: var(--ink-primary);
font-size: var(--fs-sm); font-weight: 500;
padding: 0 var(--sp-4);
cursor: pointer;
transition:background var(--dur-fast) ease;
}
.scan-btn:hover { background: var(--divider); }
/* v19.3-r1 C1：--brand-strong 是「文字/图标」角色令牌（夜值 #4aa3ff），
   拿它当白字背景 = 2.63:1。白字载体一律改引用 --accent-text-bg。 */
.scan-btn.active { background: var(--accent-text-bg); color: #fff; border-color: var(--accent-text-bg); }
.xray-overlay {
position: absolute; inset: 0;
pointer-events: none;
border-radius: var(--r-md);
opacity: 0; transition:opacity var(--dur-base) ease;
}
.xray-overlay.visible { opacity: 1; }
.float-bar, .bottom-bar {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 40;
/* v19.10：高度改走共享令牌。此前这里是字面量 56px，而 index/品牌页是 60，
   二手页又没自己的高度，于是三页底栏分别是 74/56/60 三种高度。 */
height: var(--dock-h);
background: var(--bg-dark);
border-top: 1px solid var(--divider);
display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
padding: 0 var(--sp-5);
padding-bottom:env(safe-area-inset-bottom, 0px);
}
body.kb-open .float-bar,
body.kb-open .bottom-bar { display: none; }
.back-to-top {
position: fixed; right: 16px; bottom: 72px;
z-index: 35;
width: 44px; height: 44px;
border-radius:50%;
background: var(--bg-dark);
border: 1px solid var(--divider);
color: var(--ink-secondary);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
opacity: 0; visibility: hidden;
transition:opacity var(--dur-base) ease, visibility var(--dur-base) ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.back-to-top { transition:opacity var(--dur-base) ease, visibility var(--dur-base) ease, transform var(--dur-base) ease; }
@media (hover: hover) { .back-to-top:hover { transform: translateY(-2px); } }
.back-to-top:active { transform: scale(0.92); }
.js .js-rv { opacity: 0; transition:opacity var(--dur-base) ease; }
.js .js-rv.is-visible { opacity: 1; }
@media (hover: none), (pointer: coarse) {
.btn-primary, .btn-secondary, .scan-btn { min-height: 44px; }
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding:0; margin:-1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
* { transition:none !important; animation: none !important; }
.js .js-rv { opacity: 1; }
.nav { transition:none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   共享组件层 v19.10 · 让子页面与首页「同一类元素长得一样」
   ---------------------------------------------------------------------------
   背景：首页的章节标题（小号英文标签 + 渐变竖条 + 大标题）与 eyebrow 原本只写在
        home.css 里，于是 used / 4 个品牌页 / privacy / ask 各自另写一套，
        结果同类元素在 7 个页面上有 4 种字号、3 种字距、2 种颜色、2 种有无竖条。
   做法：把「章节标题 + eyebrow」提升为本文件里的共享组件，页面样式只保留布局差异。
   约束：只定义组件外形（字号/字距/颜色/竖条/间距），不含任何页面级布局；
        页面若需要特殊处理（如 .section--band 的深底反色），在自己的样式里覆盖。
   --------------------------------------------------------------------------- */

:root {
  /* eyebrow：全大写小标签 */
  --eyebrow-fs:    var(--fs-xs);
  --eyebrow-track: 0.12em;
  --eyebrow-mb:    12px;
  /* 子页 H1 档位：营销型子页共用（二手页 / 4 个品牌页）。
     首页 hero 更大（.hero h1 自有 clamp），工具与法务页用 --fs-3xl，见各自文件。 */
  --fs-page:       clamp(30px, 6.4vw, 44px);
  /* section header：H2 主标题 */
  --heading-fs:    clamp(24px, 6vw, 32px);
  --heading-ls:    -0.02em;
  --heading-lh:    1.15;
  --heading-mb:    28px;
  /* 标题上方渐变竖条（首页视觉签名） */
  --rule-w:        36px;
  --rule-h:        4px;
  --rule-mb:       14px;
  /* 控件与底部操作栏（浮动胶囊） */
  --control-h:     48px;
  --control-h-sm:  40px;
  --dock-max:      520px;
  --dock-mb:       12px;
  --dock-pad:      8px;
  --dock-h:        60px;
  /* 底部浮动栏底色：index/used/品牌页共用。此前 index 与 used 各自硬编码
     rgba(255,255,255,.78)，品牌页用 --header-bg（夜间变深），三者不一致。 */
  --dock-bg:       rgba(255, 255, 255, 0.78);
  /* 顶边线：昼用极淡黑（白底可见），夜由夜间块覆写为极淡白（深底可见）。 */
  --dock-border-top: rgba(0, 0, 0, 0.06);
  /* V9-05：底栏「次要动作」的中性填充。此前 index/used 各自硬编码 #2c2c2e，
     无令牌就无夜间覆写点。白字 13.94 达标（S01）。 */
  --fill-neutral:  #2c2c2e;
}

/* ---- eyebrow：小号大写标签 ------------------------------------------------ */
.nv-eyebrow,
.wx-eyebrow,
.ai-eyebrow {
  display: block;
  font-size: var(--eyebrow-fs);
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--eyebrow-mb);
}

/* ---- section header：H2 + 渐变竖条 --------------------------------------- */
.section-header,
.wx-section__head > h2 {
  font-size: var(--heading-fs);
  font-weight: 700;
  letter-spacing: var(--heading-ls);
  line-height: var(--heading-lh);
  margin-bottom: var(--heading-mb);
}

.section-header::before,
.wx-section__head > h2::before {
  content: '';
  display: block;
  width: var(--rule-w);
  height: var(--rule-h);
  border-radius: calc(var(--rule-h) / 2);
  background: var(--brand-grad);
  margin-bottom: var(--rule-mb);
}

.section-header em,
.wx-section__head > h2 em {
  color: var(--accent-text);
  font-style: normal;
}

/* 窄屏：标题略收一档，避免长中文标题在 375px 下折成三行 */
@media (max-width: 767px) {
  .section-header,
  .wx-section__head > h2 {
    font-size: var(--fs-3xl);
    margin-bottom: var(--sp-5);
  }
}
:root {
color-scheme: light;
scroll-padding-top: 20px;
--bg: var(--bg-black); --card: #ffffff;
--text-primary: #1d1d1f; --text-secondary: #6e6e73;
--accent: #E85A0C; --accent-hover: #C24A08; --accent-light: #C24A08;
--accent-rgb: 232,90,12; --accent-glow-rgb: 255,138,61;
--green: #34c759; --orange: #ff9500; --red: #ff3b30;
--green-text: #1a7f37; --red-text: #d70015; --accent-text: #a04a00; --star: #ff9f0a;
/* V10-01：此处原有的 --amber-text: #b25000 已删，收敛到 base.css 单一真相源。
   说明：夜间覆写并不会被这份 :root 日间值盖掉（:root[data-theme=night] 特异性 0,2,0
   高于 :root 的 0,1,0），删它不是为了修 bug，而是因为同一个令牌在两处各写一份日间值，
   迟早漂移 —— 上一轮 --font-stack 就是活例子。 */
/* v19.1-r9：--shadow-card 在全站曾有三份定义、两种取值
   （base.css:83 / home.css:10 / home.css:345 + used.css:10），违反单一真相源。
   阴影层级收敛到 base.css 一处，此处改为继承引用。 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
--safe-bottom: env(safe-area-inset-bottom, 0px);
/* V9-11：--font-stack 原在此处重复定义了一份（与 base.css 完全相同的值）。
   同一角色只允许一个定义源；重复定义会让「改了 base 却没生效」这类问题难以定位，
   故删除，统一继承 base.css。（--safe-bottom 同理，但 index 的 body 直接引用它，
   且 base.css 早已定义，此处保留仅为可读性，不重复赋色值。） */
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
}
:root[data-theme="night"] {
--accent: #0071e3;
--accent-hover: #005bb8;
--accent-light: #005bb8;
/* v19.1-r9：home.css 这份夜间 accent 会在 base.css 之后写入，
   优先于 base.css 的同名令牌 —— 所以这里的 #005bb8 必须一起提亮，否则 base.css 那边
   改了也是白改。#4aa3ff 复算见 base.css 同处注释：夜间三面 6.01 / 6.59 / 7.11，全过 AA。 */
--accent-text: #4aa3ff;
--accent-rgb: 0,113,227;
--accent-glow-rgb: 41,151,255;
}
html { scroll-behavior: smooth; }
body {
font-family: var(--font-stack); background: var(--bg); color: var(--text-primary);
line-height: 1.65; font-size: var(--fs-lg);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
padding-top: var(--sat, 0px);
/* V9-11：84px 是硬编码，与 weixiu.css 的令牌公式算得 88px 对不上，三处口径不一致。
   统一改为「底栏高 + 底距 + 一级留白 + 安全区」，改令牌即全站生效。 */
padding-bottom: calc(var(--dock-h) + var(--dock-mb) + var(--sp-4) + var(--safe-bottom)); overflow-x: hidden;
}
/* v19.1-r8 顶部安全区色带：刘海 / 灵动岛设备把整条顶部（含刘海两侧）铺满底色，
   避免"标签栏上方一条白边"。--sat 在非刘海设备为 0px => 色带高度 0，完全无副作用。
   position: fixed 保证滚动后仍然盖住刘海区；z-index 200 高于 nav 的 100。 */
body::before {
content: '';
position: fixed; left: 0; right: 0; top: 0;
height: var(--sat, 0px);
background: var(--bg-dark);
z-index: 200;
pointer-events: none;
}
.skip-link { position: absolute; top: -100px; left: 16px; background: var(--accent-text-bg); color: #fff; padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-md); text-decoration: none; z-index: 999; transition:top var(--dur-base); }
.skip-link:focus { top: 16px; }
/* v19.1-r8 顶部导航：几何回退到 nmb 版（上下 16px / 左右 20px，控件 34px => 约 66px），
   只叠加两件与安全区有关的事：
   1) 左右叠 env() 横向安全区（横屏刘海 / 灵动岛），非刘海设备为 0px；
   2) sticky 偏移改为 top: var(--sat)：顶部安全区由 body 统一承接（body::before 铺底色），
      nav 吸顶时正好停在安全区下沿。
   不再使用 r7 的 "负 margin + z-index 101 遮罩" 写法，也不再插 --island-gap 强制留白。 */
.nav {
position: sticky; top: var(--sat, 0px); z-index: 100;
width: 100%;
padding: var(--sp-4) calc(var(--sp-5) + var(--sar, 0px)) var(--sp-4) calc(var(--sp-5) + var(--sal, 0px));
background: var(--header-bg, rgba(255,255,255,0.72));
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--divider);
display: flex; align-items: center; justify-content: space-between;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.nav { background: var(--header-bg-solid, #fff); }
}
.nav-title { font-size: var(--fs-md); font-weight: 600; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-phone { color: var(--accent-text); text-decoration: none; font-size: var(--fs-md); font-weight: 500; }
/* 视觉保持 34px，但把命中区用 ::after 扩到 44×44（Apple HIG 44 / Material 48 的舒适值）。
   34px 虽过 WCAG 2.5.8 AA 的 24px 门槛，但单手操作易误触；伪元素不改变布局与视觉。
   inset:-5px → 34+10=44。相邻目标间距由 .nav-actions 的 gap 保证 ≥8px。 */
.nav-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-pill); border: none; background: transparent; color: var(--ink-secondary); cursor: pointer; transition:color var(--dur-base) ease, background var(--dur-base) ease; position: relative; }
.nav-theme-btn::after { content: ''; position: absolute; inset: -5px; border-radius:50%; }
.nav-theme-btn svg { width: 16px; height: 16px; display: block; }
.nav-theme-btn:hover { color: var(--accent-text); background: rgba(127,127,127,0.10); }
.nav-theme-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-theme-btn { transition:none; } }
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); animation: reveal-in 0.7s var(--ease-out); }
@keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition:none; }
html { scroll-behavior: auto; }
* { transition:none !important; animation: none !important; }
}
.hero { padding: 56px var(--sp-6) 48px; text-align: center; background: var(--bg); position: relative; }
.hero::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 900px; height: 100%; background: radial-gradient(ellipse at top, rgba(var(--accent-rgb),0.06) 0%, transparent 70%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; max-width: var(--measure-sm); margin:0 auto; }
/* V9-03：专名不换行。原写法只把「手机维修」包了 .np，地名「成都太升南路」没包，
   375px 下实测断成「成都太升南 / 路 · 手机维修」（字号 32.6px、行宽 327px、2 行）。
   MDN 原文：`text-wrap: balance` 只平衡每行字符数、≤6 行生效，**不识别中文专名**，
   所以 balance 只能当辅助，专名必须靠 nowrap 显式保护。 */
.np { white-space: nowrap; }
.hero-kicker { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.06em; color: var(--text-secondary); margin:0; }
.hero h1 { font-size: clamp(28px, 8.7vw, 64px); font-weight: 700; letter-spacing: -0.02em; margin:0; line-height: 1.1; text-wrap: balance; }
.hero p { font-size: clamp(17px, 4vw, 21px); color: var(--text-secondary); margin:0 auto; max-width: 420px; }
.hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-bottom:36px; }
/* V18.3 · 品牌入口条（承接"品牌+城市+维修"搜索，内链到 3 个品牌页） */
.brand-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2); max-width: 720px; margin:0 auto; padding: 0 var(--sp-5) var(--sp-5); }
.brand-links__label { font-size: var(--fs-xs); color: var(--text-secondary); }
.brand-link { display: inline-flex; align-items: center; position: relative; padding: var(--sp-2) var(--sp-3); min-height: 44px; background: var(--brand-bg-soft); border: 1px solid var(--brand-border); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); text-decoration: none; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.brand-link:hover { background: var(--card); border-color: var(--accent-text); }
.brand-link:active { transform: scale(0.98); }

/* V18.3 · 评价积累中占位（替代已删除的虚假顾客评价） */
.review-empty { background: var(--card); border: 1px solid rgba(0,0,0,0.04); border-radius: var(--radius); padding: var(--sp-5) var(--sp-5); box-shadow: var(--shadow-card); }
.review-empty__text { font-size: var(--fs-md); line-height: 1.7; color: var(--text-secondary); margin: 0 0 var(--sp-3); }
.review-empty .review-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.review-empty .review-tag { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); min-height: 44px; background: var(--brand-bg-soft); border: 1px solid var(--brand-border); border-radius: var(--r-pill); font-size: var(--fs-xs); color: var(--accent-text); }
.review-empty .review-tag svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* V18.2 · 静态维修流程状态条（只讲流程，不显示任何进度数据） */
.flow { max-width: 600px; margin:0 auto; padding: 0 var(--sp-5) var(--sp-6); }
.flow__title { font-size: var(--fs-lg); font-weight: 600; margin: 0 0 var(--sp-3); text-align: center; }
.flow__list { list-style: none; margin:0; padding:0; display: grid; gap: var(--sp-3); counter-reset: flow; }
.flow__step { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: var(--sp-3); align-items: start; background: var(--card); border: 1px solid rgba(0,0,0,0.04); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-4); box-shadow: var(--shadow-card); }
.flow__num { grid-area: num; align-self: center; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius:50%; background: var(--brand-bg-soft); color: var(--accent-text); font-size: var(--fs-sm); font-weight: 700; }
.flow__step b { grid-area: title; font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.3; }
.flow__step span:not(.flow__num) { grid-area: desc; font-size: var(--fs-xs); color: var(--text-secondary); margin-top:2px; line-height: 1.5; }
.flow__step { grid-template-areas: "num title" "num desc"; }

/* V18.2 · 门店信息卡：替代 404/占位门店照。
   拍不到真照片时，可核对的地址/营业时间/交通比一张图更能建信任。
   高度约 170px（原 16:9 占位图在 375px 下约 211px），首屏净省约 40px。 */
.store-card { width: 100%; max-width: 560px; margin: var(--sp-6) auto 0; padding: var(--sp-4); background: var(--brand-bg-soft); border: 1px solid var(--brand-border); border-radius: var(--r-lg); text-align: left; }
.store-card__row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.store-card__row + .store-card__row { margin-top:12px; padding-top:12px; border-top: 1px solid var(--brand-border); }
.store-card__ico { flex: none; width: 16px; height: 16px; max-width: 16px; max-height: 16px; margin-top:2px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.store-card__body { display: flex; flex-direction: column; gap:2px; min-width: 0; }
.store-card__body b { font-size: var(--fs-md); font-weight: 600; color: var(--text); line-height: 1.4; }
.store-card__body span { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.store-card__nav { display: inline-flex; align-items: center; position: relative; margin-top:12px; padding: var(--sp-2) var(--sp-3); min-height: 44px; background: transparent; color: var(--amber-text); border: 1px solid var(--amber-text); border-radius: var(--r-md); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.store-card__nav:active { transform: scale(0.98); }
/* S5：二手回收底部入口条（继承 #recycle-old 锚点，浮动条/used.html 入站不断链） */
.recycle-entry-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: min(600px, calc(100% - 48px)); margin: 0 auto var(--sp-8); padding: var(--sp-3) var(--sp-4); min-height: 44px; background: var(--brand-bg-soft); border: 1px solid var(--brand-border); border-radius: var(--r-lg); text-decoration: none; }
.recycle-entry-bar:active { transform: scale(0.99); }
.recycle-entry-bar__body { display: flex; flex-direction: column; gap:2px; text-align: left; }
.recycle-entry-bar__title { font-size: var(--fs-md); font-weight: 600; color: var(--accent-text); }
.recycle-entry-bar__sub { font-size: var(--fs-xs); color: var(--text-secondary); }
.recycle-entry-bar__go { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); white-space: nowrap; }
.cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-7); background: var(--accent-text-bg); color: #fff; border-radius: var(--r-pill); font-size: var(--fs-lg); font-weight: 500; text-decoration: none; box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.2); transition:all var(--dur-base) var(--ease-out); }
.cta-btn:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--accent-rgb),0.3); }
.cta-btn:active { transform: scale(0.97); }
.cta-btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.trust { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); max-width: 600px; margin:0 auto; padding: 0 var(--sp-5) var(--sp-6); }
.trust-item { background: var(--card); border-radius: var(--radius); padding: var(--sp-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); }
.trust-item svg { color: var(--accent); margin-bottom:8px; }
.trust-item b { font-size: var(--fs-md); font-weight: 600; }
.trust-item span { font-size: var(--fs-xs); color: var(--text-secondary); margin-top:3px; }
.section { padding: var(--space-section) var(--sp-5); max-width: var(--measure-sm); margin:0 auto; }
.price-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.price-card { position: relative; background: var(--card); border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); display: flex; flex-direction: column; align-items: flex-start; border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); transition:transform var(--dur-base), box-shadow var(--dur-base); }
@media (hover: hover) { .price-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } }
.price-info h3 { font-size: var(--fs-xl); font-weight: 600; margin-bottom:8px; }
.price-info p { font-size: var(--fs-md); color: var(--text-secondary); margin-bottom:16px; }
.price-row { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom:16px; flex-wrap: wrap; }
.price-tag { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-text); }
.price-tag small { font-size: var(--fs-sm); color: var(--text-secondary); font-weight: 400; }
.price-warranty { font-size: var(--fs-sm); font-weight: 500; color: var(--green-text); display: inline-flex; align-items: center; gap: var(--sp-1); }
.price-warranty::before { content: '✓'; font-weight: 700; }
/* v19.3-r1 C1：同上，--brand-strong 是文字角色令牌，不能当白字底 */
.price-badge { position: absolute; top: 12px; right: 12px; background: var(--accent-text-bg); color: #fff; font-size: var(--fs-xs); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-sm); letter-spacing: 0.5px; }
.price-note { font-size: var(--fs-sm); color: var(--text-secondary); text-align: center; margin: var(--sp-3) 0 0; }
/* V22-02：价格带（.section--band）底是 #17181C，而 --text-secondary 是 #6e6e73，
 * 实测对比度仅 3.50:1（AA 需 4.5:1），13px 小字在深底上几乎糊成一片。
 * 深底上的弱化文字必须走 --band-muted（≈7.6:1）；限宽 620px 让长句断成两三行，
 * 避免 1440 下一行 69 个汉字（1.4.8 建议 CJK ≤40 字/行）。 */
.section--band .price-note {
  color: var(--band-muted);
  max-width: 620px;
  margin-left: auto; margin-right: auto;
  line-height: 1.7;
  text-wrap: pretty;
}
.scope-band { margin-top:20px; padding: var(--sp-5) var(--sp-5); background: var(--card); border: 1px dashed rgba(0,0,0,0.16); border-radius: var(--radius); }
.scope-band__label { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); margin-bottom:16px; }
.scope-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.scope-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); min-height: 44px; background: var(--bg-dark); border: 1px solid rgba(0,0,0,0.06); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); }
.scope-chip svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); }
.scope-chip__tag { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--amber-text); margin-left:2px; }
.learn-more { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--accent-text); font-size: var(--fs-md); font-weight: 500; text-decoration: none; transition:gap var(--dur-base); }
.learn-more::after { content: '›'; font-size: var(--fs-xl); line-height: 1; transition:transform var(--dur-base); }
.learn-more:hover { gap: var(--sp-2); }
.learn-more:hover::after { transform: translateX(3px); }
.process-card { background: var(--card); border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); }
.process-step { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-3) 0; }
.process-step + .process-step { border-top: 1px solid rgba(0,0,0,0.05); }
.process-num { width: 36px; height: 36px; flex-shrink: 0; background: var(--accent-text-bg); color: #fff; border-radius:50%; display: flex; align-items: center; justify-content: center; font-size: var(--fs-md); font-weight: 600; }
.process-text b { display: block; font-size: var(--fs-lg); font-weight: 600; margin-bottom:3px; }
.process-text span { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.5; }
.map-box { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); }
.map-static-link { display: block; overflow: hidden; background: #e8e8ed; }
.map-static { width: 100%; display: block; aspect-ratio: 320/138; object-fit: cover; }
.map-fallback { display: flex; align-items: center; justify-content: center; aspect-ratio: 320/138; background: linear-gradient(135deg, #e8e8ed, #d9d9df); color: var(--text-secondary); font-size: var(--fs-md); font-weight: 500; text-align: center; padding: 0 var(--sp-6); }
.map-open { padding: var(--sp-5) var(--sp-6) 0; text-align: center; }
.map-open-sub { font-size: var(--fs-md); color: var(--text-secondary); margin-top:12px; }
.map-open-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-8); background: var(--accent-text-bg); color: #fff; border-radius: var(--r-pill); font-size: var(--fs-lg); font-weight: 500; text-decoration: none; box-shadow: 0 4px 12px rgba(var(--accent-rgb),0.2); transition:all var(--dur-base); }
.map-open-btn:active { transform: scale(0.97); }
@media (hover: hover) { .map-open-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(var(--accent-rgb),0.3); filter: brightness(1.03); } }
.map-open-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.store-info { padding: var(--sp-6); }
.store-info p { font-size: var(--fs-md); color: var(--text-secondary); margin-bottom:8px; line-height: 1.6; }
.store-info strong { color: var(--text-primary); font-weight: 600; }
.area-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top:16px; padding-top:16px; border-top: 1px solid rgba(0,0,0,0.05); }
.area-tags span { background: var(--bg-elevated); color: var(--text-secondary); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); font-size: var(--fs-xs); font-weight: 500; }
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.case-item { background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); transition:transform var(--dur-base), box-shadow var(--dur-base); }
@media (hover: hover) { .case-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); } }
.case-img { width: 100%; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: #fff; }
.case-img svg { width: 38px; height: 38px; stroke-width: 1.6; }
.case-img.battery { background: var(--bg-elevated); color: var(--green-text); }
.case-img.screen { background: var(--bg-elevated); color: var(--green-text); }
.case-img.board { background: var(--bg-elevated); color: var(--green-text); }
.case-img.cam { background: var(--bg-elevated); color: var(--green-text); }
:root[data-theme="night"] .case-img.cam { background: linear-gradient(135deg, var(--accent), var(--accent-light)); }
.case-desc { padding: var(--sp-3) var(--sp-4); }
.case-title { font-size: var(--fs-md); font-weight: 600; }
.case-meta { font-size: var(--fs-xs); color: var(--text-secondary); margin-top:4px; }
.reviews-grid { display: flex; flex-direction: column; gap: var(--sp-4); }
.review-card { background: var(--card); border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); }
.review-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom:16px; }
/* v19.4-r1 C1：删除死样式 .review-avatar / .a1 / .a2 / .a3。
   判定依据：index.html 中 grep "review-avatar" 零命中（评价区现为 empty state，无头像渲染）。
   与 used.css 的 .hero-badge 是同一批死样式，且同样带白字压亮渐变（.a3 浅端 #30d158 = 2.02:1），
   一并删除后，白字载体 grep 闭环只剩文档已裁决豁免的 .case-img 一项。 */
.review-user b { display: block; font-size: var(--fs-md); font-weight: 600; }
.review-user span { font-size: var(--fs-xs); color: var(--text-secondary); }
.review-stars { color: var(--star); font-size: var(--fs-md); letter-spacing: 2px; margin-bottom:8px; }
.review-text { font-size: var(--fs-md); color: var(--text-primary); line-height: 1.6; }
.review-links { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.review-tag { display: inline-flex; align-items: center; gap: var(--sp-2); background: rgba(0,0,0,0.05); color: var(--text-primary); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: 500; }
.review-tag .icon { color: var(--accent); }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: var(--card); border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); overflow: hidden; }
.faq-item summary { list-style: none; padding: var(--sp-5) var(--sp-6); font-size: var(--fs-md); font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: var(--fs-xl); font-weight: 400; color: var(--text-secondary); transition:transform var(--dur-base); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] summary { border-bottom: 1px solid rgba(0,0,0,0.05); }
.faq-answer { padding: var(--sp-4) var(--sp-6) var(--sp-5); font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.6; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.vote-sub { font-size: var(--fs-md); color: var(--text-secondary); margin-top:-12px; margin-bottom:20px; }
.vote-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); }
.vote-chip { padding: var(--sp-3) var(--sp-5); min-height: 44px; display: inline-flex; align-items: center; background: var(--bg-dark); border: 1px solid var(--divider); border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--text-primary); cursor: pointer; transition:background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base), transform var(--dur-fast); }
@media (hover: hover) { .vote-chip:hover { border-color: var(--text-primary); } .vote-chip.vote-chip--active:hover { border-color: transparent; } }
.vote-chip:active { transform: scale(0.97); }
.vote-chip--active { background: var(--accent-text-bg); color: #fff; border-color: transparent; }
.vote-result { margin-top:16px; font-size: var(--fs-md); font-weight: 500; color: var(--green-text); }
.vote-result--err { color: var(--red-text); }
/* 设备登记表单（2026-10-16：假投票改真实收集） */
.vote-form { max-width: 420px; margin: var(--sp-5) auto 0; display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.vote-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.vote-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); }
.vote-input { height: 48px; border: 1px solid var(--field-border); border-radius: var(--r-md); padding: 0 var(--sp-3); font-size: var(--fs-md); font-family: inherit; background: var(--bg); color: var(--text-primary); }
.vote-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.vote-input--error { border-color: var(--red-text); }
.vote-input--ok { border-color: var(--green-text); }
.vote-field__error { font-size: var(--fs-xs); color: var(--red-text); }
.vote-consent { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.vote-consent input { width: 20px; height: 20px; margin-top:1px; flex-shrink: 0; }
.vote-consent a { color: var(--accent-text); }
.vote-submit { height: 48px; border: none; border-radius: var(--r-pill); background: var(--accent-text-bg); color: #fff; font-size: var(--fs-md); font-weight: 600; font-family: inherit; cursor: pointer; transition:background var(--dur-fast) ease, transform var(--dur-fast) ease; }
.vote-submit:hover:not(:disabled) { background: var(--accent-hover); }
.vote-submit:active:not(:disabled) { transform: scale(0.98); }
.vote-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.pickup-section { background: var(--card); border-radius: var(--radius); padding: var(--sp-7) var(--sp-6); margin-top:12px; border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); }
.pickup-section__eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); margin-bottom:8px; }
.pickup-section__title { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); margin-bottom:8px; }
.pickup-section__sub { font-size: var(--fs-md); color: var(--text-secondary); line-height: 1.6; margin-bottom:20px; }
.pickup-chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--sp-3); margin-bottom:24px; }
.pickup-chip { display: inline-flex; align-items: center; padding: var(--sp-3) var(--sp-5); min-height: 44px; background: var(--bg-dark); border: 1px solid var(--divider); border-radius: var(--r-pill); font-family: inherit; font-size: var(--fs-md); font-weight: 500; line-height: 1.2; color: var(--text-primary); cursor: pointer; transition:background-color var(--dur-base) cubic-bezier(0.4,0,0.2,1), color var(--dur-base) cubic-bezier(0.4,0,0.2,1), border-color var(--dur-base) cubic-bezier(0.4,0,0.2,1), transform var(--dur-base); }
@media (hover: hover) { .pickup-chip:hover { border-color: var(--text-primary); } .pickup-chip.pickup-chip--active:hover { border-color: transparent; } }
.pickup-chip:active { transform: scale(0.98); }
.pickup-chip--active { background: var(--accent-text-bg); color: #fff; border-color: transparent; }
.pickup-trust { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom:24px; background: rgba(48,209,88,0.08); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-1); }
.pickup-trust__item { min-width: 0; padding: var(--sp-1) var(--sp-2); text-align: center; }
.pickup-trust__item + .pickup-trust__item { border-left: 1px solid rgba(48,209,88,0.18); }
.pickup-trust__main { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; color: var(--green-text); }
.pickup-trust__sub { margin-top:4px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-secondary); }
.pickup-field { margin-bottom:16px; }
.pickup-field__label { display: block; margin-bottom:8px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); }
.pickup-input { width: 100%; height: 52px; padding: 0 var(--sp-3); background: var(--bg-dark); border: 1px solid var(--field-border); border-radius: var(--r-md); outline: none; font-family: inherit; font-size: var(--fs-md); color: var(--text-primary); -webkit-appearance: none; appearance: none; transition:background-color var(--dur-base), border-color var(--dur-base); }
.pickup-input::placeholder { color: var(--ink-secondary); }
.pickup-input:focus { background: var(--card); border-color: var(--accent-text); }
textarea.pickup-input { height: auto; min-height: 96px; padding: var(--sp-3); line-height: 1.5; resize: none; }
.pickup-input--error, .pickup-input--error:focus { background: var(--bg); border-color: var(--red-text); }
.pickup-field__error { display: block; margin-top:8px; font-size: var(--fs-xs); line-height: 1.4; color: var(--red-text); }
.pickup-locate { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; height: 44px; margin-top:8px; padding: 0 var(--sp-4); background: rgba(var(--accent-rgb),0.12); border: 1px solid transparent; border-radius: var(--r-md); font-family: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--accent-text); cursor: pointer; transition:transform var(--dur-base), opacity var(--dur-base), background-color var(--dur-base); }
@media (hover: hover) { .pickup-locate:hover:not(:disabled) { background: rgba(var(--accent-rgb),0.2); } }
.pickup-locate svg { width: 16px; height: 16px; flex-shrink: 0; }
.pickup-locate:active:not(:disabled) { transform: scale(0.98); opacity: 0.9; }
.pickup-locate:disabled { opacity: 0.6; cursor: default; }
.pickup-slider { position: relative; height: 44px; margin-bottom:16px; border-radius: var(--r-pill); background: var(--bg-dark); overflow: hidden; user-select: none; -webkit-user-select: none; }
.pickup-slider__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #30d158; transition:width var(--dur-base) cubic-bezier(0.2,0.8,0.2,1); }
.pickup-slider__label { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding-left:24px; font-size: var(--fs-sm); color: var(--text-secondary); pointer-events: none; transition:color var(--dur-base); }
.pickup-slider__knob { position: absolute; left: 2px; top: 2px; width: 40px; height: 40px; border-radius:50%; background: #fff; box-shadow: var(--shadow-card); color: var(--ink-secondary); display: flex; align-items: center; justify-content: center; cursor: grab; z-index: 2; touch-action: none; transition:left var(--dur-base) cubic-bezier(0.2,0.8,0.2,1), background-color var(--dur-base), box-shadow var(--dur-base); }
.pickup-slider__knob:active { cursor: grabbing; }
.pickup-slider__check { display: none; }
.pickup-slider--dragging .pickup-slider__fill, .pickup-slider--dragging .pickup-slider__knob { transition:none; }
/* v19.4-r1 C3：验证通过态的滑条三处 #30d158 统一改 --green-text #1a7f37。
   白字 / 白勾 on #30d158 = 2.02（含 knob 与居中标签），改后 5.08。
   未验证态（拖动中）的 .pickup-slider__fill 仍用 #30d158 —— 它上面压的是 --text-secondary
   深色标签而非白字，改深反而更差，不在本次白字载体收敛范围内（已登记，待下轮另议）。 */
.pickup-slider--verified { background: var(--green-text); }
.pickup-slider--verified .pickup-slider__fill { background: var(--green-text); }
.pickup-slider--verified .pickup-slider__label { color: #fff; }
.pickup-slider--verified .pickup-slider__knob { background: var(--green-text); color: #fff; cursor: default; box-shadow: none; }
.pickup-slider--verified .pickup-slider__chevron { display: none; }
.pickup-slider--verified .pickup-slider__check { display: block; }
.pickup-submit { width: 100%; height: 54px; border: none; border-radius: var(--r-pill); background: var(--accent-text-bg); color: #fff; font-family: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; transition:background-color var(--dur-base), transform var(--dur-base), opacity var(--dur-base); }
@media (hover: hover) { .pickup-submit:hover:not(:disabled) { background: var(--accent-hover); } }
.pickup-submit:active:not(:disabled) { transform: scale(0.98); opacity: 0.9; }
.pickup-submit:disabled { background: #c7c7cc; cursor: not-allowed; }
.pickup-section__alt { margin-top:16px; text-align: center; font-size: var(--fs-md); color: var(--text-secondary); }
.pickup-section__alt a { color: var(--accent-text); font-weight: 500; text-decoration: none; }
.pickup-consent { display: flex; align-items: flex-start; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-1); font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); cursor: pointer; }
.pickup-consent input { width: 16px; height: 16px; margin-top:2px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
.pickup-consent a { color: var(--accent-text); font-weight: 500; text-decoration: none; }
.pickup-done { padding: var(--sp-7) 0 var(--sp-6); text-align: center; animation: pickupDoneIn 0.4s cubic-bezier(0.4,0,0.2,1); }
/* v19.4-r1 C3：圆圈底由 --green #34c759 改 --green-text #1a7f37。
   圈内是 index.html 内联 SVG 白色勾（stroke="#fff"），图形对象按 SC 1.4.11 的 3:1 判：
   原 2.22 不足，改后 5.08。SVG 的 #fff 因此无需改动。 */
.pickup-done__check { width: 60px; height: 60px; margin: 0 auto var(--sp-4); border-radius:50%; background: var(--green-text); display: flex; align-items: center; justify-content: center; }
.pickup-done__check svg { width: 30px; height: 30px; }
.pickup-done__title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); }
.pickup-done__sub { margin-top:8px; font-size: var(--fs-md); color: var(--text-secondary); }
.pickup-done__call { display: inline-block; margin-top:16px; padding: var(--sp-3) var(--sp-6); font-size: var(--fs-md); color: var(--brand-accent); border: 1px solid currentColor; border-radius: var(--r-pill); text-decoration: none; }
@keyframes pickupDoneIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.pickup-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 12px); max-width: 320px; padding: var(--sp-3) var(--sp-5); background: rgba(0,0,0,0.85); color: #fff; font-size: var(--fs-md); line-height: 1.5; text-align: center; border-radius: var(--r-md); z-index: 9999; opacity: 0; pointer-events: none; transition:opacity var(--dur-base), transform var(--dur-base); }
.pickup-toast--show { opacity: 1; transform: translate(-50%, 0); }
.cta-final { background: var(--bg-dark); color: var(--text-primary); margin: var(--sp-8) var(--sp-5) 0; border-radius: var(--radius-lg); padding: 48px var(--sp-6); text-align: center; }
.cta-final-inner { max-width: 400px; margin:0 auto; }
.cta-final h2 { font-size: clamp(28px, 7vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin-bottom:12px; }
.cta-final p { font-size: var(--fs-md); color: var(--text-secondary); margin-bottom:28px; line-height: 1.5; }
.cta-final-btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-7); background: var(--accent-text-bg); color: #fff; border-radius: var(--r-pill); font-size: var(--fs-lg); font-weight: 600; text-decoration: none; transition:all var(--dur-base); }
.cta-final-btn:active { transform: scale(0.97); }
.cta-final-sub { font-size: var(--fs-md); color: var(--text-secondary); margin-top:16px; }
.footer { text-align: center; padding: var(--space-section) var(--sp-5) var(--sp-6); max-width: var(--measure-sm); margin:0 auto; }
.qr-img { width: 160px; height: 160px; object-fit: contain; margin: 0 auto var(--sp-4); border-radius: var(--r-md); background: var(--card); padding: var(--sp-2); display: block; border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-card); }
.footer-tip { font-size: var(--fs-lg); font-weight: 600; margin-bottom:8px; }
.footer-sub { font-size: var(--fs-md); color: var(--text-secondary); margin-bottom:20px; }
.qr-fallback { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom:24px; }
.qr-fallback a { color: var(--accent-text); text-decoration: none; font-weight: 500; }
.footer-copy { font-size: var(--fs-xs); color: var(--text-secondary); }
.float-bar { position: fixed; bottom: 0; left: 0; right: auto; width: 100%; max-width: 100%; z-index: 100; background: var(--dock-bg); backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px); height: var(--dock-h); align-items: center; padding: var(--dock-pad); display: flex; gap: var(--dock-pad); border-top: 0.5px solid var(--dock-border-top); box-shadow: var(--shadow-card); }
.float-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0 var(--sp-2); height: calc(var(--dock-h) - var(--dock-pad) * 2); min-height: 0; border-radius: var(--r-pill); font-size: var(--fs-md); font-weight: 500; text-decoration: none; color: #fff; transition:all var(--dur-base); box-shadow: var(--shadow-card); }
.float-bar a:active { transform: scale(0.96); opacity: 0.85; }
.float-bar a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
/* V9-05：底栏三按钮「主 / 次 / 次」层级。
   上门取送用品牌实心（与首屏主 CTA 同族），回收估价 / 加微信降为中性。 */
.btn-book { background: var(--accent-text-bg); }
.btn-recycle { background: var(--fill-neutral); }
.btn-wechat { background: var(--fill-neutral); }
.pill { background: rgba(0,0,0,0.05); color: var(--text-primary); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-lg); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.hero-status { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom:8px; }
.succ-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
.succ-btn { padding: var(--sp-3) var(--sp-6); border-radius: var(--r-pill); font-size: var(--fs-md); text-decoration: none; }
.succ-btn-primary { background: var(--accent-text-bg); color: #fff; font-weight: 600; }
.succ-btn-ghost { background: rgba(0,0,0,0.05); color: var(--text-primary); font-weight: 500; }
@media (min-width: 768px) {
.section { max-width: var(--measure); padding: var(--space-section-lg) var(--gutter); }
.trust { max-width: 960px; grid-template-columns: repeat(4, 1fr); }
.price-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.case-grid { grid-template-columns: repeat(4, 1fr); }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.faq-list { max-width: 720px; margin:0 auto; }
.hero-inner { max-width: 700px; } /* 保留：中档断点专属阅读宽度 */
.cta-final { max-width: 960px; margin-left:auto; margin-right:auto; }
.footer { max-width: var(--measure); }
.float-bar { max-width: var(--dock-max); left: 50%; transform: translateX(-50%); border-radius: var(--r-pill); margin-bottom: var(--dock-mb); box-shadow: var(--shadow-card); }
}
/* v19.1-r9续：这里原本第三份 --shadow-card / --shadow-card-hover
   （取值与前两份都不同），连同上面 :root 里的第二份一起删除，阴影层级收敛到 base.css 一处。
   视觉差异只有 hover 阴影多一层 0.18→0.13 alpha 的渐进层，肉眼等价。 */
.price-card, .trust-item, .review-card, .case-item, .faq-item, .map-box, .pickup-section, .process-card, .used-card {
transition:transform var(--lift-dur) var(--lift-ease), box-shadow var(--lift-dur) var(--lift-ease), border-color var(--dur-base);
}
@media (hover: hover) {
.price-card:hover, .review-card:hover, .case-item:hover, .process-card:hover, .used-card:hover, .map-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.trust-item:hover, .faq-item:hover, .pickup-section:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
}
.cta-btn, .map-open-btn, .pickup-submit {
background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 42%), linear-gradient(135deg, var(--accent-text-bg), var(--accent-hover));
}
.cta-btn { box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.28), 0 2px 4px rgba(0,0,0,0.04); }
.cta-btn:hover { box-shadow: 0 8px 24px rgba(var(--accent-rgb),0.35), 0 4px 8px rgba(0,0,0,0.05); }
.map-open-btn { box-shadow: 0 6px 18px rgba(var(--accent-rgb),0.24); }
.pickup-submit:disabled { background-image: none; background: #c7c7cc; }
.cta-final-btn { box-shadow: var(--shadow-float); transition:transform var(--dur-base) var(--lift-ease), box-shadow var(--dur-base), filter var(--dur-base); }
.cta-final-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-float); filter: brightness(1.06); }
.pill { transition:transform var(--dur-base), background var(--dur-base), color var(--dur-base); }
@media (hover: hover) { .pill:hover { transform: translateY(-1px); } }
.faq-item summary { transition:background-color var(--dur-base); }
.faq-item summary:hover { background: rgba(0,0,0,0.02); }
.float-bar a { transition:transform var(--dur-base) var(--lift-ease), box-shadow var(--dur-base) var(--lift-ease), opacity var(--dur-base); }
@media (hover: hover) { .float-bar a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); opacity: 0.95; } }
.pickup-input:focus { box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.14); }
.pickup-input--ok { border-color: var(--green); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334c759' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px; padding-right:40px; }
.pickup-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
radial-gradient(520px 260px at 18% 12%, var(--aurora-a), transparent 70%),
radial-gradient(460px 240px at 82% 8%, var(--aurora-b), transparent 70%),
radial-gradient(380px 220px at 55% 0%, var(--aurora-c), transparent 70%);
animation: heroAurora 16s var(--ease-out) infinite alternate; }
@keyframes heroAurora { from { opacity: 0.7; transform: translateX(-1.5%); } to { opacity: 1; transform: translateX(1.5%); } }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero h1 { background: linear-gradient(120deg, var(--hero-grad-a) 35%, var(--hero-grad-b) 80%, var(--hero-grad-c)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
}
.cta-btn { position: relative; }
.cta-btn:not(.cta-btn--ghost)::after { content: ''; position: absolute; inset: 0; border-radius:inherit; pointer-events: none; animation: ctaRing 3.5s cubic-bezier(0.4,0,0.2,1) 1.2s infinite; }
@keyframes ctaRing { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb),0.30); } 60%, 100% { box-shadow: 0 0 0 14px rgba(var(--accent-rgb),0); } }
.trust-item svg { padding: var(--sp-2); border-radius: var(--r-md); box-sizing: content-box; background: rgba(var(--accent-rgb),0.08); }
.trust-item:nth-child(2) svg { background: rgba(48,209,88,0.12); color: var(--green-text); }
.trust-item:nth-child(3) svg { background: rgba(255,149,0,0.12); color: var(--amber-text); }
.trust-item:nth-child(4) svg { background: rgba(var(--accent-rgb),0.10); color: var(--accent); }
.price-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-md); margin-bottom:12px; }
.price-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#battery .price-ico { background: rgba(48,209,88,0.12); color: var(--green-text); }
#screen .price-ico { background: rgba(var(--accent-rgb),0.10); color: var(--accent-text); }
#motherboard .price-ico { background: rgba(255,149,0,0.14); color: var(--amber-text); }
#screenprotector .price-ico { background: rgba(var(--accent-rgb),0.10); color: var(--accent); }
.price-badge { font-size: var(--fs-xs); padding: var(--sp-2) var(--sp-3); box-shadow: 0 2px 8px rgba(var(--accent-rgb),0.30); }
.pickup-section { position: relative; }
.pickup-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; background: var(--brand-grad); }
.cta-final { position: relative; overflow: hidden; }
.cta-final::before { content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%); width: 120%; height: 80%; background: radial-gradient(ellipse at center, rgba(var(--accent-glow-rgb),0.18), transparent 65%); pointer-events: none; }
.cta-final-inner { position: relative; z-index: 1; }
.hero-inner { max-width: 1120px; margin:0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
/* v19.8-r8 M9：960 → 1120（司令拍板 Q3）。1440 视口左右留白由 240px 收窄到 160px，居中不变；.section/.footer 仍用 --measure，不受影响。 */
.hero-sub { color: var(--ink-secondary); line-height: 1.5; }
.hero .hero-sub { font-size: var(--fs-lg); max-width: 600px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.005em; }
.hero .trust-line { font-size: var(--fs-sm); }
.hero-sub__promise { display: block; margin-top:6px; font-size: var(--fs-sm); font-weight: 400; color: var(--text-secondary); letter-spacing: 0; }
.hero .btn-primary { margin-top:8px; }
.hero .btn-primary, .hero .btn-secondary { width: 100%; max-width: 360px; }
.hero .trust-line { margin-top:4px; }
.hero img { width: 100%; max-width: 800px; aspect-ratio: 16/9; object-fit: cover; margin-top:24px; background: var(--bg-dark); }
.service-cards {
display: grid; grid-template-columns: 1fr; gap: var(--sp-4);
max-width: var(--measure); margin:0 auto; padding: 0 var(--sp-5) var(--sp-8);
}
.service-card {
display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5);
text-decoration: none;
border: 1px solid rgba(0,0,0,0.04);
box-shadow: var(--shadow-card);
transition:transform var(--dur-base) var(--lift-ease), box-shadow var(--dur-base) var(--lift-ease), border-color var(--dur-base);
}
@media (hover: hover) { .service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: rgba(var(--accent-glow-rgb),0.4); text-decoration: none; } }
.service-card:active { transform: scale(0.99); }
.service-card:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 3px; }
.service-card h3 { font-size: var(--fs-lg); color: var(--ink-primary); margin:0; }
.service-card .badge {
font-size: var(--fs-xs); font-weight: 700; color: #000;
padding: 2px var(--sp-2); border-radius: var(--r-pill); text-transform: uppercase; flex: none;
}
.service-card .svc-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); flex: none; }
.service-card .svc-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-card .svc-ico--battery { background: rgba(48,209,88,0.14); color: var(--green-text); }
.service-card .svc-ico--screen  { background: rgba(var(--accent-rgb),0.12); color: var(--accent-text); }
.service-card .svc-ico--board   { background: rgba(255,149,0,0.16); color: var(--amber-text); }
.service-card .price-from { font-size: var(--fs-lg); font-weight: 700; color: var(--accent-text); margin-left:auto; letter-spacing: -0.01em; }
/* 箭头承担「可点击」的语义提示，属文本级信息，需 4.5:1。
   原 --brand 昼 #E85A0C on #fff = 3.56、夜 #0071e3 on #0b1220 = 3.99，均不达标；
   改 --accent-text：昼 #a04a00 = 6.04、夜 #4aa3ff = 7.11，且与同卡片内 .svc-ico 用色一致。 */
.service-card .arrow { color: var(--text-secondary); font-size: var(--fs-md); flex: none; opacity: .5; }
@media (min-width: 768px) {
.service-cards { grid-template-columns: repeat(3, 1fr); }
}
/* ===== v19.1-r8 顶部标签栏 =====
   与 nmb 版对齐：同一套毛玻璃底色、同一条 2px 下划线指示器、同样的淡入淡出节奏；
   吸顶偏移 = nav 实测高度 + 顶部安全区（安全区为 0 时与 nmb 完全一致）。
   在此基础上补齐四件事：
   1) 背景改用 --header-bg 令牌，夜间模式不再留白底；
   2) 横向叠加 env() 安全区，刘海 / 灵动岛横屏不啃内容；
   3) 窄窗不换行：标题 ellipsis、标签横滚、关闭按钮固定贴右 44×44；
   4) 悬停 / 按下 / 聚焦 / 激活四态都有可辨反馈。 */
.devsel {
position: sticky;
top: calc(var(--nav-h, 66px) + var(--sat, 0px));
z-index: 90;
width: 100%;
background: var(--header-bg, rgba(255,255,255,0.72));
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--divider);
transform: translateY(0);
transition:transform var(--dur-base) ease, opacity var(--dur-base) ease;
}
.devsel.is-hidden { transform: translateY(calc(-100% - var(--nav-h, 66px) - var(--sat, 0px))); }
/* 用户主动关闭 —— 完全收起，留 nav 上的"设备"重开钮 */
.devsel.is-closed { display: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.devsel { background: var(--header-bg-solid, #fff); }
}
.devsel__inner {
display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
gap: var(--sp-3);
max-width: var(--measure); margin:0 auto;
/* 与 nmb 同构：上 8px / 左右 20px(+安全区) / 下 0，标签的 44px 触点直接贴到分隔线，
   整条高度 = 8 + 标题 18 + 2 + 标签 44 ≈ 72px，视觉密度与 nmb（76px）一致。 */
padding: var(--sp-2) calc(var(--sp-5) + var(--sar, 0px)) 0 calc(var(--sp-5) + var(--sal, 0px));
}
/* V20-01：lead 原为 display:block，导致 .devsel__title 与 .devsel__tabs 上下堆叠
   （1440 实测 title 顶 125 / tabs 顶 144，两者各占满 864 宽），而内容只用到左边几百像素，
   右侧整块空着、tab 与收起箭头相距 600px 以上，看起来「没做完」。
   改为 flex 单行：标题靠左、tab 组靠右，紧邻箭头，形成「左标签 ····· 右 tab ｜˅」的动线。
   注意：`.devsel__tabs` 带 overflow-x:auto + min-width:0，作为 flex 项能正常收缩，
   窄屏放不下时它自己横向滚动，不会把标题挤没。 */
.devsel__lead {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0; flex: 1 1 auto;
}
.devsel__title {
font-size: var(--fs-sm); font-weight: 500; line-height: 1.3;
letter-spacing: -0.01em; color: var(--ink-secondary);
margin:0 0 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.devsel__tabs {
position: relative; display: flex; flex-wrap: nowrap; gap: var(--sp-1);
min-width: 0;
overflow-x: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none; -ms-overflow-style: none;
scroll-padding-inline: var(--sp-1);
}
.devsel__tabs::-webkit-scrollbar { display: none; }
.devsel__tab {
position: relative; flex: 0 0 auto;
min-height: 44px; padding: 0 var(--sp-3);
background: none; border: 0; border-radius: var(--r-sm);
font-family: inherit; font-size: var(--fs-md); font-weight: 400;
letter-spacing: -0.01em; color: var(--ink-secondary);
white-space: nowrap; cursor: pointer;
transition:color var(--dur-base) ease, background-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.devsel__tab:first-child { padding-left:0; }
/* 悬停：淡灰底 + 文字提亮，与激活态的橙调底色区分开 */
@media (hover: hover) {
.devsel__tab:hover:not(.is-active) { color: var(--ink-primary); background: rgba(127,127,127,0.10); }
.devsel__tab.is-active:hover { background: rgba(var(--accent-rgb), 0.14); }
}
/* 按下：即时反馈 */
.devsel__tab:active { background: rgba(127,127,127,0.16); transform: scale(0.97); }
.devsel__tab.is-active:active { background: rgba(var(--accent-rgb), 0.20); }
.devsel__tab:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: -2px; }
/* 激活：品牌浅底 + 深品牌色 + 加粗，配合下方 2px 指示器，三重可辨 */
.devsel__tab.is-active {
color: var(--brand-strong); font-weight: 600;
background: var(--accent-wash);
}
.devsel__indicator {
position: absolute; left: 0; bottom: 0;
height: 2px; width: 0; border-radius:2px;
background: var(--brand-accent);
transform: translateX(0);
transition:transform var(--dur-base) cubic-bezier(0.22, 1, 0.36, 1), width var(--dur-base) cubic-bezier(0.22, 1, 0.36, 1);
}
.devsel:not(.is-ready) .devsel__indicator { transition:none; }
/* 关闭按钮：固定在行尾，44×44 固定方框，尺寸/位置不随标签文字长度变化；
   flex: 0 0 auto + margin-left: auto 双重保证它不会被长标题挤走。 */
.devsel__close {
order: 2;
flex: 0 0 auto;
align-self: center;
margin:0 0 0 auto;
width: 44px; height: 44px; min-width: 44px; min-height: 44px;
padding:0;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: var(--r-sm);
color: var(--ink-secondary); cursor: pointer;
transition:background var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-base) ease;
}
@media (hover: hover) { .devsel__close:hover { background: var(--bg-dark); color: var(--ink-primary); } }
.devsel__close:active { background: rgba(127,127,127,0.16); transform: scale(0.92); }
.devsel__close:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
.devsel.is-closed .devsel__close { transform: rotate(180deg); }
.service-cards { transition:opacity var(--dur-base) ease; }
.service-cards.is-switching { opacity: 0.35; }
.devsel__hint {
max-width: var(--measure); margin: -20px auto var(--sp-7); padding: 0 var(--sp-5);
font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-secondary);
}
/* v19.1-P0-r6：nav 上的"设备"重开钮，仅在 .devsel 被主动关闭后显示 */
.nav-pill--reopen[hidden] { display: none; }
.nav-pill--reopen {
display: inline-flex; align-items: center; gap: var(--sp-2);
min-height: 32px; padding: 0 var(--sp-3);
background: transparent; border: 1px solid var(--divider); border-radius: var(--r-pill);
font-size: var(--fs-sm); font-weight: 500; color: var(--ink-primary);
cursor: pointer;
transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.nav-pill--reopen:hover { background: var(--bg-dark); border-color: var(--ink-secondary); }
.nav-pill--reopen:active { transform: scale(0.96); }
.nav-pill--reopen:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.devsel, .devsel__tab, .devsel__indicator, .service-cards, .devsel__close, .nav-pill--reopen { transition:none; }
}
/* v19.1-r8 响应式：窄窗口只收内边距与字号，绝不换行、绝不压缩标签标题。
   标题 ellipsis、标签横滚、关闭按钮 44×44 固定贴右 —— 三者保证窄窗下标题与关闭钮都完整可见。 */
@media (max-width: 767px) {
.nav {
padding-left: calc(var(--sp-4) + var(--sal, 0px));
padding-right: calc(var(--sp-4) + var(--sar, 0px));
}
.devsel__inner {
padding-left: calc(var(--sp-4) + var(--sal, 0px));
padding-right: calc(var(--sp-4) + var(--sar, 0px));
gap: var(--sp-2);
}
.devsel__tab { padding: 0 var(--sp-2); font-size: var(--fs-sm); }
.devsel__title { font-size: var(--fs-xs); }
.nav-pill--reopen .label { display: none; }
.nav-pill--reopen { padding: 0 var(--sp-2); min-height: 32px; }
}
/* v19.1-r8 播报条：<button> 在 Chromium 下宽度是 fit-content，不铺满整行 → 顶部出现白边。
   显式 width:100% + 横向 env() 安全区即可；顶部安全区已统一由 body 承接
   （body padding-top + body::before 色带），这里不再重复 padding-top，也不再需要
   靠 z-index 去遮罩 nav 的负 margin（该写法已在 r8 移除）。 */
.top-notice {
display: flex; align-items: center; gap: var(--sp-3);
position: relative; z-index: 1;
width: 100%;
padding: var(--sp-3) calc(var(--sp-5) + var(--sar, 0px)) var(--sp-3) calc(var(--sp-5) + var(--sal, 0px));
background: var(--bg-dark);
border-bottom: 1px solid rgba(0,0,0,0.05);
font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-primary);
font-family: inherit; text-align: left;
}
.top-notice__tag {
flex: none; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.02em;
color: var(--accent-text);
border: 1px solid currentColor; border-radius: var(--r-pill);
padding: 2px var(--sp-3);
}
.voicebar__msg em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-secondary); }
@media (max-width: 767px) { .voicebar__msg em { display: none; } }
:root {
--fs-xs: 12px;
--fs-sm: 13px;
--fs-md: 15px;
--fs-lg: 17px;
--fs-xl: 20px;
--fs-2xl: 28px;
--fs-3xl: clamp(28px, 6vw, 32px);
--fs-4xl: clamp(30px, 8vw, 40px);
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
--card-border: rgba(0,0,0,0.06);
--band-bg: #17181C;
--band-fg: #F5F5F7;
--band-muted: rgba(245,245,247,0.66);
--band-accent: #FF9A5C;
--band-btn-bg: #FFFFFF;
--band-btn-fg: #17181C;
}
:root[data-theme="night"] {
--band-bg: #0D0F13;
--band-accent: #6BB1FF;
}
.cta-final h2 { font-size: var(--fs-3xl); }
.price-tag { font-size: var(--fs-2xl); }
.service-card h3 { font-size: var(--fs-lg); }
.review-text { font-size: var(--fs-md); }
.footer-copy { font-size: var(--fs-xs); }
/* V9-14：此规则写在文件末尾且**不带任何 @media**，会覆盖第 360 行
   `@media (min-width:768px) .section{padding: … var(--gutter)}` —— 等于让 --gutter 这个
   「随视口平滑收缩的横向安全外距」在首页桌面端从未生效（实测 1416px 视口下仍为 20px，
   而品牌页是 32px、used 页是 16px，三页三种留白）。
   这里只保留纵向节奏，横向改用 --gutter：375px 下 clamp 取下限 20px（与原来的 --sp-5 同值，
   移动端零变化），≥768px 自动升到 32px，与品牌页对齐。 */
.section { padding: var(--space-section) var(--gutter); }
.price-list, .reviews-grid, .case-grid { gap: var(--sp-3); }
.vote-sub em { color: var(--accent-text); }
.section--band { position: relative; padding-top: calc(var(--sp-7) + var(--sp-2)); padding-bottom: calc(var(--sp-7) + var(--sp-2)); }
/* v19.9-r3 VQ9：深色 band 改全幅出血。
   改前 ::before 用 width:100%（= 父级 .section 的 960px 内容盒），左右各留白，
   视觉上是"贴了一块 960px 黑板"；改后用 box-shadow 扩散 100vmax + clip-path
   水平裁剪，既绕开 100vw 含滚动条导致的横向滚动条，也不引入额外的包裹层。 */
.section--band { background: var(--band-bg); box-shadow: 0 0 0 100vmax var(--band-bg); clip-path: inset(0 -100vmax); }
.section--band::before {
content: ''; position: absolute; z-index: 0;
top: 0; bottom: 0; left: 50%; width: 100%; transform: translateX(-50%);
background: transparent;
}
.section--band > * { position: relative; z-index: 1; }
.section--band > .nv-eyebrow { color: var(--band-accent); }
.section--band > .section-header { color: var(--band-fg); }
.section--band > .section-header em { color: var(--band-accent); }
.cta-final { background: var(--band-bg); color: var(--band-fg); }
.cta-final::before { background: radial-gradient(ellipse at center, rgba(var(--accent-glow-rgb),0.22), transparent 65%); }
.cta-final h2 { color: var(--band-fg); }
.cta-final p { color: var(--band-muted); }
.cta-final-btn { background: var(--band-btn-bg); color: var(--band-btn-fg); }
.voice {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: flex-end; justify-content: center;
background: rgba(0,0,0,0.40);
opacity: 0; visibility: hidden; pointer-events: none;
transition:opacity var(--dur-base) var(--ease-out), visibility var(--dur-base);
padding: 0 var(--sp-3) var(--sp-3);
}
.voice.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.voice__panel {
width: 100%; max-width: 480px;
max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
background: var(--card);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
padding: var(--sp-2) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
box-shadow: var(--shadow-float);
transform: translateY(100%);
transition:transform var(--dur-slow) var(--ease-out);
}
.voice.is-open .voice__panel { transform: translateY(0); }
.voice__grip { width: 40px; height: 5px; border-radius:3px; background: rgba(0,0,0,0.16); margin: var(--sp-1) auto var(--sp-3); }
.voice__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.voice__head h3 { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.02em; }
.voice__head p { font-size: var(--fs-sm); color: var(--text-secondary); margin-top:4px; line-height: 1.5; }
.voice__close { flex: none; width: 32px; height: 32px; border-radius:50%; border: none; background: rgba(0,0,0,0.05); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition:background var(--dur-base); }
.voice__close svg { width: 16px; height: 16px; }
.voice__close:hover { background: rgba(0,0,0,0.10); }
.voice__close:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.voice__opts { display: flex; flex-direction: column; gap: var(--sp-3); }
.voice__opt { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-3) var(--sp-4); text-align: left; background: var(--bg-dark); border: 1.5px solid transparent; border-radius: var(--radius); font-family: inherit; cursor: pointer; transition:background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast); }
.voice__opt > svg { width: 24px; height: 24px; flex: none; color: var(--accent); }
.voice__opt > span { display: flex; flex-direction: column; gap:2px; min-width: 0; }
.voice__opt b { font-size: var(--fs-md); font-weight: 600; color: var(--text-primary); }
.voice__opt > span > span { font-size: var(--fs-sm); color: var(--text-secondary); }
.voice__opt:hover { background: #ececef; }
.voice__opt.is-on { background: rgba(var(--accent-rgb),0.08); border-color: var(--accent); }
.voice__opt:active { transform: scale(0.99); }
.voice__opt:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.voice__body { margin-top: var(--sp-3); }
.voice__vote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.voice__vote { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); background: var(--bg-dark); border: 1.5px solid transparent; border-radius: var(--radius); font-family: inherit; font-size: var(--fs-sm); color: var(--text-primary); cursor: pointer; transition:background var(--dur-base), border-color var(--dur-base); }
.voice__vote svg { width: 20px; height: 20px; color: var(--accent); }
.voice__vote:hover { background: #ececef; }
.voice__vote.is-voted { background: rgba(var(--accent-rgb),0.10); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.voice__vote:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.voice__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.voice__action { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border-radius: var(--radius); font-size: var(--fs-md); font-weight: 600; text-decoration: none; transition:transform var(--dur-fast), filter var(--dur-base); }
.voice__action svg { width: 20px; height: 20px; }
.voice__action--tel { background: var(--accent-text-bg); color: #fff; }
/* v19.4-r1 C3：白字 on --green #34c759 = 2.22 → 绿系白字载体 --green-text #1a7f37 = 5.08。
   --green / --success 保留原亮值，仅作状态点 / 进度等非白字用途。 */
.voice__action--wx { background: var(--green-text); color: #fff; }
.voice__action:hover { filter: brightness(1.06); text-decoration: none; }
.voice__action:active { transform: scale(0.98); }
.voice__note { margin-top:12px; font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.5; }
.voice__thanks { margin-top:8px; font-size: var(--fs-sm); font-weight: 600; color: var(--green-text); }
@media (prefers-reduced-motion: reduce) {
.voice, .voice__panel, .voice__opt, .voice__vote, .voice__action { transition:none; }
}
.nv-footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
.nv-footer-col { display: flex; flex-direction: column; gap: var(--sp-2); }
.nv-footer-h { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom:8px; }
.nv-footer-col p { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 1.6; }
.nv-footer-col a { font-size: var(--fs-sm); color: var(--accent-text); }
.nv-footer-link { display: block; padding: var(--sp-2) 0; font-size: var(--fs-sm); font-weight: 500; color: var(--text-primary); transition:color var(--dur-base); }
.nv-footer-link:hover { color: var(--accent-text); }
.nv-live-dot { display: inline-block; width: 7px; height: 7px; border-radius:50%; background: var(--green); margin-right:8px; vertical-align: 1px; }
.nv-live-dot[data-open="closed"] { background: #aeaeb2; }
.nv-qr-frame { display: inline-block; padding: var(--sp-2); background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.nv-qr-frame .qr-img { margin:0; padding:0; border: none; box-shadow: none; background: transparent; border-radius:0; }
.nv-wordmark { margin-top:28px; font-size: clamp(38px, 11vw, 72px); font-weight: 700; letter-spacing: 0.10em; line-height: 1; color: rgba(0,0,0,0.07); user-select: none; }
@supports (-webkit-text-stroke: 1px #000) {
.nv-wordmark { color: transparent; -webkit-text-stroke: 1.5px rgba(0,0,0,0.16); }
}
@media (min-width: 768px) {
.nv-footer-grid { grid-template-columns: 1fr auto 1fr; gap: var(--sp-7); text-align: left; justify-items: start; }
.nv-footer-col--qr { justify-items: center; }
.nv-footer-col:last-child { justify-items: end; text-align: right; }
}
.section-paper { position: relative; }
.section-paper::before {
content: ''; position: absolute; z-index: 0;
top: 0; bottom: 0; left: 50%; width: 100%; transform: translateX(-50%);
background: var(--bg-dark);
}
.section-paper > * { position: relative; z-index: 1; }
.case-snap { width: 96px; height: 2px; margin: var(--sp-7) auto 0; border-radius:1px; background: linear-gradient(90deg, transparent, var(--divider), transparent); }
.price-fn { color: var(--accent-text); font-size: 0.62em; font-weight: 600; margin-left:2px; }
.top-notice.voicebar { cursor: pointer; user-select: none; }
/* V10-02：375 实测 .voicebar__msg 可视宽 261 / 文本长 512，省略号与 CTA 间距只有 12px。
   先把间距抬到 16px（--sp-4）。注意：**真正的病根是文案长度**，512px 的文字塞进 261px，
   CSS 只能决定「在哪断」，决定不了「断得是否完整」—— 文案缩短属内容变更，需店主确认。 */
.top-notice.voicebar { gap: var(--sp-4); }
.voicebar__msg { position: relative; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.voicebar__msg span { display: inline-block; animation: voice-swap .45s var(--lift-ease); }
@keyframes voice-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.voicebar__cta { flex-shrink: 0; font-weight: 600; color: var(--accent-text); display: inline-flex; align-items: center; gap: var(--sp-1); white-space: nowrap; }
.voicebar__cta::after { content: '→'; transition:transform var(--dur-base) var(--lift-ease); }
.voicebar:hover .voicebar__cta::after { transform: translateX(3px); }
@media (max-width: 767px) { .top-notice.voicebar .top-notice__tag { display: none; } }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); flex: 0 0 auto; }
.nav-search { display: inline-flex; align-items: center; gap: var(--sp-2); height: 34px; padding: 0 var(--sp-3); background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08); border-radius: var(--r-pill); color: var(--ink-secondary); font-size: var(--fs-sm); font-family: inherit; cursor: pointer; transition:border-color var(--dur-base), background var(--dur-base), color var(--dur-base); }
.nav-search:hover { border-color: var(--accent); background: rgba(var(--accent-rgb),0.08); color: var(--accent-text); }
.nav-search svg { width: 16px; height: 16px; }
.nav-search kbd { font-family: inherit; font-size: var(--fs-xs); color: var(--ink-secondary); border: 1px solid rgba(0,0,0,0.10); border-radius:var(--r-sm); padding: 1px var(--sp-2); background: rgba(0,0,0,0.03); }
.nav-phone-pill { display: inline-flex; align-items: center; gap: var(--sp-2); height: 34px; padding: 0 var(--sp-3); background: var(--accent-text-bg); color: #fff; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; box-shadow: 0 6px 20px rgba(var(--accent-rgb),0.28); transition:filter var(--dur-base), transform var(--dur-base); }
.nav-phone-pill:hover { filter: brightness(1.1); transform: translateY(-1px); text-decoration: none; }
/* 34px 高的胶囊内，16px 图标 + 8px 间距 + 文字会挤到换行；本项维持 13px，
   属「图标为文字让位」的既定例外，不进三档。 */
.nav-phone-pill svg { width: 13px; height: 13px; }
@media (max-width: 767px) {
.nav-search .label, .nav-search kbd { display: none; }
.nav-search { padding: 0 var(--sp-3); }
.nav-phone-pill .num { display: none; }
.nav-phone-pill { padding: 0 var(--sp-3); }
.nav-actions { gap: var(--sp-2); }
}


/* V18.4 站内搜索浮层（与 .nav-search 按钮配对，复用 body.kb-open 钩子） */
.kb-overlay { display: none; position: fixed; inset: 0; z-index: 220; align-items: flex-start; justify-content: center; padding: 12vh var(--sp-4) 0; }
body.kb-open .kb-overlay { display: flex; }
.kb-overlay__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kb-panel { position: relative; width: 100%; max-width: 560px; background: var(--bg-elevated); border: 1px solid var(--divider); border-radius:var(--r-lg); box-shadow: var(--shadow-float); overflow: hidden; animation: kb-in .25s var(--lift-ease); }
@keyframes kb-in { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.kb-panel__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--divider); }
.kb-panel__head svg { width: 16px; height: 16px; color: var(--ink-secondary); flex: none; }
.kb-panel__head input { flex: 1; border: none; background: transparent; font-size: var(--fs-md); color: var(--ink-primary); padding: var(--sp-1) 0; font-family: inherit; }
.kb-panel__head input:focus { outline: none; }
.kb-panel__close { border: none; background: var(--bg-dark); color: var(--ink-secondary); width: 30px; height: 30px; border-radius:50%; font-size: var(--fs-lg); cursor: pointer; flex: none; font-family: inherit; line-height: 1; }
.kb-panel__close:hover { color: var(--ink-primary); background: var(--divider); }
.kb-results { max-height: 52vh; overflow-y: auto; padding: var(--sp-2); }
.kb-results:empty { display: none; }
.kb-hit { display: block; padding: var(--sp-3) var(--sp-3); min-height: 44px; border-radius: var(--r-md); text-decoration: none; color: inherit; }
.kb-hit:hover, .kb-hit:focus-visible { background: var(--bg-dark); text-decoration: none; }
.kb-hit__t { font-size: var(--fs-md); font-weight: 600; color: var(--ink-primary); }
.kb-hit__t mark { background: rgba(var(--accent-rgb),.18); color: var(--accent-text); border-radius:3px; padding:0 2px; }
.kb-hit__d { font-size: var(--fs-sm); color: var(--ink-secondary); margin-top:2px; }
.kb-empty { padding: var(--sp-7) var(--sp-4); text-align: center; font-size: var(--fs-md); color: var(--ink-secondary); }
.kb-hot { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--divider); font-size: var(--fs-sm); color: var(--ink-secondary); }
.kb-hot__lbl { color: var(--ink-secondary); margin-right:2px; }
.kb-hot button { border: 1px solid var(--divider); background: var(--bg-dark); color: var(--ink-primary); border-radius: var(--r-pill); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); cursor: pointer; font-family: inherit; transition:border-color var(--dur-base), color var(--dur-base); }
.kb-hot button:hover { border-color: var(--accent); color: var(--accent-text); }
@media (max-width: 359px) { .kb-overlay { padding: 8vh var(--sp-3) 0; } .kb-panel__head { padding: var(--sp-3) var(--sp-3); } .kb-hot { padding: var(--sp-3) var(--sp-3); } }
@media (prefers-reduced-motion: reduce) { .kb-panel { animation: none; } }
/* V18.4 顶部导航搜索按钮（home.css L630 .nav-search 已有基础样式，这里补 button 重置 + label 默认显示） */
.nav-search { border: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.04); font-family: inherit; -webkit-appearance: none; appearance: none; }
.nav-search .label { display: inline; }
.nav-search kbd { line-height: 1; }
:root[data-theme="night"] .nav-search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.10); }
:root[data-theme="night"] .nav-search kbd { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }


/* V18.4 备案号槽位（虚线框表示"待补充"，夜间 dashed 自动适配 --divider） */
.icp-slot { display: inline-block; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-secondary); border: 1px dashed var(--divider); border-radius: var(--r-sm); padding: 2px var(--sp-2); vertical-align: baseline; }
.icp-slot a { color: var(--accent-text); text-decoration: none; }
.icp-slot a:hover { text-decoration: underline; }


/* V18.4 贴膜卡网易式锚点样式 */
.price-card--promo { border: 1.5px solid var(--accent); padding: var(--sp-7) var(--sp-6); }
.price-tag--promo { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.price-tag__anchor { font-size: var(--fs-md); font-weight: 500; color: var(--ink-secondary); text-decoration: line-through; margin-bottom:2px; }
.price-tag__now { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-text); }
.price-tag__now small { font-size: var(--fs-sm); color: var(--ink-secondary); font-weight: 400; margin-left:4px; }
.promo-actions { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top:2px; }
.promo-claim { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: 1.5px solid var(--accent); background: var(--bg-dark); color: var(--accent-text); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; font-family: inherit; transition:background var(--dur-base), color var(--dur-base); }
.promo-claim:hover { background: var(--accent-text-bg); color: #fff; }
.promo-claim::before { content: ''; width: 14px; height: 14px; flex: none; background: currentColor;
/* v19.1-r9：原为 emoji 票券字符，Win/macOS/Android 字形不一、无法继承 currentColor、也无法随禁用态变灰。改为内联矢量 mask，自动跟随文字色。 */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1.2a2.4 2.4 0 0 0 0 4.8V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1.2a2.4 2.4 0 0 0 0-4.8z'/%3E%3Cpath d='M13.5 6.5v11' stroke-dasharray='2 2'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v1.2a2.4 2.4 0 0 0 0 4.8V17a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1.2a2.4 2.4 0 0 0 0-4.8z'/%3E%3Cpath d='M13.5 6.5v11' stroke-dasharray='2 2'/%3E%3C/svg%3E") center / contain no-repeat; }


/* V18.4 优惠券浮层（自包含，不复用 .voice） */
.coupon { position: fixed; inset: 0; z-index: 240; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; visibility: hidden; transition:opacity var(--dur-base) var(--lift-ease), visibility var(--dur-base) var(--lift-ease); }
body.coupon-open .coupon { opacity: 1; visibility: visible; }
.coupon__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.coupon__panel { position: relative; width: 100%; max-width: 380px; background: var(--bg-elevated); border: 1px solid var(--divider); border-radius:var(--r-xl); padding: var(--sp-7) var(--sp-6) var(--sp-6); box-shadow: var(--shadow-float); text-align: center; transform: translateY(12px); transition:transform var(--dur-base) var(--lift-ease); }
body.coupon-open .coupon__panel { transform: translateY(0); }
.coupon__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius:50%; border: none; background: var(--bg-dark); color: var(--ink-secondary); font-size: var(--fs-xl); line-height: 1; cursor: pointer; font-family: inherit; transition:color var(--dur-fast), background var(--dur-fast); }
.coupon__close:hover { color: var(--ink-primary); background: var(--divider); }
.coupon__stamp { display: inline-block; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-text); border: 1.5px solid var(--accent); border-radius: var(--r-pill); padding: var(--sp-1) var(--sp-3); margin-bottom:16px; }
.coupon__name { font-size: var(--fs-xl); font-weight: 600; color: var(--ink-primary); margin:0; }
.coupon__hl { font-size: var(--fs-md); color: var(--accent-text); font-weight: 600; margin-top:8px; }
.coupon__code { margin: var(--sp-5) auto 0; max-width: 220px; border: 1.5px dashed var(--accent); border-radius: var(--r-md); padding: var(--sp-3) 0; }
.coupon__code span { display: block; font-size: var(--fs-xs); color: var(--ink-secondary); letter-spacing: .12em; }
.coupon__code b { font-size: var(--fs-2xl); letter-spacing: 4px; color: var(--ink-primary); font-weight: 700; }
.coupon__terms { text-align: left; margin: var(--sp-5) 0 0; padding:0; list-style: none; }
.coupon__terms li { font-size: var(--fs-sm); color: var(--ink-secondary); line-height: 1.85; padding-left:16px; position: relative; }
.coupon__terms li::before { content: '·'; position: absolute; left: 4px; color: var(--ink-secondary); }
.coupon__foot { font-size: var(--fs-xs); color: var(--ink-secondary); margin: var(--sp-3) 0 0; }
.coupon__use { font-size: var(--fs-sm); color: var(--ink-primary); font-weight: 600; margin: var(--sp-3) 0 0; padding-top:12px; border-top: 1px solid var(--divider); }
body.coupon-open .float-bar, body.coupon-open .bottom-bar { display: none; }
@media (prefers-reduced-motion: reduce) { .coupon, .coupon__panel { transition:none; } }


/* V18.4 到店活动区 */
.store-events { background: var(--bg); }
.evt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top:28px; }
@media (max-width: 767px) { .evt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .evt-grid { grid-template-columns: 1fr; } }
.evt-card { position: relative; background: var(--card); border-radius: var(--radius); padding: var(--sp-6) var(--sp-6) var(--sp-6); border: 1px solid rgba(0,0,0,.04); box-shadow: var(--shadow-card); transition:transform var(--dur-base), box-shadow var(--dur-base); }
.evt-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.evt-card--feature { border-color: var(--accent); }
.evt-card__tag { display: inline-block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; color: var(--accent-text); background: var(--brand-bg-soft); padding: 3px var(--sp-3); border-radius: var(--r-pill); margin-bottom:16px; }
.evt-card__title { font-size: var(--fs-lg); font-weight: 600; color: var(--ink-primary); margin: 0 0 var(--sp-2); }
.evt-card__desc { font-size: var(--fs-md); color: var(--ink-secondary); line-height: 1.65; margin:0; }
.evt-card__desc b { color: var(--ink-primary); font-weight: 600; }
.evt-card__meta { margin-top:16px; font-size: var(--fs-xs); color: var(--ink-secondary); padding-top:12px; border-top: 1px dashed var(--divider); }
.evt-card__btn { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top:16px; padding: var(--sp-2) var(--sp-4); border: 1.5px solid var(--accent); background: var(--accent-text-bg); color: #fff; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; font-family: inherit; transition:filter var(--dur-base); }
.evt-card__btn:hover { filter: brightness(1.1); }
.evt-note { font-size: var(--fs-xs); color: var(--ink-secondary); margin: var(--sp-5) auto 0; text-align: center; max-width: 640px; }
:root[data-theme="night"] .evt-card { background: var(--card); }
:root[data-theme="night"] .evt-card__tag { background: rgba(var(--accent-rgb),.18); }

/* ================= V18.5 追加（2026-10-16） =================
 * 页脚抖音二维码（D1：微信码旁固定位）
 * ============================================================ */
/* 页脚抖音码：微信码下方固定位，120px 与微信码 160px 区分主次 */
.nv-footer-h--dy { margin-top:20px; }
.nv-qr-frame--dy .qr-img { width: 120px; height: 120px; }
.qr-fallback b { color: var(--ink-primary); }
@media (max-width: 767px) {
  .nv-footer-h--dy { margin-top:16px; }
}


/* V18.5：页脚社交双码行（左抖音 / 右小红书，标题在上） */
.nv-qr-duo { display: flex; gap: var(--sp-5); align-items: flex-start; justify-content: center; margin-top:20px; }
.nv-qr-duo__item { display: flex; flex-direction: column; align-items: center; }
.nv-qr-duo .nv-footer-h--dy { margin-top:0; }
.nv-qr-duo .footer-tip { font-size: var(--fs-xs); margin-top:8px; }
@media (max-width: 767px) { .nv-qr-duo { gap: var(--sp-3); } }


/* V18.5：页脚三码横向一排响应式（nv-qr-duo-3up）——微信/抖音/小红书 */
.nv-qr-duo { margin-top:0; }
@media (max-width: 767px) {
  .nv-qr-duo { gap: var(--sp-3); }
  .nv-qr-duo .qr-img { width: 100px; height: 100px; }
  .nv-qr-duo__item { max-width: 104px; }
}
@media (max-width: 359px) {
  .nv-qr-duo { gap: var(--sp-2); }
  .nv-qr-duo .qr-img { width: 84px; height: 84px; }
  .nv-qr-duo .footer-tip { font-size: var(--fs-xs); }
  .nv-qr-duo__item { max-width: 92px; }
}


/* V18.5.2：页脚三码去白边 + 放大（nv-qr-duo-noborder） */
.nv-qr-duo .nv-qr-frame { padding:0; background: transparent; border: none; box-shadow: none; border-radius:0; }
.nv-qr-duo .qr-img { width: 136px; height: 136px; }
@media (max-width: 767px) {
  .nv-qr-duo { gap: var(--sp-3); }
  .nv-qr-duo .qr-img { width: 108px; height: 108px; }
  .nv-qr-duo__item { max-width: 112px; }
}
@media (max-width: 359px) {
  .nv-qr-duo { gap: var(--sp-2); }
  .nv-qr-duo .qr-img { width: 92px; height: 92px; }
  .nv-qr-duo__item { max-width: 96px; }
}

/* V18.5.2：三码去白边后留出文字间距（扫码静区，nv-qr-duo-quiet） */
.nv-qr-duo .footer-tip { margin-top:8px; }

/* ══════════════════════════════════════════════════════════════
   V19.5 · 导航「问 AI」入口 + 搜索空态 AI 出口
   与 .nav-search 同排同高，保证 44px 触控目标与视觉一致。
   ══════════════════════════════════════════════════════════════ */
/* V9-04：描边与文字改跟随「当前模式的 --accent-text」。
   原写法夜间是硬编码橙（底 #2a1a0e / 边 #4a2a12 / 字 #ffb27a），与夜间蓝色实心主按钮
   （--accent-text-bg = #0071e3）同屏对峙，两个都像主操作。
   目的不是「全站只有一个颜色」，而是**同一时刻只有一个强调色族**：
   日间 --accent-text = #a04a00（橙）、夜间 = #4aa3ff（蓝），与同屏主按钮自动同族。
   夜间蓝系保留不动——它是本项目既定双色方案（见 theme-manager.js 头部注释）。 */
.nav-pill--ai {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 34px;
    padding: 0 var(--sp-3);
    border: 1px solid var(--accent-text);
    border-radius: var(--r-pill);
    background: var(--accent-wash);
    color: var(--accent-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition:background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast);
}

.nav-pill--ai:hover { background: var(--brand-bg-soft); border-color: var(--accent-text); }
.nav-pill--ai:active { transform: scale(0.96); }
.nav-pill--ai:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.nav-pill--ai svg { width: 16px; height: 16px; }

/* 搜索空态：把「没找到」变成一次可核查的提问 */
.kb-empty-ai {
    display: flex;
    flex-direction: column;
    gap:4px;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--divider);
}

.kb-empty-ai a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--brand-strong);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
}

.kb-empty-ai a:hover { text-decoration: underline; }
.kb-empty-ai span { font-size: var(--fs-xs); color: var(--ink-secondary); }

/* ================= V20-02 品牌入口条紧凑化（2026-10-20） =================
 * 现状：6 个品牌 chip 在 375px 下折成 3 行；价格区底部留白 64px、chip 间距 8px、
 *       提示行用 -20px 负边距向上拉 —— 整块约占 210px 垂直空间，首屏被明显挤压。
 * 改法：① 价格区底部留白收敛为 clamp(20px, 3.2vw, 32px)；
 *       ② chip 间距 8→6px、横向内边距 12→10px、line-height 锁 1，高度仍为 44px；
 *       ③ 窄屏改单行横向滚动（含右缘渐隐、滚动吸附），不再折行；
 *       ④ 提示行去掉负边距，改为 8px / 24px 的正向节奏。
 * 只动排版，不改任何文案、链接、锚点与事件绑定。
 * ============================================================ */
#price-cards { padding-bottom:clamp(20px, 3.2vw, 32px); }

.brand-links {
    gap:8px;
    margin:0 auto;
    padding: 0 var(--sp-5) var(--sp-4);
}
.brand-links__label { line-height: 1; white-space: nowrap; }
.brand-link {
    padding:0 8px;
    min-height: 44px;      /* 触控高度维持 44px，不做视觉缩小 */
    line-height: 1;
    white-space: nowrap;
}
.devsel__hint { margin: var(--sp-2) auto var(--sp-6); line-height: 1.45; }

/* 窄屏：一行横向滚动，替代 2–3 行折行；44px 触控区不变。
   注：不加 scroll-snap —— 实测 Chrome 在首屏布局时会吸附到第一个 chip 的
   snap 点，把「按品牌找：」标签顶出视口（标签宽度 ≈60px 的位移）。 */
@media (max-width: 767px) {
    .brand-links {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 0 var(--sp-4) var(--sp-3);
        -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
        mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
    }
    .brand-links::-webkit-scrollbar { display: none; }
    .brand-link { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-links { scroll-behavior: auto; }
}

/* P0 · 移动端首屏被底部浮动栏盖住（2026-10-20 实测）
   375×812 下：店铺卡片底部 844px（超出视口 32px），浮动栏 top 752px，
   「到店导航」的点击位置被浮动栏命中 —— 相当于最关键的导航按钮点不到。
   试过的四种改法里，只有收 .hero 上边距不引入新问题：
     压缩底栏高度（无效，卡片仍在 844）、减卡片内边距（仍遮挡 51px）、
     卡片单独上移（压住信任行 11px）。
   桌面端不动，只在 ≤768px 生效。 */
@media (max-width: 767px) {
  /* 上边距收到 5px 后卡片仍在浮动栏下 17px，所以下边距也从 48px 收到 28px：
     两处一起收，卡片底部才会从 844 → 约 749，浮动栏 top 752，正好留出缝。 */
  .hero { padding-top:4px; }
  /* 卡片自身 margin-top 24px 是最后一段可压缩的空白：收到 4px，卡片底 844→771→769
     再叠加上面的 5px，最终落在浮动栏上方。 */
  .store-card { margin-top:4px; }
}

/* 定位成功后出现的「在地图确认位置」小链接（2026-10-20）
   为什么要它：没有高德 key 时地址栏只能填经纬度，顾客看不懂，
   给一条能直接在手机地图里看自己位置的路，比让他相信一串数字靠谱。 */
.pickup-locate__map {
  display: inline-block; margin-top:8px; font-size: var(--fs-sm);
  color: var(--accent-text); text-decoration: none; border-bottom: 1px dashed currentColor;
}
.pickup-locate__map[hidden] { display: none; }

/* 整段粘贴识别区（2026-10-20）：让顾客把微信/淘宝复制来的整串信息直接贴进来 */
.pickup-parse__box { min-height: 62px; resize: vertical; line-height: 1.6; }
.pickup-parse__btn {
  margin-top:8px; padding: 0 var(--sp-4); height: 38px; border-radius: var(--r-md);
  border: 1px solid var(--divider); background: var(--card); color: var(--ink-primary);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .pickup-parse__btn:hover { background: var(--bg-elevated); } }
.pickup-parse__btn:active { transform: scale(0.99); }

/* http 下常驻提示：定位按钮旁边直接说明为什么点不动（2026-10-20） */
.pickup-locate__note {
  margin:8px 0 0; font-size:13px; line-height: 1.6; color: var(--ink-secondary);
}

/* ================================================================
   v19.8-r8 · M1/M2 【已撤回 · 前提错误，留证不删】
   原判：.price-tag/.price-warranty 用 --accent-text(#a04a00)/--green-text(#1a7f37)
         直接压在暗带 #17181C 上，对比度 2.93 / 3.49，未达 AA。
   实测（Edge CDP 计算样式，2026-10-20 17:3x）：
         日间 .price-tag 的**实际背景是白色卡片 rgb(255,255,255)**，暗带只在外围；
         #a04a00 on #fff = 5.90（达标），#1a7f37 on #fff = 5.08（达标）。
   即：原色本来就合规；按"压暗带"改反而把日间拉到 2.09（#FF9A5C on 白）——更糟。
   处置：整段撤回，不改颜色。教训见《V19.8-r3》§2.2 第 5 条（本轮由我方犯下）。
   ================================================================ */

/* ================================================================
   v19.8-r8 · M10 桌面端遮挡 【已撤回 · 未能复现，暂缓】
   原判：1440 下卡片 bottom=831、底栏 top=828，遮挡 3px。
   实测（Edge CDP，1440×900 与 375×812）：.float-bar 固定在视口底部（top=828），
         页面为正常文档流，滚动后所有区块均可滚到栏上方；未能复现"卡片 bottom 831"
         这一具体状态（该数字应来自某次带锚点跳转的临时快照）。
   处置：不做过早修改——按本方案 §2.3「改动可逆 + 落点校验」，无法定位落点即不动。
         若你复现到具体视口/滚动位置，把截图给我，我再按那一条精确修。
   ================================================================ */

/* ================================================================
   v19.9-r3 · VQ1 首屏视觉锚点 + VQ6 移动端字号
   依据：Edge CDP 实测（1440：hero 纯文字、squint test 为一条文字带）。
   构图：≥900px 两栏（左文右图，1.05 : 0.85），<900px 单列堆叠、图落文字下方。
   图源：assets/img/workbench.jpg（真实维修台实拍，非网图）。诚信红线：不虚构照片。
   ================================================================ */
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
.hero-visual { display: none; }

@media (min-width: 768px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
    column-gap: var(--sp-8);
    align-items: center;
    text-align: left;
  }
  .hero-copy { align-items: flex-start; text-align: left; }
  .hero-copy .store-card { width: 100%; }
  /* 两栏后标题不再独占整行，字号从 64 收到 56，避免 3 行断句 */
  .hero h1 { font-size: clamp(40px, 4.4vw, 56px); }
  .hero p { margin-left: 0; margin-right: 0; }
  .hero-sub { max-width: 34em; }
  .hero-visual { display: block; }
  .hero .btn-primary, .hero .btn-secondary { width: auto; min-width: 260px; }
}

.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  box-shadow: var(--shadow-card-hover);   /* 实拍是静态证据，不用 --shadow-float（弹窗专用） */
}
.hero-visual__cap {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
  background: rgba(17,17,19,0.62);
  color: #fff;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}
.hero-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 46% 48%;   /* 与中段 .bench 的整幅展示区分裁切，避免读成重复 */
  display: block;
}
@media (max-width: 767px) {
  /* 移动端：单列堆叠。用 display:contents 把 .hero-copy 摊平，
     让「实拍图」排在信任行之后、门店卡之前（order 6/7），
     既不挤压折叠线内的主 CTA，也不让图沉到页尾。 */
  .hero-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); }
  .hero-copy { display: contents; }
  /* MOBILE-ADAPT v1：门店卡（地址/电话/营业时间）提到实拍图之前。
     实测：4:3 实拍在 375 下高约 250px，若插在信任行与门店卡之间，
     会把门店卡顶到 827px（折叠线 812 之外）。换序后门店卡回到第一屏，
     实拍图落在其后、下缘仍露出一截，兼作滚动提示。 */
  .hero-copy .store-card { order: 6; width: 100%; }
  .hero-visual { display: block; order: 7; margin-top: var(--sp-5); aspect-ratio: 4 / 3; }
  /* VQ6：375 下 8.7vw≈32.6px 贴近下限，抬高下限到 30px 并放大斜率 */
  .hero h1 { font-size: clamp(30px, 9vw, 56px); }
}

/* ── V22-03 桌面端两条「空转」栏位的收口（2026-10-20） ─────────────────
   1) .devsel__lead 用 space-between，源码注释里的动线是「左标签 ····· 右 tab ｜˅」，
      但 devsel 目前只有一个「手机」tab，space-between 把唯一标签推到 864 宽容器的最右，
      中间空出 600px，1440 下读起来像「这行没加载完」。改成左对齐成一组，收起箭头仍在右端。
   2) .flow 上限 600px 是竖排单列的合理宽度，但首页其余内容区是 900px，
      5 个步骤在 1440 下缩成一条窄柱。桌面改两列，最后一步（取机）通栏收尾。 */
@media (min-width: 768px) {
  .devsel__lead { flex: 0 1 auto; justify-content: flex-start; gap: var(--sp-4); }
  .devsel__tabs { flex: 0 0 auto; }
  .devsel__title { margin-bottom: 0; font-size: var(--fs-xs); letter-spacing: 0.04em; }

  .flow { max-width: 900px; }
  .flow__list { grid-template-columns: 1fr 1fr; align-items: start; }
  .flow__step:last-child { grid-column: 1 / -1; }
}
/* ============================================================================
   refine.css · 锦城修鲤 v19.7（第 7 轮：设计细节与阅读体验收敛）
   ----------------------------------------------------------------------------
   定位：只做「排版节奏 / 数字对齐 / 焦点与触控 / 选中态」的增量微调。
   红线：不新增字体、不改任何品牌色变量、不改任何文案、不引入新依赖。
   依据：7 个外部案例（见 docs/第7轮-设计优化与落地报告.md §2）中三条共性——
         ① 排版承担设计（标题平衡断行、正文行长可控）
         ② 数字是第一信息（价格用等宽数字，避免宽度跳动）
         ③ 动效与反馈克制但完整（hover / focus / active 三态齐备）
   加载：始终排在页面自身样式之后，用 :where() 降低优先级，绝不覆盖既有规则。
   ========================================================================= */

/* 1 · 标题平衡断行
   中文长标题在 320–414px 宽下常把最后 1–2 个字挤到下一行（孤字）。
   balance 让浏览器按行宽均分断点；不支持时保持原有换行，零副作用。 */
:where(h1, h2, h3, .section-header, .flow__title, .ai-hero h1, .ai-seed__title) {
  text-wrap: balance;
}

/* 2 · 正文避孤行
   pretty 让最后一行至少两个词（中文为至少两个字）。Safari 17.5+/Chrome 117+ 生效。 */
:where(p, li, .faq-answer, .ai-seed__a, .hero-sub) {
  text-wrap: pretty;
}

/* 3 · 价格与时长用等宽数字
   ¥79 / ¥119 / ¥149 三位数宽度不同，切换时会左右跳动；tnum 固定字宽后价目列对齐。
   仅改字形宽度，不改字号与颜色。 */
.price-tag,
.price-tag__now,
.price-tag__anchor,
.price-warranty,
.price-from,
.ai-seed__src,
.flow__step-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 4 · 焦点环统一（键盘可见）
   :where() 优先级为 0，页面里已有的更具体 focus-visible 规则仍然优先，
   此条只兜住那些尚未定义焦点的可交互元素（如 details > summary、站内链接）。 */
:where(a, button, summary, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius:var(--r-sm);
}

/* 5 · 选中文字用品牌浅底
   品牌主色 #E85A0C 不变，这里只取它已有的浅色令牌 --brand-bg-soft 作选区底色，
   夜间模式沿用 base.css 的变量覆盖，不硬编码颜色。 */
::selection {
  background: var(--brand-bg-soft);
  color: var(--ink-primary);
}

/* 6 · 正文内链接可读性
   服务型站点正文里的链接常被当成普通文字跳过；统一下划线偏移与粗细，
   让「可点」在视觉上成立，同时不影响卡片式链接。 */
:where(.faq-answer, .ai-seed__a, .ai-seed__src, .privacy-body) a {
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

/* 7 · 图片不撑破容器（防 CLS）
   只约束尺寸，不改 display，避免影响现有二维码栅格与图标对齐。 */
img {
  max-width: 100%;
  height: auto;
}

/* 8 · 触控设备补足热区
   WCAG 2.2 SC 2.5.8 的下限是 24×24；Apple HIG 建议 44×44。
   这里只对「主要操作」补高度，且仅在粗指针设备生效，桌面端布局完全不变。 */
@media (pointer: coarse) {
  .learn-more,
  .promo-claim,
  .ai-submit,
  .ai-hot button,
  .ai-seed__item > summary {
    min-height: 44px;
  }
  .learn-more { align-items: center; }
}

/* 9 · 动效尊重系统偏好
   本轮新增的过渡（若有）在此兜底关闭；既有规则不受影响。 */
@media (prefers-reduced-motion: reduce) {
  :where(.ai-seed__item, .ai-seed__item > summary::after) {
    transition:none;
  }
}
/* feedback.css —— 「听您说」入口三栏（首页）+ 独立反馈页
   设计原则：
   1. 中间那个标签是视觉焦点（顾客点进去），左右是即时通道（电话/微信）；
   2. 不用图片，纯 CSS，避免加载抖动；
   3. **全部颜色走站点变量**（--card / --ink-primary / --divider / --brand-*）。
      踩过的坑：先前用 prefers-color-scheme 写深色，但站点是 [data-theme="night"]
      类名切换，系统深色 + 站点浅色时会变成「白字落在白卡上」，标题直接消失。 */

/* ---------- 首页三栏 ---------- */
.say { padding:20px 16px 8px; max-width: 1080px; margin:0 auto; }
.say-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap:8px; }

.say-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap:4px; min-height: 78px; padding:12px 8px; border-radius:var(--r-lg);
  border: 1px solid var(--divider); background: var(--card);
  color: var(--ink-primary); text-decoration: none; text-align: center;
  font-size:15px; font-weight: 600; line-height: 1.35;
  transition:transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.say-card:active { transform: scale(.98); }
.say-card small { display: block; font-size:12px; font-weight: 400; color: var(--ink-secondary); }

/* 中间：听您说（主入口，视觉最重） */
.say-card--main {
  border-color: var(--brand);
  background: var(--brand-bg-soft);
  box-shadow: 0 4px 14px rgba(232, 90, 12, .14);
}
.say-card--main .say-tag {
  display: inline-block; margin-top:2px; padding:2px 8px; border-radius:var(--r-pill);
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 600;
}

@media (max-width: 359px) {
  .say-card { font-size: 13px; min-height: 70px; }
}

/* ---------- 独立反馈页 ---------- */
.fb-wrap { max-width: 560px; margin:0 auto; padding:16px 16px 40px; }
.fb-head { margin-bottom:16px; }
.fb-head h1 { margin:0 0 8px; font-size: 22px; line-height: 1.35; color: var(--ink-primary); }
.fb-head p { margin:0; color: var(--ink-secondary); font-size: 14px; line-height: 1.75; }
.fb-head p b { color: var(--brand); }

.fb-types { display: flex; gap:8px; margin:16px 0 16px; flex-wrap: wrap; }
.fb-type {
  padding:8px 16px; border-radius:var(--r-pill); border: 1px solid var(--divider);
  background: var(--card); font-size: 14px; color: var(--ink-primary); cursor: pointer;
}
.fb-type[aria-pressed="true"] {
  border-color: var(--brand); background: var(--brand-bg-soft);
  color: var(--brand-strong); font-weight: 600;
}

.fb-field { margin-bottom:16px; }
.fb-label { display: block; font-size: 13px; color: var(--ink-secondary); margin-bottom:8px; }
.fb-textarea, .fb-input {
  width: 100%; box-sizing: border-box; padding:12px; border-radius:var(--r-md);
  border: 1px solid var(--divider); background: var(--card); color: var(--ink-primary);
  font-size: 15px; font-family: inherit; line-height: 1.6;
}
.fb-textarea { min-height: 132px; resize: vertical; }
.fb-textarea:focus, .fb-input:focus { outline: none; border-color: var(--brand); }
.fb-input--err { border-color: var(--price); }
.fb-err { color: var(--price); font-size:13px; margin-top:8px; }

.fb-submit {
  width: 100%; padding:16px; border: 0; border-radius:var(--r-md); cursor: pointer;
  /* V24-q1：同 assets/css/feedback.css 同名规则，改源文件后同步到这里。
     原 var(--brand-grad) 昼间浅端 #FF8A3D 白字 2.34:1；改白字载体令牌两端，最低 4.70:1。 */
  background: linear-gradient(135deg, var(--accent-text-bg), var(--accent-hover));
  color: #fff; font-size: 16px; font-weight: 700;
}
.fb-submit[disabled] { opacity: .6; cursor: default; }

.fb-alt { margin-top:16px; display: grid; gap:8px; }
.fb-alt a {
  display: block; padding:12px; border-radius:var(--r-md); text-align: center;
  border: 1px solid var(--divider); color: var(--ink-primary); text-decoration: none;
  font-size: 14px; font-weight: 600; background: var(--card);
}
.fb-note { margin-top:16px; font-size:13px; color: var(--ink-secondary); line-height: 1.75; }
.fb-note a { color: var(--brand); }

.fb-done {
  padding:24px 16px; border-radius:var(--r-lg); background: var(--brand-bg-soft);
  border: 1px solid var(--brand-border); text-align: center;
}
.fb-done h2 { margin:0 0 8px; font-size: 19px; color: var(--ink-primary); }
.fb-done p { margin:0 0 16px; color: var(--ink-secondary); font-size: 14px; line-height: 1.75; }

/* 抽屉里通往独立反馈页的入口（2026-10-20）：
   抽屉保留「快速投票」，认真吐槽走 feedback.html（能留电话、有回馈礼）。 */
.voice__goto {
  display: block; margin:8px 16px 2px; padding:8px 12px; border-radius:var(--r-md);
  background: var(--brand-bg-soft); border: 1px solid var(--brand-border);
  color: var(--brand-strong); font-size:var(--fs-sm); font-weight: 600;
  text-decoration: none; text-align: center;
}

/* 反馈页里的「投一票」设备选择：比类型 chip 小一号，8 个能排两行 */
.fb-vote { display: flex; flex-wrap: wrap; gap:8px; }
.fb-vote .fb-dev { padding:8px 12px; font-size: 13px; }
/* workbench.css —— 「工作台实拍」区块
   目的：让顾客看到怎么修，而不是听我们说自己专业。
   做法：图占大半，文字只描述桌上有什么、哪一步做什么，不写形容词。
   配色全部走站点变量，深浅两套主题都跟站点走。 */

.bench { padding:8px 16px 28px; max-width: 1080px; margin:0 auto; }
.bench__card {
  display: grid; grid-template-columns: 1.15fr 1fr; gap:0;
  border: 1px solid var(--divider); border-radius:var(--r-lg); overflow: hidden;
  background: var(--card);
}
.bench__media { position: relative; background: #0d0d0f; }
.bench__img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.bench__tag {
  position: absolute; left: 12px; bottom: 12px;
  padding:4px 8px; border-radius:var(--r-pill); font-size:12px;
  background: rgba(0, 0, 0, .62); color: #fff; letter-spacing: .02em;
}
.bench__body { padding:24px 24px 20px; display: flex; flex-direction: column; justify-content: center; }
.bench__eyebrow { font-size:12px; letter-spacing: .14em; color: var(--ink-secondary); margin-bottom:8px; }
.bench__title { margin:0 0 8px; font-size: 20px; line-height: 1.4; color: var(--ink-primary); }
.bench__list { margin:0 0 16px; padding:0; list-style: none; }
.bench__list li {
  position: relative; padding-left:16px; margin-bottom:8px;
  font-size: 14px; line-height: 1.65; color: var(--ink-secondary);
}
.bench__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius:50%; background: var(--brand);
}
.bench__list b { color: var(--ink-primary); font-weight: 600; }
.bench__foot { font-size:var(--fs-sm); color: var(--ink-secondary); }
.bench__foot a { color: var(--brand); font-weight: 600; text-decoration: none; }

@media (max-width: 767px) {
  .bench__card { grid-template-columns: 1fr; }
  .bench__body { padding:16px 16px 16px; }
  .bench__title { font-size: 18px; }
  .bench__img { aspect-ratio: 4 / 3; }
}
/* ================================================================
   MOBILE-ADAPT v1 · 2026-10-20 · 落地版
   适用：v19正式版.1 全站 13 个页面（3 个跳转存根与 geo-test 除外）
   定位：**最后加载**的适配层。所有页面把它放在最后一条 <link>，
        因此同等特异度下「后写者胜」，无需 !important。

   ★ 与方案文档 §12 的差异（已核实后修正，理由见 §15 核验记录）：
     文档让把补丁逐文件追加到 base.css 末尾。实测各页 CSS 载入顺序为
     base → home/used/ai/… → refine，**base.css 里的 body 级规则会被
     home.css 的同名规则反压**（body{padding-bottom} 实测无效）。
     故改为新建本文件并在各页最后引入：一处维护、层叠必胜、回滚只删一个文件。

   铁律：
     1. ≥1024px 的规则只在「缺陷修复」小节出现（分数字号/极小字号），
        版式类规则全部关在 max-width:1023 内，桌面零影响。
     2. 不删除任何既有声明，只做覆盖。
     3. 回滚：删掉本文件 + 各页 <link> 即可，其余文件零改动。
   ================================================================ */

/* ================================================================
   0 · 横向溢出（全站，含桌面修复：1440 实测溢出 3px）
   用 clip 而非 hidden：hidden 会建立滚动容器使 position:sticky 失效，
   clip 不会（iOS 已知行为差异）。
   ================================================================ */
html { overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } }
body { overflow-x: clip; }

img, svg, video, canvas { max-width: 100%; }

/* ================================================================
   1 · 8pt 间距阶梯（新名字，绝不覆盖既有 --sp-*）
   实测现有 --sp-4:16 / --sp-6:24 / --sp-8:40，缺 32/48/64 三档，
   导致只能四舍五入。新阶梯独立命名，旧 --sp-* 一处不动。
   ================================================================ */
:root {
  --gap-1: 4px;  --gap-2: 8px;  --gap-3: 12px; --gap-4: 16px;
  --gap-5: 24px; --gap-6: 32px; --gap-7: 48px; --gap-8: 64px; --gap-9: 88px;
}

/* ================================================================
   2 · 缺陷修复（全站生效，与视口无关）
   2.1 按钮/表单继承 UA 默认 13.3333px —— 375 实测有 7 个元素命中，
       全是图标按钮，视觉无差但污染字号统计、且 em 派生尺寸会带小数。
   2.2 .price-fn 是 0.62em 的价签脚注「*」，实测小到 8.06px（几乎不可读），
       大的又到 17.36px。用 max() 设 12px 地板，两端一起修。
   ================================================================ */
button, input, select, textarea { font-size: inherit; }
.price-fn { font-size: max(0.62em, 12px); }

/* 2.3 锚点跳转不被吸顶导航盖住（品牌页目录跳转尤其明显） */
[id] { scroll-margin-top: calc(var(--nav-h, 66px) + 12px); }

/* ================================================================
   3 · ≤1023px（手机 + 平板）
   ================================================================ */
@media (max-width: 1023px) {

  /* 3.1 区块节奏：全站单一节拍 48px
     改前实测 6 种组合 / 10 种取值：
       hero 4|48、service-cards 0|40、flow 0|24、trust 0|24、
       band 40|20、bench 8|28、section 64|64
     改后：每个区块上边距归零（由前一块 48 的下边距提供净间隔），
          两块之间恒为 48，不出现 48+48=96 的双倍缝。 */
  :root { --space-section: 48px; }

  .hero, .service-cards, .flow, .trust, .section, .bench, .cta-final {
    padding-bottom: var(--space-section);
  }

  /* 后者取消上内距（选择器已按实测 DOM 兄弟关系写：
     body: hero → service-cards → brand-links → devsel__hint → flow → trust → main） */
  .hero + .service-cards,
  .flow + .trust,
  .section + .section,
  .section + .bench,
  .bench + .section,
  .section + .cta-final { padding-top: 0; }

  /* main 内的区块：一律 0 上内距；首屏 hero 与有底色的区块除外 */
  main > .section,
  main > .bench,
  main > .cta-final { padding-top: 0; }

  /* 有底色的区块保留双边呼吸（深色价格 band / 纸质问答区）。
     必须用 id 选择器：`.section{padding:64px}` 特异度 0,1,0，
     `main > .section` 是 0,1,1，普通 class 打不过。 */
  #price-cards,
  #faq { padding-top: var(--space-section); padding-bottom: var(--space-section); }

  /* 文档 ▸ MOB-03 的 band 底距补丁：源文件有
     `#price-cards{padding-bottom:clamp(20px,3.2vw,32px)}`，手机上只有 20px，
     比其它区块窄一半。上面 #price-cards 已覆盖，此条保留为语义说明。 */

  /* 唯一例外：首屏 hero 顶部 24px（不叠加导航高度，也不跟 48 双倍） */
  .hero { padding-top: var(--gap-5); }

  /* 3.2 首屏三段栏：voiceBar 45 / nav 67 / devSel 53 = 165px（占首屏 20%）
     nav 67 是 padding 撑出来的，压到 56；devSel 压到 44。合计省 20px。 */
  .nav { min-height: 56px; padding-block: 6px; }
  .devsel { min-height: 44px; padding-block: 0; }
  /* 53px 的构成实测为：inner padding-top 8 + 标签 44 + 边框 1。
     去掉那 8px 才真正落到 44，标签自身的 44px 触点不打折。 */
  .devsel__inner { padding-top: 0; }
  .devsel__tab { min-height: 44px; padding-inline: 14px; }

  /* 3.3 触控目标 ≥44×44（Apple HIG 通行值；WCAG 2.2 SC 2.5.8 硬底线 24）
     375 真机（pointer:coarse）实测 18 个 <44，其中电话链接仅 105×16。 */
  .nav-title, .nav-pill, .nav-search, .nav-theme-btn,
  .nav-back, .nav-phone, .privacy-back, .wx-nav__back,
  .devsel__close, .back-to-top {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* 仅宽度不足的补 min-width（34→44），其余只补高度，避免撑破导航一行 */
  .nav-theme-btn, .devsel__close, .back-to-top, .devsel__tab { min-width: 44px; }

  /* 页脚导航项实测 335×37，高度差 7px；display:flex 后默认左对齐，补 center 让四项居中 */
  .nv-footer-link { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* 「扫码微信 ›」实测 70×19 */
  a[href="#footer-qr"] { display: inline-flex; align-items: center; min-height: 44px; }

  /* .sr-only 是 1×1 裁剪层（视觉不可见），但它的 1.5em 在 17px 父级下会算出
     25.5px，污染字号档位统计。定死 13px，对无障碍与视觉均无影响。 */
  .sr-only { font-size: 13px; }

  .filter-chip, .wx-pricestrip__item,
  .evt-card__btn, .pickup-parse__btn, .fb-type, .ctrl { min-height: 44px; }
  /* 480–900 档实测：价格卡「预约换电池 ›」86×25、促销「领取」122×34 */
  .learn-more, .promo-claim { min-height: 44px; display: inline-flex; align-items: center; }

  /* 纯文字内联链接不改行高，用伪元素扩命中区（不动排版） */
  a[href^="tel"] { position: relative; }
  a[href^="tel"]::after {
    content: ''; position: absolute;
    inset: -14px -8px;   /* 16 + 14×2 = 44，实测命中区刚好达标 */
  }

  /* 复选框本体保持 20×20（视觉合理），由外层 label 撑到 44 */
  label:has(> input[type="checkbox"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 3.4 输入框 ≥16px，防 iOS Safari 聚焦自动放大 */
  input, select, textarea { font-size: 16px; }

  /* 3.5 首屏字号：去掉 vw 分数值（375 实测 33.75px，@2x/@3x 中文发虚） */
  .hero h1 {
    font-size: 34px;
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .hero p { font-size: 17px; line-height: 1.7; }

  /* 3.6 段转型正文提到 17px（Apple HIG：iOS 默认正文 17pt）
     卡片内标签保持 13–15px，页面长度影响控制在 5% 内。 */
  .section > p, .flow p, .faq p, .trust p, .bench li { font-size: 17px; line-height: 1.7; }

  /* 3.7 字号档位收口：14 → 15、18 → 20（与 h3 对齐），
     375 实测同页 11 档 → 8 档，且全为整数。 */
  .bench li { font-size: 15px; }
  .bench__title { font-size: 20px; }
  .nv-wordmark { font-size: 40px; }

  /* 3.8 横滑轨道：吸附 + 隐藏滚动条 + 两侧留白
     实测 brand-links scrollWidth 605 / clientWidth 375、scroll-snap none，
     用户不知道可以横滑。用 proximity 而非 mandatory，只吸近的。 */
  .brand-links, .devsel__tabs, .filter-row, .wx-case, .wx-pricestrip {
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .brand-links::-webkit-scrollbar,
  .devsel__tabs::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar,
  .wx-case::-webkit-scrollbar,
  .wx-pricestrip::-webkit-scrollbar { display: none; }
  .brand-links > *, .devsel__tabs > *, .filter-row > *,
  .wx-case > *, .wx-pricestrip > * { scroll-snap-align: start; }

  /* 3.9 横向安全区：原来只有 nav 用了，横屏刘海机型主内容左右会被切 */
  .section, .hero, .flow, .trust, .bench, .cta-final, .footer {
    padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  }

  /* 3.10 内联链接命中区（ai 页实测 12 个 15–16px 高的裸 a） */
  .msg a, .ask-link { display: inline-block; padding-block: 6px; }
}

/* ================================================================
   4 · 分档字号阶梯（≤479 / 480–767 / 768–1023 三段，桌面不参与）
   ★ 只写 max-width 组合，绝不用裸 min-width —— 否则 ≥1024 也会命中，
     把桌面 h1 从 56px 压到 40px（方案文档 §12.2 原补丁有此缺陷，已修）。
   ================================================================ */
@media (min-width: 480px) and (max-width: 767px) {
  .hero h1 { font-size: 36px; }
  .nv-wordmark { font-size: 48px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero h1 { font-size: 40px; }
  .nv-wordmark { font-size: 56px; }
}

/* ================================================================
   5 · 横屏（高度 ≤500px）
   横屏时首屏可用高度仅 ~390px，竖排 hero 会被完全挤爆。
   ================================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { padding-top: var(--gap-4); padding-bottom: var(--gap-4); }
  .hero h1 { font-size: 30px; }
  .hero-visual { display: none; }
}

/* ================================================================
   6 · 平板档（768–1023）既有缺陷修正
   实测 768：维修项目卡按 min-width:768 切成 3 列（每列 232px），
   而卡内是「图标 | 标题 | 价格」横排，232px 装不下 → 标题逐字断行
   （「换屏 幕」「修主 板」）。这是改前既有问题，非本轮引入。
   处置：该档收成 2 列，每列约 340px，标题回到一行。
   ================================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .service-cards { grid-template-columns: repeat(2, 1fr); }
}