:root{--bg: #f4f5f8;--bg-sunken: #eceef3;--surface: #ffffff;--surface-2: #f6f7fa;--border: #e2e4ec;--border-strong: #cdd1dd;--text: #12131a;--text-dim: #4a5163;--text-faint: #7a8192;--accent: #ea580c;--accent-2: #2563eb;--accent-dim: rgba(234, 88, 12, .12);--ok: #0f9d63;--warn: #c07c0a;--crit: #dc2626;--info: #2563eb;--live: #dc2626;--rec: #dc2626;--radius: 12px;--radius-sm: 8px;--radius-pill: 999px;--brand-grad: linear-gradient(135deg, #f97316, #fb923c);--brand-glow: 0 0 40px rgba(249, 115, 22, .18);--shadow: 0 1px 2px rgba(15, 18, 30, .06), 0 8px 24px rgba(15, 18, 30, .06);--mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--sidebar-w: 236px}:root[data-theme=dark],:root:not([data-theme=light]){--bg: #09090f;--bg-sunken: #070710;--surface: #111120;--surface-2: #1a1a2e;--border: #1e1e35;--border-strong: #2c2c4d;--text: #ffffff;--text-dim: #cbd5e1;--text-faint: #94a3b8;--accent: #f97316;--accent-2: #3b82f6;--accent-dim: rgba(249, 115, 22, .14);--ok: #10b981;--warn: #f59e0b;--crit: #ef4444;--info: #3b82f6;--live: #ef4444;--rec: #ef4444;--shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .35)}:root[data-theme=dark]{color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--accent);text-decoration:none}a:hover{color:#fb923c}button,input,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.015em}code,.mono{font-family:var(--mono);font-size:.92em}::selection{background:var(--accent-dim)}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}::-webkit-scrollbar-track{background:transparent}.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100%}.sidebar{background:var(--bg-sunken);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px;font-weight:800;font-size:15px;letter-spacing:-.02em}.brand .dot{width:22px;height:22px;border-radius:7px;background:var(--brand-grad);box-shadow:var(--brand-glow);flex:none;position:relative}.brand .dot:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:3px;background:#ffffffe6;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.nav{padding:6px;display:flex;flex-direction:column;gap:1px}.nav-section{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);padding:16px 12px 6px;font-weight:700}.nav a{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:var(--radius-sm);color:var(--text-dim);font-weight:500;transition:background .12s,color .12s}.nav a:hover{background:var(--surface-2);color:var(--text)}.nav a.active{background:var(--accent-dim);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}.nav a .ico{width:16px;text-align:center;opacity:.9}.nav .badge{margin-left:auto;background:var(--crit);color:#fff;border-radius:var(--radius-pill);font-size:10px;padding:1px 6px;font-weight:700}.main{display:flex;flex-direction:column;min-width:0;height:100%}.topbar{display:flex;align-items:center;gap:14px;padding:0 22px;height:54px;flex:none;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.topbar h1{font-size:15px;font-weight:700}.topbar .spacer{flex:1}.topbar .clock{font-family:var(--mono);font-size:13px;color:var(--text-dim)}.content{flex:1;overflow-y:auto;padding:22px}.content.wide{padding:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}.card-h h3{font-size:13px;font-weight:700}.card-h .sub{color:var(--text-faint);font-weight:500;font-size:12px}.card-b{padding:16px}.grid{display:grid;gap:14px}.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.grid.c4{grid-template-columns:repeat(4,1fr)}.grid.auto{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}@media (max-width: 1100px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 720px){.app{grid-template-columns:1fr}.sidebar{display:none}.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}.tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:15px 17px}.tile .label{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:700}.tile .value{font-size:27px;font-weight:800;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums}.tile .delta{font-size:12px;color:var(--text-dim);margin-top:3px}.pill{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;letter-spacing:.02em}.pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}.pill.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}.pill.crit{background:color-mix(in srgb,var(--crit) 16%,transparent);color:var(--crit)}.pill.info{background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info)}.pill.mute{background:var(--surface-2);color:var(--text-dim)}.pill .led{width:7px;height:7px;border-radius:50%;background:currentColor}.pill.live .led{animation:pulse 1.4s infinite}.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-weight:600;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s,transform .06s}.btn:hover{border-color:var(--accent)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--brand-grad);border-color:transparent;color:#1a1205;font-weight:700}.btn.primary:hover{box-shadow:var(--brand-glow)}.btn.danger{background:var(--crit);border-color:var(--crit);color:#fff}.btn.ghost{background:transparent;border-color:transparent}.btn.ghost:hover{background:var(--surface-2);border-color:transparent}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:disabled:hover{box-shadow:none}.btn.sm{padding:4px 10px;font-size:12px}.btn-row{display:flex;gap:8px;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}.field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}.field input,.field select,.field textarea{padding:8px 11px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--bg);color:var(--text);transition:border-color .12s,box-shadow .12s}.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.field.row{flex-direction:row;align-items:center;gap:8px}.field.row label{text-transform:none;letter-spacing:0}table{width:100%;border-collapse:collapse;font-size:12px}th{text-align:left;padding:9px 12px;color:var(--text-faint);font-size:10px;text-transform:uppercase;letter-spacing:.07em;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:top}tr:hover td{background:var(--surface-2)}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}.toolbar input,.toolbar select{padding:7px 11px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface)}.toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.toolbar .search{min-width:260px}.empty{padding:40px;text-align:center;color:var(--text-faint)}.muted{color:var(--text-dim)}.faint{color:var(--text-faint)}.right{text-align:right}.nowrap{white-space:nowrap}.tnum{font-variant-numeric:tabular-nums}.mv-grid{display:grid;gap:6px;padding:12px;background:#000;height:calc(100vh - 54px)}.mv-tile{position:relative;background:#08080e;border:1px solid #16162a;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.mv-tile video,.mv-tile .mv-placeholder{width:100%;height:100%}.mv-tile video{object-fit:contain;background:#000}.mv-grid.fill .mv-tile video{object-fit:cover}.mv-tile .mv-placeholder{object-fit:cover}.mv-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#55607a;gap:6px;font-size:12px;background:repeating-linear-gradient(45deg,#0b0b16,#0b0b16 10px,#101024 10px,#101024 20px)}.mv-osd{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:8px}.mv-osd .top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}.mv-osd .name{background:#000000b3;color:#fff;padding:2px 8px;border-radius:5px;font-weight:700;font-size:12px}.mv-osd .rec{pointer-events:auto;cursor:help;display:inline-flex;align-items:center;gap:5px;background:#000000b8;color:#fff;padding:2px 8px;border-radius:5px;font-weight:800;font-size:11px;letter-spacing:.06em}.mv-osd .rec:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 var(--rec);animation:rec-pulse 1.6s infinite}@keyframes rec-pulse{0%{box-shadow:0 0 color-mix(in srgb,var(--rec) 70%,transparent)}70%{box-shadow:0 0 0 7px transparent}to{box-shadow:0 0 0 0 transparent}}.mv-osd .bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:6px}.mv-osd .meta{background:#000000a6;color:#cbd5e1;font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mv-audio{display:flex;gap:2px;align-items:flex-end;height:26px;flex:none}.mv-audio i{width:3px;background:var(--ok);border-radius:1px}.mv-tile.alarm{border-color:var(--crit);box-shadow:inset 0 0 0 2px var(--crit)}.tl{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.tl svg{display:block;width:100%;touch-action:none}.tl .lane-label{fill:var(--text-faint);font-size:10px;font-family:var(--sans)}.tl svg text{pointer-events:none}.tl-scroll{position:relative;height:22px;margin:4px 8px 2px;background:var(--surface-2);border:1px solid var(--border);border-radius:6px;cursor:pointer;touch-action:none;overflow:hidden}.tl-scroll-seg{position:absolute;top:3px;bottom:3px;background:var(--ok);opacity:.35;border-radius:2px;pointer-events:none}.tl-scroll-head{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);transform:translate(-1px);pointer-events:none}.tl-scroll-win{position:absolute;top:0;bottom:0;min-width:8px;background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid var(--accent);border-radius:5px;cursor:grab}.tl-scroll-win:active{cursor:grabbing}.tl-scroll-h{position:absolute;top:-1px;bottom:-1px;width:8px;cursor:ew-resize}.tl-scroll-h.l{left:-4px}.tl-scroll-h.r{right:-4px}.tl-scroll-h:after{content:"";position:absolute;top:50%;left:50%;width:2px;height:10px;transform:translate(-50%,-50%);background:var(--accent);border-radius:1px}.login-wrap{display:grid;place-items:center;height:100%;background:radial-gradient(900px 500px at 50% -8%,rgba(249,115,22,.18),transparent 60%),radial-gradient(700px 500px at 85% 110%,rgba(59,130,246,.12),transparent 60%),var(--bg)}.login-card{width:372px;padding:30px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow),var(--brand-glow)}.login-card .brand{padding:0 0 6px}.login-card .btn.primary{width:100%;justify-content:center}.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:50}.toast{background:var(--surface);border:1px solid var(--border-strong);border-left:3px solid var(--accent);border-radius:var(--radius-sm);padding:10px 14px;box-shadow:var(--shadow);max-width:340px}.toast.err{border-left-color:var(--crit)}.toast.ok{border-left-color:var(--ok)}.kv{display:grid;grid-template-columns:max-content 1fr;gap:5px 16px;font-size:12px}.kv dt{color:var(--text-faint)}.kv dd{margin:0;font-variant-numeric:tabular-nums}.bar{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden}.bar>span{display:block;height:100%;background:var(--brand-grad)}.split{display:flex;gap:16px;align-items:flex-start}.split>*{flex:1;min-width:0}.section-title{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-weight:700;margin:22px 0 10px}pre{border-radius:var(--radius-sm)!important}