/* ================= AUTH THEME ================= */
:root{
  --bg1:#f4f6fb;
  --bg2:#eef2ff;
  --card:#ffffff;
  --border:#e6e8f0;
  --text:#1e1b4b;
  --muted:#6b7280;

  --primary:#6366f1;
  --secondary:#14b8a6;
  --danger:#ef4444;
}

/* Page wrapper */
.auth-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1200px 600px at 10% -10%, #c7d2fe55, transparent),
    radial-gradient(1000px 500px at 90% 10%, #99f6e455, transparent),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  padding:20px;
}

/* Card */
.auth-card{
  width:100%;
  max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:36px 32px 34px;
  box-shadow:0 30px 60px rgba(99,102,241,.15);
  animation:fadeUp .6s ease;
}

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

/* Header */
.auth-header{
  text-align:center;
  margin-bottom:26px;
}
.auth-header h1{
  font-size:1.9rem;
  margin:0;
  font-weight:700;
  background:linear-gradient(135deg,#4f46e5,#14b8a6);
  /* -webkit-background-clip:text; */
  -webkit-text-fill-color:transparent;
}
.auth-header p{
  margin-top:10px;
  font-size:.95rem;
  color:var(--muted);
}

/* Inputs */
.auth-group{
  margin-bottom:18px;
}
.auth-group label{
  display:block;
  font-size:.8rem;
  margin-bottom:6px;
  color:var(--muted);
}
.auth-group input{
  width:100%;
  padding:14px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  font-size:.95rem;
  outline:none;
  transition:.25s;
}
.auth-group input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 4px rgba(99,102,241,.15);
}

/* Button */
.auth-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:16px;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#6366f1,#14b8a6);
  transition:.3s;
}
.auth-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(99,102,241,.35);
}

/* Footer links */
.auth-footer{
  margin-top:18px;
  text-align:center;
  font-size:.85rem;
  color:var(--muted);
}
.auth-footer a{
  color:var(--primary);
  text-decoration:none;
  font-weight:600;
}
.auth-footer a:hover{text-decoration:underline}

/* Error / info */
.auth-msg{
  margin-top:14px;
  font-size:.85rem;
  text-align:center;
}
.auth-msg.error{color:var(--danger)}
.auth-msg.success{color:#16a34a}

/* OTP input */
.otp-input{
  letter-spacing:.35em;
  text-align:center;
  font-size:1.2rem;
}

/* Mobile tweaks */
@media(max-width:480px){
  .auth-card{
    padding:30px 22px;
  }
  .auth-header h1{
    font-size:1.6rem;
  }
}