/* 播放列表组件专属样式 */

.playlist {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 60vh;
    overflow-y: auto;
    transition: background 0.3s, box-shadow 0.3s;
}

.playlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.3s;
    background: transparent;
    opacity: 1;
    will-change: background, box-shadow, transform, opacity;
}
.playlist-item.active {
    background: linear-gradient(90deg, #fff 60%, #ffeaea 100%);
    box-shadow: 0 2px 8px rgba(194,12,12,0.08);
    transform: scale(1.03);
    opacity: 1;
}
.playlist-item:hover:not(.active) {
    background: #f8f8f8;
    transform: scale(1.01);
}
.track-info h4 {
    font-size: 1.1rem;
    color: #C20C0C;
    margin-bottom: 0.2rem;
    transition: color 0.2s;
}
.track-info p {
    color: #666;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.fav-btn {
    background: none;
    border: none;
    color: #C20C0C;
    font-size: 1.2rem;
    cursor: pointer;
    margin-left: 0.8rem;
    transition: color 0.2s, transform 0.2s;
    outline: none;
    will-change: color, transform;
}
.fav-btn .fa-heart-o {
    color: #bbb;
    transition: color 0.2s;
}
.fav-btn .fa-heart {
    color: #C20C0C;
    text-shadow: 0 2px 8px rgba(194,12,12,0.10);
    animation: fav-pop 0.3s;
}
.fav-btn:active {
    color: #ff5e62;
    transform: scale(1.2);
}
@keyframes fav-pop {
    0% { transform: scale(1); }
    60% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.playlist-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}
.playlist-actions button {
    background: none;
    border: none;
    color: #C20C0C;
    font-size: 1.2rem;
    cursor: pointer;
    border-radius: 50%;
    padding: 0.3rem 0.5rem;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.playlist-actions button:hover {
    background: #ffeaea;
    color: #ff5e62;
    transform: scale(1.1);
}