:root{--ink:#211a17;--deep:#3a1f15;--brown:#5a2e20;--muted:#776b65;--line:rgba(255,255,255,.22);--glass:rgba(255,255,255,.72);--green:#55d88a;--green-deep:#174c2c;--red:#ee6a61;--amber:#f0c969;--shadow:0 18px 60px rgba(33,26,23,.18)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#151210;color:var(--ink);font-family:Inter,Manrope,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit}.hidden{display:none!important}.screen{width:100%;min-height:100dvh}.glass{background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.52);box-shadow:var(--shadow);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.welcome-screen{display:grid;place-items:center;padding:28px 18px;background:radial-gradient(circle at 50% 0,#fbf7f2 0,#efe4da 48%,#e6d7ca 100%)}.welcome-card{width:min(560px,100%);padding:30px 24px 24px;border-radius:30px}.brand{font-size:12px;font-weight:800;letter-spacing:.16em;color:rgba(90,46,32,.72)}.welcome-card h1,.complete-card h2{margin:14px 0 12px;font-size:clamp(38px,10vw,62px);line-height:.94;letter-spacing:-.045em;color:var(--deep)}.lead{font-size:17px;line-height:1.45;color:var(--muted);margin:0 0 22px}.prep-list{display:grid;gap:10px;margin:20px 0 24px}.prep-list>div{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.55);border:1px solid rgba(90,46,32,.08)}.prep-list span{font-size:11px;font-weight:900;letter-spacing:.08em;color:rgba(90,46,32,.55)}.prep-list b{font-size:15px;line-height:1.25}.primary,.secondary{width:100%;min-height:54px;border:0;border-radius:18px;font-weight:850}.primary{background:var(--deep);color:#fff;box-shadow:0 12px 28px rgba(58,31,21,.2)}.secondary{background:rgba(255,255,255,.78);color:var(--deep);border:1px solid rgba(90,46,32,.12)}.micro{font-size:12px;line-height:1.45;color:rgba(87,72,65,.72);margin:14px 3px 0}
.scanner-screen{position:fixed;inset:0;height:100dvh;background:#12100f;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden}.scanner-topbar{position:relative;z-index:20;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top)) 12px 9px;background:linear-gradient(180deg,rgba(18,16,15,.62),rgba(18,16,15,.12));color:#fff}.glass-bar{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.icon-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.10);color:#fff;font-size:30px;line-height:1}.sound-btn svg{width:23px;height:23px;fill:#fff;stroke:#fff;stroke-width:2.3;stroke-linecap:round}.sound-btn .spk-slash{display:none}.sound-btn.muted .spk-wave{display:none}.sound-btn.muted .spk-slash{display:block}.step-head{text-align:center}.step-label{font-size:14px;font-weight:780;letter-spacing:.02em}.progress{display:flex;justify-content:center;gap:5px;margin-top:7px}.progress i{width:26px;height:3px;border-radius:9px;background:rgba(255,255,255,.25)}.progress i.on{background:rgba(255,255,255,.94)}
.camera-stage{position:relative;min-height:0;background:#111;overflow:hidden;isolation:isolate}#video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#111;z-index:1;transform:scaleX(-1);transform-origin:center}.guide-layer{position:absolute;z-index:4;pointer-events:none;overflow:hidden}.guide-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.cocoon-halo,.cocoon-glow,.cocoon-line{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke .28s ease,opacity .28s ease,stroke-width .28s ease}.cocoon-halo{stroke:rgba(0,0,0,.20);stroke-width:24}.cocoon-glow{stroke:rgba(255,255,255,.15);stroke-width:12}.cocoon-line{stroke:rgba(255,255,255,.82);stroke-width:3.5}.center-guide{stroke:rgba(255,255,255,.14);stroke-width:1.4;stroke-dasharray:10 18;vector-effect:non-scaling-stroke}.scanner-screen[data-guidance="ready"] .cocoon-halo{stroke:rgba(48,167,92,.20);stroke-width:28}.scanner-screen[data-guidance="ready"] .cocoon-glow{stroke:rgba(85,216,138,.34);stroke-width:15}.scanner-screen[data-guidance="ready"] .cocoon-line{stroke:#61df91;stroke-width:4.2}.scanner-screen[data-guidance="error"] .cocoon-glow{stroke:rgba(238,106,97,.28)}.scanner-screen[data-guidance="error"] .cocoon-line{stroke:rgba(255,135,126,.92)}
.foot-zone{position:absolute;left:12%;right:12%;bottom:2.7%;height:7%;border-bottom:2px solid rgba(255,255,255,.48);border-radius:0 0 26px 26px;opacity:.62;transition:border-color .2s,opacity .2s}.foot-zone>span{position:absolute;left:50%;bottom:2px;transform:translate(-50%,100%);font-size:10px;font-weight:750;letter-spacing:.04em;color:rgba(255,255,255,.72);white-space:nowrap}.foot-zone[data-feet="complete"]{border-color:rgba(97,223,145,.8);opacity:.9}.foot-zone[data-feet="missing"]{border-color:rgba(255,135,126,.9);opacity:1}.foot-marker{position:absolute;width:34px;height:11px;border-bottom:3px solid #61df91;border-radius:0 0 10px 10px;transform:translate(-50%,-50%);opacity:0;transition:opacity .12s}.foot-marker.visible{opacity:.85}.direction-arrow{position:absolute;z-index:7;left:50%;top:48%;transform:translate(-50%,-50%);font-size:clamp(78px,23vw,124px);font-weight:500;color:rgba(255,255,255,.86);text-shadow:0 8px 32px rgba(0,0,0,.38);pointer-events:none}.countdown{position:absolute;z-index:9;left:50%;top:48%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(18px);color:var(--deep);font-size:66px;font-weight:800;box-shadow:0 18px 60px rgba(0,0,0,.22)}.flash{position:absolute;inset:0;z-index:12;background:#fff;opacity:0;pointer-events:none}.flash.on{animation:flash .25s ease-out}@keyframes flash{0%{opacity:.82}100%{opacity:0}}.manual-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:8}
.command-card{position:relative;z-index:20;margin:-78px 14px 10px;padding:14px 16px;display:grid;grid-template-columns:42px 1fr;gap:11px;align-items:center;min-height:74px;border-radius:22px;color:#fff;transition:background .25s,border-color .25s,transform .25s}.glass-card{background:rgba(22,19,17,.52);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 16px 42px rgba(0,0,0,.18)}.command-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:21px;font-weight:750}.command-title{font-size:clamp(22px,6.1vw,31px);line-height:1.03;font-weight:780;letter-spacing:-.026em}.command-sub{margin-top:4px;font-size:13px;line-height:1.25;color:rgba(255,255,255,.70);font-weight:550}.scanner-screen[data-level="ready"] .command-card{background:rgba(25,75,45,.52);border-color:rgba(97,223,145,.32)}.scanner-screen[data-level="bad"] .command-card{background:rgba(85,36,31,.60);border-color:rgba(255,135,126,.30)}.scanner-actions{position:relative;z-index:20;padding:0 14px calc(10px + env(safe-area-inset-bottom));background:#12100f}.scanner-actions .secondary{min-height:46px;background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.12)}.tech-code{text-align:center;color:rgba(255,255,255,.52);font-size:11px;margin-top:7px}
.orientation-guard{display:none;position:fixed;inset:0;z-index:50;background:rgba(24,20,18,.94);color:#fff;place-items:center;text-align:center;padding:24px}.orientation-guard div{display:grid;gap:8px}.orientation-guard b{font-size:34px}.orientation-guard span{font-size:18px;color:rgba(255,255,255,.7)}@media (orientation:landscape) and (max-width:900px){.orientation-guard{display:grid}}
.review-screen{position:fixed;inset:0;display:grid;place-items:center;overflow:auto;padding:28px 18px;background:radial-gradient(circle at 50% 0,#fbf7f2,#eadfd5)}.complete-card{width:min(560px,100%);padding:30px 24px;border-radius:30px;text-align:center}.complete-mark{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;background:rgba(85,216,138,.16);color:#247442;font-size:38px;font-weight:800;border:1px solid rgba(85,216,138,.35)}.review-status{font-size:17px;line-height:1.4;color:var(--muted);margin-bottom:22px}.review-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.shot-card{border-radius:14px;background:rgba(255,255,255,.58);border:1px solid rgba(90,46,32,.08);padding:10px 6px}.shot-card img{display:none}.shot-name{font-size:11px;font-weight:800;color:var(--deep)}.shot-ver{font-size:10px;color:#3f7d53;margin-top:3px}.debug-wrap{text-align:left;margin-top:14px}.debug-wrap pre{white-space:pre-wrap;font-size:10px;background:#211a17;color:#f7eee8;padding:12px;border-radius:14px;overflow:auto}.complete-card .secondary{margin-top:10px}
@media(max-height:680px){.command-card{margin-top:-76px;min-height:76px;padding:12px 14px}.command-title{font-size:33px;line-height:.98}.command-sub{font-size:12px}.scanner-topbar{padding-top:calc(4px + env(safe-area-inset-top));padding-bottom:5px}}