:root{font-family:Bahnschrift,Segoe UI Variable Text,Segoe UI,Arial,sans-serif;color:#e5edf5;background:#07111d;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #07111d;--surface: #0b1726;--surface-2: #0f1d2e;--surface-3: #132337;--border: #23374d;--border-strong: #31506c;--text: #e5edf5;--muted: #8da0b5;--muted-2: #667c92;--green: #35d399;--green-dark: #0b503e;--blue: #71b7ff;--amber: #f0b35c;--red: #ff6b6b;--mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace}*{box-sizing:border-box}html{min-width:320px;background:var(--bg)}body{margin:0;min-width:320px;min-height:100vh;background:linear-gradient(90deg,rgba(23,48,65,.18) 1px,transparent 1px),linear-gradient(rgba(23,48,65,.13) 1px,transparent 1px),var(--bg);background-size:48px 48px}button,input,select{font:inherit}button{cursor:pointer}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.46}.app-shell{min-height:100vh}.topbar{min-height:68px;padding:10px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#07111df5;position:sticky;top:0;z-index:30}.brand{min-width:0;display:flex;align-items:center;gap:13px}.brand-mark{width:43px;height:43px;border:1px solid #2e6a5d;border-radius:7px;display:grid;place-items:center;color:#89f4cc;background:#0a201d;font-family:var(--mono);font-size:12px;font-weight:800;letter-spacing:.08em}.brand-copy{min-width:0}.brand-copy p,.brand-copy h1{margin:0}.brand-copy p{color:#79e7c0;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.brand-copy h1{margin-top:3px;font-size:clamp(18px,2vw,24px);font-weight:650;letter-spacing:-.02em}.system-status{display:flex;align-items:center;gap:22px}.system-clock{padding-right:22px;border-right:1px solid var(--border);display:grid;justify-items:end;font-family:var(--mono)}.system-clock span{color:var(--muted);font-size:10px}.system-clock strong{margin-top:2px;color:var(--text);font-size:13px}.connection-status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px;white-space:nowrap}.status-dot{width:8px;height:8px;border-radius:50%;background:#64748b;box-shadow:0 0 0 3px #64748b24}.status-dot.online{background:var(--green);box-shadow:0 0 0 3px #35d39924}.status-dot.error{background:var(--red);box-shadow:0 0 0 3px #ff6b6b24}.workspace{width:min(1580px,100%);margin:0 auto;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:14px;align-items:start}.monitor-panel,.device-panel{border:1px solid var(--border);background:var(--surface)}.monitor-panel{min-width:0;padding:16px;border-radius:10px}.device-panel{padding:14px;border-radius:10px;position:sticky;top:86px;max-height:calc(100vh - 104px);overflow:hidden}.monitor-header,.device-header,.playback-header,.timeline-toolbar,.playback-actions{display:flex;align-items:center;justify-content:space-between;gap:16px}.monitor-header{margin-bottom:12px;align-items:flex-start}.overline{display:block;margin-bottom:5px;color:#72dcbc;font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.monitor-title-row{display:flex;align-items:center;gap:10px}.monitor-title-row h2,.device-header h2,.playback-header h3{margin:0}.monitor-title-row h2{font-size:clamp(20px,2.5vw,29px);font-weight:650;letter-spacing:-.025em}.monitor-header p{margin:5px 0 0;color:var(--muted);font-family:var(--mono);font-size:11px}.mode-badge{padding:5px 8px;border:1px solid var(--border-strong);border-radius:5px;color:var(--muted);background:var(--surface-2);font-family:var(--mono);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.mode-badge.live{color:#91f3cf;border-color:#276c59;background:#0a2e26}.mode-badge.playback{color:#abd4ff;border-color:#315f8b;background:#102c49}.monitor-security{min-width:118px;padding:8px 10px;border-left:2px solid var(--border-strong);display:grid;justify-items:end;font-family:var(--mono)}.monitor-security span{color:var(--muted);font-size:9px;text-transform:uppercase}.monitor-security strong{margin-top:3px;color:var(--text);font-size:11px}.video-shell{width:100%;aspect-ratio:16 / 9;min-height:300px;position:relative;overflow:hidden;border:1px solid #2a4259;border-radius:7px 7px 0 0;background:#02070d}#main-player{width:100%;height:100%;background:#000}#main-player>div,#main-player canvas,#main-player video{max-width:100%}.empty-state,.loading-overlay{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px}.empty-state{background:linear-gradient(rgba(32,55,75,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(32,55,75,.12) 1px,transparent 1px),#050c14;background-size:32px 32px}.empty-state h3{margin:15px 0 5px;font-size:17px;font-weight:600}.empty-state p{max-width:520px;margin:0;color:var(--muted);font-size:12px;line-height:1.6}.empty-symbol{width:54px;height:54px;border:1px solid #31536a;border-radius:50%;display:grid;place-items:center;background:#0c1c29}.empty-symbol span{width:0;height:0;margin-left:4px;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:12px solid #6ee7bd}.loading-overlay{gap:12px;background:#03090fcc;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.loading-overlay strong{font-size:12px;font-weight:600}.hidden{display:none!important}.spinner{width:30px;height:30px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stream-strip{min-height:48px;padding:7px 10px;border:1px solid var(--border);border-top:0;border-radius:0 0 7px 7px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:#091522}.stream-identity{min-width:104px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;text-transform:uppercase}.stream-dot{width:7px;height:7px;border-radius:50%;background:#64748b}.stream-dot.live{background:var(--green)}.stream-dot.playback{background:var(--blue)}.stream-strip dl{margin:0;display:flex;justify-content:flex-end;gap:clamp(18px,4vw,46px)}.stream-strip dl div{min-width:64px}.stream-strip dt,.stream-strip dd{margin:0}.stream-strip dt{color:var(--muted-2);font-family:var(--mono);font-size:8px;text-transform:uppercase}.stream-strip dd{margin-top:2px;color:#cbd8e5;font-family:var(--mono);font-size:10px}.primary-controls{padding:11px 0 0;display:flex;flex-wrap:wrap;gap:7px}.btn,.icon-button{border:1px solid var(--border);color:#d8e3ed;background:#0c1928;transition:border-color .14s ease,background .14s ease,color .14s ease,transform .14s ease}.btn{min-height:36px;padding:7px 12px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:600}.btn:hover:not(:disabled),.icon-button:hover:not(:disabled){border-color:#4e718e;background:#112238}.btn:active:not(:disabled),.icon-button:active:not(:disabled){transform:translateY(1px)}.btn-primary{color:#032218;border-color:#55dfac;background:#62e3b5}.btn-primary:hover:not(:disabled){color:#021a12;border-color:#83efc8;background:#79ebc1}.btn-secondary{min-height:39px}.btn-playback{min-width:150px;color:#071b2e;border-color:#8ec6ff;background:#82beff}.btn-playback:hover:not(:disabled){background:#9bceff}.btn-compact{min-width:54px;min-height:33px;padding:6px 9px;font-family:var(--mono);font-size:10px}.playback-console{margin-top:12px;padding:14px;border:1px solid var(--border);border-radius:7px;background:#081421}.playback-header{align-items:flex-start}.playback-header h3{font-size:16px;font-weight:650}.playback-header p{max-width:670px;margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.playback-readout,.selected-time-card{padding:8px 10px;border-left:2px solid #3f78a8;background:#0c1b2b;display:grid;min-width:182px}.playback-readout span,.selected-time-card span{color:var(--muted);font-family:var(--mono);font-size:8px;text-transform:uppercase}.playback-readout strong,.selected-time-card strong{margin-top:3px;color:#ddecfa;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}.timeline-toolbar{margin-top:13px;justify-content:flex-start;align-items:flex-end}.field{display:grid;gap:5px}.field>span{color:var(--muted);font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.field input,.field select,.camera-search input{min-height:39px;border:1px solid var(--border);border-radius:5px;padding:7px 9px;color:var(--text);background:#07111d;outline:none;color-scheme:dark}.field input:focus,.field select:focus,.camera-search input:focus{border-color:#4b86b3;box-shadow:0 0 0 2px #4b86b321}.field-date{min-width:155px}.field-duration{min-width:142px}.selected-time-card{min-width:205px;flex:1}.timeline-wrap{margin-top:14px;padding:12px 12px 10px;border:1px solid #1c3044;border-radius:6px;background:#06101a}.timeline-scale{padding:0 2px 5px;display:flex;justify-content:space-between;color:var(--muted-2);font-family:var(--mono);font-size:8px}.timeline-track{height:34px;position:relative;display:flex;align-items:center}.timeline-grid{position:absolute;inset:10px 0;border:1px solid #284258;border-radius:2px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(4.1667% - 1px),rgba(82,111,134,.25) calc(4.1667% - 1px),rgba(82,111,134,.25) 4.1667%),#142535}.timeline-segments{position:absolute;inset:10px 1px;z-index:1;overflow:hidden;border-radius:2px;pointer-events:none}.timeline-segment{position:absolute;top:2px;bottom:2px;min-width:2px;border:0;border-radius:2px;background:#32c990;box-shadow:inset 0 0 0 1px #d6ffef33}.timeline-segment.event{background:#dca04d}.timeline-segment.vehicle,.timeline-segment.human{background:#5caaf4}.timeline-segment.mixed{background:linear-gradient(90deg,#32c990,#dca04d,#5caaf4)}.timeline-segment.adaptive-start{top:0;bottom:0;min-width:5px;border-radius:1px}.timeline-segment.adaptive-start.actual{background:#7cf2c7;box-shadow:0 0 0 1px #031c13e6,0 0 8px #7cf2c78c}.timeline-segment.adaptive-start.provisional{background:#f0b35c;box-shadow:0 0 0 1px #231704e6,0 0 7px #f0b35c80}.timeline-segment.adaptive-empty{top:4px;bottom:4px;opacity:.78;background:repeating-linear-gradient(135deg,#667b8e 0 3px,#2f3e4c 3px 6px);box-shadow:none}.timeline-segments.loading:after{content:"";position:absolute;inset:2px 0;background:linear-gradient(90deg,transparent,rgba(151,211,255,.28),transparent);animation:timeline-loading 1.1s linear infinite}@keyframes timeline-loading{0%{transform:translate(-100%)}to{transform:translate(100%)}}.timeline-selection-window{position:absolute;top:8px;bottom:8px;left:var(--selection-left, 0%);width:var(--selection-width, 0%);z-index:2;border:1px solid #d8efff;border-radius:2px;background:#4aa8e847;pointer-events:none}.timeline-range{width:100%;height:34px;margin:0;position:relative;z-index:3;appearance:none;background:transparent;cursor:pointer}.timeline-range::-webkit-slider-runnable-track{height:14px;background:transparent}.timeline-range::-webkit-slider-thumb{width:16px;height:26px;margin-top:-6px;border:2px solid #d8efff;border-radius:3px;appearance:none;background:#4aa8e8;box-shadow:0 0 0 3px #4aa8e829}.timeline-range::-moz-range-track{height:14px;background:transparent}.timeline-range::-moz-range-thumb{width:13px;height:23px;border:2px solid #d8efff;border-radius:3px;background:#4aa8e8}.timeline-legend{margin-top:6px;display:flex;justify-content:space-between;gap:16px;color:var(--muted-2);font-size:9px}.timeline-legend span{display:flex;align-items:center;gap:6px}.legend-recording,.legend-actual,.legend-provisional,.legend-empty,.legend-selection{width:9px;height:8px;display:inline-block;border-radius:1px}.legend-recording{background:#32c990}.legend-actual{background:#7cf2c7;box-shadow:0 0 5px #7cf2c77a}.legend-provisional{background:#f0b35c}.legend-empty{background:repeating-linear-gradient(135deg,#667b8e 0 2px,#2f3e4c 2px 4px)}.legend-selection{border:1px solid #d8efff;background:#4aa8e859}.record-segment-summary{flex:1}.timeline-refresh{padding:0;border:0;color:#8fc6ee;background:transparent;font-family:var(--mono);font-size:9px}.timeline-refresh:hover:not(:disabled){color:#c3e4fc;text-decoration:underline}.playback-actions{margin-top:11px}.step-controls{display:flex;flex-wrap:wrap;gap:6px}.advanced-time{margin-top:11px;border-top:1px solid #1c3044;padding-top:9px}.advanced-time summary{width:fit-content;color:var(--muted);cursor:pointer;font-family:var(--mono);font-size:9px}.advanced-grid{margin-top:9px;display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:10px}.message-box{margin-top:10px;padding:9px 11px;border:1px solid var(--border);border-left-width:3px;border-radius:5px;font-size:11px;line-height:1.45}.message-box.info{color:#b9d9f2;border-left-color:#5d9ac8;background:#0b1b2a}.message-box.success{color:#b9f0d9;border-left-color:var(--green);background:#0a211c}.message-box.error{color:#ffd0d0;border-left-color:var(--red);background:#251316}.device-header{margin-bottom:10px}.device-header h2{font-size:17px;font-weight:650}.icon-button{width:35px;height:35px;border-radius:5px;font-size:17px}.camera-search{min-height:38px;margin-bottom:10px;position:relative;display:block}.camera-search input{width:100%;padding-left:30px;font-size:11px}.search-icon{position:absolute;left:10px;top:50%;z-index:2;transform:translateY(-50%);color:var(--muted);font-size:15px}.camera-list{max-height:calc(100vh - 208px);overflow-y:auto;display:grid;gap:8px;padding-right:3px;scrollbar-width:thin;scrollbar-color:#415b72 #0a1623}.camera-list::-webkit-scrollbar{width:7px}.camera-list::-webkit-scrollbar-track{background:#0a1623}.camera-list::-webkit-scrollbar-thumb{border-radius:5px;background:#415b72}.camera-card{width:100%;min-height:93px;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:6px;display:grid;grid-template-columns:116px minmax(0,1fr);color:inherit;text-align:left;background:#091522;transition:border-color .14s ease,background .14s ease}.camera-card:hover{border-color:#496a84;background:#0c1b2b}.camera-card.active{border-color:#52d5a5;box-shadow:inset 3px 0 #52d5a5}.camera-thumb{min-height:91px;position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(rgba(41,68,91,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(41,68,91,.16) 1px,transparent 1px),#101e30;background-size:20px 20px}.camera-thumb img{width:100%;height:100%;object-fit:cover}.camera-initial{color:#9baec2;font-family:var(--mono);font-size:24px;font-weight:800}.camera-status{position:absolute;top:6px;right:6px;padding:3px 5px;border:1px solid #30475d;border-radius:3px;color:#b8c6d3;background:#040a11d1;font-family:var(--mono);font-size:7px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.camera-card.active .camera-status{color:#04241a;border-color:#45d19f;background:#45d19f}.camera-meta{min-width:0;padding:10px 9px;display:flex;justify-content:center;flex-direction:column}.camera-meta strong,.camera-meta span,.camera-meta small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.camera-meta strong{font-size:12px;font-weight:650}.camera-meta span{margin-top:4px;color:var(--muted);font-size:9px}.camera-meta small{margin-top:5px;color:var(--muted-2);font-family:var(--mono);font-size:8px}.empty-camera-list{padding:26px 12px;border:1px dashed var(--border);border-radius:6px;color:var(--muted);text-align:center;font-size:11px}@media(max-width:1120px){.workspace{grid-template-columns:1fr}.device-panel{position:static;max-height:none}.camera-list{max-height:none;grid-template-columns:repeat(2,minmax(0,1fr))}.timeline-toolbar{flex-wrap:wrap}}@media(max-width:760px){.topbar{padding:10px 13px;align-items:flex-start}.system-clock{display:none}.connection-status{font-size:10px}.workspace{padding:10px;gap:10px}.monitor-panel,.device-panel{padding:11px;border-radius:7px}.monitor-header{gap:8px}.monitor-security{display:none}.video-shell{min-height:190px}.stream-strip{align-items:flex-start;flex-direction:column}.stream-strip dl{width:100%;justify-content:space-between;gap:10px}.playback-header{align-items:stretch;flex-direction:column}.playback-readout{width:100%}.timeline-toolbar{align-items:stretch;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.selected-time-card{grid-column:1 / -1}.timeline-legend{align-items:flex-start;flex-direction:column}.playback-actions{align-items:stretch;flex-direction:column}.btn-playback{width:100%}.advanced-grid,.camera-list{grid-template-columns:1fr}.camera-card{grid-template-columns:110px minmax(0,1fr)}}@media(max-width:480px){.brand-mark{display:none}.brand-copy p{font-size:8px}.brand-copy h1{font-size:17px}.primary-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.primary-controls .btn:last-child{grid-column:1 / -1}.timeline-toolbar{grid-template-columns:1fr}.selected-time-card{grid-column:auto}.step-controls{display:grid;grid-template-columns:repeat(4,1fr)}.btn-compact{min-width:0}}