/* ============================================
   VIDEO PLAYER MODULE — Cinematic Dark Theme
   v2.0 — Audio Tracks, RTF Editor, Resize
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --vp-bg: #0c0e14;
  --vp-surface: #13161f;
  --vp-surface-hover: #1a1e2a;
  --vp-border: #232837;
  --vp-border-focus: #3a7bfd;
  --vp-text: #e2e6f0;
  --vp-text-muted: #6b7394;
  --vp-text-dim: #454d6a;
  --vp-accent: #3a7bfd;
  --vp-accent-glow: rgba(58,123,253,0.25);
  --vp-accent-hover: #5a93ff;
  --vp-danger: #f05252;
  --vp-danger-hover: #f27272;
  --vp-success: #34d399;
  --vp-record: #ef4444;
  --vp-record-glow: rgba(239,68,68,0.4);
  --vp-marker-color: #f59e0b;
  --vp-marker-glow: rgba(245,158,11,0.4);
  --vp-font: 'Outfit', sans-serif;
  --vp-mono: 'JetBrains Mono', monospace;
  --vp-radius: 8px;
  --vp-radius-sm: 5px;
  --vp-transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* ---- LIGHT THEME ---- */
.vp-wrapper.vp-light {
  --vp-bg: #f0f2f5;
  --vp-surface: #ffffff;
  --vp-surface-hover: #f5f6f8;
  --vp-border: #d8dce6;
  --vp-border-focus: #3a7bfd;
  --vp-text: #1a1d27;
  --vp-text-muted: #5c6478;
  --vp-text-dim: #8b92a5;
  --vp-accent: #2563eb;
  --vp-accent-glow: rgba(37,99,235,0.2);
  --vp-accent-hover: #3b82f6;
  --vp-danger: #dc2626;
  --vp-danger-hover: #ef4444;
  --vp-success: #16a34a;
  --vp-record: #dc2626;
  --vp-record-glow: rgba(220,38,38,0.3);
  --vp-marker-color: #d97706;
  --vp-marker-glow: rgba(217,119,6,0.35);
}

/* Light theme specific overrides */
.vp-wrapper.vp-light .vp-video-container { border: 1px solid var(--vp-border); }
.vp-wrapper.vp-light .vp-progress-fill::after { border-color: var(--vp-accent); box-shadow: 0 0 6px var(--vp-accent-glow); }
.vp-wrapper.vp-light .vp-editor-body { color: #1a1d27; }
.vp-wrapper.vp-light .vp-editor-body:empty::before { color: #8b92a5; }

.vp-wrapper.vp-light .vp-ov-input { background: #f5f6f8; color: #1a1d27; }
.vp-wrapper.vp-light .vp-overlay-edit-input { background: rgba(255,255,255,0.9); }
.vp-wrapper.vp-light .vp-marker-item.active { background: rgba(37,99,235,0.08); }
.vp-wrapper.vp-light .vp-marker-item.active .vp-marker-label { color: #1a1d27; }

/* ---- THEME TOGGLE ---- */
.vp-theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
}

.vp-theme-toggle-label {
  font-family: var(--vp-mono);
  font-size: 10px;
  color: var(--vp-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vp-theme-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--vp-border);
  border-radius: 10px;
  transition: background var(--vp-transition);
  cursor: pointer;
}

.vp-theme-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--vp-text-muted);
  border-radius: 50%;
  transition: all var(--vp-transition);
}

.vp-theme-switch.light::after {
  left: 18px;
  background: var(--vp-accent);
}

.vp-theme-switch.light {
  background: var(--vp-accent-glow);
}

.vp-theme-icon {
  font-size: 14px;
  line-height: 1;
}

/* ---- MAIN LAYOUT ---- */
.vp-wrapper { display:flex; flex-direction:column; gap:16px; width:100%; max-width:1500px; margin:0 auto; font-family:var(--vp-font); color:var(--vp-text); background:var(--vp-bg); border-radius:12px; padding:20px; box-sizing:border-box; }
.vp-top-row { display:flex; gap:16px; align-items:flex-start; }
.vp-main { flex:1; min-width:0; display:flex; flex-direction:column; }

/* ---- VIDEO CONTAINER ---- */
.vp-video-container { position:relative; background:#000; border-radius:10px 10px 0 0; overflow:hidden; min-width:320px; min-height:180px; cursor:pointer; }
.vp-video-container video { width:100%; height:100%; display:block; object-fit:contain; background:#000; }
.vp-video-container .vp-play-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.3); opacity:0; transition:opacity var(--vp-transition); pointer-events:none; }
.vp-video-container:hover .vp-play-overlay, .vp-video-container.paused .vp-play-overlay { opacity:1; }
.vp-play-overlay svg { width:64px; height:64px; fill:rgba(255,255,255,0.85); filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5)); }

/* ---- RESIZE HANDLES (admin) ---- */
.vp-resize-handle-right { position:absolute; right:0; top:0; width:8px; height:100%; cursor:ew-resize; background:transparent; z-index:5; transition:background var(--vp-transition); }
.vp-resize-handle-right:hover, .vp-resize-handle-right.active { background:rgba(58,123,253,0.4); }
.vp-resize-handle-bottom { position:absolute; bottom:0; left:0; width:100%; height:8px; cursor:ns-resize; background:transparent; z-index:5; transition:background var(--vp-transition); }
.vp-resize-handle-bottom:hover, .vp-resize-handle-bottom.active { background:rgba(58,123,253,0.4); }
.vp-resize-handle-corner { position:absolute; right:0; bottom:0; width:18px; height:18px; cursor:nwse-resize; z-index:6; }
.vp-resize-handle-corner::after { content:''; position:absolute; right:3px; bottom:3px; width:10px; height:10px; border-right:2px solid var(--vp-text-dim); border-bottom:2px solid var(--vp-text-dim); opacity:0.5; transition:opacity var(--vp-transition); }
.vp-resize-handle-corner:hover::after, .vp-resize-handle-corner.active::after { opacity:1; border-color:var(--vp-accent); }

/* ---- TIMELINE ---- */
.vp-timeline-area { background:var(--vp-surface); border-left:1px solid var(--vp-border); border-right:1px solid var(--vp-border); padding:10px 14px 4px; position:relative; }
.vp-timeline-ruler { position:relative; width:100%; height:14px; margin-bottom:2px; user-select:none; }
.vp-timeline-ruler .vp-tick { position:absolute; top:0; width:1px; background:var(--vp-border); }
.vp-timeline-ruler .vp-tick.major { height:10px; background:var(--vp-text-dim); }
.vp-timeline-ruler .vp-tick.minor { height:5px; }
.vp-timeline-ruler .vp-tick-label { position:absolute; top:11px; font-family:var(--vp-mono); font-size:8px; color:var(--vp-text-dim); transform:translateX(-50%); white-space:nowrap; }
.vp-progress-track { position:relative; width:100%; height:8px; background:var(--vp-border); border-radius:4px; cursor:pointer; margin-top:2px; outline:none; touch-action:none; }
.vp-progress-track.active .vp-progress-fill::after { transform:translateY(-50%) scale(1.4); box-shadow:0 0 12px var(--vp-accent), 0 0 0 3px var(--vp-accent-glow); }
.vp-progress-fill { height:100%; background:linear-gradient(90deg,var(--vp-accent),var(--vp-accent-hover)); border-radius:4px; position:relative; }
.vp-progress-fill::after { content:''; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:14px; height:14px; background:#fff; border:2px solid var(--vp-accent); border-radius:50%; box-shadow:0 0 8px var(--vp-accent-glow); transition:transform 0.15s ease; }
.vp-progress-track:hover .vp-progress-fill::after { transform:translateY(-50%) scale(1.25); }
.vp-timeline-marker { position:absolute; top:-3px; width:4px; height:14px; background:var(--vp-marker-color); border-radius:1px; transform:translateX(-50%); cursor:pointer; z-index:2; transition:transform 0.15s ease; box-shadow:0 0 6px var(--vp-marker-glow); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.vp-timeline-marker:hover { transform:translateX(-50%) scaleX(1.8) scaleY(1.2); }
.vp-timeline-marker .vp-marker-tip { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); background:var(--vp-surface-hover); color:var(--vp-text); font-family:var(--vp-mono); font-size:10px; padding:3px 7px; border-radius:4px; white-space:nowrap; pointer-events:none; opacity:0; transition:opacity 0.15s ease; border:1px solid var(--vp-border); z-index:10; }
.vp-timeline-marker:hover .vp-marker-tip { opacity:1; }

/* ---- CONTROLS ---- */
.vp-controls { display:flex; align-items:center; gap:6px; padding:12px 14px; background:var(--vp-surface); border:1px solid var(--vp-border); border-top:none; border-radius:0 0 10px 10px; flex-wrap:wrap; }
.vp-controls-left { display:flex; align-items:center; gap:4px; }
.vp-controls-center { flex:1; display:flex; align-items:center; justify-content:center; gap:10px; }
.vp-controls-right { display:flex; align-items:center; gap:10px; }

.vp-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; border-radius:var(--vp-radius-sm); background:transparent; color:var(--vp-text-muted); cursor:pointer; transition:all var(--vp-transition); padding:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.vp-btn:hover { background:var(--vp-surface-hover); color:var(--vp-text); }
.vp-btn.active { color:var(--vp-accent); }
.vp-btn svg { width:20px; height:20px; fill:currentColor; pointer-events:none; }
.vp-btn.vp-btn-play svg { width:24px; height:24px; }

.vp-time-display { font-family:var(--vp-mono); font-size:12px; color:var(--vp-text-muted); min-width:110px; text-align:center; letter-spacing:0.5px; }

.vp-speed-control { display:flex; align-items:center; gap:4px; }
.vp-speed-control label { font-family:var(--vp-mono); font-size:11px; color:var(--vp-text-dim); text-transform:uppercase; letter-spacing:1px; margin-right:2px; }
.vp-speed-value { font-family:var(--vp-mono); font-size:12px; color:var(--vp-accent); min-width:36px; text-align:center; font-weight:600; }
.vp-speed-btn { font-size:14px; font-weight:700; min-width:24px; padding:0 5px; line-height:1; }
.vp-speed-reset { font-size:11px; font-weight:600; padding:0 6px; }

.vp-volume-control { display:flex; align-items:center; gap:4px; }
.vp-volume-slider { -webkit-appearance:none; appearance:none; width:60px; height:4px; border-radius:2px; background:var(--vp-border); outline:none; cursor:pointer; }
.vp-volume-slider::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; border-radius:50%; background:var(--vp-text-muted); cursor:pointer; }
.vp-volume-slider::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--vp-text-muted); cursor:pointer; border:none; }

/* Admin config */
.vp-admin-config { display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--vp-surface); border:1px solid var(--vp-border); border-top:none; border-radius:0 0 10px 10px; margin-top:-1px; }
.vp-step-config { display:flex; align-items:center; gap:6px; }
.vp-step-config label { font-family:var(--vp-mono); font-size:10px; color:var(--vp-text-dim); text-transform:uppercase; letter-spacing:0.5px; }
.vp-step-input { width:52px; padding:4px 6px; border:1px solid var(--vp-border); border-radius:var(--vp-radius-sm); background:var(--vp-bg); color:var(--vp-text); font-family:var(--vp-mono); font-size:12px; text-align:center; outline:none; }
.vp-step-input:focus { border-color:var(--vp-border-focus); }

/* ---- RIGHT PANEL ---- */
.vp-right-panel { width:320px; min-width:300px; display:flex; flex-direction:column; gap:12px; max-height:700px; overflow-y:auto; }
.vp-right-panel::-webkit-scrollbar { width:5px; }
.vp-right-panel::-webkit-scrollbar-track { background:transparent; }
.vp-right-panel::-webkit-scrollbar-thumb { background:var(--vp-border); border-radius:3px; }

/* ---- MARKER PANEL ---- */
.vp-marker-panel { background:var(--vp-surface); border:1px solid var(--vp-border); border-radius:10px; display:flex; flex-direction:column; flex:1; min-height:200px; overflow:hidden; }
.vp-marker-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px; border-bottom:1px solid var(--vp-border); flex-shrink:0; }
.vp-marker-header h3 { margin:0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.vp-marker-count { background:var(--vp-border); color:var(--vp-text-muted); font-family:var(--vp-mono); font-size:10px; padding:2px 7px; border-radius:10px; }
.vp-marker-actions { display:flex; gap:4px; }
.vp-marker-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border:1px solid var(--vp-border); border-radius:var(--vp-radius-sm); background:transparent; color:var(--vp-text-muted); font-family:var(--vp-font); font-size:11px; cursor:pointer; transition:all var(--vp-transition); white-space:nowrap; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.vp-marker-btn:hover { background:var(--vp-surface-hover); color:var(--vp-text); }
.vp-marker-btn.add { border-color:var(--vp-accent); color:var(--vp-accent); }
.vp-marker-btn.add:hover { background:var(--vp-accent); color:#fff; }
.vp-marker-btn.danger { border-color:var(--vp-danger); color:var(--vp-danger); }
.vp-marker-btn.danger:hover { background:var(--vp-danger); color:#fff; }
.vp-marker-btn svg { width:13px; height:13px; fill:currentColor; pointer-events:none; }

.vp-marker-list { flex:1; overflow-y:auto; padding:6px; }
.vp-marker-list::-webkit-scrollbar { width:5px; }
.vp-marker-list::-webkit-scrollbar-track { background:transparent; }
.vp-marker-list::-webkit-scrollbar-thumb { background:var(--vp-border); border-radius:3px; }

.vp-marker-item { display:flex; align-items:flex-start; gap:8px; padding:6px 8px; border-radius:var(--vp-radius-sm); cursor:pointer; transition:background var(--vp-transition); border:1px solid transparent; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; }
.vp-marker-item:hover { background:var(--vp-surface-hover); border-color:var(--vp-border); }
.vp-marker-item.active { background:rgba(58,123,253,0.08); border-color:var(--vp-accent); box-shadow:0 0 12px rgba(58,123,253,0.15), inset 0 0 0 1px rgba(58,123,253,0.1); transition:all 0.3s ease; }
.vp-marker-item.active .vp-marker-label { color:#fff; }
.vp-marker-item.active .vp-marker-dot { background:var(--vp-accent); box-shadow:0 0 8px var(--vp-accent-glow); }
.vp-marker-dot { width:8px; height:8px; border-radius:50%; background:var(--vp-marker-color); box-shadow:0 0 6px var(--vp-marker-glow); flex-shrink:0; margin-top:4px; }
.vp-marker-info { flex:1; min-width:0; }
.vp-marker-label { font-size:12px; color:var(--vp-text); font-weight:500; word-wrap:break-word; overflow-wrap:break-word; line-height:1.35; }
.vp-marker-time { font-family:var(--vp-mono); font-size:10px; color:var(--vp-text-dim); margin-top:2px; }
.vp-marker-label-input { width:100%; padding:2px 6px; border:1px solid var(--vp-border-focus); border-radius:3px; background:var(--vp-bg); color:var(--vp-text); font-family:var(--vp-font); font-size:12px; outline:none; }
.vp-marker-delete { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:none; border-radius:4px; background:transparent; color:var(--vp-text-dim); cursor:pointer; opacity:0; transition:all var(--vp-transition); flex-shrink:0; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.vp-marker-item:hover .vp-marker-delete { opacity:1; }
.vp-marker-delete:hover { background:var(--vp-danger); color:#fff; }
.vp-marker-delete svg { width:14px; height:14px; fill:currentColor; pointer-events:none; }
.vp-marker-empty { display:flex; flex-direction:column; align-items:center; padding:24px 14px; color:var(--vp-text-dim); text-align:center; gap:6px; }
.vp-marker-empty svg { width:28px; height:28px; fill:var(--vp-text-dim); opacity:0.4; }
.vp-marker-empty span { font-size:11px; line-height:1.4; }

/* ---- AUDIO TRACKS PANEL ---- */
.vp-tracks-panel { background:var(--vp-surface); border:1px solid var(--vp-border); border-radius:10px; flex-shrink:0; max-height:280px; display:flex; flex-direction:column; overflow:hidden; }
.vp-tracks-header { display:flex; align-items:center; justify-content:space-between; padding:10px 12px 8px; border-bottom:1px solid var(--vp-border); flex-shrink:0; }
.vp-tracks-header h3 { margin:0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.vp-tracks-header h3 svg { width:15px; height:15px; fill:var(--vp-accent); }
.vp-track-list { padding:6px; overflow-y:auto; flex:1; }
.vp-track-list::-webkit-scrollbar { width:5px; }
.vp-track-list::-webkit-scrollbar-track { background:transparent; }
.vp-track-list::-webkit-scrollbar-thumb { background:var(--vp-border); border-radius:3px; }

.vp-track-item { display:flex; align-items:center; gap:6px; padding:6px 8px; border-radius:var(--vp-radius-sm); border:1px solid transparent; transition:background var(--vp-transition); }
.vp-track-item:hover { background:var(--vp-surface-hover); }
.vp-track-item.is-original { border-bottom:1px solid var(--vp-border); margin-bottom:4px; padding-bottom:8px; border-radius:0; }

.vp-track-icon { width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--vp-text-muted); }
.vp-track-icon svg { width:14px; height:14px; fill:currentColor; }
.vp-track-label { flex:1; font-size:12px; font-weight:500; color:var(--vp-text); min-width:0; word-wrap:break-word; }
.vp-track-label-input { width:100%; padding:2px 5px; border:1px solid var(--vp-border-focus); border-radius:3px; background:var(--vp-bg); color:var(--vp-text); font-family:var(--vp-font); font-size:12px; outline:none; }

.vp-track-mute { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--vp-border); border-radius:4px; background:transparent; color:var(--vp-text-muted); cursor:pointer; transition:all var(--vp-transition); flex-shrink:0; }
.vp-track-mute:hover { background:var(--vp-surface-hover); color:var(--vp-text); }
.vp-track-mute.muted { color:var(--vp-danger); border-color:rgba(240,82,82,0.3); }
.vp-track-mute svg { width:14px; height:14px; fill:currentColor; }

.vp-track-record { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--vp-border); border-radius:4px; background:transparent; color:var(--vp-text-dim); cursor:pointer; transition:all var(--vp-transition); flex-shrink:0; }
.vp-track-record:hover { border-color:var(--vp-record); color:var(--vp-record); }
.vp-track-record.recording { background:var(--vp-record); border-color:var(--vp-record); color:#fff; animation:vp-pulse-record 1.2s ease-in-out infinite; }
.vp-track-record svg { width:14px; height:14px; fill:currentColor; }
@keyframes vp-pulse-record { 0%,100%{box-shadow:0 0 0 0 var(--vp-record-glow);} 50%{box-shadow:0 0 0 6px transparent;} }

.vp-track-delete { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:none; border-radius:4px; background:transparent; color:var(--vp-text-dim); cursor:pointer; opacity:0; transition:all var(--vp-transition); flex-shrink:0; }
.vp-track-item:hover .vp-track-delete { opacity:1; }
.vp-track-delete:hover { background:var(--vp-danger); color:#fff; }
.vp-track-delete svg { width:13px; height:13px; fill:currentColor; }

/* ---- RTF EDITOR ---- */
.vp-editor-section { position:relative; background:var(--vp-surface); border:1px solid var(--vp-border); border-radius:10px; display:flex; flex-direction:column; overflow:visible; min-height:100px; }
.vp-editor-header { display:flex; align-items:center; padding:10px 14px 8px; border-bottom:1px solid var(--vp-border); flex-shrink:0; }
.vp-editor-header h3 { margin:0; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.vp-editor-header h3 svg { width:15px; height:15px; fill:var(--vp-success); }

.vp-editor-toolbar { display:flex; flex-wrap:wrap; gap:3px; padding:8px 12px; border-bottom:1px solid var(--vp-border); background:var(--vp-bg); flex-shrink:0; align-items:center; }
.vp-editor-toolbar .vp-tb-btn { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:26px; border:1px solid transparent; border-radius:4px; background:transparent; color:var(--vp-text-muted); cursor:pointer; font-family:var(--vp-font); font-size:13px; font-weight:600; transition:all var(--vp-transition); padding:0 4px; }
.vp-editor-toolbar .vp-tb-btn:hover { background:var(--vp-surface-hover); color:var(--vp-text); border-color:var(--vp-border); }
.vp-editor-toolbar .vp-tb-btn.active { background:var(--vp-accent); color:#fff; border-color:var(--vp-accent); }
.vp-editor-toolbar .vp-tb-sep { width:1px; height:20px; background:var(--vp-border); margin:0 4px; }
.vp-editor-toolbar select { padding:2px 4px; border:1px solid var(--vp-border); border-radius:4px; background:var(--vp-bg); color:var(--vp-text); font-family:var(--vp-font); font-size:11px; cursor:pointer; outline:none; }
.vp-editor-toolbar input[type="color"] { width:26px; height:24px; border:1px solid var(--vp-border); border-radius:4px; background:var(--vp-bg); cursor:pointer; padding:2px; }

.vp-editor-body { flex:1; padding:14px 16px; min-height:80px; overflow-y:auto; font-family:var(--vp-font); font-size:14px; line-height:1.6; color:var(--vp-text); outline:none; }
.vp-editor-body:empty::before { content:'Cliquez ici pour écrire des notes...'; color:var(--vp-text-dim); font-style:italic; }
.vp-editor-body.readonly:empty::before { content:'Aucune note pour cette vidéo.'; }

/* Editor resize handles */
.vp-editor-resize-right { position:absolute; right:-4px; top:0; width:8px; height:100%; cursor:ew-resize; z-index:3; }
.vp-editor-resize-right:hover, .vp-editor-resize-right.active { background:rgba(52,211,153,0.3); border-radius:4px; }
.vp-editor-resize-bottom { position:absolute; bottom:-4px; left:0; width:100%; height:8px; cursor:ns-resize; z-index:3; }
.vp-editor-resize-bottom:hover, .vp-editor-resize-bottom.active { background:rgba(52,211,153,0.3); border-radius:4px; }
.vp-editor-resize-corner { position:absolute; right:-4px; bottom:-4px; width:18px; height:18px; cursor:nwse-resize; z-index:4; }
.vp-editor-resize-corner::after { content:''; position:absolute; right:3px; bottom:3px; width:10px; height:10px; border-right:2px solid var(--vp-text-dim); border-bottom:2px solid var(--vp-text-dim); opacity:0.4; transition:opacity var(--vp-transition); }
.vp-editor-resize-corner:hover::after { opacity:1; border-color:var(--vp-success); }

/* ---- OVERLAY LABELS ON VIDEO ---- */
.vp-overlay-label {
  position: absolute;
  z-index: 4;
  user-select: none;
  pointer-events: none;
  opacity: 0;
}

/* Text overlays specific */
.vp-overlay-text {
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--vp-font);
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  letter-spacing: 0.3px;
}

/* Shape overlays */
.vp-overlay-shape {
  display: block;
}

.vp-overlay-line, .vp-overlay-arrow {
  /* SVG fills the bounding box */
  background: transparent !important;
  border: none !important;
}

.vp-overlay-label[style*="pointer-events: auto"] {
  cursor: grab;
}

.vp-overlay-label:active {
  cursor: grabbing !important;
}

.vp-overlay-edit-input {
  background: rgba(0,0,0,0.7);
  border: 1px solid var(--vp-accent);
  border-radius: 3px;
  padding: 2px 6px;
  color: inherit;
  font-family: var(--vp-font);
  font-weight: 600;
  outline: none;
  min-width: 80px;
}

/* ---- OVERLAY HANDLES (admin only) ---- */
.vp-ov-handle {
  position: absolute;
  pointer-events: auto;
  z-index: 10;
}

.vp-ov-handle-right {
  right: -5px;
  top: 0;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  background: transparent;
}
.vp-ov-handle-right:hover {
  background: rgba(58,123,253,0.3);
}

.vp-ov-handle-bottom {
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 10px;
  cursor: ns-resize;
  background: transparent;
}
.vp-ov-handle-bottom:hover {
  background: rgba(58,123,253,0.3);
}

.vp-ov-handle-corner {
  right: -7px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background: var(--vp-accent);
  border: 2px solid #fff;
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.vp-ov-handle-corner:hover {
  transform: scale(1.2);
}

.vp-ov-handle-rotate {
  top: -32px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--vp-accent);
  cursor: grab;
  box-shadow: 0 0 6px rgba(0,0,0,0.5);
}

.vp-ov-handle-rotate::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 50%;
  width: 2px;
  height: 18px;
  background: var(--vp-accent);
  margin-left: -1px;
  pointer-events: none;
}

.vp-ov-handle-rotate:hover {
  transform: scale(1.2);
}

/* ---- OVERLAY PANEL ---- */
.vp-overlay-panel {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  max-height: 400px;
  overflow: hidden;
  flex-shrink: 0;
}

.vp-overlay-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--vp-border);
  flex-shrink: 0;
}

.vp-overlay-panel-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Add menu (type dropdown) */
.vp-overlay-add-wrap {
  position: relative;
}

.vp-overlay-add-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  padding: 4px;
  z-index: 100;
  min-width: 130px;
}

.vp-overlay-add-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--vp-text);
  font-family: var(--vp-font);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  transition: background var(--vp-transition);
}

.vp-overlay-add-menu-item:hover {
  background: var(--vp-surface-hover);
}

.vp-overlay-add-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--vp-bg);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vp-accent);
  flex-shrink: 0;
}

.vp-overlay-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.vp-overlay-list::-webkit-scrollbar { width: 5px; }
.vp-overlay-list::-webkit-scrollbar-track { background: transparent; }
.vp-overlay-list::-webkit-scrollbar-thumb { background: var(--vp-border); border-radius: 3px; }

.vp-overlay-item {
  padding: 10px;
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background var(--vp-transition);
}

.vp-overlay-item:hover {
  background: var(--vp-surface-hover);
}

.vp-overlay-item-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.vp-overlay-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vp-accent);
  flex-shrink: 0;
}

.vp-overlay-type-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--vp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vp-overlay-text-preview {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-ov-rot-value {
  font-family: var(--vp-mono);
  font-size: 11px;
  color: var(--vp-accent);
  min-width: 36px;
  text-align: center;
  font-weight: 600;
}

.vp-overlay-time {
  font-family: var(--vp-mono);
  font-size: 10px;
  color: var(--vp-text-dim);
  margin-bottom: 8px;
}

.vp-overlay-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
  border-top: 1px solid var(--vp-border);
  padding-top: 8px;
}

.vp-ov-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.vp-ov-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vp-ov-field-label {
  font-family: var(--vp-mono);
  font-size: 9px;
  color: var(--vp-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vp-ov-input {
  padding: 3px 6px;
  border: 1px solid var(--vp-border);
  border-radius: 4px;
  background: var(--vp-bg);
  color: var(--vp-text);
  font-family: var(--vp-mono);
  font-size: 11px;
  outline: none;
  transition: border-color var(--vp-transition);
}

.vp-ov-input:focus {
  border-color: var(--vp-border-focus);
}

.vp-ov-text-input {
  flex: 1;
  min-width: 100px;
}

.vp-ov-time-input {
  width: 65px;
}

.vp-ov-size-input {
  width: 50px;
}

.vp-ov-color {
  width: 28px;
  height: 26px;
  border: 1px solid var(--vp-border);
  border-radius: 4px;
  background: var(--vp-bg);
  cursor: pointer;
  padding: 2px;
}

.vp-ov-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--vp-border);
  outline: none;
  cursor: pointer;
}

.vp-ov-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vp-accent);
  cursor: pointer;
  border: 2px solid var(--vp-surface);
}

.vp-ov-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--vp-accent);
  cursor: pointer;
  border: 2px solid var(--vp-surface);
}

.vp-ov-set-btn {
  padding: 3px 8px;
  border: 1px solid var(--vp-border);
  border-radius: 4px;
  background: transparent;
  color: var(--vp-text-muted);
  font-family: var(--vp-mono);
  font-size: 9px;
  cursor: pointer;
  transition: all var(--vp-transition);
  white-space: nowrap;
}

.vp-ov-set-btn:hover {
  background: var(--vp-accent);
  color: #fff;
  border-color: var(--vp-accent);
}

.vp-ov-fade-btn {
  padding: 4px 10px;
  border: 1px solid var(--vp-border);
  border-radius: 4px;
  background: transparent;
  color: var(--vp-text-muted);
  font-family: var(--vp-font);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--vp-transition);
}

.vp-ov-fade-btn:hover {
  border-color: var(--vp-text-dim);
  color: var(--vp-text);
}

.vp-ov-fade-btn.active {
  border-color: var(--vp-accent);
  color: var(--vp-accent);
}

/* ---- CONFIRM DIALOG ---- */
.vp-confirm-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:9999; backdrop-filter:blur(4px); }
.vp-confirm-dialog { background:var(--vp-surface); border:1px solid var(--vp-border); border-radius:12px; padding:24px; max-width:360px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.vp-confirm-dialog p { margin:0 0 20px; font-family:var(--vp-font); font-size:14px; color:var(--vp-text); line-height:1.5; }
.vp-confirm-buttons { display:flex; gap:10px; justify-content:center; }
.vp-confirm-buttons button { padding:8px 20px; border-radius:var(--vp-radius-sm); border:1px solid var(--vp-border); font-family:var(--vp-font); font-size:13px; cursor:pointer; transition:all var(--vp-transition); }
.vp-confirm-buttons .vp-confirm-yes { background:var(--vp-danger); color:#fff; border-color:var(--vp-danger); }
.vp-confirm-buttons .vp-confirm-yes:hover { background:var(--vp-danger-hover); }
.vp-confirm-buttons .vp-confirm-no { background:transparent; color:var(--vp-text-muted); }
.vp-confirm-buttons .vp-confirm-no:hover { background:var(--vp-surface-hover); color:var(--vp-text); }

/* ====================================
   KEYFRAMES (virtual camera)
   ==================================== */

/* Render canvas that overlays the video in normal mode when zoom is active */
.vp-render-canvas {
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  z-index: 2;
  pointer-events: none;
  display: none;
}

/* Keyframe toggle button active state */
.vp-btn.vp-keyframe-btn.active {
  background: var(--vp-marker-color);
  color: #000;
}
.vp-btn.vp-keyframe-btn.active svg { fill: #000; }

/* Dots on progress track (keyframe markers) */
.vp-kf-dot {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--vp-marker-color);
  border: 2px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s ease;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.vp-kf-dot:hover {
  transform: translate(-50%, -50%) rotate(45deg) scale(1.4);
}

/* Dual-screen mode: video container becomes flex row */
.vp-video-container.vp-kf-mode {
  display: flex !important;
  flex-direction: row !important;
  gap: 2px;
  background: var(--vp-bg);
}
.vp-video-container.vp-kf-mode video {
  width: 50% !important;
  height: 100% !important;
  flex-shrink: 0;
  object-fit: contain;
  background: #000;
}
.vp-video-container.vp-kf-mode .vp-play-overlay { display: none !important; }
.vp-video-container.vp-kf-mode .vp-overlay-label { visibility: hidden !important; }

/* Source wrap (covers the left half in keyframe mode) */
.vp-kf-source-wrap {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}
.vp-video-container.vp-kf-mode .vp-kf-source-wrap {
  display: block;
  pointer-events: auto;
}

/* Preview wrap (right half) */
.vp-kf-preview-wrap {
  display: none;
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  background: #000;
  z-index: 5;
  border-left: 2px solid var(--vp-border);
}
.vp-video-container.vp-kf-mode .vp-kf-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Label badges for source/preview */
.vp-video-container.vp-kf-mode .vp-kf-source-wrap::before {
  content: 'SOURCE';
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.85);
  color: var(--vp-marker-color);
  font-family: var(--vp-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--vp-marker-color);
  z-index: 15;
  pointer-events: none;
}
.vp-video-container.vp-kf-mode .vp-kf-preview-wrap::before {
  content: 'PREVIEW';
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.85);
  color: var(--vp-accent);
  font-family: var(--vp-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--vp-accent);
  z-index: 15;
  pointer-events: none;
}

.vp-kf-preview-canvas {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: #000;
}

/* Crop box (blue rectangle over the source) */
.vp-kf-crop-box {
  position: absolute;
  border: 2px solid var(--vp-marker-color);
  background: rgba(245, 158, 11, 0.08);
  cursor: move;
  box-sizing: border-box;
  z-index: 10;
  pointer-events: auto;
}
.vp-kf-crop-box::after {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed rgba(245, 158, 11, 0.4);
  pointer-events: none;
}

/* 8 resize handles */
.vp-kf-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border: 2px solid var(--vp-marker-color);
  border-radius: 3px;
  z-index: 12;
  pointer-events: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.vp-kf-handle-nw { top: -7px; left: -7px; cursor: nw-resize; }
.vp-kf-handle-n  { top: -7px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.vp-kf-handle-ne { top: -7px; right: -7px; cursor: ne-resize; }
.vp-kf-handle-e  { top: 50%; right: -7px; transform: translateY(-50%); cursor: e-resize; }
.vp-kf-handle-se { bottom: -7px; right: -7px; cursor: se-resize; }
.vp-kf-handle-s  { bottom: -7px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.vp-kf-handle-sw { bottom: -7px; left: -7px; cursor: sw-resize; }
.vp-kf-handle-w  { top: 50%; left: -7px; transform: translateY(-50%); cursor: w-resize; }

/* Keyframe edit panel (shown below controls in keyframe mode) */
.vp-keyframe-panel {
  background: var(--vp-surface);
  border: 1px solid var(--vp-border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding: 14px 18px;
  margin-top: 4px;
}

.vp-kf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--vp-border);
}

.vp-kf-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--vp-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vp-kf-actions {
  display: flex;
  gap: 6px;
}

/* Input controls row */
.vp-kf-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
  align-items: flex-end;
}

.vp-kf-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 80px;
}

.vp-kf-label {
  font-family: var(--vp-mono);
  font-size: 10px;
  color: var(--vp-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vp-kf-num {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--vp-border);
  border-radius: 4px;
  background: var(--vp-bg);
  color: var(--vp-text);
  font-family: var(--vp-mono);
  font-size: 12px;
  outline: none;
  transition: border-color var(--vp-transition);
}

.vp-kf-num:focus {
  border-color: var(--vp-border-focus);
}

.vp-kf-select {
  padding: 5px 8px;
  border: 1px solid var(--vp-border);
  border-radius: 4px;
  background: var(--vp-bg);
  color: var(--vp-text);
  font-family: var(--vp-font);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  min-width: 140px;
}

.vp-kf-select:focus {
  border-color: var(--vp-border-focus);
}

/* Keyframe list */
.vp-kf-list-wrap {
  max-height: 140px;
  overflow-y: auto;
  background: var(--vp-bg);
  border: 1px solid var(--vp-border);
  border-radius: 6px;
  padding: 6px;
}

.vp-kf-list-wrap::-webkit-scrollbar { width: 5px; }
.vp-kf-list-wrap::-webkit-scrollbar-track { background: transparent; }
.vp-kf-list-wrap::-webkit-scrollbar-thumb { background: var(--vp-border); border-radius: 3px; }

.vp-kf-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vp-kf-empty {
  text-align: center;
  padding: 18px;
  color: var(--vp-text-dim);
  font-size: 12px;
}

.vp-kf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--vp-surface-hover);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--vp-transition);
}

.vp-kf-item:hover {
  border-color: var(--vp-border);
}

.vp-kf-item.active {
  border-color: var(--vp-marker-color);
  background: rgba(245, 158, 11, 0.08);
}

.vp-kf-item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.vp-kf-item-num {
  font-family: var(--vp-mono);
  font-size: 11px;
  color: var(--vp-text-dim);
  min-width: 22px;
}

.vp-kf-item-time {
  font-family: var(--vp-mono);
  font-size: 12px;
  color: var(--vp-text);
  font-weight: 600;
}

.vp-kf-item-ease {
  font-family: var(--vp-mono);
  font-size: 10px;
  color: var(--vp-accent);
  background: rgba(58,123,253,0.1);
  padding: 2px 6px;
  border-radius: 3px;
}

.vp-kf-item-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: var(--vp-text-dim);
  cursor: pointer;
  transition: all var(--vp-transition);
}

.vp-kf-item-del:hover {
  background: var(--vp-danger);
  color: #fff;
}

.vp-kf-item-del svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .vp-top-row { flex-direction:column; }
  .vp-right-panel { width:100%; min-width:0; max-height:none; flex-direction:row; flex-wrap:wrap; gap:12px; }
  .vp-marker-panel, .vp-tracks-panel, .vp-overlay-panel { flex:1; min-width:250px; }
}
@media(max-width:600px){
  .vp-controls { gap:4px; padding:8px 10px; }

  .vp-volume-slider { width:40px; }
  .vp-time-display { font-size:10px; min-width:90px; }
}