/* ============ 设计令牌：深空科幻主题 ============ */
:root {
  --primary: #6C8CFF;
  --primary-hover: #5B7BFF;
  --primary-light: rgba(108, 140, 255, 0.16);
  --accent: #22D3EE;
  --accent-2: #A78BFA;
  --success: #34D399;
  --success-light: rgba(52, 211, 153, 0.16);
  --warning: #FBBF24;
  --warning-light: rgba(251, 191, 36, 0.16);
  --danger: #F87171;
  --danger-light: rgba(248, 113, 113, 0.16);
  --info: #60A5FA;
  --info-light: rgba(96, 165, 250, 0.16);
  --bg: #0A0F1E;
  --card: #0F1629;
  --card-2: #131B30;
  --card-2-hover: #182238;
  --text: #E5EDF8;
  --text-1: #E5EDF8;
  --text-2: #93A3BC;
  --text-3: #5C6C8C;
  --text-muted: #5C6C8C;
  --border: #1E2A44;
  --border-light: #2C3D63;
  --bg-hover: rgba(108, 140, 255, 0.1);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.55);
  --glow: 0 0 16px rgba(108, 140, 255, 0.28);
  --radius: 10px;
  --radius-sm: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(108, 140, 255, 0.13), transparent 60%),
    radial-gradient(900px 460px at -10% 0%, rgba(167, 139, 250, 0.09), transparent 55%),
    radial-gradient(700px 380px at 55% 120%, rgba(34, 211, 238, 0.07), transparent 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.hidden { display: none !important; }

/* ============ 应用骨架：固定视口高度，顶栏 + 导航固定，仅主内容区内部滚动 ============ */
#app {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 172px 1fr;
  height: 100vh;
  overflow: hidden;
}
.topbar { grid-column: 1 / -1; grid-row: 1; flex-shrink: 0; }
.navbar { grid-column: 1; grid-row: 2; flex-shrink: 0; }

/* ============ 顶部栏 ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 20px;
  background: rgba(15, 22, 41, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-logo {
  font-size: 22px;
  filter: drop-shadow(0 0 8px rgba(108, 140, 255, 0.55));
}
.brand-name {
  font-size: 17px; font-weight: 700;
  background: linear-gradient(90deg, #6C8CFF, #A78BFA);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-ver {
  font-size: 11px; font-weight: 600; color: rgba(255,255,255,.4);
  padding: 1px 6px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
}
.brand-tag {
  font-size: 12px; color: var(--text-3);
  margin-left: 6px; padding-left: 10px;
  border-left: 1px solid var(--border);
}
.topbar-right { display: flex; align-items: center; gap: 16px; }
.sys-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-2);
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg);
}
.sys-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.sys-status.ok .dot { background: var(--success); }
.sys-status.err .dot { background: var(--danger); }

/* ============ 导航栏 ============ */
.navbar {
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(15, 22, 41, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 10px;
  border-right: 1px solid var(--border);
  border-bottom: none;
}
.nav-btn {
  border: none; background: transparent;
  padding: 10px 16px; font-size: 14px; color: var(--text-2);
  cursor: pointer; text-align: left;
  border-radius: var(--radius-sm);
  border-left: 3px solid transparent;
  position: relative;
  transition: color 0.2s, background 0.2s;
}
.nav-btn:hover { color: var(--text); background: var(--primary-light); }
.nav-btn.active {
  color: #fff; font-weight: 600;
  background: linear-gradient(90deg, rgba(108, 140, 255, 0.22), rgba(108, 140, 255, 0.05));
  border-left-color: var(--accent);
  box-shadow: inset 0 0 18px rgba(108, 140, 255, 0.1);
}
.nav-btn.ghost { border-left: 3px solid transparent; }
.nav-spacer { flex: 1; }

/* ============ 主内容区 ============ */
#main {
  grid-column: 2; grid-row: 2;
  padding: 0;
  max-width: none;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
#main .page { max-width: 1280px; margin: 0 auto; padding: 24px; }
#main #page-storyboards { padding-top: 0; }
.page { display: none; }
.page.active { display: block; animation: fadeIn 0.18s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============ 页面头部 ============ */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 12px; flex-wrap: wrap;
}
.page-title { font-size: 20px; font-weight: 700; }
.page-sub { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.page-actions { display: flex; gap: 8px; align-items: center; }
.crumb {
  font-size: 12px; color: var(--text-3);
  margin-left: 10px; padding-left: 10px;
  border-left: 1px solid var(--border);
}
.crumb b { color: var(--primary); font-weight: 600; }

/* ============ 按钮 ============ */
.btn {
  border: 1px solid var(--border); background: var(--card-2); color: var(--text);
  padding: 7px 14px; font-size: 13px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.primary {
  background: linear-gradient(135deg, #6C8CFF, #8B7CF6);
  border: none; color: #fff;
  box-shadow: 0 2px 12px rgba(108, 140, 255, 0.35);
}
.btn.primary:hover { background: linear-gradient(135deg, #5B7BFF, #7C6AF0); color: #fff; box-shadow: 0 2px 18px rgba(108, 140, 255, 0.5); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover { opacity: 0.9; }
.btn.danger-ghost { color: var(--danger); border-color: var(--danger-light); }
.btn.danger-ghost:hover { background: var(--danger-light); color: var(--danger); border-color: var(--danger); }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.loading { pointer-events: none; opacity: 0.7; }

/* ============ 卡片 ============ */
.card {
  background: linear-gradient(180deg, rgba(19, 27, 48, 0.9), rgba(15, 22, 41, 0.95));
  border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}
.card-hover { cursor: pointer; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--glow); border-color: var(--border-light); }

/* ============ 项目页 ============ */
.project-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.project-card { padding: 18px; position: relative; overflow: hidden; }
.project-card .p-cover {
  height: 120px; border-radius: var(--radius-sm); margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.18), rgba(167, 139, 250, 0.08));
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; background-size: cover; background-position: center;
}
.project-card .p-name { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.project-card .p-desc {
  font-size: 12px; color: var(--text-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 36px;
}
.project-card .p-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; font-size: 12px; color: var(--text-3);
}
.p-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.p-status.draft { background: var(--bg); color: var(--text-2); }
.p-status.generating { background: var(--warning-light); color: var(--warning); }
.p-status.done { background: var(--success-light); color: var(--success); }
.project-card .p-actions {
  position: absolute; top: 12px; right: 12px;
  display: flex; gap: 6px; opacity: 0; transition: opacity 0.15s;
}
.project-card:hover .p-actions { opacity: 1; }
.icon-btn {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--card-2); cursor: pointer;
  font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 8px rgba(108, 140, 255, 0.25); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); box-shadow: 0 0 8px rgba(248, 113, 113, 0.3); }
.icon-btn.warn:hover { border-color: var(--warning); color: var(--warning); }
.empty-state {
  text-align: center; padding: 60px 20px; color: var(--text-3);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; }

/* ============ 剧本页 ============ */
#page-script.page.active { display: flex; flex-direction: column; height: 100%; }
#page-script .page-head { flex-shrink: 0; }
.script-layout {
  display: flex; gap: 18px;
  flex: 1; min-height: 0;
}
.chapter-list {
  width: 220px; flex-shrink: 0; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
  align-self: stretch; min-height: 0; overflow-y: auto;
}
.chapter-item {
  padding: 10px 12px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13px; color: var(--text-2);
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  transition: background 0.12s;
}
.chapter-item:hover { background: var(--bg); }
.chapter-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.chapter-item .ch-del { opacity: 0; border: none; background: none; cursor: pointer; color: var(--text-3); font-size: 14px; }
.chapter-item:hover .ch-del { opacity: 1; }
.chapter-item .ch-del:hover { color: var(--danger); }
.script-editor {
  flex: 1; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.script-toolbar {
  display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
  align-items: center; flex-shrink: 0;
}
.script-title {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 16px; font-weight: 600; outline: none;
  margin-bottom: 10px; background: var(--card-2); color: var(--text);
  flex-shrink: 0;
}
.script-title:focus { border-color: var(--primary); }
#chapter-content {
  width: 100%; flex: 1; min-height: 120px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; font-size: 14px; line-height: 1.9; outline: none;
  background: var(--card-2); color: var(--text); font-family: inherit;
}
#chapter-content:focus { border-color: var(--primary); }
.save-hint { font-size: 12px; color: var(--text-3); margin-left: auto; }
.save-hint.saving { color: var(--warning); }
.save-hint.saved { color: var(--success); }

/* ============ 角色/场景页 ============ */
.asset-toolbar {
  display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
  align-items: center;
}
.search-box {
  display: flex; align-items: center; gap: 6px;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 12px; flex: 1; max-width: 320px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.2); }
.search-box input { border: none; outline: none; font-size: 13px; flex: 1; background: transparent; color: var(--text); }
.view-toggle { display: flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; background: var(--card-2); }
.view-toggle button {
  border: none; background: transparent; padding: 6px 12px; font-size: 12px; cursor: pointer; color: var(--text-2);
  transition: all 0.2s;
}
.view-toggle button:hover { color: var(--text); }
.view-toggle button.active {
  background: linear-gradient(135deg, #6C8CFF, #8B7CF6); color: #fff;
  box-shadow: 0 0 10px rgba(108, 140, 255, 0.4);
}
.asset-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.asset-card { padding: 14px; }
.asset-card .a-avatar {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.15), rgba(167, 139, 250, 0.06));
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; margin-bottom: 10px; background-size: cover; background-position: center;
  position: relative; overflow: hidden;
}
.asset-card .a-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.asset-card .a-tags { font-size: 11px; color: var(--text-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.asset-card .a-tag { font-size: 10px; color: var(--primary); background: var(--primary-light); padding: 1px 6px; border-radius: 999px; }
.asset-card .a-desc {
  font-size: 12px; color: var(--text-2); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.asset-card .a-single { margin-top: 8px; }
.asset-card .a-single-img {
  width: 100%; height: 110px; object-fit: cover; object-position: top;
  border: 1px solid var(--border); border-radius: 6px; cursor: zoom-in;
  transition: border-color 0.2s;
}
.asset-card .a-single-img:hover { border-color: var(--primary); }
/* 角色卡双图：六视图(16:9 横版)在左 + 单人图(3:4 竖版)在右，等高并排 */
#char-content .asset-grid { grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); }
.a-img-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.a-img-box {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(108, 140, 255, 0.15), rgba(167, 139, 250, 0.06));
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; min-width: 0;
}
.a-img-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-img-box.sheet-box { flex: 2.4 1 0; aspect-ratio: 16/9; }
.a-img-box.single-box { flex: 1 1 0; }
.a-img-box .a-img-tag {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  font-size: 10px; line-height: 16px; padding: 0 6px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); color: #fff; pointer-events: none;
}
.a-img-box .a-img-pending { position: absolute; top: 6px; left: 6px; z-index: 2; pointer-events: none; }
.a-img-box:hover .img-menu-btn { display: flex; }
.asset-card .a-actions { display: flex; gap: 6px; margin-top: 10px; }
.asset-card .a-actions .btn { flex: 1; justify-content: center; }
.asset-card .a-voice { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.asset-card .a-voice .btn { flex: none; padding: 4px 10px; }
.asset-card .a-voice-player { height: 30px; flex: 1; min-width: 0; }
.asset-card .a-voice-err { font-size: 11px; color: var(--danger); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
  display: inline-block; font-size: 11px; padding: 2px 8px;
  border-radius: 999px; background: var(--primary-light); color: var(--primary);
}
.tag.amber { background: var(--warning-light); color: var(--warning); }

/* 列表视图 */
.asset-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.asset-table th, .asset-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.asset-table th { background: var(--card-2); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.asset-table tr:last-child td { border-bottom: none; }
.asset-table tr:hover td { background: rgba(108, 140, 255, 0.06); }

/* ============ 表单 ============ */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.form-group label .req { color: var(--danger); margin-left: 2px; }
.form-group input[type="text"], .form-group input[type="number"], .form-group input[type="password"],
.form-group textarea, .form-group select {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; outline: none; background: var(--card-2);
  color: var(--text); font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
select option { background: var(--card-2); color: var(--text); }
::placeholder { color: var(--text-3); opacity: 1; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
.form-group textarea { resize: vertical; min-height: 64px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.form-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.voice-pick-row { display: flex; gap: 8px; align-items: center; }
.voice-pick-row select { flex: 1; min-width: 0; }
.voice-pick-row .btn { flex-shrink: 0; white-space: nowrap; }
.upload-box {
  border: 1.5px dashed var(--border-light); border-radius: var(--radius-sm);
  padding: 14px; text-align: center; font-size: 12px; color: var(--text-2);
  cursor: pointer; transition: all 0.2s; background: var(--card-2);
}
.upload-box:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 12px rgba(108, 140, 255, 0.15); }
.upload-box:hover { border-color: var(--primary); color: var(--primary); }
.upload-box .up-preview { max-width: 120px; max-height: 120px; border-radius: var(--radius-sm); margin: 0 auto 8px; display: block; object-fit: cover; }
.upload-box .up-text { display: block; }

/* ============ 分镜页 ============ */
/* 分镜卡片上方的分页器 + 工具栏：滚动时固定吸顶不随内容滚动 */
.sb-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10, 15, 30, 0.88);
  backdrop-filter: blur(10px);
  margin: 0 -24px;
  padding: 12px 24px 12px;
  border-bottom: 1px solid var(--border);
}
.sb-sticky::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(108, 140, 255, 0.15), rgba(108, 140, 255, 0));
}
.sb-toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.sb-stats { display: flex; gap: 8px; flex-wrap: wrap; }
/* 全能参考页：分集跳转下拉 */
.sb-ep-jump { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; flex-wrap: wrap; }
.sb-ep-jump .gen-start-label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.sb-ep-jump select {
  min-width: 180px; max-width: 320px;
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-2); color: var(--text); font-size: 13px; outline: none; cursor: pointer;
}
.sb-ep-jump select:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
.sb-ep-jump select option { background: var(--card-2); color: var(--text); }
.stat-chip {
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: var(--text-2);
}
.stat-chip b { color: var(--text); }
.sb-table-wrap { overflow-x: auto; }
.sb-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); min-width: 860px; }
.sb-table th, .sb-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.sb-table th { background: var(--card-2); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.sb-table tr:hover td { background: rgba(108, 140, 255, 0.06); }
.sb-table .sb-no { width: 40px; text-align: center; color: var(--text-3); }
.sb-table .sb-prompt { max-width: 220px; }
.sb-table .sb-meta { margin: 2px 0; display: flex; gap: 4px; flex-wrap: wrap; }
.sb-table .shot-chip {
  display: inline-block; padding: 0 6px; line-height: 18px; font-size: 11px;
  border-radius: 4px; background: var(--primary-light); color: var(--primary); white-space: nowrap;
}
.sb-table .ellipsis {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.sb-table .sb-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border); }
.sb-table .sb-thumb .no-img {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--text-3); border: 1px dashed var(--border);
}
.sb-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sb-status.draft { background: var(--bg); color: var(--text-2); }
.sb-status.image_ready { background: var(--success-light); color: var(--success); }
.sb-status.video_ready { background: var(--primary-light); color: var(--primary); }
.sb-status.failed { background: var(--danger-light); color: var(--danger); }
.sb-actions { display: flex; gap: 4px; }
.sb-actions .icon-btn { width: 26px; height: 26px; font-size: 12px; }
.sb-actions .icon-btn.gen { border-color: var(--primary-light); color: var(--primary); }
.sb-actions .icon-btn.gen:hover { background: var(--primary-light); }
/* 优化提示词：浅蓝描边 + 浅蓝文字（次要操作，视觉轻） */
.sb-actions .icon-btn.op { border-color: var(--primary-light); color: var(--primary); background: transparent; opacity: .85; }
.sb-actions .icon-btn.op:hover { background: var(--primary-light); opacity: 1; }
/* 生成视频：主色实心填充（核心操作，视觉最重） */
.sb-actions .icon-btn.vid { border-color: var(--primary); color: #fff; background: linear-gradient(135deg, #4F7CFF, #6D5CFF); box-shadow: 0 2px 8px rgba(79, 124, 255, .35); }
.sb-actions .icon-btn.vid:hover { background: linear-gradient(135deg, #3D6AFF, #5A4AFF); border-color: var(--primary); color: #fff; box-shadow: 0 3px 12px rgba(79, 124, 255, .5); transform: translateY(-1px); }
.sb-actions .icon-btn.dl { border-color: var(--success-light, #d1f5e6); color: var(--success, #10B981); }
.sb-actions .icon-btn.dl:hover { background: var(--success-light, #d1f5e6); }
/* v6.2 一键超清：主色描边，悬停点亮 */
.sb-actions .icon-btn.up { border-color: var(--primary-light, #d6e1ff); color: var(--primary, #4F7CFF); }
.sb-actions .icon-btn.up:hover { background: var(--primary-light, #d6e1ff); }
.sb-actions .icon-btn.warn { border-color: var(--warning-light); color: var(--warning); }
.sb-actions .icon-btn.warn:hover { background: var(--warning-light); }
.sb-actions .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* 生视频 Prompt 的 AI 优化按钮：绝对定位在提示词框右上角（不依赖会被隐藏的 field-label） */
.field-ai-opt {
  position: absolute; top: 4px; right: 8px; z-index: 5;
  padding: 2px 10px; font-size: 11px; line-height: 18px;
  border: 1px solid var(--primary-light); border-radius: 999px;
  background: var(--card); color: var(--primary); cursor: pointer;
  transition: all .15s; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.field-ai-opt:hover { background: var(--primary-light); color: var(--primary); box-shadow: 0 0 8px rgba(108, 140, 255, .3); }
/* 提示词框（field-row--prompt）需要相对定位，让右上角按钮落在框内 */
.field-row--prompt { position: relative; }
.sb-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 14px; font-size: 13px; color: var(--text-2); }
.sb-pager button { min-width: 30px; }
.sb-status.running {
  background: var(--warning-light); color: var(--warning);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.55; } }
.sb-table tr.generating td { background: rgba(251, 191, 36, 0.08); }
.sb-table .sb-thumb video {
  width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: #000;
}

/* ---- 分镜卡片视图（全能参考改造，已迁移到表格视图 .sb-cols） ---- */
.sb-card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  height: auto; /* 自适应高度：卡片随内容自然撑开，不再固定等高 */
  transition: box-shadow .18s, border-color .18s;
}
.sb-card:hover { box-shadow: 0 4px 20px rgba(108, 140, 255, 0.15); border-color: var(--border-light); }
.sb-card.generating { border-color: var(--warning); box-shadow: 0 0 0 3px var(--warning-light); }
.sb-media { position: relative; aspect-ratio: 16/9; background: #0B1220; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sb-media img, .sb-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-media.empty { aspect-ratio: auto; height: 44px; background: var(--bg); border-bottom: 1px solid var(--border); }
.sb-media .sb-empty-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.sb-media .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); }
.sb-media .progress div { height: 100%; width: 60%; background: linear-gradient(90deg, var(--primary), var(--warning)); animation: sb-slide 1.4s ease-in-out infinite; }
@keyframes sb-slide { 0% { margin-left: -60%; } 100% { margin-left: 100%; } }
.sb-media .sb-status { position: absolute; top: 8px; right: 8px; z-index: 2; }
/* 任务类型差异化：生成视频 / 优化提示词 / 视频超清 */
.sb-status.optimizing { background: #EDE9FE; color: #7C3AED; animation: pulse 1.2s ease-in-out infinite; }
.sb-status.upscaling { background: #D1FAE5; color: #059669; animation: pulse 1.2s ease-in-out infinite; }
.sb-card.generating--video { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.sb-card.generating--optimize { border-color: #7C3AED; box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.sb-card.generating--upscale { border-color: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }
.sb-media .progress--video div { background: linear-gradient(90deg, var(--primary), #6D5CFF); }
.sb-media .progress--optimize div { background: linear-gradient(90deg, #8B5CF6, #D946EF); animation-duration: 1.1s; }
.sb-media .progress--upscale div { background: linear-gradient(90deg, #10B981, #34D399); animation-duration: 1.6s; }
.sb-progress-label {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(10, 14, 22, .72); color: #fff; pointer-events: none;
}
.sb-progress-label.progress-label--optimize { color: #D8B4FE; }
.sb-progress-label.progress-label--upscale { color: #6EE7B7; }

/* ---- 分镜模式切换（全能参考 / 首尾帧） ---- */
.sb-mode-switch {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
}
.sb-mode-btn {
  border: none; background: transparent; color: var(--text-3);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
  transition: background .18s, color .18s;
}
.sb-mode-btn:hover { color: var(--text-1); background: var(--bg-hover); }
.sb-mode-btn.active { background: var(--primary); color: #fff; font-weight: 600; }

/* ---- 首尾帧模式：首帧/尾帧双图位 ---- */
.sb-frames { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 4px; border-bottom: 1px solid var(--border); }
.sb-frame { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sb-frame-label { font-size: 12px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.sb-frame-body {
  aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; background: #0B1220;
  display: flex; align-items: center; justify-content: center; min-height: 120px;
}
.sb-frame-body img.frame-img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.sb-frame-body .sb-empty-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12px; }
.sb-frame-actions { display: flex; gap: 6px; }
.sb-frame-actions .btn { flex: 1; padding: 5px 6px; font-size: 12px; }

/* ---- 自定义播放器（替代原生 controls：⋮ 下载强制选文件夹） ---- */
.sb-player { position: relative; width: 100%; height: 100%; background: #000; overflow: hidden; }
.sb-player video { width: 100%; height: 100%; object-fit: contain; cursor: pointer; display: block; }
.sb-p-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: rgba(15, 23, 42, .55); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; transition: opacity .18s; pointer-events: none; z-index: 2;
}
.sb-player:hover .sb-p-play { opacity: 1; pointer-events: auto; }
.sb-p-play:hover { background: rgba(15, 23, 42, .75); }
.sb-p-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; background: linear-gradient(transparent, rgba(15, 23, 42, .8));
  opacity: 0; transition: opacity .18s; z-index: 3;
}
.sb-player:hover .sb-p-bar { opacity: 1; }
.sb-p-btn {
  background: none; border: none; color: #fff; font-size: 14px; line-height: 1;
  width: 26px; height: 26px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.sb-p-btn:hover { background: rgba(255, 255, 255, .18); border-radius: 6px; }
.sb-p-progress { flex: 1; height: 4px; cursor: pointer; accent-color: var(--primary, #4F7CFF); min-width: 40px; }
.sb-p-time { color: #fff; font-size: 11px; white-space: nowrap; flex: none; }
.sb-p-menu-wrap { position: relative; flex: none; }
.sb-p-menu {
  position: absolute; right: 0; bottom: 30px;
  background: var(--card-2); border: 1px solid var(--border-light); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(108, 140, 255, 0.12);
  padding: 4px; min-width: 150px; display: none; z-index: 5;
}
.sb-p-menu-wrap.open .sb-p-menu { display: block; }
.sb-p-menu button {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 7px 10px; font-size: 12px; color: var(--text-1, #E5EDF8);
  border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.sb-p-menu button:hover { background: var(--primary-light); }
.sb-p-menu .dl-color { color: var(--success, #10B981); }
/* ---- 首尾帧模式：参考图片区（角色/场景/资产） ---- */
.sb-refimgs { display: flex; align-items: flex-start; gap: 8px; padding: 6px 12px 2px; border-bottom: 1px solid var(--border); }
.sb-refimgs .ref-label { padding-top: 3px; width: auto; min-width: 64px; }
.sb-refimgs .ref-items { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-height: 24px; align-content: flex-start; }
.sb-refimgs .ref-chip { max-width: 200px; }
/* ---- 首尾帧模式：生成首尾帧提示词 ---- */
.sb-frame-prompt { padding: 6px 12px 10px; border-bottom: 1px solid var(--border); }
.sb-frame-prompt .field-row { align-items: flex-start; }
.sb-frame-prompt .field-row + .field-row { margin-top: 4px; }
.sb-frame-prompt .field-row .field-label { width: auto; flex: none; padding-top: 2px; }
.sb-frame-prompt .field-val { flex: 1; white-space: pre-wrap; word-break: break-word; }
.ref-zone { padding: 8px 12px 4px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.ref-group { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.ref-label { font-size: 11px; color: var(--text-3); width: 76px; flex: none; padding-top: 3px; }
.ref-items { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-height: 24px; align-content: flex-start; }
.ref-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px;
  font-size: 11px; color: var(--text-2); background: var(--bg);
  max-width: 150px;
}
.ref-chip .ref-th { width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #8fb0e8, #4F7CFF); flex: none; object-fit: cover; display: block; }
.ref-chip .ref-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-x { width: 14px; height: 14px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 9px; line-height: 14px; text-align: center; border: none; cursor: pointer; padding: 0; flex: none; }
.ref-empty { font-size: 11px; color: var(--text-3); padding-top: 3px; }
/* 提示词优化结果预览：参考图缩略图行 */
.ppo-refs { display: flex; flex-wrap: wrap; gap: 8px; }
.ppo-ref-img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); background: linear-gradient(135deg, #8fb0e8, #4F7CFF); }
.ppo-ref-empty { font-size: 12px; color: var(--text-3); }
.ref-add {
  flex: none; border: 1.5px dashed var(--border-light); border-radius: 6px;
  padding: 3px 10px; font-size: 11px; color: var(--text-3); cursor: pointer;
  background: var(--card-2); white-space: nowrap;
}
.ref-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.sb-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: none; }
.sb-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.sb-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.sb-meta .shot-chip { display: inline-block; padding: 0 6px; line-height: 18px; font-size: 11px; border-radius: 4px; background: var(--primary-light); color: var(--primary); white-space: nowrap; }
.sb-meta .shot-chip.line { background: rgba(167, 139, 250, 0.18); color: var(--accent-2); }
.field-zone { border: 1px dashed var(--border-light); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--card-2); }
.field-row { display: flex; align-items: flex-start; gap: 8px; }
.field-row .field-label { font-size: 11px; color: var(--text-3); width: 86px; flex: none; padding-top: 2px; }
/* 生视频 Prompt：标签在上、内容在下，内容占满整行 */
.field-row--prompt { flex-direction: column; gap: 3px; }
.field-row--prompt .field-label { width: auto; padding-top: 0; }
.field-val {
  flex: 1; font-size: 12px; color: var(--text-2); cursor: text;
  border: 1px solid transparent; border-radius: 4px; padding: 2px 6px;
  white-space: pre-wrap; word-break: break-all; min-height: 20px;
}
.field-val:hover { background: var(--card-2); border-color: var(--primary); color: var(--text); }
/* 生视频 Prompt 默认最小化：只显示约 3 行（60px），超高折叠 + 底部渐隐 + "展开"按钮，避免撑高卡片；点击可放大查看全部 */
.field-val--prompt {
  display: block;
  position: relative;
  max-height: 60px;
  overflow: hidden;
  padding-right: 12px;
  transition: max-height .18s ease;
}
.field-val--prompt.open { max-height: none; overflow: visible; }
.field-val--prompt:not(.open)::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px;
  background: linear-gradient(to bottom, rgba(15,22,41,0), rgba(15,22,41,1));
  pointer-events: none;
}
.sb-prompt-toggle {
  position: absolute; right: 4px; bottom: 3px; z-index: 2;
  font-size: 11px; line-height: 1.4; color: var(--primary);
  background: var(--card-2); border: 1px solid var(--border-light);
  border-radius: 4px; padding: 1px 5px; cursor: pointer;
  user-select: none; white-space: nowrap;
}
.sb-prompt-toggle:hover { background: var(--primary-light); border-color: var(--primary); }
/* 参考素材 chip 可点击：点击把 <Picture N> 加入生视频 Prompt */
.ref-chip.pickable { cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.ref-chip.pickable:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.field-input {
  flex: 1; font-size: 12px; color: var(--text); border: 1px solid var(--primary);
  border-radius: 4px; padding: 4px 6px; outline: none; resize: vertical;
  min-width: 0; background: var(--card-2);
}
.field-input:focus { box-shadow: 0 0 0 3px var(--primary-light); }
/* 生视频 Prompt 编辑态：随内容自适应高度 */
.field-input--prompt { height: auto; min-height: 60px; resize: vertical; }
/* 生视频 Prompt 直接原位编辑：无"专门输入框"外观，淡绿背景提示可编辑，内容自适应 */
.field-input--prompt[contenteditable] {
  display: block;
  width: 100%;
  border-color: transparent;
  background: rgba(52, 211, 153, .07);
  box-shadow: none;
  padding: 4px 6px;
  white-space: pre-wrap;
  word-break: break-all;
}
.field-input--prompt[contenteditable]:focus {
  border-color: var(--primary);
  box-shadow: none;
}
.field-input--prompt[contenteditable]:empty::before {
  content: '点击修改，点击其他位置保存';
  color: var(--text-3);
  pointer-events: none;
}
/* 参考素材标记插入后的即时反馈：边框绿色闪一下（与成功色 #10B981 一致） */
.field-input.chip-insert {
  border-color: var(--success);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .25);
  animation: chip-pop .9s ease-out;
}
@keyframes chip-pop { 0% { background: rgba(52, 211, 153, .18); } 100% { background: var(--card-2); } }
.field-val.flash { animation: sb-flash .9s ease-out; }
@keyframes sb-flash { 0% { background: rgba(52, 211, 153, .4); } 100% { background: transparent; } }
.sb-body .sb-actions { margin-top: 2px; justify-content: flex-end; }
.tag-select { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow-y: auto; }
.tag-check {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; font-size: 12px; cursor: pointer; background: var(--card-2);
  color: var(--text-2);
}
.tag-check:hover { border-color: var(--primary); }
.tag-check input { display: none; }
.tag-check:has(input:checked) { background: var(--primary-light); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.sb-toolbar .search-box { width: 240px; }

/* ============ 弹窗 ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 8, 18, 0.65);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.modal-overlay.closing { animation: fadeOut 0.12s ease forwards; }
@keyframes fadeOut { to { opacity: 0; } }
.modal {
  background: linear-gradient(180deg, #141C33, #0F1629);
  border: 1px solid var(--border-light); border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 30px rgba(108, 140, 255, 0.08);
  display: flex; flex-direction: column; max-height: 88vh;
  animation: popIn 0.16s ease;
}
@keyframes popIn { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: none; } }
.modal-sm { width: 420px; max-width: 92vw; }
.modal-md { width: 660px; max-width: 94vw; }
.modal-lg { width: 900px; max-width: 94vw; }
.modal-xl { width: 1180px; max-width: 96vw; height: 92vh; max-height: 92vh; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 16px; }
.modal-head-actions { display: flex; gap: 8px; margin-left: auto; margin-right: 12px; }
.modal-close {
  border: none; background: none; font-size: 22px; color: var(--text-3);
  cursor: pointer; line-height: 1; width: 28px; height: 28px;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--primary-light); color: var(--text); }
.modal-body { padding: 20px; overflow-y: auto; min-height: 0; }
/* AI 一键写剧本：步骤容器撑满弹窗，内部滚动 */
#gen-step-config, #gen-step-result {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
#gen-step-config .modal-body, #gen-step-result .modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
#gen-step-config .modal-foot, #gen-step-result .modal-foot { flex-shrink: 0; }
/* ============ 生成视频弹窗：工作流卡片选择 ============ */
.vg-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--text); margin: 2px 0 10px;
}
.vg-title:not(:first-child) { margin-top: 18px; }
.vg-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
/* 生成弹窗顶部提示：本次几张图 → 自动匹配几图工作流（避免"我传了 3 张，它用了哪份"） */
.vg-cards-hint {
  font-size: 12px; line-height: 1.6; color: var(--text-3);
  background: rgba(108, 140, 255, 0.08); border: 1px solid rgba(108, 140, 255, 0.25);
  border-radius: 8px; padding: 7px 10px; margin-bottom: 10px;
}
.wf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.wf-card {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; background: var(--card); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.wf-card:hover { border-color: var(--primary); box-shadow: 0 0 12px rgba(108, 140, 255, 0.15); }
.wf-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.12), 0 0 16px rgba(108, 140, 255, 0.2);
}
.wf-radio {
  width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px;
  border-radius: 50%; border: 2px solid var(--border);
  position: relative; transition: border-color 0.15s;
}
.wf-card.active .wf-radio { border-color: var(--primary); }
.wf-card.active .wf-radio::after {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%; background: var(--primary);
}
.wf-card-main { flex: 1; min-width: 0; }
.wf-card-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
.wf-card-meta { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.vg-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vg-field { display: flex; flex-direction: column; gap: 6px; }
.vg-field .form-label { font-size: 12px; color: var(--text-2); }
/* ============ 设置弹窗分区卡片 ============ */
.settings-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 14px;
  overflow: hidden;
}
.settings-card:last-child { margin-bottom: 0; }
.settings-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}
.settings-card-head .sc-icon { font-size: 18px; line-height: 1; }
.settings-card-head h4 { font-size: 14px; color: var(--text); margin: 0; }
.settings-card-head p { font-size: 11px; color: var(--text-3); margin: 2px 0 0; line-height: 1.4; }
.settings-card-head .btn { margin-left: auto; }
.settings-card-body { padding: 14px 16px; }
.settings-card-body .form-group { margin-bottom: 12px; }
.settings-card-body .form-group:last-child { margin-bottom: 0; }
.sc-effective {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--bg); border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-2); line-height: 1.6;
  word-break: break-all;
}
.sc-effective span { color: var(--text-3); margin-right: 8px; white-space: nowrap; }

/* ============ 配置弹窗（v2 精简版：一行一项） ============ */
.cfg-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  margin-bottom: 12px;
  overflow: hidden;
}
.cfg-card:last-child { margin-bottom: 0; }
.cfg-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: var(--card-2);
  border-bottom: 1px solid var(--border);
}
.cfg-head .cfg-icon { font-size: 17px; line-height: 1; }
.cfg-head-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cfg-head-text strong { font-size: 13px; color: var(--text); font-weight: 600; }
.cfg-head-text span { font-size: 11px; color: var(--text-3); line-height: 1.4; }
.cfg-head .btn { margin-left: auto; }
.cfg-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cfg-row { display: flex; align-items: flex-start; gap: 12px; }
.cfg-row > label {
  flex: 0 0 84px; padding-top: 8px;
  font-size: 12px; color: var(--text-2); text-align: right;
}
.cfg-ctl { flex: 1 1 auto; min-width: 0; }
.cfg-input {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px; font-size: 13px;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 8px;
  outline: none;
}
.cfg-input:focus { border-color: var(--primary); }
select.cfg-input { cursor: pointer; }
.cfg-textarea { resize: vertical; font-size: 12px; line-height: 1.6; font-family: inherit; }
.cfg-inline { display: flex; gap: 8px; align-items: center; }
.cfg-inline .cfg-input { flex: 1 1 auto; }
.cfg-inline .btn { flex: 0 0 auto; white-space: nowrap; }
.cfg-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.5; }
.cfg-advanced { margin-top: 2px; }
.cfg-advanced summary {
  cursor: pointer; font-size: 12px; color: var(--text-2);
  padding: 4px 0; user-select: none;
}
.cfg-advanced summary:hover { color: var(--primary); }
.cfg-advanced textarea { margin-top: 6px; }
.test-result {
  font-size: 12px; margin-top: 12px; padding: 8px 10px;
  border-radius: var(--radius-sm); line-height: 1.5; display: none;
  word-break: break-all;
}
.test-result.ok { display: block; background: var(--success-light); color: var(--success); }
.test-result.fail { display: block; background: var(--danger-light); color: var(--danger); }
.test-result.loading { display: block; background: var(--primary-light); color: var(--primary); }

.modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
}

/* 视频生成模式选择卡片 */
#video-mode-body { display: flex; flex-direction: column; gap: 12px; }
.mode-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 720px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-2); cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.mode-card:hover:not(:disabled) { border-color: var(--primary); box-shadow: 0 2px 12px rgba(108, 140, 255, 0.2); }
.mode-card:disabled { cursor: not-allowed; }
.mode-card.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.mode-card .mode-icon { font-size: 15px; font-weight: 600; color: var(--primary); }
.mode-card .mode-name { font-size: 14px; font-weight: 600; }
.mode-card .mode-desc { font-size: 12px; color: var(--text-muted); }
.mode-tag {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 600; line-height: 16px; vertical-align: 1px;
}
.mode-tag.rec { background: var(--primary-light); color: var(--primary); }
.mode-state { margin-top: 6px; }
.vg-state { font-size: 11px; font-weight: 600; }
.vg-state.ok { color: var(--success); }
.vg-state.warn { color: var(--warning); }
.btn.ghost { background: transparent; color: var(--text-2); border-color: var(--border); }

/* 视频生成弹窗：分镜信息 + 尾帧图选择 */
.vg-info {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg); display: flex; flex-direction: column; gap: 4px;
}
.vg-info-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.vg-info-auto { font-size: 12px; color: var(--success); }
.vg-info-auto b { font-weight: 600; }
.vg-info-prompt { font-size: 12px; color: var(--text-3); word-break: break-all; }
/* 生成工作流选择 */
.vg-workflow { display: flex; flex-direction: column; gap: 6px; }
.vg-wf-row { display: flex; align-items: center; gap: 8px; }
.vg-wf-select {
  flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card-2); color: var(--text);
}
.vg-lastframe { display: flex; flex-direction: column; gap: 8px; }
.vg-lf-title { font-size: 13px; font-weight: 600; color: var(--text-2); }
.vg-lf-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vg-lf-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px; max-height: 180px; overflow-y: auto;
}
.lf-item {
  position: relative; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; cursor: pointer; padding: 0; background: var(--card-2);
}
.lf-item:hover { border-color: var(--primary); }
.lf-item.active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-light); }
.lf-item img { width: 100%; height: 64px; object-fit: cover; display: block; }
.lf-item span {
  position: absolute; left: 2px; bottom: 2px; padding: 0 5px; border-radius: 4px;
  font-size: 10px; font-weight: 600; background: rgba(0,0,0,.55); color: #fff;
}

/* 全能参考：参考素材列表 */
.vg-refs { display: flex; flex-direction: column; gap: 8px; }
.vg-ref-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px; max-height: 180px; overflow-y: auto;
}
.vg-ref-item {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
  background: var(--card-2); min-width: 0;
}
.vg-ref-item img {
  width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
  border: 1px solid var(--border);
}
.vg-ref-icon {
  width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--bg); border: 1px solid var(--border);
}
.vg-ref-name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; color: var(--text-2);
}
.vg-ref-del {
  flex-shrink: 0; width: 20px; height: 20px; border: none; border-radius: 50%;
  background: var(--danger-light); color: var(--danger); font-size: 14px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.vg-ref-del:hover { background: rgba(248, 113, 113, 0.28); }

/* ============ 参考素材选择弹窗（从角色/场景/资产/已生成分镜导入） ============ */
.picker-upload-row { display: flex; align-items: center; gap: 10px; padding: 10px 20px 0; }
.picker-group { margin-bottom: 16px; }
.picker-group:last-child { margin-bottom: 0; }
.picker-group-title {
  font-size: 13px; font-weight: 600; color: var(--text-1);
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px; max-height: 260px; overflow-y: auto; padding-right: 4px;
}
.picker-item {
  position: relative; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; cursor: pointer; background: var(--card-2);
  transition: border-color .2s, box-shadow .2s;
}
.picker-item:hover { border-color: var(--primary); box-shadow: 0 2px 12px rgba(108, 140, 255, 0.2); }
.picker-item.on { border-color: var(--success); box-shadow: 0 0 0 2px rgba(52, 211, 153, .3); }
/* 已添加的参考图：置灰 + 不可再次添加（点按提示已在卡片中） */
.picker-item.added { opacity: .72; cursor: default; }
.picker-item.added:hover { border-color: var(--border); box-shadow: none; }
.picker-item.added .picker-check { background: var(--success); }
.picker-item img {
  width: 100%; height: 84px; object-fit: cover; display: block;
  background: var(--bg);
}
.picker-item video { width: 100%; height: 84px; object-fit: cover; display: block; background: var(--bg); }
.picker-item audio { width: 100%; height: 36px; display: block; padding: 6px; box-sizing: border-box; }
.picker-item .picker-media { position: relative; }
.picker-item .picker-media .picker-kind { position: absolute; left: 6px; top: 6px; font-size: 10px; background: rgba(15,23,42,.65); color: #fff; padding: 2px 6px; border-radius: 999px; }
.picker-name {
  display: block; padding: 6px 8px 10px; font-size: 12px; color: var(--text-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-check {
  position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px;
  padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--primary); color: #fff; line-height: 22px; text-align: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.picker-item.on .picker-check { background: var(--success); }

/* 编辑弹窗：尾帧图行 */
.lf-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lf-thumb {
  width: 64px; height: 40px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border);
}

/* 角色/场景生成状态角标 */
.gen-badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 18px;
}
.gen-badge.ok { background: rgba(52, 211, 153, .14); color: #34D399; }
.gen-badge.running { background: rgba(251, 191, 36, .16); color: #FBBF24; }
.gen-badge.fail { background: rgba(248, 113, 113, .16); color: #F87171; }

/* ============ Toast ============ */
#toast-container {
  position: fixed; top: 16px; left: 16px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  padding: 10px 16px; border-radius: var(--radius-sm);
  font-size: 13px; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 8px; max-width: 320px;
  animation: slideIn 0.2s ease;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.toast.success { background: var(--success); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
.toast.info { background: #1E2A44; color: #fff; border: 1px solid var(--border-light); }
.toast.warn { background: var(--warning); color: #0A0F1E; border: 1px solid var(--warning-light); }
.toast .t-close { cursor: pointer; margin-left: 6px; font-size: 15px; opacity: 0.8; }
.toast .t-close:hover { opacity: 1; }

/* ============ 任务中心 ============ */
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.task-item .t-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.task-item .t-label { font-weight: 600; font-size: 13px; }
.task-item .t-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.task-item .t-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.progress-bar { flex: 1; height: 6px; background: var(--bg); border-radius: 999px; overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: var(--primary); border-radius: 999px; transition: width 0.3s; }
.task-item .t-error { font-size: 12px; color: var(--danger); margin-top: 6px; word-break: break-all; }
.task-item .t-result { font-size: 12px; color: var(--text-3); margin-top: 6px; word-break: break-all; }
.t-status { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.t-status.pending { background: var(--bg); color: var(--text-2); }
.t-status.running { background: var(--warning-light); color: var(--warning); }
.t-status.success { background: var(--success-light); color: var(--success); }
.t-status.failed { background: var(--danger-light); color: var(--danger); }
.t-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ============ 角色页头像 / 衣橱 ============ */
.asset-card .a-avatar img,
.asset-card .a-avatar span {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm);
}
.asset-card .a-avatar span { display: flex; align-items: center; justify-content: center; font-size: 40px; }
.asset-table .t-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--bg); display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; border: 1px solid var(--border); vertical-align: middle;
}
.wardrobe-empty {
  text-align: center; padding: 26px 0; color: var(--text-3); font-size: 13px;
}
.wardrobe-item {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; background: var(--card-2);
}
.wardrobe-item .w-thumb {
  width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  font-size: 20px; border: 1px solid var(--border); flex-shrink: 0;
}
.wardrobe-item .w-info { flex: 1; min-width: 0; }
.wardrobe-item .w-name { font-size: 13px; font-weight: 600; }
.wardrobe-item .w-desc {
  font-size: 12px; color: var(--text-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wardrobe-item .w-del {
  border: none; background: none; cursor: pointer; color: var(--text-3);
  font-size: 16px; line-height: 1; padding: 4px; border-radius: var(--radius-sm);
}
.wardrobe-item .w-del:hover { background: var(--danger-light); color: var(--danger); }
.wardrobe-add { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 12px; }
.wardrobe-add .btn { width: 100%; justify-content: center; }

/* ============ 生成历史（选择/删除） ============ */
.history-empty {
  text-align: center; padding: 32px 0; color: var(--text-3); font-size: 13px;
}
.history-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; background: var(--card-2);
}
.history-item.current { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 12px rgba(108, 140, 255, 0.12); }
.history-thumb-wrap { position: relative; flex-shrink: 0; }
.history-thumb {
  width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover;
  background: var(--bg); border: 1px solid var(--border); display: block;
}
.history-tag {
  position: absolute; top: -6px; right: -6px;
  background: var(--primary); color: #fff; font-size: 10px;
  border-radius: 8px; padding: 1px 6px;
}
.history-info { flex: 1; min-width: 0; }
.history-time { font-size: 12px; color: var(--text-3); }
.history-note { font-size: 12px; color: var(--primary); margin-top: 3px; }
.history-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.history-current-hint { font-size: 12px; color: var(--primary); font-weight: 600; }
.history-hint {
  margin-top: 10px; font-size: 12px; color: var(--text-3);
  border-top: 1px dashed var(--border); padding-top: 10px;
}

/* 提示词优化方式选择（API / ComfyUI 工作流） */
.opt-mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-mode-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 12px; cursor: pointer; text-align: center;
  background: var(--card-2); transition: border-color 0.15s, background 0.15s;
}
.opt-mode-card:hover { border-color: var(--primary); background: var(--primary-light); }
.opt-mode-icon { font-size: 26px; margin-bottom: 6px; }
.opt-mode-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.opt-mode-desc { font-size: 11px; color: var(--text-3); margin-top: 4px; line-height: 1.4; }

/* 分镜视频历史版本（v2 首尾帧页 / 全能参考页，点击预览） */
.vh-preview-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px;
}
.vh-preview {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.vh-item { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.vh-item:hover:not(.current) { border-color: var(--primary); }
.vh-item.current { cursor: default; }
.vh-item.vh-selected { border-color: var(--primary); box-shadow: 0 0 8px rgba(108, 140, 255, 0.25); }
.vh-item .history-thumb { pointer-events: none; }

/* ============ AI 拆解分镜 ============ */
.ai-warn {
  font-size: 12px; color: var(--warning); background: var(--warning-light);
  border: 1px solid rgba(251, 191, 36, 0.4); border-radius: var(--radius-sm);
  padding: 8px 12px; margin-bottom: 10px;
}
.ai-item-sub.muted { color: var(--text-3); }

/* ============ AI 提取角色/场景 ============ */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  font-size: 11px; margin-left: 6px; vertical-align: 1px;
}
.badge-ok { background: var(--success-light); color: var(--success); }
.badge-gray { background: var(--bg); color: var(--text-2); }

/* ============ 工作流管理 ============ */
.table-wrap { overflow-x: auto; }
.table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.table th, .table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table th {
  color: var(--text-2); font-weight: 500; font-size: 12px;
  background: var(--card-2); white-space: nowrap;
}
.table tbody tr:hover { background: rgba(108, 140, 255, 0.06); }
.wf-placeholders {
  font-size: 11px; color: var(--text-3); font-family: monospace;
  word-break: break-all;
}
.wf-editor {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 12px 14px 14px;
}
.wf-editor-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.wf-editor-head strong { font-size: 13px; color: var(--text-1); }
.wf-editor .wf-name-input,
.wf-editor textarea.wf-textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; color: var(--text-1);
  background: var(--card-2); box-sizing: border-box;
}
.wf-editor textarea.wf-textarea {
  margin-top: 8px; font-family: Consolas, Menlo, monospace; font-size: 12px;
  resize: vertical; line-height: 1.5;
}
.wf-editor .wf-name-input::placeholder,
.wf-editor textarea.wf-textarea::placeholder { color: var(--text-3); }
.wf-editor .wf-name-input:focus,
.wf-editor textarea.wf-textarea:focus {
  outline: none; border-color: var(--primary);
}
.wf-editor-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 10px; }
/* 工作流行内改名（名称单元格切换成输入框） */
.wf-name-cell .wf-rename-input {
  width: 100%; min-width: 160px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px; font-size: 13px; color: var(--text-1); background: var(--card-2);
  box-sizing: border-box;
}
.wf-name-cell .wf-rename-input:focus { outline: none; border-color: var(--primary); }
.wf-rename-actions { display: flex; gap: 6px; margin-top: 6px; }
.wf-view-pre {
  margin: 0; max-height: 60vh; overflow: auto;
  font-size: 12px; line-height: 1.6; color: var(--text-1);
  background: var(--bg); border: 1px solid var(--border);
  padding: 12px; border-radius: 8px;
  white-space: pre-wrap; word-break: break-all;
  font-family: Consolas, Menlo, 'Courier New', monospace;
}
/* AI 提取：流式输出区 */
.ai-stream {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden;
}
.ai-stream-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 12px; color: var(--text-2);
  background: var(--card-2); border-bottom: 1px solid var(--border);
}
.ai-stream-head .dot-run {
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
  animation: pulse 1s infinite;
}
.ai-stream-body {
  max-height: 240px; overflow: auto; margin: 0; padding: 10px 12px;
  font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 1.6;
  color: var(--text-2); white-space: pre-wrap; word-break: break-all;
}
/* 工作流管理：按四大生成分类卡片 */
.wf-cat { margin-bottom: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--card); }
.wf-cat-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--card-2);
}
.wf-cat-icon { font-size: 18px; }
.wf-cat-titles { display: flex; flex-direction: column; gap: 2px; }
.wf-cat-title { font-size: 14px; color: var(--text-1); }
.wf-cat-desc { font-size: 11px; color: var(--text-3); }
.wf-state { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.wf-state.ok { background: var(--success-light); color: var(--success); }
.wf-state.none { background: var(--bg); color: var(--text-3); }
.wf-cat-empty {
  padding: 14px; font-size: 12px; color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.wf-cat-subs { border-bottom: 1px solid var(--border); }
.wf-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px dashed var(--border);
}
.wf-sub:last-child { border-bottom: none; }
.wf-sub-info { display: flex; flex-direction: column; gap: 2px; }
.wf-sub-info strong { font-size: 13px; color: var(--text-1); }
.wf-sub-note { font-size: 11px; color: var(--text-3); }
.wf-sub-right { display: flex; align-items: center; gap: 10px; }
.wf-cat .table-wrap { border-bottom: 1px solid var(--border); }
/* 窄弹窗里别把表格压扁：宁可横向滚动，也别让工作流名竖排、操作按钮挤成两行
   （2026-09-25：用户报「工作流弹窗样式坏了」时，窄窗口下这几个列被压到 60~90px） */
.wf-cat .table-wrap > table.table { min-width: 620px; }
.btn.danger-ghost {
  background: var(--card-2); color: var(--danger); border-color: var(--danger);
}
.btn.danger-ghost:hover { background: var(--danger-light); color: var(--danger); }
.ai-section { margin-bottom: 18px; }
.ai-section h4 { font-size: 13px; margin: 0 0 8px; color: var(--text-2); }
.ai-item {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; background: var(--card-2);
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-item:hover { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.12); }
.ai-item:has(input:checked) { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 14px rgba(108, 140, 255, 0.15); }
.ai-item input[type="checkbox"] { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.ai-item-main { flex: 1; min-width: 0; }
.ai-item-title { font-size: 13px; font-weight: 600; }
.ai-item-sub {
  font-size: 12px; color: var(--text-3); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ai-detail { margin-top: 6px; }
.ai-detail summary {
  font-size: 12px; color: var(--primary); cursor: pointer;
  user-select: none;
}
.ai-prompt {
  margin: 6px 0 0; padding: 8px 10px; font-size: 11px; line-height: 1.6;
  color: var(--text-2); background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all;
  max-height: 160px; overflow: auto;
}

/* ============ AI 智能拆解预览卡片（v2.0） ============ */
.ai-preview-count {
  font-size: 12px; color: var(--text-2); margin-bottom: 10px;
  padding: 8px 12px; background: var(--primary-light);
  border-radius: var(--radius-sm);
}
.ai-card {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 10px; background: var(--card-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ai-card:hover { border-color: var(--primary); box-shadow: 0 0 12px rgba(108, 140, 255, 0.14); }
.ai-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ai-card-no {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 6px;
  padding: 2px 8px; flex-shrink: 0;
}
.ai-card-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-card-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.ai-card-meta .tag {
  font-size: 11px; color: var(--text-2); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
}
.ai-card-desc { font-size: 12px; color: var(--text); line-height: 1.7; margin-bottom: 4px; }
.ai-text-block {
  margin: 0 0 8px; padding: 10px 12px; font-size: 12px; line-height: 1.8;
  color: var(--text); background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); white-space: pre-wrap; word-break: break-all;
}
.ai-card-line { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.ai-card-edit { margin-top: 8px; }
.btn-sm {
  padding: 3px 10px; font-size: 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--card-2); color: var(--primary);
  cursor: pointer;
}
.btn-sm:hover { border-color: var(--primary); background: var(--primary-light); }

/* ============ 微调抽屉 ============ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(4, 8, 18, 0.6);
  backdrop-filter: blur(4px);
  display: flex; justify-content: flex-end; overflow: hidden;
}
.drawer-overlay.hidden { display: none; }
.drawer {
  width: 400px; max-width: 92vw; height: 100%;
  background: linear-gradient(180deg, #141C33, #0F1629);
  border-left: 1px solid var(--border-light);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.55);
  display: flex; flex-direction: column;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.drawer-head h4 { margin: 0; font-size: 15px; }
.drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }
.drawer-label {
  display: block; font-size: 12px; color: var(--text-2); margin-bottom: 14px;
}
.drawer-label textarea,
.drawer-label input[type="text"],
.drawer-label input[type="number"],
.drawer-label select {
  display: block; width: 100%; margin-top: 6px; box-sizing: border-box;
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-2); color: var(--text);
}
.drawer-label textarea:focus,
.drawer-label input:focus,
.drawer-label select:focus {
  outline: none; border-color: var(--primary);
}
.drawer-row { display: flex; gap: 12px; }
.drawer-row .drawer-label { flex: 1; }
.drawer-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px; border-top: 1px solid var(--border);
}

/* ============ 提示词库（pl-*：分类折叠 / 提示词卡片 / 内置折叠块 / 自定义列表） ============ */
.pl-page { max-width: 1200px; }
.pl-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
}
.pl-title { font-size: 18px; color: var(--text); margin: 0; }
.pl-sub { font-size: 12px; color: var(--text-2); margin-top: 4px; max-width: 680px; line-height: 1.7; }
.pl-head-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.pl-reset-all:hover { border-color: var(--danger); color: var(--danger); }
.pl-summary {
  display: inline-flex; gap: 14px; padding: 6px 14px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  font-size: 12px; color: var(--text-2);
}
.pl-cat {
  margin-bottom: 14px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.pl-cat-title {
  display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  font-size: 15px; font-weight: 700; color: var(--text);
  padding: 12px 14px; transition: background .15s;
}
.pl-cat-title:hover { background: var(--card-2); }
.pl-cat-arrow {
  width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg); transition: transform .2s; margin-right: 2px;
}
.pl-cat.collapsed .pl-cat-arrow { transform: rotate(-45deg); }
.pl-cat-name { flex: 1; }
.pl-cat-count {
  font-size: 11px; font-weight: 400; color: var(--text-3);
  background: var(--card-2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px;
}
.pl-cat-body { border-top: 1px solid var(--border); padding: 14px; display: block; }
.pl-cat.collapsed .pl-cat-body { display: none; }
.pl-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.pl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pl-card-name { font-size: 14px; color: var(--text); margin: 0; }
.pl-flag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--card-2); color: var(--text-3); border: 1px solid var(--border);
}
.pl-flag.custom { background: var(--warning-light); color: var(--warning); border-color: transparent; }
.pl-flag.modified { background: var(--info-light); color: var(--info); border-color: transparent; }
.pl-desc { font-size: 12px; color: var(--text-2); line-height: 1.7; }
.pl-format {
  background: var(--card-2); border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.pl-format-label { font-size: 11px; font-weight: 700; color: var(--accent); }
.pl-format p { font-size: 12px; color: var(--text-2); line-height: 1.7; margin: 4px 0 0; }
.pl-block { display: flex; flex-direction: column; gap: 6px; }
.pl-block-label { font-size: 12px; font-weight: 600; color: var(--text); }
.pl-block-tip { font-weight: 400; color: var(--text-3); margin-left: 4px; }
/* 内置提示词折叠块 */
.pl-builtin {
  border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden;
}
.pl-builtin-head {
  display: flex; align-items: center; gap: 8px; width: 100%; cursor: pointer;
  padding: 8px 10px; background: var(--card-2); border: none;
  font-size: 12px; font-weight: 600; color: var(--text); text-align: left;
  transition: background .15s;
}
.pl-builtin-head:hover { background: var(--card-2-hover, var(--card-2)); }
.pl-builtin-head .pl-cat-arrow { transform: rotate(-45deg); }
.pl-builtin.open .pl-builtin-head .pl-cat-arrow { transform: rotate(45deg); }
.pl-builtin-hint { font-weight: 400; color: var(--text-3); font-size: 11px; }
.pl-builtin-badge {
  font-size: 10px; font-weight: 400; color: var(--info);
  background: var(--info-light); border: 1px solid transparent;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}
.pl-builtin-body { display: none; padding: 10px; background: var(--bg); flex-direction: column; gap: 8px; }
.pl-builtin.open .pl-builtin-body { display: flex; }
.pl-builtin-edit {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.7; color: var(--text-2);
  font-family: Consolas, Monaco, 'Courier New', monospace;
  background: var(--card); outline: none; resize: vertical; box-sizing: border-box;
}
.pl-builtin-edit:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
/* 用户自定义提示词列表 */
.pl-custom-list { display: flex; flex-direction: column; gap: 8px; }
.pl-custom-item {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-2); overflow: hidden;
}
.pl-custom-item.active { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pl-custom-item-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer;
}
.pl-custom-item-head:hover { background: var(--card-2-hover, var(--card-2)); }
.pl-custom-radio {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; cursor: pointer;
  font-size: 12px; color: var(--text-2);
}
.pl-custom-radio input { accent-color: var(--primary); cursor: pointer; }
.pl-custom-summary {
  flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); line-height: 1.6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-custom-badge {
  flex-shrink: 0; font-size: 11px; color: var(--text-3);
  background: var(--card); border: 1px solid var(--border); padding: 1px 6px; border-radius: 999px;
}
.pl-custom-item-body { padding: 8px 10px 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.pl-custom-item-body[hidden] { display: none; }
.pl-custom-edit {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.7; outline: none; resize: vertical;
  background: var(--card); color: var(--text); font-family: Consolas, Monaco, 'Courier New', monospace;
}
.pl-custom-edit:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
.pl-add-row { display: flex; align-items: flex-start; gap: 8px; margin-top: 2px; }
.pl-custom-new {
  flex: 1; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.7; outline: none; resize: vertical;
  background: var(--bg); color: var(--text); font-family: Consolas, Monaco, 'Courier New', monospace;
}
.pl-custom-new:focus { border-color: var(--primary); border-style: solid; }
.pl-area {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.7; outline: none;
  background: var(--card-2); color: var(--text); font-family: Consolas, Monaco, 'Courier New', monospace;
  resize: vertical; min-height: 96px;
}
.pl-area.readonly { background: var(--bg); color: var(--text-2); border-style: dashed; }
.pl-custom-area {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 12px; line-height: 1.7; outline: none;
  background: var(--card-2); color: var(--text); font-family: Consolas, Monaco, 'Courier New', monospace;
  resize: vertical; min-height: 84px;
}
.pl-custom-area:focus, .pl-area:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
.pl-actions { display: flex; align-items: center; gap: 8px; }
.pl-actions .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pl-status { font-size: 12px; margin-left: auto; }
.pl-status.ok { color: var(--success); }
.pl-status.err { color: var(--danger); }
@media (max-width: 768px) {
  .pl-head { flex-direction: column; }
}

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); box-shadow: 0 0 6px rgba(108, 140, 255, 0.5); }
::-webkit-scrollbar-track { background: transparent; }

/* ============ 响应式 ============ */
/* 汉堡按钮与抽屉遮罩：桌面端隐藏，小屏由媒体查询启用 */
.nav-toggle {
  display: none;
  flex-shrink: 0;
  border: 1px solid var(--border);
  background: rgba(120, 180, 255, 0.08);
  color: var(--text-1);
  font-size: 18px;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-right: 10px;
}
.nav-toggle:hover { background: rgba(120, 180, 255, 0.16); }
.nav-overlay { display: none; }

/* ============ 顶栏右侧图标按钮（任务/退出） ============ */
/* 顶栏两侧元素禁止被 flex 压缩/换行，避免小屏挤成一团 */
.brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.brand-name { white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* 密钥到期倒计时（顶栏右侧，仅密钥登录会话显示） */
.key-countdown {
  display: inline-flex; align-items: center;
  flex-shrink: 0; white-space: nowrap;
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--primary); background: rgba(120, 180, 255, 0.10);
  border: 1px solid var(--border);
}
.key-countdown.warn { color: var(--warning); background: rgba(245, 158, 11, 0.12); border-color: var(--warning); }
.key-countdown.expired { color: var(--danger); background: rgba(248, 113, 113, 0.12); border-color: var(--danger); }
.icon-btn {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(120, 180, 255, 0.08);
  color: var(--text-1);
  font-size: 16px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s;
}
.icon-btn:hover { background: rgba(120, 180, 255, 0.18); }
/* 卡片内小图标按钮（复制等）：保持小尺寸，不受顶栏 icon-btn 放大影响 */
.p-actions .icon-btn { width: 28px; height: 28px; font-size: 13px; }
/* 任务数红标 */
.icon-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  background: #ff4757;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--bg, #0d1428);
  pointer-events: none;
}


/* ============ 图片双击放大 ============ */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  overflow: hidden;
}
.lightbox-mask { position: absolute; inset: 0; background: rgba(10, 14, 25, 0.85); }
.lightbox-img {
  /* 不限制尺寸：由 JS 按原始像素布局，保证完整分辨率解码，放大不糊。
     绝对定位 + left/top 50%，以视口中心为锚点，JS 用 transform 控制缩放与平移 */
  position: absolute; left: 50%; top: 50%;
  transform-origin: 0 0;
  max-width: none; max-height: none;
  border-radius: 10px;
  box-shadow: 0 10px 48px rgba(0, 0, 0, 0.55);
  cursor: grab; user-select: none;
  animation: lightbox-in 0.18s ease-out;
  will-change: transform;
}
.lightbox-img.grabbing { cursor: grabbing; }
.lightbox-tip {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 12px;
  padding: 6px 14px; border-radius: 999px; pointer-events: none;
  white-space: nowrap; z-index: 1;
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px; z-index: 1;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.15); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.32); }
@keyframes lightbox-in {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

/* ============ AI 一键写剧本 ============ */
/* 参数配置表单：label 在上、控件在下，统一对齐 */
.gen-form { display: flex; flex-direction: column; gap: 14px; }
.gen-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gen-field .form-label { margin: 0; }
.gen-field .field-hint { margin-top: 2px; }
.gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) {
  .gen-grid { grid-template-columns: 1fr; }
}
.gen-form .style-chips { gap: 8px; }
.step-tag {
  display: inline-block; font-size: 11px; font-weight: 400;
  color: var(--primary); background: var(--primary-light);
  border-radius: 999px; padding: 2px 10px; margin-left: 8px;
  vertical-align: 2px;
}
.form-grid { display: flex; gap: 20px; }
.form-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.form-col .form-label { margin-bottom: 0; }
.form-grid .form-col + .form-col { border-left: 1px solid var(--border); padding-left: 20px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--text); display: block; margin: 14px 0 6px; }
.form-label .req { color: var(--danger); margin-left: 2px; }
.form-input {
  width: 100%; box-sizing: border-box;
  background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 13px; color: var(--text); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
textarea.form-input { font-family: inherit; resize: vertical; line-height: 1.7; }
.field-hint { font-size: 11px; color: var(--text-3); margin-top: 4px; }

/* 风格芯片 */
.style-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.style-chip {
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  font-size: 12px; color: var(--text-2);
  background: var(--card-2); border: 1px solid var(--border);
  transition: all 0.15s; user-select: none;
}
.style-chip:hover { border-color: var(--primary); color: var(--text); }
.style-chip.on {
  background: var(--primary-light); border-color: var(--primary);
  color: var(--primary); font-weight: 600;
}

/* 大纲预览 */
.outline-head {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-2);
}
.outline-head .stat b { color: var(--primary); font-size: 15px; margin: 0 2px; }
.outline-head .hint-stat { color: var(--text-3); margin-left: auto; }
.outline-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.outline-item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.outline-no {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 4px; padding: 2px 8px;
  flex-shrink: 0;
}
.outline-title-input {
  flex: 1; background: transparent; border: 1px solid transparent; border-radius: 4px;
  font-size: 14px; font-weight: 600; color: var(--text); padding: 4px 6px; outline: none;
  transition: all 0.15s;
}
.outline-title-input:hover { border-color: var(--border-light); }
.outline-title-input:focus { border-color: var(--primary); background: var(--card-2); }
.outline-regen-btn {
  flex-shrink: 0; font-size: 11px; padding: 3px 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--card-2);
  color: var(--text-2); cursor: pointer; transition: all 0.15s;
}
.outline-regen-btn:hover { border-color: var(--primary); color: var(--primary); }
.outline-regen-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.outline-fields { display: flex; flex-direction: column; gap: 6px; }
.outline-field { display: flex; gap: 6px; align-items: flex-start; }
.outline-field-label {
  flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-3);
  padding-top: 6px; width: 42px;
}
.outline-field textarea {
  flex: 1; background: var(--card-2); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font-size: 12px; line-height: 1.7;
  color: var(--text-2); outline: none; resize: vertical; font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.outline-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); color: var(--text); }
.foot-note { margin-right: auto; font-size: 11px; color: var(--text-3); align-self: center; }
.gen-start-bar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-top: 1px solid var(--border); background: var(--card-2); }
.gen-start-bar .gen-start-label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.gen-start-bar .gen-start-no { width: 64px; text-align: center; }
.gen-start-bar .foot-note { margin-left: auto; }
.gen-start-bar select#ai-split-chapter { width: auto; min-width: 220px; max-width: 340px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--card-2); color: var(--text); font-size: 13px; outline: none; }
.gen-start-bar select#ai-split-chapter:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
/* AI 提取弹窗顶栏下拉（提取范围 / 模型 / 思考模式）统一暗色主题，
   之前只有 #ai-split-chapter 有样式，其余浏览器默认白底显得突兀 */
.gen-start-bar select {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-2); color: var(--text); font-size: 13px; outline: none;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.gen-start-bar select:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
.gen-start-bar select option { background: var(--card-2); color: var(--text); }
.gen-start-bar select#ai-extract-chapter { width: auto; min-width: 200px; max-width: 320px; }
/* 模型名比较长（如 minimax_h3_fl2v_turbo_8step_v1.0_comfyui_bf16.safetensors），
   下拉要够宽，否则选项文字被截断看不全 */
.gen-start-bar select#ai-extract-model,
.gen-start-bar select#ai-split-model { width: auto; min-width: 260px; max-width: 430px; }
.gen-start-bar select#ai-extract-thinking,
.gen-start-bar select#ai-split-thinking { width: auto; min-width: 160px; }
/* AI 优化提示词弹窗头部：模型 / 思考模式 */
.po-head-selects { display: flex; align-items: center; gap: 12px; margin-left: auto; margin-right: 10px; }
.po-head-selects label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-3); white-space: nowrap;
}
.po-head-selects select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--card-2); color: var(--text); font-size: 12px; outline: none;
}
.po-head-selects select#po-model { min-width: 220px; max-width: 320px; }
.po-head-selects select:focus { border-color: var(--primary); }
.po-head-selects select option { background: var(--card-2); color: var(--text); }
/* 画面比例：宽 × 高 一行两个输入 */
.wf-pair { display: flex; align-items: center; gap: 8px; }
.wf-pair .wf-param-input { flex: 1 1 0; }
.wf-pair-x { color: var(--text-3); font-size: 13px; flex: 0 0 auto; }

/* AI 提取画风选择（首尾帧/全能参考弹窗共用） */
#ai-extract-style-bar { border-top: none; padding-top: 2px; padding-bottom: 10px; }
.extract-style-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0; }
.extract-style-card {
  flex: 0 0 auto; width: 76px; cursor: pointer; text-align: center;
  border: 2px solid transparent; border-radius: 10px; padding: 4px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.extract-style-card img {
  width: 68px; height: 68px; object-fit: cover; border-radius: 8px;
  display: block; background: var(--card-2); border: 1px solid var(--border);
}
.extract-style-card span { display: block; margin-top: 4px; font-size: 11px; color: var(--text-2); line-height: 1.3; }
.extract-style-card:hover { transform: translateY(-1px); }
.extract-style-card.active { border-color: var(--primary); background: rgba(108, 140, 255, 0.10); }
.extract-style-card.active span { color: var(--primary); font-weight: 600; }
.extract-style-card.active img { border-color: var(--primary); }

/* 逐集生成进度弹窗 */
.progress-wrap { display: flex; flex-direction: column; gap: 10px; }
.progress-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.progress-title { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.progress-title .cur { color: var(--primary); font-weight: 600; }
.progress-pct { font-size: 20px; font-weight: 700; color: var(--primary); }
.progress-bar { height: 8px; background: var(--card-2); border-radius: 999px; overflow: hidden; }
.progress-bar .fill {
  height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 999px; transition: width 0.3s; width: 0;
}
.progress-sub {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-2); flex-wrap: wrap;
}
.spinner {
  width: 13px; height: 13px; flex-shrink: 0;
  border: 2px solid var(--primary-light); border-top-color: var(--primary);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ep-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 56vh; overflow-y: auto; margin-top: 4px;
  padding-right: 4px;
}
.ep-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--border);
  transition: all 0.2s;
}
.ep-item.done { border-color: var(--success); background: var(--success-light); }
.ep-item.error { border-color: var(--danger); background: var(--danger-light); }
.ep-no {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; flex-shrink: 0;
}
.ep-title { flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-status { font-size: 11px; flex-shrink: 0; }
.ep-status.waiting { color: var(--text-3); }
.ep-status.generating { color: var(--primary); }
.ep-status.done { color: var(--success); }
.ep-status.error { color: var(--danger); }
.final-box {
  margin-top: 4px; padding: 12px 14px;
  background: var(--success-light); border: 1px solid var(--success);
  border-radius: var(--radius-sm); font-size: 13px; color: var(--success);
  line-height: 1.7;
}

/* 高亮渐变按钮（AI 一键写剧本） */
.btn.glow {
  position: relative;
  background: linear-gradient(135deg, #6c8cff, #a06cff);
  background-size: 200% 200%;
  animation: glowShift 3s ease infinite;
  border: none;
  box-shadow: 0 4px 16px rgba(108, 140, 255, 0.35);
  color: #fff;
}
.btn.glow:hover {
  box-shadow: 0 6px 22px rgba(108, 140, 255, 0.5);
  transform: translateY(-1px);
}
@keyframes glowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 新生成章节高亮动画 */
.chapter-item.new-chapter {
  animation: newChapter 2.2s ease-out;
  border-color: var(--primary);
}
@keyframes newChapter {
  0% { background: rgba(108, 140, 255, 0.28); }
  60% { background: rgba(108, 140, 255, 0.28); }
  100% { background: transparent; }
}


/* ===== 图片卡 ⋮ 三点菜单（角色/场景/资产图片下载） ===== */
/* 按钮与下拉菜单叠加在 .a-avatar 内（position:relative），不包装图片本身 */
.img-menu-btn {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; line-height: 20px;
  border: none; border-radius: 6px; cursor: pointer;
  background: rgba(0,0,0,0.45); color: #fff; font-size: 16px;
  display: none; align-items: center; justify-content: center;
  z-index: 3;
}
.a-avatar:hover .img-menu-btn { display: flex; }
.img-menu {
  position: absolute; top: 34px; right: 6px; z-index: 5;
  background: var(--card, #0F1629); border: 1px solid var(--border, #1E2A44);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  overflow: hidden; min-width: 132px;
}
.img-menu-item {
  display: block; width: 100%; padding: 9px 14px; text-align: left;
  border: none; background: none; color: var(--text, #E5EDF8);
  font-size: 13px; cursor: pointer; white-space: nowrap;
}
.img-menu-item:hover { background: rgba(255,255,255,0.08); }
.img-menu.hidden { display: none; }


/* ===== 全能参考页表格视图（#小行 + 三列：视频 | 参考素材 | 提示词+按钮） ===== */
.sb-grid { display: block; width: 100%; overflow-x: auto; }
.sb-table-head.sb-cols,
.sb-card .sb-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch;
  width: 100%;
}
/* 网格子项禁止撑破列（视频/长内容不溢出侵占相邻列） */
.sb-cols > * { min-width: 0; overflow: hidden; }
.sb-table-head {
  padding: 8px 14px; background: var(--bg); border: 1px solid var(--border);
  border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px; color: var(--text-3); font-weight: 600;
}
/* 每个分镜一行：# 单独小行 + 三列内容 */
.sb-card {
  display: block;
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--border); border-top: none;
  border-radius: 0; transition: background .15s;
}
.sb-card:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.sb-card:hover { background: rgba(108,140,255,0.05); }
.sb-card.generating { box-shadow: inset 0 0 0 1px var(--warning); }
.sb-no-row {
  padding: 5px 14px; font-size: 12px; font-weight: 600; color: var(--text-3);
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.sb-card .sb-cols { padding: 12px 14px; }
/* 第一列：视频（满列高、16:9、状态叠加右上角） */
.sb-col-media {
  overflow: hidden;
}
.sb-col-media .sb-media {
  position: relative; width: 100%; aspect-ratio: 16/9;
  background: #0B1220; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: var(--radius-sm);
}
/* 视频 contain：保持 16:9 完整显示，不拉成正方形 */
.sb-col-media .sb-media video { object-fit: contain !important; }
.sb-col-media .sb-media img, .sb-col-media .sb-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sb-col-media .sb-media .sb-empty-ico { font-size: 30px; opacity: .4; }
.sb-col-media .sb-media .sb-status { position: absolute; top: 6px; right: 6px; z-index: 2; }
.sb-col-media .sb-media .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.15); }
.sb-col-media .sb-media .progress div { height: 100%; width: 60%; background: linear-gradient(90deg, var(--primary), var(--warning)); animation: sb-slide 1.4s ease-in-out infinite; }
/* 任务类型差异化（覆盖上面的默认进度条样式） */
.sb-col-media .sb-media .progress--video div,
.sb-media .progress--video div { background: linear-gradient(90deg, var(--primary), #6D5CFF); }
.sb-col-media .sb-media .progress--optimize div,
.sb-media .progress--optimize div { background: linear-gradient(90deg, #8B5CF6, #D946EF); animation-duration: 1.1s; }
.sb-col-media .sb-media .progress--upscale div,
.sb-media .progress--upscale div { background: linear-gradient(90deg, #10B981, #34D399); animation-duration: 1.6s; }
.sb-col-media .sb-media .sb-progress-label,
.sb-media .sb-progress-label {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(10, 14, 22, .72); color: #fff; pointer-events: none;
}
.sb-col-media .sb-progress-label.progress-label--optimize,
.sb-progress-label.progress-label--optimize { color: #D8B4FE; }
.sb-col-media .sb-progress-label.progress-label--upscale,
.sb-progress-label.progress-label--upscale { color: #6EE7B7; }
/* 第二列：参考素材 */
.sb-col-refs .ref-zone { padding: 0; border: none; gap: 2px; }
/* 第三列：提示词 + 按钮 */
.sb-col-prompt .field-zone { margin-bottom: 10px; }
.sb-col-prompt .sb-actions { flex-wrap: wrap; justify-content: flex-start; }
/* 全能参考表格：列分割线 + 提示词固定高度滚动 */
.sb-table-head.sb-cols > div + div,
.sb-card .sb-cols > div + div {
  border-left: 1px solid var(--border); padding-left: 14px;
}

/* 提示词列：提示词框与视频同高（16:9），操作按钮在下方 */
.sb-col-prompt { display: flex; flex-direction: column; min-width: 0; }
.sb-col-prompt .field-zone {
  flex: none; width: 100%; aspect-ratio: 16/9;
  display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0;
}
.sb-col-prompt .field-row--prompt { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sb-col-prompt .field-val--prompt,
.sb-col-prompt .field-val--prompt.open {
  flex: 1; min-height: 0; max-height: none; overflow-y: auto;
}
.sb-col-prompt .field-val--prompt:not(.open)::after { display: none; }
.sb-col-prompt .sb-prompt-toggle { display: none; }
.sb-col-prompt .sb-actions { margin-top: 10px; flex: none; }

/* 隐藏提示词列顶部标签文字（📝 生视频 Prompt） */
.sb-col-prompt .field-row--prompt .field-label { display: none; }
/* 提示词编辑态与查看态一致：同样撑满 16:9 盒、内容可滚动 */
.sb-col-prompt .field-input--prompt,
.sb-col-prompt .field-input--prompt[contenteditable] {
  flex: 1; height: 100%; min-height: 0; max-height: none;
  overflow-y: auto; resize: none;
}
/* 首帧图红叉：叠在图片右上角，点击直接删除 */
.ff-chip { position: relative; padding-right: 18px; }
.ff-chip .ff-ref-del {
  position: absolute; top: -5px; right: -5px;
  width: 16px; height: 16px; line-height: 16px; font-size: 10px;
  box-shadow: 0 0 4px rgba(0,0,0,.5);
}
.ff-chip .ff-ref-del:hover { transform: scale(1.15); }

/* ===== 存储空间（素材清理） ===== */
.storage-summary{font-size:13px;color:var(--text-1);margin-bottom:10px}
.storage-summary b{color:var(--primary)}
.storage-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.storage-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px}
.storage-row .sr-name{flex:1;font-weight:600}
.storage-row .sr-meta{color:var(--text-2);font-size:12px}
.storage-row .sr-check{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}
.storage-row .sr-check:disabled{opacity:.35;cursor:not-allowed}
.storage-options{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13px}
.storage-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.storage-hint{font-size:12px;color:var(--text-2);line-height:1.6}

/* ===== 插件系统（左栏插件入口 + 插件页容器） ===== */
.nav-slot{display:flex;flex-direction:column;gap:2px}
.nav-slot:empty{display:none}
/* 插件入口：左栏只有 100px 内容宽，图标 + 文字的按钮需要收紧内边距，否则文字被截断 */
.plugin-nav-btn{display:flex;align-items:center;gap:5px;padding:10px 8px;font-size:13px}
.plugin-nav-btn .nav-ico{font-size:13px;line-height:1;flex:none}
.plugin-nav-btn .nav-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-sep{height:1px;background:var(--border);margin:6px 4px}

/* 插件页：默认沿用宿主卡片布局（1280px 限宽 + 24px 内边距） */
.plugin-iframe-wrap{width:100%;height:100%;min-height:420px;display:flex;flex-direction:column}
.plugin-iframe{width:100%;height:100%;min-height:420px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);display:block}

/* 铺满模式（iframe 模式默认开启；module 模式用 page.fullscreen:true 开启）：
   纵向撑满主显示区（不产生外层滚动条）；**横向与内置页面完全一致**——
   限宽 1280px 居中 + 左右 24px 内边距，所以宽屏下左右留白与项目/剧本等页面一模一样。
   需要更宽/铺满：清单里写 page.maxWidth（如 "none" 或 "1600px"）；
   需要更大留白：page.padding（如 "0 40px"）。 */
#main .page.plugin-fullscreen{
  max-width:1280px;margin:0 auto;
  padding:0 24px;
  height:100%;min-height:0;
}
#main .page.plugin-fullscreen.plugin-fullscreen-iframe{overflow:hidden}
#main .page.plugin-fullscreen .plugin-iframe-wrap{height:100%;min-height:0}
#main .page.plugin-fullscreen .plugin-iframe{
  height:100%;min-height:0;border:0;border-radius:0;
}
/* 插件页可复用的骨架（插件自己的 CSS 也可以完全自定义） */
.plugin-page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.plugin-page-title{font-size:20px;font-weight:700}
.plugin-page-sub{font-size:13px;color:var(--text-3);margin-top:2px}
.plugin-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px}
.plugin-error{color:var(--danger)}

/* ===== 插件管理弹窗（在界面里添加 HTML 文件） ===== */
.plg-drop{
  border:1px dashed var(--border-light); border-radius:var(--radius);
  background:var(--bg); padding:22px 16px; text-align:center; cursor:pointer;
  transition:border-color .2s, background .2s;
}
.plg-drop:hover,.plg-drop.dragover{border-color:var(--primary);background:var(--primary-light)}
.plg-drop-inner{font-size:13px;color:var(--text-2)}
.plg-drop-inner code{color:var(--accent)}
.plg-drop-hint{font-size:11px;color:var(--text-3);margin-top:6px}
.plg-pick-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.plg-or{font-size:12px;color:var(--text-3)}
.plg-path-input{flex:1;min-width:240px;box-sizing:border-box}
.plg-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-top:12px}
.plg-form-checks{grid-template-columns:1fr 1fr;align-items:center}
.plg-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-2)}
.plg-field .form-input{width:100%;box-sizing:border-box}
.plg-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2);cursor:pointer}
.plg-check input{accent-color:var(--primary);width:15px;height:15px;cursor:pointer}
.plg-actions{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.plg-list-title{font-size:13px;font-weight:700;margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--border)}
.plg-list{display:flex;flex-direction:column;gap:8px}
.plg-row{
  display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;
}
.plg-row.off{opacity:.6}
.plg-ico{font-size:20px;text-align:center}
.plg-noicon{color:var(--text-3);font-size:14px}
.plg-main{min-width:0}
.plg-name{font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.plg-badge{font-size:11px;font-weight:400;color:var(--warning);background:var(--warning-light);padding:1px 6px;border-radius:999px}
.plg-meta{font-size:11px;color:var(--text-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plg-meta code{color:var(--text-2)}
.plg-err{color:var(--danger)}
.plg-ops{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* 行内「设置」面板：标题 + 四列字段 + 底部提示与按钮，独立成块不再挤在一行 */
.plg-edit{grid-column:1/-1;border-top:1px dashed var(--border);margin-top:8px;padding-top:12px}
.plg-edit-title{font-size:12px;font-weight:700;color:var(--text-2);margin-bottom:10px}
.plg-edit-grid{display:grid;grid-template-columns:1.6fr 1fr 0.8fr 1.2fr;gap:12px}
@media (max-width:820px){.plg-edit-grid{grid-template-columns:1fr 1fr}}
.plg-edit .plg-field .form-input{height:32px;padding:0 8px}
.plg-edit-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;flex-wrap:wrap}
.plg-edit-tip{font-size:11px;color:var(--text-3)}
.plg-edit-ops{display:flex;gap:8px;margin-left:auto}

/* ============================================================
   首尾帧页（i2v）样式 —— 从 git HEAD 恢复
   该页此前只删了入口、连 JS 与样式一起删了；页面与样式已一并回填。
   来源：tools/restore_firstlastframe_css.py（HEAD 原文，仅补缺失规则）
   ============================================================ */

/* ============ 首尾帧 v2：表格式行布局 ============ */

/* ---- 工具栏 ---- */
.flf-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); margin: 0 -24px 12px;
  padding: 12px 24px 12px;
  border-bottom: 1px solid var(--border);
}
.flf-toolbar-title {
  font-size: 16px; font-weight: 700; color: var(--text); margin-right: auto;
  display: flex; align-items: center; gap: 10px;
}
.flf-toolbar-title .ep-name { font-size: 13px; font-weight: 400; color: var(--text-2); }
/* ---- 统计栏 ---- */
.flf-stats-bar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-2);
}
.flf-stat { display: flex; align-items: center; gap: 4px; }
.flf-stat-val { font-weight: 700; color: var(--text); }
/* ---- 分镜表容器 ---- */
.flf-shot-table {
  display: flex; flex-direction: column; gap: 14px;
}
/* ---- 单行分镜 ---- */
.flf-shot-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  height: 580px;
  overflow: hidden;
  transition: box-shadow 0.18s, border-color 0.18s;
}
.flf-shot-row:hover { box-shadow: 0 4px 20px rgba(108, 140, 255, 0.14); border-color: var(--border-light); }
.flf-shot-row.generating { border-color: var(--warning); }
/* ---- 左栏：视频提示词区 ---- */
.flf-prompt-col {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0; overflow: hidden;
}
/* --- 视频预览区 --- */
.flf-video-preview {
  aspect-ratio: 16/9; background: #0B1220;
  border: 2px dashed var(--border-light); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.flf-video-preview:hover { border-color: var(--primary); box-shadow: 0 0 14px rgba(108, 140, 255, 0.2); }
.flf-video-preview img,
.flf-video-preview video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
.flf-video-preview .flf-preview-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-3); font-size: 12px;
}
.flf-video-preview .flf-preview-placeholder svg { width: 28px; height: 28px; opacity: 0.4; }
/* 视频生成进度条 */
.flf-video-progress {
  position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: rgba(0,0,0,0.4); z-index: 1;
}
.flf-video-progress-bar {
  height: 100%; background: var(--primary); transition: width 0.3s;
}
/* --- 分镜头部 --- */
.flf-shot-header {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  flex-shrink: 0;
}
.flf-shot-no {
  font-size: 12px; font-weight: 700; color: var(--primary);
  background: var(--primary-light); border-radius: 4px;
  padding: 2px 8px; flex-shrink: 0;
}
.flf-meta-chip {
  font-size: 11px; color: var(--text-2);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 1px 8px;
}
.flf-meta-chip .chip-label { color: var(--text-3); margin-right: 2px; }
/* --- 视频提示词可编辑区 --- */
.flf-vp-textarea {
  width: 100%; flex: 1;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 8px 10px; font-size: 12px; color: var(--text); line-height: 1.7;
  font-family: inherit; outline: none; resize: none; overflow-y: auto;
  word-break: break-word; white-space: pre-wrap;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.flf-vp-textarea:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
.flf-vp-textarea[data-placeholder]:empty::before {
  content: attr(data-placeholder); color: var(--text-3);
}
.flf-vp-textarea:not(:focus):empty::before { content: attr(data-placeholder); color: var(--text-3); }
/* 视频提示词结构化显示：中英文段名高亮、时间戳高亮、帧对齐高亮 */
.flf-vp-textarea .flf-pp-label { color: var(--accent); font-weight: 600; }
.flf-vp-textarea .flf-pp-ts { color: var(--warn); font-weight: 600; }
.flf-vp-textarea .flf-pp-frame { color: var(--info); font-weight: 600; }
/* ---- 中间 & 右侧：首帧/尾帧卡片 ---- */
.flf-frame-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; min-width: 0; overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.flf-frame-card:hover { border-color: var(--border-light); box-shadow: 0 0 12px rgba(108, 140, 255, 0.1); }
/* --- 帧预览区 --- */
.flf-frame-preview {
  aspect-ratio: 16/9; background: var(--bg);
  border: 2px dashed var(--border-light); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.flf-frame-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.flf-frame-preview .flf-preview-placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--text-3); font-size: 12px;
}
.flf-frame-preview .flf-frame-label {
  position: absolute; top: 6px; left: 6px;
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  color: #fff; z-index: 1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.flf-frame-label.first { background: rgba(108, 140, 255, 0.9); }
.flf-frame-label.last { background: rgba(167, 139, 250, 0.9); }
/* --- 帧预览上的操作按钮 --- */
.flf-frame-actions {
  position: absolute; top: 6px; right: 6px;
  display: flex; gap: 4px; z-index: 1;
}
/* --- 参考图行：三列并排 --- */
.flf-ref-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; flex-shrink: 0; }
.flf-ref-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.flf-ref-item-title {
  font-size: 10px; font-weight: 600; color: var(--text-3);
  display: flex; align-items: center; gap: 2px;
}
.flf-ref-thumbs { display: flex; gap: 3px; flex-wrap: wrap; min-height: 32px; }
.flf-ref-thumb {
  width: 32px; height: 32px; border-radius: 4px; object-fit: cover;
  border: 1px solid var(--border); cursor: pointer; background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.flf-ref-thumb:hover { border-color: var(--primary); box-shadow: 0 0 8px rgba(108, 140, 255, 0.3); }
.flf-ref-thumb.placeholder {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-3); cursor: default;
}
.flf-ref-thumb.add-ref {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-3);
  border: 1px dashed var(--border); cursor: pointer;
}
.flf-ref-thumb.add-ref:hover { border-color: var(--primary); color: var(--primary); }
.flf-ref-thumb-wrap { position: relative; display: inline-flex; }
.flf-ref-x {
  position: absolute; top: -6px; right: -6px; width: 15px; height: 15px;
  line-height: 13px; text-align: center; font-size: 10px; padding: 0;
  background: var(--danger); color: #fff; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%;
  cursor: pointer; opacity: 0; transition: opacity 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.flf-ref-thumb-wrap:hover .flf-ref-x { opacity: 1; }
.flf-ref-x:hover { background: #F87171; }
/* --- 图片位置编号角标：「图N」= 工作流图位序号（第 N 张参考图进第 N 个图位）--- */
.flf-ref-num {
  position: absolute; left: -2px; bottom: -2px;
  padding: 0 3px; border-radius: 3px; font-size: 9px; line-height: 12px;
  background: rgba(79, 124, 255, 0.92); color: #fff; pointer-events: none;
}
/* 视频参考图行里「首帧/尾帧专用」素材的角标：只读展示，增删到对应帧卡片 */
.flf-ref-frame-tag {
  position: absolute; left: -2px; top: -2px;
  padding: 0 3px; border-radius: 3px; font-size: 9px; line-height: 12px;
  background: rgba(167, 139, 250, 0.92); color: #fff; pointer-events: none;
}
/* --- 图片位置一览行（场景/角色/资产三列下方的「有几张显示几张 + ＋」）--- */
.flf-ref-imgs { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.flf-ref-imgs .flf-ref-item-title { flex-wrap: wrap; }
.flf-ref-imgs .form-hint { font-size: 10px; }
/* --- 尾帧参考图默认提示 --- */
.flf-ref-inherit {
  font-size: 10px; color: var(--text-3); font-style: italic;
  padding: 2px 0;
}
/* --- 帧提示词可编辑区 --- */
.flf-frame-prompt {
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 8px; font-size: 11px; color: var(--text-2); cursor: text;
  flex: 1; overflow-y: auto; min-height: 28px; word-break: break-word;
  white-space: pre-wrap; line-height: 1.7;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
/* 帧提示词结构化显示：段名高亮、图N编号弱化、层级标题高亮 */
.flf-frame-prompt .flf-pp-label { color: var(--accent); font-weight: 600; }
.flf-frame-prompt .flf-pp-level { color: var(--info); font-weight: 600; }
.flf-frame-prompt .flf-pp-tag { color: var(--text-3); opacity: .55; font-size: 10px; }
.flf-frame-prompt .flf-pp-body { color: var(--text); }
.flf-frame-prompt:focus { border-color: var(--primary); box-shadow: 0 0 10px rgba(108, 140, 255, 0.18); }
.flf-frame-prompt[data-placeholder]:empty::before {
  content: attr(data-placeholder); color: var(--text-3);
}
/* --- 负面提示词（首尾帧页帧卡片；只用于生成该帧图） --- */
.flf-neg-head {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 10px; color: var(--text-3); margin-top: 2px;
}
.flf-frame-neg {
  flex: 0 0 auto;                /* 不跟正面提示词抢空间 */
  min-height: 24px; max-height: 72px;
  font-size: 10px; color: var(--text-3);
  border-style: dashed; background: transparent;
}
.flf-frame-neg:focus { color: var(--text-2); border-style: solid; }
/* --- 帧卡片底部按钮行 --- */
.flf-row-bottom {
  display: flex; align-items: center; gap: 6px;
  padding-top: 8px; border-top: 1px solid var(--border);
  flex-shrink: 0;
}
/* --- 提示词列底部按钮 --- */
.flf-prompt-col .flf-row-bottom { border-top: 1px solid var(--border); padding-top: 8px; flex-wrap: wrap; }
/* 响应式：窄屏退化为单列 */
@media (max-width: 1024px) {
  .flf-shot-row { grid-template-columns: 1fr; height: auto; }
  .flf-frame-card { min-height: 300px; }
}

/* ==================== 剪辑合成页 ==================== */
.btn.block { display: block; width: 100%; margin-top: 10px; text-align: center; }
.btn.xs { padding: 2px 8px; font-size: 11px; }
.export-warn {
  margin: 10px 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.5);
  color: #F59E0B; font-size: 13px; line-height: 1.6;
}
.export-warn.minor { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.4); color: #60A5FA; }
.export-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 14px; margin-top: 12px;
  align-items: start;
}
.export-panel {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px; margin-bottom: 14px;
}
.export-panel-h {
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.export-clips { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.export-clip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: rgba(255,255,255,0.02); font-size: 12px;
}
.export-clip-no { font-weight: 700; color: var(--primary); min-width: 34px; }
.export-clip-time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.export-clip-flag { font-size: 11px; }
.export-clip-dlg {
  flex-basis: 100%; color: var(--text-2); font-size: 11px; line-height: 1.5;
  opacity: 0.85; word-break: break-word;
}
.export-opt {
  display: flex; align-items: flex-start; gap: 9px; padding: 8px 2px;
  font-size: 13px; cursor: pointer;
}
.export-opt.disabled { opacity: 0.55; cursor: not-allowed; }
.export-opt input { margin-top: 2px; }
.export-opt small { display: block; color: var(--text-3); font-size: 11px; line-height: 1.5; margin-top: 2px; }
.export-bgm-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 4px 0 8px 24px; font-size: 12px;
}
.export-bgm-name { color: var(--text-2); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.export-vol { display: inline-flex; align-items: center; gap: 5px; color: var(--text-3); margin-left: auto; }
.export-vol input { width: 90px; }
.export-progress-box { margin-top: 12px; }
.export-progress {
  height: 8px; border-radius: 4px; background: var(--border); overflow: hidden;
}
.export-progress > div {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--primary), #8B5CF6);
  transition: width 0.3s;
}
.export-progress-msg { font-size: 11px; color: var(--text-3); margin: 6px 0; }
.export-error {
  margin-top: 10px; padding: 8px 10px; border-radius: 6px;
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239,68,68,0.4);
  color: #F87171; font-size: 12px; line-height: 1.6; word-break: break-word;
}
.export-final-video { width: 100%; border-radius: 8px; margin-top: 12px; background: #000; }
.export-empty-mini { font-size: 12px; color: var(--text-3); padding: 8px 0; }
.export-hist {
  display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.export-hist:last-child { border-bottom: none; }
.export-hist video {
  width: 96px; height: 54px; object-fit: cover; border-radius: 5px;
  background: #000; flex-shrink: 0; cursor: pointer;
}
.export-hist-meta { font-size: 11px; color: var(--text-2); line-height: 1.7; min-width: 0; }
.export-hist-time { color: var(--text-3); font-size: 10px; }
@media (max-width: 1024px) {
  .export-grid { grid-template-columns: 1fr; }
}

/* ==================== 剪辑页 · 剪映式时间线编辑器 ==================== */
#main #page-export { max-width: none; margin: 0; padding: 0; height: 100%; }
#page-export.active { display: flex; flex-direction: column; overflow: hidden; }

.ce-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--card); flex: 0 0 auto;
}
.ce-brand { font-weight: 700; font-size: 15px; white-space: nowrap; }
.ce-chapter { width: 220px; }
.ce-stat { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ce-stat b { color: var(--primary); }
.ce-spacer { flex: 1; }

.ce-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ce-warn {
  margin: 8px 14px 0; padding: 8px 12px; border-radius: 8px;
  background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.5);
  color: #F59E0B; font-size: 12px; flex: 0 0 auto;
}
.ce-warn.minor { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.4); color: #60A5FA; }

.ce-main { flex: 1 1 auto; min-height: 0; display: flex; }
.ce-preview-col {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  background: #0b0d13;
}
.ce-stage {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 10px;
}
.ce-stage video {
  max-width: 100%; max-height: 100%; border-radius: 6px;
  background: #000; box-shadow: 0 6px 30px rgba(0,0,0,.5);
}
.ce-sub-overlay {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  max-width: 80%; text-align: center;
  pointer-events: auto; cursor: grab; touch-action: none;   /* 可直接拖动调整字幕位置 */
  color: #fff; font-size: 17px; font-weight: 600; line-height: 1.5;
  text-shadow: 0 0 4px rgba(0,0,0,.9), 0 2px 4px #000;
}
.ce-sub-overlay:active { cursor: grabbing; }
.ce-stage-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.35); font-size: 13px; pointer-events: none;
}
.ce-transport {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; background: #11141d; border-top: 1px solid rgba(255,255,255,.06);
}
.ce-tbtn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06); color: #eee; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.ce-tbtn:hover { background: rgba(255,255,255,.14); }
.ce-tbtn.play {
  width: 42px; height: 42px; font-size: 15px;
  background: var(--primary); border-color: transparent; color: #fff;
}
.ce-time { font-size: 12px; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }
.ce-time i { color: rgba(255,255,255,.35); font-style: normal; margin: 0 3px; }
.ce-result { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ce-dl { color: var(--primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ce-dl:hover { text-decoration: underline; }
.ce-done-tip { color: var(--text-3); }
.ce-fail { color: #F87171; }
.ce-exporting { display: flex; align-items: center; gap: 8px; }
.ce-prog { width: 180px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.ce-prog > div { height: 100%; background: linear-gradient(90deg, var(--primary), #8B5CF6); transition: width .3s; }
#ce-prog-msg { color: rgba(255,255,255,.6); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 属性面板 */
.ce-prop {
  flex: 0 0 280px; width: 280px; border-left: 1px solid var(--border);
  background: var(--card); padding: 14px; overflow-y: auto;
}
.ce-prop-empty { color: var(--text-3); font-size: 13px; text-align: center; line-height: 2; margin-top: 40px; }
.ce-prop-h { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ce-prop-h b { color: var(--primary); }
.ce-prop-src { margin-left: auto; font-size: 11px; color: var(--text-3); font-weight: 400; }
.ce-prop-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; }
.ce-prop-row label { color: var(--text-3); width: 56px; flex: 0 0 56px; }
.ce-prop-row label.full { width: auto; flex: none; margin-bottom: 6px; }
.ce-prop-row i { color: var(--text-3); font-style: normal; }
.ce-prop-row.dur { color: var(--text-3); justify-content: flex-end; padding-right: 2px; }
.ce-prop-row.dur b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 6px; }
.ce-prop-row input[type=number] { width: 110px; }
.ce-prop-row:has(textarea) { flex-wrap: wrap; }
.ce-prop-row textarea {
  width: 100%; resize: vertical; min-height: 56px;
  background: var(--bg, #1a1d27); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 7px 9px; font-size: 12px; line-height: 1.6;
}
.ce-prop-row textarea:focus { border-color: var(--primary); outline: none; }
.ce-prop-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ce-prop-tip { margin-top: 12px; font-size: 11px; color: var(--text-3); line-height: 1.7; }

/* 时间线工具条 */
.ce-tlbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 7px 14px; background: var(--card); border-top: 1px solid var(--border);
}
.ce-tl-tools { display: flex; align-items: center; gap: 5px; }
.ce-tool {
  height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px;
  background: transparent; border: 1px solid var(--border); color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; transition: all .15s;
}
.ce-tool:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.ce-tool:disabled { opacity: .35; cursor: not-allowed; }
.ce-tool span { font-size: 11px; opacity: .8; }
.ce-tl-tools input[type=range] { width: 90px; }
.ce-vsep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.ce-tl-opts { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); margin-left: auto; }
.ce-chk { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.ce-chk.off { opacity: .5; cursor: not-allowed; }
.ce-chk em { color: var(--text-3); font-size: 11px; font-style: normal; }
.ce-bgm-name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); }
.ce-x {
  border: none; background: none; color: var(--text-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
}
.ce-x:hover { color: var(--danger); }
.ce-tl-opts input[type=range] { width: 80px; }

/* 时间线轨道区 */
.ce-tl-scroll {
  flex: 0 0 auto; height: 218px; overflow-x: auto; overflow-y: hidden;
  background: #0d1017; border-top: 1px solid rgba(255,255,255,.06);
}
.ce-tl-inner { position: relative; min-width: 100%; }
.ce-lane { position: relative; border-bottom: 1px solid rgba(255,255,255,.05); }
.ce-lane.ruler-lane { height: 30px; background: #10131c; cursor: ew-resize; }
.ce-lane.video-lane { height: 74px; }
.ce-lane.sub-lane { height: 34px; }
.ce-lane.audio-lane { height: 30px; }
.ce-lane-tag {
  position: sticky; left: 0; z-index: 8; float: left;
  height: 100%; width: 46px; padding-top: 7px;
  font-size: 10px; color: rgba(255,255,255,.45); text-align: center;
  background: rgba(16, 19, 28, .92); border-right: 1px solid rgba(255,255,255,.08);
  pointer-events: none;
}
.ce-tick { position: absolute; top: 3px; bottom: 0; width: 1px; background: rgba(255,255,255,.1); }
.ce-tick span {
  position: absolute; top: 1px; left: 4px;
  font-size: 10px; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums;
}
.ce-clip {
  position: absolute; top: 8px; height: 58px;
  border-radius: 7px; overflow: hidden;
  background: linear-gradient(160deg, #3a56c4, #2b3f96);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  cursor: grab; user-select: none; touch-action: none;
}
.ce-clip:hover { filter: brightness(1.12); }
.ce-clip.selected {
  border-color: #9DB4FF;
  box-shadow: 0 0 0 2px rgba(108,140,255,.65), 0 4px 14px rgba(108,140,255,.3);
}
.ce-clip.dragging { opacity: .85; cursor: grabbing; z-index: 9; }
.ce-clip-body {
  position: absolute; inset: 0 7px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 6px; font-size: 11px; color: rgba(255,255,255,.92);
  pointer-events: none;
}
.ce-clip-no {
  flex: 0 0 auto; min-width: 18px; height: 18px; line-height: 18px; text-align: center;
  background: rgba(255,255,255,.2); border-radius: 4px; font-weight: 700;
}
.ce-clip-d { opacity: .8; font-variant-numeric: tabular-nums; }
.ce-trim {
  position: absolute; top: 0; bottom: 0; width: 8px; z-index: 2;
  cursor: ew-resize; touch-action: none;
}
.ce-trim.left { left: 0; border-left: 3px solid rgba(255,255,255,.55); border-radius: 7px 0 0 7px; }
.ce-trim.right { right: 0; border-right: 3px solid rgba(255,255,255,.55); border-radius: 0 7px 7px 0; }
.ce-trim:hover { background: rgba(255,255,255,.15); }

.ce-sub-block {
  position: absolute; top: 6px; height: 22px; line-height: 22px;
  padding: 0 8px; border-radius: 4px; font-size: 11px;
  background: rgba(56, 189, 248, .22); border: 1px solid rgba(56,189,248,.45);
  color: #BAE6FD; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: pointer; user-select: none;
}
.ce-sub-block.selected { background: rgba(56,189,248,.4); box-shadow: 0 0 0 1px #38BDF8; }
.ce-audio-block {
  position: absolute; top: 5px; height: 20px; line-height: 20px;
  padding: 0 10px; border-radius: 4px; font-size: 10px; overflow: hidden; white-space: nowrap;
}
.ce-audio-block.vo { background: rgba(52, 211, 153, .2); border: 1px solid rgba(52,211,153,.4); color: #A7F3D0; }
.ce-audio-block.bgm { background: rgba(251, 191, 36, .18); border: 1px solid rgba(251,191,36,.4); color: #FDE68A; }
/* BGM 曲库弹窗（剪辑页） */
.bgm-list { display: flex; flex-direction: column; gap: 6px; }
.bgm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
}
.bgm-item:hover { background: rgba(255,255,255,.08); }
.bgm-item.using { border-color: rgba(251,191,36,.55); background: rgba(251,191,36,.08); }
.bgm-item-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ce-sub-hint { font-style: normal; font-size: 11px; opacity: .6; }
.ce-clip-mute { margin-left: auto; font-size: 12px; opacity: .9; flex-shrink: 0; }
/* 字幕样式弹窗（剪辑页） */
.ss-tip { display: block; font-style: normal; font-size: 11px; color: var(--text-3); margin-top: 4px; }
.ss-size-row { display: flex; align-items: center; gap: 10px; }
.ss-size-row input[type="range"] { flex: 1 1 auto; }
.ss-size-row b { min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.ss-preview {
  padding: 14px 12px; border-radius: 8px; text-align: center; line-height: 1.5;
  color: #fff; font-weight: 600; overflow-wrap: break-word;
  background: linear-gradient(180deg, #1a1e2b, #0d0f16);
  border: 1px solid rgba(255,255,255,.08);
  text-shadow: 0 0 4px rgba(0,0,0,.9), 0 2px 4px #000;
}
.ce-lane-empty {
  position: absolute; left: 60px; top: 0; line-height: 30px;
  font-size: 11px; color: rgba(255,255,255,.28);
}
.ce-playhead {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: #EF4444; z-index: 30; pointer-events: none;
}
.ce-playhead .ce-ph-grip {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 12px; height: 11px;
  background: #EF4444; border-radius: 0 0 3px 3px; pointer-events: auto; cursor: ew-resize;
}

/* ================= 技能系统 — 科技感 v2 ================= */
:root {
  --sk-cyan: #00f0ff;
  --sk-purple: #a855f7;
  --sk-glow: 0 0 12px rgba(0,240,255,.35);
  --sk-glow-purple: 0 0 12px rgba(168,85,247,.35);
  --sk-font: 'SF Mono', 'Consolas', 'Cascadia Code', monospace;
}
.skills-page {
  max-width: 1080px; margin: 0 auto; padding: 20px;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(0,240,255,.04), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(168,85,247,.04), transparent 50%);
}
.skills-page::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,240,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.025) 1px, transparent 1px);
  background-size: 40px 40px; pointer-events: none; z-index: -1;
}
/* 标题区 */
.skills-header-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  padding-bottom: 14px; border-bottom: 1px solid rgba(0,240,255,.12);
}
.skills-header-bar h2 {
  font-size: 18px; font-weight: 700; margin: 0;
  background: linear-gradient(90deg, var(--sk-cyan), var(--sk-purple));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; letter-spacing: .03em;
}
.skills-header-bar .sk-stats {
  margin-left: auto; display: flex; gap: 16px;
  font-size: 11px; font-family: var(--sk-font); color: rgba(0,240,255,.5);
}
.skills-header-bar .sk-stats b { color: var(--sk-cyan); font-weight: 600; }
/* Tab */
.skills-tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.skills-tab {
  padding: 7px 22px; border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.35); cursor: pointer; font-size: 13px;
  transition: all .2s; font-family: var(--sk-font);
}
.skills-tab.active {
  border-color: var(--sk-cyan); background: rgba(0,240,255,.06);
  color: var(--sk-cyan); box-shadow: var(--sk-glow);
}
.skills-tab:hover:not(.active) { border-color: rgba(0,240,255,.3); color: rgba(0,240,255,.6); }
/* 分组 */
.skills-group { margin-bottom: 28px; }
.skills-group h3 {
  font-size: 11px; font-family: var(--sk-font); color: rgba(0,240,255,.4);
  margin: 0 0 12px; text-transform: uppercase; letter-spacing: .1em;
  display: flex; align-items: center; gap: 8px;
}
.skills-group h3::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(0,240,255,.15), transparent);
}
/* === 技能卡片（HUD 风格 v3）=== */
.skills-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;
}
.skill-card {
  border: 1px solid rgba(0,240,255,.12);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  background:
    linear-gradient(160deg, rgba(0,240,255,.03) 0%, rgba(168,85,247,.015) 50%, rgba(0,0,0,.15) 100%);
  transition: border-color .25s, transform .25s, box-shadow .25s;
  position: relative; padding: 2px;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
/* 内层：真实面板 */
.skill-card-inner {
  background: linear-gradient(165deg, #0b0f14 0%, #0d1017 60%, #0a0d12 100%);
  clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px));
  padding: 14px 14px 14px; display: flex; flex-direction: column; flex: 1;
  position: relative;
}
/* 顶部渐变光带 */
.skill-card-inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 18px; height: 2px;
  background: linear-gradient(90deg, var(--sk-cyan), var(--sk-purple));
  opacity: .55; transition: opacity .25s;
}
/* hover 扫描线 */
.skill-card-inner::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,.5), transparent);
  opacity: 0;
}
.skill-card:hover {
  border-color: rgba(0,240,255,.45);
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(0,240,255,.1), 0 0 20px rgba(0,240,255,.06);
}
.skill-card:hover .skill-card-inner::before { opacity: 1; }
.skill-card:hover .skill-card-inner::after { opacity: 1; animation: sk-scan 1.4s linear; }
@keyframes sk-scan {
  0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; }
}
/* HUD 角括号 */
.sk-corner {
  position: absolute; width: 12px; height: 12px; pointer-events: none; z-index: 1;
  transition: all .25s;
}
.sk-corner.tl { top: 5px; left: 5px; border-top: 2px solid rgba(0,240,255,.35); border-left: 2px solid rgba(0,240,255,.35); }
.sk-corner.br { bottom: 5px; right: 5px; border-bottom: 2px solid rgba(0,240,255,.35); border-right: 2px solid rgba(0,240,255,.35); }
.skill-card:hover .sk-corner.tl { width: 18px; height: 18px; border-color: var(--sk-cyan); }
.skill-card:hover .sk-corner.br { width: 18px; height: 18px; border-color: var(--sk-cyan); }
/* 状态呼吸灯 */
.sk-led {
  width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex-shrink: 0;
  animation: sk-led-pulse 2s ease-in-out infinite;
  background: var(--sk-cyan); box-shadow: 0 0 6px var(--sk-cyan);
}
.skill-card.led-ai .sk-led { background: var(--sk-purple); box-shadow: 0 0 6px var(--sk-purple); animation-delay: .4s; }
.skill-card.led-purpose .sk-led { background: #FBBF24; box-shadow: 0 0 6px #FBBF24; animation-delay: .8s; }
.skill-card.led-chain .sk-led { background: #EF4444; box-shadow: 0 0 6px #EF4444; }
@keyframes sk-led-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: .25; }
}
/* 卡片头部 */
.skill-card-head {
  display: flex; align-items: center; gap: 10px;
}
.sk-card-icon {
  width: 34px; height: 34px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  border: 1px solid rgba(0,240,255,.25);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-family: var(--sk-font); font-size: 9px; font-weight: 700;
  color: var(--sk-cyan); background: rgba(0,240,255,.05);
  text-shadow: 0 0 8px rgba(0,240,255,.5);
  transition: all .25s;
}
.skill-card:hover .sk-card-icon {
  border-color: rgba(0,240,255,.5); background: rgba(0,240,255,.1);
  text-shadow: 0 0 12px rgba(0,240,255,.9);
}
.skill-card-name {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.92);
  font-family: var(--sk-font); line-height: 1.3;
}
.skill-card-name .dim { opacity: .35; }
/* 卡片内容 */
.skill-card-body { padding: 10px 0 0; flex: 1; }
.skill-card-desc {
  font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.55; margin-bottom: 10px;
}
.skill-card-meta { display: flex; gap: 5px; flex-wrap: wrap; }
/* 卡片底部按钮区 */
.skill-card-foot { margin-top: 12px; }
/* === 科技按钮 v3（切角 + 脉冲）=== */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px; border: 1px solid;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  font-family: var(--sk-font); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; cursor: pointer; transition: all .2s;
  position: relative; overflow: hidden; text-transform: uppercase;
}
/* 扫光 */
.sk-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.1) 50%, transparent 60%);
  transform: translateX(-100%); transition: transform .5s;
}
.sk-btn:hover::before { transform: translateX(100%); }
/* 左上装饰刻线 */
.sk-btn-cyan, .sk-btn-purple, .sk-btn-ghost { position: relative; }
.sk-btn:active { transform: translateY(1px); filter: brightness(1.3); }
.sk-btn-cyan {
  border-color: rgba(0,240,255,.35); color: var(--sk-cyan);
  background: linear-gradient(135deg, rgba(0,240,255,.08), rgba(0,240,255,.02));
  text-shadow: 0 0 6px rgba(0,240,255,.4);
}
.sk-btn-cyan:hover {
  border-color: var(--sk-cyan); background: linear-gradient(135deg, rgba(0,240,255,.14), rgba(0,240,255,.05));
  animation: sk-btn-pulse-cyan 1.6s ease-in-out infinite;
}
@keyframes sk-btn-pulse-cyan {
  0%, 100% { box-shadow: 0 0 8px rgba(0,240,255,.25), inset 0 0 6px rgba(0,240,255,.06); }
  50% { box-shadow: 0 0 20px rgba(0,240,255,.5), inset 0 0 12px rgba(0,240,255,.12); }
}
.sk-btn-purple {
  border-color: rgba(168,85,247,.35); color: var(--sk-purple);
  background: linear-gradient(135deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
  text-shadow: 0 0 6px rgba(168,85,247,.4);
}
.sk-btn-purple:hover {
  border-color: var(--sk-purple); background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(168,85,247,.05));
  animation: sk-btn-pulse-purple 1.6s ease-in-out infinite;
}
@keyframes sk-btn-pulse-purple {
  0%, 100% { box-shadow: 0 0 8px rgba(168,85,247,.25), inset 0 0 6px rgba(168,85,247,.06); }
  50% { box-shadow: 0 0 20px rgba(168,85,247,.5), inset 0 0 12px rgba(168,85,247,.12); }
}
.sk-btn-ghost {
  border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.4);
  background: transparent;
}
.sk-btn-ghost:hover {
  border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.04);
}
.sk-btn-block { width: 100%; }
/* 按钮箭头装饰 */
.sk-btn .sk-arrow { font-size: 9px; opacity: .7; transition: transform .2s; }
.sk-btn:hover .sk-arrow { transform: translateX(3px); opacity: 1; }
/* === HUD 弹窗 === */
.sk-modal {
  position: relative; width: 540px; max-width: 94vw; max-height: 88vh;
  display: flex; flex-direction: column; padding: 2px;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
  background: linear-gradient(160deg, rgba(0,240,255,.45), rgba(168,85,247,.28) 50%, rgba(0,240,255,.18));
  animation: skModalIn .18s ease;
}
@keyframes skModalIn { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }
.sk-modal-inner {
  clip-path: polygon(21px 0, 100% 0, 100% calc(100% - 21px), calc(100% - 21px) 100%, 0 100%, 0 21px);
  background: linear-gradient(170deg, #0b0f16 0%, #0a0d13 55%, #090c11 100%);
  display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative;
}
/* 顶部光带 + 呼吸 */
.sk-modal-inner::before {
  content: ''; position: absolute; top: 0; left: 0; right: 22px; height: 2px;
  background: linear-gradient(90deg, var(--sk-cyan), var(--sk-purple));
  opacity: .7;
}
/* 角括号 */
.sk-modal-corner {
  position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2;
}
.sk-modal-corner.tl { top: 6px; left: 6px; border-top: 2px solid var(--sk-cyan); border-left: 2px solid var(--sk-cyan); }
.sk-modal-corner.br { bottom: 6px; right: 6px; border-bottom: 2px solid var(--sk-cyan); border-right: 2px solid var(--sk-cyan); }
/* 头部 */
.sk-modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; }
.sk-modal-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  border: 1px solid rgba(0,240,255,.3); background: rgba(0,240,255,.05);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sk-font); font-size: 10px; font-weight: 700; color: var(--sk-cyan);
  text-shadow: 0 0 10px rgba(0,240,255,.6);
}
.sk-modal-title {
  font-family: var(--sk-font); font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,.95); line-height: 1.3;
}
.sk-modal-title .dim { opacity: .35; }
.sk-modal-sub {
  font-family: var(--sk-font); font-size: 10px; letter-spacing: .08em;
  color: rgba(0,240,255,.45); margin-top: 2px;
}
.sk-modal-close {
  margin-left: auto; width: 30px; height: 30px; flex-shrink: 0;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.5); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .2s;
}
.sk-modal-close:hover {
  border-color: rgba(239,68,68,.6); color: #EF4444; background: rgba(239,68,68,.08);
}
/* 分节线标签 SYS// */
.sk-modal-tagline {
  display: flex; align-items: center; gap: 10px; padding: 0 18px; margin: 4px 0 10px;
}
.sk-modal-tagline span {
  font-family: var(--sk-font); font-size: 10px; letter-spacing: .12em;
  color: rgba(0,240,255,.5); white-space: nowrap;
}
.sk-modal-tagline::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(0,240,255,.2), transparent);
}
/* 表单 */
.sk-modal-body { padding: 0 18px 14px; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.sk-modal-body label {
  display: flex; flex-direction: column; gap: 5px;
  font-family: var(--sk-font); font-size: 11px; letter-spacing: .05em;
  color: rgba(255,255,255,.55);
}
.sk-modal-body input, .sk-modal-body select, .sk-modal-body textarea {
  background: #070a0f; border: 1px solid rgba(0,240,255,.15); border-radius: 3px;
  color: rgba(255,255,255,.85); font-family: var(--sk-font); font-size: 12px;
  padding: 8px 10px; outline: none; transition: all .2s;
}
.sk-modal-body input:focus, .sk-modal-body select:focus, .sk-modal-body textarea:focus {
  border-color: var(--sk-cyan); background: #080d13;
  box-shadow: 0 0 0 1px rgba(0,240,255,.25), 0 0 12px rgba(0,240,255,.12);
}
.sk-modal-body textarea { min-height: 70px; resize: vertical; }
.sk-empty-params {
  font-family: var(--sk-font); font-size: 11px; color: rgba(0,240,255,.3);
  text-align: center; padding: 10px 0;
}
/* 底部按钮 */
.sk-modal-foot { display: flex; gap: 10px; padding: 2px 18px 14px; }
/* 终端输出区 */
.sk-modal-term-wrap { padding: 0 18px 18px; }
.sk-modal-term {
  background: #05070b; border: 1px dashed rgba(0,240,255,.2); border-radius: 3px;
  padding: 10px 12px; font-family: var(--sk-font); font-size: 11px; line-height: 1.6;
  max-height: 220px; overflow-y: auto; color: rgba(0,240,255,.7);
  white-space: pre-wrap; word-break: break-all;
  animation: skTermIn .2s ease;
}
@keyframes skTermIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sk-modal-term .t-ok { color: var(--sk-cyan); }
.sk-modal-term .t-err { color: #EF4444; }
.sk-modal-term .t-dim { color: rgba(255,255,255,.4); }
.sk-modal-term pre {
  margin: 4px 0 0; color: rgba(255,255,255,.55); white-space: pre-wrap; word-break: break-all;
  font-family: var(--sk-font); font-size: 11px;
}
.sk-modal-term .t-cursor { animation: sk-led-pulse 1s steps(2) infinite; }
.sk-hidden { display: none !important; }
/* Badge */
.sk-badge {
  font-size: 10px; padding: 2px 7px; border-radius: 3px;
  font-family: var(--sk-font); border: 1px solid transparent; letter-spacing: .02em;
}
.sk-badge.task { background: rgba(0,240,255,.08); color: var(--sk-cyan); border-color: rgba(0,240,255,.15); }
.sk-badge.ai { background: rgba(168,85,247,.08); color: var(--sk-purple); border-color: rgba(168,85,247,.15); }
.sk-badge.purpose { background: rgba(251,191,36,.08); color: #FBBF24; border-color: rgba(251,191,36,.15); }
.sk-badge.chain { background: rgba(239,68,68,.08); color: #EF4444; border-color: rgba(239,68,68,.15); }
.sk-badge.async { background: rgba(0,240,255,.06); color: rgba(0,240,255,.6); }
.sk-badge.sync { background: rgba(52,211,153,.06); color: #34D399; }
.sk-badge.builtin { background: rgba(255,255,255,.04); color: rgba(255,255,255,.35); }
/* === 编排链 === */
.skills-chains { display: flex; flex-direction: column; gap: 16px; }
.chain-card {
  padding: 20px; border: 1px solid rgba(0,240,255,.1); border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,240,255,.02), rgba(168,85,247,.015));
  position: relative; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.chain-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--sk-cyan), var(--sk-purple), transparent);
}
.chain-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chain-header h3 { font-size: 14px; margin: 0; color: rgba(255,255,255,.9); font-family: var(--sk-font); }
.chain-desc { font-size: 12px; color: rgba(255,255,255,.35); margin: 0 0 14px; line-height: 1.5; }
/* 管道流程图 */
.chain-pipeline { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.chain-node {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 12px; border: 1px solid rgba(0,240,255,.12); border-radius: 4px;
  background: rgba(0,240,255,.02); transition: all .2s; cursor: default;
  min-width: 80px;
}
.chain-node:hover { border-color: rgba(0,240,255,.3); background: rgba(0,240,255,.05); }
.chain-node-num { font-size: 9px; font-family: var(--sk-font); color: rgba(0,240,255,.4); }
.chain-node-name { font-size: 11px; color: rgba(255,255,255,.75); text-align: center; font-family: var(--sk-font); }
.chain-connector {
  width: 28px; height: 1px; position: relative;
  background: linear-gradient(90deg, rgba(0,240,255,.2), rgba(168,85,247,.2));
}
.chain-connector::after {
  content: '▶'; position: absolute; right: -2px; top: -7px;
  font-size: 8px; color: rgba(0,240,255,.3);
}

@media (max-width: 768px) {
  .brand-tag { display: none; }
  #app { grid-template-columns: 1fr; }
  /* 单列布局下主内容占满第 1 列（桌面端 #main 固定 grid-column:2 会产生左侧空列） */
  #main { grid-column: 1; }
  /* 顶栏紧凑化：缩高度/内边距/字号/图标 */
  .topbar { height: 52px; padding: 0 10px; }
  .brand { gap: 6px; }
  .brand-logo { font-size: 19px; }
  .brand-name { font-size: 15px; }
  .nav-toggle { font-size: 16px; padding: 4px 8px; margin-right: 4px; }
  .topbar-actions .icon-btn { width: 32px; height: 32px; font-size: 14px; }
  .key-countdown { font-size: 11px; padding: 4px 7px; }
  .icon-badge { top: -5px; right: -5px; min-width: 15px; height: 15px; font-size: 10px; line-height: 15px; border-radius: 8px; }
  .topbar-actions { gap: 6px; }
  .nav-toggle { display: inline-block; }

  /* ---- 各页面小屏适配 ---- */
  /* 项目列表：单列卡片；操作按钮常显（触屏无 hover）；封面矮一点 */
  .project-grid { grid-template-columns: 1fr; gap: 12px; }
  .project-card .p-actions { opacity: 1; }
  .project-card .p-cover { height: 96px; font-size: 30px; }
  /* 全能参考：sticky 头部按钮多，改相对定位防遮挡（保留 ::after 定位上下文）；分页/搜索可换行；表格缩短横向滚动距离 */
  .sb-sticky { position: relative; top: auto; margin: 0 -14px; }
  .sb-pager { justify-content: flex-start; flex-wrap: wrap; }
  .sb-toolbar .search-box { margin-left: 0 !important; width: 100%; }
  .sb-ep-jump select { min-width: 0; flex: 1 1 140px; max-width: none; }
  .sb-table { min-width: 620px; }
  .sb-table .sb-prompt { max-width: 150px; }
  /* 表单行：多字段竖排 */
  .form-row { flex-direction: column; gap: 10px; }
  /* 弹窗/页面工具栏：允许换行，下拉框收窄自适应 */
  .gen-start-bar { flex-wrap: wrap; row-gap: 8px; }
  .gen-start-bar select { min-width: 0 !important; max-width: none; flex: 1 1 130px; }
  /* 固定多列布局统一降为单列 */
  .sb-frames,
  .vg-grid-2,
  .opt-mode-cards,
  .sb-table-head.sb-cols,
  .sb-card .sb-cols,
  .flf-shot-row,
  .flf-ref-row,
  .export-grid { grid-template-columns: 1fr; }
  /* 表格：缩内边距，长文本换行 */
  .table th, .table td { padding: 7px 8px; }
  .table td { word-break: break-word; }
  /* 弹窗：小屏更贴边 */
  .modal-sm, .modal-md, .modal-lg, .modal-xl { max-width: 100vw; width: 100vw; margin: 0; border-radius: 0; }
  .modal-head { padding: 12px 14px; flex-wrap: wrap; }
  .modal-foot { flex-wrap: wrap; gap: 8px; }

  /* 超窄屏：只留 logo，隐藏品牌名，保证顶栏不挤压 */
  @media (max-width: 400px) {
    .brand-name, .brand-ver { display: none; }
  }
  /* 侧边栏：抽屉模式，默认收起，.open 展开（top 与顶栏高度同步） */
  .navbar {
    position: fixed;
    top: 52px;
    bottom: 0;
    left: 0;
    width: 216px;
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
  }
  .navbar.open { transform: translateX(0); }
  /* 遮罩：展开时点击关闭 */
  .nav-overlay {
    display: block;
    position: fixed;
    top: 52px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .nav-overlay.show { opacity: 1; pointer-events: auto; }
  .nav-btn { padding: 12px 16px; font-size: 14px; }
  .script-layout { flex-direction: column; }
  .chapter-list { width: 100%; max-height: 180px; position: static; flex-direction: row; overflow-x: auto; }
  .chapter-item { white-space: nowrap; }
  #main .page { padding: 14px; }
  .sb-sticky { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
}