:root{
  --bg:#0f172a;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#14b8a6;
  --accent-2:#0d9488;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 20% 10%, #1f2937 0%, var(--bg) 60%);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.card{
  width:min(420px, 100%);
  background:linear-gradient(180deg, #111827 0%, #0b1220 100%);
  border:1px solid #1f2937;
  border-radius:18px;
  padding:28px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo svg{width:44px;height:44px}
.logo h1{margin:0;font-size:22px;letter-spacing:.5px}
.subtitle{color:var(--muted);margin:8px 0 20px}
form{display:grid;gap:14px}
label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
input{
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #273244;
  background:#0b1220;
  color:var(--text);
  font-size:15px;
}
input:focus{outline:2px solid rgba(20,184,166,.35);border-color:var(--accent)}
button{
  margin-top:8px;
  padding:12px 14px;
  border:0;
  border-radius:12px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#052e2b;
  font-weight:700;
  cursor:pointer;
}
button:hover{filter:brightness(1.05)}

.error{
  margin:10px 0 16px;
  padding:10px 12px;
  border-radius:10px;
  background:#3b0d0d;
  border:1px solid #7f1d1d;
  color:#fecaca;
  font-size:14px;
}