:root{
  --bg:#0b0b0d;
  --card:#141416;
  --red:#e11d2f;
  --red2:#ff3b4a;
  --text:#e6e6e6;
  --muted:#9aa0a6;
}

*{box-sizing:border-box}

body{
  margin:0;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at top,#1a1a1a,#050505);
  font-family:'Segoe UI',sans-serif;
  color:var(--text);
}

.auth-card{
  width:360px;
  background:var(--card);
  padding:32px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow:0 0 40px rgba(255,0,0,.25);
  animation:fadeUp .8s ease;
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}

.auth-card h2{
  margin:0 0 20px;
  text-align:center;
  color:var(--red);
  letter-spacing:1px;
}

.auth-card input{
  width:100%;
  padding:12px;
  margin-bottom:14px;
  background:#0f0f11;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:white;
  transition:.25s;
}

.auth-card input:focus{
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 2px rgba(225,29,47,.25);
}

.auth-card button{
  width:100%;
  padding:12px;
  background:linear-gradient(135deg,var(--red),var(--red2));
  border:none;
  border-radius:8px;
  color:white;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.auth-card button:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(255,0,0,.35);
}

.auth-card a{
  color:var(--red2);
  text-decoration:none;
}