#login-dialog::backdrop {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

body:has(#login-dialog[open]) > main,
body:has(#login-dialog[open]) > .site-header,
body:has(#login-dialog[open]) > footer {
  visibility: visible !important;
}

body.login-open::before {
  content: "";
  position: fixed;
  z-index: 9998;
  inset: 0;
  background: rgba(5, 5, 6, 0.48);
  -webkit-backdrop-filter: blur(10px) brightness(0.72) saturate(0.9);
  backdrop-filter: blur(10px) brightness(0.72) saturate(0.9);
  pointer-events: none;
}

@media (max-width: 800px) {
  body.login-open::before {
    background: rgba(5, 5, 6, 0.42);
    -webkit-backdrop-filter: blur(7px) brightness(0.76) saturate(0.92);
    backdrop-filter: blur(7px) brightness(0.76) saturate(0.92);
  }
}