*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:#1a1a1a;color:#e0e0e0}.app{display:flex;height:100vh;background:#1a1a1a;color:#e0e0e0;font-family:system-ui,-apple-system,sans-serif;outline:none}.sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #333;padding:12px;gap:8px;overflow:hidden}.sidebar-header{display:flex;gap:8px}.open-folder-btn{padding:8px 16px;background:#2a6cb5;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.sidebar-hide-btn{padding:8px 10px;background:#333;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:13px;white-space:nowrap}.sidebar-hide-btn:hover{background:#444}.open-folder-btn:hover{background:#3580d0}.sidebar-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}.sidebar-select{padding:6px 8px;background:#2a2a2a;color:#e0e0e0;border:1px solid #444;border-radius:4px;font-size:13px}.session-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}.sidebar-footer{margin-top:8px;font-size:11px;color:#777;text-align:center;align-self:center;display:inline-flex;gap:4px;padding:4px 8px;background:#3a3a3a;border:1px solid #4a4a4a;border-radius:6px}.sidebar-footer a{color:#7fc7ff;text-decoration:none;font-weight:600}.sidebar-footer a:hover,.sidebar-footer a:focus-visible{color:#a9ddff;text-decoration:underline}.help-btn{margin-top:auto;padding:8px 10px;background:#2b2b2b;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:12px}.help-btn:hover{background:#3a3a3a}.session-item{padding:8px 10px;border-radius:4px;cursor:pointer;font-size:12px;line-height:1.4;word-break:break-word}.session-item:hover{background:#2a2a2a}.session-item.selected{background:#2a6cb5;color:#fff}.main-panel{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}.main-overlays{position:absolute;inset:0;pointer-events:none;z-index:20;display:flex;flex-direction:column;gap:8px;padding:8px 12px}.layout-actions{align-self:flex-end;display:inline-flex;gap:8px;pointer-events:auto}.layout-btn{padding:6px 10px;background:#282828e6;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:12px}.layout-btn:hover{background:#3c3c3ce6}.layout-action{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px}.layout-slot-panel{background:#181818f2;border:1px solid #333;border-radius:8px;padding:8px 10px;min-width:170px;box-shadow:0 8px 24px #0006}.layout-slot-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#a8a8a8;margin-bottom:6px}.layout-slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.layout-slot-btn{padding:6px 8px;background:#282828f2;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:11px}.layout-slot-btn.filled{border-color:#3e6d99;color:#bfe1ff}.layout-slot-btn:disabled{opacity:.5;cursor:default}.layout-slot-note{margin-top:6px;font-size:11px;color:#8a8a8a}.sidebar-toggle-btn{align-self:flex-start;padding:6px 10px;background:#333;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:12px;pointer-events:auto}.sidebar-toggle-btn:hover{background:#444}.hidden-cameras{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 10px;background:#1f1f1fe6;border:1px solid #333;border-radius:6px;font-size:12px;pointer-events:auto;align-self:flex-start;width:fit-content;max-width:100%}.hidden-cameras-label{color:#aaa;text-transform:uppercase;letter-spacing:.4px;font-size:11px}.hidden-camera-btn{padding:4px 10px;border-radius:4px;border:1px solid #444;background:#2b2b2b;color:#e0e0e0;cursor:pointer;font-size:12px}.hidden-camera-btn:hover{background:#3a3a3a}.hidden-camera-btn.show-all-btn{background:#2a6cb5;border-color:#2a6cb5;color:#fff}.hidden-camera-btn.show-all-btn:hover{background:#3580d0}.video-grid{flex:1;display:grid;gap:4px;padding:4px;min-height:0}.video-grid-empty{flex:1;display:flex;align-items:center;justify-content:center;color:#666;font-size:16px}.welcome-page{text-align:center;max-width:640px;padding:32px}.welcome-title{font-size:28px;font-weight:700;color:#ccc;margin:0 0 4px}.welcome-subtitle{font-size:14px;color:#888;margin:0 0 32px}.welcome-getting-started{text-align:left;color:#999;font-size:14px}.welcome-getting-started h3{font-size:14px;font-weight:600;color:#aaa;margin:0 0 8px}.welcome-getting-started ol{margin:0;padding-left:20px;line-height:1.7}.welcome-hint{margin-top:24px;font-size:13px;color:#666}.welcome-page kbd{background:#333;border:1px solid #555;border-radius:3px;padding:1px 5px;font-family:inherit;font-size:12px;color:#ccc}.video-pane{background:#000;position:relative;overflow:hidden;border-radius:4px;display:flex;align-items:center;justify-content:center}.video-frame{position:absolute;inset:0}.video-pane video{display:block}.video-pane.hidden .video-frame{opacity:0;pointer-events:none}.video-hidden-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0009;z-index:5}.video-hidden-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 16px;border-radius:6px;background:#141414e6;border:1px solid #333}.video-hidden-title{font-size:13px;color:#bbb}.video-hidden-btn{padding:6px 12px;border-radius:4px;border:1px solid #444;background:#2a6cb5;color:#fff;cursor:pointer;font-size:12px}.video-hidden-btn:hover{background:#3580d0}.context-menu{position:fixed;background:#2a2a2a;border:1px solid #444;border-radius:4px;padding:4px 0;z-index:1000;min-width:200px;box-shadow:0 4px 12px #00000080}.context-menu-item{padding:8px 16px;cursor:pointer;font-size:13px}.context-menu-item:hover{background:#3a3a3a}.context-menu-separator{height:1px;background:#444;margin:4px 0}.help-dialog-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000}.help-dialog{width:min(720px,90vw);max-height:85vh;background:#1f1f1f;border:1px solid #3a3a3a;border-radius:10px;box-shadow:0 20px 50px #00000080;display:flex;flex-direction:column}.help-dialog-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid #333}.help-dialog-header h2{margin:0;font-size:18px;color:#f0f0f0}.help-dialog-close{padding:6px 10px;background:#2b2b2b;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:12px}.help-dialog-close:hover{background:#3a3a3a}.help-dialog-body{padding:14px 18px 18px;overflow:auto;display:grid;gap:16px}.help-section h3{margin:0 0 8px;font-size:14px;color:#cfcfcf;text-transform:uppercase;letter-spacing:.6px}.help-section ul,.help-section ol{margin:0;padding-left:18px;color:#b8b8b8;font-size:13px;line-height:1.5}.help-section p{margin:0 0 8px;color:#b8b8b8;font-size:13px;line-height:1.5}.help-section kbd{background:#333;border:1px solid #555;border-radius:3px;padding:1px 5px;font-family:inherit;font-size:12px;color:#ccc}.settings-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#b8b8b8;cursor:pointer}.export-field{display:flex;flex-direction:column;gap:4px}.export-label{font-size:12px;color:#999;text-transform:uppercase;letter-spacing:.4px}.export-input,.export-select{padding:6px 8px;background:#2a2a2a;color:#e0e0e0;border:1px solid #444;border-radius:4px;font-size:13px}.export-input:disabled,.export-select:disabled{opacity:.5}.export-error{color:#e06060;font-size:13px}.export-actions{display:flex;gap:8px}.export-progress-container{position:relative;height:24px;background:#2a2a2a;border:1px solid #444;border-radius:4px;overflow:hidden}.export-progress-bar{height:100%;background:#2a6cb5;transition:width .15s ease}.export-progress-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#e0e0e0;font-variant-numeric:tabular-nums}.export-input-row{display:flex;align-items:center;gap:8px}.export-input-row .export-input{flex:1}.export-mark-btn{padding:4px 8px;background:#2a2a2a;color:#999;border:1px solid #3a3a3a;border-radius:4px;cursor:pointer;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.export-mark-btn:hover{background:#3a3a3a;color:#e0e0e0}.export-mark-btn:disabled{opacity:.4;cursor:default}.video-pane:fullscreen{background:#000;display:flex;align-items:center;justify-content:center}.fullscreen-controls{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(transparent,#000c);opacity:0;transition:opacity .3s;z-index:10}.video-pane:fullscreen:hover .fullscreen-controls,.video-pane:fullscreen .fullscreen-controls:focus-within{opacity:1}.transport-controls{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#222;border-top:1px solid #333}.transport-btn{padding:6px 14px;background:#333;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:13px;white-space:nowrap}.transport-btn:hover{background:#444}.transport-btn:disabled{opacity:.4;cursor:default}.transport-btn-active{background:#2a6cb5;border-color:#2a6cb5;color:#fff}.transport-btn-active:hover{background:#3580d0}.play-btn{min-width:64px}.scrubber-container{flex:1;position:relative;display:flex;align-items:center}.scrubber{flex:1;accent-color:#2a6cb5;position:relative;z-index:1}.scrubber-region{position:absolute;top:50%;height:6px;transform:translateY(-50%);background:#2a6cb54d;border-radius:2px;pointer-events:none;z-index:0}.scrubber-marker{position:absolute;top:50%;width:2px;height:14px;transform:translate(-50%,-50%);pointer-events:none;z-index:2}.scrubber-marker-in,.scrubber-marker-out{background:#4a9eff}.time-display{font-size:12px;font-variant-numeric:tabular-nums;color:#999;min-width:40px;text-align:center}.rate-select{padding:6px 8px;background:#333;color:#e0e0e0;border:1px solid #444;border-radius:4px;font-size:13px}