/* 基础样式重置 */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* 播放器主容器 */
.music-player { display: flex; align-items: center; width: 100%; height: 100px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; margin: 20px 0; }

/* 左侧唱片区域 */
.album-cover { width: 100px; height: 100px; position: relative; cursor: pointer; flex-shrink: 0; padding: 10px; }
.album-cover img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.album-cover::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background-color: #ffffff; border-radius: 50%; z-index: 1; }
.album-cover img.rotate { animation: spin 20s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 右侧控制区域 */
.player-controls { flex-grow: 1; height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; overflow: hidden; }
.info-controls-row { display: flex; justify-content: space-between; align-items: center; width: 100%; }

/* 歌曲信息 */
.song-info { min-width: 0; flex-shrink: 1; margin-right: 15px; }
.song-title { font-size: 16px; font-weight: 500; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-artist { font-size: 13px; color: #6e6e73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 进度条 */
.progress-container { width: 100%; height: 4px; background-color: #e2e2e7; border-radius: 2px; position: relative; cursor: pointer; }
.progress-bar { height: 100%; background-color: #0071e3; border-radius: 2px; width: 0%; position: relative; }
.progress-handle { position: absolute; right: -7px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-color: #0071e3; border-radius: 50%; opacity: 0; transition: opacity 0.2s ease; }
.progress-container:hover .progress-handle { opacity: 1; }

/* 控制按钮区域 */
.controls { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.play-pause-btn { width: 24px; height: 24px; cursor: pointer; color: #1d1d1f; }
.icon { width: 100%; height: 100%; }

/* 音量按钮样式 */
.volume-btn { width: 24px; height: 24px; cursor: pointer; color: #1d1d1f; transition: color 0.2s ease; }
.volume-btn.muted { color: #aaaaaa; }

/* 控制显示哪个音量图标 */
.volume-btn .volume-unmuted-icon { display: block; }
.volume-btn .volume-muted-icon { display: none; }
.volume-btn.muted .volume-unmuted-icon { display: none; }
.volume-btn.muted .volume-muted-icon { display: block; }