:root {
  --bg: #0b0e13; --panel: #131821; --line: #232b38; --text: #e6ebf2; --muted: #8a95a8;
  --accent: #3d8bfd; --live: #22c55e; --wait: #f5a524; --down: #ef4444;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; overflow: hidden; }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; }
.logo { width: 12px; height: 12px; border-radius: 50%; background: var(--down); box-shadow: 0 0 8px var(--down);
  animation: rec 2s infinite; }
@keyframes rec { 50% { opacity: .35; } }
h1 { font-size: 16px; margin: 0; white-space: nowrap; }
nav { display: flex; gap: 4px; flex-wrap: wrap; }
nav button { border-radius: 999px; }
nav button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
nav .count { opacity: .7; margin-left: 4px; font-variant-numeric: tabular-nums; }
.controls { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
button, select { background: #1b2230; color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 5px 10px; font: inherit; cursor: pointer; }
button:hover, select:hover { border-color: #3a4558; }
button.on { background: var(--live); border-color: var(--live); color: #04140a; }
.ctl { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.pager { display: flex; align-items: center; gap: 4px; }
#pageinfo, .stats, #clock { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
#clock { color: var(--text); }
#banner { background: #3a2a07; color: #ffd78a; padding: 6px 16px; border-bottom: 1px solid #5c430e; font-size: 13px; }
#banner code { background: #0004; padding: 1px 4px; border-radius: 4px; }
main { flex: 1; min-height: 0; display: grid; gap: 3px; padding: 3px; align-content: center; justify-content: center; }
.tile { position: relative; background: #000; overflow: hidden; cursor: zoom-in; border: 1px solid #000; }
.tile:hover { border-color: var(--accent); }
.tile cw-video, .tile video, .demo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
video { object-fit: contain; background: #000; }
.label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px;
  padding: 3px 6px; font-size: 12px; background: linear-gradient(transparent, #000c); pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label .site { color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--wait); }
.tile[data-state=live] .dot { background: var(--live); }
.tile[data-state=down] .dot { background: var(--down); }
.tile[data-state=down]::after { content: "NO SIGNAL"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--down); font-weight: 600; letter-spacing: .1em; font-size: 12px; pointer-events: none; }
.demo { background: radial-gradient(circle at 30% 30%, #1d2a3d, #06090d 70%); }
.demo::before { content: ""; position: absolute; inset: 0; opacity: .08;
  background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px); }
.demo span { position: absolute; top: 6px; left: 8px; font: 11px ui-monospace, monospace; color: #9fb3d1; }
.empty { color: var(--muted); text-align: center; }
#focus { position: fixed; inset: 0; z-index: 10; background: #000; display: flex; flex-direction: column; }
#focus[hidden] { display: none; }
.focus-bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--panel); }
.focus-bar .hint { color: var(--muted); }
.focus-bar button { margin-left: auto; }
#focusBody { position: relative; flex: 1; }
#focusBody > * { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 700px) {
  header { padding: 8px; }
  .controls { margin-left: 0; }
  .stats { display: none; }
}

nav .sdot { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; }
nav button.site-off .sdot { background: var(--down); }
nav button.site-off { opacity: .75; }
#logout[hidden], #settingsLink[hidden] { display: none; }
body.server nav .sdot { display: inline-block; }
cw-video { display: block; }
#focusBody cw-video video { position: absolute; inset: 0; width: 100%; height: 100%; }
.cw-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px 10px 22px; text-align: center;
  font-size: 12px; color: var(--muted); pointer-events: none; }
.cw-msg[hidden] { display: none; }
cw-video[data-error] .cw-msg { color: #ffb4b4; background: #000a; }
.tile:has(cw-video[data-error])::after { content: none; }