:root {
  --bg: #f4f5f6;
  --surface: #ffffff;
  --border: #d7dbe0;
  --text: #1c2226;
  --muted: #6b7680;
  --accent: #2a6f4b;
  --accent-text: #ffffff;
  --row-hover: #eef3f0;
  --live: #c0392b;
}
body.night {
  --bg: #14181a;
  --surface: #1c2226;
  --border: #333c42;
  --text: #e7ecee;
  --muted: #8b98a1;
  --accent: #3ea86e;
  --accent-text: #08150f;
  --row-hover: #232b2f;
  --live: #ff6b5a;
}

* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  margin: 0;
  padding: 16px 16px 90px;
  background: var(--bg);
  color: var(--text);
}

header { display:flex; align-items:baseline; gap:12px; margin: 8px 0 12px; }
h1 { font-size: 18px; margin: 0; }
.muted { color: var(--muted); font-size: 12px; }

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 14px;
}
.field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
.field select, .field input[type=text], .field input[type=date] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 5px 6px; font-size: 13px;
}
/* searchable multi-select */
.ms { position: relative; }
.ms-control {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 6px; cursor:text; min-height: 30px;
}
.ms-control:focus-within { border-color: var(--accent); }
.ms-chips { display:flex; flex-wrap:wrap; gap:4px; }
.ms-chip {
  display:inline-flex; align-items:center; gap:4px;
  background: var(--accent); color: var(--accent-text);
  border-radius: 10px; padding: 2px 4px 2px 8px; font-size:12px; white-space:nowrap;
}
.ms-chip button {
  background:none; border:none; color:inherit; cursor:pointer; font-size:13px;
  line-height:1; padding:0 2px; opacity:.8;
}
.ms-chip button:hover { opacity:1; }
.ms-input {
  flex: 1; min-width: 60px; border:none; background:transparent; color:var(--text);
  font-size:13px; padding:3px 2px; outline:none;
}
.ms-dropdown {
  position:absolute; top: calc(100% + 3px); left:0; right:0; z-index: 20;
  background: var(--surface); border:1px solid var(--border); border-radius:4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); max-height: 220px; overflow:auto;
}
.ms-option { padding:6px 10px; font-size:13px; cursor:pointer; }
.ms-option:hover { background: var(--row-hover); }
.ms-option.selected { font-weight:600; }
.ms-option.selected::after { content: " ✓"; color: var(--accent); }
.ms-empty { padding:8px 10px; font-size:12px; color: var(--muted); }
.daterow { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.daterow input[type=date] { flex: 1; min-width: 110px; }
label.inline { font-size:12px; color: var(--muted); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.field.actions { justify-content:flex-end; flex-direction:row; align-items:center; gap:8px; }
.field.actions button, .field.actions a {
  padding: 7px 14px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--accent); color: var(--accent-text); cursor:pointer;
  text-decoration:none; font-size:13px; font-weight:600;
}
#clear-filters { background: var(--surface); color: var(--text); }

.table-scroll { overflow-x: auto; border-radius:6px; border:1px solid var(--border); }
table { width:100%; min-width: 560px; border-collapse: collapse; font-size:13px; background: var(--surface); }
th, td { padding:7px 9px; border-bottom:1px solid var(--border); text-align:left; vertical-align:middle; }
th { color: var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.03em; }
tbody tr { cursor:pointer; }
tbody tr:hover { background: var(--row-hover); }
tbody tr.playing { background: var(--row-hover); box-shadow: inset 3px 0 0 var(--accent); }

@keyframes share-flash {
  0%, 100% { background-color: transparent; }
  8%, 24%, 40% { background-color: rgba(255, 214, 51, 0.65); }
  16%, 32%, 48% { background-color: transparent; }
}
tbody tr.share-flash { animation: share-flash 2.2s ease-in-out 1; }
.row-actions { display:flex; gap:4px; align-items:center; }
.play-btn, .icon-btn {
  background:none; border:1px solid var(--border); border-radius:4px; color:var(--text);
  cursor:pointer; padding:4px 9px; font-size:13px; text-decoration:none; line-height:1.4;
  display:inline-flex; align-items:center; justify-content:center; min-width: 30px;
}
.play-btn:hover, .icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.share-btn.copied { color: var(--accent); border-color: var(--accent); }
.no-audio { color: var(--muted); font-size:12px; }

.pager { display:flex; justify-content:center; margin: 14px 0; }
.pager button { padding: 8px 18px; border-radius:4px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }

.player-bar {
  position: fixed; top:0; left:0; right:0; z-index: 10;
  display:flex; align-items:center; gap:12px;
  background: var(--surface); border-bottom:1px solid var(--border);
  padding: 8px 14px; box-shadow: 0 2px 8px rgba(0,0,0,.08);
  flex-wrap: wrap;
}
body { padding-top: 60px; }
#player-playpause {
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background: var(--accent); color: var(--accent-text); cursor:pointer; font-size:14px;
  flex: 0 0 auto;
}
.now-playing { flex: 1 1 260px; min-width: 180px; font-size:13px; }
.player-toggles { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color: var(--muted); }
.player-toggles label { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.live-badge {
  background: var(--live); color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:10px; letter-spacing:.05em;
}

@media (max-width: 720px) {
  body { padding: 10px 10px 24px; }
  .player-bar { position: static; padding: 8px 10px; }
  body { padding-top: 10px; }
  header { flex-wrap: wrap; }
  .filters { grid-template-columns: 1fr 1fr; padding: 10px; }
  .field.actions { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
  .now-playing { flex-basis: 100%; order: 3; }
  .player-toggles { flex-basis: 100%; order: 4; gap: 8px 14px; }
  th, td { padding: 8px 6px; font-size: 12.5px; }
  .play-btn, .icon-btn { min-width: 36px; min-height: 32px; padding: 6px 10px; }
}

@media (max-width: 460px) {
  .filters { grid-template-columns: 1fr; }
  table { min-width: 480px; }
  .col-site, .col-dur { display: none; }
}