/* 音视频处理 Pro · 独立样式（vp- 前缀，不依赖其它工具样式） */
.vp-wrap { max-width: 1080px; margin: 0 auto; }
.vp-pro-badge { display:inline-block; font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,#7b2ff7,#2f6df0); padding:2px 9px; border-radius:999px; vertical-align:middle; margin-left:8px; letter-spacing:.5px; }
.vp-cats { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 6px; }
.vp-cat { border:1px solid var(--border, rgba(127,127,127,.25)); background:var(--bg-soft); color:var(--text); padding:8px 14px; border-radius:999px; cursor:pointer; font-size:14px; }
.vp-cat.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.vp-ops { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.vp-op { border:1px solid var(--border, rgba(127,127,127,.25)); background:var(--card,#fff); color:var(--text); padding:7px 12px; border-radius:10px; cursor:pointer; font-size:13px; }
.vp-op.active { border-color:var(--accent); color:var(--accent); font-weight:600; box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 18%,transparent); }
.vp-card { border:1px solid var(--border, rgba(127,127,127,.22)); border-radius:16px; background:var(--card,#fff); padding:18px; }
.vp-drop { border:2px dashed var(--border, rgba(127,127,127,.4)); border-radius:14px; padding:22px; text-align:center; color:var(--text-soft,#666); cursor:pointer; transition:.15s; background:var(--bg-soft); }
.vp-drop.over { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--bg-soft)); }
.vp-files { margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.vp-file-chip { display:flex; align-items:center; gap:8px; background:var(--bg-soft); border:1px solid var(--border, rgba(127,127,127,.2)); border-radius:10px; padding:6px 10px; font-size:13px; }
.vp-file-chip b { color:var(--accent); }
.vp-file-chip button { border:none; background:transparent; color:var(--error,#e60012); cursor:pointer; font-size:15px; line-height:1; }
.vp-extra { margin-top:12px; }
.vp-extra label { display:block; font-size:13px; margin:10px 0 4px; color:var(--text-soft,#666); }
.vp-params { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:14px; }
.vp-field { display:flex; flex-direction:column; gap:5px; }
.vp-field > label { font-size:13px; color:var(--text-soft,#666); }
.vp-field input[type=text], .vp-field input[type=number], .vp-field select { padding:9px 10px; border:1px solid var(--border, rgba(127,127,127,.3)); border-radius:9px; background:var(--bg); color:var(--text); font-size:14px; }
.vp-field input[type=range] { width:100%; }
.vp-field .vp-rangeval { font-size:12px; color:var(--accent); }
.vp-field.check { flex-direction:row; align-items:center; gap:8px; }
.vp-field.check label { margin:0; }
.vp-actions { display:flex; align-items:center; gap:12px; margin-top:18px; flex-wrap:wrap; }
.vp-btn { background:var(--accent); color:#fff; border:none; border-radius:10px; padding:11px 22px; font-size:15px; cursor:pointer; font-weight:600; }
.vp-btn:disabled { opacity:.5; cursor:not-allowed; }
.vp-btn.ghost { background:transparent; border:1px solid var(--border, rgba(127,127,127,.35)); color:var(--text); }
.vp-progress { height:10px; border-radius:999px; background:var(--bg-soft); overflow:hidden; border:1px solid var(--border, rgba(127,127,127,.2)); margin:14px 0 0; display:none; }
.vp-progress > i { display:block; height:100%; width:0; background:var(--accent); transition:width .2s; }
.vp-msg { margin-top:12px; font-size:14px; min-height:20px; }
.vp-msg.bad { color:var(--error,#e60012); }
.vp-msg.ok { color:var(--accent); }
.vp-msg a.vp-msg-link { color:var(--accent); text-decoration:underline; font-weight:600; }
.vp-msg.bad a.vp-msg-link { color:var(--error,#e60012); }
.vp-kernel { font-size:12px; color:var(--text-soft,#888); margin-top:8px; }
.vp-result { margin-top:16px; display:none; }
.vp-result video, .vp-result audio, .vp-result img { max-width:100%; border-radius:12px; margin-top:10px; background:#000; }
.vp-metrics { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.vp-metric { background:var(--bg-soft); border:1px solid var(--border, rgba(127,127,127,.2)); border-radius:10px; padding:8px 12px; font-size:13px; }
.vp-metric b { color:var(--accent); }
.vp-dl-row { margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.vp-hint { font-size:12px; color:var(--text-soft,#999); margin-top:6px; line-height:1.6; }
.vp-desc { font-size:14px; color:var(--text-soft,#666); margin:6px 0 0; line-height:1.7; }

/* 取消按钮 + 内核加载 spinner + 手机端横幅 */
.vp-btn.vp-cancel { background:transparent; border:1px solid var(--border, rgba(127,127,127,.35)); color:var(--text); }
.vp-kernel.loading { color:var(--accent); }
.vp-kernel.loading::before { content:''; display:inline-block; width:11px; height:11px; margin-right:6px; vertical-align:-1px; border:2px solid var(--accent); border-top-color:transparent; border-radius:50%; animation:vp-spin .8s linear infinite; }
@keyframes vp-spin { to { transform:rotate(360deg); } }
.vp-mobile-note { margin:12px 0 0; padding:10px 14px; border:1px solid var(--border, rgba(127,127,127,.22)); border-radius:12px; background:var(--bg-soft); font-size:13px; color:var(--text-soft); line-height:1.6; }

/* 时间轴（可拖拽选区 / 时间点） */
.vp-timeline { margin-top:16px; }
.vp-tl-hint { font-size:13px; color:var(--text-soft,#888); background:var(--bg-soft); border:1px dashed var(--border, rgba(127,127,127,.3)); border-radius:10px; padding:10px 12px; line-height:1.6; }
.vp-tl { border:1px solid var(--border, rgba(127,127,127,.2)); border-radius:12px; padding:12px; background:var(--bg-soft); }
.vp-tl-prev { margin-bottom:10px; }
.vp-tl-prev video { max-width:100%; max-height:220px; border-radius:10px; background:#000; display:block; }
.vp-tl-audionote { font-size:13px; color:var(--text-soft,#888); padding:8px 0; }
.vp-tl-head { display:flex; justify-content:space-between; align-items:center; font-size:13px; margin-bottom:8px; }
.vp-tl-title { color:var(--text-soft,#666); }
.vp-tl-cur { color:var(--accent); font-weight:600; }
.vp-tl-track { position:relative; height:14px; border-radius:999px; background:var(--border, rgba(127,127,127,.3)); margin:6px 0; touch-action:none; cursor:pointer; }
.vp-tl-sel { position:absolute; top:0; bottom:0; background:color-mix(in srgb,var(--accent) 45%,transparent); border-radius:999px; }
.vp-tl-play { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--accent); border-radius:2px; pointer-events:none; }
.vp-tl-handle { position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 1px 4px rgba(0,0,0,.25); cursor:ew-resize; touch-action:none; }
.vp-tl-handle:hover { transform:scale(1.12); }
.vp-tl-time { display:flex; justify-content:space-between; font-size:12px; color:var(--text-soft,#888); margin-top:4px; }