:root{color-scheme:dark;--cyan:#00bad2;--panel:#242e38;--muted:#b9c1ca}*{box-sizing:border-box}html,body{margin:0;background:#0a0e13;font-family:Arial,Helvetica,sans-serif;color:#e5e7ea;font-size:14px}body{overflow:hidden}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;background:transparent;border:1px solid #48505a;border-radius:2px}button:hover{color:var(--cyan);border-color:var(--cyan)}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:disabled{opacity:.45;cursor:default}svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;vertical-align:middle;flex-shrink:0}h2{margin:0;font-size:14px;font-weight:500}h3{margin:0}p{color:var(--muted)}[hidden]{display:none!important}.symbols{position:absolute;width:0;height:0}#app{width:1748px;height:904px;position:relative;transform-origin:top left;overflow:hidden}.app-header{height:50px;background:#242d36;display:flex;align-items:center;justify-content:space-between;padding:0 25px 0 41px}.app-logo{color:#f8f9fb;text-decoration:none;font-size:26px;font-weight:700;letter-spacing:-1px}.account{display:flex;align-items:center;gap:10px}.visualization{color:var(--cyan);margin-right:32px}.avatar{background:#caae70;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;font-size:12px;color:white}.separator{color:#74808a;margin:0 22px}.account>svg{color:#92989e}.sidebar{position:absolute;top:50px;left:0;bottom:0;width:200px;background:#2e3a49}.sidebar nav{padding-top:34px;height:calc(100% - 43px);overflow:auto;scrollbar-width:none}summary{list-style:none;cursor:pointer}summary::-webkit-details-marker{display:none}.sidebar summary{height:42px;display:flex;align-items:center;padding:0 20px 0 25px;gap:13px;color:#c3c9d1}.sidebar summary svg{width:16px;height:16px;color:#f1f2f4}.sidebar details[open]>summary{color:var(--cyan)}.chevron{margin-left:auto;border-right:2px solid #9aabb8;border-bottom:2px solid #9aabb8;width:6px;height:6px;transform:rotate(45deg)}details[open]>summary .chevron{transform:rotate(225deg);border-color:var(--cyan)}.nav-item,.nav-label{display:block;width:100%;padding:10px 4px 10px 52px;text-align:left;border:0;border-radius:0;color:#c3c9d1;font-size:14px}.nav-label{color:#aeb8c5}.nav-item.active{background:#242e3a;color:var(--cyan);border-left:2px solid var(--cyan);padding-left:50px}.nav-item:hover{background:#273340}.collapse-menu{position:absolute;bottom:0;width:100%;height:43px;border:0;background:#242e3a;text-align:left;padding-left:21px}.workspace{position:absolute;left:200px;top:50px;right:0;bottom:0}.dashboard-grid{height:100%;padding:18px 11px 13px 15px;display:grid;grid-template-columns:312px minmax(0,1fr) 400px;grid-template-rows:575px 230px;gap:18px 20px}.panel{background:var(--panel);border-radius:2px;min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between}.plain{border:0;padding:0;background:none;display:inline-grid;place-items:center;min-width:24px;min-height:24px;line-height:1;color:#d0d3d6}.plain:hover{color:var(--cyan)}.camera-list{padding:14px 18px}.camera-list h2{margin-bottom:15px}.search{display:flex;border:1px solid #424b55;height:33px;align-items:center;padding:0 10px}.search input{border:0;outline:0;background:none;width:100%;min-width:0;color:#e5e7ea;font-weight:600}.search input::placeholder{color:#7f8790}.search svg{width:16px;height:16px}.camera-tree{margin-top:8px;font-size:13px}.camera-tree>summary{display:flex;align-items:center;gap:9px;padding:5px 4px 5px 2px}.camera-tree>summary:before{content:'';width:6px;height:6px;border-right:1px solid;border-bottom:1px solid;transform:rotate(-45deg)}.camera-tree[open]>summary:before{transform:rotate(45deg);margin-top:-4px}.online{font-size:10px;line-height:17px;background:#00b9d0;color:white;border-radius:4px;padding:0 6px;margin-left:auto;font-weight:600}.camera-node{display:flex;width:100%;align-items:center;gap:8px;border:0;font-size:12px;padding:9px 5px 9px 17px}.camera-node svg{width:16px;height:16px}.monitor-panel{padding:10px 18px 12px}.monitor-panel .panel-heading{margin-bottom:11px}.close-monitor{font-size:21px;font-weight:200}.camera-player{height:471px;border:2px solid var(--cyan);position:relative;background:black;overflow:hidden}.camera-image{width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.73)}.camera-player.contain .camera-image{object-fit:contain}.camera-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0008,transparent 18%,transparent 80%,#000b)}.camera-title{position:absolute;top:14px;left:18px;font-size:12px;color:#fff;font-weight:600}.close-camera{position:absolute;right:4px;top:4px;font-size:22px;color:white}#camera-clock{position:absolute;top:16px;right:40px;color:#fff;font:11px monospace;text-shadow:0 1px 3px black}.roi-overlay{position:absolute;inset:0;width:100%;height:100%;stroke:#06b400;stroke-width:1.5;pointer-events:none}.roi-overlay polygon{fill:#04bc0006}.person-box{position:absolute;left:82%;top:17%;width:10%;height:38%;border:2px solid #29f251;box-shadow:0 0 0 1px #0003}.person-box span{position:absolute;bottom:100%;left:-2px;white-space:nowrap;background:#29f251;color:#071b0b;font-size:10px;padding:2px 3px}.player-controls{position:absolute;bottom:10px;left:12px;right:12px;display:flex;align-items:center;gap:10px;color:white}.player-controls label{font-size:10px;display:flex;align-items:center;gap:3px;white-space:nowrap;text-shadow:0 1px 2px black}.player-controls input{margin:0;width:12px;height:12px;accent-color:#159cff}.player-controls select{width:105px;max-width:105px;background:#fff;color:#151515;font-size:10px;height:22px;border:1px solid #aaa;border-radius:0}.player-controls a{color:white}.player-controls svg{width:20px;height:20px}.player-spacer{flex:1}.monitor-bottom{display:flex;gap:16px;justify-content:flex-end;align-items:center;padding-top:12px;color:#99a3ad}.monitor-bottom button{font-size:24px;color:#99a3ad}.camera-state{font-size:11px;color:#8c969e;margin-right:auto}.empty-player{height:471px;width:100%;border:1px dashed #45505c;font-size:38px;color:#6f7c87}.empty-player span{display:block;font-size:15px;margin-top:15px}.type-panel,.trend-panel{padding:15px 18px}.type-panel h2,.trend-panel h2,.realtime-panel h2{font-family:Georgia,'Times New Roman',serif;font-size:14px;color:#fff;font-weight:600}.type-body{display:flex;align-items:center;gap:5px;height:179px}.donut{width:116px;height:116px;flex:0 0 116px;border-radius:50%;background:conic-gradient(#0b9d48 0 81%,#e5d461 81% 82%,#0b9d48 82% 100%);display:grid;place-items:center}.donut>span{border-radius:50%;background:var(--panel);width:67px;height:67px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:10px;font-weight:bold}.donut b{margin-top:4px;color:var(--cyan)}.type-legend{min-width:0;font-size:12px}.type-legend>span{display:flex;align-items:center;margin:0 0 9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.type-legend i,.trend-legend i{width:10px;height:10px;border-radius:2px;background:var(--color);display:inline-block;margin-right:5px;flex-shrink:0}.legend-pager{display:flex;justify-content:center;gap:7px;color:#cdd2d7}.legend-pager button{border:0;padding:0;font-size:12px;color:#aaa}.trend-legend{display:flex;align-items:center;gap:9px;margin-top:17px;font-size:12px;white-space:nowrap}.trend-chart{display:block;width:100%;height:140px;margin-top:10px;stroke:none}.chart-grid path{stroke:#8f949b;stroke-dasharray:4 2;stroke-width:.7}.axis-labels{fill:#899098;font:12px Arial}.chart-line{stroke:#00bdfb;stroke-width:1.8;fill:none}.chart-area{fill:#00a8d508}.trend-chart circle{fill:#00b8f3;stroke:#b5e7ff;stroke-width:.5}.realtime-panel{grid-column:3;grid-row:1 / 3;padding:13px 18px 0;position:relative;overflow:hidden;display:flex;flex-direction:column}.realtime-panel .panel-heading{height:29px;margin-bottom:14px}.realtime-panel .panel-heading svg{width:15px;height:15px;color:#919ba6}#alarm-stream{flex:1;min-height:0;overflow:hidden;position:relative;mask-image:linear-gradient(black 94%,transparent)}.alarm-card{display:block;text-align:left;width:100%;border:1px solid #44505c;background:#293541;border-radius:2px;margin-bottom:13px;padding:0;overflow:hidden;will-change:transform}.alarm-card:hover{border-color:var(--cyan)}.alarm-card .alarm-top{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;font-size:12px;background:#303c48}.alarm-top strong{font-weight:500}.alarm-dot{display:inline-block;width:6px;height:6px;background:#fb5959;border-radius:50%;margin-right:6px}.alarm-top time{font-size:11px;color:#9faab5}.alarm-body{display:flex;gap:12px;padding:10px}.alarm-thumb{position:relative;flex:0 0 132px;height:81px;overflow:hidden}.alarm-thumb img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}.alarm-thumb:after{content:'';position:absolute;left:82%;top:17%;width:9%;height:38%;border:1px solid #1cff4a}.alarm-info{font-size:11px;line-height:1.9;color:#b4bfca}.alarm-info strong{font-size:12px;font-weight:400;color:#e8edf2}.unprocessed{display:inline-block;color:#ff7975;font-size:11px}.processed{color:#44d9a8}.stream-footer{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:43px;font-size:10px;color:#93a4b3}.stream-footer>span{display:flex;align-items:center;gap:5px}.stream-footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan)}.stream-footer button{font-size:11px;border:0;color:var(--cyan);padding:0}.alarm-settings{position:absolute;top:49px;right:15px;background:#344353;border:1px solid #5c6b7a;box-shadow:0 8px 30px #0008;width:275px;padding:18px;z-index:10}.alarm-settings strong{display:block;margin-bottom:15px}.alarm-settings label{display:flex;align-items:center;gap:7px;font-size:12px}.alarm-settings button{margin-top:15px;padding:6px 10px;color:var(--cyan)}input[type=checkbox]{accent-color:var(--cyan)}.events-page{padding:24px;height:100%;overflow:auto}.event-filters{padding:18px 24px}.event-filters h2,.event-results h2,.cameras-page h2{font-size:16px;font-weight:600}.filter-grid{display:grid;grid-template-columns:1fr 1fr 1fr 190px;gap:18px 24px;margin-top:22px}.filter-grid label{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:13px}.filter-grid input,.filter-grid select{min-width:0;flex:1;width:100px;height:32px;background:#242e38;border:1px solid #46515d;border-radius:2px;padding:0 8px;color:#d1d7dd;font-size:12px}.filter-buttons{display:flex;gap:10px}.filter-buttons button{padding:0 18px}.primary{background:#00b7cf;border:1px solid #00b7cf;color:white;padding:8px 19px}.primary:hover{background:#11c9de;color:white}.event-results{margin-top:16px;padding:20px 24px}.results-heading{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3b4551;padding-bottom:19px}.results-heading>div:first-child{display:flex;align-items:center;gap:20px}.results-heading span{font-size:12px;color:#bdc6cd}.results-heading b{color:#ff5a64;font-weight:400}.quick-filters{display:flex;gap:10px}.quick-filters button{padding:7px 11px;font-size:12px}.quick-filters button.active{border-color:var(--cyan);color:var(--cyan)}#event-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 18px;padding-top:24px}.event-card{border:1px solid #414c57;border-radius:2px;overflow:hidden;position:relative}.event-card>button{padding:0;width:100%;border:0;text-align:left;display:block}.event-picture{height:144px;position:relative;overflow:hidden;background:#131d27}.event-picture img{width:100%;height:100%;object-fit:cover;filter:brightness(.8)}.event-status{position:absolute;top:0;right:0;padding:4px 7px;background:#db504f;color:#fff;font-size:10px}.event-status.done{background:#168b65}.event-picture .person-box{border-width:1px}.event-picture .person-box span{font-size:7px}.event-meta{padding:11px;font-size:11px;line-height:1.9;color:#bbc3cc}.event-meta p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-meta b{font-weight:400;color:#e0e5eb}.event-check{position:absolute;left:8px;top:8px;z-index:2;width:17px;height:17px}.results-footer{border-top:1px solid #3b4551;margin-top:20px;padding-top:16px;display:flex;justify-content:space-between;font-size:11px;color:#8e9eac}.no-events{text-align:center;padding:80px 0}.cameras-page{margin:24px;padding:24px;height:calc(100% - 48px)}.cameras-page>p{margin:25px 0}.cameras-page .online{margin-left:15px}.camera-tile{width:450px;padding:0;text-align:left;overflow:hidden}.camera-tile img{width:100%;display:block}.camera-tile>span{display:flex;padding:16px;align-items:center}.camera-tile .online{margin-left:auto}.modal-backdrop{position:absolute;inset:0;background:#000b;z-index:100;display:grid;place-items:center}.event-dialog{background:#26313c;width:780px;border:1px solid #4a5968;box-shadow:0 30px 90px #0009;max-height:850px;overflow:auto}.dialog-heading{display:flex;justify-content:space-between;align-items:center;padding:15px 22px}.dialog-heading h2{font-size:16px}.dialog-heading button{font-size:25px}.detail-image{position:relative;height:360px;overflow:hidden}.detail-image img{width:100%;height:100%;object-fit:cover}.detail-content{padding:22px}.detail-content h3{font-size:19px}.detail-content dl{display:grid;grid-template-columns:160px 1fr;gap:13px;margin:20px 0}.detail-content dt{color:#98a8b7}.detail-content dd{margin:0}.detail-content p{font-size:12px;color:#98a8b7}.camera-player.expanded{position:absolute;left:18px;top:18px;right:18px;bottom:18px;width:auto;height:auto;z-index:50;box-shadow:0 0 0 2000px #080d12e8}.camera-player.expanded .camera-image{object-fit:contain}.sidebar-collapsed .sidebar{width:60px}.sidebar-collapsed .sidebar summary{padding-left:21px;font-size:0;gap:0}.sidebar-collapsed .chevron,.sidebar-collapsed .nav-item,.sidebar-collapsed .nav-label{display:none}.sidebar-collapsed .workspace{left:60px}.sidebar-collapsed .dashboard-grid{grid-template-columns:312px minmax(0,1fr) 400px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.sidebar summary{white-space:nowrap;gap:11px;padding-right:17px}.camera-image{object-fit:fill}.alarm-thumb img,.event-picture img,.detail-image img{object-fit:fill}