/* Song view (song pages and the lyrics panel in the player) */
.sv { font-size: 17px; line-height: 1.25; }
.sv-line { display: flex; flex-wrap: wrap; align-items: flex-end; margin: 2px 0 10px; }
.sv-seg { display: inline-flex; flex-direction: column; }
.sv-ch {
  font-family: var(--display); font-weight: 700; color: var(--accent); font-size: 0.92em;
  min-height: 1.25em; padding-right: 0.45em; white-space: nowrap; border-radius: 6px; transition: background 0.12s, color 0.12s;
  align-self: flex-start;
}
.sv-ch.sv-bad { color: var(--danger); text-decoration: line-through; }
.sv-tx { white-space: pre; }
.sv-chords-only .sv-ch { font-size: 1em; }
.sv-sec { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin: 18px 0 6px; }
.sv-gap { height: 6px; }
/* Player highlights */
.sv-ch.now { background: var(--accent); color: var(--accent-ink); padding: 0 0.35em; margin-right: 0.15em; }
.sv-ch.next { outline: 2px solid var(--hand); outline-offset: 1px; }
.sv-line.current .sv-tx { color: var(--text); }
.lyrics .sv-line .sv-tx { color: var(--muted); }
.lyrics .sv-line.current .sv-tx { color: var(--text); font-weight: 600; }
.lyrics .sv-ch[data-i] { cursor: pointer; }

/* Pages */
.mainnav { display: flex; gap: 4px; margin-right: auto; margin-left: 18px; }
.mainnav a { color: var(--muted); text-decoration: none; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.mainnav a.on, .mainnav a:hover { color: var(--text); background: var(--surface-2); }
.songpage main { flex: 1; }
.song-wrap { max-width: 860px; width: 100%; margin: 0 auto; padding: 24px 20px 40px; }
.back { color: var(--muted); text-decoration: none; font-size: 14px; }
.back::before { content: "<  "; }
.song-title { font-family: var(--display); font-size: clamp(30px, 5vw, 44px); margin: 10px 0 2px; letter-spacing: -0.02em; }
.song-artist { color: var(--muted); margin: 0 0 18px; font-size: 16px; }
.song-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.transpose { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; }
.transpose b { color: var(--text); min-width: 2ch; text-align: center; }
.song-key { color: var(--muted); font-size: 14px; }
.song-key b { color: var(--accent); }
.song-chords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.chip-sign { display: inline-flex; align-items: flex-end; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.chip-sign b { font-family: var(--display); font-size: 17px; }
.chip-sign .sign { gap: 4px; }
.song-license { color: var(--muted); font-size: 12px; margin-top: 28px; border-top: 1px solid var(--line); padding-top: 12px; }
.lib-search { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 16px; color: var(--text); }
.lib-search:focus { outline: 2px solid var(--accent); border-color: transparent; }
.lib-group { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 26px 0 10px; }
.lib-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.lib-list a { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text); text-decoration: none; }
.lib-list a:hover { border-color: var(--accent); }
.lib-list b { font-size: 16px; }
.lib-list span { color: var(--muted); font-size: 13px; }
.lib-list small { color: var(--accent); font-family: var(--display); font-size: 13px; margin-top: 4px; }
.lib-empty { color: var(--muted); }
.lib-own { margin-top: 32px; background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 18px; }
.lib-own h2 { margin: 0 0 6px; font-size: 18px; }
.lib-own p { color: var(--muted); margin: 0 0 12px; }

/* Lyrics panel inside the player */
.lyrics-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.lyrics-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lyrics-head .grow { flex: 1; min-width: 0; }
.lyrics-head b { font-size: 15px; }
.lyrics-head small { color: var(--muted); margin-left: 6px; }
.lyrics { position: relative; max-height: 300px; overflow: auto; padding: 12px 16px; scroll-behavior: smooth; }
.lyrics-help { padding: 0 16px 12px; margin: 0; }
#pasteDialog .row input { flex: 1; min-width: 140px; }
.song-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.song-results button { width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.song-results button:hover { border-color: var(--accent); }
.song-results b { display: block; }
.song-results span { color: var(--muted); font-size: 12px; }
.paste-area { width: 100%; min-height: 220px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; color: var(--text); font: 14px/1.4 ui-monospace, Consolas, monospace; }
@media (max-width: 600px) { .mainnav { margin-left: 8px; } .mainnav a { padding: 6px 8px; } .sv { font-size: 16px; } }