/* ============================================================
   聚创 · extra.css — 联调新增样式（仅追加，Token 全部引用 theme.css）
   ============================================================ */

/* ---------- 表单 ---------- */
.create-form { display: grid; gap: 14px; }
.field-label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 8px;
}
.field-label .req { color: var(--color-danger); margin-left: 2px; }

.seg-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.seg-btn {
  flex: 1 1 0;
  min-width: 72px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-muted-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seg-btn.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}
.seg-btn.is-paid {
  position: relative;
}
.seg-btn[disabled] { opacity: 0.5; }

.jc-input,
.jc-textarea {
  width: 100%;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-body);
  color: var(--color-text);
  padding: 11px 12px;
  font-family: var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}
.jc-input { min-height: 44px; }
.jc-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.jc-input:focus,
.jc-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.field-hint { font-size: var(--fs-micro); color: var(--color-faint-text); margin-top: 5px; }
.field-error { font-size: var(--fs-micro); color: var(--color-danger); margin-top: 5px; display: none; }
.field-error.is-show { display: block; }

.btn .btn-ic { display: inline-flex; margin-right: 5px; }
.btn[disabled] .spinner-dot { display: inline-block; }
.spinner-dot {
  display: none;
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: jc-spin 0.8s linear infinite;
  margin-right: 6px;
  vertical-align: -2px;
}
@keyframes jc-spin { to { transform: rotate(360deg); } }

/* ---------- 分镜内进度条 ---------- */
.shot-progress { margin-top: 4px; }
.shot-progress .progress { height: 6px; border-radius: 3px; background: #EDF0F3; overflow: hidden; }
.shot-progress .progress > span {
  display: block; height: 100%;
  border-radius: 3px;
  background: var(--color-primary-gradient);
  transition: width 0.3s ease;
}
.shot-progress .progress-msg {
  font-size: var(--fs-micro);
  color: var(--color-muted-text);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.shot-progress .progress-msg .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-warning); }

/* 分镜真实首帧图 */
.shot-thumb img,
.tl-thumb img,
.asset-thumb img,
.real-cover img {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.shot-thumb.is-real { background: var(--color-surface-2); }
.shot-thumb .badge-mini-state {
  position: absolute;
  left: 5px; bottom: 5px;
  z-index: 3;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.55);
  color: #fff;
}

/* 视频角标（已生视频） */
.shot-top .badge .dot-ic { display: inline-flex; vertical-align: -2px; margin-right: 2px; }

/* ---------- 黑色时间线：真实片段 ---------- */
.tl-clip .tl-thumb {
  position: relative;
}
.tl-clip.is-missing .tl-thumb {
  background: repeating-linear-gradient(-45deg, #262932 0 6px, #1B1E25 6px 12px);
}
.tl-clip.is-missing .tl-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  border-radius: inherit;
}
.tl-detail {
  margin: 12px var(--space-page) 0;
  display: grid;
  gap: 10px;
}
.tl-seg {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--color-cinema-surface);
  border: 1px solid var(--color-cinema-border);
}
.tl-seg .seg-thumb {
  flex: 0 0 64px;
  width: 64px; height: 44px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-cinema-surface-2);
}
.tl-seg .seg-body { flex: 1; min-width: 0; }
.tl-seg .seg-title {
  font-size: var(--fs-small);
  color: var(--color-cinema-text);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tl-seg .seg-line {
  font-size: var(--fs-micro);
  color: var(--color-cinema-muted);
  margin-top: 3px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tl-seg .seg-state {
  flex: 0 0 auto;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}
.seg-state.ready { background: rgba(47,184,110,0.18); color: #4ADE80; }
.seg-state.missing { background: rgba(242,72,62,0.16); color: #F87171; }

.tl-summary {
  margin: 12px var(--space-page) 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-cinema-surface);
  border: 1px solid var(--color-cinema-border);
  font-size: var(--fs-small);
  color: var(--color-cinema-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.tl-summary strong { color: var(--color-cinema-text); font-weight: 700; }

/* 真实成片播放器 */
.player video,
.player.is-real { background: #000; }
.player video {
  position: relative;
  z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
}
.player.is-real .play-big { display: none; }

/* 导出进度卡 */
.export-progress {
  margin: 12px var(--space-page) 0;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.export-progress h4 { font-size: var(--fs-card-title); margin-bottom: 8px; display:flex; align-items:center; gap:6px; }
.export-progress .progress { height: 7px; border-radius: 4px; background: #EDF0F3; overflow: hidden; }
.export-progress .progress > span { display:block; height:100%; border-radius:4px; background: var(--color-primary-gradient); transition: width .3s; }
.export-progress .ep-msg { font-size: var(--fs-small); color: var(--color-muted-text); margin-top: 8px; line-height: 1.5; }
.export-progress.is-failed h4 { color: var(--color-danger); }
.export-progress .missing-list { margin-top: 8px; display: grid; gap: 4px; }
.export-progress .missing-list span {
  font-size: var(--fs-micro);
  color: #B4541A;
  background: var(--color-warning-soft);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}

/* 历史导出 */
.export-history { padding: 14px var(--space-page) 0; display: grid; gap: 10px; }
.export-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  min-height: 44px;
}
.export-row .er-ic {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.export-row .er-body { flex: 1; min-width: 0; }
.export-row .er-title { font-size: var(--fs-body); font-weight: 600; color: var(--color-text); }
.export-row .er-sub { font-size: var(--fs-micro); color: var(--color-muted-text); margin-top: 2px; }
.export-row .er-open {
  flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  color: var(--color-primary-strong);
}
.export-row.is-failed .er-ic { background: var(--color-danger-soft); color: var(--color-danger); }

.block-title {
  font-size: var(--fs-small);
  color: var(--color-muted-text);
  font-weight: 600;
  padding: 18px var(--space-page) 0;
}

/* ---------- 资产页 ---------- */
.project-context {
  margin: 12px var(--space-page) 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: #8A5A12;
  font-size: var(--fs-small);
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-context strong { color: var(--color-text); }
.project-context a { margin-left: auto; color: var(--color-primary-strong); font-weight: 700; min-height:44px; display:inline-flex; align-items:center; }

.asset-card .gen-master-btn { margin-top: 8px; width: 100%; }
.asset-card .master-badge {
  position: absolute;
  right: 6px; top: 6px;
  z-index: 3;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: rgba(245,166,35,0.92);
  color: #2A1B05;
  font-weight: 700;
}
.asset-meta-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ---------- 我的页 ---------- */
.info-card {
  margin: 12px var(--space-page) 0;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}
.info-card h3 { font-size: var(--fs-card-title); margin-bottom: 10px; }
.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: var(--fs-body);
  border-bottom: 1px solid var(--color-border);
  min-height: 44px;
}
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--color-muted-text); font-size: var(--fs-small); }
.info-row .v { font-weight: 600; color: var(--color-text); text-align: right; word-break: break-all; }
.info-row .v.is-off { color: var(--color-danger); }
.info-row .v.is-on { color: var(--color-success); }

.switch-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-micro);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}
.switch-pill.on { background: var(--color-success-soft); color: #17824D; }
.switch-pill.off { background: var(--color-danger-soft); color: var(--color-danger); }

.price-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.price-row:last-of-type { border-bottom: none; }
.price-row .pr-ic {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.price-row .pr-body { flex: 1; min-width: 0; }
.price-row .pr-title { font-size: var(--fs-body); font-weight: 600; }
.price-row .pr-sub { font-size: var(--fs-micro); color: var(--color-muted-text); margin-top: 2px; line-height: 1.5; }
.price-row .pr-price { font-size: var(--fs-card-title); font-weight: 700; color: var(--color-text); flex: 0 0 auto; }

.balance-card .balance-amount .na {
  font-size: 17px;
  font-weight: 700;
}

/* ---------- 列表内联空状态 ---------- */
.empty-state.is-inline { margin: 0; }
.list-wrap { padding: 14px var(--space-page) 0; }
.list-wrap > .empty-state { margin: 0; }

/* ---------- 加载骨架块 ---------- */
.block-loading {
  margin: 14px var(--space-page) 0;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  display: grid;
  gap: 10px;
}
.block-loading .sk {
  height: 12px;
  border-radius: 5px;
  background: linear-gradient(100deg, #EDF0F3 30%, #F6F8FA 50%, #EDF0F3 70%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
}
.block-loading .sk.w60 { width: 60%; }
.block-loading .sk.w90 { width: 90%; }
.block-loading .sk.w40 { width: 40%; }

/* 费用 sheet 内小行 */
.cost-line-name { display: inline-flex; flex-direction: column; gap: 2px; }
.cost-line-name small { font-size: 10px; color: var(--color-faint-text); font-weight: 400; }
.sheet-note.is-warn { color: var(--color-danger); }

/* 防止动态内容横向溢出 */
.shot-card, .project-card, .asset-card, .info-card, .export-row, .tl-seg { max-width: 100%; box-sizing: border-box; }
* { box-sizing: border-box; }

/* ============================================================
   补充：剧本 / 设定阶段布局、底部留白等（Token 引用 theme.css）
   ============================================================ */

/* 页面通用外边距卡片（script/setting） */
#stage-script, #stage-setting { padding-bottom: 20px; }
.script-card, .setting-section {
  margin: 14px var(--space-page) 0;
}
.script-card { padding: 14px; }
.script-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.script-head h2 { font-size: var(--fs-card-title); }
.script-content p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 8px;
}
.script-content p:last-child { margin-bottom: 0; }

.setting-section h2 {
  font-size: var(--fs-card-title);
  margin-bottom: 10px;
}
.setting-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.setting-card { padding: 12px; }
.setting-card h3 { font-size: var(--fs-body); margin: 8px 0 3px; }
.setting-card p {
  font-size: var(--fs-micro);
  color: var(--color-muted-text);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.setting-card .setting-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.setting-card .setting-tags span {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: #F1F3F6;
  color: var(--color-muted-text);
}
.setting-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.setting-thumb.is-placeholder {
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  color: var(--color-faint-text);
  display: grid;
  place-items: center;
}
.setting-check {
  display: flex;
  align-items: center;
  gap: 10px;
}
.setting-check .check-ic {
  width: 34px; height: 34px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.setting-check .check-ic.ok { background: var(--color-success-soft); color: var(--color-success); }
.setting-check .check-ic.warn { background: var(--color-warning-soft, #FFF3E0); color: var(--color-warning, #F59E0B); }
.setting-check .check-ic.spin { background: var(--color-primary-soft, #E8F0FE); color: var(--color-primary, #2563EB); }
.setting-check .check-ic.spin svg { animation: jc-spin 0.9s linear infinite; }
@keyframes jc-spin { to { transform: rotate(360deg); } }
.setting-check strong { font-size: var(--fs-body); display: block; }
.setting-check p { font-size: var(--fs-micro); color: var(--color-muted-text); margin-top: 2px; }

.step-actions { padding: 18px var(--space-page) 0; }

/* 时间线下信息行 */
.tc-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px var(--space-page) 2px;
  font-size: var(--fs-micro);
  color: var(--color-cinema-muted);
}
.tc-line .tc-total { color: #FFD98A; font-family: var(--font-mono); }
.tl-seg .seg-tc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-cinema-muted);
  font-weight: 400;
}

/* tabbar 底部留白（我的页，me-hero 自带深色页时） */
.tabbar-spacer {
  height: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* shot-card.is-empty 占位 thumb 居中（复用 theme.css .shot-thumb） */
.shot-thumb:not(.is-real) {
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  display: grid;
  place-items: center;
  color: var(--color-faint-text);
  overflow: hidden;
}
.shot-thumb .clapper-icon { display: grid; color: var(--color-faint-text); }
.shot-thumb .placeholder-text {
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-size: 9px;
  color: var(--color-faint-text);
}

/* project list cover 内角标定位 */
.project-cover, .thumb.project-cover { position: relative; }
.project-cover .cover-state {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 3;
}

/* recent-row 支持网格（真实渲染时） */
.recent-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px var(--space-page);
}
.recent-row::-webkit-scrollbar { display: none; }
.recent-row .recent-card {
  flex: 0 0 168px;
  overflow: hidden;
}
.recent-row .card.empty-state { flex-basis: 100%; }

/* 资产卡内 gen master 按钮 */
.asset-card.is-busy .gen-master-btn { opacity: 0.6; pointer-events: none; }


.ref-chip.prop { background: var(--color-success-soft); color: var(--color-success-deep); }

.img-fail-note{display:flex;align-items:center;justify-content:center;height:100%;min-height:90px;padding:10px;color:var(--color-text-muted);font-size:12px;text-align:center;}

.dock-btns{display:flex;gap:8px;flex-shrink:0}
.dock-btn{min-height:44px;padding:0 14px;font-size:14px;white-space:nowrap}

/* ---------- 模型选择 select ---------- */
.jc-select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;cursor:pointer}
.style-pick{margin-top:6px}

/* ---------- 剧本上传区 ---------- */
.upload-zone{display:flex;align-items:center;gap:8px;margin-bottom:8px;padding:14px 12px;border:1.5px dashed var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--fs-small);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.upload-zone:hover,.upload-zone:focus{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-soft);outline:none}
.upload-text{line-height:1.3}

/* 风格 chips：表单内改为换行布局，避免横向撑宽 */
#style-group{flex-wrap:wrap;gap:8px;padding:0;overflow:visible}
#style-group .cat-tab{min-height:34px;padding:0 14px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-muted-text);font-size:var(--fs-small)}
#style-group .cat-tab.is-active{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-strong)}

/* ===== 编导能力：导演标签 ===== */
.director-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--color-border-soft)}
.d-tag{font-size:11px;padding:2px 8px;border-radius:10px;line-height:1.6;white-space:nowrap;font-weight:500}
.d-tag-size{background:#eef4ff;color:#2d6cdf}
.d-tag-angle{background:#f3efff;color:#7c5cff}
.d-tag-move{background:#e8f9ef;color:#1ea85a}
.d-tag-light{background:#fff4e0;color:#e08c00}
.d-tag-comp{background:#fde8f0;color:#e04c7a}

/* ===== 编导能力：QC 摘要 ===== */
.qc-summary{margin:12px 16px 8px;border-radius:12px;padding:12px 16px;border:1px solid var(--color-border-soft);background:var(--color-bg-card)}
.qc-pass{border-color:#a7e3bd;background:#f0fbf4}
.qc-warn{border-color:#f5d58b;background:#fffaf0}
.qc-fail{border-color:#f5a1a1;background:#fff0f0}
.qc-header{display:flex;align-items:center;gap:10px}
.qc-icon{font-size:18px;font-weight:bold;width:24px;text-align:center}
.qc-pass .qc-icon{color:#1ea85a}
.qc-warn .qc-icon{color:#e08c00}
.qc-fail .qc-icon{color:#e04c4c}
.qc-title{font-weight:600;font-size:14px;flex:1}
.qc-stats{font-size:12px;color:var(--color-text-secondary)}
.qc-stats b{font-weight:600;margin:0 2px}
.qc-pass-num{color:#1ea85a}
.qc-warn-num{color:#e08c00}
.qc-fail-num{color:#e04c4c}
.qc-toggle{font-size:12px;padding:4px 10px;border-radius:8px;border:1px solid var(--color-border-soft);background:#fff;cursor:pointer}
.qc-details{margin-top:10px;padding-top:10px;border-top:1px dashed var(--color-border-soft)}
.qc-item{display:flex;align-items:flex-start;gap:8px;padding:6px 0;font-size:12px;line-height:1.5}
.qc-item-level{font-size:14px;min-width:18px;text-align:center;margin-top:1px}
.qc-item-pass .qc-item-level{color:#1ea85a}
.qc-item-warn .qc-item-level{color:#e08c00}
.qc-item-fail .qc-item-level{color:#e04c4c}
.qc-item-rule{font-weight:600;min-width:120px;color:var(--color-text-primary)}
.qc-item-detail{color:var(--color-text-secondary);flex:1}