﻿#appGlobalLoader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}

    #appGlobalLoader.show {
        display: block;
    }

    #appGlobalLoader .app-loader-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(2px);
    }

    #appGlobalLoader .app-loader-panel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-width: 240px;
        max-width: 90vw;
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
        padding: 24px 28px;
        text-align: center;
    }

    #appGlobalLoader .app-loader-graphic {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto 14px auto;
    }

    #appGlobalLoader .app-loader-svg,
    #appGlobalLoader .app-loader-worm {
        animation-duration: 3s;
        animation-iteration-count: infinite;
    }

    #appGlobalLoader .app-loader-svg {
        width: 72px;
        height: 72px;
        animation-name: appLoaderBump;
        animation-timing-function: linear;
        display: block;
    }

    #appGlobalLoader .app-loader-ring {
        stroke: rgba(51, 65, 85, 0.12);
    }

    #appGlobalLoader .app-loader-worm {
        animation-name: appLoaderWorm;
        animation-timing-function: cubic-bezier(0.42, 0.17, 0.75, 0.83);
    }

    #appGlobalLoader .app-loader-text {
        font-size: 14px;
        font-weight: 600;
        color: #334155;
        line-height: 1.4;
    }

body.app-loading {
    overflow: hidden;
}

@media (max-width: 576px) {
    #appGlobalLoader .app-loader-panel {
        min-width: 200px;
        padding: 20px 22px;
    }

    #appGlobalLoader .app-loader-svg {
        width: 64px;
        height: 64px;
    }

    #appGlobalLoader .app-loader-text {
        font-size: 13px;
    }
}

@media (prefers-color-scheme: dark) {
    #appGlobalLoader .app-loader-panel {
        background: #0f172a;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    }

    #appGlobalLoader .app-loader-ring {
        stroke: rgba(241, 245, 249, 0.14);
    }

    #appGlobalLoader .app-loader-text {
        color: #e2e8f0;
    }
}

@keyframes appLoaderBump {
    from, 42%, 46%, 51%, 55%, 59%, 63%, 67%, 71%, 74%, 78%, 81%, 85%, 88%, 92%, to {
        transform: translate(0, 0);
    }

    44% {
        transform: translate(1.33%, 6.75%);
    }

    53% {
        transform: translate(-16.67%, -0.54%);
    }

    61% {
        transform: translate(3.66%, -2.46%);
    }

    69% {
        transform: translate(-0.59%, 15.27%);
    }

    76% {
        transform: translate(-1.92%, -4.68%);
    }

    83% {
        transform: translate(9.38%, 0.96%);
    }

    90% {
        transform: translate(-4.55%, 1.98%);
    }
}

@keyframes appLoaderWorm {
    from {
        stroke-dashoffset: 10;
    }

    25% {
        stroke-dashoffset: 295;
    }

    to {
        stroke-dashoffset: 1165;
    }
}
