.app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--app-layer-loading, 2000);
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgb(235 242 247 / 0.64);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: app-loading-overlay-in 140ms ease-out both;
}

.app-loading-overlay__panel {
    display: grid;
    width: min(19rem, 100%);
    grid-template-columns: 1.55rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem 0.72rem;
    color: #102033;
    background: rgb(255 255 255 / 0.97);
    border: 1px solid #d5e0e9;
    border-radius: 0.65rem;
    box-shadow: 0 1rem 2.8rem rgb(16 32 51 / 0.16);
    animation: app-loading-panel-in 170ms ease-out both;
}

.app-loading-overlay__panel strong {
    overflow: hidden;
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-loading-overlay__spinner {
    width: 1.3rem;
    height: 1.3rem;
    border: 2px solid #d6e5f1;
    border-top-color: #2477b9;
    border-radius: 50%;
    animation: app-loading-spin 700ms linear infinite;
}

.app-loading-overlay__progress {
    grid-column: 1 / -1;
    height: 0.18rem;
    overflow: hidden;
    background: #e4ebf1;
    border-radius: 999px;
}

.app-loading-overlay__progress span {
    display: block;
    width: 34%;
    height: 100%;
    background: #2477b9;
    border-radius: inherit;
    animation: app-loading-progress 1.05s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes app-loading-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes app-loading-panel-in {
    from { opacity: 0; transform: translateY(0.35rem) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes app-loading-spin {
    to { transform: rotate(360deg); }
}

@keyframes app-loading-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(300%); }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-overlay,
    .app-loading-overlay__panel,
    .app-loading-overlay__spinner,
    .app-loading-overlay__progress span {
        animation: none;
    }
}
