:root{
  --bg:#0b1020;
  --card:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --shadow:0 14px 34px rgba(0,0,0,.35);
  --ok:#20c997;
  --err:#ff5c7a;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(78,110,255,.35), transparent 60%),
    radial-gradient(800px 450px at 85% 25%, rgba(255,77,210,.22), transparent 60%),
    var(--bg);
}

a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:18px auto;padding:0 14px}
@media (min-width:768px){ .wrap{margin:24px auto;padding:0 18px} }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.14)}
.btn.primary{background:rgba(78,110,255,.25);border-color:rgba(78,110,255,.40)}
.btn.primary:hover{background:rgba(78,110,255,.33)}
.btn.ghost{background:rgba(0,0,0,.20)}
.btn.ghost:hover{background:rgba(0,0,0,.28)}

.alert{
  margin:10px 0;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
}
.alert.err{border-color:rgba(255,92,122,.45); color:var(--err)}
.alert.ok{border-color:rgba(32,201,151,.35); color:var(--ok)}