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

.cover-player {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr) 140px;
    align-items: center;
    gap: 24px;
}
.cover-player-info,
.cover-player-transport,
.cover-player-volume {
    min-width: 0;
    width: 100%;
}
.cover-player-info { height: 80px; }
.cover-player-meta { min-width: 0; }
#nowPlayingTitle,
#nowPlayingArtist {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    max-width: 100%;
}
#nowPlayingTitle { line-height: 20px; }
#nowPlayingArtist { line-height: 16px; }
#nowPlayingNote {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}
#nowPlayingNote:empty { display: none; }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    border-radius: 9999px;
    outline: none;
    transition: background 0.15s;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 9999px;
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ec4899;
    cursor: pointer;
    border: none;
    margin-top: -4px; 
    transition: transform 0.1s ease, background-color 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    background: #f472b6;
}

input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 9999px;
    background: transparent;
}
input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: #ec4899;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.1s ease;
}
input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    background: #f472b6;
}

.scrollbar-none::-webkit-scrollbar {
    display: none !important;
}
.scrollbar-none {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}


body[data-page="cover"] {
    -webkit-user-select: none;
    user-select: none;
    cursor: default;
    caret-color: transparent;
}
#searchBar {
    -webkit-user-select: text;
    user-select: text;
    cursor: text;
    caret-color: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .cover-player { grid-template-columns: minmax(0, 1fr) 140px; }
    .cover-player-transport {
        grid-column: 1 / -1;
        grid-row: 2;
    }
    .cover-player-volume {
        grid-column: 2;
        grid-row: 1;
    }
}
@media (max-width: 767px) {
    .cover-player {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }
    .cover-playback-controls { gap: .5rem; }
    #shuffleBtn,
    #prevBtn,
    #playBtn,
    #nextBtn,
    #loopModeBtn,
    #muteBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }
    input[type="range"] {
        height: 24px;
        
        background-size: 100% 4px !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    #playlistContainer .cover-title,
    #playlistContainer .cover-details {
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        max-width: 100%;
    }
    .cover-note {
        display: block;
        margin-top: .25rem;
    }
    .cover-note-divider { display: none; }
}