/* Video to MP3 */

.vm-card { padding: 24px; display: flex; flex-direction: column; gap: 0; }

/* Drop */
.vm-drop {
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 48px 24px; text-align: center; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.vm-drop:hover, .vm-drop.drag-over { border-color: var(--accent); background: rgba(108,139,255,.05); }
.vm-drop-icon { color: var(--muted-2); margin: 0 auto 12px; display: block; }
.vm-drop-label { font-size: 1rem; color: var(--muted); margin: 0 0 6px; }
.vm-drop-sub { font-size: .82rem; color: var(--muted-2); margin: 0; }
.btn-link { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; }
.btn-sm { padding: 7px 14px; font-size: .82rem; }

/* File info */
.vm-info { display: flex; flex-direction: column; gap: 16px; }
.vm-file-row { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.vm-file-icon { color: var(--accent); flex-shrink: 0; }
.vm-file-name { font-weight: 600; font-size: .95rem; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm-file-dur { font-size: .83rem; color: var(--muted-2); white-space: nowrap; }

/* Video preview */
.vm-video-preview { width: 100%; max-height: 280px; border-radius: var(--radius-sm); background: #000; object-fit: contain; border: 1px solid var(--line); }

/* Settings */
.vm-settings { display: flex; flex-direction: column; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.vm-setting-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vm-setting-label { font-size: .87rem; color: var(--muted); min-width: 120px; }
.vm-seg-btns { display: flex; gap: 4px; }
.vm-seg { padding: 5px 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--muted-2); font-size: .83rem; font-weight: 500; cursor: pointer; transition: all .13s; }
.vm-seg:hover { color: var(--text); }
.vm-seg--active { border-color: var(--accent); color: var(--accent); background: rgba(108,139,255,.1); }

.vm-trim-row { display: flex; gap: 10px; align-items: center; }
.vm-trim-field { display: flex; align-items: center; gap: 6px; }
.vm-trim-field label { font-size: .83rem; color: var(--muted-2); }
.vm-trim-input { width: 80px; padding: 5px 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); font-size: .87rem; }
.vm-trim-input:focus { outline: none; border-color: var(--accent); }

/* Progress */
.vm-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.vm-progress-bar { height: 6px; background: var(--bg-2); border-radius: 3px; overflow: hidden; }
.vm-progress-inner { height: 100%; background: var(--accent); border-radius: 3px; transition: width .2s; }
.vm-progress-label { font-size: .83rem; color: var(--muted); }

/* Actions */
.vm-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.vm-status { font-size: .87rem; color: var(--muted); }
.btn-success { background: #22c55e; color: #fff; }
.btn-success:hover { background: #16a34a; }