:root{font-family:"Segoe UI",Arial,sans-serif;color:#eff4f2;background:#030708;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;overflow:hidden}#tv-stage{width:100vw;height:100dvh;background:#030708;position:relative}#tv-grid{width:100%;height:100%;display:flex;flex-wrap:wrap;gap:3px;align-content:stretch}.tv-camera{position:relative;overflow:hidden;background:#071013;flex:none;width:var(--cell-width);height:var(--cell-height)}.tv-camera header{height:28px;display:flex;align-items:center;gap:8px;padding:2px 8px;background:#142128;overflow:hidden}.tv-camera h2{font-size:clamp(11px,1.2vw,18px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin:0}.tv-camera time{font-size:12px;white-space:nowrap}.tv-camera header button{background:none;border:0;font-size:16px;padding:0 5px;opacity:0}.tv-camera:hover header button,.tv-camera header button:focus-visible{opacity:1}.tv-camera video{display:block;width:100%;height:calc(100% - 28px);object-fit:contain}.tv-camera .tv-state{position:absolute;inset:28px 0 0;display:grid;place-items:center;text-align:center;padding:5px;font-size:clamp(10px,1vw,15px);background:#071013b0}.tv-camera.focused header{height:48px}.tv-camera.focused video{height:calc(100% - 48px)}.tv-camera.focused h2{font-size:clamp(18px,2vw,30px)}.tv-camera.focused .tv-state{top:48px}#tv-tools{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;max-width:calc(100% - 20px);width:max-content;padding:10px 14px;background:#17282fee;border:1px solid #526869;border-radius:10px;transition:opacity .2s;opacity:0;pointer-events:none}#tv-stage.tools-visible #tv-tools,body.keyboard-tools #tv-tools:focus-within{opacity:1;pointer-events:auto}button,select,a{font:inherit;color:#fff;border:1px solid #799094;border-radius:5px;padding:6px 9px;background:#253745;text-decoration:none;cursor:pointer}button:hover,a:hover{border-color:#57b33e}button:focus-visible,a:focus-visible{outline:2px solid #57b33e;outline-offset:2px}#tv-tools strong{color:#8ed778}#tv-count,#tv-status{font-size:12px}#tv-status{color:#ffdd93}#tv-empty{position:absolute;inset:15% 10%;display:grid;place-items:center;text-align:center;pointer-events:none}dialog{max-width:560px;border:1px solid #647477;border-radius:12px;padding:26px;background:#17282f;line-height:1.55}dialog::backdrop{background:#000a}dialog h1{font-size:24px}dialog button{background:#3b862b}body:has(dialog[open]) #tv-tools{opacity:1}@media(max-width:600px){#tv-tools strong{display:none}.tv-camera time{font-size:10px}}

.tv-camera{container-type:inline-size}.tv-camera h2{font-size:clamp(16px,4.4cqw,26px)}.tv-camera.focused h2{font-size:clamp(26px,3cqw,42px)}.tv-camera:focus-visible{outline:2px solid #57b33e;outline-offset:-2px}.tv-actions{position:absolute;bottom:8px;left:8px;right:8px;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:5px;background:#142a22eb;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s}.tv-stream{font-size:12px}.tv-actions button{font-size:12px;padding:4px 7px}.tv-camera:is(:hover,:focus-within,.touch-tools) .tv-actions,.tv-camera:is(:hover,:focus-within,.touch-tools) header button{opacity:1;pointer-events:auto}#tv-rename input{display:block;width:100%;padding:10px;margin:8px 0 15px;font:inherit}
.tv-placeholder{display:grid;place-items:center;text-align:center;color:#9aacaa;font-size:12px;padding:8px}

/* Distribuição automática e controles sobrepostos, sem reservar faixas nos vídeos. */
.tv-camera header,.tv-camera.focused header{position:absolute;inset:0 0 auto;height:auto;min-height:20px;z-index:2;padding:3px 6px;background:linear-gradient(#07100dc9,transparent);pointer-events:none}.tv-camera h2{font-size:clamp(10px,3.5cqw,19px);text-shadow:0 1px 3px #000}.tv-camera.focused h2{font-size:clamp(20px,3cqw,36px)}.tv-camera video,.tv-camera.focused video{height:100%;width:100%;object-fit:contain}.tv-camera .tv-state,.tv-camera.focused .tv-state{inset:0}.tv-camera header button{pointer-events:none}.tv-camera:is(:hover,:focus-within,.touch-tools) header button{opacity:1;pointer-events:auto}.tv-actions{left:3px;right:3px;bottom:3px;gap:3px;padding:3px}.tv-actions button{font-size:10px;padding:3px 5px}.tv-stream{font-size:10px}.tv-ptz-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:220px;margin:12px auto}.tv-ptz-lenses{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}#tv-ptz button:disabled{opacity:.4;cursor:not-allowed}#tv-ptz [data-tv-ptz]{touch-action:none;user-select:none}#tv-ptz{color:#e8f5e7}#tv-ptz p{font-size:12px}#tv-ptz label{font-size:12px}

.tv-actions,#tv-tools,.tv-camera header button{visibility:hidden;transition:none}.tv-camera:is(:hover,:focus-within,.touch-tools) .tv-actions,.tv-camera:is(:hover,:focus-within,.touch-tools) header button,#tv-stage.tools-visible #tv-tools,body.keyboard-tools #tv-tools:focus-within,body:has(dialog[open]) #tv-tools{visibility:visible}body.keyboard-tools #tv-tools:focus-within{opacity:1;pointer-events:auto}#tv-columns{font-size:11px;padding:4px}#tv-tools label{font-size:11px}

body.tv-away #tv-tools{visibility:hidden!important;opacity:0!important;pointer-events:none!important}

/* The last row expands to the edges instead of reserving missing columns. */
#tv-grid{position:relative;display:block}
.tv-camera{position:absolute;left:var(--cell-left,0);top:var(--cell-top,0)}
.tv-camera video,.tv-camera.focused video{object-fit:cover}
.tv-camera .tv-actions{max-height:calc(100% - min(var(--tv-tools-clearance,85px),35%) - 6px);overflow:auto;scrollbar-width:thin}