* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: linear-gradient(160deg, #141a2e 0%, #1c1533 100%);
  color: #eef1f8;
  min-height: 100vh;
}
header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: sticky; top: 0; backdrop-filter: blur(12px); z-index: 20;
}
.title { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
.subtitle { color: #7f8aa9; font-size: 12px; margin-top: 3px; }
.status { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  font-size: 13px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.08); color: #9aa4c0;
}
.pill.ok { background: rgba(46,204,113,.18); color: #5ee6a0; }
.pill.bad { background: rgba(231,76,60,.18); color: #ff8f84; }
.pill.voice { background: rgba(255,193,7,.15); color: #ffd76b; }
main { max-width: 1180px; margin: 24px auto; padding: 0 18px 80px; display: grid; gap: 18px; }
.panel {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px; padding: 20px 22px;
}
h2 { font-size: 17px; margin-bottom: 6px; }
h1 { font-size: 26px; margin-top: 6px; }
.hero { display:flex; align-items:center; justify-content:space-between; background:linear-gradient(120deg,rgba(91,140,255,.13),rgba(255,196,77,.06)); }
.eyebrow { color:#6f9bff; font-size:11px; letter-spacing:2px; font-weight:700; }
.flow { display:flex; gap:10px; align-items:center; color:#aab4cf; font-size:13px; }
.flow span { padding:8px 12px; background:rgba(255,255,255,.06); border-radius:9px; }
.flow i { color:#ffc44d; font-style:normal; }
.section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.section-head>div { display:flex; align-items:center; gap:10px; }
.section-head h2 { margin:0; }
.step-no { color:#5b8cff; font-weight:800; font-size:12px; border:1px solid rgba(91,140,255,.45); padding:4px 6px; border-radius:6px; }
.cost { color:#97a2c0; font-size:11px; padding:5px 9px; border-radius:99px; background:rgba(255,255,255,.05); }
.cost.save { color:#5ee6a0; background:rgba(46,204,113,.1); }
.hint { font-size: 13px; color: #9aa4c0; margin-bottom: 14px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 10px 0; }
input[type=text] {
  flex: 1; min-width: 260px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.25);
  color: #eef1f8; font-size: 14px;
}
textarea { font-family:inherit; }
.field { display:grid; gap:6px; margin-top:12px; flex:1; }
.field label { color:#8f9ab9; font-size:12px; font-weight:600; }
.field input,.field textarea { width:100%; padding:11px 13px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.24); color:#eef1f8; font-size:14px; line-height:1.55; resize:vertical; }
button {
  padding: 11px 18px; border: none; border-radius: 10px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #0f1424;
}
button.primary { background: #5b8cff; }
button.primary:hover { background: #6f9bff; }
button.gold { background: #ffc44d; }
button.ghost { background: rgba(255,255,255,.1); color: #dbe2f5; }
button:disabled { opacity: .45; cursor: not-allowed; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; margin-top: 6px; }
.cards.compact { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin:12px 0; }
.topic-card { display:grid; text-align:left; gap:6px; color:#eef1f8; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1); }
.topic-card small { color:#5b8cff; }.topic-card b { line-height:1.4; }.topic-card span { color:#8994b2; font-size:11px; line-height:1.45; font-weight:400; }
.topic-card.selected { border-color:#ffc44d; background:rgba(255,196,77,.07); }
.card {
  background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 14px; cursor: pointer; transition: .15s;
}
.card:hover { transform: translateY(-2px); }
.card.selected { border-color: #ffc44d; background: rgba(255,196,77,.08); }
.card .style { font-weight: 700; color: #ffc44d; margin-bottom: 8px; }
.card .body { font-size: 13px; color: #c8d0e6; line-height: 1.55; max-height: 180px; overflow: auto; }
.card .meta { font-size: 12px; color: #8b95b5; margin-top: 8px; }
.topic-card { border-left: 4px solid #5b8cff; }
.topic-card .why { font-size: 12px; color: #8b95b5; margin-top: 6px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 12px; }
.media-grid img { width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); }
.settings-grid { display:grid; grid-template-columns:180px 220px 1fr; gap:14px; align-items:end; }
.settings-grid .action { justify-self:start; margin-bottom:0; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.editor { margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); }
.editor-head,.output-head { display:flex; align-items:center; justify-content:space-between; margin:18px 0 8px; }
.editor-head h3,.output-head h3 { font-size:14px; color:#ffc44d; }
.tiny { padding:7px 10px; font-size:12px; }
.scene-editor { display:grid; gap:9px; }
.scene-row { display:grid; grid-template-columns:45px 1fr 2fr 150px 36px; gap:9px; align-items:end; padding:10px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); border-radius:12px; }
.scene-row .field { margin:0; }.scene-index { align-self:center; color:#5b8cff; font-weight:800; }.remove-scene { color:#ff8f84; background:transparent; padding:8px; font-size:22px; }
.action-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.batch-theme { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:14px 0 4px; padding:12px 14px; border-radius:11px; background:rgba(255,196,77,.06); border:1px solid rgba(255,196,77,.2); }
.batch-theme>div { display:grid; gap:3px; }.batch-theme b { color:#ffc44d; font-size:13px; }.batch-theme span { color:#8f9ab9; font-size:11px; }.batch-theme select { min-width:210px; }
.bundle-row { display:flex; align-items:center; gap:12px; margin:4px 0 14px; padding:12px 14px; border-radius:11px; background:rgba(46,204,113,.06); border:1px solid rgba(46,204,113,.18); }.bundle-row span { color:#8f9ab9; font-size:11px; }
.download-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; border-color:rgba(46,204,113,.24); background:linear-gradient(120deg,rgba(46,204,113,.08),rgba(91,140,255,.04)); }.download-panel h2 { margin:5px 0; }.download-panel p { color:#8f9ab9; font-size:12px; }.download-panel .bundle-row { margin:0; min-width:310px; }
.tool-button { min-height:92px; display:grid; text-align:left; align-content:center; gap:6px; color:#eef1f8; background:rgba(91,140,255,.09); border:1px solid rgba(91,140,255,.28); }
.tool-button:hover { background:rgba(91,140,255,.16); transform:translateY(-2px); }.tool-button b { font-size:15px; }.tool-button span { color:#8f9ab9; font-size:11px; font-weight:400; }
.prompt-list { display:grid; gap:8px; margin-top:12px; }.prompt-item { display:grid; grid-template-columns:36px 1fr; gap:10px; align-items:start; }.prompt-item b { color:#5b8cff; padding-top:10px; }.prompt-item textarea { width:100%; color:#dbe2f5; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.1); padding:10px; border-radius:9px; resize:vertical; }
.settings summary { cursor:pointer; color:#aab4cf; font-weight:700; }.settings[open] summary { margin-bottom:12px; color:#ffc44d; }
.guide-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px; }
.guide-grid article { display:grid; grid-template-columns:38px 1fr; gap:12px; padding:15px; border-radius:12px; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08); }
.guide-grid article>b { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; background:rgba(91,140,255,.14); color:#6f9bff; }
.guide-grid h3 { font-size:14px; margin-bottom:6px; }.guide-grid p { color:#adb6ce; font-size:12px; line-height:1.65; }.guide-grid em { display:block; color:#5ee6a0; font-size:11px; font-style:normal; margin-top:7px; }
.media-list { display: grid; gap: 8px; margin-top: 12px; }
.media-list audio { width: 100%; }
.media-list a { color: #6f9bff; font-size: 13px; }
#clone-msg { margin-top: 10px; font-size: 13px; color: #5ee6a0; }
#test-audio { margin-top: 10px; }
.error { color: #ff8f84 !important; }
.msg { font-size: 13px; color: #8b95b5; margin-top: 8px; }
.merged {
  background: rgba(255,196,77,.08); border: 1px solid rgba(255,196,77,.35);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  display: grid; gap: 6px;
}
.dur { font-size: 12px; color: #ffc44d; margin-right: 8px; }
select {
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.25); color: #eef1f8; font-size: 14px;
}
.usage { border-left: 4px solid #ffc44d; }
.steps { margin: 8px 0 0 18px; display: grid; gap: 8px; font-size: 14px; color: #c8d0e6; line-height: 1.6; }
.steps code { background: rgba(255,255,255,.1); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.hint-inline { font-size: 12px; color: #8b95b5; }
.final-block { margin-top: 14px; }
.final-block h3 { color: #ffc44d; font-size: 14px; margin-bottom: 8px; }
.final-block textarea {
  width: 100%; min-height: 170px; resize: vertical; padding: 12px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.3); color: #eef1f8; font-size: 14px; line-height: 1.7;
}
#final-msg { font-size: 13px; color: #5ee6a0; }
.overlay {
  position: fixed; inset: 0; background: rgba(10,12,24,.85); z-index: 99;
  display: none; align-items: center; justify-content: center;
}
.overlay.show { display: flex; }
.login-box {
  background: #1c2038; border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px; padding: 28px 32px; width: 320px;
  display: grid; gap: 14px; text-align: center;
}
.login-box h3 { color: #ffc44d; font-size: 18px; }
.login-box input { width: 100%; }
#login-msg { font-size: 13px; color: #ff8f84; min-height: 16px; }
@media(max-width:800px){header{align-items:flex-start;gap:12px}.hero{display:grid;gap:18px}.settings-grid,.two-col,.action-grid,.guide-grid{grid-template-columns:1fr 1fr}.scene-row{grid-template-columns:36px 1fr 36px}.scene-row .wide,.scene-row .theme{grid-column:2/3}.section-head{align-items:flex-start;gap:8px}.cost{max-width:150px;text-align:right}}
@media(max-width:520px){.settings-grid,.two-col,.action-grid,.guide-grid{grid-template-columns:1fr}.flow{flex-wrap:wrap}.status{display:none}.panel{padding:16px}.scene-row{grid-template-columns:30px 1fr 30px}}