/* 自訂進度條和音量條樣式 */
input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #4a5568; /* gray-700 */
    border-radius: 5px;
}

input[type=range]::-webkit-slider-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
    box-shadow: 0 0 5px rgba(192, 132, 252, 0.7);
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #6b46c1; /* purple-700 */
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #4a5568;
    border-radius: 5px;
}

input[type=range]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    border: none;
}

.song-item.active {
    background-color: #4a5568; /* bg-gray-700 */
    color: #c084fc; /* text-purple-400 */
}

.player-btn {
    color: #d1d5db; /* text-gray-300 */
    transition: color 0.2s ease-in-out;
}

.player-btn:hover {
    color: #ffffff;
}

/* 捲軸樣式 */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #2d3748; /* bg-gray-800 */
}
::-webkit-scrollbar-thumb {
  background: #4a5568; /* bg-gray-700 */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #718096; /* bg-gray-600 */
}

/* 現代化強調效果 */
.song-item:hover {
    transform: translateY(-1px);
}
.song-item.active {
    box-shadow: 0 6px 20px -8px rgba(192, 132, 252, 0.35);
}