/* 口播带货（超级编导） · 2026-11-01
 * ⚠️ 全部选择器带 #sub-selltalk 作用域，类名前缀 st-，不碰任何既有样式。
 * ========================================================================== */

/* ── 上传区 ─────────────────────────────────────────────────── */
#sub-selltalk .st-uprow { display: flex; gap: 10px; align-items: flex-start; }

#sub-selltalk .st-drop {
  position: relative;
  width: auto; height: 96px; flex: 1 1 0; min-width: 0;
  border: 1.5px dashed #f0c9a8; border-radius: 14px;
  background: #fffaf6;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  text-align: center; color: #b08a68; font-size: 12px; line-height: 1.4;
}
#sub-selltalk .st-drop:active { background: #fff2e8; }
#sub-selltalk .st-drop img { width: 100%; height: 100%; object-fit: cover; }
#sub-selltalk .st-plus { font-size: 22px; line-height: 1; color: #d8a67a; }

#sub-selltalk .st-updesc { margin-top: 10px; font-size: 12px; color: #9a7b62; line-height: 1.55; }
#sub-selltalk .st-updesc b { color: #6b4a2f; font-weight: 600; }

#sub-selltalk .st-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
#sub-selltalk .st-thumb { position: relative; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; }
#sub-selltalk .st-thumb img { width: 100%; height: 100%; object-fit: cover; }
#sub-selltalk .st-thumb-del {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
  font-size: 13px; line-height: 20px; padding: 0; cursor: pointer;
}
/* ── 「我的声音」格：三态（未传 / 复刻中 / 就绪） ── */
#sub-selltalk .st-vdrop { flex-direction: column; gap: 2px; }
#sub-selltalk .st-vdrop .st-plus { font-size: 20px; }
#sub-selltalk .st-vdrop small { display: block; font-size: 10px; color: #c09a78; margin-top: 2px; }
#sub-selltalk .st-vbusy {
  display: block; font-size: 12px; color: #d18b4a;
  animation: st-vblink 1.1s ease-in-out infinite;
}
@keyframes st-vblink { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
#sub-selltalk .st-vok {
  font-size: 20px; line-height: 1; color: #fff; background: #f0902f;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 3px;
}
#sub-selltalk .st-vdrop.done { border-style: solid; border-color: #f0a85a; background: #fff5ec; color: #b5713a; }

#sub-selltalk .st-actor-del {
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff;
  font-size: 13px; line-height: 20px; padding: 0; cursor: pointer; z-index: 2;
}

/* ── 选项胶囊 ───────────────────────────────────────────────── */
#sub-selltalk .st-group { margin-top: 14px; }
#sub-selltalk .st-group-t { font-size: 12.5px; color: #8a6a52; margin-bottom: 8px; font-weight: 500; }

/* ── 画面参数区：清晰度 / 比例 / 时长 收在一块（老板 2026-11-01：这几个参数放一块方便选）── */
#sub-selltalk .st-params {
  margin-top: 14px; padding: 14px 14px 8px;
  border: 1px solid #f3e3d4; border-radius: 14px; background: #fffdfb;
}
#sub-selltalk .st-params .st-group { margin-top: 0; margin-bottom: 10px; }
#sub-selltalk .st-params .st-group:last-child { margin-bottom: 2px; }

/* 时长模式：两段式，选中的填色（官方模型体验那张图就是这个形态） */
#sub-selltalk .st-seg { display: flex; gap: 10px; }
#sub-selltalk .st-segbtn {
  flex: 1 1 0; min-width: 0; height: 42px;
  border: 1px solid #f0d8c4; border-radius: 12px;
  background: #faf7f4; color: #8a6a52;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#sub-selltalk .st-segbtn.active {
  background: var(--primary); border-color: var(--primary);
  color: #fff; font-weight: 600;
}
/* 智能时长时滑块变灰不可拖（不是隐藏——用户要看得到"这条由脚本定"） */
#sub-selltalk .st-range.is-off { opacity: .35; pointer-events: none; }
#sub-selltalk .st-range-ends.is-off { opacity: .35; }

/* 比例：三张小卡，图标用纯 CSS 画（不引图片，避免再出 404 / 错版） */
#sub-selltalk .st-ratios { display: flex; gap: 6px; }   /* 六项（自动/16:9/4:3/1:1/3:4/9:16）要能一行放下 */
#sub-selltalk .st-ratio {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 9px 0 7px;
  border: 1px solid #f0d8c4; border-radius: 10px;
  background: #fff; color: #8a6a52;
  font-size: 11.5px; font-weight: 500; line-height: 1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#sub-selltalk .st-ratio-ico {
  display: block; margin: 0 auto 6px;
  border: 1.5px solid currentColor; border-radius: 2px; box-sizing: border-box;
}
/* 「自动」不接受固定形状：用虚线方框表示"按素材来" */
#sub-selltalk .st-ratio-auto { width: 18px; height: 18px; border-style: dashed; }
#sub-selltalk .st-ratio.active {
  border-color: var(--primary); background: #fff2e8;
  color: var(--primary); font-weight: 600;
}

/* ── 目标市场与语言：两个并排下拉 + 一个整宽下拉 + 画面预览 ── */
#sub-selltalk .st-req { color: #e07a3a; font-size: 11px; font-weight: 400; margin-left: 6px; }
#sub-selltalk .st-selrow { display: flex; gap: 10px; }
#sub-selltalk .st-sel {
  width: 100%; height: 46px; padding: 0 34px 0 14px;
  border: 1px solid #f0d8c4; border-radius: 12px;
  background-color: #fff;
  color: #5c4433; font-size: 14px; font-weight: 500;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1.5l5 5 5-5' stroke='%23b08a68' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
}
#sub-selltalk .st-selrow .st-sel { flex: 1 1 0; min-width: 0; }
#sub-selltalk .st-sel-wide { margin-top: 10px; }
#sub-selltalk .st-mktpv {
  margin-top: 10px; padding: 12px 14px;
  border: 1px dashed #f0d8c4; border-radius: 12px;
  background: #fffaf6; color: #8a6a52; font-size: 12.5px; line-height: 1.65;
}

/* ── 时长滑块（5~30 秒，替代原来的三档胶囊） ── */
#sub-selltalk .st-sec { color: #f0902f; font-size: 15px; font-weight: 700; margin: 0 1px; }
#sub-selltalk .st-sechint { float: right; font-size: 11px; color: #c09a78; font-weight: 400; }
#sub-selltalk .st-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 3px; outline: none;
  margin: 6px 0 4px;
  background: linear-gradient(90deg, #f0902f 0%, #f0902f var(--p, 40%), #f3e3d4 var(--p, 40%), #f3e3d4 100%);
}
#sub-selltalk .st-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2px solid #f0902f;
  box-shadow: 0 1px 3px rgba(0,0,0,.16); cursor: pointer;
}
#sub-selltalk .st-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid #f0902f; cursor: pointer;
}
#sub-selltalk .st-range-ends { display: flex; justify-content: space-between; font-size: 11px; color: #c9a98d; }

#sub-selltalk .st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#sub-selltalk .st-chip {
  border: 1px solid #f0d8c4; background: #fff; color: #8a6a52;
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; line-height: 1.2;
  cursor: pointer; transition: all .15s; text-align: left;
}
#sub-selltalk .st-chip small { display: block; font-size: 11px; color: #b09a86; margin-top: 3px; }
#sub-selltalk .st-chip.active { border-color: var(--primary); background: #fff2e8; color: var(--primary); font-weight: 600; }
#sub-selltalk .st-chip.active small { color: var(--primary); }

/* ── 文本输入 ───────────────────────────────────────────────── */
#sub-selltalk .st-ta {
  width: 100%; border: 1px solid #eee; border-radius: 12px;
  padding: 12px; font-size: 13px; line-height: 1.6; color: #333;
  background: #fff; resize: vertical; font-family: inherit;
}
#sub-selltalk .st-ta:focus { outline: none; border-color: var(--primary); background: #fffdfb; }
#sub-selltalk .st-ta::placeholder { color: #c3b8af; }

/* ── 编导主按钮 ─────────────────────────────────────────────── */
#sub-selltalk .st-director-btn {
  width: 100%; margin-top: 16px; border: 0; border-radius: 14px;
  padding: 15px 0; font-size: 15px; font-weight: 600; cursor: pointer;
  background: linear-gradient(135deg, #7c3aed, #a855f7); color: #fff;
}
#sub-selltalk .st-director-btn:disabled { opacity: .6; cursor: default; }
#sub-selltalk .st-stage {
  margin-top: 10px; padding: 12px; border-radius: 12px;
  background: #f5f3ff; color: #6d28d9; font-size: 12.5px; line-height: 1.6;
}

/* ── 脚本区 ─────────────────────────────────────────────────── */
#sub-selltalk .st-script-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
#sub-selltalk .st-script-badge {
  background: #f5f3ff; color: #7c3aed; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
}
#sub-selltalk .st-points { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8; color: #374151; }
#sub-selltalk .st-hook {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
  font-size: 13.5px; line-height: 1.6; font-weight: 500;
}

#sub-selltalk .st-shot {
  margin-top: 10px; padding: 12px 14px; border-radius: 12px;
  background: #fafafa; border: 1px solid #f0f0f0;
}
#sub-selltalk .st-shot-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#sub-selltalk .st-shot-no { font-size: 12px; font-weight: 700; color: #7c3aed; }
#sub-selltalk .st-shot-sec { font-size: 11px; color: #9ca3af; }
#sub-selltalk .st-shot-v { font-size: 13px; line-height: 1.65; color: #1f2937; }
#sub-selltalk .st-shot-c { margin-top: 4px; font-size: 12px; color: #6b7280; }
#sub-selltalk .st-shot-l { margin-top: 6px; font-size: 13px; line-height: 1.65; color: #9a3412; }

#sub-selltalk .st-vocount { display: block; text-align: right; font-size: 11.5px; color: #9a8b80; margin-top: 6px; }
#sub-selltalk .st-vocount.over { color: #dc2626; }

#sub-selltalk .st-risk {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: #fef2f2; color: #b91c1c; font-size: 12px; line-height: 1.6;
}

/* ── 分节小标题 ─────────────────────────────────────────────── */
#sub-selltalk .st-sub {
  margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: #6b4a2f;
  display: flex; align-items: center; gap: 8px;
}
#sub-selltalk .st-sub .st-mini {
  margin-left: auto; border: 0; background: none; color: #7c3aed;
  font-size: 12px; cursor: pointer; padding: 0;
}

/* ── 发布文案 ───────────────────────────────────────────────── */
#sub-selltalk .st-pub { font-size: 13px; line-height: 1.75; color: #374151; }
#sub-selltalk .st-pub-t { font-weight: 700; color: #111827; margin-bottom: 6px; }
#sub-selltalk .st-pub-tags { margin-top: 8px; color: #7c3aed; font-size: 12.5px; }

/* ── 结果视频 ───────────────────────────────────────────────── */
#sub-selltalk .st-video {
  width: 100%; border-radius: 14px; background: #000; display: block;
  max-height: 520px;
}
#sub-selltalk .st-result-info { margin-top: 10px; font-size: 12.5px; color: #6b7280; line-height: 1.6; }
#sub-selltalk .st-dl {
  display: block; text-align: center; margin-top: 12px;
  background: var(--primary); color: #fff; text-decoration: none;
  border-radius: 12px; padding: 13px 0; font-size: 14px; font-weight: 600;
}

#sub-selltalk .st-manual-link {
  background: none; border: 0; color: #9a7b62; font-size: 12.5px;
  text-decoration: underline; cursor: pointer; padding: 0;
}

#sub-selltalk .st-note { font-size: 11.5px; color: #9a8b80; line-height: 1.6; margin-top: 8px; }