/* Phantom Progress Bar Container */
        .phantom-progress-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            z-index: 9999;
            background: rgba(0, 0, 0, 0.8);
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        /* Main Progress Bar */
        .phantom-progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, 
                transparent 0%, 
                #00ffff 10%, 
                #0080ff 30%, 
                #8000ff 60%, 
                #ff00ff 80%, 
                transparent 100%
            );
            position: relative;
            transition: width 0.1s ease-out;
            filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.8));
        }

        /* Ghostly Particles */
        .phantom-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .scroll_bar_particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #00ffff;
            border-radius: 50%;
            opacity: 0;
            animation: phantomFloat 3s infinite ease-in-out;
            box-shadow: 0 0 6px #00ffff;
        }

        /* Spectral Glow Effect */
        .phantom-progress-bar::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -10px;
            right: -10px;
            bottom: -2px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(0, 255, 255, 0.3) 20%, 
                rgba(128, 0, 255, 0.3) 50%, 
                rgba(255, 0, 255, 0.3) 80%, 
                transparent 100%
            );
            filter: blur(8px);
            z-index: -1;
            animation: spectralPulse 2s infinite ease-in-out;
        }

        /* Phantom Trail Effect */
        .phantom-progress-bar::after {
            content: '';
            position: absolute;
            top: 0;
            right: -20px;
            width: 40px;
            height: 100%;
            background: linear-gradient(90deg, 
                rgba(255, 255, 255, 0) 0%, 
                rgba(255, 255, 255, 0.8) 50%, 
                rgba(255, 255, 255, 0) 100%
            );
            animation: phantomSweep 1.5s infinite ease-in-out;
            filter: blur(2px);
        }

        /* Ethereal Mist Effect */
        .phantom-mist {
            position: absolute;
            top: -10px;
            left: 0;
            width: 100%;
            height: 28px;
            background: linear-gradient(180deg, 
                rgba(0, 255, 255, 0.1) 0%, 
                rgba(128, 0, 255, 0.05) 50%, 
                transparent 100%
            );
            filter: blur(6px);
            animation: mistFlow 4s infinite ease-in-out;
            pointer-events: none;
        }

        /* Progress Percentage Display */
        .phantom-percentage {
            position: fixed;
            top: 15px;
            right: 20px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            color: #00ffff;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s ease;
            animation: digitalGlitch 0.1s infinite;
        }

        .phantom-percentage.visible {
            opacity: 1;
        }

        /* Animations */
        @keyframes phantomFloat {
            0%, 100% { 
                transform: translateY(0px) translateX(0px); 
                opacity: 0; 
            }
            50% { 
                transform: translateY(-15px) translateX(10px); 
                opacity: 1; 
            }
        }

        @keyframes spectralPulse {
            0%, 100% { 
                opacity: 0.3; 
                transform: scaleY(1); 
            }
            50% { 
                opacity: 0.8; 
                transform: scaleY(1.5); 
            }
        }

        @keyframes phantomSweep {
            0% { 
                transform: translateX(-40px); 
                opacity: 0; 
            }
            50% { 
                opacity: 1; 
            }
            100% { 
                transform: translateX(40px); 
                opacity: 0; 
            }
        }

        @keyframes mistFlow {
            0%, 100% { 
                transform: translateX(-20px); 
                opacity: 0.1; 
            }
            50% { 
                transform: translateX(20px); 
                opacity: 0.3; 
            }
        }

        @keyframes digitalGlitch {
            0%, 90%, 100% { 
                transform: translateX(0); 
            }
            95% { 
                transform: translateX(2px); 
            }
            97% { 
                transform: translateX(-2px); 
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .phantom-percentage {
                top: 12px;
                right: 15px;
                font-size: 12px;
            }
              }