:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#1976d2;text-decoration:inherit}a:hover{color:#1565c0}body{margin:0;padding:0;min-width:320px;min-height:100vh;width:100vw;height:100vh;overflow:hidden}#root{width:100%;height:100%}h1{font-size:3.2em;line-height:1.1}h2{font-size:2em;line-height:1.2}h3{font-size:1.5em;line-height:1.3}.dark-theme{color-scheme:dark;color:#e0e0e0;background-color:#0f0f0f}.dark-theme a{color:#64b5f6}.dark-theme a:hover{color:#90caf9}.filter-panel{display:flex;flex-direction:column;gap:10px}.filter-group label{font-size:12px;font-weight:600;color:#333}.filter-group input,.filter-group select{padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff}.filter-group input:focus,.filter-group select:focus{outline:none;border-color:#667eea}.time-mode-selector{display:flex;gap:8px}.time-mode-selector button{flex:1;padding:6px 10px;border:1px solid #ddd;border-radius:4px;background:#fff;font-size:11px;font-weight:500;cursor:pointer;transition:all .2s}.time-mode-selector button:hover{background:#f5f5f5}.time-mode-selector button.active{background:#667eea;color:#fff;border-color:#667eea}.filter-actions{display:flex;gap:8px;margin-top:4px}.btn-primary,.btn-secondary{flex:1;padding:8px 12px;border:none;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover{background:#5568d3}.btn-secondary{background:#e0e0e0;color:#333}.btn-secondary:hover{background:#d0d0d0}.dark-theme .filter-panel{background:#1a1a1a;border-color:#3a3a3a}.dark-theme .filter-panel h3{color:#e0e0e0;border-bottom-color:#3a3a3a}.dark-theme .filter-group select,.dark-theme .filter-group input{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .time-mode-selector button{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .time-mode-selector button:hover{background:#2a2a2a}.dark-theme .time-mode-selector button.active{background:#64b5f6;color:#0f0f0f;border-color:#64b5f6}.dark-theme .checkbox-group{background:#242424;border-color:#3a3a3a}.dark-theme .checkbox-label{color:#e0e0e0}.dark-theme .checkbox-label input:checked+span{color:#e0e0e0}.dark-theme .btn-primary:hover{background:#90caf9}.dark-theme .btn-secondary{background:#3a3a3a;color:#e0e0e0}.dark-theme .btn-secondary:hover{background:#4a4a4a}.flow-heatmap{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;padding:20px}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none}.image-overlay-wrapper{position:relative;line-height:0}.image-overlay-wrapper .background-img{display:block;width:100%;border:1px solid #444;border-radius:4px;box-shadow:0 4px 12px #0000004d}.paths-canvas{position:absolute;top:0;left:0;pointer-events:none}.heatmap-canvas{display:block;border:1px solid #444;border-radius:4px;box-shadow:0 4px 12px #0000004d}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:#999;font-size:15px}.dark-theme .flow-heatmap{background:#0f0f0f}.dark-theme .flow-heatmap h3{color:#e0e0e0}.dark-theme .control-group input[type=range]{background:#3a3a3a}.dark-theme .control-group input[type=range]::-webkit-slider-thumb{background:#64b5f6}.dark-theme .control-group input[type=range]::-moz-range-thumb{background:#64b5f6}.dwell-heatmap{display:flex;flex-direction:column;gap:16px;width:100%;height:100%}.heatmap-controls{display:flex;gap:16px;align-items:flex-end;background:#fff;padding:16px;border-radius:8px;box-shadow:0 2px 4px #0000001a;flex-wrap:wrap}.mode-toggle{display:flex;border:1px solid #ddd;border-radius:4px;overflow:hidden}.mode-toggle button{flex:1;padding:5px 10px;border:none;background:#f5f5f5;color:#555;cursor:pointer;font-size:12px;font-weight:500;white-space:nowrap}.mode-toggle button.active{background:#667eea;color:#fff}.mode-toggle button:not(.active):hover{background:#e8e8e8}.control-group{display:flex;flex-direction:column;gap:8px;flex:1;min-width:150px}.control-group label{font-size:13px;font-weight:600;color:#333}.control-group input[type=range]{width:100%;height:6px;border-radius:3px;background:#ff8c00;outline:none;-webkit-appearance:none}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0000004d}.control-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0000004d}.control-group input[type=number]{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:13px;background:#fff;transition:border-color .2s}.control-group input[type=number]:focus{outline:none;border-color:#667eea}.control-group .btn-query{padding:10px 16px;border:2px solid #667eea;border-radius:4px;background:#667eea;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;text-transform:uppercase;letter-spacing:.5px}.control-group .btn-query:hover:not(:disabled){background:#4c5fd5;border-color:#4c5fd5;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.control-group .btn-query:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 4px #667eea33}.control-group .btn-query:disabled{background:#ccc;border-color:#ccc;cursor:not-allowed;opacity:.6}.idle-slider-group{flex:2;min-width:220px}.range-labels{display:flex;justify-content:space-between;font-size:11px;color:#888;margin-top:-4px}.stats-group{min-width:110px;flex:0 0 auto}.stats-badge{display:flex;align-items:baseline;gap:4px;padding:6px 10px;background:#f0f4ff;border:1px solid #d0d8f0;border-radius:6px}.stats-count{font-size:20px;font-weight:700;color:#ff7800}.stats-unit{font-size:12px;color:#666}.dwell-legend{display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fff;border:1px solid #ddd;border-radius:6px}.legend-swatch{width:28px;height:16px;border-radius:4px;background:#ff7800bf;border:1px solid rgba(255,120,0,.9);flex-shrink:0}.legend-label{font-size:12px;font-weight:500;color:#666;white-space:nowrap}.loading{display:flex;align-items:center;justify-content:center;padding:40px;color:#007bff;font-size:15px}.canvas-container{flex:1;min-height:0;position:relative;border-radius:4px;display:flex;align-items:center;justify-content:center;overflow:hidden}.heatmap-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;pointer-events:none}.canvas-wrapper .background-img{display:block;width:100%;border:1px solid #444;border-radius:4px;box-shadow:0 4px 12px #0000004d}.canvas-wrapper{position:relative;display:inline-block}.aoi-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:default;z-index:2}.aoi-controls{min-width:120px}.aoi-buttons{display:flex;gap:6px}.btn-aoi-save{background:#ff6d00!important;color:#fff!important;border-color:#ff6d00!important;font-weight:700}.btn-aoi-save:hover{background:#e65100!important;border-color:#e65100!important}.query-floor{font-weight:400;font-size:11px;color:#888;margin-left:4px}.dark-theme .query-floor{color:#666}.dark-theme .dwell-heatmap{background:#0f0f0f}.dark-theme .dwell-heatmap h3{color:#e0e0e0}.dark-theme .heatmap-controls{background:#1a1a1a;border-color:#3a3a3a;box-shadow:0 2px 8px #00000080}.dark-theme .control-group label{color:#b0b0b0}.dark-theme .control-group input[type=range]{background:#ffa726}.dark-theme .control-group input[type=range]::-webkit-slider-thumb{background:#242424;border-color:#64b5f6}.dark-theme .control-group input[type=range]::-moz-range-thumb{background:#242424;border-color:#64b5f6}.dark-theme .control-group input[type=number]{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .control-group input[type=number]:focus{border-color:#64b5f6;background:#2a2a2a}.dark-theme .control-group .btn-query{background:#64b5f6;border-color:#64b5f6;color:#0f0f0f}.dark-theme .control-group .btn-query:hover:not(:disabled){background:#90caf9;border-color:#90caf9;box-shadow:0 2px 8px #64b5f666}.dark-theme .control-group .btn-query:active:not(:disabled){box-shadow:0 1px 4px #64b5f64d}.dark-theme .control-group .btn-query:disabled{background:#3a3a3a;border-color:#3a3a3a;color:#666}.dark-theme .range-labels{color:#666}.dark-theme .stats-badge{background:#1e2230;border-color:#2a3050}.dark-theme .stats-count{color:#fa4}.dark-theme .stats-unit{color:#888}.dark-theme .dwell-legend{background:#1a1a1a;border-color:#3a3a3a}.dark-theme .legend-label{color:#999}.dark-theme .heatmap-canvas{border-color:#3a3a3a}.dark-theme .loading,.dark-theme .no-data{color:#999}.ws-video-player{position:relative;width:100%;height:100%;display:block;background:#000}.ws-video-player.error{display:flex;justify-content:center;align-items:center}.error-message{text-align:center;color:#f44;padding:20px}.error-message p{margin-bottom:15px;font-size:16px}.error-message button{padding:8px 16px;background:#444;color:#fff;border:none;border-radius:4px;cursor:pointer}.error-message button:hover{background:#666}.video-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;z-index:10}.spinner{border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite;margin:0 auto 10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.video-element{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:top left;display:block}.video-info{position:absolute;top:10px;right:10px;background:#000000b3;color:#fff;padding:5px 10px;border-radius:4px;font-size:12px;display:flex;gap:10px;pointer-events:none}.forensic-search{display:grid;grid-template-columns:320px 1fr 400px;gap:16px;height:100%;padding:16px;background:#f5f5f5}.forensic-left-panel{background:#fff;border-radius:8px;padding:16px;overflow-y:auto;box-shadow:0 2px 4px #0000001a}.camera-selector-container{margin-bottom:16px;padding-bottom:16px;border-bottom:2px solid #eee}.camera-selector-container .camera-selector{display:flex;flex-direction:column;gap:8px}.camera-selector-container .camera-selector label{font-size:14px;font-weight:700;color:#333;text-transform:uppercase;letter-spacing:.5px}.camera-selector-container .camera-selector select{padding:10px 12px;border:2px solid #667eea;border-radius:6px;font-size:16px;font-weight:600;background:#fff;color:#333;cursor:pointer;transition:all .2s}.camera-selector-container .camera-selector select:focus{outline:none;border-color:#4c5fd5;box-shadow:0 0 0 3px #667eea1a}.camera-selector-container .camera-selector select:hover{border-color:#4c5fd5}.forensic-left-panel h3{margin:0 0 12px;font-size:16px;font-weight:600;color:#333;border-bottom:2px solid #667eea;padding-bottom:8px}.filter-grid{display:flex;flex-direction:column;gap:10px}.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.filter-row-full{display:grid;grid-template-columns:1fr}.filter-group{display:flex;flex-direction:column;gap:4px}.filter-group label{font-size:10px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}.filter-group input[type=number],.filter-group input[type=text],.filter-group select{padding:5px 7px;border:1px solid #ddd;border-radius:4px;font-size:12px;background:#fff;transition:border-color .2s;width:100%}.filter-group input[type=number]:focus,.filter-group input[type=text]:focus,.filter-group select:focus{outline:none;border-color:#667eea}.checkbox-wrapper{padding-top:20px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;margin:0;flex-shrink:0}.checkbox-label span{font-size:12px;font-weight:500;color:#333}.area-button-wrapper{display:flex;align-items:center;gap:8px;justify-content:space-between}.btn-area{padding:7px 12px;border:2px solid #ddd;border-radius:4px;background:#fff;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;text-align:left;flex-shrink:0}.btn-entry{border-color:#4caf50;color:#2e7d32}.btn-entry:hover{background:#e8f5e9;border-color:#2e7d32}.btn-entry.active{background:#4caf50;color:#fff;border-color:#4caf50;box-shadow:0 0 8px #4caf5080}.btn-entry.has-area{background:#c8e6c9;color:#1b5e20;border-color:#2e7d32}.btn-entry.has-area:hover{background:#a5d6a7}.btn-exit{border-color:#f44336;color:#c62828}.btn-exit:hover{background:#ffebee;border-color:#c62828}.btn-exit.active{background:#f44336;color:#fff;border-color:#f44336;box-shadow:0 0 8px #f4433680}.btn-exit.has-area{background:#ffcdd2;color:#b71c1c;border-color:#c62828}.btn-exit.has-area:hover{background:#ef9a9a}.btn-clear-entry{border-color:#4caf50;color:#4caf50}.btn-clear-entry:hover{background:#4caf50;color:#fff}.btn-clear-exit{border-color:#f44336;color:#f44336}.btn-clear-exit:hover{background:#f44336;color:#fff}.btn-clear{padding:7px 10px;border:1px solid #ff4444;border-radius:4px;background:#fff;color:#f44;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;min-width:36px;display:flex;align-items:center;justify-content:center}.btn-clear:hover{background:#f44;color:#fff}.btn-query{padding:7px 12px;border:2px solid #667eea;border-radius:4px;background:#667eea;color:#fff;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;text-align:center;width:100%;text-transform:uppercase;letter-spacing:.5px}.btn-query:hover:not(:disabled){background:#4c5fd5;border-color:#4c5fd5;transform:translateY(-1px);box-shadow:0 2px 8px #667eea4d}.btn-query:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 4px #667eea33}.btn-query:disabled{background:#ccc;border-color:#ccc;cursor:not-allowed;opacity:.6}.filter-info{margin-top:10px;padding-top:10px;border-top:1px solid #eee}.filter-info p{margin:3px 0;font-size:11px;color:#666;font-weight:500}.filter-info strong{color:#667eea;font-weight:700;font-size:13px}.drawing-hint{color:#ff8c00!important;font-weight:500!important;font-style:italic}.forensic-middle-panel{background:#fff;border-radius:8px;padding:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0000001a;overflow:hidden}.forensic-canvas{display:block;border:1px solid #ddd;border-radius:4px;cursor:default}.forensic-canvas.drawing-mode{cursor:crosshair}.forensic-canvas.resizing{cursor:grabbing!important}.loading{display:flex;align-items:center;justify-content:center;color:#667eea;font-size:14px;font-weight:500}.no-camera-selected{display:flex;align-items:center;justify-content:center;color:#999;font-size:16px;font-weight:500;text-align:center;padding:40px 20px}.no-camera-selected p{margin:0}.media-container{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:4px}.inline-video-player{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}.media-container .overlay-canvas{position:absolute;top:0;left:0;pointer-events:auto;image-rendering:crisp-edges;cursor:pointer;z-index:10}.toast-notification{position:fixed;top:20px;right:20px;background:#333;color:#fff;padding:12px 20px;border-radius:6px;font-size:14px;font-weight:500;box-shadow:0 4px 12px #0000004d;z-index:1000;animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.forensic-right-panel{background:#fff;border-radius:8px;padding:16px;display:flex;flex-direction:column;box-shadow:0 2px 4px #0000001a;overflow:hidden}.results-header{margin-bottom:12px}.results-header h3{margin:0 0 6px;font-size:16px;font-weight:600;color:#333;border-bottom:2px solid #667eea;padding-bottom:8px}.results-header .result-count{margin:8px 0 0;font-size:12px;color:#666;font-weight:500}.results-header .result-count strong{color:#667eea;font-weight:700;font-size:14px}.forensic-table-container{flex:1;overflow-y:auto}.forensic-table{width:100%;border-collapse:collapse;font-size:12px}.forensic-table thead{position:sticky;top:0;background:#f8f9fa;z-index:10}.forensic-table th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border-bottom:2px solid #ddd;font-size:11px;text-transform:uppercase;letter-spacing:.3px}.forensic-table td{padding:10px 8px;border-bottom:1px solid #eee;vertical-align:middle}.forensic-table tbody tr{cursor:pointer;transition:background-color .15s}.forensic-table tbody tr:hover{background-color:#f8f9fa}.forensic-table tbody tr.selected{background-color:#e3e8ff;border-left:3px solid #667eea}.color-swatch-cell{display:inline-flex;align-items:center;gap:6px}.color-dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.25);flex-shrink:0}.label-badge{display:inline-block;padding:3px 8px;border-radius:12px;font-size:11px;font-weight:600;text-transform:capitalize}.label-car{background:#ff0;color:#333}.label-human{background:#0f0;color:#333}.label-truck{background:#00f;color:#fff}.label-bus{background:orange;color:#333}.label-bike{background:#ff1493;color:#fff}.label-licenseplate{background:#00bfff;color:#333}.label-bag{background:purple;color:#fff}.label-head{background:gold;color:#333}.label-animal{background:#7fff00;color:#333}.label-vehicle{background:#0ff;color:#333}.label-other{background:red;color:#fff}.anomaly-cell{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:italic;color:#f44;font-weight:500}.no-results{padding:40px 20px;text-align:center;color:#999;font-size:13px;font-style:italic}@media(max-width:1400px){.forensic-search{grid-template-columns:280px 1fr 350px}.filter-grid,.filter-column{gap:8px}}.dark-theme .forensic-search{background:#0f0f0f}.dark-theme .forensic-left-panel{background:#1a1a1a;box-shadow:0 2px 8px #00000080}.dark-theme .camera-selector-container{border-bottom-color:#333}.dark-theme .camera-selector-container .camera-selector label{color:#e0e0e0}.dark-theme .camera-selector-container .camera-selector select{background:#242424;border-color:#64b5f6;color:#e0e0e0}.dark-theme .camera-selector-container .camera-selector select:hover{border-color:#90caf9}.dark-theme .camera-selector-container .camera-selector select:focus{border-color:#90caf9;box-shadow:0 0 0 3px #64b5f633}.dark-theme .forensic-left-panel h3{color:#e0e0e0;border-bottom-color:#64b5f6}.dark-theme .filter-group input[type=number],.dark-theme .filter-group input[type=text],.dark-theme .filter-group select{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .filter-group input[type=number]:focus,.dark-theme .filter-group input[type=text]:focus,.dark-theme .filter-group select:focus{border-color:#64b5f6;background:#2a2a2a}.dark-theme .checkbox-label span{color:#e0e0e0}.dark-theme .btn-area{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .btn-entry{border-color:#66bb6a;color:#81c784}.dark-theme .btn-entry:hover{background:#1b3b1f;border-color:#81c784}.dark-theme .btn-entry.active{background:#4caf50;color:#0f0f0f;border-color:#4caf50;box-shadow:0 0 8px #4caf5099}.dark-theme .btn-entry.has-area{background:#2e4c31;color:#a5d6a7;border-color:#66bb6a}.dark-theme .btn-entry.has-area:hover{background:#3a5f3e}.dark-theme .btn-exit{border-color:#ef5350;color:#ef9a9a}.dark-theme .btn-exit:hover{background:#3d1f1f;border-color:#ef9a9a}.dark-theme .btn-exit.active{background:#f44336;color:#0f0f0f;border-color:#f44336;box-shadow:0 0 8px #f4433699}.dark-theme .btn-exit.has-area{background:#4c2b2b;color:#ffcdd2;border-color:#ef5350}.dark-theme .btn-exit.has-area:hover{background:#5f3636}.dark-theme .btn-clear-entry{border-color:#66bb6a;color:#66bb6a}.dark-theme .btn-clear-entry:hover{background:#66bb6a;color:#0f0f0f}.dark-theme .btn-clear-exit{border-color:#ef5350;color:#ef5350}.dark-theme .btn-clear-exit:hover{background:#ef5350;color:#0f0f0f}.dark-theme .btn-clear{background:#242424;border-color:#ff6b6b;color:#ff6b6b}.dark-theme .btn-clear:hover{background:#ff6b6b;color:#0f0f0f}.dark-theme .btn-query{background:#64b5f6;border-color:#64b5f6;color:#0f0f0f}.dark-theme .btn-query:hover:not(:disabled){background:#90caf9;border-color:#90caf9;box-shadow:0 2px 8px #64b5f666}.dark-theme .btn-query:active:not(:disabled){box-shadow:0 1px 4px #64b5f64d}.dark-theme .btn-query:disabled{background:#3a3a3a;border-color:#3a3a3a;color:#666}.dark-theme .filter-info{border-top-color:#333}.dark-theme .filter-info p{color:#999}.dark-theme .filter-info strong{color:#64b5f6}.dark-theme .drawing-hint{color:#ffa726!important}.dark-theme .forensic-middle-panel{background:#1a1a1a;box-shadow:0 2px 8px #00000080}.dark-theme .forensic-canvas{border-color:#3a3a3a}.dark-theme .loading{color:#64b5f6}.dark-theme .media-container{background:#000}.dark-theme .forensic-right-panel{background:#1a1a1a;box-shadow:0 2px 8px #00000080}.dark-theme .results-header h3{color:#e0e0e0;border-bottom-color:#64b5f6}.dark-theme .results-header .result-count{color:#999}.dark-theme .results-header .result-count strong{color:#64b5f6}.dark-theme .forensic-table{background:transparent}.dark-theme .forensic-table thead{background:#242424}.dark-theme .forensic-table th{background:#242424;color:#e0e0e0;border-bottom-color:#3a3a3a}.dark-theme .forensic-table td{border-bottom-color:#2a2a2a;color:#e0e0e0}.dark-theme .forensic-table tbody tr:hover{background:#242424}.dark-theme .forensic-table tbody tr.selected{background:#64b5f626;border-left-color:#64b5f6}.dark-theme .forensic-table tbody tr.selected:hover{background:#64b5f633}.dark-theme .anomaly-cell{color:#ff6b6b}.dark-theme .no-results{color:#999}.dark-theme .toast-notification{background:#242424;color:#e0e0e0;box-shadow:0 4px 12px #0009}.three-column-layout{display:grid;grid-template-columns:300px 1fr 350px;height:100vh;width:100vw;overflow:hidden;background:#f5f7fa;margin:0;padding:0}.left-panel{background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;display:flex;flex-direction:column}.middle-panel{background:#f8f9fa;overflow:auto;display:flex;align-items:stretch;justify-content:flex-start;padding:0}.right-panel{background:#fff;border-left:1px solid #e0e0e0;overflow-y:auto;display:flex;flex-direction:column}@media(max-width:1400px){.three-column-layout{grid-template-columns:280px 1fr 320px}}@media(max-width:1200px){.three-column-layout{grid-template-columns:250px 1fr 300px}}@media(max-width:1024px){.three-column-layout{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.left-panel,.right-panel{border:none;border-bottom:1px solid #e0e0e0;max-height:300px}.middle-panel{min-height:400px}}.dark-theme .three-column-layout{background:#0f0f0f}.dark-theme .left-panel{background:#1a1a1a;border-right-color:#3a3a3a}.dark-theme .middle-panel{background:#0f0f0f}.dark-theme .right-panel{background:#1a1a1a;border-left-color:#3a3a3a}@media(max-width:1024px){.dark-theme .left-panel,.dark-theme .right-panel{border-bottom-color:#3a3a3a}}.panel-section:first-child{padding-bottom:0}.panel-section:last-child{border-bottom:none}.panel-section h3{margin:0 0 16px;font-size:14px;font-weight:600;color:#667eea;text-transform:uppercase;letter-spacing:.5px}.panel-section select{width:100%;padding:12px 14px;font-size:16px;font-weight:500;border:2px solid #ddd;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s}.panel-section select:hover{border-color:#667eea}.panel-section select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.filter-group{margin-bottom:20px}.filter-group label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:#333}.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.checkbox-grid .checkbox-label{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;border:1px solid #ddd;border-radius:4px;cursor:pointer;transition:all .2s}.checkbox-grid .checkbox-label:hover{border-color:#667eea;background:#f0f2ff}.checkbox-grid .checkbox-label input[type=checkbox]{margin:0;cursor:pointer}.checkbox-grid .checkbox-label span{font-size:14px;font-weight:500;color:#333}.checkbox-grid .checkbox-single{grid-column:1 / -1}.filter-group input[type=range]{width:95%;height:.5px;border-radius:.5px;background:#ff8c00;outline:none;-webkit-appearance:none;margin-top:8px;margin-left:auto;margin-right:auto;display:block}.filter-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0000004d}.filter-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #667eea;cursor:pointer;box-shadow:0 2px 6px #0000004d}.live-status{display:flex;flex-direction:column;gap:12px}.status-indicator{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:#28a745;color:#fff;border-radius:6px;font-size:13px;font-weight:500;width:fit-content}.pulse{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.status-info{font-size:13px;color:#666}.status-info p{margin:6px 0}.camera-info{font-size:13px;color:#666;margin-top:12px}.camera-info p{margin:6px 0}.tool-placeholder{padding:16px;background:#f8f9fa;border-radius:6px;text-align:center;color:#999;font-size:13px}.camera-view-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.camera-canvas{max-width:100%;max-height:100%;box-shadow:0 4px 12px #00000026}.video-wrapper{position:relative;width:100%;height:100%}.video-player-div{width:100%;height:100%;position:absolute;top:0;left:0}.video-player-div media-stream-player{width:100%;height:100%;display:block}.overlay-canvas{width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none;z-index:2}.no-camera-selected,.no-snapshot{display:flex;align-items:center;justify-content:center;padding:40px;text-align:center;color:#999;font-size:15px}.detections-table{width:100%;border-collapse:collapse;font-size:13px}.detections-table th{text-align:left;padding:10px 8px;background:#f5f5f5;border-bottom:2px solid #e0e0e0;font-weight:600;color:#555;font-size:12px}.detections-table td{padding:10px 8px;border-bottom:1px solid #f0f0f0;color:#666}.detections-table tbody tr:hover{background:#f9f9f9}.time-cell{font-family:Courier New,monospace;font-size:12px}.no-data{text-align:center;color:#999;font-style:italic;padding:30px!important}.class-badge{display:inline-block;padding:3px 8px;border-radius:10px;font-size:11px;font-weight:600;text-transform:uppercase;white-space:nowrap}.class-car{background:#ff0;color:#333}.class-person,.class-human{background:#0f0;color:#333}.class-truck{background:#00f;color:#fff}.class-bus{background:orange;color:#333}.class-bike,.class-bicycle{background:#ff1493;color:#fff}.class-licenseplate{background:#00bfff;color:#333}.class-bag{background:purple;color:#fff}.class-head{background:gold;color:#333}.class-animal{background:#7fff00;color:#333}.class-vehicle{background:#0ff;color:#333}.class-other,.class-unknown{background:red;color:#fff}.dark-theme .panel-section select{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .panel-section select:hover{border-color:#64b5f6}.dark-theme .panel-section select:focus{border-color:#64b5f6;box-shadow:0 0 0 3px #64b5f633}.dark-theme .filter-group label{color:#b0b0b0}.dark-theme .filter-group select,.dark-theme .filter-group input[type=number]{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .filter-group select:focus,.dark-theme .filter-group input:focus{border-color:#64b5f6;background:#2a2a2a}.dark-theme .checkbox-grid .checkbox-label{background:#242424;border-color:#3a3a3a}.dark-theme .checkbox-grid .checkbox-label:hover{border-color:#64b5f6;background:#64b5f61a}.dark-theme .checkbox-grid .checkbox-label span{color:#e0e0e0}.dark-theme .filter-group input[type=range]{background:#ffa726}.dark-theme .filter-group input[type=range]::-webkit-slider-thumb{background:#242424;border-color:#64b5f6}.dark-theme .filter-group input[type=range]::-moz-range-thumb{background:#242424;border-color:#64b5f6}.dark-theme .status-info,.dark-theme .camera-info{color:#999}.dark-theme .tool-placeholder{background:#242424;color:#999}.dark-theme .no-camera-selected,.dark-theme .no-snapshot{color:#999}.dark-theme .detections-table{background:transparent}.dark-theme .detections-table th{background:#242424;border-bottom-color:#3a3a3a;color:#e0e0e0}.dark-theme .detections-table td{border-bottom-color:#2a2a2a;color:#e0e0e0}.dark-theme .detections-table tbody tr:hover{background:#242424}.dark-theme .no-data{color:#999}.server-selector-videox{width:100%}.server-list-videox{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.server-card{display:flex;align-items:center;justify-content:space-between;padding:16px;background:#2a2a2a;border:2px solid #3a3a3a;border-radius:8px;cursor:pointer;transition:all .2s}.server-card:hover{border-color:#1976d2;background:#323232}.server-card.selected{border-color:#1976d2;background:#2d3e50}.server-card-content{flex:1}.server-card-header{font-size:.75em;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.server-card-name{font-size:1.1em;font-weight:600;color:#fff;margin-bottom:4px}.server-card-url{font-size:.85em;color:#999;font-family:monospace}.server-card-actions{display:flex;gap:8px;margin-left:16px}.server-action-btn{background:none;border:none;color:#999;cursor:pointer;padding:8px;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center}.server-action-btn:hover{background:#3a3a3a;color:#fff}.server-delete-btn:hover{background:#d32f2f;color:#fff}.add-server-btn{width:100%;padding:14px;background:transparent;border:2px solid #1976d2;color:#1976d2;border-radius:8px;cursor:pointer;font-weight:600;font-size:.95em;letter-spacing:.5px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px}.add-server-btn:hover{background:#1976d2;color:#fff}.add-icon{font-size:1.2em;font-weight:700}.server-form-videox{padding:20px;background:#2a2a2a;border-radius:8px;border:2px solid #3a3a3a}.server-form-videox h3{margin:0 0 20px;color:#fff;font-size:1.1em}.form-error{color:#f44336;background:#f443361a;border:1px solid rgba(244,67,54,.3);padding:12px;border-radius:4px;margin-bottom:16px;font-size:.9em}.form-group-videox{margin-bottom:16px}.form-group-videox label{display:block;margin-bottom:8px;color:#ccc;font-size:.9em;font-weight:500}.form-group-videox input{width:100%;padding:12px;background:#1a1a1a;border:1px solid #3a3a3a;border-radius:4px;color:#fff;font-size:.95em;box-sizing:border-box;transition:border-color .2s}.form-group-videox input:focus{outline:none;border-color:#1976d2}.form-group-videox input::placeholder{color:#666}.form-actions-videox{display:flex;gap:12px;margin-top:20px}.btn-save-videox,.btn-cancel-videox{flex:1;padding:12px;border-radius:4px;font-weight:600;font-size:.95em;cursor:pointer;transition:all .2s;border:none}.btn-save-videox{background:#1976d2;color:#fff}.btn-save-videox:hover{background:#1565c0}.btn-cancel-videox{background:#3a3a3a;color:#ccc}.btn-cancel-videox:hover{background:#4a4a4a;color:#fff}.dark-theme .add-server-btn{border-color:#64b5f6;color:#64b5f6}.dark-theme .add-server-btn:hover{background:#64b5f6;color:#0f0f0f}.dark-theme .btn-save-videox{background:#64b5f6}.dark-theme .btn-save-videox:hover{background:#90caf9}.dark-theme .form-error{background:#f443361a;border-color:#f443364d;color:#ff6b6b}.login-container-videox{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#1a1a1a;padding:20px}.login-card-videox{background:#242424;border-radius:12px;box-shadow:0 8px 32px #0006;padding:40px;max-width:480px;width:100%}.login-header-videox{text-align:center;margin-bottom:32px}.login-header-videox h1{color:#fff;margin:0 0 8px;font-size:32px;font-weight:600;letter-spacing:-.5px}.login-header-videox p{color:#999;margin:0;font-size:14px;letter-spacing:.3px}.login-section-label{color:#ccc;font-size:.9em;font-weight:500;margin-bottom:16px;letter-spacing:.3px}.error-message-videox{background:#f443361a;border:1px solid rgba(244,67,54,.3);color:#f44336;padding:14px;border-radius:8px;margin-bottom:20px;font-size:.9em}.btn-continue{width:100%;padding:14px;background:#1976d2;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600;font-size:.95em;letter-spacing:.5px;transition:all .2s;margin-top:16px}.btn-continue:hover:not(:disabled){background:#1565c0}.btn-continue:disabled{background:#3a3a3a;color:#666;cursor:not-allowed}.selected-server-display{background:#2a2a2a;border:2px solid #3a3a3a;border-radius:8px;padding:16px;margin-bottom:24px}.server-display-label{font-size:.75em;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.server-display-name{font-size:1.1em;font-weight:600;color:#fff;margin-bottom:4px}.server-display-url{font-size:.85em;color:#999;font-family:monospace;margin-bottom:12px}.btn-change-server{background:transparent;border:1px solid #3a3a3a;color:#999;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.85em;transition:all .2s}.btn-change-server:hover{border-color:#1976d2;color:#1976d2}.credentials-section{margin-top:16px}.form-group-login{margin-bottom:20px}.form-group-login label{display:block;margin-bottom:8px;color:#ccc;font-size:.9em;font-weight:500;letter-spacing:.3px}.form-group-login input{width:100%;padding:12px;background:#1a1a1a;border:1px solid #3a3a3a;border-radius:4px;color:#fff;font-size:.95em;box-sizing:border-box;transition:border-color .2s}.form-group-login input:focus{outline:none;border-color:#1976d2}.form-group-login input::placeholder{color:#666}:root:not(.dark-theme) .login-container-videox{background:#f5f7fa}:root:not(.dark-theme) .login-card-videox{background:#fff;box-shadow:0 8px 32px #0000001a}:root:not(.dark-theme) .login-header-videox h1{color:#1a1a1a}:root:not(.dark-theme) .login-header-videox p{color:#666}:root:not(.dark-theme) .login-section-label{color:#555}:root:not(.dark-theme) .btn-continue:disabled{background:#e0e0e0;color:#999}:root:not(.dark-theme) .selected-server-display{background:#f5f7fa;border-color:#e0e0e0}:root:not(.dark-theme) .server-display-label{color:#666}:root:not(.dark-theme) .server-display-name{color:#1a1a1a}:root:not(.dark-theme) .server-display-url{color:#666}:root:not(.dark-theme) .btn-change-server{border-color:#ddd;color:#666}:root:not(.dark-theme) .btn-change-server:hover{border-color:#1976d2;color:#1976d2}:root:not(.dark-theme) .form-group-login label{color:#555}:root:not(.dark-theme) .form-group-login input{background:#fff;border-color:#ddd;color:#1a1a1a}:root:not(.dark-theme) .form-group-login input::placeholder{color:#999}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 20px #00000026}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0}.modal-header h2{margin:0;font-size:24px;color:#1a1a1a}.close-button{background:none;border:none;font-size:32px;color:#666;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.close-button:hover{background:#f0f0f0;color:#333}.modal-body{padding:24px}.settings-section{margin-bottom:32px}.settings-section:last-child{margin-bottom:0}.settings-section h3{margin:0 0 16px;font-size:18px;color:#333;border-bottom:2px solid #1976d2;padding-bottom:8px}.setting-item{margin-bottom:20px}.setting-item label{display:block;margin-bottom:8px;font-weight:500;color:#555;font-size:14px}.setting-item select,.setting-item input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:4px;font-size:14px;background:#fff;transition:border-color .2s}.setting-item select:focus,.setting-item input:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d21a}.setting-item input[type=number]{width:150px}.setting-preview{display:block;margin-top:6px;font-size:13px;color:#666;font-style:italic}.modal-footer{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-top:1px solid #e0e0e0;background:#f9f9f9}.button-group{display:flex;gap:12px;align-items:center}.btn-primary,.btn-secondary{padding:10px 20px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary{background:#1976d2;color:#fff}.btn-primary:hover:not(:disabled){background:#1565c0}.btn-primary:active:not(:disabled){background:#0d47a1}.btn-primary:disabled{background:#ccc;cursor:not-allowed}.btn-secondary{background:#fff;color:#555;border:1px solid #ddd}.btn-secondary:hover{background:#f5f5f5;border-color:#ccc}.btn-secondary:active{background:#e8e8e8}.saved-indicator{color:#4caf50;font-size:14px;font-weight:500}.dark-theme .modal-overlay{background:#000c}.dark-theme .modal-content{background:#1a1a1a;color:#e0e0e0;box-shadow:0 4px 20px #0009}.dark-theme .modal-header{border-bottom-color:#3a3a3a}.dark-theme .modal-header h2{color:#e0e0e0}.dark-theme .close-button{color:#999}.dark-theme .close-button:hover{background:#2a2a2a;color:#e0e0e0}.dark-theme .settings-section h3{color:#e0e0e0;border-bottom-color:#64b5f6}.dark-theme .setting-item label{color:#b0b0b0}.dark-theme .setting-item select,.dark-theme .setting-item input{background:#242424;border-color:#3a3a3a;color:#e0e0e0}.dark-theme .setting-item select:focus,.dark-theme .setting-item input:focus{border-color:#64b5f6;box-shadow:0 0 0 3px #64b5f61a}.dark-theme .setting-preview{color:#999}.dark-theme .modal-footer{background:#242424;border-top-color:#3a3a3a}.dark-theme .btn-primary{background:#64b5f6;color:#0f0f0f}.dark-theme .btn-primary:hover:not(:disabled){background:#90caf9}.dark-theme .btn-primary:active:not(:disabled){background:#42a5f5}.dark-theme .btn-primary:disabled{background:#3a3a3a;color:#666}.dark-theme .btn-secondary{background:#2a2a2a;color:#e0e0e0;border-color:#3a3a3a}.dark-theme .btn-secondary:hover{background:#333;border-color:#4a4a4a}.dark-theme .btn-secondary:active{background:#242424}.dark-theme .saved-indicator{color:#66bb6a}.counter-flow-view{display:flex;flex-direction:column;gap:12px;height:100%}.flow-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:10px 12px;background:#2a2a2a;border-radius:6px;border:1px solid #3a3a3a}.control-group{display:flex;align-items:center;gap:6px}.control-group label{font-size:13px;color:#aaa;white-space:nowrap}.control-group select{background:#1e1e1e;border:1px solid #444;color:#e0e0e0;padding:4px 8px;border-radius:4px;font-size:13px;min-width:120px}.control-group select:focus{outline:none;border-color:#3498db}.control-group input[type=color]{width:32px;height:26px;padding:0;border:1px solid #444;border-radius:4px;cursor:pointer;background:transparent}.control-group input[type=range]{width:80px;accent-color:#3498db}.control-group span{font-size:12px;color:#888;min-width:36px}.days-info{font-size:11px;color:#888;margin-left:4px}.btn-edit-arrows{background:#444;border:1px solid #555;color:#e0e0e0;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:13px;transition:background .15s,border-color .15s;margin-left:auto}.btn-edit-arrows:hover{background:#555;border-color:#666}.btn-edit-arrows.active{background:#2ecc71;border-color:#27ae60;color:#fff}.arrow-selector{background:#2ecc7126;padding:4px 10px;border-radius:4px;border:1px solid rgba(46,204,113,.3)}.arrow-selector select{min-width:100px;font-weight:500}.flow-canvas-container{position:relative;flex:1;min-height:300px;background:#1a1a1a;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center}.flow-backdrop{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none}.flow-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.flow-svg .drag-handle{pointer-events:auto}.flow-svg .drag-handle:hover{filter:brightness(1.2)}.arrow-path{transition:stroke-width .15s ease}.arrow-label text{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;pointer-events:none}.arrow-label rect{pointer-events:none}.arrow-width-controls{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:6px;padding:12px;max-height:200px;overflow-y:auto}.arrow-width-controls h4{margin:0 0 10px;font-size:13px;color:#aaa;font-weight:500}.width-settings-table{width:100%;border-collapse:collapse;font-size:12px}.width-settings-table th{text-align:left;padding:6px 8px;color:#888;font-weight:500;border-bottom:1px solid #3a3a3a}.width-settings-table td{padding:6px 8px;color:#e0e0e0;border-bottom:1px solid #2a2a2a}.width-settings-table td:first-child{white-space:nowrap;font-weight:500}.width-settings-table input[type=range]{width:80px;vertical-align:middle;accent-color:#3498db}.width-settings-table input[type=checkbox]{margin-right:6px;accent-color:#3498db}.width-settings-table span{font-size:11px;color:#888;margin-left:6px}.width-settings-table label{display:flex;align-items:center;cursor:pointer;color:#aaa}body:not(.dark-theme) .flow-controls{background:#f5f5f5;border-color:#ddd}body:not(.dark-theme) .control-group label{color:#666}body:not(.dark-theme) .control-group select{background:#fff;border-color:#ccc;color:#333}body:not(.dark-theme) .flow-canvas-container{background:#eee}body:not(.dark-theme) .arrow-width-controls{background:#f5f5f5;border-color:#ddd}body:not(.dark-theme) .arrow-width-controls h4{color:#666}body:not(.dark-theme) .width-settings-table th{color:#666}body:not(.dark-theme) .width-settings-table td{color:#333}body:not(.dark-theme) .btn-edit-arrows{background:#e0e0e0;border-color:#ccc;color:#333}body:not(.dark-theme) .btn-edit-arrows:hover{background:#d0d0d0}.counters-wrapper,.counter-list,.counter-detail,.counter-create{padding:24px;max-width:1200px;margin:0 auto;color:var(--text-color, #e0e0e0)}.counter-detail{overflow-y:auto;max-height:calc(100vh - 80px);padding-bottom:48px}.counter-list-header,.detail-header,.wizard-header{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}.counter-list-header h2,.detail-header h2{flex:1;margin:0;font-size:1.4rem}.counter-list-actions,.detail-actions{display:flex;gap:8px}.btn-primary{background:#667eea;color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .15s}.btn-primary:hover:not(:disabled){background:#5a6fd6}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#2a2a3a;color:#ccc;border:1px solid #444;border-radius:6px;padding:8px 14px;cursor:pointer;font-size:.9rem;transition:background .15s}.btn-secondary:hover:not(:disabled){background:#35354a;color:#fff}.btn-danger{background:#c0392b;color:#fff;border:none;border-radius:6px;padding:8px 14px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .15s}.btn-danger:hover:not(:disabled){background:#a93226}.btn-warning{background:#c4a02840;color:#e0c050;border:1px solid rgba(196,160,40,.5);border-radius:6px;padding:8px 14px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .15s}.btn-warning:hover:not(:disabled){background:#c4a02866}.btn-warning:disabled{opacity:.5;cursor:not-allowed}.btn-info{background:#3498db40;color:#5dade2;border:1px solid rgba(52,152,219,.5);border-radius:6px;padding:8px 14px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .15s}.btn-info:hover:not(:disabled){background:#3498db66}.btn-info:disabled{opacity:.5;cursor:not-allowed}.btn-save{background:#2a2a3a;color:#888;border:1px solid #444;border-radius:6px;padding:8px 16px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s}.btn-save:disabled{opacity:.5;cursor:not-allowed}.btn-save-dirty{background:#27ae604d;color:#2ecc71;border-color:#27ae6099}.btn-save-dirty:hover:not(:disabled){background:#27ae6073}.btn-small{padding:4px 10px;font-size:.8rem}.empty-state{text-align:center;padding:60px 20px;color:#888}.empty-state p{margin-bottom:16px;font-size:1.1rem}.counter-table{width:100%;border-collapse:collapse;font-size:.9rem}.counter-table th{text-align:left;padding:10px 12px;border-bottom:2px solid #444;color:#aaa;font-weight:600;white-space:nowrap}.counter-table td{padding:10px 12px;border-bottom:1px solid #2e2e3e;vertical-align:middle}.counter-table tr:hover td{background:#1e1e2e}.counter-table tr.clickable-row{cursor:pointer;transition:background .15s}.counter-table tr.clickable-row:hover td{background:#252540}.count-cell{text-align:right;font-size:1rem;font-weight:600;color:#98c379}.action-cell{white-space:nowrap}.action-cell .btn-small{margin-right:6px}.backfill-badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase}.backfill-none{background:#2a2a3a;color:#888}.backfill-pending{background:#3d3a1a;color:#e0c060}.backfill-running{background:#1a3040;color:#61afef;animation:pulse 1.5s infinite}.backfill-completed{background:#1a3020;color:#98c379}.backfill-failed{background:#3a1a1a;color:#e06c75}@keyframes pulse{0%,to{opacity:1}50%{opacity:.65}}.detail-meta{display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px;font-size:.88rem;color:#aaa}.detail-meta strong{color:#ccc}.detail-settings-group{margin-top:16px;padding-top:14px;border-top:1px solid #303040}.field-sublabel{color:#999;font-size:.82rem;margin-bottom:2px}.saved-indicator{color:#98c379;font-size:.88rem;font-weight:600;animation:fadeInOut 3s ease}@keyframes fadeInOut{0%{opacity:0}15%{opacity:1}85%{opacity:1}to{opacity:0}}.save-error-indicator{color:#e06c75;font-size:.85rem;font-weight:600;cursor:help;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.save-error-banner{background:#3e1a1a;color:#e06c75;border:1px solid #e06c75;border-radius:6px;padding:8px 12px;margin:8px 0;font-size:.88rem}.name-input{background:#1e1e2e;color:#e0e0e0;border:1px solid #667eea;border-radius:6px;padding:6px 10px;font-size:1.2rem;font-weight:600;width:320px}.backfill-bar{padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:.87rem}.backfill-bar.backfill-running{background:#1a2a3a;border:1px solid #3a6080;color:#61afef}.backfill-bar.backfill-completed{background:#1a2a1a;border:1px solid #3a6030;color:#98c379}.backfill-bar.backfill-failed{background:#2a1a1a;border:1px solid #6a2a2a;color:#e06c75}.progress-bar{height:6px;background:#2a2a3a;border-radius:3px;margin-top:8px}.progress-fill{height:100%;background:#61afef;border-radius:3px;transition:width .4s}.detail-zone-section{margin-bottom:20px}.detail-zone-canvas{margin-bottom:10px}.detail-zone-canvas .zone-canvas{width:100%;max-width:800px;border-radius:8px;border:1px solid #333}.zone-legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.zone-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:2px solid;border-radius:20px;font-size:.85rem}.zone-name-inline{background:transparent;border:none;border-bottom:1px solid #555;color:#e0e0e0;font-size:.85rem;padding:1px 4px;width:100px;outline:none}.zone-name-inline:focus{border-bottom-color:#667eea}.counter-values-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-bottom:24px}.counter-values-table th{text-align:left;padding:8px 12px;border-bottom:2px solid #444;color:#aaa;font-weight:600}.counter-values-table td{padding:8px 12px;border-bottom:1px solid #272737;vertical-align:middle}.counter-values-table tbody tr:hover td{background:#1e1e2e}.row-disabled td{opacity:.45}.row-disabled .count-cell{color:#888}.zone-chip{font-weight:700;font-size:1rem}.zone-chip-lg{display:inline-block;width:28px;height:28px;border-radius:50%;border:2px solid;text-align:center;line-height:24px;font-weight:700;flex-shrink:0}.arrow{margin:0 4px;color:#666}.date-cell{color:#666;font-size:.78rem;white-space:nowrap}.disabled-mark{color:#666}.unnamed{color:#555;font-style:italic;font-size:.82rem}.class-cell{display:flex;gap:6px;flex-wrap:wrap}.class-chip{background:#252535;border:1px solid #3a3a4a;border-radius:12px;padding:1px 8px;font-size:.78rem;color:#aaa;white-space:nowrap}.mqtt-section{background:#1a1a2a;border:1px solid #303040;border-radius:8px;padding:16px 20px;margin-top:8px}.mqtt-section h3{margin:0 0 12px;font-size:1rem;color:#aaa}.mqtt-view{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:#bbb}.mqtt-view strong{color:#ddd}.mqtt-view code{background:#252535;padding:2px 6px;border-radius:4px;font-size:.85rem}.mqtt-edit{display:flex;flex-direction:column;gap:12px}.mqtt-edit label{display:flex;align-items:center;gap:8px;color:#ccc;font-size:.88rem}.mqtt-edit input[type=number],.mqtt-edit input[type=text]{background:#252535;border:1px solid #404050;border-radius:5px;color:#e0e0e0;padding:5px 8px;font-size:.88rem}.mqtt-edit input[type=number]{width:100px}.mqtt-edit input[type=text]{width:360px}.wizard-steps{display:flex;gap:24px;flex:1;flex-wrap:wrap}.wizard-step-dot{display:flex;align-items:center;gap:8px;color:#555;font-size:.88rem}.wizard-step-dot.active{color:#667eea;font-weight:600}.wizard-step-dot.done{color:#98c379}.dot-num{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;font-size:.78rem;font-weight:700}.wizard-step{margin-bottom:24px}.wizard-step h3{margin:0 0 8px;font-size:1.15rem}.wizard-nav{display:flex;gap:12px;padding-top:16px;border-top:1px solid #333}.wizard-nav .btn-primary{margin-left:auto}.step-hint{color:#888;font-size:.88rem;margin:0 0 16px}.step1-layout{display:flex;gap:20px;align-items:flex-start}.step1-sidebar{width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:14px}.step1-canvas{flex:1;min-width:0}.zone-canvas{max-width:100%;height:auto;display:block;border:2px solid #404050;border-radius:6px;-webkit-user-select:none;user-select:none}.canvas-placeholder{width:100%;height:280px;background:#1a1a2a;border:2px dashed #404050;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#555}.zone-list{display:flex;flex-direction:column;gap:8px}.zone-row{display:flex;align-items:center;gap:6px}.zone-row input{flex:1;background:#1e1e2e;border:1px solid #404050;border-radius:5px;color:#e0e0e0;padding:4px 8px;font-size:.82rem}.path-toggle{display:flex;align-items:center;gap:6px;color:#b0b0c0;font-size:.85rem;cursor:pointer;margin-top:8px;-webkit-user-select:none;user-select:none}.path-toggle input[type=checkbox]{accent-color:#5b9bd5;cursor:pointer}.step2-layout{display:flex;flex-direction:column;gap:20px;max-width:540px}.field-group{display:flex;flex-direction:column;gap:6px}.field-label{color:#888;font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.text-input{background:#1e1e2e;border:1px solid #404050;border-radius:6px;color:#e0e0e0;padding:8px 12px;font-size:.95rem;width:100%;box-sizing:border-box}.text-input:focus{outline:none;border-color:#667eea}.class-checkboxes{display:flex;gap:16px;flex-wrap:wrap}.class-check{display:flex;align-items:center;gap:6px;color:#ccc;font-size:.9rem;cursor:pointer}.class-check input[type=checkbox]{cursor:pointer;accent-color:#667eea}.step3-layout{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap}.pairs-grid{display:flex;flex-direction:column;gap:8px;flex:1;min-width:320px}.pair-row{display:flex;align-items:center;gap:12px;background:#1a1a2a;border:1px solid #303040;border-radius:6px;padding:8px 12px}.pair-row.pair-disabled{opacity:.45}.pair-id{font-size:1rem;font-weight:700;white-space:nowrap;min-width:60px}.counter-name-input{flex:1;background:#252535;border:1px solid #404050;border-radius:5px;color:#e0e0e0;padding:5px 10px;font-size:.88rem}.counter-name-input:focus{outline:none;border-color:#667eea}.enabled-check{display:flex;align-items:center;gap:4px;color:#aaa;font-size:.82rem;white-space:nowrap;cursor:pointer}.mqtt-config{background:#1a1a2a;border:1px solid #303040;border-radius:8px;padding:16px 20px;min-width:280px}.mqtt-config h4{margin:0 0 14px;color:#aaa;font-size:.95rem}.mqtt-config .field-group{margin-top:12px}.mqtt-config input[type=number],.mqtt-config input[type=text]{background:#252535;border:1px solid #404050;border-radius:5px;color:#e0e0e0;padding:6px 10px;font-size:.88rem;width:100%;box-sizing:border-box;margin-top:4px}.mqtt-config .hint{color:#666;font-size:.78rem;margin:4px 0 0}.hint{color:#777;font-size:.82rem;margin:0}.hint.warning{color:#e0a040}.edit-counters-section{margin-top:24px}.edit-counters-section h3{margin:0 0 12px;font-size:1.05rem;color:#aaa}.counter-graphs .graph-container{margin-top:16px;overflow-x:auto}.counter-bar-chart{display:block}.graph-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;padding:10px 0;border-top:1px solid #303040}.legend-item{display:flex;align-items:center;gap:6px;color:#aaa;font-size:.85rem}.legend-swatch{width:14px;height:14px;border-radius:3px;flex-shrink:0}.section-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-header-row h3{margin:0;font-size:1.05rem;color:#aaa}.section-header-row .header-actions{display:flex;gap:8px}.inline-graph-section{margin-top:20px;padding:16px;background:#1a1a2e;border-radius:8px;overflow-x:auto}.counter-flow-section{margin-top:24px;padding:16px;background:#1a1a2e;border-radius:8px}.counter-flow-section h3{margin:0 0 12px;font-size:1.05rem;color:#aaa}.app{display:flex;flex-direction:column;height:100vh;width:100vw;background:#f5f7fa;margin:0;padding:0;overflow:hidden}.app-loading{display:flex;align-items:center;justify-content:center;height:100vh;background:#f5f7fa;color:#333}.app-header{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #0000001a;min-height:60px}.header-left{display:flex;align-items:center;gap:30px;flex:1}.app-header h1{margin:0;font-size:1.5rem;font-weight:600;white-space:nowrap}.app-navigation{display:flex;gap:4px}.nav-tab{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#ffffff1a;color:#ffffffe6;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap}.nav-tab:hover:not(.disabled){background:#fff3;color:#fff}.nav-tab.active{background:#fff;color:#667eea;font-weight:600}.nav-tab.disabled{opacity:.5;cursor:not-allowed}.nav-icon{font-size:18px}.nav-label{font-size:13px}.header-right{display:flex;align-items:center}.header-actions{display:flex;align-items:center;gap:12px}.icon-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:8px;cursor:pointer;font-size:18px;transition:background .2s}.icon-btn:hover{background:#fff3}.server-info{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff1a;border-radius:6px;border:1px solid rgba(255,255,255,.2)}.server-label{color:#ffffffb3;font-size:13px;font-weight:500}.server-name{color:#fffffff2;font-size:14px;font-weight:600}.user-menu{display:flex;align-items:center;gap:12px;padding-left:16px;margin-left:16px;border-left:1px solid rgba(255,255,255,.2)}.username-btn{color:#ffffffe6;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;padding:8px 12px;border-radius:6px;transition:background .2s}.username-btn:hover{background:#ffffff1a}.logout-btn{padding:8px 16px;background:#e74c3c4d;color:#fff;border:1px solid rgba(231,76,60,.5);border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;transition:background .2s}.logout-btn:hover{background:#e74c3c80}.main-content{flex:1;overflow:hidden;display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#6c757d;text-align:center;padding:40px}.empty-state h2{margin-bottom:10px;color:#333}.left-panel-content,.right-panel-content{padding:20px}.panel-section{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #e0e0e0}.panel-section:last-child{border-bottom:none;margin-bottom:0}.panel-section h3{margin:0 0 12px;font-size:14px;font-weight:600;color:#333;text-transform:uppercase;letter-spacing:.5px}.no-camera-selected{display:flex;align-items:center;justify-content:center;padding:40px;text-align:center;color:#999;font-size:15px}.loading-text{color:#007bff;font-size:13px;margin:0}.result-count{color:#6c757d;font-size:13px;display:block;margin-bottom:12px}.stats-list{display:flex;flex-direction:column;gap:12px}.stat-item{padding:12px;background:#f8f9fa;border-radius:6px;border:1px solid #e0e0e0}.stat-item strong{display:block;margin-bottom:8px;font-size:13px;font-weight:700}.stat-class-car{color:#ff0!important}.stat-class-human{color:#0f0!important}.stat-class-truck{color:#00f!important}.stat-class-bus{color:orange!important}.stat-class-bike{color:#ff1493!important}.stat-class-licenseplate{color:#00bfff!important}.stat-class-bag{color:purple!important}.stat-class-head{color:gold!important}.stat-class-animal{color:#7fff00!important}.stat-class-vehicle{color:#0ff!important}.stat-class-other,.stat-class-unknown{color:red!important}.stat-item ul{list-style:none;padding:0;margin:0}.stat-item li{padding:4px 0;font-size:12px;color:#666}.error-message{background:#f8d7da;color:#721c24;padding:10px;border-radius:4px;margin-bottom:12px;border:1px solid #f5c6cb;font-size:12px}@media(max-width:1400px){.header-left{gap:20px}.nav-label{display:none}.nav-tab{padding:10px;min-width:40px;justify-content:center}}@media(max-width:1024px){.app-header{flex-wrap:wrap;min-height:auto;padding:12px 16px;gap:12px}.header-left{width:100%;justify-content:space-between}.header-right{width:100%;justify-content:flex-end}}.dark-theme{color-scheme:dark}.dark-theme .app,.dark-theme .app-loading{background:#0f0f0f;color:#e0e0e0}.dark-theme .app-header{background:linear-gradient(135deg,#1e2a47,#2d1b3d)}.dark-theme .main-content{background:#0f0f0f}.dark-theme .empty-state{color:#999}.dark-theme .empty-state h2{color:#e0e0e0}.dark-theme .nav-tab{color:#ffffffb3;border-bottom-color:transparent}.dark-theme .nav-tab:hover:not(:disabled){background:#ffffff0d;color:#ffffffe6}.dark-theme .nav-tab.active{background:#ffffff1a;color:#fff;border-bottom-color:#64b5f6}.dark-theme .nav-tab:disabled{color:#ffffff4d}.dark-theme .connection-indicator{background:#0000004d}.dark-theme .username-btn{color:#ffffffe6}.dark-theme .username-btn:hover{background:#ffffff26}.dark-theme .panel-section{border-bottom-color:#333}.dark-theme .panel-section h3{color:#64b5f6}.dark-theme .no-camera-selected{color:#999}.dark-theme .loading-text{color:#64b5f6}.dark-theme .result-count{color:#999}.dark-theme .stats-list{color:#e0e0e0}.dark-theme .stat-item{background:#242424;border-color:#3a3a3a}.dark-theme .stat-item strong{color:#e0e0e0}.dark-theme .stat-item li{color:#999}.dark-theme .error-message{background:#f443361a;border-color:#f443364d;color:#ff6b6b}