/* 移动端共享样式 — 舞台/手机壳/弹簧 token + 四个前台工具的全部 UI。
   被 index.html(主页) 与 AI客厅合成与采光.html 共同引用；页面私有样式留在各自 <style>。 */

/* 一镜到底：低回弹弹簧（ζ=0.85，过冲峰值 ~0.6%——有弹簧的速度感、无肉眼回弹），烘焙成 linear()。
   与 home.jsx 的 MORPH_SPRING 常量同源 —— 改其一必同改另一，否则 CSS/WAAPI 两侧手感漂移 */
:root {
  --spring-morph: linear(0, 0.022, 0.0776, 0.1538, 0.241, 0.332, 0.4219, 0.5073, 0.5862, 0.6572, 0.72, 0.7745, 0.8211, 0.8604, 0.893, 0.9198, 0.9414, 0.9586, 0.9721, 0.9825, 0.9903, 0.996, 1.0001, 1.0029, 1.0047, 1.0057, 1.0062, 1.0063, 1.0061, 1.0057, 1.0051, 1.0046, 1.004, 1.0035, 1.0029, 1.0024, 1.002, 1.0016, 1.0013, 1.001, 1.0008, 1.0006, 1.0005, 1.0003, 1.0002, 1.0002, 1.0001, 1, 1);
  --morph-dur: .62s;
  --smooth: cubic-bezier(.4, 0, .2, 1);
}
/* 品牌强调色：蓝（c0lor-ui 设计系统蓝 #0A84FF） */
html[data-theme="light"] { --accent: #0A84FF; --accent-rgb: 10, 132, 255; --accent-2: color-mix(in srgb, #0A84FF 74%, #fff); }
html, body { margin: 0; min-height: 100%; }
/* 实心（不透明）背景版本 */
html[data-theme="light"], html[data-theme="light"] body { background: #eef0f4; }
body.mag-body { overflow: auto; }
.stage { position: relative; min-height: 100vh; padding: 40px 24px 30px;
  background: linear-gradient(180deg, #f3f4f7 0%, #e7e9ef 62%, #dfe2ea 100%); }
.stage-head { text-align: center; max-width: 560px; margin: 0 auto 26px; }
.stage-head h1 { font-size: 26px; font-weight: 820; letter-spacing: -.03em; margin: 0; color: var(--ink); }
.stage-head p { color: var(--ink-2); font-size: 13.5px; line-height: 1.6; margin: 9px auto 0; max-width: 430px; }
.stage-head .tag-row { display: inline-flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.stage-head .chip { font-size: 11.5px; font-weight: 650; padding: 4px 11px; border-radius: 99px; background: rgba(120,120,135,.12); color: var(--ink-2); }
.stage-head .chip.accent { background: rgba(var(--accent-rgb),.14); color: var(--accent); }
.frames { display: flex; justify-content: center; }
.stage-foot { text-align: center; color: var(--ink-4); font-size: 12px; margin-top: 26px; }
/* 从主页进入（?from=home）时的返回入口 */
.stage-back { position: absolute; top: 18px; left: 18px; z-index: 10; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; padding: 8px 14px; border-radius: 99px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: var(--sh-sm), inset 0 1px 0 var(--glass-edge); }
.stage-back:hover { color: var(--ink); }

/* ---- phone frame ---- */
.phone { position: relative; width: 380px; height: 806px; border-radius: 54px; background: #0a0a0f; padding: 6px;
  box-shadow: 0 50px 100px -20px rgba(30,35,60,.5), 0 8px 24px rgba(30,35,60,.18), inset 0 0 0 2px rgba(255,255,255,.08), inset 0 0 0 8px #16161c; flex: 0 0 auto; }
.pscreen { position: absolute; inset: 6px; border-radius: 48px; overflow: hidden; background: var(--base); }
.island { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 112px; height: 31px; background: #000; border-radius: 99px; z-index: 60; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
/* Home Indicator：浅色 UI 下用自适应深色，避免白条在浅 sheet 上不可见 */
.phome { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 130px; height: 5px; border-radius: 99px; background: rgba(40,40,55,.5); mix-blend-mode: multiply; z-index: 60; }

/* ---- app shell ---- */
.m-app { position: absolute; inset: 0; display: flex; flex-direction: column; isolation: isolate; }
.vf-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  filter: blur(40px) saturate(1.02) brightness(1.04); transform: scale(1.25); }
.vf-bg::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,18,24,.14), transparent 20%, transparent 64%, rgba(20,18,24,.20)),
    color-mix(in srgb, var(--base) 42%, transparent); }

/* ---- header (tint over photo) — 纯渐变 tint，不用 backdrop-filter：头部下方没有内容
   滚过，backdrop 采样的只是本就 blur(40px) 的 vf-bg；且 Chromium 里 mask 罩 backdrop-filter
   会在 mask 归零处硬截止滤镜输出（顶部"断层"的来源）。::before 下探 30px 拉长淡出。 ---- */
.m-head { position: relative; z-index: 5; padding: 54px 22px 14px; display: flex; align-items: center; gap: 11px; }
.m-head::before { content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--glass-strong) 0%, color-mix(in srgb, var(--glass-strong) 55%, transparent) 55%, transparent 100%); }
/* 壳内嵌入（主页 push 进来）时的顶栏返回键 */
.mh-back { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; margin-right: -1px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); box-shadow: var(--sh-sm), inset 0 1px 0 var(--glass-edge); color: var(--ink); }
.mh-logo { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(var(--accent-rgb),.16); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.24); }
.mh-txt { min-width: 0; flex: 1; }
.mh-t { font-size: 17px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-shadow: 0 1px 2px rgba(255,255,255,.35); }
.mh-step { margin-left: auto; margin-right: 2px; font-size: 10.5px; font-weight: 750; color: var(--accent); background: rgba(var(--accent-rgb),.14); padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
.mh-step.busy { animation: pulse 1s var(--smooth) infinite; }
@keyframes pulse { 50% { opacity: .5; } }

/* 统一空间工具的三段任务进度：技术能力隐藏在“量空间 / 看大小 / 看效果”下面 */
.room-progress { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: -6px 22px 3px; }
.rp-step { position: relative; display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--ink-3); }
.rp-step:not(:last-child)::after { content: ""; position: absolute; left: calc(100% - 3px); right: -3px; top: 9px; height: 1px; background: var(--hair); }
.rp-step > span { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-size: 9.5px; font-weight: 800; background: var(--fill); color: var(--ink-3); border: 1px solid var(--hair); }
.rp-step b { font-size: 10.5px; font-weight: 720; white-space: nowrap; }
.rp-step.on { color: var(--accent); }
.rp-step.on > span { color: var(--on-accent); background: var(--accent); border-color: transparent; box-shadow: 0 2px 8px rgba(var(--accent-rgb),.28); }
.rp-step.done { color: var(--green); }
.rp-step.done > span { color: #fff; background: var(--green); border-color: transparent; }

/* ---- viewfinder / photo card（卡片在头部与 sheet 之间垂直居中，随阶段留出 sheet 空间） ---- */
.vf-wrap { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: padding-bottom var(--morph-dur) var(--spring-morph); }
.vf-wrap.p-capture, .vf-wrap.p-scan, .vf-wrap.p-gen { padding-bottom: 208px; }
.vf-wrap.p-place { padding-bottom: 392px; }
.vf-wrap.p-result { padding-bottom: 304px; }
.m-app.with-mount .vf-wrap.p-result { padding-bottom: 366px; }
.vf { position: relative; width: calc(100% - 26px); aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(20,22,40,.28), 0 4px 12px rgba(20,22,40,.14), inset 0 0 0 1px rgba(255,255,255,.18); }
.vf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; user-select: none; }
/* 结果照片 reveal 跟随扫描线：延迟 .12s、时长 .85s，末端与 scan 到底(~1.25s)对齐 */
.vf-img.res { transition: opacity .85s var(--smooth) .12s; }

/* framing guide (capture) */
.vf-guide { position: absolute; inset: 0; pointer-events: none; animation: fadein .3s var(--smooth); }
.vf-guide .gc { position: absolute; width: 22px; height: 22px; border: 2.5px solid rgba(255,255,255,.92); filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.gc.tl { top: 16px; left: 16px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; }
.gc.tr { top: 16px; right: 16px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; }
.gc.bl { bottom: 16px; left: 16px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; }
.gc.br { bottom: 16px; right: 16px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; }
.vf-hint { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(0,0,0,.42); padding: 4px 11px; border-radius: 99px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }

/* generation choreography */
.vf-flash { position: absolute; inset: 0; background: #fff; animation: flash .5s var(--smooth) both; }
@keyframes flash { 0% { opacity: 0; } 14% { opacity: .82; } 100% { opacity: 0; } }
.vf-scan { position: absolute; left: 0; right: 0; height: 34%; top: -34%;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.12) 60%, rgba(var(--accent-rgb),.9) 92%, #fff);
  box-shadow: 0 0 26px 6px rgba(var(--accent-rgb),.5); mix-blend-mode: screen; animation: scan 1.15s cubic-bezier(.5,0,.5,1) .1s both; }
/* 位移走 transform 留在合成器（room-scanline 无限循环时不再逐帧触发布局）：行程 134% 容器 ≈ 394.12% 自身高 */
@keyframes scan { 0% { transform: translateY(0); } 100% { transform: translateY(394.12%); } }
.vf-grid { position: absolute; inset: 0; opacity: 0; mix-blend-mode: overlay;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 26px 26px; animation: gridfade 1.15s var(--smooth) both; }
@keyframes gridfade { 0%,100% { opacity: 0; } 40% { opacity: .22; } }
/* bloom 位置由 JS 内联对准电视中心；点亮发生在扫描线掠过之后（delay .5s），非单调故用 ease-in-out */
.vf-bloom { position: absolute; left: 61%; top: 41%; width: 46%; height: 42%; transform: translate(-50%,-50%) scale(.6); border-radius: 50%;
  background: radial-gradient(circle, rgba(140,210,255,.85), rgba(var(--accent-rgb),.35) 45%, transparent 70%);
  mix-blend-mode: screen; filter: blur(6px); animation: bloom .8s ease-in-out .5s both; }
@keyframes bloom { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); } 55% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1); } }

/* fit badge (result) */
.fit-badge { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 7px;
  color: var(--ink); background: var(--glass-strong); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: var(--sh-card); padding: 7px 11px; border-radius: 12px; font-size: 12px;
  animation: rise .5s var(--spring-morph) both; }
.fit-badge b { font-weight: 820; }
.fit-tag { font-size: 10.5px; font-weight: 820; padding: 2px 8px; border-radius: 99px; }
.fit-tag.ok { background: var(--green-soft); color: var(--green); }
.fit-tag.warn { background: var(--amber-soft); color: var(--amber); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* AR 扫描：识别平面并把净宽、观看距离回写成可复用房间资产 */
.room-scanline { animation-duration: 1.4s; animation-iteration-count: infinite; }
.room-grid { opacity: .22; animation: roomGrid 1.4s var(--smooth) both; }
@keyframes roomGrid { from { opacity: 0; } to { opacity: .24; } }
.scan-plane { position: absolute; left: 17%; right: 9%; top: 17%; bottom: 24%; z-index: 3; border: 1.5px solid rgba(var(--accent-rgb),.82);
  background: rgba(var(--accent-rgb),.06); box-shadow: inset 0 0 28px rgba(var(--accent-rgb),.08); animation: planeLock 1.2s var(--spring-morph) both; }
.scan-plane span { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--accent), 0 2px 8px rgba(20,22,40,.22); }
.scan-plane span:nth-child(1) { left: -5px; top: -5px; }.scan-plane span:nth-child(2) { right: -5px; top: -5px; }
.scan-plane span:nth-child(3) { left: -5px; bottom: -5px; }.scan-plane span:nth-child(4) { right: -5px; bottom: -5px; }
@keyframes planeLock { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.scan-readout { position: absolute; left: 12px; bottom: 12px; z-index: 5; display: flex; gap: 6px; }
.scan-readout > span { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; border-radius: 9px;
  color: #fff; background: rgba(10,12,18,.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 9.5px; font-weight: 620; }
.scan-readout b { font-weight: 800; }

/* AR 实时电视：用现有机型样片裁出屏体，作为接入真实 USDZ/RealityKit 前的可交互模型占位 */
.ar-tv { position: absolute; z-index: 4; border: 3px solid #17171c; border-radius: 3px; background-repeat: no-repeat; background-clip: padding-box;
  box-shadow: 0 10px 20px rgba(10,10,16,.28), 0 0 0 1px rgba(255,255,255,.18); transition: left .2s var(--smooth), top .2s var(--smooth), width .2s var(--smooth), height .2s var(--smooth); animation: arPlace .5s var(--spring-morph) both; }
.ar-tv.result-preview { animation: fadein .35s var(--smooth) both; }
@keyframes arPlace { from { opacity: 0; transform: scale(.82) translateY(8px); } to { opacity: 1; transform: none; } }
.ar-glint { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(115deg, rgba(255,255,255,.18), transparent 26%, transparent 72%, rgba(255,255,255,.08)); pointer-events: none; }
.ar-handle { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 1px 5px rgba(0,0,0,.28); }
.ar-handle.tl { left: -6px; top: -6px; }.ar-handle.tr { right: -6px; top: -6px; }.ar-handle.bl { left: -6px; bottom: -6px; }.ar-handle.br { right: -6px; bottom: -6px; }
.ar-stand { position: absolute; left: 50%; bottom: -11px; width: 28%; height: 11px; transform: translateX(-50%); border-bottom: 4px solid #202025; }
.ar-stand::before { content: ""; position: absolute; left: 50%; top: -1px; width: 3px; height: 9px; transform: translateX(-50%); background: #202025; }
.room-selected-mount { position: absolute; z-index: 3; transform: translateX(-50%); pointer-events: none; color: var(--mount-color); filter: drop-shadow(0 5px 5px rgba(10,12,18,.25)); animation: fadein .35s var(--smooth) both; }
.room-selected-mount::before, .room-selected-mount::after, .room-selected-mount i { content: ""; position: absolute; display: block; background: currentColor; }
.room-selected-mount::before { left: 50%; top: 0; bottom: 15%; width: 8%; border-radius: 4px; transform: translateX(-50%); }
.room-selected-mount::after { left: 14%; right: 14%; bottom: 8%; height: 10%; border-radius: 99px; }
.room-selected-mount i { display: none; }
.room-selected-mount.easel::before { width: 6%; bottom: 0; transform: translateX(-50%) rotate(0); transform-origin: top center; }
.room-selected-mount.easel::after { display: none; }
.room-selected-mount.easel i { display: block; left: 48%; top: 0; width: 6%; height: 95%; border-radius: 4px; transform-origin: top center; }
.room-selected-mount.easel i:nth-child(1) { transform: rotate(24deg); }.room-selected-mount.easel i:nth-child(2) { transform: rotate(-24deg); }.room-selected-mount.easel i:nth-child(3) { transform: rotate(0); }
.room-selected-mount.mobile::before { width: 38%; background: linear-gradient(90deg, currentColor 0 17%, transparent 17% 83%, currentColor 83%); }
.room-selected-mount.mobile::after { left: 2%; right: 2%; bottom: 10%; height: 8%; box-shadow: -2px 5px 0 -1px currentColor, 2px 5px 0 -1px currentColor; }
.room-selected-mount.result { opacity: .82; mix-blend-mode: multiply; }
.room-mount-label { position: absolute; z-index: 6; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 9px; color: #fff; background: rgba(10,12,18,.56); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 9px; font-weight: 740; }
.room-ar-meta { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; gap: 5px; }
.room-ar-meta span { font-size: 9.5px; font-weight: 760; color: #fff; background: rgba(10,12,18,.5); padding: 4px 8px; border-radius: 8px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ar-anchor { position: absolute; right: 12px; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 6px; color: #fff;
  background: rgba(10,12,18,.52); padding: 6px 9px; border-radius: 9px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 9.5px; }
.ar-anchor span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,89,.2); }
.ar-anchor b { font-weight: 740; }

/* AR 尺寸框：等比套住真实电视，随标准尺寸档切换（所选即所见），标注实际厘米尺寸 */
.size-fp { position: absolute; z-index: 3; border: 1.5px dashed rgba(var(--accent-rgb),.9); background: rgba(var(--accent-rgb),.05); border-radius: 3px;
  transition: left .2s var(--smooth), top .2s var(--smooth), width .2s var(--smooth), height .2s var(--smooth); animation: fadein .4s var(--smooth) both; }
.size-fp.ref { border-color: rgba(var(--accent-rgb),.5); background: transparent; }
.fp-c { position: absolute; width: 9px; height: 9px; border: 2px solid var(--accent); }
.fp-c.tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.fp-c.tr { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.fp-c.bl { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.fp-c.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.fp-lbl { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 750; color: var(--on-accent);
  background: var(--accent); padding: 2px 8px; border-radius: 99px; white-space: nowrap; box-shadow: 0 2px 6px rgba(var(--accent-rgb),.4); }

/* processing pill — 从卡片底部升起，结束落下 */
.gen-pill { position: absolute; left: 50%; bottom: 12px; z-index: 6; transform: translate(-50%, 22px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: var(--sh-pop); padding: 10px 16px; border-radius: 99px; white-space: nowrap;
  transition: transform var(--morph-dur) var(--spring-morph), opacity .3s var(--smooth); }
.gen-pill.on { transform: translate(-50%, 0); opacity: 1; }
.gen-pill b { font-weight: 800; color: var(--accent); }
.gp-spin { display: grid; place-items: center; color: var(--accent); animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- bottom sheets ---- */
.sheet { position: absolute; left: 10px; right: 10px; bottom: 14px; z-index: 5; padding: 15px 15px 13px; border-radius: 28px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border); box-shadow: 0 -2px 30px rgba(20,22,40,.16), inset 0 1px 0 var(--glass-edge);
  display: flex; flex-direction: column; gap: 11px; }
.sheet-grip { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 99px; background: var(--ink-4); }

.cap-sheet { transition: transform var(--morph-dur) var(--spring-morph), opacity .3s var(--smooth); }
.cap-sheet.gone { transform: translateY(130%); opacity: 0; pointer-events: none; }
.cap-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; }
.cap-side { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-2); font-size: 11px; font-weight: 600; width: 64px; }
.cap-side small { font-size: 11px; }
.shutter { width: 72px; height: 72px; border-radius: 50%; background: transparent; display: grid; place-items: center;
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px rgba(0,0,0,.12); transition: transform .12s var(--smooth); }
.shutter span { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); box-shadow: 0 4px 14px rgba(var(--accent-rgb),.5); transition: transform .12s var(--smooth); }
.shutter:active { transform: scale(.96); }
.shutter:active span { transform: scale(.88); }
.room-start-sheet { gap: 9px; }
.room-start-copy { text-align: center; }
.room-start-copy b { color: var(--ink); font-size: 13.5px; font-weight: 790; }
.room-shutter span { display: grid; place-items: center; color: #fff; }
.room-scanning { min-height: 118px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.room-scan-title { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.room-scan-title .gp-spin { color: var(--accent); }.room-scan-title b { font-size: 13px; font-weight: 780; }
.room-scan-title em { margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 800; color: var(--accent); background: rgba(var(--accent-rgb),.12); padding: 3px 8px; border-radius: 99px; }
.room-scan-progress { height: 7px; border-radius: 99px; overflow: hidden; background: var(--track); }
.room-scan-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: roomProgress 1.5s var(--smooth) both; }
@keyframes roomProgress { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
.room-scan-stats { display: flex; justify-content: space-between; gap: 12px; font-size: 10.5px; color: var(--ink-3); }
.room-scan-stats b { color: var(--green); font-weight: 760; }

.res-sheet { transform: translateY(112%); opacity: 0; pointer-events: none;
  transition: transform var(--morph-dur) var(--spring-morph), opacity .32s var(--smooth); }
.res-sheet.on { transform: none; opacity: 1; pointer-events: auto; }

.mseg { display: flex; background: var(--track); border-radius: 13px; padding: 4px; gap: 3px; }
.mseg.big button { flex: 1; height: 38px; border-radius: 10px; font-size: 13px; font-weight: 680; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: 6px; transition: color .2s; }
.mseg.big button.on { background: var(--glass-strong); color: var(--accent); box-shadow: 0 2px 8px rgba(20,22,40,.12); }
.mchips { display: flex; gap: 7px; }
.room-locked-selection { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.room-locked-selection > span { min-width: 0; position: relative; padding: 7px 8px 7px 28px; border-radius: 11px; background: rgba(var(--accent-rgb),.09); color: var(--accent); }
.room-locked-selection svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); }
.room-locked-selection small, .room-locked-selection b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-locked-selection small { font-size: 8px; font-weight: 650; opacity: .72; }.room-locked-selection b { margin-top: 1px; font-size: 10.5px; font-weight: 780; color: var(--ink); }
.mchip { flex: 1; min-width: 0; height: 44px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--fill); color: var(--ink-2); border: 1px solid transparent; transition: all .2s var(--smooth); }
.mchip b { font-size: 12px; font-weight: 720; white-space: nowrap; }
.mchip small { font-size: 9px; opacity: .72; white-space: nowrap; }
.mchip.on { background: rgba(var(--accent-rgb),.15); color: var(--accent); border-color: rgba(var(--accent-rgb),.34); }
.fld { display: flex; flex-direction: column; gap: 9px; }
.fld-top { display: flex; align-items: baseline; justify-content: space-between; }
.fld-l { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.fld-v { font-size: 13px; font-weight: 780; color: var(--ink); }
.fld-v em { font-style: normal; font-weight: 820; margin-left: 3px; }
.fld-v em.ok { color: var(--green); } .fld-v em.warn { color: var(--amber); }
.size-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.size-options button { height: 38px; border-radius: 11px; background: var(--fill); color: var(--ink-2); font-size: 12px; font-weight: 760; border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s, transform .14s var(--spring-morph); }
.size-options button.on { color: var(--accent); background: rgba(var(--accent-rgb),.14); border-color: rgba(var(--accent-rgb),.3); box-shadow: inset 0 1px 0 var(--glass-edge); }
.size-options button:active { transform: scale(.96); }
.room-fixed-size { height: 36px; display: flex; align-items: center; justify-content: center; gap: 5px; border-radius: 11px; font-size: 10.5px; font-weight: 740; color: var(--green); background: var(--green-soft); }
/* 沙发距离（可改，视角推荐据此计算） */
.dist-row { display: flex; align-items: center; gap: 10px; }
.dist-seg { display: flex; background: var(--track); border-radius: 10px; padding: 3px; gap: 2px; }
.dist-seg button { padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 680; color: var(--ink-2); }
.dist-seg button.on { background: var(--glass-strong); color: var(--accent); box-shadow: 0 1px 4px rgba(20,22,40,.12); }
.dist-fit { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.dist-fit em { font-style: normal; font-weight: 820; margin-left: 2px; }
.dist-fit em.ok { color: var(--green); } .dist-fit em.warn { color: var(--amber); }

.ret-line { display: flex; align-items: flex-start; gap: 8px; }
.ret-k { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ink-3); flex: 0 0 auto; padding-top: 3px; }
.ret-k svg { color: var(--accent); }
.ret-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ret-chip { font-size: 10.5px; font-weight: 650; padding: 3px 9px; border-radius: 8px; background: rgba(var(--accent-rgb),.12); color: var(--accent); white-space: nowrap; }
.m-actions { display: flex; gap: 9px; }

/* 看大小 / 看效果两张 sheet：即时摆放与昂贵 AI 生成明确分层 */
.room-place-sheet, .room-result-sheet { transform: translateY(112%); opacity: 0; pointer-events: none;
  transition: transform var(--morph-dur) var(--spring-morph), opacity .32s var(--smooth); }
.room-place-sheet.on, .room-result-sheet.on { transform: none; opacity: 1; pointer-events: auto; }
.room-measures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 3px; }
.room-measures > span { min-width: 0; border-radius: 12px; padding: 7px 8px; background: var(--fill); display: flex; flex-direction: column; gap: 1px; }
.room-measures small { font-size: 9px; color: var(--ink-3); white-space: nowrap; }.room-measures b { font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.room-measures .ok { background: var(--green-soft); }.room-measures .ok b { color: var(--green); }
.room-measures .warn { background: var(--amber-soft); }.room-measures .warn b { color: var(--amber); }
.room-result-hero { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.room-result-hero > span { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--green); box-shadow: 0 4px 12px rgba(52,199,89,.28); }
.room-result-hero > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.room-result-hero b { color: var(--ink); font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-result-hero small { color: var(--ink-3); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.room-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.room-result-grid > span { border-radius: 12px; background: var(--fill); padding: 8px 9px; display: flex; flex-direction: column; gap: 1px; }
.room-result-grid small { font-size: 9.5px; font-weight: 650; color: var(--ink-3); }.room-result-grid b { color: var(--ink); font-size: 13px; font-weight: 810; }
.room-result-grid b.ok { color: var(--green); }.room-result-grid b.warn { color: var(--amber); }
.room-accessory-summary { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) 18px; gap: 9px; align-items: center; padding: 5px; border-radius: 13px; background: var(--fill); }
.room-accessory-summary img { width: 62px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 9px; }
.room-accessory-summary > div { min-width: 0; }
.room-accessory-summary small, .room-accessory-summary b, .room-accessory-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-accessory-summary small { font-size: 8.5px; color: var(--ink-3); }.room-accessory-summary b { margin-top: 1px; font-size: 11px; color: var(--ink); }.room-accessory-summary span { margin-top: 2px; font-size: 8.5px; color: var(--ink-3); }
.room-accessory-summary > i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(20,22,30,.14); box-shadow: inset 0 1px 1px rgba(255,255,255,.35); }

/* ===== 采光 · 测光 ===== */
.app-seg { display: inline-flex; background: rgba(120,120,135,.14); border-radius: 13px; padding: 4px; gap: 3px; margin-top: 16px; }
.app-seg button { height: 34px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 680; color: var(--ink-2); display: flex; align-items: center; gap: 7px; transition: color .2s; }
.app-seg button.on { background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(20,22,40,.12); }

/* 照片②图层（cap2 起淡入；结果页由 pager 切换） */
.vf-l2 { position: absolute; inset: 0; transition: opacity .55s var(--smooth); }
.vf-ph { position: absolute; inset: 0; background: linear-gradient(150deg, #3a3341, #241f2b 55%, #191521);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: rgba(255,255,255,.66); text-align: center; padding: 24px; }
.vf-ph::before { content: ""; position: absolute; inset: 10px; border: 1.5px dashed rgba(255,255,255,.22); border-radius: 14px; }
.vf-ph b { font-size: 13px; font-weight: 760; color: rgba(255,255,255,.88); }
.vf-ph small { font-size: 10.5px; line-height: 1.7; max-width: 260px; }

/* 锁曝光测光：中央测光环 + EV 实时读数 */
.meter { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; animation: fadein .25s var(--smooth); }
.meter-ring { width: 84px; height: 84px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.92); position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,.35); animation: mpulse 1s var(--smooth) infinite; }
.meter-ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,.95); }
@keyframes mpulse { 50% { transform: scale(1.07); } }
.ev-chip { position: absolute; left: 50%; top: calc(50% + 58px); transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.5); padding: 5px 13px; border-radius: 99px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }
.ev-chip b { font-variant-numeric: tabular-nums; }

/* 转身提示（覆盖取景卡） */
.turn-card { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  text-align: center; color: #fff; padding: 20px; cursor: pointer; background: rgba(16,14,20,.46);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); animation: fadein .3s var(--smooth) both; }
.turn-ic { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--accent-rgb),.92); color: #fff;
  box-shadow: 0 8px 24px rgba(var(--accent-rgb),.45); animation: turnspin 1.1s var(--spring-morph) .25s both; }
@keyframes turnspin { from { transform: rotate(-180deg); } to { transform: rotate(0); } }
.turn-t { font-size: 17px; font-weight: 800; }
.turn-s { font-size: 12px; line-height: 1.6; opacity: .86; max-width: 240px; }
.turn-s b { font-weight: 800; }
.turn-card .btn { margin-top: 4px; }

/* agent 反光源标注框（risk：hi 红 / mid 琥珀 / lo 绿） */
.abox { position: absolute; z-index: 3; border: 2px solid; border-radius: 8px; animation: apop .45s var(--spring-morph) both; }
.abox.hi { border-color: #FF5F52; background: rgba(255,69,58,.15); }
.abox.mid { border-color: #FFB340; background: rgba(255,159,10,.13); }
.abox.lo { border-color: #5BD778; background: rgba(52,199,89,.10); }
.abox-l { position: absolute; top: -10px; left: 8px; font-size: 10px; font-weight: 760; color: #fff; padding: 2px 8px; border-radius: 99px;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.28); }
.abox.hi .abox-l { background: #E8453C; } .abox.mid .abox-l { background: #E58A00; } .abox.lo .abox-l { background: #2FA84F; }
@keyframes apop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }

/* 结果页照片切换器 */
.ppager { position: absolute; left: 50%; bottom: 12px; z-index: 6; transform: translateX(-50%); display: flex; gap: 3px; padding: 4px; border-radius: 12px;
  background: rgba(20,18,26,.52); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: rise .5s var(--spring-morph) both; }
.ppager button { height: 28px; padding: 0 12px; border-radius: 9px; font-size: 11px; font-weight: 720; color: rgba(255,255,255,.75); transition: color .2s; }
.ppager button.on { background: #fff; color: #15151A; }

/* 结果面板（内容多于合成页：限高内滚） */
.vf-wrap.p-lresult { padding-bottom: 424px; }
.lres-sheet { transform: translateY(112%); opacity: 0; pointer-events: none; max-height: 402px; overflow-y: auto; gap: 10px;
  transition: transform var(--morph-dur) var(--spring-morph), opacity .32s var(--smooth); scrollbar-width: none; }
.lres-sheet::-webkit-scrollbar { display: none; }
.lres-sheet.on { transform: none; opacity: 1; pointer-events: auto; }
/* 限高+内滚下禁止 flex 压缩：否则无固定内容的量表会塌成 0 高 */
.lres-sheet > * { flex: 0 0 auto; }

.lux-top { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; }
.lux-v { font-size: 21px; font-weight: 820; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.lux-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.conf-tag { margin-left: auto; flex: 0 0 auto; font-size: 10.5px; font-weight: 800; padding: 4px 10px; border-radius: 99px; background: var(--amber-soft); color: var(--amber); }
.conf-tag.ok { background: var(--green-soft); color: var(--green); }

/* 照度 log 量表（30–3000 lx）：区间带=±半档，圆点=各时段实测 */
.lgauge { position: relative; height: 30px; margin: 0 2px; }
.lg-track { position: absolute; left: 0; right: 0; top: 4px; height: 8px; border-radius: 99px; background: var(--track); }
.lg-band { position: absolute; top: 4px; height: 8px; border-radius: 99px; background: rgba(var(--accent-rgb),.3); }
.lg-tick { position: absolute; top: 2px; height: 12px; width: 1.5px; background: var(--ink-4); }
.lg-lbl { position: absolute; top: 17px; font-size: 9.5px; font-weight: 700; color: var(--ink-3); transform: translateX(-50%); white-space: nowrap; }
.lg-dot { position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%,-50%); background: var(--accent);
  box-shadow: 0 0 0 2.5px #fff, 0 2px 6px rgba(20,22,40,.3); }

/* 时段阶梯：估算档 → 可信档 */
.slot-row { display: flex; gap: 7px; }
.slot { flex: 1; height: 42px; border-radius: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--fill); color: var(--ink-2); border: 1px solid transparent; transition: all .2s var(--smooth); }
.slot b { font-size: 12px; font-weight: 730; display: flex; align-items: center; gap: 4px; }
.slot small { font-size: 9.5px; font-variant-numeric: tabular-nums; }
.slot.done { background: rgba(var(--accent-rgb),.13); color: var(--accent); border-color: rgba(var(--accent-rgb),.3); }
.slot.busy small { animation: pulse 1s var(--smooth) infinite; }

.lsec { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 750; color: var(--ink-3); }
.gl-row { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.gl-row::-webkit-scrollbar { display: none; }
/* 只读图例（识别结果，非选项——不做按钮感/选中态），换行全显示 */
.gl-leg { display: flex; flex-wrap: wrap; gap: 3px 14px; }
.gl-it { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--ink); padding: 2px 0; }
.gl-it small { color: var(--ink-3); font-weight: 650; }
.gl-it .dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.dot.hi { background: var(--red); } .dot.mid { background: var(--amber); } .dot.lo { background: var(--green); }

/* 结论卡：抗反 × 亮度 */
.lrec { display: flex; gap: 8px; }
.lrec-card { flex: 1; border-radius: 13px; padding: 8px 12px; background: var(--fill); display: flex; flex-direction: column; gap: 1px; }
.lrec-card small { font-size: 10px; font-weight: 720; color: var(--ink-3); }
.lrec-card b { font-size: 15px; font-weight: 820; letter-spacing: -.01em; color: var(--ink); }
.lrec-card.hot { background: var(--amber-soft); } .lrec-card.hot b { color: var(--amber); }
.lrec-card.acc { background: rgba(var(--accent-rgb),.1); } .lrec-card.acc b { color: var(--accent); }
.lrec-why { font-size: 11px; color: var(--ink-2); line-height: 1.55; }
.lnote { font-size: 10px; color: var(--ink-4); line-height: 1.5; }
.mfit { display: inline-flex; align-items: center; flex: 0 0 auto; font-size: 10.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; }
.mfit.ok { background: var(--green-soft); color: var(--green); }
.mfit.warn { background: var(--amber-soft); color: var(--amber); }

/* ===== 一键验机 / 一键最佳设置：结论优先，少说明文字 ===== */
.utility-app { overflow: hidden; background: linear-gradient(180deg, #f0f3f8, #e5e9f1); }
.utility-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.inspect-bg {
  background:
    radial-gradient(circle at 18% 18%, rgba(44,172,255,.32), transparent 30%),
    radial-gradient(circle at 88% 48%, rgba(99,102,241,.22), transparent 34%),
    linear-gradient(180deg, #eef6ff, #e7ebf4 72%);
}
.setup-bg {
  background:
    radial-gradient(circle at 82% 18%, rgba(122,77,255,.3), transparent 32%),
    radial-gradient(circle at 12% 40%, rgba(10,132,255,.22), transparent 36%),
    linear-gradient(180deg, #f3f0ff, #e7eaf4 72%);
  transition: filter .25s var(--smooth);
}
.setup-bg.scene-movie { filter: hue-rotate(-10deg) saturate(.85); }
.setup-bg.scene-sport { filter: hue-rotate(70deg) saturate(1.05); }
.setup-bg.scene-day { filter: hue-rotate(145deg) saturate(.8) brightness(1.04); }
.utility-app .m-head::before { background: linear-gradient(180deg, rgba(248,250,255,.9), rgba(248,250,255,.38) 64%, transparent); }
.utility-stage { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.utility-sheet { transition: transform var(--morph-dur) var(--spring-morph), opacity .28s var(--smooth); }
.utility-app .mh-back { width: 44px; height: 44px; margin-left: -6px; }
.utility-app .btn:not(.sm) { min-height: 44px; }
.utility-verdict { display: flex; align-items: center; gap: 10px; min-height: 42px; }
.utility-verdict > span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--green); box-shadow: 0 5px 14px rgba(52,199,89,.28); }
.utility-verdict > b { color: var(--ink); font-size: 16px; font-weight: 830; letter-spacing: -.02em; }
.utility-app button { touch-action: manipulation; }
.utility-app button:focus-visible { outline: 3px solid rgba(var(--accent-rgb),.42); outline-offset: 2px; }

/* 验机扫描线（位移走 transform 留在合成器：高 34%，行程 134% 容器 ≈ 394.12% 自身高） */
.inspect-scanline { position: absolute; left: 0; right: 0; height: 34%; top: -34%; background: linear-gradient(180deg, transparent, rgba(77,218,255,.2), #61ddff); box-shadow: 0 0 22px rgba(80,220,255,.72); animation: inspectScan 1.15s ease-in-out infinite; }
@keyframes inspectScan { to { transform: translateY(394.12%); } }

/* 五步验机任务台：图片区使用真实生成素材，CSS 只负责界面和取景辅助线。 */
.inspect-app { overflow: hidden; }
.inspect-head { flex: 0 0 auto; padding-bottom: 10px; }
.inspect-head .mh-step { color: var(--ink-2); background: rgba(255,255,255,.58); border: 1px solid rgba(255,255,255,.72); }
.inspect-flow { position: relative; z-index: 2; flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 32px; scrollbar-width: none; overscroll-behavior: contain; }
.inspect-flow::-webkit-scrollbar { display: none; }
.inspect-device-strip { min-height: 66px; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 19px; color: var(--ink-2); background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.76); box-shadow: 0 8px 24px -16px rgba(28,42,74,.28), inset 0 1px 0 rgba(255,255,255,.88); }
.inspect-device-strip img { width: 58px; height: 44px; flex: 0 0 auto; object-fit: cover; object-position: center; border-radius: 10px; }
.inspect-device-strip > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inspect-device-strip b { color: var(--ink); font-size: 13px; font-weight: 820; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspect-device-strip small { color: var(--ink-3); font-size: 10px; font-weight: 680; }
.inspect-device-strip > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: rgba(var(--accent-rgb),.12); }
.inspect-device-strip.verified > span { color: #fff; background: var(--green); box-shadow: 0 5px 14px rgba(52,199,89,.24); }
.inspect-progress-summary { padding: 16px 3px 14px; }
.inspect-progress-summary > div:first-child { display: flex; align-items: baseline; gap: 5px; }
.inspect-progress-summary b { color: var(--accent); font-size: 25px; font-weight: 850; letter-spacing: -.04em; }
.inspect-progress-summary span { color: var(--ink); font-size: 13px; font-weight: 780; }
.inspect-progress-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 9px; }
.inspect-progress-dots > span { position: relative; height: 3px; border-radius: 99px; background: rgba(120,124,145,.18); }
.inspect-progress-dots > span::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-50%); background: #cdd2dc; box-shadow: 0 0 0 3px rgba(238,244,252,.9); }
.inspect-progress-dots > span.done, .inspect-progress-dots > span.on { background: var(--accent); }
.inspect-progress-dots > span.done::before, .inspect-progress-dots > span.on::before { background: var(--accent); }
.inspect-journey { overflow: hidden; border-radius: 24px; background: rgba(255,255,255,.68); border: 1px solid rgba(255,255,255,.84); box-shadow: 0 16px 38px -24px rgba(22,37,72,.34), inset 0 1px 0 rgba(255,255,255,.92); }
.inspect-journey-step { position: relative; }
.inspect-journey-step:not(:last-child)::after { content: ""; position: absolute; left: 55px; right: 14px; bottom: 0; height: 1px; background: rgba(110,116,136,.13); }
.ij-head { width: 100%; min-height: 53px; display: flex; align-items: center; gap: 10px; padding: 7px 13px; text-align: left; color: var(--ink-3); }
.ij-head:disabled { cursor: default; }
.ij-index { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); background: rgba(255,255,255,.66); border: 1px solid rgba(120,124,145,.22); font-size: 12px; font-weight: 820; }
.ij-head > b { flex: 1; color: var(--ink); font-size: 14px; font-weight: 810; letter-spacing: -.01em; }
.ij-head > em { color: var(--ink-3); font-size: 10.5px; font-weight: 730; font-style: normal; white-space: nowrap; }
.ij-head > svg { color: var(--ink-3); }
.inspect-journey-step.done .ij-index { color: #fff; background: var(--green); border-color: transparent; }
.inspect-journey-step.done .ij-head > em { color: var(--green); }
.inspect-journey-step.active .ij-index { color: #fff; background: var(--accent); border-color: transparent; box-shadow: 0 4px 12px rgba(var(--accent-rgb),.26); }
.inspect-journey-step.active .ij-head > em { color: var(--accent); }
.ij-body { padding: 0 13px 15px 51px; animation: inspectBodyIn .3s var(--smooth) both; }
@keyframes inspectBodyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.inspect-step-content { display: grid; gap: 10px; }
.inspect-media { position: relative; width: 100%; overflow: hidden; border-radius: 17px; background: #dfe7f1; box-shadow: 0 10px 24px -15px rgba(16,29,54,.46); }
.inspect-media img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.package-media { aspect-ratio: 3 / 2; }
.appearance-media, .screen-media, .boot-media { aspect-ratio: 16 / 9; }
.inspect-voice { position: absolute; left: 50%; top: 9px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 5px 10px; border-radius: 99px; color: var(--ink); background: rgba(245,249,255,.82); border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 10.5px; font-weight: 760; white-space: nowrap; }
.inspect-voice svg { color: var(--accent); }
.scan-corner { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.94); filter: drop-shadow(0 1px 3px rgba(0,0,0,.34)); }
.scan-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 7px 0 0 0; }
.scan-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 7px 0 0; }
.scan-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 7px; }
.scan-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 7px 0; }
.inspect-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.inspect-facts > span { min-height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border-radius: 11px; color: var(--accent); background: rgba(var(--accent-rgb),.09); }
.inspect-facts b { color: var(--ink); font-size: 10.5px; font-weight: 760; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspect-facts > span.ok { color: var(--green); background: var(--green-soft); }
.inspect-facts > span.ok b { color: var(--green); }
.inspect-quiet { min-height: 36px; width: 100%; color: var(--accent); font-size: 11.5px; font-weight: 760; border-radius: 11px; }
.inspect-quiet:active { background: rgba(var(--accent-rgb),.08); }
.inspect-quiet.warn { color: var(--amber); background: var(--amber-soft); }
.capture-list { display: grid; gap: 5px; }
.capture-list > span { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; border-radius: 10px; color: var(--ink-3); background: rgba(120,124,145,.08); }
.capture-thumb { width: 38px; height: 28px; flex: 0 0 auto; object-fit: cover; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.48); }
.capture-list b { flex: 1; color: var(--ink-2); font-size: 11px; font-weight: 740; }
.capture-list em { font-size: 9.5px; font-weight: 720; font-style: normal; }
.capture-list > span.on { color: var(--accent); background: rgba(var(--accent-rgb),.09); }
.capture-list > span.done { color: var(--green); background: var(--green-soft); }
.capture-list > span.done b { color: var(--ink); }
.cast-setup-card { display: grid; gap: 9px; padding: 10px; border-radius: 17px; background: linear-gradient(145deg, rgba(var(--accent-rgb),.1), rgba(255,255,255,.58)); border: 1px solid rgba(var(--accent-rgb),.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); }
.cast-open-step { min-height: 32px; display: flex; align-items: center; gap: 8px; }
.cast-open-step > span { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--accent); font-size: 11px; font-weight: 830; box-shadow: 0 4px 11px rgba(var(--accent-rgb),.24); }
.cast-open-step > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cast-open-step b { color: var(--ink); font-size: 11.5px; font-weight: 810; }
.cast-open-step small { color: var(--ink-3); font-size: 9.5px; font-weight: 690; }
.cast-open-step > svg { color: var(--accent); }
.cast-route { min-height: 68px; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 5px; padding: 7px 8px; border-radius: 14px; background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.82); }
.cast-endpoint { display: grid; justify-items: center; gap: 4px; color: var(--accent); }
.cast-endpoint em { color: var(--ink-2); font-size: 9.5px; font-weight: 740; font-style: normal; white-space: nowrap; }
.cast-route-link { position: relative; height: 30px; display: flex; align-items: center; justify-content: flex-end; color: var(--accent); }
.cast-route-link::before { content: ""; position: absolute; left: 2px; right: 7px; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(var(--accent-rgb),.18), var(--accent)); }
.cast-route-link b { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%,-50%); padding: 4px 7px; border-radius: 99px; color: var(--accent); background: #fff; border: 1px solid rgba(var(--accent-rgb),.18); font-size: 8.5px; font-weight: 820; white-space: nowrap; }
.cast-route-link svg { position: relative; z-index: 1; }
.cast-protocols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.cast-protocols button { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; color: var(--ink-3); background: rgba(255,255,255,.5); border: 1px solid rgba(120,124,145,.13); font-size: 11px; font-weight: 780; transition: color .18s, background .18s, border-color .18s, transform .14s var(--smooth); }
.cast-protocols button.on { color: var(--accent); background: #fff; border-color: rgba(var(--accent-rgb),.34); box-shadow: 0 5px 14px -10px rgba(var(--accent-rgb),.52); }
.cast-protocols button:active { transform: scale(.97); }
.cast-protocols button:disabled { opacity: .55; }
.cast-device-card { min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 14px; background: rgba(120,124,145,.08); border: 1px solid rgba(120,124,145,.08); }
.cast-device-card > span, .cast-live-strip > span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: rgba(var(--accent-rgb),.11); }
.cast-device-card > div, .cast-live-strip > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.cast-device-card b, .cast-live-strip b { color: var(--ink); font-size: 10.5px; font-weight: 790; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-device-card small, .cast-live-strip small { color: var(--ink-3); font-size: 9.5px; font-weight: 690; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cast-device-card > em { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 9.5px; font-weight: 760; font-style: normal; }
.cast-device-card > em i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,89,.12); }
.screen-connect-row { min-height: 30px; display: flex; align-items: center; gap: 8px; }
.screen-connect-row > b { flex: 1; color: var(--ink); font-size: 12px; font-weight: 800; }
.screen-connect-row > span { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 9.5px; font-weight: 730; }
.screen-connect-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.screen-connect-row > span.ok { color: var(--green); }
.screen-connect-row > span.ok i { background: var(--green); box-shadow: 0 0 0 3px rgba(52,199,89,.12); }
.cast-live-strip { min-height: 48px; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 14px; background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.13); }
.cast-live-strip > em { color: var(--accent); font-size: 9.5px; font-weight: 790; font-style: normal; white-space: nowrap; }
.screen-test-color { position: absolute; left: 26.6%; right: 19.6%; top: 15.7%; bottom: 33.4%; border: 1px solid rgba(15,17,24,.28); }
.screen-score { position: absolute; left: 9px; bottom: 9px; display: flex; gap: 1px; overflow: hidden; border-radius: 10px; color: #fff; background: rgba(18,20,26,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.screen-score b { padding: 6px 8px; font-size: 9.5px; font-weight: 760; }
.screen-score b + b { border-left: 1px solid rgba(255,255,255,.15); }
.evidence-saved { position: absolute; right: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border-radius: 10px; color: #fff; background: rgba(18,20,26,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 9px; font-weight: 730; }
.screen-test-title { display: flex; align-items: center; gap: 8px; }
.screen-test-title b { flex: 1; color: var(--ink); font-size: 11px; font-weight: 790; }
.screen-test-title span { color: var(--ink-3); font-size: 9.5px; font-weight: 700; }
.screen-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.screen-swatches > span { height: 24px; border-radius: 7px; border: 1.5px solid rgba(120,124,145,.16); opacity: .48; transition: opacity .18s, transform .18s, border-color .18s; }
.screen-swatches > span.done { opacity: .72; }
.screen-swatches > span.on { opacity: 1; border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 3px 8px rgba(var(--accent-rgb),.18); }
.manual-note { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; color: var(--accent); background: rgba(var(--accent-rgb),.09); }
.manual-note > span { display: grid; gap: 1px; }
.manual-note b { color: var(--ink); font-size: 11px; font-weight: 780; }
.manual-note small { color: var(--ink-3); font-size: 9.5px; }
.boot-checks { display: grid; gap: 6px; }
.boot-checks button { min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border-radius: 12px; color: var(--ink-3); background: rgba(120,124,145,.08); border: 1px solid transparent; }
.boot-checks button > span { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.72); }
.boot-checks button b { flex: 1; text-align: left; color: var(--ink-2); font-size: 11.5px; font-weight: 760; }
.boot-checks button em { font-size: 9.5px; font-weight: 720; font-style: normal; }
.boot-checks button.done { color: var(--green); background: var(--green-soft); border-color: rgba(52,199,89,.14); }
.boot-checks button.done b { color: var(--ink); }
.inspect-verdict { min-height: 62px; display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 15px; }
.inspect-verdict > span { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; }
.inspect-verdict > div { display: grid; gap: 1px; }
.inspect-verdict small { color: var(--ink-3); font-size: 9.5px; font-weight: 700; }
.inspect-verdict b { color: var(--ink); font-size: 17px; font-weight: 840; letter-spacing: -.02em; }
.inspect-verdict.ok { background: var(--green-soft); }
.inspect-verdict.ok > span { background: var(--green); box-shadow: 0 5px 14px rgba(52,199,89,.25); }
.inspect-verdict.warn { background: var(--amber-soft); }
.inspect-verdict.warn > span { background: var(--amber); box-shadow: 0 5px 14px rgba(255,159,10,.25); }
.issue-evidence { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; color: var(--amber); background: var(--amber-soft); }
.issue-evidence > div { display: grid; gap: 1px; }
.issue-evidence b { color: var(--ink); font-size: 10.5px; font-weight: 780; }
.issue-evidence small { color: var(--ink-2); font-size: 9.5px; line-height: 1.35; }
.report-list { display: grid; }
.report-list > span { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 3px; border-bottom: 1px solid rgba(110,116,136,.11); }
.report-list b { flex: 1; color: var(--ink); font-size: 10.5px; font-weight: 750; }
.report-list em { color: var(--ink-3); font-size: 9.5px; font-weight: 700; font-style: normal; }
.report-meta { display: flex; gap: 6px; }
.report-meta span { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 9px; color: var(--ink-2); background: rgba(120,124,145,.08); font-size: 9.5px; font-weight: 720; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inspect-backup-choice { display: grid; gap: 9px; padding: 10px; border-radius: 15px; background: rgba(var(--accent-rgb),.08); border: 1px solid rgba(var(--accent-rgb),.14); }
.ibc-title { display: flex; align-items: center; gap: 8px; }
.ibc-title > span { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: rgba(255,255,255,.76); }
.ibc-title b { color: var(--ink); font-size: 11px; line-height: 1.4; font-weight: 790; }
.ibc-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.ibc-options button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 11px; color: var(--ink-3); background: rgba(255,255,255,.58); border: 1px solid rgba(120,124,145,.12); font-size: 10.5px; font-weight: 760; }
.ibc-options button.on { color: var(--accent); background: #fff; border-color: rgba(var(--accent-rgb),.34); box-shadow: 0 5px 14px -9px rgba(var(--accent-rgb),.5); }
.inspect-encryption-proof { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 11px; overflow: hidden; border-radius: 15px; color: var(--green); background: linear-gradient(135deg, rgba(52,199,89,.14), rgba(73,177,255,.1)); border: 1px solid rgba(52,199,89,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); animation: secureReveal .36s var(--smooth) both; }
.inspect-encryption-proof::after { content: ""; position: absolute; width: 88px; height: 88px; right: -42px; top: -46px; border-radius: 50%; background: rgba(52,199,89,.09); }
.iep-lock { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #24c875, #159fd7); box-shadow: 0 7px 17px -8px rgba(21,159,215,.72), inset 0 1px 0 rgba(255,255,255,.35); }
.inspect-encryption-proof > div { position: relative; z-index: 1; min-width: 0; display: grid; gap: 2px; }
.inspect-encryption-proof b { color: var(--ink); font-size: 11px; font-weight: 810; }
.inspect-encryption-proof p { margin: 0; color: var(--ink-2); font-size: 9.5px; font-weight: 650; line-height: 1.48; }
@keyframes secureReveal { from { opacity: 0; transform: translateY(-5px) scale(.98); } to { opacity: 1; transform: none; } }

/* 最佳设置 */
.setup-stage { padding: 0 20px 396px; }
.setup-stage.result { padding-bottom: 356px; }
.setup-tv { position: relative; width: 226px; aspect-ratio: 16 / 9; padding: 5px; border-radius: 13px; background: #13141c; box-shadow: 0 21px 38px -18px rgba(29,20,70,.52); }
.setup-screen { width: 100%; height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 9px; color: #fff;
  background: radial-gradient(circle at 72% 24%, rgba(172,150,255,.9), transparent 30%), linear-gradient(145deg, #222d69, #3b2a77 55%, #174b73); }
.setup-screen b { font-size: 19px; font-weight: 830; letter-spacing: -.02em; }
.setup-stand { position: absolute; left: 50%; bottom: -18px; width: 66px; height: 18px; border-bottom: 4px solid #171922; transform: translateX(-50%); }
.setup-stand::before { content: ""; position: absolute; left: 50%; top: 0; width: 4px; height: 15px; background: #171922; transform: translateX(-50%); }
.setup-model { margin-top: 31px; color: var(--ink); font-size: 13px; font-weight: 790; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.68); }
.setup-sheet { gap: 12px; }
.pick-group { display: flex; flex-direction: column; gap: 7px; }
.pick-title { color: var(--ink); font-size: 13px; font-weight: 790; }
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.pick-grid button, .scene-picks button { min-height: 44px; border-radius: 13px; color: var(--ink-2); background: var(--fill); border: 1px solid transparent; font-size: 12.5px; font-weight: 740; transition: color .18s, background .18s, border-color .18s, transform .14s; }
.pick-grid.sources button { display: flex; align-items: center; justify-content: center; gap: 7px; }
.pick-grid button.on, .scene-picks button.on { color: var(--accent); background: rgba(var(--accent-rgb),.12); border-color: rgba(var(--accent-rgb),.3); }
.pick-grid button:active, .scene-picks button:active { transform: scale(.97); }
.scene-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.scene-picks button { min-height: 44px; }
.setting-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.setting-grid > span { min-height: 55px; border-radius: 14px; padding: 9px 11px; display: flex; flex-direction: column; justify-content: center; gap: 2px; background: var(--fill); }
.setting-grid em { color: var(--ink-3); font-size: 11px; font-weight: 720; font-style: normal; }
.setting-grid b { color: var(--ink); font-size: 14px; font-weight: 820; }
.cable-card { min-height: 78px; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 16px; color: var(--green); background: var(--green-soft); border: 1px solid rgba(52,199,89,.14); }
.cable-card.buy { color: var(--accent); background: rgba(var(--accent-rgb),.1); border-color: rgba(var(--accent-rgb),.2); }
.cable-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; background: rgba(255,255,255,.64); }
.cable-card > div { min-width: 0; flex: 1; display: grid; gap: 1px; }
.cable-card em { color: var(--ink-3); font-size: 11px; font-weight: 720; font-style: normal; }
.cable-card b { color: var(--ink); font-size: 16px; font-weight: 830; }
.cable-card strong { color: currentColor; font-size: 12px; font-weight: 760; white-space: nowrap; }
.cable-card button { min-width: 68px; min-height: 44px; padding: 0 9px; border-radius: 12px; flex: 0 0 auto; color: #fff; background: var(--accent); font-size: 11.5px; font-weight: 790; }
.cable-card button.added { color: var(--green); background: rgba(255,255,255,.72); }

/* 尊重系统「减少动态效果」：关掉扫描/闪光/弹簧，仅保留淡入 */
@media (prefers-reduced-motion: reduce) {
  .vf-flash, .vf-scan, .vf-grid, .vf-bloom { display: none !important; }
  .vf-guide, .fit-badge, .gp-spin, .mh-step.busy, .size-fp, .meter, .meter-ring, .turn-card, .turn-ic, .abox, .ppager, .scan-plane, .ar-tv, .room-scan-progress span, .inspect-scanline, .inspect-encryption-proof { animation: none !important; }
  .gen-pill, .cap-sheet, .res-sheet, .room-place-sheet, .room-result-sheet, .lres-sheet, .vf-wrap, .vf-img.res, .size-fp, .ar-tv, .vf-l2, .utility-sheet, .setup-bg { transition-duration: .12s !important; transition-timing-function: ease !important; }
}