:root {
  --sa-blue: #1976d2;
  --sa-blue-dark: #115293;
  --sa-bg: #f8fafc;
  --sa-card: #ffffff;
  --sa-text: #1f2937;
  --sa-muted: #64748b;
}

body.login-pf,
.login-pf body {
  background: radial-gradient(circle at 10% 20%, #e3f2fd 0%, #f8fafc 55%, #eef2f7 100%);
  color: var(--sa-text);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}

.login-pf-page {
  padding-top: 6vh;
}

.pf-v5-c-login__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto !important;
}

#kc-header {
  align-self: center !important;
  margin-bottom: 12px !important;
}

.pf-v5-c-login__main {
  width: min(100%, 620px) !important;
  margin: 0 auto !important;
}

#kc-header-wrapper,
.pf-v5-c-brand {
  color: var(--sa-blue) !important;
  font-size: clamp(1.8rem, 3.2vw, 2.2rem) !important;
  font-weight: 500 !important;
  letter-spacing: -0.4px;
  text-align: center;
}

#kc-page-title {
  color: var(--sa-blue);
  font-weight: 500 !important;
  font-size: clamp(1.55rem, 2.7vw, 1.9rem) !important;
  letter-spacing: -0.35px;
}

.login-pf .card-pf,
.login-pf .pf-v5-c-card {
  background: var(--sa-card);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

#kc-header-wrapper,
#kc-header {
  color: var(--sa-blue);
  font-weight: 600;
}

#kc-content-wrapper {
  color: var(--sa-text);
}

.pf-v5-c-form-control,
.form-control {
  border-radius: 12px;
  border-color: #cbd5e1;
  min-height: 44px;
}

.pf-v5-c-form-control:focus,
.form-control:focus {
  border-color: var(--sa-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.16);
}

#kc-form-buttons input[type="submit"],
#kc-login,
.pf-v5-c-button.pf-m-primary,
.btn-primary {
  background: var(--sa-blue);
  border-color: var(--sa-blue);
  border-radius: 12px;
  font-weight: 500;
  min-height: 44px;
}

#kc-form-buttons input[type="submit"]:hover,
#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover,
.btn-primary:hover {
  background: var(--sa-blue-dark);
  border-color: var(--sa-blue-dark);
}

#kc-info,
#kc-registration,
.login-pf-settings {
  color: var(--sa-muted);
}

a,
#kc-registration a,
#kc-info a {
  color: var(--sa-blue);
}

a:hover,
#kc-registration a:hover,
#kc-info a:hover {
  color: var(--sa-blue-dark);
}

.alert,
.pf-v5-c-alert {
  border-radius: 10px;
}