:root {
    --auth-loading-blue: var(--theme-primary-color, #0b72b0);
    --auth-loading-blue-dark: var(--theme-secondary-color, #075a91);
    --auth-loading-indigo: var(--theme-sidebar-color, #303030);
    --auth-loading-card: rgba(255, 255, 255, .96);
    --auth-loading-text: #111827;
    --auth-loading-muted: #64748b;
    --auth-loading-success: #137c3b;
    --auth-loading-radius: 1.5rem;
    --auth-loading-speed: 240ms;
}

[data-theme="dark"], .dark-mode {
    --auth-loading-card: rgba(20, 27, 46, .96);
    --auth-loading-text: #f8fafc;
    --auth-loading-muted: #a8b3c7;
}

body.auth-loading-active {
    overflow: hidden;
}

.auth-loading-overlay {
    align-items: center;
    background:
        radial-gradient(circle at 15% 15%, rgba(147, 197, 253, .32), transparent 30rem),
        radial-gradient(circle at 85% 80%, rgba(129, 140, 248, .28), transparent 28rem),
        linear-gradient(135deg, var(--auth-loading-blue), var(--auth-loading-indigo));
    display: flex;
    inset: 0;
    justify-content: center;
    opacity: 0;
    padding: 1.25rem;
    pointer-events: none;
    position: fixed;
    transition: opacity var(--auth-loading-speed) ease;
    z-index: 10000;
}

.auth-loading-overlay.is-visible {
    opacity: 1;
    pointer-events: all;
}

.auth-loading-card {
    align-items: center;
    background: var(--auth-loading-card);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--auth-loading-radius);
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28);
    display: flex;
    flex-direction: column;
    max-width: 30rem;
    padding: clamp(2rem, 6vw, 3.5rem);
    text-align: center;
    transform: translateY(12px) scale(.985);
    transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
    width: 100%;
}

.auth-loading-overlay.is-visible .auth-loading-card {
    transform: translateY(0) scale(1);
}

.auth-loading-brand {
    height: 7.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    width: 7.5rem;
}

.auth-loading-logo-wrap {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 12px 30px rgba(37, 99, 235, .18);
    display: flex;
    inset: .75rem;
    justify-content: center;
    padding: 1rem;
    position: absolute;
}

.auth-loading-logo {
    animation: auth-logo-breathe 1.8s ease-in-out infinite;
    max-height: 100%;
    max-width: 100%;
}

.auth-loading-logo-ring {
    animation: auth-ring-spin 1.2s linear infinite;
    border: 3px solid rgba(37, 99, 235, .14);
    border-radius: 50%;
    inset: 0;
    position: absolute;
}

.auth-loading-logo-ring::after {
    border: 3px solid transparent;
    border-radius: inherit;
    border-top-color: var(--auth-loading-blue);
    content: "";
    inset: -3px;
    position: absolute;
}

.auth-loading-status h2 {
    color: var(--auth-loading-text);
    font-size: clamp(1.55rem, 4vw, 2rem);
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0 0 .55rem;
}

.auth-loading-status p {
    color: var(--auth-loading-muted);
    font-size: .98rem;
    margin: 0;
}

.auth-loading-progress {
    background: rgba(100, 116, 139, .16);
    border-radius: 999px;
    height: .3rem;
    margin-top: 2rem;
    overflow: hidden;
    width: min(13rem, 70%);
}

.auth-loading-progress span {
    animation: auth-progress 1.25s ease-in-out infinite;
    background: linear-gradient(90deg, var(--auth-loading-blue), var(--auth-loading-blue-dark));
    border-radius: inherit;
    display: block;
    height: 100%;
    width: 45%;
}

.auth-loading-success-icon {
    align-items: center;
    background: rgba(22, 163, 74, .12);
    border-radius: 50%;
    color: var(--auth-loading-success);
    display: none;
    font-size: 1.4rem;
    font-weight: 800;
    height: 3rem;
    justify-content: center;
    margin: -1rem auto 1rem;
    width: 3rem;
}

.auth-loading-overlay.is-success .auth-loading-logo-ring {
    animation: none;
    border-color: rgba(22, 163, 74, .35);
}

.auth-loading-overlay.is-success .auth-loading-logo-ring::after,
.auth-loading-overlay.is-success .auth-loading-progress {
    display: none;
}

.auth-loading-overlay.is-success .auth-loading-success-icon {
    animation: auth-success-pop 360ms cubic-bezier(.2, .9, .3, 1.3);
    display: flex;
}

@keyframes auth-ring-spin { to { transform: rotate(360deg); } }
@keyframes auth-logo-breathe { 50% { transform: scale(1.06); } }
@keyframes auth-progress {
    from { transform: translateX(-110%); }
    to { transform: translateX(245%); }
}
@keyframes auth-success-pop {
    from { opacity: 0; transform: scale(.65); }
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 575.98px) {
    .auth-loading-card { border-radius: 1.25rem; }
    .auth-loading-brand { height: 6.5rem; width: 6.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-loading-overlay,
    .auth-loading-card {
        transition-duration: 1ms;
    }
    .auth-loading-logo,
    .auth-loading-logo-ring,
    .auth-loading-progress span,
    .auth-loading-success-icon {
        animation: none;
    }
}