/* ==========================================
   视频拆帧模块样式
   ========================================== */

/* 上传区域 */
#split-upload-area {
  margin: 0 12px 8px; padding: 14px 0;
  border: 1.5px dashed #3A3A3A; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; background: #141414; transition: border-color 0.2s;
  position: relative;
}
#split-upload-area:hover { border-color: #00D4FF; }
#split-upload-area span { font-size: 11px; color: #666; margin-top: 4px; }
#split-upload-area input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer;
}

/* 视频列表 */
#split-list {
  flex: 1; overflow-y: auto; padding: 0 12px 12px;
}

/* 预览区域 */
#split-preview-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 1; width: 100%; height: 100%; padding: 12px; gap: 12px;
  min-height: 0;
}
#split-preview-video {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  background: #000;
}

/* 时间轴 */
#split-timeline-container {
  width: 100%; max-width: 720px;
}
#split-timeline-track {
  position: relative; height: 32px;
  background: #1A1A1A; border-radius: 6px;
  border: 0.5px solid #2A2A2A; cursor: pointer;
  overflow: hidden;
}
#split-timeline-progress {
  position: absolute; top: 0; left: 0; height: 100%;
  background: rgba(0,212,255,0.15);
  border-radius: 6px 0 0 6px; pointer-events: none;
}
#split-timeline-crop {
  position: absolute; top: 4px; height: calc(100% - 8px);
  background: rgba(0,212,255,0.2);
  border: 1px solid #00D4FF;
  border-radius: 4px; pointer-events: none;
}
#split-timeline-crop-left, #split-timeline-crop-right {
  position: absolute; top: 0; width: 10px; height: 100%;
  background: #0D0D0D; border: 1.5px solid #00D4FF;
  border-radius: 2px; cursor: ew-resize; pointer-events: auto;
}
#split-timeline-crop-left { left: -5px; }
#split-timeline-crop-right { right: -5px; }
#split-timeline-playhead {
  position: absolute; top: 0; width: 2px; height: 100%;
  background: #FF4444; pointer-events: none; z-index: 5;
}
#split-timeline-labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #666; margin-top: 6px;
}
#split-timeline-crop-label {
  color: #00D4FF; font-size: 11px;
}

/* 进度区域 */
#split-progress-section {
  padding: 12px 16px;
  border-top: 0.5px solid #2A2A2A;
}
#split-progress-bar {
  height: 6px; background: #1A1A1A;
  border-radius: 3px; overflow: hidden;
  margin-bottom: 4px;
}
#split-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(135deg, #00D4FF, #7B2FFF);
  border-radius: 3px; transition: width 0.3s;
}
#split-progress-text {
  font-size: 11px; color: #888; text-align: center;
}