:root{
  --accent:#9a7bd6;
  --accent-dark:#8765b8;
  --bg:linear-gradient(135deg,rgba(20,20,30,0.85),rgba(40,20,50,0.85)),url("../images/background.jpeg");
  --error:#ff4c4c;
  --success:#4cd964;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:#000;color:#fff}
.overlay{position:fixed;inset:0;background:var(--bg);background-size:cover;filter:grayscale(.12) contrast(.9) brightness(.7)}
.form-container{position:relative;z-index:2;background:rgba(20,20,30,0.85);max-width:420px;margin:12vh auto;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,0.7);backdrop-filter:blur(8px)}
h1{margin-bottom:1.2rem;font-size:1.6rem;letter-spacing:1px}
.form-group{text-align:left;margin-bottom:1rem}
label{display:block;margin-bottom:.5rem;font-size:.88rem;opacity:.9}
input{width:100%;padding:.8rem;border-radius:8px;border:none;background:#2b2b2b;color:#fff;font-size:1rem}
input:focus{outline:none;box-shadow:0 0 10px rgba(154,123,214,0.35)}
.btn{width:100%;padding:.9rem;border-radius:10px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-weight:700;margin-top:8px}
.btn-full{display:block;width:100%;margin:0 auto}

.error-message{
  font-size:.95rem;
  margin-bottom:8px;
  color:var(--error);
  text-align:center;
  opacity:0;
  transform:translateY(6px);
  transition:.3s;
}
.error-message.show{
  opacity:1;
  transform:translateY(0);
}

.success{
  display:none;
  flex-direction:column;
  align-items:center;
  padding:2rem;
}
.circle{
  width:80px;
  height:80px;
  border-radius:50%;
  border:4px solid var(--success);
  display:flex;
  align-items:center;
  justify-content:center;
  animation:scaleIn .45s forwards;
}
.circle svg path{
  stroke:#4cd964;
  stroke-width:4;
  fill:none;
  stroke-linecap:round;
}
@keyframes scaleIn{0%{transform:scale(0)}100%{transform:scale(1)}}
.success-text{margin-top:12px;color:var(--success);font-weight:700}