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

/* 一镜到底：几何弹簧（stiffness 320 / damping 34，近临界，平滑落位不弹跳），烘焙成 linear() */
:root {
  --spring-morph: linear(0, 0.0271, 0.0928, 0.179, 0.2736, 0.3687, 0.4593, 0.5425, 0.6171, 0.6825, 0.7389, 0.787, 0.8275, 0.8612, 0.889, 0.9119, 0.9304, 0.9454, 0.9575, 0.967, 0.9746, 0.9806, 0.9853, 0.9889, 0.9917, 0.9939, 0.9955, 0.9968, 0.9977, 0.9984, 0.9989, 0.9993, 0.9995, 0.9997, 0.9999, 0.9999, 1, 1, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 1.0001, 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 (glass over photo) — 背景用 ::before 承载 mask，文字保持全清晰 ---- */
.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; z-index: -1;
  background: linear-gradient(180deg, var(--glass-strong) 0%, color-mix(in srgb, var(--glass-strong) 62%, transparent) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  -webkit-mask: linear-gradient(180deg, #000 78%, transparent); mask: linear-gradient(180deg, #000 78%, transparent); }
/* 壳内嵌入（主页 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-s { font-size: 11.5px; font-weight: 500; color: var(--ink-2); margin-top: 1px; text-shadow: 0 1px 2px rgba(255,255,255,.4); }
.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; } }

/* ---- 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-gen { padding-bottom: 208px; }
.vf-wrap.p-result { padding-bottom: 372px; }
.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; }
@keyframes scan { 0% { top: -34%; } 100% { top: 100%; } }
.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 尺寸框：等比套住真实电视，随尺寸滑块缩放（所选即所见），标注实际厘米尺寸 */
.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); }
.cap-hint { text-align: center; font-size: 11.5px; color: var(--ink-3); margin: 0; padding: 0 6px; }

.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; }
.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); }
.mslider { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; outline: none; background: var(--track); }
.mslider::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(20,22,40,.28), 0 0 0 1px rgba(0,0,0,.05); cursor: pointer; }
/* 沙发距离（可改，视角推荐据此计算） */
.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; }

/* ===== 采光 · 测光 ===== */
.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; }
.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); }
.lnote { font-size: 10px; color: var(--ink-4); line-height: 1.5; }

/* 尊重系统「减少动态效果」：关掉扫描/闪光/弹簧，仅保留淡入 */
@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 { animation: none !important; }
  .gen-pill, .cap-sheet, .res-sheet, .lres-sheet, .vf-wrap, .vf-img.res, .size-fp, .vf-l2 { transition-duration: .12s !important; transition-timing-function: ease !important; }
}