:root {
  --bg: #14110d;
  --panel: #221c15;
  --text: #efe6d6;
  --muted: #a8997f;
  --live: #6fbf73;
  --wait: #d9a441;
  --off: #c0533f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; padding-top: env(safe-area-inset-top); }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--panel); }
select { flex: 1; min-width: 0; max-width: 60%; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid #3a3025; border-radius: 8px; padding: 6px 8px; }
#status { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 14px;
  color: var(--muted); background: none; border: 0; padding: 4px 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
body[data-state="live"] .dot { background: var(--live); }
body[data-state="connecting"] .dot { background: var(--wait); }
body[data-state="failed"] .dot { background: var(--off); }
main { flex: 1; display: flex; flex-direction: column; }
#view { position: relative; width: 100%; aspect-ratio: 616 / 308; background: #000; }
#view video { width: 100%; height: 100%; object-fit: contain; display: block; }
#message { position: absolute; inset: 0; margin: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 16px; color: var(--text);
  background: rgba(0, 0, 0, 0.6); }
#message:empty { display: none; }
#below { flex: 1; }