/* the shared "Pick a song" list (engine/songpick.js) - Studio and Song to Video */
.sp-h { margin: 12px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); }
.sp-note, .sp-empty { margin: 12px 10px 4px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }
.sp-note a { color: var(--accent-hi); }
.sp-song {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid transparent;
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.sp-song:hover, .sp-song:focus-visible { background: rgba(233, 168, 58, 0.06); border-color: rgba(233, 168, 58, 0.28); outline: none; }
.sp-cover {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.28), transparent 45%), linear-gradient(140deg, hsl(var(--h1, 36) 62% 46%), hsl(var(--h2, 20) 58% 22%));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.sp-cover svg { width: 18px; height: 18px; }
.sp-song-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-song-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-song-t span { font-size: 12px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-song-go {
  flex-shrink: 0; padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: var(--accent-hi);
  border: 1px solid rgba(233, 168, 58, 0.4); opacity: 0; transition: opacity .15s ease;
}
.sp-song:hover .sp-song-go, .sp-song:focus-visible .sp-song-go, .sp-song.loading .sp-song-go { opacity: 1; }
.sp-song.failed .sp-song-go { opacity: 1; color: #ff9b9b; border-color: rgba(242, 106, 95, 0.5); }