:root {
  color-scheme: light;
  --navy: #09264a;
  --navy-deep: #071a34;
  --blue: #125bb5;
  --blue-bright: #1687df;
  --ink: #162a46;
  --muted: #687994;
  --line: #e3eaf2;
  --field: #f7f9fc;
  --shadow: 0 28px 80px rgba(7, 26, 52, .19);
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body.auth-page {
  min-height: 100vh;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 8%, rgba(39, 133, 205, .14), transparent 31%),
    radial-gradient(circle at 91% 88%, rgba(86, 164, 218, .16), transparent 34%),
    #edf3f9;
}

button, input { font: inherit; }

.auth-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 26px 22px 20px;
}

.auth-frame {
  display: grid;
  grid-template-columns: minmax(350px, 44%) minmax(0, 56%);
  width: min(1040px, 100%);
  min-height: 652px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: 28px;
  background: #fff;
  box-shadow: var(--shadow);
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}

.auth-verify .auth-frame { animation: auth-verify-enter .52s cubic-bezier(.18,.78,.2,1) both; }
@keyframes auth-verify-enter {
  from { opacity: 0; transform: translateY(24px) scale(.975); filter: blur(7px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.auth-leaving .auth-frame { opacity: .32; transform: translateY(-12px) scale(.975); filter: blur(5px); }
.auth-transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 50% 30%, rgba(22,87,146,.97), rgba(7,27,55,.99) 68%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .32s ease, visibility .32s ease;
}
.auth-leaving .auth-transition { opacity: 1; visibility: visible; }
.auth-transition-spinner { width: 54px; height: 54px; margin-bottom: 16px; border: 4px solid rgba(255,255,255,.18); border-top-color: #9de4f4; border-radius: 50%; animation: auth-spin .9s linear infinite; }
.auth-transition strong { font-size: 1.15rem; font-weight: 750; }
.auth-transition span { color: #bdd8ed; font-size: .83rem; }

.auth-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 42px 40px 37px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 86% 12%, rgba(57, 170, 231, .32), transparent 42%),
    radial-gradient(circle at -16% 103%, rgba(21, 104, 187, .59), transparent 52%),
    linear-gradient(145deg, #0b355e 0%, #0a264b 55%, #071b37 100%);
}

.auth-brand-panel::before,
.auth-brand-panel::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  pointer-events: none;
}

.auth-brand-panel::before { width: 510px; height: 510px; right: -337px; top: -219px; }
.auth-brand-panel::after { width: 380px; height: 380px; left: -277px; bottom: -220px; }

.auth-brand-head,
.brand-center,
.auth-brand-bottom { position: relative; z-index: 1; }

.auth-brand-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #c7def3;
}

.auth-brand-head::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #71ceea;
  box-shadow: 0 0 0 5px rgba(113,206,234,.12);
}

.brand-center { display: flex; flex-direction: column; align-items: flex-start; }

.auth-brand-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 310px);
  gap: 7px;
  margin-bottom: 35px;
}

.auth-brand-art { display: flex; flex-direction: column; align-items: center; width: 100%; }
.auth-brand-icon { display: block; width: auto; height: 94px; filter: drop-shadow(0 10px 15px rgba(0,0,0,.19)); }
.auth-brand-wordmark { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.auth-brand-wordmark::before,
.auth-brand-wordmark::after {
  content: "";
  display: block;
  width: 100%;
  background: url("../brand-wordmark.png") center top / 100% auto no-repeat;
  filter: brightness(0) invert(1);
}
.auth-brand-wordmark::before { aspect-ratio: 1083 / 115; }
.auth-brand-wordmark::after { aspect-ratio: 1083 / 94; background-position: center bottom; }
.auth-brand-branches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px 7px;
  width: 100%;
  font-size: .57rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .035em;
  color: #d5e9f8;
  white-space: nowrap;
}
.auth-brand-branches i { color: #80a9c9; font-style: normal; }

.brand-eyebrow {
  margin: 0 0 12px;
  color: #a8d8f7;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.brand-heading {
  max-width: 340px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.9rem, 2.7vw, 2.45rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -.045em;
}

.brand-copy {
  max-width: 320px;
  margin: 15px 0 0;
  color: #b9d2e9;
  font-size: .89rem;
  line-height: 1.7;
}

.auth-brand-bottom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
  color: #b9d2e9;
  font-size: .75rem;
  font-weight: 500;
}
.auth-brand-bottom i { color: #8bd4ed; font-size: 1rem; }

.auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px clamp(35px, 6vw, 73px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.75,.2,1), filter .28s ease;
}
.auth-form-panel.is-changing { opacity: 0; transform: translateX(-18px); filter: blur(4px); }
.auth-form-panel.is-entering { opacity: 0; transform: translateX(22px); filter: blur(4px); }
.auth-button-spinner { display: inline-block; width: 17px; height: 17px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: auth-spin .8s linear infinite; vertical-align: -3px; margin-right: 7px; }

.auth-form-inner { width: min(100%, 390px); margin: 0 auto; }

.auth-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.auth-kicker {
  color: var(--blue);
  font-size: .71rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.step-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #dce7f5;
  border-radius: 999px;
  background: #f4f8fd;
  color: #375c85;
  font-size: .73rem;
  font-weight: 700;
  white-space: nowrap;
}
.step-indicator i { color: var(--blue); }

.auth-title {
  margin: 0 0 11px;
  color: #10294b;
  font-size: clamp(1.7rem, 2.7vw, 2.08rem);
  font-weight: 760;
  line-height: 1.17;
  letter-spacing: -.045em;
}

.auth-subtitle {
  margin: 0 0 29px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.6;
}

.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  margin: 0 0 19px;
  border: 1px solid;
  border-radius: 13px;
  font-size: .83rem;
  line-height: 1.5;
}
.auth-alert i { font-size: 1.13rem; line-height: 1.2; }
.auth-alert-danger { color: #9b3038; border-color: #f1cfd3; background: #fff4f4; }
.auth-alert-success { color: #246947; border-color: #c6e8d5; background: #f1fbf5; }
.auth-alert strong { display: block; margin-bottom: 2px; }

.field-group { margin-bottom: 17px; }
.field-label { display: block; margin-bottom: 8px; color: #243e5e; font-size: .78rem; font-weight: 700; }
.field-wrap { position: relative; }
.field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #8193a8;
  font-size: 1.05rem;
  pointer-events: none;
}
.auth-input {
  width: 100%;
  min-height: 54px;
  padding: 13px 16px 13px 45px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  outline: 0;
  background: var(--field);
  color: #132c4c;
  font-size: .92rem;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.auth-input::placeholder { color: #98a8b8; }
.auth-input:hover { border-color: #aebfd2; }
.auth-input:focus { border-color: #3a8ed0; background: #fff; box-shadow: 0 0 0 4px rgba(58,142,208,.11); }
.auth-input-password { padding-right: 52px; }

.password-toggle {
  position: absolute;
  top: 50%;
  right: 9px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8295ab;
  cursor: pointer;
}
.password-toggle:hover, .password-toggle:focus-visible { color: var(--blue); background: #e8f1fa; outline: 0; }

.captcha-wrap { display: flex; justify-content: center; margin: 23px 0 19px; min-height: 78px; }
.g-recaptcha { max-width: 100%; }

.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 55px;
  padding: 12px 17px;
  border: 1px solid #0d4f9f;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(105deg, #073d7d, #126dc4);
  box-shadow: 0 11px 23px rgba(13,79,159,.21);
  font-size: .91rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(13,79,159,.28); filter: brightness(1.04); }
.auth-submit:focus-visible { outline: 3px solid rgba(24,135,223,.35); outline-offset: 3px; }
.auth-submit:active { transform: translateY(0); }

.auth-help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  color: #7588a0;
  font-size: .75rem;
  line-height: 1.4;
  text-align: center;
}
.auth-help i { color: #2789b6; font-size: .95rem; }
.auth-session-info { align-items: flex-start; margin-top: 21px; font-size: .72rem; line-height: 1.6; }
.auth-session-info i { margin-top: 2px; }
.auth-session-info strong { color: #294d72; font-weight: 750; }

.auth-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: min(1040px, 100%);
  color: #687e96;
  font-size: .72rem;
}
.auth-version { font-weight: 700; color: #355b80; white-space: nowrap; }

.code-head { text-align: center; }
.code-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 17px;
  border: 1px solid #d8e9f9;
  border-radius: 17px;
  background: linear-gradient(145deg, #f0f8ff, #e6f1fc);
  color: #126bc0;
  font-size: 1.55rem;
}
.verify-phone { color: #153f69; font-weight: 750; white-space: nowrap; }
.timer-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 13px;
  margin: 0 0 22px;
  border: 1px solid #dce9f7;
  border-radius: 999px;
  background: #f3f8fd;
  color: #355b80;
  font-size: .76rem;
  font-weight: 700;
}
.timer-badge.expired { color: #a33338; border-color: #f2c9cb; background: #fff3f3; }
.code-label { display: block; margin: 0 0 9px; color: #243e5e; font-size: .78rem; font-weight: 700; }
.code-input {
  width: 100%;
  height: 66px;
  padding: 10px 16px;
  margin: 0 0 17px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  outline: 0;
  background: var(--field);
  color: #15365b;
  font-size: clamp(1.3rem, 5vw, 1.72rem);
  font-weight: 750;
  letter-spacing: .45em;
  text-align: center;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.code-input::placeholder { color: #a8b5c5; }
.code-input:focus { border-color: #3a8ed0; background: #fff; box-shadow: 0 0 0 4px rgba(58,142,208,.11); }
.verify-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; font-size: .8rem; }
.verify-actions a { text-decoration: none; font-weight: 650; }
.back-link { color: #687e96; }
.back-link:hover { color: #173e68; }
.resend-link { color: #1268b8; text-align: right; }
.resend-link:hover { color: #0d4787; }
.resend-link.disabled { color: #a1adba; pointer-events: none; cursor: default; }
.ip-notice { display: flex; align-items: center; gap: 8px; margin-top: 29px; padding-top: 15px; border-top: 1px solid var(--line); color: #8a9aad; font-size: .7rem; line-height: 1.45; }
.ip-notice i { font-size: .91rem; }

.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: #fff;
  text-align: center;
  background: radial-gradient(circle at 50% 28%, #16487a, #071b37 68%);
}
.loader-spinner { width: 58px; height: 58px; margin-bottom: 27px; border: 4px solid rgba(255,255,255,.19); border-top-color: #8bd4ed; border-radius: 50%; animation: auth-spin .9s linear infinite; }
.greeting-title { margin: 0 0 7px; font-size: 1.7rem; font-weight: 750; letter-spacing: -.035em; }
.loading-name { margin: 0; font-size: 1rem; font-weight: 400; color: #c9dff2; }
.loading-text { margin: 24px 0 0; color: #a9c8e3; font-size: .83rem; }
.security-check-item { margin-top: 8px; color: #b3e8ce; font-size: .77rem; animation: auth-fade .4s both; }
.security-check-item .me-2 { margin-right: 8px; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes auth-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
  .auth-shell { justify-content: flex-start; padding: 14px 13px 22px; }
  .auth-frame { max-width: 540px; min-height: 0; grid-template-columns: 1fr; border-radius: 21px; }
  .auth-brand-panel { min-height: 208px; padding: 22px 27px; }
  .auth-brand-head, .auth-brand-bottom, .brand-eyebrow, .brand-copy { display: none; }
  .brand-center { align-items: center; justify-content: center; width: 100%; height: 100%; }
  .auth-brand-lockup { width: 215px; margin: 0 0 10px; gap: 3px; }
  .auth-brand-icon { height: 58px; }
  .auth-brand-wordmark { gap: 4px; }
  .auth-brand-branches { font-size: .43rem; gap: 1px 4px; }
  .brand-heading { font-size: 1.02rem; font-weight: 600; letter-spacing: -.02em; text-align: center; }
  .auth-form-panel { padding: 31px 31px 35px; }
  .auth-topline { margin-bottom: 23px; }
  .auth-footer { max-width: 540px; }
}

@media (max-width: 410px) {
  .auth-form-panel { padding: 26px 22px 31px; }
  .auth-brand-panel { min-height: 195px; }
  .captcha-wrap { transform: scale(.91); transform-origin: center top; margin-bottom: 10px; }
  .auth-footer { flex-direction: column; gap: 3px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}