:root{--bg:#0b1220;--fg:#e6f0ff;--accent:#00ff99;--panel:#101a2a}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px system-ui,Segoe UI,Roboto,Arial}
header{padding:24px 16px;text-align:center}
.grid{display:grid;gap:24px;padding:16px;max-width:1100px;margin:0 auto;grid-template-columns:1fr 1fr}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.scan,.pad{background:var(--panel);border-radius:12px;padding:20px}
img#qr{display:block;margin:16px auto;max-width:280px;width:100%;background:#07101d}
.pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.pad-grid button{background:#0e1a2b;color:var(--fg);border:1px solid #1f2b40;border-radius:12px;padding:18px;font-size:20px}
.pad-grid button.ok{background:var(--accent);color:#04131a;font-weight:700}
.pin{width:100%;padding:12px;border-radius:10px;border:1px solid #1f2b40;background:#0e1a2b;color:var(--fg);font-size:18px}
button.primary{background:var(--accent);border:none;color:#04131a;padding:10px 16px;border-radius:10px;font-weight:700}
.otp{font-size:28px;letter-spacing:2px;margin-top:8px}