/* used-detail.css —— 二手单机详情页（CSS 3D 机身 + 透视 + 划痕热点 + 六面实拍 + 检测分层）
   为什么不用 three.js / glb：
   1) 站点 CSP 只允许 self，加载 CDN 要开白名单；
   2) 目前没有真机 3D 资产，用 glb 也只是个占位盒子；
   3) 手机本质就是个圆角长方体，CSS 3D 足够表现，且零依赖、零加载。
   以后拿到真机 360 序列帧或 glb，替换 .device 内部即可，外层交互逻辑不用动。

   2026-10-21 结构（移动端）：
     第 1 屏  3D 舞台占满（结构示意的角标 + 实拍计数 + 8 个视角按钮 + 左下「详细」球）
     第 2 屏  价格（起价 + 三条定价依据）与三个行动按钮
     第 3 屏  六面实拍（6 槽位 + 灯箱）
     第 4 屏  检测记录（已核 / 待核 两层 + 进度）
     之后     参数表 / 怎么验机 */

* { box-sizing: border-box; }

/* ---------- 顶部条 ----------
   原来 .privacy-head 只在 privacy.css 里定义，而本页从来没引那个文件 →
   顶部返回链接与品牌名一直是浏览器默认样式（同排、同权重、无内边距）。
   本页不引 privacy.css（它会改 body 字号与行高，影响 3D 页面），改为在此就地定义。 */
.privacy-head {
  max-width: 1080px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; min-height: 48px;
}
.privacy-back {
  color: var(--brand-strong); text-decoration: none; font-weight: 600; font-size: 14px;
  /* 触控高度 44px（WCAG 2.5.8 的 24×24 是底线，2.5.5 AAA 与 iOS HIG 都取 44）：
     这是本页唯一的「退出去」动作，一行 21px 高的文字在手机上经常点空。 */
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px;
}
.privacy-brand { margin-left: auto; font-weight: 500; font-size: 12px; color: var(--ink-secondary); letter-spacing: .04em; }

.detail-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }

.detail-hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center;
  padding: 4px 0 8px;
}
@media (max-width: 767px) {
  .detail-hero { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- 3D 舞台 ---------- */
.stage {
  position: relative; display: flex; flex-direction: column; align-items: center;
  /* SCROLL-FIX：原为 touch-action:none —— 舞台高 581px 占屏 72%，手指落在这里
     整页都划不动（实测：在 3D 手机上滑 scrollY 恒 0，在按钮区上滑 249）。
     改为 pan-y：纵向手势交给页面翻页，横向手势仍由下面的拖拽逻辑接管旋转。 */
  padding: 6px 0 8px; touch-action: pan-y; user-select: none;
  background: radial-gradient(60% 55% at 50% 42%, rgba(232,90,12,.10), transparent 70%);
  border-radius: var(--r-xl);
}

/* 首屏独占：整块 3D 自己占满一屏，价格让位到下一屏。
   为什么敢这么做——顾客滑手机模型时会自己往下带，缺的只是一个「下面还有东西」的信号，
   那个信号由左下角的「详细」球承担。 */
@media (max-width: 767px) {
  .stage {
    min-height: calc(100vh - 68px);
    min-height: calc(100svh - 68px);
    justify-content: space-between;
    /* 底部留出「详细」球的位置：球 fixed 在距底 12px、直径 54px（占 12~66）。
       不留这一条，实测球会压住第二行「顶部」按钮 14px —— 顾客点「顶部」会点到球上。 */
    padding-bottom: 64px;
  }
}

.stage__top {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0 2px;
}
.stage__badge, .stage__shots {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill); min-height: 28px;
  background: var(--card); border: 1px solid var(--divider);
  color: var(--ink-secondary); font-size: 12px; line-height: 1;
}
/* 「实拍 n/6」是按钮，角标不是 —— 所以只给它 44px。
   两个都 44 会把首屏顶部那条撑高 16px，而 100svh 的舞台上每一格都是算过的。 */
.stage__shots { cursor: pointer; font-family: inherit; color: var(--ink-primary); min-height: 44px; }
.stage__shots b { font-weight: 700; color: var(--brand-strong); }

.stage__viewport {
  width: 100%; height: 460px; display: grid; place-items: center;
  perspective: 1100px; cursor: grab;
}
.stage__viewport.is-dragging { cursor: grabbing; }
/* 沉浸模式按住 Shift 是平移而不是旋转，光标要跟着换，否则手感说不通 */
.stage__viewport.is-panning { cursor: move; }

.device {
  /* ZONE-FIX 结论：这里**不加** touch-action:none。
     加了之后纵向手势会被手机咬住 → 屏幕正中留一块 156×359 的死区（划不动页）。
     改为：舞台 .stage 统一 pan-y；纵向一律交给页面，横向由 JS 接管旋转。
     方向判定见 used-detail.js 的 touchmove。 */
  --w: 232px; --h: 470px; --d: 26px;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d; will-change: transform;
  /* 这里原来有一条 transition: transform 150ms linear。
     必须去掉：拖拽和预设视角都是 rAF 每帧写 transform，
     再叠一层 150ms CSS 过渡等于双重缓动 —— 手指已经停了，机身还要再滑 150ms，
     观感是「黏」。动画本身由 JS 的 animateTo 负责，CSS 不需要插一脚。 */
  transform-origin: 50% 50%;
}
/* 单列布局时（≤900px）也要收小，否则机身比视口还高，会被裁掉 */
@media (max-width: 767px) {
  .device { --w: 196px; --h: 398px; --d: 22px; }
  /* 首屏独占后垂直方向有富余，机身放大一档：从「一眼看到小手机」变成「一眼看到这台手机」 */
  .stage__viewport { height: 420px; flex: 0 0 auto; }
}
@media (max-width: 479px) {
  .device { --w: 204px; --h: 415px; --d: 23px; }
  .stage__viewport { height: 448px; }
}

.face {
  position: absolute; inset: 0; border-radius: var(--r-xl);
  backface-visibility: hidden; transition: opacity var(--dur-base) ease, background var(--dur-base) ease;
}

/* V24-q2：夜间机身轮廓。
   实测：机身后盖最亮段 #3a3f4a 对夜间页面底色 --bg-black(#0b1220) 只有 1.71:1，
   屏 / 中框 / 摄像头三段内部对比撑得住「这是台手机」，但整块剪影跟背景糊在一起。
   做法：只在前、后两个大面加 1px 外描边 —— 不改 DOM、不加伪元素、不动 3D 结构；
   .face--left/right（26px 窄条）不加，否则顶底会多出两条横线。
   rgba(255,255,255,.36) 叠在 #0b1220 上合成 ≈ #636770，实测 3.30:1，过 SC 1.4.11 的 3:1。
   昼间不动：机身对白底本来就是 ≥10:1，加边反而显脏。 */
:root[data-theme="night"] .face--front,
:root[data-theme="night"] .face--back {
  outline: 1px solid rgba(255,255,255,.36);
  outline-offset: 0;
}

/* 正面：屏幕 */
.face--front {
  transform: translateZ(calc(var(--d) / 2));
  background: #05060a; padding: 8px;
  box-shadow: inset 0 0 0 2px #1b1d22;
}
.screen {
  width: 100%; height: 100%; border-radius: var(--r-xl); overflow: hidden; position: relative;
  background: linear-gradient(160deg, #1b2a4a 0%, #2d1b3f 38%, #57303a 68%, #8a5a2c 100%);
}
.screen::after { /* 壁纸的一道高光，避免整块死板 */
  content: ""; position: absolute; inset: -30% -40% auto auto;
  width: 90%; height: 70%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.30), transparent 62%);
}
.island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 74px; height: 21px; border-radius: var(--r-pill); background: #05060a; z-index: 2;
}
.screen__clock {
  position: absolute; top: 52px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 40px; font-weight: 200; letter-spacing: .02em; z-index: 1;
}
.screen__date { position: absolute; top: 100px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.82); font-size: 12px; z-index: 1; }

/* 背面：机身 + 摄像头 */
/* 左右中框：只在接近侧视时成为可见面，用金属竖向渐变模拟抛光边框 */
.face--left, .face--right {
  width: var(--d); left: calc((var(--w) - var(--d)) / 2); right: auto; inset-block: 0;
  height: 100%; top: 0; bottom: 0; border-radius: var(--r-sm);
  background: linear-gradient(90deg,
      #2b3037 0%, #565e69 24%, #8d95a1 48%, #4b525c 72%, #262b31 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
}
/* 面板必须先水平居中，再绕 Y 轴转 90°、沿 Z 推到 ±w/2，才会正好贴在左右两侧 */
/* 往里收 2px：让玻璃的圆角把中框压住一点，否则 3/4 视角会看到一条「浮起」的亮边 */
.face--left  { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 2px)); }
.face--right { transform: rotateY(90deg)  translateZ(calc(var(--w) / 2 - 2px)); }

.face--back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
  background: linear-gradient(150deg, var(--body-1, #3a3f4a), var(--body-2, #22262e) 55%, var(--body-3, #14171c));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
}
.logo {
  position: absolute; top: 50%; left: 50%; width: 34px; height: 34px;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16);
}
.cam {
  position: absolute; top: 14px; left: 14px; width: 96px; height: 96px;
  border-radius: var(--r-xl); background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.10);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px;
}
.cam i {
  display: block; border-radius: 50%; background:
    radial-gradient(circle at 35% 30%, #6d7480 0 18%, #1a1d23 52%, #05060a 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.10);
}
.cam--single { grid-template-columns: 1fr; }
.cam--single i { width: 62%; height: 62%; margin: auto; }

/* 侧壁：用多层同尺寸圆角薄片沿 Z 轴堆叠，形成「圆角中框」的错觉。
   比两块直角薄板强的地方：侧转角时看到的是连续弧面，而不是一张纸的边。 */
.slices { position: absolute; inset: 0; transform-style: preserve-3d; }
.slice {
  position: absolute; inset: 0; border-radius: var(--r-xl);
  background: var(--frame, #4b515b);
  /* 中间亮、两端暗，模拟金属中框的高光带 */
  filter: brightness(var(--b, 1));
}

/* 侧键 */
.btn-side { position: absolute; width: 3px; border-radius: 2px; background: #4b515b; }
.btn-side--power { right: -2px; top: 120px; height: 46px; }
.btn-side--vol1 { left: -2px; top: 104px; height: 30px; }
.btn-side--vol2 { left: -2px; top: 142px; height: 30px; }

/* ---------- 透视层 ---------- */
.inner { position: absolute; inset: 0; transform-style: preserve-3d; opacity: 0;
  transition: opacity var(--lift-dur) ease; pointer-events: none; }
/* 透视态：机身从「降透明度」改成「抽掉底色、只留结构线」。
   为什么改：opacity 会连同 outline 一起变淡，实测 .10 透明度下那条 1px 轮廓
   等于不存在 —— 放大到 1.4 倍以后四个色块像悬在空中，看不出它们装在一台手机里。
   现在前后两面保持 opacity:1（轮廓线才是实色），把底色抽掉、只把「内容」压暗：
   正面的 .screen、背面的 .cam/.logo 各自降到 .12，观感还是「透视」，
   但手机剪影被一条 rgba(120,220,255,.55) 的线钉住了。
   数值：.55 叠在 #0b1220 上合成 ≈ #446f84，对比度 3.5:1，过 SC 1.4.11 的 3:1
   （.42 只有 2.9:1，差一点点，所以取 .55）。 */
.device.is-xray .face--front,
.device.is-xray .face--back {
  opacity: 1; background: transparent; box-shadow: none;
  outline: 1px solid rgba(120, 220, 255, .55); outline-offset: 0;
}
.device.is-xray .face--front .screen,
.device.is-xray .face--back .cam,
.device.is-xray .face--back .logo { opacity: .12; }
.is-xray .slices { opacity: .16; }
.is-xray .face--top, .is-xray .face--bottom { opacity: .12; }
.is-xray .inner { opacity: 1; }

.inner__part {
  position: absolute; border-radius: var(--r-sm); transform: translateZ(0);
  border: 1px solid rgba(120, 220, 255, .55);
  background: rgba(80, 190, 255, .16);
  box-shadow: 0 0 12px rgba(80, 190, 255, .18) inset;
}
.inner__part--battery { left: 26px; right: 26px; bottom: 40px; height: 150px;
  background: rgba(120, 255, 170, .16); border-color: rgba(120, 255, 170, .55); }
.inner__part--board { left: 26px; right: 96px; top: 120px; height: 96px;
  background: rgba(255, 190, 90, .18); border-color: rgba(255, 190, 90, .6); }
.inner__part--cam { left: 26px; top: 40px; width: 84px; height: 76px;
  background: rgba(180, 140, 255, .18); border-color: rgba(180, 140, 255, .6); }
.inner__part--coil { left: 50%; bottom: 60px; width: 78px; height: 78px; margin-left: -40px;
  border-radius: 50%; background: rgba(255, 120, 160, .14);
  border-color: rgba(255, 120, 160, .5); }
/* 图例放在 3D 外面：3D 里的文字转到背面会镜像，读不了 */
.xray-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center;
  margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-secondary);
}
.xray-legend li { display: flex; align-items: center; gap: 4px; }
/* 关键：.xray-legend 是 display:flex，浏览器默认的 [hidden]{display:none} 优先级更低，
   会被直接盖掉 —— 实测「X 光图例」在没开透视时一直挂在首屏底下（首屏截图可见）。
   这里显式压回去。 */
.xray-legend[hidden] { display: none !important; }
.lg { width: 10px; height: 10px; border-radius: 3px; border: 1px solid; display: inline-block; }
.lg--cam { background: rgba(180,140,255,.35); border-color: rgba(180,140,255,.8); }
.lg--board { background: rgba(255,190,90,.35); border-color: rgba(255,190,90,.85); }
.lg--battery { background: rgba(120,255,170,.32); border-color: rgba(120,255,170,.85); }
.lg--coil { background: rgba(255,120,160,.30); border-color: rgba(255,120,160,.8); }

/* ---------- 本机实拍贴图（v24-q7） ----------
   有本机正面/背面实拍时，把照片直接铺在那两个面上，程序化的屏 / 摄像头 / logo 全部让位。
   为什么只贴正、背两面：
     · 这两个面在任何角度下占屏 ≥85% 的像素，观感 90% 来自它们；
     · 左/右/顶/底是 22–26px 的窄条，而那四张照片是按 35–40° 斜视拍的（见拍摄清单），
       把斜视图裁成窄条贴上去会得到一张被拉长的「斜边」，比纯色中框更假。
   弧度与接缝不靠贴图解决，靠这三件事：
     ① 圆角裁剪：--r-xl(24px) 对 232px 宽的机身是 10.3%，比真机圆角（≈8–9%）略大，
        所以照片四角那一点背景灰会自动被裁掉，不会在角上留四块灰楔子；
     ② 只在两个平面取图，弧面（中框薄片）继续用 --frame 渐变 —— 真机弧面在任何照片里
        都是渐变+高光，贴图必然拉伸，这是所有商品 3D 的通行做法；
     ③ 面与中框之间留 1px 内阴影，把平面照片「压」进机身，缝隙不会跳色。 */
.device.is-tex-front .face--front {
  padding: 0;
  background: #05060a var(--tex-front) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32), inset 0 0 3px 1px rgba(0,0,0,.30);
}
.device.is-tex-front .screen { display: none; }

.device.is-tex-back .face--back {
  background: #0b0d10 var(--tex-back) center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.32), inset 0 0 3px 1px rgba(0,0,0,.30);
}
.device.is-tex-back .cam,
.device.is-tex-back .logo { display: none; }

/* X 光片贴到透视层：真图本身就是这台机器的剖面，比四个色块准。
   有真图时不再叠色块，否则两套结构线互相打架。 */
.device.is-tex-xray.is-xray .inner {
  background: #05070a var(--tex-xray) center / cover no-repeat;
}
.device.is-tex-xray.is-xray .inner__part { display: none; }

/* ---------- 划痕热点 ---------- */
/* 触控尺寸刻意保持 20×20，不提到 44：
   这颗点标的是「划痕就在这一处」——它本身就是位置证据，放大到 44px 会盖住它指的那条划痕，
   而且相邻两处瑕疵（边框 8mm 内两个磕碰）会叠在一起，点哪个都说不准。
   同一个信息文字版就在下面的划痕面板里（位置、长度、什么光线下看得见），
   键盘/读屏用户走的是文字那条路，所以这里不计入主触控目标。 */
.scratch {
  position: absolute; width: 20px; height: 20px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 1.5px solid #ffd166; background: rgba(255, 209, 102, .22);
  cursor: pointer; opacity: 0; transition: opacity var(--dur-base) ease, transform var(--dur-base) ease;
  padding: 0;
}
.scratch::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #ffd166;
}
.scratch.is-on { opacity: 1; }
.scratch:hover { transform: scale(1.18); }
.is-xray .scratch { opacity: 0 !important; }

/* ---------- 控件 ---------- */
.stage__shadow {
  width: 58%; height: 16px; margin: -16px auto 8px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.34), rgba(0,0,0,0) 70%);
  filter: blur(4px); pointer-events: none;
}
.stage__hint { margin: 2px 0 0; font-size: 13px; color: var(--ink-secondary); text-align: center; }
/* 4×2 而不是 flex-wrap：8 个按钮 wrap 出来是 7+1，第二行孤零零一个「X 光透视」
   （原样见 2026-10-21 首屏截图），看起来像没排完。等分成 4 列就整齐了。 */
.stage__ctrls {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; justify-content: center; margin-top: 10px; width: 100%; max-width: 420px;
}
.ctrl {
  padding: 8px 6px; min-height: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--divider); background: var(--card); color: var(--ink-primary);
  font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
.ctrl[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-bg-soft);
  color: var(--brand-strong); font-weight: 600; }

/* ---------- 棚拍柔光（跟着旋转走） ----------
   为什么加：机身原来是一块纯色渐变，转到哪儿高光都长在同一条线上，
   眼睛会读成「一张贴图在转」。真机是玻璃，光源固定、机身转，高光会扫过。
   --lx / --ly 由 JS 在每帧 render 里按 yaw/pitch 算出来。
   为什么不用 mix-blend-mode:screen —— preserve-3d 容器里加混合模式会让
   Safari 把 3D 上下文打平，手机会突然变成一张纸；只用普通半透明白。
   贴了实拍之后这层依然保留：它模拟的是玻璃反光，压在照片上正好。 */
.face--front::before,
.face--back::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(52% 40% at var(--lx, 32%) var(--ly, 20%),
      rgba(255,255,255,.15), rgba(255,255,255,.04) 48%, transparent 74%);
}
/* 夜间把高光压一半：深色玻璃上 .24 的白斑会糊成一块雾 */
:root[data-theme="night"] .face--front::before,
:root[data-theme="night"] .face--back::before { opacity: .55; }

/* ---------- 近距离查看入口 ---------- */
.stage__viewport { position: relative; }
.stage__zoom {
  position: absolute; right: 6px; bottom: 4px; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--divider); background: var(--card);
  color: var(--ink-secondary); font-size: 17px; line-height: 1; font-family: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,.10);
  -webkit-tap-highlight-color: transparent;
}
.stage__zoom:active { transform: scale(.94); }

/* ---------- 近距离查看（沉浸模式） ----------
   观感对齐 iOS 的 AR 快速查看：深色无干扰背景、机身悬浮、可转可凑近。
   为什么不新开一层 dialog：dialog 要把 3D 节点搬进去再搬回来，
   旋转状态、事件监听、CSS 变量都要跟着搬；这里只给 .stage 换一套定位，
   DOM 一个节点都不动，退出即还原。
   为什么背景是深灰而不是纯黑：纯黑上金属中框的边缘会消失（夜间已经踩过一次，
   见上面 1px 亮边那条）；#2b2f36→#0a0b0d 的径向渐变留了一层「棚拍幕布」。 */
.stage.is-immersive {
  position: fixed; inset: 0; z-index: 90;
  height: 100vh; height: 100dvh; min-height: 0;
  padding: max(10px, env(safe-area-inset-top, 0px)) 14px max(16px, env(safe-area-inset-bottom, 0px));
  justify-content: space-between; border-radius: 0; overflow: hidden;
  background: radial-gradient(115% 78% at 50% 34%, #2b2f36 0%, #191c21 44%, #0a0b0d 100%);
  /* 全屏都是 3D，纵向手势也该转手机；不在这一层拦，双指缩放会被浏览器吃掉 */
  touch-action: none;
  animation: imm-in .22s ease-out;
}
@keyframes imm-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .stage.is-immersive { animation: none; }
}

/* 沉浸时把「会打架的东西」全部让位：视角按钮、提示、图例、橙色球、放大入口，
   以及右上那颗「实拍 n/6」—— 它在这个模式里点了会退出并跳走，留着只会把顶部挤爆
   （实测 390 屏上三个胶囊并排会溢出，「退出」被裁到屏幕外）。 */
.stage.is-immersive .stage__ctrls,
.stage.is-immersive .stage__hint,
.stage.is-immersive .xray-legend,
.stage.is-immersive .stage__zoom,
.stage.is-immersive .stage__shots,
.stage.is-immersive .ud-ball { display: none; }

/* 例外：透视开着的时候图例必须留着。
   沉浸层里没有「X 光透视」按钮（它属于 .stage__ctrls，一起被藏了），
   但透视状态是会带进来的 —— 上面一条把图例也藏了，就会出现
   「四个彩色方块悬在机身上，没有任何一个字解释它们是什么」。
   :not([hidden]) 的优先级高于上面那条（多一个属性选择器），
   所以只在 JS 把 hidden 摘掉（= 透视开着）时才生效。 */
.stage.is-immersive .xray-legend:not([hidden]) {
  display: flex; margin: 4px 0 0; flex: 0 0 auto;
  color: rgba(255,255,255,.72);
}

.stage.is-immersive .stage__top {
  position: absolute; top: max(10px, env(safe-area-inset-top, 0px));
  left: 14px; right: 14px; z-index: 3;
  /* 必须把 width:100% 去掉：绝对定位下 left/right/width 三个都给时，
     浏览器按「width 优先」处理，right 被忽略 —— 结果「退出」按钮溢出屏幕 12px
     （实测 right=402，视口 390）。设成 auto 才让 left+right 一起生效。 */
  width: auto;
}
/* 深底上原来的卡片色会变成一块亮斑，改成半透明白 + 模糊 */
.stage.is-immersive .stage__badge,
.stage.is-immersive .stage__shots {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.stage.is-immersive .stage__shots b { color: #fff; }

.imm-close {
  display: none; align-items: center; gap: 6px;
  padding: 8px 14px; min-height: 44px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10);
  color: #fff; font-size: 13px; font-family: inherit; cursor: pointer;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.stage.is-immersive .imm-close { display: inline-flex; }

.stage.is-immersive .stage__viewport {
  flex: 1 1 auto; height: auto; min-height: 0; width: 100%;
}
/* 全屏时按宽度取机身：clamp 让 360 屏不溢出、430 屏不显得空 */
.stage.is-immersive .device {
  --w: clamp(196px, 58vw, 262px);
  --h: calc(var(--w) * 2.026);
  --d: calc(var(--w) * .112);
}
/* 接触阴影：沉浸模式要更实一点，否则机身像漂在空中 */
.stage.is-immersive .stage__shadow {
  width: 46%; height: 24px; margin: -20px auto 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.62), rgba(0,0,0,0) 72%);
  filter: blur(7px);
}

.imm-ui { display: none; }
.stage.is-immersive .imm-ui {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-bottom: 2px;
}
.imm-tip { margin: 0; font-size: 12px; color: rgba(255,255,255,.60); }
.imm-row { display: flex; align-items: center; gap: 14px; }
.imm-reset {
  padding: 8px 18px; min-height: 44px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10);
  color: #fff; font-size: 13px; font-family: inherit; cursor: pointer;
}
.imm-reset:active { background: rgba(255,255,255,.18); }
.imm-zoom {
  font-size: 13px; color: rgba(255,255,255,.72); font-variant-numeric: tabular-nums;
  min-width: 3.6em; text-align: left;
}
/* 沉浸时锁页面滚动。用 class 而不是直接写 body.style.overflow：
   退出时把原值还原，比记一个 inline style 更稳（主题切换不会覆盖它）。 */
html.is-imm-lock, html.is-imm-lock body { overflow: hidden; }


/* ---------- 左下角「详细」球 ----------
   爱马仕橙：底色 #C94A06 而不是品牌亮橙 #E85A0C。
   量过对比度：白字 on #E85A0C 只有 3.56:1，13~15px 白字不达 WCAG 1.4.3 的 4.5:1；
   #C94A06 是 4.70:1，同样一眼认成「爱马仕橙」，字却看得清。
   位置 left:14 而不是居中：390 屏上 3D 机身占 109~281px，14~72px 是空白区，
   在那儿按下横滑转不到机身、竖滑照常翻页，所以不抢 3D 的手势，也不压 8 个按钮。 */
.ud-ball {
  position: fixed; left: 14px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 40; width: 54px; height: 54px; padding: 0;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: #C94A06; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26),
              inset 0 -2px 6px rgba(0,0,0,.18),
              0 6px 18px rgba(201,74,6,.34);
  font-family: inherit; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity .22s ease, transform .22s ease;
}
.ud-ball__txt { font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: .06em; }
.ud-ball__arrow { font-size: 11px; line-height: 1; opacity: .92; }
.ud-ball:active { transform: scale(.94); }
.ud-ball.is-out { opacity: 0; transform: translateY(10px) scale(.9); pointer-events: none; }
@media (max-width: 767px) { .ud-ball { display: flex; } }

/* ---------- 价格与行动 ---------- */
/* base.css:278 有一条全局 [id]{scroll-margin-top:66px}，是给首页那个固定导航条留的补偿。
   本页没有固定导航（顶部条是普通流内元素），66px 会让「详细」球点下去后
   落在价格上方 66px 的空白处（实测 scrollY 798 而不是 864）。此处按本页实际覆盖。
   v24-q6：#shots 同理 —— 首屏右上「实拍 n/6」跳六面实拍时，66px 会把它推到
   上一节「价格/行动」的尾巴上，顾客以为跳错地方。两个落点一起按 8px 覆盖。 */
#buyHead, #shots { scroll-margin-top: 8px; }

/* 跳转后焦点落在 section 上（SC 2.4.3），它不是可交互控件，不该出现焦点环。
   键盘用户按 Tab 时焦点会从这里继续往后走，说明位置已经对了。 */
#shots:focus { outline: none; }

.buy-head h1 { margin: 8px 0 8px; font-size: 26px; line-height: 1.3; letter-spacing: -.01em; }
.buy-sub { color: var(--ink-secondary); font-size: 14px; margin: 0 0 16px; }
.buy-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.buy-price b { font-size: 32px; line-height: 1.1; color: var(--price); letter-spacing: -.02em; }
.buy-price b small { font-size: 15px; font-weight: 600; margin-left: 4px; letter-spacing: 0; }
.buy-price__tag {
  font-size: 12px; padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--brand-border); background: var(--brand-bg-soft);
  color: var(--brand-strong); font-weight: 600;
}
/* 三条定价依据：不给数字也要讲清「凭什么算这个价」 */
.price-dial {
  list-style: none; margin: 0 0 8px; padding: 10px 12px;
  border: 1px solid var(--divider); border-radius: var(--r-md);
  background: var(--bg-elevated); font-size: 13px; line-height: 1.75; color: var(--ink-primary);
}
.price-dial li { display: flex; gap: 8px; }
.price-dial li + li { margin-top: 2px; }
.price-dial i {
  flex: 0 0 auto; font-style: normal; font-weight: 700; color: var(--brand-strong);
  min-width: 2.6em;
}
.price-note { font-size: 13px; line-height: 1.7; color: var(--ink-secondary); margin: 0 0 14px; max-width: 36em; }
.buy-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 16px; }
.buy-meta i { font-style: normal; color: var(--divider); }

.buy-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.buy-tags span {
  font-size: 13px; padding: 4px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--brand-border); background: var(--brand-bg-soft); color: var(--brand-strong);
}
.buy-actions { display: grid; gap: 8px; }
.buy-actions a, .buy-actions button {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  text-align: center; padding: 13px; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
}
/* V23-02 主按钮对比度（2026-10-21 实测定案）
   原来直接用 --brand-grad (#FF8A3D→#C2410C) + 白字，逐像素采样最亮端 luminance 0.393，
   白字只有 2.37:1，远低于 WCAG 2.2 SC 1.4.3 的 4.5:1 —— 这是这页唯一「看不清」的硬伤。
   压深到 #C2410C→#9E3606：最亮端就是 5.18:1（与页尾返回链接同一个橙），暗端更高。
   为什么不改成深色字：深色字放在亮橙上确实能过（约 7:1），但全站主按钮都是白字，
   单页翻过来会像另一个产品；为什么不用描边/阴影：那是拿效果掩盖对比度不足，评审一眼能看出来。 */
.buy-actions .primary {
  background: linear-gradient(135deg, #C2410C, #9E3606);
  color: #fff;
  box-shadow: 0 6px 18px rgba(194, 65, 12, .22);
}
.buy-actions .ghost { background: var(--card); color: var(--ink-primary); border: 1px solid var(--divider); }

/* ---------- 关键数据：成色分级 + 电池健康（V25） ---------- */
/* 移动端单列、桌面两列（成色卡内容多给宽一点）。两卡都是「有数据亮、没数据兜底」，
   不编字母、不编数字 —— 兜底文案见 cond-empty。 */
.cond-cards {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin: 4px 0 16px;
}
@media (min-width: 560px) {
  .cond-cards { grid-template-columns: 1.25fr 1fr; align-items: stretch; }
}
.cond-card {
  padding: 12px 14px; border: 1px solid var(--divider);
  border-radius: var(--r-md); background: var(--bg-elevated);
}
.cond-card__head { margin-bottom: 8px; }
.cond-card__title {
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink-secondary);
}
/* 三维字母行：字母 + 维度名 + 一句可复核理由 */
.cond-rows { list-style: none; margin: 0; padding: 0; }
.cond-rows li {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--divider);
}
.cond-rows li:first-child { border-top: 0; padding-top: 0; }
.cond-g {
  flex: 0 0 auto; width: 28px; height: 28px; line-height: 26px; text-align: center;
  border-radius: 8px; font-size: 15px; font-weight: 800; margin-top: 1px;
  background: var(--card); border: 1px solid var(--divider);
}
.cond-g--a { color: var(--success); }
.cond-g--b { color: var(--brand-strong); }
.cond-g--c { color: var(--price); }
.cond-why { font-size: 13px; line-height: 1.6; color: var(--ink-primary); }
.cond-why em {
  display: block; font-style: normal; font-weight: 700;
  color: var(--ink-secondary); font-size: 12px; margin-bottom: 1px;
}
/* 拆修徽标：二值，不掺进 A/B/C 字母 */
.cond-repair {
  display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; border: 1px solid;
}
.cond-repair--ok { color: var(--success); border-color: var(--success); }
.cond-repair--warn { color: var(--price); border-color: var(--price); }
/* 兜底空态 */
.cond-empty { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-primary); line-height: 1.5; }
.cond-empty__sub { display: block; font-size: 12px; font-weight: 400; color: var(--ink-secondary); margin-top: 2px; }
/* 电池数字 */
.batt-num {
  display: block; font-size: 34px; line-height: 1; font-weight: 800;
  color: var(--brand-strong); letter-spacing: -.02em;
}
.batt-sub { display: block; font-size: 13px; color: var(--ink-secondary); margin-top: 8px; }

/* ---------- 服务保障卡（V25） ---------- */
.trust-card {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px;
}
@media (min-width: 560px) {
  .trust-card { grid-template-columns: repeat(4, 1fr); }
}
.trust-item {
  display: flex; flex-direction: column; gap: 5px; padding: 12px 10px;
  border: 1px solid var(--divider); border-radius: var(--r-md); background: var(--bg-elevated);
}
.trust-item__ic {
  width: 22px; height: 22px; stroke: var(--brand-strong); fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.trust-item__t { font-size: 14px; font-weight: 700; color: var(--ink-primary); }
.trust-item__d { font-size: 12px; line-height: 1.55; color: var(--ink-secondary); }
/* 「查看完整质保条款」：四格之后的通栏一行（grid-column:1/-1），
   边框与圆角沿用 .trust-item 那一套，视觉上仍是同一张卡里的一行，不是新控件。
   44px 是因为它在手机上就是一行 13px 文字，不撑开根本点不着。 */
.trust-more {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 12px; border-radius: var(--r-md);
  border: 1px solid var(--divider); background: var(--card);
  color: var(--brand-strong); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .16s ease, background .16s ease;
}
.trust-more:hover { border-color: var(--brand-border); background: var(--bg-elevated); }
.trust-more:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }

/* ---------- 买前常见问题（V25） ---------- */
.faq-list { border-top: 1px solid var(--divider); max-width: 720px; }
.faq-item { border-bottom: 1px solid var(--divider); }
.faq-item summary {
  position: relative; list-style: none; cursor: pointer;
  display: flex; align-items: center; min-height: 44px;
  padding: 14px 28px 14px 2px; font-size: 15px; font-weight: 600; color: var(--ink-primary);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--ink-secondary); border-bottom: 2px solid var(--ink-secondary);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -1px; }
.faq-answer { padding: 0 2px 14px; font-size: 14px; line-height: 1.75; color: var(--ink-secondary); }
.faq-answer ul { margin: 8px 0 0; padding-left: 18px; }
.faq-answer li { margin: 3px 0; }

/* ---------- 划痕说明面板 ---------- */
.scratch-panel {
  margin-top: 16px; padding: 12px 16px; border-radius: var(--r-md);
  border: 1px dashed var(--divider); background: var(--bg-elevated);
  font-size: var(--fs-sm); line-height: 1.7; color: var(--ink-secondary);
}
.scratch-panel b { color: var(--ink-primary); }
.scratch-panel__photo {
  margin-top: 8px; border-radius: var(--r-md); overflow: hidden; background: #0d0d0f;
}
.scratch-panel__photo img { display: block; width: 100%; height: auto; }
.scratch-empty { font-size: 13px; color: var(--ink-secondary); }

/* ---------- 通用分节 ---------- */
.ud-sec { margin-top: 36px; }
.ud-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ud-sec__meta { font-size: 12px; color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.section-title { font-size: 17px; margin: 32px 0 8px; }
.ud-sec .section-title { margin: 0 0 6px; }
/* V23-03 行长收口：13px 正文在 680px 宽下是 52 个汉字/行，超出 CJK 阅读建议（约 40 字）。
   36em = 468px = 36 字/行，桌面端右侧留白是刻意的，不是没排满。 */
.section-sub { font-size: var(--fs-sm); color: var(--ink-secondary); margin: 0 0 12px; max-width: 36em; line-height: 1.75; }

/* ---------- 六面实拍 ---------- */
.shot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .shot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.shot {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  aspect-ratio: 3 / 4; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--divider); background: var(--bg-elevated);
  font-family: inherit; color: var(--ink-secondary);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  border: 1px dashed var(--divider); border-radius: var(--r-md);
}
.shot__ph b { font-size: 13px; font-weight: 600; color: var(--ink-primary); }
.shot__ph span { font-size: 11px; }
.shot[data-empty="1"] { cursor: default; }
.shot__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 6px;
  font-size: 11px; text-align: left; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
}

/* ---------- 检测记录（分层） ---------- */
.insp__track {
  height: 4px; border-radius: 2px; background: var(--divider);
  overflow: hidden; margin: 4px 0 12px;
}
.insp__track b { display: block; height: 100%; width: 0; background: var(--brand-grad); transition: width .4s ease; }

.insp__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
.insp__item {
  display: grid; grid-template-columns: 5.5em 1fr auto; gap: 10px; align-items: start;
  padding: 10px 2px; border-bottom: 1px solid var(--divider); font-size: 14px;
}
.insp__k { color: var(--ink-secondary); }
.insp__v { color: var(--ink-primary); }
.insp__v em { display: block; font-style: normal; font-size: 12px; color: var(--ink-secondary); margin-top: 2px; line-height: 1.5; }
.insp__chip {
  font-size: 11px; padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap;
  border: 1px solid; line-height: 1.5;
}
.insp__chip--ok { color: #1f7a45; border-color: rgba(31,122,69,.35); background: rgba(31,122,69,.08); }
.insp__chip--wait { color: var(--ink-secondary); border-color: var(--divider); background: var(--bg-elevated); }
/* 夜间：绿色系在深底上要提亮，否则 #1f7a45 on #17181c 只有 2:1 出头 */
[data-theme="night"] .insp__chip--ok { color: #6fd39a; border-color: rgba(111,211,154,.35); background: rgba(111,211,154,.10); }

.insp__note { font-size: 13px; line-height: 1.75; color: var(--ink-secondary); margin: 12px 0 0; max-width: 36em; }
.insp__note b { color: var(--ink-primary); }

/* ---------- 细节实拍（标签栏 + 证据条目） ----------
   位置：六面实拍与检测记录之间。六面证明「外表」，这块证明「用起来什么毛病」。
   为什么是标签而不是长列表：四组的浏览动机不同 —— 怕屏幕有点的只看「屏幕」，
   关心拍照的只看「摄像头」。摊平成长列表，顾客要滚 20 条才找到自己那项。

   标签按钮：高 44px（2.5.8 的 24×24 是底线，44 是 iOS HIG / 2.5.5 的拇指尺寸；
   这五个胶囊在手机上就是主筛选器，34px 时实测经常点偏），胶囊形，
   选中态用实心橙底 + 白字（--brand-strong 对白实测 5.18:1，达标）；
   未选中态走 elevated 底 + 1px 描边，不靠颜色单一维度区分（还有 aria-selected 与字重差）。 */
.det__tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding-bottom: 2px;
}
.det__tabs::-webkit-scrollbar { display: none; }
.det__tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--divider); background: var(--bg-elevated);
  color: var(--ink-secondary); font: inherit; font-size: 13.5px; font-weight: 500;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.det__tab:hover { border-color: var(--brand-strong); color: var(--ink-primary); }
.det__tab[aria-selected="true"] {
  background: var(--brand-strong); border-color: var(--brand-strong);
  color: #fff; font-weight: 600;
}
.det__tabNum {
  font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 999px;
  background: rgba(0,0,0,.07); color: inherit;
}
.det__tab[aria-selected="true"] .det__tabNum { background: rgba(255,255,255,.24); }
[data-theme="night"] .det__tabNum { background: rgba(255,255,255,.10); }
[data-theme="night"] .det__tab[aria-selected="true"] .det__tabNum { background: rgba(0,0,0,.22); }

.det__panel { margin-top: 12px; }
.det__panel:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 4px; border-radius: 10px; }
.det__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.det__item {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start;
  padding: 12px; border: 1px solid var(--divider); border-radius: 12px;
  background: var(--bg-elevated);
}
/* 没有配图的条目：单列，文字占满，不留一个空方框 */
.det__item:not(:has(.det__thumb)) { grid-template-columns: 1fr; }

.det__thumb {
  position: relative;
  width: 96px; height: 96px; padding: 0; border: 0; border-radius: 10px;
  overflow: hidden; cursor: zoom-in; background: var(--divider);
  display: block; line-height: 0;
}
/* 可放大的角标：只有 cursor:zoom-in 的话，手机上没有 hover，顾客不知道这张能点。
   96px 的缩略图看不清白点这类细节，必须让人一眼看出「点开有大图」。 */
.det__thumb::after {
  content: '⤢'; position: absolute; right: 4px; bottom: 4px;
  width: 18px; height: 18px; border-radius: 5px;
  display: grid; place-items: center; font-size: 11px; line-height: 1;
  color: #fff; background: rgba(0,0,0,.52); backdrop-filter: blur(2px);
}
.det__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.det__thumb:hover img { opacity: .88; }

.det__body { min-width: 0; }
.det__t {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-primary); margin: 0; line-height: 1.4;
}
.det__v {
  font-size: 13px; line-height: 1.7; color: var(--ink-secondary);
  margin: 5px 0 0; overflow-wrap: anywhere;
}
.det__meta { font-size: 12px; line-height: 1.6; color: var(--ink-secondary); margin: 4px 0 0; }

/* 状态徽标：正常/轻微/明显/未测。四种状态四组色 + 四组文字，不靠颜色单一维度。
   对 #fbfbfd 底实测：#1f7a45 5.02:1、#8a5a00 5.16:1、#a8261b 6.34:1 均过 4.5。 */
.det__badge {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.det__badge--ok       { color: #1f7a45; background: rgba(31,122,69,.09);  border-color: rgba(31,122,69,.32); }
.det__badge--minor    { color: #8a5a00; background: rgba(138,90,0,.10);   border-color: rgba(138,90,0,.32); }
.det__badge--bad      { color: #a8261b; background: rgba(168,38,27,.09);  border-color: rgba(168,38,27,.32); }
.det__badge--untested { color: var(--ink-secondary); background: var(--bg-dark); border-color: var(--divider); }

[data-theme="night"] .det__badge--ok       { color: #6fd39a; background: rgba(111,211,154,.10); border-color: rgba(111,211,154,.34); }
[data-theme="night"] .det__badge--minor    { color: #e6c069; background: rgba(230,192,105,.10); border-color: rgba(230,192,105,.34); }
[data-theme="night"] .det__badge--bad      { color: #ff9c91; background: rgba(255,156,145,.10); border-color: rgba(255,156,145,.34); }
[data-theme="night"] .det__badge--untested { color: var(--ink-secondary); background: var(--bg-dark); border-color: var(--divider); }

/* —— 空组：不是空白，是「到店会查哪几项」——
   虚线边框是刻意的：一眼能看出「这块位置留着、内容还没填」，
   跟已填的实线卡片分开。不写「暂无信息」——那句话只说明没有图，
   不说明这家店会查什么，顾客看完还是不知道要不要打电话。 */
.det__empty {
  max-width: 720px; padding: 14px 16px 16px;
  border: 1px dashed var(--divider); border-radius: 12px; background: var(--bg-elevated);
}
.det__emptyT { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-primary); line-height: 1.4; }
.det__emptyL { margin: 8px 0 0; font-size: 13px; color: var(--ink-secondary); line-height: 1.6; }
.det__need { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.det__need li {
  position: relative; padding-left: 14px;
  font-size: 13px; line-height: 1.7; color: var(--ink-secondary);
}
.det__need li::before {
  content: ''; position: absolute; left: 3px; top: .74em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--brand-strong);
}
.det__emptyA { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--ink-secondary); }
.det__emptyA a {
  color: var(--brand-strong); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.det__emptyA a:hover { opacity: .82; }

/* 还没填的标签：虚线，跟空组卡片同一套语言。放一个「0」等于在标签上写「这页没做完」。 */
.det__tab--empty { border-style: dashed; }

/* 「本机出图」：这张图是这台手机拍出来的样张，不是拍这台手机 —— 两种证据不能混。
   用描边不用实底：它跟「正常 / 轻微」那组状态徽标不是一类信息。 */
.det__src {
  flex: 0 0 auto; font-size: 11px; font-weight: 600; line-height: 1;
  padding: 4px 7px; border-radius: 999px;
  color: var(--brand-strong); border: 1px solid currentColor; background: transparent;
}

/* 瑕疵位置：顾客对着一张大图找不到你说的那个点在哪儿，位置就是结论的一半。
   放在标题行里，跟状态徽标同排。 */
.det__loc {
  flex: 0 0 auto; font-size: 11.5px; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  color: var(--ink-secondary); background: var(--bg-dark);
  border: 1px solid var(--divider); white-space: nowrap;
}

/* 多图：通栏三格（摄像头三颗镜头各一张样张这种）。单图仍走左栏 96px 缩略图，
   多图塞进 96px 会变成三张 30px 的小方块，什么都看不清。
   选择器写成 .det__item.det__item--multi 是必须的：≤420px 那条媒体查询里的
   `.det__item { grid-template-columns: 84px 1fr }` 在后面，同权重会把单列覆盖回去，
   结果是标题被挤进 84px 一列（实测踩过：标题竖排成一列字，图跑到右边）。 */
.det__item.det__item--multi { grid-template-columns: minmax(0, 1fr); }
.det__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; grid-column: 1 / -1; }
.det__shots .det__thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* 宽屏不做两列：试过 1fr 1fr，同行的两张卡片会因为一张有图一张没图而高度不齐，
   第二行被顶下去形成瀑布，右边空一块。检测报告本来就该从上往下读 ——
   改为单列 + 限宽 720px，视线只走一条线，跟检测记录那张表一致。 */
@media (min-width: 860px) {
  .det__list { max-width: 720px; }
}

@media (max-width: 420px) {
  .det__item { grid-template-columns: 84px 1fr; gap: 12px; padding: 10px; }
  .det__thumb { width: 84px; height: 84px; }
  .det__empty { padding: 12px 14px 14px; }
  /* 390 宽放五个胶囊会撑出横向滚动，最后一两组被切在屏幕外，顾客不知道还能往右滑。
     改成 13px + 窄内边距，五个并排刚好放得下；数字角标出现时再折行。 */
  .det__tabs { gap: 6px; }
  .det__tab { padding: 0 11px; font-size: 13px; gap: 5px; }
}

/* ---------- 参数表 ---------- */
.spec-table {
  width: 100%; max-width: 720px; border-collapse: collapse; margin-top: 4px; font-size: var(--fs-sm);
}
.spec-table th, .spec-table td {
  text-align: left; padding: 9px 4px; border-bottom: 1px solid var(--divider); vertical-align: top;
}
.spec-table th { width: 30%; color: var(--ink-secondary); font-weight: 500; }
.spec-table td { color: var(--ink-primary); }

.back-link {
  display: inline-flex; align-items: center; min-height: 44px; margin: 20px 0 0;
  font-size: var(--fs-sm); color: var(--brand-strong); text-decoration: none; font-weight: 600;
}

/* ---------- 灯箱 ---------- */
.ud-lb {
  padding: 0; border: 0; background: transparent; max-width: min(92vw, 720px); max-height: 92vh;
}
.ud-lb::backdrop { background: rgba(0,0,0,.82); }
.ud-lb img { display: block; max-width: 100%; max-height: 84vh; margin: 0 auto; border-radius: 10px; }
.ud-lb__cap { margin: 8px 0 0; text-align: center; font-size: 13px; color: #f2f2f4; }
.ud-lb__x {
  position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.45); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .ud-ball, .insp__track b, .ctrl, .face { transition: none !important; }
}

/* ---------- 同类在售（V23-01）---------- */
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rel-card {
  position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 12px; border: 1px solid var(--divider); border-radius: var(--r-md);
  background: var(--card); text-decoration: none; color: var(--ink-primary);
  transition: border-color .18s ease, transform .18s ease;
}
.rel-card:hover { border-color: var(--brand-border); transform: translateY(-1px); }
.rel-card__name { font-weight: 700; font-size: 15px; line-height: 1.35; }
.rel-card__tag { font-size: 12px; color: var(--ink-secondary); }
.rel-card__price { margin-top: 6px; font-size: 16px; font-weight: 700; color: var(--price); }
.rel-card__flag {
  position: absolute; top: 10px; right: 10px; font-size: 11px; padding: 2px 6px;
  border-radius: var(--r-pill); border: 1px solid var(--divider);
  color: var(--ink-secondary); background: var(--bg-elevated);
}
@media (max-width: 767px) {
  .rel-grid { grid-template-columns: 1fr; }
  /* 实测：行内布局下「iPhone 14 Pro 256G」被挤成两行，卡片高 83，短名字 54 —— 三张不等高。
     改回竖排后三张同高，读起来是一组而不是三条散的信息。 */
  .rel-card { flex-direction: column; align-items: stretch; gap: 3px; padding: 12px 14px; }
  .rel-card__price { margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rel-card { transition: none; }
  .rel-card:hover { transform: none; }
}

/* ---------- AR 入口（A-4） ----------
   只在 iOS + 有本机 usdz + 有封面图 三条同时成立时，由 JS 解除 hidden。
   iOS Quick Look 要求 <a rel="ar"> 里必须有一个 <img>：那张图是**过渡动画的封面**，
   不是装饰，所以必须真实存在 —— 不能用 CSS 背景图替代。
   高度 36px：比 34px 的 ctrl 按钮高一档，因为它是这一屏唯一一个「离开网页」的动作，
   值得多 2px 的存在感；但仍满足 WCAG 2.5.8 的 24×24。 */
.stage__ar { display: flex; justify-content: center; margin: 12px 0 4px; }
.stage__ar[hidden] { display: none; }
.stage__ar a {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px 0 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--divider);
  background: var(--bg-elevated);
  color: var(--ink-primary);
  font-size: 13px; font-weight: 600; line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.stage__ar img {
  width: 24px; height: 24px; border-radius: 6px;
  object-fit: cover; display: block;
}
.stage__ar a:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .stage__ar a { transition: none; } }

/* ---------- 无效 id 面板（D-1） ----------
   为什么单独一屏：这台机器已经不在列表里了，页面唯一该做的事是「说清楚 + 把人送走」，
   不是继续摆 3D、报价和检测记录。所以 JS 直接把 main 的内容整块换掉，这里只负责这一块的排版。
   用词守规矩：写「不在了」而不是「404 / 页面不存在」—— 顾客不懂也不关心状态码。 */
.gone { max-width: 640px; padding: 4px 0 32px; }
.gone__title {
  font-size: 26px; line-height: 1.3; letter-spacing: -.01em;
  margin: 24px 0 10px; color: var(--ink-primary);
}
/* JS 把焦点打到标题上（见 renderGone），但它不是可交互控件 ——
   和 #shots:focus 同一条道理：焦点框在标题上看起来像渲染坏了。
   键盘用户的下一次 Tab 会从面板里继续往后走，位置已经交代清楚了。 */
.gone__title:focus { outline: none; }
.gone__lead { font-size: 14px; line-height: 1.75; color: var(--ink-secondary); margin: 0 0 10px; max-width: 34em; }
.gone__lead--muted { font-size: 13px; }
.gone__lead b { color: var(--ink-primary); }

/* 在售清单：两列（≤560 单列）。每项都是一个 44px 高的链接 —— 这一屏的全部价值就在这几行上。 */
.gone__list {
  list-style: none; margin: 12px 0 20px; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
}
@media (max-width: 560px) { .gone__list { grid-template-columns: 1fr; } }
.gone__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 44px; padding: 11px 14px; border-radius: var(--r-md);
  border: 1px solid var(--divider); background: var(--card);
  color: var(--ink-primary); text-decoration: none;
  transition: border-color .16s ease;
}
.gone__item:hover { border-color: var(--brand-border); }
.gone__item b { font-size: 14px; font-weight: 700; }
.gone__item span { flex: 0 0 auto; font-size: 12px; color: var(--ink-secondary); }
.gone__item:focus-visible, .gone__act:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }

.gone__acts { display: grid; gap: 8px; max-width: 420px; }
.gone__act {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px;
  border-radius: var(--r-md); border: 1px solid var(--divider); background: var(--card);
  color: var(--ink-primary); font-size: 15px; font-weight: 700; text-decoration: none;
}
/* 与 .buy-actions .primary 同一套色值（白字压深橙 #C2410C→#9E3606，最亮端 5.18:1） */
.gone__act--primary {
  border: 0; color: #fff;
  background: linear-gradient(135deg, #C2410C, #9E3606);
  box-shadow: 0 6px 18px rgba(194, 65, 12, .22);
}

/* ---------- 页脚（Wave2） ----------
   本页原来没有页脚：顾客想在页脚找「质保条款」或备案信息时没有落点，
   而这两个东西恰好是决定「要不要在这家买」的最后一道信任凭据。
   只放一行：版权 + 质保说明 + 备案槽位。不做 NAP 大块 —— 本页主体是 3D 与证据，
   页脚一重就把「返回在售列表」那条主机动线压没了。 */
.ud-foot {
  max-width: 1080px; margin: 32px auto 0; padding: 16px 16px 28px;
  border-top: 1px solid var(--divider);
  color: var(--ink-secondary); font-size: var(--fs-xs); text-align: center;
}
.ud-foot__line { margin: 0; line-height: 1.9; }
.ud-foot a { color: var(--brand-strong); text-decoration: none; }
.ud-foot a:hover { text-decoration: underline; }
/* .icp-slot 的基础样式在 site.css（本页不引那个文件），这里按同一套视觉补一份：
   虚线小胶囊 = 「位置留好了、号还没下来」，与 index 页看起来是同一个东西。 */
.ud-foot .icp-slot:not(:empty) {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  border: 1px dashed var(--divider); border-radius: var(--r-sm);
  font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-secondary);
}