body { font-family: system-ui, Arial, sans-serif; padding: 1rem; }
.controls { display:flex; gap:0.5rem; align-items:center; margin-bottom:0.75rem; flex-wrap:wrap; }
input#search { padding:0.4rem; min-width:220px; }
.table-container { width: 100%; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 1100px; }
th, td { border: 1px solid #ddd; padding: 8px; font-size: 0.95rem; box-sizing: border-box; }
th { background: #f4f4f4; text-align:left; vertical-align: top; }
th.sortable { cursor: pointer; user-select: none; box-sizing: border-box; white-space: nowrap; }
th:not(.sortable) { cursor: default; }
th.sortable::after { content: '\00a0'; display: inline-block; width: 1.2em; text-align: center; margin-left: 0.2rem; }
th.sorted-asc::after { content: '▲'; color: #333; }
th.sorted-desc::after { content: '▼'; color: #333; }
.column-subtext { display: block; font-size: 0.8rem; color: #555; margin-top: 0.2rem; }
tr:hover { background:#fafafa; cursor:pointer; }
p.status { margin: 0.5rem 0 1rem 0; color: #333; }
.pagination { margin-top:0.5rem; display:flex; gap:0.5rem; align-items:center; }
.no-results td { text-align:center; color:#666; padding: 2rem 1rem; }
.set-index-cell {
  position: relative;
  padding-left: 2.2rem;
}
.set-play-button {
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  color: #2f2f2f;
}
.set-index-cell > .set-play-button {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
}
.set-play-button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.set-play-button:hover { color: #111; }
.set-play-button.is-playing {
  color: #1f7a4d;
}
.set-play-button:disabled { cursor: wait; opacity: 0.95; }
/* Voicing panel styles */
.voicings-panel { margin-top:0.5rem; }
.voicings-table { border-collapse: collapse; width: 100%; font-size:0.9rem; }
.voicings-table th, .voicings-table td { border: 1px solid #eee; padding:6px; }
@media (max-width: 700px) {
  .controls { flex-direction:column; align-items:stretch; }
  table, thead, tbody, th, td, tr { display:block; }
  tr { margin-bottom: 0.75rem; }
  th { display:none; }
  td { border:none; padding:6px 0; }
}