* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, system-ui, sans-serif; background: #000; color: #fff; }
header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #1c1c1c; }
#brand-logo { height: 28px; width: auto; border-radius: 4px; }
h1 { font-size: 1.1rem; margin: 0; font-weight: 600; }
/* auto-fit: 1 camera fills the row, 2 sit side-by-side, 3-4 wrap to 2×2;
   collapses to a single column on phones (min() guards narrow viewports). */
.grid { display: grid; gap: 8px; padding: 8px;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.cell { position: relative; background: #111; border-radius: 8px; overflow: hidden; aspect-ratio: 16/9; cursor: pointer; }
.cell video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.cell .slot-badge { position: absolute; top: 6px; left: 8px; font-size: 0.7rem;
        background: rgba(0,0,0,0.55); padding: 2px 6px; border-radius: 4px; }
.status { padding: 16px; text-align: center; color: #bbb; }