/* Beautiful Audio Player Styles */
:root {
    --bap-primary: #6366f1;
    --bap-primary-hover: #4f46e5;
    --bap-bg: #1e1e2f;
    --bap-panel: #2a2a40;
    --bap-text: #f8fafc;
    --bap-text-muted: #94a3b8;
    --bap-border: #334155;
}

.bap-player-container {
    font-family: 'Inter', sans-serif;
    background: var(--bap-bg);
    border-radius: 24px;
    padding: 24px;
    color: var(--bap-text);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    max-width: 400px;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
}

.bap-player-container::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 60%);
    z-index: 0; pointer-events: none;
}

.bap-player-wrapper {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
}

.bap-album-art {
    width: 180px; height: 180px; border-radius: 50%;
    background: linear-gradient(135deg, #ff7eb3, #ff758c, #6366f1);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 24px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    position: relative;
}

.bap-vinyl-record {
    width: 160px; height: 160px; border-radius: 50%;
    background: #111; border: 4px solid #333;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.5s linear;
}

.bap-album-art.playing .bap-vinyl-record {
    animation: spin 4s linear infinite;
}

@keyframes spin { 100% { transform: rotate(360deg); } }

.bap-vinyl-center {
    width: 50px; height: 50px; background: var(--bap-primary);
    border-radius: 50%; border: 2px solid #222; position: relative;
}

.bap-vinyl-center::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 12px; height: 12px;
    background: #fff; border-radius: 50%;
}

.bap-player-controls { width: 100%; }

.bap-track-info { text-align: center; margin-bottom: 20px; }

.bap-current-title {
    margin: 0; font-size: 1.25rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bap-progress-container {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}

.bap-time { font-size: 0.75rem; color: var(--bap-text-muted); min-width: 35px; }

.bap-progress-bar {
    -webkit-appearance: none; width: 100%; height: 6px;
    background: var(--bap-border); border-radius: 4px; outline: none; cursor: pointer;
}

.bap-progress-bar::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bap-primary); cursor: pointer; box-shadow: 0 0 10px var(--bap-primary);
}

.bap-buttons { display: flex; justify-content: center; align-items: center; gap: 24px; }

.bap-btn {
    background: none; border: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}

.bap-btn svg { fill: var(--bap-text); width: 28px; height: 28px; transition: fill 0.2s; }
.bap-btn:hover svg { fill: var(--bap-primary); }

.bap-play {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--bap-primary); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.bap-play svg { fill: #fff; width: 32px; height: 32px; }
.bap-play:hover { background: var(--bap-primary-hover); transform: scale(1.05); }

.bap-playlist {
    margin-top: 30px; border-top: 1px solid var(--bap-border);
    padding-top: 20px; position: relative; z-index: 1;
}

.bap-playlist-title {
    font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--bap-text-muted); margin: 0 0 15px 0;
}

.bap-track-list {
    list-style: none; padding: 0; margin: 0;
    max-height: 200px; overflow-y: auto;
}

.bap-track-item {
    display: flex; align-items: center; padding: 10px 12px; border-radius: 8px;
    cursor: pointer; transition: background 0.2s; margin-bottom: 4px;
}

.bap-track-item:hover { background: var(--bap-panel); }
.bap-track-number { font-size: 0.8rem; color: var(--bap-text-muted); width: 24px; }
.bap-track-name { flex: 1; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bap-track-playing-icon { display: none; }
.bap-track-playing-icon svg { fill: var(--bap-primary); width: 20px; height: 20px; }

.bap-track-item.active { background: var(--bap-panel); color: var(--bap-primary); }
.bap-track-item.active .bap-track-number { display: none; }
.bap-track-item.active .bap-track-playing-icon { display: block; }