*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #070b14;--bg2: #0d1117;--panel: #111827;--card: #1f2937;--border: #1e293b;--border2: #374151;--text: #e5e7eb;--muted: #6b7280;--green: #10b981;--amber: #f59e0b;--blue: #3b82f6;--red: #ef4444;--nav-h: 48px}html,body,#root{height:100%;overflow:hidden;background:var(--bg)}body{font-family:Segoe UI,system-ui,sans-serif;font-size:13px;color:var(--text)}.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;gap:16px;padding:0 20px;background:var(--bg2);border-bottom:1px solid var(--border);z-index:100}.nav-brand{display:flex;align-items:center;gap:8px;flex-shrink:0}.nav-icon{font-size:18px;color:var(--blue)}.nav-title{font-size:14px;font-weight:700;white-space:nowrap;letter-spacing:.3px}.nav-links{display:flex;gap:4px}.nav-link{padding:6px 16px;border-radius:6px;text-decoration:none;color:var(--muted);font-size:13px;font-weight:500;transition:background .12s,color .12s;border:1px solid transparent}.nav-link:hover{background:#1a2235;color:var(--text)}.nav-link.active{background:#1a2a45;color:var(--blue);border-color:#253a5a}.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-alert{background:#7f1d1d;border:1px solid #991b1b;color:#fca5a5;padding:3px 12px;border-radius:6px;font-size:12px;font-weight:700;animation:blink 1.4s ease infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.65}}.nav-ws{display:flex;align-items:center;gap:5px}.ws-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.ws-dot.ok{background:var(--green);box-shadow:0 0 5px var(--green)}.ws-dot.err{background:var(--red);animation:blink 1s infinite}.ws-lbl{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.8px}.nav-clock{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--card);border:1px solid var(--border);padding:3px 10px;border-radius:6px}.page-wrap{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;overflow:hidden}.live-page{display:flex;height:100%}.cam-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;background:#000;min-width:0;overflow:hidden}.cam-panel{position:relative;overflow:hidden;background:#050a14}.cam-img{width:100%;height:100%;object-fit:contain;display:block}.cam-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.cam-label{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:5px;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.4px;color:#fff}.cam-dot{width:7px;height:7px;border-radius:50%}.cam-state-chip{position:absolute;top:8px;right:8px;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:3px 10px;border-radius:5px;font-size:11px;font-weight:800;letter-spacing:.8px}.cam-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:13px}.cam-err-icon{font-size:28px;opacity:.4}.metrics-panel{width:230px;flex-shrink:0;display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--panel);border-left:1px solid var(--border);overflow-y:auto}.metrics-panel::-webkit-scrollbar{width:4px}.metrics-panel::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}.metrics-wait{color:var(--muted);font-size:12px;padding:24px 0;text-align:center}.section-hdr{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);padding-top:4px}.state-card{border:2px solid var(--green);border-radius:8px;padding:10px;text-align:center;background:var(--card)}.state-name{font-size:15px;font-weight:800;letter-spacing:.8px}.state-since{font-size:11px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}.alerts-card{background:#1f0e0e;border:1px solid #7f1d1d;border-radius:6px;padding:6px 8px;display:flex;flex-direction:column;gap:2px}.alert-line{color:#fca5a5;font-size:11px;font-weight:700;animation:blink 1.4s ease infinite}.badges-col{display:flex;flex-direction:column;gap:3px}.badge{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;font-size:12px;border:1px solid transparent}.badge-ok{background:#064e3b1a;border-color:#065f4666}.badge-warn{background:#78350f1a;border-color:#92400e66}.badge-lbl{flex:1}.badge-val{font-weight:700}.badge-ok .badge-val{color:var(--green)}.badge-warn .badge-val{color:var(--amber)}.time-bars{display:flex;flex-direction:column;gap:5px}.time-row{display:flex;align-items:center;gap:6px;font-size:11px}.time-lbl{width:72px;font-weight:600;font-size:11px}.time-bar-wrap{flex:1;height:5px;background:var(--border);border-radius:3px;overflow:hidden}.time-bar-fill{height:100%;border-radius:3px;transition:width .5s}.time-val{width:52px;text-align:right;font-size:11px;font-variant-numeric:tabular-nums;color:var(--text)}.stats-row{display:flex;gap:6px}.stat-cell{flex:1;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px 6px;text-align:center}.stat-num{font-size:22px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.stat-lbl{font-size:10px;color:var(--muted);margin-top:3px}.work-order{font-size:20px;font-weight:700;color:var(--amber);letter-spacing:3px;text-align:center}.det-list{display:flex;flex-direction:column;gap:3px}.det-item{display:flex;align-items:center;gap:6px;font-size:11px;padding:2px 0}.det-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.det-name{flex:1;color:var(--text)}.det-conf{color:var(--muted)}.an-page{height:100%;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}.an-page::-webkit-scrollbar{width:5px}.an-page::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}.an-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:14px}.an-empty-icon{font-size:40px;opacity:.3}.an-cards-row{display:flex;gap:12px}.an-stat-card{flex:1;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;min-width:0}.an-stat-val{font-size:26px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}.an-stat-lbl{font-size:11px;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.6px}.an-stat-sub{font-size:11px;color:var(--muted);margin-top:2px}.an-charts-row{display:flex;gap:14px;min-height:320px}.an-chart-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;min-width:0}.an-pie-card{flex:0 0 280px}.an-area-card,.an-bar-card{flex:1}.an-summary-card{flex:0 0 280px}.an-chart-title{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}.an-pie-legend{display:flex;flex-direction:column;gap:4px;margin-top:8px}.an-pie-row{display:flex;align-items:center;gap:7px;font-size:12px}.an-pie-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}.an-pie-row span:nth-child(2){flex:1;color:var(--muted)}.an-pie-row span:nth-child(3){font-variant-numeric:tabular-nums}.an-pie-pct{color:var(--muted);font-size:11px}.an-ops-row{display:flex;gap:14px}.an-tooltip{background:var(--card);border:1px solid var(--border2);border-radius:6px;padding:6px 10px;font-size:12px}.an-table{width:100%;border-collapse:collapse;font-size:12px}.an-table td{padding:5px 6px;border-bottom:1px solid var(--border)}.an-table td:first-child{color:var(--muted)}.an-table td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.an-table tr:last-child td{border-bottom:none}.annotate-page{height:100%;display:flex;flex-direction:column;position:relative}.ann-tabs{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg2);border-bottom:1px solid var(--border);flex-wrap:wrap}.ann-tabs-left{display:flex;gap:4px}.ann-tab{display:flex;align-items:center;gap:6px;padding:5px 12px;background:var(--card);border:1px solid var(--border);border-radius:6px;color:var(--muted);cursor:pointer;font-size:12px;transition:all .12s}.ann-tab:hover{background:var(--hover, #1a2235);color:var(--text)}.ann-tab.active{background:#1a2a45;border-color:var(--blue);color:var(--text)}.ann-tab-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.ann-tab-dot.has-frames{background:var(--green)}.ann-tab-dot.no-frames{background:var(--muted)}.ann-tab-name{font-weight:600}.ann-tab-count{font-size:10px;color:var(--muted)}.ann-tab.active .ann-tab-count{color:var(--blue)}.ann-extract-area{display:flex;align-items:center;gap:8px;margin-left:auto}.ann-extract-label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}.ann-extract-btn{padding:4px 12px;background:#1a2a45;border:1px solid var(--blue);border-radius:6px;color:var(--blue);font-size:12px;cursor:pointer;transition:background .12s}.ann-extract-btn:hover{background:#253a5a}.annotate-no-frames{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);background:var(--bg)}.ann-nf-icon{font-size:48px;opacity:.4}.ann-nf-title{font-size:16px;font-weight:600;color:var(--text)}.ann-nf-sub{font-size:12px;text-align:center}.spinner-sm{display:inline-block;width:14px;height:14px;border:2px solid var(--border2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}.annotate-iframe{flex:1;width:100%;border:none;display:block}.annotate-loading,.annotate-error{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted);font-size:14px;background:var(--bg)}.annotate-error-icon{font-size:36px;opacity:.4}.annotate-error-sub{font-size:12px;text-align:center;line-height:1.7}.annotate-error-sub code{color:var(--blue);background:var(--card);padding:1px 6px;border-radius:4px}.annotate-retry{margin-top:8px;padding:7px 20px;background:var(--card);border:1px solid var(--border2);border-radius:6px;color:var(--text);cursor:pointer;font-size:13px;transition:background .12s}.annotate-retry:hover{background:#253040}.spinner{width:32px;height:32px;border:3px solid var(--border2);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}