:root{
  --bg:#0a0708; --card:#141013; --edge:#3a1418;
  --fg:#f3e9ea; --dim:#9a7b7f; --accent:#e50914; --accent-dim:#8a0a10;
  --gold:#ffd166;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -10%,#25070a 0%,var(--bg) 60%);
  color:var(--fg);font-family:"Helvetica Neue",Arial,system-ui,sans-serif;line-height:1.5}
.center{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.card{width:100%;max-width:360px;background:var(--card);
  border:1px solid var(--edge);border-radius:14px;padding:36px 30px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(229,9,20,.08);text-align:center}

/* logo */
.logo{width:96px;height:96px;display:block;margin:0 auto 6px;
  filter:drop-shadow(0 0 14px rgba(229,9,20,.35))}
.wordmark{font-weight:800;letter-spacing:.22em;font-size:1.15rem;margin-bottom:26px;
  color:#fff}

/* form */
form{text-align:left}
label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:14px 0 6px}
input{width:100%;background:#0c090a;border:1px solid var(--edge);color:var(--fg);
  padding:11px 12px;border-radius:8px;font:inherit}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(229,9,20,.2)}
button{width:100%;margin-top:22px;background:var(--accent);color:#fff;border:none;
  padding:12px;border-radius:8px;font:inherit;font-weight:700;letter-spacing:.04em;
  cursor:pointer;transition:background .15s,box-shadow .15s}
button:hover{background:#ff1620;box-shadow:0 0 18px rgba(229,9,20,.5)}
.alt{margin-top:20px;font-size:.85rem;color:var(--dim);text-align:center}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.error{background:rgba(229,9,20,.12);border:1px solid var(--accent-dim);
  color:#ff8087;padding:9px 12px;border-radius:8px;font-size:.85rem;margin-bottom:6px}
.note{background:rgba(255,255,255,.05);border:1px solid var(--edge);
  color:var(--dim);padding:9px 12px;border-radius:8px;font-size:.85rem;margin-bottom:6px}

/* dashboard */
.dash{text-align:center}
.dash p{color:var(--dim)}
.dash b{color:var(--fg)}
.dash .link{display:inline-block;margin-top:14px;font-size:.85rem}
.muted{font-size:.9rem}
.granted{font-weight:800;letter-spacing:.14em;color:var(--accent);font-size:1.1rem;
  text-shadow:0 0 14px rgba(229,9,20,.6);margin-bottom:6px}
.win .flag{font-size:1.05rem;font-weight:700;color:var(--gold);
  text-shadow:0 0 12px rgba(255,209,102,.5);word-break:break-all;margin-top:14px}

/* register: escape hint + live block visualizer */
.card-wide{max-width:520px}
.hint{font-size:.78rem;color:var(--dim);margin:6px 0 0}
.hint code{background:#0c090a;border:1px solid var(--edge);border-radius:4px;
  padding:1px 5px;color:var(--gold);font-size:.9em}
.viz{margin-top:22px;text-align:left}
.viz-label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.blocks{display:flex;flex-wrap:wrap;gap:8px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
.block{display:flex;flex-wrap:wrap;border:1px solid var(--accent-dim);border-radius:7px;
  padding:5px;background:rgba(229,9,20,.06);gap:2px}
.block.alt{border-color:#3a2a14;background:rgba(255,209,102,.06)}
.block.partial{border-style:dashed;opacity:.8}
.byte{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:22px;
  padding:0 2px;border-radius:3px;background:#0c090a;color:var(--fg);font-size:.82rem;line-height:1}
.byte.space{color:var(--dim)}
.byte.raw{color:var(--gold);background:#1a1206;font-size:.72rem}