:root{--bg: #07090d;--panel: #0d1219;--panel2: #0a0e14;--line: #1b232f;--text: #e8edf4;--muted: #7d8a9c;--accent: #25d0a4;--warn: #f4b740;--crit: #ff4d5e}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(1200px 600px at 70% -10%,#0e1620 0,var(--bg) 60%);color:var(--text);font:14px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{display:flex;flex-direction:column;height:100vh}.bar{display:flex;align-items:center;gap:18px;padding:11px 18px;border-bottom:1px solid var(--line);background:var(--panel)}.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:3px;white-space:nowrap}.brand .eye{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--accent) 0 3px,transparent 4px),radial-gradient(circle at 50% 50%,var(--text) 0 6px,transparent 7px);box-shadow:0 0 12px var(--accent)}.brand .tag{font-weight:400;letter-spacing:.3px;color:var(--muted);font-size:11px}.rule{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap;min-width:0}.rule-input{flex:1;min-width:220px;background:var(--panel2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-size:13px}.rule-input:focus{outline:none;border-color:var(--accent)}.apply{background:var(--accent);color:#04130f;border:0;border-radius:8px;padding:9px 16px;font-weight:700;cursor:pointer;font-size:13px}.apply:hover{filter:brightness(1.1)}.presets{display:flex;gap:6px;flex-wrap:wrap}.chip{background:var(--panel2);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font-size:12px;cursor:pointer;white-space:nowrap}.chip:hover{color:var(--text);border-color:var(--accent)}.status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;letter-spacing:1px;white-space:nowrap}.dot{width:9px;height:9px;border-radius:50%}.dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 1.4s infinite}.dot.off{background:var(--muted)}.feed{opacity:.75}.feed.live{color:var(--accent)}.feed.offline{color:var(--crit)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.grid{flex:1;display:grid;grid-template-columns:1fr 380px;gap:14px;padding:14px;min-height:0}.stage{position:relative;background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}.stage video{width:100%;height:100%;object-fit:contain;background:#000}.overlay-msg{position:absolute;color:var(--muted);font-size:14px;letter-spacing:1px}.alerts{background:var(--panel);border:1px solid var(--line);border-radius:12px;display:flex;flex-direction:column;min-height:0}.alerts.alarm{border-color:var(--crit);box-shadow:0 0 0 1px var(--crit),0 0 30px -8px var(--crit)}.alerts h2{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;color:var(--muted);padding:13px 15px;border-bottom:1px solid var(--line);text-transform:uppercase}.alerts .count{margin-left:auto;background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--text)}.alerts ul{list-style:none;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:9px}.alert{display:flex;gap:10px;padding:9px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--muted);animation:in .25s ease}.alert.critical{border-left-color:var(--crit);background:linear-gradient(90deg,rgba(255,77,94,.1),var(--panel2) 40%)}.alert.warning{border-left-color:var(--warn)}.alert.info{border-left-color:var(--accent)}.alert .thumb{width:84px;height:60px;object-fit:cover;border-radius:6px;flex:0 0 auto;background:#000;border:1px solid var(--line)}.alert .body{display:flex;flex-direction:column;gap:4px;min-width:0}.alert .row1{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.badge{font-size:10px;font-weight:800;letter-spacing:1px;padding:2px 7px;border-radius:5px}.badge.critical{background:var(--crit);color:#fff}.badge.warning{background:var(--warn);color:#2a1c00}.badge.info{background:#25d0a42e;color:var(--accent)}.alert .atype{font-weight:600;color:var(--text);font-size:12px}.alert .t{margin-left:auto;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}.alert .desc{color:#c4cdd9;font-size:12.5px}.alerts .empty{color:var(--muted);text-align:center;padding:24px 0}@keyframes in{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:none}}@media (max-width: 860px){.grid{grid-template-columns:1fr}.rule{order:3;flex-basis:100%}}