@keyframes bss-aurora { 0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(4%, 3%) rotate(8deg) scale(1.1); } 100% { transform: translate(-4%, 5%) rotate(-6deg) scale(.95); } }
@keyframes bss-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes bss-waves { to { background-position: 1200px 100%, -900px 100%, 1500px 100%, 0 0; } }
@keyframes bss-stars { to { background-position: 0 -240px, 0 -240px, 0 -240px, 0 -240px, 0 -240px, 0 -240px, 0 -240px, 0 -240px, 0 0; } }
@media (prefers-reduced-motion: reduce) { html.bss-top body::before, .bg-preview::before { animation: none !important; } }

#bss-flow { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
html.bss-top body.task-login #bss-flow { opacity: .95; }

html.bss-top body.task-login #layout-content { background: transparent !important; }
html.bss-top body.task-login #login-form { padding: 28px 26px 20px; border-radius: 18px;
  background: rgba(255, 255, 255, .74); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 20px 50px rgba(20, 30, 60, .14); border: 1px solid rgba(20, 30, 60, .06); }
html.bss-top.dark-mode body.task-login #login-form { background: rgba(33, 41, 44, .72);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .4); border-color: rgba(255, 255, 255, .06); }
html.bss-top body.task-login #logo { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .18)); }

html.bss-top body:not(.task-login) #bss-flow { opacity: 0.76; }