/* 模块 storyboard 的样式（只写本模块的类，类名带模块前缀 sb-）。尺寸照截图 09/24/26 ÷ 0.8167；
 * 集卡、失败任务 / 缺失素材面板的结构照原站 style.css（.episode-card / .ep-* / .failed-*）。 */

/* ---------- 面板 ---------- */
.sb-wrap { padding: 24px 24px 80px; }
.sb-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 100px; }
.sb-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 700; white-space: nowrap; }
.sb-title-ic { display: inline-flex; color: var(--text); }
.sb-head-right { width: min(803px, 58%); display: flex; flex-direction: column; gap: 6px; }
.sb-sel { padding: 4px 10px; font-size: 13px; height: 28px; }
.sb-lock { align-self: flex-start; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: rgba(21, 128, 61, .12); color: #4ade80; }
.sb-head-row3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sb-long { color: var(--text-muted); font-size: 12px; margin-right: 2px; align-self: flex-start; padding-top: 2px; }
.sb-long-on { color: #d97706; font-weight: 600; }
.sb-big { padding: 8px 16px; font-size: 13px; border-radius: 8px; }
.sb-btn-redline { border-color: #dc2626; color: #dc2626; background: rgba(220, 38, 38, .06); }
.sb-btn-redline:hover:not(:disabled) { background: var(--danger-light); }
.sb-btn-cyan { border-color: #06b6d4; color: #06b6d4; }
.sb-spin { width: 10px; height: 10px; border-width: 1.5px; vertical-align: -1px; }
.sb-spin-s { width: 8px; height: 8px; border-width: 1px; vertical-align: -1px; }

.sb-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.sb-badge-y { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: #18181b; font-size: 10px; font-weight: 700; margin-left: 4px; }

/* 全部视频生成进度（原站和按钮同一行，铺满剩余宽度） */
.sb-batch { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 260px; }
.sb-batch-main { flex: 1; }
.sb-batch-text { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.sb-bar { height: 6px; border-radius: 3px; background: #27272a; overflow: hidden; }
.sb-bar-fill { height: 100%; background: var(--gradient-fire); transition: width .3s; }
.sb-bar-fill.paused { background: var(--text-dim); }
/* 还没提示词的集（原站黄底黄框） */
.sb-warn { border: 1px solid rgba(255, 193, 7, .55); background: rgba(255, 193, 7, .1); color: #fcd34d;
  border-radius: 8px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 12px; line-height: 1.6; }
/* 分镜生成进度 */
.sb-gen { margin-bottom: 16px; }
.sb-gen-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sb-gen-msg { flex: 1; font-size: 12.5px; color: var(--text-muted); }

/* 空态 */
.sb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 40px; color: var(--text-muted); text-align: center; }
.sb-empty-ic { color: var(--text-muted); opacity: .4; margin-bottom: 16px; }
.sb-empty-title { font-size: 16px; color: var(--text); margin-bottom: 8px; }
.sb-empty-text { font-size: 13px; }
.sb-empty-text b { color: var(--primary); }
.sb-empty-btn-ic { vertical-align: -2px; margin-right: 4px; }

/* ---------- 集卡（每行 8 张，约 206×182；整张可点进集数详情） ---------- */
.sb-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.sb-card { position: relative; display: flex; flex-direction: column; min-height: 182px; padding: 12px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer; transition: all .15s; }
.sb-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.sb-card.failed { border: 2px solid #dc2626; box-shadow: 0 0 8px rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .04); }
.sb-card.warn { border: 2px solid #ffc107; box-shadow: 0 0 8px rgba(255, 193, 7, .4); }
/* 左上绿 ✓ 压在「第 1 集」的「第」上（截图 09 只露出「1 集」） */
.sb-card-ok { position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--success);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; z-index: 1; }
.sb-card-bad { background: #dc2626; }
.sb-card-num { font-size: 11px; color: var(--text-muted); font-weight: 700; line-height: 1.5; margin-bottom: 3px; padding-left: 2px; }
.sb-card-title { font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 4px; }
.sb-card-excerpt { font-size: 11px; line-height: 17px; color: var(--text-muted); max-height: 68px; display: -webkit-box;
  -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
.sb-card-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 4px; }
/* 状态条：宽度不够时被按钮挤窄、截断（截图 09 只看到「24」） */
.sb-st { min-width: 0; font-size: 10.5px; padding: 2px 8px; border-radius: 4px; font-weight: 600; display: inline-flex; align-items: center;
  gap: 4px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-st.analyzed { background: rgba(34, 197, 94, .15); color: var(--success); }
.sb-st.pending { background: rgba(148, 163, 184, .15); color: var(--text-muted); }
.sb-st-gen { color: var(--primary); padding-left: 0; }
.sb-st-fail { color: #dc2626; padding-left: 0; }
.sb-st-miss { color: #f59e0b; font-size: 9.5px; }
.sb-st-vgen { color: var(--primary); font-size: 10px; display: inline-flex; align-items: center; gap: 3px; }
.sb-st-vok { color: #4caf50; font-size: 10px; }
.sb-card-btns { display: flex; gap: 3px; flex: none; }
.sb-cbtn { height: 21px; padding: 0 7px; font-size: 10.5px; border-radius: 5px; background: var(--bg); }
.sb-sq { min-width: 21px; height: 21px; padding: 0; border: 0; border-radius: 4px; background: var(--danger); color: #fff;
  font-size: 10.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.sb-sq-text { padding: 0 6px; }
.sb-sq:hover:not(:disabled) { background: #dc2626; }
.sb-sq:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- 区间批量生成（左侧，约 557 宽） ---------- */
/* 层级照原站：区间批量弹窗 9000、模型配置弹窗 1250，都压在失败任务 / 缺失素材面板（1100）上面 */
.sb-bd-mask { position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .35); }
.sb-bd { z-index: 9001; width: 557px; bottom: auto; max-height: calc(100vh - 108px); background: var(--bg); border: 1px solid var(--border);
  border-left: 0; border-top: 0; border-radius: 0 12px 12px 0; }
.sb-bd-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 14px 22px;
  border-bottom: 1px solid var(--border); font-size: 15px; font-weight: 700; position: sticky; top: 0; background: var(--bg); z-index: 1; }
.sb-bd-body { padding: 16px 22px 20px; font-size: 13px; }
.sb-bd-intro { margin: 0 0 14px; color: var(--text-muted); font-size: 12.5px; line-height: 1.7; }
/* 竖向间距逐行对过截图 26（÷0.8167）：各标签、复选行、匹配框都比通用间距紧 */
.sb-bd-label { font-size: 12.5px; font-weight: 600; color: #d4d4d8; margin: 13px 0 7px; }
.sb-bd-intro + .sb-bd-label { margin-top: 0; }
.sb-bd-check0 { font-size: 12px; color: #d4d4d8; }
.sb-bd-off { opacity: .55; }
.sb-bd-check { font-size: 12.5px; font-weight: 600; color: #d4d4d8; margin-top: 15px; }
.sb-bd-warn { font-size: 12px; font-weight: 600; color: #a1a1aa; margin-top: 2px; line-height: 1.6; }
.sb-bd-unsup { color: var(--warning); }
.sb-bd-lock { padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(21, 128, 61, .08);
  color: #4ade80; font-size: 13px; font-weight: 600; }
.sb-bd-hint { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.sb-bd .input { height: 30px; }
.sb-bd-range { display: flex; align-items: center; gap: 10px; }
.sb-bd-num { width: 90px; height: 30px; }
.sb-bd-to { color: var(--text-muted); font-size: 14px; }
.sb-bd-scope { font-size: 11.5px; color: var(--text-muted); }
.sb-bd-match { margin-top: 17px; padding: 12px 14px; border: 1px solid rgba(91, 107, 140, .45); background: #0d0f15; border-radius: 8px;
  font-size: 12px; line-height: 1.75; color: var(--text-muted); word-break: break-all; }
.sb-bd-match b { color: var(--text); }
.sb-bd-n { color: #6f80a3; }
.sb-bd-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ---------- 各集视频模型配置弹窗（约 1080 宽） ---------- */
.sb-mc-mask { z-index: 1250; }
.sb-mc { width: min(1080px, calc(100vw - 60px)); padding: 26px 33px 20px; max-height: 90vh; overflow-y: auto; }
.sb-mc-headrow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.sb-mc-title { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.sb-mc-sub { font-size: 11.5px; color: var(--text-muted); }
.sb-mc-loading { padding: 40px; text-align: center; color: var(--text-muted); }
/* 10-18 起视频模型有二十多个：卡片区限高、自己滚动 */
.sb-mc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; }
/* 视频模型按系列分组（10-19）：整块滚动，组内卡片不再各自限高 */
.sb-mc-groups { max-height: 360px; overflow-y: auto; }
.sb-mc-cards.sb-mc-cards-in-group { max-height: none; overflow: visible; }
.sb-mc-group-title { font-size: 12px; font-weight: 700; color: #a1a1aa; margin: 10px 0 6px; }
.sb-mc-groups > div:first-of-type .sb-mc-group-title { margin-top: 0; }
.sb-mc-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--bg-card); }
.sb-mc-card-name { font-size: 13px; font-weight: 700; }
.sb-mc-card-line { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }
.sb-mc-note { font-size: 10.5px; color: var(--text-muted); margin-top: 6px; }
.sb-mc-box { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin: 12px 0; }
.sb-mc-also { font-weight: 700; color: #d4d4d8; }
.sb-mc-box .sb-mc-sel { margin-top: 7px; width: 100%; }
.sb-mc-sel { background: var(--bg); padding: 6px 12px; font-size: 13px; width: 100%; }
.sb-mc-tools { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.sb-mc-num { width: 82px; }
.sb-mc-batch { width: auto; min-width: 150px; }
.sb-mc-mode { width: auto; min-width: 170px; margin-left: auto; }
.sb-mc-table { border: 1px solid var(--border); border-radius: 8px; overflow: auto; max-height: 330px; }
.sb-mc-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sb-mc-table th { position: sticky; top: 0; background: var(--bg-card); text-align: left; font-weight: 700; padding: 8px;
  border-bottom: 1px solid var(--border); z-index: 1; }
.sb-mc-table td { padding: 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.sb-mc-ck { width: 30px; }
.sb-mc-ep { white-space: nowrap; }
.sb-mc-newcol { min-width: 210px; }
.sb-mc-modecol { min-width: 200px; }
.sb-mc-cnt { margin-top: 3px; }
.sb-mc-small { font-size: 10.5px; color: var(--text-muted); }
.sb-mc-empty { padding: 28px; text-align: center; color: var(--text-muted); }
.sb-mc-preview { margin-top: 12px; padding: 12px; border-radius: 8px; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .35); }
.sb-mc-pv-line { font-size: 12px; line-height: 1.7; margin-top: 6px; }
.sb-mc-pv-warn { color: #f59e0b; }
.sb-mc-pv-item { margin-top: 3px; }
.sb-mc-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.sb-mc-ro { margin-top: 12px; padding: 9px; border-radius: 6px; background: var(--bg-card); font-size: 12px; color: var(--text-muted); }
.sb-mc-hist { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.sb-mc-hist-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12.5px; }
.sb-mc-hist-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--border); font-size: 11px; }
.sb-mc-hist-time { color: var(--text-muted); white-space: nowrap; }

/* ---------- 右下角「⚠ N 个失败」+ 右侧面板（原站 .failed-toggle-btn / .failed-panel） ---------- */
.sb-ft-toggle { position: fixed; right: 20px; bottom: 80px; z-index: 1050; background: #ef4444; color: #fff; border: 0; border-radius: 10px;
  padding: 10px 18px; font: 700 13px var(--font); cursor: pointer; box-shadow: 0 4px 16px rgba(239, 68, 68, .4);
  animation: sbFailedBounce 2s ease-in-out infinite; }
.sb-ft-toggle:hover { background: #dc2626; }
@keyframes sbFailedBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.sb-dr { display: flex; flex-direction: column; overflow: hidden; width: 340px; z-index: 1100; }
.sb-dr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border);
  font-size: 13.5px; flex-shrink: 0; }
.sb-dr-failed .sb-dr-head { background: rgba(239, 68, 68, .08); color: #ef4444; }
.sb-dr-missing { border-left-color: var(--accent); }
.sb-dr-missing .sb-dr-head { background: linear-gradient(135deg, rgba(91, 107, 140, .06), transparent); color: #ef4444; }
.sb-dr-title { font-weight: 700; }
.sb-dr-filter { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.sb-dr-filter .select { flex: 1; }
.sb-dr-body { flex: 1; overflow-y: auto; padding: 8px; }
.sb-dr-item { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.sb-dr-item-miss { border-left: 3px solid var(--accent); }
.sb-dr-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.sb-dr-sub { color: var(--text-muted); font-weight: 400; font-size: 11.5px; margin-left: 4px; }
.sb-dr-err { font-size: 11.5px; color: #ef4444; margin-bottom: 4px; word-break: break-all; }
.sb-dr-refund { margin-top: 2px; font-size: 11px; color: #34d399; }   /* 失败不扣积分 / 已退回（10-25） */
.sb-dr-hint { font-size: 10.5px; color: #f59e0b; background: rgba(245, 158, 11, .08); padding: 4px 8px; border-radius: 4px; margin-bottom: 4px; }
.sb-dr-time { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; }
.sb-dr-prompt { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.sb-dr-empty { text-align: center; color: var(--text-muted); font-size: 13px; padding: 40px 20px; }