:root {
  --login-navy: #0b344c;
  --login-orange: #f97316;
  --login-orange-dark: #d85b0c;
  --login-ink: #15384c;
  --login-muted: #647482;
  --login-line: #d9e5ea;
  --login-surface: #ffffff;
  --login-background: #f2f6f7;
}

body:has(.login-container) {
  background: var(--login-background);
  color: var(--login-ink);
}

.login-container {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(360px, 1fr);
  align-items: stretch;
  gap: 28px;
  padding: 28px;
  background: var(--login-background);
  text-align: left;
}

.login-intro,
.login-card {
  min-height: min(720px, calc(100dvh - 56px));
  border-radius: 24px;
}

.login-intro {
  position: relative;
  z-index: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 74px);
  color: #fff;
  background: #0b344c;
  isolation: isolate;
}

.login-intro::before,
.login-intro::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.login-intro::before {
  width: 310px;
  height: 310px;
  top: -112px;
  right: -122px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  box-shadow: 0 0 0 32px rgba(255, 255, 255, .025), 0 0 0 64px rgba(255, 255, 255, .018);
}

.login-intro::after {
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: var(--login-orange);
}

.login-intro__topline,
.login-card__kicker,
.login-intro__eyebrow {
  margin: 0;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.login-intro__topline {
  position: absolute;
  top: 30px;
  left: clamp(32px, 5vw, 74px);
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, .72);
}

.login-intro__topline span { width: 30px; height: 2px; background: var(--login-orange); }

.login-intro__logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  margin-bottom: 32px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
}

.login-intro__eyebrow { margin-bottom: 13px; color: #ffad76; }

.login-intro h1 {
  max-width: 8ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.6rem, 5.2vw, 5.2rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.055em;
}

.login-intro__copy {
  max-width: 35ch;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: 1.04rem;
  line-height: 1.7;
}

.login-intro__rule { width: min(100%, 300px); height: 1px; margin: 42px 0 18px; background: rgba(255, 255, 255, .18); }

.login-intro__note { display: flex; align-items: center; gap: 9px; margin: 0; color: rgba(255, 255, 255, .75); font-size: .86rem; }
.login-intro__note i { color: #ffad76; font-size: 1.05rem; }

.login-card {
  align-self: center;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 76px);
  background: var(--login-surface);
  border: 1px solid rgba(11, 52, 76, .09);
  box-shadow: 0 24px 60px rgba(11, 52, 76, .09);
}

.login-card__heading { display: flex; align-items: flex-start; gap: 16px; }

.login-card__mark {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: var(--login-orange);
  background: #fff1e6;
  font-size: 1.35rem;
}

.login-card__kicker { margin: 1px 0 7px; color: var(--login-orange-dark); }

.login-card h2 { margin: 0; color: var(--login-navy); font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -.045em; }
.login-card__helper { margin: 18px 0 34px; color: var(--login-muted); line-height: 1.65; }
.login-card form { display: grid; gap: 22px; }
.form-group { display: grid; gap: 8px; text-align: left; }

.form-group label { display: flex; align-items: center; gap: 8px; color: var(--login-navy); font-size: .86rem; font-weight: 750; }
.form-group label i { color: var(--login-orange); }

.form-group input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  color: var(--login-ink);
  background: #fbfcfc;
  border: 1px solid var(--login-line);
  border-radius: 12px;
  outline: none;
  font-size: 1rem;
  text-transform: none !important;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.form-group input::placeholder { color: #98a5ad; }
.form-group input:focus { background: #fff; border-color: var(--login-orange); box-shadow: 0 0 0 4px rgba(249, 115, 22, .12); }
.password-field { position: relative; }
.password-field input { padding-right: 54px; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  transform: translateY(-50%);
  color: var(--login-muted);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible { color: var(--login-orange-dark); background: #fff1e6; }
.password-toggle:active { transform: translateY(-50%) scale(.96); }
.field-hint { color: var(--login-muted); font-size: .76rem; line-height: 1.45; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 4px;
  padding: 0 20px;
  color: #fff;
  background: var(--login-orange);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-size: .98rem;
  font-weight: 750;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn-primary:hover { background: var(--login-orange-dark); box-shadow: 0 10px 24px rgba(216, 91, 12, .2); }
.btn-primary:active { transform: translateY(1px) scale(.99); }
.btn-primary i { font-size: 1.15rem; transition: transform .2s ease; }
.btn-primary:hover i { transform: translateX(3px); }

@media (max-width: 820px) {
  .login-container { grid-template-columns: 1fr; padding: 16px; }
  .login-intro { min-height: auto; padding: 74px 28px 34px; }
  .login-intro__topline { left: 28px; }
  .login-intro__logo { width: 78px; height: 78px; margin-bottom: 22px; }
  .login-intro h1 { max-width: none; font-size: clamp(2.45rem, 13vw, 4rem); }
  .login-intro__copy { margin-top: 18px; }
  .login-intro__rule { margin-top: 26px; }
  .login-card { min-height: auto; padding: 32px 24px 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .password-toggle, .btn-primary, .btn-primary i, .form-group input { transition: none; }
}