/* 全局设置 */
body {
    background-color: #f9f5fc;
    font-family: 'Nunito', 'M PLUS Rounded 1c', sans-serif;
    color: #4a3d54;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* 去除所有按钮默认的丑黑框 */
button {
    outline: none;
    border: none;
}

.music-card {
    background: white;
    border-radius: 30px;
    padding: 35px 30px;
    width: 90%;
    max-width: 380px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(160, 100, 220, 0.12);
}

.song-name {
    margin: 10px 0 5px 0;
    font-size: 22px;
    color: #6a4a9c;
    font-weight: 700;
}

.artist-name {
    font-size: 14px;
    color: #9980b3;
    margin-top: 0;
    margin-bottom: 20px;
}

.avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    box-shadow: 0 10px 25px rgba(160, 100, 220, 0.25);
    border: 4px solid #fff;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin { animation: spin 15s linear infinite; }
.paused { animation-play-state: paused; }

.fade-transition { transition: opacity 0.4s ease; }
.fade-out { opacity: 0; }

.progress-container {
    background: #f1ebf7;
    border-radius: 9999px;
    cursor: pointer;
    margin: 20px 0;
    height: 10px;
    width: 100%;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.04); 
}
.progress {
    background: linear-gradient(135deg, #c4a1eb, #a578d6);
    border-radius: 9999px;
    height: 100%;
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 3px 10px rgba(177, 139, 214, 0.5);
}

/* ===== 核心修复：按钮控制区 ===== */
.controls-main {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px; 
    margin-bottom: 20px;
}

/* 上一首/下一首：Q弹的正圆形 */
.circle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #ebdff7;
    color: #835eb5;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(160, 100, 220, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.circle-btn:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 20px rgba(160, 100, 220, 0.3); }
.circle-btn:active { transform: translateY(1px) scale(0.95); }

/* 播放键：圆润的大胶囊 */
.play-btn {
    background-color: #a578d6;
    color: white;
    padding: 14px 40px;
    font-size: 16px;
    font-family: inherit;
    font-weight: 700;
    border-radius: 9999px; /* 胶囊形状 */
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(165, 120, 214, 0.4); /* 果冻阴影 */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    gap: 8px; /* 图标和文字的间距 */
}
.play-btn:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(165, 120, 214, 0.6); }
.play-btn:active { transform: translateY(1px); }

.controls-sub {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 模式/歌单键：清爽的浅色小胶囊 */
.sub-btn {
    background-color: #fcfaff;
    color: #9980b3;
    border: 1px solid #efe6f7;
    padding: 10px 22px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 700;
    border-radius: 9999px; /* 胶囊形状 */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(160, 100, 220, 0.08);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sub-btn:hover { background-color: #f4eaff; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(160, 100, 220, 0.15); }
.sub-btn:active { transform: translateY(1px); }

/* 歌单抽屉 */
.playlist-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.playlist-box {
    margin-top: 15px;
    background: #faf7fd;
    border-radius: 20px;
    padding: 15px;
    max-height: 200px; 
    overflow-y: auto;
    box-shadow: inset 0 4px 10px rgba(160, 100, 220, 0.05);
    text-align: left;
}
#playlist-list { list-style: none; padding: 0; margin: 0; }
#playlist-list li {
    padding: 12px; border-bottom: 1px dashed #efe6f7;
    cursor: pointer; border-radius: 12px; font-size: 14px; color: #6a4a9c; transition: all 0.2s ease;
}
#playlist-list li:hover { background-color: #f1ebf7; transform: translateX(5px); }
.playlist-box::-webkit-scrollbar { width: 6px; }
.playlist-box::-webkit-scrollbar-thumb { background: #d4bced; border-radius: 10px; }