@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('/assets/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url('/assets/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('/assets/barlow-condensed-700.woff2') format('woff2'); }

/* Always dark: it's a camera wall, often on a TV. Legends Black palette. */
:root {
  --page: #0a0a0a; --surface: #161616; --line: #2a2a2a; --ink: #ededed; --muted: #9a9a9a;
  --red: #e5484d; --pos: #4ade80;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--page); color: var(--ink); font: 15px/1.4 var(--sans); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
button { font: inherit; color: inherit; }

.bar { display: flex; align-items: center; gap: 14px; padding: 10px 16px; background: #050505; border-bottom: 1px solid var(--line); }
.bar img { width: 28px; height: 28px; }
.bar h1 { margin: 0; font: 700 20px/1 var(--cond); letter-spacing: .04em; text-transform: uppercase; }
.bar .count { color: var(--muted); }
.bar .sp { flex: 1; }
.bar a, .bar button { color: var(--muted); text-decoration: none; background: none; border: 1px solid var(--line); padding: 6px 12px; cursor: pointer; }
.bar a:hover, .bar button:hover { color: var(--ink); border-color: var(--muted); }

.grid { display: grid; gap: 8px; padding: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }
.tile { position: relative; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--line); padding: 0; cursor: pointer; overflow: hidden; text-align: left; }
.tile video, .full video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--pos); }
.msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.tile.off { cursor: default; }

.full { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; }
.full .bar { position: absolute; top: 0; left: 0; right: 0; background: rgba(0,0,0,.6); border: 0; }
.full .msg { pointer-events: none; }

.login { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.login form { width: min(100%, 340px); display: flex; flex-direction: column; gap: 12px; }
.login h1 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 700 26px/1 var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.login h1 img { width: 40px; height: 40px; }
.login label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.login input { font: inherit; padding: 10px 12px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.login button { padding: 11px; background: var(--red); border: 0; font-weight: 600; cursor: pointer; }
.login .err { color: var(--red); margin: 0; }