:root{--bg:#05070a;--fg:#d7fff0;--acc:#00ffa6;--red:#ff2d55;--dim:#5b7a70}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:"SF Mono",Menlo,Consolas,monospace}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);z-index:9}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,#000 130%)}
.wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:18px}
.logo{letter-spacing:.5em;color:var(--dim);font-size:.8rem}
h1{margin:0;font-size:clamp(2.2rem,9vw,7rem);letter-spacing:.08em;color:var(--red);text-shadow:0 0 24px var(--red);animation:flick 3s infinite}
.granted h1{color:var(--acc);text-shadow:0 0 30px var(--acc);animation:none}
@keyframes flick{0%,92%,100%{opacity:1}94%{opacity:.4}96%{opacity:.9}98%{opacity:.3}}
.sub{color:var(--dim);max-width:40ch;line-height:1.5}
.box{border:1px solid #17352b;background:rgba(0,255,166,.04);padding:18px;max-width:560px;width:100%;text-align:left;border-radius:6px}
.box h2{margin:0 0 10px;font-size:.85rem;letter-spacing:.2em;color:var(--acc)}
.box li{margin:8px 0;line-height:1.45}
.digits{display:flex;gap:10px;justify-content:center}
.digits input{width:3.4rem;height:4.2rem;font:inherit;font-size:2rem;text-align:center;background:#000;color:var(--acc);border:1px solid var(--acc);border-radius:6px;outline:none;caret-color:var(--acc)}
.digits input:focus{box-shadow:0 0 16px var(--acc)}
button{font:inherit;letter-spacing:.2em;background:transparent;color:var(--acc);border:1px solid var(--acc);padding:14px 28px;border-radius:6px;cursor:pointer}
button:hover{background:var(--acc);color:#000}
button.ghost{border-color:#17352b;color:var(--dim);padding:8px 14px;font-size:.75rem}
.err{color:var(--red);min-height:1.4em}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
#qr{background:#fff;padding:12px;border-radius:6px}
.hidden{display:none!important}
.glitch{animation:glitch .6s steps(2) 3}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-6px,2px);filter:hue-rotate(90deg)}50%{transform:translate(6px,-2px)}100%{transform:none}}