*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0f14;--surface:#1a1d26;--surface-raised:#252836;--border:#2e3347;--text:#e8eaf0;--text-muted:#8b90a8;--accent:#4f8ef7;--accent-dim:#4f8ef71f;--pc-color:#4f8ef7;--goal-color:#f59e0b;--active-border:#2563eb;--radius:6px}body{background:var(--bg);color:var(--text);flex-direction:column;height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;display:flex;overflow:hidden}#root{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}header{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:24px;padding:10px 16px;display:flex}header h1{letter-spacing:.02em;color:var(--text);white-space:nowrap;font-size:14px;font-weight:600}.file-inputs{flex:1;gap:12px;display:flex}.file-label{color:var(--text-muted);cursor:pointer;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-raised);white-space:nowrap;align-items:center;gap:8px;padding:5px 10px;font-size:12px;transition:border-color .15s,color .15s;display:flex}.file-label:hover{border-color:var(--accent);color:var(--text)}.file-label.loaded{border-color:var(--accent);color:var(--accent)}.file-label input[type=file]{display:none}.video-url-input{color:var(--text-muted);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);width:220px;padding:5px 10px;font-size:12px;transition:border-color .15s,color .15s}.video-url-input::placeholder{color:var(--text-muted);opacity:.6}.video-url-input:focus{border-color:var(--accent);color:var(--text);outline:none}main{flex:1;display:flex;overflow:hidden}.video-panel{background:#000;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;position:relative}.video-panel video{object-fit:contain;width:100%;max-width:100%;height:100%;max-height:100%}.video-placeholder{color:var(--text-muted);pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:13px;display:flex;position:absolute;inset:0}.video-placeholder svg{opacity:.3}.sidebar{border-left:1px solid var(--border);background:var(--surface);flex-direction:column;flex-shrink:0;width:340px;min-height:0;display:flex;overflow:hidden}.sidebar-toolbar{border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:6px;padding:8px 12px;display:flex}#quarter-filters{display:contents}.sidebar-toolbar span{color:var(--text-muted);margin-left:auto;font-size:11px}.filter-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;border-radius:20px;padding:4px 10px;font-size:11px;font-weight:500;transition:all .15s}.filter-btn:hover{border-color:var(--accent);color:var(--text)}.filter-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}#event-list{flex:1;padding:4px 0;overflow-y:auto}#event-list::-webkit-scrollbar{width:4px}#event-list::-webkit-scrollbar-track{background:0 0}#event-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.quarter-header{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);background:var(--surface);z-index:1;padding:10px 12px 4px;font-size:10px;font-weight:700;position:sticky;top:0}.event-row{cursor:pointer;border-left:2px solid #0000;grid-template-columns:48px 1fr 32px 20px;align-items:center;gap:8px;padding:7px 12px;font-size:12px;transition:background .1s;display:grid}.event-row:hover{background:var(--surface-raised)}.add-to-playlist-btn{width:18px;height:18px;color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:1px solid #0000;border-radius:3px;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;transition:opacity .1s,color .1s,border-color .1s;display:flex}.event-row:hover .add-to-playlist-btn{opacity:1}.add-to-playlist-btn:hover{color:var(--accent);border-color:var(--accent)}.event-row.active{background:var(--accent-dim);border-left-color:var(--active-border)}.event-row.pc-event .event-code{color:var(--pc-color)}.event-row.goal-event .event-code{color:var(--goal-color)}.event-time{font-variant-numeric:tabular-nums;color:var(--text-muted);font-size:11px}.event-code{color:var(--text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.event-duration{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;font-size:10px}.playlist-panel{border-top:1px solid var(--border);flex-direction:column;flex-shrink:0;max-height:260px;display:flex}.playlist-panel.collapsed .playlist-list-wrap,.playlist-panel.collapsed #playlist-nav{display:none}.playlist-panel.collapsed{max-height:none}.playlist-header{letter-spacing:.08em;color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0;align-items:center;gap:7px;padding:8px 12px;font-size:10px;font-weight:700;display:flex}.playlist-header:hover{color:var(--text)}.playlist-count{background:var(--surface-raised);border:1px solid var(--border);font-variant-numeric:tabular-nums;border-radius:10px;padding:1px 6px;font-size:10px}.playlist-chevron{margin-left:auto;transition:transform .15s}.playlist-panel.collapsed .playlist-chevron{transform:rotate(-90deg)}.playlist-list-wrap{flex:1;padding:2px 0;overflow-y:auto}.playlist-list-wrap::-webkit-scrollbar{width:4px}.playlist-list-wrap::-webkit-scrollbar-track{background:0 0}.playlist-list-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.playlist-item{cursor:pointer;border-left:2px solid #0000;grid-template-columns:20px 26px 48px 1fr 20px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;transition:background .1s;display:grid}.playlist-item:hover{background:var(--surface-raised)}.playlist-item.active{background:var(--accent-dim);border-left-color:var(--active-border)}.playlist-index{color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;font-size:10px}.playlist-item.active .playlist-index{color:var(--accent)}.playlist-item-code{color:var(--text);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.playlist-remove-btn{width:18px;height:18px;color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:1px solid #0000;border-radius:3px;justify-content:center;align-items:center;padding:0;font-size:13px;line-height:1;transition:opacity .1s,color .1s;display:flex}.playlist-item:hover .playlist-remove-btn{opacity:1}.playlist-remove-btn:hover{color:#f87171;border-color:#f87171}.playlist-nav{border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:6px 12px;display:flex}.playlist-nav-btn{border-radius:var(--radius);border:1px solid var(--border);color:var(--text-muted);cursor:pointer;background:0 0;align-items:center;gap:4px;padding:4px 10px;font-size:11px;font-weight:500;transition:all .15s;display:flex}.playlist-nav-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text)}.playlist-nav-btn:disabled{opacity:.35;cursor:default}#playlist-position{color:var(--text-muted);font-variant-numeric:tabular-nums;font-size:11px}.playlist-empty{text-align:center;color:var(--text-muted);padding:12px;font-size:12px}.game-tab-bar{background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0;align-items:stretch;padding:0 4px;display:flex;overflow-x:auto}.game-tab-bar::-webkit-scrollbar{height:3px}.game-tab-bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.game-tab{height:36px;color:var(--text-muted);cursor:pointer;white-space:nowrap;border-bottom:2px solid #0000;flex-shrink:0;align-items:center;gap:6px;padding:0 12px;font-size:12px;transition:color .15s;display:flex}.game-tab:hover{color:var(--text)}.game-tab.active{color:var(--text);border-bottom-color:var(--accent)}.game-tab-label{text-overflow:ellipsis;max-width:180px;overflow:hidden}.game-tab-close{width:16px;height:16px;color:var(--text-muted);cursor:pointer;opacity:0;background:0 0;border:none;border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;transition:opacity .1s,color .1s,background .1s;display:flex}.game-tab:hover .game-tab-close{opacity:1}.game-tab-close:hover{background:var(--surface-raised);color:#f87171}.add-game-btn{height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;align-items:center;gap:5px;padding:0 12px;font-size:11px;font-weight:500;transition:color .15s;display:flex}.add-game-btn:hover{color:var(--accent)}.game-badge{letter-spacing:.04em;color:#fff;opacity:.9;white-space:nowrap;border-radius:3px;justify-content:center;align-items:center;padding:2px 5px;font-size:9px;font-weight:700;display:inline-flex}.empty-state{height:100%;color:var(--text-muted);text-align:center;justify-content:center;align-items:center;padding:16px;font-size:13px;display:flex}.empty-state.error{color:#f87171}.game-select{color:var(--text);background:var(--surface-raised);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;flex:1;min-width:0;padding:5px 10px;font-size:12px;transition:border-color .15s}.game-select:focus{border-color:var(--accent);outline:none}.game-select:disabled{opacity:.5;cursor:default}.load-game-btn{border-radius:var(--radius);border:1px solid var(--accent);background:var(--accent-dim);color:var(--accent);cursor:pointer;white-space:nowrap;padding:5px 14px;font-size:12px;font-weight:500;transition:background .15s,color .15s}.load-game-btn:hover:not(:disabled){background:var(--accent);color:#fff}.load-game-btn:disabled{opacity:.35;cursor:default}