:root {
  --accent: #22c55e;
  --accent-bg: #f0fdf4;
  --accent-border: rgba(34,197,94,0.25);
}

/* Video preview */
.preview-wrap { width: 100%; border-radius: 10px; overflow: hidden; background: #000; margin-bottom: 0; display: none; }
.preview-wrap.show { display: block; }
video { width: 100%; max-height: 280px; display: block; }

/* Timeline */
.timeline-wrap { background: var(--white); border: 1px solid var(--border); border-radius: 0 0 10px 10px; padding: 1rem 1.2rem 0.8rem; margin-bottom: 1rem; display: none; }
.timeline-wrap.show { display: block; }
.timeline-bar { position: relative; height: 36px; background: var(--off); border-radius: 6px; margin-bottom: 0.8rem; cursor: pointer; overflow: hidden; }
.timeline-selection { position: absolute; top: 0; height: 100%; background: rgba(34,197,94,0.2); border-left: 3px solid var(--accent); border-right: 3px solid var(--accent); pointer-events: none; }
.timeline-playhead { position: absolute; top: 0; width: 2px; height: 100%; background: var(--text); pointer-events: none; transition: left 0.1s linear; }
.timeline-handle { position: absolute; top: 50%; width: 16px; height: 24px; background: var(--accent); border-radius: 4px; transform: translateY(-50%); cursor: ew-resize; z-index: 5; display: flex; align-items: center; justify-content: center; }
.timeline-handle::after { content: ''; width: 4px; height: 10px; border-left: 1px solid rgba(255,255,255,0.6); border-right: 1px solid rgba(255,255,255,0.6); }
.timeline-handle.left { border-radius: 4px 0 0 4px; }
.timeline-handle.right { border-radius: 0 4px 4px 0; }
.time-labels { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--sub); margin-bottom: 0.6rem; }
.set-btns { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.set-btn { flex: 1; background: var(--off); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem; cursor: pointer; font-family: var(--body); font-size: 0.75rem; font-weight: 600; color: var(--sub); transition: all 0.15s; text-align: center; }
.set-btn:hover { border-color: var(--accent); color: var(--accent); }
.time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.time-field label { display: block; font-size: 0.72rem; font-weight: 600; color: var(--sub); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.time-field input { width: 100%; background: var(--off); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; font-family: var(--display); font-size: 1rem; font-weight: 700; color: var(--text); transition: border-color 0.15s; }
.time-field input:focus { outline: none; border-color: var(--accent); }
.selection-info { text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--accent); margin-top: 0.4rem; }