.mini-player { position: fixed; bottom: 0; left: 0; width: 100%; background-color: rgba(51, 51, 51, 0.95); z-index: 999; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2); transform: translateY(100%); transition: transform 0.3s ease} .mini-player.active { transform: translateY(0)} .player-content { display: flex; align-items: center; padding: 1rem 0} .player-artwork { width: 50px; height: 50px; border-radius: 4px; overflow: hidden; margin-right: 1.5rem; position: relative} .player-artwork::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../images/pattern-overlay-small.png'); background-size: cover; opacity: 0.2; mix-blend-mode: overlay} .player-artwork img { width: 100%; height: 100%; object-fit: cover} .player-info { flex-grow: 1; margin-right: 2rem} .track-title { font-size: 1.6rem; font-weight: 600; color: #fff; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px} .track-artist { font-size: 1.2rem; color: rgba(255, 255, 255, 0.7)} .player-controls { display: flex; align-items: center; gap: 1.5rem; margin-right: 2rem} .player-btn { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; transition: all 0.2s ease} .player-btn:hover { color: var(--color-secondary); transform: scale(1.1)} .play-btn { width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-secondary); display: flex; align-items: center; justify-content: center} .play-btn:hover { background-color: var(--color-primary); color: #fff} .player-volume { display: flex; align-items: center; gap: 1rem; margin-right: 2rem; position: relative} .volume-btn { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; transition: all 0.2s ease} .volume-btn:hover { color: var(--color-secondary)} .volume-slider { width: 80px; display: none} .player-volume:hover .volume-slider { display: block} .volume-slider input { width: 100%; height: 4px; -webkit-appearance: none; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none} .volume-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--color-secondary); cursor: pointer} .player-playlist { margin-right: 1rem} .playlist-btn { background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; transition: all 0.2s ease} .playlist-btn:hover { color: var(--color-secondary)} .playlist-dropdown { position: absolute; bottom: 100%; right: 0; width: 300px; max-height: 400px; background-color: rgba(51, 51, 51, 0.95); border-radius: 8px 8px 0 0; box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2); overflow: hidden; transform: translateY(100%); opacity: 0; visibility: hidden; transition: all 0.3s ease} .playlist-dropdown.active { transform: translateY(0); opacity: 1; visibility: visible} .playlist-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1)} .playlist-header h3 { font-size: 1.8rem; color: #fff; margin: 0} .close-playlist { background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 1.6rem; cursor: pointer; transition: all 0.2s ease} .close-playlist:hover { color: var(--color-secondary)} .playlist-tracks { max-height: 350px; overflow-y: auto; padding: 1rem 0} .playlist-tracks::-webkit-scrollbar { width: 5px} .playlist-tracks::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1)} .playlist-tracks::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 5px} .playlist-track { display: flex; align-items: center; padding: 1rem 1.5rem; cursor: pointer; transition: all 0.2s ease} .playlist-track:hover { background-color: rgba(255, 255, 255, 0.1)} .playlist-track.active { background-color: rgba(205, 127, 50, 0.2)} .playlist-track-number { width: 24px; font-size: 1.4rem; color: rgba(255, 255, 255, 0.5); text-align: center; margin-right: 1rem} .playlist-track-info { flex-grow: 1} .playlist-track-title { font-size: 1.4rem; color: #fff; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis} .playlist-track-duration { font-size: 1.2rem; color: rgba(255, 255, 255, 0.5)}