.login-page {
  min-height: 100vh;
  color: #263b44;
  background: #eef1f4;
}

.login-topbar {
  display: flex;
  min-height: 64px;
  align-items: center;
  padding: 0 clamp(1rem, 6vw, 7rem);
  border-bottom: 1px solid #d9dde0;
  background: #f7f8fa;
}

.login-brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #1d333b;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.login-brand img {
  width: auto;
  height: 38px;
  padding: 3px;
  border-radius: 9px;
  background: #fff;
}

.login-edition {
  padding: .18rem .48rem;
  color: #fff;
  border-radius: 999px;
  background: #ec3549;
  font-size: .68rem;
}

.login-main {
  position: relative;
  display: grid;
  min-height: calc(100vh - 124px);
  place-items: center;
  padding: 2.5rem 1rem;
  overflow: hidden;
}

.login-main::before {
  position: absolute;
  width: 54rem;
  height: 54rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(82 221 195 / 26%) 0%, rgb(82 221 195 / 0%) 68%);
  content: "";
  transform: translate(24%, -20%);
}

.login-card {
  position: relative;
  width: min(100%, 450px);
  overflow: hidden;
  border: 1px solid rgb(17 106 136 / 15%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 22px 65px rgb(25 57 68 / 14%);
}

.login-card-accent {
  height: 5px;
  background: linear-gradient(90deg, var(--medkd-primary), #52ddc3);
}

.login-heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}

.login-eyebrow {
  margin: 0 0 .3rem;
  color: var(--medkd-primary);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}

.login-heading-row h1 {
  margin: 0;
  color: #17272e;
  font-size: 1.65rem;
  font-weight: 700;
}

.login-shield {
  color: var(--medkd-primary);
  font-size: 1.9rem;
}

.login-status {
  margin-bottom: 1.2rem;
  padding: .65rem .8rem;
  color: #64747b;
  border-color: #e4eaec;
  font-size: .86rem;
}

.login-form .form-label {
  color: #3b4f57;
  font-size: .88rem;
  font-weight: 600;
}

.login-form .input-group-text {
  min-width: 44px;
  justify-content: center;
  color: #718087;
  background: #f7f9fa;
}

.login-form .form-control,
.login-form .input-group-text {
  min-height: 46px;
  border-color: #d9e1e4;
}

.login-form .form-control:focus {
  border-color: rgb(17 106 136 / 55%);
  box-shadow: 0 0 0 .2rem rgb(17 106 136 / 12%);
}

.captcha-group { flex-wrap: nowrap; }

.captcha-refresh {
  flex: 0 0 142px;
  height: 48px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e1e4;
  border-left: 0;
  border-radius: 0 .375rem .375rem 0;
  background: #f4f7f8;
}

.captcha-refresh img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-submit {
  min-height: 46px;
  font-weight: 600;
}

.oidc-panel {
  padding-top: .25rem;
  color: #64747b;
  text-align: center;
}

.login-footer {
  display: flex;
  min-height: 60px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1rem, 6vw, 7rem);
  color: #89969c;
  border-top: 1px solid #e3e7e9;
  background: #f7f8fa;
  font-size: .78rem;
}

.login-footer a {
  color: var(--medkd-primary);
  text-decoration: none;
}

@media (max-width: 575.98px) {
  .login-topbar { padding-inline: 1rem; }
  .login-brand > span:not(.login-edition) { display: none; }
  .login-main { padding: 1.25rem .75rem; }
  .login-card .card-body { padding: 1.35rem !important; }
  .login-footer { justify-content: center; padding: .8rem 1rem; text-align: center; }
  .login-footer span { display: none; }
}