.login-shell {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 45%, #10233a 0, #0b1420 55%, #080d14 100%);
}

.ai-backdrop {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.ai-neural-glow {
    position: absolute;
    width: min(68vw, 920px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #2676c51c 0, #2869a10b 38%, transparent 70%);
    filter: blur(14px);
    animation: neural-breathe 8s ease-in-out infinite alternate;
}

.ai-network {
    position: absolute;
    width: max(1100px, 115vw);
    height: max(720px, 105vh);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .72;
    animation: network-drift 30s ease-in-out infinite alternate;
}

.network-links path {
    fill: none;
    stroke: #5ea8ff;
    stroke-width: 1;
    stroke-opacity: .15;
    stroke-dasharray: 5 15;
    animation: network-flow 18s linear infinite;
}

.network-links path:nth-child(2n) {
    animation-direction: reverse;
    animation-duration: 24s;
    stroke: #71e0d0;
    stroke-opacity: .1;
}

.network-nodes circle {
    fill: #86bcff;
    opacity: .48;
    filter: drop-shadow(0 0 5px #54a5ffb3);
    animation: node-pulse 3.4s ease-in-out infinite alternate;
}

.network-nodes circle:nth-child(3n) {
    fill: #76ead4;
    animation-delay: -1.7s;
}

.network-nodes circle:nth-child(4n) {
    animation-delay: -2.6s;
}

.ai-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(74vw, 940px);
    height: min(34vw, 410px);
    border: 1px solid #73aef00c;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(-24deg);
    animation: orbit-turn 44s linear infinite;
}

.ai-orbit-two {
    width: min(62vw, 780px);
    height: min(49vw, 590px);
    transform: translate(-50%, -50%) rotate(34deg);
    animation-duration: 57s;
    animation-direction: reverse;
}

.ai-orbit-three {
    width: min(91vw, 1160px);
    height: min(26vw, 320px);
    transform: translate(-50%, -50%) rotate(54deg);
    animation-duration: 68s;
}

.ai-orbit span {
    position: absolute;
    width: 4px;
    height: 4px;
    left: 22%;
    top: 9%;
    border-radius: 50%;
    background: #83bbff;
    box-shadow: 0 0 12px 3px #5ea8ff91;
}

.ai-orbit-two span {
    left: 78%;
    top: 31%;
    background: #77ead4;
    box-shadow: 0 0 12px 3px #55d8bf73;
}

.ai-orbit-three span {
    left: 62%;
    top: 3%;
}

.ai-scanline {
    position: absolute;
    inset: 0;
    opacity: .13;
    background: linear-gradient(180deg, transparent 0 48%, #7bc2ff12 50%, transparent 52% 100%);
    background-size: 100% 180px;
    animation: scanline-pass 12s linear infinite;
}

.login-card {
    position: relative;
    z-index: 1;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    box-shadow: 0 25px 90px #0008, 0 0 70px #367dcc12;
}

@keyframes network-flow { to { stroke-dashoffset: -160px; } }
@keyframes node-pulse { from { opacity: .28; } to { opacity: .9; } }
@keyframes neural-breathe { from { opacity: .6; transform: translate(-50%, -50%) scale(.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes network-drift { from { translate: -1% -1%; } to { translate: 1% 1%; } }
@keyframes orbit-turn { to { rotate: 360deg; } }
@keyframes scanline-pass { from { background-position-y: -180px; } to { background-position-y: 100vh; } }

@media (max-width: 700px) {
    .ai-network { width: 980px; height: 760px; opacity: .48; }
    .ai-orbit { width: 120vw; height: 60vw; }
    .ai-orbit-two { width: 100vw; height: 88vw; }
    .ai-orbit-three { width: 145vw; height: 48vw; }
    .ai-neural-glow { width: 100vw; }
    .login-card { backdrop-filter: blur(10px); }
}