.page-channel-music {
  --genre-color: #FFFFFF;
}


.page-channel-music #player-center::before {
  content: '';
  position: absolute; inset: -10%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--genre-color) 16%, transparent), transparent 70%);
  pointer-events: none; z-index: 0; opacity: .8;
  transition: background .6s ease;
}
.page-channel-music #player-center > * { position: relative; z-index: 1; }


.page-channel-music #visualizer {
  padding: 14px 22px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.page-channel-music .vis-bar {
  background: linear-gradient(180deg, color-mix(in srgb, var(--genre-color) 90%, #fff), color-mix(in srgb, var(--genre-color) 40%, transparent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--genre-color) 35%, transparent);
}


.page-channel-music .video-container {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--genre-color) 45%, rgba(255,255,255,0.25));
  box-shadow: 0 20px 55px rgba(0,0,0,.55), 0 0 0 5px color-mix(in srgb, var(--genre-color) 10%, transparent),
              0 0 40px color-mix(in srgb, var(--genre-color) 22%, transparent);
  transition: box-shadow .6s ease, border-color .6s ease;
}


.page-channel-music .track-title {
  background: linear-gradient(90deg, var(--text) 30%, color-mix(in srgb, var(--genre-color) 70%, var(--text)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-channel-music .track-artist { color: color-mix(in srgb, var(--genre-color) 35%, var(--text-dim)); }


.page-channel-music .progress-bar-fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--genre-color) 60%, #fff), var(--genre-color));
  box-shadow: 0 0 10px color-mix(in srgb, var(--genre-color) 55%, transparent);
  position: relative;
}
.page-channel-music .progress-bar-wrapper { background: rgba(255,255,255,0.06); }
.page-channel-music .progress-bar-fill::after {
  content: ''; position: absolute; right: -4px; top: 50%; translate: 0 -50%;
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 10px color-mix(in srgb, var(--genre-color) 70%, transparent);
  opacity: 0; transition: opacity .2s;
}
.page-channel-music .progress-bar-wrapper:hover .progress-bar-fill::after { opacity: 1; }


.page-channel-music .player-controls {
  padding: 10px 20px;
  border-radius: 50px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--glass-border);
}
.page-channel-music .ctrl-btn:hover {
  border-color: color-mix(in srgb, var(--genre-color) 55%, transparent);
  color: var(--text);
}
.page-channel-music .ctrl-btn.large {
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--genre-color) 55%, #fff));
  box-shadow: 0 0 26px color-mix(in srgb, var(--genre-color) 45%, transparent);
  animation: genre-pulse 2.4s ease-in-out infinite;
}
.page-channel-music .ctrl-btn.large:hover {
  box-shadow: 0 0 48px color-mix(in srgb, var(--genre-color) 65%, transparent);
}
@keyframes genre-pulse {
  0%, 100% { box-shadow: 0 0 22px color-mix(in srgb, var(--genre-color) 40%, transparent); }
  50% { box-shadow: 0 0 34px color-mix(in srgb, var(--genre-color) 60%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .page-channel-music .ctrl-btn.large { animation: none; }
}
.page-channel-music .volume-slider::-webkit-slider-thumb { background: var(--genre-color); box-shadow: 0 0 8px var(--genre-color); }


.page-channel-music .sidebar-section {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--glass-border);
}
.page-channel-music .current-genre-display {
  background: color-mix(in srgb, var(--genre-color) 14%, transparent);
  border-color: color-mix(in srgb, var(--genre-color) 45%, transparent);
}
.page-channel-music .current-genre-display .genre-icon,
.page-channel-music .current-genre-display .genre-name { color: var(--genre-color); }

.page-channel-music .genre-btn { --genre-color: #A1A1AA; }
.page-channel-music .genre-btn i { color: var(--genre-color); }
.page-channel-music .genre-btn:hover {
  border-color: color-mix(in srgb, var(--genre-color) 55%, transparent);
  background: color-mix(in srgb, var(--genre-color) 10%, transparent);
  color: var(--text);
}
.page-channel-music .genre-btn.active {
  border-color: var(--genre-color);
  background: color-mix(in srgb, var(--genre-color) 18%, transparent);
  color: var(--text);
  box-shadow: 0 0 14px color-mix(in srgb, var(--genre-color) 35%, transparent);
}

.page-channel-music .search-btn:hover { box-shadow: 0 0 20px color-mix(in srgb, var(--genre-color) 45%, transparent); }


.page-channel-music .sidebar-tab.active {
  color: var(--text);
  border-bottom-color: var(--genre-color);
}
.page-channel-music .listener-item:hover,
.page-channel-music .queue-item:hover {
  background: color-mix(in srgb, var(--genre-color) 8%, transparent);
}
.page-channel-music .queue-item-index { color: var(--genre-color); }


.page-channel-music .chat-msg-name { color: color-mix(in srgb, var(--genre-color) 55%, var(--blue-light)); }
.page-channel-music #chat-send-btn {
  background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--genre-color) 55%, #fff));
  box-shadow: 0 0 18px color-mix(in srgb, var(--genre-color) 35%, transparent);
}

@media (max-width: 700px) {
  .page-channel-music .player-controls { padding: 8px 14px; }
}


/* ====== Barre de recherche déplacée en haut ====== */
#music-search-bar {
  position: relative; z-index: 20; flex-shrink: 0;
  display: flex; justify-content: center;
  padding: 16px 2rem 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0));
  border-bottom: 1px solid var(--glass-border);
}
.music-search-inner { width: 100%; max-width: 640px; position: relative; }
.search-box-top {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 50px; padding: 5px 6px 5px 20px;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.search-box-top:focus-within {
  border-color: color-mix(in srgb, var(--genre-color) 60%, var(--glass-border));
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--genre-color) 12%, transparent);
}
.search-box-icon { color: var(--text-muted); flex-shrink: 0; }
.search-box-top:focus-within .search-box-icon { color: var(--genre-color); }
.search-box-top .search-input {
  background: transparent; border: none; padding: 10px 2px; font-size: .88rem;
}
.search-box-top .search-input:focus { border: none; }
.search-box-top .search-btn {
  flex-shrink: 0; display: flex; align-items: center; gap: 7px;
  border-radius: 50px; padding: 10px 18px; border: none;
  background: var(--grad); color: var(--on-light); font-size: .8rem; font-weight: 700;
}
.search-box-top .search-btn:hover {
  box-shadow: 0 0 24px color-mix(in srgb, var(--genre-color) 45%, rgba(255,255,255,.4));
}
.music-search-inner .search-results-container { position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin-top: 0; z-index: 30; max-height: 320px; }
@media (max-width: 700px) {
  #music-search-bar { padding: 12px 1.2rem 14px; }
  .search-box-top .search-btn span { display: none; }
}


/* ====== Sidebar gauche : moins de blocs empilés, plus d'air ====== */
#sidebar-left {
  gap: 1.6rem;
  position: relative;
}
.page-channel-music #sidebar-left {
  background-image: linear-gradient(90deg, transparent, var(--genre-color), transparent);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top;
}
.page-channel-music .sidebar-section-channel {
  border-color: color-mix(in srgb, var(--genre-color) 30%, var(--glass-border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--genre-color) 7%, transparent), rgba(255,255,255,0.02));
}
.page-channel-music .channel-meta-name { font-size: 1.4rem; }
.page-channel-music #sidebar-genre-section .sidebar-label-row { margin-bottom: 2px; }
.page-channel-music #sidebar-genre-section .current-genre-display { padding: 6px 12px; }