/* ============================================================================
   「声音」板块两张头牌大卡的**配色变体**（2026-10-12）
   ----------------------------------------------------------------------------
   背景：声音板块眼下只有 2 个功能，小卡并排显得空。老板要求把
   「AI配音」「声音克隆」**升格为大卡**（撑得起版面），等功能多了再恢复小卡。
   `.boss-entry` 骨架是**共用**的（定义在 coach.css：白底 + 橙色系），
   每张头牌卡只加一个自己的配色变体类 —— 沿用项目既有范式：
     · 老板AI音乐 → `.boss-entry-bmu`（金，在 bossmusic-entry.css）
     · 照片AI唱歌 → `.boss-entry-pmv`（**⚠️ 见文末备注：该类目前全项目无定义**）
     · AI 混剪   → `.boss-entry-mx`（石板蓝，在 mixcut.css）
     · AI配音    → `.boss-entry-vc`（翠绿，**在本文件**）
     · 声音克隆  → `.boss-entry-vcl`（靛蓝，**在本文件**）
   🔴 为什么新开一个文件、不写进 hero.css / newsecs.css：
      那两个是「新板块骨架」的共用样式，往里面塞卡片配色，
      以后改的人分不清哪份管板块、哪份管卡片。也不写进 photomv.css / mixcut.css
      —— 那是**别的功能**的文件，本项目多会话并发，跨功能追加 = 迟早互相覆盖。
   🔴 特异性：`.combo-card.boss-entry.boss-entry-vc`（0,4,0）>
      `.boss-entry-ico`（0,1,0），能稳定盖住骨架默认的橙色。
   ⚠️ 骨架里的 `position: relative`（glow 的包含块）在 coach.css，
      本文件**不要**再写一遍 —— 重复声明只会让以后改的人不知道该信哪份。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   AI配音 · 翠绿（与 `.hero-sound` 的 34d399→047857 同族，卡片是它的浅色版）
   -------------------------------------------------------------------------- */
.combo-card.boss-entry.boss-entry-vc {
  background: linear-gradient(135deg, #f7fdfb 0%, #e8f8f1 100%);
  border-color: #cfeee0;
}
@media (hover: hover) {
  .combo-card.boss-entry.boss-entry-vc:hover { box-shadow: 0 10px 26px rgba(4, 120, 87, 0.16); }
}
/* 骨架的 glow 是橙色径向光 —— 变体必须一起换，否则浅绿卡上浮一团橙光 */
.combo-card.boss-entry.boss-entry-vc .boss-entry-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.20) 0%, rgba(16, 185, 129, 0) 70%);
}
/* 图标：**浅底**保留原来的 3D 图标文件（深底 + 彩色 3D 图会糊成一团） */
.combo-card.boss-entry.boss-entry-vc .boss-entry-ico {
  background: linear-gradient(135deg, #ffffff 0%, #cdf3e4 100%);
  border: 1px solid #b7e7d3;
  box-shadow: 0 6px 14px rgba(4, 120, 87, 0.14);
}
.combo-card.boss-entry.boss-entry-vc .boss-entry-ico img {
  width: 40px; height: 40px; display: block;
}
.combo-card.boss-entry.boss-entry-vc .boss-entry-tag {
  color: #0a7355; background: #e9f9f2;
}
.combo-card.boss-entry.boss-entry-vc .boss-entry-flow { color: #0a7355; }
.combo-card.boss-entry.boss-entry-vc .boss-entry-flow span {
  background: #f3fdf9; border-color: #cdeee0;
}
.combo-card.boss-entry.boss-entry-vc .boss-entry-flow i { color: #a8d8c6; }

/* ---------------------------------------------------------------------------
   声音克隆 · 靛蓝（与翠绿形成"相邻功能、不同色"的区分，和音乐板块的金+蓝同理）
   -------------------------------------------------------------------------- */
.combo-card.boss-entry.boss-entry-vcl {
  background: linear-gradient(135deg, #f8f9ff 0%, #eceffe 100%);
  border-color: #dcdffb;
}
@media (hover: hover) {
  .combo-card.boss-entry.boss-entry-vcl:hover { box-shadow: 0 10px 26px rgba(55, 48, 163, 0.16); }
}
.combo-card.boss-entry.boss-entry-vcl .boss-entry-glow {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.20) 0%, rgba(99, 102, 241, 0) 70%);
}
.combo-card.boss-entry.boss-entry-vcl .boss-entry-ico {
  background: linear-gradient(135deg, #ffffff 0%, #dbe1ff 100%);
  border: 1px solid #c9d0fa;
  box-shadow: 0 6px 14px rgba(55, 48, 163, 0.14);
}
.combo-card.boss-entry.boss-entry-vcl .boss-entry-ico img {
  width: 40px; height: 40px; display: block;
}
.combo-card.boss-entry.boss-entry-vcl .boss-entry-tag {
  color: #3b3fa8; background: #eff0ff;
}
.combo-card.boss-entry.boss-entry-vcl .boss-entry-flow { color: #3b3fa8; }
.combo-card.boss-entry.boss-entry-vcl .boss-entry-flow span {
  background: #f6f7ff; border-color: #dcdffb;
}
.combo-card.boss-entry.boss-entry-vcl .boss-entry-flow i { color: #b6bcec; }

/* ⚠️ 备注（2026-10-12 核查发现，**不影响本文件**）：
   `boss-entry-pmv`（「照片AI唱歌」大卡在 index.html 上挂的变体类）
   在**全项目没有任何 CSS 定义** —— 该卡目前吃的是 coach.css 骨架的默认橙色。
   已上报老板待定，未擅自补（本轮上线 diff 只允许等于本次意图）。 */

/* ============================================================================
   声音提取（视频/音频 → MP3）· 2026-10-19
   ---------------------------------------------------------------------------
   🔴 大卡配色变体：.boss-entry-vce（第三张卡，与 vc / vcl 同级）
      —— 类名唯一（vea 系已全项目排查过未被占用），作用域锁在
      `.combo-card.boss-entry.boss-entry-vce`，**不吃别人样式**。
   🔴 子页样式全部锁在 `#sub-extractaudio` 里（裸类名跨功能吃样式），
      且 `#sub-extractaudio` 只在 .active 时显示 ⇒ 基础态天然不渲染，
      不用再写 `[hidden]{display:none!important}` 补丁。
   ========================================================================== */

/* ------------------------------- 卡片（声音板块第三张大卡） ------------------------------- */
.combo-card.boss-entry.boss-entry-vce .boss-entry-tag { color: #0d7a5f; background: #e6f7f1; }
.combo-card.boss-entry.boss-entry-vce .boss-entry-flow { color: #0d7a5f; }
.combo-card.boss-entry.boss-entry-vce .boss-entry-flow span { background: #f0fbf7; border-color: #c9ece0; }
.combo-card.boss-entry.boss-entry-vce .boss-entry-flow i { color: #7fd3ba; }
.combo-card.boss-entry.boss-entry-vce .boss-entry-glow {
  background: radial-gradient(60% 60% at 50% 0%, rgba(13, 122, 95, .22), transparent 70%);
}

/* ------------------------------- 子页：声音提取 ------------------------------- */
#sub-extractaudio .ea-wrap { padding: 4px 0 8px; }
#sub-extractaudio .ea-card {
  background: #fff; border: 1px solid #e8eaf2; border-radius: 16px;
  padding: 18px 16px; text-align: center;
}
#sub-extractaudio .ea-ico { font-size: 40px; line-height: 1; margin-bottom: 6px; }
#sub-extractaudio .ea-h { font-size: 17px; font-weight: 700; color: #1c2033; }
#sub-extractaudio .ea-sub { font-size: 13px; color: #6b7089; margin-top: 5px; line-height: 1.6; }

#sub-extractaudio .ea-drop {
  display: block; margin: 14px 0 12px; padding: 22px 12px; cursor: pointer;
  border: 1.5px dashed #c9cee0; border-radius: 14px; background: #fafbff;
  transition: border-color .15s, background .15s;
}
#sub-extractaudio .ea-drop:hover,
#sub-extractaudio .ea-drop.over { border-color: #0d7a5f; background: #f2fbf8; }
#sub-extractaudio .ea-dtext { font-size: 14px; color: #4a4f66; line-height: 1.7; }
#sub-extractaudio .ea-dtext span { font-size: 12px; color: #9aa0b6; }
#sub-extractaudio .ea-picked { text-align: left; }
#sub-extractaudio .ea-pname {
  font-size: 14px; font-weight: 600; color: #1c2033; word-break: break-all; line-height: 1.5;
}
#sub-extractaudio .ea-pmeta { font-size: 12px; color: #8a90a6; margin-top: 3px; }

#sub-extractaudio .ea-opts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
#sub-extractaudio .ea-opt { font-size: 12px; color: #6b7089; display: flex; align-items: center; gap: 5px; }
#sub-extractaudio .ea-opt select {
  font-size: 12px; color: #1c2033; padding: 5px 7px;
  border: 1px solid #dfe2ee; border-radius: 8px; background: #fff; max-width: 46vw;
}

#sub-extractaudio .ea-go {
  width: 100%; max-width: 420px; padding: 12px 16px; font-size: 15px; font-weight: 600;
  color: #fff; background: #0d7a5f; border: 0; border-radius: 11px; cursor: pointer;
}
#sub-extractaudio .ea-go:disabled { background: #c3c8d8; cursor: not-allowed; }
#sub-extractaudio .ea-go:not(:disabled):hover { background: #0a6650; }

#sub-extractaudio .ea-clear {
  margin-top: 10px; padding: 7px 14px; font-size: 13px; color: #6b7089;
  background: #fff; border: 1px solid #e2e5ef; border-radius: 9px; cursor: pointer;
}

#sub-extractaudio .ea-player { margin-top: 16px; }
#sub-extractaudio .ea-player video,
#sub-extractaudio .ea-player audio { width: 100%; max-height: 46vh; border-radius: 11px; background: #000; }
#sub-extractaudio .ea-player audio { background: #f4f5fa; }
#sub-extractaudio .ea-tip { font-size: 12px; color: #9aa0b6; margin-top: 7px; }

#sub-extractaudio .ea-note { font-size: 12px; color: #9aa0b6; text-align: center; margin-top: 12px; line-height: 1.6; }

/* toast：与声音克隆的 vcl-toast 同款位置（贴在子页底部），独立类名不借用 */
#sub-extractaudio .ea-toast {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%);
  max-width: 82vw; padding: 10px 16px; font-size: 13px; color: #fff;
  background: rgba(24, 28, 44, .92); border-radius: 10px; z-index: 9990; text-align: center;
}
#sub-extractaudio .ea-toast[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   声音提取 · 浅橙（第三张头牌卡，与翠绿「AI配音」/靛蓝「声音克隆」区分开）
   ⚠️ 本段是 2026-10-19 补的：卡片 HTML 当天就加了，但**这段配色样式漏写**，
      导致 `.boss-entry-vce .boss-entry-ico img` 没有任何尺寸约束 ——
      3D 图标原图是 256×256，于是直接铺满整个图标容器，糊成一大块（老板截图报「破图标」）。
      凡是给 .boss-entry-ico 里的 img，都必须显式限死 width/height。
   --------------------------------------------------------------------------- */
.combo-card.boss-entry.boss-entry-vce {
  background: linear-gradient(135deg, #fffdf9 0%, #ffeedd 100%);
  border-color: #fbd9b0;
}
@media (hover: hover) {
  .combo-card.boss-entry.boss-entry-vce:hover { box-shadow: 0 10px 26px rgba(217, 119, 6, 0.16); }
}
.combo-card.boss-entry.boss-entry-vce .boss-entry-glow {
  background: radial-gradient(circle, rgba(249, 115, 22, 0.18) 0%, rgba(249, 115, 22, 0) 70%);
}
.combo-card.boss-entry.boss-entry-vce .boss-entry-ico {
  background: linear-gradient(135deg, #ffffff 0%, #ffe8cc 100%);
  border: 1px solid #fbd9b0;
  box-shadow: 0 6px 14px rgba(217, 119, 6, 0.14);
}
.combo-card.boss-entry.boss-entry-vce .boss-entry-ico img {
  width: 40px; height: 40px; display: block;
}
.combo-card.boss-entry.boss-entry-vce .boss-entry-tag {
  color: #b45309; background: #fff4e6;
}
.combo-card.boss-entry.boss-entry-vce .boss-entry-flow { color: #b45309; }
.combo-card.boss-entry.boss-entry-vce .boss-entry-flow span {
  background: #fffaf3; border-color: #f6dcae;
}
.combo-card.boss-entry.boss-entry-vce .boss-entry-flow i { color: #f0b478; }

/* ---------------------------------------------------------------------------
   热门徽章 · 声音提取卡（2026-10-20）
   与图片数字人卡同一套视觉（红橙渐变），**定位规则必须为本卡单独写一遍** ——
   只写 .boss-entry-hot 的话它只是普通 span，会挤在 flex 布局里而不是贴在右上角。
   -------------------------------------------------------------------------- */
.combo-card.boss-entry.boss-entry-vce {
  position: relative;   /* 兜底：确保护照定位以卡片为参照 */
}
.combo-card.boss-entry.boss-entry-vce .boss-entry-hot {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(135deg, #ff4d4f 0%, #ff7a45 100%);
  box-shadow: 0 3px 10px rgba(255, 77, 79, .35);
}