/* =========================================================================
   转剧中心网页试用页 · 左右分栏一屏布局
   全部走 styles.css 的主题令牌（--bg / --ink / --orange ...），深浅通吃。
   左栏输入、右栏输出，各自独立滚动，页面本身不整屏滚动。
   ========================================================================= */

/* 🔴 关键：本页很多元素用 display:flex 布局，会盖过 HTML 的 hidden 属性。
   强制让 hidden 永远等于隐藏，否则 loading/暂停按钮/结果区会一直显示。 */
[hidden] { display: none !important; }

/* 让页面高度锁定到视口，交给左右两栏各自内滚 */
.trial-body { overflow: hidden; }
.trial-stage {
  position: fixed; left: 0; right: 0; top: 68px; bottom: 0;
  padding: 18px 26px 20px;
}
.trial-split {
  display: grid;
  /* 左栏更宽敞，右栏吃满全部剩余宽度 → 沾满屏幕 */
  grid-template-columns: minmax(560px, 760px) minmax(0, 1fr);
  /* 🔴 显式让唯一一行铺满整个高度，否则行按内容高度收缩，
     导致左栏不满高、底栏浮起、上下留白 */
  grid-template-rows: minmax(0, 1fr);
  gap: 22px; height: 100%; width: 100%;
}

/* ---------- 两栏通用卡片 ---------- */
.tpane {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--card-shadow);
  min-height: 0; overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.tpane-input .tpane-inner {
  padding: 18px 28px 8px; overflow-y: auto; overflow-x: hidden; min-height: 0;
  display: flex; flex-direction: column; flex: 1;
}

/* 左栏固定底栏：操作按钮常驻，不随内容滚动被挡 */
.tpane-foot {
  flex: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 26px; border-top: 1px solid var(--line);
  background: var(--bg-card);
}
.tpane-foot .run-main { flex: 0 0 auto; }
.foot-btn { padding: 12px 18px; font-size: 14px; }
.foot-btn .fbi { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.tpane-foot .quota-note { margin-left: auto; }

/* ---------- 头部 ---------- */
.trial-head { margin-bottom: 12px; }
.trial-head .kicker {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  color: var(--orange-lt); padding: 5px 13px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(226,97,26,0.07); margin-bottom: 10px;
}
.trial-head h1 { font-family: var(--serif); font-weight: 900; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.12; }
.trial-head h1 .hl {
  background: linear-gradient(120deg, var(--orange-lt), var(--orange), var(--orange-dk));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- 注册充值引导条 ---------- */
.reg-banner {
  display: flex; align-items: center; gap: 14px; margin-bottom: 14px;
  padding: 12px 16px; border-radius: 14px; cursor: pointer; text-decoration: none;
  background: linear-gradient(120deg, rgba(226,97,26,0.14), rgba(226,97,26,0.04));
  border: 1px solid var(--orange);
  transition: transform .18s ease, box-shadow .18s ease;
}
.reg-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -14px var(--glow); }
.reg-ic {
  flex: none; width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--orange), var(--orange-dk));
}
.reg-ic svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.reg-txt { flex: 1 1 auto; min-width: 0; }
.reg-txt b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-txt small { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-go {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--orange-dk));
  white-space: nowrap;
}
.reg-arrow { width: 15px; height: 15px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.reg-banner:hover .reg-arrow { transform: translateX(3px); }

/* ---------- 表单字段 ---------- */
.field { margin-bottom: 13px; }
.field > label {
  display: flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px;
}
.field .fi { width: 16px; height: 16px; stroke: var(--orange); stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.field-hint { font-size: 12px; color: var(--ink-faint); margin-top: 6px; line-height: 1.5; }
.field-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }

input[type="text"], input[type="password"], input[type="number"], textarea {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 14px; transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus {
  outline: none; border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(226,97,26,0.15);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* 小说输入框吃掉左栏剩余高度 */
/* 小说输入框吃掉左栏全部剩余高度：屏幕高就变高、屏幕矮就收缩，永不溢出 */
.field-novel {
  flex: 1 1 auto; display: flex; flex-direction: column;
  /* 小说框是绝对主角：给一个多行「地板高度」，屏幕高时继续长高；
     即使上方控件挤到需要滚动，小说框也永远是一大片可写区，绝不塌成一条线 */
  min-height: 220px; margin-bottom: 8px;
}
.field-novel textarea {
  flex: 1 1 auto; resize: none; line-height: 1.75; min-height: 160px;
}

/* ---------- 模型胶囊 ---------- */
.model-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mpill {
  position: relative; cursor: pointer; font-size: 12.5px; font-weight: 500;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
  background: var(--bg); border: 1.5px solid var(--line); color: var(--ink-mute);
  transition: border-color .18s, color .18s, background .18s, transform .12s;
}
.mpill:hover { transform: translateY(-1px); border-color: var(--orange-lt); color: var(--ink); }
.mpill.is-active {
  border-color: var(--orange); color: var(--orange);
  background: rgba(226,97,26,0.09); font-weight: 700;
}
.mpill .rec-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 5px; vertical-align: middle;
}
.mpill .rec-dot.r5 { background: #2ecc71; }
.mpill .rec-dot.r4 { background: #7fce4b; }
.mpill .rec-dot.r3 { background: #f0a020; }
.mpill .rec-dot.r2 { background: #e07b39; }

/* hover 弹窗 */
.mpop {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  width: 216px; padding: 13px 15px; border-radius: 12px; z-index: 30;
  background: var(--bg-card); border: 1px solid var(--line);
  box-shadow: 0 20px 44px -18px rgba(0,0,0,0.5), 0 0 0 1px var(--line-soft);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
  text-align: left;
}
.mpill:hover .mpop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.mpop::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--bg-card);
}
.mpop .mp-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.mpop .mp-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-top: 6px; }
.mpop .mp-row span { color: var(--ink-mute); }
.mpop .mp-stars { color: var(--orange); letter-spacing: 1px; }
.mpop .mp-price { font-family: var(--mono); font-weight: 600; }
.mpop .mp-price.p-low { color: #2ecc71; }
.mpop .mp-price.p-mid { color: #f0a020; }
.mpop .mp-price.p-high { color: #e0564b; }
.mpop .mp-price.p-top { color: #c0392b; font-weight: 700; }
.mpop .mp-tip { font-size: 11.5px; color: var(--ink-faint); margin-top: 9px; line-height: 1.5; border-top: 1px solid var(--line-soft); padding-top: 8px; }

/* ---------- 剧本格式选择器（与软件端 1:1） ---------- */
.style-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.style-opt {
  text-align: left; cursor: pointer; padding: 13px 15px; border-radius: 13px;
  background: var(--bg); border: 1.5px solid var(--line); color: var(--ink);
  transition: border-color .2s, background .2s, transform .15s;
}
.style-opt:hover { transform: translateY(-2px); border-color: var(--orange-lt); }
.style-opt b { display: block; font-size: 14px; font-weight: 700; }
.style-opt small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; font-family: var(--mono); }
.style-opt.is-active {
  border-color: var(--orange); background: rgba(226,97,26,0.08);
  box-shadow: 0 0 0 3px rgba(226,97,26,0.12);
}
.style-opt.is-active small { color: var(--orange); }

/* ---------- 操作区 ---------- */
.btn-lg { padding: 13px 32px; font-size: 15.5px; }
.quota-note { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

/* 小说框行内「清空」小按钮 */
.field > label { justify-content: flex-start; }
.mini-clear {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; color: var(--ink-faint); cursor: pointer;
  background: transparent; border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; transition: all .16s;
}
.mini-clear:hover { color: #e0564b; border-color: rgba(220,60,50,0.4); background: rgba(220,60,50,0.06); }
.mini-clear svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.form-err {
  margin-top: 14px; padding: 11px 15px; border-radius: 10px;
  background: rgba(220,60,50,0.10); border: 1px solid rgba(220,60,50,0.35);
  color: #e0564b; font-size: 13.5px;
}
.btn[disabled] { opacity: .55; pointer-events: none; }
/* =========================================================================
   右栏：输出
   ========================================================================= */
.tpane-output { background: var(--bg-soft); }

/* ---------- 空态 ---------- */
.out-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px; color: var(--ink-faint);
}
.out-empty .oe-ic { width: 54px; height: 54px; stroke: var(--ink-faint); stroke-width: 1.3; fill: none; opacity: .5; margin-bottom: 18px; }
.out-empty h3 { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--ink-mute); }
.out-empty p { font-size: 13.5px; margin-top: 10px; line-height: 1.7; }

/* ---------- 加载遮罩 ---------- */
.loading {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
}
.spinner {
  width: 46px; height: 46px; margin-bottom: 22px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--orange);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: 17px; font-weight: 700; color: var(--ink); }
.loading-sub { font-size: 13px; color: var(--ink-faint); margin-top: 8px; max-width: 320px; }

/* ---------- 结果区 ---------- */
.results { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.results-bar {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px;
  border-bottom: 1px solid var(--line); flex: none;
}
.result-tabs {
  display: flex; gap: 7px; overflow-x: auto; flex: 1; padding-bottom: 2px;
  scrollbar-width: thin;
}
.result-tabs::-webkit-scrollbar { height: 5px; }
.result-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.rtab {
  cursor: pointer; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--btn-ghost-bg); color: var(--ink-mute);
  border: 1px solid var(--line); transition: all .18s; white-space: nowrap; flex: none;
}
.rtab:hover { color: var(--ink); border-color: var(--orange-lt); }
.rtab.is-active { background: linear-gradient(135deg, var(--orange), var(--orange-dk)); color: #fff; border-color: transparent; }
.rtab.rtab-locked { opacity: .6; cursor: default; }
.rtab.rtab-locked::before { content: '🔒 '; }
/* 逐集流式：该集正在生成时 tab 显示脉冲圆点 */
.rtab.rtab-busy::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: currentColor; vertical-align: middle;
  animation: rtab-pulse 1s ease-in-out infinite;
}
@keyframes rtab-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* 逐集流式：剧本未到达时的占位文案 */
.ep-pending {
  color: var(--ink-faint); font-size: 13.5px; padding: 16px;
  background: var(--btn-ghost-bg); border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
}
.ep-pending::before {
  content: ''; width: 15px; height: 15px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); border-top-color: var(--orange);
  animation: ep-spin .7s linear infinite;
}
@keyframes ep-spin { to { transform: rotate(360deg); } }

.export-btn { flex: none; padding: 8px 15px; font-size: 13px; }
.export-btn .ei { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* 右栏内滚区 */
.result-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px; min-height: 0; }
.result-panel { display: none; }
.result-panel.is-active { display: block; animation: fade-in .3s ease; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 集纲卡 */
.ep-outline {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 12px;
}
.ep-outline h4 { font-family: var(--serif); font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.ep-outline .ep-tag { font-family: var(--mono); font-size: 11px; color: var(--orange); letter-spacing: .08em; }
.ep-outline p { color: var(--ink-mute); font-size: 14px; margin-top: 7px; }
.ep-outline .ep-meta { margin-top: 11px; display: grid; gap: 6px; }
.ep-outline .ep-meta span { font-size: 13px; color: var(--ink); line-height: 1.6; }
.ep-outline .ep-meta b { color: var(--orange); font-weight: 500; margin-right: 6px; }

/* 剧本正文 */
.script-scene { margin-bottom: 22px; }
.script-scene .scene-h {
  font-family: var(--mono); font-size: 12.5px; color: var(--orange); letter-spacing: .04em;
  padding: 7px 11px; background: rgba(226,97,26,0.07); border-radius: 8px;
  border-left: 3px solid var(--orange); margin-bottom: 11px;
}
.script-scene .scene-body {
  white-space: pre-wrap; font-size: 14px; line-height: 1.9; color: var(--ink);
  font-family: var(--sans);
}
.raw-md {
  white-space: pre-wrap; font-family: var(--mono); font-size: 12.5px; line-height: 1.8;
  color: var(--ink-mute); background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px;
}
.ep-err { color: #e0564b; font-size: 13.5px; padding: 15px; background: rgba(220,60,50,0.08); border-radius: 10px; }

/* ---------- VIP 解锁 ---------- */
.vip-cta {
  margin-top: 28px; text-align: center; padding: 36px 28px; border-radius: 18px;
  background: var(--bg-card); border: 1px dashed var(--orange);
  position: relative; overflow: hidden;
}
.vip-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(226,97,26,0.12), transparent 65%);
  pointer-events: none;
}
.vip-ic { width: 32px; height: 32px; stroke: var(--orange); stroke-width: 1.6; fill: none; margin-bottom: 12px; }
.vip-cta h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; }
.vip-cta p { color: var(--ink-mute); font-size: 14px; margin: 11px auto 20px; max-width: 420px; }

/* =========================================================================
   响应式：窄屏回退为上下堆叠 + 恢复整页滚动
   ========================================================================= */
@media (max-width: 900px) {
  .trial-body { overflow: auto; }
  .trial-stage { position: static; padding: 16px; }
  .trial-split { grid-template-columns: 1fr; height: auto; gap: 16px; }
  .tpane { overflow: visible; }
  .tpane-input .tpane-inner { overflow: visible; }
  .tpane-output { min-height: 60vh; }
  .field-row, .style-picker { grid-template-columns: 1fr; }
  .field-novel textarea { min-height: 180px; }
}