.login { position: relative; z-index: 1; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 48px 16px; overflow: hidden; }
.glow { position: absolute; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); }
.glow.g1 { right: -8%; top: -16%; width: min(46vw, 680px); background: radial-gradient(circle, rgba(170,50,255,.5), transparent 68%); }
.glow.g2 { left: -10%; bottom: -18%; width: min(40vw, 600px); background: radial-gradient(circle, rgba(255,214,0,.16), transparent 68%); }
.login main { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.login main > img { width: min(240px, 52vw); height: auto; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 80%, transparent 100%); }
.box { width: 100%; background: rgba(14,15,51,.82); border: 1px solid var(--line); border-radius: 24px; padding: 36px 32px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.box h1 { font-size: clamp(22px, 6vw, 28px); line-height: 1.15; }
.btn.big { width: 100%; min-height: 52px; font-size: 16px; padding: 0 24px; }
.float { animation: float 7s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(-6px); } to { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }
@media (max-width: 480px) { .box { padding: 28px 20px; } }