:root{--bg: #0d1117;--bg-raised: #161b22;--bg-input: #0b0f14;--border: #2a313a;--border-strong: #3a434f;--text: #e6edf3;--text-dim: #8b949e;--accent: #2f81f7;--accent-dim: #1f6feb;--danger: #f85149;--ok: #3fb950;--warn: #d29922;--radius: 6px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.45 system-ui,Segoe UI,sans-serif;overflow:hidden}button,input,select{font:inherit;color:inherit}button{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;cursor:pointer}button:hover:not(:disabled){border-color:var(--border-strong)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent-dim);border-color:var(--accent)}button.primary:hover:not(:disabled){background:var(--accent)}button.danger{color:var(--danger)}button.active{background:var(--accent-dim);border-color:var(--accent)}button.icon{padding:4px 8px}input,select{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;width:100%}input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px}hr{border:none;border-top:1px solid var(--border);margin:12px 0}.app{display:flex;flex-direction:column;height:100%}.boot{display:grid;place-items:center;height:100%;color:var(--text-dim)}.login{display:grid;place-items:center;height:100%;padding:16px}.login form{background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;padding:24px;width:min(360px,100%)}.login h1{font-size:18px;margin:0 0 4px}.login p{color:var(--text-dim);font-size:13px;margin:0 0 16px}.login .field{margin-bottom:12px}.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 12px;background:var(--bg-raised);border-bottom:1px solid var(--border)}.toolbar .group{display:flex;align-items:center;gap:4px}.toolbar .spacer{flex:1}.toolbar .label{font-size:12px;color:var(--text-dim);margin-right:2px}.grid{flex:1;display:grid;gap:2px;padding:2px;background:#000;overflow:hidden}.tile{position:relative;background:#000;border:1px solid var(--border);border-radius:3px;overflow:hidden;min-height:0}.tile.empty{display:grid;place-items:center;color:var(--text-dim);cursor:pointer;border-style:dashed}.tile.empty:hover{border-color:var(--accent);color:var(--text)}.tile video{width:100%;height:100%;object-fit:contain;display:block;background:#000}.tile .caption{position:absolute;left:0;bottom:0;padding:2px 6px;font-size:11px;background:#0009;border-top-right-radius:4px;pointer-events:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tile .overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8px;font-size:12px;color:var(--text-dim);background:#00000073;pointer-events:none}.tile .overlay.error{color:var(--danger)}.tile .tile-actions{position:absolute;top:4px;right:4px;display:none;gap:4px}.tile:hover .tile-actions{display:flex}.tile-actions button{background:#000000a6;padding:2px 7px;font-size:12px}.modal-backdrop{position:fixed;inset:0;background:#0009;display:grid;place-items:center;padding:16px;z-index:10}.modal{background:var(--bg-raised);border:1px solid var(--border);border-radius:10px;width:min(720px,100%);max-height:min(88vh,100%);display:flex;flex-direction:column}.modal.wide{width:min(1000px,100%)}.modal.narrow{width:min(420px,100%)}.modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}.modal header h2{font-size:15px;margin:0}.modal .body{padding:16px;overflow:auto}.modal footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}.nvr-list{display:flex;flex-direction:column;gap:8px}.nvr-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius)}.nvr-row .info{flex:1;min-width:0}.nvr-row .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nvr-row .meta{font-size:12px;color:var(--text-dim)}.dot{width:8px;height:8px;border-radius:50%;background:var(--text-dim);flex:none}.dot.online{background:var(--ok)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.form-grid .full{grid-column:1 / -1}.checkbox{display:flex;align-items:flex-start;gap:8px}.checkbox input{width:auto;margin-top:3px}.checkbox span{font-size:13px}.hint{font-size:12px;color:var(--text-dim);margin-top:4px}.alert{border-radius:var(--radius);padding:8px 10px;font-size:13px;margin-bottom:12px;border:1px solid}.alert.error{color:var(--danger);border-color:var(--danger);background:#f8514914}.alert.ok{color:var(--ok);border-color:var(--ok);background:#3fb95014}.alert.warn{color:var(--warn);border-color:var(--warn);background:#d2992214}.picker-group{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;overflow:hidden}.picker-group>button{width:100%;text-align:left;border:none;border-radius:0;display:flex;align-items:center;gap:8px}.picker-channels{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px;padding:8px;border-top:1px solid var(--border)}.picker-channels button{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.record-list{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow:auto}.record-list button{display:flex;justify-content:space-between;gap:12px;text-align:left}.playback-layout{display:grid;grid-template-columns:320px 1fr;gap:16px}.playback-video{position:relative;background:#000;border:1px solid var(--border);border-radius:var(--radius);aspect-ratio:16 / 9;overflow:hidden}.playback-video video{width:100%;height:100%;object-fit:contain;display:block}@media(max-width:820px){.playback-layout,.form-grid{grid-template-columns:1fr}}