:root{
  --primary:#673DE6;
  --primary-light:#EEF2FF;
  --text:#1F2937;
  --muted:#6B7280;
  --bg:#F8FAFF;
  --white:#ffffff;
  --border:#E5E7EB;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Inter, sans-serif;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

/* CENTER WRAPPER */
.login-wrapper{
  width:100%;
  padding:20px;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* CARD */
.login-card{
  background:var(--white);
  width:100%;
  max-width:400px;
  padding:40px 30px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  border:1px solid var(--border);
  text-align:center;
}

.login-card h2{
  margin:0;
  color:var(--primary);
}

.subtitle{
  color:var(--muted);
  margin-bottom:25px;
}

/* FORM */
.form-group{
  margin-bottom:18px;
}

input{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:14px;
  outline:none;
  transition:0.2s;
}

input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-light);
}

/* BUTTON */
button{
  width:100%;
  padding:12px;
  border:none;
  background:var(--primary);
  color:white;
  border-radius:8px;
  font-size:15px;
  cursor:pointer;
  transition:0.3s;
}

button:hover{
  opacity:0.9;
}

/* ERROR */
.error{
  background:#FEE2E2;
  color:#B91C1C;
  padding:10px;
  border-radius:6px;
  margin-bottom:15px;
  font-size:14px;
}

/* MOBILE OPTIMIZATION */
@media(max-width:480px){

  .login-card{
    padding:30px 20px;
  }

}