.player-container { 
            padding-bottom: 10px; /* Space for fixed player */        
        }
                
        .audio-player {
            padding: 15px;
            border: 1px solid #9c8898;
            border-radius: 8px;
        }
        
        .track-item {
            padding: 15px;
            border: 1px solid #9c8898;
            border-radius: 6px;
            margin-bottom: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .track-item:hover {
            border-color: #9c8898;
            background: #9c88982c;
        }
        
        .track-item.playing {
            background: #9c889861;
            border-color: #b4b4b4;
        }
        
        .track-info h6 {
            margin: 0;
            color: #9c8898;
        }
        
        .track-info small {
            color: #9c8898;
        }
        
        .play-btn {
            background: none;
            color: #9c8898;
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 16px;
        }
        
        .play-btn:hover {
            background: #d1e8f5;
            transform: scale(1.05);
        }
        
        .play-btn.playing {
            background: #d1e8f5;
        }
        
        .play-btn.playing:hover {
            background: #d1e8f5;
            color: #9c8898;
        }
        
        /* Bottom Player Bar */
        .bottom-player {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #d1e8f5;
            border-top: 2px solid #000000;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            padding: 15px;
            z-index: 1000;
            display: none;
        }
        
        .bottom-player.active {
            display: block;
             border: 2px #f1d207;
        }
        
        .player-track-info {
            display: flex;
            align-items: center;
            flex: 1;
            min-width: 250px;
            border: 2px rgb(226, 65, 6); 
        }
        
        .player-track-info h6 {
            margin: 0;
            font-size: 16px;
            color: #9c8898;
        }
        
        .player-track-info small {
            color: #a5a5a5;
            display: block;
        }
        
        .player-controls {
            display: flex;
            align-items: center;
            gap: 2em;
            border: 2px rgb(96 139 168);
            max-width: 800px;
            min-width: 25%;
        }
        
        .player-play-btn {
            background: #9c8898;
            color: #d1e8f5;
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 18px;
          
        }
        
        .player-play-btn:hover {
            background: gray;
        }
        
        .player-play-btn.playing {
            background: #9c8898;
        }
        
        .player-play-btn.playing:hover {
            background: #9b999a;
        }
        
        .progress-container {
            flex: 1;
            margin: 0 20px;
            /* background-color: #00eb43; */
      
        }
        
        .progress-bar {
            height: 6px;
            background: #9c8898;
            border-radius: 3px;
            overflow: hidden;
            cursor: pointer;
            margin-bottom: 5px;
        }
        
        .progress-fill {
            height: 100%;
            background: #707070;
            width: 0%;
            transition: width 0.1s ease;
        }
        
        .time-display {
            font-size: 12px;
            color: #6c757d;
            display: flex;
            justify-content: space-between;
        }
        
        .close-player {
            background: none;
            border: none;
            color: #6c757d;
            font-size: 16px;
            cursor: pointer;
            padding: 5px;
        }
        
        .close-player:hover {
            color: #9c8898;
        }
        
        @media (max-width: 768px) {
            .bottom-player {
                padding: 10px;
            }
            
            .player-controls {
                gap: 10px;
                max-width: 1000px;
                min-width: 70%;
                margin-left: 3rem;
            }
            
            .progress-container {
                margin: 0 10px;
                max-width: 600px;
            }
            
            .player-track-info h6 {
                font-size: 14px;
            }

               .player-track-info {
               display: none;
                visibility: hidden;
        }
        }