html,body{height:100%;}
body{
  background:
    radial-gradient(circle at 18% 8%, rgba(138,63,232,0.10), transparent 40%),
    radial-gradient(circle at 88% 92%, rgba(33,88,208,0.10), transparent 42%),
    var(--page-bg);
  font-family:'Poppins',sans-serif;
  color:var(--text-primary);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.card{
  width:100%;
  max-width:420px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px 38px 34px;
  box-shadow:0 1px 2px rgba(20,15,40,0.04), 0 12px 32px rgba(20,15,40,0.06);
}
.logo{
  display:block;
  height:64px;
  margin:0 auto 22px;
}
h1{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:21px;
  margin:0 0 6px;
  text-align:center;
}
.sub{
  font-size:13.5px;
  color:var(--text-secondary);
  margin:0 0 28px;
  text-align:center;
  line-height:1.5;
}
.sso-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:22px;
}
.sso-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:var(--card-bg);
  border:1px solid var(--field-border);
  color:var(--text-primary);
  font-family:'Poppins',sans-serif;
  font-weight:500;
  font-size:14px;
  padding:11px 0;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .05s ease;
}
.sso-btn:hover{ background:var(--field-bg); }
.sso-btn:active{ transform:scale(0.99); }
.sso-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(138,63,232,0.25);
}
.sso-btn svg{ flex-shrink:0; }
.sso-btn-microsoft:hover{ border-color:#00A4EF; }
.sso-btn-google:hover{ border-color:#4285F4; }
.sso-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  font-size:12.5px;
  color:var(--text-muted);
}
.sso-divider::before,
.sso-divider::after{
  content:'';
  flex:1;
  height:1px;
  background:var(--border);
}

label{
  display:block;
  font-size:13px;
  color:var(--text-secondary);
  margin-bottom:7px;
}
.field-group{ margin-bottom:16px; }
input[type="text"],
input[type="password"]{
  width:100%;
  background:var(--field-bg);
  border:1px solid var(--field-border);
  color:var(--text-primary);
  font-family:'Poppins',sans-serif;
  font-size:14.5px;
  padding:11px 14px;
  border-radius:8px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input::placeholder{ color:var(--text-muted); }
input:focus{
  border-color:var(--purple);
  box-shadow:0 0 0 3px rgba(138,63,232,0.12);
}
input.err{ border-color:var(--danger); }
.error-msg{
  font-size:12.5px;
  color:var(--danger);
  margin-top:6px;
  display:none;
}
button.submit{
  width:100%;
  background:linear-gradient(100deg, var(--purple) 0%, var(--blue) 100%);
  color:#FFFFFF;
  border:none;
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:14.5px;
  padding:12px 0;
  border-radius:8px;
  cursor:pointer;
  transition:filter .15s ease, transform .05s ease;
}
button.submit:hover{ filter:brightness(1.06); }
button.submit:active{ transform:scale(0.99); }
button.submit:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(138,63,232,0.35);
}
button.submit[disabled]{ opacity:0.6; cursor:default; }

.contact-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:10px 22px;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.contact-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--text-muted);
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease;
}
.contact-link svg{ flex-shrink:0; }
.contact-link:hover{ color:var(--purple); }

@media (max-width: 420px){
  body{ padding:16px; align-items:flex-start; padding-top:40px; }
  .card{ padding:28px 22px 26px; border-radius:14px; }
  .logo{ height:52px; margin-bottom:18px; }
  h1{ font-size:19px; }
}
@media (prefers-reduced-motion: reduce){
  button.submit, input{ transition:none; }
}