:root{--bg:#0b1220;--fg:#e6f0ff;--accent:#00ff99;--panel:#101a2a;--muted:#9fb0cc}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--fg);font:16px system-ui}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px 40px}.hero{padding:36px 16px;text-align:center}
.hero h1{line-height:1.15;margin:0 0 8px}.sub{color:var(--muted);margin:6px 0 16px}
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.badges span{border:1px solid #183152;background:#0f1a2b;border-radius:999px;padding:6px 10px;color:#b9c7e3;font-size:13px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}.one{display:grid;grid-template-columns:1fr}@media(max-width:900px){.two{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid #1b2740;border-radius:16px;padding:18px}
.qr-wrap{display:flex;justify-content:center;align-items:center;min-height:260px}
.qr-wrap img{max-width:260px;width:100%;background:#07101d;border-radius:12px;border:1px solid #14203a}
.hint{color:#7f94ba}.pad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.pad-grid button{background:#0e1a2b;color:var(--fg);border:1px solid #1f2b40;border-radius:12px;padding:18px;font-size:20px;touch-action:manipulation}
.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:#fff;font-size:18px}
.primary{background:var(--accent);border:none;color:#04131a;padding:12px 18px;border-radius:12px;font-weight:700;cursor:pointer}
.status{margin-top:10px;color:#b9c7e3}.otp{font-size:28px;letter-spacing:2px;margin-top:8px}.foot{color:#7f94ba;text-align:center;padding:16px}