*{margin:0;padding:0;box-sizing:border-box}:root{--primary: #1e40af;--secondary: #0f766e;--success: #16a34a;--warning: #ea580c;--error: #dc2626;--critical: #991b1b;--dark: #1f2937;--light: #f3f4f6;--border: #e5e7eb;--text: #111827;--text-light: #6b7280}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f9fafb;color:var(--text)}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.header{background:linear-gradient(135deg,var(--dark) 0%,var(--primary) 100%);color:#fff;padding:1rem 2rem;box-shadow:0 4px 6px #0000001a;border-bottom:3px solid var(--error)}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:100%}.header h1{font-size:1.8rem;font-weight:700}.connection-status{display:flex;align-items:center;gap:.5rem;font-weight:600}.status-indicator{width:12px;height:12px;border-radius:50%;animation:pulse 2s infinite}.status-indicator.connected{background:var(--success);box-shadow:0 0 8px var(--success)}.status-indicator.disconnected{background:var(--error)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.main-container{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;padding:1.5rem;flex:1;overflow:hidden}.left-panel,.right-panel{display:flex;flex-direction:column;gap:1.5rem;overflow-y:auto}.left-panel{overflow-y:auto;padding-right:.5rem}.left-panel::-webkit-scrollbar,.right-panel::-webkit-scrollbar,.alerts-list::-webkit-scrollbar,.detections-table::-webkit-scrollbar{width:8px}.left-panel::-webkit-scrollbar-track,.right-panel::-webkit-scrollbar-track,.alerts-list::-webkit-scrollbar-track,.detections-table::-webkit-scrollbar-track{background:var(--light)}.left-panel::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb,.alerts-list::-webkit-scrollbar-thumb,.detections-table::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.left-panel::-webkit-scrollbar-thumb:hover,.right-panel::-webkit-scrollbar-thumb:hover,.alerts-list::-webkit-scrollbar-thumb:hover,.detections-table::-webkit-scrollbar-thumb:hover{background:#9ca3af}.card{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f;border:1px solid var(--border)}.card h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--text);border-bottom:2px solid var(--primary);padding-bottom:.5rem}.video-feed{flex:2;display:flex;flex-direction:column}.video-container{flex:1;display:flex;align-items:center;justify-content:center;background:#000;border-radius:6px;overflow:hidden;min-height:400px}.video-stream{width:100%;height:100%;object-fit:contain}.status-card{flex:1}.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.status-item{background:var(--light);padding:1rem;border-radius:6px;border-left:4px solid var(--primary)}.status-item .label{font-size:.875rem;color:var(--text-light);font-weight:500;margin-bottom:.25rem}.status-item .value{font-size:1.5rem;font-weight:700;color:var(--text);font-family:Courier New,monospace}.metrics-card{flex:1}.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.metric-item{background:var(--light);padding:1rem;border-radius:6px;text-align:center;border-top:3px solid var(--primary);transition:transform .2s,box-shadow .2s}.metric-item:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.metric-item.critical{border-top-color:var(--critical);background:#fef2f2}.metric-item.warning{border-top-color:var(--warning);background:#fff7ed}.metric-item.error{border-top-color:var(--error);background:#fef2f2}.metric-item.info{border-top-color:var(--primary);background:#eff6ff}.metric-item.success{border-top-color:var(--success);background:#f0fdf4}.metric-value{font-size:2rem;font-weight:700;color:var(--text);font-family:Courier New,monospace;margin-bottom:.25rem}.metric-label{font-size:.875rem;color:var(--text-light);font-weight:500}.alerts-feed{flex:1.5;display:flex;flex-direction:column}.alerts-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.empty-state{display:flex;align-items:center;justify-content:center;height:150px;color:var(--text-light);font-size:.95rem;font-style:italic}.alert-item{padding:1rem;border-radius:6px;border-left:4px solid;background:var(--light);font-size:.9rem;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.alert-critical{border-left-color:var(--critical);background:#fef2f2}.alert-high{border-left-color:var(--error);background:#fef2f2}.alert-medium{border-left-color:var(--warning);background:#fff7ed}.alert-low{border-left-color:var(--primary);background:#eff6ff}.alert-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;font-weight:600}.alert-type{font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.alert-severity{font-size:.8rem;text-transform:uppercase;padding:.25rem .5rem;border-radius:4px;background:#0000001a}.alert-message{color:var(--text);margin-bottom:.5rem}.alert-time{color:var(--text-light);font-size:.8rem;font-family:Courier New,monospace}.alert-details{margin-top:.75rem;cursor:pointer}.alert-details summary{color:var(--text-light);font-size:.8rem;-webkit-user-select:none;user-select:none}.alert-details pre{background:#0000000d;padding:.5rem;border-radius:4px;font-size:.75rem;overflow-x:auto;margin-top:.5rem}.detections-list{flex:1;display:flex;flex-direction:column}.detections-table{flex:1;overflow-y:auto}.detections-table table{width:100%;border-collapse:collapse;font-size:.9rem}.detections-table thead{background:var(--light);position:sticky;top:0}.detections-table th{padding:.75rem;text-align:left;font-weight:600;color:var(--text);border-bottom:2px solid var(--border)}.detections-table td{padding:.75rem;border-bottom:1px solid var(--border);font-family:Courier New,monospace}.detections-table tbody tr:hover{background:var(--light)}@media(max-width:1400px){.main-container{grid-template-columns:1fr}.metrics-grid,.status-grid{grid-template-columns:1fr 1fr 1fr}}@media(max-width:1024px){.main-container{gap:1rem;padding:1rem}.header h1{font-size:1.5rem}.metrics-grid,.status-grid{grid-template-columns:1fr 1fr}.card{padding:1rem}}@media(max-width:768px){.main-container{grid-template-columns:1fr}.metrics-grid{grid-template-columns:1fr 1fr}.header{padding:1rem}.header-content{flex-direction:column;gap:1rem}.video-container{min-height:300px}}:root{color-scheme:light dark;color:#ffffffde;background-color:#242424}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}