.login-2026 .login-brand {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 0;
  background: #061a38 url("axon-services-login.png") center center / cover
    no-repeat;
  isolation: isolate;
}
.auth-visual {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 15%, #3e86f3 0, transparent 34%),
    linear-gradient(145deg, #0b2f85, #1257c9 55%, #2476ee);
  isolation: isolate;
}
.login-glow,
.auth-orb {
  position: absolute;
  border-radius: 50%;
  opacity: 0.28;
  pointer-events: none;
}
.glow-a,
.auth-orb.one {
  width: 360px;
  height: 360px;
  background: #6fb0ff;
  right: -140px;
  top: -90px;
}
.glow-b,
.auth-orb.two {
  width: 280px;
  height: 280px;
  background: #061f62;
  left: -110px;
  bottom: -80px;
}
.login-brand-inner {
  position: relative;
  z-index: 2;
}
.release-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 64px;
  border: 1px solid #ffffff30;
  background: #ffffff12;
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 10px;
  color: #eaf2ff;
}
.release-pill i {
  width: 7px;
  height: 7px;
  background: #79f2bd;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #79f2bd25;
}
.login-2026 .login-brand p {
  margin-top: 34px;
}
.login-2026 .login-brand h2 {
  font-size: 42px;
  max-width: 570px;
}
.login-2026 .auth-card.clean {
  background: #ffffffeb;
  border: 1px solid #e5eaf2;
  border-radius: 18px;
  padding: 42px;
  box-shadow: 0 30px 80px #17203318;
  backdrop-filter: blur(14px);
}
.login-2026 .login-panel {
  background:
    radial-gradient(circle at 80% 10%, #edf4ff, transparent 36%), #fbfcfe;
}
.signup-link {
  text-align: center;
  margin-top: 22px;
  color: #667085;
  font-size: 12px;
}
.signup-link a {
  color: #1769e8;
  font-weight: 750;
}
.secure-line {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #dde2ea;
  font-size: 10px;
  color: #7b8798;
}
.auth-2026 {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr);
  background: #fff;
}
.auth-visual {
  color: #fff;
  padding: 70px;
  display: flex;
  flex-direction: column;
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 21px;
  position: relative;
  z-index: 2;
}
.auth-brand span {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  color: #1769e8;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.auth-message {
  margin: auto 0;
  max-width: 520px;
  position: relative;
  z-index: 2;
}
.auth-message small {
  font-size: 10px;
  letter-spacing: 2px;
  color: #c9dcff;
  font-weight: 800;
}
.auth-message h2 {
  font-size: 39px;
  line-height: 1.14;
  margin: 16px 0;
}
.auth-message p {
  color: #dbe8ff;
  line-height: 1.6;
}
.auth-proof {
  display: flex;
  gap: 18px;
  color: #dbe8ff;
  font-size: 10px;
  position: relative;
  z-index: 2;
}
.auth-content {
  display: grid;
  place-items: center;
  padding: 45px;
  background:
    radial-gradient(circle at 80% 12%, #edf4ff, transparent 35%), #fbfcfe;
}
.auth-box {
  width: min(460px, 100%);
  background: #fff;
  border: 1px solid #e3e8f0;
  border-radius: 18px;
  padding: 40px;
  box-shadow: 0 25px 70px #17203314;
}
.back-login {
  display: inline-block;
  color: #667085;
  font-size: 11px;
  margin-bottom: 35px;
}
.auth-box h1 {
  font-size: 30px;
  margin: 12px 0 8px;
}
.auth-box > p {
  color: #667085;
  line-height: 1.5;
}
.auth-box form {
  display: grid;
  gap: 14px;
  margin-top: 25px;
}
.auth-box label {
  font-size: 11px;
  font-weight: 700;
}
.auth-box input {
  width: 100%;
  height: 50px;
  border: 1px solid #dde2ea;
  border-radius: 8px;
  padding: 0 14px;
  margin-top: 7px;
  outline: 0;
}
.auth-box input:focus {
  border-color: #1769e8;
  box-shadow: 0 0 0 4px #1769e812;
}
.auth-box button {
  margin-top: 5px;
  width: 100%;
}
.code-input {
  text-align: center;
  font-size: 26px !important;
  letter-spacing: 12px;
  font-weight: 800;
}
.help-text {
  display: block;
  margin-top: 16px;
  color: #667085;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 800px) {
  .auth-2026 {
    display: block;
  }
  .auth-visual {
    display: none;
  }
  .auth-content {
    min-height: 100vh;
    padding: 22px;
  }
  .auth-box {
    padding: 28px 22px;
  }
  .login-2026 .auth-card.clean {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .release-pill {
    display: none;
  }
}

/* Axon 2026 login experience */
.login-2026 {
  --login-blue: #1769e8;
  --login-navy: #071a3d;
  min-height: 100svh;
  grid-template-columns: minmax(520px, 45%) minmax(560px, 55%);
  background: #f7faff;
}
.login-2026 .login-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: block;
  min-height: 100svh;
  padding: clamp(24px, 3vw, 52px);
  background:
    linear-gradient(90deg, rgba(23,105,232,.035) 1px, transparent 1px),
    linear-gradient(rgba(23,105,232,.035) 1px, transparent 1px),
    radial-gradient(circle at 88% 8%, rgba(68,137,255,.19), transparent 28%),
    radial-gradient(circle at 8% 88%, rgba(34,197,203,.10), transparent 29%),
    #f8faff;
  background-size: 42px 42px,42px 42px,auto,auto,auto;
}
.login-2026 .login-panel::before,
.login-2026 .login-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}
.login-2026 .login-panel::before {
  width: 420px;
  height: 420px;
  right: -185px;
  top: -175px;
  border: 1px solid rgba(23,105,232,.12);
  box-shadow: 0 0 0 48px rgba(23,105,232,.025),0 0 0 96px rgba(23,105,232,.02);
}
.login-2026 .login-panel::after {
  width: 260px;
  height: 260px;
  left: -150px;
  bottom: -110px;
  background: rgba(23,105,232,.07);
}
.auth-stage {
  width: min(630px, 100%);
  min-height: calc(100svh - clamp(48px, 6vw, 104px));
  margin: 0 auto;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  position: relative;
  z-index: 1;
}
.login-topbar,
.login-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.login-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--login-navy);
}
.login-wordmark > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(145deg,#0b2f76,#1769e8);
  box-shadow: 0 9px 22px rgba(23,105,232,.22);
}
.login-wordmark strong {font-size: 15px;letter-spacing: -.2px}
.login-wordmark strong b {color: var(--login-blue)}
.system-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(23,105,232,.12);
  border-radius: 999px;
  color: #52627a;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.7);
  box-shadow: 0 5px 18px rgba(18,42,79,.04);
  backdrop-filter: blur(10px);
}
.system-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #19b77b;
  box-shadow: 0 0 0 4px rgba(25,183,123,.12);
}
.login-2026 .auth-card.clean {
  position: relative;
  width: min(520px, 100%);
  margin: clamp(34px, 6vh, 70px) auto;
  overflow: hidden;
  padding: clamp(34px, 4vw, 48px);
  border: 1px solid rgba(207,218,235,.82);
  border-radius: 26px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 34px 90px rgba(14,40,78,.13),0 3px 8px rgba(14,40,78,.04);
  backdrop-filter: blur(20px);
}
.auth-card-accent {
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg,#1769e8,#33a7ed 62%,#5de0d0);
}
.login-2026 .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: #1260d6;
  border: 1px solid #d9e7ff;
  border-radius: 999px;
  background: #f3f7ff;
  font-size: 9px;
  letter-spacing: 1.15px;
}
.login-2026 .eyebrow i {width: 5px;height: 5px;border-radius: 50%;background: #1769e8}
.login-2026 .auth-card.clean h1 {
  margin: 18px 0 12px;
  color: #0c1830;
  font-size: clamp(31px, 3vw, 39px);
  line-height: 1.08;
  letter-spacing: -1.4px;
}
.login-2026 .auth-card.clean h1 em {
  color: var(--login-blue);
  font-style: normal;
}
.login-2026 .auth-card.clean > p {
  max-width: 410px;
  margin: 0 0 28px;
  color: #67758b;
  font-size: 13px;
  line-height: 1.65;
}
.login-2026 .auth-card.clean form {gap: 17px;margin-top: 0}
.login-2026 .auth-card.clean label {display: grid;margin: 0}
.field-caption {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: #202d43;
  font-size: 11px;
  font-weight: 750;
}
.field-caption a {color: var(--login-blue) !important;font-size: 10px !important;font-weight: 750}
.input-wrap {position: relative;display: block}
.input-wrap > svg {
  position: absolute;
  z-index: 1;
  width: 18px;
  height: 18px;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  fill: none;
  stroke: #77869d;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-2026 .auth-card.clean .input-wrap input {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 48px 0 45px;
  color: #111d32;
  border: 1px solid #d6dfec;
  border-radius: 12px;
  background: rgba(249,251,255,.92);
  font-size: 13px;
  transition: border-color .2s,box-shadow .2s,background .2s,transform .2s;
}
.login-2026 .auth-card.clean .input-wrap input:hover {border-color: #bac9dc;background: #fff}
.login-2026 .auth-card.clean .input-wrap input:focus {
  border-color: #3480ed;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(23,105,232,.10),0 8px 22px rgba(23,105,232,.07);
}
.password-toggle {
  position: absolute;
  z-index: 2;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #728096 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
}
.password-toggle:hover {color: var(--login-blue) !important;background: #edf4ff !important}
.password-toggle svg {width: 17px;height: 17px;fill:none;stroke:currentColor;stroke-width:1.7}
.password-toggle.shown {color: var(--login-blue) !important;background: #edf4ff !important}
.login-submit {
  width: 100%;
  min-height: 54px;
  margin-top: 3px !important;
  padding: 0 18px !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(110deg,#0d55cf,#2479ef) !important;
  box-shadow: 0 13px 28px rgba(23,105,232,.24);
  transition: transform .2s,box-shadow .2s,filter .2s;
}
.login-submit span {margin-left: auto;font-size: 12px;letter-spacing: .05px}
.login-submit svg {width: 18px;height: 18px;margin-left:auto;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.login-submit:hover {transform: translateY(-2px);filter: brightness(1.04);box-shadow: 0 17px 34px rgba(23,105,232,.3)}
.login-submit:active {transform: translateY(0)}
.persistent-login-note {
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:-1px 0 4px;
  color:#66758b;
  font-size:9px;
  line-height:1.45;
}
.persistent-login-note i {
  display:grid;
  width:17px;
  height:17px;
  flex:0 0 17px;
  place-items:center;
  border-radius:50%;
  background:#e9f8f2;
  color:#07875d;
  font-size:10px;
  font-style:normal;
  font-weight:900;
}
.login-2026 .signup-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 24px;
  color: #748198;
  font-size: 11px;
}
.login-2026 .signup-link a {display:inline-flex;gap:4px;color:var(--login-blue);font-weight:800}
.login-2026 .signup-link a b {font-size: 12px}
.login-2026 .secure-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 22px;
  padding-top: 20px;
  color: #78869a;
  border-top: 1px solid #e5eaf1;
  font-size: 9px;
}
.login-2026 .secure-line span {display:inline-flex;align-items:center;gap:5px}
.login-2026 .secure-line i {display:grid;place-items:center;width:15px;height:15px;border-radius:50%;color:#0a8d61;background:#e9f8f2;font-size:9px;font-style:normal;font-weight:900}
.login-footer {color:#8b97a9;font-size:9px;letter-spacing:.15px}

@media (max-width: 1100px) {
  .login-2026 {grid-template-columns: minmax(380px, 42%) minmax(500px, 58%)}
  .login-2026 .auth-card.clean {padding: 38px}
}
@media (max-width: 800px) {
  .login-2026 {display:block;background:#f8faff}
  .login-2026 .login-panel {display:block;min-height:100svh;padding:22px 18px}
  .auth-stage {min-height:calc(100svh - 44px)}
  .login-2026 .auth-card.clean {
    width: 100%;
    margin: 28px auto;
    padding: 30px 22px;
    border: 1px solid rgba(207,218,235,.8);
    border-radius: 21px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 22px 60px rgba(14,40,78,.11);
  }
  .login-2026 .auth-card.clean h1 {font-size: 31px;letter-spacing:-1px}
  .login-footer span:last-child {display:none}
  .system-status {padding:7px 9px}
  .login-wordmark strong {font-size:14px}
}
@media (max-width: 420px) {
  .login-2026 .secure-line {gap:10px;flex-wrap:wrap}
  .login-2026 .signup-link {align-items:flex-start;flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion: reduce) {
  .login-submit,.input-wrap input {transition:none !important}
}