:root {
  color-scheme: dark;
  --bg: #02040a;
  --panel: rgba(6, 10, 24, 0.34);
  --line: rgba(135, 180, 255, 0.18);
  --text: #eef5ff;
  --muted: #c3ccdb;
  --blue: #5bb8ff;
  --pink: #ff4eb7;
  --violet: #8b5cf6;
  --shadow: rgba(0, 0, 0, 0.58);
}

* { box-sizing: border-box; }
html, body {
  min-height: 100%;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}
body { overflow-x: hidden; }

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 26px 20px 34px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg, rgba(2, 4, 10, 0.04), rgba(2, 4, 10, 0.36) 55%, rgba(2, 4, 10, 0.72)),
    url('/_auth_assets/login-bg.png?v=3118') center center / cover no-repeat;
}

.login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(91, 184, 255, 0.12), transparent 24rem),
    radial-gradient(circle at 20% 82%, rgba(126, 231, 255, 0.07), transparent 18rem),
    radial-gradient(circle at 82% 28%, rgba(255, 78, 183, 0.06), transparent 18rem),
    linear-gradient(180deg, rgba(2,4,10,0.12), rgba(2,4,10,0.08), rgba(2,4,10,0.24));
  z-index: 0;
  pointer-events: none;
}

.scene-fx,
.siren-layer,
.heli-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.scene-fx {
  z-index: 1;
  --siren-scale: 1;
}

.siren-layer.is-hidden {
  display: none;
}

/* Helicopters */
.heli {
  position: absolute;
  left: var(--hx, 0px);
  bottom: var(--hy, 0px);
  width: 0;
  height: 0;
  transform: translate(-50%, 50%) scale(var(--heli-scale, 1));
  opacity: var(--heli-opacity, 1);
  pointer-events: none;
}

.heli-body,
.heli-tail,
.heli-tail-rotor,
.heli-rotor,
.heli-skid,
.heli-light,
.heli-beam,
.heli-hit {
  position: absolute;
  display: block;
  pointer-events: none;
}

.heli-body {
  left: -13px;
  top: -6px;
  width: 26px;
  height: 12px;
  border-radius: 9px 12px 8px 7px;
  background: linear-gradient(180deg, rgba(12, 14, 18, 0.98), rgba(2, 3, 5, 0.98));
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 0 12px rgba(0,0,0,0.36);
}

.heli-body::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 8px;
  height: 3px;
  border-radius: 3px;
  background: rgba(162, 182, 198, 0.12);
}

.heli-tail {
  left: 10px;
  top: -1px;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(20, 22, 27, 0.95), rgba(4, 5, 8, 0.95));
}

.heli-tail-rotor {
  left: 29px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
}

.heli-tail-rotor::before,
.heli-tail-rotor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(168, 176, 188, 0.28);
  transform: translate(-50%, -50%);
}

.heli-tail-rotor::before { width: 8px; height: 1px; }
.heli-tail-rotor::after { width: 1px; height: 8px; }

.heli-rotor {
  left: -22px;
  top: -12px;
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.01), rgba(188, 196, 206, 0.26), rgba(255,255,255,0.01));
  transform-origin: 50% 50%;
  animation: rotorSpin 100ms linear infinite;
  opacity: 0.68;
}

.heli-skid {
  left: -9px;
  top: 7px;
  width: 20px;
  height: 1px;
  border-radius: 999px;
  background: rgba(153, 160, 170, 0.24);
}

.heli-skid::before,
.heli-skid::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 6px;
  background: rgba(153, 160, 170, 0.22);
}
.heli-skid::before { left: 5px; }
.heli-skid::after { right: 5px; }

.heli-light {
  left: -11px;
  top: 0px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,248,255,0.98) 0%, rgba(210,240,255,0.86) 38%, rgba(210,240,255,0) 100%);
  filter: blur(1px);
  box-shadow: 0 0 16px rgba(188, 235, 255, 0.86);
}


.heli-beam {
  /* v3.10.18 soft nose beam: starts at the helicopter nose */
  left: -11px;
  top: 2px;
  width: var(--beam-len, 420px);
  height: var(--beam-height, 120px);
  transform-origin: 0 50%;
  transform: rotate(var(--beam-rot, 90deg));
  opacity: var(--beam-opacity, 0.62);
  mix-blend-mode: screen;
  overflow: visible;
  background: transparent;
}

.heli-beam::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translateY(-50%) scaleY(var(--beam-open, 1));
  transform-origin: 0 50%;
  clip-path: polygon(0 49%, 0 51%, 12% 46%, 35% 39%, 62% 31%, 84% 23%, 100% 17%, 100% 83%, 84% 77%, 62% 69%, 35% 61%, 12% 54%);
  background: linear-gradient(90deg,
    rgba(218, 246, 255, 0.30) 0%,
    rgba(218, 246, 255, 0.22) 3%,
    rgba(218, 246, 255, 0.16) 14%,
    rgba(218, 246, 255, 0.11) 34%,
    rgba(218, 246, 255, 0.20) 62%,
    rgba(236, 251, 255, 0.40) 86%,
    rgba(255, 255, 255, 0.22) 100%);
  filter: blur(12px);
  border-radius: 999px;
}

.heli-beam::after {
  content: "";
  position: absolute;
  right: calc(var(--beam-height, 120px) * -0.18);
  top: 50%;
  width: calc(var(--beam-height, 120px) * 0.96);
  height: calc(var(--beam-height, 120px) * 0.62);
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse,
      rgba(255,255,255,0.92) 0%,
      rgba(238,250,255,0.76) 16%,
      rgba(215,244,255,0.42) 36%,
      rgba(195,238,255,0.20) 58%,
      rgba(195,238,255,0.07) 74%,
      rgba(195,238,255,0) 88%);
  filter: blur(10px);
  opacity: calc(var(--beam-opacity, 0.62) * 1.04);
  mix-blend-mode: screen;
}

.heli-hit {
  left: -11px;
  top: -66px;
  width: 280px;
  height: 235px;
  transform-origin: 0 50%;
  transform: rotate(var(--beam-rot, 90deg)) translateX(var(--beam-hit-offset, 360px)) scale(var(--hit-scale, 1));
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(255,255,255,0.62) 0%,
    rgba(238,250,255,0.44) 16%,
    rgba(216,245,255,0.24) 36%,
    rgba(198,241,255,0.11) 54%,
    rgba(198,241,255,0.04) 70%,
    rgba(198,241,255,0) 84%);
  filter: blur(28px);
  opacity: calc(var(--beam-opacity, 0.62) * 0.92);
  mix-blend-mode: screen;
}

.observer-flare {
  position: absolute;
  inset: 0;
  opacity: var(--observer-flare, 0);
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--observer-flare-x, 50%) var(--observer-flare-y, 30%), rgba(245, 251, 255, 0.58) 0%, rgba(216, 241, 255, 0.24) 5%, rgba(216, 241, 255, 0.10) 10%, rgba(216, 241, 255, 0) 18%),
    radial-gradient(circle at var(--observer-flare-x, 50%) var(--observer-flare-y, 30%), rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 12%, rgba(255,255,255,0) 22%),
    linear-gradient(180deg, rgba(205, 238, 255, 0.08), rgba(205, 238, 255, 0) 32%);
  filter: blur(10px);
}

@keyframes rotorSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Siren light effects */
.siren-bar,
.siren-glow,
.siren-beam,
.siren-reflection {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  left: var(--left);
  bottom: var(--bottom);
}

.siren-bar,
.siren-glow {
  width: var(--w);
  height: var(--h);
  transform: translate(-50%, 50%);
  border-radius: 999px;
  filter: blur(var(--blur));
  background:
    radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(var(--rgb),0.94) 18%, rgba(var(--rgb),0.56) 42%, rgba(var(--rgb),0.18) 60%, rgba(var(--rgb),0.02) 74%, rgba(var(--rgb),0) 84%);
  box-shadow:
    0 0 18px rgba(var(--rgb),0.78),
    0 0 42px rgba(var(--rgb),0.44),
    0 0 84px rgba(var(--rgb),0.24);
  animation: lightbarBlink var(--dur) infinite linear;
  animation-delay: var(--delay);
}

.siren-bar::after,
.siren-glow::after {
  content: "";
  position: absolute;
  inset: -12% -8%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(var(--rgb),0.28) 34%, rgba(var(--rgb),0) 74%);
}

.siren-beam {
  width: var(--bw);
  height: var(--bh);
  transform: translate(-50%, 50%) rotate(var(--rot));
  transform-origin: left center;
  filter: blur(var(--bblur));
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--rgb),0) 0%, rgba(var(--rgb),0.05) 12%, rgba(var(--rgb),0.25) 38%, rgba(var(--rgb),0.42) 55%, rgba(var(--rgb),0.14) 78%, rgba(var(--rgb),0) 100%);
  animation: beamBlink var(--dur) infinite linear;
  animation-delay: var(--delay);
}

.siren-reflection {
  width: var(--rw);
  height: var(--rh);
  transform: translate(-50%, 50%);
  filter: blur(var(--rblur));
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(var(--rgb),0.24) 0%, rgba(var(--rgb),0.14) 44%, rgba(var(--rgb),0.04) 72%, rgba(var(--rgb),0) 100%);
  animation: reflectBlink var(--dur) infinite linear;
  animation-delay: var(--delay);
}

.siren-blue,
.siren-blue-main,
.siren-blue-side {
  --left: 178px;
  --bottom: 279px;
  --w: calc(98px * var(--siren-scale));
  --h: calc(42px * var(--siren-scale));
  --blur: calc(14px * var(--siren-scale));
  --bw: calc(146px * var(--siren-scale));
  --bh: calc(34px * var(--siren-scale));
  --bblur: calc(11px * var(--siren-scale));
  --rot: -4deg;
  --rw: calc(66px * var(--siren-scale));
  --rh: calc(136px * var(--siren-scale));
  --rblur: calc(12px * var(--siren-scale));
  --rgb: 76, 197, 255;
  --dur: 2.73s;
  --delay: 0s;
}

.siren-red,
.siren-red-main,
.siren-red-side {
  --left: 225px;
  --bottom: 279px;
  --w: calc(98px * var(--siren-scale));
  --h: calc(42px * var(--siren-scale));
  --blur: calc(14px * var(--siren-scale));
  --bw: calc(146px * var(--siren-scale));
  --bh: calc(34px * var(--siren-scale));
  --bblur: calc(11px * var(--siren-scale));
  --rot: 4deg;
  --rw: calc(66px * var(--siren-scale));
  --rh: calc(136px * var(--siren-scale));
  --rblur: calc(12px * var(--siren-scale));
  --rgb: 255, 84, 112;
  --dur: 2.41s;
  --delay: .23s;
}

@keyframes lightbarBlink {
  0%, 11%, 100% { opacity: 0.02; }
  12% { opacity: 0.82; }
  16% { opacity: 0.18; }
  20% { opacity: 1; }
  24%, 52% { opacity: 0.03; }
  53% { opacity: 0.46; }
  58% { opacity: 0.10; }
  63% { opacity: 0.96; }
  67%, 100% { opacity: 0.02; }
}

@keyframes beamBlink {
  0%, 11%, 100% { opacity: 0; }
  12% { opacity: 0.18; }
  20% { opacity: 0.32; }
  24%, 52% { opacity: 0; }
  53% { opacity: 0.10; }
  63% { opacity: 0.38; }
  67%, 100% { opacity: 0; }
}

@keyframes reflectBlink {
  0%, 11%, 100% { opacity: 0; }
  12% { opacity: 0.12; }
  20% { opacity: 0.20; }
  24%, 52% { opacity: 0; }
  53% { opacity: 0.08; }
  63% { opacity: 0.26; }
  67%, 100% { opacity: 0; }
}
.login-card {
  position: relative;
  z-index: 2;
  width: min(100%, 388px);
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(13, 20, 40, 0.30), rgba(6, 10, 24, 0.50)),
    var(--panel);
  border: 1px solid var(--line);
  box-shadow:
    0 26px 70px var(--shadow),
    0 12px 34px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 0 40px rgba(91, 184, 255, 0.06);
  backdrop-filter: blur(15px) saturate(145%);
  -webkit-backdrop-filter: blur(15px) saturate(145%);
}

.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.brand-mark {
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(157, 202, 255, 0.48);
  background:
    radial-gradient(circle at 50% 35%, rgba(115, 194, 255, 0.18), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(7, 16, 37, 0.86), rgba(2, 8, 20, 0.82));
  box-shadow: 0 0 18px rgba(91, 184, 255, 0.18), inset 0 0 18px rgba(91, 184, 255, 0.10);
  overflow: hidden;
}
.brand-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid rgba(157, 202, 255, 0.18); }
.brand-mark .lspd { position: relative; z-index: 2; font-size: 1.2rem; line-height: 1; font-weight: 950; letter-spacing: -0.08em; color: #edf6ff; text-shadow: 0 0 12px rgba(91, 184, 255, 0.65); }
.brand-copy h1 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.2rem); line-height: 1; letter-spacing: -0.05em; }
.brand-copy p { margin: 6px 0 0; color: var(--muted); line-height: 1.4; font-size: 0.92rem; }

.error { margin-bottom: 12px; padding: 10px 12px; border-radius: 14px; color: #ffdce5; background: rgba(255, 63, 112, 0.10); border: 1px solid rgba(255, 107, 138, 0.28); font-size: 0.92rem; backdrop-filter: blur(6px); }
form { display: grid; gap: 12px; }
label span { display: block; margin-bottom: 6px; font-size: 0.84rem; color: #d8e0ef; font-weight: 760; }
input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 14px; outline: none; border: 1px solid rgba(148, 163, 184, 0.18); color: var(--text); background: rgba(3, 7, 18, 0.26); box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
input::placeholder { color: rgba(208, 216, 231, 0.56); }
input:focus { border-color: rgba(126, 231, 255, 0.40); box-shadow: 0 0 0 3px rgba(126, 231, 255, 0.07), 0 0 18px rgba(126, 231, 255, 0.08); background: rgba(3, 7, 18, 0.38); }
button {
  height: 46px; margin-top: 2px; border: 0; border-radius: 14px; cursor: pointer; color: #ffffff; font-weight: 900; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--blue), var(--violet) 52%, var(--pink)); box-shadow: 0 16px 30px rgba(91, 184, 255, 0.14), 0 0 18px rgba(255, 78, 183, 0.08); transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}
button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 18px 38px rgba(91, 184, 255, 0.18), 0 0 22px rgba(255, 78, 183, 0.11); }

@media (max-width: 540px) {
  .login-shell { padding: 14px 12px 20px; }
  .login-card { width: min(100%, 360px); padding: 16px; border-radius: 22px; }
  .brand-row { gap: 12px; }
  .brand-mark { width: 58px; height: 58px; }
  .brand-mark .lspd { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  .siren-bar, .siren-glow, .siren-beam, .siren-reflection, .heli-rotor { animation: none; opacity: 0.16; }
  .heli-beam, .heli-hit { opacity: 0.22; }
}


.login-card {
  transition: opacity 360ms ease, transform 500ms cubic-bezier(.22,.9,.31,1), filter 360ms ease;
}

.login-shell.is-login-sequence .login-card {
  opacity: 0;
  transform: translateY(68px) scale(0.88);
  filter: blur(16px);
  pointer-events: none;
  transition-duration: 620ms;
}

.login-shell.is-login-sequence .observer-flare {
  filter: blur(34px) brightness(1.65) saturate(1.12);
}

.login-shell.is-login-sequence::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--screen-whiteout, 0);
  z-index: 5;
  background:
    radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 16%, rgba(250, 253, 255, 0.98) 30%, rgba(243, 249, 255, 0.86) 48%, rgba(235, 246, 255, 0.50) 68%, rgba(235, 246, 255, 0) 84%),
    radial-gradient(circle at 42% 58%, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.32) 18%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 58% 58%, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.30) 18%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(248, 252, 255, 0.36), rgba(255, 255, 255, 1));
  mix-blend-mode: screen;
  transition: opacity 240ms linear;
}