:root{--color-neutral-50: hsl(30, 8%, 98%);--color-neutral-100: hsl(30, 8%, 96%);--color-neutral-200: hsl(30, 6%, 90%);--color-neutral-300: hsl(30, 5%, 83%);--color-neutral-400: hsl(30, 4%, 64%);--color-neutral-500: hsl(30, 4%, 45%);--color-neutral-600: hsl(30, 4%, 24%);--color-neutral-700: hsl(30, 5%, 17%);--color-neutral-800: hsl(30, 5%, 11%);--color-neutral-900: hsl(30, 6%, 7%);--color-coral-300: #ffb399;--color-coral-400: #ff8f66;--color-coral-500: #ff6b35;--color-coral-600: #e55a2b;--color-coral-700: #cc4a22;--color-coral-800: #b33a18;--color-coral-900: #992b0f;--color-cyan-300: #66e8ff;--color-cyan-400: #33e1ff;--color-cyan-500: #00d9ff;--color-cyan-600: #00bcd4;--color-cyan-700: #00acc1;--color-cyan-800: #0097a7;--color-cyan-900: #00838f;--color-green-500: #22c55e;--color-red-500: #ef4444;--color-amber-500: #fbbf24;--spacing-1: .25rem;--spacing-2: .5rem;--spacing-3: .75rem;--spacing-4: 1rem;--spacing-6: 1.5rem;--spacing-8: 2rem;--spacing-12: 3rem;--spacing-16: 4rem;--font-family-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;--font-size-xs: .6875rem;--font-size-sm: .75rem;--font-size-md: .8125rem;--font-size-base: .875rem;--font-size-lg: 1rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--line-height-tight: 1.25;--line-height-normal: 1.5;--line-height-relaxed: 1.75;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-full: 9999px;--radius-button: var(--radius-sm);--radius-panel: var(--radius-md);--radius-input: var(--radius-sm);--color-bg-primary: var(--color-neutral-900);--color-bg-surface: var(--color-neutral-800);--color-bg-elevated: var(--color-neutral-700);--color-bg-hover: var(--color-neutral-600);--color-text-primary: var(--color-neutral-100);--color-text-secondary: #ccc;--color-text-muted: #888;--color-text-disabled: #555;--color-border-default: var(--color-neutral-600);--color-border-muted: var(--color-neutral-700);--color-accent-primary: var(--color-coral-500);--color-accent-primary-hover: var(--color-coral-400);--color-accent-secondary: var(--color-cyan-500);--color-accent-secondary-hover: var(--color-cyan-400);--color-status-success: var(--color-green-500);--color-status-error: var(--color-red-500);--color-status-warning: var(--color-amber-500)}:root{font-family:var(--font-family-sans);line-height:var(--line-height-normal);font-weight:var(--font-weight-normal);color-scheme:light dark;color:var(--color-text-primary);background-color:var(--color-bg-surface);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}.speed-controls{display:flex;align-items:center;gap:var(--spacing-2);margin-left:auto}.speed-label{font-size:var(--font-size-base);color:var(--color-text-muted)}.speed-buttons{display:flex;gap:var(--spacing-1)}.speed-button{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:4px;cursor:pointer;font-size:var(--font-size-sm);transition:all .2s}.speed-button:hover:not(:disabled){background-color:var(--color-bg-hover)}.speed-button.active{background-color:var(--color-accent-primary);border-color:var(--color-accent-primary);color:#fff}.speed-button:disabled{opacity:.5;cursor:not-allowed}.frame-controls{display:flex;align-items:center;gap:var(--spacing-2)}.frame-button{padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:4px;color:var(--color-text-primary);font-size:var(--font-size-md);cursor:pointer;transition:background-color .15s,border-color .15s}.frame-button:hover:not(:disabled){background-color:var(--color-bg-hover);border-color:var(--color-accent-primary)}.frame-button:disabled{opacity:.5;cursor:not-allowed}.frame-hint{color:var(--color-text-muted);font-size:var(--font-size-sm);-webkit-user-select:none;user-select:none}.timecode-display{display:flex;flex-direction:column;gap:var(--spacing-1);background-color:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:6px;padding:var(--spacing-2) var(--spacing-3);min-width:180px}.timecode-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-4)}.timecode-label{color:var(--color-text-muted);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px}.timecode-value{font-family:var(--font-family-mono);font-size:var(--font-size-base);color:var(--color-accent-secondary);font-weight:var(--font-weight-semibold);letter-spacing:1px}.frame-value{font-family:var(--font-family-mono);font-size:var(--font-size-base);color:var(--color-accent-primary);font-weight:var(--font-weight-semibold)}.timecode-fps{color:var(--color-neutral-500);font-size:var(--font-size-xs);text-align:right;margin-top:var(--spacing-1)}.annotation-canvas{position:absolute;top:0;left:0;pointer-events:none}.annotation-canvas--active{pointer-events:auto;cursor:crosshair}.label-panel{display:flex;flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-surface);border-radius:var(--radius-panel);border:1px solid transparent;transition:border-color .15s ease}.label-panel__mode-bar{width:100%;height:32px;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-elevated);border-radius:var(--radius-button);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-muted);transition:background-color .15s ease,color .15s ease}.label-panel__mode-bar--active{background-color:var(--color-accent-primary);color:#fff}.label-panel--active{border-color:var(--color-accent-primary)}.label-panel__row{display:flex;align-items:center;gap:var(--spacing-3)}.label-panel__row--shot-type{padding-left:var(--spacing-2);padding-top:var(--spacing-1);border-top:1px solid var(--color-border-muted)}.label-panel__title{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.label-panel__chips{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.label-panel__hint{margin-left:auto;font-size:var(--font-size-sm);color:var(--color-accent-primary);font-style:italic}.label-chip{padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid transparent;border-radius:var(--radius-button);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all .15s ease;white-space:nowrap}.label-chip:hover{background-color:var(--color-bg-hover)}.label-chip--selected{background-color:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary)}.label-chip--selected:hover{background-color:var(--color-accent-primary-hover)}.label-chip--clear{background-color:var(--color-neutral-800);color:var(--color-text-muted)}.label-chip--clear:hover{background-color:var(--color-neutral-700);color:var(--color-text-secondary)}.label-chip--clear.label-chip--selected{background-color:var(--color-neutral-600);color:var(--color-text-primary);border-color:var(--color-neutral-500)}.label-chip--shot{background-color:var(--color-neutral-800)}.label-chip--shot:hover{background-color:var(--color-neutral-700)}.label-chip--shot.label-chip--selected{background-color:var(--color-accent-secondary);color:var(--color-bg-primary);border-color:var(--color-accent-secondary)}.label-chip--shot.label-chip--selected:hover{background-color:var(--color-accent-secondary-hover)}.label-chip__hotkey{font-family:var(--font-family-mono);font-size:.75em;font-weight:var(--font-weight-semibold);opacity:.7;margin-right:var(--spacing-1);padding:var(--spacing-1) var(--spacing-1);background:#ffffff1a;border-radius:3px}.label-chip--selected .label-chip__hotkey{opacity:1;background:#fff3}.label-panel__row--ball-type{padding-left:var(--spacing-2);padding-top:var(--spacing-1);border-top:1px solid var(--color-border-muted)}.tab-panel__pane .label-panel{background-color:transparent;border-radius:0;border:none;padding:var(--spacing-3)}.hotkey-modal__overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hotkey-modal{background-color:var(--color-bg-surface);border-radius:var(--radius-panel);border:1px solid var(--color-border-default);box-shadow:0 8px 32px #0006;max-width:600px;max-height:80vh;overflow:auto;animation:slideIn .2s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.hotkey-modal__header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border-muted)}.hotkey-modal__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0}.hotkey-modal__close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-button);color:var(--color-text-muted);font-size:var(--font-size-xl);cursor:pointer;transition:all .15s ease}.hotkey-modal__close:hover{background-color:var(--color-bg-elevated);color:var(--color-text-primary)}@media(prefers-reduced-motion:reduce){.hotkey-modal__overlay,.hotkey-modal{animation:none}}.hotkey-panel{display:flex;gap:var(--spacing-4);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm)}.hotkey-panel__column{display:flex;flex-direction:column;gap:var(--spacing-2);min-width:140px}.hotkey-panel__title{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-1)}.hotkey-panel__subtitle{color:var(--color-text-muted);font-size:var(--font-size-xs);font-style:italic;margin-bottom:var(--spacing-1)}.hotkey-panel__shortcuts{display:flex;flex-direction:column;gap:var(--spacing-1)}.hotkey-panel__row{display:flex;align-items:center;gap:var(--spacing-2)}.hotkey-panel__key{display:inline-block;background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-button);padding:var(--spacing-1) var(--spacing-2);font-family:var(--font-family-mono);font-size:var(--font-size-sm);color:var(--color-text-muted);min-width:2rem;text-align:center;white-space:nowrap}.hotkey-panel__action{color:var(--color-text-secondary);white-space:nowrap}.hotkey-panel__divider{width:1px;background-color:var(--color-bg-elevated);margin:var(--spacing-1) 0}.progress-panel{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-surface);border-radius:var(--radius-panel);font-size:var(--font-size-sm)}.progress-panel__label{color:var(--color-text-muted);font-weight:var(--font-weight-semibold)}.progress-panel__stat{color:var(--color-text-secondary)}.progress-panel__divider{color:var(--color-text-disabled)}.progress-panel__percentage{color:var(--color-accent-secondary);font-weight:var(--font-weight-semibold)}.progress-panel__predictions{display:flex;flex-direction:column;gap:var(--spacing-1);min-width:120px}.progress-panel__predictions-label{color:var(--color-cyan-600);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.5px}.progress-panel__predictions-stat{color:var(--color-text-secondary);font-size:var(--font-size-sm)}.progress-panel__check{color:var(--color-status-success);margin-left:var(--spacing-1)}.progress-panel__bar{width:100%;height:4px;background-color:var(--color-bg-hover);border-radius:2px;overflow:hidden}.progress-panel__bar-fill{height:100%;background-color:var(--color-cyan-600);border-radius:2px;transition:width .2s ease}.tab-panel__pane .progress-panel{background-color:transparent;border-radius:0;padding:var(--spacing-3)}.annotation-timeline{display:flex;flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-surface);border-radius:var(--radius-panel)}.annotation-timeline__label{color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.annotation-timeline__track{position:relative;height:32px;background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-button);cursor:pointer}.annotation-timeline__marker{position:absolute;top:50%;width:4px;height:16px;transform:translate(-50%,-50%);border-radius:2px;transition:transform .1s ease,opacity .1s ease,box-shadow .1s ease;z-index:5;cursor:pointer}.annotation-timeline__marker:hover{transform:translate(-50%,-50%) scale(1.2)}.annotation-timeline__marker--manual:hover{background-color:var(--color-accent-primary-hover);box-shadow:0 0 4px #ff6b3580}.annotation-timeline__marker--predicted:hover{background-color:var(--color-accent-secondary-hover);box-shadow:0 0 4px #00d9ff80}.annotation-timeline__marker--manual{background-color:var(--color-accent-primary)}.annotation-timeline__marker--predicted{background-color:var(--color-accent-secondary)}.annotation-timeline__marker--active{height:20px;width:5px;z-index:6}.annotation-timeline__marker--active.annotation-timeline__marker--manual{background-color:var(--color-accent-primary-hover);box-shadow:0 0 4px #ff6b3580}.annotation-timeline__marker--active.annotation-timeline__marker--predicted{background-color:var(--color-accent-secondary-hover);box-shadow:0 0 4px #00d9ff80}.annotation-timeline__position{position:absolute;top:0;bottom:0;width:2px;background-color:var(--color-accent-primary);transform:translate(-50%);pointer-events:none;z-index:10}.annotation-timeline__position--has-annotation{box-shadow:0 0 6px #ff6b3599}.prediction-panel{display:flex;flex-direction:column;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-surface);border-radius:var(--radius-panel);border:1px solid transparent;transition:border-color .15s ease}.prediction-panel--error{border-color:var(--color-status-error)}.prediction-panel__header{display:flex;align-items:center;justify-content:space-between}.prediction-panel__title{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:var(--font-weight-semibold)}.prediction-panel__confidence{display:flex;flex-direction:column;gap:var(--spacing-1);padding:var(--spacing-2) 0;border-bottom:1px solid var(--color-border-muted);margin-bottom:var(--spacing-1)}.prediction-panel__label-count{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.prediction-panel__confidence-level{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.confidence--none{color:var(--color-text-muted)}.confidence--insufficient{color:var(--color-status-warning)}.confidence--ready,.confidence--good{color:var(--color-status-success)}.confidence--low,.confidence--medium{color:var(--color-status-warning)}.confidence--high{color:var(--color-status-success)}.prediction-panel__training{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-1);padding:var(--spacing-2) 0;border-bottom:1px solid var(--color-border-muted);margin-bottom:var(--spacing-1)}.prediction-panel__training-hint{font-size:var(--font-size-xs);color:var(--color-text-muted);font-style:italic}.prediction-panel__button--secondary{background-color:var(--color-bg-elevated);color:var(--color-text-secondary);border:1px solid var(--color-border-default)}.prediction-panel__button--secondary:hover:not(:disabled){background-color:var(--color-bg-hover);color:var(--color-text-primary);border-color:var(--color-border-default)}.prediction-panel__button--trained{border:1px solid var(--color-status-success)}.prediction-panel__predict-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-1)}.prediction-panel__trained-indicator{font-size:var(--font-size-xs);color:var(--color-status-success)}.prediction-panel__spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--color-border-default);border-top-color:var(--color-accent-secondary);border-radius:50%;animation:spin .8s linear infinite;margin-right:var(--spacing-2)}.prediction-panel__inputs{display:flex;flex-direction:column;gap:var(--spacing-2)}.prediction-panel__input-row{display:flex;align-items:center;gap:var(--spacing-2)}.prediction-panel__label{font-size:var(--font-size-sm);color:var(--color-text-secondary);width:2.5rem}.prediction-panel__input{width:4rem;padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-input);color:var(--color-text-primary);font-size:var(--font-size-sm);text-align:center}.prediction-panel__input:focus{outline:none;border-color:var(--color-accent-secondary)}.prediction-panel__input:disabled{opacity:.5;cursor:not-allowed}.prediction-panel__set-current{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-elevated);border:1px solid var(--color-border-default);border-radius:var(--radius-button);color:var(--color-text-muted);font-size:var(--font-size-xs);cursor:pointer;transition:all .15s ease}.prediction-panel__set-current:hover:not(:disabled){background-color:var(--color-bg-hover);color:var(--color-text-secondary)}.prediction-panel__set-current:disabled{opacity:.5;cursor:not-allowed}.prediction-panel__range-info{font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center;padding-top:var(--spacing-1)}.prediction-panel__range-error{color:var(--color-status-error)}.prediction-panel__progress{display:flex;flex-direction:column;gap:var(--spacing-1)}.prediction-panel__progress-bar{height:6px;background-color:var(--color-bg-elevated);border-radius:3px;overflow:hidden}.prediction-panel__progress-fill{height:100%;background-color:var(--color-accent-secondary);border-radius:3px;transition:width .15s ease}.prediction-panel__progress-text{font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center}.prediction-panel__status{font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center}.prediction-panel__status--error{color:var(--color-status-error)}.prediction-panel__status--complete{color:var(--color-status-success)}.prediction-panel__actions{display:flex;justify-content:center;padding-top:var(--spacing-1)}.prediction-panel__button{padding:var(--spacing-2) var(--spacing-3);border:none;border-radius:var(--radius-button);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .15s ease}.prediction-panel__button:disabled{opacity:.5;cursor:not-allowed}.prediction-panel__button--primary{background-color:var(--color-accent-secondary);color:var(--color-bg-primary)}.prediction-panel__button--primary:hover:not(:disabled){background-color:var(--color-accent-secondary-hover)}.prediction-panel__button--cancel{background-color:var(--color-bg-hover);color:var(--color-text-primary)}.prediction-panel__button--cancel:hover:not(:disabled){background-color:var(--color-bg-hover)}.prediction-panel__button--retry{background-color:var(--color-accent-primary);color:var(--color-text-primary)}.prediction-panel__button--retry:hover:not(:disabled){background-color:var(--color-accent-primary-hover)}.prediction-panel__button--reset{background-color:var(--color-bg-elevated);color:var(--color-text-secondary)}.prediction-panel__button--reset:hover:not(:disabled){background-color:var(--color-bg-hover);color:var(--color-text-primary)}.tab-panel__pane .prediction-panel{background-color:transparent;border-radius:0;border:none;padding:var(--spacing-3)}.tab-panel{display:flex;flex-direction:column;background-color:var(--color-bg-surface);border-radius:var(--radius-panel);overflow:hidden}.tab-panel__tabs{display:flex;gap:0;background-color:var(--color-bg-elevated);border-bottom:1px solid var(--color-border-muted)}.tab-panel__tab{flex:1;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;border-bottom:2px solid transparent;color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .15s ease}.tab-panel__tab:hover{color:var(--color-text-primary);background-color:var(--color-bg-hover)}.tab-panel__tab--active{color:var(--color-text-primary);border-bottom-color:var(--color-accent-primary)}.tab-panel__content{flex:1;min-height:0}.tab-panel__pane{height:100%}.tab-panel__pane--active{display:block;animation:fadeIn .2s ease-in}.tab-panel__pane--hidden{display:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.tab-panel__pane--active{animation:none}.tab-panel__tab{transition:none}}.action-bar{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-surface);border-radius:var(--radius-panel);height:48px}.action-bar__group{display:flex;align-items:center;gap:var(--spacing-2)}.action-bar__divider{width:1px;height:24px;background-color:var(--color-border-muted)}.action-bar__spacer{flex:1}.action-bar__button{padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-elevated);color:var(--color-text-muted);border:none;border-radius:var(--radius-button);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all .15s ease}.action-bar__button:hover:not(:disabled){background-color:var(--color-bg-hover);color:var(--color-text-primary)}.action-bar__button:disabled{opacity:.5;cursor:not-allowed}.action-bar__button--save:hover:not(:disabled){background-color:var(--color-status-success);color:#fff}.action-bar__button--saved{background-color:var(--color-status-success);color:#fff}.action-bar__button--clear:hover:not(:disabled){background-color:var(--color-status-error);color:#fff}.action-bar__button--export:hover:not(:disabled){background-color:var(--color-accent-secondary);color:var(--color-bg-primary)}.action-bar__button--hotkeys{background-color:transparent;color:var(--color-text-muted);border:1px solid var(--color-border-default)}.action-bar__button--hotkeys:hover{background-color:var(--color-bg-elevated);color:var(--color-text-primary)}.video-player{display:grid;grid-template-columns:1fr 340px;grid-template-rows:minmax(0,1fr) auto auto auto;grid-template-areas:"video sidebar" "transport sidebar" "timeline sidebar" "actions actions";gap:var(--spacing-3);height:calc(100vh - 100px);width:100%}.video-container{grid-area:video;position:relative;width:100%;background-color:var(--color-bg-surface);border-radius:var(--radius-panel);overflow:hidden;min-height:0;display:flex;align-items:center;justify-content:center}.video-element{width:100%;height:100%;object-fit:contain;cursor:pointer}.video-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;color:var(--color-neutral-500);gap:var(--spacing-2)}.video-placeholder-hint{font-size:var(--font-size-base);color:var(--color-text-disabled)}.transport-controls{grid-area:transport;display:flex;align-items:center;gap:var(--spacing-4);padding:var(--spacing-2) var(--spacing-3);background-color:var(--color-bg-surface);border-radius:var(--radius-panel)}.timeline-area{grid-area:timeline}.action-bar-area{grid-area:actions}.panel-sidebar{grid-area:sidebar;display:flex;flex-direction:column;gap:var(--spacing-2);min-height:0;max-height:100%;overflow-y:auto}.video-player--portrait{grid-template-columns:1fr 340px;height:calc(100vh - 100px)}.video-player--portrait .video-container{align-self:stretch}.file-input{display:none}.file-input-label{padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border-radius:var(--radius-button);cursor:pointer;font-size:var(--font-size-base);transition:background-color .2s}.file-input-label:hover{background-color:var(--color-bg-hover)}.play-button{padding:var(--spacing-2) var(--spacing-6);background-color:var(--color-accent-primary);color:#fff;border:none;border-radius:var(--radius-button);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);transition:background-color .2s}.play-button:hover:not(:disabled){background-color:var(--color-accent-primary-hover)}.play-button:disabled{background-color:var(--color-neutral-600);cursor:not-allowed}.time-display{font-family:var(--font-family-mono);font-size:var(--font-size-base);color:var(--color-text-muted)}.annotate-button{position:relative;padding:var(--spacing-2) var(--spacing-4);background-color:var(--color-bg-elevated);color:var(--color-text-primary);border:1px solid transparent;border-radius:var(--radius-button);cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);transition:all .2s}.annotate-button:hover:not(:disabled){background-color:var(--color-bg-hover)}.annotate-button:disabled{background-color:var(--color-neutral-800);color:var(--color-text-disabled);cursor:not-allowed}.annotate-button--active{background-color:var(--color-accent-primary);color:#fff;border-color:var(--color-accent-primary)}.annotate-button--active:hover:not(:disabled){background-color:var(--color-accent-primary-hover)}.annotation-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;margin-left:var(--spacing-2);padding:0 var(--spacing-2);background-color:#0000004d;border-radius:10px;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold)}.annotate-button:not(.annotate-button--active) .annotation-count{background-color:var(--color-accent-primary);color:#fff}.annotation-edit-panel{position:absolute;display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-2);background-color:#1c1c1cf2;border:1px solid var(--color-border-default);border-radius:var(--radius-button);z-index:100;box-shadow:0 2px 8px #00000080;pointer-events:auto}.annotation-edit-panel__label{font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap}.annotation-edit-panel__buttons{display:flex;gap:var(--spacing-1)}.annotation-edit-panel__button{padding:var(--spacing-1) var(--spacing-2);background-color:var(--color-bg-elevated);color:var(--color-text-muted);border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:var(--font-size-sm);transition:all .15s}.annotation-edit-panel__button:hover{background-color:var(--color-bg-hover);color:var(--color-text-primary)}.annotation-edit-panel__button--selected{background-color:var(--color-cyan-600);color:#fff;border-color:var(--color-cyan-600)}.annotation-edit-panel__button--selected:hover{background-color:var(--color-cyan-700)}.frame-status-badge{position:absolute;top:var(--spacing-2);right:var(--spacing-2);padding:var(--spacing-1) var(--spacing-3);background-color:#1c1c1cd9;color:var(--color-text-primary);border:1px solid var(--color-border-default);border-radius:var(--radius-button);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);z-index:50;pointer-events:none;transition:border-color .15s ease}.frame-status-badge--empty{color:var(--color-text-muted)}.frame-status-badge--has-predictions{border-color:var(--color-accent-secondary)}.model-comparison{background:var(--color-bg-surface);border:1px solid var(--color-border-muted);border-radius:8px;padding:var(--spacing-4);margin-top:var(--spacing-4)}.model-comparison__title{margin:0 0 var(--spacing-3) 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.model-comparison__loading{display:flex;align-items:center;gap:var(--spacing-2);color:var(--color-text-secondary);font-size:var(--font-size-base);padding:var(--spacing-2) 0}.model-comparison__spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--color-border-muted);border-top-color:var(--color-accent-secondary);border-radius:50%;animation:model-comparison-spin .8s linear infinite}@keyframes model-comparison-spin{to{transform:rotate(360deg)}}.model-comparison__error{color:var(--color-status-error);font-size:var(--font-size-base);padding:var(--spacing-2) 0}.model-comparison__metrics{display:flex;flex-direction:column;gap:var(--spacing-2)}.model-comparison__metric-row{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-2) 0;border-bottom:1px solid var(--color-border-muted)}.model-comparison__metric-row:last-child{border-bottom:none}.model-comparison__metric-label{font-size:var(--font-size-base);color:var(--color-text-secondary)}.model-comparison__metric-value{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.model-comparison__metric-value--high{color:var(--color-status-success)}.model-comparison__metric-value--medium{color:var(--color-status-warning)}.model-comparison__metric-value--low{color:var(--color-text-primary)}.training-modal-overlay{position:fixed;inset:0;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:9999}.training-modal{background-color:var(--color-bg-surface);border:1px solid var(--color-border-default);border-radius:8px;padding:var(--spacing-6);min-width:400px;max-width:600px;display:flex;flex-direction:column;gap:var(--spacing-4)}.training-modal__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);text-align:center}.training-modal__subtitle{font-size:var(--font-size-base);color:var(--color-text-secondary);text-align:center}.training-modal__status{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2);font-size:var(--font-size-base);color:var(--color-text-secondary);padding:var(--spacing-2) 0}.training-modal__status--complete{color:var(--color-status-success)}.training-modal__status--error{color:var(--color-status-error)}.training-modal__spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--color-border-default);border-top-color:var(--color-accent-secondary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.training-modal__progress-bar{height:8px;background-color:var(--color-bg-elevated);border-radius:4px;overflow:hidden;position:relative}.training-modal__progress-fill{height:100%;background-color:var(--color-accent-secondary);border-radius:4px;transition:width .3s ease}.training-modal__metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4);padding:var(--spacing-2);background-color:var(--color-bg-elevated);border-radius:4px}.training-modal__metric{display:flex;flex-direction:column;gap:var(--spacing-1)}.training-modal__metric-label{font-size:var(--font-size-sm);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.training-modal__metric-value{font-size:var(--font-size-base);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.training-modal__loss-curve{margin:var(--spacing-2) 0}.loss-curve__warning{margin-top:var(--spacing-2);padding:var(--spacing-2);background-color:#fbbf241a;border:1px solid var(--color-status-warning);border-radius:4px;color:var(--color-status-warning);font-size:var(--font-size-sm);text-align:center}.training-modal__confirm{display:flex;flex-direction:column;gap:var(--spacing-3);padding:var(--spacing-4);background-color:var(--color-bg-elevated);border-radius:4px;border:1px solid var(--color-status-error)}.training-modal__confirm-text{margin:0;font-size:var(--font-size-base);color:var(--color-text-primary);text-align:center}.training-modal__confirm-actions{display:flex;gap:var(--spacing-2);justify-content:center}.training-modal__button{padding:var(--spacing-2) var(--spacing-4);border:none;border-radius:4px;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all .15s ease}.training-modal__button--primary{background-color:var(--color-accent-secondary);color:var(--color-bg-primary)}.training-modal__button--primary:hover{background-color:var(--color-accent-secondary-hover)}.training-modal__button--secondary{background-color:var(--color-bg-hover);color:var(--color-text-primary);border:1px solid var(--color-neutral-600)}.training-modal__button--secondary:hover{background-color:var(--color-neutral-600)}.training-modal__button--cancel{background-color:var(--color-neutral-600);color:var(--color-text-primary)}.training-modal__button--cancel:hover{background-color:var(--color-text-disabled)}.training-modal__button--danger{background-color:var(--color-status-error);color:#fff}.training-modal__button--danger:hover{background-color:var(--color-red-500)}.training-modal__actions{display:flex;gap:var(--spacing-2);justify-content:center}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-family-sans);line-height:var(--line-height-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;background-color:var(--color-bg-primary);color:var(--color-text-primary)}#root{min-height:100vh;display:flex;flex-direction:column}.app{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:var(--spacing-3);gap:var(--spacing-3);min-height:0;overflow:hidden}h1{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}p{color:var(--color-text-muted)}