:root { color-scheme: dark; --cyan:#4ce4ff; --line:rgba(76,228,255,.24); font-family:"SFMono-Regular","Avenir Next",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; display:grid; place-items:center; color:#e7fbff; overflow:hidden;
  background:radial-gradient(circle at 35% 50%,rgba(0,130,180,.18),transparent 35%),#02070c; }
.grid { position:fixed; inset:0; opacity:.45; background-image:linear-gradient(rgba(76,228,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(76,228,255,.035) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(circle,#000,transparent 82%); }
.login-shell { width:min(1050px,calc(100% - 32px)); min-height:590px; display:grid; grid-template-columns:1fr 1fr; position:relative;
  border:1px solid var(--line); background:rgba(4,13,21,.88); box-shadow:0 0 80px rgba(26,186,235,.1); clip-path:polygon(0 24px,24px 0,calc(100% - 24px) 0,100% 24px,100% calc(100% - 24px),calc(100% - 24px) 100%,24px 100%,0 calc(100% - 24px)); }
.identity { position:relative; display:grid; place-items:center; overflow:hidden; border-right:1px solid var(--line); }
.identity img { width:82%; z-index:2; filter:saturate(.9) drop-shadow(0 0 20px rgba(76,228,255,.55)); animation:presence 6s ease-in-out infinite; mask-image:linear-gradient(#000 80%,transparent); }
.identity p { position:absolute; bottom:38px; z-index:4; color:#75dcef; font-size:8px; letter-spacing:.26em; }
.halo { position:absolute; width:76%; aspect-ratio:1; border:1px dashed rgba(76,228,255,.55); border-radius:50%; animation:rotate 15s linear infinite; box-shadow:inset 0 0 45px rgba(76,228,255,.08); }
.halo::after { content:""; position:absolute; inset:10%; border:7px solid transparent; border-left-color:var(--cyan); border-right-color:#168dff; border-radius:50%; animation:rotate 6s linear reverse infinite; }
.scan { position:absolute; z-index:3; left:14%; right:14%; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); box-shadow:0 0 12px var(--cyan); animation:scan 3s ease-in-out infinite; }
.access-panel { padding:clamp(42px,7vw,78px); display:flex; flex-direction:column; justify-content:center; }
.eyebrow { margin:0; color:var(--cyan); font-size:8px; letter-spacing:.2em; }
h1 { margin:14px 0; font-size:clamp(32px,4vw,52px); font-weight:300; line-height:1.08; } h1 span { color:var(--cyan); }
.intro { color:#77949e; font:13px/1.6 "Avenir Next",system-ui; margin:0 0 28px; }
form { display:grid; gap:17px; } label { display:grid; gap:7px; color:#78a3af; font-size:8px; letter-spacing:.16em; text-transform:uppercase; }
input { width:100%; height:45px; border:1px solid rgba(76,228,255,.2); outline:0; padding:0 13px; color:#e7fbff; background:rgba(0,7,12,.8); font:14px "SFMono-Regular",monospace; transition:.2s; }
input:focus { border-color:var(--cyan); box-shadow:inset 3px 0 var(--cyan),0 0 18px rgba(76,228,255,.1); }
.message { min-height:18px; margin:0; color:#ff7c77; font:11px/1.5 "Avenir Next",system-ui; }
button { height:48px; display:flex; justify-content:space-between; align-items:center; padding:0 17px; cursor:pointer; border:1px solid var(--cyan); color:#dffcff; background:rgba(20,148,181,.12); font:10px "SFMono-Regular",monospace; letter-spacing:.18em; }
button:hover { background:rgba(20,148,181,.25); box-shadow:0 0 25px rgba(76,228,255,.15); } button:disabled { opacity:.5; cursor:wait; }
footer { display:flex; justify-content:space-between; margin-top:28px; color:#416873; font-size:7px; letter-spacing:.16em; }
@keyframes rotate { to { transform:rotate(360deg); } } @keyframes scan { 0%,100%{top:25%;opacity:.15} 50%{top:76%;opacity:1} }
@keyframes presence { 50% { transform:translateY(-5px) scale(1.01); filter:saturate(1.05) drop-shadow(0 0 28px rgba(76,228,255,.7)); } }
@media(max-width:760px){ body{overflow:auto}.login-shell{grid-template-columns:1fr;margin:18px 0}.identity{min-height:315px;border-right:0;border-bottom:1px solid var(--line)}.identity img{width:min(68%,300px)}.access-panel{padding:35px 25px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}