:root{--bg:#0b1320;--panel:#121a28;--accent:#00ff99;--accentText:#001b0c;--muted:#9fb3c8}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:#eaf0ff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial}
main{max-width:1100px;margin:0 auto;padding:28px}
h1{margin:0 0 8px;font-size:42px;line-height:1.1;text-shadow:0 0 10px rgba(0,255,153,.25),0 0 20px rgba(0,255,153,.15)}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 24px}
.badges span{font-size:12px;padding:6px 10px;border-radius:999px;background:#0e1b2b;color:#b9d7c9;border:1px solid rgba(0,255,153,.25)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:var(--panel);border-radius:14px;padding:18px;box-shadow:inset 0 0 0 1px rgba(0,255,153,.1)}
.panel h2{margin:0 0 12px}
.qr-box{display:grid;place-items:center;height:340px;border:1px dashed rgba(0,255,153,.25);border-radius:12px;background:linear-gradient(180deg,rgba(0,255,153,.05),transparent)}
#qrCanvas{width:280px;height:280px;border-radius:12px;box-shadow:0 0 0 6px rgba(0,255,153,.15),0 10px 40px rgba(0,0,0,.35)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.k{padding:18px;border-radius:12px;background:#0f1724;color:#d8e7ff;text-align:center;font-size:22px;border:1px solid rgba(0,255,153,.08);user-select:none}
.k:active{transform:scale(.98)}
.k.go{background:var(--accent);color:var(--accentText);font-weight:700}
input.pin{width:100%;padding:14px;border-radius:10px;border:1px solid rgba(0,255,153,.25);background:#0f1724;color:#d8e7ff;margin-top:12px;font-size:16px}
a.btn{display:inline-block;margin-top:14px;padding:10px 16px;border:2px solid var(--accent);border-radius:30px;color:var(--accent);text-decoration:none;font-weight:600}
a.btn:hover{background:var(--accent);color:var(--accentText)}
footer{opacity:.7;text-align:center;margin-top:26px}