:root{--bg:#0b1220;--fg:#e6f0ff;--accent:#00ff99;--panel:#101a2a;--muted:#9fb0cc;--qrbg:#07101d}
*{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}@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{width:260px;height:260px;max-width:100%;background:var(--qrbg);border-radius:12px;border:1px solid #14203a;image-rendering:pixelated}
.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;user-select:none}
.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}
.result{margin-top:10px;padding:10px;border-radius:10px;border:1px solid #1f2b40;background:#0e1a2b;color:#9fd;display:none}
.result.show{display:block}
.result.good{border-color:#00a86b;background:#04281f;color:#8ff5ca}
.result.bad{border-color:#5b2232;background:#240e14;color:#ffb8c7}
.foot{color:#7f94ba;text-align:center;padding:16px}