:root{
  --bg:#0b1321; --panel:#121a2b; --text:#e9f0ff; --muted:#91a3c4;
  --brand:#5ad67d; --brand-press:#2fbd58; --ring:#7cf0aa;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:radial-gradient(1000px 600px at 10% -10%, #0d1b3a 0%, #0b1321 40%) no-repeat #0b1321;
  color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  display:grid;place-items:center;padding:24px
}
.card{
  width:min(820px,92vw);background:linear-gradient(180deg,#121a2b 0%,#0f1726 100%);
  border:1px solid #1f2a44;border-radius:20px;padding:28px 28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.45)
}
.header{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.logo{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(145deg,#1f6fff,#4bd3ff);font:700 28px/1.1 'Inter',system-ui;color:#00122a;
  box-shadow:0 8px 20px rgba(34,151,255,.35)
}
h1{margin:0;font-size:34px;letter-spacing:.3px}
.subtitle{color:var(--muted);margin:6px 0 18px}
.btn{
  display:flex;align-items:center;gap:12px;width:100%;padding:16px 18px;border-radius:12px;
  border:1px solid #203050;background:#0e1730;color:#deebff;text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(124,240,170,.08),0 6px 20px rgba(15,30,60,.35)
}
.btn:focus{outline:2px solid var(--ring);outline-offset:2px}
.btn span.dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:#7fd1ff;box-shadow:0 0 12px #7fd1ff}
.btn-primary{margin-top:18px;background:linear-gradient(180deg,var(--brand),#3fcb70);border-color:#2aa454;
  color:#00220e;font-weight:700;justify-content:center}
.btn-primary:hover{transform:translateY(-1px);background:linear-gradient(180deg,#69e28a,var(--brand));border-color:#2aa454}
.footer{margin-top:20px;color:#6b82aa;font-size:14px;text-align:center}
small a{color:#9ec4ff}