* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
        body { min-height: 100vh; min-height: 100dvh; background: #000; display: flex; align-items: center; justify-content: center; overflow-x: hidden; }
        html { overflow-x: hidden; }

        .bg-layer {
            position: fixed; top: -10%; left: -10%; width: 120%; height: 120%;
            background-size: cover; background-position: center;
            filter: blur(60px) brightness(0.3); z-index: 0; transition: background-image 1s ease;
        }

        .glass-player {
            position: relative; z-index: 10; width: 1400px; max-width: 95vw; height: 85vh;
            background: rgba(20, 20, 25, 0.4); backdrop-filter: blur(30px);
            border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 40px; display: flex; flex-direction: column;
        }

        .main-row { flex: 1; display: flex; gap: 60px; overflow: hidden; margin-bottom: 20px; }
        .left-cover { flex: 1; display: flex; align-items: center; justify-content: center; }
        .cover-image { width: 100%; aspect-ratio: 1; max-width: 450px; object-fit: cover; border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }

        .right-lyrics { flex: 1.2; display: flex; flex-direction: column; overflow: hidden; }
        .song-name { font-size: 3rem; font-weight: 800; color: white; }
        .artist-name { font-size: 1.5rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 30px; }

        .lyrics-window {
            flex: 1; position: relative; overflow: hidden;
            mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 75%, transparent 100%);
        }
        #lyricsContainer { position: absolute; width: 100%; top: 0; transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; }
        .lyric-line { font-size: 1.5rem; padding: 22px 0; color: rgba(255, 255, 255, 0.3); transition: all 0.4s ease; }
        .lyric-line.active { color: #fff; font-size: 2.2rem; font-weight: 700; text-shadow: 0 0 20px rgba(255, 255, 255, 0.4); }

        .bottom-bar {
            height: 100px; display: flex; align-items: center; gap: 30px;
            background: rgba(255, 255, 255, 0.05); border-radius: 100px;
            padding: 0 40px; border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .progress-wrap { flex: 1; display: flex; align-items: center; gap: 20px; }
        .time { font-family: monospace; color: rgba(255, 255, 255, 0.5); min-width: 45px; }
        
        .progress-bar-container { flex: 1; height: 40px; display: flex; align-items: center; cursor: pointer; position: relative; z-index: 20; }
        .progress-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 10px; position: relative; pointer-events: none; }
        .progress-fill { height: 100%; width: 0%; background: #fff; border-radius: 10px; position: relative; pointer-events: none; }
        .progress-fill::after { content: ''; position: absolute; right: -7px; top: -4px; width: 14px; height: 14px; background: #fff; border-radius: 50%; }

        .icon-btn { background: none; border: none; color: white; font-size: 1.3rem; cursor: pointer; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; transition: 0.2s; border-radius: 50%; }
        .icon-btn:hover { background: rgba(255, 255, 255, 0.1); }
        .play-btn { font-size: 1.8rem; background: rgba(255, 255, 255, 0.1); width: 55px; height: 55px; }
        
        .mode-item { padding: 8px 12px; border-radius: 20px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); cursor: pointer; transition: 0.3s; border: 1px solid transparent; }
        .mode-item.active { color: #fff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255,255,255,0.1); }

        /* 修复：播放列表弹出层添加滚动支持 */
        .playlist-popup {
            position: absolute; right: 40px; bottom: 120px; width: 320px;
            max-height: 400px; /* 限制最大高度 */
            background: rgba(25, 25, 30, 0.9); backdrop-filter: blur(25px);
            border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 15px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
            opacity: 0; transform: translateY(20px); visibility: hidden; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100;
            overflow-y: auto; /* 允许纵向滚动 */
        }
        .playlist-popup.show { opacity: 1; transform: translateY(0); visibility: visible; }
        
        /* 播放列表滚动条美化 */
        .playlist-popup::-webkit-scrollbar { width: 5px; }
        .playlist-popup::-webkit-scrollbar-track { background: transparent; }
        .playlist-popup::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

        .song-item { padding: 12px 15px; border-radius: 12px; cursor: pointer; margin-bottom: 5px; color: rgba(255,255,255,0.5); transition: 0.2s; font-size: 0.95rem; }
        .song-item:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); }
        .song-item.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 600; }

        /* ===== 响应式：平板 (≤1024px) ===== */
        @media (max-width: 1024px) {
            .glass-player { padding: 24px; border-radius: 24px; }
            .main-row { gap: 30px; }
            .song-name { font-size: 2rem; }
            .artist-name { font-size: 1.2rem; margin-bottom: 20px; }
            .lyric-line { font-size: 1.2rem; padding: 18px 0; }
            .lyric-line.active { font-size: 1.6rem; }
            .cover-image { max-width: 300px; border-radius: 24px; }
            .bottom-bar { padding: 0 24px; gap: 16px; }
            .playlist-popup { right: 24px; width: 300px; }
        }

        /* ===== 响应式：手机横屏 / 小平板 (≤768px) ===== */
        @media (max-width: 768px) {
            body { overflow-y: auto; overflow-x: hidden; }
            .glass-player {
                padding: 16px; border-radius: 20px;
                height: auto; min-height: 100vh; min-height: 100dvh;
            }
            .main-row { flex-direction: column; gap: 16px; }
            .left-cover { flex: none; }
            .cover-image { max-width: 280px; border-radius: 20px; }
            .song-name { font-size: 1.5rem; }
            .artist-name { font-size: 1rem; margin-bottom: 12px; }
            .lyric-line { font-size: 1rem; padding: 14px 0; }
            .lyric-line.active { font-size: 1.3rem; text-shadow: 0 0 15px rgba(255,255,255,0.3); }
            .bottom-bar {
                height: auto; flex-wrap: wrap;
                padding: 12px 16px; gap: 10px;
                border-radius: 20px;
            }
            .progress-wrap { order: 3; flex-basis: 100%; }
            .controls-group { order: 1; justify-content: center; width: 100%; }
            #modeGroup { order: 2; justify-content: center; width: 100%; }
            .mode-item { padding: 6px 10px; font-size: 0.7rem; }
            .playlist-popup {
                right: 16px; left: 16px; width: auto;
                bottom: auto; top: 50%; transform: translateY(-50%) translateY(20px);
                max-height: 50vh;
            }
            .playlist-popup.show { transform: translateY(-50%) translateY(0); }
        }

        /* ===== 响应式：手机竖屏 (≤480px) ===== */
        @media (max-width: 480px) {
            .glass-player {
                padding: 12px; border-radius: 0;
                max-width: 100vw; width: 100%;
                min-height: 100vh; min-height: 100dvh;
            }
            .main-row { gap: 12px; }
            .left-cover { max-height: 40vh; overflow: hidden; }
            .cover-image { max-width: 75vw; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }
            .song-name { font-size: 1.2rem; }
            .artist-name { font-size: 0.85rem; margin-bottom: 8px; }
            .lyric-line { font-size: 0.9rem; padding: 10px 0; }
            .lyric-line.active { font-size: 1.1rem; text-shadow: 0 0 10px rgba(255,255,255,0.3); }
            .bottom-bar { padding: 8px 10px; gap: 8px; border-radius: 16px; }
            .icon-btn { width: 38px; height: 38px; font-size: 1.1rem; }
            .play-btn { width: 44px; height: 44px; font-size: 1.4rem; }
            .time { font-size: 0.7rem; min-width: 32px; }
            .progress-wrap { gap: 8px; }
            .mode-item { padding: 5px 8px; font-size: 0.65rem; border-radius: 14px; }
            .playlist-popup {
                left: 8px; right: 8px; bottom: 8px; top: auto;
                transform: translateY(20px);
                width: auto; max-height: 45vh;
                border-radius: 16px;
            }
            .playlist-popup.show { transform: translateY(0); }
            .song-item { padding: 10px 12px; font-size: 0.85rem; }
        }

        /* ===== 安全区适配 (刘海屏/底部横条) ===== */
        @supports (padding-top: env(safe-area-inset-top)) {
            .glass-player {
                padding-left: max(12px, env(safe-area-inset-left));
                padding-right: max(12px, env(safe-area-inset-right));
            }
        }