:root{--bg:#0b1220;--panel:#0c1624;--ink:#eaf0ff;--muted:#b0bec5;--neon:#00ff99;--ink-dark:#001b0c;}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:var(--ink);
background:radial-gradient(1200px 600px at 50% -200px,#11303b33,transparent 60%),var(--bg);}
.wrap{max-width:1100px;margin:0 auto;padding:28px 18px 80px;}
.card{background:var(--panel);border:1px solid #ffffff16;border-radius:16px;padding:28px;box-shadow:0 0 1.5px #1E4D39,0 0 20px rgba(0,255,153,.08);}
h1{text-align:center;font-size:2.2rem;margin:18px 0 10px;font-weight:900;letter-spacing:.2px;
background:linear-gradient(90deg,#00ffcc,#00ff99);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.h-rule{width:220px;height:3px;margin:8px auto 12px;border-radius:2px;background:linear-gradient(90deg,transparent 0 4%,var(--neon),transparent 96%);
box-shadow:0 0 16px rgba(0,255,153,.45);}
.sub{text-align:center;color:var(--muted);font-size:1.05rem;margin-bottom:18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.panel{background:#0c1624aa;border:1px solid #ffffff12;border-radius:14px;padding:18px}
.panel h3{margin:0 0 10px 0;font-weight:800;color:#dff7ee}
.muted{color:var(--muted)}
.qr-box{display:flex;align-items:center;justify-content:center;height:220px;border-radius:12px;
background:radial-gradient(60% 60% at 50% 40%, rgba(0,255,153,.07), transparent 70%), #0e1a2a;border:1px dashed rgba(0,255,153,.35);}
#qr canvas,#qr img{max-width:100%;height:auto;image-rendering:pixelated}
.qr-link{display:block;margin-top:10px;text-align:left}.qr-link a{color:var(--neon)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;}
.key{background:#0f1b2c;border:1px solid #1f324f;border-radius:12px;padding:16px;text-align:center;font-size:1.25rem;cursor:pointer;user-select:none;
transition:.15s transform,.15s box-shadow,.15s border-color;color:#dff7ee;}
.key:hover{transform:translateY(-2px);border-color:#2c465c;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.key.wide{grid-column:span 2}.pin-box{display:flex;gap:10px;margin:0 0 14px}
.pin{flex:1;height:44px;background:#0c1624;border:1px solid #1f324f;border-radius:10px;text-align:center;font-weight:800;font-size:1.15rem;
display:flex;align-items:center;justify-content:center;color:#9ad8c1}
.cta{display:inline-block;margin-top:16px;padding:12px 18px;border-radius:999px;background:var(--neon);color:var(--ink-dark);font-weight:800;text-decoration:none;
box-shadow:0 10px 22px rgba(0,255,153,.2)}
.footer{text-align:center;color:#9bb3c4;margin-top:24px}.footer .green{color:var(--neon)}small.code{color:#9ad8c1}