:root{
  --brand:#1f8a70;
  --brand-dark:#15674f;
  --bg:#f4f7f6;
  --card:#ffffff;
  --line:#e3e9e7;
  --text:#1d2a26;
  --muted:#6b7a75;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.6; padding-bottom:48px;
}
header{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff; padding:22px 20px 24px; text-align:center;
}
header h1{margin:0;font-size:22px;letter-spacing:.5px}
header .sub{margin:8px 0 0;font-size:13px;opacity:.9}
main{max-width:1080px;margin:0 auto;padding:0 14px}

/* ---- 素材三栏 ---- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.phase{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;
  display:flex;flex-direction:column;min-width:0;
}
.phase h2{margin:0 0 10px;font-size:16px;display:flex;align-items:center;gap:8px}
.phase h2 i{width:9px;height:9px;border-radius:50%;background:var(--brand);display:inline-block}
.phase[data-phase="before"] h2 i{background:#e2725b}
.phase[data-phase="process"] h2 i{background:#e0a83b}
.phase[data-phase="after"] h2 i{background:var(--brand)}
.dropzone{
  border:2px dashed #cfdad6;border-radius:12px;background:#fbfdfc;
  min-height:104px;display:flex;align-items:center;justify-content:center;
  text-align:center;cursor:pointer;transition:.15s;padding:12px;
}
.dropzone span{font-size:13px;color:var(--muted)}
.dropzone em{font-size:12px;color:#9aa8a3;font-style:normal}
.dropzone:hover,.dropzone.over{border-color:var(--brand);background:#f0f8f5}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.thumb{position:relative;width:66px;height:66px;border-radius:9px;overflow:hidden;background:#000;flex:none}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb .rm{
  position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;
  background:rgba(0,0,0,.62);color:#fff;border:0;font-size:12px;line-height:18px;
  cursor:pointer;padding:0;text-align:center;
}
.thumb .tag{
  position:absolute;left:0;bottom:0;background:rgba(31,138,112,.92);color:#fff;
  font-size:10px;padding:1px 5px;border-top-right-radius:6px;
}
.phase .tip{font-size:12px;color:#9aa8a3;margin-top:8px;line-height:1.45}

/* ---- 音乐 ---- */
.music{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-top:16px;
}
.music-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.music-head h2{margin:0;font-size:16px}
.vol{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.vol b{color:var(--brand);font-size:14px}
.vol input[type=range]{width:170px;accent-color:var(--brand)}
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 10px}
.cat{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;
  font-size:13px;cursor:pointer;color:var(--text);transition:.15s;
}
.cat:hover{border-color:var(--brand);color:var(--brand)}
.cat.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:10px}
.trk{
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:#fff;
  display:flex;align-items:center;gap:10px;cursor:pointer;transition:.15s;
}
.trk:hover{border-color:var(--brand)}
.trk.on{border-color:var(--brand);background:#f0f8f5;box-shadow:inset 0 0 0 2px rgba(31,138,112,.12)}
.trk .nm{flex:1;min-width:0}
.trk .nm b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trk .nm s{display:block;text-decoration:none;font-size:12px;color:var(--muted)}
.play{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--brand);background:#fff;
  color:var(--brand);cursor:pointer;font-size:12px;line-height:1;flex:none;
}
.play:hover{background:var(--brand);color:#fff}
.hint{font-size:12px;color:#9aa8a3;margin:10px 0 0}

/* ---- 生成控制 ---- */
.controls{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}
#title{
  flex:1;min-width:220px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;
  font-size:15px;background:#fff;color:var(--text);outline:none;
}
#title:focus{border-color:var(--brand)}
#gen{
  padding:12px 30px;border:0;border-radius:11px;background:var(--brand);color:#fff;
  font-size:16px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;
}
#gen:hover{background:var(--brand-dark)}
#gen:disabled{background:#a9c4bb;cursor:not-allowed}
.status{font-size:13px;color:var(--muted)}

/* ---- 结果 ---- */
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.card h3{margin:0 0 8px;font-size:14px;font-weight:600}
.card video{width:100%;border-radius:10px;background:#000;display:block}
.card .meta{font-size:12px;color:var(--muted);margin:8px 0 0}
.card .dl{
  display:block;text-align:center;margin-top:10px;padding:9px;border-radius:9px;
  background:#eef6f3;color:var(--brand-dark);text-decoration:none;font-size:13px;font-weight:600;
}
.card .dl:hover{background:var(--brand);color:#fff}

/* ---- 发布设置 ---- */
.publish{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:16px;margin-top:18px;
}
.publish > h2{margin:0 0 4px;font-size:16px}
.publish h3{margin:0;font-size:14px;font-weight:600}
.title-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hint-inline{font-size:12px;color:#9aa8a3}
.hint-inline.danger{color:#c0392b}
.hint-inline.warn{color:#a06b00}
.hint-inline.ok{color:#1a7a58}
/* 标题长度行：提示 + 一键压缩按钮 */
.len-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px}
.len-row .hint-inline{flex:0 1 auto}
button.mini{
  padding:3px 9px;font-size:11.5px;line-height:1.5;border-radius:7px;
  border:1px solid #f0dcae;background:#fff8e8;color:#8a6210;cursor:pointer;transition:.15s;
}
button.mini:hover{background:#8a6210;color:#fff;border-color:#8a6210}

/* 平台卡片 */
.pf-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:10px;margin:12px 0 4px;
}
.pf-card{
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;background:#fff;transition:.15s;
}
.pf-card.on{border-color:var(--brand);background:#f6fbf9;box-shadow:inset 0 0 0 2px rgba(31,138,112,.10)}
.pf-top{display:flex;align-items:center;gap:7px;cursor:pointer;flex-wrap:wrap}
.pf-top input[type=checkbox]{accent-color:var(--brand);width:15px;height:15px;cursor:pointer}
.pf-top b{font-size:14px}
.pf-spec{font-size:12px;color:var(--muted);margin:6px 0 8px}
.pf-tip{font-size:11.5px;color:#9aa8a3;margin-top:7px;line-height:1.5}
.badge{
  font-size:10.5px;padding:2px 7px;border-radius:999px;white-space:nowrap;line-height:1.5;
}
.badge.warn{background:#fff4e0;color:#a06b00;border:1px solid #f2d9a8}
.badge.mute{background:#eef1f0;color:#74827d;border:1px solid #dfe5e3}
.bind{margin-top:2px}
.bind.on{background:#e6f4ee;border-color:#bfe2d3;color:#1a7a58;font-weight:600}

/* 案例信息 */
.case-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:14px 0 4px;
}
.case-row label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.case-row .lab-sub{color:#9aa8a3;font-size:11.5px}
.case-row select,.case-row input{
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;
  background:#fff;color:var(--text);outline:none;width:100%;
}
.case-row select:focus,.case-row input:focus{border-color:var(--brand)}

/* 平台单选（爆款标题 / 话题标签 共用同一「当前平台」） */
.pf-pick{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 2px}
.pf-pick .pf-chip{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 14px;
  font-size:13px;cursor:pointer;color:var(--text);transition:.15s;
}
.pf-pick .pf-chip:hover{border-color:var(--brand);color:var(--brand)}
.pf-pick .pf-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* 启动期错误横幅（脚本异常时不再静默失效） */
.boot-err{
  margin:0;padding:10px 16px;background:#fdecea;color:#a12b1c;border-bottom:1px solid #f3c9c2;
  font-size:13px;line-height:1.6;word-break:break-all;
}

/* 标题 */
.title-box,.topic-box{
  border-top:1px dashed var(--line);margin-top:14px;padding-top:14px;
}
.title-list{display:flex;flex-direction:column;gap:7px;margin:10px 0}
.title-cand{
  text-align:left;border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:9px 12px;font-size:14px;cursor:pointer;color:var(--text);transition:.15s;
  display:flex;align-items:center;gap:8px;width:100%;
}
.title-cand:hover{border-color:var(--brand)}
.title-cand.on{border-color:var(--brand);background:#f0f8f5;font-weight:600}
/* 候选行内的「已填入下方」标记：点选后立刻给出明确反馈 */
.title-cand .tc-txt{flex:1 1 auto;min-width:0;text-align:left}
.title-cand .tc-badge{
  flex:none;font-size:11px;font-weight:500;color:#1a7a58;background:#e3f3ec;
  border-radius:999px;padding:1px 7px;white-space:nowrap;
}
.title-cand .tc-badge:empty{display:none}
#finalTitle{transition:border-color .2s,box-shadow .2s}
/* 输入框被同步填充时闪一下，避免"点了没反应"的错觉 */
#finalTitle.flash{border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,138,112,.18)}
#finalTitle{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  font-size:15px;background:#fff;color:var(--text);outline:none;margin-top:4px;
}
#finalTitle:focus{border-color:var(--brand)}

/* 话题 */
.chips{margin:10px 0}
.topic-chips{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.chip{
  background:#eef6f3;color:var(--brand-dark);border:1px solid #d5e9e2;
  border-radius:999px;padding:3px 9px;font-size:12.5px;display:inline-flex;align-items:center;gap:5px;
}
.chip.fixed{background:var(--brand);color:#fff;border-color:var(--brand)}
.chip.fixed i{color:rgba(255,255,255,.75)}
.chip i{font-style:normal;cursor:pointer;color:#9aa8a3;font-size:13px;line-height:1}
.chip i:hover{color:#c0392b}
.topic-add{display:flex;gap:8px;margin-top:8px}
.topic-add input{
  flex:1;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;
  background:#fff;color:var(--text);outline:none;
}
.topic-add input:focus{border-color:var(--brand)}
.topic-ops{display:flex;align-items:center;gap:10px;margin-top:9px;flex-wrap:wrap}
button.ghost.sm{padding:7px 14px;font-size:12.5px}
button.ghost:disabled{opacity:.45;cursor:not-allowed}
button.ghost:disabled:hover{border-color:var(--line);color:var(--text)}
#copyTopics.flash-ok{background:#e6f5ef;border-color:var(--brand);color:var(--brand-dark)}
/* 新加的话题闪一下：让"添加成功"肉眼可见 */
.chip.flash{background:#d8f0e7;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,138,112,.18);animation:chipPop .35s}
@keyframes chipPop{0%{transform:scale(.88)}60%{transform:scale(1.07)}100%{transform:scale(1)}}
#extraTopic.shake{animation:shakeX .42s;border-color:#c0392b}
@keyframes shakeX{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* 发布包 */
.pack-row{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
button.primary{
  padding:11px 26px;border:0;border-radius:11px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:600;cursor:pointer;transition:.15s;white-space:nowrap;
}
button.primary:hover{background:var(--brand-dark)}
button.primary:disabled{background:#a9c4bb;cursor:not-allowed}
button.primary.sm{padding:7px 18px;font-size:13.5px;border-radius:9px}
button.ghost{
  padding:8px 15px;border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--text);font-size:13px;cursor:pointer;transition:.15s;
  text-decoration:none;display:inline-block;
}
button.ghost:hover,a.ghost:hover{border-color:var(--brand);color:var(--brand)}
a.ghost{
  padding:8px 15px;border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--text);font-size:13px;text-decoration:none;display:inline-block;transition:.15s;
}
button.ghost.danger{color:#c0392b;border-color:#f0d4cf}
button.ghost.danger:hover{background:#c0392b;color:#fff;border-color:#c0392b}

.packs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:16px}
.pack-card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px}
.pack-card h4{margin:0 0 8px;font-size:15px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pack-size{font-size:11.5px;color:#9aa8a3;font-weight:400}
.pack-acc{font-size:12px;color:var(--brand-dark);background:#f0f8f5;border-radius:8px;padding:6px 9px;margin-bottom:9px;word-break:break-all}
.pack-field{margin-bottom:9px}
.pack-field label{font-size:11.5px;color:#9aa8a3;display:block;margin-bottom:3px}
.pack-field label em.over{font-style:normal;color:#c0392b}
.pack-field label em.fit{font-style:normal;color:#1a7a58}
.pack-val{
  font-size:13.5px;border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  background:#fbfdfc;width:100%;line-height:1.55;
}
textarea.pack-val{resize:vertical;font-family:inherit}
.pack-val.tags{color:var(--brand-dark);word-break:break-word}
.pack-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.pack-btns .go{background:var(--brand);color:#fff;border-color:var(--brand)}
.pack-btns .go:hover{background:var(--brand-dark);color:#fff}
button.primary.up{background:#1a7a58}
button.primary.up:hover{background:#146046}
.pack-up-msg{margin-top:7px;line-height:1.6}
.pack-note{font-size:11.5px;color:#9aa8a3;margin-top:9px;line-height:1.5}
.pack-api{
  margin-top:8px;padding-top:8px;border-top:1px dashed #eef2f1;
  font-size:11px;color:#9aa8a3;display:flex;gap:7px;align-items:flex-start;flex-wrap:wrap;line-height:1.5;
}

/* 弹窗 */
.modal{
  position:fixed;inset:0;background:rgba(20,32,28,.5);z-index:99;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal[hidden]{display:none}
.modal-box{
  background:#fff;border-radius:14px;padding:18px;width:min(560px,100%);
  max-height:88vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.22);
}
.modal-box h3{margin:0 0 6px;font-size:16px}
.modal-box label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:5px;margin-top:10px}
.modal-box input{
  padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px;
  background:#fff;color:var(--text);outline:none;width:100%;
}
.modal-box input:focus{border-color:var(--brand)}

/* 绑定弹窗：分区 */
.bind-sec{border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin-top:12px;background:#fbfdfc}
.bind-sec-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13.5px}
.bind-sec-head .hint-inline{margin:0}
.bind-sec .hint{margin:7px 0 0}
.hint.warn{
  background:#fff8e8;border:1px solid #f0dcae;border-radius:9px;
  padding:8px 10px;color:#8a6210;
}
.modal-btns.left{justify-content:flex-start;margin-top:12px}
.modal-btns{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.badge.ok{background:#e6f4ee;color:#1a7a58;border:1px solid #bfe2d3}

@media (max-width:760px){
  .phases{grid-template-columns:1fr}
  header h1{font-size:19px}
  .vol input[type=range]{width:120px}
  .tracks{grid-template-columns:1fr 1fr}
  .pf-grid{grid-template-columns:1fr 1fr}
  .packs{grid-template-columns:1fr}
}