/* ===============================
   LOADING OVERLAY
   =============================== */

.loadingOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: radial-gradient(
            ellipse at center,
            rgba(20, 24, 40, 0.95),
            rgba(10, 12, 24, 0.98)
    );

    backdrop-filter: blur(4px);
}

.loadingOverlay[aria-hidden="true"] {
    display: none;
}

.loadingCard {
    width: min(420px, 90vw);
    padding: 28px 26px 26px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;

    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;

    box-shadow:
            0 20px 60px rgba(0, 0, 0, 0.55),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);

    text-align: center;
}

.loadingLogo {
    width: 96px;
    height: auto;
    margin-bottom: 6px;

    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
}

.loadingTitle {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.2px;
}

.loadingSubtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 4px;
}

/* ===============================
   PROGRESS BAR
   =============================== */

.loadingBar {
    width: 100%;
    height: 10px;

    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;

    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
}

.loadingBarFill {
    height: 100%;
    width: 0%;

    background: linear-gradient(
            90deg,
            #6ea8fe,
            #9b7bff,
            #ff77c8
    );

    border-radius: 999px;
    transition: width 0.25s ease;
}

/* ===============================
   STATUS TEXT
   =============================== */

.loadingOverlay .status {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 2px;
}

.loadingHint {
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}
