/* ===========================================================================
 * 功能页顶部横幅 vfb（2026-09-19 · 开发员12号）
 * ---------------------------------------------------------------------------
 * 用户原话：「视频板块里，哪个功能它不带 banner？根据这个功能的内容，
 *            写出引眼球的文案且搭配上颜色醒目的 banner」
 *
 * 🔍 排查结果（视频板块 13 张卡 / 11 个子页）：
 *    8 个已有彩色 hero 或 banner（vm-hero / ch-hero / mv-hero / bm-hero / sb-hero /
 *    fa-banner / acl-banner / av-banner）；剩下这 3 个是"秃"的 ——
 *      · 视频去水印（.vfb-dew）：进去直接就是"选择视频"上传框，**一句介绍都没有**；
 *      · 声音克隆（.vfb-vc）  ：只有一行白底小字页头，"能干嘛"要自己猜；
 *      · 动作克隆（.vfb-acx） ：只有"标题 + 一句话"的裸文字，没有任何视觉。
 *
 * 🔴 三条硬约束（改本文件前必读）
 *   ① **类名前缀 `vfb-` 全局唯一**（写前已 grep 全站确认无占用）；
 *      独立样式表，排在 style.css 之后加载 —— 不动别人的样式。
 *   ② **自带底色，不依赖任何主题变量**：深色渐变底 + 白字，
 *      以后就算加深色主题也不会翻车（站内 av-banner 那类浅底浅字的就做不到）。
 *   ③ 内含 absolute 光斑装饰 → 容器**必须** `position: relative`。
 *      漏了会撑宽 document，**手机端整页被缩成 77%**（桌面看不出来）—— 站内踩过的老坑。
 * ========================================================================== */

.vfb {
  position: relative;                  /* 🔴 见硬约束 ③ */
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 16px 15px;
  margin-bottom: 14px;                 /* 与站内 .card 的 margin-bottom 对齐 */
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

/* 右上角柔光斑：让"纯色渐变"看起来有层次，不明显但一眼睛能感到"这个条是重点" */
.vfb-glow {
  position: absolute;
  right: -34px;
  top: -52px;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
  z-index: -1;
}

/* 图标：白底半透明圆角块 —— 比裸 emoji 更有"实体按钮"的质感 */
.vfb-ico {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .30);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}

.vfb-tx { flex: 1 1 auto; min-width: 0; }

.vfb-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .4px;
}

.vfb-t {
  margin-top: 7px;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.32;
}

.vfb-s {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.6;
  opacity: .95;
}
.vfb-s b { font-weight: 800; }

.vfb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.vfb-chip {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================ 三套配色（按功能主题定，不是随手挑的） ============ */

/* 视频去水印 —— 青 → 蓝：干净、清爽，对应"擦干净"这件事 */
.vfb-dew { background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); }
.vfb-dew { box-shadow: 0 10px 24px rgba(37, 99, 235, .26); }

/* 声音克隆 —— 紫 → 品红：声音的质感与辨识度 */
.vfb-vc { background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%); }
.vfb-vc { box-shadow: 0 10px 24px rgba(147, 51, 234, .26); }

/* 动作克隆 —— 橙 → 玫红：动感、有能量 */
.vfb-acx { background: linear-gradient(135deg, #f97316 0%, #e11d48 100%); }
.vfb-acx { box-shadow: 0 10px 24px rgba(225, 29, 72, .24); }

/* ============================ 窄屏 ============================================ */
@media (max-width: 400px) {
  .vfb { padding: 15px 13px 13px; gap: 11px; }
  .vfb-ico { width: 42px; height: 42px; font-size: 22px; }
  .vfb-t { font-size: 16.5px; }
  .vfb-s { font-size: 12px; }
}

/* 视频去背景 —— 青 → 靛蓝：干净、"移除"的感觉（2026-09-20 新增） */
.vfb-vbg { background: linear-gradient(135deg, #14b8a6 0%, #4f46e5 100%); }
.vfb-vbg { box-shadow: 0 10px 24px rgba(20, 184, 166, .26); }