* { box-sizing: border-box; }
html,body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#111; color:#eee; }
.page, .scan { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.card { width:min(520px, 92vw); background:#1a1a1a; padding:24px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.4); }
h1, h2 { margin:0 0 16px; }
label { display:block; margin:12px 0; }
input { width:100%; padding:12px; border-radius:10px; border:1px solid #333; background:#0f0f0f; color:#eee; }
button { width:100%; padding:14px; margin-top:12px; border:0; border-radius:12px; background:#3a7afe; color:#fff; font-weight:700; }
.alert { padding:10px 12px; border-radius:10px; margin-bottom:10px; }
.alert-error { background:#3b0a0a; color:#ffbdbd; }
.alert-ok { background:#0a3b17; color:#bfffcd; }

.topbar, .bottombar { position:fixed; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.topbar { top:0; }
.bottombar { position:fixed; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:10px; align-items:center; padding:10px 14px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
main { width:100%; padding:64px 10px 140px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.video-wrap { position:relative; width:min(720px, 96vw); aspect-ratio: 3/4; background:#000; border-radius:16px; overflow:hidden; border:1px solid #222; }
video { width:100%; height:100%; object-fit:cover; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); }
.code-box { width:min(720px, 96vw); padding:10px; text-align:center; border:1px dashed #333; border-radius:10px; }
#scanBtn { width:min(720px, 92vw); }