:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; color: #f6f7f9; background: #101114; }
button { font: inherit; }
.app { width: min(100%, 520px); min-height: 100dvh; margin: auto; padding: max(18px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); }
header { height: 48px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; }
.brand-dot { width: 11px; height: 11px; border: 3px solid #65e6ba; border-radius: 50%; box-shadow: 0 0 14px #65e6ba; }
.icon-button { width: 40px; height: 40px; border: 1px solid #34363b; border-radius: 50%; color: #fff; background: #202226; font-size: 24px; }
.camera-card { position: relative; overflow: hidden; aspect-ratio: 3/4; max-height: 63dvh; margin-top: 12px; border-radius: 28px; background: #24262b; box-shadow: 0 24px 65px #0008; }
#camera { width: 100%; height: 100%; display: block; object-fit: cover; transform: scaleX(-1); }
.color-light { position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen; transition: opacity .12s; pointer-events: none; }
.color-light.active { opacity: .7; }
.shade { position: absolute; inset: 0; background: radial-gradient(ellipse 38% 42% at 50% 44%, transparent 98%, #050608b8 100%); pointer-events: none; }
.face-guide { position: absolute; width: 52%; aspect-ratio: .75; left: 50%; top: 44%; transform: translate(-50%,-50%); border: 1px dashed #ffffff75; border-radius: 50%; }
.corner { position:absolute; width: 34px; height:34px; border-color:#fff; border-style:solid; filter:drop-shadow(0 0 6px #0008); }
.tl{left:-7px;top:9%;border-width:3px 0 0 3px;border-radius:16px 0 0 0}.tr{right:-7px;top:9%;border-width:3px 3px 0 0;border-radius:0 16px 0 0}.bl{left:-7px;bottom:9%;border-width:0 0 3px 3px;border-radius:0 0 0 16px}.br{right:-7px;bottom:9%;border-width:0 3px 3px 0;border-radius:0 0 16px 0}
.top-status { position:absolute; top:16px; left:50%; transform:translateX(-50%); white-space:nowrap; padding:8px 13px; border-radius:99px; background:#08090bbd; backdrop-filter:blur(12px); font-size:12px; }
.top-status span:first-child { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#8e929a; }
.top-status .live { background:#65e6ba!important; box-shadow:0 0 8px #65e6ba; }
.camera-hint { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:max-content; max-width:90%; padding:9px 14px; border-radius:99px; background:#08090ba8; font-size:13px; text-align:center; }
.countdown { position:absolute; inset:0; display:grid; place-items:center; font-size:96px; font-weight:800; text-shadow:0 6px 30px #000; }
.control-panel { padding: 20px 4px 0; }
.progress-row,.section-title { display:flex; justify-content:space-between; align-items:center; font-size:14px; }
#progressText { font-weight:650; }.progress-row span:last-child{color:#9b9ea6}
.progress { height:5px; margin-top:10px; overflow:hidden; border-radius:99px; background:#292b30; }
#progressBar { width:0; height:100%; border-radius:inherit; background:#65e6ba; transition:width .3s; }
.swatches { display:flex; justify-content:center; gap:14px; margin:18px 0 14px; }
.swatch { width:22px; height:22px; border:3px solid #191a1d; border-radius:50%; box-shadow:0 0 0 1px #3c3e44; transition:.25s; }
.swatch.done { box-shadow:0 0 0 2px #fff; transform:scale(.82); }.swatch.current{transform:scale(1.3);box-shadow:0 0 0 3px #fff}
.privacy { margin:0 0 18px; color:#83868e; text-align:center; font-size:12px; }
.primary-button,.secondary-button { width:100%; min-height:54px; border:0; border-radius:17px; font-weight:750; cursor:pointer; }
.primary-button { color:#0a1814; background:#65e6ba; box-shadow:0 10px 28px #39b89036; }
.primary-button:disabled { opacity:.55; }
.secondary-button { margin-top:10px; color:#fff; background:#292b30; }
.hidden { display:none!important; }
.gallery-section { margin-top:26px; padding-top:20px; border-top:1px solid #292b30; }
.section-title h2 { margin:0; font-size:18px; }.section-title button{border:0;color:#65e6ba;background:transparent}
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px; }
.shot { position:relative; overflow:hidden; aspect-ratio:3/4; border-radius:13px; background:#202226; }
.shot img { width:100%;height:100%;object-fit:cover;transform:scaleX(-1); }.shot span{position:absolute;left:7px;bottom:7px;padding:3px 7px;border-radius:99px;background:#08090bb5;font-size:10px}
@media (max-height: 720px) { .camera-card { max-height: 54dvh; } .swatches { margin:12px 0 10px; } .privacy { margin-bottom:12px; } }