/* lista de canciones + reproductor flotante (index y /musica) */
.songs { list-style: none; }
.song { display: grid; grid-template-columns: 30px 48px 1fr auto 20px; align-items: center; gap: 14px; width: 100%; padding: 9px 6px; border-bottom: 1px solid var(--line2); text-align: left; transition: background .25s; }
.songs li:first-child .song { border-top: 1px solid var(--line2); }
.song:hover { background: var(--panel2); }
.song .n { font-size: 12px; color: var(--muted); }
.song img { width: 48px; height: 36px; object-fit: cover; background: var(--panel2); }
.song b { display: block; font: 400 18px/1.25 var(--title); color: var(--fg); }
.song small { font-size: 13.5px; color: var(--muted); }
.song .d { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.song .ic { width: 16px; height: 16px; display: grid; place-items: center; }
.song .ic svg { width: 14px; height: 14px; fill: var(--muted); }
.song:hover .ic svg { fill: var(--fg); }
.song.on b { font-style: italic; }
.song.on .ic svg { display: none; }
.song.on .ic::before { content: ""; width: 14px; height: 12px; background: linear-gradient(var(--fg), var(--fg)) 0 100% / 3px 60% no-repeat, linear-gradient(var(--fg), var(--fg)) 5px 100% / 3px 100% no-repeat, linear-gradient(var(--fg), var(--fg)) 10px 100% / 3px 40% no-repeat; }
.song.on.paused .ic::before { opacity: .4; }
.see-all { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 11px 20px; border: 1px solid var(--line2); color: var(--fg); font-size: 14px; transition: background .3s, color .3s, border-color .3s; }
.see-all:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.see-all svg { width: 14px; height: 10px; }

.yp { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 360px; background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.yp[hidden] { display: none; }
.yp-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.yp-video iframe, .yp-video > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yp-prog { height: 2px; background: var(--line2); }
.yp-prog i { display: block; height: 100%; width: 0; background: var(--fg); }
.yp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.yp-info { flex: 1; min-width: 0; }
.yp-info b { display: block; font: 400 17px/1.25 var(--title); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yp-info small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yp-bar button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--fg); flex: none; }
.yp-bar button:hover { background: var(--panel2); }
.yp-bar svg { width: 16px; height: 16px; fill: currentColor; }
.yp-bar .pp { border: 1px solid var(--line2); }
.yp-err { padding: 0 12px 12px; font-size: 14px; }
.yp-err a { color: var(--fg); border-bottom: 1px solid var(--muted); }
@media (max-width: 860px) {
  .song { grid-template-columns: 22px 44px 1fr 18px; gap: 10px; }
  .song .d { display: none; }
  .song img { width: 44px; height: 33px; }
  .yp { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .yp-video { height: 200px; aspect-ratio: auto; }
}