:root{font-family:Arial,Helvetica,sans-serif;color:#fff;background:#080b11}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:#080b11}main{height:100dvh;display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}header{height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:21px;margin:0}.pill{background:#252a34;border-radius:99px;padding:7px 10px;font-size:12px;white-space:nowrap}.camera-wrap{position:relative;width:min(100%,calc(100dvh - 220px));max-width:560px;aspect-ratio:1;min-height:0;align-self:center;background:#111827;border-radius:18px;overflow:hidden}video{display:block;width:100%;height:100%;object-fit:cover}.guide{position:absolute;width:min(72%,320px);aspect-ratio:1;left:50%;top:50%;translate:-50% -50%;border:4px solid #fff;border-radius:18px;box-shadow:0 0 0 999px #0005}.scan-counter{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px auto 0;padding:12px 14px;width:min(100%,560px);background:#171c26;border:1px solid #353d4b;border-radius:14px}.counter-value{display:flex;align-items:center;gap:11px;min-width:0}.scan-counter strong{font-size:40px;line-height:1;font-variant-numeric:tabular-nums}.counter-label{color:#e5e7eb;font-size:16px;font-weight:700}.scan-counter button{flex:none;border:0;border-radius:10px;padding:11px 14px;background:#fff;color:#111827;font-size:14px;font-weight:800}.scan-counter button:active{transform:scale(.97)}.controls{min-height:50px;display:flex;align-items:center;justify-content:center;gap:10px;text-align:center}.controls p{font-size:14px;color:#c7cad1;margin:0}.controls button{border:0;border-radius:10px;padding:10px 14px;background:#fff;color:#111827;font-weight:750}.overlay{position:fixed;inset:0;display:flex;visibility:hidden;opacity:0;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:#fff;z-index:10;transition:.18s}.overlay.active{visibility:visible;opacity:1}.overlay.approved{background:#16a34a}.overlay.rejected{background:#dd1616}.symbol{width:min(48vw,220px);aspect-ratio:1;border:11px solid white;border-radius:50%;position:relative;transform:scale(0)}.active .symbol{animation:pop .7s cubic-bezier(.2,.9,.3,1.3) forwards}.approved .symbol:after{content:"";position:absolute;width:45%;height:23%;border-left:14px solid #fff;border-bottom:14px solid #fff;transform:rotate(-45deg);left:26%;top:30%}.rejected .symbol:before,.rejected .symbol:after{content:"";position:absolute;width:60%;height:14px;background:#fff;border-radius:9px;left:20%;top:47%;transform:rotate(45deg)}.rejected .symbol:after{transform:rotate(-45deg)}.overlay h2{font-size:clamp(42px,12vw,72px);margin:30px 0 8px}.overlay p{font-size:clamp(18px,5vw,26px);margin:0}.overlay small{position:absolute;bottom:max(28px,env(safe-area-inset-bottom))}@keyframes pop{0%{transform:scale(0)}55%{transform:scale(1.2)}75%{transform:scale(.92)}100%{transform:scale(1)}}
.camera-gate{position:fixed;inset:0;z-index:20;background:#080b11;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px}.camera-gate.hidden{display:none}.camera-gate img{width:96px;height:96px}.camera-gate h2{font-size:25px;margin:0}.camera-gate button{border:0;border-radius:14px;padding:15px 24px;background:#fff;color:#111827;font-size:17px;font-weight:800}