#blazor-error-ui {
    position: absolute;
    background: lightpink;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    width: 100%;
    z-index: 9999999999999;
    font-weight: bold;
    display: none;
}

    #blazor-error-ui .reload {
        float: right;
        cursor: pointer;
    }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/* Opsyte WebAssembly loading screen */

#wasm-loading {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ui-bg, #F7F5F0);
    color: var(--ui-ink, #1B2620);
    font-family: var(--ui-font, "Poppins", sans-serif);
}

    #wasm-loading .wasm-loader {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Animated circular orbit */
    #wasm-loading .wasm-loader__glyph {
        position: relative;
        width: 100px;
        height: 100px;
        display: grid;
        place-items: center;
    }


    /* Circular progress driven by Blazor's real loading percentage */
    #wasm-loading .wasm-loader__ring {
        position: absolute;
        inset: 6px;
        border-radius: 50%;
        background: conic-gradient( from -90deg, var(--ui-green, #1F6B4A) 0%, var(--ui-green, #1F6B4A) var(--blazor-load-percentage, 0%), var(--ui-mint-line, #B9E0CB) var(--blazor-load-percentage, 0%), var(--ui-mint-line, #B9E0CB) 100% );
    }

        /* Hollow out the centre to create the progress ring */
        #wasm-loading .wasm-loader__ring::after {
            content: "";
            position: absolute;
            inset: 3px;
            border-radius: 50%;
            background: var(--ui-bg, #F7F5F0);
        }

    /* Keep the rota tile above the progress ring */
    #wasm-loading .wasm-loader__tile {
        position: relative;
        z-index: 1;
    }

    /* Actual rounded percentage supplied by Blazor */
    #wasm-loading .wasm-loader__percent {
        margin-top: 10px;
        font-size: 17px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        color: var(--ui-green, #1F6B4A);
    }

        #wasm-loading .wasm-loader__percent::after {
            content: var(--blazor-load-percentage-text, "0%");
        }

    #wasm-loading .wasm-loader__message {
        margin-top: 5px;
    }


    /* Small rota-inspired tile */
    #wasm-loading .wasm-loader__tile {
        width: 62px;
        height: 62px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid var(--ui-line, #E2DED4);
        border-radius: 18px;
        background: var(--ui-surface, #FFFFFF);
        box-shadow: 0 8px 30px rgb(0 0 0 / 4%);
    }

    #wasm-loading .wasm-loader__bar {
        width: 24px;
        height: 5px;
        border-radius: 999px;
        background: var(--ui-mint, #7DC8A5);
        animation: wasm-pulse 1.3s ease-in-out infinite;
    }

        #wasm-loading .wasm-loader__bar:nth-child(2) {
            width: 30px;
            background: var(--ui-green, #1F6B4A);
            animation-delay: -0.22s;
        }

        #wasm-loading .wasm-loader__bar:nth-child(3) {
            width: 20px;
            animation-delay: -0.44s;
        }

    /* Branding and loading message */
    #wasm-loading .wasm-loader__name {
        margin-top: 18px;
        font-size: 30px;
        font-weight: 700;
        letter-spacing: -1.4px;
        line-height: 1.2;
        color: var(--ui-ink, #1B2620);
    }

    #wasm-loading .wasm-loader__message {
        margin: 8px 0 0;
        font-size: 12px;
        font-weight: 400;
        color: var(--ui-muted, #5E6A63);
    }


/* Animations */
@keyframes wasm-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wasm-pulse {
    0%, 100% {
        transform: scaleX(.7);
        opacity: .65;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    #wasm-loading .wasm-loader__ring,
    #wasm-loading .wasm-loader__bar {
        animation: none;
    }
}