body:has(.login-night){background:#060b1b}
.login-night{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 20% 66%,#76307155,transparent 45%),linear-gradient(#060a1a 10%,#15132d 48%,#312049 67%,#072335 68%,#06111c)}
.night-stars{position:absolute;inset:0 0 30%;background-image:radial-gradient(circle,#e6f5ffbb 1px,transparent 1.6px),radial-gradient(circle,#9ed9ff88 .8px,transparent 1.5px),radial-gradient(circle,#ead1ff99 1px,transparent 2px);background-size:137px 109px,211px 173px,293px 227px;background-position:21px 31px,70px 90px,100px 20px;mask-image:linear-gradient(#000, #0009 65%,transparent);animation:night-twinkle 8s ease-in-out infinite alternate}
.night-moon{position:absolute;left:40%;top:19%;width:58px;height:58px;border-radius:50%;background:#c7c9ed;box-shadow:0 0 48px #b29ce93d,inset -14px -6px 0 #8a86b4;opacity:.65}
.night-city{position:absolute;left:0;right:0;bottom:32%;height:110px;display:flex;align-items:flex-end;gap:10px;opacity:.6}
.night-city i{flex:1;min-width:12px;height:calc(20px + mod(var(--tower)*17,75)*1px);background:repeating-linear-gradient(0deg,transparent 0 12px,#84d9f13b 13px 15px),repeating-linear-gradient(90deg,#0a1226 0 8px,transparent 8px 11px);border-top:1px solid #ed73ce80;box-shadow:3px 0 12px #ac46d319}
.night-city i:nth-child(3n){height:80px}.night-city i:nth-child(5n){height:110px;border-top-color:#55eaff}
.night-water{position:absolute;inset:68% -10% 0;background:repeating-linear-gradient(176deg,transparent 0 19px,#5cceee14 20px 21px,transparent 22px 34px),radial-gradient(ellipse at 40% 0,#bd6cd540,transparent 55%);transform-origin:center top;animation:night-tide 13s ease-in-out infinite alternate}
.night-shore{position:absolute;left:-10%;right:-10%;bottom:-7%;height:27%;border-radius:50% 65% 0 0;transform:rotate(-6deg);border-top:2px solid #67fff8aa;box-shadow:0 -5px 18px #40ffe96b,0 -18px 60px #21adcc38,inset 0 12px 30px #04b7c929;background:radial-gradient(ellipse at 40% 0,#13bbd233,transparent 55%),#060e1b;animation:shore-glow 7s ease-in-out infinite alternate}
.login-grid{position:relative}.login-story{padding-top:12px;text-shadow:0 2px 22px #030813}.login-story p{color:#c1c9dc;max-width:470px}.login-story h1 em{color:#a7fff0}.login-story .login-symbol{display:flex;width:max-content;line-height:1;margin-top:45px;margin-bottom:28px}.login-story>.mono{display:block;clear:both;letter-spacing:2px;color:#b6bfd3;font-size:10px}.login-panel{background:#101624ed;border-color:#8291b04d;box-shadow:0 22px 80px #02071188;backdrop-filter:blur(18px)}
@keyframes night-twinkle{from{opacity:.45}to{opacity:.9}}@keyframes night-tide{to{transform:translateX(2%) scaleY(1.07)}}@keyframes shore-glow{from{opacity:.5}to{opacity:1}}
@media(max-width:650px){.login-story .login-symbol,.login-story>.mono{display:none}.login-story h1{font-size:48px}.night-moon{left:78%;top:16%;width:35px;height:35px}.night-city{bottom:38%;opacity:.35}.night-water{top:62%}.login-panel{background:#101624f5}.login-story p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.night-stars,.night-water,.night-shore{animation:none}}
/* Crisp silhouettes, isolated rooms, and resolution-independent moving water. */
.night-city{opacity:.9;gap:9px;height:140px}
.night-city i{position:relative;height:42px;background:linear-gradient(90deg,#0b1127,#12182c);border-top:1px solid #71648d;box-shadow:inset -3px 0 #070e20,2px 0 10px #b340a719}
.night-city i:nth-child(2n){height:58px}.night-city i:nth-child(3n){height:85px}.night-city i:nth-child(5n){height:124px;border-top:1px solid #73dfe2}.night-city i:nth-child(7n){height:68px}
.night-city i::before{content:"";position:absolute;top:14px;left:24%;width:3px;height:5px;background:#91abc45c;box-shadow:9px 0 #7a72ba44,0 17px #8587bc44,9px 34px #7bbaaf44,0 51px #a376a633}
.night-city i:nth-child(10)::after{content:"";position:absolute;top:10px;left:18%;width:58%;height:16px;background:linear-gradient(90deg,#164352 0 12%,#72ffdf 13% 40%,#122b3b 41% 48%,#b49aff 49% 83%,#1d3648 84%);border:2px solid #153445;box-shadow:0 0 13px #58ffe9aa,0 0 32px #6b8fff66;animation:terminal-room 5s ease-in-out infinite alternate}
.night-city i:nth-child(5)::after{content:"";position:absolute;top:-13px;left:50%;height:12px;width:1px;background:#5b6b91;box-shadow:0 -2px 5px #ff8fc4}
.night-water{background:radial-gradient(ellipse at 34% 0,#9a6ae342,transparent 55%),linear-gradient(#12273c77,#04131e55);animation:night-tide 8s ease-in-out infinite alternate}
.night-water::after{content:"";position:absolute;left:31%;top:0;width:8%;height:75%;background:repeating-linear-gradient(0deg,transparent 0 11px,#7cefd859 12px 14px,transparent 16px 24px);clip-path:polygon(45% 0,60% 0,100% 100%,0 100%);filter:blur(1px);animation:reflection-drift 6s ease-in-out infinite alternate;opacity:.55}
.night-swell{position:absolute;inset:68% 0 0;width:100%;height:32%;overflow:hidden;fill:none;stroke:#7ef5eb;stroke-width:1.3;opacity:.42}
.night-swell path{vector-effect:non-scaling-stroke}.swell-a{animation:swell-east 12s linear infinite}.swell-b{stroke:#a795e8;stroke-width:1;animation:swell-west 17s linear infinite}
.night-shore{animation:shore-glow 5s ease-in-out infinite alternate,shore-drift 11s ease-in-out infinite alternate}
.night-moon{background:radial-gradient(circle at 32% 35%,#e4e5fa,#bcbada);box-shadow:0 0 65px #a8a7ec30,inset -15px -5px 0 #474a76;opacity:.85}
@keyframes swell-east{to{transform:translateX(400px)}}@keyframes swell-west{from{transform:translateX(0)}to{transform:translateX(-400px)}}
@keyframes terminal-room{0%,25%{opacity:.55;filter:hue-rotate(0deg)}70%,100%{opacity:1;filter:hue-rotate(25deg)}}
@keyframes reflection-drift{to{transform:translateX(18px) scaleX(1.2);opacity:.85}}
@keyframes shore-drift{to{transform:translateY(9px) rotate(-5deg)}}
@media(max-width:650px){.night-city{opacity:.5}.night-swell{top:62%;height:38%}}
@media(prefers-reduced-motion:reduce){.night-city i::after,.night-water,.night-water::after,.night-shore,.swell-a,.swell-b{animation:none}}