/* 深色演播室硬件风格 */
        :root {
            --bg-color: #0f1115;
            --deck-bg: #1a1d24;
            --accent: #00ffcc;
            /* 赛博朋克青色 */
            --danger: #ff3366;
            /* 直播红 */
            --text-main: #ffffff;
            --text-sub: #8892b0;
            /* 动态环境光 (T1):由当前频道封面主色驱动,JS 实时改写 */
            --amb-a: rgba(0, 255, 204, 0.13);
            --amb-b: rgba(0, 132, 255, 0.09);
            --amb-glow: rgba(0, 255, 204, 0.12);
        }

        /* 页面级环境光:两团radial光晕随频道主色变化,营造"演播室灯光"氛围 */
        #ambient-bg {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                radial-gradient(ellipse 65% 55% at 15% 5%, var(--amb-a), transparent 70%),
                radial-gradient(ellipse 60% 55% at 88% 98%, var(--amb-b), transparent 70%);
            transition: opacity 0.4s ease;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        /* 核心硬件外壳 (T2: 磨砂玻璃,透出背后的动态环境光) */
        .radio-deck {
            /* 无 backdrop-filter 支持时的回退:接近不透明 */
            background: rgba(26, 29, 36, 0.96);
            width: 90%;
            max-width: 800px;
            height: 350px;
            /* T8: 定位边界 —— 没有它,overflow:hidden 裁不到 absolute 后代
               (频谱的包含块链跳过 deck 直达 body,这是频谱叉出机身的根因) */
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.09);
            /* T1: 第三段辉光随频道主色呼吸 */
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 90px var(--amb-glow);
            transition: box-shadow 0.8s ease;
            display: flex;
        }

        /* 玻璃形态:支持 backdrop-filter 才降低不透明度,让环境光晕透进来 */
        @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
            .radio-deck {
                background: rgba(26, 29, 36, 0.55);
                backdrop-filter: blur(28px) saturate(1.4);
                -webkit-backdrop-filter: blur(28px) saturate(1.4);
            }
        }

        /* 左侧：播放状态与控制区 */
        .deck-left {
            flex: 1;
            min-width: 0;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* 顶部状态栏：ON AIR 指示灯 */
        .status-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
            color: var(--text-sub);
        }

        .status-dot {
            width: 12px;
            height: 12px;
            background-color: #555;
            border-radius: 50%;
            transition: all 0.3s;
        }

        .is-playing .status-dot {
            background-color: var(--danger);
            box-shadow: 0 0 10px var(--danger);
            animation: pulse 1.5s infinite;
        }

        .is-playing .status-text {
            color: var(--danger);
        }

        @keyframes pulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(255, 51, 102, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(255, 51, 102, 0);
            }
        }

        /* 封面与信息 */
        .now-playing {
            display: flex;
            gap: 20px;
            align-items: center;
            margin-bottom: 30px;
        }

        .cover-art {
            flex-shrink: 0;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            /* 圆形 */
            background-size: cover;
            background-position: center;
            /* T1: 外圈辉光随频道主色 */
            box-shadow: 0 0 0 6px #111, 0 0 0 8px rgba(255, 255, 255, 0.1), 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 45px var(--amb-glow);
            transition: box-shadow 0.8s ease, opacity 0.25s ease;
            animation: spin-vinyl 12s linear infinite;
            animation-play-state: paused;
            /* 默认暂停 */
        }

        /* 机器播放时，唱片转动 */
        .is-playing .cover-art {
            animation-play-state: running;
        }

        /* T6: 封面容器(承载进度环与悬浮条,不随黑胶旋转) */
        .cover-wrap {
            position: relative;
            flex-shrink: 0;
            width: 120px;
            height: 120px;
        }

        /* T6: 歌曲进度环 —— 悬在唱片外沿,12 点方向起走表 */
        .cover-progress {
            position: absolute;
            inset: -11px;
            width: calc(100% + 22px);
            height: calc(100% + 22px);
            transform: rotate(-90deg);
            opacity: 0;
            transition: opacity 0.5s;
            pointer-events: none;
        }

        .cover-progress.on {
            opacity: 1;
        }

        .cp-track {
            stroke: rgba(255, 255, 255, 0.08);
            stroke-width: 1.5;
        }

        .cp-arc {
            stroke: var(--accent);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-dasharray: 301.59;   /* 2πr, r=48 */
            stroke-dashoffset: 301.59;
        }

        /* T6: 下一首悬浮条(鼠标悬停封面时浮现) */
        /* T7+: 气泡改为封面下方弹出 —— 外壳已恢复 overflow:hidden,
           气泡在面板内部展开,天然不会被裁,也永不遮挡状态栏 */
        .cover-tip {
            position: absolute;
            top: calc(100% + 10px);
            left: 0;
            transform: translateY(-6px);
            display: flex;
            flex-direction: column;
            gap: 2px;
            background: rgba(15, 17, 21, 0.85);
            border: 1px solid rgba(0, 255, 204, 0.25);
            border-radius: 10px;
            padding: 8px 12px;
            font-size: 12px;
            color: var(--text-main);
            white-space: normal;
            word-break: break-word;
            width: max-content;
            max-width: min(320px, calc(100vw - 40px));
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
            z-index: 5;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
            line-height: 1.4;
        }

        .cover-tip .tip-song {
            word-break: break-word;
        }

        .cover-tip .tip-song b {
            color: var(--accent);
            font-weight: 700;
            margin-right: 6px;
        }

        .cover-tip .tip-in {
            font-size: 11px;
            color: var(--text-sub);
        }

        .cover-art:hover ~ .cover-tip.has-next {
            opacity: 1;
            transform: translateY(0);
        }

        /* 触屏无悬停:窄屏上气泡永不出现(下一首信息本就是桌面彩蛋) */
        @media (max-width: 768px) {
            .cover-tip {
                display: none;
            }
        }

        /* 旋转关键帧 */
        @keyframes spin-vinyl {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .info {
            flex: 1;
            min-width: 0;
            /* Flexbox 防止溢出的黄金法则 */
        }

        .info h2 {
            margin: 0 0 8px 0;
            font-size: 22px;
            /* 字号稍微收敛一点，显得更精致 */
            font-weight: 700;
            line-height: 1.4;

            /* 固定单行截断:歌名再长也不换行,播放窗口高度零抖动(完整歌名悬停可见) */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .info p {
            margin: 0;
            color: var(--accent);
            font-size: 16px;
            font-weight: 500;

            /* 歌手名字采用单行截断，超出变... */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* 控件区域 (巨大的播放按钮和音量) */
        .controls {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .play-btn {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            /* 👇 核心改动 1：半透明白色背景 + 磨砂玻璃滤镜 */
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            /* 兼容 Safari */
            /* 👇 核心改动 2：加一圈若隐若现的微光边框勾勒边缘 */
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: var(--text-main);
            /* 图标变成纯白色，在深色玻璃上更清晰 */
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        }

        .play-btn:hover {
            transform: scale(1.05);
            background: rgba(255, 255, 255, 0.15);
            /* 悬停时稍微变亮 */
            border-color: rgba(0, 255, 204, 0.5);
            /* 悬停时边框泛起青色微光！ */
            box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
        }

        .play-btn svg {
            width: 24px;
            height: 24px;
            fill: currentColor;
            /* 给图标加一点点投影，让它在玻璃内显得更立体 */
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
        }

        .volume-control {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
        }

        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 4px;
            /* 👇 初始狀態：左側 50% 是青色，右側是深灰色 */
            background: linear-gradient(to right, var(--accent) 50%, #333 50%);
            border-radius: 2px;
            outline: none;
            cursor: pointer;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            /* 👇 核心改动：把实心白变成玻璃质感的推子 */
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
            border: 2px solid rgba(255, 255, 255, 0.8);
            /* 纯白色的硬朗外圈 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
            transition: all 0.2s;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            background: var(--text-main);
            /* 摸上去时瞬间变实心白，提供操作确认感 */
            transform: scale(1.2);
            box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
        }

        /* 右侧：频道列表矩阵 (T2: 玻璃上再叠一层深色,保证列表文字对比度) */
        .deck-right {
            width: 300px;
            background: rgba(0, 0, 0, 0.28);
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
        }

        .deck-right-title {
            font-size: 12px;
            color: var(--text-sub);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 10px;
            padding-left: 10px;
        }

        .station-item {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 15px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid transparent;
        }

        .station-item:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .station-item.active {
            background: rgba(0, 255, 204, 0.1);
            border-color: rgba(0, 255, 204, 0.3);
        }

        .station-item-cover {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            background-size: cover;
            background-position: center;
        }

        .station-item-info h4 {
            margin: 0 0 4px 0;
            font-size: 14px;
            color: var(--text-main);
        }

        .station-item-info p {
            margin: 0;
            font-size: 12px;
            color: var(--text-sub);
        }

        /* --- 列表里的 FLAC 专属微型徽章 --- */
        .station-flac-badge {
            font-size: 9px;
            font-weight: 900;
            color: var(--bg-color);
            background-color: var(--accent);
            /* 赛博青色底 */
            padding: 1px 4px;
            border-radius: 3px;
            margin-left: 6px;
            vertical-align: middle;
            /* 保证和频道名字对齐 */
            letter-spacing: 0.5px;
            box-shadow: 0 0 6px rgba(0, 255, 204, 0.4);
            /* 微光溢出效果 */
            display: inline-block;
            transform: translateY(-1px);
            /* 视觉光学校准 */
        }

        /* --- L6: NEW 徽章(红色 = 时效属性,与青色 = 音质属性区分) --- */
        .station-new-badge {
            font-size: 9px;
            font-weight: 900;
            color: #ffffff;
            background-color: var(--danger);
            padding: 1px 4px;
            border-radius: 3px;
            margin-left: 6px;
            vertical-align: middle;
            letter-spacing: 0.5px;
            box-shadow: 0 0 6px rgba(255, 51, 102, 0.45);
            display: inline-block;
            transform: translateY(-1px);
            animation: new-badge-pulse 2s ease-in-out infinite;
        }

        @keyframes new-badge-pulse {
            0%, 100% { box-shadow: 0 0 6px rgba(255, 51, 102, 0.45); }
            50% { box-shadow: 0 0 12px rgba(255, 51, 102, 0.75); }
        }

        /* --- 自定义滚动条样式 (赛博硬件风) --- */
        .deck-right::-webkit-scrollbar {
            width: 6px;
            /* 滚动条瘦身 */
        }

        /* T8: 隐藏滚动条两端的默认箭头按钮(只留光杆) */
        .deck-right::-webkit-scrollbar-button {
            display: none;
        }

        .deck-right::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            /* 轨道变暗 */
            border-radius: 10px;
        }

        .deck-right::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
            /* 滑块默认半透明 */
            border-radius: 10px;
            transition: all 0.3s;
        }

        .deck-right::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
            /* 鼠标放上去时，亮起赛博朋克青色！ */
        }

        /* Firefox 兼容 */
        .deck-right {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.15) rgba(0, 0, 0, 0.3);
        }

        /* 隐藏原生 audio */
        audio {
            display: none;
        }

        /* 移动端适配 */
        @media (max-width: 768px) {

            /* 👇 1. 新增：修改 body 布局，消灭顶部巨大留白 */
            body {
                flex-direction: column;
                justify-content: flex-start;
                /* 不再强行居中，改为靠屏幕上方排列 */
                padding-top: 4vh;
                /* 顶部只留一点点呼吸空间 */
            }

            /* 👇 2. 修改：微调播放器外壳高度 */
            .radio-deck {
                flex-direction: column;
                height: 84vh;
                /* 给底部的留言板留出安全空间 */
                width: 92%;
            }

            /* --- 下面这部分保持你原来的样子不变 --- */
            .deck-left {
                padding: 25px 15px;
                border-right: none;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                /* 竖排后此块在上方:圆角改为上排一对(覆盖桌面横排的左侧一对) */
            }

            .now-playing {
                flex-direction: column;
                text-align: center;
                gap: 12px;
                margin-bottom: 20px;
            }

            .info {
                width: 100%;
                box-sizing: border-box;
            }

            .cover-art {
                width: 100px;
                height: 100px;
            }

            .cover-wrap {
                width: 100px;
                height: 100px;
            }

            .controls {
                justify-content: center;
            }

            .deck-right {
                width: 100%;
                flex: 1;
                padding: 15px;
                /* 竖排后此块在下方:圆角改为下排一对(覆盖桌面横排的右侧一对) */
                /* padding-bottom: 30px; */
                box-sizing: border-box;
            }

            /* --- 保持原样结束 --- */

            /* 👇 3. 新增：把留言板拉回正常的文档流，彻底解决重叠！ */
            .footer-contact {
                position: relative;
                bottom: auto;
                margin-top: 0px;
                padding-bottom: 0px;
            }
        }

        /* --- 底部联系区 (固定在屏幕最下方) --- */
        .footer-contact {
            position: absolute;
            bottom: 20px;
            width: 100%;
            text-align: center;
            font-size: 12px;
            letter-spacing: 1px;
        }

        .footer-contact span,
        .footer-contact a {
            color: var(--text-sub);
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .footer-contact span:hover,
        .footer-contact a:hover {
            color: var(--accent);
            text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
            transform: translateY(-2px);
        }

        /* 排除分隔符 | 的悬停动画 */
        .footer-contact .separator:hover {
            color: #999;
            text-shadow: none;
            transform: none;
        }
        .artalk.at-dark {
            --at-color-main: var(--accent) !important;
            /* 核心高亮色改為你的青色 */
            --at-color-bg: transparent !important;
            /* 背景透明，融入外殼 */
            --at-color-font: var(--text-main) !important;
            --at-color-meta: var(--text-sub) !important;
            --at-color-border: rgba(255, 255, 255, 0.15) !important;
            --at-color-bg-grey: rgba(0, 0, 0, 0.4) !important;
            /* 輸入框背景變暗 */
        }

        /* 發送按鈕發光效果 */
        .artalk .at-btn-submit {
            box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
            transition: all 0.3s;
        }

        .artalk .at-btn-submit:hover {
            box-shadow: 0 0 15px rgba(0, 255, 204, 0.6);
        }

        /* 使用内阴影(box-shadow)强行覆盖浏览器的默认高亮底色，并将文字改回白色 */
        .artalk input:-webkit-autofill,
        .artalk input:-webkit-autofill:hover,
        .artalk input:-webkit-autofill:focus,
        .artalk input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 30px #111419 inset !important;
            -webkit-text-fill-color: var(--text-main) !important;
            transition: background-color 5000s ease-in-out 0s;
        }

        .artalk input:focus,
        .artalk textarea:focus {
            border-color: var(--accent) !important;
            box-shadow: 0 0 8px rgba(0, 255, 204, 0.2) !important;
            outline: none !important;
        }

        /* ==========================================
           2. 隐藏“网址”输入框
           ========================================== */
        /* 直接让 name 属性为 link 的输入框消失 */
        .artalk input[name="link"] {
            display: none !important;
        }

        /* 隐藏后，让剩下的“昵称”和“邮箱”均匀平分空间 (避免留出空隙) */
        .artalk .atk-header {
            display: flex !important;
            gap: 10px;
        }

        .artalk input[name="nick"],
        .artalk input[name="email"] {
            flex: 1 !important;
        }

        .comments-modal-overlay {
            display: none;
            /* 默认隐藏！绝不干扰主界面 */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            /* 半透明黑色遮罩 */
            z-index: 9999;
            /* 保证弹窗在最顶层 */
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
            /* 背景模糊，增加高级感 */
        }

        .comments-modal-overlay.show {
            display: flex;
            /* 激活时显示 */
            animation: fadeIn 0.3s ease-out;
        }

        .comments-modal-content {
            background: var(--deck-bg);
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            /* 最高不超过屏幕 80% */
            overflow-y: auto;
            /* 内容多了可以滚动 */
            padding: 30px 20px;
            border-radius: 15px;
            border: 1px solid rgba(0, 255, 204, 0.2);
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
            position: relative;
        }

        /* 弹窗关闭按钮 */
        .close-modal-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            color: var(--text-sub);
            font-size: 20px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .close-modal-btn:hover {
            color: var(--danger);
        }

        .lyrics-modal-content .close-modal-btn {
            z-index: 3;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: scale(0.95);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* --- 为留言板弹窗添加赛博朋克滚动条 --- */
        .comments-modal-content::-webkit-scrollbar {
            width: 6px;
            /* 滚动条瘦身 */
        }

        .comments-modal-content::-webkit-scrollbar-button {
            display: none;
        }

        .comments-modal-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.3);
            /* 轨道变暗，融入背景 */
            border-radius: 10px;
        }

        .comments-modal-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.15);
            /* 滑块默认半透明 */
            border-radius: 10px;
        }

        .comments-modal-content::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
            /* 鼠标放上去时，亮起赛博朋克青色！ */
        }

        /* Firefox 浏览器的兼容写法 */
        .comments-modal-content {
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
        }

        .artalk .atk-copyright {
            display: none !important;
        }

        /* --- 音質切換徽章 --- */
        .quality-badge {
            font-size: 10px;
            font-weight: 800;
            padding: 3px 8px;
            border-radius: 4px;
            cursor: pointer;
            letter-spacing: 1px;
            transition: all 0.3s ease;
            user-select: none;
            border: 1px solid transparent;
            margin-top: 10px;
            display: inline-block;
        }

        /* MP3 狀態 (省流模式) - 灰色低調 */
        .quality-badge.quality-mp3 {
            color: var(--text-sub);
            border-color: rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.05);
        }

        /* FLAC 狀態 (無損模式) - 賽博青色發光 */
        .quality-badge.quality-flac {
            color: var(--bg-color);
            background: var(--accent);
            box-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
        }

        /* ==========================================
           🌟 全局 Toast 通知系统样式
           ========================================== */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            pointer-events: none;
            /* 让容器本身不阻挡点击 */
        }

        .toast {
            background: rgba(26, 29, 36, 0.85);
            /* 半透明黑 */
            border-left: 4px solid var(--accent);
            /* 左侧赛博青色高亮 */
            color: var(--text-main);
            padding: 12px 20px;
            border-radius: 6px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 255, 204, 0.1);
            font-size: 13px;
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            pointer-events: auto;
            /* 恢复通知本身的点击 */
            animation: slideInRight 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
        }

        .toast.fade-out {
            animation: slideOutRight 0.3s ease-in forwards;
        }

        @keyframes slideInRight {
            from {
                transform: translateX(120%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }

            to {
                transform: translateX(120%);
                opacity: 0;
            }
        }

        /* --- 缓冲状态动画 --- */
        .is-buffering .cover-art {
            animation-play-state: paused !important;
            /* 缓冲时唱片停转 */
            opacity: 0.5;
            box-shadow: 0 0 0 6px #111, 0 0 0 8px rgba(255, 51, 102, 0.5), 0 0 30px rgba(255, 51, 102, 0.8);
        }

        /* T3: 页面隐藏时黑胶停转(配合 JS 的频谱/歌词全停) */
        .is-hidden .cover-art {
            animation-play-state: paused !important;
        }

        .is-buffering .status-text {
            color: var(--accent) !important;
            animation: blink 1s infinite;
        }

        @keyframes blink {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }
        }

        /* T3+: 窄屏(手机)隐藏频谱 —— 频谱是桌面宽屏的装饰,窄屏上是纯发热源;
           用视口宽度而非触屏判定,触屏笔记本(有鼠标+大屏)不受影响 */
        @media (max-width: 768px) {
            .holo-spectrum {
                display: none;
            }
        }

        /* --- 沉浸式全息频谱背景 --- */
        .holo-spectrum {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 60%;
            /* 占据左侧面板下半部分 60% 的空间！极度宽敞！ */
            z-index: -1;
            /* 核心魔法：垫在所有按钮、文字的最下层 */
            pointer-events: none;
            /* 绝对不能阻挡鼠标点击播放按钮 */
            opacity: 0.3;
            /* 半透明，不喧宾夺主，极其高级 */
            /* 底部加一点渐变遮罩，让波浪从深渊里长出来 */
            mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
            -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        }

        /* ==========================================
           🎵 同步歌词 (L1)
           ========================================== */

        /* 环境歌词行:主面板歌名下方常驻当前句,点击展开完整歌词(仅在有歌词时可点) */
        .ambient-lyric {
            margin-top: 8px;
            min-height: 16px;
            font-size: 12px;
            color: var(--text-sub);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: color 0.3s, opacity 0.4s;
        }

        /* L2: 暂停冻结态,整行调暗 */
        .ambient-lyric.lyric-dim {
            opacity: 0.4;
        }

        .ambient-lyric.has-lyrics {
            cursor: pointer;
        }

        .ambient-lyric.has-lyrics:hover {
            color: var(--accent);
        }

        /* 歌词弹窗:复用留言板的遮罩层,内容区改为 flex 竖排(标题/滚动歌词/校准条) */
        .lyrics-modal-content {
            background: rgba(15, 17, 21, 0.25);
            /* 半透明,让底下的专辑图虚化层透出来 */
            width: 92%;
            max-width: 640px;
            height: 82vh;
            padding: 30px 20px 12px;
            border-radius: 15px;
            border: 1px solid rgba(0, 255, 204, 0.2);
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
            position: relative;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 专辑图虚化背景层:直接取当前频道的封面,放大+模糊避免边缘露底 */
        .lyrics-bg {
            position: absolute;
            inset: -40px;
            z-index: 0;
            background-size: cover;
            background-position: center;
            filter: blur(46px) saturate(1.25) brightness(0.6);
            transform: scale(1.15);
            transition: opacity 0.45s ease;
        }

        /* 暗色渐变罩:保证歌词文字在亮色封面上的可读性 */
        .lyrics-shade {
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(180deg, rgba(15, 17, 21, 0.5) 0%, rgba(15, 17, 21, 0.72) 100%);
        }

        /* 内容浮在背景层之上 */
        .lyrics-modal-content h3,
        #lyrics-song-artist,
        .lyrics-stage {
            position: relative;
            z-index: 2;
        }

        /* 歌词舞台:滚动区 + 悬浮校准轨的定位容器 */
        .lyrics-stage {
            flex: 1;
            display: flex;
            min-height: 0;
        }

        .lyrics-modal-content h3 {
            color: var(--text-main);
            font-size: 17px;
            margin: 0 40px 4px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #lyrics-song-artist {
            color: var(--text-sub);
            font-size: 13px;
            margin: 0 40px 16px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #lyrics-body {
            flex: 1;
            overflow-y: auto;
            scroll-behavior: smooth;
            text-align: center;
            padding: 20px 10px;
            /* 歌词自动跟随滚动,滚动条纯属视觉噪音,隐藏但保留滚动能力 */
            scrollbar-width: none;
            /* Firefox */
            /* 上下边缘渐隐,歌词像从深渊里浮出来 */
            mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
        }

        #lyrics-body::-webkit-scrollbar {
            display: none;
            /* Chrome/Safari/Edge */
        }

        .lyric-line {
            font-size: 15px;
            color: #e8f5f2;
            opacity: 0.38;
            padding: 7px 0;
            transition: color 0.3s, font-size 0.3s, opacity 0.3s, text-shadow 0.3s;
        }

        /* 距离当前行 ±1 行的"近邻"稍亮,形成近亮远暗的纵深 */
        .lyric-line.near {
            opacity: 0.66;
        }

        .lyric-line.active {
            color: var(--accent);
            font-size: 17px;
            font-weight: 700;
            opacity: 1;
            text-shadow: 0 0 12px rgba(0, 255, 204, 0.45), 0 1px 6px rgba(0, 0, 0, 0.6);
        }

        .lyric-empty {
            color: var(--text-sub);
            padding: 40px 10px;
            font-size: 14px;
            line-height: 2;
        }

        .lyric-empty small {
            font-size: 12px;
            opacity: 0.7;
        }

        .lyric-plain {
            white-space: pre-wrap;
            color: var(--text-sub);
            font-size: 14px;
            line-height: 2.1;
            text-align: center;
        }

        .lyric-plain-note {
            margin-top: 20px;
            font-size: 11px;
            opacity: 0.5;
            letter-spacing: 1px;
        }

        /* 校准轨:竖排三枚玻璃圆钮,鼠标进入歌词区才淡入(触屏设备常显半透明) */
        .lyrics-calib-rail {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 8px;
            z-index: 3;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        .lyrics-stage:hover .lyrics-calib-rail,
        .lyrics-calib-rail:focus-within {
            opacity: 1;
            pointer-events: auto;
        }

        /* 触屏没有 hover,常显但低调 */
        @media (hover: none) {
            .lyrics-calib-rail {
                opacity: 0.45;
                pointer-events: auto;
            }
        }

        .calib-btn {
            width: 32px;
            height: 32px;
            padding: 0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(15, 17, 21, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            cursor: pointer;
            transition: all 0.2s;
        }

        .calib-btn:hover {
            border-color: rgba(0, 255, 204, 0.5);
            background: rgba(15, 17, 21, 0.85);
            transform: scale(1.1);
        }

        .calib-btn svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: var(--accent);
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* 偏移反馈胶囊:调节时短暂浮现当前偏移量 */
        .lyrics-offset-pill {
            position: absolute;
            bottom: 14px;
            left: 50%;
            transform: translate(-50%, 8px);
            background: rgba(15, 17, 21, 0.75);
            border: 1px solid rgba(0, 255, 204, 0.3);
            color: var(--accent);
            font-size: 12px;
            padding: 6px 14px;
            border-radius: 999px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease, transform 0.25s ease;
            z-index: 3;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .lyrics-offset-pill.show {
            opacity: 1;
            transform: translate(-50%, 0);
        }

        @media (max-width: 768px) {
            .lyrics-modal-content {
                width: 94%;
                height: 88vh;
                padding: 22px 14px 10px;
            }

            .lyric-line {
                font-size: 14px;
                padding: 8px 0;
            }

            .lyric-line.active {
                font-size: 16px;
            }
        }

/* ==========================================
   🎨 T10: VS Code 伪装皮肤(神似版,仅桌面)
   body.vscode-skin 下整包覆写;纯叠加层,随时可切回
   ========================================== */

/* 骨架:固定全屏布局,原播放器隐藏 */
body.vscode-skin {
    display: block;
    overflow: hidden;
    background: #1e1e1e;
}

body.vscode-skin .radio-deck,
body.vscode-skin .footer-contact,
body.vscode-skin #ambient-bg {
    display: none !important;
}

.vs-shell {
    display: none;
}

body.vscode-skin .vs-shell {
    display: grid;
    grid-template-rows: 35px minmax(0, 1fr) 22px; /* minmax(0,..): 禁止内容撑爆行高,状态栏永不被推出 */
    grid-template-columns: 48px 220px 1fr;
    grid-template-areas:
        "titlebar titlebar titlebar"
        "activity sidebar editor"
        "statusbar statusbar statusbar";
    position: fixed;
    inset: 0;
    font-family: "Segoe UI", -apple-system, sans-serif;
    font-size: 13px;
    color: #cccccc;
    z-index: 9998;
}

/* --- 标题栏 --- */
.vs-titlebar {
    grid-area: titlebar;
    background: #3c3c3c;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 8px;
    font-size: 12px;
    color: #cccccc;
    -webkit-user-select: none;
    user-select: none;
}

.vs-titlebar .vs-logo {
    color: #0098ff;
    font-weight: 700;
    font-size: 15px;
}

.vs-titlebar .vs-menu {
    display: flex;
    gap: 14px;
    margin-left: 12px;
    color: #cccccc;
}

.vs-titlebar .vs-menu span:hover {
    color: #fff;
}

.vs-titlebar .vs-winsearch {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
    background: #2b2b2b;
    border: 1px solid #454545;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 11px;
    color: #8a8a8a;
    text-align: center;
}

.vs-titlebar .vs-windots {
    margin-left: auto;
    display: flex;
    gap: 22px;
    color: #cccccc;
    font-size: 12px;
}

/* T10: ✕ 悬停变红 —— Windows 关闭按钮的标志性反馈 */
.vs-titlebar .vs-windots .vs-close {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
}

.vs-titlebar .vs-windots .vs-close:hover {
    background: #e81123;
    color: #fff;
}

/* --- 活动栏 --- */
.vs-activity {
    grid-area: activity;
    background: #333333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 2px;
}

.vs-activity .vs-ico {
    width: 48px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #858585;
    font-size: 19px;
    position: relative;
    cursor: default;
}

.vs-activity .vs-ico.active {
    color: #fff;
}

.vs-activity .vs-ico.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #fff;
}

/* --- 侧边栏:文件树 --- */
.vs-sidebar {
    grid-area: sidebar;
    background: #252526;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 0;
    font-size: 13px;
}

.vs-sidebar .vs-side-title {
    padding: 4px 16px 8px;
    font-size: 11px;
    color: #bbbbbb;
    letter-spacing: 0.4px;
}

.vs-sidebar .vs-folder {
    padding: 3px 8px;
    color: #cccccc;
    font-weight: 500;
}

.vs-sidebar .vs-file {
    padding: 2px 8px 2px 24px;
    color: #c5c5c5;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vs-sidebar .vs-file:hover {
    background: #2a2d2e;
}

.vs-sidebar .vs-file.active {
    background: #04395e;
}

.vs-sidebar .vs-file .vs-ext {
    font-size: 10px;
    color: #858585;
}

.vs-sidebar .vs-file.playing .vs-ext {
    color: #0098ff;
}

/* --- 编辑器区:tab + "代码"歌词 --- */
.vs-editor {
    grid-area: editor;
    background: #1e1e1e;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0; /* T10: flex 收缩链,歌词内容不再撑爆布局 */
}

.vs-tabs {
    display: flex;
    background: #252526;
    height: 35px;
    flex-shrink: 0;
}

.vs-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    background: #2d2d2d;
    border-right: 1px solid #252526;
    font-size: 12.5px;
    color: #ffffff;
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
}

/* T11+: tab 文件名截断为 "xxx..." —— 长歌名不再撑宽 tab,完整名悬停可见 */
.vs-tab #vs-tab-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

.vs-tab .vs-tabclose {
    flex-shrink: 0;
}

.vs-tab .vs-tabclose {
    color: #8a8a8a;
    font-size: 13px;
    margin-left: 4px;
}

.vs-tab .vs-tabclose:hover {
    color: #fff;
    background: #3c3c3c;
    border-radius: 3px;
}

.vs-code {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0; /* T10: 收缩链关键一环 */
    font-family: Consolas, "Courier New", monospace;
    font-size: 14px;
    line-height: 1.65;
    padding: 10px 0;
}

.vs-lineno {
    color: #858585;
    text-align: right;
    padding: 0 14px 0 16px;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
}

.vs-codelyric {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow-y: auto;
    padding-right: 24px;
}

.vs-codelyric::-webkit-scrollbar {
    width: 14px;
}

.vs-codelyric::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 0;
}

.vs-codelyric .vs-ln {
    white-space: pre-wrap;
}

/* 歌词行:代码高亮风 — 注释灰/普通串色/当前行高亮块 */
.vs-codelyric .vs-ln.normal { color: #ce9178; }         /* 字符串橙 */
.vs-codelyric .vs-ln.meta   { color: #6a9955; }         /* 注释绿 */
.vs-codelyric .vs-ln.plain  { color: #9cdcfe; }         /* 变量蓝 */
.vs-codelyric .vs-ln.active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.08);
    display: block;
    margin: 0 -24px 0 -40px;
    padding: 0 24px 0 40px;
    border-left: 2px solid #ffd700;
}

/* --- 状态栏:播放控制融入 --- */
.vs-statusbar {
    grid-area: statusbar;
    background: #007acc;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 10px;
    gap: 4px;
    font-size: 12px;
    z-index: 9999;
    /* T11: 恒定单行 —— 音量条展开也不换行,歌名自动收缩 */
    flex-wrap: nowrap;
    overflow: hidden;
}

.vs-statusbar .vs-sbitem {
    flex-shrink: 0;
}

.vs-statusbar .vs-songinfo {
    flex-shrink: 1;
    min-width: 0;
}

.vs-statusbar .vs-sbitem {
    padding: 0 8px;
    height: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 0;
    -webkit-user-select: none;
    user-select: none;
}

.vs-statusbar button.vs-sbitem {
    border: none;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
}

.vs-statusbar button.vs-sbitem:hover {
    background: rgba(255, 255, 255, 0.15);
    outline: 1px solid rgba(255, 255, 255, 0.4);
}

.vs-statusbar .vs-sbgrow {
    flex: 1;
}

.vs-statusbar .vs-songinfo {
    color: #fff;
    font-weight: 500;
    /* 长歌名截断,状态栏恒定单行 */
    max-width: 40vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 22px;
}

.vs-statusbar .vs-prog {
    color: #fff;
    opacity: 0.95;
    font-family: Consolas, monospace;
}

/* 桌面限定:窄屏不提供伪装 */
@media (max-width: 768px) {
    body.vscode-skin .vs-shell {
        display: none;
    }

    body.vscode-skin {
        display: flex;
        overflow: hidden;
    }

    body.vscode-skin .radio-deck,
    body.vscode-skin .footer-contact,
    body.vscode-skin #ambient-bg {
        display: revert !important;
    }
}

/* ==========================================
   T10+: VS Code 皮肤二批细节(图标/面包屑/小地图/滚动条/行号联动)
   ========================================== */

/* --- 文件类型图标 --- */
.vs-file .vs-fico {
    font-family: Consolas, monospace;
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    flex-shrink: 0;
}

.vs-fico.fico-ts {
    color: #3178c6;
    background: rgba(49, 120, 198, 0.15);
}

.vs-fico.fico-md {
    color: #519aba;
    background: rgba(81, 154, 186, 0.15);
}

.vs-fico.fico-json {
    color: #cbcb41;
    background: rgba(203, 203, 65, 0.15);
    font-size: 10px;
}

.vs-file .vs-fname {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* T11+: 正在播放的频道文件 —— 文件名染青(git-changed 式状态色),
   持久显示,不随 tab 切换消失 */
.vs-file.playing .vs-fname {
    color: #4ec9b0;
}

.vs-file.playing .vs-fico {
    box-shadow: 0 0 5px rgba(78, 201, 176, 0.5);
}

/* hover 行操作图标(平时隐藏) */
.vs-file {
    position: relative;
}

.vs-file .vs-file-act {
    display: none;
    position: absolute;
    right: 6px;
    gap: 6px;
    background: #2a2d2e;
    padding: 0 4px;
}

.vs-file:hover .vs-file-act {
    display: flex;
}

.vs-file .vs-file-act span {
    color: #cccccc;
    font-size: 11px;
    cursor: pointer;
}

.vs-file .vs-file-act span:hover {
    color: #fff;
}

/* 树层级:根文件 / src·lyrics 子目录与内容缩进 */
.vs-tree-indent {
    padding-left: 14px;
}

.vs-folder.sub {
    padding-left: 24px;
}

/* --- 面包屑 --- */
.vs-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 18px;
    font-size: 12px;
    color: #a0a0a0;
    background: #1e1e1e;
    flex-shrink: 0;
}

.vs-breadcrumb .vs-sep {
    color: #6e6e6e;
}

/* --- 行号列:当前行高亮 --- */
.vs-lineno {
    overflow: hidden;
    flex-shrink: 0;
}

.vs-lineno .vs-no {
    color: #858585;
    text-align: right;
}

.vs-lineno .vs-no.active {
    color: #c6c6c6;
}

/* --- 当前歌词行:整行贯穿高亮(VS Code 当前行样式) --- */
.vs-codelyric .vs-ln.active {
    color: #ffd700;
    background: rgba(255, 215, 0, 0.07);
    display: block;
    margin: 0 -24px 0 -40px;
    padding: 0 24px 0 38px;
    border-left: 2px solid #ffd700;
    box-shadow: 0 0 22px 6px rgba(255, 215, 0, 0.05);
}

/* --- 小地图 --- */
.vs-minimap {
    width: 56px;
    flex-shrink: 0;
    background: #1e1e1e;
    border-left: 1px solid #2b2b2b;
    position: relative;
    overflow: hidden;
    padding: 4px 6px;
}

.vs-minimap .vs-mml {
    background: #4a4a4a;
    margin-bottom: 1px;
    border-radius: 1px;
    min-width: 6px;
}

.vs-minimap .vs-mml.act {
    background: rgba(255, 215, 0, 0.55);
}

.vs-minimap .vs-mmv {
    position: absolute;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

/* --- 编辑器滚动条:VS Code 宽条半透明风 --- */
.vs-codelyric::-webkit-scrollbar {
    width: 14px;
}

.vs-codelyric::-webkit-scrollbar-track {
    background: transparent;
}

.vs-codelyric::-webkit-scrollbar-thumb {
    background: rgba(121, 121, 121, 0.4);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}

.vs-codelyric::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 148, 148, 0.7);
    background-clip: content-box;
}

.vs-codelyric::-webkit-scrollbar-button {
    display: none;
}

/* --- 侧栏滚动条同款 --- */
.vs-sidebar::-webkit-scrollbar {
    width: 14px;
}

.vs-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.vs-sidebar::-webkit-scrollbar-thumb {
    background: rgba(121, 121, 121, 0.4);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}

.vs-sidebar::-webkit-scrollbar-button {
    display: none;
}

/* --- 状态栏远程指示(可点击断开=退出伪装) --- */
.vs-statusbar .vs-sbitem.vs-ssh {
    cursor: pointer;
}

.vs-statusbar .vs-sbitem.vs-ssh:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* --- T11: player.ts 代码区滚动条(与歌词区同款) --- */
.vs-codesrc::-webkit-scrollbar {
    width: 14px;
}

.vs-codesrc::-webkit-scrollbar-track {
    background: transparent;
}

.vs-codesrc::-webkit-scrollbar-thumb {
    background: rgba(121, 121, 121, 0.4);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 8px;
}

.vs-codesrc::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 148, 148, 0.7);
    background-clip: content-box;
}

.vs-codesrc::-webkit-scrollbar-button {
    display: none;
}

/* --- T11: 状态栏音量滑块(hover 展开) --- */
.vs-sbitem.vs-volwrap {
    position: relative;
    gap: 0;
}

#vs-volslider {
    width: 0;
    opacity: 0;
    transition: width 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
    margin-left: 0;
    cursor: pointer;
    height: 4px;
    /* T11: 自绘轨道(填充渐变由 JS 同步) + 圆形滑块,和主界面音量条同一视觉语言 */
    -webkit-appearance: none;
    appearance: none;
    border-radius: 2px;
    outline: none;
}

#vs-volslider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.vs-sbitem.vs-volwrap:hover #vs-volslider {
    width: 70px;
    opacity: 1;
    margin-left: 6px;
}

/* --- T11: 窄屏隐藏换肤入口(连同前面的分隔符) ---
   !important 是必须的:分隔符带内联 display:inline-block,
   内联样式压过一切选择器,普通的 display:none 赢不了它 */
@media (max-width: 768px) {
    #vscode-toggle,
    #sep-skin {
        display: none !important;
    }
}

/* --- T10+: 双 tab(当前/非当前) + 伪装源码页 --- */
.vs-tab.inactive {
    background: #252526;
    color: #969696;
}

.vs-tab.inactive:hover {
    color: #cccccc;
}

.vs-tab#vs-tab-lyric, .vs-tab#vs-tab-code {
    cursor: pointer;
}

/* 伪装源码页容器(与歌词区同布局) */
.vs-codesrc {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding-right: 24px;
}

/* 语法高亮色板(Dark+) */
.vs-codesrc .vs-k { color: #569cd6; }   /* 关键字蓝 */
.vs-codesrc .vs-s { color: #ce9178; }   /* 字符串橙 */
.vs-codesrc .vs-c { color: #6a9955; }   /* 注释绿 */
.vs-codesrc .vs-f { color: #dcdcaa; }   /* 函数黄 */
.vs-codesrc .vs-n { color: #b5cea8; }   /* 数字浅绿 */
.vs-codesrc .vs-p { color: #d4d4d4; }   /* 标点/正文 */

.vs-codesrc .vs-ln {
    white-space: pre; /* 保留 token 缩进,不被 HTML 空白折叠吃掉 */
}