@font-face{font-family:Fredoka;src:url(/fonts/fredoka.ttf) format("truetype");font-weight:300 700;font-display:swap}
:root{--bg:#0d1117;--card:#141a23;--card2:#1a222e;--line:#263142;--text:#e8eef7;--muted:#98a5b8;--dim:#677489;--acc:#4aa8ff;--acc2:#9ad2ff;--ok:#8fb573;--bad:#e5484d;--f:Fredoka,system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;display:grid;place-items:start center;padding:56px 16px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 50% at 50% 115%,rgba(61,155,255,.16),transparent 70%);z-index:-1}
a{color:var(--acc2)}
.caixa{width:100%;max-width:640px}
.marca{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);font:600 22px var(--f);margin-bottom:36px}
.marca canvas{width:38px;height:33px;image-rendering:pixelated}
h1{font:600 clamp(28px,5vw,38px)/1.15 var(--f);margin:0 0 12px}
h2{font:600 20px var(--f);margin:28px 0 8px}
p{color:var(--muted);margin:0 0 14px}
.cartao{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;margin-top:22px}
code.chave{display:block;font:13px/1.5 Consolas,"Cascadia Mono",monospace;background:#0a0e14;border:1px solid var(--line);border-radius:12px;padding:14px;word-break:break-all;color:#d3dcea;user-select:all}
.acoes{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 16px var(--f);text-decoration:none;border-radius:14px;padding:12px 20px;border:1px solid transparent;cursor:pointer;color:var(--text);background:none}
.btn.main{background:linear-gradient(180deg,#4aa8ff,#1f74e0);color:#fff}
.btn.alt{background:var(--card2);border-color:var(--line)}
.btn:disabled{opacity:.6;cursor:default}
.carregando{width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--acc);animation:gira 1s linear infinite;display:inline-block;vertical-align:-4px;margin-right:10px}
@keyframes gira{to{transform:rotate(360deg)}}
form{display:grid;gap:12px}
input{font:16px system-ui,"Segoe UI",sans-serif;color:var(--text);background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;outline:0}
input:focus{border-color:var(--acc)}
.ok{color:var(--ok)}
.ruim{color:var(--bad)}
ul{color:var(--muted);padding-left:20px}
li{margin:4px 0}
.voltar{display:inline-block;margin-top:30px;font-size:14px}