.react-root-host {
    position: relative;
    min-height: clamp(240px, 38vh, 460px);
}

.react-screen-loader {
    min-height: clamp(240px, 38vh, 460px);
    width: 100%;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vw, 28px);
}

.react-screen-loader.is-compact {
    min-height: clamp(160px, 24vh, 280px);
}

.react-screen-loader__mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 30px;
    gap: 8px;
    will-change: transform;
}

.react-screen-loader__pulse {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    background: linear-gradient(145deg, #2d84e8 0%, #0f5dbf 100%);
    box-shadow: 0 4px 10px rgba(23, 95, 182, 0.34);
    animation: react-loader-pulse 1.2s ease-in-out infinite;
    will-change: transform, opacity;
}

.react-screen-loader__pulse--two {
    animation-delay: 0.15s;
}

.react-screen-loader__pulse--three {
    animation-delay: 0.3s;
}

.react-screen-loader-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    z-index: 1500;
    display: grid;
    place-items: center;
    background: rgba(222, 226, 233, 0.62);
    backdrop-filter: blur(3px);
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.react-screen-loader-overlay .react-screen-loader {
    min-height: auto;
    width: auto;
    padding: 0;
}

@keyframes react-loader-pulse {
    0% {
        transform: translateY(0) scale(0.88);
        opacity: 0.42;
    }

    35% {
        transform: translateY(-3px) scale(1);
        opacity: 1;
    }

    70% {
        transform: translateY(0) scale(0.94);
        opacity: 0.58;
    }

    100% {
        transform: translateY(0) scale(0.88);
        opacity: 0.42;
    }
}

@media (max-width: 680px) {
    .react-root-host,
    .react-screen-loader {
        min-height: clamp(180px, 30vh, 320px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .react-screen-loader__pulse {
        animation: none;
        opacity: 1;
    }
}
