/* =====================================================================
   视频变高清（视频板块 · 2026-09-20）
   —— 独立样式文件，**不追加进 style.css**（站内铁律：改别人的样式别动 style.css，
      并发会话互相覆盖会静默串样式）。本文件必须排在 style.css **之后**加载。
   色系：影像靛蓝 → 青，与视频板块的紫色图标同族，和站内橙色主色区分开。
   语义色：红=错误 琥珀=提醒 绿=通过
   ⚠️ 本子页有 flex/grid 容器 + 大量 hidden 控制显隐 →
      作者样式会盖掉 UA 的 [hidden]，必须显式兜底（站内已踩过 7 批）
   ===================================================================== */
#sub-videohd [hidden] { display: none !important; }
#sub-videohd { padding-bottom: 84px; }   /* 底部 TabBar + 安全区，别让按钮被压住 */

/* ---------- 头部引导 ---------- */
#sub-videohd .vhd-hero {
  background: linear-gradient(135deg, #2b2f77 0%, #1b3a5c 100%);
  border: none;
  box-shadow: 0 6px 18px rgba(43, 47, 119, 0.24);
}
.vhd-hero-t { font-size: 17px; font-weight: 800; color: #fff; letter-spacing: 0.3px; }
.vhd-hero-s { margin-top: 6px; font-size: 12.5px; line-height: 1.75; color: rgba(255, 255, 255, 0.84); }
.vhd-hero-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.vhd-hero-tags span {
  font-size: 11.5px; color: #fff; background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 3px 9px;
}

/* ---------- 上传区（<input type=file> 必须藏在 label 里，别用 opacity:0 —— 手机点不到） ---------- */
.vhd-drop {
  display: block; cursor: pointer; text-align: center;
  border: 1.5px dashed #c9d2e4; border-radius: 16px;
  background: #f7f9ff; padding: 22px 14px;
  transition: border-color 0.16s, background 0.16s;
}
.vhd-drop.over { border-color: #4c5bd4; background: #eef1ff; }
.vhd-drop .vhd-drop-ico { font-size: 26px; }
.vhd-drop .vhd-drop-t { margin-top: 8px; font-size: 14.5px; font-weight: 700; color: #2b2f77; }
.vhd-drop .vhd-drop-s { margin-top: 5px; font-size: 12px; color: var(--text2); line-height: 1.7; }
.vhd-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* ---------- 已选文件 ---------- */
.vhd-filemeta { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--text2); }
.vhd-filemeta b { color: var(--text); display: block; word-break: break-all; }
.vhd-preview { margin-top: 12px; border-radius: 14px; overflow: hidden; background: #0b1020; }
.vhd-preview video { display: block; width: 100%; height: auto; max-height: 46vh; }

/* ---------- 档位 chips ---------- */
.vhd-rec {
  margin-left: 5px; font-size: 9.5px; font-weight: 800; color: #fff;
  background: #4c5bd4; border-radius: 999px; padding: 1px 5px; vertical-align: 1px;
}

/* ---------- 输入 → 输出 对照 ---------- */
.vhd-plan { margin-top: 12px; background: #f7f9ff; border: 1px solid #e6ebf7; border-radius: 14px; padding: 11px 12px; }
.vhd-plan-row { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.9; }
.vhd-plan-row .vhd-k { flex: 0 0 48px; color: var(--text2); }
.vhd-plan-row .vhd-v { flex: 1; min-width: 0; word-break: break-word; }
.vhd-plan-row .vhd-v i { font-style: normal; color: var(--text2); margin: 0 3px; }
.vhd-plan-row .vhd-v b { color: #2b2f77; }
.vhd-plan-cost {
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed #dfe6f5;
  font-size: 12.5px; color: var(--text2); line-height: 1.7;
}
.vhd-plan-cost b { color: #d9480f; font-size: 14px; }
.vhd-warn {
  margin-top: 9px; font-size: 12px; line-height: 1.7;
  color: #b45309; background: #fef4e2; border-radius: 10px; padding: 8px 10px;
}

/* ---------- 进度（渐近 92%，永不假装 100%） ---------- */
.vhd-progress { margin-top: 12px; }
.vhd-bar { height: 7px; border-radius: 999px; overflow: hidden; background: #e8ecf7; }
.vhd-bar > i {
  display: block; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, #6b7cff, #2b2f77);
  transition: width 0.4s ease-out;
}
.vhd-ptext { margin-top: 7px; font-size: 12.5px; color: var(--text2); line-height: 1.7; }

/* ---------- 成片 + 前后对比滑块 ---------- */
.vhd-result-meta { margin-top: 4px; }

.vhd-cmp {
  position: relative; margin-top: 12px; width: 100%;
  border-radius: 16px; overflow: hidden; background: #05070f;
  --vhd-p: 50%;
  touch-action: pan-y;            /* 允许上下滚动，左右拖动交给滑块 */
  user-select: none;
}
.vhd-cmp video { display: block; width: 100%; height: auto; max-height: 62vh; }
.vhd-cmp #vhdOut { position: relative; z-index: 1; }
.vhd-cmp #vhdIn {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  /* 只显示分割线左边的部分 —— 左边看原片、右边看成片 */
  clip-path: inset(0 calc(100% - var(--vhd-p)) 0 0);
  -webkit-clip-path: inset(0 calc(100% - var(--vhd-p)) 0 0);
}
.vhd-cmp-tag {
  position: absolute; top: 9px; z-index: 4;
  font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(8, 12, 26, 0.62); border-radius: 999px; padding: 3px 9px;
  backdrop-filter: blur(4px);
}
.vhd-cmp-tag.l { left: 9px; }
.vhd-cmp-tag.r { right: 9px; }
.vhd-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 5;
  width: 2px; margin-left: -1px; background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
}
.vhd-handle::after {
  content: '⟨⟩'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.94); color: #2b2f77;
  font-size: 13px; font-weight: 800; line-height: 34px; text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.vhd-cmp-btns { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 小按钮 ---------- */
.vhd-mini {
  border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  background: linear-gradient(135deg, #6b7cff, #2b2f77); color: #fff;
  text-decoration: none; display: inline-block;
}
.vhd-mini-ghost { background: #fff; color: var(--text2); border: 1px solid #e2e8f5; }
.vhd-mini:active { transform: translateY(1px); }

/* ---------- 错误 / 轻提示 ---------- */
#vhdToast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  z-index: 999; max-width: 86vw;
  background: rgba(20, 24, 40, 0.94); color: #fff;
  font-size: 13px; line-height: 1.6; border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

/* 主按钮禁用态要看得懂（站内铁律：灰按钮旁必须写清原因） */
#sub-videohd .gen-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* 图标底色（与 hero 同族的影像靛蓝；新功能自带，别去改 style.css） */
.f-videohd { background: linear-gradient(135deg, #6b7cff 0%, #2b2f77 100%); }