*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue','Microsoft YaHei',sans-serif;background:#000;color:#f5f5f7;min-height:100vh;-webkit-font-smoothing:antialiased}

.topbar{position:fixed;top:0;left:0;right:0;height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:200;background:rgba(0,0,0,0.8);backdrop-filter:saturate(180%) blur(20px)}
.topbar .back{font-size:14px;color:#7c4dff;text-decoration:none;font-weight:400;cursor:pointer}
.topbar .title{font-size:14px;font-weight:600;color:#f5f5f7;position:absolute;left:50%;transform:translateX(-50%)}
.topbar .right{display:flex;gap:8px}
.topbar .nav-btn{font-size:12px;padding:4px 12px;border-radius:980px;cursor:pointer;font-family:inherit;text-decoration:none;transition:all .2s;border:1px solid rgba(124, 77, 255,0.3);color:#7c4dff;background:none}
.topbar .nav-btn:hover{background:#7c4dff;color:#fff;border-color:#7c4dff}

.page{max-width:1400px;margin:0 auto;padding:64px 24px 120px}

/* Episode pills */
.ep-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.ep-pill{font-size:13px;padding:6px 16px;border-radius:980px;border:1px solid #38383a;background:transparent;color:#86868b;cursor:pointer;transition:all .2s;font-family:inherit}
.ep-pill:hover{border-color:#86868b;color:#f5f5f7}
.ep-pill.active{background:#7c4dff;color:#fff;border-color:#7c4dff}
.ep-pill.done{border-color:#30d158;color:#30d158}
.ep-pill.done.active{background:#30d158;color:#fff}

/* Phase indicator */
.phase-bar{display:flex;gap:0;background:#1d1d1f;border-radius:10px;padding:3px;margin-bottom:24px}
.phase-tab{flex:1;padding:8px 4px;border:none;background:transparent;color:#48484a;font-size:12px;font-weight:500;cursor:default;border-radius:8px;transition:all .2s;font-family:inherit;text-align:center;white-space:nowrap}
.phase-tab.active{background:rgba(124,77,255,0.18);color:#fff}
.phase-tab.done{color:#30d158;cursor:pointer}
.phase-tab.done:hover{background:rgba(48,209,88,0.1)}

/* Scene group */
.scene-group{margin-bottom:32px}
.scene-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:10px 16px;background:#0a0a0a;border-radius:12px;border:1px solid #1d1d1f}
.scene-header h3{font-size:15px;font-weight:600;color:#f5f5f7;flex:1}
.scene-header .scene-tag{font-size:11px;padding:3px 8px;border-radius:6px;background:#1a1505;color:#ffd60a}
.scene-header .scene-chars{font-size:12px;color:#86868b}
.scene-desc{font-size:13px;color:#86868b;line-height:1.5;margin-bottom:14px;padding:0 4px}

/* Shot table */
.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid #1d1d1f;margin-bottom:8px}
.shot-table{width:100%;border-collapse:separate;border-spacing:0;min-width:960px}
.shot-table thead th{background:#111;color:#86868b;font-size:11px;font-weight:600;padding:10px 12px;text-align:left;letter-spacing:0.3px;border-bottom:1px solid #1d1d1f;white-space:nowrap}
.shot-table tbody td{background:#0a0a0a;padding:12px;font-size:13px;color:#d1d1d6;border-bottom:1px solid #1d1d1f;vertical-align:top;line-height:1.5}
.shot-table tbody tr:last-child td{border-bottom:none}
.shot-table tbody tr:hover td{background:#111}

.shot-id{font-weight:600;color:#f5f5f7;white-space:nowrap;font-size:12px;font-family:'SF Mono',monospace}
.shot-scale{white-space:nowrap}
.shot-motion{white-space:nowrap;color:#7c4dff;font-size:12px}

/* Asset badge in table */
.asset-ref{display:inline-flex;align-items:center;gap:5px;background:#1d1d1f;border:1px solid #38383a;border-radius:8px;padding:3px 8px 3px 3px;font-size:11px;color:#f5f5f7;margin:2px 3px 2px 0;cursor:default;vertical-align:middle}
.asset-ref .ref-thumb{width:28px;height:28px;border-radius:5px;object-fit:cover;flex-shrink:0;background:#2d2d2f;cursor:pointer}
.asset-ref .ref-placeholder{width:28px;height:28px;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#48484a;cursor:pointer;transition:all .15s}
.asset-ref .ref-placeholder:hover{opacity:0.7;box-shadow:0 0 0 2px #7c4dff}
.ref-placeholder.char{background:#1a1530;color:#a78bfa}
.ref-placeholder.scene{background:#0a1a14;color:#30d158}
.asset-ref .ref-name{font-size:11px;color:#d1d1d6;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset-ref .ref-id{color:#48484a;font-size:9px}
.asset-ref .ref-reupload{width:16px;height:16px;border-radius:4px;background:#7c4dff;color:#fff;font-size:9px;display:none;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;line-height:1}
.asset-ref:hover .ref-reupload{display:flex}

.dialogue{font-style:italic;color:#a1a1a6;font-size:12px;margin-top:4px}
.shot-dur{font-size:12px;color:#86868b;text-align:center;white-space:nowrap}

/* Editable cell */
td[contenteditable]{outline:none;cursor:text}
td[contenteditable]:focus{background:#141414!important;box-shadow:inset 0 0 0 1px #7c4dff}

/* Bottom bar */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(0,0,0,0.92);backdrop-filter:blur(20px);border-top:1px solid #1d1d1f;padding:12px 24px;z-index:100}
.bottom-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bottom-left{display:flex;align-items:center;gap:12px}
.bottom-right{display:flex;gap:8px}
.btn{padding:8px 20px;border-radius:10px;border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;text-decoration:none;display:inline-block;text-align:center}
.btn-primary{background:#7c4dff;color:#fff}
.btn-primary:hover{background:#5e35b1}
.btn-secondary{background:#1d1d1f;color:#f5f5f7;border:1px solid #38383a}
.btn-secondary:hover{background:#2d2d2f}
.btn-green{background:#30d158;color:#fff}
.btn-green:hover{background:#28a745}
.btn:disabled{opacity:0.3;cursor:default}

/* Model selector */
.model-sel{display:flex;gap:8px;align-items:center}
.model-sel label{font-size:12px;color:#86868b}
.model-sel select{background:#1d1d1f;color:#f5f5f7;border:1px solid #38383a;border-radius:8px;padding:6px 12px;font-size:13px;font-family:inherit;outline:none;cursor:pointer}
.model-sel select:focus{border-color:#7c4dff}

/* Loading overlay */
.loading{text-align:center;padding:60px 0;color:#48484a;font-size:14px}
.loading .spinner{width:24px;height:24px;border:2px solid #38383a;border-top-color:#7c4dff;border-radius:50%;animation:spin 0.8s linear infinite;display:inline-block;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Prompt column — image on top, text below */
.prompt-cell{min-width:300px;max-width:400px;vertical-align:top}
.prompt-img-area{margin-bottom:8px}
.prompt-main-img{width:100%;max-width:320px;aspect-ratio:16/9;border-radius:10px;object-fit:cover;cursor:pointer;border:1px solid #2d2d2f;display:block;transition:all .2s}
.prompt-main-img:hover{border-color:#7c4dff;box-shadow:0 2px 16px rgba(124, 77, 255,0.25)}
.prompt-alts{display:flex;gap:4px;margin-top:6px}
.prompt-alt-thumb{width:56px;height:56px;border-radius:6px;object-fit:cover;cursor:pointer;border:2px solid transparent;opacity:0.55;transition:all .15s}
.prompt-alt-thumb:hover{opacity:0.9;border-color:#48484a}
.prompt-alt-thumb.active{opacity:1;border-color:#7c4dff}
.prompt-text-area{margin-top:6px}
.prompt-en{font-size:10px;color:#86868b;line-height:1.3;max-height:48px;overflow:auto;padding:4px 6px;background:#0a0a0a;border-radius:5px;border:1px solid #1d1d1f}
.prompt-cn{font-size:11px;color:#a1a1a6;line-height:1.4;margin-bottom:4px}
.prompt-en:empty::before{content:'waiting...';color:#38383a}
.gen-img-btn{font-size:12px;padding:8px 16px;border-radius:8px;border:none;background:#7c4dff;color:#fff;cursor:pointer;font-family:inherit;font-weight:500;transition:background .2s;margin-top:8px}
.gen-img-btn:hover{background:#5e35b1}
.gen-img-btn:disabled{opacity:0.3;cursor:default}

/* Video prompt column */
.video-cell{min-width:320px;max-width:440px;vertical-align:top}
.vp-wrap{position:relative}
.vp-refs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.vp-ref-tag{font-size:10px;padding:2px 7px;border-radius:5px;background:#1a1530;color:#a78bfa;border:1px solid #2d2050;white-space:nowrap}
.vp-ref-tag.scene-ref{background:#0a1a14;color:#30d158;border-color:#153d28}
.vp-text{font-size:12px;color:#d1d1d6;line-height:1.6;white-space:pre-wrap;max-height:120px;overflow:hidden;transition:max-height .3s ease;padding:8px 10px;background:#0a0a0a;border-radius:8px;border:1px solid #1d1d1f;cursor:pointer}
.vp-text.expanded{max-height:none}
.vp-text:hover{border-color:#38383a}
.vp-toggle{font-size:11px;color:#7c4dff;cursor:pointer;margin-top:4px;display:inline-block;user-select:none}
.vp-toggle:hover{text-decoration:underline}
.vp-actions{margin-top:6px;display:flex;gap:6px}
.vp-regen-btn{font-size:11px;padding:4px 12px;border-radius:6px;border:1px solid #38383a;background:#1d1d1f;color:#86868b;cursor:pointer;font-family:inherit;transition:all .2s}
.vp-regen-btn:hover{border-color:#7c4dff;color:#7c4dff}
.vp-regen-btn:disabled{opacity:0.3;cursor:default}
.vp-empty{color:#38383a;font-size:12px;font-style:italic}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.92);backdrop-filter:blur(16px);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.lightbox.active{opacity:1;pointer-events:auto}
.lb-body{position:relative;animation:lbIn .25s ease}
.lb-body img{max-width:88vw;max-height:78vh;border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,0.6);object-fit:contain;display:block}
@keyframes lbIn{from{transform:scale(0.92);opacity:0}to{transform:scale(1);opacity:1}}
.lightbox .lb-close{position:absolute;top:16px;right:20px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.12);border:none;color:#f5f5f7;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;z-index:10}
.lightbox .lb-close:hover{background:rgba(255,255,255,0.25)}
.lb-info{font-size:13px;color:#86868b;margin-top:12px;text-align:center}

/* Lightbox actions bar */
.lb-actions{margin-top:12px;display:flex;gap:8px;align-items:center}
.lb-actions .lb-btn{padding:8px 20px;border-radius:10px;border:none;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s}
.lb-btn-primary{background:#7c4dff;color:#fff}
.lb-btn-primary:hover{background:#5e35b1}
.lb-btn-secondary{background:rgba(255,255,255,0.1);color:#f5f5f7}
.lb-btn-secondary:hover{background:rgba(255,255,255,0.18)}

/* AI Chat drawer */
.chat-drawer{position:fixed;bottom:0;left:0;right:0;z-index:150;transform:translateY(100%);transition:transform .35s cubic-bezier(.25,.1,.25,1)}
.chat-drawer.open{transform:translateY(0)}
.chat-mask{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:140;display:none}
.chat-mask.show{display:block}

.chat-panel{background:#0a0a0a;border-top:1px solid #2d2d2f;border-radius:20px 20px 0 0;max-height:50vh;display:flex;flex-direction:column}
.chat-handle{text-align:center;padding:10px 0 4px;cursor:pointer}
.chat-handle span{display:inline-block;width:36px;height:4px;border-radius:2px;background:#38383a}
.chat-title-bar{display:flex;align-items:center;justify-content:space-between;padding:0 20px 8px}
.chat-title-bar h4{font-size:13px;color:#86868b;font-weight:500}
.chat-title-bar button{background:none;border:none;color:#48484a;font-size:18px;cursor:pointer;padding:4px}
.chat-title-bar button:hover{color:#f5f5f7}

.chat-messages{flex:1;overflow-y:auto;padding:0 20px 8px;min-height:0}
.chat-msg{margin-bottom:10px;display:flex;gap:8px;max-width:95%}
.chat-msg-ai{align-self:flex-start}
.chat-msg-user{align-self:flex-end;flex-direction:row-reverse;margin-left:auto}
.chat-msg .avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0}
.chat-msg-ai .avatar{background:#1d1d1f;color:#86868b}
.chat-msg-user .avatar{background:#7c4dff;color:#fff}
.chat-msg .bubble{padding:8px 12px;border-radius:12px;font-size:13px;line-height:1.5}
.chat-msg-ai .bubble{background:#1d1d1f;color:#d1d1d6;border-bottom-left-radius:4px}
.chat-msg-user .bubble{background:#7c4dff;color:#fff;border-bottom-right-radius:4px}

.chat-input-row{display:flex;gap:8px;padding:8px 20px 16px;align-items:flex-end}
.chat-input-row textarea{flex:1;padding:8px 12px;border-radius:10px;border:1px solid #38383a;background:#000;color:#f5f5f7;font-size:13px;outline:none;font-family:inherit;resize:none;min-height:36px;max-height:80px;line-height:1.4}
.chat-input-row textarea:focus{border-color:#7c4dff}
.chat-input-row textarea::placeholder{color:#48484a}
.chat-input-row .send-chat{width:36px;height:36px;border-radius:10px;border:none;background:#7c4dff;color:#fff;font-size:15px;cursor:pointer;flex-shrink:0}
.chat-input-row .send-chat:disabled{opacity:0.3;cursor:default}

.chat-typing{display:flex;gap:3px;align-items:center;padding:2px 0}
.chat-typing span{width:5px;height:5px;border-radius:50%;background:#48484a;animation:dot 1.2s infinite}
.chat-typing span:nth-child(2){animation-delay:0.2s}
.chat-typing span:nth-child(3){animation-delay:0.4s}
@keyframes dot{0%,60%,100%{opacity:0.3;transform:scale(0.8)}30%{opacity:1;transform:scale(1)}}

/* Open chat trigger */
.open-chat-btn{position:fixed;bottom:70px;right:24px;z-index:110;width:48px;height:48px;border-radius:50%;background:#7c4dff;color:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:0 4px 16px rgba(124, 77, 255,0.3);transition:all .2s;display:flex;align-items:center;justify-content:center}
.open-chat-btn:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(124, 77, 255,0.4)}
.open-chat-btn .badge{position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#30d158;display:none}

/* Responsive */
@media(max-width:800px){
  .shot-table{font-size:12px}
  .shot-table thead th,.shot-table tbody td{padding:8px}
  .page{padding:58px 12px 120px}
}

/* ============ 集数栏 sticky + 折叠（补丁） ============ */
.ep-bar {
  position: sticky;
  top: 48px;
  background: rgba(0,0,0,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  padding: 12px 24px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-height: 56px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ep-bar.expanded {
  max-height: 340px;
  overflow-y: auto;
}
.ep-bar.has-many {
  padding-right: 48px;  /* 给右上角按钮留空间 */
}
.ep-bar .ep-toggle {
  position: absolute;
  right: 16px;
  top: 12px;
  background: rgba(255,255,255,0.08);
  color: #f5f5f7;
  border: 1px solid rgba(255,255,255,0.1);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.ep-bar .ep-toggle:hover {
  background: rgba(255,255,255,0.15);
  transform: scale(1.05);
}