/* Musique interne du panel */
.music-card { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.music-card label.btn { cursor: pointer; }
.music-list { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; }
.music-list .empty { padding: 14px 4px; margin: 0; }
.track { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; cursor: pointer; transition: background .15s, transform .15s; }
.track:hover { background: rgba(255, 255, 255, .07); transform: translateX(2px); }
.track.active { background: linear-gradient(90deg, rgba(45, 212, 191, .22), rgba(167, 139, 250, .14)); }
.track-play { width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .1); color: inherit; font-size: 13px; cursor: pointer; flex: none; }
.track.active .track-play { background: #2dd4bf; color: #062b27; }
.track-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.track-size { font-size: 12px; }
.track-del { border: 0; background: none; cursor: pointer; opacity: .45; font-size: 15px; }
.track-del:hover { opacity: 1; }
.music-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .08); }
.mb-btn { border: 0; background: rgba(255, 255, 255, .08); color: inherit; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; flex: none; }
.mb-btn.play { width: 42px; height: 42px; background: #2dd4bf; color: #062b27; font-size: 16px; }
.mb-info { flex: 1; min-width: 0; }
.mb-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-time { display: flex; align-items: center; gap: 8px; font-size: 12px; opacity: .8; }
.mb-time input { flex: 1; accent-color: #2dd4bf; }
.mb-vol { width: 90px; accent-color: #2dd4bf; }
@media (max-width: 700px) { .mb-vol { display: none; } }

/* Lecture auto + barre flottante sur toutes les pages */
.music-head-actions { gap: 12px; align-items: center; }
.music-auto { display: flex; align-items: center; gap: 6px; font-size: 13px; opacity: .85; cursor: pointer; user-select: none; }
.music-auto input { accent-color: #2dd4bf; width: 15px; height: 15px; }
.music-bar.floating { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: min(440px, calc(100vw - 36px));
  background: rgba(14, 16, 24, .82); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.music-bar.floating.hidden { display: none; }

/* Spotify relié */
.spotify-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(30, 215, 96, .16), rgba(30, 215, 96, .04)); border: 1px solid rgba(30, 215, 96, .25); }
.sp-logo { font-size: 20px; }
.sp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-info span { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sp-connect { background: #1ed760; color: #06210f; border: 0; }