/* ══════════════════════════════════════════════════════════
   v3.2 · 新建作品向导（双入口：上传剧本 / AI 生成）
   依赖 app.css 的「墨玉」变量，不重复定义色值
   ══════════════════════════════════════════════════════════ */

.launch-sec {
  margin: 22px 0 30px;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(1200px 200px at 8% -40%, rgba(166, 124, 61, .07), transparent 70%),
    var(--surface);
  box-shadow: var(--sh-1);
}

.launch-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.launch-title { margin: 0 0 5px; font-size: 19px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.launch-sub { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.6; }

/* ── 入口卡 ── */
.lm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lm-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 15px 13px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--ink-2);
  transition: border-color .16s, background .16s, transform .16s;
}
.lm-card:hover { border-color: var(--brand-line); background: var(--surface-3); }
.lm-card.on {
  border-color: var(--brand); background: linear-gradient(180deg, rgba(166, 124, 61, .1), rgba(166, 124, 61, .02));
  box-shadow: 0 0 0 1px var(--brand-line) inset;
}
.lm-ic {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand);
}
.lm-card.on .lm-ic { background: var(--brand); color: var(--brand-ink); }
.lm-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lm-txt b { font-size: 14px; color: var(--ink); font-weight: 600; }
.lm-txt span { font-size: 12px; color: var(--ink-3); line-height: 1.55; }
.lm-tags { position: absolute; right: 12px; top: 12px; display: flex; gap: 6px; }
.lm-tags em {
  font-style: normal; font-size: 10px; padding: 2px 6px; border-radius: 5px;
  color: var(--ink-3); background: rgba(255, 255, 255, .04); border: 1px solid var(--line);
}
.lm-card.on .lm-tags em { color: var(--brand-2); border-color: var(--brand-line); background: var(--brand-soft); }

/* ── 步骤 ── */
.lp-body { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.lp-empty {
  padding: 26px 4px; text-align: center; border: 1px dashed var(--line-2); border-radius: var(--r);
}
.lpe-t { font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.lpe-d { font-size: 12px; color: var(--ink-4); line-height: 1.6; }

.lp-step { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); overflow: hidden; }
.lp-step-h {
  display: flex; align-items: center; gap: 9px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .012);
}
.lp-no {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--brand); border: 1px solid var(--brand-line); border-radius: 5px; padding: 1px 5px;
}
.lp-step-h b { font-size: 13px; color: var(--ink); font-weight: 600; }
.lp-hint { font-size: 11.5px; color: var(--ink-4); margin-left: 4px; }
.lp-step-b { padding: 14px; display: flex; flex-direction: column; gap: 10px; }

/* 输入区 */
.lp-ta-wrap { border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); overflow: hidden; }
.lp-ta-wrap:focus-within { border-color: var(--brand-line); }
.lp-ta {
  width: 100%; border: 0; outline: 0; resize: vertical; padding: 12px 13px;
  background: transparent; color: var(--ink); font-size: 13px; line-height: 1.75;
  font-family: var(--sans); min-height: 120px;
}
.lp-ta::placeholder { color: var(--ink-4); }
.lp-ta-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.lp-count { font-size: 11.5px; color: var(--ink-4); font-family: var(--mono); }
.lp-file { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--jade); }
.lp-ta-bar .sp { flex: 1; }

/* 风格 */
.lp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.lp-tab {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border: 1px solid var(--line-2); border-radius: 999px; background: transparent;
  color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: all .15s;
}
.lp-tab em { font-style: normal; font-size: 10px; color: var(--ink-4); }
.lp-tab:hover { border-color: var(--brand-line); color: var(--ink); }
.lp-tab.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-2); }
.lp-tab.on em { color: var(--brand); }

.lp-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.lp-style {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 11px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  cursor: pointer; transition: all .15s;
}
.lp-style b { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.lps-k { font-size: 11px; color: var(--ink-4); line-height: 1.5; }
.lp-style:hover { border-color: var(--brand-line); }
.lp-style.on {
  border-color: var(--brand); background: var(--brand-soft);
}
.lp-style.on b { color: var(--brand-2); }
.lp-style.on .lps-k { color: var(--ink-3); }

/* 规格 */
.lp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lp-chip {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 11px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent;
  color: var(--ink-2); font-size: 12.5px; cursor: pointer; transition: all .15s;
}
.lp-chip em { font-style: normal; font-size: 10.5px; color: var(--ink-4); }
.lp-chip:hover { border-color: var(--brand-line); color: var(--ink); }
.lp-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }

.lp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-mode {
  text-align: left; padding: 12px 13px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface);
  transition: all .15s;
}
.lp-mode:hover { border-color: var(--brand-line); }
.lp-mode.on { border-color: var(--brand); background: var(--brand-soft); }
.lpm-top { display: flex; align-items: baseline; gap: 8px; }
.lpm-top b { font-size: 13px; color: var(--ink); }
.lpm-top em { font-style: normal; font-size: 11px; color: var(--brand); font-family: var(--mono); }
.lpm-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.6; margin: 6px 0 8px; }
.lpm-io { display: flex; flex-direction: column; gap: 4px; }
.lpm-io span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.lpm-io .ok { color: var(--jade); }
.lpm-io .warn { color: var(--warn); }
.lp-mode-note {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; color: var(--ink-3); line-height: 1.65;
  padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: var(--r-sm);
}
.lp-mode-note b { color: var(--ink); font-weight: 600; }

/* 预览 */
.lp-actions { display: flex; gap: 8px; }
.lp-prev { display: flex; flex-direction: column; gap: 12px; }
.lp-prev-empty { font-size: 12px; color: var(--ink-4); line-height: 1.7; }

.lpv { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.lpv-head {
  display: flex; align-items: flex-start; gap: 12px; justify-content: space-between;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(166, 124, 61, .05), transparent);
}
.lpv-title { font-size: 15px; font-weight: 620; color: var(--ink); }
.lpv-log { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.6; }
.lpv-style { font-size: 11px; color: var(--brand-2); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.lpv-style em {
  font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--brand-line); color: var(--brand);
}

.lpv-stats { display: grid; grid-template-columns: repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.lpv-stat { padding: 11px 8px; text-align: center; border-right: 1px solid var(--line); }
.lpv-stat:last-child { border-right: 0; }
.lpv-stat b { display: block; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lpv-stat span { font-size: 10.5px; color: var(--ink-4); }

.lpv-chars, .lpv-props { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.lpv-char {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border: 1px solid var(--line-2); border-radius: 6px; font-size: 11.5px; color: var(--ink-2);
}
.lpv-char b { color: var(--ink); font-size: 11.5px; }
.lpv-char em { font-style: normal; color: var(--brand); font-size: 10.5px; }
.lpv-char i { font-style: normal; color: var(--ink-4); font-size: 10.5px; }
.lpv-props-l { font-size: 10.5px; color: var(--ink-4); align-self: center; }
.lpv-prop { font-size: 11px; color: var(--ink-3); padding: 2px 7px; border-radius: 5px; background: rgba(255, 255, 255, .03); }

.lpv-eps { display: flex; flex-direction: column; }
.lpv-ep { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lpv-ep:last-child { border-bottom: 0; }
.lpv-ep-h { display: flex; align-items: baseline; gap: 8px; }
.lpv-ep-h b { font-size: 12.5px; color: var(--ink); }
.lpv-ep-t { font-size: 11.5px; color: var(--ink-3); }
.lpv-ep-h .sp { flex: 1; }
.lpv-ep-m { font-size: 11px; color: var(--ink-4); font-family: var(--mono); }
.lpv-scs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.lpv-sc {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2);
}
.lpv-sc i { font-style: normal; font-size: 11px; color: var(--ink-2); }
.lpv-sc em { font-style: normal; font-size: 10px; color: var(--ink-4); font-family: var(--mono); }
.lpv-warn { padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; background: rgba(166, 124, 61, .05); }
.lpv-warn div { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; color: var(--warn); line-height: 1.6; }

/* 费用 */
.lp-cost-wrap { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.lp-cost-h {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .012);
}
.lp-cost-h b { font-size: 12.5px; color: var(--ink); }
.lp-cost-note { font-size: 11px; color: var(--ink-4); }
.lp-cost { display: flex; flex-direction: column; }
.lc-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 76px auto; gap: 8px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid var(--line); font-size: 12px;
}
.lc-row:last-child { border-bottom: 0; }
.lc-row.opt { opacity: .82; }
.lc-n { color: var(--ink-2); }
.lc-u, .lc-q { color: var(--ink-4); font-size: 11px; font-family: var(--mono); }
.lc-p { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.lc-tag { font-size: 10px; color: var(--ink-4); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 5px; }
.lp-cost-sum { display: flex; flex-wrap: wrap; gap: 18px; padding: 11px 14px; border-top: 1px solid var(--line-2); background: rgba(255, 255, 255, .015); }
.lp-cost-sum div { display: flex; align-items: baseline; gap: 7px; }
.lp-cost-sum span { font-size: 11px; color: var(--ink-4); }
.lp-cost-sum b { font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-cost-sum b.brand { color: var(--brand); }
.lp-cost-tip, .lp-note {
  display: flex; align-items: flex-start; gap: 6px; padding: 9px 14px;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.6; border-top: 1px solid var(--line);
}
.lp-cost-tip { border-top: 0; }

/* 底部动作条 */
.lp-foot { margin-top: 14px; }
.lp-foot-in { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp-foot-note {
  display: inline-flex; align-items: flex-start; gap: 6px; max-width: 560px;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
}
.lp-foot-note svg { color: var(--jade); margin-top: 2px; }

/* ── 移动端 ── */
@media (max-width: 900px) {
  .launch-sec { padding: 16px 14px 14px; margin: 14px 0 22px; }
  .launch-head { flex-direction: column; gap: 10px; }
  .launch-title { font-size: 17px; }
  .lm-row { grid-template-columns: 1fr; }
  .lm-tags { position: static; margin-left: auto; }
  .lp-styles { grid-template-columns: 1fr 1fr; }
  .lp-modes { grid-template-columns: 1fr; }
  .lpv-stats { grid-template-columns: repeat(3, 1fr); }
  .lpv-stat:nth-child(3n) { border-right: 0; }
  .lpv-stat:nth-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .lc-row { grid-template-columns: 84px 1fr 70px; }
  .lc-tag { display: none; }
  .lp-foot-in { flex-direction: column; align-items: stretch; }
  .lp-foot-in .hbtn { width: 100%; justify-content: center; }
  .lp-ta { font-size: 16px; min-height: 150px; }
}

@media (max-width: 560px) {
  .lp-styles { grid-template-columns: 1fr; }
  .lpv-head { flex-direction: column; gap: 6px; }
  .lp-cost-sum { gap: 10px; }
  .lp-cost-sum div { flex: 1 1 calc(50% - 10px); }
}

/* ══════════════ v3.3 双 Agent 向导 ══════════════ */
.lp-auto {
  border: 1px dashed rgba(166, 124, 61, .55);
  color: #B98F4E;
}
.lp-auto.on {
  border-style: solid;
  background: rgba(166, 124, 61, .14);
}
.lp-chip-auto {
  border: 1px dashed rgba(166, 124, 61, .55);
  color: #B98F4E;
}
.lp-chip-auto.on {
  border-style: solid;
  background: rgba(166, 124, 61, .14);
}

/* 智能匹配结果卡 */
.lp-match {
  border: 1px solid rgba(166, 124, 61, .3);
  background: rgba(166, 124, 61, .07);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.lp-match .lpm-h {
  display: flex; align-items: center; gap: 7px;
  color: #B98F4E; font-weight: 700; font-size: 13px;
  margin-bottom: 8px;
}
.lp-match .lpm-reasons { display: flex; flex-direction: column; gap: 5px; }
.lp-match .lpm-reasons > div {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12.5px; color: #c9d3cc;
}
.lp-match .lpm-reasons svg { margin-top: 2px; flex: none; color: #4A7C59; }

/* 策略锁定态（后台关闭 / 等级不足） */
.lp-mode.locked, .lp-style.locked {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
}
.lp-mode .lpm-top em.lock {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-4);
}