:root {
            --background-color: #121212;
            --primary-text: #ffffff;
            --secondary-text: #b3b3b3;
            --highlight-color: #1DB954;
            --border-color: #282828;
            --panel-bg: rgba(25, 20, 20, 0.85);
            --scrollbar-track-color: rgba(0,0,0,0.1);
            --scrollbar-thumb-color: #535353;
            --font-stack: 'Poppins', sans-serif;
            --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        body {
            font-family: var(--font-stack);
            background-color: var(--background-color);
            color: var(--secondary-text);
            margin: 0;
            padding: 20px;

            /*
            display: flex; 
            justify-content: center;
            align-items: flex-start;
*/
            min-height: 100vh;
            overflow: hidden;
            transition: background-color 0.4s ease, color 0.4s ease, font-family 0.4s ease;
            
            width: 100vw;
        }

        #github-promotion {
            background: rgba(0,0,0,0.2);
            border-radius: 6px;
            padding: 8px 12px;
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 0.8rem;
            margin-bottom: 10px;
            max-height: 100px;
            overflow: hidden;
            transition: all 0.5s ease-out;
        }
        #github-promotion.hidden {
            max-height: 0;
            opacity: 0;
            margin-bottom: 0;
            padding-top: 0;
            padding-bottom: 0;
        }
        #github-promotion a { color: var(--primary-text); text-decoration: none; font-weight: 500; }
        #github-promotion a:hover { color: var(--highlight-color); }
        #close-promo-btn { background: none; border: none; color: var(--secondary-text); font-size: 1.2rem; padding: 0; line-height: 1; margin-left: auto; cursor: pointer; }
        #close-promo-btn:hover { color: var(--primary-text); }

        a, button, .playlist-song, input[type=range] { cursor: pointer; }

        #music-player {
            /*position: fixed; */
          
            position: fixed;
            top: 10px;
            bottom: 10px;

            left: calc(50vw - 200px);

             
            z-index: 30;
            display: flex;
            align-items: stretch;
            transition: transform 0.5s var(--ease-out-back);
            border-radius: 8px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            background: transparent;
            justify-content: center;
            font-family: var(--font-stack);


              position: fixed;
              inset: 0;             /* Shorthand for top:0, right:0, bottom:0, left:0 */
              margin: auto;         /* Automatically balances the remaining screen space */
              width: fit-content;   /* Works with fixed widths (e.g., 400px) or text sizing */
              height: fit-content;

        }

        #music-player.player-hidden {
             transform: translateX(calc(-100% + 42px));
        }
        
        #music-player::before {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 10px;
            opacity: 0;
            transition: opacity 0.3s ease-out;
            pointer-events: none;
            z-index: 99;
            box-shadow: 0 0 0 0 var(--highlight-color);
        }
        #music-player.buffering::before {
            opacity: 1;
            animation: buffering-glow 1.5s infinite;
        }

        @keyframes buffering-glow {
            0% { box-shadow: 0 0 3px var(--highlight-color), inset 0 0 3px var(--highlight-color); }
            50% { box-shadow: 0 0 10px var(--highlight-color), inset 0 0 10px var(--highlight-color); }
            100% { box-shadow: 0 0 3px var(--highlight-color), inset 0 0 3px var(--highlight-color); }
        }

        .player-body {
            position: relative;
            padding: 8px;
            width: auto;
            display: flex;
            gap: 10px;
            align-items: center;
            /*flex-grow: 1;*/
            overflow: hidden;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            
            transition: border-color 0.4s ease;
        }

        .player-body::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: var(--panel-bg);
            backdrop-filter: blur(10px) saturate(180%);
            border-radius: inherit;
            transition: background-color 0.4s ease;
        }

        #player-album-bg {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-size: cover;
            background-position: center;
            filter: blur(10px) brightness(0.5);
            z-index: -2;
            transition: background-image 0.5s ease-in-out;
            border-radius: inherit;
        }
        
        #visualizer {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            opacity: 0.6;
            pointer-events: none;
        }

        .album-art-container {
            position: relative;
            flex-shrink: 0;
            z-index: 1;
        }

        #album-art {
            height: 44px;
            width: 44px;
            border-radius: 6px;
            object-fit: cover;
            border: 1px solid var(--border-color);
            transition: transform 0.4s ease-out, box-shadow 0.3s ease;
        }

        #album-art.spinning {
            box-shadow: 0 0 8px var(--highlight-color);
            border-color: var(--highlight-color);
        }

        @keyframes art-pulse {
            0%, 100% { box-shadow: 0 0 4px var(--highlight-color); }
            50% { box-shadow: 0 0 12px var(--highlight-color); }
        }

        #album-art.playing-glow {
            animation: art-pulse 2s ease-in-out infinite;
        }

        #album-art::after {
            content: '♪';
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            background: var(--border-color);
            border-radius: inherit;
        }

        #playlist-btn {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.5);
            color: white;
            border: none;
            border-radius: 50%;
            width: 22px; height: 22px;
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .player-info-and-controls {
            display: flex;
            flex-direction: column;
            gap: 1px;
            width: 100%;
            flex-grow: 1;
            position: relative;
            z-index: 1;
            transition: color 0.4s ease;
        }

        .song-info {
            display: flex;
            align-items: baseline;
            gap: 4px;
            white-space: nowrap;
            overflow: hidden;
            position: relative;
        }

        #song-title { 
            font-size: 0.85rem; 
            font-weight: 600; 
            color: var(--primary-text); 
            transition: color 0.4s ease; 
            display: inline-block;
            white-space: nowrap;
        }
        
        #song-title.overflowing {
            animation: marquee 8s linear infinite;
            padding-right: 40px;
        }
        
        @keyframes marquee {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        #song-artist { font-size: 0.75rem; color: var(--secondary-text); text-overflow: ellipsis; overflow: hidden; flex-shrink: 1; transition: color 0.4s ease; }

        #song-artist::before {
            content: '-';
            margin-right: 4px;
            color: var(--border-color);
        }

        #player-toggle-btn {
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-left: none;
            width: 42px;
            color: var(--primary-text);
            font-size: 1.2rem;
            transition: color 0.2s, text-shadow 0.2s, background-color 0.4s ease, border-color 0.4s ease;
            border-radius: 0 8px 8px 0;
            backdrop-filter: blur(10px) saturate(180%);
            flex-shrink: 0;
            position: relative;
            z-index: 3;
            overflow: hidden;
            display: flex; align-items: center; justify-content: center;
        }
        #player-toggle-btn i {
             position: relative;
             z-index: 2;
        }

        #player-toggle-btn::after {
            content: '';
            position: absolute;
            top: 6px; right: 6px;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--highlight-color);
            opacity: 0;
            transition: opacity 0.3s;
        }

        #player-toggle-btn.is-playing::after {
            opacity: 1;
            animation: blink-dot 1.5s ease-in-out infinite;
        }

        @keyframes blink-dot {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.2; }
        }

        #player-toggle-btn:hover { color: var(--highlight-color); }
        .toggled-glow { color: var(--highlight-color) !important; }

        #audio-player {
            display: none;
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            object-fit: cover;
            z-index: -1;
            opacity: 0.4;
            pointer-events: none;
            border-radius: inherit;
        }

        .player-body.is-video #audio-player {
            display: block;
        }

        #speed-btn {
            font-family: var(--font-stack);
            font-weight: 700;
            font-size: 0.75rem !important;
            width: 28px;
            text-align: center;
        }

        #speed-btn.active { color: var(--highlight-color); text-shadow: 0 0 5px var(--highlight-color); }

        .timeline-container { 
            display: flex; 
            align-items: center; 
            gap: 6px; 
            width: 100%; 
            position: relative;
        }
        .time-display { font-size: 0.7rem; color: var(--secondary-text); min-width: 32px; text-align: center; transition: color 0.4s ease; }

        .player-controls { display: flex; justify-content: space-between; align-items: center; }
        .player-controls button { background: none; border: none; color: var(--secondary-text); transition: transform 0.2s ease, color 0.4s ease; position: relative; font-size: 0.8rem; }
        .player-controls button:hover { color: var(--primary-text); transform: scale(1.15); }
        
        #play-pause-btn { font-size: 1.1rem; color: var(--primary-text); }
        
        #repeat-btn.repeat-one-active::after {
            content: '1';
            position: absolute;
            top: -2px; right: -2px;
            font-size: 0.6rem;
            font-weight: bold;
            color: var(--highlight-color);
        }

        #like-btn.liked { color: var(--highlight-color); }
        #like-btn.liked i { animation: heart-pop 0.3s var(--ease-out-back); font-weight: 900; }
        @keyframes heart-pop { 0% { transform: scale(1); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
        
        #sleep-timer-btn.active { color: var(--highlight-color); }
        
        .volume-controls { display: flex; align-items: center; gap: 8px; }

        input[type=range] { -webkit-appearance: none; background: transparent; width: 100%; margin: 0; padding: 0; }
        input[type=range]:focus { outline: none; }
        input[type=range]::-webkit-slider-runnable-track { height: 4px; background: #535353; border-radius: 2px; transition: background 0.2s ease; }
        input[type=range]:hover::-webkit-slider-runnable-track { background: var(--highlight-color); }
        
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            height: 12px;
            width: 12px;
            border-radius: 50%;
            background: var(--primary-text);
            margin-top: -4px;
            opacity: 1;
            cursor: grab;
            transition: transform 0.1s;
        }
        input[type=range].grabbing::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }

        #volume-slider-input { width: 50px; opacity: 1; transition: width 0.3s ease, opacity 0.3s ease; }

        #song-notification-toast {
            position: absolute;
            left: 100%;
            bottom: 0;
            margin-left: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            border-radius: 8px;
            width: 250px;
            opacity: 0;
            transform: translateY(20px);
            visibility: hidden;
            transition: opacity 0.4s ease, transform 0.4s var(--ease-out-back), visibility 0.4s;
            pointer-events: none;
            backdrop-filter: blur(10px) saturate(180%);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            font-family: var(--font-stack);
        }
        #song-notification-toast.show { opacity: 1; transform: translateY(0); visibility: visible; }
        #toast-album-art { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
        #toast-song-title { font-size: 0.9rem; color: var(--primary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        #playlist-modal {
            --position: fixed;
            bottom: 80px;
            left: 10px;
            right: 10px;
            top: auto;
            transform: translateY(10px);
            width: auto;
            max-width: none;
            z-index: 50;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, transform 0.4s var(--ease-out-back), visibility 0.4s;
            pointer-events: none;
            font-family: var(--font-stack);
        }
        #playlist-modal.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

        .modal-content {
            position: relative;
            border: 1px solid var(--border-color);
            width: 100%;
            max-height: 60vh;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
        }
        .modal-content::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--panel-bg); backdrop-filter: blur(10px) saturate(180%); border-radius: 8px; }
        .modal-header { padding: 10px 15px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
        .modal-header-top { display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { margin: 0; font-size: 1.2rem; color: var(--primary-text); }
        
        .modal-control-btn { background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); color: var(--secondary-text); transition: all 0.2s; cursor: pointer; font-size: 0.85rem; padding: 6px; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; }
        .modal-control-btn:hover { color: var(--primary-text); border-color: var(--secondary-text); background: rgba(255,255,255,0.05); }
        .modal-control-btn.toggled-glow { color: var(--highlight-color); border-color: var(--highlight-color); background: rgba(255,255,255,0.05); }

        #shortcuts-btn { background: none; border: none; color: var(--secondary-text); transition: color 0.2s, transform 0.2s; cursor: pointer; padding: 4px; font-size: 0.9rem; }
        #shortcuts-btn:hover { color: var(--primary-text); transform: scale(1.15); }

        #settings-btn { background: none; border: none; color: var(--secondary-text); transition: color 0.2s, transform 0.2s; cursor: pointer; padding: 4px; font-size: 0.9rem; }
        #settings-btn:hover { color: var(--primary-text); transform: scale(1.15); }

        #settings-modal {
            position: fixed;
            bottom: 80px;
            left: 10px;
            right: 10px;
            top: auto;
            transform: translateY(10px);
            width: auto;
            max-width: none;
            z-index: 60;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, transform 0.4s var(--ease-out-back), visibility 0.4s;
            pointer-events: none;
            font-family: var(--font-stack);
        }
        #settings-modal.show { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

        .settings-body { padding: 15px; overflow-y: auto; flex-grow: 1; }
        .theme-list-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; cursor: pointer; color: var(--secondary-text); transition: color 0.2s; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .theme-list-item:hover { color: var(--primary-text); }
        .theme-list-item:last-child { border-bottom: none; }

        .theme-button { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; padding: 0; outline: 2px solid var(--border-color); outline-offset: 2px; transition: outline-color 0.2s, transform 0.2s; cursor: pointer; flex-shrink: 0; }
        .theme-button:hover { transform: scale(1.15); outline-color: var(--primary-text); }
        .theme-button.active { outline-color: var(--highlight-color); }

        .search-row { display: flex; gap: 8px; }
        .modal-controls-row { display: flex; gap: 8px; margin-top: 5px; }
        #playlist-search { width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--secondary-text); color: var(--primary-text); padding: 5px 8px; font-family: var(--font-stack); border-radius: 4px; box-sizing: border-box; flex-grow: 1; }
        #playlist-search:focus { outline: none; border-color: var(--highlight-color); box-shadow: 0 0 5px var(--highlight-color); }
        
        #filter-fav-btn { background: none; border: 1px solid var(--secondary-text); color: var(--secondary-text); border-radius: 4px; padding: 0 8px; font-size: 0.8rem; transition: all 0.2s; }
        #filter-fav-btn.active { background: var(--highlight-color); color: var(--background-color); border-color: var(--highlight-color); }
        #filter-fav-btn:hover { border-color: var(--highlight-color); }

        .modal-close-btn { background: none; border: none; font-size: 1.5rem; color: var(--secondary-text); cursor: pointer; }

        #playlist-container { padding: 5px; overflow-y: auto; flex-grow: 1; counter-reset: track-counter; }
        #playlist-container::-webkit-scrollbar { width: 8px; }
        #playlist-container::-webkit-scrollbar-track { background: var(--scrollbar-track-color); border-radius: 4px; }
        #playlist-container::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 4px; }
        #playlist-container::-webkit-scrollbar-thumb:hover { background-color: var(--highlight-color); }

        .playlist-song { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 4px; transition: background-color 0.2s; counter-increment: track-counter; }
        .playlist-song:hover { background-color: rgba(255, 255, 255, 0.1); }
        
        .playlist-song::before {
            content: counter(track-counter);
            font-size: 0.7rem;
            color: var(--secondary-text);
            min-width: 18px;
            text-align: right;
            flex-shrink: 0;
            margin-right: 4px;
        }
        
        .playlist-song.playing { background-color: rgba(255,255,255,0.07); border-left: 3px solid var(--highlight-color); padding-left: 5px; color: var(--background-color); } 
        .playlist-song.playing::before { content: '>'; color: var(--highlight-color); }
        
        .playlist-song.playing .playlist-song-title { color: var(--highlight-color); font-weight: 600; }
        .playlist-song.playing .playlist-song-artist { color: var(--secondary-text); opacity: 1; }
        
        .playlist-song .fav-icon { margin-left: auto; opacity: 0; color: var(--secondary-text); font-size: 0.8rem; transition: opacity 0.2s; }
        .playlist-song:hover .fav-icon, .playlist-song .fav-icon.active { opacity: 1; }
        .playlist-song .fav-icon.active { color: var(--highlight-color); }

        .playlist-song .queue-icon { opacity: 0; color: var(--secondary-text); font-size: 0.8rem; transition: opacity 0.2s; margin-left: 10px; }
        .playlist-song:hover .queue-icon { opacity: 1; }
        
        .playlist-song img { 
            width: 40px; 
            height: 40px; 
            border-radius: 50%; 
            object-fit: cover;
            transition: transform 0.4s ease-out;
        }
        .playlist-song-info { min-width: 0; flex: 1; overflow: hidden; }
        .playlist-song-title-row { display: flex; align-items: center; width: 100%; }
        .playlist-song-title-wrapper { overflow: hidden; white-space: nowrap; flex-shrink: 1; min-width: 0; display: flex; }
        .playlist-song-title { font-size: 1rem; color: var(--primary-text); display: inline-block; white-space: nowrap; flex-shrink: 0; transition: color 0.2s; }
        .playlist-song-title.overflowing { animation: marquee 8s linear infinite; padding-right: 40px; }
        .playlist-song-badges { display: flex; align-items: center; flex-shrink: 0; }
        .playlist-song-artist { font-size: 0.9rem; color: var(--secondary-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        .video-tag {
            font-size: 0.55rem;
            background-color: var(--border-color);
            color: var(--primary-text);
            padding: 3px 6px;
            border-radius: 4px;
            margin-left: 8px;
        }
        
        .playlist-song.playing .video-tag {
            background-color: rgba(255, 255, 255, 0.2);
            color: var(--highlight-color);
        }

        .spinning { animation: spin 4s linear infinite; }
        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        @media (hover: hover) and (pointer: fine) {
            .volume-controls:not(:hover) #volume-slider-input { width: 0; opacity: 0; }
            .album-art-container:not(:hover) #playlist-btn { opacity: 0; }
            #music-player:not(:hover) input[type=range]::-webkit-slider-thumb { opacity: 0; }
        }


        @media (max-width: 1024px) {
             body {
            zoom: 3;            
            }
        }

        @media (min-width: 768px) {


           
            #music-player {
                display: flex;
                flex-direction: column;               
              
   
                justify-content: flex-start;
            }

            .player-info-and-controls { width: 190px; }
            #playlist-modal {
                --position: absolute;
                bottom: 110%;
                top: auto;
                left: 0;
                transform: translateY(10px);
                /*width: 280px; */
            }
             #playlist-modal.show {
                transform: translateY(0);
            }
            #settings-modal {
                position: absolute;
                bottom: 110%;
                top: auto;
                left: 0;
                transform: translateY(10px);
                width: 280px;
            }
            #settings-modal.show {
                transform: translateY(0);
            }
        }

        @media (min-width: 900px) {
            #music-player {
              
                /*width: auto; */
            }
            #music-player.player-hidden {
                 transform: translateX(calc(-100% + 50px));
            }
        }