.app-loading-overlay {
    position: fixed;
    z-index: 2147483647;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--modal-backdrop, rgba(15, 23, 42, 0.55));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.app-loading-overlay[hidden] {
    display: none !important;
}

.app-loading-card {
    display: flex;
    width: min(100%, 22rem);
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--border-glass, rgba(255, 255, 255, 0.8));
    border-radius: var(--radius-lg, 16px);
    background: var(--surface-glass-strong, #fff);
    box-shadow: var(--shadow-xl, 0 1.5rem 4rem rgba(15, 23, 42, 0.22));
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    text-align: center;
}

.app-loading-spinner {
    width: 2.8rem;
    height: 2.8rem;
    border: 4px solid var(--border-divider, #e4efdf);
    border-top-color: var(--accent-primary, #39a900);
    border-radius: 50%;
    animation: app-loading-spin 0.8s linear infinite;
}

.app-loading-title {
    margin: 0.45rem 0 0;
    color: var(--text-strong, #172b12);
    font-size: 1.08rem;
    font-weight: 750;
    line-height: 1.35;
}

.app-loading-message {
    margin: 0;
    color: var(--text-muted, #53624e);
    font-size: 0.92rem;
    line-height: 1.5;
}

@keyframes app-loading-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-spinner {
        animation: none;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app-loading-card {
        background: var(--surface-1, var(--bg-card, #ffffff));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}