:root {
    --primary: #3B82F6;
    --primary-muted: rgba(59, 130, 246, 0.4);
    --loading-bg: #F8FAFC;
}

[data-theme='dark'] {
    --loading-bg: #0F172A;
}

.loading-container {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--loading-bg);
    z-index: 9999;
}

.loader {
    /* Increased Size: 48px -> 72px */
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    /* Increased Thickness: 3px -> 5px */
    border: 5px solid;

    border-color: var(--primary-muted) var(--primary-muted) transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader::after,
.loader::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 5px solid;

    border-color: transparent transparent var(--primary) var(--primary);
    /* Scaled middle ring */
    width: 54px;
    height: 54px;
    border-radius: 50%;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
}

.loader::before {
    /* Scaled inner ring */
    width: 36px;
    height: 36px;

    border-color: var(--primary-muted) var(--primary-muted) transparent transparent;
    animation: rotation 1.5s linear infinite;
}

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

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

.content-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}