/* ==================================================================
   耍看影创 Studio —— v2 组件样式
   剧本 AI 分析面板 / 场景道具管理 / 纳米风格资产库
   依赖 app.css 里的 CSS 变量（--bg / --gold / --line ...）
   ================================================================== */

/* ---------------- 通用弹窗 ---------------- */
.modal-mask {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0, 0, 0, .62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  width: 100%; max-width: 720px; max-height: 96vh;
  display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.modal-box.wide { max-width: 980px; }
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 28px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.modal-head h3 { margin: 0; font-size: 20px; font-weight: 700; }
.modal-body { padding: 26px 28px; overflow-y: auto; flex: 1; }
.modal-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 28px; border-top: 1px solid var(--line); flex-shrink: 0;
}
.modal-foot .btn { padding: 12px 24px; font-size: 16px; }
.modal-close {
  background: none; border: none; color: var(--text-dim); font-size: 22px;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
.modal-close:hover { color: var(--text); }

/* ---------------- Tab 条 ---------------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-dim); padding: 9px 16px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: .15s; margin-bottom: -1px;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.tab .cnt { font-size: 12px; opacity: .7; margin-left: 4px; }

/* ---------------- AI 剧本分析结果 ---------------- */
.ana-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.ana-stat {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px; text-align: center; cursor: pointer; transition: .15s;
}
.ana-stat:hover { border-color: var(--gold); }
.ana-stat.active { border-color: var(--gold); background: rgba(201, 169, 97, .1); }
.ana-stat .n { font-size: 22px; font-weight: 800; color: var(--gold); }
.ana-stat .l { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.ana-list { display: flex; flex-direction: column; gap: 8px; }
.ana-item {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 14px; font-size: 14px;
}
.ana-item .nm { font-weight: 700; color: var(--text); }
.ana-item .sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; line-height: 1.55; }
.ana-item .pmt {
  color: var(--gold-soft); font-size: 12px; margin-top: 6px;
  background: rgba(201, 169, 97, .07); border-left: 2px solid var(--gold);
  padding: 5px 9px; border-radius: 0 5px 5px 0; word-break: break-word; line-height: 1.6;
}
.ana-mode {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(201, 169, 97, .16); color: var(--gold-soft);
}
.ana-mode.offline { background: rgba(154, 163, 175, .16); color: var(--text-dim); }

.ana-loading { text-align: center; padding: 40px 20px; }
.ana-bar { height: 4px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-top: 16px; }
.ana-bar > i {
  display: block; height: 100%; width: 34%; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: anaSlide 1.25s ease-in-out infinite;
}
@keyframes anaSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(330%); }
}

/* ---------------- 资产库：顶部标签 + 网格（学剧创） ---------------- */
.asset-layout { display: flex; flex-direction: column; gap: 16px; }
/* 分类标签（左）+ 工具栏（右）合并为一排，节约垂直空间；窄屏自动回退换行 */
.asset-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.asset-tabs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.asset-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px; cursor: pointer;
  color: var(--text-dim); font-size: 14px; transition: .12s;
  border: 1px solid transparent; background: none; font-family: inherit;
}
.asset-tab:hover { background: var(--bg-3); color: var(--text); }
.asset-tab.active { background: rgba(201, 169, 97, .14); color: var(--gold-soft); border-color: rgba(201, 169, 97, .3); font-weight: 600; }
.asset-tab .n { font-size: 12px; opacity: .65; }

.asset-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; flex: 1; justify-content: flex-end; min-width: 420px; }
.asset-toolbar input[type="search"],
.asset-toolbar select {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  padding: 8px 12px; border-radius: 8px; font-size: 14px; outline: none; font-family: inherit;
}
.asset-toolbar input[type="search"] { min-width: 210px; }
.asset-toolbar input[type="search"]:focus,
.asset-toolbar select:focus { border-color: var(--gold); }

.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.asset-tile {
  position: relative; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; transition: .15s;
}
.asset-tile:hover { border-color: var(--gold); transform: translateY(-2px); }
.asset-tile .pic {
  width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; background: var(--bg-3);
}
.asset-tile .ph {
  width: 100%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--text-dim); font-size: 30px;
}
.asset-tile .meta { padding: 9px 11px; }
.asset-tile .meta .t {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asset-tile .meta .s {
  font-size: 11px; color: var(--text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 操作条平时隐藏，鼠标移上去才浮出，保持版面清爽 */
.asset-tile .ops {
  position: absolute; left: 0; right: 0; bottom: 52px;
  display: flex; gap: 6px; justify-content: center; padding: 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78));
  opacity: 0; transition: opacity .15s;
}
.asset-tile:hover .ops { opacity: 1; }
.asset-tile .ops button,
.asset-tile .ops a {
  background: rgba(20, 22, 28, .92); border: 1px solid var(--line); color: var(--text);
  border-radius: 6px; padding: 5px 10px; font-size: 12px; cursor: pointer;
  text-decoration: none; line-height: 1.4; font-family: inherit;
}
.asset-tile .ops button:hover,
.asset-tile .ops a:hover { border-color: var(--gold); color: var(--gold); }
.asset-tile .corner {
  position: absolute; top: 7px; right: 8px; font-size: 15px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8); cursor: pointer; line-height: 1;
  background: none; border: none; padding: 0;
}
.asset-tile .badge {
  position: absolute; top: 7px; left: 8px;
  background: rgba(0, 0, 0, .68); color: var(--gold-soft);
  font-size: 10px; padding: 2px 7px; border-radius: 5px;
}

/* 四视图参考图槽位（场景 E/S/W/N） */
.view4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.view4 .slot {
  aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 11px; cursor: pointer;
  background: var(--bg-3); overflow: hidden; position: relative;
}
.view4 .slot:hover { border-color: var(--gold); color: var(--gold); }
.view4 .slot img { width: 100%; height: 100%; object-fit: cover; }
.view4 .slot .lb {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  background: rgba(0, 0, 0, .6); font-size: 10px; padding: 1px 0; color: var(--text);
}

@media (max-width: 900px) {
  .asset-tabs { gap: 6px; padding-bottom: 10px; }
  .asset-tab { padding: 6px 11px; font-size: 13px; }
  /* 窄屏：工具栏单独占一排，不再和分类标签挤在一起 */
  .asset-toolbar { min-width: auto; width: 100%; justify-content: flex-start; }
  .ana-summary { grid-template-columns: repeat(2, 1fr); }
}

/* ==================================================================
   工作台首页（Vidu 风格）+ 导航增强
   ================================================================== */

/* 逻辑分组呼吸间距（替代旧的分组标题） */
.nav-sep { margin-top: 14px; }
.nav a .ai-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%; margin-left: 4px;
  vertical-align: middle;
}

/* Hero 区域 */
.home-hero {
  background:
    radial-gradient(1200px 620px at 12% -12%, rgba(201,169,97,.17), transparent 62%),
    radial-gradient(900px 520px at 88% 112%, rgba(201,169,97,.09), transparent 58%),
    linear-gradient(180deg, #12151b 0%, var(--bg) 100%);
  border-radius: 16px; border: 1px solid var(--line);
  overflow: hidden; position: relative; margin-bottom: 20px;
}
.home-hero::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(201,169,97,.045) 40px, rgba(201,169,97,.045) 41px);
  pointer-events: none;
}
.hero-inner {
  display: flex; gap: 32px; padding: 48px 36px; position: relative; z-index: 1;
  align-items: center; min-height: 340px;
}
.hero-left { flex: 1; min-width: 0; }
.hero-right { width: 200px; flex-shrink: 0; }

.hero-brand {
  font-size: 11px; letter-spacing: 3px; color: var(--gold);
  font-weight: 700; margin-bottom: 12px;
}
.hero-brand::after {
  content: ''; display: block; width: 60px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent); margin-top: 6px;
}
.hero-title {
  font-size: 34px; font-weight: 800; color: var(--text);
  line-height: 1.25; margin: 0 0 12px;
}
.hero-sub {
  font-size: 14px; color: var(--text-dim); line-height: 1.7;
  margin: 0 0 22px; max-width: 420px;
}
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.btn-lg { padding: 13px 24px; font-size: 15px; }
.hero-status {
  font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px;
}
.status-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.status-dot.on { background: #4caf7d; box-shadow: 0 0 6px rgba(76,175,125,.5); }
.status-dot.off { background: var(--text-dim); }

/* 胶片条 */
.film-strip { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.film-card {
  width: 80px; height: 120px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .2s;
}
.film-card:hover { transform: scale(1.06) !important; border-color: var(--gold); }
.film-card img { width: 100%; height: 100%; object-fit: cover; }
.film-placeholder { display: flex; flex-direction: column; gap: 8px; }
.film-skeleton {
  width: 80px; height: 120px; border-radius: 8px;
  background: var(--bg-3); border: 1px dashed var(--line);
  animation: heroSheen 2s ease-in-out infinite;
}
@keyframes heroSheen {
  0%, 100% { opacity: .4; }
  50% { opacity: .8; }
}

/* 三步流水线 */
.pipeline {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 24px; margin-bottom: 20px;
}
.pipe-step {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 0 12px; position: relative;
}
.pipe-highlight {
  background: rgba(201,169,97,.07); border-radius: 8px;
  border: 1px solid rgba(201,169,97,.25);
}
.pipe-num {
  font-size: 22px; font-weight: 800; color: var(--gold);
  line-height: 1;
}
.pipe-step:not(.pipe-highlight) .pipe-num { color: var(--text-dim); }
.pipe-body strong { font-size: 14px; color: var(--text); }
.pipe-sub { font-size: 12px; color: var(--text-dim); }
.pipe-connector {
  width: 40px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.pipe-connector::after {
  content: ''; width: 24px; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--line));
}

/* 剧本迷你卡 */
.script-mini { padding: 12px 14px; transition: .15s; }
.script-mini:hover { border-color: var(--gold); }

/* 分析状态徽章 */
.ana-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.ana-badge.done { background: rgba(76,175,125,.15); color: var(--green); }
.ana-badge.waiting { background: rgba(201,169,97,.18); color: var(--gold); }
.ana-badge.todo { background: transparent; color: var(--gold); border: 1px solid var(--gold); }
.ana-badge.empty { background: rgba(154,163,175,.12); color: var(--text-dim); }

/* AI 分析常驻面板（详情页左栏） */
.ai-panel {
  background: rgba(201,169,97,.05); border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0; padding: 14px 16px; margin: 14px 0;
}
.ai-panel-inner { display: flex; flex-direction: column; gap: 6px; }
.btn-sm { padding: 7px 14px; font-size: 12px; }

/* 底部数据条 */
.stats-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 18px; margin-top: 20px;
}
.stat-chip {
  font-size: 12px; color: var(--text-dim); background: var(--bg-3);
  padding: 3px 10px; border-radius: 6px;
}
.stat-link {
  font-size: 12px; color: var(--gold); margin-left: auto; cursor: pointer;
  text-decoration: none; font-weight: 600;
}
.stat-link:hover { text-decoration: underline; }

/* 响应式 */
@media (max-width: 900px) {
  .hero-inner { flex-direction: column; padding: 32px 20px; min-height: auto; }
  .hero-right { display: none; }
  .hero-title { font-size: 26px; }
  .pipeline { flex-direction: column; gap: 12px; }
  .pipe-connector { width: 1px; height: 20px; }
  .pipe-connector::after { width: 1px; height: 20px; background: linear-gradient(180deg, var(--gold), var(--line)); }
}
@media (prefers-reduced-motion: reduce) {
  .film-skeleton { animation: none; }
}

/* ==================================================================
   「当前剧集解析中」整页（对标剧创布局，深色主题版）
   ================================================================== */
.ana-page { max-width: 980px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; padding-bottom: 96px; }

/* AI 分析标准（全局模板）编辑区：结果页底部，默认折叠 */
.ana-standard-summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--text); user-select: none; }
.ana-standard-summary::-webkit-details-marker { color: var(--gold-soft); }
.ana-standard .row { margin-bottom: 4px; }

.ana-topbar { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; justify-content: flex-start; }

.ana-hero {
  width: 100%; text-align: center; padding: 56px 24px 44px;
  background:
    radial-gradient(680px 320px at 50% -12%, rgba(201,169,97,.10), transparent 70%),
    var(--bg-2);
  border: 1px solid var(--line); border-radius: 16px;
}
.ana-hero-icon {
  font-size: 46px; line-height: 1; margin-bottom: 14px;
  filter: drop-shadow(0 6px 16px rgba(201,169,97,.25));
  animation: anaFloat 2.6s ease-in-out infinite;
}
.ana-hero-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; }
.ana-hero-sub { font-size: 14px; color: var(--text-dim); margin: 0 0 34px; }

.ana-rings {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; max-width: 640px; margin: 0 auto 26px;
}
.ana-ring { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ana-ring svg { width: 74px; height: 74px; transform: rotate(-90deg); }
.ana-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ana-ring circle.bg { stroke: var(--bg-3); }
.ana-ring circle.fg {
  stroke: var(--gold); stroke-dasharray: 163.36; stroke-dashoffset: 163.36;
  transition: stroke-dashoffset .35s linear;
}
.ana-ring.done circle.fg { stroke: #4ade80; }
.ana-ring .pct {
  position: absolute; top: 27px; font-size: 13px; font-weight: 700; color: var(--gold);
}
.ana-ring.done .pct { color: #4ade80; }
.ana-ring .lb { font-size: 12px; color: var(--text-dim); }
.ana-ring.active .lb { color: var(--gold); }
.ana-tip { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.ana-bill-note {
  font-size: 12px; color: var(--text-dim);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; margin: 0 auto 18px; max-width: 460px;
  line-height: 1.5; text-align: center;
}
.ana-bill-note::before { content: ''; }
@keyframes anaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 结果态：把弹窗的 modal-body / modal-foot 直接搬进页面复用 */
.ana-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.ana-page-title { font-size: 18px; font-weight: 800; }
.ana-page-sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.ana-result-shell {
  width: 100%; display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
}
.ana-result-shell .modal-body { padding: 24px 28px; }

/* ===== 对标剧创：竖向分区结果页 ===== */
.ana-res-header {
  display: flex; gap: 20px; margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.ana-res-cover {
  width: 140px; height: 100px; flex-shrink: 0; border-radius: 10px;
  background: linear-gradient(135deg, rgba(201,169,97,.15), rgba(201,169,97,.05));
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: var(--gold-soft);
}
.ana-res-info { flex: 1; min-width: 0; }
.ana-res-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.ana-res-stats { display: flex; gap: 12px; font-size: 12px; color: var(--text-dim); margin-bottom: 8px; flex-wrap: wrap; }
.ana-res-stats span { display: flex; align-items: center; gap: 3px; }
.ana-res-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ana-res-tag {
  padding: 2px 10px; border-radius: 999px; font-size: 12px;
  background: rgba(201,169,97,.1); color: var(--gold-soft); border: 1px solid rgba(201,169,97,.2);
}

.ana-section { margin-bottom: 28px; }
.ana-section-title {
  font-size: 16px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.ana-section-title .q { font-size: 13px; color: var(--text-dim); cursor: help; }

.ana-script-type { background: var(--bg-3); border-radius: 10px; padding: 14px 16px; }
.ana-st-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.ana-st-desc { font-size: 13px; color: var(--text-dim); line-height: 1.6; }

.ana-style-row { display: flex; align-items: center; gap: 14px; background: var(--bg-3); border-radius: 10px; padding: 14px 16px; }
.ana-style-badge {
  width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, #c9a961, #a8863e);
  color: #1a1205; font-size: 18px; font-weight: 800; display: flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.ana-style-text { flex: 1; min-width: 0; }
.ana-style-ver { font-weight: 700; font-size: 14px; }
.ana-style-hint { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

.ana-synopsis { font-size: 14px; line-height: 1.85; color: var(--text); text-align: justify; }

/* 人物小传：卡片网格 */
.ana-char-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ana-char-card {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; transition: .15s;
}
.ana-char-card:hover { border-color: rgba(201,169,97,.4); }
.ana-char-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.ana-char-bio { font-size: 12.5px; color: var(--text-dim); line-height: 1.65; margin-bottom: 8px; }
.ana-char-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-dim); }
.ana-char-meta span { display: flex; align-items: center; gap: 3px; }
.ana-char-costume {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--gold-soft);
}

/* 分集剧情：Tab 切换器 + 详细内容（多集时横向滚动） */
.ana-ep-tabs {
  display: flex; gap: 4px; flex-wrap: nowrap; margin-bottom: 16px;
  overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.ana-ep-tabs::-webkit-scrollbar { height: 6px; }
.ana-ep-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.ana-ep-tab {
  flex: 0 0 auto; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 600;
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text-dim);
  cursor: pointer; transition: .15s; user-select: none; white-space: nowrap;
}
.ana-ep-tab:hover { border-color: var(--gold); color: var(--text); }
.ana-ep-tab.active { background: var(--gold); color: #1a1205; border-color: var(--gold); }

.ana-ep-body { animation: anaFadeIn .25s ease; }
@keyframes anaFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.ana-ep-section { margin-bottom: 18px; }
.ana-ep-heading { font-size: 15px; font-weight: 700; margin-bottom: 6px; color: var(--gold-soft); }
.ana-ep-content { font-size: 13.5px; line-height: 1.85; color: var(--text); text-align: justify; }

.ana-more-link { text-align: center; margin-top: 8px; }
.ana-more-link button {
  background: none; border: none; color: var(--text-dim); font-size: 13px;
  cursor: pointer; padding: 4px 0;
}
.ana-more-link button:hover { color: var(--gold); }

/* 浮动 CTA 按钮 */
.ana-float-btn {
  position: fixed; bottom: 32px; right: 32px; z-index: 50;
  background: #1a1205; color: #fff; border: none; border-radius: 999px;
  padding: 12px 24px; font-size: 14px; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,0,0,.35); transition: .2s;
}
.ana-float-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(0,0,0,.45); }

@media (max-width: 700px) {
  .ana-rings { grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 340px; }
  .ana-hero { padding: 40px 16px 32px; }
  .ana-page-head { flex-direction: column; align-items: flex-start; }
  .ana-res-header { flex-direction: column; }
  .ana-res-cover { width: 100%; height: 160px; }
  .ana-char-grid { grid-template-columns: 1fr; }
  .ana-float-btn { bottom: 20px; right: 20px; padding: 10px 20px; font-size: 13px; }
}

/* ==================================================================
   设定页（对标剧创：角色 / 场景 / 道具 三 Tab）
   ================================================================== */
.settings-page { padding: 4px 2px 30px; }
.set-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.set-title { font-size: 19px; font-weight: 800; }
.set-sub { font-size: 13px; color: var(--text-dim); margin-top: 3px; }

/* 项目顶部栏：左侧 Tab 导航 + 右侧参数栏（共享 stepnav.js 组件）—— 对标剧创 */
.wb-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.wb-params {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--text-dim); flex-shrink: 0;
}
.wb-param {
  padding: 2px 8px; border: 0.5px solid var(--line);
  border-radius: 6px; background: var(--bg-2); white-space: nowrap;
}
.wb-look-script { color: var(--gold); border-color: rgba(201,169,97,.4); }
.wb-look-script:hover { background: rgba(201,169,97,.1); }

/* 四步飞轮 Tab（共享 stepnav.js 组件）—— 渐进式宽度矩形卡片 1:2:3:4 */
.step-nav {
  display: flex; align-items: stretch; gap: 8px;
  margin-bottom: 0; padding: 12px 16px;
  background: var(--bg-2); border: 0.5px solid var(--line);
  border-radius: 10px;
}
.step-item {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0; border-radius: 6px; font-size: 14px; cursor: pointer;
  transition: all .18s ease; border: 1.5px solid transparent;
  color: var(--text-dim); background: var(--bg-1);
  user-select: none; min-width: 0;
}
.step-item:hover { color: var(--text); border-color: var(--line); background: rgba(255,255,255,.04); }
.step-label { font-weight: 500; white-space: nowrap; letter-spacing: 2px; }

/* 当前步骤：金色边框+文字高亮 */
.step-item.step-current {
  color: var(--gold); border-color: var(--gold);
  background: rgba(201,169,97,.08); font-weight: 600;
  box-shadow: 0 0 12px rgba(201,169,97,.15);
}
/* 已完成：暗金 */
.step-item.step-done { color: rgba(201,169,97,.6); opacity: .85; border-color: rgba(201,169,97,.25); }
/* 待做：灰淡 */
.step-item.step-pending { color: var(--text-dim); opacity: .4; }

/* Tab */
.set-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.set-tab {
  background: none; border: none; border-bottom: 3px solid transparent; color: var(--text-dim);
  padding: 16px 28px; font-size: 30px; font-weight: 700; cursor: pointer; transition: .15s; margin-bottom: -1px;
}
.set-tab:hover { color: var(--text); }
.set-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* 设定页底部：进入下一步（居中显示） */
.set-bottom-bar {
  display: flex; justify-content: center; align-items: center;
  margin-top: 28px; padding-top: 20px;
  border-top: 0.5px solid var(--line);
  gap: 16px;
}
.set-bottom-bar .btn { min-width: 160px; padding: 11px 28px; font-size: 15px; }
.set-bottom-tip { font-size: 12.5px; }

/* 顶部一行：整条为一个紧凑栏，内部功能区用竖线分隔，不另起盒子 */
.set-top-row {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 6px; padding: 10px 18px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px;
  flex-wrap: nowrap; overflow: hidden;
}
.set-top-row > * { position: relative; flex: 0 0 auto; min-width: 0; }
.set-top-row > * + *::before {
  content: '|'; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); opacity: .35; font-size: 14px; pointer-events: none;
}

/* 统计区域：直接并排，无独立盒，竖线分隔 */
.set-stat-region { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-dim); background: none; border: none; padding: 0; }
.set-stat-item { white-space: nowrap; font-size: 14px; }
.set-stat-sep { opacity: .3; user-select: none; font-size: 14px; }
.set-stat b { color: var(--text); font-size: 14px; margin-left: 4px; }
.set-stat b.live { color: var(--gold); }
.set-stat b.bad { color: #ff6b6b; }

/* 添加区域：正常尺寸按钮 */
.set-add-region { padding: 0; background: none; border: none; }
.set-add-region .btn { font-size: 14px; padding: 7px 14px; }

/* 搜索区域：胶囊输入框，搜索按钮内嵌在输入框右侧；靠右对齐 */
.set-search-region { padding: 0; background: none; border: none; margin-left: auto; }
.set-search-wrap { position: relative; display: inline-flex; align-items: center; }
.set-search-wrap .set-search-icon { position: absolute; left: 11px; font-size: 14px; opacity: .65; pointer-events: none; }
.set-search {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; outline: none;
  color: var(--text); padding: 7px 58px 7px 32px; font-size: 14px;
  min-width: 180px; width: 180px; font-family: inherit; box-sizing: border-box; transition: .15s;
}
.set-search:focus { border-color: var(--gold); width: 220px; }
.set-search::placeholder { color: var(--text-dim); opacity: .6; }
.set-search-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: var(--bg-3); color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; transition: .15s;
}
.set-search-btn:hover { border-color: var(--gold); color: var(--gold); }
.set-search-count { font-size: 12px; color: var(--text-dim); margin-top: 4px; min-height: 16px; }

.set-grid-wrap { width: 100%; }
.set-empty { padding: 50px 20px; text-align: center; color: var(--text-dim); font-size: 14px; }

/* 窄屏兜底：空间不足时三个区域自动换行，搜索框整行显示，避免被 overflow:hidden 裁掉（道具统计区较长时尤其容易触发） */
@media (max-width: 1320px) {
  .set-top-row { flex-wrap: wrap; gap: 10px; }
  .set-top-row > * + *::before { display: none; }
  .set-search-region { flex: 1 1 100%; }
  .set-search { min-width: 100%; width: 100%; }
  .set-search:focus { min-width: 100%; width: 100%; }
}

/* 角色卡（整体缩小约 20%，减少空形象占位） */
.char-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; transition: .15s; }
.char-card:hover { border-color: rgba(212, 175, 55, .45); }
.avatar-area {
  position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden;
  background: var(--bg-3, #15161c); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.avatar-area img { width: 100%; height: 100%; object-fit: cover; }
.avatar-ph { font-size: 36px; opacity: .35; }
.avatar-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px; font-size: 22px; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent 60%);
  opacity: 0; transition: .15s;
}
.avatar-area:hover .avatar-overlay { opacity: 1; }

/* 生成中状态：卡片内直接给进度反馈，不让用户干等 */
.char-card.is-gen { border-color: rgba(212, 175, 55, .5); }
.avatar-gen {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 8px;
  background: linear-gradient(160deg, rgba(212, 175, 55, .08), rgba(0, 0, 0, .25));
  cursor: progress;
}
.gen-spin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid rgba(212, 175, 55, .22); border-top-color: var(--gold);
  animation: genspin .8s linear infinite;
}
@keyframes genspin { to { transform: rotate(360deg); } }
.gen-txt { font-size: 12px; font-weight: 700; color: var(--gold); }
.gen-sec { font-size: 16px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.gen-tip { font-size: 10px; color: var(--text-dim); text-align: center; line-height: 1.4; }

/* 失败提示条 */
.char-err {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  padding: 5px 7px; border-radius: 6px;
  background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .3);
}
.char-err .ce-txt {
  flex: 1; font-size: 10.5px; color: #ff9a9a; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.char-err .ce-retry { flex: none; font-size: 10.5px; padding: 2px 7px; }
.char-err .ce-dismiss { flex: none; font-size: 14px; line-height: 1; padding: 2px 5px; color: #ff9a9a; background: transparent; border: none; cursor: pointer; }
.char-err .ce-dismiss:hover { color: #ff6b6b; }

.char-name { font-size: 15px; font-weight: 700; margin-top: 8px; }
.char-meta { font-size: 13px; color: var(--gold); margin-top: 2px; }
.char-id { font-size: 13px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; min-height: 28px; }
.char-ops { display: flex; gap: 5px; margin-top: 8px; }
.char-ops .btn { font-size: 12px; padding: 5px 10px; }
.char-ops .btn-download { color: var(--gold); border-color: rgba(212, 175, 55, .4); }
.char-ops .btn-download:hover { color: #f0d78c; border-color: var(--gold); background: rgba(212, 175, 55, .1); }
.char-ops .btn-costume { color: var(--gold); border-color: rgba(212, 175, 55, .45); white-space: nowrap; }
.char-ops .btn-costume:hover { background: rgba(212, 175, 55, .12); border-color: var(--gold); }
.char-ops { flex-wrap: wrap; }
.char-ops .btn-edit { white-space: nowrap; }
.char-ops .btn-ai-gen { color: #1a1205; background: linear-gradient(135deg, #ffcf6a, #ff9a3d); border-color: transparent; font-weight: 600; white-space: nowrap; }
.char-ops .btn-ai-gen:hover { filter: brightness(1.06); }
.char-ops .btn-ai-gen:disabled { opacity: .5; filter: none; }
.img-mgr-tools { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }

/* 主图来源角标（哪家的模型生成的） */
.src-badge {
  position: absolute; top: 8px; left: 8px; z-index: 3;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: 11px;
  padding: 2px 7px; border-radius: 6px; pointer-events: none;
  max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 缩略图区：提示与缩略图横排（平行），提示加一点金色 */
.thumb-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.thumb-hint {
  flex: 0 0 auto; white-space: nowrap; font-size: 12px; line-height: 1;
  color: var(--gold, #ffcf6a);
  background: rgba(212, 175, 55, .14);
  border: 1px solid rgba(212, 175, 55, .32);
  padding: 3px 8px; border-radius: 6px;
}
/* 横排缩略图条：生成多张一眼对比，可左右横滑选择，每张带来源角标 */
.thumb-strip { display: flex; gap: 6px; margin-top: 0; overflow-x: auto; padding-bottom: 4px; flex: 1 1 auto; min-width: 0; }
.thumb { position: relative; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 7px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: var(--bg-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-gold { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.thumb-badge {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 9px;
  padding: 1px 3px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 错误卡：具体出错的模型标记 */
.char-err .ce-model { flex: none; font-size: 10px; color: #ffd27a; background: rgba(212, 175, 55, .15); border: 1px solid rgba(212, 175, 55, .35); padding: 1px 6px; border-radius: 6px; }


/* 场景卡 / 道具卡 */
.scene-card, .prop-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; transition: .15s; position: relative; }
.scene-card:hover, .prop-card:hover { border-color: rgba(212, 175, 55, .45); }
.scene-cover, .prop-cover {
  position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: var(--bg-3, #15161c); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.prop-cover { aspect-ratio: 1 / 1; }
.scene-cover img, .prop-cover img { width: 100%; height: 100%; object-fit: cover; }
.scene-ph, .prop-ph { font-size: 42px; opacity: .35; }
.scene-overlay, .prop-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 9px;
  font-size: 18px; font-weight: 600; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent 60%);
  opacity: 1; transition: .15s; pointer-events: none;
}
.card-del {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer; opacity: .82; transition: .15s;
  background: rgba(220, 53, 69, .92); color: #fff;
}
.card-del:hover { opacity: 1; transform: scale(1.03); }
/* 卡片更多菜单按钮（替换原红×）：灰色、默认隐藏、hover 封面才显示 */
.card-more {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; cursor: pointer;
  background: rgba(0, 0, 0, .42); color: rgba(255, 255, 255, .85);
  opacity: 0; transition: .15s;
}
.scene-cover:hover .card-more, .prop-cover:hover .card-more { opacity: 1; }
.card-more:hover { background: rgba(0, 0, 0, .68); color: #fff; }
/* 角色卡片墙的更多按钮：定位左上角（原红×位置），hover 卡片才显示 */
.cwc-more { left: 8px; }
.char-wall-card:hover .cwc-more { opacity: 1; }
/* 点 ⋯ 弹出的下拉菜单 */
.card-menu {
  position: fixed; z-index: 200; min-width: 120px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding: 6px 0;
}
.card-menu-item {
  display: block; width: 100%; box-sizing: border-box; padding: 9px 16px;
  background: none; border: none; color: var(--text); font-size: 13.5px;
  text-align: left; cursor: pointer; white-space: nowrap;
}
.card-menu-item:hover { background: rgba(212, 175, 55, .1); color: var(--gold); }
.card-menu-item.danger { color: #ff7a7a; }
.card-menu-item.danger:hover { background: rgba(220, 53, 69, .12); color: #ff7a7a; }
.scene-name, .prop-name { font-size: 18px; font-weight: 700; margin-top: 10px; color: #fff; }
.scene-desc, .prop-desc { font-size: 14px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; min-height: 34px; }
.editable-name { cursor: text; position: relative; border-bottom: 1px dashed rgba(212,175,55,.55); padding: 0 18px 0 4px; margin: 0 -4px; border-radius: 4px; transition: background .15s, border-color .15s; }
.editable-name::after { content: '✎'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--gold); opacity: .35; transition: opacity .15s; pointer-events: none; }
.editable-name:hover { background: rgba(212,175,55,.1); border-bottom-color: var(--gold); }
.editable-name:hover::after { opacity: .9; }
.editable-name:focus { outline: none; background: rgba(212,175,55,.15); border-bottom: 1px solid var(--gold); }
.editable-name:focus::after { opacity: 0; }
.editable-name.saving { opacity: .6; cursor: wait; }

/* 生成弹窗内直接编辑提示词 */
.gen-prompt-edit { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.gpe-field { margin-bottom: 12px; }
.gpe-field:last-child { margin-bottom: 0; }
.gpe-field label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; }
.gpe-field textarea { width: 100%; min-height: 54px; resize: vertical; background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 13.5px; line-height: 1.55; }
.gpe-field textarea:focus { border-color: var(--gold); outline: none; }
.gpe-more { text-align: right; margin-top: 8px; }
.gpe-more .btn-text { background: none; border: none; color: var(--gold); font-size: 12.5px; cursor: pointer; padding: 0; }
.gpe-more .btn-text:hover { text-decoration: underline; }

/* 头像三选项弹窗 */
.three-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.opt {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 18px 12px;
  cursor: pointer; text-align: center; transition: .15s; color: var(--text);
}
.opt:hover { border-color: var(--gold); background: rgba(212, 175, 55, .08); }
.opt-ic { font-size: 30px; margin-bottom: 8px; }
.opt-t { font-size: 14px; font-weight: 700; }
.opt-d { font-size: 11.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.5; }

/* 角色库选择 */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; max-height: 60vh; overflow-y: auto; }
.lib-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.lib-name { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.lib-imgs { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-img { border: none; background: none; padding: 0; cursor: pointer; border-radius: 7px; overflow: hidden; width: 64px; height: 64px; }
.lib-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; transition: .15s; }
.lib-img:hover img { transform: scale(1.05); box-shadow: 0 0 0 2px var(--gold); }

@media (max-width: 700px) {
  .three-options { grid-template-columns: 1fr; }
}

/* 生成比例选择弹窗 */
.ratio-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 10px; }
.ratio-opt {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 10px; cursor: pointer; text-align: center; transition: .15s; color: var(--text);
}
.ratio-opt:hover { border-color: var(--gold); background: rgba(212, 175, 55, .06); }
.ratio-opt.selected { border-color: var(--gold); background: rgba(212, 175, 55, .12); box-shadow: 0 0 0 1px var(--gold); }
.ratio-preview {
  margin: 0 auto 10px; background: linear-gradient(135deg, rgba(212,175,55,.25), rgba(212,175,55,.08));
  border: 1px solid var(--gold); border-radius: 6px;
}
.ratio-preview.ratio-1-1 { width: 48px; height: 48px; }
.ratio-preview.ratio-16-9 { width: 72px; height: 40px; }
.ratio-preview.ratio-9-16 { width: 40px; height: 72px; }
.ratio-t { font-size: 14px; font-weight: 700; }
.ratio-d { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.ratio-note { font-size: 12px; color: var(--text-dim); text-align: center; margin: 0; }

/* ════════════════════════════════════════════════════
   分镜板块 Storyboard（第三步：分镜 + 视频生成）
   ════════════════════════════════════════════════════ */

/* —— 缺失的基础组件补全 —— */
.btn-icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 7px; border: 1px solid var(--line); background: transparent;
  color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; transition: .12s;
}
.btn-icon:hover { color: #ff8a8a; border-color: #ff8a8a; }
.btn-icon.confirm { color: #fff; background: #e25656; border-color: #e25656; font-size: 12px; }
.btn-icon.confirm:hover { color: #fff; background: #c84646; border-color: #c84646; }
.tag-gold { color: #1a1308; background: var(--gold); border-color: var(--gold); }
.tag-green { color: #0c2a16; background: #5fd38a; border-color: #5fd38a; }
.tag-red { color: #fff; background: #e0556b; border-color: #e0556b; }
.spinner-sm {
  width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--gold);
  border-radius: 50%; animation: sb-spin .8s linear infinite; flex: 0 0 auto;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* —— 页面骨架 —— */
.sb-page { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; }
.sb-head { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 14px 0; flex-wrap: wrap; }
.sb-head-info { min-width: 0; text-align: center; }
.sb-title { font-size: 18px; font-weight: 800; color: var(--text); }
.sb-sub { display: none; }
.sb-head-ops { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding-left: 20px; border-left: 1px solid var(--line); }
.sb-head-ops .btn-sm { font-size: 13px; }
.sb-batch-progress-top {
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: var(--bg-3); border: 1px solid var(--gold);
  border-radius: 6px; padding: 3px 10px; white-space: nowrap;
}

.sb-main { display: flex; gap: 16px; flex: 1; min-height: 0; }
.sb-left {
  width: 380px; flex: 0 0 380px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
}
.sb-right {
  flex: 1; min-width: 0; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
}

.sb-panel-title {
  font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sb-panel-title .tag { font-size: 11px; }

/* —— 模式切换 —— */
.sb-mode { display: flex; gap: 8px; margin-bottom: 14px; }
.sb-mode-item {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; transition: .12s;
}
.sb-mode-item:hover { color: var(--text); border-color: var(--gold); }
.sb-mode-item.checked { color: var(--gold-soft); border-color: var(--gold); background: rgba(201, 169, 97, .08); }
.sb-mode-item input { display: none; }

/* —— 字段 —— */
.sb-field { margin-bottom: 14px; }
.sb-field > label {
  display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600;
}
.sb-field textarea, .sb-field input {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); padding: 10px 12px; font-size: 13.5px; font-family: inherit; resize: vertical;
}
.sb-field textarea { min-height: 84px; line-height: 1.55; }
.sb-field input { height: 38px; }
.sb-field textarea:focus, .sb-field input:focus { outline: none; border-color: var(--gold); }

/* —— 角色 / 场景 区块 —— */
.sb-sec { margin-bottom: 14px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.sb-sec-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.sb-sec-head .btn-mini { padding: 2px 10px; font-size: 15px; line-height: 1; }

.sb-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.sb-row + .sb-row { border-top: 1px solid var(--line); }
.sb-row-av {
  width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex: 0 0 34px;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center;
}
.sb-row-av img { width: 100%; height: 100%; object-fit: cover; }
.sb-no-av { font-size: 16px; }
.sb-row-name { flex: 1; min-width: 0; }
.sb-row-name select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 6px 8px; font-size: 13px;
}
.sb-row-name select:focus { outline: none; border-color: var(--gold); }
.sb-row-sub { font-size: 11px; color: var(--text-dim); flex: 0 0 auto; }

/* —— 右侧：生成面板 —— */
.sb-prompt-wrap { margin-bottom: 14px; }
.sb-prompt-wrap textarea {
  width: 100%; min-height: 150px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); padding: 12px; font-size: 13px; line-height: 1.6;
  resize: vertical; font-family: inherit;
}
.sb-prompt-wrap textarea:focus { outline: none; border-color: var(--gold); }

.sb-refblock { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.sb-refblock-h { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sb-refblock-h .muted { font-weight: 400; }
.sb-refblock-body {
  margin: 0; font-size: 12px; color: var(--text-dim); white-space: pre-wrap; line-height: 1.6;
  max-height: 160px; overflow-y: auto; font-family: inherit;
}

.sb-model-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sb-model-row label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; flex: 0 0 auto; }
.sb-model-row select {
  flex: 1; background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.sb-model-row select:focus { outline: none; border-color: var(--gold); }

.sb-params { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.sb-param { display: flex; align-items: center; gap: 10px; }
.sb-param > label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; width: 48px; flex: 0 0 48px; }
.sb-param input[type=range] { flex: 1; accent-color: var(--gold); }
.sb-param-val { font-size: 13px; color: var(--text); width: 40px; text-align: right; flex: 0 0 40px; }
.sb-static { font-size: 13px; color: var(--text-dim); }

.sb-pills { display: flex; gap: 6px; flex: 1; }
.sb-pill {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px;
  color: var(--text-dim); cursor: pointer; user-select: none; transition: .12s;
}
.sb-pill:hover { color: var(--text); border-color: var(--gold); }
.sb-pill.active { color: #1a1308; background: var(--gold); border-color: var(--gold); font-weight: 600; }

/* —— 产出预览 —— */
.sb-out {
  margin-bottom: 14px; min-height: 200px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sb-out-img, .sb-out-vid { max-width: 100%; max-height: 360px; display: block; }
.sb-out-empty, .sb-out-loading {
  color: var(--text-dim); font-size: 13px; padding: 40px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: column;
}

/* —— 操作条 —— */
.sb-genbar { display: flex; align-items: center; gap: 10px; }
.sb-cost { font-size: 14px; font-weight: 700; color: var(--gold); }

/* —— 底部分镜表 —— */
.sb-strip { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.sb-strip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--text); }
.sb-strip-head .muted { font-weight: 400; font-size: 12px; }
.sb-strip-head .btn-mini { margin-left: auto; }
.sb-strip-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.sb-thumb {
  flex: 0 0 132px; width: 132px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; cursor: pointer; transition: .12s; position: relative;
}
.sb-thumb:hover { border-color: var(--gold); transform: translateY(-2px); }
.sb-thumb.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sb-thumb-pic { width: 100%; aspect-ratio: 9 / 16; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sb-thumb-pic img, .sb-thumb-pic video { width: 100%; height: 100%; object-fit: cover; }
.sb-thumb-no { font-size: 26px; opacity: .5; }
.sb-thumb-idx { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 5px; }
.sb-thumb-txt { font-size: 11.5px; color: var(--text-dim); padding: 6px 8px; line-height: 1.4; max-height: 42px; overflow: hidden; }
.sb-thumb .tag { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 2px 6px; }

/* —— 空状态 —— */
.sb-empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px; }
.sb-empty-icon { font-size: 46px; }
.sb-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
.sb-empty-hint { font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 320px; }
/* 空分镜页：一键拆镜 / 多AI对比选镜 两个并列大按钮，中央显眼 */
.sb-empty-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.sb-empty-btns .btn { min-width: 168px; padding: 12px 22px; font-size: 15px; font-weight: 600; }
.sb-empty-btns .btn-cmp { position: relative; box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(212,175,55,.45); }
.sb-empty-btns .btn-cmp::after { content: '推荐'; position: absolute; top: -9px; right: -8px; background: var(--gold); color: #1a1206; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 8px; }
.sb-right-empty { color: var(--text-dim); font-size: 14px; padding: 40px; text-align: center; }

/* —— 选择器弹窗 —— */
.sb-picker { display: flex; flex-direction: column; gap: 12px; min-height: 300px; }
.sb-picker-search input { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 10px 12px; font-size: 16px; }
.sb-picker-search input:focus { outline: none; border-color: var(--gold); }
.sb-picker-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; }
.sb-picker-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: .12s; }
.sb-picker-item:hover { border-color: var(--gold); background: rgba(201, 169, 97, .06); }
.sb-picker-item.current { border-color: var(--gold); background: rgba(201, 169, 97, .10); }
.sb-picker-av { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; flex: 0 0 40px; background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-size: 18px; }
.sb-picker-av img { width: 100%; height: 100%; object-fit: cover; }
.sb-picker-name { flex: 1; font-size: 16px; font-weight: 600; color: var(--text); }
.sb-picker-cur { display: inline-block; margin-left: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; color: var(--gold); border: 1px solid var(--gold); border-radius: 20px; vertical-align: middle; }
.sb-picker-sub { font-size: 13px; color: var(--text-dim); }
.sb-picker-arrow { color: var(--text-dim); font-size: 20px; }

/* —— 批量生视频弹窗 —— */
.sb-batch-bar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.sb-batch-bar label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sb-batch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 55vh; overflow-y: auto; }
.sb-batch-item { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: .12s; }
.sb-batch-item:hover { border-color: var(--gold); }
.sb-batch-thumb { width: 40px; height: 40px; border-radius: 7px; overflow: hidden; flex: 0 0 40px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sb-batch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-batch-txt { font-size: 12px; color: var(--text); line-height: 1.4; }
.sb-batch-cost { font-size: 13px; color: var(--gold); font-weight: 600; }

/* ---- AI 一键拆镜弹窗（Phase B） ---- */
.sb-break-info { padding: 4px 2px; }
.sb-break-info p { margin: 0 0 14px; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
.sb-break-mode { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sb-break-opt { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.sb-break-opt input { accent-color: var(--gold); width: 16px; height: 16px; }
.sb-break-opt:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }
.sb-break-tip { font-size: 12.5px; line-height: 1.5; padding: 9px 12px; border-radius: 8px; }
.sb-break-tip.ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.sb-break-tip.warn { color: var(--gold-soft); background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* ==================================================================
   成片板块（Film）—— 第4步：分片视频合成为一集成片
   视觉语言对齐 shots.js 的 .sb-* 与全局 .step/.btn 体系
   ================================================================== */
.fm-page { display: flex; flex-direction: column; gap: 18px; }
.fm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fm-head-info { min-width: 0; }
.fm-title { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1.2; }
.fm-sub { font-size: 13.5px; color: var(--text-dim); margin-top: 6px; }
.fm-sub b.ok { color: var(--green); }
.fm-sub b.warn { color: var(--gold-soft); }
.fm-head-ops { flex-shrink: 0; }

/* 主区：左连播预览 + 右设置 */
.fm-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }

/* 左：连播预览器 */
.fm-player { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.fm-stage { position: relative; aspect-ratio: 9 / 16; max-height: 64vh; margin: 0 auto; background: #000; border-radius: 10px; overflow: hidden; }
.fm-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.fm-stage-empty { display: flex; align-items: center; justify-content: center; color: var(--text-dim); }
.fm-play-bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fm-play-info { margin-left: auto; font-size: 13px; color: var(--text-dim); }
.fm-play-info b { color: var(--text); }
.fm-play-dots { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.fm-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); cursor: pointer; transition: .12s; flex: 0 0 auto; }
.fm-dot:hover { background: var(--text-dim); }
.fm-dot.on { background: var(--gold); box-shadow: 0 0 6px rgba(201,169,97,.6); }

/* 右：成片设置 */
.fm-panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.fm-panel-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 16px; }
.fm-field { margin-bottom: 14px; }
.fm-field > label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 7px; font-weight: 600; }
.fm-field select,
.fm-field input[type="range"] { width: 100%; }
.fm-field select {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 9px 12px; font-size: 13.5px; cursor: pointer;
}
.fm-field select:focus { border-color: var(--gold); outline: none; }
.fm-field input[type="range"] { accent-color: var(--gold); }
.fm-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; line-height: 1.5; }
.fm-switch-row { display: flex; align-items: center; justify-content: space-between; }
.fm-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--text); font-weight: 600; }
.fm-switch input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.fm-switch-row .fm-hint { margin-top: 0; max-width: 60%; text-align: right; }
.fm-divider { height: 1px; background: var(--line); margin: 18px 0; }
.fm-summary { display: flex; gap: 10px; background: var(--bg-3); border-radius: 9px; padding: 12px 14px; margin-bottom: 16px; }
.fm-summary > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.fm-summary span { font-size: 11.5px; color: var(--text-dim); }
.fm-summary b { font-size: 16px; color: var(--text); }
.fm-compose-btn { width: 100%; margin-top: 4px; }

/* 合成进度 */
.fm-progress-box { background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; margin-top: 14px; }
.fm-progress-box.failed { border-color: rgba(214,90,90,.5); }
.fm-progress-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text); margin-bottom: 9px; }
.fm-progress-head b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.fm-progress-track { height: 7px; background: var(--bg); border-radius: 5px; overflow: hidden; }
.fm-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); border-radius: 5px; transition: width .4s; }
.fm-progress-err { font-size: 12px; color: var(--red); margin-top: 9px; line-height: 1.5; word-break: break-word; }

/* 中部：镜头序列时间轴 */
.fm-timeline { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.fm-tl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.fm-tl-title { font-size: 15px; font-weight: 700; color: var(--text); }
.fm-tl-title .muted { font-weight: 400; font-size: 12.5px; }
.fm-tl-ops { display: flex; align-items: center; gap: 8px; }
.fm-tl-ops .muted { font-size: 12.5px; }
.fm-tl-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; }
.fm-tl-strip::-webkit-scrollbar { height: 8px; }
.fm-tl-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
.fm-card {
  flex: 0 0 auto; width: 132px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; cursor: pointer; transition: .14s;
}
.fm-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.fm-card.novideo { opacity: .55; }
.fm-card.picked { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.fm-card.cur { border-color: var(--gold-soft); box-shadow: 0 0 0 2px rgba(227,201,137,.55); }
.fm-card-thumb { position: relative; aspect-ratio: 9 / 16; background: #000; overflow: hidden; }
.fm-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fm-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--text-dim); }
.fm-card-seq { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.fm-card-dur { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10.5px; padding: 1px 6px; border-radius: 5px; }
.fm-card-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(0,0,0,.65); color: var(--gold-soft); font-size: 11px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.fm-card-foot { padding: 9px 10px; border-top: 1px solid var(--line); }
.fm-card-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.fm-card-check input { accent-color: var(--gold); cursor: pointer; }

/* 底部：成片记录 */
.fm-films { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.fm-films-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fm-films-empty { color: var(--text-dim); font-size: 13px; padding: 8px 0; line-height: 1.6; }
.fm-films-list { display: flex; flex-direction: column; gap: 12px; }

/* 视频 Tab 成片区（并入：复用 fm-panel / fm-films 样式） */
.vd-compose { margin-top: 18px; padding: 0 16px 28px; border-top: 1px solid var(--line); }
.vd-compose-head { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.vd-compose-title { font-size: 17px; font-weight: 700; color: var(--text); }
.vd-compose-stat { font-size: 12px; color: var(--text-dim); }
.vd-compose-body { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 16px; align-items: start; }
.vd-compose-body .fm-films { margin-top: 0; }
@media (max-width: 900px) { .vd-compose-body { grid-template-columns: 1fr; } }
.fm-film-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 11px; padding: 14px 16px; }
.fm-film-row.failed { border-color: rgba(214,90,90,.4); }
.fm-film-row.running { border-color: rgba(201,169,97,.4); }
.fm-film-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fm-film-title { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--text); }
.fm-film-title .pill { font-size: 11px; padding: 2px 10px; }
.fm-film-meta { font-size: 12.5px; color: var(--text-dim); }
.fm-film-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-tag { font-size: 11px; color: var(--gold-soft); background: rgba(201,169,97,.1); border: 1px solid rgba(201,169,97,.25); padding: 2px 8px; border-radius: 6px; }
.fm-film-err { font-size: 12px; color: var(--red); line-height: 1.5; word-break: break-word; }
.fm-film-running { font-size: 12.5px; color: var(--gold-soft); }
.fm-film-ops { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 空状态 */
.fm-empty { text-align: center; padding: 56px 20px; color: var(--text-dim); }
.fm-empty-icon { font-size: 46px; margin-bottom: 14px; }
.fm-empty-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.fm-empty-desc { font-size: 13.5px; line-height: 1.7; max-width: 460px; margin: 0 auto 20px; }

/* 成片播放弹窗 */
.fm-modal-mask { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.7); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.fm-modal { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; width: min(440px, 92vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,.6); overflow: hidden; }
.fm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; color: var(--text); flex-shrink: 0; }
.fm-modal video { width: 100%; max-height: 62vh; background: #000; display: block; }
.fm-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--line); flex-shrink: 0; }
.fm-modal-foot .muted { font-size: 12.5px; }

/* 通用辅助 */
.ok { color: var(--green); }
.warn { color: var(--gold-soft); }
.btn-danger { background: rgba(214,90,90,.14); color: var(--red); border: 1px solid rgba(214,90,90,.4); }
.btn-danger:hover { background: rgba(214,90,90,.22); border-color: var(--red); }

/* —— 响应式 —— */
@media (max-width: 900px) {
  .sb-main { flex-direction: column; }
  .sb-left { width: auto; flex: 0 0 auto; }
}

/* —— 批量生视频弹窗（Phase C 增强） —— */
.sb-batch-params { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px; background: var(--bg-2, #16181f); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.sb-bp-row { display: flex; align-items: center; gap: 8px; }
.sb-bp-row > label { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.sb-bp-row select { background: var(--bg-3, #1f2230); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 13px; }
.sb-bp-toggle { flex-basis: 100%; }
.sb-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.sb-switch input { accent-color: var(--gold); width: 15px; height: 15px; }
.sb-batch-progress { font-size: 13px; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-batch-bar .spacer { flex: 1; }
.sb-batch-item { cursor: default; }
.sb-batch-item input[type="checkbox"] { flex: 0 0 auto; accent-color: var(--gold); }
.sb-batch-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 116px; }
.sb-batch-line.muted { font-size: 11px; color: var(--text-dim); }
.sb-batch-status { margin-left: auto; font-size: 14px; font-weight: 700; flex: 0 0 auto; padding-left: 6px; }

/* ════════════════════════════════════════════════════
   分镜板块 Storyboard（第三步：分镜 + 视频生成）
   ════════════════════════════════════════════════════ */

/* —— 缺失的基础组件补全 —— */
.btn-icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 7px; border: 1px solid var(--line); background: transparent;
  color: var(--text-dim); font-size: 16px; line-height: 1; cursor: pointer; transition: .12s;
}
.btn-icon:hover { color: #ff8a8a; border-color: #ff8a8a; }
.btn-icon.confirm { color: #fff; background: #e25656; border-color: #e25656; font-size: 12px; }
.btn-icon.confirm:hover { color: #fff; background: #c84646; border-color: #c84646; }
.tag-gold { color: #1a1308; background: var(--gold); border-color: var(--gold); }
.tag-green { color: #0c2a16; background: #5fd38a; border-color: #5fd38a; }
.tag-red { color: #fff; background: #e0556b; border-color: #e0556b; }
.spinner-sm {
  width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--gold);
  border-radius: 50%; animation: sb-spin .8s linear infinite; flex: 0 0 auto;
}
@keyframes sb-spin { to { transform: rotate(360deg); } }

/* —— 页面骨架 —— */
.sb-page { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 0; }
.sb-head { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 14px 0; flex-wrap: wrap; }
.sb-head-info { min-width: 0; text-align: center; }
.sb-title { font-size: 18px; font-weight: 800; color: var(--text); }
.sb-sub { display: none; }
.sb-head-ops { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding-left: 20px; border-left: 1px solid var(--line); }
.sb-head-ops .btn-sm { font-size: 13px; }
.sb-batch-progress-top {
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: var(--bg-3); border: 1px solid var(--gold);
  border-radius: 6px; padding: 3px 10px; white-space: nowrap;
}

.sb-main { display: flex; gap: 16px; flex: 1; min-height: 0; }
.sb-left {
  width: 380px; flex: 0 0 380px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
}
.sb-right {
  flex: 1; min-width: 0; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 18px;
}

.sb-panel-title {
  font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sb-panel-title .tag { font-size: 11px; }

/* —— 模式切换 —— */
.sb-mode { display: flex; gap: 8px; margin-bottom: 14px; }
.sb-mode-item {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 13px; color: var(--text-dim); cursor: pointer; user-select: none; transition: .12s;
}
.sb-mode-item:hover { color: var(--text); border-color: var(--gold); }
.sb-mode-item.checked { color: var(--gold-soft); border-color: var(--gold); background: rgba(201, 169, 97, .08); }
.sb-mode-item input { display: none; }

/* —— 字段 —— */
.sb-field { margin-bottom: 14px; }
.sb-field > label {
  display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600;
}
.sb-field textarea, .sb-field input {
  width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); padding: 10px 12px; font-size: 13.5px; font-family: inherit; resize: vertical;
}
.sb-field textarea { min-height: 84px; line-height: 1.55; }
.sb-field input { height: 38px; }
.sb-field textarea:focus, .sb-field input:focus { outline: none; border-color: var(--gold); }

/* —— 角色 / 场景 区块 —— */
.sb-sec { margin-bottom: 14px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.sb-sec-head { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.sb-sec-head .btn-mini { padding: 2px 10px; font-size: 15px; line-height: 1; }

.sb-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.sb-row + .sb-row { border-top: 1px solid var(--line); }
.sb-row-av {
  width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex: 0 0 34px;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center;
}
.sb-row-av img { width: 100%; height: 100%; object-fit: cover; }
.sb-no-av { font-size: 16px; }
.sb-row-name { flex: 1; min-width: 0; }
.sb-row-name select {
  width: 100%; background: var(--bg-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 6px 8px; font-size: 13px;
}
.sb-row-name select:focus { outline: none; border-color: var(--gold); }
.sb-row-sub { font-size: 11px; color: var(--text-dim); flex: 0 0 auto; }

/* —— 右侧：生成面板 —— */
.sb-prompt-wrap { margin-bottom: 14px; }
.sb-prompt-wrap textarea {
  width: 100%; min-height: 150px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; color: var(--text); padding: 12px; font-size: 13px; line-height: 1.6;
  resize: vertical; font-family: inherit;
}
.sb-prompt-wrap textarea:focus { outline: none; border-color: var(--gold); }

.sb-refblock { background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; }
.sb-refblock-h { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.sb-refblock-h .muted { font-weight: 400; }
.sb-refblock-body {
  margin: 0; font-size: 12px; color: var(--text-dim); white-space: pre-wrap; line-height: 1.6;
  max-height: 160px; overflow-y: auto; font-family: inherit;
}

.sb-model-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.sb-model-row label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; flex: 0 0 auto; }
.sb-model-row select {
  flex: 1; background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.sb-model-row select:focus { outline: none; border-color: var(--gold); }

.sb-params { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.sb-param { display: flex; align-items: center; gap: 10px; }
.sb-param > label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; width: 48px; flex: 0 0 48px; }
.sb-param input[type=range] { flex: 1; accent-color: var(--gold); }
.sb-param-val { font-size: 13px; color: var(--text); width: 40px; text-align: right; flex: 0 0 40px; }
.sb-static { font-size: 13px; color: var(--text-dim); }

.sb-pills { display: flex; gap: 6px; flex: 1; }
.sb-pill {
  padding: 6px 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px;
  color: var(--text-dim); cursor: pointer; user-select: none; transition: .12s;
}
.sb-pill:hover { color: var(--text); border-color: var(--gold); }
.sb-pill.active { color: #1a1308; background: var(--gold); border-color: var(--gold); font-weight: 600; }

/* —— 产出预览 —— */
.sb-out {
  margin-bottom: 14px; min-height: 200px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sb-out-img, .sb-out-vid { max-width: 100%; max-height: 360px; display: block; }
.sb-out-empty, .sb-out-loading {
  color: var(--text-dim); font-size: 13px; padding: 40px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: column;
}

/* —— 操作条 —— */
.sb-genbar { display: flex; align-items: center; gap: 10px; }
.sb-cost { font-size: 14px; font-weight: 700; color: var(--gold); }

/* —— 底部分镜表 —— */
.sb-strip { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.sb-strip-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--text); }
.sb-strip-head .muted { font-weight: 400; font-size: 12px; }
.sb-strip-head .btn-mini { margin-left: auto; }
.sb-strip-list { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.sb-thumb {
  flex: 0 0 132px; width: 132px; background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; cursor: pointer; transition: .12s; position: relative;
}
.sb-thumb:hover { border-color: var(--gold); transform: translateY(-2px); }
.sb-thumb.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.sb-thumb-pic { width: 100%; aspect-ratio: 9 / 16; background: var(--bg-2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sb-thumb-pic img, .sb-thumb-pic video { width: 100%; height: 100%; object-fit: cover; }
.sb-thumb-no { font-size: 26px; opacity: .5; }
.sb-thumb-idx { position: absolute; top: 6px; left: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 11px; padding: 1px 6px; border-radius: 5px; }
.sb-thumb-txt { font-size: 11.5px; color: var(--text-dim); padding: 6px 8px; line-height: 1.4; max-height: 42px; overflow: hidden; }
.sb-thumb .tag { position: absolute; top: 6px; right: 6px; font-size: 10px; padding: 2px 6px; }

/* —— 空状态 —— */
.sb-empty-state { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 40px; }
.sb-empty-icon { font-size: 46px; }
.sb-empty-title { font-size: 16px; font-weight: 700; color: var(--text); }
.sb-empty-hint { font-size: 13px; color: var(--text-dim); line-height: 1.6; max-width: 320px; }
/* 空分镜页：一键拆镜 / 多AI对比选镜 两个并列大按钮，中央显眼 */
.sb-empty-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 4px; }
.sb-empty-btns .btn { min-width: 168px; padding: 12px 22px; font-size: 15px; font-weight: 600; }
.sb-empty-btns .btn-cmp { position: relative; box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(212,175,55,.45); }
.sb-empty-btns .btn-cmp::after { content: '推荐'; position: absolute; top: -9px; right: -8px; background: var(--gold); color: #1a1206; font-size: 10px; font-weight: 700; line-height: 1; padding: 3px 6px; border-radius: 8px; }
.sb-right-empty { color: var(--text-dim); font-size: 14px; padding: 40px; text-align: center; }

/* —— 批量生视频弹窗 —— */
.sb-batch-bar { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.sb-batch-bar label { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sb-batch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 55vh; overflow-y: auto; }
.sb-batch-item { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: .12s; }
.sb-batch-item:hover { border-color: var(--gold); }
.sb-batch-thumb { width: 40px; height: 40px; border-radius: 7px; overflow: hidden; flex: 0 0 40px; background: var(--bg-3); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sb-batch-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-batch-txt { font-size: 12px; color: var(--text); line-height: 1.4; }
.sb-batch-cost { font-size: 13px; color: var(--gold); font-weight: 600; }

/* —— 响应式 —— */
@media (max-width: 900px) {
  .sb-main { flex-direction: column; }
  .sb-left { width: auto; flex: 0 0 auto; }
}

/* —— 批量生视频弹窗（Phase C 增强） —— */
.sb-batch-params { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px; background: var(--bg-2, #16181f); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; }
.sb-bp-row { display: flex; align-items: center; gap: 8px; }
.sb-bp-row > label { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
.sb-bp-row select { background: var(--bg-3, #1f2230); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; font-size: 13px; }
.sb-bp-toggle { flex-basis: 100%; }
.sb-switch { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
.sb-switch input { accent-color: var(--gold); width: 15px; height: 15px; }
.sb-batch-progress { font-size: 13px; color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-batch-bar .spacer { flex: 1; }
.sb-batch-item { cursor: default; }
.sb-batch-item input[type="checkbox"] { flex: 0 0 auto; accent-color: var(--gold); }
.sb-batch-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 116px; }
.sb-batch-line.muted { font-size: 11px; color: var(--text-dim); }
.sb-batch-status { margin-left: auto; font-size: 14px; font-weight: 700; flex: 0 0 auto; padding-left: 6px; }

/* ==================================================================
   分镜板块（Shots）—— 三栏布局（集数 | 分镜表 | 视频生成）
   2026-08-03 随前端三栏重写（任务 #158）新增；深色 + 金色，沿用全局 .btn 体系
   ================================================================== */
/* 2026-08-05 flex 自适应铺满视口，学习剧创布局：
   集数列固定 80px，其它三栏 flex 比例分配剩余空间 */
.sb-3col {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.sb-3col > aside,
.sb-3col > div { min-height: 0; }

/* 集数栏 + 工作区统一极细滚动条，省空间 */
.sb-eps, .sb-workspace {
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 97, .35) transparent;
}
.sb-eps::-webkit-scrollbar,
.sb-workspace::-webkit-scrollbar { width: 4px; }
.sb-eps::-webkit-scrollbar-track,
.sb-workspace::-webkit-scrollbar-track { background: transparent; }
.sb-eps::-webkit-scrollbar-thumb,
.sb-workspace::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, .35);
  border-radius: 2px;
}
.sb-eps::-webkit-scrollbar-thumb:hover,
.sb-workspace::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 97, .55); }

/* —— 左栏：集数列 —— */
.sb-eps {
  width: 100px; flex: 0 0 100px;
  height: 100%; overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;        /* 2026-08-04 修复：改为 auto 允许滚轮 */
}
.sb-eps-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 14px 8px 12px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.sb-eps-head .muted { font-weight: 500; font-size: 12px; }
.sb-ep-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 窄栏省空间：极细滚动条 */
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 169, 97, .35) transparent;
}
.sb-ep-list::-webkit-scrollbar { width: 4px; }
.sb-ep-list::-webkit-scrollbar-track { background: transparent; }
.sb-ep-list::-webkit-scrollbar-thumb {
  background: rgba(201, 169, 97, .35);
  border-radius: 2px;
}
.sb-ep-list::-webkit-scrollbar-thumb:hover { background: rgba(201, 169, 97, .55); }
.sb-ep {
  position: relative;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 8px;
  cursor: pointer;
  transition: .12s;
}
.sb-ep:hover { border-color: var(--gold); }
.sb-ep.active {
  border-color: var(--gold);
  background: rgba(201, 169, 97, .10);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.sb-ep-all { border-style: dashed; }
.sb-ep-no {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--gold);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-ep-all .sb-ep-no { font-size: 14px; }
.sb-ep-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 7px;
  /* 窄左栏 (116px) 防溢出 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-ep-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11.5px;
}
.sb-ep-count {
  color: var(--text-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1px 8px;
}
.sb-ep-done {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  border-radius: 20px;
  padding: 1px 8px;
}
.sb-ep-warn {
  color: var(--gold-soft);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
  border-radius: 20px;
  padding: 1px 8px;
}
.sb-ep-break {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-dim);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sb-ep-break:hover { color: var(--gold); border-color: var(--gold); }

/* ═══════════════════════════════════════════
   整体工作区：按分镜分行，每行三列并排（分镜信息 / 分镜视频生成 / 视频预览），整区一起滚动
   ═══════════════════════════════════════════ */
.sb-workspace {
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 2px;
  padding-bottom: 24px;
}
.sb-shot-rows { display: flex; flex-direction: column; gap: 16px; overflow: hidden; }  /* 兜底防列宽溢出页面 */
.sb-shot-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;   /* 分镜信息略宽，生成/预览适中 */
  gap: 6px;
  align-items: stretch;
  scroll-margin-top: 12px;
  min-width: 0;          /* 防止 grid 子项撑破父容器 */
  max-width: 100%;
}
.sb-shot-row.active {
  border-radius: 12px;
  /* 取消了金线框 box-shadow（宝爸要求版面统一），保留淡金背景作为选中提示 */
  background: rgba(201, 169, 97, .05);
  padding: 6px;
  margin: -6px;
}
.sb-board-col,
.sb-gen-col,
.sb-preview-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;        /* 拖拽手柄定位锚点 */
}
/* ★ 方案一（2026-08-12 宝爸）：三列底部虚线统一用 flex margin-top:auto 顶到模块底，
 *   列本身由 grid stretch 等高 → 三根虚线必然同一水平线，绝不靠 px 计算 */
.sb-board-col,
.sb-gen-col,
.sb-preview-col {
  height: 100%;              /* 让 grid stretch 生效（grid 默认 align-items:stretch 即可，兜底） */
}
.sb-col-divider {
  margin-top: auto;          /* 自动推到底部 */
  border-bottom: 1px dashed var(--line);
  padding-top: 8px;
  margin-bottom: 2px;
}
/* 视频预览列：固定宽度（fr 自适应，不参与拖拽），左 border 区分列 */
.sb-preview-col {
  border-left: 1px solid var(--line);
  padding-left: 8px;
}
/* 列间拖拽手柄：每列【左边沿】放 14px 宽（好抓），始终可见灰线，hover/拖动时金色加粗 */
.sb-col-resizer {
  position: absolute;
  left: -7px; top: 0; bottom: 0;
  width: 14px;
  cursor: col-resize;
  z-index: 2;
  background: transparent;
  user-select: none;
  touch-action: none;
}
.sb-col-resizer::after {
  content: '';
  position: absolute;
  left: 50%; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--line);
  transform: translateX(-50%);
  transition: background .12s, width .12s;
}
.sb-col-resizer:hover::after,
.sb-col-resizer.dragging::after {
  background: var(--gold);
  width: 2px;
}
/* 列标题（三列统一：金色胶囊 + 居中 + 底部虚线分隔，替代原散开样式）
 * 三列标题胶囊合并定义见 2774 行（.sb-shot-head .sb-shot-no 与 .sb-col-title 合并，统一样式） */

.sb-eps-empty {
  margin: auto;
  text-align: center;
  padding: 26px 18px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
}
.sb-eps-empty .big { font-size: 28px; display: block; margin-bottom: 8px; opacity: .6; }
.sb-eps-note {
  font-size: 11px;
  color: var(--text-dim);
  padding: 4px 12px 12px;
  text-align: center;
  line-height: 1.5;
}

/* —— 中栏：分镜信息（flex 自适应） —— */
.sb-board {
  flex: 1; min-width: 280px;
  height: 100%; overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sb-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.sb-board-title { font-size: 15px; font-weight: 800; color: var(--text); }
.sb-board-title .muted { font-weight: 500; font-size: 12.5px; }
.sb-board > .sb-empty-state { flex: 1; }
.sb-table {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 8px 8px;
}
.sb-thead, .sb-row-item {
  display: grid;
  grid-template-columns: 76px minmax(200px, 1.5fr) minmax(130px, .9fr) minmax(130px, .9fr) minmax(130px, .9fr) minmax(168px, auto);
  gap: 12px;
  align-items: stretch;
}
.sb-thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-2);
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: .2px;
}
.sb-row-item {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.sb-row-item:hover { background: rgba(255, 255, 255, .025); }
.sb-row-item.active {
  background: rgba(201, 169, 97, .08);
  box-shadow: inset 2px 0 0 var(--gold);
}
.sb-td-no, .sb-td-desc, .sb-td-char, .sb-td-scene, .sb-td-prop, .sb-td-ops {
  min-width: 0;
  font-size: 13px;
  color: var(--text);
}
.sb-no-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}
.sb-no-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 7px;
  overflow: hidden;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-dim);
}
.sb-no-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-desc-txt { line-height: 1.5; color: var(--text); margin-bottom: 4px; }
.sb-desc-dia { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.sb-desc-cam { font-size: 12px; color: var(--gold-soft); margin-top: 2px; }

/* chips（出镜角色 / 分镜场景 / 场景道具） */
.sb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sb-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 9px 3px 3px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text);
  line-height: 1;
}
.sb-chip img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 22px;
  background: var(--bg-2);
}
.sb-chip i.sb-chip-no {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  font-style: normal;
  font-size: 13px;
  flex: 0 0 22px;
}
.sb-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-chip-empty { color: var(--text-dim); font-size: 12px; font-style: italic; }

/* 生成操作列 */
.sb-td-ops { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.sb-td-ops .btn { width: 100%; }
.sb-row-busy { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gold-soft); }
.sb-row-del { align-self: flex-end; }

/* 双字段行（时长 / 清晰度） */
.sb-field-2 { display: flex; gap: 12px; }
.sb-field-2 > .sb-field { flex: 1; min-width: 0; }

/* —— 右栏：分镜视频生成（flex 1.2 略宽，表单内容多） —— */
.sb-gen {
  flex: 1.2; min-width: 360px;
  height: 100%; overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sb-gen > .sb-panel-title {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-2);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  flex: 0 0 auto;
  margin: 0;
}
/* —— 第4栏：视频预览（flex 自适应） —— */
.sb-preview {
  flex: 1; min-width: 280px;
  height: 100%; overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.sb-preview > .sb-panel-title {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--bg-2);
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  flex: 0 0 auto;
  margin: 0;
}
.sb-preview .sb-preview-tools { margin-top: 14px; }
.sb-preview .sb-preview-frame { margin-bottom: 14px; }
.sb-gen > .sb-mode { margin: 16px 16px 0; }
.sb-gen > .sb-field,
.sb-gen > .sb-field-2,
.sb-gen > .sb-refblock,
.sb-gen > .sb-model-row,
.sb-gen > .sb-params,
.sb-gen > .sb-out { margin-left: 16px; margin-right: 16px; }
.sb-gen > .sb-gen-footer { margin: 10px 16px 14px; }
.sb-right-empty { color: var(--text-dim); font-size: 13.5px; padding: 40px 20px; text-align: center; line-height: 1.6; }

/* 产出预览 */
.sb-out-vid, .sb-out-img {
  width: 100%;
  max-height: 320px;
  border-radius: 10px;
  background: #000;
  display: block;
  object-fit: contain;
}
.sb-out-sub { margin-top: 10px; }
.sb-out-sub .muted { display: block; font-size: 11.5px; margin-bottom: 6px; }
.sb-out-sub img {
  width: 100%;
  max-height: 180px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--bg-3);
  border: 1px solid var(--line);
}

/* 窄屏兜底：工作区内每行三列折叠为单列，集数栏保持 */
@media (max-width: 1080px) {
  .sb-3col { flex-direction: column; width: 100%; }
  .sb-workspace { height: auto; max-height: 75vh; }
  .sb-shot-row { grid-template-columns: 1fr; }
  .sb-preview-col { border-left: none; padding-left: 0; }
  .sb-eps { flex: 0 0 80px; }
}
/* ===== 分镜 Step 3 改造：分镜卡片预览区 + 黄色提示词 + 工具栏 ===== */

/* drawBoard 顶部工具栏 */
.sb-board-head { display: flex; align-items: center; gap: 12px; }
.sb-board-title { flex: 1; min-width: 0; }
.sb-board-tools { display: flex; gap: 8px; flex: 0 0 auto; }

/* drawGen 黄色提示词 */
.sb-tip {
  margin: 14px 16px 0;
  padding: 9px 12px;
  background: rgba(201, 169, 97, .08);
  border: 1px solid rgba(201, 169, 97, .25);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gold-soft);
}
.sb-tip code {
  display: inline-block;
  padding: 0 5px;
  margin: 0 1px;
  background: rgba(201, 169, 97, .18);
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--gold);
}

/* 版本下拉与模型等宽 */
.sb-gen .sb-field select,
.sb-gen .sb-field input { width: 100%; }

/* ===== 分镜卡片预览 ===== */
.sb-cards {
  margin-top: 20px;
  padding: 14px 4px 12px;
  border-top: 1px solid var(--line);
}
.sb-cards-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}
.sb-cards-title { color: var(--text); }
.sb-cards-head .muted { font-weight: 500; font-size: 12px; }
.sb-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
.sb-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
  display: flex;
  flex-direction: column;
}
.sb-card:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.sb-card.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 4px 12px rgba(201, 169, 97, .12);
}
.sb-card-thumb {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.sb-card-thumb img,
.sb-card-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-card-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 22px;
  gap: 4px;
}
.sb-card-noimg small { font-size: 11px; opacity: .7; }
.sb-card-info { padding: 9px 11px 11px; }
.sb-card-no {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}
.sb-card-no .tag { font-size: 10.5px; font-weight: 600; padding: 1px 6px; }
.sb-card-desc {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-card-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.sb-card-char {
  font-size: 11px;
  padding: 1px 7px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text-dim);
}

/* 新增分镜卡片占位 */
.sb-card-add {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  background: transparent;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-dim);
}
.sb-card-add:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(201, 169, 97, .04);
}
.sb-card-add-plus { font-size: 28px; font-weight: 300; line-height: 1; }
.sb-card-add-label { font-size: 12.5px; font-weight: 600; }

/* ===== 中栏分镜表 6 列重新分配列宽 ===== */
.sb-thead, .sb-row-item {
  display: grid;
  grid-template-columns: 86px minmax(160px, 1.4fr) minmax(108px, .8fr) minmax(108px, .8fr) minmax(108px, .8fr) minmax(120px, auto);
  gap: 10px;
  align-items: stretch;
}
/* ===== 分镜 Step 3 DramaArt 版式 v2：全局模型 + 模式单选 + 上下两区块 + 拖拽 ===== */

/* 右上角全局模型下拉 */
.sb-global-model {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}
.sb-global-model .muted { font-size: 13px; }
.sb-global-model select {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 2px 6px;
  max-width: 150px;
}

/* 中栏顶部：生成模式单选（火山剧场规范） */
.sb-mode-inline {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 4px 12px;
  padding: 9px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text);
  flex: 0 0 auto;
}
.sb-mode-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.sb-mode-item input[type="radio"] {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.sb-mode-item:has(input:checked) { color: var(--gold); font-weight: 700; }

/* 中栏表格：分镜 / 描述 / 角色 / 场景 / 状态 / 操作 */
.sb-thead, .sb-row-item {
  display: grid;
  grid-template-columns: 82px minmax(150px, 1.4fr) minmax(104px, .8fr) minmax(96px, .7fr) minmax(84px, auto) minmax(92px, auto);
  gap: 10px;
  align-items: stretch;
}
.sb-td-status { display: flex; align-items: flex-start; padding-top: 3px; }
.sb-td-status .tag { font-size: 11px; font-weight: 600; padding: 2px 8px; }
.sb-td-ops { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: wrap; }
.sb-td-ops .btn-mini { white-space: nowrap; }

/* 中栏：分镜描述预览 2 行截断 */
.sb-desc-txt {
  line-height: 1.5;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-desc-dia {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.45;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 右栏：上下两区块（基础信息 / 视频生成），区块标题分隔 + 留白 */
.sb-block {
  margin: 14px 16px 0;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
}
.sb-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--line);
}
.sb-block .sb-field { margin-bottom: 10px; }
.sb-block .sb-field:last-child { margin-bottom: 0; }
.sb-block .sb-field-2 { margin-bottom: 10px; }
.sb-block .sb-field-2:last-child { margin-bottom: 0; }
.sb-block .sb-tip { margin: 0 0 10px; }
.sb-block .sb-params { margin: 4px 0 0; }

/* 第3栏「分镜视频生成」：主区块撑满剩余高度，底部条贴底 */
.sb-gen {
  display: flex;
  flex-direction: column;
}
.sb-block-gen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 0;
}
.sb-block-gen-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

/* ═══ 剧创式分镜视频生成：可编辑 Prompt + 参考素材 + @引用 ═══ */
.sb-gen-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
}
.sb-add-ref {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
}
.sb-add-ref:hover { background: rgba(212,175,55,0.12); }
.sb-gen-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
}

/* 参考素材缩略图条 */
.sb-ref-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 14px 8px;
}
.sb-ref-chip {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-3);
}
.sb-ref-chip img, .sb-ref-chip video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sb-ref-del {
  position: absolute; top: 1px; right: 1px;
  width: 16px; height: 16px; line-height: 14px;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 12px; cursor: pointer; padding: 0;
}
.sb-ref-del:hover { background: #c0392b; }

/* 可编辑 Prompt 区 */
/* 分镜框：工具栏 + 可编辑 prompt 一体（工具栏在框内顶部，视觉同一块） */
.sb-vp-wrap {
  margin: 4px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.sb-vp-wrap .sb-gen-toolbar {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
}
.sb-vp-edit {
  flex: 1;
  margin: 0;
  padding: 10px 12px;
  min-height: 180px;
  overflow-y: auto;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
  outline: none;
}
.sb-vp-edit:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,0.15); }
.vp-line { margin: 5px 0; line-height: 1.65; }
.vp-k { font-weight: 700; color: var(--gold); margin-right: 6px; }
.vp-constraint { color: var(--text-dim); font-style: italic; }
.vp-shot { font-weight: 700; color: var(--gold); margin-top: 8px; font-size: 13.5px; }
.vp-desc { padding-left: 6px; }
.vp-empty { color: var(--text-dim); font-style: italic; opacity: .75; padding-left: 6px; }
.vp-sec { font-weight: 800; margin: 14px 0 8px; padding: 5px 10px; color: var(--gold); background: rgba(212, 175, 55, .08); border-left: 3px solid var(--gold); border-radius: 4px; letter-spacing: .3px; }
.vp-dialog { font-style: italic; color: var(--text); }
.vp-sec { font-weight: 800; margin-top: 8px; color: var(--text); }

/* @引用标签 */
.at-ref {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  background: rgba(233,120,170,0.16);
  border: 1px solid rgba(233,120,170,0.5);
  color: #ff8fc3;
  border-radius: 5px;
  padding: 0 5px;
  margin: 0 1px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.at-ref:hover { background: rgba(233,120,170,0.28); }
.at-thumb { width: 16px; height: 16px; border-radius: 3px; object-fit: cover; }
.at-at { opacity: 0.8; }

/* 插入 @引用浮层 */
.sb-ref-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.sb-ref-tab {
  font-size: 13px; padding: 5px 12px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--bg-3); color: var(--text-dim); cursor: pointer;
}
.sb-ref-search { margin-bottom: 10px; }
.sb-ref-search input { width: 100%; background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 8px 12px; font-size: 14px; }
.sb-ref-search input:focus { outline: none; border-color: var(--gold); }
.sb-ref-tab.active { color: var(--gold); border-color: var(--gold); }
.sb-ref-list { max-height: 320px; overflow-y: auto; }
.sb-ref-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; border-bottom: 1px solid var(--line);
}
.sb-ref-opt:hover { background: var(--bg-3); }
.sb-ref-opt b { color: var(--gold); font-size: 12px; }

/* 输入 @ 自动弹出的内联引用选择器 */
.sb-at-popover {
  position: fixed;
  z-index: 1000;
  width: 240px;
  max-height: 280px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sb-at-popover .sb-ref-tabs { margin-bottom: 6px; flex: 0 0 auto; }
.sb-at-popover .sb-ref-tab { font-size: 12px; padding: 4px 10px; }
.sb-at-popover .sb-ref-list { max-height: 180px; overflow-y: auto; flex: 1 1 auto; }
.sb-at-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.sb-at-opt:hover, .sb-at-opt.active { background: var(--bg-3); }
.sb-at-opt img {
  width: 28px; height: 28px; object-fit: cover; border-radius: 4px;
  background: var(--bg-3); flex: 0 0 auto;
}
.sb-at-opt .sb-at-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-at-opt .sb-at-sub { font-size: 11px; color: var(--text-dim); margin-left: 4px; }
.sb-at-empty { padding: 14px 8px; text-align: center; font-size: 12px; color: var(--text-dim); }

/* 引用详情浮层 */
.sb-ref-pop { text-align: center; }
.sb-ref-pop-img { max-width: 200px; max-height: 200px; border-radius: 8px; margin-bottom: 10px; }
.sb-ref-pop-detail { text-align: left; font-size: 13px; line-height: 1.6; color: var(--text-dim); white-space: pre-wrap; margin-bottom: 12px; }

/* 底部紧凑参数 + 操作条：剧创式一排，左对齐不甩边 */
.sb-gen-footer {
  margin: 8px 12px 12px;
  padding: 6px 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;              /* 超窄时允许换行，不裁按钮 */
  gap: 6px 8px;
}
.sb-gen-footer-actions { margin-left: 0; }   /* 紧跟费用，不再甩到最右 */
.sb-gen-footer-item {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
}
.sb-gen-footer-item > label {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
}
/* 段选按钮（数量/清晰度）：替代下拉，更紧凑可点 */
.sb-seg { display: inline-flex; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px; }
.sb-seg-btn {
  min-width: 26px; padding: 3px 6px; font-size: 12px; line-height: 1;
  background: transparent; color: var(--text-dim);
  border: none; border-radius: 4px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .12s, color .12s;
}
.sb-seg-btn:hover { color: var(--text); background: var(--bg-1); }
.sb-seg-btn.active { background: var(--gold); color: #1a1206; font-weight: 700; }
/* 时长滑动条（剧创式，1-15s 拖动即改本镜时长） */
.sb-gen-footer::-webkit-scrollbar { display: none; }
.sb-dur-item { gap: 6px; }
.sb-dur-range {
  -webkit-appearance: none; appearance: none;
  width: 56px; height: 4px; border-radius: 3px;
  background: var(--line); cursor: pointer; outline: none;
}
.sb-dur-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg-2); cursor: pointer;
}
.sb-dur-range::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg-2); cursor: pointer;
}
.sb-dur-val {
  font-size: 12px; font-weight: 700; color: var(--gold);
  min-width: 24px; text-align: right; font-variant-numeric: tabular-nums;
}
.sb-gen-footer-cost {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  margin-left: 0;
  padding-left: 2px;
}
/* 底部参数/操作/费用之间的竖线分隔 */
.sb-gen-divider {
  width: 1px;
  height: 16px;
  background: var(--line);
  margin: 0 2px;
  opacity: .7;
  flex: 0 0 auto;
}
.sb-gen-footer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.sb-gen-footer-actions .btn-sm {
  padding: 5px 9px;
  font-size: 12px;
  white-space: nowrap;
}
/* 参数 summary 按钮（点击展开剧创式下拉面板） */
.sb-gen-params-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; font-size: 12px; font-weight: 600;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
  white-space: nowrap; transition: border-color .12s, background .12s;
}
.sb-gen-params-toggle:hover { border-color: var(--gold); }
.sb-gen-params-toggle[aria-expanded="true"] { border-color: var(--gold); background: var(--bg-1); }
.sb-gen-toggle-ico { opacity: .7; }
.sb-gen-summary { color: var(--text); font-variant-numeric: tabular-nums; }
.sb-gen-caret { opacity: .55; font-size: 10px; transition: transform .15s; }
.sb-gen-params-toggle[aria-expanded="true"] .sb-gen-caret { transform: rotate(180deg); }
/* 剧创式下拉面板：内联展开（文档流，不被 overflow 裁切） */
.sb-gen-popover {
  margin: 0 16px 14px;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.sb-gen-popover[hidden] { display: none; }
.sb-pop-row { display: flex; align-items: center; gap: 12px; }
.sb-pop-row > label {
  flex: 0 0 64px; font-size: 12px; color: var(--text-dim);
  font-weight: 600; white-space: nowrap;
}
.sb-pop-row-ctl { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sb-seg-inline { display: flex; flex-wrap: wrap; gap: 6px; }

/* 右栏：textarea/input 统一底色 */
.sb-block textarea,
.sb-block input,
.sb-block select {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  width: 100%;
  box-sizing: border-box;
}
.sb-block textarea:focus,
.sb-block input:focus,
.sb-block select:focus {
  outline: none;
  border-color: var(--gold);
}
.sb-block textarea[readonly] {
  color: var(--text-dim);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  background: var(--bg-2);
}

/* 三栏 grid：可拖拽右栏宽度（仅对显式标记的容器生效，不污染默认 .sb-3col） */
.sb-3col[data-resizable] {
  grid-template-columns: 116px var(--sb-mid-w, 300px) 10px minmax(0, 1fr);
  gap: 0 14px;
}
.sb-resizer { display: none; } /* 2026-08-04 三栏固定宽，不再拖拽 */
.sb-resizer::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 4px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  transition: background .12s;
}
.sb-resizer:hover::before,
.sb-resizer:active::before { background: var(--gold); }
/* ===== 剧集标题+简介折叠详情（火山剧场风格，中间面板顶部） ===== */

/* 主标题 + 简介条（学习剧创版式：第N集 + 标题一行，简介一行末尾跟「详情」） */
.sb-ep-banner {
  margin: 0 4px 12px;
  padding: 12px 14px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  flex: 0 0 auto;
}
.sb-ep-banner-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
}
.sb-ep-banner-num {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
}
.sb-ep-banner-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-ep-banner-fill {
  flex: 0 0 auto;
  margin-left: 10px;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, .45);
  background: rgba(212, 175, 55, .12);
  color: var(--gold, #d4a23a);
  cursor: pointer;
  white-space: nowrap;
}
.sb-ep-banner-fill:hover { background: rgba(212, 175, 55, .22); }
.sb-ep-banner-fill:disabled { opacity: .6; cursor: not-allowed; }
.sb-ep-banner-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.sb-ep-banner-summary {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-ep-banner-none { font-style: italic; opacity: .75; }
.sb-ep-banner-detail {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4d9fff;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s;
}
.sb-ep-banner-detail:hover { color: #7db8ff; text-decoration: underline; }

/* 详情浮窗（悬浮卡片，深色，带滚动） */
.sb-ep-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 9vh 20px 20px;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .12s;
}
.sb-ep-modal.show { opacity: 1; }
.sb-ep-modal-card {
  width: 520px;
  max-width: 92vw;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: #1c1f26;
  border: 1px solid rgba(201, 169, 97, .35);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.sb-ep-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #1c1f26;
  flex: 0 0 auto;
}
.sb-ep-modal-title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
}
.sb-ep-modal-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color .12s, background .12s;
}
.sb-ep-modal-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.sb-ep-modal-body {
  padding: 14px 16px;
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.75;
  color: #d6d9df;
  white-space: pre-wrap;
  word-break: break-word;
}
.sb-ep-modal-body::-webkit-scrollbar { width: 8px; }
.sb-ep-modal-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .18);
  border-radius: 4px;
}
/* ===== 分镜 Step 3 v3：分镜卡片堆叠（每个分镜独立完整表单） ===== */

.sb-shot-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 4px 20px;
}

.sb-shot-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .12s, box-shadow .12s;
}
/* 取消了金线框（border+inset box-shadow）和淡金背景（宝爸要求所有分镜版面格式统一，完全无 active 视觉差异） */
.sb-shot-card.active {
  /* 留空：active 与非 active 视觉完全一致 */
}

/* 卡片头：分镜号 + ID + 状态 + 每行独立模式单选 */
/* ★ 统一规范（2026-08-12 铁律）：head 不再画虚线——虚线统一由每列底部 .sb-col-divider 承载
 *   （margin-top:auto 顶到列底，三列 grid stretch 等高 → 虚线同线） */
.sb-shot-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 12px;
}
.sb-col-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin-bottom: 12px;
  padding-top: 14px;          /* ★ 对齐左列 .sb-shot-card padding:14px 16px 的 padding-top，让胶囊下沉到左列同垂直位置 */
}
/* ★ 2026-08-12：三列标题胶囊（"分镜1" / "分镜视频生成" / "视频预览"）合并统一样式
 *   font-size/font-weight/padding/border/border-radius/line-height/box-sizing 完全一致 → 视觉等大等高 */
.sb-shot-head .sb-shot-no,
.sb-col-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--gold);
  padding: 4px 14px;
  background: rgba(212, 175, 55, .10);
  border: 1px solid rgba(212, 175, 55, .45);
  border-radius: 999px;
  line-height: 1.4;          /* 显式行高避免被默认 line-height 撑高 */
  box-sizing: border-box;    /* border 不撑大盒 */
  display: inline-flex;      /* 显式 inline-flex 高度计算一致 */
  align-items: center;
}
.sb-shot-head .tag {
  font-size: 13px;          /* B版：12.5 -> 13 */
  font-weight: 600;
  padding: 4px 10px;
}
/* 状态 tag 与胶囊同基线，不改变虚线位置（虚线仍由 .sb-shot-head 的 padding-bottom 决定） */

/* 右栏：全能参考 / 首尾帧 单选组 */
.sb-mode-gen {
  margin: 0 0 10px;
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 13px;
  gap: 16px;
}
.sb-mode-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;          /* B版：13 -> 14 */
  padding: 4px 10px;
  border-radius: 20px;
  transition: .12s;
}
.sb-mode-radio:hover { color: var(--text); }
.sb-mode-radio input[type="radio"] {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.sb-mode-radio:has(input:checked) { color: var(--gold); font-weight: 700; background: rgba(201, 169, 97, .12); }

/* 首尾帧模式：首帧 / 尾帧 切换行 */
.sb-frame-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sb-frame-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sb-frame-tab {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--text-dim);
  font-size: 13px;          /* B版：12 -> 13 */
  font-weight: 600;
  padding: 6px 14px;        /* B版：5/12 -> 6/14 */
  border-radius: 8px;
  cursor: pointer;
  transition: .12s;
}
.sb-frame-tab:hover { border-color: var(--gold); color: var(--text); }
.sb-frame-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #111;
}
.sb-frame-arrow {
  color: var(--text-dim);
  font-size: 13px;
  user-select: none;
}
.sb-frame-hint {
  color: #9aa0aa;           /* B版：提亮，不再那么灰 */
  font-size: 13px;          /* B版：12 -> 13 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4 个子模块 */
.sb-shot-block {
  margin-bottom: 12px;
  padding: 12px;
  background: var(--bg-3);    /* B版：板块背景分区，一眼区分 */
  border: 1px solid var(--line);
  border-radius: 10px;
}
.sb-shot-block:last-child { margin-bottom: 0; }
.sb-shot-block-title {
  font-size: 14px;            /* B版：12.5 -> 14 */
  font-weight: 800;           /* B版：700 -> 800 */
  color: var(--text);
  margin-bottom: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--gold);   /* 金色左条，板块标题更醒目 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: .3px;
}
/* 分镜描述 textarea（2026-08-04 与分镜信息合并为一行标题后） */
.sb-shot-desc {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;          /* B版：13.5 -> 14 */
  font-family: inherit;
  resize: vertical;
  min-height: 84px;
  line-height: 1.6;         /* B版：1.55 -> 1.6 */
}
.sb-shot-desc:focus { outline: none; border-color: var(--gold); }

/* 剧创式分镜信息块（2026-08-06 重构：镜头标题 + 时长 + 站位 + 动作） */
.sb-shot-info { padding-bottom: 10px; }
.sb-shot-info-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid var(--gold);
}
.sb-dur-edit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color .12s, background .12s;
}
.sb-dur-edit:hover { border-color: var(--gold); background: var(--bg-1); }
.sb-dur-input {
  width: 52px;
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  background: var(--bg-2);
  border: 1px solid var(--gold);
  border-radius: 7px;
  text-align: center;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.sb-shot-field {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
}
.sb-shot-field-label {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 7px;
  line-height: 1.4;
  white-space: nowrap;
  margin-top: 2px;
}
.sb-edit-ref {
  flex: 1 1 auto;
  min-height: 38px;
  padding: 5px 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.sb-edit-ref:focus { border-color: var(--gold); }
.sb-edit-ref:empty::before {
  content: attr(placeholder);
  color: var(--text-faint, #8a8a8a);
}
.sb-edit-ref .at-ref { margin: 0 1px; vertical-align: baseline; }
/* 多行可编辑区（画面描述 / 台词）：更高、可滚动 */
.sb-edit-area { min-height: 92px; max-height: 240px; overflow-y: auto; }
/* 元信息一行：时段 / 灯光 / 情绪，紧凑左对齐 */
.sb-shot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 8px;
}
.sb-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 8px;
}
.sb-meta-chip > b { font-weight: 700; color: var(--text-faint, #8a8a8a); }
.sb-edit-inline {
  flex: 0 1 auto;
  min-height: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
}
.sb-edit-inline:focus { border-bottom-color: var(--gold); }
.sb-edit-inline:empty::before {
  content: attr(placeholder);
  color: var(--text-faint, #8a8a8a);
}
.sb-shot-add {
  background: none;
  border: 1px dashed var(--line);
  color: var(--gold);
  width: 28px;
  height: 28px;
  border-radius: 7px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.sb-shot-add:hover {
  border-color: var(--gold);
  color: #fff;
  background: rgba(201, 169, 97, .12);
}

/* 标题行右侧按钮不要被父元素截断 */
.sb-shot-block-title {
  position: relative;
  min-height: 28px;
}

/* 卡片内 textarea / select */
.sb-shot-card textarea,
.sb-shot-card select,
.sb-shot-card input {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  font-size: 13.5px;        /* B版：12.5 -> 13.5 */
  padding: 7px 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.sb-shot-card textarea::placeholder,
.sb-shot-card input::placeholder {
  color: #8a8f99;           /* B版：placeholder 提亮一档 */
  font-size: 13px;
}
.sb-shot-card textarea:focus,
.sb-shot-card select:focus,
.sb-shot-card input:focus {
  outline: none;
  border-color: var(--gold);
}

/* 空状态 */
.sb-shot-empty {
  font-size: 13px;          /* B版：12 -> 13 */
  color: #9aa0aa;           /* B版：提亮 */
  padding: 14px;
  text-align: center;
  background: var(--bg-3);
  border-radius: 8px;
  border: 1px dashed var(--line);
}

/* 分镜卡片的出镜角色/分镜场景/场景道具 三个区块：超过 240px 内部滚动
   避免角色多了整张卡片暴涨，下面区块被推出视口（2026-08-04 宝爸反馈） */
.sb-shot-chars,
.sb-shot-scenes,
.sb-shot-props {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}
/* 暗色主题滚动条美化 */
.sb-shot-chars::-webkit-scrollbar,
.sb-shot-scenes::-webkit-scrollbar,
.sb-shot-props::-webkit-scrollbar {
  width: 6px;
}
.sb-shot-chars::-webkit-scrollbar-thumb,
.sb-shot-scenes::-webkit-scrollbar-thumb,
.sb-shot-props::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 3px;
}

/* 分镜卡片内的「切换选择」按钮（替代原生 select，可搜索） */
.sb-pick-btn {
  width: 100%;
  text-align: left;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .12s, background .12s;
}
.sb-pick-btn:hover { border-color: var(--gold); background: var(--bg-2); }

/* 音色配置按钮（替换原无样式的音色 input） */
.sb-voice-btn {
  height: 30px;
  min-width: 0;
  padding: 0 10px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: var(--bg-3);
  color: var(--gold);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .12s, background .12s, color .12s;
}
.sb-voice-btn:hover { border-color: var(--gold); background: rgba(201, 169, 97, .1); }
.sb-voice-btn.set { border-style: solid; color: var(--text); border-color: var(--gold); }
.sb-voice-btn.set::before { content: '🎙 '; }
.sb-voice-modal { font-size: 14px; }


/* 单条角色条目：图标 + 角色下拉 + 音色输入 + … */
.sb-char-item {
  display: grid;
  grid-template-columns: 40px 1fr 1fr 28px;   /* B版：36 -> 40 头像列 */
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  padding: 8px 10px;                          /* B版：6/8 -> 8/10 */
  background: var(--bg-2);                     /* B版：bg-3 -> bg-2，板块(bg-3)内浮出 */
  border-radius: 8px;
}
.sb-char-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3c8b0 0%, #e89a78 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: 0 0 40px;
  overflow: hidden;
  color: #fff;
}
.sb-char-icon img { width: 100%; height: 100%; object-fit: cover; }
.sb-char-icon-fallback { font-size: 18px; }

/* 单张场景卡片：图片 + 名称下拉 + … */
.sb-scene-item,
.sb-prop-item {
  display: grid;
  grid-template-columns: 80px 1fr 28px;   /* B版：72 -> 80 缩略图列 */
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.sb-scene-thumb,
.sb-prop-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8e8e8 0%, #f3c8c8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--line);
}
.sb-scene-thumb img,
.sb-prop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sb-scene-empty-icon,
.sb-prop-empty-icon {
  font-size: 26px;
  color: #c97a7a;
}

/* 卡片底部操作 */
.sb-shot-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;           /* 按钮太多时自动换行 */
}
/* 卡片底部「🎬 生成视频」金色主按钮（2026-08-04 宝爸反馈：让提交按钮长在分镜卡片底部） */
.sb-shot-foot .btn-mini.gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  border-color: var(--gold);
  color: #1a1410;
  font-weight: 600;
  padding: 4px 12px;
}
.sb-shot-foot .btn-mini.gold:hover { filter: brightness(1.05); }
.sb-shot-foot .btn-mini.gold:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.5); }
/* ===== 大预览播放器（A1 自适应 + A3 比例切换 + 上/下一镜） ===== */

/* 工具条：‹ 比例切换 › */
.sb-preview-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 16px 0;   /* 移到视频区下方显示 */
}
.sb-prev-btn {
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--text);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .12s, color .12s;
}
.sb-prev-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.sb-prev-btn:disabled { opacity: .35; cursor: not-allowed; }

.sb-preview-ars {
  display: flex;
  gap: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2px;
}
.sb-preview-ar {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 3px 9px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.sb-preview-ar:hover { color: var(--text); }
.sb-preview-ar.active {
  background: var(--gold);
  color: #1a1206;
}

/* 预览框：aspect-ratio 由 CSS 变量控制（A1），默认 auto → 项目锁定 */
.sb-preview-frame {
  position: relative;
  margin: 0 16px;
  background: #000;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
/* 2026-08-04 23:11：未生成视频/无画面时整框隐藏，不显大黑块 */
.sb-preview-frame:empty { display: none; }
/* auto：跟随项目锁定比例（默认 9:16 竖屏） */
.sb-preview-frame[data-ar="auto"] {
  aspect-ratio: var(--project-ar, 9/16);
  max-height: 58vh;
}
.sb-preview-frame[data-ar="9/16"]  { aspect-ratio: 9/16; max-height: 58vh; }
.sb-preview-frame[data-ar="16/9"]  { aspect-ratio: 16/9; max-height: 46vh; }
.sb-preview-frame[data-ar="1/1"]   { aspect-ratio: 1/1;  max-height: 46vh; }

/* 视频/图片完整显示，不留边 */
.sb-preview-frame .sb-out-vid,
.sb-preview-frame .sb-out-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
}
.sb-preview-frame .sb-out-vid { max-height: 100%; }

/* 空态 / 加载态 */
.sb-preview-frame .sb-out-empty {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  line-height: 1.6;
  padding: 24px;
}
.sb-preview-frame .sb-out-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gold-soft);
  font-size: 13px;
  padding: 24px;
}

/* ── 中栏分镜卡片内嵌小预览位（2026-08-04 宝爸：一个分镜对应一个预览）── */
.sb-preview-inline {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.sb-preview-inline .sb-preview-inner {
  aspect-ratio: 9 / 16;
  max-height: 200px;
  min-height: 120px;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
}
.sb-preview-inline .sb-preview-inner img,
.sb-preview-inline .sb-preview-inner video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 内嵌+右栏主占位符共享占位系统 */
.sb-out-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-dim);
  padding: 16px 8px;
}
.sb-out-placeholder .sb-placeholder-icon { font-size: 36px; opacity: .4; }
.sb-out-placeholder .sb-placeholder-label { font-size: 12.5px; font-weight: 700; }
.sb-out-placeholder .sb-placeholder-hint { font-size: 11px; opacity: .6; }
.sb-out-placeholder.large { padding: 32px; }
.sb-out-placeholder.large .sb-placeholder-icon { font-size: 56px; }
.sb-out-placeholder.large .sb-placeholder-label { font-size: 14px; }
.sb-out-placeholder.large .sb-placeholder-hint { font-size: 12px; }

/* ═══════════════════════════════════════════ */
/* 视频 Tab（第4步）                                  */
/* ═══════════════════════════════════════════ */

.vd-page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 左侧集数列表 */
.vd-eps {
  width: 104px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.vd-eps-head {
  padding: 12px 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.vd-eps-list {
  flex: 1;
  overflow-y: auto;
}
.vd-ep {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.vd-ep:hover { background: var(--bg-3); }
.vd-ep.active {
  background: var(--bg-3);
  border-left: 3px solid var(--gold);
}
.vd-ep-no {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.vd-ep-title {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vd-ep-count {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.vd-eps-empty {
  padding: 30px 10px;
  text-align: center;
}

/* 主区域 */
.vd-main {
  flex: 1;
  display: flex;
  min-height: 0;
}
.vd-player-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 播放器 */
.vd-player {
  flex: 1;
  background: #000;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.vd-player-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
}
.vd-player-label {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.vd-player-edit {
  background: #378ADD;
  color: #fff;
  border: none;
  padding: 5px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.vd-player-edit:hover { opacity: 0.85; }
.vd-player-edit:disabled { opacity: 0.4; cursor: not-allowed; }

.vd-player-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.vd-player-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.vd-player-empty {
  color: var(--text-dim);
  font-size: 14px;
  text-align: center;
  line-height: 1.8;
}
.vd-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

/* 播放控制栏 */
.vd-controls {
  height: 46px;
  background: #1a1c23;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
  flex-shrink: 0;
}
.vd-ctrl-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 4px;
  transition: background 0.15s;
  text-decoration: none;
}
.vd-ctrl-btn:hover { background: rgba(255,255,255,.1); }
.vd-timecode {
  font-size: 12px;
  color: var(--text-dim);
  min-width: 80px;
  text-align: center;
  font-family: var(--font-mono, monospace);
}
.vd-ctrl-spacer { flex: 1; }
.vd-speed {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  cursor: pointer;
}

/* 底部时间轴 */
.vd-timeline {
  height: 140px;
  flex-shrink: 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vd-tl-ruler {
  height: 30px;
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--line);
}
.vd-tl-mark {
  position: absolute;
  bottom: 13px;
  font-size: 10px;
  color: var(--text-dim);
  transform: translateX(-50%);
  white-space: nowrap;
}
.vd-tl-pointer {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--red);
  z-index: 2;
  transition: left 0.15s linear;
}

.vd-tl-cards {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* 分镜卡片 */
.vd-card {
  width: 120px;
  min-height: 90px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s;
}
.vd-card:hover { border-color: var(--text-dim); }
.vd-card.active { border-color: var(--gold); }
.vd-card.has-video { border-color: var(--green); }
.vd-card.has-video.active { border-color: var(--gold); }

.vd-card-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.vd-card-ph-icon {
  font-size: 20px;
  margin-bottom: 4px;
  opacity: 0.4;
}
.vd-card-ph-text {
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
}

.vd-card-img {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.vd-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vd-card-vid-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,.6);
}

.vd-card-info {
  padding: 4px 8px 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  gap: 2px;
}
.vd-card-seq {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}
.vd-card-dur {
  font-size: 11px;
  color: var(--text-dim);
}

/* 编辑弹窗 */
.vd-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vd-modal {
  width: min(520px, 92vw);
  max-height: 85vh;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.vd-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
}
.vd-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vd-modal-body .field label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.vd-modal-body .field textarea,
.vd-modal-body .field input,
.vd-modal-body .field select {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
}
.vd-modal-actions {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  gap: 8px;
}
/* ================= AI 群聊（chat） ================= */
/* AI 群聊暗色色板：放 :root 而非 .ch-page —— 确认弹窗 .ch-modal* 挂在 document.body 上，
   作用域变量够不着。略深一档（比左侧栏更沉），保留金色作强调。 */
:root {
  --ch-bg:        #0b0d11;
  --ch-surface:   #14171d;
  --ch-surface-2: #1a1e26;
  --ch-input:     #0f1218;
  --ch-line:      #2a313c;
  --ch-text:      #e8e6e1;
  --ch-text-dim:  #9aa3af;
  --ch-text-mute: #6b7480;
  --ch-gold:      #C9A961;
  --ch-gold-soft: #e3c989;
  --ch-gold-a08:  rgba(201, 169, 97, .10);
  --ch-gold-a12:  rgba(201, 169, 97, .16);
  --ch-gold-a30:  rgba(201, 169, 97, .32);
  --ch-on-gold:   #1a1206;
  --ch-red:       #d65a5a;
}
/* height 用 100% 而非 calc(100vh - 52px)：父级 .view 是 flex:1 高度确定的滚动容器，
   100% 恰好等于「可用高度 - topbar - view padding」，桌面(116px)/移动(84px) 自动适配。
   原写死 52px 会溢出 64px，导致 .view 出现外层滚动条、输入栏被顶出折叠线。 */
.ch-page { position: relative; display: flex; height: 100%; min-height: 0; background: var(--ch-bg); color-scheme: dark; overflow: hidden; }

/* 首屏骨架屏 */
.ch-skel-block, .ch-skel-line { max-width: 860px; margin: 0 auto 14px; border-radius: 12px; background: rgba(255,255,255,.05); animation: ch-skel-pulse 1.2s ease-in-out infinite; }
.ch-skel-block { height: 72px; width: 100%; }
.ch-skel-line { height: 14px; width: 100%; }
@keyframes ch-skel-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
/* ---- 右侧聊天区（黑底白字，与 Studio 深色外壳统一） ---- */
.ch-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--ch-bg); color: var(--ch-text); }

/* ---- 顶部栏：C方案（返回 + 会话标题 + 历史下拉 + 单/多切换pill） ---- */
.ch-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--ch-line); background: var(--ch-surface); flex-shrink: 0; min-height: 52px; }
.ch-topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; position: relative; }
.ch-topbar-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ch-home-link { background: transparent; border: none; color: var(--ch-text-dim); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: .12s; white-space: nowrap; line-height: 1; }
.ch-home-link:hover { color: var(--ch-gold-soft); background: var(--ch-gold-a08); }
.ch-room-title-btn { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; border: 1px solid transparent; color: var(--ch-text); font-size: 14px; font-weight: 500; cursor: pointer; padding: 5px 10px; border-radius: 8px; transition: .12s; font-family: inherit; }
.ch-room-title-btn:hover { background: rgba(255,255,255,.05); border-color: var(--ch-line); }
.ch-history-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ch-line); background: transparent; color: var(--ch-text-dim); font-size: 14px; cursor: pointer; transition: .12s; flex-shrink: 0; }
.ch-history-btn:hover { color: var(--ch-gold-soft); border-color: var(--ch-gold); background: var(--ch-gold-a08); }
.ch-history-pop { position: absolute; top: calc(100% + 8px); left: 36px; width: 280px; max-height: 60vh; overflow-y: auto; background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.45); padding: 6px; z-index: 50; }
.ch-history-item { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 7px; color: var(--ch-text-dim); font-size: 13px; cursor: pointer; }
.ch-history-item:hover { background: rgba(255,255,255,.06); color: var(--ch-text); }
.ch-history-item.active { color: var(--ch-gold-soft); background: var(--ch-gold-a12); }
.ch-history-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-history-pin { font-size: 11px; }
.ch-history-ops { display: none; gap: 2px; }
.ch-history-item:hover .ch-history-ops { display: flex; }
.ch-history-ops .ch-op { width: 22px; height: 22px; border: none; background: var(--ch-surface-2); color: var(--ch-text-dim); border-radius: 5px; font-size: 11px; cursor: pointer; line-height: 1; }
.ch-history-ops .ch-op:hover { color: var(--ch-gold-soft); }
.ch-history-ops .ch-op-del:hover { color: var(--ch-red); }
.ch-history-empty { padding: 12px 10px; color: var(--ch-text-mute); font-size: 12px; text-align: center; }
.ch-history-new { padding: 9px 10px; border-radius: 7px; color: var(--ch-gold-soft); font-size: 13px; cursor: pointer; text-align: center; border-top: 1px solid var(--ch-line); margin-top: 4px; }
.ch-history-new:hover { background: var(--ch-gold-a08); }

/* 单/多 AI 模式切换 pill */
.ch-mode-pill { background: transparent; border: 1px solid var(--ch-line); color: var(--ch-text-dim); font-size: 13.5px; font-family: inherit; cursor: pointer; padding: 7px 16px; border-radius: 999px; transition: all .15s; white-space: nowrap; }
.ch-mode-pill:hover { color: var(--ch-text); }
.ch-mode-pill.on { border-color: var(--ch-gold); background: var(--ch-gold-a12); color: var(--ch-gold-soft); font-weight: 500; }

/* 输入区模型选择小 pill + 浮层 */
.ch-model-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ch-line); background: var(--ch-surface-2); color: var(--ch-text); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: .12s; white-space: nowrap; }
.ch-model-pill:hover { border-color: var(--ch-gold); color: var(--ch-gold-soft); }
.ch-model-pop { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.45); padding: 6px; z-index: 50; }
.ch-model-pop-head { display: flex; gap: 6px; padding: 2px 4px 8px; border-bottom: 1px solid var(--ch-line); margin-bottom: 6px; }
.ch-model-pop-head button { flex: 1; padding: 5px 0; border-radius: 6px; border: 1px solid var(--ch-line); background: var(--ch-surface-2); color: var(--ch-text-dim); font-size: 12px; cursor: pointer; font-family: inherit; }
.ch-model-pop-head button:hover { color: var(--ch-gold-soft); border-color: var(--ch-gold); }
.ch-model-pop-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: var(--ch-text); font-size: 13px; cursor: pointer; transition: .1s; }
.ch-model-pop-item:hover { background: rgba(255,255,255,.06); }
.ch-model-pop-item.on { background: var(--ch-gold-a12); color: var(--ch-gold-soft); }
.ch-model-pop-item.off { opacity: .5; }
.ch-pop-ico { font-size: 13px; }
.ch-pop-name { flex: 1; }
.ch-pop-off { font-size: 10.5px; color: var(--ch-text-mute); border: 1px solid var(--ch-line); padding: 1px 6px; border-radius: 10px; }
.ch-pop-check { font-size: 12px; color: var(--ch-gold-soft); }

.ch-msgs { flex: 1; overflow-y: auto; padding: 20px 28px 16px; background: var(--ch-bg); scrollbar-width: thin; scrollbar-color: #39414f transparent; }
.ch-msgs::-webkit-scrollbar { width: 8px; }
.ch-msgs::-webkit-scrollbar-thumb { background: #39414f; border-radius: 4px; }
.ch-msgs::-webkit-scrollbar-track { background: transparent; }

/* 欢迎态 */
.ch-welcome { max-width: 760px; margin: 16px auto 0; text-align: center; }
.ch-welcome-head { text-align: left; margin-bottom: 10px; }
.ch-welcome-title { font-size: 28px; font-weight: 700; color: var(--ch-text); margin-bottom: 12px; }
.ch-welcome-greet { font-size: 16px; color: var(--ch-text-dim); margin-bottom: 18px; }
.ch-sug-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 720px; margin: 0 auto 24px; }
.ch-sug { padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer; border: 1px solid var(--ch-line); border-radius: 999px; background: var(--ch-surface); color: var(--ch-text-dim); transition: all .15s; }
.ch-sug:hover { border-color: var(--ch-gold); color: var(--ch-gold-soft); background: var(--ch-gold-a08); box-shadow: 0 2px 8px rgba(0,0,0,.35); transform: translateY(-1px); }
.ch-mode-seg2 { display: inline-flex; align-items: stretch; gap: 0; background: rgba(255,255,255,0.05); border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.ch-mode-btn2 { border: none; border-radius: 8px; padding: 9px 24px; font-size: 14px; font-family: inherit; cursor: pointer; background: transparent; color: var(--ch-text-dim); transition: all .15s; }
.ch-mode-btn2:hover { color: var(--ch-text); }
.ch-mode-btn2.on { background: var(--ch-gold); color: var(--ch-on-gold); font-weight: 600; }
.ch-single-wrap2 { display: inline-flex; align-items: center; }
.ch-single-sel2 { padding: 9px 14px; font-size: 13px; font-family: inherit; cursor: pointer; border: none; border-left: 1px solid rgba(255,255,255,0.14); background: transparent; color: var(--ch-on-gold); outline: none; opacity: .82; }
.ch-single-sel2:focus, .ch-single-sel2:hover { opacity: 1; }
.ch-welcome-chips { justify-content: center; margin: 0 auto 8px; }
.ch-welcome-hint { font-size: 12px; color: var(--ch-text-mute); margin-top: 4px; }

.ch-msg { max-width: 880px; margin: 0 auto 18px; }
.ch-msg.ch-user { display: flex; justify-content: flex-end; gap: 8px; }
.ch-user-label { font-size: 11px; color: var(--ch-text-mute); align-self: flex-end; margin-bottom: 4px; }
.ch-bubble { max-width: 82%; padding: 12px 18px; border-radius: 14px 14px 4px 14px; background: var(--ch-gold-a12); border: 1px solid var(--ch-gold-a30); color: var(--ch-text); font-size: 15px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.ch-msg-att { margin-top: 6px; font-size: 11.5px; opacity: .75; }

/* ---- 多模型回答卡片（单列满宽） ---- */
.ch-msg.ch-ai { display: flex; flex-direction: column; gap: 10px; }
.ch-ai-col { display: flex; flex-direction: column; gap: 16px; }
.ch-ai-card { border: 1px solid var(--ch-line); border-radius: 12px; background: var(--ch-surface); overflow: hidden; }
.ch-ai-head { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid var(--ch-line); font-size: 13px; font-weight: 600; color: var(--ch-text); background: var(--ch-surface-2); }
.ch-ai-ico { font-size: 13px; }
.ch-ai-tag { margin-left: auto; font-size: 10.5px; font-weight: 400; color: var(--ch-text-mute); border: 1px solid var(--ch-line); padding: 1px 7px; border-radius: 10px; }
.ch-ai-tag.err { color: var(--ch-red); border-color: rgba(214, 90, 90, .4); }
.ch-ai-token { margin-left: auto; font-size: 10.5px; font-weight: 400; color: var(--ch-text-mute); }
.ch-ai-body { padding: 15px 18px; font-size: 15px; line-height: 1.8; color: var(--ch-text); }
.ch-ai-loading { border-color: var(--ch-gold-a30); }
.ch-ai-loading .ch-ai-body { display: flex; align-items: center; gap: 10px; color: var(--ch-text-dim); font-size: 12px; padding: 18px 14px; }
.ch-ai-off-body, .ch-ai-err-body { color: var(--ch-text-dim); font-size: 12px; }
.ch-ai-off { opacity: .55; }
.ch-ai-err { border-color: rgba(214, 90, 90, .35); }

.ch-typing-dots { display: inline-flex; gap: 3px; }
.ch-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ch-gold); animation: ch-bounce 1s infinite; }
.ch-typing-dots i:nth-child(2) { animation-delay: .15s; }
.ch-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }

/* ---- 融合 ---- */
.ch-fuse-row { display: flex; justify-content: center; margin-top: 4px; }
.ch-fuse-btn { padding: 7px 18px; border-radius: 20px; border: 1px solid var(--ch-gold); background: transparent; color: var(--ch-gold-soft); font-size: 12.5px; cursor: pointer; transition: all .15s; }
.ch-fuse-btn:hover { background: var(--ch-gold-a12); }
.ch-fuse-btn:disabled { opacity: .5; cursor: wait; }
.ch-fusion-card { border: 1px solid var(--ch-gold-a30); border-radius: 12px; background: var(--ch-gold-a08); overflow: hidden; }
.ch-fusion-head { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--ch-gold-soft); border-bottom: 1px solid var(--ch-gold-a30); }
.ch-fusion-body { padding: 13px 16px; font-size: 14.5px; line-height: 1.78; color: var(--ch-text); }

/* ---- 输入区模型选择容器（C方案：模型 pill + 浮层） ---- */
.ch-input-models { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 16px 0; background: var(--ch-surface); flex-wrap: wrap; }

/* 多 AI：模型答案卡片网格（桌面 2 列，窄屏 1 列） */
.ch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 720px) { .ch-grid { grid-template-columns: 1fr; } }

/* 单 AI：纯净对话气泡（豆包式，无卡片边框） */
.ch-msg.ch-ai-single { display: flex; gap: 10px; align-items: flex-start; }
.ch-single-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; margin-top: 2px; }
.ch-single-body { flex: 1; padding: 12px 16px; border-radius: 4px 14px 14px 14px; background: var(--ch-surface); border: 1px solid var(--ch-line); font-size: 15px; line-height: 1.8; color: var(--ch-text); }
.ch-single-body.ch-md { word-break: break-word; }
.ch-err-text { color: var(--ch-red); }

/* ---- 吸底输入框（尺寸：textarea 96px≈3行，上限 240px；底部悬空 8vh） ---- */
.ch-input-bar { border-top: 1px solid var(--ch-line); background: var(--ch-surface); padding: 10px 16px 14px; margin-bottom: 8vh; }
.ch-input-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ch-tool-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--ch-gold-a30); background: var(--ch-gold-a08); color: var(--ch-gold-soft); font-size: 14px; cursor: pointer; }
.ch-tool-btn:hover { border-color: var(--ch-gold); background: var(--ch-gold-a12); }
.ch-attach-name { font-size: 12px; color: var(--ch-gold-soft); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-single-tag { font-size: 12px; color: var(--ch-gold-soft); }
.ch-model-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.ch-chip { font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--ch-line); background: var(--ch-surface-2); color: var(--ch-text-dim); cursor: pointer; transition: all .15s; }
.ch-chip:hover:not(.off) { border-color: var(--ch-gold); color: var(--ch-gold-soft); background: var(--ch-gold-a08); }
.ch-chip.on { border-color: var(--ch-gold); color: var(--ch-gold-soft); background: var(--ch-gold-a12); font-weight: 500; }
.ch-chip.off { opacity: .45; cursor: not-allowed; }
.ch-chip-loading { font-size: 12px; color: var(--ch-text-mute); padding: 7px 0; }
.ch-input-bar textarea { width: 100%; min-height: 96px; max-height: 240px; resize: vertical; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--ch-line); background: var(--ch-input); color: var(--ch-text); font-size: 14.5px; line-height: 1.65; outline: none; box-sizing: border-box; }
.ch-input-bar textarea::placeholder { color: var(--ch-text-mute); }
.ch-input-bar textarea:focus { border-color: var(--ch-gold); }
.ch-input-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ch-input-hint { font-size: 11px; color: var(--ch-text-mute); }
.ch-send-btn { padding: 8px 26px; border-radius: 8px; border: none; background: var(--ch-gold); color: var(--ch-on-gold); font-size: 13px; font-weight: 700; cursor: pointer; transition: all .15s; }
.ch-send-btn:hover { background: var(--ch-gold-soft); }
.ch-send-btn:disabled { opacity: .5; cursor: wait; }

/* ---- 每轮工具栏：模式切换 + 导出 Word ---- */
.ch-bar-msg { max-width: 880px; margin: 4px auto 14px; }
.ch-turn-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: 10px; }
.ch-view-seg { display: inline-flex; border: 1px solid var(--ch-line); border-radius: 8px; overflow: hidden; background: var(--ch-surface-2); }
.ch-view-btn { background: transparent; border: none; color: var(--ch-text-dim); font-size: 12.5px; padding: 6px 16px; cursor: pointer; transition: .12s; font-family: inherit; }
.ch-view-btn:hover { color: var(--ch-text); }
.ch-view-btn.on { background: var(--ch-gold); color: var(--ch-on-gold); font-weight: 600; }
.ch-view-single { font-size: 12.5px; color: var(--ch-gold-soft); padding: 6px 12px; }
.ch-export-zone { display: flex; align-items: center; gap: 10px; }
.ch-export-append { font-size: 12px; color: var(--ch-text-dim); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ch-export-append input { cursor: pointer; accent-color: var(--ch-gold); }
.ch-export-btn { padding: 6px 16px; border-radius: 8px; border: 1px solid var(--ch-gold); background: var(--ch-gold-a12); color: var(--ch-gold-soft); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .15s; font-family: inherit; }
.ch-export-btn:hover { background: var(--ch-gold); color: var(--ch-on-gold); }
.ch-export-btn:disabled { opacity: .45; cursor: not-allowed; background: var(--ch-surface-2); color: var(--ch-text-mute); border-color: var(--ch-line); }

/* ---- 整合文稿 loading ---- */
.ch-loading-body { display: flex; align-items: center; gap: 10px; color: var(--ch-text-dim); font-size: 12.5px; padding: 18px 14px; }

/* ---- 全选/清空 快捷按钮（欢迎态） ---- */
.ch-chips-quick { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.ch-chip-quick { font-size: 12px; padding: 5px 16px; border-radius: 999px; border: 1px solid var(--ch-line); background: var(--ch-surface-2); color: var(--ch-text-dim); cursor: pointer; transition: all .15s; font-family: inherit; }
.ch-chip-quick:hover { border-color: var(--ch-gold); color: var(--ch-gold-soft); }

/* ---- 确认弹窗（权限校验；挂 body，用 :root token） ---- */
.ch-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .62); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.ch-modal { background: var(--ch-surface); border: 1px solid var(--ch-line); border-radius: 14px; max-width: 420px; width: 100%; padding: 22px 22px 18px; box-shadow: 0 20px 60px rgba(0,0,0,.55); }
.ch-modal-msg { font-size: 14px; line-height: 1.7; color: var(--ch-text); white-space: pre-wrap; }
.ch-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.ch-modal-cancel { padding: 8px 20px; border-radius: 8px; border: 1px solid var(--ch-line); background: var(--ch-surface-2); color: var(--ch-text-dim); font-size: 13px; cursor: pointer; font-family: inherit; }
.ch-modal-cancel:hover { background: #232833; color: var(--ch-text); }
.ch-modal-ok { padding: 8px 20px; border-radius: 8px; border: none; background: var(--ch-gold); color: var(--ch-on-gold); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ch-modal-ok:hover { background: var(--ch-gold-soft); }

/* ---- Markdown 排版（深色；prompts 提示词库页复用同一套） ---- */
.ch-md, .ch-fusion-body { word-break: break-word; color: var(--ch-text); }
.ch-md h1, .ch-fusion-body h1 { font-size: 17px; margin: 12px 0 6px; color: var(--ch-text); }
.ch-md h2, .ch-fusion-body h2 { font-size: 15.5px; margin: 12px 0 6px; color: var(--ch-text); }
.ch-md h3, .ch-fusion-body h3 { font-size: 14px; margin: 10px 0 5px; color: var(--ch-text); }
.ch-md h4, .ch-md h5, .ch-md h6, .ch-fusion-body h4, .ch-fusion-body h5, .ch-fusion-body h6 { font-size: 13px; margin: 8px 0 4px; color: var(--ch-text); }
.ch-md p, .ch-fusion-body p { margin: 6px 0; }
.ch-md ul, .ch-fusion-body ul { margin: 6px 0; padding-left: 20px; }
.ch-md ol, .ch-fusion-body ol { margin: 6px 0; padding-left: 20px; }
.ch-md li, .ch-fusion-body li { margin: 3px 0; }
.ch-md a, .ch-fusion-body a { color: var(--ch-gold-soft); text-decoration: underline; }
.ch-md strong, .ch-fusion-body strong { color: var(--ch-gold-soft); font-weight: 700; }
.ch-md blockquote, .ch-fusion-body blockquote { border-left: 3px solid var(--ch-gold); margin: 8px 0; padding: 4px 12px; color: var(--ch-text-dim); background: var(--ch-surface-2); border-radius: 0 6px 6px 0; }
.ch-md code.md-code, .ch-fusion-body code.md-code { background: var(--ch-surface-2); border: 1px solid var(--ch-line); padding: 1px 6px; border-radius: 5px; font-size: 12px; font-family: Consolas, Menlo, monospace; color: var(--ch-gold-soft); }
.ch-md pre.md-pre, .ch-fusion-body pre.md-pre { background: var(--ch-input); border: 1px solid var(--ch-line); border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 8px 0; position: relative; }
.ch-md pre.md-pre code, .ch-fusion-body pre.md-pre code { background: none; border: none; padding: 0; font-size: 12px; font-family: Consolas, Menlo, monospace; color: var(--ch-text); white-space: pre; }
.ch-md .md-code-lang, .ch-fusion-body .md-code-lang { position: absolute; top: 4px; right: 10px; font-size: 10px; color: var(--ch-text-mute); text-transform: uppercase; }
.ch-md table.md-table, .ch-fusion-body table.md-table { border-collapse: collapse; margin: 8px 0; width: 100%; font-size: 12.5px; }
.ch-md table.md-table th, .ch-fusion-body table.md-table th { border: 1px solid var(--ch-line); background: var(--ch-surface-2); padding: 6px 10px; text-align: left; color: var(--ch-gold-soft); }
.ch-md table.md-table td, .ch-fusion-body table.md-table td { border: 1px solid var(--ch-line); padding: 6px 10px; }
.ch-md hr, .ch-fusion-body hr { border: none; border-top: 1px solid var(--ch-line); margin: 10px 0; }
.ch-md img, .ch-fusion-body img { max-width: 100%; border-radius: 8px; }
.ch-md del, .ch-fusion-body del { color: var(--ch-text-mute); }
/* ================= 提示词库（prompts） ================= */
.pt-page { display: flex; gap: 20px; }
.pt-side { width: 200px; min-width: 200px; position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; gap: 6px; }
.pt-side-head { font-size: 14px; font-weight: 700; color: var(--text); padding: 2px 4px; margin-bottom: 4px; }
.pt-side-list { display: flex; flex-direction: column; gap: 2px; }
.pt-cat-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; color: var(--text-dim); cursor: pointer; font-size: 13px; border: 1px solid transparent; }
.pt-cat-item:hover { background: var(--bg-3); color: var(--text); }
.pt-cat-item.active { background: linear-gradient(90deg, rgba(201, 169, 97, .18), transparent); color: var(--gold-soft); font-weight: 600; border-color: rgba(201, 169, 97, .25); }
.pt-cat-count { font-size: 11px; color: var(--text-dim); }
.pt-side-foot { padding: 4px; border-top: 1px solid var(--line); margin-top: 8px; }
.pt-side-foot .btn-mini { width: 100%; }

.pt-main { flex: 1; min-width: 0; }
.pt-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pt-type-tabs { display: flex; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.pt-type-btn { border: none; background: transparent; color: var(--text-dim); font-size: 12.5px; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.pt-type-btn:hover { color: var(--text); }
.pt-type-btn.on { background: var(--gold); color: #1a1508; font-weight: 600; }
.pt-toolbar input { flex: 1; max-width: 380px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-size: 13px; outline: none; }
.pt-toolbar input:focus { border-color: var(--gold); }
.pt-count { font-size: 12px; }

.pt-grid-wrap { min-height: 200px; }
.pt-grid { align-items: stretch; }
.pt-empty { grid-column: 1 / -1; color: var(--text-dim); font-size: 13px; text-align: center; padding: 60px 20px; line-height: 1.8; }
.pt-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; transition: .15s; display: flex; flex-direction: column; gap: 8px; min-height: 110px; }
.pt-card:hover { border-color: var(--gold); transform: translateY(-1px); }
.pt-card-media { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; background: var(--bg-3); }
.pt-card-video-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-dim); font-size: 12px; gap: 6px; }
.pt-card-video-ph span { font-size: 28px; }
.pt-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pt-card-title { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-card-meta { font-size: 11px; }
.pt-card-sum { font-size: 12px; color: var(--text-dim); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pt-card-foot { display: flex; align-items: center; gap: 6px; }
.pt-card-foot .pill { font-size: 11px; padding: 2px 8px; }

/* 编辑弹窗 */
.pt-edit-tabs { display: flex; gap: 4px; background: var(--bg-3); border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 14px; }
.pt-edit-tab { border: none; background: transparent; color: var(--text-dim); font-size: 12.5px; padding: 6px 14px; border-radius: 8px; cursor: pointer; flex: 1; }
.pt-edit-tab:hover { color: var(--text); }
.pt-edit-tab.on { background: var(--gold); color: #1a1508; font-weight: 600; }
.pt-edit-fname { font-size: 12px; color: var(--gold-soft); margin-top: 6px; }
.pt-edit-preview { margin-top: 8px; }

/* 详情弹窗 */
.pt-view-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pt-view-body { font-size: 14px; line-height: 1.8; color: var(--text); max-height: 52vh; overflow-y: auto; }
.pt-view-note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.75; color: var(--text-dim); }

/* 管理分类 */
.pt-cat-row { display: flex; align-items: center; gap: 8px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.pt-cat-row:last-child { border-bottom: none; }
/* ========== AI 模型选择器（settings 页生成主形象弹窗） ========== */
.ai-model-row {
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ai-model-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}
.ai-model-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-model-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.3;
}
.ai-model-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.ai-model-chip.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1410;
  font-weight: 600;
}
.ai-model-chip-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  margin-top: 2px;
  opacity: 0.7;
}
.ai-model-chip.on .ai-model-chip-sub {
  color: rgba(0, 0, 0, 0.6);
  opacity: 1;
}

/* ========== 表单快选 chips & AI写按钮 ========== */
.field label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.field-chip {
  padding: 6px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.15s;
}
.field-chip:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.field-chip.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1410;
  font-weight: 600;
}
.ai-write-btn {
  margin-left: auto;
  padding: 7px 16px;
  font-size: 16px;
  border-radius: 8px;
}
.ai-write-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════
   多 AI 对比选镜（Plan B 选镜器）
   ═════════════════════════════════════════ */
.sb-cmp-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 50px 20px; color: var(--text-dim); }
.sb-cmp-loading .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid color-mix(in srgb, var(--gold) 26%, transparent); border-top-color: var(--gold); animation: sbspin 0.8s linear infinite; }
@keyframes sbspin { to { transform: rotate(360deg); } }
.sb-cmp-loading p { margin: 0; font-size: 13.5px; }

.sb-cmp-tip { font-size: 12.5px; color: var(--text-dim); line-height: 1.6; padding: 10px 12px; margin-bottom: 14px; background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }

.sb-cmp-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sb-cmp-col { border: 1px solid var(--line, #2a2a2a); border-radius: 10px; overflow: hidden; background: var(--bg-2, #14171d); display: flex; flex-direction: column; max-height: 62vh; }
.sb-cmp-col.disabled { opacity: 0.55; }
.sb-cmp-col-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--line, #2a2a2a); background: color-mix(in srgb, var(--gold) 7%, transparent); position: sticky; top: 0; z-index: 2; }
.sb-cmp-col-head b { font-size: 14px; color: var(--text); }
.sb-cmp-all { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 13px; }
.sb-cmp-all input { accent-color: var(--gold); width: 15px; height: 15px; }
.sb-cmp-count { font-size: 12px; }
.sb-cmp-shots { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; }

.sb-cmp-shot { display: flex; gap: 9px; padding: 10px; border: 1px solid var(--line, #2a2a2a); border-radius: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.sb-cmp-shot:hover { border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.sb-cmp-shot.sel { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.sb-cmp-shot > input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; }
.sb-cmp-shot-body { flex: 1; min-width: 0; }
.sb-cmp-shot-no { font-size: 11.5px; font-weight: 700; color: var(--gold); margin-bottom: 3px; }
.sb-cmp-shot-desc { font-size: 12.5px; line-height: 1.55; color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sb-cmp-shot .sb-shot-meta { margin-top: 6px; }
.sb-cmp-shot-cam { font-size: 11.5px; margin-top: 4px; }

.sb-cmp-off { padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.sb-cmp-off.small { padding: 16px 10px; font-size: 12px; }

.sb-cmp-total { font-size: 13px; color: var(--text); font-weight: 600; }
.sb-cmp-moderator { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }
.sb-cmp-moderator select { background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 13px; cursor: pointer; outline: none; }
.sb-cmp-moderator select:hover { border-color: var(--gold); }

/* ===== 角色设定：Master-Detail 布局 ===== */
.char-md { display: flex; gap: 16px; align-items: flex-start; position: relative; }
.cd-close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(255,255,255,0.08); color: var(--text-dim, #888); font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background .15s, color .15s; }
.cd-close:hover { background: rgba(255,255,255,0.16); color: var(--text, #eee); }
.char-md-list {
  flex: 1 1 100%; max-width: none; width: 100%;
  max-height: none; overflow-x: auto; overflow-y: hidden; padding: 8px;
  display: flex; flex-direction: row; align-items: stretch; gap: 8px;
  background: var(--bg-2, #14171d); border: 1px solid var(--line, #2a2f3a);
  border-radius: 12px;
}
.char-md-list .cd-back,
.char-md-list .cd-li,
.char-md-list .cd-add-costume {
  flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap;
  display: inline-flex; align-items: center; min-height: 60px;
  padding: 8px 14px; border-radius: 9px; box-sizing: border-box;
}
.char-md-list .cd-add-costume { justify-content: center; }
.char-li {
  display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer;
  border: 1px solid transparent; border-radius: 10px; transition: .15s;
}
.char-li:hover { background: rgba(255,255,255,.04); }
.char-li.on { background: rgba(212,175,55,.12); border-color: var(--gold, #d4a23a); }
.char-li-av {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 8px; overflow: hidden;
  background: #000; position: relative; display: flex; align-items: center; justify-content: center;
}
.char-li-av img { width: 100%; height: 100%; object-fit: cover; }
.char-li-av .avatar-ph { font-size: 26px; }
.char-li-gen {
  position: absolute; left: 0; right: 0; bottom: 0; font-size: 10px; text-align: center;
  background: rgba(212,175,55,.85); color: #111; padding: 1px 0;
}
.char-li-info { min-width: 0; }
.char-li-name { font-size: 14px; font-weight: 700; }
.char-li-meta { font-size: 12px; color: var(--text-dim, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

.char-md-detail { flex: 1 1 auto; min-width: 0; }

/* ===== 实体关联面板（角色/场景/道具打通） ===== */
.char-md { flex-wrap: wrap; }
.char-md-links { flex: 1 1 100%; margin-top: 6px; padding: 14px 16px; background: var(--bg-2, #14171d); border: 1px solid var(--line, #2a2f3a); border-radius: 12px; }
.char-md-links-inline { flex: 0 0 auto; margin-top: 12px; padding: 10px 0 0; background: transparent; border: none; border-top: 1px solid var(--line, #2a2a3a); border-radius: 0; }
.ent-links-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ent-links-title { font-weight: 700; font-size: 14px; }
.ent-link-add { margin-left: auto; }
.ent-link-group { margin-bottom: 10px; }
.ent-link-g-title { font-size: 12px; color: var(--text-dim, #9aa0aa); margin-bottom: 6px; }
.ent-link-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ent-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; cursor: pointer;
  background: rgba(212,175,55,.10); border: 1px solid rgba(212,175,55,.35); border-radius: 999px;
  font-size: 13px; color: var(--text, #eee); transition: .15s;
}
.ent-chip:hover { background: rgba(212,175,55,.20); border-color: var(--gold, #d4a23a); }
.ent-chip-x {
  border: none; background: transparent; color: var(--text-dim, #888); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 0 0 2px;
}
.ent-chip-x:hover { color: #ff6b6b; }
.ent-link-empty { font-size: 12px; color: var(--text-dim, #888); line-height: 1.6; }
.ent-links-in-modal { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #2a2f3a); }
.ent-links-in-modal .ent-links-title { font-weight: 700; font-size: 14px; }
.ent-links-in-modal .ent-link-group { margin-bottom: 10px; }

/* 手动关联弹窗表单：弹窗加宽后字体放大 */
.form-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.form-row label { min-width: 80px; font-size: 15px; font-weight: 600; color: var(--text, #eee); }
.form-row select,
.form-row .ent-link-type,
.form-row .ent-link-target {
  flex: 1; font-size: 15px; padding: 10px 12px; border-radius: 8px;
  background: var(--bg, #0b0d11); color: var(--text, #eee); border: 1px solid var(--line, #2a2f3a);
  cursor: pointer; min-width: 0;
}
.form-row select:focus { outline: none; border-color: var(--gold, #d4a23a); }

.cd { background: var(--bg-2, #14171d); border: 1px solid var(--line, #2a2f3a); border-radius: 12px; padding: 16px; }
.cd-top { display: flex; gap: 18px; align-items: flex-start; }
.cd-img {
  flex: 0 0 58%; max-width: 760px; min-height: 560px; max-height: 86vh; position: relative; background: #000; border-radius: 10px;
  overflow: hidden; cursor: zoom-in; align-self: flex-start; display: flex; align-items: center; justify-content: center;
}
.cd-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cd-img .avatar-ph { padding: 60px; text-align: center; font-size: 40px; }
.gen-wave {
  position: absolute; inset: 0;
  display: none; align-items: flex-end; justify-content: center;
  gap: 5px; padding-bottom: 24%;
  background: rgba(0, 0, 0, .35);
  pointer-events: none;
}
.cd-img.is-generating .gen-wave { display: flex; }
.gen-wave span {
  width: 5px; height: 28%;
  background: var(--gold, #d4a23a);
  border-radius: 3px; opacity: .55;
  transform-origin: bottom;
  animation: genWave 1.1s ease-in-out infinite;
}
.gen-wave span:nth-child(1) { animation-delay: 0s; }
.gen-wave span:nth-child(2) { animation-delay: .12s; }
.gen-wave span:nth-child(3) { animation-delay: .24s; }
.gen-wave span:nth-child(4) { animation-delay: .36s; }
.gen-wave span:nth-child(5) { animation-delay: .48s; }
@keyframes genWave {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50% { transform: scaleY(1); opacity: .95; }
}

/* ── 弹窗式生成体验：原地停留（参数 → 黑底金色波浪 → 结果图）── */
.gen-modal-panel {
  position: relative; min-height: 460px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: #050608; border-radius: 12px; padding: 40px 20px; overflow: hidden;
}
.gen-modal-panel .gen-wave { display: flex; }
.gen-modal-tip { position: relative; z-index: 2; font-size: 16px; font-weight: 700; color: var(--gold, #d4a23a); letter-spacing: 1px; }
.gen-modal-sub { position: relative; z-index: 2; font-size: 13px; text-align: center; max-width: 420px; line-height: 1.7; }
.gen-modal-result { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 4px; }
.gen-result-img { width: 100%; max-width: 420px; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--line, #2a2f3a); }
.gen-result-img img { display: block; width: 100%; height: auto; }
.gen-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; width: 100%; }
.gen-result-thumb { position: relative; aspect-ratio: 2 / 3; background: #000; border-radius: 8px; overflow: hidden; border: 1px solid var(--line, #2a2f3a); }
.gen-result-thumb img { width: 100%; height: 100%; object-fit: cover; }

.cd-hint {
  position: absolute; left: 8px; bottom: 8px; font-size: 12px; color: #fff;
  background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 6px; pointer-events: none;
}
.cd-info { flex: 1 1 auto; min-width: 0; }
.cd-name { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.cd-row { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.6; padding: 3px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.cd-k { flex: 0 0 96px; color: var(--gold, #d4a23a); font-weight: 600; }
.cd-v { flex: 1 1 auto; color: var(--text, #ddd); word-break: break-word; }
.cd-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.cd-actions .btn { font-size: 13px; padding: 7px 12px; white-space: nowrap; }
.cd-actions .btn-basic { color: var(--gold, #d4a23a); border-color: rgba(212,175,55,.5); }
.cd-sub { font-size: 13px; color: var(--text-dim, #888); margin: 4px 0 8px; }
.cd-thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.cd-thumb {
  position: relative; width: 96px; height: 96px; border-radius: 8px; overflow: hidden;
  background: #000; cursor: zoom-in; border: 1px solid var(--line, #2a2f3a);
}
.cd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cd-star {
  position: absolute; left: 4px; bottom: 4px; font-size: 11px; color: #111;
  background: var(--gold, #d4a23a); padding: 1px 6px; border-radius: 5px; font-weight: 700;
}

/* ===== 大图 Lightbox ===== */
.lb-wrap { position: fixed; inset: 0; z-index: 9999; }
.lb-mask { position: absolute; inset: 0; background: rgba(0,0,0,.86); }
.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 92vw; max-height: 86vh; transform-origin: center center; cursor: grab; box-shadow: 0 10px 60px rgba(0,0,0,.6); border-radius: 6px; }
.lb-img:active { cursor: grabbing; }
.lb-bar { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.lb-btn {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
  padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer; backdrop-filter: blur(6px);
}
.lb-btn:hover { background: rgba(255,255,255,.26); }
.lb-dl { background: linear-gradient(135deg, #ffcf6a, #ff9a3d); color: #1a1205; border-color: transparent; font-weight: 600; }
.lb-dl:hover { background: linear-gradient(135deg, #ffd884, #ffa94d); }
.lb-close { background: rgba(220,80,80,.85); border-color: transparent; }
.lb-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 80px; line-height: 80px; text-align: center;
  font-size: 36px; color: #fff; cursor: pointer; user-select: none;
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; backdrop-filter: blur(4px); transition: .15s; z-index: 2;
}
.lb-arrow:hover { background: rgba(212,175,55,.28); border-color: rgba(212,175,55,.45); color: var(--gold, #ffcf6a); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (max-width: 640px) {
  .lb-arrow { width: 38px; height: 64px; line-height: 64px; font-size: 28px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

/* ===== 查看器：位置条 + 角色图审阅（左确认 / 右修改意见） ===== */
.lb-pos { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; align-items: center; background: rgba(0,0,0,.55); color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 24px; z-index: 2; max-width: 94vw; }
.lb-pos-cur { white-space: nowrap; }
.lb-pos-gap { display: inline-block; width: 18px; }
.lb-pos-cur b { color: var(--gold, #ffcf6a); }
.lb-pos-next { color: #b9bec8; font-size: 22px; white-space: nowrap; }
.lb-title { position: absolute; bottom: 76px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 28px; font-weight: 700; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.7); pointer-events: none; }
/* 左侧：确认/取消通过 按钮（左下角，避开中侧翻页箭头） */
.lb-review-wrap .lb-ok { position: absolute; left: 16px; bottom: 22px; z-index: 3; font-size: 22px; padding: 14px 22px; border-radius: 12px; }
/* 右侧：修改意见面板（右上角：状态 + 按钮 + 输入框 + 保存） */
.lb-review-side { position: absolute; right: 16px; top: 22px; z-index: 3; width: min(300px, 86vw); display: flex; flex-direction: column; gap: 12px; background: rgba(20,23,29,.94); border: 1px solid var(--line, #2a2f3a); border-radius: 12px; padding: 14px 16px; }
.lb-review-status { color: #fff; font-size: 22px; white-space: nowrap; }
.lb-review-status .rv-ok { color: #4ade80; }
.lb-review-status .rv-fix { color: #fb923c; }
.lb-review-status .rv-wait { color: #aab0bb; }
.lb-ok.on { background: rgba(34,197,94,.92); border-color: transparent; color: #06210f; font-weight: 600; }
.lb-note.on { background: rgba(249,115,22,.92); border-color: transparent; color: #241200; font-weight: 600; }
.lb-review-side .lb-note { align-self: stretch; font-size: 20px; padding: 10px 14px; }
.lb-review-note { width: 100%; height: 120px; resize: vertical; background: rgba(0,0,0,.4); color: #fff; border: 1px solid var(--line, #2a2f3a); border-radius: 10px; padding: 10px 12px; font-size: 18px; font-family: inherit; }
.lb-save-note { align-self: flex-end; font-size: 20px; padding: 8px 18px; border-radius: 8px; }

@media (max-width: 640px) {
  .lb-review-wrap .lb-ok { font-size: 18px; padding: 12px 16px; left: 12px; bottom: 16px; }
  .lb-review-side { width: min(260px, 84vw); top: 16px; right: 12px; padding: 10px 12px; gap: 10px; }
  .lb-review-status { font-size: 18px; }
  .lb-review-note { height: 90px; font-size: 16px; }
}

/* ===== 角色卡审阅角标（墙） ===== */
.cwc-img img { cursor: zoom-in; }
.cwc-rv { margin-left: 6px; font-weight: 600; white-space: nowrap; }
.cwc-rv-ok { color: #4ade80; }
.cwc-rv-fix { color: #fb923c; }
.cwc-rv-wait { color: #9aa0aa; }

/* ===== 角色详情页单图审阅状态条 ===== */
.cd-review { margin-top: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.cd-review-ok { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.4); }
.cd-review-fix { background: rgba(249,115,22,.12); color: #fb923c; border: 1px solid rgba(249,115,22,.4); }
.cd-review-wait { background: rgba(255,255,255,.06); color: #9aa0aa; border: 1px solid var(--line, #2a2f3a); }

/* ===== 响应式：窄屏上下堆叠 ===== */
@media (max-width: 820px) {
  .char-md { flex-direction: column; }
  .char-md-list { flex: 1 1 auto; max-width: none; width: 100%; max-height: 240px; flex-direction: row; overflow-x: auto; }
  .char-li { flex: 0 0 auto; width: 200px; }
  .cd-top { flex-direction: column; }
  .cd-img { flex: 1 1 auto; max-width: none; width: 100%; }
}

/* ===== 角色卡片墙（设定页第一层） ===== */
.char-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.char-wall-card {
  background: var(--bg-2, #14171d); border: 1px solid var(--line, #2a2f3a); border-radius: 12px;
  overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; position: relative;
}
.char-wall-card:hover { border-color: rgba(212,175,55,.55); transform: translateY(-2px); }
.cwc-del { position: absolute; top: 8px; left: 8px; z-index: 5; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 6px; background: rgba(239,68,68,.9); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; opacity: .85; transition: .15s; }
.cwc-del:hover { opacity: 1; background: #ef4444; transform: scale(1.05); }
.cwc-img { position: relative; aspect-ratio: 1 / 1; background: #0e1014; display: flex; align-items: center; justify-content: center; }
.cwc-img img { width: 100%; height: 100%; object-fit: contain; }
.cwc-gen { position: absolute; top: 8px; left: 8px; background: rgba(91,110,255,.9); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.cwc-name { font-size: 15px; font-weight: 700; padding: 10px 12px 2px; }
.cwc-meta { font-size: 12px; color: var(--text-dim, #888); padding: 0 12px 8px; min-height: 18px; }
.cwc-acts { display: flex; gap: 6px; padding: 0 12px 10px; }
.cwc-btn { flex: 1; font-size: 12px; padding: 6px 4px; border: 1px solid var(--line, #2a2f3a); background: transparent; color: var(--text, #ddd); border-radius: 7px; cursor: pointer; }
.cwc-btn:hover { border-color: var(--gold, #d4a23a); color: var(--gold, #d4a23a); }
.cwc-badge { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.cwc-badge-empty { background: rgba(212,175,55,.85); color: #111; }

/* ===== 角色变装管理页（左变装列表项） ===== */
.cd-back { width: 100%; text-align: left; font-size: 13px; padding: 8px 10px; margin-bottom: 6px; border: 1px solid var(--line, #2a2f3a); background: transparent; color: var(--text-dim, #888); border-radius: 8px; cursor: pointer; }
.cd-back:hover { color: var(--gold, #d4a23a); border-color: rgba(212,175,55,.5); }
.cd-add-costume { width: 100%; text-align: center; font-size: 13px; padding: 9px; margin-top: 8px; border: 1px dashed rgba(212,175,55,.5); background: rgba(212,175,55,.06); color: var(--gold, #d4a23a); border-radius: 8px; cursor: pointer; }
.cd-add-costume:hover { background: rgba(212,175,55,.14); }
.cd-li { display: flex; gap: 10px; align-items: center; padding: 8px; border: 1px solid transparent; border-radius: 9px; cursor: pointer; }
.cd-li:hover { background: rgba(255,255,255,.04); }
.cd-li.on { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.5); }
.cd-li-av { width: 46px; height: 46px; border-radius: 8px; overflow: hidden; background: #0e1014; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.cd-li-av img { width: 100%; height: 100%; object-fit: cover; }
.cd-li-info { min-width: 0; }
.cd-li-name { font-size: 13.5px; font-weight: 600; }
.cd-li-meta { font-size: 11.5px; color: var(--text-dim, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== 统一 AI 生成弹窗（概念图 / 三视图 / 重绘 模式切换） ===== */
.ai-gen-tabs { display: flex; gap: 8px; margin-bottom: 4px; }
.ai-gen-tab {
  flex: 1; font-size: 13px; padding: 9px 6px; border: 1px solid var(--line, #2a2f3a);
  background: transparent; color: var(--text, #ddd); border-radius: 9px; cursor: pointer; white-space: nowrap;
}
.ai-gen-tab:hover { border-color: rgba(212,175,55,.5); color: var(--gold, #d4a23a); }
.ai-gen-tab.on { background: rgba(212,175,55,.16); border-color: rgba(212,175,55,.6); color: var(--gold, #d4a23a); font-weight: 700; }
.ai-gen-help { color: var(--text-dim, #888); }
.ai-gen-ref .ai-gen-select { width: 100%; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #2a2f3a); background: var(--bg-2, #14171d); color: var(--text, #ddd); }

/* ===== 详情页「更多 ▾」下拉 ===== */
.cd-more { position: relative; display: inline-block; min-width: 140px; }
.cd-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 30;
  min-width: 140px; max-width: none; width: 100%; box-sizing: border-box; background: var(--bg-2, #1a1e26); border: 1px solid var(--line, #2a2f3a);
  border-radius: 10px; padding: 6px; box-shadow: 0 12px 36px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 2px;
}
.cd-more-menu[hidden] { display: none !important; }
.cd-more-item {
  text-align: left; font-size: 13px; padding: 8px 10px; border: none; background: transparent;
  color: var(--text, #ddd); border-radius: 7px; cursor: pointer; white-space: nowrap; word-break: normal;
}
.cd-more-item:hover { background: rgba(255,255,255,.06); color: var(--gold, #d4a23a); }
.cd-more-danger { color: #ff8585; }
.cd-more-danger:hover { background: rgba(220,80,80,.14); color: #ff8585; }
.cd-actions .cd-more .btn { white-space: nowrap; min-width: 140px; text-align: center; }

/* openFormModal：图片上传字段 */
.field-image .img-preview {
  width: 100%; min-height: 120px; max-height: 260px;
  background: var(--bg-2); border: 1px dashed var(--line); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 8px;
}
.field-image .img-preview img { width: auto; max-width: 100%; max-height: 260px; display: block; }
.field-image .img-preview .muted { font-size: 13px; }
.field-image .img-picker-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 场景卡片：母场景 / 衍生场景徽章 */
.scene-card .src-badge.mother-badge {
  left: 8px; right: auto;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #1a1410; font-weight: 600; border: none;
}
.scene-card .src-badge.child-badge {
  left: 8px; right: auto;
  background: rgba(120, 200, 120, .18); color: #7ed68a; border: 1px solid rgba(120,200,120,.35);
}
.mother-ref-toggle { user-select: none; }
.mother-ref-toggle input { accent-color: var(--gold); }

/* 资产弹窗：拖拽上传高亮 */
.asset-drop-zone {
  position: relative; padding: 4px; border-radius: 10px; transition: background .15s ease;
}
.asset-drop-zone.is-drag-over {
  background: rgba(255, 200, 80, .08);
  outline: 2px dashed var(--gold); outline-offset: -4px;
}
.asset-drop-zone .drop-hint {
  margin-top: 14px; padding: 10px; text-align: center; font-size: 12px;
  border-top: 1px dashed var(--line); color: var(--text-dim);
}
.asset-drop-zone.is-drag-over .drop-hint {
  color: var(--gold); font-weight: 600;
}

/* ---------------- 资产库：范围切换（个人 / 团队 / 真人人像库） ---------------- */
.scope-tabs {
  display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--line); padding-bottom: 12px;
}
.scope-tab {
  display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 10px; cursor: pointer;
  color: var(--text-dim); font-size: 14px; font-weight: 600; transition: .12s;
  border: 1px solid transparent; background: none; font-family: inherit;
}
.scope-tab:hover { background: var(--bg-3); color: var(--text); }
.scope-tab.active { background: rgba(201, 169, 97, .16); color: var(--gold-soft); border-color: rgba(201, 169, 97, .35); }

/* 文件夹胶囊条（角色 / 场景 / 道具 分类下显示） */
.folder-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.folder-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 18px; cursor: pointer;
  color: var(--text-dim); font-size: 13px; transition: .12s;
  border: 1px solid var(--line); background: var(--bg-2); font-family: inherit;
}
.folder-chip:hover { border-color: var(--gold); color: var(--text); }
.folder-chip.active { background: rgba(201, 169, 97, .14); color: var(--gold-soft); border-color: rgba(201, 169, 97, .3); }
.folder-chip .fc-n { font-size: 11px; opacity: .6; background: var(--bg-3); border-radius: 10px; padding: 0 6px; }
.folder-chip.add { border-style: dashed; color: var(--text-dim); }
.folder-chip.drop { background: rgba(201, 169, 97, .2); border-color: var(--gold); color: var(--gold-soft); }

/* ---------------- 真人人像库 ---------------- */
.rp-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rp-title { font-size: 20px; font-weight: 700; margin: 0; }
.rp-tools { display: flex; gap: 10px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.rp-tools select,
.rp-tools input[type="search"] {
  background: var(--bg-3); border: 1px solid var(--line); color: var(--text);
  padding: 8px 12px; border-radius: 8px; font-size: 14px; outline: none; font-family: inherit;
}
.rp-tools input[type="search"] { min-width: 200px; }
.rp-tools select:focus, .rp-tools input:focus { border-color: var(--gold); }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.rp-card {
  position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: .15s;
}
.rp-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.rp-card .pic { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg-3); }
.rp-card .ph { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-3); font-size: 42px; }
.rp-card .meta { padding: 9px 11px; }
.rp-card .meta .t { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-card .meta .s { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.rp-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.rp-detail-head .rp-title { font-size: 18px; }
.rp-detail-head .btn-gold { margin-left: auto; }
.rp-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rp-img { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-3); }
.rp-img img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.rp-img-del {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff; border: none; cursor: pointer; font-size: 13px; line-height: 1;
}
.rp-img-del:hover { background: var(--danger, #d9534f); }