---

/* БАЗОВЫЕ НАСТРОЙКИ СТРАНИЦЫ */
* { 
  box-sizing: border-box; 
}

body {
  margin: 0; 
  padding: 0; 
  background-color: #1e1e1e; /* Темный фон */
  font-family: 'Segoe UI', sans-serif; 
  color: #cccccc;
  height: 100vh; 
  display: flex; 
  flex-direction: column; 
  overflow: hidden;
}

/* ГЛАВНЫЙ КОНТЕЙНЕР (Сайдбар + Контент) */
.main-container { 
  display: flex; 
  flex-grow: 1; 
  height: calc(100vh - 65px); 
}

/* ========================================================
   ЛЕВАЯ ПАНЕЛЬ (САЙДБАР)
   ======================================================== */
.sidebar { 
  width: 240px; 
  background-color: #202021; 
  border-right: 1px solid #2d2d2d; 
  padding: 15px 0; 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
}

.sidebar-section { 
  display: flex; 
  flex-direction: column; 
}

.sidebar-title { 
  font-size: 11px; 
  text-transform: uppercase; 
  letter-spacing: 1px; 
  color: #666666; 
  padding: 0 20px 8px 20px; 
  font-weight: bold; 
}

.sidebar-item { 
  display: flex; 
  align-items: center; 
  padding: 8px 20px; 
  color: #aaaaaa; 
  text-decoration: none; 
  font-size: 13px; 
  gap: 12px; 
  cursor: pointer; 
}

.sidebar-item:hover { 
  background-color: #2a2a2b; 
  color: #ffffff; 
}

.sidebar-item.active { 
  background-color: #2d2d2d; 
  color: #007acc; 
  border-left: 3px solid #007acc; 
  padding-left: 17px; 
}

.sidebar-item svg { 
  fill: currentColor; 
  width: 16px; 
  height: 16px; 
}

/* ========================================================
   ЦЕНТРАЛЬНАЯ ПАНЕЛЬ (СЕТКА АЛЬБОМОВ)
   ======================================================== */
.content-view { 
  flex-grow: 1; 
  background-color: #1a1a1a; 
  padding: 25px; 
  overflow-y: auto; 
}

.content-title { 
  font-size: 20px; 
  color: #ffffff; 
  margin-top: 0; 
  margin-bottom: 20px; 
  font-weight: 400; 
}

.albums-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
  gap: 20px; 
}

.album-card { 
  background-color: #222223; 
  border: 1px solid #2d2d2d; 
  border-radius: 4px; 
  padding: 12px; 
  text-align: center; 
  cursor: pointer; 
  transition: transform 0.2s, background-color 0.2s; 
}

.album-card:hover { 
  background-color: #2d2d2d; 
  transform: translateY(-2px); 
}

.album-cover { 
  width: 100%; 
  aspect-ratio: 1/1; 
  background-color: #333334; 
  border-radius: 2px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  margin-bottom: 10px; 
}

.album-cover svg { 
  fill: #555555; 
  width: 44px; 
  height: 44px; 
}

.album-name { 
  font-size: 13px; 
  color: #ffffff; 
  font-weight: 600; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.album-artist { 
  font-size: 12px; 
  color: #888888; 
  margin-top: 4px; 
}

/* ========================================================
   НИЖНЯЯ ПАНЕЛЬ (АУДИОПЛЕЕР)
   ======================================================== */
.musicbee-player { 
  height: 65px; 
  background-color: #252526; 
  border-top: 1px solid #333333; 
  display: flex; 
  align-items: center; 
  padding: 0 20px; 
  gap: 30px; 
  position: relative; 
  z-index: 10; 
}

.player-left { 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  width: 220px; 
}

/* Кнопки управления (Контрастные, не сливаются с фоном) */
.player-left button, 
.player-right button { 
  background-color: #333334; 
  border: 1px solid #444445; 
  color: #e0e0e0; 
  cursor: pointer; 
  padding: 8px; 
  border-radius: 4px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: all 0.2s ease;
}

.player-left button:hover, 
.player-right button:hover { 
  background-color: #48484a; 
  border-color: #636366; 
  color: #ffffff; 
}

.musicbee-player svg { 
  fill: currentColor; 
}

/* Кнопка Play/Pause на чистом CSS (Синий акцент) */
#play-trigger { 
  display: none; 
}

.btn-play-label { 
  background-color: #007acc; 
  border: 1px solid #0098ff; 
  width: 36px; 
  height: 36px; 
  color: #ffffff; 
  border-radius: 4px; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  transition: all 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 122, 204, 0.3);
}

.btn-play-label:hover { 
  background-color: #0098ff; 
  box-shadow: 0 0 15px rgba(0, 152, 255, 0.6);
  transform: scale(1.04);
}

.btn-play-label .svg-pause { display: none; }
#play-trigger:checked + .btn-play-label .svg-play { display: none; }
#play-trigger:checked + .btn-play-label .svg-pause { display: block; }

/* Центр плеера (Текст и Прогресс) */
.player-center { 
  flex-grow: 1; 
  display: flex; 
  flex-direction: column; 
  gap: 4px; 
}

.track-meta { 
  font-size: 12px; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}

.track-title { 
  color: #ffffff; 
  font-weight: 600; 
}

.track-artist { 
  color: #888888; 
}

/* Интерактивный лайк на CSS */
.like-trigger { 
  display: none; 
}

.like-label { 
  cursor: pointer; 
  color: #555555; 
  display: flex; 
  align-items: center; 
  margin-left: 5px; 
}

.like-label .svg-heart-solid { display: none; }
.like-trigger:checked + .like-label { color: #e74c3c; }
.like-trigger:checked + .like-label .svg-heart-reg { display: none; }
.like-trigger:checked + .like-label .svg-heart-solid { display: block; }

/* Таймлайн дорожки */
.timeline { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  font-size: 11px; 
  color: #777777; 
}

.progress-bar { 
  flex-grow: 1; 
  height: 4px; 
  background-color: #3e3e42; 
  border-radius: 2px; 
}

.progress-fill { 
  width: 25%; 
  height: 100%; 
  background-color: #007acc; 
  border-radius: 2px; 
}

/* Правая сторона (Громкость) */
.player-right { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  width: 150px; 
  justify-content: flex-end; 
}

.player-right svg {
  color: #e0e0e0 !important;
}

.volume-bar { 
  width: 60px; 
  height: 4px; 
  background-color: #3e3e42; 
  border-radius: 2px; 
}

.volume-fill { 
  width: 70%; 
  height: 100%; 
  background-color: #b5b5b5; 
  border-radius: 2px; 
}