:root {
  color-scheme: dark;
  --bg:#060a13; --panel:#0c1220; --line:rgba(153,166,205,.16); --text:#f5f7ff;
  --muted:#8993aa; --faint:#566079; --violet:#7867ff; --cyan:#48d6e7; --danger:#ff657e;
  --font:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular","Cascadia Code",Consolas,monospace;
}
* { box-sizing:border-box; }
html,body { width:100%; min-height:100%; margin:0; }
body { overflow-x:hidden; color:var(--text); background:var(--bg); font-family:var(--font); font-variant-numeric:tabular-nums; }
button,input { color:inherit; font:inherit; }
.ambient,.grid,.scanline,.glow { position:fixed; pointer-events:none; }
.ambient { z-index:0; inset:0; overflow:hidden; }
.grid { inset:0; opacity:.36; background-image:linear-gradient(rgba(112,134,196,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(112,134,196,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,#000,transparent 76%); }
.grid::before { position:absolute; inset:0; content:""; background:radial-gradient(circle at 18% 28%,rgba(69,98,213,.12),transparent 31%),radial-gradient(circle at 68% 78%,rgba(38,195,205,.06),transparent 24%); }
.glow { border-radius:50%; filter:blur(4px); }
.glow-one { top:-25vw; left:-15vw; width:55vw; height:55vw; background:rgba(73,72,196,.15); }
.glow-two { right:23%; bottom:-22vw; width:45vw; height:45vw; background:rgba(25,170,187,.08); }
.scanline { top:0; left:0; width:58%; height:1px; opacity:.65; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 16px var(--cyan); animation:scan 7s linear infinite; }

.login-shell { position:relative; z-index:1; display:grid; min-height:100vh; grid-template-columns:minmax(520px,1.28fr) minmax(460px,.72fr); }
.intro { position:relative; display:flex; min-height:680px; padding:54px clamp(52px,7vw,118px) 45px; flex-direction:column; justify-content:space-between; border-right:1px solid rgba(151,164,201,.1); }
.brand { display:flex; align-items:center; gap:13px; }
.brand-mark { display:grid; width:43px; height:49px; place-items:center; }
.brand-mark svg { width:100%; height:100%; overflow:visible; fill:rgba(72,214,231,.06); stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 12px rgba(72,214,231,.18)); }
.brand-mark path:last-child { fill:none; stroke-width:3.5; }
.brand b,.brand small { display:block; }
.brand b { font-size:16px; letter-spacing:.11em; }
.brand small { margin-top:5px; color:var(--faint); font:600 8px/1 var(--mono); letter-spacing:.24em; }
.intro-copy { margin-top:6vh; }
.eyebrow { display:flex; align-items:center; gap:9px; color:#9b91ff; font:700 9px/1 var(--mono); letter-spacing:.2em; }
.eyebrow i { width:27px; height:1px; background:linear-gradient(90deg,var(--violet),transparent); }
.intro-copy h1 { margin:21px 0 22px; font-size:clamp(38px,4vw,66px); line-height:1.16; letter-spacing:-.045em; }
.intro-copy h1 em { color:transparent; background:linear-gradient(100deg,#fff 5%,#a79cff 50%,#65dcea); background-clip:text; font-style:normal; }
.intro-copy p { max-width:590px; margin:0; color:var(--muted); font-size:14px; line-height:2; letter-spacing:.02em; }

.signal-card { width:min(100%,670px); margin:6vh 0 3vh; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,rgba(18,25,44,.8),rgba(8,15,28,.62)); box-shadow:0 25px 70px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.025); backdrop-filter:blur(16px); }
.signal-head { display:flex; height:45px; align-items:center; justify-content:space-between; padding:0 17px; border-bottom:1px solid rgba(153,166,205,.1); color:#b9c2d5; font-size:10px; }
.signal-head span { display:flex; align-items:center; gap:8px; }
.signal-head span i { width:6px; height:6px; border-radius:50%; background:#42dda2; box-shadow:0 0 0 4px rgba(66,221,162,.08),0 0 10px rgba(66,221,162,.5); animation:pulse 1.8s infinite; }
.signal-head b { padding:3px 6px; border:1px solid rgba(72,214,231,.17); border-radius:4px; color:var(--cyan); font:700 7px var(--mono); letter-spacing:.1em; }
.signal-map { position:relative; height:118px; overflow:hidden; background:radial-gradient(ellipse at 76% 50%,rgba(72,214,231,.08),transparent 25%); }
.signal-map::before { position:absolute; inset:0; content:""; opacity:.22; background-image:radial-gradient(circle,rgba(188,202,230,.72) 1px,transparent 1.4px); background-size:13px 13px; mask-image:linear-gradient(90deg,transparent,#000 18%,#000 85%,transparent); }
.signal-map svg { position:absolute; inset:0; width:100%; height:100%; }
.route { fill:none; stroke-width:1.2; stroke-linecap:round; stroke-dasharray:12 180; animation:route 4.8s linear infinite; }
.route-a { stroke:#9d79ff; filter:drop-shadow(0 0 4px rgba(157,121,255,.65)); }
.route-b { stroke:#42d5e6; animation-delay:-2.1s; animation-duration:5.6s; filter:drop-shadow(0 0 4px rgba(66,213,230,.65)); }
.node { position:absolute; z-index:2; width:5px; height:5px; border-radius:50%; background:#9d79ff; box-shadow:0 0 8px #9d79ff; }
.node-a { top:72%; left:4%; }.node-b { top:29%; left:40%; }.node-c { top:66%; left:63%; }
.target { position:absolute; z-index:2; top:35px; right:15px; display:grid; width:30px; height:30px; place-items:center; border:1px solid rgba(72,214,231,.28); border-radius:50%; box-shadow:0 0 0 8px rgba(72,214,231,.035); }
.target::before,.target::after { position:absolute; border:1px solid rgba(72,214,231,.18); border-radius:50%; content:""; animation:ring 2.4s infinite; }
.target::before { inset:4px; }.target::after { inset:8px; animation-delay:.8s; }
.target i { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.signal-meta { display:grid; padding:0 16px 15px; grid-template-columns:repeat(3,1fr); gap:9px; }
.signal-meta span { padding:10px 12px; border:1px solid rgba(153,166,205,.09); border-radius:8px; background:rgba(255,255,255,.018); }
.signal-meta small,.signal-meta b { display:block; }
.signal-meta small { color:var(--faint); font-size:8px; }.signal-meta b { margin-top:5px; color:#c6cede; font-size:10px; font-weight:550; }
.intro-footer { display:flex; align-items:center; gap:9px; color:var(--faint); font-size:9px; }
.intro-footer i { width:5px; height:5px; border-radius:50%; background:#42dda2; }

.auth-panel { position:relative; display:flex; min-height:680px; padding:45px clamp(44px,5vw,82px) 31px; flex-direction:column; justify-content:center; background:linear-gradient(155deg,rgba(16,21,36,.78),rgba(7,11,20,.9)); box-shadow:-35px 0 90px rgba(0,0,0,.14); }
.mobile-brand { display:none; }
.auth-box { width:min(100%,430px); margin:auto; }
.auth-heading { display:flex; align-items:flex-start; gap:14px; }
.status-dot { display:grid; width:39px; height:39px; flex:0 0 39px; place-items:center; border:1px solid rgba(120,103,255,.26); border-radius:11px; background:rgba(120,103,255,.1); }
.status-dot i { width:8px; height:8px; border:2px solid #a79cff; border-radius:50%; box-shadow:0 0 11px rgba(167,156,255,.8); }
.auth-heading small { color:#8076dd; font:700 8px var(--mono); letter-spacing:.18em; }
.auth-heading h2 { margin:9px 0 7px; font-size:25px; line-height:1.2; letter-spacing:-.025em; }
.auth-heading p { margin:0; color:var(--muted); font-size:11px; }
form { margin-top:42px; }
form label { color:#c7cede; font-size:11px; font-weight:550; }
.password-label { display:flex; margin-top:21px; align-items:center; justify-content:space-between; }
.password-label span { color:#d2a04d; font-size:8px; }
.field { position:relative; display:flex; height:52px; margin-top:9px; align-items:center; border:1px solid rgba(153,166,205,.18); border-radius:10px; background:rgba(3,7,14,.42); transition:border-color .2s,box-shadow .2s,background .2s; }
.field:focus-within { border-color:rgba(120,103,255,.72); background:rgba(8,11,22,.68); box-shadow:0 0 0 3px rgba(120,103,255,.09),0 12px 32px rgba(0,0,0,.12); }
.field.invalid { border-color:rgba(255,101,126,.66); box-shadow:0 0 0 3px rgba(255,101,126,.07); }
.field > svg { width:17px; margin-left:16px; flex:0 0 17px; fill:none; stroke:#677189; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:stroke .2s; }
.field:focus-within > svg { stroke:#a99fff; }
.field input { width:100%; height:100%; min-width:0; padding:0 13px; border:0; outline:0; color:var(--text); background:transparent; caret-color:#9d91ff; font-size:12px; }
.field input::placeholder { color:#4c566c; }
.password-toggle { display:grid; width:45px; height:100%; flex:0 0 45px; cursor:pointer; place-items:center; border:0; outline:0; color:#69748c; background:transparent; }
.password-toggle:hover,.password-toggle:focus-visible { color:#b5bed0; }
.password-toggle svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.password-toggle .eye-closed { display:none; }
.password-toggle.visible .eye-open { display:none; }.password-toggle.visible .eye-closed { display:block; }
.form-message { min-height:31px; padding:10px 2px 0; color:var(--danger); font-size:10px; }
.submit-button { position:relative; display:flex; width:100%; height:51px; cursor:pointer; align-items:center; justify-content:center; gap:10px; overflow:hidden; border:1px solid rgba(166,155,255,.52); border-radius:10px; outline:0; color:#fff; background:linear-gradient(100deg,#6859eb,#7d68ff 58%,#5f72ed); box-shadow:0 13px 30px rgba(91,75,215,.22),inset 0 1px rgba(255,255,255,.18); font-size:12px; font-weight:650; letter-spacing:.04em; transition:transform .2s,box-shadow .2s,filter .2s; }
.submit-button::before { position:absolute; top:0; left:-65%; width:40%; height:100%; content:""; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); transform:skewX(-18deg); transition:left .55s; }
.submit-button:hover { box-shadow:0 16px 36px rgba(91,75,215,.3),inset 0 1px rgba(255,255,255,.2); filter:brightness(1.06); transform:translateY(-1px); }
.submit-button:hover::before { left:125%; }.submit-button:active { transform:translateY(0); }
.submit-button:focus-visible { box-shadow:0 0 0 3px rgba(120,103,255,.22),0 16px 36px rgba(91,75,215,.25); }
.submit-button svg { width:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.submit-button .spinner { display:none; width:17px; height:17px; border:2px solid rgba(255,255,255,.32); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; }
.submit-button.loading { cursor:wait; }.submit-button.loading svg { display:none; }.submit-button.loading .spinner { display:block; }
.security-note { display:flex; margin-top:24px; padding:13px 14px; align-items:flex-start; gap:11px; border:1px solid rgba(72,214,231,.09); border-radius:9px; background:rgba(72,214,231,.025); }
.security-note svg { width:18px; flex:0 0 18px; fill:none; stroke:#59c8d6; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.security-note b,.security-note small { display:block; }.security-note b { color:#aeb8cb; font-size:9px; }.security-note small { margin-top:5px; color:var(--faint); font-size:8px; line-height:1.5; }
.auth-panel footer { position:absolute; right:0; bottom:29px; left:0; color:#3f495e; text-align:center; font:650 7px var(--mono); letter-spacing:.18em; }

@keyframes scan { from { transform:translateY(-5vh); } to { transform:translateY(105vh); } }
@keyframes pulse { 50% { opacity:.45; transform:scale(.8); } }
@keyframes route { from { stroke-dashoffset:210; } to { stroke-dashoffset:0; } }
@keyframes ring { 70%,100% { opacity:0; transform:scale(1.7); } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width:980px) {
  .login-shell { grid-template-columns:1fr; }
  .intro { display:none; }
  .auth-panel { min-height:100vh; padding:42px 28px 70px; background:radial-gradient(circle at 50% 14%,rgba(91,77,204,.12),transparent 26%),linear-gradient(155deg,rgba(16,21,36,.9),rgba(7,11,20,.96)); }
  .mobile-brand { position:absolute; top:29px; left:31px; display:flex; align-items:center; gap:9px; color:#bbc5d8; font:700 10px var(--mono); letter-spacing:.14em; }
  .mobile-brand span { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
  .auth-box { max-width:440px; }
}
@media (max-width:520px) {
  .auth-panel { padding-right:22px; padding-left:22px; }
  .auth-heading h2 { font-size:22px; }
  form { margin-top:34px; }
  .security-note { padding-right:10px; padding-left:10px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}