.login-body {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background: radial-gradient(1100px 640px at 22% -12%, rgba(50, 217, 255, .13), transparent 62%), radial-gradient(900px 620px at 82% 112%, rgba(39, 242, 174, .09), transparent 62%), #04070e;
}
.login-backdrop { position: absolute; inset: 0; pointer-events: none; }
.login-grid { position: absolute; inset: -20%; opacity: .5; background-image: linear-gradient(rgba(40, 68, 101, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(40, 68, 101, .16) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(75% 60% at 50% 45%, #000 35%, transparent 100%); }
.login-sweep { position: absolute; top: -30%; left: -40%; width: 55%; height: 160%; transform: rotate(11deg); background: linear-gradient(90deg, transparent, rgba(50, 217, 255, .07), transparent); animation: login-sweep 13s ease-in-out infinite; }
@keyframes login-sweep { 0%,100% { transform: translateX(0) rotate(11deg); } 50% { transform: translateX(180%) rotate(11deg); } }
.login-shell { position: relative; width: 100%; display: grid; place-items: center; }
.login-card { width: min(820px, 100%); display: grid; grid-template-columns: 300px minmax(0,1fr); overflow: hidden; border: 1px solid var(--line-bright); border-radius: 8px; background: rgba(10,18,34,.97); box-shadow: 0 34px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(50,217,255,.06); }
.login-aside { display: grid; align-content: space-between; gap: 22px; padding: 30px 24px; border-right: 1px solid var(--line); background: linear-gradient(180deg, rgba(50,217,255,.07), transparent 55%), rgba(6,12,24,.92); }
.login-brand { display: grid; gap: 6px; }
.noa4-wordmark { color: #fff; font: 800 38px/1 var(--sans); letter-spacing: -3px; }
.noa4-wordmark strong { color: var(--green); }
.login-brand small { color: #fff; opacity: .6; letter-spacing: .1em; font: 700 8px var(--mono); }
.login-spectrum { height: 62px; display: flex; align-items: flex-end; gap: 4px; padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.login-spectrum i { flex: 1; min-height: 6px; border-radius: 1px; background: linear-gradient(180deg, var(--cyan), rgba(50,217,255,.18)); transform-origin: bottom; animation: login-bar 2.6s ease-in-out infinite; }
.login-spectrum i:nth-child(1){height:38%}.login-spectrum i:nth-child(2){height:62%;animation-delay:-.3s}.login-spectrum i:nth-child(3){height:48%;animation-delay:-.7s}.login-spectrum i:nth-child(4){height:82%;animation-delay:-1.1s}.login-spectrum i:nth-child(5){height:56%;animation-delay:-.2s}.login-spectrum i:nth-child(6){height:71%;animation-delay:-1.45s}.login-spectrum i:nth-child(7){height:44%;animation-delay:-.85s}.login-spectrum i:nth-child(8){height:90%;animation-delay:-1.75s}.login-spectrum i:nth-child(9){height:52%;animation-delay:-.55s}.login-spectrum i:nth-child(10){height:66%;animation-delay:-2.1s}.login-spectrum i:nth-child(11){height:40%;animation-delay:-1.25s}.login-spectrum i:nth-child(12){height:74%;animation-delay:-2.4s}
@keyframes login-bar { 0%,100% { transform:scaleY(.45);opacity:.55 } 50% { transform:scaleY(1);opacity:1 } }
.login-facts { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.login-facts li { display: grid; gap: 1px; }.login-facts span { color: var(--green); letter-spacing: .1em; font: 800 9px var(--mono); }.login-facts small { color:#fff;opacity:.55;font-size:10px; }
.login-main { display: grid; align-content: start; gap: 12px; padding: 34px 32px 20px; }
.login-kicker { margin:0;color:var(--cyan);letter-spacing:.16em;font:800 8px var(--mono); }.login-main h1 { margin:0;font-size:21px; }.login-intro { margin:-6px 0 6px;color:#fff;opacity:.72;font-size:12px;line-height:1.55; }
#login-form { display:grid;gap:13px; }.login-field { display:grid;gap:5px; }.login-field > span { color:var(--cyan);letter-spacing:.1em;font:800 8px var(--mono); }.login-field input { height:40px;padding:0 12px;border:1px solid var(--line-bright);border-radius:3px;outline:0;background:var(--field);color:#fff; }.login-field input:focus { border-color:var(--cyan);box-shadow:0 0 0 2px rgba(50,217,255,.17); }
.login-button { height:42px;margin-top:3px;border:1px solid var(--green);border-radius:3px;background:rgba(39,242,174,.1);color:var(--green);letter-spacing:.16em;font:800 10px var(--mono); }.login-button:hover:not(:disabled){background:var(--green);color:#03150f}.login-button:disabled{opacity:.6;cursor:progress}
.login-message { padding:9px 11px;border-left:3px solid var(--red);background:rgba(255,79,111,.1);font-size:11px;line-height:1.5; }.login-message.ok{border-left-color:var(--green);background:rgba(39,242,174,.1)}
.login-foot { display:grid;gap:3px;margin-top:6px;padding-top:12px;border-top:1px solid var(--line);color:#fff;opacity:.5;font:9px/1.5 var(--mono); }
@media(max-width:780px){.login-card{width:min(420px,100%);grid-template-columns:1fr}.login-aside{border-right:0;border-bottom:1px solid var(--line);padding:22px}.login-facts{grid-template-columns:repeat(3,1fr)}.login-main{padding:24px 22px 18px}}
@media(prefers-reduced-motion:reduce){.login-spectrum i,.login-sweep{animation:none}}