/* Loader overlay */
        #loading {
            display: none;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0; left: 0;
            background-color: rgba(0,0,0,0.6);
            z-index: 9999;
            text-align: center;
            padding-top: 200px;
            color: white;
            font-size: 22px;
            font-family: Arial, sans-serif;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        /* Spinner */
        .dual-ring {
            display: inline-block;
            width: 80px;
            height: 80px;
            border: 8px solid #f3f3f3;
            border-top: 8px solid #00ccff;
            border-radius: 50%;
            animation: spin 1s linear infinite, colorChange 2s linear infinite alternate;
        }

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

        @keyframes colorChange {
            0% { border-top-color: #00ccff; }
            25% { border-top-color: #ff5555; }
            50% { border-top-color: #ffcc00; }
            75% { border-top-color: #00ff00; }
            100% { border-top-color: #00ccff; }
        }