/* 漫剧生产线 V2 - 样式表 */
/* 注意：此文件为独立CSS，修改JS功能时请勿改动此文件 */
/* 如需添加新组件的样式，请在此文件中添加 */


:root {
  --bg: #0b0b10;
  --bg2: #11111a;
  --sidebar: #0e0e16;
  --sidebar-hover: #18182a;
  --sidebar-active: #1e1e36;
  --card: #141420;
  --card-hover: #1c1c2e;
  --border: #1e1e30;
  --text: #eef0fc;
  --text-dim: #a0a8c0;
  --text-muted: #606888;
  --accent: #6c8cff;
  --accent-dim: #1a2040;
  --green: #4ade80;
  --green-dim: #0a2a18;
  --red: #f87171;
  --red-dim: #2a1018;
  --blue: #60a5fa;
  --blue-dim: #0a1a2a;
  --radius-sm: 6px;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:var(--text); line-height:1.5; font-size:16px; overflow-x:hidden; }
.app { display:flex; min-height:100vh; }
.sidebar { width:240px; min-width:240px; background:var(--sidebar); border-right:1px solid var(--border); padding:0; display:flex; flex-direction:column; height:100vh; position:sticky; top:0; overflow-y:auto; }
.sidebar-header { padding:5px 12px; border-bottom:1px solid var(--border); text-align:center; }
.sidebar-header h1 { font-size:18px; display:flex; align-items:center; gap:8px; }
.sidebar-header h1 small { font-size:13px; color:var(--text-dim); font-weight:400; }
.sidebar-header .logo { font-size:22px; }
.sidebar-section { padding:6px 12px; font-size:16px; color:var(--text-dim); font-weight:600; display:flex; align-items:center; gap:6px; }
.project-list { flex:1; padding:4px 8px; overflow-y:auto; max-height:400px; }
.project-chip { padding:8px 14px; margin:2px 0; border-radius:var(--radius-sm); cursor:pointer; font-size:13px; display:flex; align-items:center; gap:8px; transition:background .15s; line-height:1.2; }
.project-chip:hover { background:var(--sidebar-hover); }
.project-chip.active { background:var(--sidebar-active); color:var(--accent); }
.project-chip .chip-icon { font-size:20px; }
.project-chip .chip-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-chip .chip-rename { cursor:pointer; font-size:16px; opacity:.4; margin-left:auto; margin-right:4px; }
.project-chip .chip-rename:hover { opacity:1; color:var(--accent); }
.project-chip .chip-del { cursor:pointer; font-size:18px; opacity:.4; }
.project-chip .chip-del:hover { opacity:1; color:var(--red); }
.step-nav { padding:4px 0; }
.step-item { display:flex; align-items:center; gap:8px; padding:6px 12px; cursor:pointer; font-size:16px; color:var(--text-dim); transition:all .15s; border-left:3px solid transparent; line-height:1.4; }
.step-item:hover { background:var(--sidebar-hover); }
.step-item.active { color:var(--text); background:var(--sidebar-active); border-left-color:var(--accent); }
.step-item.done .num { background:var(--green-dim); color:var(--green); }
.step-item .num { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; background:var(--bg2); color:var(--text-dim); }
.step-item .label { flex:1; }
.step-item .status-dot { width:6px; height:6px; border-radius:50%; background:var(--border); }
.step-item .step-status { min-width:10px; text-align:center; }
.step-item .s-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--border); }
.step-item.done .s-dot { background:var(--green); box-shadow:0 0 6px rgba(74,222,128,0.5); }

.step-progress-bar { height:3px; background:var(--border); margin:0 12px 4px; border-radius:2px; overflow:hidden; }
.step-progress-bar > .fill { height:100%; background:linear-gradient(90deg,var(--green),var(--accent)); transition:width .4s; border-radius:2px; }
.main { flex:1; padding:16px 20px; max-width:1200px; overflow-y:auto; }
#mainTitle { font-size:22px; font-weight:600; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.step-tag { font-size:13px; background:var(--accent-dim); color:var(--accent); padding:2px 10px; border-radius:20px; font-weight:400; }
.panel { background:var(--bg2); border-radius:8px; border:1px solid var(--border); padding:12px; margin-bottom:10px; }
.panel-title { font-size:16px; font-weight:500; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.badge { font-size:13px; padding:1px 8px; border-radius:20px; background:var(--accent-dim); color:var(--accent); }
.code-block { background:var(--bg); border-radius:var(--radius-sm); padding:10px; font-size:15px; white-space:pre-wrap; word-break:break-word; border:1px solid var(--border); overflow-y:auto; }
.empty-state { text-align:center; padding:24px; color:var(--text-muted); font-size:16px; }
.entity-grid { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.entity-card { background:var(--card); border-radius:var(--radius-sm); border:1px solid var(--border); padding:10px 12px; cursor:pointer; font-size:15px; display:flex; align-items:center; gap:10px; transition:all .15s; }
.entity-card:hover { background:var(--card-hover); }
.entity-card.active { border-color:var(--accent); color:var(--accent); }
.entity-card .card-preview { width:100px; height:100px; border-radius:8px; object-fit:cover; background:var(--bg); }
.entity-panel { background:var(--card); border-radius:8px; border:1px solid var(--border); margin-bottom:10px; overflow:hidden; }
.entity-tabs { display:flex; border-bottom:1px solid var(--border); }
.entity-tab { padding:8px 14px; cursor:pointer; font-size:15px; color:var(--text-dim); border-bottom:2px solid transparent; transition:all .15s; }
.entity-tab:hover { color:var(--text); }
.entity-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.btn { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border-radius:var(--radius-sm); font-size:15px; cursor:pointer; border:1px solid var(--border); background:var(--bg2); color:var(--text); transition:all .15s; white-space:nowrap; }
.btn:hover { background:var(--card-hover); border-color:var(--text-dim); }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-primary:hover { opacity:.85; }
.btn-warning { background: var(--red-dim); color: var(--red); border: 1px solid var(--red); }
.btn-warning:hover { filter: brightness(0.9); }

.btn-secondary { background:var(--border); border-color:var(--border); }
.btn-secondary:hover { background:var(--text-dim); }
.btn-sm { padding:3px 10px; font-size:14px; }
.btn-green { background:var(--green-dim); color:var(--green); border-color:var(--green); }
.btn-green:hover { background:var(--green); color:#fff; }
.btn-red { background:var(--red-dim); color:var(--red); border-color:var(--red); }
.btn-red:hover { background:var(--red); color:#fff; }
.btn-blue { background:var(--blue-dim); color:var(--blue); border-color:var(--blue); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--text-dim); }
.btn-ghost:hover { background:var(--bg2); color:var(--text); }
.btn-paste { background:var(--green-dim); color:var(--green); border-color:var(--green-dim); font-size:15px; }
.btn-paste:hover { background:var(--green); color:#fff; }
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.65); z-index:999; display:none; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal-box { background:var(--bg2); border-radius:10px; border:1px solid var(--border); padding:16px; max-height:90vh; overflow-y:auto; min-width:300px; max-width:700px; width:90%; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.lightbox-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:1000; display:none; align-items:center; justify-content:center; }
.lightbox-overlay.open { display:flex; }
.lb-close { position:absolute; top:12px; right:12px; background:var(--bg2); color:var(--text); border:1px solid var(--border); width:32px; height:32px; border-radius:50%; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:1; }
.lb-img { max-width:90vw; max-height:85vh; object-fit:contain; border-radius:6px; }
.lb-info { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.7); color:var(--text); font-size:15px; padding:4px 14px; border-radius:6px; }
.form-group { margin-bottom:10px; }
.form-group label { display:block; font-size:15px; color:var(--text-dim); margin-bottom:3px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.main-header { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.header-actions { display:flex; align-items:center; gap:6px; }
.main-body { flex:1; overflow-y:auto; padding:0; }
.sidebar-footer { border-top:1px solid var(--border); padding:8px 12px; display:flex; gap:4px; flex-shrink:0; }
.sidebar-footer .btn-sm { flex:1; padding:4px 6px; font-size:13px; }

/* Select dropdown fix - ensure text contrast */
select { color:#333 !important; background:#fff !important; }
select option { color:#333 !important; background:#fff !important; }
.template-panel { position:fixed; top:0; right:-400px; width:380px; height:100%; background:var(--bg2); border-left:1px solid var(--border); z-index:1001; transition:right .25s; overflow-y:auto; padding:12px; }
.template-panel.open { right:0; }
.tp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.tp-close { background:none; border:none; color:var(--text-dim); font-size:18px; cursor:pointer; padding:4px; }
.tp-close:hover { color:var(--text); }
.project-view-btn { margin-left:auto; cursor:pointer; font-size:16px; color:var(--accent); padding:0 4px; }
.toast { position:fixed; bottom:40px; left:50%; transform:translateX(-50%); background:var(--bg2); color:var(--text); padding:10px 20px; border-radius:8px; border:1px solid var(--border); font-size:15px; z-index:1000; opacity:0; transition:opacity .3s; pointer-events:none; }
.toast.show { opacity:1; }
.tooltip { font-size:13px; color:var(--text-muted); font-weight:400; }
select, input, textarea { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 10px; font-size:15px; outline:none; }
select:focus, input:focus, textarea:focus { border-color:var(--accent); }
textarea { font-family:inherit; resize:vertical; min-height:60px; }
.vs-input { width:100%; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-size:15px; }
.vs-input:focus { border-color:var(--accent); }
.video-group-card { background:var(--card); border-radius:8px; border:1px solid var(--border); padding:8px; margin-bottom:6px; }
.video-group-card .group-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.video-group-card .group-header .group-title { font-size:16px; font-weight:500; }
.video-group-card .group-header .group-storyline { font-size:14px; color:var(--text-dim); font-weight:400; }
.video-group-card .group-shots { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.video-group-card .group-shots .shot-badge { background:var(--bg); border:1px solid var(--border); border-radius:4px; padding:2px 6px; font-size:13px; }
.video-group-card .group-actions { display:flex; gap:6px; flex-wrap:wrap; }
.video-group-card .group-status { font-size:15px; margin-top:8px; padding:6px 10px; border-radius:4px; }
.group-status.success { background:var(--green-dim); color:var(--green); }
.group-status.running { background:var(--blue-dim); color:var(--blue); }
.group-status.error { background:var(--red-dim); color:var(--red); }
@media(max-width:768px){
  .sidebar { width:56px; min-width:56px; }
  .sidebar .label, .sidebar h1 small, .sidebar-section span, .project-chip .chip-name, .step-item .num { display:none; }
  .sidebar-header h1 { font-size:15px; justify-content:center; }
  .main { padding:12px; }
  .modal-box { width:96%; }
}

/* === Panel layout === */
.panel-body { padding:0; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.panel-gen-row { display:flex; gap:8px; flex-wrap:wrap; }
.panel-results { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }

/* === Shot cards (分镜卡片) === */
.shot-list { display:flex; flex-direction:column; gap:6px; }
.shot-card { background:var(--card); border-radius:6px; border:1px solid var(--border); padding:8px 10px; position:relative; }
.shot-num { font-size:14px; color:var(--accent); font-weight:600; margin-bottom:4px; }
.shot-body { font-size:15px; line-height:1.6; color:var(--text-dim); }
.shot-prompt { font-size:14px; white-space:pre-wrap; word-break:break-word; color:var(--text-dim); padding:6px 8px; background:var(--bg); border-radius:4px; margin-top:4px; max-height:400px; overflow-y:auto; }

/* === Video group cards === */
.group-body { padding:4px 0; }
.group-refs { display:flex; gap:6px; flex-wrap:wrap; margin:4px 0; max-height:240px; overflow-y:auto; padding:4px; }
.g-num { font-size:14px; color:var(--text-muted); min-width:24px; }
.g-meta { font-size:14px; color:var(--text-dim); }
.g-storyline { font-size:14px; color:var(--text-dim); }
.g-expand { cursor:pointer; font-size:13px; color:var(--accent); }

/* === Reference images === */
.r-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.r-item { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:10px; display:flex; flex-direction:column; align-items:center; max-width:240px; }
.r-label { font-size:14px; color:var(--text-dim); margin-top:4px; text-align:center; word-break:break-all; }
.r-del { cursor:pointer; font-size:18px; color:var(--red); margin-left:auto; padding:2px 6px; }
.ref-label { font-size:13px; color:var(--text-muted); padding:2px 0; }
.ref-thumb { width:100px; height:100px; border-radius:8px; overflow:hidden; cursor:pointer; position:relative; }
.ref-thumb img { width:100%; height:100%; object-fit:cover; }
.ref-thumb .ref-label { position:absolute; bottom:0; left:0; right:0; font-size:11px; background:rgba(0,0,0,.6); color:var(--text); padding:1px 4px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* === Entity panel (角色/场景/道具) === */
.pp-name { font-size:16px; font-weight:500; }
.pp-meta { font-size:14px; color:var(--text-dim); display:flex; gap:6px; flex-wrap:wrap; }
.pp-actions { display:flex; gap:4px; margin-top:6px; }
.add-btn { width:32px; height:32px; border-radius:50%; background:var(--accent-dim); border:1px dashed var(--accent); color:var(--accent); font-size:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }

/* === Project page === */
.project-page-card { background:var(--card); border-radius:8px; border:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:4px; }

/* === Tags === */
.tag { display:inline-flex; align-items:center; gap:4px; font-size:13px; padding:2px 8px; border-radius:12px; background:var(--bg2); border:1px solid var(--border); color:var(--text-dim); }
.tag-yellow { background:#2a2410; border-color:#8a7a20; color:#e8d44a; }

/* === Template items === */
.template-bar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.template-chip { padding:8px 18px; font-size:18px; border-radius:6px 6px 0 0; border:none; cursor:pointer; background:var(--sidebar-hover); color:var(--text-dim); transition:all .15s; white-space:nowrap; }
.visual-style-body .template-chip { padding:4px 10px; font-size:13px; border-radius:6px; }
.template-chip:hover { background:var(--card-hover); color:var(--text); }
.template-chip.active { background:var(--bg2); color:#fff; border:1px solid var(--border); border-bottom:none; }
.tp-item { background:var(--card); border-radius:6px; border:1px solid var(--border); padding:8px; margin-bottom:6px; cursor:pointer; }
.tp-item:hover { background:var(--card-hover); }
.tp-preview { font-size:14px; color:var(--text-dim); margin-top:4px; white-space:pre-wrap; }

/* === Progress bar === */
.progress-bar { height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.progress-bar > div { height:100%; background:var(--accent); transition:width .3s; }

/* === Sensitive warning === */
.sensitive-warn { background:var(--red-dim); border:1px solid var(--red); border-radius:6px; padding:8px 12px; font-size:15px; color:var(--red); margin-bottom:8px; }

/* === Misc === */
.fill { flex:1; }
.icon { font-size:16px; width:20px; text-align:center; }
.no-img { width:60px; height:60px; border-radius:6px; background:var(--bg2); display:inline-flex; align-items:center; justify-content:center; font-size:15px; color:var(--text-muted); }
.sub { font-size:13px; color:var(--text-muted); margin-top:2px; }
.tab-count { font-size:11px; background:var(--accent-dim); color:var(--accent); padding:0 6px; border-radius:8px; }
.text-input { width:100%; padding:6px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg); color:var(--text); font-size:15px; }
.text-input:focus { border-color:var(--accent); }
.toolbar { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.sep { width:1px; height:20px; background:var(--border); margin:0 4px; align-self:center; }
.card-badge { font-size:13px; color:var(--text-muted); padding:2px 0; }
.card-name { font-size:15px; font-weight:500; }
.visual-style-body { padding:8px 0; }
.currentProjectId { display:none; }

/* 🖼️ 图片防溢出 */
.entity-card .card-preview { overflow:hidden; }
.entity-card .card-preview img { width:100%; height:100%; object-fit:cover; }
.r-item { overflow:hidden; }
.r-item img { width:100%; max-height:220px; object-fit:contain; border-radius:6px; }

/* 视频手风琴 */
.video-group-card .group-body { display:none; }
.video-group-card.open .group-body { display:block; }
.video-group-card .group-header { cursor:pointer; user-select:none; }

.panel.collapsed .visual-style-body { display:none !important; }
.panel.collapsed .panel-title .arrow-toggle { transform:rotate(-90deg); }

/* 参考图管理按钮 */
.ref-del { position:absolute; top:4px; right:4px; width:22px; height:22px; background:var(--red); color:#fff; border:none; border-radius:50%; font-size:14px; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
.ref-add { width:100px; height:100px; border-radius:6px; border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; color:var(--accent); flex-shrink:0; transition:all .15s; }
.ref-add:hover { border-color:var(--accent); background:var(--accent-dim); }
.ref-thumb { position:relative; }

/* Step5 no-image placeholder */
.ref-thumb.no-img { width:70px; height:70px; border:2px dashed var(--red); border-radius:6px; flex-shrink:0; overflow:hidden; position:relative; }
.ref-thumb.no-img .ref-label { position:absolute; bottom:0; left:0; right:0; font-size:10px; padding:1px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }