:root {
    --bs-white: #ffffff;
    --spinner-stroke-primary: #0d6efd;
    --spinner-stroke-secondary: #6c757d;
    --spinner-stroke-success: #198754;
    --spinner-stroke-danger: #dc3545;
    --spinner-stroke-warning: #ffc107;
    --spinner-stroke-info: #0dcaf0;
    --spinner-stroke-light: #f8f9fa;
    --spinner-stroke-dark: #212529;
    --spinner-stroke-white: var(--bs-white);

    --spinner-stroke-primary-faded: rgba(13, 110, 253, 0.85);
    --spinner-stroke-secondary-faded: rgba(108, 117, 125, 0.85);
    --spinner-stroke-success-faded: rgba(25, 135, 84, 0.85);
    --spinner-stroke-danger-faded: rgba(220, 53, 69, 0.85);
    --spinner-stroke-warning-faded: rgba(255, 193, 7, 0.85);
    --spinner-stroke-info-faded: rgba(13, 202, 240, 0.85);
    --spinner-stroke-light-faded: rgba(248, 249, 250, 0.85);
    --spinner-stroke-dark-faded: rgba(33, 37, 41, 0.85);
    --spinner-stroke-white-faded: rgba(255, 255, 255, 0.85);
}

.spinner-primary   .path { stroke: var(--spinner-stroke-primary); }
.spinner-secondary .path { stroke: var(--spinner-stroke-secondary); }
.spinner-success   .path { stroke: var(--spinner-stroke-success); }
.spinner-danger    .path { stroke: var(--spinner-stroke-danger); }
.spinner-warning   .path { stroke: var(--spinner-stroke-warning); }
.spinner-info      .path { stroke: var(--spinner-stroke-info); }
.spinner-light     .path { stroke: var(--spinner-stroke-light); }
.spinner-dark      .path { stroke: var(--spinner-stroke-dark); }
.spinner-white     .path { stroke: var(--spinner-stroke-white); }

.spinner-primary-faded   .path { stroke: var(--spinner-stroke-primary-faded); }
.spinner-secondary-faded .path { stroke: var(--spinner-stroke-secondary-faded); }
.spinner-success-faded   .path { stroke: var(--spinner-stroke-success-faded); }
.spinner-danger-faded    .path { stroke: var(--spinner-stroke-danger-faded); }
.spinner-warning-faded   .path { stroke: var(--spinner-stroke-warning-faded); }
.spinner-info-faded      .path { stroke: var(--spinner-stroke-info-faded); }
.spinner-light-faded     .path { stroke: var(--spinner-stroke-light-faded); }
.spinner-dark-faded      .path { stroke: var(--spinner-stroke-dark-faded); }
.spinner-white-faded     .path { stroke: var(--spinner-stroke-white-faded); }

#progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.spinner {
    animation: rotate 2s linear infinite;
    width: 240px;
    height: 240px;
}

.path {
    stroke: var(--spinner-stroke-white-faded);
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
    stroke-width: 4;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; }
    100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; }
}