html,
body {
    /* Fallback (#212121) only applies before assets/theme.css has
   loaded and defined --app-backdrop-background; once it's
   defined (any value), var() always prefers it over the
   fallback, so this never overrides the app's REAL theme
   (which can diverge from the OS prefers-color-scheme). */
    background: var(--app-backdrop-background, #212121);
    color: var(--app-backdrop-color);
    width: 100%;
    height: 100%;
    margin: 0;
    overscroll-behavior: none;
    position: fixed;
}

@media (prefers-color-scheme: light) {
    html,
    body {
        background: var(--app-backdrop-background, #fafafa);
    }
}

/* Recent Safari (iOS 26+) no longer tints the status bar/toolbar
               from the theme-color meta tag. Instead it samples the actual
               rendered page: a fixed/sticky element pinned to a viewport
               edge (top AND bottom) with a background-color AND a
               backdrop-filter. These divs are that signal. Plain CSS
               (prefers-color-scheme), not JS-driven, so the OS light/dark
               toggle updates them live via a normal media-query
               re-evaluation + repaint -- which is what Safari's sampling
               actually reacts to, unlike a JS-mutated meta tag. Colors
               match --start-background (the surface visible on load) so
               there's no seam. The theme-color metas above are kept as a
               fallback for browsers that still honor them (Chrome,
               Android, older Safari). */
#statusbar-color-top,
#statusbar-color-bottom {
    position: fixed;
    left: 0;
    right: 0;
    background: #212121;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    pointer-events: none;
    z-index: 2147483647;
}

#statusbar-color-top {
    top: 0;
    height: env(safe-area-inset-top, 0px);
}

#statusbar-color-bottom {
    bottom: 0;
    height: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: light) {
    #statusbar-color-top,
    #statusbar-color-bottom {
        background: #fafafa;
    }
}

@keyframes spin {
    from {
        stroke-dashoffset: 240;
    }

    to {
        stroke-dashoffset: 40;
    }
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
}

.spinner circle {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 10;
    stroke-dasharray: 252;
    transform-origin: center center;
    will-change: transform;
    animation: spin 1.5s cubic-bezier(0.44, 0.22, 0.64, 0.86) alternate infinite, rotate linear 1.2s infinite;
}