:root{
  color-scheme:dark;
  --bg:#050a13;
  --panel:#081321;
  --panel-2:#0b1929;
  --line:rgba(128,173,215,.16);
  --text:#f3f7ff;
  --muted:#8ea2b7;
  --cyan:#58dcff;
  --purple:#9a7cff;
  --green:#58e99b;
  --danger:#ff7890;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text)}
body{min-height:100vh;overflow-x:hidden}
button,input{font:inherit}
.login-layout{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(440px,.92fr);background:linear-gradient(145deg,#06111f 0%,#040812 70%)}

.login-scene{position:relative;min-height:100vh;overflow:hidden;padding:44px 58px 34px;border-right:1px solid rgba(112,176,222,.13);background:radial-gradient(720px 520px at 20% 8%,rgba(56,189,248,.16),transparent 64%),radial-gradient(680px 520px at 90% 94%,rgba(139,92,246,.16),transparent 68%),linear-gradient(150deg,#081828,#06111d 58%,#050b14);display:flex;flex-direction:column;isolation:isolate}
.login-scene:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 49.8%,rgba(92,199,244,.045) 50%,transparent 50.2%),linear-gradient(transparent 0 49.8%,rgba(92,199,244,.045) 50%,transparent 50.2%);background-size:72px 72px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 82%);z-index:-2}
.scene-grid{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 38%,rgba(86,207,255,.05) 38.2%,transparent 38.5%),linear-gradient(25deg,transparent 0 62%,rgba(154,124,255,.045) 62.2%,transparent 62.5%);z-index:-1}
.scene-orbit{position:absolute;border:1px solid rgba(100,213,255,.1);border-radius:50%;pointer-events:none;z-index:-1}
.scene-orbit-one{width:460px;height:460px;right:-210px;top:12%}
.scene-orbit-two{width:680px;height:680px;left:-350px;bottom:-440px;border-color:rgba(155,124,255,.1)}
.scene-brand{display:flex;align-items:center;gap:15px;position:relative;z-index:2}
.scene-brand img{width:62px;height:62px;filter:drop-shadow(0 0 20px rgba(75,214,255,.3))}
.scene-brand>div{display:flex;flex-direction:column;min-width:0}
.scene-brand b{font-size:20px;letter-spacing:.12em}
.scene-brand span{margin-top:4px;color:#78dfff;font-size:9px;font-weight:800;letter-spacing:.23em}
.scene-brand small{margin-top:7px;color:#8194aa;font-size:9px;letter-spacing:.08em}
.scene-copy{position:relative;z-index:2;margin:auto 0 230px;max-width:700px}
.scene-kicker{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid rgba(112,208,255,.16);border-radius:999px;background:rgba(9,31,51,.58);color:#8fdfff;font-size:10px;font-weight:900;letter-spacing:.14em}
.scene-kicker i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green)}
.scene-copy h1{margin:22px 0 20px;font-size:clamp(48px,5.4vw,82px);line-height:.99;letter-spacing:-.055em}
.scene-copy h1 em{font-style:normal;background:linear-gradient(90deg,#72e4ff 0%,#8cb9ff 46%,#b997ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.scene-copy p{max-width:620px;margin:0;color:#93a7bb;font-size:16px;line-height:1.72}
.scene-features{position:absolute;left:58px;right:58px;bottom:35px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;z-index:3}
.scene-features article{min-width:0;padding:14px 15px;border:1px solid rgba(112,180,226,.14);border-radius:16px;background:linear-gradient(145deg,rgba(11,29,48,.88),rgba(6,18,31,.78));display:flex;gap:11px;align-items:center;box-shadow:inset 0 1px rgba(255,255,255,.025)}
.scene-features i{font-style:normal;color:#69ddff;font-size:9px;font-weight:950}
.scene-features div{display:flex;min-width:0;flex-direction:column;gap:3px}
.scene-features b{font-size:12px}
.scene-features span{color:#74899e;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.smart-city{position:absolute;left:0;right:0;bottom:102px;height:235px;z-index:0;opacity:.78;filter:drop-shadow(0 -12px 28px rgba(45,192,255,.08))}
.city-glow{position:absolute;left:5%;right:5%;bottom:0;height:92px;background:radial-gradient(ellipse at center,rgba(66,198,255,.16),transparent 68%)}
.building{position:absolute;bottom:8px;border:1px solid rgba(88,198,242,.14);border-bottom:0;background:linear-gradient(180deg,rgba(22,57,82,.64),rgba(8,25,42,.78));box-shadow:inset 0 0 28px rgba(74,191,236,.04);display:grid;grid-template-columns:repeat(2,1fr);gap:9px;padding:12px 10px;align-content:start}
.building i{display:block;height:6px;border-radius:1px;background:rgba(107,212,250,.16);box-shadow:0 0 8px rgba(96,213,255,.08)}
.b1{left:2%;width:12%;height:90px}.b2{left:13%;width:15%;height:145px}.b3{left:28%;width:12%;height:112px}.tower{left:40%;width:17%;height:220px;grid-template-columns:repeat(3,1fr);clip-path:polygon(6% 11%,42% 11%,48% 0,54% 11%,94% 11%,100% 100%,0 100%)}
.tower span{position:absolute;left:50%;top:0;width:2px;height:34px;background:rgba(92,215,255,.32);transform:translate(-50%,-25px)}
.b4{left:57%;width:18%;height:132px;grid-template-columns:repeat(3,1fr)}.b5{left:75%;width:22%;height:175px;grid-template-columns:repeat(3,1fr)}
.city-line{position:absolute;left:0;right:0;bottom:7px;height:1px;background:linear-gradient(90deg,transparent,rgba(97,211,255,.34),transparent)}

.login-panel{position:relative;min-height:100vh;display:grid;place-items:center;padding:44px;background:radial-gradient(560px 480px at 50% 18%,rgba(92,124,255,.09),transparent 70%),linear-gradient(145deg,#070e19,#040811)}
.login-panel:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(85,153,199,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(85,153,199,.025) 1px,transparent 1px);background-size:50px 50px;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.login-card{position:relative;z-index:1;width:min(100%,480px);padding:38px;border-radius:28px;border:1px solid rgba(114,181,230,.17);background:linear-gradient(145deg,rgba(12,28,47,.98),rgba(6,16,28,.99));box-shadow:0 30px 100px rgba(0,0,0,.44),inset 0 1px rgba(255,255,255,.035)}
.security-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid rgba(81,225,156,.18);border-radius:999px;background:rgba(42,130,94,.08);color:#90eab9;font-size:9px;font-weight:850;letter-spacing:.08em}
.security-chip i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 13px rgba(88,233,155,.8)}
.login-card header{margin:24px 0 28px}
.login-card header>small{color:#81dfff;font-size:10px;font-weight:950;letter-spacing:.18em}
.login-card h2{margin:10px 0 7px;font-size:36px;line-height:1.08;letter-spacing:-.04em}
.login-card header p{margin:0;color:#8499ad;font-size:13px;line-height:1.55}
.field-label{display:grid;gap:9px;margin:17px 0}
.field-label>span{color:#b2c2d1;font-size:11px;font-weight:800}
.field-shell{height:58px;display:flex;align-items:center;padding:0 15px;border:1px solid rgba(111,175,220,.18);border-radius:15px;background:#071421;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.field-shell:focus-within{border-color:rgba(91,220,255,.8);background:#081725;box-shadow:0 0 0 4px rgba(83,214,255,.08)}
.field-shell svg{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:#6bdcff;stroke-width:1.8}
.field-shell input{width:100%;height:100%;padding:0 12px;border:0;outline:0;background:transparent;color:#f2f7ff;font-size:15px;caret-color:#72dfff;-webkit-text-fill-color:#f2f7ff}
.field-shell input::placeholder{color:#526579}
.field-shell button{height:32px;padding:0 6px;border:0;background:transparent;color:#7bdbff;font-size:9px;font-weight:950;cursor:pointer;letter-spacing:.04em}
.field-shell input:-webkit-autofill,.field-shell input:-webkit-autofill:hover,.field-shell input:-webkit-autofill:focus,.field-shell input:-webkit-autofill:active{-webkit-text-fill-color:#f2f7ff!important;caret-color:#72dfff!important;-webkit-box-shadow:0 0 0 1000px #071421 inset!important;box-shadow:0 0 0 1000px #071421 inset!important;transition:background-color 99999s ease-out 0s!important}
.login-options{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;margin:18px 0 21px}
.remember{display:flex;align-items:center;gap:9px;cursor:pointer;min-width:0}
.remember input{position:absolute;opacity:0;pointer-events:none}
.remember>span{position:relative;width:19px;height:19px;flex:0 0 auto;border:1px solid #3d586f;border-radius:6px;background:#071421}
.remember input:checked+span{border-color:#64dfff;background:linear-gradient(135deg,#4bdcff,#8a82ff)}
.remember input:checked+span:after{content:"";position:absolute;left:5px;top:4px;width:7px;height:4px;border-left:2px solid #06101b;border-bottom:2px solid #06101b;transform:rotate(-45deg)}
.remember b{color:#8da1b5;font-size:11px;white-space:nowrap}
.login-options>small{color:#5f7488;font-size:9px;text-align:right}
.login-error{display:none;margin-bottom:14px;padding:12px 14px;border:1px solid rgba(255,112,139,.3);border-radius:12px;background:rgba(255,74,107,.08);color:#ff9db0;font-size:11px}
.login-error.show{display:block}
.login-submit{width:100%;height:58px;border:0;border-radius:15px;background:linear-gradient(90deg,#43d9ff 0%,#668fff 52%,#9c76ff 100%);color:#06101b;font-size:14px;font-weight:950;display:flex;align-items:center;justify-content:center;gap:15px;cursor:pointer;box-shadow:0 18px 42px rgba(73,154,255,.21);transition:filter .16s ease,transform .16s ease}
.login-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.login-submit:disabled{opacity:.62;cursor:wait;transform:none}
.login-submit.loading i{animation:loginSpin .75s linear infinite}
@keyframes loginSpin{to{transform:rotate(360deg)}}
.login-card footer{margin-top:24px;padding-top:18px;border-top:1px solid rgba(105,168,211,.11);display:flex;align-items:center;justify-content:space-between;gap:12px;color:#62778b;font-size:9px}
.login-card footer>span{display:flex;align-items:center;gap:7px}
.login-card footer>span i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 11px rgba(88,233,155,.7)}
.mobile-brand{display:none}
.mobile-brand img{width:42px;height:42px}.mobile-brand>div{display:flex;flex-direction:column}.mobile-brand b{font-size:12px;letter-spacing:.09em}.mobile-brand small{margin-top:4px;color:#74899e;font-size:8px}

@media(max-width:1050px){
  .login-layout{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr)}
  .login-scene{padding:36px 38px}.scene-features{left:38px;right:38px}.scene-copy h1{font-size:clamp(42px,5.1vw,66px)}
}
@media(max-width:840px){
  .login-layout{display:block;min-height:100dvh}
  .login-scene{display:none}
  .login-panel{min-height:100dvh;padding:18px;background:radial-gradient(580px 450px at 12% 0%,rgba(40,184,236,.14),transparent 65%),radial-gradient(560px 470px at 100% 100%,rgba(143,94,255,.13),transparent 68%),linear-gradient(145deg,#071423,#040914)}
  .login-card{width:min(100%,520px);padding:30px 23px;border-radius:24px}
  .mobile-brand{display:flex;align-items:center;gap:11px;margin-bottom:28px}
  .login-card h2{font-size:31px}
}
@media(max-width:480px){
  .login-panel{padding:12px}
  .login-card{padding:26px 19px;border-radius:21px}
  .login-card header{margin:21px 0 24px}
  .field-shell{height:56px}
  .login-options{grid-template-columns:1fr;gap:8px}
  .login-options>small{text-align:left;padding-left:28px}
  .login-card footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}