:root {
    --dmu-loader-backdrop: rgba(8, 12, 20, .65);
    --dmu-loader-text: rgba(255, 255, 255, .92);
    --dmu-loader-muted: rgba(255, 255, 255, .55);
    --dmu-loader-accent: white;
    --dmu-loader-accent2: white;
}

html[data-color^="dark-"] {
    --dmu-loader-backdrop: rgba(0, 0, 0, .65);
    --dmu-loader-text: rgba(255, 255, 255, .92);
    --dmu-loader-muted: rgba(255, 255, 255, .55);
}

.dmu-page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    place-items: center;
    background: var(--dmu-loader-backdrop);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.dmu-page-loader.is-active {
    opacity: 1;
    pointer-events: all;
}

/* Horizontal layout */
.dmu-page-loader-content {
    display: flex;
    align-items: center;
    gap: 18px;
    transform: translateY(6px) scale(.98);
    transition: transform 220ms ease;
}

.dmu-page-loader.is-active .dmu-page-loader-content {
    transform: translateY(0) scale(1);
}

/* Spinner */
.dmu-page-loader-ring {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 2px solid transparent;
    border-top-color: var(--dmu-loader-accent);
    border-bottom-color: var(--dmu-loader-accent2);
    animation: dmuLoaderSpin .9s linear infinite;
}

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

/* Text block */
.dmu-page-loader-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dmu-page-loader-text strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--dmu-loader-text);
    letter-spacing: .2px;
}

.dmu-page-loader-text span {
    font-size: 13px;
    color: var(--dmu-loader-muted);
}

@media (prefers-reduced-motion: reduce) {

    .dmu-page-loader,
    .dmu-page-loader-content {
        transition: none !important;
    }

    .dmu-page-loader-ring {
        animation: none !important;
    }
}