.font-bangers { font-family: 'Bangers', cursive; }
        body { font-family: 'Inter', sans-serif; }

        /* Player container */
        .player-container {
            position: relative; width: 100%; padding-bottom: 56.25%;
            height: 0; overflow: hidden; border-radius: 0.5rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); background-color: #000;
        }
        .player-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

        /* Buttons */
        .gradient-button {
            background: linear-gradient(45deg, #FF5722, #D500F9);
            transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }
        .gradient-button:hover {
            background: linear-gradient(45deg, #D500F9, #FF5722);
            transform: scale(1.05); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.6);
        }

        /* Favorites */
        #favorite-button {
            background: none; border: none; font-size: 1.8rem;
            cursor: pointer; transition: transform 0.2s ease, color 0.2s ease;
            padding: 0.5rem; line-height: 1;
            color: #ccc;
            min-width: 44px;
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        #favorite-button:hover { transform: scale(1.2); }
        #favorite-button.favorited { color: #ffcc00; }

        /* Favorites List */
        #favorites-list { max-height: 200px; overflow-y: auto; }
        #favorites-list::-webkit-scrollbar { width: 8px; }
        #favorites-list::-webkit-scrollbar-track { background: #555; border-radius: 4px; }
        #favorites-list::-webkit-scrollbar-thumb { background-color: #ffcc00; border-radius: 4px; border: 2px solid #555; }
        #favorites-list li {
            cursor: pointer;
            padding: 0.75rem;
            border-radius: 0.375rem;
        }

        /* Volume control */
        .volume-container {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        .volume-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: #4a5568;
            outline: none;
        }
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #ffcc00;
            cursor: pointer;
        }

        /* Playback controls */
        .playback-controls {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
        }
        .playback-btn {
            background: #4a5568;
            border: none;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
        }
        .playback-btn:hover {
            background: #2d3748;
        }
        .playback-btn.active {
            background: #ffcc00;
            color: #1a202c;
        }

        /* Loading animation */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .loading {
            animation: pulse 1.5s infinite;
        }
        /* ... tu CSS existente ... */

#install-footer {
    transform: translateY(100%);
}
#install-footer.visible {
    transform: translateY(0);
}