:root {
  --back: #16181c;
  --panel: #22252b;
  --line: #3a3f48;
  --text: #e8eaed;
  --muted: #9aa0a8;
  --accent: #4c9aff;
  --overlay: rgba(16, 18, 22, 0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }
body { background: var(--back); color: var(--text); font: 14px/1.4 "Segoe UI", system-ui, sans-serif; }

button, select, input { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; }
button { cursor: pointer; touch-action: manipulation; }
button:hover, select:hover { border-color: var(--accent); }
button:disabled { opacity: 0.5; cursor: default; }
button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0b1220; }
.primary { background: var(--accent); border-color: var(--accent); color: #0b1220; font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

label { display: block; margin: 12px 0 4px; color: var(--muted); }
input, select { width: 100%; }
h1, h2 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: 12px; margin-bottom: 0; }
.error { color: #f28b82; margin: 12px 0 0; }
.grow { flex: 1; }

.centered { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { width: 340px; max-width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 20px; }
.card .primary { width: 100%; margin-top: 16px; }
.empty { text-align: center; }
.empty .buttons { justify-content: center; flex-wrap: wrap; }
#url-dialog { width: 540px; }
#url-dialog code, #settings-url { font: 12px/1.4 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

#app { height: 100%; display: flex; flex-direction: column; }
header { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
#body { flex: 1; min-height: 0; display: flex; }
#empty { flex: 1; }
#grid { flex: 1; min-width: 0; min-height: 0; display: grid; gap: 6px; padding: 6px; }

.tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #000; border: 1px solid var(--line); border-radius: 4px; }
.tile.selected { border: 2px solid var(--accent); }
.tile .view { position: absolute; inset: 0; transform-origin: 0 0; }
.tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tile.dimmed canvas { opacity: 0.35; }

/* A phone scrolls the page with one finger until the picture is zoomed, then the finger moves the picture. */
.tile, .player-view { touch-action: pan-y; }
.tile.zoomed, .player-view.zoomed { touch-action: none; cursor: grab; }
.tile.zoomed:active, .player-view.zoomed:active { cursor: grabbing; }
.zoom-level { margin-left: auto; padding: 0 6px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--overlay); }
.zoom-level:not([hidden]) + .rec { margin-left: 0; }

.center-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: var(--muted); pointer-events: none; }
.top-bar { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--overlay); }
.name { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.path { font-size: 12px; white-space: nowrap; }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: goldenrod; }
.dot.live { background: limegreen; }
.dot.retrying { background: orangered; }
.dot.failed { background: indianred; }
.rec { margin-left: auto; padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; background: #d93025; color: #fff; }
.rec.error { background: none; color: #f28b82; border: 1px solid #f28b82; }

.controls { position: absolute; left: 0; right: 0; bottom: 0; display: none; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 8px; pointer-events: none; }
.tile:hover .controls, .tile.selected .controls { display: flex; }
.controls > * { pointer-events: auto; }

.pad { display: grid; grid-template: repeat(3, 34px) / repeat(3, 34px); gap: 2px; touch-action: none; user-select: none; }
.pad button { padding: 0; background: var(--overlay); touch-action: none; }
.pad button:active { background: var(--accent); color: #0b1220; }
.pad .up { grid-area: 1 / 2; }
.pad .left { grid-area: 2 / 1; }
.pad .right { grid-area: 2 / 3; }
.pad .down { grid-area: 3 / 2; }

.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.actions button, .actions select { width: auto; padding: 4px 8px; background: var(--overlay); }
.actions button[aria-pressed="true"] { background: var(--accent); }
.actions .record[aria-pressed="true"] { background: #d93025; border-color: #d93025; color: #fff; }

.danger { border-color: #f28b82; color: #f28b82; }
.danger:hover { background: #f28b82; color: #0b1220; }
.link { padding: 0; border: none; background: none; color: var(--accent); }
.link:hover { text-decoration: underline; }

#settings { flex: none; width: 340px; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 12px 16px 24px; }
.settings-head { display: flex; align-items: center; gap: 8px; }
.settings-head h2 { flex: 1; margin: 0; overflow-wrap: anywhere; }
.settings-head button { padding: 2px 8px; }
#settings section { padding: 12px 0; border-bottom: 1px solid var(--line); }
#settings section:last-child { border-bottom: none; }
#settings h3 { margin: 0 0 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
#settings dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; }
#settings dt { color: var(--muted); }
#settings dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
#settings code { font: 12px/1.4 ui-monospace, Consolas, monospace; }
#settings-record[aria-pressed="true"] { background: #d93025; border-color: #d93025; color: #fff; }
#settings-rec-state.error { color: #f28b82; }

.row { display: flex; flex-wrap: wrap; gap: 8px; }
a.button { display: inline-block; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 6px 12px; text-decoration: none; }
a.button:hover { border-color: var(--accent); }
label.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; color: var(--text); }
label.check input { width: auto; }

#player-dialog { width: min(1200px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 12px 16px 16px; }
.player-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.player-head h2 { flex: 1; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.player-head select { width: auto; }
.player-head button { padding: 2px 8px; }
.player-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.player-view { position: relative; overflow: hidden; background: #000; border-radius: 4px; aspect-ratio: 16 / 9; }
.player-view video { width: 100%; height: 100%; display: block; transform-origin: 0 0; }
.player-view .zoom-level { position: absolute; top: 8px; right: 8px; padding: 2px 8px; font-size: 12px; }
.player-message { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); background: rgba(0, 0, 0, 0.75); }
.player-side { display: flex; flex-direction: column; min-height: 0; }
.player-bar { display: flex; align-items: center; gap: 6px; }
.player-bar button { padding: 4px 8px; }
#player-clock { text-align: center; font-variant-numeric: tabular-nums; }
#player-list { flex: 1; min-height: 120px; max-height: 50vh; overflow-y: auto; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 4px; }
#player-list button { width: 100%; display: flex; justify-content: space-between; gap: 8px; border: none; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left; font-variant-numeric: tabular-nums; }
#player-list button:hover { background: var(--back); }
#player-list button[aria-current="true"] { background: var(--accent); color: #0b1220; }
#player-list .live-clip { color: #f28b82; }
#player-list button[aria-current="true"] .live-clip { color: #0b1220; }
.timeline { position: relative; height: 28px; margin-top: 12px; background: var(--back); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; overflow: hidden; }
.timeline .span { position: absolute; top: 3px; bottom: 3px; min-width: 2px; background: #3d6fb3; border-radius: 2px; }
.timeline .span.current { background: var(--accent); }
.timeline-head { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; pointer-events: none; }
.timeline-hours { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); padding: 2px 0 0; }

.overlay { position: absolute; pointer-events: none; overflow: visible; }
.overlay.drawing { pointer-events: auto; cursor: crosshair; }
.overlay .door { stroke: #ffd43b; stroke-width: 3; vector-effect: non-scaling-stroke; }
.overlay .door-arrow { fill: #ffd43b; }
.overlay .person { fill: none; stroke: #69db7c; stroke-width: 2; vector-effect: non-scaling-stroke; }
.overlay .handle { fill: #ffd43b; }

#settings-count[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #0b1220; }
#settings-count-state.error { color: #f28b82; }

#report-dialog { width: min(900px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 12px 16px 16px; }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 8px; }
.stat-tile { background: var(--back); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; }
.stat-tile .value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-tile .label { color: var(--muted); font-size: 12px; }
.chart-title { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.bars { position: relative; height: 140px; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); }
.bars .bar { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; cursor: default; }
.bars .bar span { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 0; }
.bars .bar:hover span, .bars .bar.selected span { background: #8fc0ff; }
.bars .bar.clickable { cursor: pointer; }
.bars .max { position: absolute; top: 0; left: 0; font-size: 11px; color: var(--muted); border-top: 1px dashed var(--line); width: 100%; pointer-events: none; }
.bar-axis { display: flex; gap: 2px; font-size: 11px; color: var(--muted); }
.bar-axis span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.chart-tip { position: fixed; z-index: 20; padding: 4px 8px; background: #000; border: 1px solid var(--line); border-radius: 4px; font-size: 12px; pointer-events: none; white-space: nowrap; }
#report-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
#report-table th, #report-table td { text-align: right; padding: 3px 8px; border-bottom: 1px solid var(--line); }
#report-table th:first-child, #report-table td:first-child { text-align: left; }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--muted); }

dialog { width: 420px; max-width: calc(100vw - 24px); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 20px; }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.find-row { display: flex; gap: 8px; }
.find-row input { flex: 1; min-width: 0; }
.found { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 220px; overflow-y: auto; }
.found button { display: block; width: 100%; text-align: left; padding: 6px 10px; }
.found .found-name { font-weight: 600; }
.found .found-kind { margin-left: 6px; font-size: 11px; color: var(--muted); }
.found .found-url { display: block; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.found .found-note { display: block; font-size: 12px; }
.found button[aria-pressed="true"] .found-kind, .found button[aria-pressed="true"] .found-url { color: inherit; }
#prompt-image { display: block; height: 60px; margin-bottom: 10px; background: #fff; }
#add-list { max-height: 280px; overflow: auto; }
.camera-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: var(--text); }
.camera-row input { width: auto; }

@media (max-width: 800px) {
  .hint { display: none; }
  .player-main { grid-template-columns: 1fr; }
  #player-list { max-height: 30vh; }
  #settings { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10; width: min(100vw, 380px); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5); }
  #grid { overflow: auto; grid-auto-rows: 56vw; }
}