/* ============================================================================
 * 视频去背景 / 图片去背景（融合）· 样式（2026-09-20 · 开发员12号）
 * ----------------------------------------------------------------------------
 * 用户要求：「UI 界面要高级」+「融合：既能去视频背景，也能去图片背景」
 *
 * 设计取舍（别改调性）：
 *   · **一个上传口，不预设模式** —— 美图是"图片/视频"两个产品页靠按钮切换，
 *     用户得先想清楚自己传什么；这里由文件类型自动分流，少一步。
 *   · **结果一定给"对比"**：左原片 / 右结果，中间一根可拖的竖线（美图的招牌交互）。
 *     去背景这个功能，"看得出来"比"说得好"重要。
 *   · 透明底用**棋盘格**显示 —— 否则用户以为图裂了（白底/透明在浅色页面上分不清）。
 *   · 主按钮沿用站内品牌橙；功能装饰色用「薄荷青 → 靛蓝」，与品牌橙形成辨识度。
 *   · 超长视频/大图都不做本机预处理，交给服务端 ffmpeg（生产有 6.1.1）。
 *
 * 🔴 类名前缀 `vbg-` 全局唯一（写前已 grep 确认未占用）；全部规则收在 #sub-videobg 内，
 *    不动站内公共类。含 absolute 装饰物的容器一律 position:relative（老坑：会撑宽文档）。
 * ========================================================================== */

#sub-videobg { padding-bottom: 92px; }          /* 底部固定 TabBar 的留白 */

/* ============================ 上传区 ===================================== */
#sub-videobg .vbg-drop {
  position: relative;
  border: 1.6px dashed #b9d9d2;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7fdfb 0%, #f2fbfa 100%);
  padding: 26px 16px 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .16s, background .16s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
#sub-videobg .vbg-drop:active { transform: scale(.995); }
#sub-videobg .vbg-drop.drag {
  border-color: #14b8a6;
  background: linear-gradient(180deg, #ecfdf9 0%, #e6fbf5 100%);
}
#sub-videobg .vbg-drop-ico {
  width: 52px; height: 52px; margin: 0 auto 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #5eead4, #22d3ee);
  display: flex; align-items: center; justify-content: center;
  font-size: 25px; line-height: 1;
  box-shadow: 0 8px 18px rgba(20, 184, 166, .26);
}
#sub-videobg .vbg-drop-t { font-size: 16px; font-weight: 800; color: var(--text); }
#sub-videobg .vbg-drop-s {
  margin-top: 6px; font-size: 12.5px; line-height: 1.6; color: var(--text2);
}
#sub-videobg .vbg-drop-s b { color: #0d9488; font-weight: 800; }
#sub-videobg .vbg-drop-kinds {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
#sub-videobg .vbg-kind {
  padding: 4px 11px; border-radius: 999px;
  background: #fff; border: 1px solid #d7ece7;
  font-size: 11.5px; font-weight: 600; color: #0f766e;
}

/* ============================ 通用小标签 ================================= */
#sub-videobg .vbg-sec-t {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 800; color: var(--text);
  margin: 2px 0 10px;
}
#sub-videobg .vbg-sec-t i {
  width: 3px; height: 14px; border-radius: 2px; font-style: normal;
  background: linear-gradient(180deg, #5eead4, #14b8a6);
}
#sub-videobg .vbg-sec-t span { font-size: 11.5px; font-weight: 500; color: var(--text2); }

#sub-videobg .vbg-hint { margin-top: 9px; font-size: 11.5px; line-height: 1.6; color: var(--text2); }
#sub-videobg .vbg-hint b { color: var(--primary); font-weight: 700; }

/* ============================ 选项区 ===================================== */
#sub-videobg .vbg-file {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 14px;
  border-radius: 13px; background: rgba(20, 184, 166, .07);
  border: 1px solid rgba(20, 184, 166, .16);
}
#sub-videobg .vbg-file-ico { font-size: 20px; flex: 0 0 auto; }
#sub-videobg .vbg-file-b { flex: 1 1 auto; min-width: 0; }
#sub-videobg .vbg-file-n {
  font-size: 12.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#sub-videobg .vbg-file-m { margin-top: 2px; font-size: 11px; color: var(--text2); }
#sub-videobg .vbg-file-x {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 15px; color: var(--text2); padding: 4px 2px;
}

/* 背景色 / 清晰度 chips */
#sub-videobg .vbg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#sub-videobg .vbg-chip {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 12px;
  border: 1.6px solid var(--line, #ece0d3); background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--text2);
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
#sub-videobg .vbg-chip.on {
  border-color: var(--primary); color: var(--primary);
  background: var(--primary-soft, rgba(249, 89, 1, .07));
}
#sub-videobg .vbg-chip small { font-size: 10.5px; font-weight: 500; color: var(--text2); }
#sub-videobg .vbg-dot {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .12); flex: 0 0 auto;
}

/* ============================ 主按钮 ===================================== */
#sub-videobg .vbg-go {
  display: block; width: 100%; margin-top: 16px;
  padding: 14px 0; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #ff8a3d, var(--primary, #f95901));
  color: #fff; font-size: 15.5px; font-weight: 800; letter-spacing: .3px;
  cursor: pointer; box-shadow: 0 7px 18px rgba(249, 89, 1, .26);
  transition: transform .12s, opacity .16s;
}
#sub-videobg .vbg-go:active { transform: scale(.985); }
#sub-videobg .vbg-go:disabled { opacity: .55; cursor: default; box-shadow: none; }

/* ============================ 进度 ======================================= */
#sub-videobg .vbg-prog { padding: 6px 2px 2px; }
#sub-videobg .vbg-prog-h {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--text);
}
#sub-videobg .vbg-prog-h span:last-child { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
#sub-videobg .vbg-barwrap {
  margin-top: 10px; height: 7px; border-radius: 999px;
  background: rgba(20, 184, 166, .14); overflow: hidden;
}
#sub-videobg .vbg-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, #5eead4, #14b8a6);
  transition: width .5s ease;
}
#sub-videobg .vbg-prog-s { margin-top: 9px; font-size: 11.5px; line-height: 1.6; color: var(--text2); }

/* ============================ 结果对比 =================================== */
#sub-videobg .vbg-cmp {
  position: relative;                 /* 🔴 内含 absolute 层 */
  border-radius: 16px; overflow: hidden;
  background: #0f1115;
  aspect-ratio: 3 / 4;                /* 默认竖屏；实际按素材比例由 JS 设置 */
  max-height: 62vh;
  user-select: none;
  touch-action: pan-y;
}
#sub-videobg .vbg-cmp-l,
#sub-videobg .vbg-cmp-r { position: absolute; inset: 0; }
#sub-videobg .vbg-cmp video,
#sub-videobg .vbg-cmp img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  background: transparent;
}
/* 结果层裁切：用 clip-path 按分割位置切开（比 width 裁切更平滑、不重排） */
#sub-videobg .vbg-cmp-r {
  clip-path: inset(0 0 0 50%);
  background:
    conic-gradient(#e9eef2 25%, #f6f8fa 0 50%, #e9eef2 0 75%, #f6f8fa 0) 0 0 / 18px 18px;
}
/* 左右角标 */
#sub-videobg .vbg-cmp-tag {
  position: absolute; top: 9px; padding: 3px 9px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; backdrop-filter: blur(3px);
}
#sub-videobg .vbg-cmp-tag.l { left: 9px; }
#sub-videobg .vbg-cmp-tag.r { right: 9px; background: rgba(20, 184, 166, .85); }
/* 分割手柄 */
#sub-videobg .vbg-cmp-line {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: #fff; box-shadow: 0 0 8px rgba(0, 0, 0, .35);
  transform: translateX(-1px); pointer-events: none;
}
#sub-videobg .vbg-cmp-knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #0f766e; pointer-events: none;
}
/* 真正接收拖拽的滑杆：铺满整块，透明 */
#sub-videobg .vbg-cmp-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
  -webkit-appearance: none;
}

#sub-videobg .vbg-res-ops { display: flex; gap: 10px; margin-top: 14px; }
#sub-videobg .vbg-res-ops .main {
  flex: 1.4; padding: 13px 0; border: 0; border-radius: 13px;
  background: linear-gradient(135deg, #ff8a3d, var(--primary, #f95901));
  color: #fff; font-size: 14.5px; font-weight: 800; cursor: pointer;
  box-shadow: 0 6px 16px rgba(249, 89, 1, .24);
}
#sub-videobg .vbg-res-ops .ghost {
  flex: 1; padding: 13px 0; border-radius: 13px;
  border: 1.5px solid var(--line, #ece0d3); background: #fff;
  color: var(--text2); font-size: 14.5px; font-weight: 700; cursor: pointer;
}
#sub-videobg .vbg-res-meta {
  margin-top: 10px; font-size: 11.5px; line-height: 1.6; color: var(--text2); text-align: center;
}
#sub-videobg .vbg-res-meta b { color: #0d9488; }

/* 图片结果的底色合成预览：直接给一张合成后的图（本机 canvas，零成本） */
#sub-videobg .vbg-plate { margin-top: 14px; }
#sub-videobg .vbg-plate-t { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 8px; }

#sub-videobg .vbg-warn {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  background: #fff7ed; border: 1px solid #fed7aa;
  font-size: 12px; line-height: 1.65; color: #9a3412;
}
#sub-videobg .vbg-skip { margin-top: 12px; text-align: center; }
#sub-videobg .vbg-skip button {
  border: 0; background: transparent; color: var(--primary);
  font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 6px 4px;
}

/* ============================ 窄屏 ====================================== */
@media (max-width: 400px) {
  #sub-videobg .vbg-drop { padding: 22px 12px 18px; }
  #sub-videobg .vbg-drop-ico { width: 46px; height: 46px; font-size: 22px; }
  #sub-videobg .vbg-chip { padding: 8px 11px; font-size: 12px; }
}

/* ============================ toast ====================================== */
#sub-videobg .vbg-toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 100;                    /* 🔴 必须高于 TabBar（实测 60），否则被底部导航盖住点不到 */
  max-width: 84vw; padding: 11px 16px; border-radius: 12px;
  background: rgba(30, 22, 14, .93); color: #fff;
  font-size: 13px; line-height: 1.5; text-align: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}