:root { --bg: #0b1220; --card:#0f192b; --ink:#eaf0ff; --muted:#9fb2c7; --neon:#00ff99; }
*{box-sizing:border-box} body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,rgba(0,255,153,.08),transparent),var(--bg);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
.wrap{max-width:1100px;margin:28px auto;padding:20px}
.panel{background:var(--card);border:1px solid #ffffff22;border-radius:16px;box-shadow:0 0 1px #1E4D39,0 0 20px rgba(0,255,153,.08);padding:36px}
h1{margin:0 0 10px;text-align:center;font-size:40px}
h1 .bar{display:block;width:200px;height:3px;margin:10px auto 0;background:var(--neon);filter:drop-shadow(0 0 10px var(--neon))}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.box{background:#0c1624;border:1px solid #ffffff22;border-radius:12px;padding:18px;box-shadow:0 0 1px #1E4D39,0 0 14px rgba(0,255,153,.05)}
.label{font-weight:700;color:#bcd0e6;margin-bottom:8px}
#qr{display:flex;align-items:center;justify-content:center;min-height:180px;border-radius:12px;border:1px dashed #00ff9940;background:linear-gradient(180deg,#0E1A2A,#0A1422)}
.qr-canvas{filter:drop-shadow(0 0 12px rgba(0,255,153,.45))}
.kp{display:grid;grid-template-columns:repeat(3,92px);gap:12px;justify-content:center}
.kp button{height:64px;border-radius:12px;border:1px solid #1f2b44;background:#0e1627;color:#eaf0ff;font-size:20px;font-weight:700;cursor:pointer}
.kp button:hover{outline:2px solid rgba(0,255,153,.35)}
.code{display:flex;gap:8px;justify-content:center;margin-bottom:12px}
.code .cell{width:48px;height:48px;border-radius:10px;border:1px solid #1f2b44;background:#0e1627;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}
.footer{margin:16px auto 0;text-align:center;color:#b0bec5}
.footer .neon{color:var(--neon)}
@media (max-width:900px){.grid{grid-template-columns:1fr}}