@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0b1326;--surface:#131b2e;--surface-high:#222a3d;--surface-highest:#2d3449;--primary:#0da2e7;--primary-dim:#0da2e726;--on-surface:#dae2fd;--on-surface-variant:#c2c6d6;--outline:#8c909f;--outline-variant:#42475466;--error:#ffb4ab;--error-container:#93000a;--warning:#f4c430;--warning-dim:#f4c43026;--success:#4ade80;--success-dim:#4ade8026;--font-body:"Inter", sans-serif;--font-display:"Space Grotesk", sans-serif;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}body{font-family:var(--font-body);background-color:var(--bg);color:var(--on-surface);min-height:100vh;overflow:hidden}#root{height:100vh;display:flex}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--surface-highest);border-radius:2px}.sidebar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid var(--outline-variant);z-index:10;background:#131b2ecc;flex-direction:column;width:220px;min-width:220px;height:100vh;padding:24px 0;display:flex}.sidebar-logo{border-bottom:1px solid var(--outline-variant);align-items:center;gap:10px;padding:0 20px 28px;display:flex}.logo-icon{color:var(--primary);font-size:22px}.logo-text{font-family:var(--font-display);color:var(--on-surface);letter-spacing:.5px;font-size:18px;font-weight:700}.sidebar-nav{flex-direction:column;flex:1;gap:4px;padding:20px 12px;display:flex}.nav-item{width:100%;color:var(--on-surface-variant);font-family:var(--font-body);cursor:pointer;text-align:left;background:0 0;border:none;border-radius:6px;align-items:center;gap:12px;padding:10px 12px;font-size:13.5px;font-weight:500;transition:all .15s;display:flex;position:relative}.nav-item:hover{background:var(--surface-high);color:var(--on-surface)}.nav-item.active{background:var(--primary-dim);color:var(--primary)}.nav-icon{text-align:center;width:20px;font-size:16px}.nav-indicator{background:var(--primary);border-radius:2px 0 0 2px;width:3px;height:20px;position:absolute;top:50%;right:0;transform:translateY(-50%)}.sidebar-footer{border-top:1px solid var(--outline-variant);padding:16px 20px}.system-status{color:var(--success);align-items:center;gap:8px;margin-bottom:4px;font-size:12px;font-weight:500;display:flex}.pulse-dot{background:var(--success);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite pulse;box-shadow:0 0 #4ade8066}@keyframes pulse{0%,to{box-shadow:0 0 #4ade8066}50%{box-shadow:0 0 0 6px #4ade8000}}.camera-count{color:var(--on-surface-variant);padding-left:16px;font-size:11px}.header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--outline-variant);z-index:80;background:#131b2e99;flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 24px;display:flex;position:relative;overflow:visible}.header-title{font-family:var(--font-display);color:var(--on-surface);font-size:18px;font-weight:600;line-height:1.2}.header-breadcrumb{color:var(--on-surface-variant);gap:4px;margin-top:2px;font-size:11px;display:flex}.breadcrumb-sep{color:var(--outline)}.header-right{z-index:81;align-items:center;gap:16px;display:flex;position:relative}.header-time{flex-direction:column;align-items:flex-end;display:flex}.time-date{color:var(--on-surface-variant);font-size:11px}.time-clock{font-family:var(--font-display);color:var(--on-surface);letter-spacing:1px;font-size:16px;font-weight:600}.icon-btn{background:var(--surface-high);width:36px;height:36px;color:var(--on-surface-variant);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:16px;transition:background .15s;display:flex;position:relative}.icon-btn:hover{background:var(--surface-highest)}.notif-badge{background:var(--error-container);width:16px;height:16px;color:var(--error);border-radius:50%;justify-content:center;align-items:center;font-size:9px;font-weight:700;display:flex;position:absolute;top:-4px;right:-4px}.notif-panel{background:var(--surface-high);border:1px solid var(--outline-variant);z-index:200;border-radius:10px;width:320px;position:absolute;top:46px;right:52px;overflow:hidden;box-shadow:0 16px 32px #00000059}.notif-panel-header{border-bottom:1px solid var(--outline-variant);justify-content:space-between;align-items:center;padding:10px 12px;display:flex}.notif-title{font-family:var(--font-display);color:var(--on-surface);font-size:13px;font-weight:600}.notif-read-all{color:var(--primary);cursor:pointer;background:0 0;border:none;font-size:11px}.notif-list{flex-direction:column;max-height:260px;display:flex;overflow-y:auto}.notif-item{text-align:left;cursor:pointer;width:100%;color:var(--on-surface);background:0 0;border:none;border-left:2px solid #0000;flex-direction:column;gap:2px;padding:10px 12px;display:flex}.notif-item:hover{background:var(--surface-highest)}.notif-item.unread{border-left-color:var(--primary);background:var(--primary-dim)}.notif-item.read{opacity:.85}.notif-item-text{font-size:12px;line-height:1.3}.notif-item-time{color:var(--on-surface-variant);font-size:10px}.user-avatar{background:linear-gradient(135deg, var(--primary), #0066b2);width:36px;height:36px;font-family:var(--font-display);color:#fff;cursor:pointer;border-radius:6px;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.videofeed{flex-direction:column;flex:none;gap:12px;min-width:0;min-height:520px;display:flex}.videofeed-toolbar{justify-content:space-between;align-items:center;display:flex}.section-label{font-family:var(--font-display);color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.08em;font-size:13px;font-weight:600}.toolbar-actions{align-items:center;gap:6px;display:flex}.layout-btn{border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-size:12px;font-family:var(--font-display);cursor:pointer;background:0 0;border-radius:4px;padding:4px 10px;transition:all .15s}.layout-btn:hover,.layout-btn.active{background:var(--primary-dim);border-color:var(--primary);color:var(--primary)}.zone-btn{border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-size:12px;font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:4px;margin-left:8px;padding:4px 12px;transition:all .15s}.zone-btn:hover{background:var(--surface-high);color:var(--on-surface)}.feed-grid{flex:1;gap:8px;display:grid}.feed-grid.layout-1x1{grid-template-columns:1fr}.feed-grid.layout-2x2{grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}.feed-grid.layout-3x3{grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr)}.feed-grid.layout-3x3 .feed-cell{min-height:110px}.feed-cell{background:var(--surface);border:1px solid var(--outline-variant);cursor:pointer;border-radius:8px;transition:border-color .15s;position:relative;overflow:hidden}.feed-cell:hover{border-color:var(--outline)}.feed-cell.selected{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}.feed-cell.alert{border-color:var(--error-container);animation:2s ease-in-out infinite alert-glow;box-shadow:0 0 12px #93000a4d}@keyframes alert-glow{0%,to{box-shadow:0 0 8px #ffb4ab33}50%{box-shadow:0 0 20px #ffb4ab66}}.feed-cell.offline{opacity:.5}.feed-placeholder{background:repeating-linear-gradient(-45deg, var(--bg), var(--bg) 4px, var(--surface) 4px, var(--surface) 8px);justify-content:center;align-items:center;width:100%;height:calc(100% - 32px);min-height:100px;display:flex;position:relative;overflow:hidden}.feed-video{object-fit:cover;width:100%;height:100%;display:block}.no-stream{font-family:var(--font-display);letter-spacing:.08em;color:var(--outline);text-transform:uppercase;font-size:12px}.alert-box{color:var(--error);letter-spacing:.08em;border-left:2px solid var(--error);background:#93000ad9;border-radius:4px;align-items:center;gap:6px;padding:4px 8px;font-size:10px;font-weight:700;display:flex;position:absolute;top:8px;left:8px}.alert-dot{background:var(--error);border-radius:50%;width:6px;height:6px;animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.object-count-overlay{color:var(--primary);border:1px solid var(--primary-dim);background:#0d1b2ecc;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600;position:absolute;bottom:8px;right:8px}.offline-icon{color:var(--outline);font-size:28px}.feed-label{background:var(--surface);border-top:1px solid var(--outline-variant);align-items:center;gap:8px;height:32px;padding:0 10px;display:flex}.cam-name{font-family:var(--font-display);color:var(--on-surface);font-size:12px;font-weight:600}.cam-location{color:var(--on-surface-variant);flex:1;font-size:11px}.cam-status{letter-spacing:.06em;align-items:center;gap:4px;font-size:10px;font-weight:700;display:flex}.cam-status.active{color:var(--success)}.cam-status.offline{color:var(--outline)}.status-dot{background:currentColor;border-radius:50%;width:5px;height:5px}.event-list{flex-direction:column;gap:12px;width:100%;display:flex}.event-list.event-list-paginated{min-height:720px}.panel-header{justify-content:space-between;align-items:center;display:flex}.event-badge{color:var(--error);border-left:2px solid var(--error-container);background:#93000a4d;border-radius:4px;padding:2px 8px;font-size:13px;font-weight:600}.event-search{align-items:center;display:flex}.event-search-input{border:1px solid var(--outline-variant);background:var(--surface);width:100%;color:var(--on-surface);font-size:13px;font-family:var(--font-body);border-radius:8px;outline:none;padding:10px 12px}.event-search-input::placeholder{color:var(--on-surface-variant)}.event-search-input:focus{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary-dim)}.events-scroll{flex-direction:column;gap:4px;max-height:260px;display:flex;overflow-y:auto}.events-scroll.events-scroll-paginated{flex:1;min-height:620px;max-height:none}.event-empty{color:var(--on-surface-variant);flex:1;justify-content:center;align-items:center;font-size:14px;display:flex}.event-item{background:var(--surface);cursor:pointer;border-left:2px solid #0000;border-radius:6px;align-items:center;gap:8px;min-height:90px;padding:9px 12px;transition:background .1s;display:flex}.event-item:hover{background:var(--surface-high)}.event-item.sev-high{border-left-color:var(--error)}.event-item.sev-medium{border-left-color:var(--warning)}.event-item.sev-low{border-left-color:var(--success)}.sev-chip{letter-spacing:.06em;white-space:nowrap;border-radius:3px;padding:3px 6px;font-size:20px;font-weight:700}.sev-chip.sev-high{color:var(--error);background:#93000a66}.sev-chip.sev-medium{color:var(--warning);background:#f4c43026}.sev-chip.sev-low{background:var(--success-dim);color:var(--success)}.event-body{flex-direction:column;flex:1;gap:1px;display:flex}.event-type{color:var(--on-surface);font-size:18px;font-weight:600;line-height:1.2}.event-location{color:var(--on-surface-variant);font-size:15px;line-height:1.2}.event-time{font-family:var(--font-display);color:var(--on-surface-variant);white-space:nowrap;font-size:15px}.view-all-btn{border:1px solid var(--outline-variant);width:100%;color:var(--primary);font-size:13px;font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:6px;padding:8px;transition:all .15s}.view-all-btn:hover{background:var(--primary-dim)}.event-pagination{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-top:6px;display:grid}.pagination-summary{color:var(--on-surface-variant);justify-self:start;font-size:12px}.pagination-controls{justify-self:center;align-items:center;gap:8px;display:flex}.pagination-spacer{justify-self:end;width:1px;height:1px}.pagination-numbers{align-items:center;gap:6px;display:flex}.pagination-number-btn{border:1px solid var(--outline-variant);min-width:30px;height:30px;color:var(--on-surface-variant);font-size:12px;font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:6px;transition:all .15s}.pagination-number-btn:hover{background:var(--surface-high);color:var(--on-surface)}.pagination-number-btn.active{border-color:var(--primary);background:var(--primary-dim);color:var(--primary)}.pagination-btn{border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-size:12px;font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:6px;padding:4px 10px;transition:all .15s}.pagination-btn:hover:not(:disabled){background:var(--surface-high);color:var(--on-surface)}.pagination-btn:disabled{opacity:.35;cursor:not-allowed}.object-info{flex-direction:column;gap:12px;display:flex}.object-tiles{gap:6px;display:flex}.object-tile{background:var(--surface);border:1px solid var(--outline-variant);cursor:pointer;border-radius:8px;flex-direction:column;flex:1;align-items:center;gap:2px;padding:10px 6px;transition:background .15s;display:flex}.object-tile:hover{background:var(--surface-high)}.obj-icon{font-size:18px}.obj-count{font-family:var(--font-display);color:var(--on-surface);font-size:22px;font-weight:700;line-height:1}.obj-type{color:var(--on-surface-variant);font-size:10px;font-weight:500}.obj-trend{margin-top:2px;font-size:10px;font-weight:600}.obj-trend.up{color:var(--error)}.obj-trend.neutral{color:var(--on-surface-variant)}.obj-trend.down{color:var(--success)}.stat-cards{flex-direction:column;gap:6px;display:flex}.stat-card{background:var(--surface);border:1px solid var(--outline-variant);border-radius:6px;align-items:center;gap:8px;padding:10px 12px;display:flex}.stat-value{font-family:var(--font-display);color:var(--primary);min-width:52px;font-size:20px;font-weight:700}.stat-label{color:var(--on-surface-variant);flex:1;font-size:12px}.stat-delta{border-radius:4px;padding:2px 6px;font-size:11px;font-weight:600}.stat-delta.up{color:var(--error);background:#93000a33}.stat-delta.down{color:var(--success);background:var(--success-dim)}.event-chart{flex-direction:column;flex:none;gap:10px;display:flex}.chart-legend{gap:12px;display:flex}.legend-item{border-radius:4px;align-items:center;gap:5px;padding:2px 8px;font-size:11px;font-weight:500;display:flex}.legend-item:before{content:"";border-radius:1px;width:10px;height:2px;display:inline-block}.legend-item.intrusion{color:#ffb4ab}.legend-item.intrusion:before{background:#ffb4ab}.legend-item.motion{color:#0da2e7}.legend-item.motion:before{background:#0da2e7}.legend-item.loitering{color:#f4c430}.legend-item.loitering:before{background:#f4c430}.chart-container{background:var(--surface);border:1px solid var(--outline-variant);border-radius:8px;min-height:260px;padding:12px 8px 8px}.custom-tooltip{background:var(--surface-highest);border:1px solid var(--outline-variant);border-radius:6px;padding:8px 12px;font-size:12px}.tooltip-label{color:var(--on-surface);margin-bottom:4px;font-weight:600}.tooltip-value{font-size:11px}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#0b1326bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{background:var(--surface);border:1px solid var(--outline-variant);border-radius:12px;width:860px;max-width:95vw;max-height:90vh;overflow:hidden;box-shadow:0 24px 48px #00000080}.modal-header{border-bottom:1px solid var(--outline-variant);justify-content:space-between;align-items:flex-start;padding:20px 24px 16px;display:flex}.modal-title{font-family:var(--font-display);color:var(--on-surface);font-size:17px;font-weight:600}.modal-subtitle{color:var(--on-surface-variant);margin-top:2px;font-size:12px}.modal-close{background:var(--surface-high);width:32px;height:32px;color:var(--on-surface-variant);cursor:pointer;border:none;border-radius:6px;justify-content:center;align-items:center;font-size:14px;transition:background .15s;display:flex}.modal-close:hover{background:var(--surface-highest);color:var(--on-surface)}.modal-body{gap:0;max-height:calc(90vh - 80px);display:flex}.modal-canvas-area{border-right:1px solid var(--outline-variant);flex-direction:column;flex:1;display:flex}.canvas-header{background:var(--surface-high);border-bottom:1px solid var(--outline-variant);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.cam-select{background:var(--surface-highest);border:1px solid var(--outline-variant);color:var(--on-surface);font-size:12px;font-family:var(--font-body);cursor:pointer;border-radius:4px;outline:none;padding:4px 8px}.canvas-hint{color:var(--on-surface-variant);font-size:11px}.canvas-placeholder{background:repeating-linear-gradient(-45deg, var(--bg), var(--bg) 4px, var(--surface) 4px, var(--surface) 8px);flex:1;min-height:320px;position:relative;overflow:hidden}.canvas-crosshair-h{background:#0da2e733;height:1px;position:absolute;top:50%;left:0;right:0}.canvas-crosshair-v{background:#0da2e733;width:1px;position:absolute;top:0;bottom:0;left:50%}.zone-overlay{border:2px dashed;border-radius:4px;align-items:flex-start;padding:6px;display:flex;position:absolute}.zone-a{border-color:var(--error);background:#ffb4ab0f;width:40%;height:35%;top:20%;left:10%}.zone-b{border-color:var(--warning);background:#f4c4300f;width:40%;height:30%;top:50%;left:45%}.zone-tag{letter-spacing:.05em;color:inherit;background:#0b1326bf;border-radius:3px;padding:2px 6px;font-size:10px;font-weight:600}.zone-a .zone-tag{color:var(--error)}.zone-b .zone-tag{color:var(--warning)}.modal-controls{flex-direction:column;gap:20px;width:260px;padding:20px;display:flex;overflow-y:auto}.control-section{flex-direction:column;gap:10px;display:flex}.control-label{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;display:flex}.sensitivity-val{color:var(--primary);font-family:var(--font-display)}.zone-type-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.zone-type-btn{border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-size:11.5px;font-family:var(--font-body);cursor:pointer;text-align:center;background:0 0;border-radius:4px;padding:7px 8px;transition:all .15s}.zone-type-btn:hover{background:var(--surface-high);color:var(--on-surface)}.zone-type-btn.active{background:var(--primary-dim);border-color:var(--primary);color:var(--primary)}.slider{width:100%;accent-color:var(--primary);cursor:pointer;height:4px}.zones-list{flex-direction:column;gap:6px;display:flex}.zone-row{background:var(--surface-high);border-radius:6px;align-items:center;gap:8px;padding:8px 10px;display:flex}.zone-name{color:var(--on-surface);flex:1;font-size:12.5px;font-weight:600}.sev-chip{letter-spacing:.06em;border-radius:3px;padding:2px 6px;font-size:9px;font-weight:700}.sev-chip.sev-medium{background:var(--warning-dim);color:var(--warning)}.toggle-btn{border:1px solid var(--outline-variant);color:var(--outline);cursor:pointer;letter-spacing:.04em;background:0 0;border-radius:4px;padding:3px 8px;font-size:10px;font-weight:700;transition:all .15s}.toggle-btn.on{background:var(--success-dim);border-color:var(--success);color:var(--success)}.modal-actions{gap:8px;margin-top:auto;padding-top:8px;display:flex}.btn-secondary{border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:6px;flex:1;padding:9px;font-size:13px;transition:all .15s}.btn-secondary:hover{background:var(--surface-high);color:var(--on-surface)}.btn-primary{background:linear-gradient(135deg, var(--primary), #0066b2);color:#fff;font-family:var(--font-body);cursor:pointer;border:none;border-radius:6px;flex:1;padding:9px;font-size:13px;font-weight:600;transition:opacity .15s}.btn-primary:hover{opacity:.85}.app-shell{width:100vw;height:100vh;display:flex;overflow:hidden}.main-area{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.content-area{flex:1;gap:16px;padding:16px;display:flex;overflow:hidden}.feeds-column{flex-direction:column;flex:1;gap:16px;min-width:0;min-height:0;padding-right:4px;display:flex;overflow:hidden auto}.right-panel{flex-direction:column;gap:16px;width:280px;min-width:280px;padding:2px;display:flex;overflow-y:auto}.divider{background:var(--outline-variant);flex-shrink:0;height:1px}.full-panel{flex-direction:column;flex:1;min-width:0;display:flex}.panel-toolbar{align-items:center;margin-bottom:10px;display:flex}.back-btn{border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-size:12px;font-family:var(--font-body);cursor:pointer;background:0 0;border-radius:6px;padding:6px 10px;transition:all .15s}.back-btn:hover{background:var(--surface-high);color:var(--on-surface)}.placeholder-page{color:var(--on-surface-variant);justify-content:center;align-items:center;gap:12px;font-size:40px}.placeholder-page p{font-family:var(--font-display);font-size:16px}