/* Public catalog details. Keep Verna's palette; internal notes stay in admin. */
.viewer-tools {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 20px;
  margin:0 32px; padding:10px 0 0; color:var(--ink-soft);
}
.view-tabs { display:flex; align-items:center; gap:24px; }
.view-tabs button {
  position:relative; display:inline-flex; align-items:center; gap:7px;
  min-height:46px; padding:8px 0; border:0; border-radius:0;
  background:transparent; color:var(--ink-soft); font-family:inherit; font-size:14px; line-height:1.5; font-weight:500;
  white-space:nowrap;
}
.view-tabs button[aria-pressed=true] { color:var(--iris); font-weight:700; }
.view-tabs button[aria-pressed=true]::after {
  content:""; position:absolute; bottom:0; left:0; right:0;
  height:2px; border-radius:2px; background:currentColor;
}
.view-count { font-size:12px; font-weight:400; font-variant-numeric:tabular-nums; }
#clear-recent { margin-left:auto; min-height:44px; padding:6px 0; border:0; background:transparent; color:var(--ink-soft); font-size:12px; text-decoration:underline; text-underline-offset:4px; }
.viewer-tools [hidden] { display:none; }
.song-actions { display:flex; align-items:center; justify-content:center; gap:8px; }
.favorite {
  display:inline-grid; place-items:center; flex:0 0 44px; width:44px; height:44px;
  padding:10px; border:0; border-radius:10px; background:transparent; color:var(--ink-soft);
}
.favorite svg { display:block; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linejoin:round; }
.favorite:hover { color:var(--iris); background:var(--iris-soft); }
.favorite[aria-pressed=true] { color:var(--iris); }
.favorite[aria-pressed=true] svg { fill:currentColor; }
.view-tabs button:focus-visible,.favorite:focus-visible,.dialog-close:focus-visible,.dialog-actions button:focus-visible {
  outline:2px solid var(--iris); outline-offset:3px;
}
.table-shell { overflow-y:visible; overscroll-behavior-y:auto; }
.table-shell table { min-width:0; }
.table-shell th:nth-child(1) { width:6%; }
.table-shell th:nth-child(2) { width:23%; }
.table-shell th:nth-child(3) { width:17%; }
.table-shell th:nth-child(4) { width:9%; }
.table-shell th:nth-child(5) { width:16%; }
.table-shell th:nth-child(6) { width:10%; }
.table-shell th:nth-child(7) { width:19%; }
.table-shell td { height:72px; border-bottom:1px solid var(--line); font-size:15px; }
.table-shell td.title { font-size:16px; }
.table-shell td.number { font-size:12px; }
.table-shell tbody tr:last-child td:not(.empty) { border-bottom:1px solid var(--line); }
.song-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cover-links { display:flex; justify-content:center; gap:8px; margin-top:4px; font-size:12px; line-height:20px; white-space:nowrap; overflow:auto; }
.cover-links a { color:var(--iris); text-decoration:underline; text-underline-offset:3px; }
.song-dialog {
  position:fixed; inset:0; margin:auto; width:min(420px,calc(100vw - 32px));
  max-height:calc(100dvh - 32px); padding:28px; overflow:auto;
  border:1px solid var(--line); border-radius:24px; color:var(--ink);
  background:#fffafd; box-shadow:var(--shadow); font:inherit;
}
.song-dialog::backdrop { background:rgba(50,32,60,.38); }
.song-dialog h2 { margin:0; padding-right:36px; font-size:16px; line-height:24px; font-weight:600; color:var(--ink-soft); }
#candidate h2 { padding:0 36px; text-align:center; }
#candidate .candidate-song { text-align:center; }
.dialog-close { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-soft); font:400 28px/1 Arial,sans-serif; }
.dialog-close:hover { color:var(--iris); background:var(--iris-soft); }
.candidate-song { margin:28px 0; }
.candidate-title { margin:0; font-size:26px; line-height:1.4; font-weight:700; overflow-wrap:anywhere; }
#candidate-artist { margin:8px 0 0; color:var(--ink-soft); font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
.dialog-actions { display:flex; align-items:center; gap:12px; margin:0; }
.dialog-actions button { flex:1; min-height:46px; padding:10px 18px; border:1px solid var(--line); border-radius:999px; color:var(--ink); background:#fff; font:inherit; font-size:14px; line-height:1.5; font-weight:600; }
.dialog-actions .primary-action { border-color:var(--coral); background:var(--coral); color:#fff; }
.dialog-actions button:disabled { opacity:.45; cursor:default; }
.manual-hint { margin:24px 0 14px; font-size:14px; color:var(--ink-soft); }
.song-dialog textarea { width:100%; min-height:96px; margin:0 0 20px; padding:12px; border:1px solid var(--line); border-radius:12px; font:inherit; font-size:16px; resize:vertical; }
@media (min-width:721px) and (max-width:1050px) {
  .controls { grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
  .search { grid-column:1 / -1; }
  .random { grid-column:auto; }
  .filter-trigger { padding-left:34px; padding-right:24px; }
  .filter-icon { left:12px; width:14px; height:14px; }
  .select-box::after { right:12px; }
  .table-shell { margin:0 16px; }
  .table-shell th,.table-shell td { padding-left:6px; padding-right:6px; }
  .song-actions { gap:2px; }
  .song-actions .copy { min-width:70px; padding:0 8px; font-size:11px; }
  .table-shell th:nth-child(2) { width:21%; }
  .table-shell th:nth-child(3) { width:15%; }
  .table-shell th:nth-child(7) { width:23%; }
}
@media (max-width:720px) {
  .viewer-tools { margin:0 16px; padding-top:6px; gap:0 12px; }
  .view-tabs { gap:20px; }
  .view-tabs button { font-size:14px; min-height:44px; gap:5px; }
  .view-count { font-size:12px; }
  #clear-recent { margin-left:0; }
  .notice { min-height:20px; font-size:12px; }
  .table-shell tbody tr,.table-shell tbody.reveal tr {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:52px 76px 48px 44px;
    grid-template-areas:"number genre" "title language" "artist permission" "actions actions";
    gap:4px 14px; height:262px; padding:14px; margin:0 0 10px;
    border:1px solid var(--line); border-radius:16px; box-shadow:none;
    align-items:stretch; overflow:hidden;
  }
  /* Replace the old alternating label/value grid, including hover rules. */
  .table-shell tbody tr td,.table-shell tbody tr:hover td,.table-shell tbody tr:nth-child(even) td {
    display:grid !important; grid-template-columns:28px minmax(0,1fr); gap:0 6px; align-items:center; justify-content:start; width:auto !important; min-width:0; min-height:0; height:auto;
    padding:0; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0 !important; background:transparent;
    text-align:left; white-space:normal; font-size:14px; line-height:1.5;
  }
  .table-shell tbody tr td::before { display:block; color:var(--ink-soft); font-size:12px; font-weight:600; line-height:1.5; }
  .table-shell tbody tr td.number::before { content:"编号"; }
  .table-shell tbody tr td.title::before { content:"歌名"; }
  .table-shell tbody tr td.artist::before { content:"歌手"; }
  .table-shell tbody tr td.number { grid-area:number; font-size:13px; color:var(--ink-soft); }
  .table-shell tbody tr td.title { grid-area:title; color:var(--ink); overflow:hidden; }
  .table-shell tbody tr td.artist { grid-area:artist; color:var(--ink); }
  .table-shell tbody tr td.language { grid-area:language; }
  .table-shell tbody tr td.genre { grid-area:genre; }
  .table-shell tbody tr td.permission { grid-area:permission; justify-self:stretch; }
  .table-shell tbody tr td:is(.genre,.language,.permission) { color:var(--ink); }
  .table-shell tbody tr td.genre::before { content:"曲风"; }
  .table-shell tbody tr td.language::before { content:"语言"; }
  .table-shell tbody tr td.permission::before { content:"类型"; }
  .table-shell tbody tr td.actions { display:block !important; grid-area:actions; width:100% !important; border-bottom:0 !important; }
  .table-shell tbody tr td.actions::before,.table-shell tbody tr td.empty::before { display:none; content:none; }
  .table-shell tbody tr td.empty { display:block !important; }
  .song-content { min-width:0; }
  .field-value { min-width:0; }
  .table-shell .field-value { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
  .song-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal; font-size:17px; line-height:24px; overflow-wrap:anywhere; }
  .cover-links { position:static; flex-shrink:0; width:100%; height:24px; justify-content:flex-start; margin:0; font-size:12px; line-height:24px; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
  .cover-links a { flex-shrink:0; }
  .cover-links::-webkit-scrollbar { display:none; }
  .tag { min-height:24px; min-width:52px; max-width:100%; justify-self:start; padding:2px 10px; font-size:12px; overflow:hidden; text-overflow:ellipsis; }
  .song-actions { width:100%; gap:10px; }
  .song-actions .copy { flex:1; height:44px; font-size:13px; }
  .song-actions .favorite { height:44px; flex-basis:44px; }
  .table-shell tbody tr:has(.empty) { display:flex; height:160px; align-items:center; justify-content:center; }
  .table-shell tbody tr td.empty { text-align:center; padding:20px; }
  .song-dialog { padding:24px; border-radius:20px; }
  .song-dialog h2 { font-size:15px; }
  .candidate-title { font-size:24px; }
}
@media (max-width:360px) {
  .filter-trigger { padding-left:34px; padding-right:24px; font-size:14px; }
  .filter-icon { left:12px; width:14px; height:14px; }
  .select-box::after { right:12px; }
  .view-tabs { gap:15px; }
  .view-tabs button { font-size:13px; gap:4px; }
  .table-shell tbody tr,.table-shell tbody.reveal tr { padding:14px 12px; column-gap:12px; }
  .song-dialog { padding:22px; }
}