*{box-sizing:border-box}
:root{
  --bg:#ffffff;
  --text:#111214;
  --muted:#44464a;
  --brand:#5f7aff;
  --glass:rgba(255,255,255,0.6);
  --shadow:0 20px 60px rgba(0,0,0,0.08);
}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text); background:var(--bg); display:grid; place-items:center; overflow:hidden;
}
.bg{position:fixed; inset:0; background:radial-gradient(1200px 1200px at 10% -10%, #eaf0ff 0%, transparent 50%), radial-gradient(1200px 1000px at 110% 20%, #fff1e8 0%, transparent 50%)}
.blur-circle{position:fixed; filter:blur(80px); opacity:.6}
.c1{width:420px; height:420px; background:#e0e7ff; top:-120px; left:-90px}
.c2{width:480px; height:480px; background:#ffe4d5; bottom:-160px; right:-120px}

.card{
  position:relative; width:min(680px, 92vw); border-radius:24px; padding:28px; background:var(--glass); backdrop-filter:blur(18px);
  box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.06);
}
.header{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center}
.logo-pill{padding:6px 12px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,0.06); font-weight:700; font-size:14px}
.title{margin:0; font-size:28px; font-weight:800; letter-spacing:-0.02em}
.subtitle{margin:0; color:var(--muted)}
.brand{color:var(--brand)}

.state{display:flex; flex-direction:column; align-items:center; gap:16px; padding:22px 10px}
.message{margin:0; color:var(--muted); text-align:center}
.actions{display:flex; gap:10px}
.hidden{display:none}
.btn{appearance:none; border:0; border-radius:14px; padding:12px 16px; font-weight:700; background:var(--text); color:#fff; cursor:pointer; text-decoration:none}
.btn.ghost{background:transparent; color:var(--text); border:1px solid rgba(0,0,0,0.1)}

.spinner{width:28px; height:28px; border-radius:50%; border:3px solid rgba(0,0,0,0.08); border-top-color:var(--text); animation:spin 1s linear infinite}
[aria-hidden="true"]{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.footer{margin-top:8px; text-align:center; color:#555}
.footer small{opacity:.75}