*,*: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;height:100dvh;background:#1a1a1a;color:#e0e0e0;font-family:system-ui,-apple-system,sans-serif;outline:none}.icon-btn{display:inline-flex;align-items:center;justify-content:center;gap:0;line-height:1}.icon{width:16px;height:16px;display:block}.sidebar{width:280px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #333;padding:12px;gap:8px;overflow-y:auto}.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}.clear-btn{padding:8px 12px;background:transparent;color:#999;border:1px solid #555;border-radius:4px;cursor:pointer;font-size:14px}.clear-btn:hover{color:#fff;border-color:#999}.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;padding:8px 12px}.layout-actions{position:absolute;top:0;right:0;display:inline-flex;gap:8px;pointer-events:auto}.layout-menu-panel{position:absolute;top:calc(100% + 6px);right:0;display:flex;flex-direction:column;gap:8px;padding:8px;background:#181818f2;border:1px solid #333;border-radius:8px;box-shadow:0 8px 24px #0006}.layout-btn{padding:6px 10px;background:#282828e6;color:#e0e0e0;border:1px solid #444;border-radius:4px;cursor:pointer;font-size:12px}.layout-btn.icon-btn{padding:6px 8px}.layout-btn:hover:not(:disabled){background:#3c3c3ce6}.layout-btn:disabled{opacity:.5;cursor:not-allowed}.layout-menu-separator{height:1px;background:#3a3a3a;margin:2px 0}.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;position:absolute;top:0;left:0;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.icon-btn{padding:6px 8px}.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;position:relative}.grid-divider{position:absolute;z-index:15;touch-action:none}.grid-divider-col{top:0;bottom:0;width:12px;transform:translate(-50%);cursor:col-resize}.grid-divider-row{left:0;right:0;height:12px;transform:translateY(-50%);cursor:row-resize}.grid-divider:after{content:"";position:absolute;background:transparent;border-radius:2px;transition:background .15s ease}.grid-divider-col:after{top:0;bottom:0;left:50%;width:2px;transform:translate(-50%)}.grid-divider-row:after{left:0;right:0;top:50%;height:2px;transform:translateY(-50%)}.grid-divider:hover:after,.grid-divider:active:after{background:#4a9eff}.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-new{text-align:left;margin:0 0 32px;padding:16px 20px;background:linear-gradient(135deg,#1e3a5f,#1a2c44);border:1px solid #2a6cb5;border-radius:6px;color:#cfe3f7;font-size:14px;line-height:1.6}.welcome-new p{margin:0}.welcome-new-badge{display:inline-block;margin-right:6px;padding:1px 8px;background:#2a6cb5;color:#fff;border-radius:10px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.welcome-new-link{margin-top:12px;padding:8px 18px;background:#2a6cb5;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:600}.welcome-new-link:hover:not(:disabled){background:#3580d0}.welcome-new-link:disabled{opacity:.6;cursor:default}.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-sample-btn{margin-top:24px;padding:10px 24px;background:#2a6cb5;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:14px}.welcome-sample-btn:hover:not(:disabled){background:#3580d0}.welcome-sample-btn:disabled{opacity:.6;cursor:default}.welcome-tunn3l{margin-top:32px;text-align:left;color:#999;font-size:14px}.welcome-tunn3l h3{font-size:14px;font-weight:600;color:#aaa;margin:0 0 8px}.welcome-tunn3l p{margin:0 0 8px}.welcome-tunn3l ol{margin:0;padding-left:20px;line-height:1.7}.welcome-bookmarklet{display:inline-block;padding:4px 12px;background:#333;color:#4da6ff;border:1px solid #555;border-radius:4px;text-decoration:none;font-size:13px;cursor:grab}.welcome-bookmarklet:hover{background:#444;border-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;touch-action:none}.video-frame{position:absolute;inset:0}.video-pane video{display:block;touch-action:none}.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}.share-dialog{width:min(560px,90vw)}.share-description{margin:0;font-size:13px;color:#b8b8b8;line-height:1.5}.share-url-textarea{width:100%;min-height:80px;padding:8px;background:#2a2a2a;color:#e0e0e0;border:1px solid #444;border-radius:4px;font-size:12px;font-family:monospace;resize:vertical;word-break:break-all;box-sizing:border-box}.share-url-textarea:focus{outline:none;border-color:#2a6cb5}.share-copy-btn{padding:8px 16px;background:#2a6cb5;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:13px;align-self:flex-start}.share-copy-btn:hover{background:#3580d0}.drop-action-dialog{max-width:460px}.drop-action-buttons{display:flex;flex-direction:column;gap:10px;margin-top:8px}.drop-action-btn{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:left;background:#1f1f1f;border:1px solid #383838;border-radius:6px;color:#eee;cursor:pointer;transition:background .15s ease,border-color .15s ease}.drop-action-btn:hover:not(:disabled){background:#2a2a2a;border-color:#2a6cb5}.drop-action-icon{width:24px;height:24px;flex-shrink:0;color:#cbd6e2}.drop-action-btn:hover:not(:disabled) .drop-action-icon{color:#4a9eff}.drop-action-text{display:flex;flex-direction:column;gap:3px;min-width:0}.drop-action-btn strong{font-size:14px}.drop-action-btn span{font-size:12px;color:#9a9a9a}.drop-action-btn:disabled{opacity:.5;cursor:not-allowed}.share-options{display:flex;flex-direction:column;gap:6px}.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}.fullscreen-controls:hover,.fullscreen-controls:focus-within,.fullscreen-controls.visible{opacity:1}@media(hover:none)and (pointer:coarse){.fullscreen-controls{opacity:1}}@media(max-width:600px){.sidebar{width:200px;padding:8px}.transport-controls{flex-wrap:wrap;gap:4px;padding:6px 8px}.transport-btn{padding:6px 10px;font-size:12px}.scrubber-container{order:-1;flex-basis:100%;margin-bottom:4px}}@media(max-height:500px){.transport-controls{padding:4px 8px;gap:4px}.transport-btn{padding:4px 8px;font-size:11px}.time-display{font-size:11px}.rate-select{padding:2px 4px;font-size:11px}}.transport-controls{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#222;border-top:1px solid #333;flex-shrink:0}.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}.play-btn.icon-btn{min-width:36px;padding:6px 10px}.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}.scrubber-marker-sync{background:#f5c542;width:3px;height:16px;box-shadow:0 0 3px #f5c542cc}.video-sync-badge{position:absolute;top:6px;left:6px;z-index:5;padding:1px 6px;border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#1a1505;background:#f5c542;pointer-events:none;-webkit-user-select:none;user-select:none}.video-mute-btn{position:absolute;bottom:6px;right:6px;z-index:11;width:28px;height:28px;padding:0;border:none;border-radius:50%;color:#fff;background:#00000080;cursor:pointer;opacity:.5;transition:opacity .15s ease,background .15s ease}.video-mute-btn.in-fullscreen{bottom:64px}.video-pane:hover .video-mute-btn{opacity:.85}.video-mute-btn:hover{opacity:1;background:#000000b8}.video-mute-btn.muted{color:#b9b9b9}.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}