.loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #f8fbf5 0%, #e8f0e3 50%, #d4e8cc 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 99999;
        transition: opacity 0.8s ease, visibility 0.8s ease;
        opacity: 1;
        visibility: visible;
    }

    .loading-overlay.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .loader-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
        max-width: 400px;
        width: 100%;
    }

    /* ===== SPINNER ===== */
    .loader-spinner {
        position: relative;
        width: 120px;
        height: 120px;
        margin-bottom: 1.5rem;
    }

    .spinner-ring {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4px solid transparent;
        animation: spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

    .spinner-ring:nth-child(1) {
        border-top-color: #1A520D;
        animation-delay: 0s;
    }

    .spinner-ring:nth-child(2) {
        border-right-color: #c99510;
        animation-delay: 0.3s;
        width: 85%;
        height: 85%;
        top: 7.5%;
        left: 7.5%;
    }

    .spinner-ring:nth-child(3) {
        border-bottom-color: #2d7a1a;
        animation-delay: 0.6s;
        width: 70%;
        height: 70%;
        top: 15%;
        left: 15%;
    }

    .spinner-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 20px rgba(26, 82, 13, 0.15);
        overflow: hidden;
        animation: pulse-logo 1.5s ease-in-out infinite;
    }

    .spinner-center .loader-logo {
        width: 80%;
        height: 80%;
        object-fit: cover;
        border-radius: 50%;
    }

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

    @keyframes pulse-logo {
        0%,
        100% {
            transform: translate(-50%, -50%) scale(1);
            box-shadow: 0 4px 20px rgba(26, 82, 13, 0.15);
        }
        50% {
            transform: translate(-50%, -50%) scale(1.05);
            box-shadow: 0 4px 35px rgba(26, 82, 13, 0.25);
        }
    }

    /* ===== BRAND TEXT ===== */
    .loader-brand {
        font-family: 'Playfair Display', serif;
        font-size: 2.4rem;
        font-weight: 900;
        letter-spacing: 1px;
        line-height: 1.2;
        margin-bottom: 0.1rem;
    }

    .loader-subtitle {
        font-family: 'Jost', sans-serif;
        font-size: 0.85rem;
        font-weight: 400;
        color: #4a6b3a;
        letter-spacing: 3px;
        text-transform: uppercase;
        margin-bottom: 1.8rem;
        border-bottom: 1px solid rgba(201, 149, 16, 0.3);
        padding-bottom: 0.6rem;
        display: inline-block;
    }

    /* ===== PROGRESS BAR ===== */
    .loader-progress {
        width: 100%;
        max-width: 280px;
        height: 4px;
        background: rgba(26, 82, 13, 0.12);
        border-radius: 4px;
        overflow: hidden;
        margin-bottom: 1.2rem;
        position: relative;
    }

    .progress-bar-fill {
        width: 0%;
        height: 100%;
        background: linear-gradient(90deg, #1A520D, #c99510, #1A520D);
        background-size: 200% 100%;
        border-radius: 4px;
        animation: loading-progress 2.4s ease-in-out infinite;
        position: relative;
    }

    @keyframes loading-progress {
        0% {
            width: 0%;
            background-position: 0% 0%;
        }
        50% {
            width: 75%;
            background-position: 50% 0%;
        }
        100% {
            width: 100%;
            background-position: 100% 0%;
        }
    }

    /* ===== LOADING TEXT ===== */
    .loader-text {
        font-family: 'Jost', sans-serif;
        font-size: 0.95rem;
        font-weight: 400;
        color: #4a6b3a;
        letter-spacing: 1px;
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .dots {
        display: inline-flex;
        gap: 2px;
        margin-left: 2px;
    }

    .dots span {
        display: inline-block;
        animation: dot-bounce 1.4s ease-in-out infinite;
        font-size: 1.4rem;
        line-height: 1;
        color: #c99510;
    }

    .dots span:nth-child(1) {
        animation-delay: 0s;
    }
    .dots span:nth-child(2) {
        animation-delay: 0.2s;
    }
    .dots span:nth-child(3) {
        animation-delay: 0.4s;
    }

    @keyframes dot-bounce {
        0%,
        80%,
        100% {
            transform: scale(1);
            opacity: 0.4;
        }
        40% {
            transform: scale(1.4);
            opacity: 1;
        }
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 576px) {
        .loader-spinner {
            width: 90px;
            height: 90px;
        }

        .spinner-center {
            width: 38px;
            height: 38px;
        }

        .loader-brand {
            font-size: 1.8rem;
        }

        .loader-subtitle {
            font-size: 0.7rem;
            letter-spacing: 2px;
        }

        .loader-progress {
            max-width: 200px;
        }

        .loader-text {
            font-size: 0.8rem;
        }
    }

    @media (max-width: 400px) {
        .loader-spinner {
            width: 70px;
            height: 70px;
        }

        .spinner-center {
            width: 30px;
            height: 30px;
        }

        .loader-brand {
            font-size: 1.5rem;
        }

        .loader-progress {
            max-width: 160px;
        }
    }