* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #E8E8E8 0%, #D5D5D5 30%, #F0F0F0 60%, #E5E5E5 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    /* 添加光影效果 */
    box-shadow: inset 0 0 200px rgba(255, 255, 255, 0.3);
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ========== 耳机线 ========== */
.headphone-cable {
    position: absolute;
    top: -400px;
    left: 55%; /* 稍微向右移动，不在播放器中间但仍在播放器上 */
    transform: translateX(-50%);
    width: 20.12px;
    height: 600px; /* 增加总高度，使线材可以延伸到屏幕顶部 */
    z-index: 40; /* 在播放器后面 */
    pointer-events: all;
    cursor: pointer;
}

/* 耳机插头应该在播放器前面 */
.headphone-cable .cable-jack {
    z-index: 60; /* 插头在播放器前面 */
    position: relative;
}

.cable-segment {
    position: absolute;
    background: linear-gradient(90deg, #FFFFFF 27%, #CCCCCC 100%);
    border-radius: 2px;
}

/* 线材部分（最上面，白色/灰色） */
/* 新增的线材顶部延伸部分 */
.segment-0 {
    width: 8.44px;
    height: 400px; /* 足够长，延伸到屏幕顶部 */
    top: -400px; /* 从负值开始，向上延伸 */
    left: 5.84px; /* 836.84 - 831 = 5.84px */
    background: linear-gradient(90deg, #FFFFFF 36.06%, #BCBCBC 100%);
}

/* Rectangle 44 - 线材上部 */
.segment-1 {
    width: 8.44px;
    height: 80.5px;
    top: 0;
    left: 5.84px; /* 836.84 - 831 = 5.84px */
    background: linear-gradient(90deg, #FFFFFF 36.06%, #BCBCBC 100%);
}

/* Rectangle 45 - 线材中部 */
.segment-2 {
    width: 13.63px;
    height: 12.33px;
    top: 80.5px; /* 286.5 - 206 = 80.5px */
    left: 3.25px; /* 834.25 - 831 = 3.25px */
    background: linear-gradient(90deg, #FFFFFF 36.06%, #BCBCBC 100%);
}

/* Rectangle 46 - 线材下部（最宽） */
.segment-3 {
    width: 20.12px;
    height: 55.18px;
    top: 92.83px; /* 298.83 - 206 = 92.83px */
    left: 0; /* 831 - 831 = 0px */
    background: linear-gradient(90deg, #FFFFFF 36.06%, #BCBCBC 100%);
}

/* 橡胶头部分（中间，黄色，最粗） */
/* Rectangle 48 - 橡胶头上部 */
.segment-4 {
    width: 13.63px;
    height: 11.69px;
    top: 148.01px; /* 354.01 - 206 = 148.01px */
    left: 3.25px; /* 834.25 - 831 = 3.25px */
    background: linear-gradient(90deg, #FFF398 36.06%, #69642C 100%);
}

/* Rectangle 49 - 橡胶头中部 */
.segment-5 {
    width: 13.63px;
    height: 11.69px;
    top: 162.94px; /* 368.94 - 206 = 162.94px */
    left: 3.25px; /* 834.25 - 831 = 3.25px */
    background: linear-gradient(90deg, #FFF398 36.06%, #69642C 100%);
}

/* Rectangle 50 - 橡胶头下部 */
.segment-6 {
    width: 13.63px;
    height: 11.69px;
    top: 177.87px; /* 383.87 - 206 = 177.87px */
    left: 3.25px; /* 834.25 - 831 = 3.25px */
    background: linear-gradient(90deg, #FFF398 36.06%, #69642C 100%);
}

/* Rectangle 51 - 橡胶头底部 */
.segment-7 {
    width: 13.63px;
    height: 3.25px;
    top: 192.8px; /* 398.8 - 206 = 192.8px */
    left: 3.25px; /* 834.25 - 831 = 3.25px */
    background: linear-gradient(90deg, #FFF398 36.06%, #69642C 100%);
}

/* 黑色隔断矩形（连接橡胶头各部分，形成完整的金属柱状） */
.rubber-separator {
    position: absolute;
    width: 13.63px; /* 与橡胶头宽度一致 */
    left: 3.25px; /* 与橡胶头对齐 */
    background: linear-gradient(90deg, #6D6D6D 36.06%, #000000 100%);
    z-index: 3; /* 在黄色部分之上，形成隔断效果 */
    margin: 0; /* 确保没有边距 */
    padding: 0; /* 确保没有内边距 */
}

/* 第一个隔断（在segment-4和segment-5之间，填充间隙） */
.separator-1 {
    top: 159.7px; /* segment-4的底部：148.01 + 11.69 = 159.7px */
    height: 3.24px; /* 填充间隙：162.94 - 159.7 = 3.24px */
}

/* 第二个隔断（在segment-5和segment-6之间，填充间隙） */
.separator-2 {
    top: 174.63px; /* segment-5的底部：162.94 + 11.69 = 174.63px */
    height: 3.24px; /* 填充间隙：177.87 - 174.63 = 3.24px */
}

/* 第三个隔断（在segment-6和segment-7之间，填充间隙） */
.separator-3 {
    top: 189.56px; /* segment-6的底部：177.87 + 11.69 = 189.56px */
    height: 3.25px; /* 填充间隙：192.8 - 189.56 = 3.25px */
}

/* 金属接触部分（最下面，黑色和黄色） */
/* Rectangle 47 - 金属接触部分（黑色背景，作为隔断物） */
.segment-8 {
    width: 11.04px;
    height: 48.04px;
    top: 148.01px; /* 354.01 - 206 = 148.01px */
    left: 4.54px; /* 835.54 - 831 = 4.54px */
    background: linear-gradient(90deg, #6D6D6D 36.06%, #000000 100%);
    z-index: 1; /* 在黄色部分后面，作为隔断物 */
    display: none; /* 暂时隐藏，查看效果 */
}

/* 金属接触部分（最底部，近似圆形，由两个梯形构成） */
.cable-jack {
    position: absolute;
    top: 196.05px; /* 402.05 - 206 = 196.05px */
    left: 3.25px; /* 834.25 - 831 = 3.25px */
    width: 13.63px;
    height: 18.18px;
    z-index: 60; /* 插头在播放器前面 */
}

/* 梯形基础样式 */
.jack-trapezoid {
    position: absolute;
    width: 13.63px;
    height: 18.18px;
}

/* 灰色梯形（中间层，左侧倾斜，作为隔断物，形成圆形左侧） */
.jack-gray {
    background: linear-gradient(90deg, #6D6D6D 36.06%, #000000 100%);
    clip-path: polygon(0% 0%, 60% 0%, 50% 100%, 0% 100%);
    z-index: 61; /* 在黄色梯形之下，作为隔断物 */
    border-radius: 0 0 0 9px; /* 左下角圆角，模拟圆形 */
    display: none; /* 暂时隐藏，查看效果 */
}

/* 黄色梯形（最顶层，金属质感，形成圆形） */
.jack-yellow {
    background: linear-gradient(90deg, #FFF398 36.06%, #69642C 100%);
    z-index: 62; /* 最顶层，形成金属外露的质感效果 */
    box-shadow: 0 1px 2px rgba(255, 243, 152, 0.3); /* 添加金属光泽效果 */
}

/* 左侧黄色梯形（形成圆形左侧） */
.jack-yellow-left {
    clip-path: polygon(0% 0%, 60% 0%, 50% 100%, 0% 100%);
    border-radius: 0 0 0 9px; /* 左下角圆角，模拟圆形 */
}

/* 右侧黄色梯形（形成圆形右侧） */
.jack-yellow-right {
    clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 50% 100%);
    border-radius: 0 0 9px 0; /* 右下角圆角，模拟圆形 */
}

.headphone-cable.connected {
    /* 金属接触部分（segment-8, cable-jack）刚好插入播放器顶部 */
    /* 金属接触部分开始位置是148.01px（segment-8），总高度214.23px，所以金属部分从148.01px到214.23px */
    /* 播放器缩小到80%，视觉高度：517 * 0.8 = 413.6px，顶部位置：50vh - 413.6/2 = 50vh - 206.8px */
    /* 但由于transform scale不改变布局空间，播放器布局位置未变，需要调整插入位置 */
    /* 播放器顶部位置（布局）：50vh - 258px，缩小后视觉顶部：50vh - 206.8px */
    /* 调整：向下移动 (258 - 206.8) = 51.2px，使插入位置适配80%大小 */
    top: calc(50vh - 206.8px - 148.01px); /* 让金属接触部分刚好插入播放器（适配80%大小） */
    transition: top 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.headphone-cable:hover {
    filter: brightness(1.1);
}

.headphone-cable:active {
    filter: brightness(0.9);
}

/* ========== 播放器主体 ========== */
.player-container {
    position: relative;
    width: 337px;
    height: 517px;
    z-index: 50;
    /* 不裁剪拨盘和电源键 */
    overflow: visible;
    /* 缩小到80% */
    transform: scale(0.8);
    transform-origin: center center;
}

/* 播放器侧面层（增强立体感） */
.player-side-layer {
    position: absolute;
    top: 0; /* 顶部不露出 */
    left: -4px; /* 左侧露出4px */
    right: 0; /* 右侧不露出 */
    bottom: -4px; /* 底部露出4px */
    width: calc(100% + 4px); /* 宽度增加4px（仅左侧） */
    height: calc(100% + 4px); /* 高度增加4px（仅底部） */
    background: linear-gradient(135deg, 
        #E8E8E8 0%, 
        #F0F0F0 20%, 
        #F5F5F5 40%, 
        #E8E8E8 60%, 
        #E0E0E0 80%, 
        #D8D8D8 100%);
    border-radius: 10px; /* 与播放器相同的圆角 */
    z-index: -1; /* 在播放器下层 */
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2),
        0 4px 20px rgba(0, 0, 0, 0.15);
    pointer-events: none; /* 不阻挡交互 */
}

.player-body {
    width: 100%;
    height: 100%;
    background: linear-gradient(158.09deg, #E8E8E8 0%, #D5D5D5 30%, #C2C2C2 60%, #AFAFAF 100%);
    border: none;
    border-radius: 10px;
    box-shadow: 
        inset 0 1px 3px rgba(255, 255, 255, 0.5),
        inset 0 -1px 3px rgba(0, 0, 0, 0.2),
        -5px 5px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: 40; /* 确保播放器body在电源键上层 */
    isolation: isolate; /* 创建新的层叠上下文 */
}

/* 添加渐变边框，由下而上从黑到白 */
.player-body::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 10px;
    background: linear-gradient(to top, #000000 0%, #333333 25%, #666666 50%, #999999 75%, #CCCCCC 90%, #FFFFFF 100%);
    z-index: -1;
    pointer-events: none;
}

.player-body::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9px;
    background: linear-gradient(158.09deg, #E8E8E8 0%, #D5D5D5 30%, #C2C2C2 60%, #AFAFAF 100%);
    z-index: -1;
    pointer-events: none;
}

/* 覆盖层已移除 - 不再需要 */

/* 电源关闭时只影响显示屏，不影响整个播放器 */
.player-container.powered-off .display-screen {
    background: #000000; /* 变黑 */
    transition: background 0.5s ease;
}

.player-container.powered-off .display-content {
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 电源开启时，屏幕逐渐显示 */
.display-screen {
    transition: background 0.5s ease;
}

.display-content {
    transition: opacity 0.5s ease;
}

/* ========== 显示屏 ========== */
.display-screen {
    width: 293px;
    height: 110px; /* 增大高度，确保所有内容完整显示 */
    background: #333333;
    border: 2px solid #000000;
    border-radius: 5px;
    position: relative;
    margin-top: 5px; /* 向下移动屏幕 */
    margin-bottom: 15px; /* 增加下边距 */
    overflow: hidden;
}

.display-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px);
    pointer-events: none;
    z-index: 2;
}

.display-content {
    position: relative;
    padding: 10px 10px 10px 10px; /* 增加底部内边距，确保时间显示完整 */
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 1;
    gap: 4px; /* 增加间距避免重叠 */
    box-sizing: border-box; /* 确保padding包含在高度内 */
}

.battery-indicator {
    display: flex;
    gap: 2px;
    position: absolute;
    left: 10px;
    top: 8px;
}

.battery-cell {
    width: 6px;
    height: 6px;
    background: #FFFFFF;
    border-radius: 1px;
}

.battery-cell.empty {
    background: transparent;
    border: 1px solid #FFFFFF;
}

/* ========== 音量指示器 ========== */
.volume-indicator {
    display: flex;
    gap: 2px;
    position: absolute;
    right: 10px;
    top: 8px;
}

.volume-cell {
    width: 6px;
    height: 6px;
    background: #FFFFFF;
    border-radius: 1px;
}

.volume-cell.empty {
    background: transparent;
    border: 1px solid #FFFFFF;
}

/* 信号图标已移除 */

.track-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px; /* 减少上边距，让歌名向上移动5px */
    gap: 10px; /* 确保歌曲名称和数量之间有间距 */
    transform: translateY(-5px); /* 向上移动5px */
}

.track-name-wrapper {
    flex: 1;
    min-width: 0; /* 允许收缩 */
    overflow: hidden;
    position: relative;
    display: block;
}

.track-name {
    color: #FFFFFF;
    font-size: 14px;
    line-height: 17px;
    white-space: nowrap;
    display: inline-block;
    position: relative;
}

/* 歌曲名称滚动动画 - 向左滚动 */
@keyframes scrollText {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(0);
    }
    90% {
        transform: translateX(calc(-100% + var(--available-width, 200px)));
    }
    100% {
        transform: translateX(calc(-100% + var(--available-width, 200px)));
    }
}

/* 文字滚动动画 - 向左滚动 */
@keyframes scrollTextSimple {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(0);
    }
    90% {
        transform: translateX(var(--scroll-distance, -100px));
    }
    100% {
        transform: translateX(var(--scroll-distance, -100px));
    }
}

/* 如果文本不需要滚动，停止动画 */
.track-name-wrapper:not(.scrollable) .track-name {
    animation: none;
}

.track-name-wrapper:not(.scrollable) {
    text-overflow: ellipsis;
}

.track-name-wrapper.scrollable .track-name {
    animation: scrollTextSimple 15s linear infinite;
    padding-right: 10px; /* 留出滚动空间 */
    will-change: transform; /* 优化动画性能 */
}

.track-number {
    color: #FFFFFF;
    font-size: 12px;
    flex-shrink: 0; /* 防止被压缩 */
    min-width: 50px; /* 确保有足够空间显示 */
}

.time-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1px; /* 减少上边距，让时间显示向上移动5px */
    margin-bottom: 2px; /* 添加下边距，确保底部不被遮挡 */
    position: relative;
    padding: 0 5px; /* 给左右时间留出空间 */
    transform: translateY(-5px); /* 向上移动5px */
}

.current-time, .total-time {
    flex-shrink: 0; /* 防止被压缩 */
    min-width: 50px; /* 确保有足够空间 */
}

/* 屏幕进度条 */
.screen-progress-bar {
    position: absolute;
    left: 60px; /* 从左侧时间后开始 */
    right: 60px; /* 在右侧时间前结束 */
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
}

.screen-progress-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #FFFFFF;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0%;
    transition: left 0.1s linear;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}

.current-time, .total-time {
    color: #FFFFFF;
    font-size: 10px;
    line-height: 12px;
    padding-bottom: 1px; /* 添加一点底部内边距，确保文字完整显示 */
}

.progress-container {
    margin-top: 4px;
    position: relative;
}

.progress-bar {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1px;
    position: relative;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF6600 46.15%, #D35400 100%);
    border-radius: 0 4px 4px 0;
    width: 0%;
    transition: width 0.1s linear;
    display: none; /* 隐藏黄色进度条 */
}

/* ========== 喇叭口 ========== */
.speaker-grill {
    width: 293px; /* 与屏幕宽度一致 */
    height: 54px; /* 高度增加到两倍 */
    display: flex;
    gap: 2px; /* 间距 */
    margin: 12px 0; /* 调整边距 */
    align-self: flex-start; /* 左对齐 */
    margin-left: 0; /* 确保左对齐 */
    justify-content: space-between; /* 均匀分布 */
}

.grill-bar {
    flex: 1;
    min-width: 0; /* 允许收缩 */
    background: #000000;
    border: 2px solid #A2A2A2;
    border-radius: 4px; /* 增加一点小圆角 */
    height: 100%;
    /* 确保是竖直的长方形 */
    width: auto;
    max-width: 12px; /* 限制最大宽度，保持竖直长方形 */
    position: relative;
    overflow: hidden;
}

/* 添加防尘网点阵屏效果 */
.grill-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 点阵屏效果：使用圆点图案 */
    background-image: 
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 0.5px, transparent 0.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.1) 0.5px, transparent 0.5px);
    background-size: 4px 4px, 6px 6px; /* 两种不同大小的点阵 */
    background-position: 0 0, 2px 2px; /* 错位排列，形成更丰富的点阵效果 */
    pointer-events: none;
    z-index: 3; /* 在光柱之上，形成防尘网效果 */
}

/* 波形指示器（方形LED灯珠效果，在防尘网之后发光） */
.wave-indicator {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px; /* 更小的方形LED灯珠 */
    height: 0%;
    background: rgba(120, 120, 120, 0.4); /* 更暗的颜色，看起来距离很远 */
    transition: height 0.15s ease-out;
    z-index: 0; /* 在防尘网之后 */
    border-radius: 0; /* 方形，无圆角 */
    /* LED灯珠效果：不连续的方形点状光柱 */
    background-image: 
        repeating-linear-gradient(to top, 
            rgba(150, 150, 150, 0.5) 0px, 
            rgba(150, 150, 150, 0.5) 2px, 
            transparent 2px, 
            transparent 4px);
    box-shadow: 0 0 1px rgba(200, 200, 200, 0.2); /* 更暗的LED发光效果 */
}

/* ========== 碟片区域 ========== */
.disc-container {
    width: 220px; /* 缩小碟片 */
    height: 220px;
    position: relative;
    margin: 15px 0; /* 减少边距 */
    /* 确保是正圆形 */
    aspect-ratio: 1;
}

.disc-outer {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    background: linear-gradient(90deg, #F2F2F2 0%, #D7D7D7 100%);
    border: 2px solid #CCCCCC;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
    /* 确保是正圆形 */
    aspect-ratio: 1;
}

.disc-inner {
    width: 165px; /* 按比例缩小 */
    height: 165px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #353535;
    display: flex;
    align-items: center;
    justify-content: center;
}

.disc-center {
    width: 55px; /* 按比例缩小 */
    height: 55px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.disc-text {
    position: absolute;
    z-index: 2;
    transform-origin: center center;
    top: 50%;
    left: 50%;
    width: 140px; /* 按比例缩小 */
    height: 140px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 使用SVG文本路径实现环绕效果 */
.disc-text svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.disc-text svg text {
    fill: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
}

.disc-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%; /* 确保是圆形 */
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: all; /* 允许交互 */
    z-index: 3;
    cursor: grab;
}

.disc-glass:active {
    cursor: grabbing;
}

.disc-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    background: #FF6600;
    border-radius: 50%;
    top: 50%;
    right: 15px; /* 从20px改为15px，向外环移动5px */
    transform: translateY(-50%);
    box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.25);
    z-index: 4;
}

.disc-outer.rotating {
    animation: discRotate 10s linear infinite;
}

.disc-outer.rotating.paused {
    animation-play-state: paused;
}

.disc-text.rotating {
    animation: discTextRotate 10s linear infinite;
}

.disc-text.rotating.paused {
    animation-play-state: paused;
}

@keyframes discTextRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes discRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ========== 拨盘控制已移除，使用碟片外壳代替 ========== */

/* ========== 按键区域 ========== */
.buttons-container {
    display: flex;
    gap: 8px;
    margin-top: 5px; /* 恢复正常的margin */
    align-items: center;
    width: 100%;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 297px; /* 确保不超出播放器宽度 */
    transform: translateY(-10px); /* 向上移动10px，不影响布局 */
}

.control-btn {
    flex: 1;
    min-width: 0;
    height: 16px;
    background: linear-gradient(135deg, #E8E8E8 0%, #D0D0D0 50%, #B8B8B8 100%);
    border: 1px solid #A0A0A0;
    border-radius: 4px;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: all 0.1s ease;
}

.control-btn svg {
    width: 12px;
    height: 12px;
    color: #333;
    pointer-events: none;
    flex-shrink: 0;
}

.control-btn:active {
    transform: translateY(1px);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #B8B8B8 0%, #A0A0A0 50%, #888888 100%);
    border-color: #888888;
}

/* 音量按键按下时保持旋转和定位 */
.volume-down.volume-btn-positioned:active,
.volume-up.volume-btn-positioned:active {
    transform: rotate(-45deg) translateY(1px);
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 按钮大小统一，使用flex布局自适应 */
.play-pause-btn,
.next-btn,
.volume-down,
.volume-up {
    flex: 1;
    min-width: 0;
}

/* 音量按键逆时针旋转45度 */
.volume-down,
.volume-up {
    transform: rotate(-45deg);
}

/* 音量按键定位在转盘右下角 */
.volume-btn-positioned {
    position: absolute;
    right: -45px; /* 向右平移，避免与外壳拨盘重叠 */
    bottom: 0;
    width: 50px;
    height: 16px; /* 与其他按钮一致的高度 */
    z-index: 10;
    flex: none; /* 移除flex影响 */
}

/* 音量减在音量加上方，相距10px */
.volume-down.volume-btn-positioned {
    bottom: 20px; /* 音量加在底部，音量减在上方10px处（再下移10px：从30px改为20px） */
}

.volume-up.volume-btn-positioned {
    bottom: -20px; /* 音量加在底部（再下移10px：从-10px改为-20px） */
}

/* 播放/暂停按钮同时显示两个图标 */
.play-pause-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-pause-btn .play-icon,
.play-pause-btn .pause-icon {
    position: absolute;
    width: 12px;
    height: 12px;
    color: #333;
    pointer-events: none;
}

.play-pause-btn .play-icon {
    left: calc(50% - 8px);
}

.play-pause-btn .pause-icon {
    right: calc(50% - 8px);
}

/* ========== 电源键 ========== */
#powerBtn {
    position: absolute;
    right: -10px !important; /* 向左移动，让左侧部分藏在播放器下 */
    top: 30% !important; /* 向上移动，不在中心位置 */
    transform: translateY(-50%) !important;
    width: 10px !important; /* 缩小到原来的2/3 */
    height: 60px !important;
    background-color: #FF6600 !important; /* 开机状态：橙色 - 强制设置 */
    border: 1px solid #D35400 !important;
    border-radius: 0 4px 4px 0 !important; /* 只保留右侧圆角 */
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 0 !important;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        1px 0 0 rgba(255, 255, 255, 0.2) !important; /* 移除下层阴影 */
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
    z-index: 30 !important; /* 提高z-index，确保在覆盖层上层显示 */
}

.power-btn {
    position: absolute;
    right: -10px;
    top: 30%;
    transform: translateY(-50%);
    width: 10px; /* 缩小到原来的2/3 */
    height: 60px;
    background-color: #FF6600 !important;
    border: 1px solid #D35400 !important;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.3),
        1px 0 0 rgba(255, 255, 255, 0.2); /* 移除下层阴影 */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    z-index: 30; /* 提高z-index，确保在覆盖层上层显示 */
}

/* 电源键按下效果 - 开机状态 */
#powerBtn:not(.powered-off):active {
    transform: translateY(-50%) translateX(-4px) !important; /* 向左移动，模拟按下效果 */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        -2px 0 4px rgba(0,0,0,0.3) !important;
    background-color: #FF6600 !important; /* 按下时保持橙色 */
    border-color: #D35400 !important;
}

.power-btn:not(.powered-off):active {
    transform: translateY(-50%) translateX(-4px); /* 向左移动，模拟按下效果 */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        -2px 0 4px rgba(0,0,0,0.3);
    background-color: #FF6600 !important; /* 按下时保持橙色 */
    border-color: #D35400 !important;
}

/* 电源键关闭状态：白色 */
#powerBtn.powered-off {
    background-color: #FFFFFF !important; /* 关闭时用白色 - 强制设置 */
    border-color: #CCCCCC !important;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.1),
        1px 0 0 rgba(255, 255, 255, 0.3) !important; /* 移除下层阴影 */
}

.power-btn.powered-off {
    background-color: #FFFFFF !important;
    border-color: #CCCCCC !important;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.1),
        1px 0 0 rgba(255, 255, 255, 0.3); /* 移除下层阴影 */
}

/* 电源键按下效果 - 关闭状态 */
#powerBtn.powered-off:active {
    transform: translateY(-50%) translateX(-4px) !important; /* 向左移动，模拟按下效果 */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        -2px 0 4px rgba(0,0,0,0.2) !important;
    background-color: #FFFFFF !important; /* 关闭状态按下时保持白色 */
    border-color: #CCCCCC !important;
}

.power-btn.powered-off:active {
    transform: translateY(-50%) translateX(-4px); /* 向左移动，模拟按下效果 */
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.2),
        -2px 0 4px rgba(0,0,0,0.2);
    background-color: #FFFFFF !important; /* 关闭状态按下时保持白色 */
    border-color: #CCCCCC !important;
}

/* ========== 品牌信息 ========== */
.brand-info {
    margin-top: 15px; /* 恢复正常的margin */
    text-align: left; /* 左对齐，与按键左侧对齐 */
    width: 100%;
    max-width: 297px; /* 与按键容器相同的最大宽度 */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    transform: translateY(-10px); /* 向上移动10px，不影响布局 */
}

.brand-name {
    font-size: 12px;
    color: #A3A3A3;
    text-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

.brand-slogan {
    font-size: 12px;
    color: #808080; /* 变深，提高可读性 */
}

/* ========== 碟片管理 ========== */
.disc-manager {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 174px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.disc-manager:not(.expanded) .disc-list-container {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 10px;
}

.disc-manager.expanded .disc-list-container {
    max-height: 500px;
    opacity: 1;
    padding: 10px;
}

.manager-toggle {
    width: 100%;
    height: 55px;
    background: linear-gradient(135deg, #666666 0%, #333333 100%);
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.35);
    transition: all 0.2s ease;
    margin-bottom: 10px;
}

.manager-toggle:active {
    transform: translateY(1px);
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.35);
}

.toggle-icon {
    width: 10px;
    height: 10px;
    transition: transform 0.3s ease;
}

.disc-manager.expanded .toggle-icon {
    transform: rotate(180deg);
}

.disc-list-container {
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #333333;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.35);
    transition: max-height 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.5s ease;
}

.disc-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.disc-item {
    width: 136px;
    height: 136px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin: 0 auto;
}

.disc-item:hover {
    transform: scale(1.1);
}

.disc-item.active {
    transform: scale(1.15);
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.5);
}

.disc-item-visual {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(90deg, #F2F2F2 0%, #D7D7D7 100%);
    border: 2px solid #CCCCCC;
    position: relative;
    overflow: hidden;
}

.disc-item-inner {
    width: 75%;
    height: 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #353535;
}

.disc-item-center {
    width: 30%;
    height: 30%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #FFFFFF;
}

.disc-item-name {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    color: #FFFFFF;
    font-size: 14px;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

/* ========== 动态歌词 ========== */
.lyrics-container {
    display: none; /* 歌词视图已移除 */
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: 412px;
    height: 642px;
    overflow: hidden;
    perspective: 1000px;
}

.lyrics-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lyric-line {
    font-size: 20px;
    line-height: 36px;
    color: #999999;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
    transform: translateZ(0);
}

.lyric-line.active {
    color: #FF6600;
    font-weight: 700;
    font-size: 24px;
    transform: translateZ(50px) scale(1.1);
}

.lyric-line.past {
    color: #666666;
    transform: translateZ(-20px) scale(0.9);
}

/* ========== 文件夹选择 ========== */
.folder-selector {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.select-folder-btn {
    padding: 12px 24px;
    background: linear-gradient(135deg, #FF6600 0%, #D35400 100%);
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
    transition: all 0.3s ease;
}

.select-folder-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
}

.select-folder-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(255, 102, 0, 0.3);
}

/* ========== 滚动条样式 ========== */
.disc-list-container::-webkit-scrollbar,
.lyrics-content::-webkit-scrollbar {
    width: 6px;
}

.disc-list-container::-webkit-scrollbar-track,
.lyrics-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.disc-list-container::-webkit-scrollbar-thumb,
.lyrics-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.disc-list-container::-webkit-scrollbar-thumb:hover,
.lyrics-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* ========== 响应式调整 ========== */
@media (max-width: 1400px) {
    .lyrics-container {
        width: 350px;
        height: 500px;
    }
    
    .disc-manager {
        right: 30px;
    }
}

@media (max-width: 1200px) {
    .lyrics-container {
        display: none;
    }
}