.login-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:block;
  width:100vw;
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  overflow:auto;
  background:#fff;
}
.login-overlay[hidden]{display:none}
.login-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(440px,32.6vw,560px);
  width:100%;
  min-height:100vh;
  min-height:100dvh;
  background:#fff;
}
.login-visual{
  position:relative;
  min-width:0;
  min-height:620px;
  overflow:hidden;
  padding:42px 52px;
  color:#fff;
  background:
    radial-gradient(circle at 51% 35%,rgba(45,108,205,.38),transparent 39%),
    radial-gradient(circle at 92% 94%,rgba(19,116,177,.18),transparent 27%),
    linear-gradient(145deg,#0c1d3c 0%,#0c2348 48%,#07152d 100%);
}
.login-visual::before,.login-visual::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(2px);
}
.login-visual::before{
  top:-18%;left:29%;width:64vw;height:64vw;
  max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(61,137,240,.17),rgba(61,137,240,0) 67%);
  animation:login-drift 16s ease-in-out infinite;
}
.login-visual::after{
  right:-14%;bottom:-31%;width:520px;height:520px;
  background:radial-gradient(circle,rgba(53,190,238,.12),rgba(53,190,238,0) 70%);
  animation:login-drift 21s ease-in-out infinite reverse;
}
.login-visual-header{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.login-visual-brand,.login-mobile-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.login-visual-brand .brand-mark,.login-mobile-brand .brand-mark{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(145deg,#2574ff,#2458d7);
  box-shadow:0 8px 24px rgba(26,95,223,.28);
}
.login-visual-brand strong,.login-visual-brand small,
.login-mobile-brand strong,.login-mobile-brand small{display:block}
.login-visual-brand strong{font-size:16px;color:#fff}
.login-visual-brand small{margin-top:2px;color:#6f88ad;font-size:10px;letter-spacing:.16em}
.login-source-status{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:28px;
  padding:4px 12px;
  color:#c9dcf8;
  background:rgba(37,99,235,.14);
  border:1px solid rgba(126,182,255,.3);
  border-radius:999px;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}
.login-source-status i{
  width:7px;height:7px;
  margin:0;
  background:#4ade80;
  border-radius:50%;
  box-shadow:0 0 0 5px rgba(74,222,128,.08);
  animation:login-status-pulse 2.4s ease-out infinite;
}
.login-map-stage{
  position:absolute;
  z-index:1;
  inset:15% 3% 9%;
  display:grid;
  place-items:center;
}
.login-map-stage::before{
  content:"";
  position:absolute;
  left:13%;right:8%;top:18%;bottom:8%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(37,116,225,.19),rgba(37,116,225,0) 67%);
  filter:blur(18px);
}
#loginNetworkMap{position:relative;width:100%;height:100%;display:block}
.login-visual-caption{
  position:absolute;
  z-index:3;
  left:52px;
  bottom:34px;
  color:#617ba2;
  font-size:10px;
  letter-spacing:.18em;
}
.login-form-pane{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  padding:48px 64px;
  background:#fff;
  border-left:1px solid #e6eaf1;
}
.login-card{
  width:100%;
  max-width:430px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.login-mobile-brand{display:none;margin-bottom:38px}
.login-mobile-brand strong{font-size:16px}
.login-mobile-brand small{margin-top:2px;color:#8a98ad;font-size:9px;letter-spacing:.14em}
.login-eyebrow{
  display:block;
  margin-bottom:9px;
  color:#2c6fe8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
}
.login-card h1{margin:0 0 7px;color:#111d33;font-size:25px;line-height:1.3;letter-spacing:-.02em}
.login-card>p{margin:0 0 27px;color:#718097;font-size:12.5px;line-height:1.7}
.login-card .login-field{display:block;margin:0 0 17px;color:#46566d;font-size:12.5px;font-weight:700}
.login-card .login-field label{margin:0;color:inherit;font-size:inherit;font-weight:inherit}
.login-field-label{display:flex;align-items:center;justify-content:space-between;min-height:20px;margin-bottom:7px}
.login-help{
  padding:0;
  color:#2563eb;
  background:transparent;
  border:0;
  font-size:12px;
  font-weight:500;
}
.login-help:hover{color:#174ab6;text-decoration:underline}
.login-card .login-field>input,.login-password-control>input,
.login-card #loginMfaCode{
  display:block;
  width:100%;
  height:45px;
  margin:0;
  padding:0 13px;
  color:#14213a;
  background:#fff;
  border:1px solid #dce4ef;
  border-radius:9px;
  outline:0;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.login-card .login-field>input:focus,.login-password-control>input:focus,
.login-card #loginMfaCode:focus{
  border-color:#85aaf1;
  box-shadow:0 0 0 3px #eaf1ff;
}
.login-card input::placeholder{color:#aab5c5}
.login-password-control{position:relative;display:block}
.login-password-control>input{padding-right:68px}
.login-password-toggle{
  position:absolute;
  top:8px;right:8px;
  height:29px;
  min-width:48px;
  padding:0 9px;
  color:#63748b;
  background:#f2f5f9;
  border:0;
  border-radius:6px;
  font-size:11.5px;
}
.login-password-toggle:hover{color:#1f3b63;background:#e8eef6}
.login-options{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:5px 0 20px;
}
.login-card label.login-remember{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:#526176;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
}
.login-remember input{width:15px;height:15px;margin:0;accent-color:#2563eb}
.login-audit-note{color:#96a3b5;font-size:11.5px;text-align:right}
.login-security-strip{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0 0 18px;
  padding:10px 11px;
  color:#63748b;
  background:#f7f9fc;
  border:1px solid #edf0f5;
  border-radius:9px;
  font-size:11.5px;
  line-height:1.55;
}
.login-security-strip i{flex:none;width:7px;height:7px;margin:5px 0 0;background:#24b47e;border-radius:50%}
.login-card #loginSubmit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  height:46px;
  margin:0;
  color:#fff;
  background:#2563eb;
  border:0;
  border-radius:9px;
  box-shadow:0 6px 18px rgba(37,99,235,.18);
  font-size:14px;
  font-weight:750;
  transition:background .16s ease,transform .16s ease,box-shadow .16s ease;
}
.login-card #loginSubmit:hover:not(:disabled){background:#1e56d8;box-shadow:0 8px 22px rgba(37,99,235,.24);transform:translateY(-1px)}
.login-card #loginSubmit:disabled{cursor:wait;background:#93afe5;box-shadow:none}
.login-submit-spinner{display:none;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:login-spin .8s linear infinite}
#loginSubmit.is-loading .login-submit-spinner{display:inline-block}
.login-card #loginError{
  min-height:0;
  margin-top:13px;
  padding:0;
  color:#b42332;
  font-size:12px;
  line-height:1.55;
  text-align:left;
}
.login-card #loginError:not(:empty){padding:10px 12px;background:#fff3f4;border:1px solid #f5d4d8;border-radius:9px}
.login-footer{margin-top:23px;padding-top:18px;color:#97a4b6;border-top:1px solid #edf0f5;font-size:11.5px}
.login-card #loginMfaStep{margin-bottom:16px}
.login-card #loginMfaStep>label{display:block;margin:0 0 10px;color:#46566d;font-size:12.5px;font-weight:700}
.login-card #loginMfaCode{margin-top:7px;letter-spacing:.16em}
.login-card .login-text-button{width:auto;height:auto;margin:0;padding:4px 0;color:#2563eb;background:transparent;box-shadow:none}
.login-card .mfa-enrollment{margin-bottom:16px;padding:15px;background:#f7f9fc;border:1px solid #e7ecf3;border-radius:10px}
.login-card .mfa-recovery-result{margin-bottom:16px}
.login-card .mfa-recovery-result pre{max-height:200px;overflow:auto}
body.login-active{min-width:0;overflow:hidden}
@keyframes login-spin{to{transform:rotate(360deg)}}
@keyframes login-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-18px,0)}}
@keyframes login-status-pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.28)}70%,100%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
@media(max-width:1100px){
  .login-shell{grid-template-columns:minmax(0,1fr) 440px}
  .login-visual{padding:36px 38px}
  .login-visual-caption{left:38px}
  .login-form-pane{padding:42px 45px}
}
@media(max-width:900px){
  .login-shell{display:block;background:linear-gradient(145deg,#eef3fb,#fff 58%)}
  .login-visual{display:none}
  .login-form-pane{min-height:100vh;min-height:100dvh;padding:40px 24px;border:0;background:transparent}
  .login-card{max-width:440px;padding:34px;background:#fff;border:1px solid #e3e9f2;border-radius:18px;box-shadow:0 24px 70px rgba(24,45,82,.12)}
  .login-mobile-brand{display:flex}
}
@media(max-width:520px){
  .login-form-pane{align-items:flex-start;padding:18px 12px}
  .login-card{padding:27px 22px;border-radius:15px}
  .login-mobile-brand{margin-bottom:29px}
  .login-options{align-items:flex-start;flex-direction:column;gap:9px}
  .login-audit-note{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  .login-visual::before,.login-visual::after,.login-source-status i,.login-submit-spinner{animation:none}
}