/* ═══════════════════════════════════════════════════════
   hyDirector v1.1 — Extracted from hydirector.html inline styles
   Generated by v1.1 migration script
═══════════════════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0}
:root{--hyd-status-saving:var(--info);--hyd-status-saved:var(--accent);--hyd-status-error:var(--danger)}
@keyframes hyd-title-cycle{0%,100%{color:var(--hyd-accent)}35%{color:var(--hyd-cyan)}70%{color:var(--hyd-green)}}
#hyd-banner h1,#landing-title{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:var(--hyd-accent);animation:hyd-title-cycle 6s ease-in-out infinite!important}
#ed-left-footer [data-state="saving"]{color:var(--hyd-status-saving)}
#ed-left-footer [data-state="saved"]{color:var(--hyd-status-saved)}
#ed-left-footer [data-state="error"]{color:var(--hyd-status-error)}
body[data-hyd-dirty="true"] #ed-left-footer::before{content:"●";color:var(--warning);margin-right:4px}
.mode-btn:focus-visible,.ctrl-btn:focus-visible,.model-chip:focus-visible,.wiz-next:focus-visible,.wiz-back:focus-visible{outline:2px solid var(--border-focus,var(--accent));outline-offset:2px}
@media(max-width:700px){
  #hyd-banner{align-items:flex-start;padding:8px max(12px,env(safe-area-inset-left)) 8px}
  #hyd-banner h1{font-size:10px;min-height:28px;display:flex;align-items:center}
  #banner-mode-btns{flex-wrap:wrap;justify-content:flex-end}
  .mode-btn,.ctrl-btn,.model-chip{min-height:44px;touch-action:manipulation}
  #ed-left-footer{min-height:30px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}
}

@media(prefers-reduced-motion:reduce){
  #hyd-banner h1,#landing-title{animation:none!important}
}
:root{
  --hyd-accent:var(--purple,var(--purple));--hyd-cyan:var(--info,var(--info));--hyd-green:var(--accent,var(--accent));
  --hyd-orange:var(--warning);--hyd-pink:var(--danger,var(--danger));
  --panel:var(--bg-card);--border:var(--info-dim,color-mix(in srgb, var(--info) 15%, transparent));--border2:color-mix(in srgb, var(--info) 7%, transparent);
}
html,body{height:100%;background:var(--bg-deep);color:var(--text);font-family:var(--font-mono,"Roboto Mono",monospace);overflow:hidden}
body{display:flex;flex-direction:column;padding-top:52px}

/* ── Top banner ── */
#hyd-banner{display:flex;align-items:center;gap:10px;padding:8px 16px;
  background:linear-gradient(90deg,color-mix(in srgb, var(--purple) 14%, transparent),var(--info-glow,color-mix(in srgb, var(--info) 8%, transparent)),color-mix(in srgb, var(--accent) 10%, transparent),color-mix(in srgb, var(--purple) 14%, transparent));
  background-size:400% 100%;animation:bannerflow 10s linear infinite;
  border-bottom:1px solid var(--purple-dim,color-mix(in srgb, var(--purple) 25%, transparent));flex-shrink:0}
@keyframes bannerflow{0%{background-position:0%}100%{background-position:400%}}
#hyd-banner h1{font-family:"Orbitron",monospace;font-size:13px;font-weight:900;letter-spacing:.28em;
  color:transparent;background:linear-gradient(90deg,var(--hyd-accent),var(--hyd-cyan),var(--hyd-green),var(--hyd-accent));
  background-size:300% auto;
  animation:bannerflow 5s linear infinite;text-transform:uppercase;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--purple) 40%, transparent))}
.hyd-badge{padding:3px 9px;border-radius:12px;font-size:8px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid color-mix(in srgb, var(--purple) 40%, transparent);color:var(--hyd-accent);
  background:color-mix(in srgb, var(--purple) 10%, transparent)}
#banner-mode-btns{margin-left:auto;display:flex;gap:6px;align-items:center}
.mode-btn{padding:5px 12px;border-radius:16px;font-size:9px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;font-family:inherit;transition:.2s;
  border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);background:rgba(0,0,0,.3);color:var(--hyd-accent)}
.mode-btn.active{background:color-mix(in srgb, var(--purple) 20%, transparent);border-color:var(--hyd-accent);
  box-shadow:0 0 12px color-mix(in srgb, var(--purple) 30%, transparent)}
.mode-btn:hover:not(.active){border-color:var(--hyd-cyan);color:var(--hyd-cyan)}

/* Generate All */
#btn-gen-all{border-color:color-mix(in srgb, var(--warning) 40%, transparent)!important;color:var(--hyd-orange)!important}
#btn-gen-all:hover{background:color-mix(in srgb, var(--warning) 10%, transparent)!important}
#gen-all-badge{display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--warning) 35%, transparent);border-radius:8px;padding:0 5px;font-size:8px;
  min-width:16px;height:14px;margin-left:4px;font-weight:700}
#btn-cancel-gen{border-color:color-mix(in srgb, var(--danger) 40%, transparent)!important;color:var(--hyd-pink)!important;display:none}
#btn-cancel-gen.visible{display:inline-flex}

/* File menu */
.file-menu-wrap{position:relative}
#file-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--bg-card);
  border:1px solid var(--border);border-radius:10px;min-width:210px;z-index:9999;
  padding:5px 0;display:none;box-shadow:0 10px 40px rgba(0,0,0,.7)}
#file-menu.open{display:block}
.fm-item{width:100%;padding:8px 14px;font-size:10px;font-weight:600;letter-spacing:.04em;
  text-align:left;background:transparent;border:none;color:var(--text);cursor:pointer;
  font-family:inherit;display:flex;align-items:center;justify-content:space-between;transition:.15s}
.fm-item:hover{background:color-mix(in srgb, var(--purple) 12%, transparent);color:var(--hyd-accent)}
.fm-sep{height:1px;background:var(--border);margin:4px 8px}
.fm-shortcut{font-size:8px;color:var(--muted);opacity:.7;margin-left:8px}

/* ── Main layout ── */
#hyd-main{flex:1;min-height:0;display:flex;overflow:hidden}

/* ── Wizard ── */
#wizard-view{flex:1;overflow-y:auto;padding:0;display:none}
#wizard-view.active{display:flex;flex-direction:column}
.wiz-center{max-width:640px;margin:0 auto;padding:24px 20px;width:100%}
.wiz-step{display:none}
.wiz-step.active{display:block}
.wiz-title{font-family:"Orbitron",monospace;font-size:16px;font-weight:900;letter-spacing:.15em;
  color:var(--hyd-accent);margin-bottom:6px;text-transform:uppercase}
.wiz-sub{font-size:11px;color:var(--muted);margin-bottom:20px;line-height:1.6}
.wiz-step-indicator{display:flex;gap:6px;margin-bottom:24px}
.wiz-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:.3s}
.wiz-dot.done{background:var(--hyd-green)}
.wiz-dot.active{background:var(--hyd-accent);box-shadow:0 0 8px color-mix(in srgb, var(--purple) 50%, transparent)}
.wiz-field{margin-bottom:16px}
.wiz-lbl{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;display:block}
.wiz-input,.wiz-textarea,.wiz-select{width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid var(--border);background:rgba(0,0,0,.4);color:var(--text);
  font-size:13px;font-family:inherit;outline:none;transition:.2s}
.wiz-textarea{resize:vertical;min-height:80px;line-height:1.5}
.wiz-input:focus,.wiz-textarea:focus,.wiz-select:focus{border-color:var(--hyd-accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--purple) 12%, transparent)}
.wiz-select option{background:var(--bg-card)}
.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.style-chip{padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:rgba(0,0,0,.3);cursor:pointer;text-align:center;transition:.2s;font-family:inherit}
.style-chip:hover{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 8%, transparent)}
.style-chip.selected{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 16%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--purple) 20%, transparent)}
.style-chip .sc-icon{font-size:24px;display:block;margin-bottom:4px}
.style-chip .sc-name{font-size:10px;font-weight:700;color:var(--text)}
.style-chip .sc-desc{font-size:8px;color:var(--muted);margin-top:2px}
.wiz-slider-row{display:flex;align-items:center;gap:12px}
.wiz-slider{flex:1;-webkit-appearance:none;height:4px;border-radius:2px;
  background:var(--border);outline:none;cursor:pointer}
.wiz-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:var(--hyd-accent);cursor:pointer;
  box-shadow:0 0 8px color-mix(in srgb, var(--purple) 50%, transparent)}
.wiz-val{font-size:14px;font-weight:700;color:var(--hyd-accent);min-width:40px;text-align:right}
.scene-count-chips{display:flex;gap:8px;flex-wrap:wrap}
.scc{padding:8px 16px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--muted);
  font-family:inherit;transition:.2s}
.scc.selected{border-color:var(--hyd-accent);background:var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent));color:var(--hyd-accent)}
.scc:hover:not(.selected){border-color:var(--hyd-cyan);color:var(--hyd-cyan)}
.wiz-nav{display:flex;justify-content:space-between;align-items:center;margin-top:28px;gap:10px}
.wiz-back,.wiz-next{padding:10px 24px;border-radius:20px;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:.2s;border:none}
.wiz-back{background:transparent;border:1px solid var(--border);color:var(--muted)}
.wiz-back:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan)}
.wiz-next{background:linear-gradient(135deg,var(--hyd-accent),color-mix(in srgb, var(--purple) 80%, #000));color:#fff;
  box-shadow:0 4px 20px color-mix(in srgb, var(--purple) 35%, transparent)}
.wiz-next:hover{transform:translateY(-1px);box-shadow:0 6px 24px color-mix(in srgb, var(--purple) 50%, transparent)}
.wiz-next:disabled{opacity:.4;cursor:not-allowed;transform:none}
#wiz-generating{display:none;text-align:center;padding:40px 20px}
.gen-spinner{width:56px;height:56px;border-radius:50%;border:3px solid var(--border);
  border-top-color:var(--hyd-accent);animation:spin .9s linear infinite;margin:0 auto 20px}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-status{font-size:13px;color:var(--hyd-accent);margin-bottom:8px}
.gen-sub{font-size:10px;color:var(--muted)}

/* ── Editor layout — grid-template-rows: 1fr 80px for timeline ── */
#editor-view{flex:1;display:none;overflow:hidden}
#editor-view.active{display:grid;
  grid-template-columns:240px 1fr 280px;
  grid-template-rows:1fr 80px}
@media(max-width:1100px){#editor-view.active{grid-template-columns:200px 1fr}}
@media(max-width:700px){
  #editor-view.active{grid-template-columns:1fr;grid-template-rows:1fr 0}
  #ed-right{display:none}#ed-left{display:none}#timeline-strip{display:none}
  /* Show mobile scene strip (compact horizontal nav) */
  #mobile-scene-strip{display:flex!important}
  /* Narrower preview area on mobile */
  #preview-area{min-height:120px}
  #preview-video{max-height:35vh}}

/* ── Left scene list ── */
#ed-left{background:var(--panel);border-right:1px solid var(--border2);overflow:hidden;
  display:flex;flex-direction:column;grid-row:1}
#ed-left-header{padding:10px 12px;border-bottom:1px solid var(--border2);flex-shrink:0;
  display:flex;align-items:center;gap:8px}
.ed-left-title{font-family:"Orbitron",monospace;font-size:9px;font-weight:900;
  letter-spacing:.18em;color:var(--hyd-accent);text-transform:uppercase}
#scene-list{flex:1;overflow-y:auto;padding:6px 8px;display:flex;flex-direction:column;gap:4px}
#scene-list::-webkit-scrollbar{width:3px}
#scene-list::-webkit-scrollbar-thumb{background:var(--border)}

/* Scene rows — drag-to-reorder */
.scene-row{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:8px;
  border:1px solid transparent;cursor:pointer;transition:.2s;background:rgba(0,0,0,.2);position:relative}
.scene-row:hover{border-color:var(--border);background:color-mix(in srgb, var(--purple) 6%, transparent)}
.scene-row.active{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 12%, transparent)}
.scene-row.complete{border-color:var(--accent-dim,color-mix(in srgb, var(--accent) 25%, transparent));background:var(--accent-glow,color-mix(in srgb, var(--accent) 4%, transparent))}
.scene-row.dragging{opacity:.35;border-color:var(--hyd-accent)!important}
.scene-row.drag-over{border-color:var(--hyd-cyan)!important;border-style:dashed!important;background:color-mix(in srgb, var(--info) 6%, transparent)!important}
.drag-handle{cursor:grab;color:var(--muted);font-size:14px;opacity:0;flex-shrink:0;
  transition:.15s;user-select:none;line-height:1}
.scene-row:hover .drag-handle{opacity:.55}
.drag-handle:active{cursor:grabbing}
.scene-num{width:20px;height:20px;border-radius:50%;background:var(--border);
  font-size:8px;font-weight:700;display:flex;align-items:center;justify-content:center;
  color:var(--muted);flex-shrink:0}
.scene-row.active .scene-num{background:color-mix(in srgb, var(--purple) 30%, transparent);color:var(--hyd-accent)}
.scene-row.complete .scene-num{background:var(--accent-dim,color-mix(in srgb, var(--accent) 20%, transparent));color:var(--hyd-green)}
.scene-thumb{width:52px;height:35px;border-radius:4px;overflow:hidden;
  background:var(--bg-deep);border:1px solid var(--border2);flex-shrink:0;position:relative}
.scene-thumb video,.scene-thumb img{width:100%;height:100%;object-fit:cover}
.scene-thumb-empty{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:10px;color:var(--muted)}
.scene-info{flex:1;min-width:0}
.scene-label{font-size:9px;font-weight:700;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:22ch}

/* Status pills (replaces tiny status text) */
.status-pill{display:inline-block;padding:1px 6px;border-radius:8px;font-size:6px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.sp-ready{background:var(--accent-dim,color-mix(in srgb, var(--accent) 15%, transparent));border:1px solid var(--accent-dim,color-mix(in srgb, var(--accent) 30%, transparent));color:var(--hyd-green)}
.sp-clip {background:color-mix(in srgb, var(--info) 12%, transparent);border:1px solid var(--info-dim,color-mix(in srgb, var(--info) 25%, transparent));color:var(--hyd-cyan)}
.sp-audio{background:color-mix(in srgb, var(--warning) 12%, transparent);border:1px solid color-mix(in srgb, var(--warning) 25%, transparent);color:var(--hyd-orange)}
.sp-empty{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--muted)}

.scene-voice{font-size:7px;color:color-mix(in srgb, var(--purple) 70%, transparent);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:18ch;font-style:italic;margin-top:1px}
/* Quick regen button in scene row */
.scene-regen-btn{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:1px solid color-mix(in srgb, var(--warning) 35%, transparent);
  background:color-mix(in srgb, var(--warning) 6%, transparent);color:var(--hyd-orange);font-size:10px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;font-family:inherit;padding:0}
.scene-regen-btn:hover{background:color-mix(in srgb, var(--warning) 20%, transparent);border-color:var(--hyd-orange);transform:scale(1.1)}
/* Script modal */
#script-modal{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9300;
  display:none;align-items:center;justify-content:center;padding:20px}
#script-modal.open{display:flex}
#script-box{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  width:100%;max-width:760px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
#script-header{padding:14px 18px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:10px;flex-shrink:0}
.script-title{font-family:"Orbitron",monospace;font-size:11px;font-weight:900;letter-spacing:.14em;
  color:var(--hyd-accent);text-transform:uppercase;flex:1}
#script-body{flex:1;overflow-y:auto;padding:20px 24px;font-family:'Courier New',monospace;font-size:12px;
  line-height:1.7;color:var(--text)}
.script-scene{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--border2)}
.script-slug{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.script-prompt{font-size:11px;color:rgba(255,255,255,.55);margin-bottom:10px;font-style:italic;line-height:1.5}
.script-line{font-size:14px;color:var(--text);font-weight:700;margin-bottom:6px;padding:8px 14px;
  border-left:3px solid var(--hyd-accent);background:color-mix(in srgb, var(--purple) 6%, transparent);border-radius:0 6px 6px 0}
.script-notes{font-size:10px;color:var(--muted);font-style:italic}
/* AI Director suggestion chips */
#ai-suggest-row{display:flex;gap:5px;flex-wrap:wrap;padding:6px 10px 0;border-top:1px solid var(--border2);flex-shrink:0}
.ai-suggest-chip{padding:4px 10px;border-radius:12px;font-size:8px;font-weight:700;cursor:pointer;
  border:1px solid var(--border2);background:rgba(0,0,0,.2);color:var(--muted);
  font-family:inherit;transition:.15s;white-space:nowrap}
.ai-suggest-chip:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan);background:color-mix(in srgb, var(--info) 6%, transparent)}
.scene-trans{font-size:7px;padding:1px 5px;border-radius:4px;
  background:var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent));border:1px solid var(--purple-dim,color-mix(in srgb, var(--purple) 25%, transparent));
  color:var(--hyd-accent);white-space:nowrap;flex-shrink:0}

/* Per-row spinner & progress (Generate All) */
.row-spinner{width:11px;height:11px;border-radius:50%;border:2px solid var(--border);
  border-top-color:var(--hyd-accent);animation:spin .7s linear infinite;flex-shrink:0}
.scene-row-progress{position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--hyd-accent),var(--hyd-cyan));
  border-radius:0 0 8px 8px;width:0;opacity:0}
.scene-row[data-gen] .scene-row-progress{opacity:1;animation:genpulse 2s ease-in-out infinite alternate}
@keyframes genpulse{from{width:15%;opacity:.5}to{width:88%;opacity:1}}

/* Success pulse */
@keyframes success-pulse{
  0%  {box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent)}
  60% {box-shadow:0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent)}
  100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent)}}
.pulse-success{animation:success-pulse .75s ease-out}

#add-scene-btn{margin:8px;padding:8px;border-radius:8px;border:1px dashed var(--border);
  background:transparent;color:var(--muted);font-size:10px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:.15s;text-align:center;flex-shrink:0}
#add-scene-btn:hover{border-color:var(--hyd-accent);color:var(--hyd-accent)}
#ed-left-footer{padding:5px 12px;border-top:1px solid var(--border2);flex-shrink:0;
  font-size:7px;color:var(--muted);text-align:center;opacity:.7}

/* ── Center editor ── */
#ed-center{display:flex;flex-direction:column;overflow:hidden;background:var(--bg-deep);grid-row:1}
#preview-area{flex:0 0 auto;background:#000;position:relative;display:flex;
  align-items:center;justify-content:center;
  /* height auto-sizes to content: ~160px when empty, ~42vh when video */
  min-height:160px}
#preview-video{max-width:100%;max-height:42vh;display:block}
#preview-placeholder{display:flex;flex-direction:column;align-items:center;
  gap:6px;color:var(--muted);font-size:11px;padding:16px 20px;
  border:1px dashed rgba(255,255,255,.06);border-radius:8px;margin:10px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--purple) 3%, transparent),color-mix(in srgb, var(--info) 3%, transparent))}
#preview-audio{width:100%;position:absolute;bottom:0;left:0;background:rgba(0,0,0,.7);
  padding:4px 10px;display:none}
#preview-audio audio{width:100%;height:28px}
.preview-overlay-btns{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.pov-btn{padding:4px 10px;border-radius:6px;font-size:9px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:.15s;border:none;background:rgba(0,0,0,.65);
  color:var(--text);backdrop-filter:blur(4px)}
.pov-btn:hover{background:color-mix(in srgb, var(--purple) 30%, transparent);color:var(--hyd-accent)}
#scene-gen-progress{display:none;padding:7px 14px;background:color-mix(in srgb, var(--purple) 6%, transparent);
  border-top:1px solid color-mix(in srgb, var(--purple) 20%, transparent);flex-shrink:0}
.sgp-bar-wrap{height:3px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:3px}
.sgp-bar{height:100%;background:linear-gradient(90deg,var(--hyd-accent),var(--hyd-cyan));
  border-radius:2px;transition:width .4s ease;width:0%}
.sgp-label{font-size:8px;color:var(--muted)}

/* ── Tab-based controls (replaces vertical scroll) ── */
#ctrl-tabs-container{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
#no-scene-msg{flex:1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:30px 20px;color:var(--muted);font-size:11px;line-height:1.6}
#scene-ctrl-panel{flex:1;display:none;flex-direction:column;overflow:hidden}
#scene-ctrl-panel.visible{display:flex}
#ctrl-scene-header{padding:10px 18px;border-bottom:1px solid var(--border2);flex-shrink:0;
  display:flex;align-items:center;gap:8px}
#ctrl-scene-label{font-size:12px;font-weight:700;color:var(--text);flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ctrl-trans-badge{font-size:7px;padding:2px 7px;border-radius:5px;
  background:var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent));border:1px solid var(--purple-dim,color-mix(in srgb, var(--purple) 25%, transparent));
  color:var(--hyd-accent);cursor:pointer;flex-shrink:0;transition:.15s}
#ctrl-trans-badge:hover{background:color-mix(in srgb, var(--purple) 28%, transparent)}
#ctrl-tab-bar{display:flex;border-bottom:1px solid var(--border2);flex-shrink:0}
.ctrl-tab{flex:1;padding:9px 4px;font-size:9px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:transparent;border:none;border-bottom:2px solid transparent;
  cursor:pointer;font-family:inherit;color:var(--muted);transition:.2s}
.ctrl-tab.active{color:var(--hyd-accent);border-bottom-color:var(--hyd-accent)}
.ctrl-tab:hover:not(.active){color:var(--hyd-cyan)}
.ctrl-tab-panel{flex:1;overflow-y:auto;padding:16px 18px;display:none}
.ctrl-tab-panel.active{display:block}
.ctrl-tab-panel::-webkit-scrollbar{width:3px}
.ctrl-tab-panel::-webkit-scrollbar-thumb{background:var(--border)}
.ctrl-section{margin-bottom:18px}
.ctrl-label{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.ctrl-label span{flex:1}
.ctrl-badge{font-size:7px;padding:1px 6px;border-radius:4px;
  background:var(--accent-dim,color-mix(in srgb, var(--accent) 12%, transparent));color:var(--hyd-green);border:1px solid var(--accent-dim,color-mix(in srgb, var(--accent) 25%, transparent))}
.ctrl-prompt{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--border);
  background:rgba(0,0,0,.4);color:var(--text);font-size:12px;font-family:inherit;
  outline:none;resize:none;min-height:80px;max-height:140px;transition:.2s;line-height:1.6}
.ctrl-prompt:focus{border-color:var(--hyd-accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--purple) 10%, transparent)}
#ctrl-notes{width:100%;padding:8px 11px;border-radius:8px;border:1px solid var(--border2);
  background:rgba(0,0,0,.25);color:var(--text);font-size:10px;font-family:inherit;
  outline:none;resize:none;min-height:40px;max-height:70px;transition:.2s;line-height:1.4}
#ctrl-notes:focus{border-color:var(--hyd-accent)}
.ctrl-row{display:flex;gap:7px;flex-wrap:wrap}
.ctrl-btn{flex:1;min-width:0;padding:7px 10px;border-radius:8px;font-size:9px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:.2s;white-space:nowrap;
  display:flex;align-items:center;justify-content:center;gap:5px;border:none}
.ctrl-btn-primary{background:linear-gradient(135deg,var(--hyd-accent),color-mix(in srgb, var(--purple) 80%, #000));color:#fff}
.ctrl-btn-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
.ctrl-btn-outline{background:transparent;border:1px solid var(--border);color:var(--muted)}
.ctrl-btn-outline:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan)}
.ctrl-btn-green{background:var(--accent-dim,color-mix(in srgb, var(--accent) 12%, transparent));border:1px solid var(--accent-dim,color-mix(in srgb, var(--accent) 30%, transparent));color:var(--hyd-green)}
.ctrl-btn-green:hover{background:var(--accent-dim,color-mix(in srgb, var(--accent) 20%, transparent))}
.ctrl-btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;filter:none!important}

/* Cost badge */
#cost-badge{font-size:8px;padding:2px 8px;border-radius:6px;
  background:var(--info-dim,color-mix(in srgb, var(--info) 10%, transparent));border:1px solid color-mix(in srgb, var(--info) 20%, transparent);
  color:var(--hyd-cyan);margin-left:auto;flex-shrink:0}

/* Voice selector */
#ctrl-voice-sel{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  background:rgba(0,0,0,.4);color:var(--text);font-size:11px;font-family:inherit;
  outline:none;margin-bottom:8px;transition:.2s}
#ctrl-voice-sel:focus{border-color:var(--hyd-accent)}
#ctrl-voice-sel option{background:var(--bg-card)}

/* Transition chips — now with .tc-desc */
.trans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:5px}
.trans-chip{padding:6px 6px 5px;border-radius:7px;border:1px solid var(--border);
  background:rgba(0,0,0,.3);cursor:pointer;text-align:center;transition:.18s;font-family:inherit}
.trans-chip:hover{border-color:var(--hyd-accent)}
.trans-chip.selected{border-color:var(--hyd-accent);background:var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent))}
.trans-chip .tc-icon{font-size:15px;margin-bottom:2px;display:block}
.trans-chip .tc-name{font-size:7px;font-weight:700;color:var(--text)}
.trans-chip .tc-type{font-size:6px;color:var(--muted);margin-top:1px}
.trans-chip .tc-desc{font-size:6px;color:var(--muted);margin-top:2px;line-height:1.3;opacity:.75}

/* Model selector */
.model-row{display:flex;gap:5px;flex-wrap:wrap}
.model-chip{padding:6px 12px;border-radius:14px;font-size:10px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--muted);
  font-family:inherit;transition:.15s;white-space:nowrap}
.model-chip.selected{border-color:var(--hyd-cyan);background:var(--info-dim,color-mix(in srgb, var(--info) 10%, transparent));color:var(--hyd-cyan)}
.model-chip:hover:not(.selected){border-color:var(--hyd-accent);color:var(--hyd-accent)}

/* Duration slider */
.dur-row{display:flex;align-items:center;gap:10px}
.dur-slider{flex:1;-webkit-appearance:none;height:3px;border-radius:2px;
  background:var(--border);outline:none;cursor:pointer}
.dur-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  border-radius:50%;background:var(--hyd-cyan);cursor:pointer;
  box-shadow:0 0 6px color-mix(in srgb, var(--info) 50%, transparent)}
.dur-val{font-size:12px;font-weight:700;color:var(--hyd-cyan);min-width:36px;text-align:right}

/* Crossfade row (settings tab) */
#ctrl-cf-val{font-size:11px;font-weight:700;color:var(--hyd-accent);min-width:32px;text-align:right}

/* ── Merge toolbar ── */
#merge-toolbar{padding:8px 14px;border-top:1px solid var(--border2);flex-shrink:0;
  display:flex;align-items:center;gap:8px;background:var(--panel)}
.merge-info{font-size:9px;color:var(--muted);flex:1}
#merge-btn{padding:8px 20px;border-radius:20px;border:none;cursor:pointer;font-family:inherit;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--hyd-green),color-mix(in srgb, var(--accent) 80%, #008c52));color:#000;
  box-shadow:0 4px 16px var(--accent-dim,color-mix(in srgb, var(--accent) 30%, transparent));transition:.2s}
#merge-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px color-mix(in srgb, var(--accent) 45%, transparent)}
#merge-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
#preview-all-btn{padding:8px 14px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;font-size:9px;font-weight:700;
  font-family:inherit;transition:.2s}
#preview-all-btn:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan)}

/* ── Right AI panel ── */
#ed-right{background:var(--panel);border-left:1px solid var(--border2);
  display:flex;flex-direction:column;overflow:hidden;grid-row:1}
#ai-header{padding:10px 12px;border-bottom:1px solid var(--border2);flex-shrink:0;
  display:flex;align-items:center;gap:8px}
.ai-title{font-family:"Orbitron",monospace;font-size:9px;font-weight:900;
  letter-spacing:.16em;color:var(--hyd-cyan);text-transform:uppercase}
#ai-chat{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
#ai-chat::-webkit-scrollbar{width:3px}
#ai-chat::-webkit-scrollbar-thumb{background:var(--border)}
.ai-msg{padding:9px 11px;border-radius:8px;font-size:11px;line-height:1.5}
.ai-msg.hyp{background:var(--info-glow,color-mix(in srgb, var(--info) 8%, transparent));border:1px solid var(--info-dim,color-mix(in srgb, var(--info) 15%, transparent));color:var(--text)}
.ai-msg.user{background:color-mix(in srgb, var(--purple) 8%, transparent);border:1px solid var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent));color:var(--text);text-align:right}
.ai-msg.system{background:var(--accent-glow,color-mix(in srgb, var(--accent) 6%, transparent));border:1px solid var(--accent-dim,color-mix(in srgb, var(--accent) 15%, transparent));color:var(--hyd-green);font-size:9px}
.ai-apply-btn{margin-top:6px;padding:4px 12px;border-radius:6px;font-size:9px;font-weight:700;
  cursor:pointer;font-family:inherit;border:1px solid color-mix(in srgb, var(--info) 40%, transparent);
  background:var(--info-dim,color-mix(in srgb, var(--info) 10%, transparent));color:var(--hyd-cyan);transition:.15s;display:block}
.ai-apply-btn:hover{background:color-mix(in srgb, var(--info) 20%, transparent)}
.ai-thinking{display:flex;gap:5px;align-items:center;padding:8px 12px;color:var(--muted);font-size:10px}
.ai-dot{width:5px;height:5px;border-radius:50%;background:var(--hyd-cyan);animation:aidot .9s ease-in-out infinite}
.ai-dot:nth-child(2){animation-delay:.15s}
.ai-dot:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}
#ai-input-row{padding:8px 10px;border-top:1px solid var(--border2);flex-shrink:0;display:flex;gap:6px}
#ai-input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  background:rgba(0,0,0,.4);color:var(--text);font-size:11px;font-family:inherit;outline:none;transition:.2s}
#ai-input:focus{border-color:var(--hyd-cyan)}
#ai-send{width:34px;height:34px;border-radius:8px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--hyd-cyan),var(--info));color:#000;
  font-size:16px;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:.2s;flex-shrink:0}
#ai-send:hover{filter:brightness(1.15)}

/* ── Timeline strip (grid-row 2, spans all 3 columns) ── */
#timeline-strip{grid-column:1 / -1;grid-row:2;background:rgba(0,0,0,.5);
  border-top:1px solid var(--border);display:flex;align-items:center;
  padding:0 12px 0 8px;gap:0;overflow-x:auto;min-height:80px;position:relative}
#timeline-strip::-webkit-scrollbar{height:3px}
#timeline-strip::-webkit-scrollbar-thumb{background:var(--border)}
#tl-blocks{display:flex;align-items:center;gap:2px;height:100%;padding:10px 0}
#tl-stats{position:absolute;right:12px;top:6px;font-size:7px;color:var(--muted);
  white-space:nowrap;pointer-events:none;letter-spacing:.04em}
.tl-block{min-width:50px;height:68px;border-radius:6px;border:1px solid;cursor:pointer;
  position:relative;flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;
  padding:4px 4px 5px;transition:.15s;overflow:hidden;user-select:none}
.tl-block:hover{filter:brightness(1.5);transform:scaleY(1.05)}
.tl-block.tl-active{outline:2px solid rgba(255,255,255,.5);outline-offset:1px;filter:brightness(1.6)}
.tl-label{font-size:7px;font-weight:700;color:rgba(255,255,255,.85);position:relative;z-index:1;
  text-align:center;line-height:1.2;margin-bottom:1px;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-scene-num{font-size:9px;font-weight:900;color:rgba(255,255,255,.4);position:relative;z-index:1;margin-bottom:2px}
.tl-trans{position:absolute;right:-5px;top:50%;transform:translateY(-50%);
  font-size:8px;z-index:2;background:rgba(0,0,0,.75);border-radius:50%;
  width:13px;height:13px;display:flex;align-items:center;justify-content:center;line-height:1}

/* ── Bank picker modal ── */
#bank-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9000;
  display:none;align-items:center;justify-content:center;padding:16px}
#bank-modal.open{display:flex}
#bank-box{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  width:100%;max-width:680px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden}
#bank-header{padding:14px 16px;border-bottom:1px solid var(--border2);display:flex;
  align-items:center;gap:10px;flex-shrink:0}
.bank-title{font-family:"Orbitron",monospace;font-size:11px;font-weight:900;
  letter-spacing:.16em;color:var(--hyd-accent);text-transform:uppercase}
#bank-close{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;font-family:inherit;transition:.15s}
#bank-close:hover{border-color:var(--hyd-pink);color:var(--hyd-pink)}
#bank-tabs{display:flex;border-bottom:1px solid var(--border2);flex-shrink:0}
.bank-tab{flex:1;padding:9px;font-size:9px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:transparent;border:none;cursor:pointer;
  font-family:inherit;color:var(--muted);border-bottom:2px solid transparent;transition:.2s}
.bank-tab.active{color:var(--hyd-accent);border-bottom-color:var(--hyd-accent)}
#bank-filter{padding:8px 12px;border-bottom:1px solid var(--border2);flex-shrink:0}
#bank-search{width:100%;padding:7px 10px;border-radius:8px;border:1px solid var(--border);
  background:rgba(0,0,0,.4);color:var(--text);font-size:11px;font-family:inherit;outline:none}
#bank-filter-btns{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.bf-btn{padding:3px 8px;border-radius:10px;font-size:8px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--muted);font-family:inherit;transition:.15s}
.bf-btn.active{border-color:var(--hyd-cyan);color:var(--hyd-cyan);background:var(--info-dim,color-mix(in srgb, var(--info) 10%, transparent))}
#bank-grid{flex:1;overflow-y:auto;padding:10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
#bank-grid::-webkit-scrollbar{width:3px}
.bank-item{border-radius:8px;overflow:hidden;border:1px solid var(--border2);
  cursor:pointer;transition:.2s;background:var(--bg-deep)}
.bank-item:hover{border-color:var(--hyd-accent);transform:translateY(-2px)}
.bank-item video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--panel)}
.bank-meta{padding:5px 7px;font-size:8px;color:var(--muted)}
.bank-meta strong{display:block;color:var(--text);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bank-meta .bm-dur{color:var(--hyd-cyan);font-weight:700}
.bank-meta .bm-src{color:var(--hyd-accent);font-size:7px}

/* Merge result modal */
#merge-modal{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:9000;
  display:none;align-items:center;justify-content:center;padding:16px}
#merge-modal.open{display:flex}
#merge-box{background:var(--bg-card);border:1px solid var(--accent-dim,color-mix(in srgb, var(--accent) 30%, transparent));border-radius:14px;
  width:100%;max-width:600px;padding:24px}
.merge-result-title{font-family:"Orbitron",monospace;font-size:13px;font-weight:900;
  letter-spacing:.2em;color:var(--hyd-green);text-transform:uppercase;margin-bottom:14px}
#merge-result-video{width:100%;border-radius:8px;border:1px solid var(--accent-dim,color-mix(in srgb, var(--accent) 20%, transparent));margin-bottom:12px}
.merge-result-btns{display:flex;gap:8px;flex-wrap:wrap}
.mrb{padding:8px 18px;border-radius:20px;font-size:10px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:.2s;text-decoration:none}
.mrb-dl{background:var(--hyd-green);border:none;color:#000}
.mrb-close{background:transparent;border:1px solid var(--border);color:var(--muted)}

/* Project list modal */
#project-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9100;
  display:none;align-items:center;justify-content:center;padding:16px}
#project-modal.open{display:flex}
#project-box{background:var(--bg-card);border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);
  border-radius:14px;width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
#project-box-header{padding:14px 16px;border-bottom:1px solid var(--border2);
  display:flex;align-items:center;gap:10px;flex-shrink:0}
.proj-title{font-family:"Orbitron",monospace;font-size:11px;font-weight:900;
  letter-spacing:.16em;color:var(--hyd-accent);text-transform:uppercase;flex:1}
#project-list-el{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}
.proj-row{display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:8px;border:1px solid var(--border2);cursor:pointer;transition:.2s;background:rgba(0,0,0,.25)}
.proj-row:hover{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 8%, transparent)}
.proj-info{flex:1;min-width:0}
.proj-name{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-meta{font-size:8px;color:var(--muted);margin-top:2px}
.proj-ext{padding:2px 7px;border-radius:6px;font-size:8px;font-weight:700;
  background:var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent));border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);color:var(--hyd-accent)}
.proj-del{padding:4px 8px;border-radius:6px;border:1px solid var(--danger-dim,color-mix(in srgb, var(--danger) 30%, transparent));
  background:transparent;color:var(--hyd-pink);font-size:9px;cursor:pointer;font-family:inherit;transition:.15s}
.proj-del:hover{background:var(--danger-dim,color-mix(in srgb, var(--danger) 15%, transparent))}

/* Toast — single definition below in Hollywood Studio section */

/* Mobile */
@media(max-width:700px){
  .wiz-center{padding:16px 12px}
  .style-grid{grid-template-columns:repeat(2,1fr)}
  .trans-grid{grid-template-columns:repeat(3,1fr)}
  #hyd-banner h1{font-size:9px;letter-spacing:.12em}
  .mode-btn{padding:4px 7px;font-size:8px;letter-spacing:0}
  /* Hide cluttered banner elements on mobile */
  #ar-chips{display:none!important}
  .hyd-badge{display:none!important}
  /* Hide Gen-All + Cancel on mobile */
  #btn-gen-all,#btn-cancel-gen{display:none!important}
  .mode-btn[onclick*="openHydPromptLibrary"]{display:none!important}
  #banner-mode-btns{gap:4px}
}
html.hy-compact body{padding-top:0}
html.hy-compact #hy-nav{display:none!important}
html.hy-compact .hy-mobile-header{display:flex!important}
html.hy-compact #editor-view.active{grid-template-columns:1fr!important}
html.hy-compact #ed-left{display:none}
html.hy-compact #ed-right{display:none}
html.hy-compact #timeline-strip{display:none}
html.hy-compact #mobile-scene-strip{display:flex!important}
html.hy-compact #preview-area{min-height:120px}
/* Mobile scene strip CSS */
#mobile-scene-strip{display:none;overflow-x:auto;flex-shrink:0;
  padding:6px 10px;gap:6px;border-bottom:1px solid var(--border2);
  background:var(--panel);scrollbar-width:none}
#mobile-scene-strip::-webkit-scrollbar{display:none}
.mob-scene-chip{flex-shrink:0;padding:5px 10px;border-radius:20px;font-size:9px;
  font-weight:700;border:1px solid var(--border2);background:rgba(0,0,0,.3);
  color:var(--muted);cursor:pointer;font-family:inherit;white-space:nowrap;
  display:flex;align-items:center;gap:5px;transition:.15s}
.mob-scene-chip.active{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 15%, transparent);
  color:var(--hyd-accent)}
.mob-scene-chip.complete{border-color:color-mix(in srgb, var(--accent) 35%, transparent);color:var(--hyd-green);
  background:color-mix(in srgb, var(--accent) 6%, transparent)}
.mob-scene-chip.active.complete{border-color:var(--hyd-green)}

/* ── Left panel tab switcher ── */
#ed-left-tabs{display:flex;border-bottom:1px solid var(--border2);flex-shrink:0}
.ed-left-tab{flex:1;padding:7px 4px;font-size:8px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;background:transparent;border:none;border-bottom:2px solid transparent;
  cursor:pointer;font-family:inherit;color:var(--muted);transition:.2s}
.ed-left-tab.active{color:var(--hyd-accent);border-bottom-color:var(--hyd-accent)}
.ed-left-tab:hover:not(.active){color:var(--hyd-cyan)}

/* ── Character Bible cards ── */
.char-card{padding:8px 10px;border-radius:8px;border:1px solid var(--border);
  background:rgba(0,0,0,.25);position:relative}
.char-name-row{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.char-name{flex:1;padding:4px 7px;border-radius:5px;border:1px solid var(--border2);
  background:rgba(0,0,0,.3);color:var(--text);font-size:10px;font-family:inherit;outline:none;font-weight:700}
.char-name:focus{border-color:var(--hyd-accent)}
.char-del{width:20px;height:20px;border-radius:50%;border:1px solid var(--danger-dim,color-mix(in srgb, var(--danger) 30%, transparent));
  background:transparent;color:var(--hyd-pink);cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;font-family:inherit;transition:.15s;flex-shrink:0}
.char-del:hover{background:var(--danger-dim,color-mix(in srgb, var(--danger) 15%, transparent))}
.char-appearance{width:100%;padding:6px 8px;border-radius:6px;border:1px solid var(--border2);
  background:rgba(0,0,0,.25);color:var(--text);font-size:9px;font-family:inherit;outline:none;
  resize:none;min-height:40px;max-height:60px;line-height:1.4;transition:.2s}
.char-appearance:focus{border-color:var(--hyd-accent)}
.char-ref-row{display:flex;align-items:center;gap:6px;margin-top:5px}
.char-ref-thumb{width:28px;height:28px;border-radius:4px;object-fit:cover;
  border:1px solid var(--border2);flex-shrink:0;display:none}
.char-ref-upload{font-size:8px;padding:2px 7px;border-radius:5px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;font-family:inherit;transition:.15s}
.char-ref-upload:hover{border-color:var(--hyd-accent);color:var(--hyd-accent)}

/* ── Cast chips (per-scene character tagging) ── */
.cast-chip-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.cast-chip{padding:3px 8px;border-radius:12px;font-size:8px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:rgba(0,0,0,.25);color:var(--muted);
  font-family:inherit;transition:.15s}
.cast-chip.active{border-color:var(--hyd-accent);background:var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent));color:var(--hyd-accent)}
.cast-chip:hover:not(.active){border-color:var(--hyd-cyan);color:var(--hyd-cyan)}

/* ── Reference frame (Clip tab) ── */
.ref-frame-thumb{width:100%;border-radius:6px;border:1px solid var(--border2);
  max-height:76px;object-fit:cover;display:block}

/* ── Chain icon on scene row ── */
.chain-icon{font-size:9px;opacity:.55;flex-shrink:0;line-height:1}

/* ── Style brief panel ── */
#style-brief-section{border-top:1px solid var(--border2);padding:8px 10px;flex-shrink:0;background:rgba(0,0,0,.1)}
#style-brief-ta{width:100%;padding:6px 8px;border-radius:7px;border:1px solid var(--border);
  background:rgba(0,0,0,.4);color:var(--text);font-size:9px;font-family:inherit;
  outline:none;resize:none;min-height:44px;max-height:72px;line-height:1.4;transition:.2s}
#style-brief-ta:focus{border-color:var(--hyd-accent)}

/* ── Hollywood Studio: Toast upgrade ── */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--bg-card);border-radius:12px;padding:10px 20px 10px 14px;
  font-size:11px;z-index:9999;opacity:0;transition:opacity .3s,transform .3s;
  pointer-events:none;white-space:nowrap;max-width:420px;
  display:flex;align-items:center;gap:8px;backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.6)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.t-ok{border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);color:var(--hyd-green);box-shadow:0 8px 32px color-mix(in srgb, var(--accent) 15%, transparent)}
#toast.t-err{border:1px solid color-mix(in srgb, var(--danger) 40%, transparent);color:var(--hyd-pink);box-shadow:0 8px 32px color-mix(in srgb, var(--danger) 15%, transparent)}
#toast.t-info{border:1px solid color-mix(in srgb, var(--info) 40%, transparent);color:var(--hyd-cyan);box-shadow:0 8px 32px color-mix(in srgb, var(--info) 15%, transparent)}
#toast.t-wrap{border:1px solid color-mix(in srgb, var(--purple) 50%, transparent);color:var(--hyd-accent);box-shadow:0 8px 32px color-mix(in srgb, var(--purple) 30%, transparent);font-size:13px;padding:14px 24px 14px 18px}
.toast-icon{font-size:16px;flex-shrink:0}

/* ── Hollywood Studio: ROLL CAMERA generate button ── */
#btn-gen-clip{
  background:linear-gradient(135deg,var(--danger),color-mix(in srgb, var(--danger) 70%, #000));
  border:none;color:#fff;font-size:11px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;
  border-radius:10px;width:100%;padding:12px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;font-family:inherit;transition:.25s;
  box-shadow:0 4px 20px rgba(255,56,96,.45)}
#btn-gen-clip:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-2px);
  box-shadow:0 6px 28px rgba(255,56,96,.65)}
#btn-gen-clip:disabled{background:rgba(255,56,96,.35);box-shadow:none;transform:none;cursor:not-allowed}
#btn-gen-clip.in-production{
  background:linear-gradient(135deg,color-mix(in srgb, var(--warning) 30%, transparent),color-mix(in srgb, var(--purple) 30%, transparent));
  border:1px solid color-mix(in srgb, var(--warning) 60%, transparent);
  animation:production-pulse 1.2s ease-in-out infinite}
@keyframes production-pulse{
  0%,100%{box-shadow:0 0 12px color-mix(in srgb, var(--warning) 30%, transparent)}
  50%{box-shadow:0 0 28px color-mix(in srgb, var(--warning) 70%, transparent),0 0 60px color-mix(in srgb, var(--purple) 20%, transparent)}}

/* ── Hollywood Studio: ON AIR indicator ── */
#on-air-badge{display:none;align-items:center;gap:6px;
  padding:4px 10px;border-radius:20px;
  background:rgba(255,56,96,.15);border:1px solid rgba(255,56,96,.4);
  font-size:8px;font-weight:900;letter-spacing:.12em;color:var(--danger);
  text-transform:uppercase;animation:on-air-flash 1s ease-in-out infinite}
#on-air-badge.visible{display:flex}
.on-air-dot{width:6px;height:6px;border-radius:50%;background:var(--danger);
  animation:on-air-flash 1s ease-in-out infinite}
@keyframes on-air-flash{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Hollywood Studio: Production stage bar ── */
#prod-stage-bar{display:none;padding:8px 14px 6px;
  background:rgba(0,0,0,.4);border-top:1px solid var(--border2);flex-shrink:0}
#prod-stage-bar.visible{display:block}
.prod-stages{display:flex;gap:2px;align-items:center;margin-bottom:4px}
.prod-stage{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.08);position:relative;transition:.4s}
.prod-stage.done{background:var(--hyd-green)}
.prod-stage.active{background:var(--hyd-accent);animation:stage-active .8s ease-in-out infinite alternate}
@keyframes stage-active{from{opacity:.6}to{opacity:1;box-shadow:0 0 8px var(--hyd-accent)}}
.prod-stage-label{font-size:7px;color:var(--muted);letter-spacing:.06em;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.prod-stage-names{display:flex;justify-content:space-between;padding:0 2px}
.prod-stage-name{font-size:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;flex:1;text-align:center}
.prod-stage-name.done{color:var(--hyd-green)}
.prod-stage-name.active{color:var(--hyd-accent);font-weight:700}
#prod-stage-text{font-size:8px;color:var(--hyd-orange);letter-spacing:.06em;margin-top:4px;
  text-align:center;font-weight:700}

/* ── Hollywood Studio: Scene role badge in header ── */
.scene-role-badge{padding:2px 8px;border-radius:6px;font-size:7px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;flex-shrink:0}
.role-hook{background:rgba(255,56,96,.15);border:1px solid rgba(255,56,96,.4);color:var(--danger)}
.role-reveal{background:color-mix(in srgb, var(--info) 10%, transparent);border:1px solid color-mix(in srgb, var(--info) 30%, transparent);color:var(--hyd-cyan)}
.role-proof{background:color-mix(in srgb, var(--accent) 8%, transparent);border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);color:var(--hyd-green)}
.role-cta{background:color-mix(in srgb, var(--purple) 12%, transparent);border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);color:var(--hyd-accent)}
.role-scene{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--muted)}

/* ── Hollywood Studio: Scene completion flash ── */
@keyframes scene-wrap-flash{
  0%  {background:color-mix(in srgb, var(--accent) 25%, transparent);box-shadow:0 0 20px color-mix(in srgb, var(--accent) 50%, transparent)}
  100%{background:transparent;box-shadow:none}}
.scene-wrap-flash{animation:scene-wrap-flash 1.2s ease-out}

/* ── Hollywood Studio: Character card slide-in ── */
@keyframes char-slide-in{
  from{opacity:0;transform:translateY(-12px);box-shadow:0 0 0 0 color-mix(in srgb, var(--purple) 60%, transparent)}
  to  {opacity:1;transform:translateY(0);box-shadow:0 0 16px color-mix(in srgb, var(--purple) 20%, transparent)}}
.char-card{animation:char-slide-in .35s cubic-bezier(.22,1,.36,1)}

/* ── Hollywood Studio: Merge/Wrap button ── */
#merge-btn.ready-to-wrap{
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb, var(--accent) 80%, #008c52));
  animation:wrap-glow 2s ease-in-out infinite;
  font-size:11px;font-weight:900;letter-spacing:.08em;
  box-shadow:0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent)}
@keyframes wrap-glow{
  0%,100%{box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent)}
  50%{box-shadow:0 6px 32px color-mix(in srgb, var(--accent) 70%, transparent),0 0 60px color-mix(in srgb, var(--accent) 15%, transparent)}}

/* ── Hollywood Studio: Merge result celebration ── */
#wrap-celebration{position:fixed;inset:0;z-index:9999;pointer-events:none;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);backdrop-filter:blur(4px)}
#wrap-celebration.show{display:flex;flex-direction:column;gap:0}
#wrap-title{font-family:"Orbitron",monospace;font-size:28px;font-weight:900;
  color:var(--hyd-green);letter-spacing:.3em;text-transform:uppercase;
  animation:wrap-title-in 1s cubic-bezier(.22,1,.36,1);
  text-shadow:0 0 40px color-mix(in srgb, var(--accent) 80%, transparent),0 0 80px color-mix(in srgb, var(--accent) 30%, transparent)}
@keyframes wrap-title-in{
  from{opacity:0;transform:scale(.7);letter-spacing:.1em}
  to  {opacity:1;transform:scale(1);letter-spacing:.3em}}
#wrap-sub{font-size:12px;color:var(--muted);margin-top:8px;text-align:center;letter-spacing:.1em}
#wrap-actions{display:flex;gap:12px;margin-top:28px}
.wrap-act{padding:12px 28px;border-radius:20px;font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:.2s;border:none;text-decoration:none;
  display:flex;align-items:center;gap:8px;letter-spacing:.06em}
.wrap-dl{background:var(--hyd-green);color:#000;box-shadow:0 4px 20px color-mix(in srgb, var(--accent) 40%, transparent)}
.wrap-close{background:transparent;border:1px solid var(--border);color:var(--muted)}

/* ── Hollywood Studio: Confetti canvas ── */
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9998;display:none}

/* ── Hollywood Studio: Merge CTA bar (above toolbar) ── */
#merge-cta-bar{display:none;padding:10px 16px;background:linear-gradient(90deg,color-mix(in srgb, var(--accent) 6%, transparent),color-mix(in srgb, var(--info) 6%, transparent));
  border-top:1px solid color-mix(in srgb, var(--accent) 20%, transparent);flex-shrink:0;align-items:center;gap:10px}
#merge-cta-bar.ready{display:flex;animation:merge-cta-glow 3s ease-in-out infinite}
@keyframes merge-cta-glow{
  0%,100%{border-top-color:color-mix(in srgb, var(--accent) 20%, transparent)}
  50%{border-top-color:color-mix(in srgb, var(--accent) 60%, transparent);background:linear-gradient(90deg,color-mix(in srgb, var(--accent) 10%, transparent),color-mix(in srgb, var(--info) 10%, transparent))}}
.merge-cta-text{flex:1;font-size:9px;color:var(--hyd-green);font-weight:700;letter-spacing:.08em}
.merge-cta-sub{font-size:7px;color:var(--muted);font-weight:400}

/* ── Hollywood Studio: Timeline pulse during generation ── */
.tl-block.tl-generating{
  animation:tl-live 1.2s ease-in-out infinite;border-style:dashed!important}
@keyframes tl-live{0%,100%{opacity:.5}50%{opacity:1;filter:brightness(2)}}

/* ── Hollywood Studio: Empty cast state ── */
#char-empty-state{padding:20px 12px;text-align:center}
#char-empty-state .ce-icon{font-size:32px;margin-bottom:8px;display:block;
  animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#char-empty-state .ce-title{font-size:11px;font-weight:700;color:var(--text);margin-bottom:4px}
#char-empty-state .ce-sub{font-size:9px;color:var(--muted);line-height:1.5}

/* ── Hollywood Studio: Word count badge ── */
.char-word-count{font-size:7px;color:var(--muted);text-align:right;margin-top:2px;transition:.2s}
.char-word-count.good{color:var(--hyd-green)}
.char-word-count.over{color:var(--hyd-orange)}

/* ── Hollywood Studio: Glowing Generate All button ── */
#btn-gen-all{font-size:10px;padding:6px 14px;border-radius:16px;
  animation:gen-all-idle 3s ease-in-out infinite}
@keyframes gen-all-idle{
  0%,100%{border-color:color-mix(in srgb, var(--warning) 40%, transparent);box-shadow:0 0 0 color-mix(in srgb, var(--warning) 0%, transparent)}
  50%{border-color:color-mix(in srgb, var(--warning) 80%, transparent);box-shadow:0 0 16px color-mix(in srgb, var(--warning) 30%, transparent)}}
#btn-gen-all.running{animation:gen-all-running .6s ease-in-out infinite;background:color-mix(in srgb, var(--warning) 20%, transparent)!important}
@keyframes gen-all-running{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* ── Director's Suite Landing ── */
#landing-view{flex:1;overflow-y:auto;display:none;flex-direction:column;background:var(--bg-deep);
  animation:hy-fadein .4s ease}
#landing-view.active{display:flex}

/* Hero section */
#landing-hero{flex-shrink:0;padding:28px 32px 20px;
  background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%);
  position:relative;overflow:hidden}
#landing-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 0%,color-mix(in srgb, var(--purple) 12%, transparent),transparent);
  pointer-events:none}
#landing-eyebrow{font-size:8px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
#landing-title{font-family:"Orbitron",monospace;font-size:22px;font-weight:900;
  letter-spacing:.1em;color:transparent;
  background:linear-gradient(90deg,var(--hyd-accent),var(--hyd-cyan),var(--hyd-green));
  background-size:200% auto;
  animation:bannerflow 4s linear infinite;margin-bottom:4px}
#landing-sub{font-size:11px;color:var(--muted);margin-bottom:18px}

/* Stats bar */
#landing-stats{display:flex;gap:20px;margin-bottom:20px}
.ls-stat{display:flex;flex-direction:column;gap:2px}
.ls-num{font-family:"Orbitron",monospace;font-size:18px;font-weight:900;color:var(--text)}
.ls-lbl{font-size:7px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}

/* CTA buttons */
#landing-ctas{display:flex;gap:10px;margin-bottom:4px;flex-wrap:wrap}
.landing-cta{padding:10px 20px;border-radius:20px;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;font-family:inherit;transition:.2s;border:none}
.lc-primary{background:linear-gradient(135deg,var(--danger),color-mix(in srgb, var(--danger) 70%, #000));color:#fff;
  box-shadow:0 4px 20px rgba(255,56,96,.4)}
.lc-primary:hover{filter:brightness(1.15);transform:translateY(-1px)}
.lc-secondary{background:transparent;border:1px solid color-mix(in srgb, var(--warning) 40%, transparent);color:var(--hyd-orange)}
.lc-secondary:hover{background:color-mix(in srgb, var(--warning) 10%, transparent)}
.lc-outline{background:transparent;border:1px solid var(--border);color:var(--muted)}
.lc-outline:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan)}

/* Demo film card */
#landing-demo{flex-shrink:0;padding:0 32px 20px}
#demo-card{border-radius:14px;border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);
  background:color-mix(in srgb, var(--purple) 5%, transparent);overflow:hidden;
  display:grid;grid-template-columns:280px 1fr;gap:0;
  animation:demo-glow 4s ease-in-out infinite}
@keyframes demo-glow{
  0%,100%{box-shadow:0 0 0 color-mix(in srgb, var(--purple) 0%, transparent)}
  50%{box-shadow:0 0 32px color-mix(in srgb, var(--purple) 20%, transparent),0 0 60px color-mix(in srgb, var(--info) 8%, transparent)}}
#demo-video-col{position:relative;background:#000}
#demo-video{width:100%;aspect-ratio:16/9;object-fit:cover;display:none}
#demo-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:opacity .3s}
#demo-play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);cursor:pointer;transition:.2s}
#demo-play-overlay:hover{background:rgba(0,0,0,.2)}
.demo-play-btn{width:56px;height:56px;border-radius:50%;
  background:linear-gradient(135deg,var(--hyd-accent),color-mix(in srgb, var(--purple) 80%, #000));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;box-shadow:0 4px 20px color-mix(in srgb, var(--purple) 50%, transparent);transition:.2s;color:#fff;padding-left:4px}
#demo-play-overlay:hover .demo-play-btn{transform:scale(1.12);box-shadow:0 6px 28px color-mix(in srgb, var(--purple) 80%, transparent)}
#demo-fullscreen-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;
  border-radius:6px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:.15s;z-index:2}
#demo-fullscreen-btn:hover{background:color-mix(in srgb, var(--purple) 40%, transparent)}
.demo-badge{position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:12px;
  font-size:7px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--hyd-accent),var(--hyd-cyan));color:#000}
#demo-info-col{padding:20px 24px;display:flex;flex-direction:column;justify-content:space-between}
.demo-tag{display:inline-flex;padding:2px 8px;border-radius:8px;font-size:7px;font-weight:700;
  background:color-mix(in srgb, var(--purple) 15%, transparent);border:1px solid color-mix(in srgb, var(--purple) 25%, transparent);
  color:var(--hyd-accent);letter-spacing:.06em;text-transform:uppercase;margin-right:5px}
.demo-title{font-family:"Orbitron",monospace;font-size:13px;font-weight:900;
  letter-spacing:.1em;color:var(--text);margin:8px 0 4px;text-transform:uppercase}
.demo-sub{font-size:10px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.demo-meta{display:flex;gap:10px;font-size:8px;color:var(--muted);margin-bottom:16px;flex-wrap:wrap}
.demo-meta span{display:flex;align-items:center;gap:4px}
.demo-actions{display:flex;gap:8px}
.demo-load-btn{flex:1;padding:10px;border-radius:10px;border:none;cursor:pointer;
  font-family:inherit;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(135deg,var(--hyd-accent),color-mix(in srgb, var(--purple) 80%, #000));color:#fff;
  box-shadow:0 4px 16px color-mix(in srgb, var(--purple) 35%, transparent);transition:.2s}
.demo-load-btn:hover{filter:brightness(1.15);transform:translateY(-1px)}
.demo-preview-btn{padding:10px 14px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;font-size:10px;font-weight:700;
  font-family:inherit;transition:.2s}
.demo-preview-btn:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan)}

/* Recent projects section */
#landing-projects{flex:1;padding:0 32px 24px}
.lp-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.lp-title{font-size:9px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-family:"Orbitron",monospace}
.lp-divider{flex:1;height:1px;background:var(--border2)}
#landing-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.lp-card{border-radius:10px;border:1px solid var(--border2);background:rgba(0,0,0,.3);
  padding:12px;cursor:pointer;transition:.2s;position:relative}
.lp-card:hover{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 6%, transparent);
  transform:translateY(-2px)}
.lp-icon{font-size:20px;margin-bottom:6px}
.lp-title-text{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.lp-meta{font-size:8px;color:var(--muted)}
.lp-progress{margin-top:6px;height:2px;background:var(--border2);border-radius:1px;overflow:hidden}
.lp-progress-fill{height:100%;border-radius:1px;
  background:linear-gradient(90deg,var(--hyd-green),var(--hyd-cyan));transition:.3s}
.lp-timestamp{font-size:7px;color:var(--muted);opacity:.6;margin-top:4px}

/* Empty state for no projects */
#landing-empty{padding:24px;text-align:center;color:var(--muted);font-size:10px;line-height:1.7;
  border:1px dashed var(--border2);border-radius:10px;background:rgba(0,0,0,.2)}
#landing-empty .le-icon{font-size:28px;margin-bottom:8px;display:block;opacity:.5}

@media(max-width:900px){
  #demo-card{grid-template-columns:1fr}
  #demo-video-col{aspect-ratio:16/9}
  #landing-hero,#landing-demo,#landing-projects{padding-left:16px;padding-right:16px}
}

/* ── Phase 3: Film Mode chips ── */
.film-mode-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.film-chip{padding:8px 12px;border-radius:10px;border:1px solid var(--border);
  background:rgba(0,0,0,.3);cursor:pointer;font-family:inherit;font-size:10px;font-weight:700;
  color:var(--muted);transition:.2s;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:80px}
.film-chip .fc-icon{font-size:18px}
.film-chip .fc-label{font-size:8px;text-transform:uppercase;letter-spacing:.06em}
.film-chip:hover{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 8%, transparent)}
.film-chip.selected{border-color:var(--hyd-accent);background:color-mix(in srgb, var(--purple) 16%, transparent);color:var(--hyd-accent);box-shadow:0 0 12px color-mix(in srgb, var(--purple) 20%, transparent)}
#btn-commercial-template{width:100%;padding:10px;border-radius:10px;border:1px dashed color-mix(in srgb, var(--warning) 40%, transparent);
  background:color-mix(in srgb, var(--warning) 6%, transparent);color:var(--hyd-orange);font-family:inherit;font-size:10px;
  font-weight:700;cursor:pointer;transition:.15s;text-align:center;margin-top:10px}
#btn-commercial-template:hover{background:color-mix(in srgb, var(--warning) 12%, transparent);border-color:color-mix(in srgb, var(--warning) 70%, transparent)}

/* ── Phase 4: Shot language chips ── */
.shot-lang-toggle{width:100%;margin-top:6px;padding:5px 10px;border-radius:6px;
  border:1px solid var(--border2);background:rgba(0,0,0,.2);color:var(--muted);
  font-size:9px;font-weight:700;text-align:left;cursor:pointer;font-family:inherit;
  transition:.15s;display:flex;align-items:center;justify-content:space-between}
.shot-lang-toggle:hover{border-color:var(--hyd-accent);color:var(--hyd-accent)}
#shot-lang-arrow{font-size:11px;transition:transform .2s}
.shot-lang-toggle.open #shot-lang-arrow{transform:rotate(90deg)}
.shot-chip-section{margin-top:4px;padding-top:8px;border-top:1px solid var(--border2)}
.shot-row-label{font-size:7px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.shot-chip-row{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:6px}
.shot-chip{padding:2px 7px;border-radius:10px;font-size:7px;font-weight:700;cursor:pointer;
  border:1px solid var(--border2);background:rgba(0,0,0,.2);color:var(--muted);
  font-family:inherit;transition:.12s;user-select:none}
.shot-chip:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan);background:color-mix(in srgb, var(--info) 6%, transparent)}
.shot-chip.used{border-color:var(--hyd-accent);background:var(--purple-dim,color-mix(in srgb, var(--purple) 15%, transparent));color:var(--hyd-accent)}

/* ── Phase 4: Variations modal ── */
#var-modal{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:9200;
  display:none;align-items:center;justify-content:center;padding:20px}
#var-modal.open{display:flex;flex-direction:column}
#var-box{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;
  width:100%;max-width:860px;overflow:hidden}
#var-header{padding:12px 16px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:10px}
.var-title{font-family:"Orbitron",monospace;font-size:10px;font-weight:900;letter-spacing:.16em;
  color:var(--hyd-accent);text-transform:uppercase;flex:1}
#var-grid{display:flex;gap:12px;padding:16px;overflow-x:auto}
#var-loading{padding:40px;text-align:center;color:var(--muted);font-size:11px}
.var-card{flex-shrink:0;width:240px;border-radius:10px;border:1px solid var(--border);
  overflow:hidden;background:rgba(0,0,0,.4);cursor:pointer;transition:.15s}
.var-card:hover{border-color:var(--hyd-cyan);transform:translateY(-2px)}
.var-card video{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:#000}
.var-card-meta{padding:8px 10px;display:flex;align-items:center;gap:8px}
.var-dur{font-size:9px;color:var(--hyd-cyan);font-weight:700;flex:1}
.var-use{padding:5px 12px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;
  font-size:9px;font-weight:700;background:linear-gradient(135deg,var(--hyd-green),color-mix(in srgb, var(--accent) 80%, #008c52));
  color:#000;transition:.15s}
.var-use:hover{filter:brightness(1.15)}

/* ── Phase 5: Aspect ratio chips ── */
.ar-chip{padding:4px 10px;border-radius:12px;font-size:8px;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:rgba(0,0,0,.3);color:var(--muted);
  font-family:inherit;transition:.15s}
.ar-chip.selected{border-color:var(--hyd-green);background:var(--accent-dim,color-mix(in srgb, var(--accent) 10%, transparent));color:var(--hyd-green)}
.ar-chip:hover:not(.selected){border-color:var(--hyd-cyan);color:var(--hyd-cyan)}

/* ── Phase 6: Project grid cards ── */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding:12px}
.proj-card{border-radius:10px;border:1px solid var(--border2);background:rgba(0,0,0,.3);
  overflow:hidden;cursor:pointer;transition:.2s}
.proj-card:hover{border-color:var(--hyd-accent);transform:translateY(-2px);box-shadow:0 6px 24px color-mix(in srgb, var(--purple) 15%, transparent)}
.proj-card-header{height:64px;display:flex;align-items:center;justify-content:center;
  font-size:28px;background:linear-gradient(135deg,color-mix(in srgb, var(--purple) 10%, transparent),color-mix(in srgb, var(--info) 8%, transparent))}
.proj-card-body{padding:10px 12px}
.proj-card-title{font-size:11px;font-weight:700;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-bottom:4px}
.proj-card-stats{font-size:8px;color:var(--muted);margin-bottom:6px}
.proj-card-date{font-size:7px;color:var(--muted);opacity:.7}
.proj-card-actions{display:flex;gap:4px;padding:8px 10px;border-top:1px solid var(--border2);flex-wrap:wrap}
.proj-open-btn{flex:1;padding:5px;border-radius:6px;border:1px solid color-mix(in srgb, var(--purple) 30%, transparent);
  background:color-mix(in srgb, var(--purple) 8%, transparent);color:var(--hyd-accent);font-size:9px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:.15s;text-align:center}
.proj-open-btn:hover{background:color-mix(in srgb, var(--purple) 20%, transparent)}
.proj-action-btn{padding:4px 7px;border-radius:6px;font-size:8px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:.15s;border:1px solid var(--border2);
  background:transparent;color:var(--muted)}
.proj-action-btn:hover{border-color:var(--hyd-cyan);color:var(--hyd-cyan)}

/* Timeline coverage bars */
.tl-coverage{display:flex;gap:1px;margin-top:3px;height:3px}
.tl-cov-clip{flex:1;border-radius:1px;background:var(--hyd-cyan);opacity:.8}
.tl-cov-audio{flex:1;border-radius:1px;background:var(--hyd-green);opacity:.8}
.tl-cov-empty{flex:1;border-radius:1px;background:rgba(255,255,255,.08)}

/* Studio-first contract overrides — keep after legacy extracted rules. */
#hyd-banner h1,#landing-title{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:var(--hyd-accent);animation:hyd-title-cycle 6s ease-in-out infinite!important}
#ed-left-footer [data-state="saving"]{color:var(--hyd-status-saving)}
#ed-left-footer [data-state="saved"]{color:var(--hyd-status-saved)}
#ed-left-footer [data-state="error"]{color:var(--hyd-status-error)}
body[data-hyd-dirty="true"] #ed-left-footer::before{content:"●";color:var(--warning);margin-right:4px}
.mode-btn:focus-visible,.ctrl-btn:focus-visible,.model-chip:focus-visible,.wiz-next:focus-visible,.wiz-back:focus-visible{outline:2px solid var(--border-focus,var(--accent));outline-offset:2px}
@media(max-width:700px){#hyd-banner{align-items:flex-start;padding:8px max(12px,env(safe-area-inset-left)) 8px}#hyd-banner h1{font-size:10px;min-height:28px;display:flex;align-items:center}#banner-mode-btns{flex-wrap:wrap;justify-content:flex-end}.mode-btn,.ctrl-btn,.model-chip{min-height:44px;touch-action:manipulation}#ed-left-footer{min-height:30px;padding-bottom:calc(5px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#hyd-banner h1,#landing-title{animation:none!important}}

/* ── Desktop studio hierarchy (701px+) ──────────────────────────────────────
   Keep this layer after the extracted legacy rules so the desktop shell has a
   deliberate editorial hierarchy without affecting the mobile composer. */
@media (min-width:701px) {
  :root {
    --hyd-desktop-gutter: clamp(20px, 3vw, 52px);
    --hyd-scene-rail: clamp(248px, 20vw, 304px);
    --hyd-ai-rail: clamp(292px, 24vw, 360px);
    --hyd-timeline-height: 104px;
  }

  body.glass-page {
    min-width: 0;
  }

  #hyd-banner {
    min-height: 54px;
    padding-inline: var(--hyd-desktop-gutter);
    gap: 14px;
    border-bottom-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  }

  #hyd-banner h1 {
    flex: 0 0 auto;
    font-size: 14px;
    letter-spacing: .2em;
  }

  #banner-mode-btns {
    min-width: 0;
    gap: 7px;
  }

  .mode-btn {
    min-height: 32px;
    padding: 7px 11px;
  }

  #landing-view {
    display: none;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    column-gap: clamp(18px, 2.4vw, 40px);
    row-gap: 0;
    overflow: auto;
    padding: clamp(24px, 4vh, 48px) var(--hyd-desktop-gutter) 32px;
  }

  #landing-view.active {
    display: grid;
  }

  #landing-hero,
  #landing-demo,
  #landing-projects {
    padding: 0 !important;
  }

  #landing-hero {
    align-self: center;
    min-width: 0;
    background: none;
  }

  #landing-title {
    max-width: 16ch;
    font-size: clamp(26px, 3.1vw, 48px);
    line-height: 1.08;
    letter-spacing: .055em;
    margin-bottom: 12px;
  }

  #landing-sub {
    max-width: 58ch;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 24px;
  }

  #landing-stats {
    gap: clamp(18px, 2.4vw, 32px);
    margin-bottom: 26px;
  }

  .ls-num {
    font-size: clamp(22px, 2vw, 30px);
  }

  #landing-ctas {
    gap: 9px;
  }

  .landing-cta {
    min-height: 40px;
    padding: 11px 16px;
  }

  #landing-demo {
    min-width: 0;
    align-self: stretch;
  }

  #demo-card {
    height: 100%;
    min-height: 300px;
    grid-template-columns: minmax(248px, 41%) minmax(0, 1fr);
    border-radius: var(--radius-xl, 20px);
    background: color-mix(in srgb, var(--bg-card) 90%, transparent);
  }

  #demo-video-col,
  #demo-thumb,
  #demo-video {
    min-height: 100%;
    aspect-ratio: auto;
  }

  #demo-thumb,
  #demo-video {
    object-fit: cover;
  }

  #demo-info-col {
    padding: clamp(22px, 2.5vw, 34px);
    gap: 18px;
  }

  .demo-title {
    font-size: clamp(14px, 1.5vw, 20px);
    line-height: 1.3;
  }

  .demo-sub {
    font-size: 11px;
    line-height: 1.7;
  }

  .demo-actions {
    margin-top: auto;
  }

  #landing-projects {
    grid-column: 1 / -1;
    margin-top: clamp(28px, 5vh, 52px);
  }

  #landing-proj-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
  }

  .lp-card {
    min-height: 136px;
    padding: 16px;
    border-radius: var(--radius-lg, 14px);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
  }

  #wizard-view {
    padding: clamp(24px, 4vh, 52px) var(--hyd-desktop-gutter);
  }

  .wiz-center {
    max-width: 760px;
    padding: clamp(22px, 3vw, 40px);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl, 20px);
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: 0 20px 60px color-mix(in srgb, var(--bg-deep) 68%, transparent);
  }

  #editor-view.active {
    grid-template-columns: var(--hyd-scene-rail) minmax(420px, 1fr) var(--hyd-ai-rail) !important;
    grid-template-rows: minmax(0, 1fr) var(--hyd-timeline-height);
  }

  #ed-left,
  #ed-right {
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  }

  #ed-left {
    border-right-color: var(--border2);
  }

  #ed-right {
    border-left-color: var(--border2);
  }

  #ed-left-tabs {
    min-height: 44px;
    padding-inline: 8px;
  }

  .ed-left-tab {
    padding: 12px 8px 10px;
    font-size: 9px;
  }

  #scene-list {
    padding: 10px;
    gap: 7px;
  }

  .scene-row {
    min-height: 60px;
    padding: 9px;
    gap: 8px;
    border-radius: 10px;
  }

  .scene-thumb {
    width: 60px;
    height: 40px;
    border-radius: 6px;
  }

  .scene-label {
    font-size: 10px;
    max-width: 24ch;
  }

  .scene-voice {
    max-width: 22ch;
  }

  #ed-center {
    min-width: 0;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--purple) 4%, transparent), transparent 28%),
      var(--bg-deep);
  }

  #preview-area {
    flex: 0 1 58%;
    min-height: min(360px, 46vh);
    padding: clamp(14px, 2vw, 28px);
    background:
      radial-gradient(ellipse at top, color-mix(in srgb, var(--info) 7%, transparent), transparent 58%),
      var(--bg-deep);
  }

  #preview-video {
    width: auto;
    max-width: min(100%, 1080px);
    max-height: min(48vh, 620px);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 18px 50px color-mix(in srgb, var(--bg-deep) 75%, transparent);
  }

  #preview-placeholder {
    min-width: min(100%, 440px);
    min-height: 180px;
    padding: 28px;
    font-size: 12px;
  }

  #ctrl-scene-header {
    padding: 13px clamp(18px, 2vw, 28px);
  }

  #ctrl-tab-bar {
    padding-inline: clamp(12px, 1.6vw, 22px);
  }

  .ctrl-tab {
    max-width: 150px;
    padding: 12px 10px 10px;
  }

  .ctrl-tab-panel {
    width: min(100%, 960px);
    align-self: center;
    padding: clamp(18px, 2vw, 30px);
  }

  .ctrl-prompt {
    min-height: 132px;
    max-height: 260px;
  }

  #ai-header {
    min-height: 48px;
    padding: 14px 16px;
  }

  #ai-chat {
    padding: 14px;
    gap: 10px;
  }

  .ai-msg {
    padding: 11px 12px;
    font-size: 11px;
    line-height: 1.6;
  }

  #ai-input-row {
    padding: 12px;
  }

  #ai-input {
    min-height: 38px;
    padding-inline: 12px;
  }

  #ai-send {
    width: 38px;
    height: 38px;
  }

  #timeline-strip {
    min-height: var(--hyd-timeline-height);
    padding: 0 18px 0 14px;
    background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  }

  #tl-blocks {
    gap: 6px;
    padding-block: 14px;
  }

  .tl-block {
    min-width: clamp(74px, 7vw, 112px);
    height: 74px;
    padding: 7px 7px 8px;
    border-radius: 9px;
  }

  .tl-label {
    font-size: 8px;
  }

  .tl-scene-num {
    font-size: 10px;
  }

  :is(button, input, textarea, select, [role="button"]):focus-visible {
    outline: 2px solid var(--border-focus, var(--accent));
    outline-offset: 3px;
  }
}