body, html { height: 100%; margin: 0; font-family: 'Inter', sans-serif; background-color: #121212; color: #e0e0e0; }
.custom-css-1 { border-radius: 0 0 1rem 1rem; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.btn-primary { background-color: #6f42c1; border-color: #6f42c1; }
.btn-primary:hover { background-color: #5a379e; border-color: #5a379e; }
.form-control:focus, .form-range:focus { border-color: #6f42c180; box-shadow: 0 0 0 0.25rem #6f42c140; }
.player-artwork { width: 120px; height: 120px; border-radius: 0.75rem; box-shadow: 0 4px 15px rgba(0,0,0,0.5); object-fit: cover; margin: 0 auto 1rem; }
.player-controls .btn { width: 50px; height: 50px; }
.player-controls .btn-lg { width: 70px; height: 70px; }
.btn-repeat-active { background-color: #3a2265; color: #d3bcf3; border-color: #6f42c1; }
.playlist-artwork-sm { width: 45px; height: 45px; border-radius: 0.25rem; object-fit: cover; margin-right: 1rem; }

#lyrics-container { background: #1a1a1a; min-height: auto; max-height: 150px; overflow-y: auto; text-align: center; padding: 1rem 0; scroll-behavior: smooth; border-radius: 0.5rem; }
#lyrics-container::-webkit-scrollbar { display: none; }
#lyrics-container { -ms-overflow-style: none; scrollbar-width: none; }
.lyric-line { font-size: 14px; font-weight: 500; color: #8a939b; padding: 0.4rem; margin-bottom:0; border-radius: 0.5rem; transition: all 0.4s ease-in-out; cursor: pointer; }
.lyric-line:hover { background-color: #2b2b2b; color: #fff; }
.lyric-line.active { font-weight: 700; font-size: 14px; color: #ffffff; transform: scale(1.05); }

.align-items-center { padding: 12px; }
.list-group-item { font-size:14px; background-color: transparent; border-color: #2b2b2b; }
.list-group-item.active { background: #2a164f; padding: 12px; border: hidden; color: #fff; border-radius: 0.5rem; margin-bottom: 2px; }
.list-group-item.active .text-muted { color: #c5b3e6 !important; }
.list-group-item-action:hover, .list-group-item-action:focus { background: #1e1e1e; padding: 12px; border: hidden; color:#fff; border-radius: 0.5rem; }
.list-group-item-action:hover .text-muted, .list-group-item-action:focus .text-muted { color: #adb5bd !important; }

.main-sec { 
    height: 100%; 
    padding: 15px; 
    background: #121212;
    border: solid 1px #585d62; 
    border-radius: 1rem;
}
.volume-control input[type=range] { width: 70px; height: 4px; }
.volume-control i { cursor: pointer; width: 24px; text-align: center; color: #adb5bd !important; }

.play-count-badge { font-size: 0.75rem; background: #2b2b2b; padding: 2px 8px; border-radius: 12px; margin-top: 5px; display: inline-block; color: #adb5bd; }
.brainwave-btn { font-size: 0.8rem; border-radius: 10px 10px 0 0; border: 1px solid #6f42c1; color: #d3bcf3; background: #2a164f; transition: all 0.3s; }
.brainwave-btn.active { background: #6f42c1; color: #fff; box-shadow: 0 0 10px rgba(111, 66, 193, 0.5); animation: pulse-purple 2s infinite; }
.main-brainwave { position: fixed; bottom: 0; left: 0; right: 0; width: 100%; text-align: center; z-index: 99999; }
.premium-badge { font-size: 0.7rem; background: rgba(251, 191, 36, 0.15); color: #fbbf24; padding: 3px 8px; border-radius: 12px; border: 1px solid #fbbf24; }
#current-artist {
    display: none;
}
@keyframes pulse-purple { 0% { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(111, 66, 193, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 66, 193, 0); } }
@media(max-width:767px){ 
    .main-sec { padding:0; } 
    .card {
        border-radius: 0;
    }
}