:root { --bg: #fff; --fg: #1b1b1b; --muted: #6a6a6a; --line: #ddd; --bad: #b3261e; --accent: #2457d6; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #16181c; --fg: #e8e8e8; --muted: #9a9a9a; --line: #34373d; --bad: #ff8a80; --accent: #8ab4f8; color-scheme: dark; }
}
body { font: 15px/1.4 system-ui, sans-serif; margin: 0; background: var(--bg); color: var(--fg); }
header { display: flex; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header h1 { font-size: 18px; margin: 0 auto 0 0; }
main { padding: 16px; max-width: 1400px; }
input, select, button { font: inherit; }
.bad { color: var(--bad); }
.hint, small { color: var(--muted); }
.bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; }
th, td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
tr[draggable] { cursor: grab; }
.grip { color: var(--muted); width: 1em; }
.meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin: 12px 0; }
.meta label { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.grid .cell { width: 22%; cursor: pointer; border: 1px dashed var(--line); }
.grid .cell.over { outline: 2px solid var(--accent); }
.grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; display: block; }
.grid .tools button { display: block; margin-bottom: 4px; }
.empty { color: var(--muted); padding: 24px 0; text-align: center; }
.login { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 10vh auto; }
button.danger { color: var(--bad); }
pre { background: color-mix(in srgb, var(--fg) 8%, transparent); padding: 8px; overflow-x: auto; }
p.live { color: var(--accent); border: 1px solid var(--accent); padding: 6px 10px; }
.grid .cell.live { cursor: default; }