* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #070707; color: #f4eee8; font-family: Geist, "SF Pro Display", "PingFang SC", sans-serif; }
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); }
button, input { font: inherit; }
#app, #measurement-app { width: 100%; height: 100%; }
.skin-view { position: relative; width: 100%; height: 100%; overflow: hidden; }
.skin-brand { position: absolute; z-index: 10; top: max(18px, env(safe-area-inset-top)); left: max(24px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 6px; }
.skin-brand img { width: 156px; height: auto; display: block; }
.skin-brand small { font-size: 10px; letter-spacing: .15em; opacity: .62; }
.skin-eyebrow { color: var(--skin-accent); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.skin-error { position: absolute; z-index: 30; left: 50%; bottom: 96px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 12px 16px; border: 1px solid var(--skin-line); background: color-mix(in srgb, var(--skin-bg) 88%, transparent); color: var(--skin-text); box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.skin-error button { padding: 8px 12px; border: 1px solid var(--skin-accent); background: transparent; color: inherit; cursor: pointer; }
[data-measurement-stage] { position: relative; overflow: hidden; }
.portrait-slot, .portrait-slot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait-slot { z-index: 1; }
.portrait-slot img { object-fit: cover; object-position: center 42%; }
.portrait-slot .live-video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transform: scaleX(-1); }
.capture-guide { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; pointer-events: none; }
.capture-guide span { width: min(58%, 270px); aspect-ratio: .72; border: 1px solid color-mix(in srgb, var(--skin-accent) 88%, white); border-radius: 48% 48% 44% 44%; box-shadow: 0 0 0 999px color-mix(in srgb, var(--skin-bg) 34%, transparent), inset 0 0 26px color-mix(in srgb, var(--skin-accent) 10%, transparent), 0 0 22px color-mix(in srgb, var(--skin-accent) 25%, transparent); }
.capture-guide span::before, .capture-guide span::after { content: ""; position: absolute; left: 50%; width: 20px; height: 1px; background: var(--skin-accent); transform: translateX(-50%); }
.capture-guide span::before { top: 16%; }
.capture-guide span::after { bottom: 16%; }
.capture-guide p { position: absolute; left: 50%; bottom: 5%; width: 90%; margin: 0; transform: translateX(-50%); color: var(--skin-text); font-size: 12px; letter-spacing: .06em; text-align: center; text-shadow: 0 1px 8px #000; }
[data-measurement-overlay] { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.measurement-overlay-svg { width: 100%; height: 100%; overflow: visible; }
.measure-point { fill: var(--skin-accent); filter: drop-shadow(0 0 4px var(--skin-accent)); }
.measure-point--reference { fill: none; stroke: var(--skin-accent); }
.frame-contour { fill: none; stroke: color-mix(in srgb, var(--skin-line) 55%, transparent); stroke-width: .28; }
.frame-reference { stroke: color-mix(in srgb, var(--skin-line) 42%, transparent); stroke-width: .2; fill: none; stroke-dasharray: 1.2 1.2; }
.measure-line { stroke: var(--skin-line); stroke-width: .32; fill: none; stroke-dasharray: 100; stroke-dashoffset: 100; }
.measure-label { fill: var(--skin-text); font-size: 2.4px; letter-spacing: .06em; opacity: 0; transform: translateY(1px); transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.measure-group.is-active .measure-line { animation: drawMeasure 620ms var(--ease-in-out) forwards; }
.measure-group.is-active .measure-label { animation: fadeMeasure 220ms var(--ease-out) 620ms forwards; }
.score-ring { fill: color-mix(in srgb, var(--skin-bg) 72%, transparent); stroke: var(--skin-accent); stroke-width: .42; opacity: 0; }
.measure-group.is-active .score-ring { animation: scoreReveal 700ms cubic-bezier(.22,1,.36,1) forwards; }
@keyframes drawMeasure { to { stroke-dashoffset: 0; } }
@keyframes fadeMeasure { to { opacity: 1; } }
@keyframes scoreReveal { from { opacity: 0; transform: scale(.94); transform-origin: center; } to { opacity: 1; transform: scale(1); transform-origin: center; } }

.skin-view--luxury { --skin-bg: #070707; --skin-text: #f4eee8; --skin-accent: #ddb087; --skin-line: #e7b88f; background: radial-gradient(circle at 50% 42%, rgba(216,168,126,.12), transparent 32%), #070707; color: #f4eee8; }
.skin-view--luxury .luxury-intro { position: absolute; left: 3%; bottom: 14%; width: 27%; }
.skin-view--luxury .luxury-intro h1 { margin: 18px 0; font: 400 clamp(32px, 4vw, 60px)/1.06 "Songti SC", Georgia, serif; letter-spacing: -.05em; }
.skin-view--luxury .luxury-intro p { color: #8f8983; font-size: 13px; line-height: 1.8; }
.skin-view--luxury .luxury-portrait { position: absolute; top: 10%; left: 31%; width: 38%; height: 80%; border: 1px solid rgba(227,184,147,.3); background: #111; box-shadow: 0 32px 90px rgba(0,0,0,.58); }
.skin-view--luxury .luxury-portrait::after { content: ""; position: absolute; inset: 14px; border-top: 1px solid rgba(226,185,150,.18); border-bottom: 1px solid rgba(226,185,150,.18); pointer-events: none; }
.skin-view--luxury .portrait-slot img { filter: saturate(.72) contrast(1.05) brightness(.84); }
.skin-view--luxury .luxury-readout { position: absolute; right: 3%; top: 17%; width: 24%; }
.skin-view--luxury .luxury-readout h2 { margin: 18px 0 28px; font: 400 clamp(26px, 3vw, 42px)/1.1 "Songti SC", Georgia, serif; }
.skin-view--luxury .luxury-phase { padding: 12px 0; border-top: 1px solid #302a25; border-bottom: 1px solid #302a25; color: #bdab9d; font-size: 13px; }
.skin-view--luxury dl { margin: 18px 0 0; }
.skin-view--luxury dl div { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #282522; color: #77716b; }
.skin-view--luxury dd { margin: 0; color: #d8cdc3; font-variant-numeric: tabular-nums; }
.luxury-score { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; color: #bda991; }
.luxury-score strong { color: #f1d2b6; font: 300 42px Georgia, serif; }
.luxury-score em { color: #d8cdc3; font-style: normal; }
.skin-view--luxury .luxury-readout p { color: #68625d; font-size: 11px; line-height: 1.6; }
.visual-estimate-note { position: absolute; right: 0; top: min(86vh, 720px); max-width: 180px; text-align: right; }

.skin-view--warm { --skin-bg: #eee8df; --skin-text: #251f1b; --skin-accent: #a47452; --skin-line: #ffc08b; background: #eee8df; color: #251f1b; }
.skin-view--warm .skin-brand { left: 2.5%; top: 18px; }
.skin-view--warm .skin-brand img { width: 138px; background: #090909; border-radius: 2px; }
.skin-view--warm .warm-layout { display: grid; grid-template-columns: minmax(380px, 7fr) minmax(360px, 5fr); gap: 5%; width: 94%; height: 78%; margin: 11% auto 0; }
.skin-view--warm .warm-portrait { width: min(100%, 430px); height: 100%; aspect-ratio: 3/4; justify-self: center; background: #1a1817; border-radius: 4px; box-shadow: 0 22px 60px rgba(61,46,34,.2); }
.skin-view--warm .portrait-slot img { filter: saturate(.82) brightness(.98); }
.skin-view--warm .warm-readout { min-width: 0; padding-top: 4%; }
.skin-view--warm .warm-readout h1 { margin: 16px 0 28px; font: 420 clamp(38px, 5vw, 68px)/1.02 "Songti SC", Georgia, serif; letter-spacing: -.06em; }
.skin-view--warm .warm-readout h1 em { color: #a46f4c; font-style: normal; }
.warm-progress { display: flex; justify-content: space-between; border-bottom: 4px solid #d9d0c6; padding-bottom: 9px; color: #766b62; font-size: 13px; }
.warm-metrics { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 28px; }
.warm-metrics article { min-height: 82px; padding: 15px; background: rgba(255,255,255,.52); border: 1px solid rgba(80,59,44,.1); }
.warm-metrics span, .warm-result span { color: #887a70; font-size: 12px; }
.warm-metrics strong { display: block; margin-top: 14px; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.warm-result { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; }
.warm-result strong { font-size: 40px; font-weight: 550; color: #a46f4c; }
.warm-result b { font-weight: 500; }
.skin-view--warm .warm-readout p { color: #887a70; font-size: 11px; line-height: 1.6; }
.warm-actions { display: flex; gap: 10px; margin-top: 28px; }
.warm-actions button { height: 46px; padding: 0 20px; border: 1px solid #2a211c; background: transparent; color: #2a211c; cursor: pointer; }
.warm-actions button:last-child { flex: 1; background: #2a211c; color: #fff; }

.skin-view--chamber { --skin-bg: #02080b; --skin-text: #d8f9f6; --skin-accent: #7ef8ed; --skin-line: #7ef8ed; background: radial-gradient(circle at 50% 42%, rgba(27,126,125,.28), transparent 35%), #02080b; color: #d8f9f6; }
.skin-view--chamber::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), transparent 26% 74%, rgba(0,0,0,.82)); pointer-events: none; }
.skin-view--chamber .chamber-portrait { position: absolute; inset: 0 20%; }
.skin-view--chamber .portrait-slot img { filter: saturate(.45) contrast(1.14) brightness(.58) hue-rotate(105deg); }
.skin-view--chamber .chamber-portrait::after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(99,227,217,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(99,227,217,.15) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle, black 25%, transparent 72%); pointer-events: none; }
.skin-view--chamber .skin-brand { top: 24px; left: 4%; }
.skin-view--chamber .skin-brand img { width: 148px; }
.skin-view--chamber .chamber-steps { position: absolute; z-index: 5; top: 27%; left: 4%; display: flex; flex-direction: column; gap: 20px; color: rgba(167,232,227,.38); font-size: 13px; }
.skin-view--chamber .chamber-steps b { color: #aefcf5; font-weight: 500; }
.skin-view--chamber .chamber-readout { position: absolute; z-index: 5; top: 29%; right: 4%; width: 19%; }
.skin-view--chamber .chamber-readout div { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid rgba(129,231,222,.18); color: #63928f; font-size: 12px; }
.skin-view--chamber .chamber-readout b { color: #c8f6f2; font-weight: 400; font-variant-numeric: tabular-nums; }
.skin-view--chamber footer { position: absolute; z-index: 5; bottom: 7%; left: 50%; transform: translateX(-50%); width: min(560px, 48vw); text-align: center; }
.skin-view--chamber footer > span { display: block; font-size: 16px; letter-spacing: .08em; }
.skin-view--chamber footer strong { display: block; margin-top: 10px; color: #aefcf5; font-size: 28px; font-weight: 300; }
.skin-view--chamber footer small { display: block; margin-top: 10px; color: #63928f; font-size: 10px; }

#global-controls { position: fixed; z-index: 50; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; }
#global-controls[hidden] { display: none; }
#global-controls button, #global-controls label { min-height: 42px; padding: 0 14px; border: 1px solid rgba(255,255,255,.3); background: rgba(0,0,0,.45); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; backdrop-filter: blur(10px); }
#global-controls input { display: none; }
#global-status { max-width: 260px; color: rgba(255,255,255,.72); font-size: 11px; text-align: right; }
.entry-view { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 52% 43%, rgba(221,176,135,.14), transparent 29%), #070707; }
.entry-view::after { content: ""; position: absolute; inset: 12% 28%; border: 1px solid rgba(231,184,143,.18); pointer-events: none; }
.entry-logo { position: absolute; top: max(28px, env(safe-area-inset-top)); left: max(32px, env(safe-area-inset-left)); width: 178px; }
.entry-copy { position: absolute; z-index: 1; left: 10%; top: 50%; width: min(560px, 52vw); transform: translateY(-50%); }
.entry-copy > span { color: #ddb087; font-size: 11px; letter-spacing: .22em; }
.entry-copy h1 { margin: 22px 0; color: #f4eee8; font: 400 clamp(52px, 7vw, 92px)/.98 "Songti SC", Georgia, serif; letter-spacing: -.07em; }
.entry-copy p { max-width: 400px; margin: 0 0 28px; color: #a49b93; font-size: 14px; line-height: 1.8; }
.primary-action, .consent-actions button { min-height: 54px; padding: 0 26px; border: 1px solid #ddb087; background: #ddb087; color: #17110d; font-weight: 600; cursor: pointer; }
.entry-note { position: absolute; right: max(32px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); color: #6c645e; font-size: 11px; }
.consent-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.7); backdrop-filter: blur(10px); }
.consent-layer[hidden] { display: none; }
.consent-dialog { width: min(500px, 100%); padding: 34px; border: 1px solid rgba(221,176,135,.5); background: #0e0d0c; color: #f4eee8; box-shadow: 0 32px 100px rgba(0,0,0,.5); }
.consent-dialog > span { color: #ddb087; font-size: 10px; letter-spacing: .2em; }
.consent-dialog h2 { margin: 16px 0; font: 400 34px/1.1 "Songti SC", Georgia, serif; }
.consent-dialog p { color: #b4aaa1; font-size: 13px; line-height: 1.8; }
.consent-actions { display: flex; gap: 10px; margin-top: 28px; }
.consent-actions button:last-child { border-color: rgba(255,255,255,.3); background: transparent; color: #f4eee8; }
#skin-settings { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.56); backdrop-filter: blur(12px); }
#skin-settings[hidden] { display: none; }
.settings-dialog { width: min(760px, 86vw); padding: 28px; background: #161414; color: #f7ede4; border: 1px solid rgba(226,185,150,.36); box-shadow: 0 22px 80px rgba(0,0,0,.5); }
.settings-dialog header { display: flex; align-items: flex-start; justify-content: space-between; }
.settings-dialog h2 { margin: 0; font: 400 30px "Songti SC", Georgia, serif; }
.settings-dialog p { margin: 8px 0 22px; color: #9d938c; font-size: 12px; }
.settings-dialog [data-skin-close] { border: 0; background: transparent; color: #d6b698; font-size: 24px; cursor: pointer; }
.skin-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skin-option { min-height: 130px; padding: 15px; border: 1px solid rgba(255,255,255,.16); background: #211e1c; color: inherit; text-align: left; cursor: pointer; }
.skin-option[data-selected] { border-color: #ddb087; box-shadow: 0 0 0 1px #ddb087 inset; }
.skin-option strong { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 500; }
.skin-option span { color: #9d938c; font-size: 11px; line-height: 1.5; }
.long-press-progress { height: 2px; margin-top: 20px; background: rgba(255,255,255,.1); overflow: hidden; }
.long-press-progress::after { content: ""; display: block; width: calc(var(--progress, 0) * 100%); height: 100%; background: #ddb087; }

@media (max-width: 1020px) {
  .skin-view--luxury .luxury-portrait { left: 28%; width: 43%; }
  .skin-view--luxury .luxury-intro { width: 24%; }
  .skin-view--luxury .luxury-readout { width: 24%; }
  .skin-view--warm .warm-layout { width: 96%; gap: 3%; }
  .skin-view--warm .warm-readout h1 { font-size: 46px; }
  .skin-view--chamber .chamber-portrait { inset: 0 14%; }
  .entry-copy { left: 7%; width: 56vw; }
  .entry-copy h1 { font-size: clamp(46px, 7vw, 72px); }
}
@media (orientation: portrait) {
  #app::before { content: "请将 iPad 横置查看测量体验"; position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: #090909; color: #e7c4a7; font-size: 22px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .measure-line, .measure-label, .score-ring { animation: none !important; transition-duration: .01ms !important; opacity: 1; stroke-dashoffset: 0; transform: none; }
  .skin-view--chamber .chamber-portrait::after { display: none; }
}