:root {
  color-scheme: dark;
  --bg: #050914;
  --panel: #0a1122;
  --line: rgba(116, 155, 213, .18);
  --text: #edf5ff;
  --muted: #70819e;
  --cyan: #25d9ff;
  --green: #31e0aa;
  --violet: #8b6cff;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Manrope, "Noto Sans SC", sans-serif;
}
button, input { font: inherit; }

.login-grid {
  position: fixed;
  inset: 0;
  opacity: .34;
  background-image: linear-gradient(rgba(41, 160, 209, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(41, 160, 209, .08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
.login-glow { position: fixed; width: 55vw; height: 55vw; border-radius: 50%; filter: blur(110px); opacity: .15; pointer-events: none; }
.glow-cyan { left: -26vw; top: -15vw; background: #00bfe8; }
.glow-violet { right: -30vw; bottom: -32vw; background: #6438e8; }

.login-shell { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.08fr) minmax(460px, .92fr); }
.brand-stage { position: relative; overflow: hidden; min-height: 720px; padding: 42px clamp(42px, 6vw, 92px); border-right: 1px solid rgba(61, 142, 185, .16); background: linear-gradient(145deg, rgba(7, 30, 48, .68), rgba(5, 9, 20, .12) 64%); }
.login-brand, .mobile-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.login-brand strong, .mobile-brand strong { font-size: 18px; letter-spacing: -.5px; }
.login-brand strong span, .mobile-brand strong span { color: var(--cyan); }
.brand-mark { position: relative; width: 30px; height: 30px; display: inline-grid; place-items: center; transform: rotate(30deg); }
.brand-mark:before, .brand-mark:after, .brand-mark i { content: ""; position: absolute; border: 1px solid var(--cyan); border-radius: 7px; }
.brand-mark:before { inset: 1px; opacity: .35; }
.brand-mark:after { inset: 6px; box-shadow: 0 0 16px rgba(37, 217, 255, .55); }
.brand-mark i { width: 4px; height: 4px; border: 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }

.stage-copy { position: relative; z-index: 2; max-width: 650px; margin-top: clamp(90px, 13vh, 145px); }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: #5f819e; font: 10px "DM Mono", monospace; letter-spacing: 1.8px; }
.eyebrow span { width: 25px; height: 1px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.stage-copy h1 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: 1.14; letter-spacing: -3.2px; }
.stage-copy h1 em { color: transparent; font-style: normal; background: linear-gradient(100deg, #f0f7ff, #51ddff 60%, #9f89ff); background-clip: text; -webkit-background-clip: text; }
.stage-copy > p:last-child { max-width: 540px; margin: 24px 0 0; color: #7085a1; font-size: 14px; line-height: 1.9; }

.radar-visual { position: absolute; width: min(48vw, 560px); aspect-ratio: 1; left: 33%; bottom: -18%; opacity: .62; }
.radar-ring { position: absolute; border: 1px solid rgba(41, 199, 235, .24); border-radius: 50%; }
.ring-one { inset: 6%; }.ring-two { inset: 23%; }.ring-three { inset: 39%; }
.radar-cross { position: absolute; background: linear-gradient(90deg, transparent, rgba(43, 210, 243, .25), transparent); }
.cross-x { left: 0; right: 0; top: 50%; height: 1px; }.cross-y { top: 0; bottom: 0; left: 50%; width: 1px; }
.radar-sweep { position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 5deg, rgba(38, 216, 255, .19), transparent 25%, transparent); animation: sweep 7s linear infinite; }
.radar-core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); border: 1px solid #6ce7ff; border-radius: 50%; box-shadow: 0 0 24px #22d7ff; }
.radar-core i { position: absolute; inset: 5px; border-radius: 50%; background: #d8f8ff; }
.signal { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(49, 224, 170, .08), 0 0 12px var(--green); }
.signal-one { left: 28%; top: 36%; }.signal-two { right: 25%; top: 44%; animation: pulse 2.3s infinite; }.signal-three { left: 43%; top: 18%; animation: pulse 2.3s .7s infinite; }
.radar-label { position: absolute; color: #56a7ba; font: 8px "DM Mono", monospace; letter-spacing: 1px; }
.label-one { left: 18%; top: 32%; }.label-two { right: 2%; top: 40%; }

.stage-metrics { position: absolute; z-index: 2; left: clamp(42px, 6vw, 92px); right: clamp(42px, 6vw, 92px); bottom: 42px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); padding-top: 18px; }
.stage-metrics div { padding-right: 20px; }
.stage-metrics span, .stage-metrics strong { display: block; }
.stage-metrics span { color: #4f6681; font-size: 9px; }
.stage-metrics strong { margin-top: 5px; color: #b4c3d7; font: 10px "DM Mono", monospace; letter-spacing: .7px; }
.stage-metrics .online { color: var(--green); }.online i, .panel-status > i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

.login-panel { min-height: 720px; display: grid; place-items: center; align-content: center; padding: 54px clamp(30px, 6vw, 92px); position: relative; }
.panel-status { position: absolute; top: 39px; right: 46px; display: flex; align-items: center; gap: 8px; color: #657895; font: 9px "DM Mono", monospace; letter-spacing: 1px; }
.panel-status b { margin-left: 7px; padding-left: 14px; border-left: 1px solid var(--line); color: #34dba8; font-weight: 500; }
.login-card { width: min(100%, 430px); padding: 34px; border: 1px solid rgba(92, 139, 194, .19); border-radius: 15px; background: linear-gradient(145deg, rgba(14, 26, 48, .9), rgba(8, 14, 29, .92)); box-shadow: 0 28px 80px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .02); }
.mobile-brand { display: none; }
.form-heading { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 30px; }
.heading-index { margin-top: 5px; color: var(--cyan); font: 9px "DM Mono", monospace; }
.form-heading h2 { margin: 0; font-size: 25px; letter-spacing: -1px; }
.form-heading p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
form { display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field > span { color: #8d9db6; font-size: 10px; font-weight: 600; }
.input-shell { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 13px; border: 1px solid rgba(107, 142, 191, .2); border-radius: 8px; background: rgba(4, 10, 23, .62); transition: .2s ease; }
.input-shell:focus-within { border-color: rgba(39, 215, 255, .58); box-shadow: 0 0 0 3px rgba(39, 215, 255, .07), 0 0 22px rgba(28, 186, 226, .08); }
.input-shell > svg { width: 17px; fill: none; stroke: #55718e; stroke-width: 1.5; }
.input-shell input { min-width: 0; flex: 1; border: 0; outline: 0; color: #e7f1ff; background: transparent; font-size: 12px; }
.input-shell input::placeholder { color: #40516b; }
.password-toggle { width: 26px; height: 26px; display: grid; place-items: center; border: 0; color: #526780; background: transparent; cursor: pointer; }
.password-toggle svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.form-error { min-height: 17px; margin-top: -5px; color: #ff8298; font-size: 10px; }
.login-button { position: relative; overflow: hidden; height: 48px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid rgba(74, 225, 255, .4); border-radius: 8px; color: #06121c; background: linear-gradient(100deg, #34ddff, #61e8d6); font-size: 11px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(25, 200, 224, .18); transition: transform .2s ease, box-shadow .2s ease; }
.login-button:hover { transform: translateY(-1px); box-shadow: 0 13px 36px rgba(25, 200, 224, .27); }
.login-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.login-button i { position: absolute; inset: 0; transform: translateX(-110%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); }
.login-button:hover i { animation: shine .8s ease; }
.login-button:disabled { opacity: .65; cursor: wait; transform: none; }
.login-button.loading svg { animation: drift .9s ease-in-out infinite alternate; }
.security-note { display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(103, 132, 174, .13); color: #52647c; font-size: 9px; line-height: 1.5; }
.security-note svg { width: 18px; flex: 0 0 auto; fill: none; stroke: #3c9aa9; stroke-width: 1.4; }
.login-panel footer { position: absolute; bottom: 30px; display: flex; align-items: center; gap: 9px; color: #3e5068; font: 8px "DM Mono", monospace; }
.login-panel footer i { width: 3px; height: 3px; border-radius: 50%; background: #41566f; }

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes shine { to { transform: translateX(110%); } }
@keyframes drift { to { transform: translateX(3px); } }

@media (max-width: 980px) {
  .login-shell { grid-template-columns: 1fr; }
  .brand-stage { display: none; }
  .login-panel { min-height: 100vh; padding: 70px 22px; }
  .mobile-brand { display: flex; margin-bottom: 31px; }
  .panel-status { top: 24px; right: 24px; }
}

@media (max-width: 520px) {
  .login-card { padding: 27px 21px; border-radius: 12px; }
  .panel-status span, .panel-status > i { display: none; }
  .login-panel footer { width: 100%; justify-content: center; }
}

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