.login-body { overflow-x: hidden; }
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; position: relative; isolation: isolate; }
.login-art { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1200px 600px at 15% -10%, var(--accent-soft), transparent 60%), var(--bg); }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.o1 { width: 440px; height: 440px; left: -120px; bottom: -140px; background: color-mix(in srgb, var(--c2) 45%, transparent); }
.o2 { width: 360px; height: 360px; right: -80px; top: -100px; background: color-mix(in srgb, var(--accent) 40%, transparent); animation-delay: -6s; }
@keyframes drift { to { transform: translate(40px, -30px) scale(1.08); } }
.gridfade { position: absolute; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(circle at 50% 40%, #000, transparent 70%); }
.login-card { width: min(440px, 100%); padding: 34px 32px 26px; border-radius: 22px; background: var(--glass); backdrop-filter: blur(22px) saturate(150%); border: 1px solid var(--line-2); box-shadow: var(--shadow), 0 40px 90px -40px rgba(0, 0, 0, .7); display: flex; flex-direction: column; gap: 14px; animation: rise .6s var(--ease) both; }
.login-card .brand { padding: 0 0 8px; } .login-card h1 { font-size: 30px; }
.field { display: flex; flex-direction: column; gap: 7px; font-size: 13px; color: var(--text-2); } .field em { color: var(--text-3); font-style: normal; }
form { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; } .wide { width: 100%; padding: 12px; font-size: 15px; }
.msg { color: var(--neg); background: var(--neg-soft); border-radius: var(--r-md); padding: 10px 12px; font-size: 13.5px; } .fine { font-size: 12px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .orb { animation: none; } }