:root { --bg: #0a0a0a; --card: #161616; --text: #fff; --dim: #a0a0a0; --accent: #2ecc71; --icon: #8d8d8d; --icon-hover: #ffffff; --icon-active: var(--accent); }
        body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); margin: 0; padding: 10px; padding-bottom: 90px; }
        
        .album-nav { display: flex; gap: 10px; padding: 10px; background: var(--card); border-radius: 8px; margin-bottom: 15px; overflow-x: auto; border: 1px solid #333; }
        .nav-item { cursor: pointer; display: flex; align-items: center; gap: 8px; min-width: 180px; padding: 5px; border-radius: 6px; border: 1px solid transparent; transition: background 0.2s; }
        .nav-item:hover { background: #222; border-color: var(--accent); }
        .nav-art-mini { width: 35px; height: 35px; border-radius: 4px; flex-shrink: 0; }

        .album-container { position: relative; display: grid; grid-template-columns: minmax(150px, 260px) 1.2fr 1fr; gap: 20px; margin-bottom: 40px; padding-top: 25px; border-top: 1px solid #222; align-items: start; isolation: isolate; overflow: hidden; border-radius: 12px; }
        .album-bg-blur { position: absolute; top: -100px; left: -100px; right: -100px; bottom: -100px; background-size: cover; background-position: center; filter: blur(50px) brightness(0.2); z-index: -1; transform: translateZ(0) scale(1.1); pointer-events: none; transition: background-image 0.8s ease; opacity: 0.6; will-change: background-image; backface-visibility: hidden; }
        .album-art-box { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1/1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 3rem; margin-bottom: 10px; background-size: cover; background-position: center; background-color: #222; transition: background-image 0.3s ease; cursor: zoom-in; }

        .player-wrapper { display: none; margin-bottom: 15px; background: #1a1a1a; padding: 8px; border-radius: 8px; border: 1px solid #333; max-width: 260px; }
        .player-main-row { display: flex; align-items: center; gap: 8px; }
        .btn-main-play { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: white; width: 24px; display: flex; justify-content: center; }
        
        .progress-slider { -webkit-appearance: none; appearance: none; flex-grow: 1; height: 4px; border-radius: 2px; background: #444; outline: none; cursor: pointer; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0% 100%; }
        .progress-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); }

        .volume-container { position: relative; display: flex; align-items: center; padding-left: 4px; flex-shrink: 0; }
        .volume-popover { position: absolute; bottom: 35px; right: 0; transform: rotate(-90deg) translateX(40px); transform-origin: right; background: #222; padding: 10px; border-radius: 8px; border: 1px solid #444; display: none; width: 80px; z-index: 10; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
        .volume-container:hover .volume-popover { display: block; }
        .volume-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; background: #444; background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 40% 100%; }
        .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 10px; width: 10px; border-radius: 50%; background: #fff; }
        .time-text { font-size: 10px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; flex-shrink: 0; }
        .now-playing-text { font-size: 10px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; font-weight: bold; opacity: 0.9; }

        .credits-box { background: var(--card); padding: 10px; border-radius: 6px; font-size: 0.75rem; border: 1px solid #222; }
        .credits-box h3 { margin: 0 0 2px 0; font-size: 0.8rem; text-transform: uppercase; }
        .credits-box p { margin: 0 0 10px 0; line-height: 1.4; color: var(--dim); white-space: pre-line; }
        .track-credits-area { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #444; color: var(--accent); }
        
        .album-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

        .track-item-wrapper { display: flex; flex-direction: column; border-bottom: 1px solid #1a1a1a; }
        .track-row { display: grid; grid-template-columns: 28px 25px 1fr 150px 75px; align-items: center; padding: 4px; font-size: 0.85rem; border-radius: 4px; gap: 4px; }
        .track-row.has-art { grid-template-columns: 35px 28px 25px 1fr 150px 75px; }
        .track-row:hover { background: #111; }
        .track-row.active-track { background: rgba(46, 204, 113, 0.1); border-left: 3px solid var(--accent); padding-left: 1px; }
        .track-row.active-track .track-title { color: #fff; font-weight: 600; text-shadow: 0 0 5px rgba(255,255,255,0.3); }
        .track-number { color: #555; font-size: 0.7rem; text-align: center; }
        .track-thumb-box { position: relative; display: flex; align-items: center; justify-content: center; }
        .track-thumb { width: 28px; height: 28px; border-radius: 3px; object-fit: cover; background: #222; cursor: zoom-in; position: relative; }
        .track-title-cell { display: block; overflow: hidden; }
        .versions-row { display: flex; gap: 4px; }
        .btn-version { background: #333; color: #fff; border: none; font-size: 0.6rem; padding: 2px 5px; border-radius: 3px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
        .btn-version:hover { background: var(--accent); color: #000; }
        .meta-col { display: flex; align-items: center; justify-content: flex-end; gap: 10px; white-space: nowrap; overflow: visible; min-width: 140px; }
        .jump-col { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 60px; flex-shrink: 0; }
        .btn-play { cursor: pointer; background: none; border: none; font-size: 1.1rem; padding: 0; opacity: 0.8; transition: opacity 0.2s; }
        .btn-play:hover { opacity: 1; transform: scale(1.1); }
        .track-title { cursor: pointer; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; text-decoration: none; display: block; transition: color 0.1s; }
        .track-title:hover { color: var(--accent); }
        .btn-action { background: none; border: 1px solid #333; color: #888; border-radius: 3px; cursor: pointer; padding: 2px 5px; font-size: 0.65rem; transition: all 0.2s; flex-shrink: 0; white-space: nowrap; }
        .btn-action:hover { border-color: var(--accent); color: var(--icon-hover); }
        .jump-btn { border: none; background: none; color: var(--icon); font-size: 1rem; cursor: pointer; transition: color 0.2s; padding: 0 2px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; line-height: 1; flex-shrink: 0; }
        .jump-btn:hover { color: var(--icon-hover); }
        
        /* Dynamic SVG Icon inheritance */
        .jump-btn svg, .btn-action svg, .btn-gp svg { stroke: currentColor; }
        .btn-play svg, .btn-gp-play svg { stroke: currentColor; }
        
        .btn-gp.gp-active,
        .btn-action.active,
        .jump-btn.active,
        .track-row.active-track .btn-play {
          color: var(--icon-active) !important;
        }
        /* Lucide Icon Base Styling */
        .btn-play,
        .btn-action,
        .jump-btn,
        .btn-gp,
        .btn-gp-play {
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }

        .btn-play svg {
          stroke: #fff;
          width: 16px;
          height: 16px;
          stroke-width: 2.2;
        }
        
        .btn-gp-play svg {
          stroke: #000;
          width: 16px;
          height: 16px;
          stroke-width: 2.2;
        }

        .jump-btn svg,
        .btn-action svg {
          width: 14px;
          height: 14px;
          stroke-width: 2.2;
        }

        .btn-gp svg {
          width: 18px;
          height: 18px;
          stroke-width: 2.2;
        }

        .btn-action {
          padding: 2px 5px;
          gap: 4px;
        }

        .jump-btn {
          width: 20px;
          height: 20px;
        }

        .lyrics-container { background: #0f0f0f; padding: 12px; border-radius: 8px; border: 1px solid #1a1a1a; height: fit-content; max-height: 600px; overflow-y: auto; }
        .lyrics-header { margin: 0 0 8px 0; font-size: 0.9rem; border-bottom: 1px solid #333; padding-bottom: 4px; color: var(--accent); }
        .lyrics-text { font-family: 'Inter', system-ui, sans-serif; font-size: 0.85rem; color: #bbb; line-height: 1.4; white-space: pre-line; }
        .lyric-paragraph { margin-bottom: 12px; } 
        .lyric-paragraph.indent { padding-left: 20px; border-left: 2px solid #222; }
        .inline-lyrics { display: none; padding: 5px 10px 15px 65px; font-size: 0.85rem; color: #bbb; line-height: 1.5; white-space: pre-line; background: transparent; font-family: 'Inter', system-ui, sans-serif; }
        .inline-desc { display: none; padding: 12px; margin-top: 10px; font-size: 0.85rem; color: #bbb; line-height: 1.5; white-space: pre-line; background: #111; border-radius: 6px; border: 1px solid #222; font-family: 'Inter', system-ui, sans-serif; }

        .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--card); border: 1px solid #333; margin-bottom: 15px; border-radius: 8px; }
        .top-bar-left { display: flex; align-items: center; gap: 25px; }
        .top-bar-left h1 { margin: 0; font-size: 1.4rem; color: var(--accent); letter-spacing: 1px; }
        .top-bar-right { display: flex; align-items: center; gap: 20px; }
        .social-icons { display: flex; gap: 15px; align-items: center; }
        .social-icons a { opacity: 0.7; transition: all 0.2s; display: flex; align-items: center; }
        .social-icons a:hover { opacity: 1; transform: scale(1.1); }
        .top-bar-right form { margin: 0; display: flex; align-items: center; }

        @media (max-width: 1000px) { 
            .album-container { grid-template-columns: 1fr; } 
            .col-3 { display: none !important; }
        }
        @media (max-width: 600px) { 
            .top-bar { flex-direction: column; gap: 15px; text-align: center; }
            .top-bar-left { flex-direction: column; gap: 10px; }
        }

        /* Lightbox Style */
        .lightbox { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); align-items: center; justify-content: center; cursor: zoom-out; backdrop-filter: blur(5px); }
        .lightbox-content { max-width: 95vw; max-height: 95vh; object-fit: contain; box-shadow: 0 0 30px rgba(0,0,0,1); border-radius: 4px; transition: transform 0.3s ease; }
        .lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: 0.3s; z-index: 2001; }
        .lightbox-close:hover { color: var(--accent); }

        @keyframes randomDrift {
            0% { background-position: 50% 50%; }
            12% { background-position: 80% 20%; }
            25% { background-position: 10% 90%; }
            37% { background-position: 90% 80%; }
            50% { background-position: 20% 10%; }
            62% { background-position: 80% 80%; }
            75% { background-position: 10% 40%; }
            87% { background-position: 90% 10%; }
            100% { background-position: 50% 50%; }
        }

        /* Global Bottom Player Array */
        .global-player { position: fixed; bottom: 0; left: 0; width: 100%; height: 80px; background: #121212; z-index: 1000; overflow: hidden; border-top: 1px solid #282828; display: flex; flex-direction: column; justify-content: center; transition: transform 0.3s ease; }
        .player-bg { position: absolute; top: -50px; left: -50px; right: -50px; bottom: -50px; background-size: 120% 150%; background-position: center; filter: blur(30px) brightness(0.35); z-index: -1; transform: translate3d(0,0,0) scale(1.2); pointer-events: none; transition: background-image 0.5s ease; animation: randomDrift 60s ease-in-out infinite alternate; will-change: transform, opacity; backface-visibility: hidden; }
        .player-content { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 20px; z-index: 1; gap: 10px; box-sizing: border-box; }
        
        .player-left { display: flex; align-items: center; gap: 15px; width: 30%; min-width: 180px; }
        .player-left img { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background-color: #222; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: transform 0.2s; }
        .player-left img:hover { transform: scale(1.05); }
        .gp-info { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
        .gp-title { font-size: 0.9rem; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; cursor: pointer; transition: color 0.2s; }
        .gp-title:hover { color: var(--accent); }
        .gp-album { font-size: 0.75rem; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; padding-top: 1px; cursor: pointer; filter: brightness(0.8); transition: filter 0.2s; }
        .gp-album:hover { filter: brightness(1.2); }
        .gp-artist { font-size: 0.7rem; color: #b3b3b3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; padding-top: 1px; }

        .player-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; max-width: 40%; gap: 6px; }
        .gp-controls { display: flex; align-items: center; gap: 20px; }
        .btn-gp { background: none; border: none; color: var(--icon); font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all 0.2s ease; }
        .btn-gp:hover { color: var(--icon-hover); transform: scale(1.1); }
        .btn-gp.gp-active { color: var(--icon-active); filter: drop-shadow(0 0 5px var(--icon-active)); transform: scale(1.1); font-weight: bold; }
        .btn-gp-play { background: #fff; color: #000; border-radius: 50%; width: 35px; height: 35px; padding-left: 2px; opacity: 1; font-size: 1.2rem; }
        .btn-gp-play:hover { background: #fff; color: #000; transform: scale(1.05); }
        .gp-progress-row { display: flex; align-items: center; width: 100%; gap: 8px; }
        .gp-time { font-size: 0.7rem; color: #a0a0a0; font-variant-numeric: tabular-nums; min-width: 35px; text-align: center; }
        .gp-progress-slider { -webkit-appearance: none; appearance: none; flex-grow: 1; height: 4px; border-radius: 2px; background: #5a5a5a; outline: none; cursor: pointer; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 0% 100%; }
        .gp-progress-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s; }
        .gp-progress-row:hover .gp-progress-slider::-webkit-slider-thumb { opacity: 1; }

        .player-right { display: flex; align-items: center; justify-content: flex-end; gap: 15px; width: 30%; min-width: 150px; }
        .gp-volume-container { position: relative; display: flex; align-items: center; }
        .gp-volume-slider { width: 80px; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: #5a5a5a; outline: none; cursor: pointer; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-size: 40% 100%; margin-left: 8px; }
        .gp-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; height: 12px; width: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s; }
        .gp-volume-container:hover .gp-volume-slider::-webkit-slider-thumb { opacity: 1; }
        .gp-volume-popover { display: flex; align-items: center; }

        @media (max-width: 768px) { 
            body { padding: 4px 2px; padding-bottom: 80px; }
            .album-nav { padding: 4px; gap: 5px; margin-bottom: 10px; }
            .nav-item { min-width: 130px; padding: 3px; font-size: 0.75rem; }
            .top-bar { padding: 6px; margin-bottom: 6px; gap: 4px; }
            .top-bar-left h1 { font-size: 1.1rem; }
            .album-container { padding: 8px 3px; margin-bottom: 20px; gap: 6px; border-radius: 6px; }
            
            /* Tighten track rows significantly */
            .track-row { padding: 5px 0; grid-template-columns: 18px 18px 1fr 125px 42px; font-size: 0.75rem; gap: 2px; }
            .track-row.has-art { grid-template-columns: 25px 18px 18px 1fr 125px 42px; }
            .track-title-cell { flex-direction: column; align-items: flex-start; gap: 2px; justify-content: center; }
            .track-number { font-size: 0.65rem; width: 18px; }
            .btn-play { font-size: 1rem; width: 18px; }
            
            .inline-lyrics { padding: 8px 8px 15px 30px; font-size: 0.8rem; }
            .meta-col { min-width: 125px; gap: 4px; flex-direction: row; }
            .jump-col { min-width: 38px; gap: 2px; }
            .btn-action { padding: 1px 3px; font-size: 0.6rem; }
            
            /* Center mobile album art and metadata */
            .album-art-box { margin: 0 auto 4px auto; max-width: 170px; font-size: 1.8rem; }
            .mobile-album-meta { display: block !important; font-size: 0.75rem; padding-bottom: 4px; }
            
            /* Hide unused or non-essential parts */
            #gp-newtab, a.jump-btn[target="_blank"], .credits-box { display: none !important; }
            
            /* Global Player Stacking */
            .global-player { padding: 4px; }
            .player-content { gap: 3px; }
            .player-left img { width: 28px; height: 28px; margin-right: 4px; }
            .gp-info { max-width: 70px; }
            .gp-title { font-size: 0.75rem; }
            .gp-album, .gp-artist { font-size: 0.6rem; }
            .gp-controls { gap: 5px; }
            .btn-gp { font-size: 0.95rem; }
            .btn-gp-play { width: 28px; height: 28px; font-size: 0.95rem; }
            
            .player-right { width: 50px; gap: 2px 4px; }
            .gp-progress-row { margin-top: 1px; gap: 4px; }
            .gp-time { min-width: 22px; font-size: 0.6rem; }
            
            /* Vertical Volume Popup */
            .gp-volume-container { margin: 0; padding: 0; position: relative; }
            .gp-volume-popover { display: none !important; position: absolute; bottom: 30px; right: -15px; background: #222; padding: 10px 15px; border-radius: 8px; border: 1px solid #444; transform: rotate(-90deg); transform-origin: center right; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
            .gp-volume-container.show-vol .gp-volume-popover { display: flex !important; }
            .gp-volume-slider { width: 100px; margin: 0; }
        }