:root { color-scheme: dark; --navy:#031a35; --blue:#0a67b3; --cyan:#24e0e9; --line:rgba(92,214,255,.3); --text:#eefaff; --muted:#8eafc8; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; min-height:100vh; color:var(--text); font-family:"Noto Sans SC",sans-serif; background:radial-gradient(circle at 10% 10%,#075083 0,transparent 27%),radial-gradient(circle at 85% 90%,#093d74 0,transparent 33%),linear-gradient(132deg,#020e20,#041e3d 55%,#03142c); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.35; background-image:linear-gradient(rgba(72,213,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(72,213,255,.08) 1px,transparent 1px); background-size:40px 40px; mask-image:linear-gradient(to bottom,black,transparent); }
.login-shell { position:relative; min-height:100vh; display:grid; place-items:center; padding:32px 22px 64px; overflow:hidden; }
.ambient { position:absolute; width:36rem; height:36rem; border:1px solid rgba(34,219,241,.18); border-radius:50%; pointer-events:none; }
.ambient-one { top:-21rem; left:-12rem; box-shadow:0 0 100px rgba(10,154,229,.18),inset 0 0 80px rgba(10,154,229,.1); }
.ambient-two { right:-22rem; bottom:-23rem; border-width:34px; border-color:rgba(7,93,164,.13); }
.login-card { width:min(960px,100%); min-height:520px; z-index:1; display:grid; grid-template-columns:1.08fr .92fr; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:rgba(3,25,53,.78); box-shadow:0 26px 90px rgba(0,0,0,.43),0 0 45px rgba(21,189,240,.09); backdrop-filter:blur(15px); }
.login-brand { position:relative; display:flex; flex-direction:column; justify-content:center; padding:65px 8%; background:linear-gradient(145deg,rgba(10,92,161,.37),rgba(1,17,39,.3)); }
.login-brand::after { content:""; position:absolute; inset:34px 0 34px auto; width:1px; background:linear-gradient(transparent,var(--line),transparent); }
.brand-mark { position:relative; width:72px; height:72px; margin-bottom:31px; border:1px solid var(--cyan); transform:rotate(45deg); box-shadow:0 0 22px rgba(36,224,233,.42); }
.brand-mark span { position:absolute; display:block; background:var(--cyan); box-shadow:0 0 11px var(--cyan); }
.brand-mark span:nth-child(1) { width:40px; height:3px; left:16px; top:23px; }.brand-mark span:nth-child(2) { width:3px; height:34px; left:34px; top:19px; }.brand-mark span:nth-child(3) { width:21px; height:3px; left:25px; top:43px; }
.eyebrow { margin:0 0 12px; color:var(--cyan); font:500 .72rem/1.4 Orbitron,sans-serif; letter-spacing:1.8px; }.login-brand h1 { margin:0; font-size:clamp(1.65rem,3.2vw,2.32rem); line-height:1.42; letter-spacing:1.5px; text-shadow:0 0 20px rgba(60,208,255,.28); }.brand-caption { margin:22px 0 0; color:var(--muted); letter-spacing:3px; font-size:.86rem; }
.login-panel { display:flex; flex-direction:column; justify-content:center; padding:58px clamp(28px,6vw,62px); }.panel-heading p { margin:0 0 4px; font-size:.78rem; letter-spacing:2px; color:var(--cyan); }.panel-heading h2 { margin:0; font-size:1.7rem; letter-spacing:1px; }.panel-heading span { display:block; width:42px; height:2px; margin:18px 0 29px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
label { display:block; margin:0 0 8px; color:#b6d7ed; font-size:.85rem; }.input-wrap { position:relative; display:flex; align-items:center; margin-bottom:20px; }.input-icon { position:absolute; left:14px; color:#4bddeb; }.input-wrap input { width:100%; height:48px; padding:0 48px 0 41px; border:1px solid rgba(117,204,239,.25); border-radius:6px; outline:none; color:var(--text); font:400 .96rem "Noto Sans SC",sans-serif; background:rgba(0,9,29,.4); transition:.2s; }.input-wrap input::placeholder { color:#6386a2; }.input-wrap input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(36,224,233,.1),0 0 15px rgba(36,224,233,.13); }.password-toggle { position:absolute; right:10px; border:0; padding:5px; color:#78cde7; font:inherit; font-size:.76rem; background:transparent; cursor:pointer; }.password-toggle:hover { color:var(--cyan); }.login-message { min-height:20px; margin:0 0 13px; color:#ff8d9c; font-size:.82rem; }.login-submit { width:100%; height:49px; display:flex; align-items:center; justify-content:center; gap:12px; border:1px solid #37e0e9; border-radius:6px; color:#01233d; font:600 .97rem "Noto Sans SC",sans-serif; letter-spacing:2px; background:linear-gradient(100deg,#22d9dd,#59e4f2); box-shadow:0 0 24px rgba(37,221,233,.23); cursor:pointer; transition:.2s; }.login-submit:hover { transform:translateY(-1px); box-shadow:0 0 30px rgba(37,221,233,.4); }.login-submit:disabled { cursor:wait; opacity:.65; }.login-submit b { font-size:1.3rem; }.security-note { margin:23px 0 0; color:#7297b1; font-size:.75rem; text-align:center; }.security-note span { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#3bf1c0; box-shadow:0 0 8px #3bf1c0; }footer { position:absolute; z-index:1; bottom:24px; color:#6d94b0; font-size:.75rem; letter-spacing:1px; }
@media (max-width:720px) { .login-shell { padding:20px 15px 58px; }.login-card { grid-template-columns:1fr; min-height:0; }.login-brand { min-height:225px; padding:32px 30px; }.login-brand::after { display:none; }.brand-mark { width:47px; height:47px; margin-bottom:17px; }.brand-mark span:nth-child(1) { width:26px; left:10px; top:15px; }.brand-mark span:nth-child(2) { height:24px; left:21px; top:12px; }.brand-mark span:nth-child(3) { width:14px; left:16px; top:28px; }.brand-caption { margin-top:12px; letter-spacing:2px; }.login-panel { padding:35px 30px 38px; } }