:root {
    --loader-blue: #0ea5e9;
    --loader-blue-dark: #0284c7;
    --loader-blue-deep: #0369a1;

    --loader-dark: rgba(6, 12, 18, 0.75);
    --loader-dark-2: rgba(10, 18, 28, 0.82);

    --loader-glow: rgba(14, 165, 233, 0.35);
}

/* LOCK SCROLL */
body.loader-active {
    overflow: hidden !important;
}

/* ===============================
   FULLSCREEN LOADER
================================ */
.app-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: 0.4s ease;
}

.app-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ===============================
   DARK OVERLAY
================================ */
.loader-overlay {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(circle at top left, rgba(14,165,233,0.12), transparent 30%),
        radial-gradient(circle at bottom right, rgba(2,132,199,0.10), transparent 30%),
        linear-gradient(180deg, var(--loader-dark), var(--loader-dark-2));
}

/* ===============================
   CENTER AREA (NO WHITE CARD)
================================ */
.loader-shell {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ===============================
   TOP DOTS
================================ */
.loader-brand-mark {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.loader-brand-mark span {
    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: linear-gradient(135deg, #7dd3fc, var(--loader-blue));
    box-shadow: 0 0 10px var(--loader-glow);

    animation: dotPulse 1.6s infinite ease-in-out;
}

.loader-brand-mark span:nth-child(2){ animation-delay: .2s }
.loader-brand-mark span:nth-child(3){ animation-delay: .4s }

/* ===============================
   ORBIT SPINNER
================================ */
.loader-orbit {
    position: relative;
    width: 130px;
    height: 130px;
}

/* RINGS */
.loader-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
}

.ring-a {
    width: 130px;
    height: 130px;
    border-top-color: var(--loader-blue);
    border-right-color: rgba(14,165,233,0.2);
    animation: spin 1.4s linear infinite;
}

.ring-b {
    width: 95px;
    height: 95px;
    border-left-color: var(--loader-blue-dark);
    border-bottom-color: rgba(14,165,233,0.15);
    animation: spinReverse 1.1s linear infinite;
}

.ring-c {
    width: 65px;
    height: 65px;
    border-top-color: rgba(14,165,233,0.4);
    border-left-color: var(--loader-blue-deep);
    animation: spin 0.9s linear infinite;
}

/* CENTER ICON */
.loader-center-badge {
    position: absolute;
    inset: 0;
    margin: auto;

    width: 58px;
    height: 58px;
    border-radius: 18px;

    background: linear-gradient(135deg, var(--loader-blue), var(--loader-blue-dark));
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;

    box-shadow:
        0 12px 30px rgba(2,132,199,0.4),
        0 0 20px var(--loader-glow);

    animation: float 1.8s ease-in-out infinite;
}

/* ===============================
   ANIMATIONS
================================ */
@keyframes spin {
    to { transform: rotate(360deg); }
}

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

@keyframes float {
    0%,100% { transform: translateY(0) scale(.98); }
    50% { transform: translateY(-4px) scale(1.02); }
}

@keyframes dotPulse {
    0%,100% { opacity: .4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}