---

  <!-- НИЖНЯЯ ПАНЕЛЬ: АУДИОПЛЕЕР -->
  <footer class="musicbee-player">
    
    <!-- 1. Лево: Кнопки управления треками -->
    <div class="player-left">
      <button title="Предыдущий трек"><i class="fas fa-step-backward"></i></button>
      
      <!-- Чекбокс + Кнопка Play/Pause на CSS -->
      <input type="checkbox" id="play-trigger">
      <label for="play-trigger" class="btn-play-label" title="Воспроизвести / Пауза">
        <i class="fas fa-play"></i>
        <i class="fas fa-pause"></i>
      </label>
      
      <button title="Следующий трек"><i class="fas fa-step-forward"></i></button>
    </div>

    <!-- 2. Центр: Название текущей песни + Лайк + Прогресс-бар -->
    <div class="player-center">
      <!-- Блок информации и лайка -->
      <div class="track-meta">
        <span class="track-title">Riders on the Storm</span>
        <span class="track-artist">· The Doors</span>
        
        <!-- Скрытый чекбокс для работы лайка без JS -->
        <input type="checkbox" id="like-toggle" class="like-trigger">
        <label for="like-toggle" class="like-label" title="Добавить в понравившиеся">
          <i class="fa-regular fa-heart"></i> <!-- Контурное сердце -->
          <i class="fa-solid fa-heart"></i>   <!-- Залитое сердце -->
        </label>
      </div>
      
      <!-- Блок таймлайна (вынесен отдельно, чтобы не ломать строку) -->
      <div class="timeline">
        <span>0:52</span>
        <div class="progress-bar"><div class="progress-fill"></div></div>
        <span>4:55</span>
      </div>
    </div>

    <!-- 3. Право: Дополнительные кнопки и громкость -->
    <div class="player-right">
      <button title="Перемешать"><i class="fas fa-shuffle"></i></button>
      <button title="Повтор трека"><i class="fas fa-repeat"></i></button>
      <i class="fas fa-volume-low" style="color: #888888; font-size: 13px; margin-left: 5px;"></i>
      <div class="volume-bar"><div class="volume-fill"></div></div>
    </div>

  </footer>