:root {
    --loading-overlay: rgba(15, 18, 24, 0.35);
    --loading-card: rgba(255, 255, 255, 0.96);
    --loading-ink: #1f2326;
    --loading-muted: #5b6167;
    --loading-accent: #2f80ed;
    --loading-shadow: 0 18px 40px rgba(12, 18, 28, 0.18);
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--loading-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9998;
    backdrop-filter: blur(6px);
}

.loading-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.loading-card {
    background: var(--loading-card);
    color: var(--loading-ink);
    padding: 18px 22px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--loading-shadow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    font-family: "Work Sans", "Helvetica Neue", sans-serif;
}

.loading-text {
    font-size: 0.95rem;
    color: var(--loading-muted);
}

.loading-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(47, 128, 237, 0.18);
    border-top-color: var(--loading-accent);
    animation: loading-spin 0.8s linear infinite;
}

.loading-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.is-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.loading-label {
    font-size: 0.9rem;
}

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

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