/* ===========================================================================
 * AI 视频翻译（#sub-videotranslate）· 独立样式表
 * ---------------------------------------------------------------------------
 * 🔴 三条约定（照抄项目里其他功能子页的经验，别改）：
 *   ① 所有选择器必须带 `#sub-videotranslate` 作用域 —— 裸类名会连带影响别处
 *   ② var() 只能用本文件 `#sub-videotranslate { --vtr-* }` 里定义过的
 *      （var 取不到值 = **整条声明失效**，不是回退默认值）
 *   ③ 页面里所有 `position:absolute` 的装饰物，其容器必须 `position:relative`
 *      —— 否则会撑宽 document，**手机端整页缩成 77%**（桌面看不出来）
 *   ④ 🔴 **必须写 `[hidden]` 兜底**（见下面那条）——
 *      凡是给元素写了 `display: block/flex/grid`，就**盖掉了 `hidden` 属性的隐藏效果**，
 *      JS 里 `el.hidden = true` 就白设了。本页有 6 个元素靠 `hidden` 切换
 *      （vtrPreview / vtrMeta / vtrProg / vtrErr / vtrResult / vtrDlSrt）。
 *      ⚠️ 2026-09-20 真踩到：上传前**一直挂着一个 340×150 的黑色空播放器**，
 *      用户看到的第一反应是「这界面是残缺吧」。项目里其他功能子页全都写了这条兜底，
 *      只有本文件漏了 —— 新写子页时**第一件事就是把它加上**。
 *
 * 视觉基调：青蓝 → 靛蓝（"语言转换"的科技感），与视频板块的暖色 hero 形成对比但不刺眼。
 * =========================================================================== */

#sub-videotranslate {
  --vtr-ink: #1a2230;
  --vtr-ink2: #5c6b80;
  --vtr-ink3: #93a1b5;
  --vtr-paper: #ffffff;
  --vtr-bg: #f7f9fc;
  --vtr-line: rgba(90, 120, 170, .16);
  --vtr-line2: rgba(90, 120, 170, .3);
  --vtr-brand: #2563eb;
  --vtr-brand2: #06b6d4;
  --vtr-ok: #0f766e;
  --vtr-warn: #b45309;
  --vtr-danger: #b91c1c;
  --vtr-shadow: 0 2px 10px rgba(30, 58, 110, .07);
  --vtr-shadow2: 0 10px 26px -12px rgba(30, 58, 110, .3);
  /* 🔴 fixed TabBar 实测高 74px，底部必须留白，否则按钮被永久挡住 */
  padding-bottom: 100px;
}

/* 🔴🔴 `[hidden]` 兜底 —— 这条不能删，删了就会出现"幽灵黑色播放器"。
 *
 * 为什么需要它：浏览器对 `[hidden]` 的默认样式是 `display: none`，但它只是**低优先级的
 * UA 样式** —— 只要作者样式里给同一个元素写了 `display: block/flex/grid`，就把它盖掉了。
 * 于是 `el.hidden = true` 在 DOM 上是生效的（`el.hidden === true`）、
 * 在 CSS 计算值里却是 `display: block` → **元素照样占位、照样渲染**。
 * 排查这类问题时，"看 JS 有没有设 hidden"是查不出来的，必须看 `getComputedStyle().display`。
 *
 * 本页的实际后果（2026-09-20 用户截图报障）：上传前 `.vtr-preview`（`display:block` +
 * `background:#000`）一直渲染成一个 340×150 的**黑色空播放器**，用户以为界面是残缺的。
 * 这条兜底 `!important` 压过一切作者样式，之后隐藏/显示都听 JS 的 `hidden`。
 *
 * ⚠️ 以后给本页加任何"默认不显示、之后才显示"的元素，**什么都不用做** —— 用 `el.hidden`
 * 控制即可，这条规则已经兜住了。 */
#sub-videotranslate [hidden] { display: none !important; }

/* ===================== 头部 banner ===================== */
#sub-videotranslate .vtr-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  margin: 12px 14px 14px; padding: 16px 18px;
  border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #1d4ed8 0%, #0891b2 52%, #06b6d4 100%);
  box-shadow: 0 12px 26px -12px rgba(29, 78, 216, .55);
}
#sub-videotranslate .vtr-hero-glow {
  position: absolute; right: -30px; top: -36px; width: 120px; height: 120px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 68%);
}
#sub-videotranslate .vtr-hero-ico { position: relative; font-size: 30px; line-height: 1; }
#sub-videotranslate .vtr-hero-tx { position: relative; min-width: 0; }
#sub-videotranslate .vtr-hero-t { font-size: 16.5px; font-weight: 800; letter-spacing: .3px; }
#sub-videotranslate .vtr-hero-s {
  margin-top: 4px; font-size: 12px; line-height: 1.5; opacity: .95;
  /* 窄屏（≤400px）会折行 —— `pretty` 让浏览器避免把最后一个短语孤零零甩到第二行
     （实测 430px 下"背景音"曾单独占一行）。旧浏览器不认这个属性会直接忽略，无副作用。 */
  text-wrap: pretty;
}
#sub-videotranslate .vtr-hero-s b { font-weight: 800; white-space: nowrap; }

/* ===================== 卡片 ===================== */
#sub-videotranslate .vtr-card {
  margin: 0 14px 12px; padding: 14px;
  background: var(--vtr-paper); border: 1px solid var(--vtr-line);
  border-radius: 15px; box-shadow: var(--vtr-shadow);
}
#sub-videotranslate .vtr-ct {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 800; color: var(--vtr-ink);
}
#sub-videotranslate .vtr-ct i {
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--vtr-ink3);
}
#sub-videotranslate .vtr-req {
  padding: 2px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 800; color: #fff; background: var(--vtr-brand);
}
#sub-videotranslate .vtr-ct-r { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--vtr-ink3); }

/* ===================== 上传 ===================== */
/* 🔴 上传区：虚线必须**实色**、底色必须**比卡片白底明显一点**（2026-09-20 修，别改回去）。
 *
 * 原来写的是 `border: 1.5px dashed var(--vtr-line2)` —— 而 `--vtr-line2` 是
 * `rgba(90,120,170,.3)`（30% 透明度），底色 `var(--vtr-bg)` = `#f7f9fc`（几乎等于白卡片）。
 * 结果：在白色卡片上**只有圆角处的两段弧勉强可见，四条直边几乎看不见**
 * → 用户两次截图问「这个 UI 界面是残缺吗」（以为上传框只画了两条弧、框没封口）。
 *
 * 判据：这类"虚线框"要能一眼看出是个**闭合的可点区域**。
 * 项目里其他上传区都是这么做的，照抄：
 *   `.acx-drop`  `1.5px dashed #f0cdb4`（实色）
 *   `.bmu-drop`  `1.5px dashed rgba(240,180,90,.42)` + `rgba(255,248,240,.6)` 暖底
 *   `.ct-drop`   `1px dashed #dbc9ab`（实色）
 * → 本页统一成：**实色浅蓝虚线 + 淡蓝底**。 */
#sub-videotranslate .vtr-drop {
  /* 🔴🔴 `display: block` 不能删！（2026-09-20 用户两次报障的**真正根因**）
   *
   * `.vtr-drop` 是个 `<label>`，而浏览器对 label 的默认 display 是 **inline**。
   * 我只写了 padding + border + border-radius，**没写 display** →
   * inline 元素里又套了 3 个 block 子元素（图标 / 标题 / 说明行）→
   * 浏览器把 label 拆成多个**匿名块盒**，边框就**被切成一截一截画在每一段上**：
   *   左右各剩两段弧（圆角处），**上下边框整条消失**，中间大段空白。
   * 用户看到的是一圈"画了一半的虚线框"，两次截图问「这个 UI 界面是残缺吗」。
   *
   * 判据：量 `getComputedStyle(label).display`，再用 `document.elementFromPoint()`
   * 在四条边的中点探一下 —— 如果命中的是**别的元素**，说明边框根本不在你以为的位置。
   * （`getBoundingClientRect()` 对 inline 元素会给出一个"看着正常"的矩形，**骗人的**。）
   *
   * 项目里其他上传区全都写了 display（`.acx-drop` flex / `.bmu-drop` block /
   * `.ct-drop` flex / `.gz-drop` flex）—— 只有本页漏了。 */
  display: block;
  position: relative; margin-top: 11px; padding: 26px 14px 22px;
  border: 1.5px dashed #a9c2ea; border-radius: 14px;
  background: #f4f8ff; text-align: center; cursor: pointer;
  transition: background .16s, border-color .16s;
}
#sub-videotranslate .vtr-drop:active { background: #e3eefd; border-color: var(--vtr-brand); }
#sub-videotranslate .vtr-drop.drag { background: #e3eefd; border-color: var(--vtr-brand); }
/* 🔴 <input type=file> 必须藏在 label 里（整个 .vtr-drop 就是 label），
   别用 opacity:0 —— 手机上点不到 */
#sub-videotranslate .vtr-drop input[type=file] { display: none; }
#sub-videotranslate .vtr-drop-ico { font-size: 30px; line-height: 1; }
#sub-videotranslate .vtr-drop-t { margin-top: 9px; font-size: 14.5px; font-weight: 800; color: var(--vtr-ink); }
/* 说明行在淡蓝底上 —— 用 ink2 而不是 ink3（ink3 在这种有色底上会发灰、显得没写完） */
#sub-videotranslate .vtr-drop-s { margin-top: 5px; font-size: 11.5px; line-height: 1.6; color: var(--vtr-ink2); }
#sub-videotranslate .vtr-preview {
  display: block; width: 100%; margin-top: 11px; border-radius: 12px; background: #000;
  max-height: 42vh;
}
#sub-videotranslate .vtr-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 9px; font-size: 11.5px; color: var(--vtr-ink2);
}
#sub-videotranslate .vtr-meta b { color: var(--vtr-ink); }
#sub-videotranslate .vtr-clear {
  margin-left: auto; border: 0; cursor: pointer; font-family: inherit;
  background: #fff1f1; color: var(--vtr-danger);
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
}

/* ===================== 模式（翻译什么） ===================== */
#sub-videotranslate .vtr-modes { display: grid; gap: 8px; margin-top: 11px; }
#sub-videotranslate .vtr-mode {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: 11px 12px; border-radius: 12px;
  background: var(--vtr-bg); border: 1.5px solid var(--vtr-line);
  font-size: 13.5px; font-weight: 700; color: var(--vtr-ink);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
#sub-videotranslate .vtr-mode span {
  display: block; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--vtr-ink3);
}
#sub-videotranslate .vtr-mode.on {
  background: #eff5ff; border-color: var(--vtr-brand);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}
#sub-videotranslate .vtr-mode.on span { color: var(--vtr-brand); }

/* ===================== 语言 ===================== */
#sub-videotranslate .vtr-langs {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 8px; margin-top: 11px;
}
#sub-videotranslate .vtr-field { min-width: 0; }
#sub-videotranslate .vtr-field label {
  display: block; margin-bottom: 5px; font-size: 11px; font-weight: 700; color: var(--vtr-ink3);
}
#sub-videotranslate .vtr-sel {
  width: 100%; box-sizing: border-box; padding: 10px 11px;
  font-size: 14px; font-family: inherit; font-weight: 700; color: var(--vtr-ink);
  background: var(--vtr-bg); border: 1.5px solid var(--vtr-line); border-radius: 11px;
  outline: none; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #93a1b5 50%), linear-gradient(135deg, #93a1b5 50%, transparent 50%);
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
#sub-videotranslate .vtr-sel:focus { border-color: var(--vtr-brand); }
#sub-videotranslate .vtr-arrow {
  padding-bottom: 10px; font-size: 15px; font-weight: 800; color: var(--vtr-brand);
}

/* ===================== 音色 ===================== */
#sub-videotranslate .vtr-voices { display: grid; gap: 8px; margin-top: 11px; }
#sub-videotranslate .vtr-voice {
  display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  padding: 11px 12px; border-radius: 12px;
  background: var(--vtr-bg); border: 1.5px solid var(--vtr-line);
  font-size: 13.5px; font-weight: 700; color: var(--vtr-ink);
}
#sub-videotranslate .vtr-voice span { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--vtr-ink3); }
#sub-videotranslate .vtr-voice.on {
  background: #eff5ff; border-color: var(--vtr-brand);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .12);
}
#sub-videotranslate .vtr-voice.on span { color: var(--vtr-brand); }
#sub-videotranslate .vtr-voice[disabled] { opacity: .5; cursor: not-allowed; }
#sub-videotranslate .vtr-note {
  margin: 9px 0 0; font-size: 11px; line-height: 1.6; color: var(--vtr-ink3);
}
#sub-videotranslate .vtr-note.warn { color: var(--vtr-warn); }

/* ===================== 开关 ===================== */
#sub-videotranslate .vtr-switch-row {
  display: flex; align-items: center; gap: 10px; margin-top: 11px;
}
#sub-videotranslate .vtr-switch-row > div { min-width: 0; flex: 1; }
#sub-videotranslate .vtr-switch-row b { display: block; font-size: 13.5px; font-weight: 800; color: var(--vtr-ink); }
#sub-videotranslate .vtr-switch-row span { display: block; margin-top: 4px; font-size: 11px; line-height: 1.55; color: var(--vtr-ink3); }
#sub-videotranslate .vtr-switch {
  flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px; border: 0; cursor: pointer;
  background: #cfd8e3; position: relative; transition: background .18s;
}
#sub-videotranslate .vtr-switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
  transition: transform .18s;
}
#sub-videotranslate .vtr-switch.on { background: linear-gradient(135deg, #2563eb, #06b6d4); }
#sub-videotranslate .vtr-switch.on::after { transform: translateX(20px); }

/* ===================== 主按钮 ===================== */
#sub-videotranslate .vtr-go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: calc(100% - 28px); margin: 14px 14px 0; padding: 15px; box-sizing: border-box;
  font-size: 15.5px; font-weight: 800; letter-spacing: .3px; color: #fff; font-family: inherit;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  border: 0; border-radius: 15px; cursor: pointer;
  box-shadow: 0 14px 26px -12px rgba(37, 99, 235, .62);
  transition: transform .12s, filter .18s;
}
#sub-videotranslate .vtr-go:active:not(:disabled) { transform: translateY(1px) scale(.995); }
#sub-videotranslate .vtr-go:disabled { filter: grayscale(.45); opacity: .55; cursor: not-allowed; box-shadow: none; }
#sub-videotranslate .vtr-gohint {
  margin: 7px 14px 0; text-align: center; font-size: 11.5px; color: var(--vtr-ink3);
}

/* ===================== 进度 ===================== */
#sub-videotranslate .vtr-prog { margin: 14px 14px 0; }
#sub-videotranslate .vtr-bar {
  height: 8px; border-radius: 999px; background: #e3eaf3; overflow: hidden;
}
#sub-videotranslate .vtr-bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  border-radius: 999px; transition: width .5s ease;
}
#sub-videotranslate .vtr-stage {
  margin-top: 9px; font-size: 12px; font-weight: 600; color: var(--vtr-ink2); line-height: 1.6;
}
#sub-videotranslate .vtr-stage b { color: var(--vtr-brand); }
#sub-videotranslate .vtr-wait {
  margin-top: 6px; font-size: 11px; color: var(--vtr-ink3); line-height: 1.6;
}
#sub-videotranslate .vtr-err {
  margin: 12px 14px 0; padding: 12px 13px; border-radius: 12px;
  background: #fff1f1; border: 1px solid #f5c2c2;
  font-size: 12.5px; line-height: 1.65; color: var(--vtr-danger);
}

/* ===================== 结果 ===================== */
#sub-videotranslate .vtr-result { margin: 16px 14px 0; }
#sub-videotranslate .vtr-res-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 800; color: var(--vtr-ink);
}
#sub-videotranslate .vtr-out {
  display: block; width: 100%; margin-top: 11px; border-radius: 14px; background: #000;
  box-shadow: var(--vtr-shadow2);
}
#sub-videotranslate .vtr-dl { display: flex; gap: 9px; margin-top: 11px; }
#sub-videotranslate .vtr-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 10px; border-radius: 13px; cursor: pointer; text-decoration: none;
  font-size: 13.5px; font-weight: 800; font-family: inherit;
  background: #fff; color: var(--vtr-ink); border: 1.5px solid var(--vtr-line2);
}
#sub-videotranslate .vtr-btn.primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, #2563eb, #0891b2);
  box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .7);
}
#sub-videotranslate .vtr-btn:active { transform: scale(.985); }
#sub-videotranslate .vtr-stats {
  margin-top: 11px; padding: 11px 12px; border-radius: 12px;
  background: var(--vtr-bg); border: 1px solid var(--vtr-line);
  font-size: 11.5px; line-height: 1.75; color: var(--vtr-ink2);
}
#sub-videotranslate .vtr-stats b { color: var(--vtr-ink); }
#sub-videotranslate .vtr-pairs { margin-top: 12px; }
#sub-videotranslate .vtr-pairs summary {
  cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--vtr-brand); padding: 4px 0;
}
#sub-videotranslate .vtr-pair {
  padding: 9px 0; border-top: 1px dashed var(--vtr-line);
  font-size: 12.5px; line-height: 1.6;
}
#sub-videotranslate .vtr-pair .t {
  font-size: 10.5px; font-weight: 700; color: var(--vtr-ink3); letter-spacing: .3px;
}
#sub-videotranslate .vtr-pair .a { margin-top: 3px; color: var(--vtr-ink2); }
#sub-videotranslate .vtr-pair .b { margin-top: 2px; color: var(--vtr-ink); font-weight: 700; }

/* ===================== toast ===================== */
#sub-videotranslate .vtr-toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  max-width: 82vw; text-align: center;
  background: rgba(26, 34, 48, .93); color: #fff;
  padding: 10px 18px; border-radius: 999px; font-size: 12.5px; line-height: 1.5;
  z-index: 80; opacity: 0; transition: opacity .2s; pointer-events: none;
}
#sub-videotranslate .vtr-toast.on { opacity: 1; }