:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
}

@supports (padding: env(safe-area-inset-top)) {
  @media (display-mode: standalone) and (max-width: 1024px) {
    html.pwa-standalone body {
      padding-right: var(--pwa-safe-right);
      padding-bottom: var(--pwa-safe-bottom);
      padding-left: var(--pwa-safe-left);
    }

    html.pwa-standalone .main-header {
      padding-top: var(--pwa-safe-top);
    }

    html.pwa-standalone .login-page {
      min-height: calc(100vh - var(--pwa-safe-bottom));
      min-height: calc(100dvh - var(--pwa-safe-bottom));
    }
  }
}