:root{
  --bg:#09101e; --text:#f6f8ff; --muted:#94a2c6; --accent:#4b82ff; --accent2:#6aa0ff;
  --good:#22c55e; --bad:#ef4444; --shadow:0 18px 44px rgba(0,0,0,.38);
  --safe-bottom:max(14px,env(safe-area-inset-bottom)); --safe-top:max(16px,env(safe-area-inset-top));
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(circle at top,#1a2b58 0%,#0b1020 38%,#070b16 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.hidden{display:none!important;pointer-events:none!important}
.card{width:min(100%,430px);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow);backdrop-filter:blur(16px);text-align:center;padding:34px 22px 26px;position:relative;z-index:2}
h1{margin:0 0 14px;font-size:clamp(34px,10vw,52px);letter-spacing:.01em;line-height:1.02}
.barcode-icon{width:120px;height:120px;margin:0 auto 22px;display:block;filter:drop-shadow(0 10px 18px rgba(45,114,255,.28))}
.btn,.sheet-btn,.update-banner__btn{border:none;border-radius:20px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 12px 26px rgba(75,130,255,.34);cursor:pointer}
.btn{width:100%;min-height:66px;font-size:21px;letter-spacing:.01em}
.settings-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:max(28px, calc(env(safe-area-inset-bottom) + 28px));min-height:40px;padding:8px 18px;border:none;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);cursor:pointer;backdrop-filter:blur(12px);z-index:5}
.splash-version{position:fixed;right:14px;bottom:max(12px, calc(env(safe-area-inset-bottom) + 8px));font-size:11px;color:rgba(255,255,255,.35);z-index:4;pointer-events:none}

.sheet{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.46);display:flex;align-items:flex-end;justify-content:center;padding:16px;pointer-events:auto}
.sheet-card{width:min(100%,460px);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.10);box-shadow:var(--shadow);backdrop-filter:blur(16px);padding:18px;margin-bottom:calc(var(--safe-bottom) + 8px);text-align:left}
.sheet-title{margin:4px 0 12px;font-size:22px;font-weight:800}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}
.toggle-label{font-size:17px;font-weight:700}
.toggle-sub{color:var(--muted);font-size:13px;margin-top:4px;line-height:1.4}
.switch{position:relative;width:58px;height:34px;flex:0 0 auto}
.switch input{display:none}
.slider{position:absolute;inset:0;cursor:pointer;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.10);border-radius:999px;transition:.18s ease}
.slider:before{content:"";position:absolute;width:26px;height:26px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.18s ease;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.switch input:checked + .slider{background:linear-gradient(180deg,var(--accent2),var(--accent));border-color:transparent}
.switch input:checked + .slider:before{transform:translateX(24px)}
.sheet-btn{min-height:50px;padding:0 18px;font-size:16px}
.sheet-btn.secondary{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);box-shadow:none}
.row{display:flex;gap:10px;margin-top:12px}
.row .sheet-btn{flex:1}
.number-input{width:100%;margin-top:14px;min-height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;padding:14px;font-size:18px;outline:none;letter-spacing:.04em}

#scannerScreen{padding:0;justify-content:flex-start;background:#03050a}
.camera-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
video{width:100%;height:100%;object-fit:cover;background:#000;transform:translateZ(0)}
.overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.48),rgba(0,0,0,.08) 18%,rgba(0,0,0,.08) 80%,rgba(0,0,0,.56));pointer-events:none}
.pill{position:absolute;top:var(--safe-top);left:16px;z-index:5;max-width:78vw;background:rgba(9,12,24,.58);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:10px 14px;font-size:14px;color:#f6f8ff;backdrop-filter:blur(12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.version-indicator{position:absolute;top:calc(var(--safe-top) + 6px);right:12px;font-size:11px;color:rgba(255,255,255,.55);z-index:6;letter-spacing:.04em}
.scan-area{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:min(80vw,340px);aspect-ratio:1.08;border-radius:24px;border:2px solid rgba(255,255,255,.72);box-shadow:0 0 0 999px rgba(0,0,0,.24);overflow:hidden;pointer-events:none}
.scan-corners:before,.scan-corners:after,.scan-corners span:before,.scan-corners span:after{content:"";position:absolute;width:28px;height:28px;border-color:#fff;border-style:solid}
.scan-corners:before{left:-2px;top:-2px;border-width:4px 0 0 4px;border-top-left-radius:18px}
.scan-corners:after{right:-2px;top:-2px;border-width:4px 4px 0 0;border-top-right-radius:18px}
.scan-corners span:before{left:-2px;bottom:-2px;border-width:0 0 4px 4px;border-bottom-left-radius:18px}
.scan-corners span:after{right:-2px;bottom:-2px;border-width:0 4px 4px 0;border-bottom-right-radius:18px}
.scan-line{position:absolute;left:7%;right:7%;top:9%;height:3px;border-radius:999px;background:linear-gradient(90deg,rgba(105,165,255,0),rgba(105,165,255,1),rgba(105,165,255,0));box-shadow:0 0 14px rgba(105,165,255,.95);animation:scanMove 1.75s ease-in-out infinite}
@keyframes scanMove{0%{transform:translateY(0)}50%{transform:translateY(calc(min(80vw,340px) * .73))}100%{transform:translateY(0)}}
.status-dot{position:absolute;right:18px;bottom:calc(var(--safe-bottom) + 8px);width:11px;height:11px;border-radius:50%;z-index:8;background:var(--bad);box-shadow:0 0 0 2px rgba(255,255,255,.16),0 0 14px currentColor;color:var(--bad)}
.status-dot.good{background:var(--good);color:var(--good)}
.detect-btn{position:absolute;left:18px;bottom:calc(var(--safe-bottom) + 2px);z-index:8;min-height:36px;padding:8px 12px;border:none;border-radius:999px;font-size:13px;font-weight:700;color:#fff;background:rgba(9,12,24,.80);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(12px);box-shadow:var(--shadow);cursor:pointer}
.scan-btn{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-bottom) + 2px);z-index:8;min-width:132px;min-height:48px;padding:10px 20px;border:none;border-radius:999px;font-size:18px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 12px 26px rgba(75,130,255,.34);cursor:pointer}
.flash{position:absolute;inset:0;opacity:0;pointer-events:none;z-index:7;background:rgba(120,255,182,.18)}
.flash.active{animation:flash .34s ease-out}
@keyframes flash{0%{opacity:0}28%{opacity:1}100%{opacity:0}}
.notice{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-bottom) + 36px);z-index:40;background:rgba(9,12,24,.88);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:10px 14px;font-size:14px;box-shadow:var(--shadow);opacity:0;transition:opacity .18s ease;max-width:84vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.notice.show{opacity:1}
.notice.bump{animation:noticeBump .55s ease-out}
@keyframes noticeBump{0%{transform:translateX(-50%) scale(.96);opacity:0}28%{transform:translateX(-50%) scale(1.03);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
.browser-transition{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:0;transition:opacity .12s ease;background:rgba(245,248,255,0)}
.browser-transition.active{opacity:1}
.browser-transition .veil{position:absolute;inset:0;backdrop-filter:blur(3px);background:rgba(245,248,255,.10)}
.browser-transition .topbar{position:absolute;left:0;right:0;top:0;height:calc(var(--safe-top) + 18px);background:rgba(250,252,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.08)}
.browser-transition .progress{position:absolute;top:calc(var(--safe-top) + 15px);left:0;height:3px;width:0%;background:linear-gradient(90deg,#6aa0ff,#4b82ff);box-shadow:0 0 10px rgba(75,130,255,.35)}
.browser-transition.active .progress{animation:loadBar .17s ease-out forwards}
@keyframes loadBar{from{width:0%}to{width:100%}}
.transition-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:10px 14px;border-radius:999px;font-size:14px;color:#0f172a;background:rgba(255,255,255,.78);border:1px solid rgba(15,23,42,.08);box-shadow:0 10px 28px rgba(0,0,0,.10);backdrop-filter:blur(10px)}
.update-banner{position:absolute;left:50%;bottom:max(20px,calc(env(safe-area-inset-bottom) + 20px));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(9,12,24,.92);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 44px rgba(0,0,0,.38);backdrop-filter:blur(12px);color:#fff}
.update-banner__text{font-size:14px;font-weight:600;white-space:nowrap}
.update-banner__btn{min-height:36px;padding:8px 14px;border-radius:12px;font-size:14px}