:root{--bg:#08111f;--panel:#101a2d;--panel2:#0d1628;--line:#26354f;--text:#f8fafc;--muted:#9fb0ca;--ac:#5b7cfa;--ok:#22c55e;--bad:#ef4444;--gold:#fbbf24;font-family:Inter,system-ui,-apple-system,Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top left,#172554 0,#08111f 34%,#050816 100%);color:var(--text)}a{color:inherit}.wrap{max-width:1220px;margin:0 auto;padding:22px 16px 60px}.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.brand{display:flex;align-items:center;gap:12px}.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#2563eb,#7c3aed);display:grid;place-items:center;font-weight:900;box-shadow:0 18px 50px rgba(37,99,235,.35)}h1{font-size:24px;margin:0}.sub{color:var(--muted);font-size:13px;margin-top:4px}.nav{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:14px;background:#1e293b;color:#fff;padding:11px 15px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px}.btn.primary{background:linear-gradient(135deg,#2563eb,#7c3aed)}.btn.gold{background:linear-gradient(135deg,#b45309,#f59e0b)}.btn.ok{background:linear-gradient(135deg,#16a34a,#22c55e)}.btn:disabled{opacity:.5;cursor:not-allowed}.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;align-items:stretch}.card{background:linear-gradient(180deg,rgba(16,26,45,.93),rgba(8,17,31,.93));border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.35)}.bigtitle{font-size:34px;line-height:1.05;margin:0 0 10px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.choice{background:#0b1220;border:1px solid #24324a;border-radius:18px;padding:14px;text-align:left;cursor:pointer;color:#dbeafe;min-height:110px}.choice:hover,.choice.active{border-color:#60a5fa;background:#111c32}.choice b{display:block;font-size:15px;margin-bottom:7px}.choice span{font-size:12px;color:#a8b5cd;line-height:1.35}.steps{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0}.step{font-size:12px;color:#91a1bc;background:#0b1220;border:1px solid #24324a;border-radius:999px;padding:7px 10px}.step.active{color:#fff;border-color:#60a5fa;background:#14213a}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.full{grid-column:1/-1}label{display:block;color:#aebbd2;font-size:12px;font-weight:700;margin-bottom:6px}textarea,input,select{width:100%;background:#091223;color:#f8fafc;border:1px solid #2c3c59;border-radius:14px;padding:12px;font:14px system-ui;outline:none}textarea{min-height:140px;resize:vertical}input[type=color]{height:44px;padding:3px}.hint{font-size:12px;color:#8ba0bd;line-height:1.45;margin-top:7px}.previewBox{display:flex;flex-direction:column;gap:12px}.canvasWrap{background:#050816;border:1px solid #27364f;border-radius:22px;padding:14px;display:grid;place-items:center;min-height:440px;position:relative}canvas{max-width:100%;height:auto;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5)}.variants{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.variant{padding:12px;border:1px solid #334155;border-radius:16px;background:#0a1324;cursor:pointer;min-height:86px}.variant.active{border-color:#fbbf24;box-shadow:0 0 0 2px rgba(251,191,36,.12)}.variant b{display:block;font-size:14px;direction:rtl}.variant p{margin:5px 0 0;color:#cbd5e1;font-size:12px;direction:rtl}.status{min-height:22px;color:#cbd5e1;font-size:13px}.bad{color:#fca5a5}.oktxt{color:#86efac}.audioBar{display:none;background:#091223;border:1px solid #2d3c58;border-radius:16px;padding:12px;gap:10px;align-items:center}.audioBar.show{display:flex}.audioBar audio{width:100%}.presetRow{display:flex;gap:8px;flex-wrap:wrap}.chip{background:#0b1220;border:1px solid #2b3a55;border-radius:999px;color:#dbeafe;padding:8px 11px;font-size:12px;cursor:pointer}.chip.active{background:#1d4ed8;border-color:#60a5fa}.drawer{margin-top:14px;border-top:1px solid #26354f;padding-top:14px}.kbd{font-family:ui-monospace,Menlo,Consolas,monospace;background:#020617;border:1px solid #334155;border-radius:8px;padding:2px 5px}.checks{display:grid;gap:7px;margin-top:10px}.check{font-size:13px;color:#cbd5e1}.check:before{content:'✓';color:#22c55e;font-weight:900;margin-right:8px}.mobileOnly{display:none}@media(max-width:920px){.hero{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}.formgrid{grid-template-columns:1fr}.top{align-items:flex-start;flex-direction:column}.bigtitle{font-size:28px}}@media(max-width:560px){.grid4,.variants{grid-template-columns:1fr}.wrap{padding:14px 10px}.card{border-radius:18px;padding:14px}.btn{width:100%;justify-content:center}.nav{width:100%}.canvasWrap{min-height:300px}}

/* AI Wizard 2.0 additions */
.pro-wrap{max-width:1480px}.wizard-grid{display:grid;grid-template-columns:minmax(420px,1fr) minmax(460px,.95fr);gap:22px;align-items:start}.quick-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}.big-action{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#fff;border-radius:16px;padding:13px 8px;font-weight:800;cursor:pointer}.big-action.active,.big-action:hover{background:linear-gradient(135deg,#2563eb,#7c3aed);border-color:rgba(255,255,255,.35)}.toolbox{margin-top:14px;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px;background:rgba(255,255,255,.035)}.toolbox summary{font-weight:800;cursor:pointer}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.template-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.tpl-card{min-height:82px;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;cursor:pointer;background:linear-gradient(135deg,#111827,#1d4ed8);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.tpl-card b{display:block;color:#fff;font-size:13px}.tpl-card span{display:block;color:rgba(255,255,255,.7);font-size:11px;margin-top:6px}.tpl-card.active{outline:3px solid #f59e0b}.preview-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.score-card{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;padding:12px;border-radius:16px;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.24)}.score-card b{display:block}.score-card span{font-size:12px;color:rgba(255,255,255,.72)}.subedit,.watermark-box{margin-top:12px}.subedit label,.watermark-box label{display:block;font-weight:800;margin-bottom:7px}.subedit textarea{width:100%;min-height:92px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.86);color:#fff;padding:10px;box-sizing:border-box}.subtools,.export-row,.watermark-box{display:flex;gap:9px;flex-wrap:wrap}.subtools select,.watermark-box input{flex:1;min-width:180px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.86);color:#fff;padding:10px}.checklist{margin-top:10px;display:grid;gap:8px}.checkitem{padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.055);font-size:13px}.checkitem.ok{border-left:4px solid #22c55e}.checkitem.warn{border-left:4px solid #f59e0b}.checkitem.bad{border-left:4px solid #ef4444}.variant p{margin:.25rem 0 0;color:rgba(255,255,255,.68);font-size:12px}.audioBar.show{display:block}.status .bad{color:#fecaca}.status .oktxt{color:#bbf7d0}@media(max-width:1050px){.wizard-grid{grid-template-columns:1fr}.quick-actions,.tool-grid,.template-gallery{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.quick-actions,.tool-grid,.template-gallery{grid-template-columns:1fr}}

/* Simple Mode complete refresh */
.quick-start-card{margin-bottom:18px;padding:20px 20px 18px}.quick-start-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.quick-start-head h2{margin:0 0 5px;font-size:22px}.quick-start-head p{margin:0;color:var(--muted);font-size:13px}.quick-main-actions{display:flex;gap:10px;flex-wrap:wrap}.simple-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.simple-step-card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:14px}.simple-step-card span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,#2563eb,#7c3aed);font-weight:900;margin-bottom:10px}.simple-step-card b{display:block;margin-bottom:5px}.simple-step-card small{display:block;color:var(--muted);line-height:1.45}.mini-section{margin-top:16px;padding:14px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}.mini-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.mini-head h3{margin:0;font-size:17px}.mini-head small{display:block;color:var(--muted);max-width:360px;line-height:1.45}.single-line-grid{margin-top:12px}.single-line-grid.two-buttons{grid-template-columns:repeat(2,1fr)}.range-wrap input[type=range]{width:100%;padding:0;background:transparent;border:0}.grow{flex:1;min-width:220px}.preview-toolbar{display:flex;gap:9px;flex-wrap:wrap}.preview-tips{font-size:12px;color:#aab8cf;line-height:1.5;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
@media(max-width:1050px){.simple-steps-grid{grid-template-columns:1fr}.quick-start-head{flex-direction:column}.quick-main-actions{width:100%}.quick-main-actions .btn{flex:1}}
@media(max-width:620px){.single-line-grid.two-buttons{grid-template-columns:1fr}}

/* Simple Mode dynamic TTS provider fields */
.simple-tts-provider-section{display:none;grid-column:1/-1}.provider-box{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);border-radius:18px;padding:14px;margin:4px 0 8px}.provider-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px}.provider-title b{font-size:15px}.provider-title span{color:var(--muted);font-size:12px;line-height:1.45;max-width:420px}.provider-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.provider-actions{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}.provider-actions small{color:var(--muted);font-size:12px}@media(max-width:760px){.provider-title{flex-direction:column}.provider-grid{grid-template-columns:1fr}}

/* Robust Simple Mode TTS provider visibility */
.simple-tts-provider-section.active{display:block!important;visibility:visible!important;opacity:1!important;min-height:1px}.simple-tts-provider-section[data-simple-tts="elevenlabs"].active .provider-box{display:block!important}


/* Simple media / image tools */
.inline-input{display:flex;gap:10px;align-items:center}.inline-input input{flex:1}
.bg-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:14px}
.bg-thumb{position:relative;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:16px;overflow:hidden;padding:8px;cursor:pointer}
.bg-thumb.active{outline:3px solid #60a5fa}
.bg-thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px}
.bg-thumb b{display:block;font-size:11px;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bg-thumb .thumb-actions{display:flex;gap:6px;margin-top:7px}
.bg-thumb .thumb-actions button{flex:1;border:0;border-radius:10px;padding:6px 8px;background:#1e293b;color:#fff;font-size:11px;font-weight:800;cursor:pointer}
.bg-empty{padding:16px;border:1px dashed rgba(255,255,255,.16);border-radius:16px;color:var(--muted);font-size:13px;text-align:center;background:rgba(255,255,255,.025)}
.provider-grid .full-span{grid-column:1/-1}
@media(max-width:760px){.inline-input{flex-direction:column;align-items:stretch}}

.thumb-meta{display:grid;gap:8px;margin-top:8px}.thumb-meta input,.thumb-meta select{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.86);color:#fff;padding:8px 10px;box-sizing:border-box;font-size:12px}.thumb-role-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}


/* Full-width responsive Simple Mode upgrade */
html,body{width:100%;overflow-x:hidden}
body{min-height:100vh}
.wrap,.pro-wrap{width:100%;max-width:none;margin:0;padding:20px 20px 56px}
.pro-wrap{padding-left:20px;padding-right:20px}
.top,.quick-start-card,.wizard-grid{width:100%}
.wizard-grid{grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);gap:20px}
.wizard-card,.previewBox{min-width:0}
.previewBox{position:sticky;top:16px}
.canvasWrap{width:100%;min-height:520px;padding:16px}
.canvasWrap canvas{width:100%;max-width:min(100%,880px)}
.formgrid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.formgrid > div{grid-column:span 6;min-width:0}.formgrid > .full,.formgrid > .simple-tts-provider-section,.formgrid > .range-wrap{grid-column:1/-1}
.provider-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}.provider-grid>div{grid-column:span 6;min-width:0}.provider-grid>.full-span{grid-column:1/-1}
.quick-main-actions .btn{min-height:46px}
.preview-toolbar .btn,.export-row .btn,.subtools .btn,.tool-grid .btn{min-height:46px}
.variants{grid-template-columns:repeat(2,minmax(0,1fr))}
.bg-gallery{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.bg-thumb{padding:10px}.bg-thumb img{aspect-ratio:4/3}
.watermark-box>.grow{min-width:260px}
.simple-steps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.template-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.quick-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.single-line-grid.two-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}
input,select,textarea,.btn{font-size:14px}

/* Large laptops */
@media (max-width:1280px){
  .wrap,.pro-wrap{padding:18px 16px 52px}
  .wizard-grid{grid-template-columns:minmax(0,1fr) minmax(360px,.92fr)}
  .template-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Tablet */
@media (max-width:1100px){
  .wizard-grid{grid-template-columns:1fr}
  .previewBox{position:relative;top:auto}
  .canvasWrap{min-height:440px}
  .quick-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
  .template-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Small tablets / large phones */
@media (max-width:820px){
  .wrap,.pro-wrap{padding:14px 12px 42px}
  .top{flex-direction:column;align-items:flex-start}
  .brand{align-items:flex-start}.nav{width:100%}.nav .btn{flex:1;justify-content:center}
  .quick-start-head{flex-direction:column}
  .quick-main-actions{width:100%}.quick-main-actions .btn{flex:1 1 calc(50% - 10px)}
  .simple-steps-grid{grid-template-columns:1fr}
  .quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formgrid > div,.provider-grid > div{grid-column:1/-1}
  .variants{grid-template-columns:1fr}
  .canvasWrap{min-height:360px;padding:12px}
}

/* Phones */
@media (max-width:560px){
  .wrap,.pro-wrap{padding:12px 10px 34px}
  .card,.quick-start-card,.mini-section{padding:12px;border-radius:18px}
  h1{font-size:20px}.sub{font-size:12px}
  .preview-head,.score-card,.watermark-box{flex-direction:column;align-items:stretch}
  .btn{width:100%;justify-content:center;padding:12px 14px;border-radius:12px}
  .quick-actions,.tool-grid,.template-gallery,.single-line-grid.two-buttons{grid-template-columns:1fr}
  .quick-main-actions .btn{flex:1 1 100%}
  .canvasWrap{min-height:280px;padding:10px;border-radius:18px}
  .bg-gallery{grid-template-columns:1fr 1fr;gap:10px}
  .preview-toolbar,.export-row,.subtools{display:grid;grid-template-columns:1fr;gap:8px}
}


.image-control-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}.img-control{padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09)}.img-control label{margin-bottom:8px}.img-control input[type=range]{width:100%;padding:0;background:transparent;border:0}.bg-thumb{cursor:default}.bg-thumb .thumb-meta input,.bg-thumb .thumb-meta select,.bg-thumb .thumb-meta button{position:relative;z-index:2}
@media(max-width:980px){.image-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.image-control-grid{grid-template-columns:1fr}}


/* Pro image tools */
.image-tabs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.img-tab{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:#fff;padding:10px 14px;border-radius:12px;font-weight:800;cursor:pointer}.img-tab.active{background:#2563eb;border-color:#60a5fa}.img-tab span{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.14);font-size:12px}.image-panel{display:none}.image-panel.active{display:block}.bg-gallery{margin-top:14px}.bg-thumb{position:relative}.bg-thumb.dragging{opacity:.45;transform:scale(.98)}.bg-thumb .order-badge{position:absolute;top:8px;left:8px;z-index:3;background:rgba(15,23,42,.88);color:#fff;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:900}.drag-handle{position:absolute;top:8px;right:8px;z-index:3;background:rgba(15,23,42,.88);color:#fff;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:900;cursor:grab}.thumb-meta{display:grid;gap:8px;margin-top:8px}.thumb-role-row,.thumb-scenes-row,.thumb-range-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.thumb-range-row.three{grid-template-columns:1fr 1fr 1fr}.thumb-meta small{display:block;color:#94a3b8;font-size:11px;margin-bottom:4px}.thumb-meta input,.thumb-meta select{width:100%;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.86);color:#fff;padding:8px 10px;box-sizing:border-box;font-size:12px}.thumb-meta input[type=range]{padding:0;border:0;background:transparent}.thumb-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.thumb-actions button{flex:none}.drop-target{outline:2px dashed #60a5fa;outline-offset:3px}.empty-role{padding:18px;border:1px dashed rgba(255,255,255,.16);border-radius:16px;color:var(--muted);font-size:13px;text-align:center;background:rgba(255,255,255,.025)}
@media(max-width:820px){.thumb-range-row.three{grid-template-columns:1fr}.thumb-role-row,.thumb-scenes-row{grid-template-columns:1fr}.thumb-actions{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.image-tabs{display:grid;grid-template-columns:1fr 1fr}.thumb-actions{grid-template-columns:1fr}.drag-handle{font-size:11px}}


/* Image role / per-image property refinement */
.thumb-range-row.four{grid-template-columns:1fr 1fr 1fr 1fr}
.thumb-meta .mini-note{color:#94a3b8;font-size:11px;margin-top:-3px}
@media(max-width:980px){.thumb-range-row.four{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.thumb-range-row.four{grid-template-columns:1fr}}


.scene-preview-wrap{margin-top:16px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03)}
.scene-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.scene-thumb{border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#0b1220;overflow:hidden;cursor:pointer}
.scene-thumb.active{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.15)}
.scene-thumb .thumb-shot{position:relative;aspect-ratio:16/9;background:#111827 center/cover no-repeat}
.scene-thumb .thumb-shot:after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(2,6,23,.7),rgba(2,6,23,.05))}
.scene-thumb .scene-num{position:absolute;top:8px;left:8px;z-index:2;background:rgba(15,23,42,.86);padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}
.scene-thumb .scene-role{position:absolute;right:8px;bottom:8px;z-index:2;background:rgba(15,23,42,.86);padding:4px 8px;border-radius:999px;font-size:10px;font-weight:800}
.scene-thumb .scene-meta{padding:10px}.scene-thumb .scene-meta b{display:block;font-size:12px;margin-bottom:4px}.scene-thumb .scene-meta span{display:block;color:#94a3b8;font-size:11px;line-height:1.35}
.canvasWrap.dragging-featured{outline:2px dashed #60a5fa;outline-offset:2px}
.thumb-actions{grid-template-columns:repeat(5,1fr)}
@media(max-width:980px){.thumb-actions{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.scene-thumbs{grid-template-columns:1fr 1fr}}


/* Next image tools */
.timeline-help{color:#94a3b8;font-size:12px;margin:6px 0 12px}
.scene-timeline{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.timeline-slot{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);border-radius:16px;padding:12px;display:grid;gap:8px;cursor:pointer}
.timeline-slot.active{border-color:#60a5fa;box-shadow:0 0 0 2px rgba(96,165,250,.16)}
.timeline-slot .slot-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800}
.timeline-slot .slot-lock{font-size:11px;padding:3px 8px;border-radius:999px;background:rgba(59,130,246,.18);border:1px solid rgba(96,165,250,.35)}
.timeline-slot .slot-rows{display:grid;gap:6px}
.timeline-slot .slot-role{font-size:11px;color:#cbd5e1;background:rgba(2,6,23,.45);border-radius:10px;padding:7px 8px}
.timeline-slot .slot-role b{display:inline-block;min-width:58px;color:#fff}
.timeline-slot .slot-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.timeline-slot button{min-height:36px}
.crop-modal{position:fixed;inset:0;z-index:1200;background:rgba(2,6,23,.72);display:flex;align-items:center;justify-content:center;padding:20px}
.crop-modal[hidden]{display:none}
.crop-dialog{width:min(980px,100%);max-height:92vh;overflow:auto;border-radius:20px;border:1px solid rgba(255,255,255,.12);background:#07111f;padding:18px}
.crop-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}
.crop-body{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,420px);gap:16px}
.crop-preview-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;min-height:340px;display:flex;align-items:center;justify-content:center}
.crop-preview{width:min(100%,430px);aspect-ratio:1/1;border-radius:20px;background:#111827 center/cover no-repeat;position:relative;overflow:hidden}
.crop-preview:after{content:'';position:absolute;inset:0;border:2px dashed rgba(255,255,255,.45);border-radius:20px;pointer-events:none}
.crop-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crop-controls>div{padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.crop-controls input[type=range]{width:100%;padding:0;border:0;background:transparent}
.crop-actions{margin-top:14px;display:flex;justify-content:flex-end}
.canvas-hint{position:absolute;right:12px;bottom:12px;padding:8px 10px;border-radius:12px;background:rgba(15,23,42,.85);font-size:11px;color:#e2e8f0;border:1px solid rgba(255,255,255,.08);opacity:0;transition:opacity .25s;pointer-events:none;z-index:5}.canvasWrap:hover .canvas-hint{opacity:1}
@media(max-width:920px){.crop-body{grid-template-columns:1fr}.crop-controls{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.crop-controls{grid-template-columns:1fr}.scene-timeline{grid-template-columns:1fr}.crop-modal{padding:10px}}


/* Save / upload / examples */
.project-hub-card{margin-top:18px}
.project-hub-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.project-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.project-save-note{margin-top:10px;color:#94a3b8;font-size:13px}
.example-projects-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-top:16px;flex-wrap:wrap}
.example-projects{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:12px}
.example-card{display:grid;gap:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:18px;padding:12px;cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow}
.example-card:hover{transform:translateY(-2px);border-color:#60a5fa;box-shadow:0 10px 24px rgba(0,0,0,.22)}
.example-preview{aspect-ratio:16/10;border-radius:14px;background:#0f172a center/cover no-repeat;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
/* Lighter gradient so the real preview underneath still reads cleanly.
   Just enough darkening at the top so the badge has contrast. */
.example-preview:after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(2,6,23,.45) 0%,rgba(2,6,23,0) 35%);pointer-events:none}
.example-badge{position:absolute;left:10px;top:10px;z-index:2;padding:4px 9px;border-radius:999px;background:rgba(15,23,42,.92);color:#f59e0b;font-size:10px;font-weight:800;letter-spacing:.04em;border:1px solid rgba(245,158,11,.35)}
.example-meta b{display:block;font-size:14px;margin-bottom:4px}
.example-meta p{margin:0;color:#94a3b8;font-size:12px;line-height:1.5}
.example-tags{display:flex;gap:6px;flex-wrap:wrap}.example-tags span{padding:5px 8px;border-radius:999px;background:rgba(37,99,235,.14);border:1px solid rgba(96,165,250,.2);font-size:11px}

/* Examples — filter chips bar above the grid */
.example-filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);border-radius:14px}
.example-filter{appearance:none;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.78);padding:6px 11px;font-size:12px;font-weight:600;border-radius:999px;cursor:pointer;transition:.15s background,.15s border-color,.15s color,.15s transform;white-space:nowrap}
.example-filter:hover{border-color:rgba(245,158,11,.45);color:#fff;transform:translateY(-1px)}
.example-filter.active{background:linear-gradient(180deg,rgba(245,158,11,.22),rgba(245,158,11,.10));border-color:#f59e0b;color:#fff;box-shadow:0 4px 12px rgba(245,158,11,.18)}

/* Examples — empty state when filter has no matches */
.example-empty{grid-column:1/-1;padding:32px 20px;text-align:center;color:rgba(255,255,255,.65);border:1px dashed rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.02);font-size:13px}
.example-empty a{color:#f59e0b;text-decoration:underline;font-weight:600;margin-left:4px}

@media(max-width:1100px){.example-projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.project-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.example-projects{grid-template-columns:1fr}.project-hub-head{align-items:stretch}.example-filters{padding:6px 8px}.example-filter{padding:5px 9px;font-size:11px}}


/* Templates / recent / tutorial / tooltips */
.project-library-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.project-library-card{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);border-radius:18px;padding:14px}
.library-list{display:grid;gap:10px;margin-top:10px}
.library-item{display:grid;gap:8px;border:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.72);border-radius:16px;padding:12px}
.library-item b{display:block;font-size:14px}.library-item small{display:block;color:#94a3b8;line-height:1.5}
.library-tags{display:flex;gap:6px;flex-wrap:wrap}.library-tags span{padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.06);font-size:11px;color:#cbd5e1}
.library-actions{display:flex;gap:8px;flex-wrap:wrap}.library-actions .btn{min-height:34px;padding:8px 12px;font-size:12px}
.library-empty{padding:18px;border-radius:14px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);color:#94a3b8;font-size:13px;text-align:center}
.tour-modal{position:fixed;inset:0;z-index:1300;background:rgba(2,6,23,.76);display:flex;align-items:center;justify-content:center;padding:16px}.tour-modal[hidden]{display:none}
.tour-dialog{width:min(920px,100%);border-radius:24px;border:1px solid rgba(255,255,255,.12);background:#07111f;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.tour-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.tour-head h3{margin:0}.tour-head p{margin:4px 0 0;color:#94a3b8}
.tour-progress{display:flex;gap:8px;margin:14px 0}.tour-progress span{height:8px;flex:1;border-radius:999px;background:rgba(255,255,255,.08)}.tour-progress span.active{background:linear-gradient(90deg,#2563eb,#7c3aed)}
.tour-card{display:grid;grid-template-columns:minmax(280px,.9fr) minmax(280px,1.1fr);gap:16px}
.tour-visual{min-height:280px;border-radius:20px;background:linear-gradient(135deg,#1d4ed8,#7c3aed);position:relative;overflow:hidden;padding:20px}.tour-visual .tour-chip{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.18);font-size:12px;font-weight:800}.tour-visual .tour-preview-box{position:absolute;left:20px;right:20px;bottom:20px;top:70px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18)}
.tour-points{display:grid;gap:10px}.tour-point{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}.tour-point b{display:block;margin-bottom:4px}.tour-point span{color:#cbd5e1;font-size:13px}
.tour-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;flex-wrap:wrap}
.tip-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border-radius:999px;background:rgba(37,99,235,.18);color:#93c5fd;font-size:11px;font-weight:800;cursor:help;vertical-align:middle}
[data-tip-target]{position:relative}
[data-tip-target]:hover .tip-icon{background:rgba(245,158,11,.18);color:#fcd34d}
@media(max-width:980px){.project-library-grid,.tour-card{grid-template-columns:1fr}}
@media(max-width:640px){.project-actions{grid-template-columns:1fr 1fr}.tour-actions{justify-content:stretch}.tour-actions .btn{flex:1}}


/* Simple Mode v2 layout: tabs, drawer, beginner/pro, compact cards */
.autosave-pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);background:rgba(34,197,94,.12);color:#bbf7d0;border-radius:999px;padding:10px 12px;font-size:12px;font-weight:800;min-height:38px}
.autosave-pill.saving{background:rgba(245,158,11,.14);color:#fde68a}.autosave-pill.error{background:rgba(239,68,68,.14);color:#fecaca}
.simple-workspace-head{position:sticky;top:0;z-index:25;background:linear-gradient(180deg,rgba(7,17,31,.98),rgba(7,17,31,.88));backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:12px;margin:16px 0;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.simple-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.simple-tab{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#cbd5e1;border-radius:14px;padding:12px 10px;font-weight:900;cursor:pointer}.simple-tab.active,.simple-tab:hover{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-color:rgba(255,255,255,.3)}.tab-help{color:#94a3b8;font-size:12px;margin-top:8px;text-align:center}
.simple-tabs-enabled .wizard-card>.mini-section{display:none}.simple-tabs-enabled .wizard-card>.mini-section.active-step{display:block}.simple-tabs-enabled .steps{display:none}.simple-tabs-enabled .quick-actions{margin-bottom:12px}
.project-hub-card{position:fixed!important;z-index:1100;top:0;left:0;width:min(980px,96vw);height:100vh;overflow:auto;transform:translateX(-105%);transition:transform .22s ease;margin:0!important;border-radius:0 24px 24px 0!important;box-shadow:24px 0 60px rgba(0,0,0,.45)}
.project-hub-card.open{transform:translateX(0)}.drawer-backdrop{position:fixed;inset:0;z-index:1090;background:rgba(2,6,23,.62);display:none}.drawer-backdrop.show{display:block}.drawer-close{position:sticky;top:0;float:right;z-index:2;border:0;background:#ef4444;color:#fff;border-radius:999px;width:36px;height:36px;font-weight:900;cursor:pointer}
body.beginner-mode .image-control-grid,body.beginner-mode .scene-preview-wrap,body.beginner-mode .timeline-help,body.beginner-mode .crop-modal,body.beginner-mode .thumb-range-row,body.beginner-mode .thumb-meta .mini-note{display:none!important}
body.beginner-mode .thumb-actions{grid-template-columns:repeat(3,1fr)}body.beginner-mode .thumb-actions [data-act="match"],body.beginner-mode .thumb-actions [data-act="reset"]{display:none!important}
body.beginner-mode .bg-gallery{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.bg-thumb img{aspect-ratio:16/10}.bg-thumb{min-width:0}.bg-thumb .thumb-meta{gap:7px}.bg-thumb .thumb-role-row,.bg-thumb .thumb-scenes-row{grid-template-columns:1fr 1fr}
body.beginner-mode .provider-grid .full-span,body.beginner-mode #voiceElevenManual,body.beginner-mode #elevenTagPreset{display:none}
body.pro-mode .simple-tab:after{content:' Pro';font-size:10px;color:#fde68a;margin-left:4px}
.previewBox{position:sticky;top:92px}.canvasWrap{max-height:calc(100vh - 200px);overflow:visible}.canvasWrap canvas{max-height:calc(100vh - 230px);object-fit:contain}
@media(max-width:1100px){.previewBox{position:relative;top:auto}.canvasWrap,.canvasWrap canvas{max-height:none}.simple-workspace-head{position:relative}.simple-tabs{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.simple-tabs{grid-template-columns:1fr 1fr}.nav{display:grid;grid-template-columns:1fr 1fr}.nav .autosave-pill{grid-column:1/-1}.project-hub-card{width:100vw;border-radius:0!important}.simple-tab{padding:10px 8px;font-size:12px}}


/* v3 layer panel + text editor + export presets */
.card-lite{margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03)}
.text-layer-grid textarea{min-height:92px}
.three-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
.layer-panel-card{margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03)}
.layer-list{display:grid;gap:8px}
.layer-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.72);cursor:pointer}
.layer-row.active{border-color:rgba(96,165,250,.55);box-shadow:0 0 0 1px rgba(96,165,250,.25) inset}
.layer-dot{width:10px;height:10px;border-radius:999px;background:#34d399}
.layer-meta b{display:block;font-size:13px}.layer-meta small{display:block;color:#94a3b8;font-size:11px;line-height:1.35}
.layer-actions{display:flex;gap:8px;align-items:center}
.layer-toggle{border:0;background:rgba(255,255,255,.08);color:#e2e8f0;border-radius:999px;padding:7px 10px;cursor:pointer;font-size:12px}
.layer-toggle.off{background:rgba(239,68,68,.14);color:#fecaca}
.export-presets-card{margin-top:14px;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.03)}
.preset-chip-grid{display:flex;flex-wrap:wrap;gap:10px}
.preset-chip{border:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.8);color:#e2e8f0;padding:10px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:12px}
.preset-chip:hover,.preset-chip.active{border-color:rgba(245,158,11,.55);box-shadow:0 0 0 1px rgba(245,158,11,.3) inset}
@media(max-width:640px){.three-buttons{grid-template-columns:1fr}.layer-row{grid-template-columns:auto 1fr}.layer-actions{grid-column:1/-1;justify-content:flex-end}}


/* Subtitle Pro visual helpers */
.provider-note,.subtitle-style-pro-note{font-size:12px;color:#94a3b8;margin-top:6px}


/* Filmora/DaVinci-style workspace */
.workspace-toggle-on{background:linear-gradient(135deg,#0ea5e9,#7c3aed)!important}
body.workspace-editor{background:#060b14;color:#e5edf8;overflow-x:hidden}
body.workspace-editor .pro-wrap{max-width:none!important;width:100%!important;padding:10px 10px 190px!important}
body.workspace-editor .top{position:sticky;top:0;z-index:80;background:rgba(6,11,20,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:10px;margin-bottom:10px}
body.workspace-editor .quick-start-card{display:none}
body.workspace-editor .project-hub-card{z-index:140}
body.workspace-editor .simple-workspace-head{position:fixed;left:10px;top:92px;bottom:190px;width:94px;z-index:60;background:linear-gradient(180deg,rgba(15,23,42,.96),rgba(2,6,23,.96));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:10px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
body.workspace-editor .simple-tabs{display:flex!important;flex-direction:column;gap:8px;height:100%;grid-template-columns:none!important}
body.workspace-editor .simple-tab{width:100%;min-height:58px;padding:8px 6px;font-size:11px;border-radius:14px;line-height:1.15;display:grid;place-items:center;text-align:center}
body.workspace-editor .tab-help{display:none}
body.workspace-editor .wizard-grid{margin-left:106px;display:grid!important;grid-template-columns:minmax(330px,420px) minmax(520px,1fr)!important;grid-template-areas:"controls preview";gap:10px;align-items:stretch;height:calc(100vh - 118px);width:auto!important}
body.workspace-editor .wizard-card{grid-area:controls;max-height:calc(100vh - 118px);overflow:auto;border-radius:18px;padding:12px;background:rgba(10,17,31,.94)}
body.workspace-editor .previewBox{grid-area:preview;position:relative!important;top:auto!important;display:grid;grid-template-columns:minmax(420px,1fr) minmax(300px,360px);grid-template-rows:auto auto minmax(320px,1fr) auto;grid-template-areas:"previewHead inspector" "score inspector" "canvas inspector" "toolbar inspector";gap:10px;max-height:calc(100vh - 118px);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable both-edges;border-radius:18px;padding:12px;background:#070d18}
body.workspace-editor .preview-head{grid-area:previewHead}.workspace-editor .score-card{grid-area:score;margin:0}.workspace-editor .canvasWrap{grid-area:canvas;min-height:0!important;height:100%;max-height:none!important;position:relative;background:#020617;border-radius:18px}.workspace-editor .canvasWrap canvas{max-height:100%!important;max-width:100%!important}.workspace-editor .preview-toolbar,.workspace-editor .export-row{grid-area:toolbar}.workspace-editor .preview-tips{display:none}.workspace-editor .audioBar{grid-column:1/2}.workspace-editor .workspace-inspector{grid-area:inspector;min-height:0;overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(15,23,42,.68);padding:12px;display:grid;gap:12px;align-content:start}.workspace-inspector-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:2px}.workspace-inspector-title h3{margin:0;font-size:15px}.workspace-inspector-title small{color:#94a3b8}.workspace-editor .workspace-inspector .layer-panel-card,.workspace-editor .workspace-inspector .variants,.workspace-editor .workspace-inspector .checklist{margin:0}.workspace-editor .workspace-inspector .variants{display:grid;grid-template-columns:1fr;gap:8px}.workspace-editor .workspace-inspector .layer-panel-card{padding:10px;border-radius:14px}.workspace-editor .workspace-inspector .variant{min-height:64px}.workspace-editor .workspace-inspector .variant p{display:none}
.workspace-bottom-timeline{position:fixed;left:116px;right:10px;bottom:10px;z-index:70;display:none;background:linear-gradient(180deg,rgba(10,17,31,.98),rgba(2,6,23,.98));border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:12px;box-shadow:0 -18px 70px rgba(0,0,0,.38)}
body.workspace-editor .workspace-bottom-timeline{display:block}.workspace-timeline-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.workspace-timeline-head h3{margin:0;font-size:14px}.workspace-timeline-head small{color:#94a3b8}.workspace-timeline-actions{display:flex;gap:8px;align-items:center}.workspace-zoom{min-width:130px}.track-list{display:grid;gap:7px}.track-row{display:grid;grid-template-columns:144px 1fr;gap:10px;align-items:center}.track-label{font-size:12px;font-weight:900;color:#cbd5e1;text-align:right}.track-lane{height:34px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}.tl-block{position:absolute;top:4px;height:24px;border-radius:8px;padding:5px 8px;font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border:1px solid rgba(255,255,255,.18)}.tl-voice{background:linear-gradient(135deg,#2563eb,#06b6d4)}.tl-sub{background:linear-gradient(135deg,#7c3aed,#ec4899)}.tl-img{background:linear-gradient(135deg,#16a34a,#84cc16)}.tl-text{background:linear-gradient(135deg,#b45309,#f59e0b)}.tl-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.9);left:0;z-index:3}.workspace-mini-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.workspace-mini-toolbar .btn{padding:9px 11px;border-radius:12px;font-size:12px}.workspace-editor .mini-section{border-radius:16px}.workspace-editor .tool-grid{grid-template-columns:1fr!important}.workspace-editor .formgrid{grid-template-columns:1fr!important}.workspace-editor .formgrid>div{grid-column:1/-1!important}.workspace-editor .image-control-grid{grid-template-columns:1fr 1fr!important}.workspace-editor .bg-gallery{grid-template-columns:1fr!important}.workspace-editor .scene-preview-wrap{display:none}.workspace-editor.pro-ui .scene-preview-wrap{display:block}
.preview-fullscreen{position:fixed!important;inset:0!important;z-index:150!important;background:#020617!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto 1fr auto!important;padding:16px!important}.preview-fullscreen .preview-head,.preview-fullscreen .score-card,.preview-fullscreen .workspace-inspector,.preview-fullscreen .variants,.preview-fullscreen .layer-panel-card,.preview-fullscreen .checklist{display:none!important}.preview-fullscreen .canvasWrap{grid-row:2!important;grid-column:1!important;max-height:none!important}.preview-fullscreen .canvasWrap canvas{max-height:calc(100vh - 140px)!important}.preview-fullscreen .preview-toolbar,.preview-fullscreen .export-row{grid-row:3!important;grid-column:1!important;justify-content:center}
@media(max-width:1180px){body.workspace-editor .wizard-grid{grid-template-columns:1fr!important;grid-template-areas:"preview";height:auto;margin-left:0;padding-left:104px}body.workspace-editor .wizard-card{max-height:none}body.workspace-editor .previewBox{min-height:78vh;grid-template-columns:1fr;grid-template-areas:"previewHead" "score" "canvas" "toolbar"}.workspace-editor .workspace-inspector{display:none}.workspace-bottom-timeline{left:10px}.workspace-editor .simple-workspace-head{top:96px;bottom:auto;height:auto}}
@media(max-width:720px){body.workspace-editor .simple-workspace-head{position:relative;left:auto;top:auto;bottom:auto;width:auto;margin-bottom:10px}.workspace-editor .simple-tabs{flex-direction:row;overflow:auto}.workspace-editor .simple-tab{min-width:94px}.workspace-editor .wizard-grid{padding-left:0}.workspace-bottom-timeline{display:none!important}body.workspace-editor .pro-wrap{padding-bottom:20px!important}}

/* Workspace overlap fix: reserve real space for the bottom timeline */
body.workspace-editor{--workspace-top:118px;--workspace-timeline-h:176px;--workspace-gap:18px;}
body.workspace-editor .pro-wrap{padding-bottom:calc(var(--workspace-timeline-h) + 34px)!important;}
body.workspace-editor .simple-workspace-head{bottom:calc(var(--workspace-timeline-h) + 26px)!important;}
body.workspace-editor .wizard-grid{
  height:calc(100vh - var(--workspace-top) - var(--workspace-timeline-h) - var(--workspace-gap))!important;
  min-height:430px;
  margin-bottom:calc(var(--workspace-timeline-h) + 24px)!important;
}
body.workspace-editor .wizard-card,
body.workspace-editor .previewBox{
  max-height:calc(100vh - var(--workspace-top) - var(--workspace-timeline-h) - var(--workspace-gap))!important;
}
body.workspace-editor .canvasWrap{
  min-height:0!important;
  height:100%!important;
  overflow:hidden!important;
}
.workspace-bottom-timeline{
  height:var(--workspace-timeline-h)!important;
  max-height:var(--workspace-timeline-h)!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,rgba(10,17,31,.995),rgba(2,6,23,.995))!important;
  backdrop-filter:blur(12px);
}
.workspace-bottom-timeline .workspace-timeline-head{margin-bottom:6px!important;}
.workspace-bottom-timeline .track-list{gap:6px!important;}
.workspace-bottom-timeline .track-row{grid-template-columns:88px 1fr!important;gap:8px!important;}
.workspace-bottom-timeline .track-lane{height:30px!important;}
.workspace-bottom-timeline .tl-block{top:3px!important;height:22px!important;padding:4px 7px!important;}
.workspace-bottom-timeline .btn{padding:9px 12px!important;border-radius:12px!important;}
@media(max-width:1180px){
  body.workspace-editor{--workspace-timeline-h:172px;}
  body.workspace-editor .wizard-grid{height:auto!important;min-height:0!important;margin-bottom:calc(var(--workspace-timeline-h) + 22px)!important;padding-left:104px;}
  body.workspace-editor .previewBox{max-height:none!important;}
  body.workspace-editor .wizard-card{max-height:none!important;}
}
@media(max-height:760px) and (min-width:721px){
  body.workspace-editor{--workspace-timeline-h:142px;--workspace-top:104px;}
  .workspace-bottom-timeline .workspace-timeline-head small{display:none!important;}
  .workspace-bottom-timeline .track-row{grid-template-columns:76px 1fr!important;}
  .workspace-bottom-timeline .track-lane{height:25px!important;}
  .workspace-bottom-timeline .tl-block{height:19px!important;font-size:9px!important;padding:3px 6px!important;}
}


body.workspace-editor .previewBox > *{min-width:0}
body.workspace-editor .previewBox .preview-head,
body.workspace-editor .previewBox .score-card,
body.workspace-editor .previewBox .canvasWrap,
body.workspace-editor .previewBox .preview-toolbar,
body.workspace-editor .previewBox .export-row,
body.workspace-editor .previewBox .audioBar{min-width:0}
body.workspace-editor .previewBox .canvasWrap{align-self:start}
body.workspace-editor .previewBox .preview-toolbar,
body.workspace-editor .previewBox .export-row,
body.workspace-editor .previewBox .audioBar{position:relative;z-index:1}
body.workspace-editor .previewBox::-webkit-scrollbar{width:12px;height:12px}
body.workspace-editor .previewBox::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:999px;border:2px solid rgba(2,6,23,.5)}
body.workspace-editor .previewBox::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}


/* Workspace action buttons below canvas - no overlay */
body.workspace-editor .previewBox{
  grid-template-rows:auto auto auto auto auto!important;
  grid-template-areas:"previewHead inspector" "score inspector" "canvas inspector" "actions inspector" "audio inspector"!important;
  align-items:start!important;
}
body.workspace-editor .workspace-action-bar{
  grid-area:actions!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:10px 0 0!important;
  padding:14px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-radius:18px!important;
  background:rgba(15,23,42,.72)!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px);
}
body.workspace-editor .workspace-action-bar .preview-toolbar,
body.workspace-editor .workspace-action-bar .export-row{
  grid-area:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:12px!important;
  margin:0!important;
  position:static!important;
}
body.workspace-editor .workspace-action-bar .btn{
  min-height:50px!important;
  padding:13px 20px!important;
  border-radius:16px!important;
  white-space:nowrap!important;
}
body.workspace-editor .previewBox .audioBar{
  grid-area:audio!important;
  margin-top:8px!important;
}
body.workspace-editor .canvasWrap{
  grid-area:canvas!important;
  height:auto!important;
  min-height:360px!important;
  align-self:start!important;
  overflow:visible!important;
}
body.workspace-editor .canvasWrap canvas{
  display:block!important;
  max-height:min(58vh,680px)!important;
  width:auto!important;
  max-width:100%!important;
  margin:auto!important;
}
.preview-fullscreen .workspace-action-bar{grid-row:3!important;grid-column:1!important;justify-content:center!important;}
@media(max-width:1180px){
  body.workspace-editor .previewBox{grid-template-areas:"previewHead" "score" "canvas" "actions" "audio"!important;}
}
@media(max-width:720px){
  body.workspace-editor .workspace-action-bar{display:grid!important;grid-template-columns:1fr!important;}
  body.workspace-editor .workspace-action-bar .preview-toolbar,
  body.workspace-editor .workspace-action-bar .export-row{display:grid!important;grid-template-columns:1fr!important;width:100%!important;}
  body.workspace-editor .workspace-action-bar .btn{width:100%!important;justify-content:center!important;}
}

/* FINAL FIX: keep workspace buttons physically below canvas, never over it */
body.workspace-editor .previewBox{
  grid-template-rows:auto auto auto auto auto!important;
  grid-template-areas:"previewHead inspector" "score inspector" "canvas inspector" "actions inspector" "audio inspector"!important;
  align-content:start!important;
}
body.workspace-editor .canvasWrap{
  grid-area:canvas!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  align-self:start!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:14px!important;
  margin:0!important;
}
body.workspace-editor .canvasWrap canvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(50vh,620px)!important;
  margin:0 auto!important;
  position:static!important;
}
body.workspace-editor .workspace-action-bar{
  grid-area:actions!important;
  position:relative!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;
  margin:12px 0 0!important;
  padding:12px!important;
  width:100%!important;
  z-index:1!important;
  clear:both!important;
}
body.workspace-editor .workspace-action-bar .preview-toolbar,
body.workspace-editor .workspace-action-bar .export-row{
  position:static!important;
  transform:none!important;
}
body.workspace-editor .previewBox .audioBar{grid-area:audio!important;position:relative!important;z-index:1!important;}
@media(max-width:1180px){
  body.workspace-editor .previewBox{grid-template-areas:"previewHead" "score" "canvas" "actions" "audio"!important;grid-template-rows:auto auto auto auto auto!important;}
}

/* HARD FIX: reserve canvas display height before toolbar row */
body.workspace-editor .previewBox{
  grid-template-rows:auto auto auto auto auto!important;
  align-content:start!important;
}
body.workspace-editor .canvasWrap{
  grid-area:canvas!important;
  height:auto!important;
  min-height:calc(min(56vh, 660px) + 32px)!important;
  max-height:none!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:16px!important;
  margin:0!important;
  position:relative!important;
}
body.workspace-editor .canvasWrap canvas{
  position:relative!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(56vh, 660px)!important;
  margin:0 auto!important;
  flex:0 0 auto!important;
}
body.workspace-editor .workspace-action-bar{
  grid-area:actions!important;
  position:static!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:12px 0 0!important;
  width:100%!important;
  transform:none!important;
  z-index:2!important;
}
@media(max-height:760px) and (min-width:721px){
  body.workspace-editor .canvasWrap{min-height:calc(min(48vh, 560px) + 28px)!important;}
  body.workspace-editor .canvasWrap canvas{max-height:min(48vh, 560px)!important;}
}
@media(max-width:1180px){
  body.workspace-editor .canvasWrap{min-height:calc(min(54vh, 620px) + 30px)!important;}
  body.workspace-editor .canvasWrap canvas{max-height:min(54vh, 620px)!important;}
}


/* Subtitle appearance controls */
.subtitle-controls-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:rgba(255,255,255,.035)}
.subtitle-control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.subtitle-control-grid>div{padding:10px;border-radius:14px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.07)}
.subtitle-control-grid input[type=range]{width:100%;padding:0;border:0;background:transparent}
.workspace-editor .subtitle-control-grid{grid-template-columns:1fr!important}
@media(max-width:820px){.subtitle-control-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.subtitle-control-grid{grid-template-columns:1fr}}


/* Subtitle timeline editor + render quality/progress */
.subtitle-timeline-editor{margin-top:14px}
.subtitle-waveform{height:54px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(2,6,23,.45);display:flex;align-items:end;gap:3px;padding:8px;overflow:hidden}
.wavebar{flex:1;min-width:3px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#38bdf8,#2563eb);opacity:.85}
.subtitle-editor-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.subtitle-editor-actions .btn{min-height:36px;padding:8px 12px;font-size:12px}
.subtitle-editor-list{display:grid;gap:8px;max-height:360px;overflow:auto;padding-right:4px}
.subtitle-edit-row{display:grid;grid-template-columns:28px 70px 70px minmax(160px,1fr) auto;gap:8px;align-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.74);border-radius:14px;padding:8px}
.subtitle-edit-row input[type=number]{padding:8px;border-radius:10px}.subtitle-edit-row input[type=text]{padding:8px;border-radius:10px}.subtitle-edit-row .btn{min-height:34px;padding:7px 10px;font-size:12px}.subtitle-edit-row.active{border-color:#60a5fa;box-shadow:0 0 0 1px rgba(96,165,250,.25) inset}
.quality-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.quality-option{display:grid;gap:4px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.72);cursor:pointer}.quality-option b{font-size:13px}.quality-option span{font-size:11px;color:#94a3b8;line-height:1.35}.quality-option:has(input:checked){border-color:#60a5fa;box-shadow:0 0 0 1px rgba(96,165,250,.25) inset}
.render-progress-panel{margin-top:10px;border:1px solid rgba(255,255,255,.09);background:rgba(15,23,42,.78);border-radius:16px;padding:12px}.render-progress-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:8px}.render-progress-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.render-progress-bar span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#06b6d4,#22c55e);transition:width .25s ease}.render-progress-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}.render-step{padding:8px;border-radius:12px;background:rgba(255,255,255,.04);font-size:11px;color:#94a3b8}.render-step.active{background:rgba(37,99,235,.18);color:#bfdbfe}.render-step.done{background:rgba(34,197,94,.16);color:#bbf7d0}.render-progress-note{margin-top:8px;color:#94a3b8;font-size:12px}
@media(max-width:1100px){.quality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.subtitle-edit-row{grid-template-columns:24px 64px 64px 1fr}.subtitle-edit-row .btn{grid-column:1/-1}}
@media(max-width:560px){.quality-grid{grid-template-columns:1fr}.subtitle-edit-row{grid-template-columns:24px 1fr 1fr}.subtitle-edit-row input[type=text]{grid-column:1/-1}}

/* FINAL WORKSPACE SCROLL FIX: lock page scroll, scroll only columns */
body.workspace-editor{
  height:100vh!important;
  max-height:100vh!important;
  overflow:hidden!important;
}
body.workspace-editor .pro-wrap{
  height:100vh!important;
  max-height:100vh!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  display:flex!important;
  flex-direction:column!important;
}
body.workspace-editor .top{
  flex:0 0 auto!important;
  position:relative!important;
  top:auto!important;
  z-index:90!important;
}
body.workspace-editor .simple-workspace-head{
  position:fixed!important;
  left:10px!important;
  top:92px!important;
  bottom:calc(var(--workspace-timeline-h, 176px) + 22px)!important;
  width:94px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}
body.workspace-editor .simple-workspace-head::-webkit-scrollbar{width:6px}
body.workspace-editor .simple-workspace-head::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:999px}
body.workspace-editor .wizard-grid{
  flex:1 1 auto!important;
  min-height:0!important;
  height:calc(100vh - 104px - var(--workspace-timeline-h, 176px) - 22px)!important;
  max-height:calc(100vh - 104px - var(--workspace-timeline-h, 176px) - 22px)!important;
  margin-bottom:0!important;
  overflow:hidden!important;
}
body.workspace-editor .wizard-card,
body.workspace-editor .previewBox,
body.workspace-editor .workspace-inspector{
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
}
body.workspace-editor .workspace-bottom-timeline{
  position:fixed!important;
  left:116px!important;
  right:10px!important;
  bottom:10px!important;
  height:var(--workspace-timeline-h,176px)!important;
  max-height:var(--workspace-timeline-h,176px)!important;
  overflow:hidden!important;
}
@media(max-width:1180px) and (min-width:721px){
  body.workspace-editor .simple-workspace-head{top:92px!important;bottom:calc(var(--workspace-timeline-h,172px) + 18px)!important;}
  body.workspace-editor .wizard-grid{height:calc(100vh - 104px - var(--workspace-timeline-h,172px) - 18px)!important;max-height:calc(100vh - 104px - var(--workspace-timeline-h,172px) - 18px)!important;padding-left:104px!important;}
}
@media(max-height:760px) and (min-width:721px){
  body.workspace-editor .simple-workspace-head{top:82px!important;bottom:calc(var(--workspace-timeline-h,142px) + 16px)!important;}
  body.workspace-editor .wizard-grid{height:calc(100vh - 92px - var(--workspace-timeline-h,142px) - 16px)!important;max-height:calc(100vh - 92px - var(--workspace-timeline-h,142px) - 16px)!important;}
}
@media(max-width:720px){
  body.workspace-editor{height:auto!important;max-height:none!important;overflow:auto!important;}
  body.workspace-editor .pro-wrap{height:auto!important;max-height:none!important;overflow:visible!important;display:block!important;padding-bottom:20px!important;}
  body.workspace-editor .simple-workspace-head{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;width:auto!important;overflow:auto!important;}
  body.workspace-editor .wizard-grid{height:auto!important;max-height:none!important;overflow:visible!important;padding-left:0!important;}
  body.workspace-editor .wizard-card,
  body.workspace-editor .previewBox{height:auto!important;max-height:none!important;overflow:visible!important;}
}


/* Timeline Pro controls */
.timeline-pro .workspace-timeline-head{align-items:flex-start}
.timeline-ruler{height:24px;margin:2px 0 6px 106px;overflow-x:auto;overflow-y:hidden;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.timeline-ruler-inner{position:relative;height:100%;min-width:100%}
.timeline-ruler button{position:absolute;top:3px;transform:translateX(-50%);border:0;background:transparent;color:#94a3b8;font-size:10px;cursor:pointer}
.pro-track-row{grid-template-columns:96px minmax(0,1fr)!important}
.pro-track-row .track-label{display:flex;align-items:center;justify-content:flex-end;gap:7px;text-align:right;min-width:0}
.track-label span{display:block;min-width:44px}.track-tools{display:flex;gap:4px}.track-tools button{border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#dbeafe;font-size:10px;padding:3px 5px;cursor:pointer}
.track-lane-wrap{overflow-x:auto;overflow-y:hidden;border-radius:10px;scrollbar-width:thin}
.timeline-pro .track-lane{min-width:100%;width:100%;height:36px!important;overflow:visible!important}
.timeline-pro .tl-block{user-select:none;touch-action:none}.timeline-pro .tl-sub{cursor:grab}.timeline-pro .tl-sub:active{cursor:grabbing}.timeline-pro .tl-sub:before,.timeline-pro .tl-sub:after{content:'';position:absolute;top:0;bottom:0;width:5px;background:rgba(255,255,255,.28)}.timeline-pro .tl-sub:before{left:0}.timeline-pro .tl-sub:after{right:0}
.timeline-pro .tl-block.muted{opacity:.45;background:rgba(100,116,139,.35)!important}
.tl-waveform{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;gap:2px;padding:3px 8px;opacity:.55;pointer-events:none}.tl-waveform span{flex:1;min-width:2px;border-radius:99px;background:rgba(255,255,255,.75)}
.tl-scene-layer{position:absolute;top:-24px;left:0;height:22px;pointer-events:none}.tl-scene-marker{position:absolute;top:0;transform:translateX(-50%);pointer-events:auto;border:1px solid rgba(255,255,255,.12);background:rgba(15,23,42,.9);color:#bfdbfe;border-radius:999px;padding:2px 7px;font-size:10px;cursor:pointer}
.timeline-pro .tl-playhead{z-index:8;background:#fff!important;box-shadow:0 0 10px rgba(255,255,255,.9),0 0 0 1px rgba(0,0,0,.35)}
@media(max-width:760px){.timeline-ruler{margin-left:0}.pro-track-row{grid-template-columns:1fr!important}.pro-track-row .track-label{justify-content:space-between;text-align:left}.track-lane-wrap{grid-column:1/-1}}


/* Timeline Pro v2: shared scrollable timeline */
.timeline-pro{--tl-label-w:168px;--tl-row-h:36px;--tl-ruler-h:28px;}
.timeline-pro .workspace-timeline-head{margin-bottom:8px!important;align-items:center!important}
.timeline-pro .workspace-timeline-actions{flex-wrap:wrap}
.timeline-scroll-shell{display:grid;grid-template-columns:var(--tl-label-w) minmax(0,1fr);gap:8px;min-width:0}
.timeline-label-col{display:grid;grid-template-rows:var(--tl-ruler-h) repeat(4,var(--tl-row-h));gap:7px;position:sticky;left:0;z-index:3;background:linear-gradient(180deg,rgba(10,17,31,.98),rgba(2,6,23,.98));}
.timeline-label-col .timeline-ruler-spacer{height:var(--tl-ruler-h)}
.timeline-label-col .track-label{height:var(--tl-row-h);display:flex;align-items:center;justify-content:flex-end;gap:7px;text-align:right;padding-right:4px;color:#dbeafe;font-weight:900;font-size:12px;white-space:nowrap}
.timeline-scroll-area{min-width:0;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:rgba(96,165,250,.7) rgba(255,255,255,.08);border-radius:12px;overscroll-behavior-x:contain}
.timeline-scroll-area::-webkit-scrollbar{height:12px}.timeline-scroll-area::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}.timeline-scroll-area::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:999px;border:2px solid rgba(2,6,23,.6)}
.timeline-lanes-inner{display:grid;grid-template-rows:var(--tl-ruler-h) repeat(4,var(--tl-row-h));gap:7px;min-width:100%;position:relative}
.timeline-pro .timeline-ruler{height:var(--tl-ruler-h)!important;margin:0!important;overflow:visible!important;border-radius:10px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.timeline-pro .timeline-ruler-inner{height:100%;position:relative;min-width:100%;}
.timeline-pro .timeline-ruler button{top:5px!important;color:#cbd5e1!important;background:rgba(15,23,42,.8)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;padding:1px 6px!important}
.timeline-pro .track-lane{height:var(--tl-row-h)!important;width:100%!important;min-width:100%!important;overflow:visible!important;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);position:relative}
.timeline-pro .tl-block{top:5px!important;height:25px!important;display:flex;align-items:center;gap:5px}
.timeline-pro .tl-playhead{top:-34px!important;bottom:-3px!important;width:3px!important;border-radius:999px;background:#fff!important;z-index:20!important}
.timeline-pro .tl-playhead:before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.8)}
.timeline-pro .tl-scene-layer{top:2px!important;height:24px!important;z-index:10;pointer-events:none}.timeline-pro .tl-scene-marker{pointer-events:auto;top:1px!important;background:rgba(37,99,235,.88)!important;color:#fff!important}
.timeline-pro .tl-waveform span{max-width:6px}.timeline-pro .tl-waveform{opacity:.65}
.timeline-statusbar{display:flex;justify-content:space-between;gap:10px;margin-top:6px;color:#94a3b8;font-size:11px}.timeline-statusbar b{color:#e2e8f0}
@media(max-width:760px){.timeline-pro{--tl-label-w:129px}.timeline-scroll-shell{grid-template-columns:var(--tl-label-w) minmax(0,1fr)}.timeline-label-col .track-label{font-size:11px}.timeline-pro .workspace-timeline-actions{width:100%}.workspace-zoom{flex:1;min-width:100px!important}}


/* Premiere-style Timeline v3: vertical + horizontal scroll */
body.workspace-editor{--workspace-timeline-h:286px!important}
body.workspace-editor .workspace-bottom-timeline.timeline-premiere{
  height:286px!important;max-height:286px!important;padding:10px!important;display:flex!important;flex-direction:column!important;gap:8px!important;overflow:hidden!important;
}
.timeline-premiere .workspace-timeline-head{flex:0 0 auto!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.timeline-premiere .workspace-timeline-actions{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
.timeline-premiere .workspace-zoom{min-width:180px!important}
.timeline-premiere .timeline-helpbar{flex:0 0 auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#94a3b8;font-size:11px;border-top:1px solid rgba(255,255,255,.06);padding-top:6px}
.timeline-premiere .track-list{flex:1 1 auto!important;min-height:0!important;display:block!important;overflow:hidden!important}
.timeline-premiere-shell{height:100%;min-height:0;display:grid;grid-template-columns:177px minmax(0,1fr);gap:0;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(2,6,23,.38);overflow:hidden}
.timeline-premiere-labels{overflow:hidden;background:rgba(15,23,42,.94);border-right:1px solid rgba(255,255,255,.08);z-index:4}
.timeline-premiere-label-inner{width:177px}
.timeline-premiere-ruler-spacer{height:32px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.98);position:sticky;top:0;z-index:6}
.timeline-premiere-label{height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;border-bottom:1px solid rgba(255,255,255,.06);font-size:12px;font-weight:900;color:#dbeafe;white-space:nowrap}
.timeline-premiere-label .track-tools{display:flex;gap:4px}.timeline-premiere-label .track-tools button{border:0;border-radius:8px;background:rgba(255,255,255,.08);color:#dbeafe;font-size:10px;padding:3px 5px;cursor:pointer}
.timeline-premiere-scroll{min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(96,165,250,.8) rgba(255,255,255,.08);overscroll-behavior:contain;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 64px)}
.timeline-premiere-scroll::-webkit-scrollbar{height:14px;width:14px}.timeline-premiere-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:999px}.timeline-premiere-scroll::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2563eb,#06b6d4);border-radius:999px;border:2px solid rgba(2,6,23,.65)}
.timeline-premiere-inner{position:relative;min-width:1120px;display:grid;grid-template-rows:32px;grid-auto-rows:42px}
.timeline-premiere-ruler{position:sticky;top:0;z-index:5;height:32px;background:rgba(2,6,23,.98);border-bottom:1px solid rgba(255,255,255,.08)}
.timeline-premiere-ruler button{position:absolute;top:6px;transform:translateX(-50%);border:0;background:rgba(15,23,42,.92);color:#cbd5e1;border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:2px 7px;font-size:10px;cursor:pointer}
.timeline-premiere-lane{height:42px;position:relative;border-bottom:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.025);overflow:visible}
.timeline-premiere-lane:nth-child(even){background:rgba(255,255,255,.04)}
.timeline-premiere .tl-block{top:7px!important;height:28px!important;border-radius:8px!important;display:flex!important;align-items:center!important;box-sizing:border-box!important;z-index:2!important}
.timeline-premiere .tl-sub{cursor:grab!important}.timeline-premiere .tl-sub:active{cursor:grabbing!important}
.timeline-premiere .tl-sub:before,.timeline-premiere .tl-sub:after{content:'';position:absolute;top:0;bottom:0;width:7px;background:rgba(255,255,255,.28);z-index:3}.timeline-premiere .tl-sub:before{left:0}.timeline-premiere .tl-sub:after{right:0}
.timeline-premiere .tl-playhead{position:absolute!important;top:0!important;bottom:0!important;width:3px!important;background:#fff!important;border-radius:999px;z-index:30!important;box-shadow:0 0 12px rgba(255,255,255,.95)}
.timeline-premiere .tl-playhead:before{content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:14px;height:14px;background:#fff;border-radius:50%;box-shadow:0 0 12px rgba(255,255,255,.9)}
.timeline-premiere .tl-waveform{top:4px!important;bottom:4px!important;opacity:.7!important}.timeline-premiere .tl-waveform span{max-width:8px!important}
.timeline-premiere .tl-scene-layer{top:4px!important;height:24px!important;z-index:18!important;pointer-events:none}.timeline-premiere .tl-scene-marker{pointer-events:auto!important;top:2px!important;background:rgba(37,99,235,.92)!important;color:#fff!important}
.timeline-premiere .timeline-statusbar{flex:0 0 auto!important;margin:0!important;font-size:11px!important;color:#94a3b8!important;display:flex!important;gap:12px!important;justify-content:space-between!important}
@media(max-height:780px) and (min-width:721px){body.workspace-editor{--workspace-timeline-h:248px!important}body.workspace-editor .workspace-bottom-timeline.timeline-premiere{height:248px!important;max-height:248px!important}.timeline-premiere-label{height:38px}.timeline-premiere-inner{grid-auto-rows:38px}.timeline-premiere-lane{height:38px}.timeline-premiere .tl-block{top:6px!important;height:26px!important}}
@media(max-width:760px){body.workspace-editor .workspace-bottom-timeline.timeline-premiere{display:none!important}}


/* Caption hold/drag safety */
.timeline-premiere .tl-sub{min-width:24px!important;overflow:hidden!important;opacity:1!important;visibility:visible!important}
.timeline-premiere .tl-sub.dragging-caption{z-index:50!important;outline:2px solid rgba(250,204,21,.85);box-shadow:0 0 0 3px rgba(250,204,21,.18),0 8px 26px rgba(0,0,0,.35)}
.timeline-premiere .tl-sub.muted{opacity:.65!important;visibility:visible!important}
.timeline-premiere-lane[data-track="captions"]{min-height:42px!important}


/* Timeline preview transport bar + PWA install */
.timeline-preview-transport{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(15,23,42,.72);margin:6px 0 0}
.timeline-preview-transport .btn{min-height:34px!important;padding:7px 10px!important;font-size:12px!important;border-radius:10px!important}
.timeline-timecode{font-size:12px;font-weight:900;color:#dbeafe;min-width:96px;text-align:center;font-variant-numeric:tabular-nums}
.timeline-scrub-wrap{display:flex;align-items:center;gap:8px;min-width:180px}.timeline-scrub-wrap input[type=range]{width:100%;accent-color:#38bdf8;padding:0;border:0;background:transparent}
.timeline-preview-progress{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}.timeline-preview-fill{height:100%;width:0%;background:linear-gradient(90deg,#2563eb,#06b6d4,#22c55e);border-radius:999px;transition:width .08s linear}.timeline-preview-label{font-size:11px;color:#94a3b8;white-space:nowrap}
.pwa-install-btn{background:linear-gradient(135deg,#16a34a,#0ea5e9)!important;color:#fff!important;border-color:rgba(255,255,255,.12)!important}.pwa-install-btn[hidden]{display:none!important}
@media(max-width:900px){.timeline-preview-transport{grid-template-columns:1fr 1fr}.timeline-scrub-wrap{grid-column:1/-1}.timeline-preview-progress{grid-column:1/-1}.timeline-preview-label{display:none}}


/* Compact Timeline Pro header: keep time ruler visible */
.workspace-bottom-timeline .workspace-timeline-head.compact{margin-bottom:4px!important;align-items:center!important;min-height:0!important}
.workspace-bottom-timeline .workspace-timeline-head.compact h3{font-size:13px!important;line-height:1!important;margin:0!important;white-space:nowrap}
.workspace-bottom-timeline .workspace-timeline-head.compact small{display:none!important}
.workspace-bottom-timeline .timeline-help-row{margin:3px 0 4px!important;padding:4px 6px!important;font-size:10px!important;line-height:1.1!important;gap:6px!important;flex-wrap:nowrap!important;overflow:hidden!important;white-space:nowrap!important}
.workspace-bottom-timeline .timeline-help-row[hidden]{display:none!important}
.workspace-bottom-timeline .workspace-timeline-actions{gap:5px!important;flex-wrap:nowrap!important;align-items:center!important}
.workspace-bottom-timeline .workspace-timeline-actions .btn{padding:6px 9px!important;min-height:30px!important;font-size:11px!important;border-radius:10px!important}
.workspace-bottom-timeline .workspace-zoom{min-width:96px!important;width:110px!important}
.workspace-bottom-timeline .timeline-preview-transport{padding:5px 7px!important;margin:4px 0!important;gap:6px!important;min-height:32px!important}
.workspace-bottom-timeline .timeline-preview-transport .btn{padding:6px 9px!important;min-height:28px!important;font-size:11px!important}
.workspace-bottom-timeline .timeline-scrub-wrap{gap:6px!important}
.workspace-bottom-timeline .timeline-timecode{font-size:11px!important;min-width:48px!important}
.workspace-bottom-timeline .track-list{margin-top:2px!important}
.workspace-bottom-timeline .timeline-statusbar{font-size:10px!important;padding:3px 6px!important;min-height:18px!important}
body.workspace-editor{--workspace-timeline-h:182px!important}
@media(max-height:760px){body.workspace-editor{--workspace-timeline-h:166px!important}.workspace-bottom-timeline .timeline-statusbar{display:none!important}.workspace-bottom-timeline .timeline-preview-progress{display:none!important}}

/* Full-width Premiere-style timeline dock reupload fix */
body.workspace-editor{--workspace-timeline-h:275px;}
body.workspace-editor .pro-wrap{padding-bottom:calc(var(--workspace-timeline-h) + 42px)!important;}
body.workspace-editor .wizard-grid{margin-bottom:calc(var(--workspace-timeline-h) + 32px)!important;}
body.workspace-editor .simple-workspace-head{bottom:calc(var(--workspace-timeline-h) + 26px)!important;}
body.workspace-editor .workspace-bottom-timeline{
  left:10px!important;
  right:10px!important;
  bottom:10px!important;
  width:auto!important;
  max-height:var(--workspace-timeline-h)!important;
  min-height:150px!important;
  overflow:hidden!important;
  z-index:95!important;
  padding-top:16px!important;
}
body.workspace-editor .workspace-bottom-timeline:before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;height:8px;
  cursor:ns-resize;
  background:linear-gradient(90deg,transparent,rgba(96,165,250,.55),transparent);
  opacity:.55;
}
body.workspace-editor .workspace-bottom-timeline .track-list{max-height:calc(var(--workspace-timeline-h) - 82px);overflow:auto;overscroll-behavior:contain;}
body.workspace-editor .workspace-bottom-timeline .timeline-scroll-shell{min-height:100%;}
body.workspace-editor .workspace-bottom-timeline .timeline-scroll-area{overflow:auto!important;}
body.workspace-editor .workspace-bottom-timeline::-webkit-scrollbar,
body.workspace-editor .workspace-bottom-timeline .track-list::-webkit-scrollbar,
body.workspace-editor .workspace-bottom-timeline .timeline-scroll-area::-webkit-scrollbar{width:12px;height:12px}
body.workspace-editor .workspace-bottom-timeline::-webkit-scrollbar-thumb,
body.workspace-editor .workspace-bottom-timeline .track-list::-webkit-scrollbar-thumb,
body.workspace-editor .workspace-bottom-timeline .timeline-scroll-area::-webkit-scrollbar-thumb{background:rgba(148,163,184,.42);border-radius:999px;border:2px solid rgba(2,6,23,.55)}
@media(max-width:720px){body.workspace-editor .workspace-bottom-timeline{display:none!important}}

/* Workspace editor polish: dark scrollbars + tighter columns */
body.workspace-editor,
body.workspace-editor *{scrollbar-color:rgba(96,165,250,.55) rgba(15,23,42,.55);scrollbar-width:thin}
body.workspace-editor ::-webkit-scrollbar{width:10px;height:10px}
body.workspace-editor ::-webkit-scrollbar-track{background:rgba(15,23,42,.45);border-radius:999px}
body.workspace-editor ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(96,165,250,.75),rgba(124,58,237,.65));border-radius:999px;border:2px solid rgba(2,6,23,.55)}
body.workspace-editor ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(96,165,250,.95),rgba(124,58,237,.9))}
body.workspace-editor .wizard-card,
body.workspace-editor .workspace-inspector,
body.workspace-editor .previewBox{scrollbar-gutter:stable}
body.workspace-editor .wizard-card::-webkit-scrollbar,
body.workspace-editor .workspace-inspector::-webkit-scrollbar,
body.workspace-editor .previewBox::-webkit-scrollbar{width:9px;height:9px}
body.workspace-editor .wizard-card::-webkit-scrollbar-track,
body.workspace-editor .workspace-inspector::-webkit-scrollbar-track,
body.workspace-editor .previewBox::-webkit-scrollbar-track{background:rgba(2,6,23,.55);border-radius:999px}
body.workspace-editor .wizard-card::-webkit-scrollbar-thumb,
body.workspace-editor .workspace-inspector::-webkit-scrollbar-thumb,
body.workspace-editor .previewBox::-webkit-scrollbar-thumb{background:rgba(100,116,139,.72);border:2px solid rgba(2,6,23,.75);border-radius:999px}
body.workspace-editor .simple-workspace-head{overflow:hidden!important}
body.workspace-editor .simple-tabs{overflow-y:auto!important;overflow-x:hidden!important;padding-right:2px}
body.workspace-editor .simple-tabs::-webkit-scrollbar{width:5px}
body.workspace-editor .simple-tabs::-webkit-scrollbar-thumb{background:rgba(96,165,250,.55);border:0}
body.workspace-editor .wizard-grid{gap:12px!important}
body.workspace-editor .previewBox{border-color:rgba(96,165,250,.16)!important}
body.workspace-editor .workspace-inspector{border-color:rgba(96,165,250,.13)!important}
body.workspace-editor .workspace-bottom-timeline{border-color:rgba(96,165,250,.18)!important}

/* Workspace height model final fix: editor columns live above the full-width timeline */
@media (min-width:721px){
  body.workspace-editor{
    --workspace-top-h:88px;
    --workspace-rail-w:96px;
    --workspace-gap:12px;
    height:100vh!important;
    max-height:100vh!important;
    overflow:hidden!important;
  }
  body.workspace-editor .pro-wrap{
    height:100vh!important;
    max-height:100vh!important;
    overflow:hidden!important;
    padding:8px!important;
    max-width:none!important;
  }
  body.workspace-editor .top{
    position:fixed!important;
    top:8px!important;
    left:8px!important;
    right:8px!important;
    z-index:120!important;
    margin:0!important;
  }
  body.workspace-editor .quick-start-card,
  body.workspace-editor .project-hub-card{display:none!important;}
  body.workspace-editor .simple-workspace-head{
    position:fixed!important;
    left:8px!important;
    top:var(--workspace-top-h)!important;
    bottom:calc(var(--workspace-timeline-h,275px) + 16px)!important;
    width:88px!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    z-index:70!important;
  }
  body.workspace-editor .simple-tabs{
    height:100%!important;
    max-height:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  body.workspace-editor .wizard-grid{
    position:fixed!important;
    left:calc(var(--workspace-rail-w) + var(--workspace-gap))!important;
    right:8px!important;
    top:var(--workspace-top-h)!important;
    bottom:calc(var(--workspace-timeline-h,275px) + 16px)!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(340px,420px) minmax(0,1fr)!important;
    gap:12px!important;
    align-items:stretch!important;
    overflow:hidden!important;
  }
  body.workspace-editor .wizard-card,
  body.workspace-editor .previewBox,
  body.workspace-editor .workspace-inspector{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:auto!important;
  }
  body.workspace-editor .previewBox{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px)!important;
    grid-template-rows:auto auto minmax(260px,1fr) auto auto!important;
    grid-template-areas:"previewHead inspector" "score inspector" "canvas inspector" "toolbar inspector" "audio inspector"!important;
    align-content:start!important;
  }
  body.workspace-editor .canvasWrap{
    min-height:280px!important;
    height:auto!important;
    max-height:none!important;
    align-self:start!important;
  }
  body.workspace-editor .canvasWrap canvas{
    max-height:min(52vh,520px)!important;
    width:auto!important;
  }
  body.workspace-editor .preview-toolbar,
  body.workspace-editor .workspace-action-bar,
  body.workspace-editor .export-row{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin-top:0!important;
    grid-area:toolbar!important;
  }
  body.workspace-editor .audioBar{grid-area:audio!important;}
  body.workspace-editor .workspace-bottom-timeline{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    height:var(--workspace-timeline-h,275px)!important;
    max-height:var(--workspace-timeline-h,275px)!important;
    margin:0!important;
    z-index:100!important;
  }
}
@media (max-height:760px) and (min-width:721px){
  body.workspace-editor{--workspace-top-h:82px;--workspace-timeline-h:238px!important;}
  body.workspace-editor .wizard-grid{grid-template-columns:minmax(320px,390px) minmax(0,1fr)!important;}
  body.workspace-editor .canvasWrap canvas{max-height:min(44vh,430px)!important;}
}

/* FINAL OVERRIDE: workspace preview action buttons must stay BELOW canvas, not inside/over it */
@media (min-width:721px){
  body.workspace-editor .previewBox{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px)!important;
    grid-template-rows:auto auto auto auto auto!important;
    grid-template-areas:
      "previewHead inspector"
      "score inspector"
      "canvas inspector"
      "actions inspector"
      "audio inspector"!important;
    align-items:start!important;
    align-content:start!important;
    gap:10px!important;
    overflow:auto!important;
  }
  body.workspace-editor .previewBox .canvasWrap{
    grid-area:canvas!important;
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    padding:14px!important;
    margin:0!important;
  }
  body.workspace-editor .previewBox .canvasWrap canvas{
    position:relative!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:min(46vh,520px)!important;
    margin:0 auto!important;
    flex:0 0 auto!important;
  }
  body.workspace-editor .previewBox .workspace-action-bar{
    grid-area:actions!important;
    position:static!important;
    inset:auto!important;
    top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:none!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    flex-wrap:wrap!important;
    padding:10px 12px!important;
    margin:0!important;
    clear:both!important;
    z-index:1!important;
    border-radius:16px!important;
    background:rgba(15,23,42,.76)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    box-shadow:none!important;
  }
  body.workspace-editor .previewBox .workspace-action-bar .preview-toolbar,
  body.workspace-editor .previewBox .workspace-action-bar .export-row{
    grid-area:auto!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    margin:0!important;
    padding:0!important;
    width:auto!important;
  }
  body.workspace-editor .previewBox .workspace-action-bar .btn{
    min-height:42px!important;
    padding:10px 15px!important;
    border-radius:14px!important;
    white-space:nowrap!important;
  }
  body.workspace-editor .previewBox .audioBar{grid-area:audio!important;position:relative!important;z-index:1!important;margin:0!important;}
}
@media (max-width:1180px){
  body.workspace-editor .previewBox{
    grid-template-columns:1fr!important;
    grid-template-areas:"previewHead" "score" "canvas" "actions" "audio"!important;
    grid-template-rows:auto auto auto auto auto!important;
  }
}
@media (max-height:760px) and (min-width:721px){
  body.workspace-editor .previewBox .canvasWrap canvas{max-height:min(38vh,410px)!important;}
  body.workspace-editor .previewBox .workspace-action-bar .btn{min-height:38px!important;padding:8px 12px!important;font-size:12px!important;}
}

/* REAL FINAL FIX: Live Preview footer buttons must never overlay canvas */
@media (min-width:721px){
  body.workspace-editor .previewBox{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,360px)!important;
    grid-template-rows:auto auto auto auto auto!important;
    grid-template-areas:
      "previewHead inspector"
      "score inspector"
      "canvas inspector"
      "actions inspector"
      "audio inspector"!important;
    align-items:start!important;
    align-content:start!important;
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    gap:10px!important;
  }
  body.workspace-editor .previewBox .canvasWrap{
    grid-area:canvas!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    padding:12px!important;
    margin:0!important;
    position:relative!important;
    z-index:1!important;
  }
  body.workspace-editor .previewBox .canvasWrap canvas{
    display:block!important;
    position:relative!important;
    width:auto!important;
    height:auto!important;
    max-width:100%!important;
    max-height:min(42vh,500px)!important;
    margin:0 auto!important;
    object-fit:contain!important;
    flex:0 0 auto!important;
    z-index:1!important;
  }
  body.workspace-editor .previewBox .workspace-action-bar{
    grid-area:actions!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    padding:10px 12px!important;
    clear:both!important;
    z-index:2!important;
    background:rgba(15,23,42,.82)!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:16px!important;
    box-shadow:none!important;
  }
  body.workspace-editor .previewBox .workspace-action-bar .preview-toolbar,
  body.workspace-editor .previewBox .workspace-action-bar .export-row{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    flex-wrap:wrap!important;
    gap:10px!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    padding:0!important;
    grid-area:auto!important;
  }
  body.workspace-editor .previewBox .workspace-action-bar .btn{
    min-height:40px!important;
    padding:9px 14px!important;
    border-radius:14px!important;
    white-space:nowrap!important;
    width:auto!important;
  }
  body.workspace-editor .previewBox .audioBar{
    grid-area:audio!important;
    position:relative!important;
    z-index:1!important;
    margin:0!important;
  }
}
@media (max-width:1180px){
  body.workspace-editor .previewBox{
    grid-template-columns:1fr!important;
    grid-template-areas:"previewHead" "score" "canvas" "actions" "audio"!important;
    grid-template-rows:auto auto auto auto auto!important;
  }
}
@media (max-height:760px) and (min-width:721px){
  body.workspace-editor .previewBox .canvasWrap canvas{max-height:min(34vh,360px)!important;}
  body.workspace-editor .previewBox .workspace-action-bar .btn{min-height:36px!important;padding:7px 10px!important;font-size:12px!important;}
}


/* =====================================================================
   LIVE PREVIEW LAYOUT FIX v3.1 — buttons in a fixed footer of .previewBox.
   Companion JS in simple-mode.js wraps scrollable content in .preview-scroll
   and keeps .workspace-action-bar as a non-scrolling sibling at the bottom.
   The .workspace-inspector keeps its OWN children (layers, variants, checklist).
   Works in: normal mode, workspace mode, all screen sizes.
   ===================================================================== */
/* Inspector's own internal layout (its children stay inside it) */
.workspace-inspector{display:flex;flex-direction:column;gap:12px}
.workspace-inspector > .layer-panel-card,
.workspace-inspector > .inspector-block{margin:0}
.workspace-inspector .inspector-block{padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(15,23,42,.5)}
.workspace-inspector .inspector-block .mini-head{margin-bottom:8px}
.workspace-inspector .layer-list{margin-top:8px}

/* --- Cancel ALL prior overflow/sticky/grid-area rules on .previewBox --- */
.previewBox{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  overflow:hidden!important;
  /* Bound the preview card so its inner scroll area has a defined size */
  max-height:calc(100vh - 110px);
}

/* --- The scrollable inner wrapper holds head, score, canvas, inspector, etc. --- */
.previewBox > .preview-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:0 4px 8px 0;
}
.previewBox > .preview-scroll::-webkit-scrollbar{width:10px;height:10px}
.previewBox > .preview-scroll::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px;border:2px solid rgba(2,6,23,.5)}
.previewBox > .preview-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}

/* --- Canvas inside the scroll wrapper: shrinks naturally --- */
.previewBox > .preview-scroll > .canvasWrap{
  flex:0 0 auto;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  padding:14px!important;
  overflow:hidden!important;
}
.previewBox > .preview-scroll > .canvasWrap canvas{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:min(60vh, 640px)!important;
  margin:0 auto!important;
  position:static!important;
}

/* --- The action bar: NON-SCROLLING footer of .previewBox, always visible --- */
.previewBox > .workspace-action-bar{
  flex:0 0 auto;
  position:static!important;
  top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
  transform:none!important;
  z-index:auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  justify-content:center!important;
  align-items:center!important;
  padding:12px!important;
  margin:10px 0 0!important;
  width:100%!important;
  background:rgba(15,23,42,.78)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  box-shadow:0 -8px 24px rgba(0,0,0,.25);
  backdrop-filter:blur(6px);
}
.previewBox > .workspace-action-bar .preview-toolbar,
.previewBox > .workspace-action-bar .export-row{
  position:static!important;
  background:transparent!important;
  padding:0!important;
  border:0!important;
  margin:0!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  justify-content:center!important;
  align-items:center!important;
  width:auto!important;
}
.previewBox > .workspace-action-bar .btn{
  min-height:46px!important;
  padding:11px 16px!important;
  border-radius:14px!important;
  white-space:nowrap!important;
}

/* --- Audio bar: footer sibling, between scroll and action bar --- */
.previewBox > .audioBar{
  flex:0 0 auto;
  margin:8px 0 0!important;
}

/* ---------- WORKSPACE MODE: same footer pattern, plus right-side inspector ---------- */
/* Cancel the grid layout from earlier rules — we use flex column with an inner grid for scroll content */
body.workspace-editor .previewBox{
  display:flex!important;
  flex-direction:column!important;
  max-height:calc(96vh - var(--workspace-top, 118px) - var(--workspace-timeline-h, 176px) - var(--workspace-gap, 18px))!important;
  overflow:hidden!important;
  grid-template-areas:none!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
}
/* Inside workspace mode, the scroll wrapper becomes a 2-column grid (canvas | inspector).
   - Canvas row is 1fr so it absorbs all extra vertical space (no black gap below canvas).
   - Outer scroll is OFF in workspace mode (the inspector has its own internal scroll,
     and the action bar is a fixed footer of .previewBox). */
body.workspace-editor .previewBox > .preview-scroll{
  display:grid!important;
  grid-template-columns:minmax(420px,1fr) minmax(280px,340px)!important;
  grid-template-rows:auto auto 1fr auto!important;
  grid-template-areas:
    "previewHead inspector"
    "score       inspector"
    "canvas      inspector"
    "extra       inspector"!important;
  gap:10px!important;
  align-content:stretch!important;
  overflow:hidden!important;     /* no outer scroll in workspace mode */
  min-height:0!important;
}
body.workspace-editor .previewBox > .preview-scroll > .preview-head        { grid-area:previewHead; align-self:start; }
body.workspace-editor .previewBox > .preview-scroll > .score-card          { grid-area:score; align-self:start; }
/* Canvas cell: takes the 1fr row, canvas centers vertically inside it */
body.workspace-editor .previewBox > .preview-scroll > .canvasWrap{
  grid-area:canvas!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
/* Inspector spans all 4 rows in its column, scrolls internally if too tall */
body.workspace-editor .previewBox > .preview-scroll > .workspace-inspector{
  grid-area:inspector!important;
  align-self:stretch!important;
  min-height:0!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.workspace-editor .previewBox > .preview-scroll > .preview-tips,
body.workspace-editor .previewBox > .preview-scroll > .layer-panel-card,
body.workspace-editor .previewBox > .preview-scroll > .variants,
body.workspace-editor .previewBox > .preview-scroll > .checklist,
body.workspace-editor .previewBox > .preview-scroll > .render-progress-panel{ grid-column:1/-1; }

/* Canvas image fills the 1fr row up to a generous cap */
body.workspace-editor .previewBox > .preview-scroll > .canvasWrap canvas{
  max-height:100%!important;
  max-width:100%!important;
}

/* Inspector internal scrollbar styling */
body.workspace-editor .workspace-inspector::-webkit-scrollbar{width:8px;height:8px}
body.workspace-editor .workspace-inspector::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:999px}
body.workspace-editor .workspace-inspector::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:999px}

/* ---------- Stack inspector below on narrow screens ---------- */
@media (max-width:1180px){
  body.workspace-editor .previewBox{max-height:none!important;overflow:visible!important}
  body.workspace-editor .previewBox > .preview-scroll{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto auto auto auto!important;
    grid-template-areas:
      "previewHead"
      "score"
      "canvas"
      "inspector"
      "extra"!important;
    overflow:visible!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .canvasWrap{align-self:auto!important}
  body.workspace-editor .previewBox > .preview-scroll > .workspace-inspector{
    align-self:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(54vh, 560px)!important}
}

/* ---------- Tablet ---------- */
@media (max-width:1100px){
  .previewBox{max-height:none!important;overflow:visible!important}
  .previewBox > .preview-scroll{overflow:visible!important;max-height:none!important}
}

/* ---------- Mobile ---------- */
@media (max-width:720px){
  .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(70vh, 560px)!important}
  .previewBox > .workspace-action-bar{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:10px!important;
  }
  .previewBox > .workspace-action-bar .preview-toolbar,
  .previewBox > .workspace-action-bar .export-row{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    width:100%!important;
  }
  .previewBox > .workspace-action-bar .btn{width:100%!important;min-height:44px!important;padding:10px 8px!important;font-size:13px!important}
}
@media (max-width:480px){
  .previewBox > .workspace-action-bar .preview-toolbar,
  .previewBox > .workspace-action-bar .export-row{grid-template-columns:1fr!important}
}

/* ---------- Wide / large screens (≥1440px): grow canvas + inspector to fill space ---------- */
@media (min-width:1441px){
  /* Normal mode: canvas can be bigger, fills most of the preview column */
  .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(72vh, 820px)!important}
  /* Workspace mode: give inspector more room (canvas fills its 1fr row automatically) */
  body.workspace-editor .previewBox > .preview-scroll{
    grid-template-columns:minmax(520px,1fr) minmax(320px,400px)!important;
  }
}
@media (min-width:1700px){
  .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(76vh, 920px)!important}
  body.workspace-editor .previewBox > .preview-scroll{
    grid-template-columns:minmax(640px,1fr) minmax(360px,440px)!important;
  }
}
@media (min-width:1900px){
  .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(80vh, 1000px)!important}
  body.workspace-editor .previewBox > .preview-scroll{
    grid-template-columns:minmax(720px,1fr) minmax(380px,460px)!important;
  }
}

/* ---------- Short laptop screens ---------- */
@media (max-height:760px) and (min-width:721px){
  .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(44vh, 420px)!important}
  body.workspace-editor .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(38vh, 360px)!important}
  .previewBox > .workspace-action-bar .btn{min-height:38px!important;padding:8px 12px!important;font-size:12px!important}
}
@media (max-height:600px) and (min-width:721px){
  .previewBox > .preview-scroll > .canvasWrap canvas,
  body.workspace-editor .previewBox > .preview-scroll > .canvasWrap canvas{max-height:min(34vh, 300px)!important}
}

/* ---------- Fullscreen mode keeps a fixed footer toolbar ---------- */
.preview-fullscreen{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.preview-fullscreen > .preview-scroll{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.preview-fullscreen > .preview-scroll > .canvasWrap canvas{max-height:calc(100vh - 160px)!important}
.preview-fullscreen > .workspace-action-bar{
  position:static!important;
  flex:0 0 auto;
  border-radius:0!important;
  border-left:0!important;border-right:0!important;border-bottom:0!important;
  background:rgba(2,6,23,.94)!important;
  margin:0!important;
}

/* =====================================================================
   WORKSPACE RESPONSIVE WIDTH FIX v4.0
   Removes the empty/blank right-side work area on wide screens by making
   the Live Preview workspace consume 100% width and by sizing the
   Inspector as a responsive column instead of leaving unused canvas space.
   ===================================================================== */
@media (min-width:721px){
  body.workspace-editor{
    --workspace-top-h:clamp(76px, 4.8vw, 96px);
    --workspace-rail-w:clamp(82px, 5vw, 104px);
    --workspace-controls-w:clamp(330px, 24vw, 460px);
    --workspace-inspector-w:clamp(320px, 22vw, 620px);
    --workspace-gutter:12px;
  }
  body.workspace-editor .simple-workspace-head{
    width:var(--workspace-rail-w)!important;
  }
  body.workspace-editor .wizard-grid{
    left:calc(8px + var(--workspace-rail-w) + var(--workspace-gutter))!important;
    right:8px!important;
    grid-template-columns:minmax(300px,var(--workspace-controls-w)) minmax(0,1fr)!important;
    width:auto!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  body.workspace-editor .previewBox{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
  }
  body.workspace-editor .previewBox > .preview-scroll{
    width:100%!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--workspace-inspector-w)!important;
    grid-template-rows:auto auto minmax(0,1fr) auto!important;
    grid-template-areas:
      "previewHead inspector"
      "score       inspector"
      "canvas      inspector"
      "extra       inspector"!important;
    align-items:stretch!important;
    justify-items:stretch!important;
    align-content:stretch!important;
    justify-content:stretch!important;
    overflow:hidden!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .preview-head,
  body.workspace-editor .previewBox > .preview-scroll > .score-card,
  body.workspace-editor .previewBox > .preview-scroll > .canvasWrap{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .canvasWrap{
    min-height:0!important;
    height:100%!important;
    align-self:stretch!important;
    justify-self:stretch!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .canvasWrap canvas{
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .workspace-inspector{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    justify-self:stretch!important;
    align-self:stretch!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}

/* Large desktops: keep inspector useful, but avoid a dead blank right side. */
@media (min-width:1440px) and (min-width:721px){
  body.workspace-editor{
    --workspace-controls-w:clamp(340px, 22vw, 500px);
    --workspace-inspector-w:clamp(360px, 24vw, 680px);
  }
}
@media (min-width:1800px) and (min-width:721px){
  body.workspace-editor{
    --workspace-controls-w:clamp(360px, 21vw, 560px);
    --workspace-inspector-w:clamp(420px, 26vw, 820px);
  }
}
@media (min-width:2400px) and (min-width:721px){
  body.workspace-editor{
    --workspace-controls-w:clamp(380px, 18vw, 620px);
    --workspace-inspector-w:clamp(520px, 28vw, 980px);
  }
}

/* Medium desktop / laptop: inspector remains right side but does not crush preview. */
@media (max-width:1280px) and (min-width:1001px){
  body.workspace-editor{
    --workspace-controls-w:clamp(300px, 30vw, 390px);
    --workspace-inspector-w:clamp(280px, 28vw, 360px);
  }
}

/* Narrow workspace: stack inspector below preview instead of creating side blank/overflow. */
@media (max-width:1000px) and (min-width:721px){
  body.workspace-editor .wizard-grid{
    grid-template-columns:1fr!important;
  }
  body.workspace-editor .wizard-card{display:none!important;}
  body.workspace-editor .previewBox > .preview-scroll{
    overflow:auto!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto minmax(300px,1fr) auto auto!important;
    grid-template-areas:
      "previewHead"
      "score"
      "canvas"
      "inspector"
      "extra"!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .workspace-inspector{
    max-height:340px!important;
  }
}

/* =====================================================================
   WORKSPACE WIDTH BALANCE v5.0
   User feedback: the right Inspector does not need to consume wide-screen
   blank space; give that width to the main wizard controls instead.
   ===================================================================== */
@media (min-width:721px){
  body.workspace-editor{
    /* Wider left controls for option-heavy wizard panels. */
    --workspace-controls-w:clamp(360px, 26vw, 620px)!important;
    /* Compact inspector: enough for layers/variants, not a blank-space sink. */
    --workspace-inspector-w:clamp(280px, 16vw, 360px)!important;
  }
  body.workspace-editor .wizard-card{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  body.workspace-editor .previewBox > .preview-scroll{
    grid-template-columns:minmax(0,1fr) var(--workspace-inspector-w)!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .workspace-inspector{
    min-width:280px!important;
    max-width:var(--workspace-inspector-w)!important;
  }
}

@media (min-width:1440px) and (min-width:721px){
  body.workspace-editor{
    --workspace-controls-w:clamp(420px, 28vw, 720px)!important;
    --workspace-inspector-w:clamp(300px, 15vw, 380px)!important;
  }
}

@media (min-width:1800px) and (min-width:721px){
  body.workspace-editor{
    --workspace-controls-w:clamp(480px, 30vw, 900px)!important;
    --workspace-inspector-w:clamp(310px, 14vw, 400px)!important;
  }
}

@media (min-width:2400px) and (min-width:721px){
  body.workspace-editor{
    --workspace-controls-w:clamp(560px, 32vw, 1100px)!important;
    --workspace-inspector-w:clamp(320px, 12vw, 420px)!important;
  }
}

@media (max-width:1280px) and (min-width:1001px){
  body.workspace-editor{
    --workspace-controls-w:clamp(320px, 31vw, 440px)!important;
    --workspace-inspector-w:clamp(270px, 22vw, 320px)!important;
  }
  body.workspace-editor .previewBox > .preview-scroll > .workspace-inspector{
    min-width:270px!important;
  }
}

/* --- Compact Live Preview header / score merge patch --- */
.previewBox > .preview-scroll > .preview-head.preview-head-compact,
body.workspace-editor .previewBox > .preview-scroll > .preview-head.preview-head-compact,
.previewBox > .preview-head.preview-head-compact{
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;flex-wrap:wrap!important;margin:0!important;padding:0!important;min-height:0!important;
}
.previewBox .preview-head.preview-head-compact .preview-score-inline{
  display:flex!important;align-items:center!important;gap:10px!important;flex:1 1 320px!important;min-width:0!important;padding:10px 14px!important;border-radius:16px!important;background:rgba(34,197,94,.12)!important;border:1px solid rgba(34,197,94,.24)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.previewBox .preview-head.preview-head-compact .preview-score-inline b{display:block!important;margin:0!important;font-size:15px!important;line-height:1.1!important;white-space:nowrap!important}
.previewBox .preview-head.preview-head-compact .preview-score-inline span{display:block!important;margin:0!important;min-width:0!important;font-size:12px!important;line-height:1.25!important;color:rgba(255,255,255,.78)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.previewBox .preview-head.preview-head-compact .preview-head-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex:0 0 auto!important;flex-wrap:wrap!important}
.previewBox .preview-head.preview-head-compact .preview-head-actions .btn{min-height:38px!important;padding:9px 14px!important;border-radius:13px!important}
.previewBox .score-card.score-inline-only{display:none!important}
.previewBox .preview-head.preview-head-compact .hint,.previewBox .preview-head.preview-head-compact h2{display:none!important}
@media(max-width:900px){.previewBox .preview-head.preview-head-compact{align-items:stretch!important}.previewBox .preview-head.preview-head-compact .preview-score-inline{flex:1 1 100%!important;width:100%!important}.previewBox .preview-head.preview-head-compact .preview-head-actions{width:100%!important;justify-content:flex-start!important}}
@media(max-width:640px){.previewBox .preview-head.preview-head-compact .preview-score-inline{gap:6px!important;padding:9px 11px!important;flex-direction:column!important;align-items:flex-start!important}.previewBox .preview-head.preview-head-compact .preview-score-inline b,.previewBox .preview-head.preview-head-compact .preview-score-inline span{white-space:normal!important}.previewBox .preview-head.preview-head-compact .preview-head-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}.previewBox .preview-head.preview-head-compact .preview-head-actions .btn{width:100%!important;justify-content:center!important}}


/* --- Media upload video support --- */
.bg-thumb video{width:78px;height:58px;object-fit:cover;border-radius:12px;background:#020617;border:1px solid rgba(255,255,255,.16)}
.bg-thumb .media-badge{position:absolute;left:10px;top:34px;background:rgba(2,6,23,.78);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 7px;font-size:10px;font-weight:900;z-index:2}
.media-video-note{font-size:11px;color:#93c5fd;margin-top:5px;line-height:1.35}

/* Video timeline controls */
.video-timeline-controls{margin-top:10px;padding:10px;border:1px solid rgba(96,165,250,.22);border-radius:14px;background:rgba(15,23,42,.62)}
.video-length-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;color:#e5e7eb;font-size:12px}
.video-length-row span{color:#93c5fd;font-weight:800}
.video-control-grid input[type="number"]{width:100%;min-width:0;padding:8px;border-radius:10px;font-size:12px}
.video-loop-toggle{display:flex!important;align-items:center;gap:8px;margin:0!important;padding:8px;border-radius:10px;background:rgba(255,255,255,.06);font-size:12px;color:#dbeafe;font-weight:800}
.video-loop-toggle input{width:auto!important;margin:0!important}
.video-mini-note{margin-top:8px;color:#9fb0ca;font-size:11px;line-height:1.35}
@media(max-width:700px){.video-control-grid{grid-template-columns:1fr 1fr!important}.video-length-row{align-items:flex-start;flex-direction:column}}

/* Timeline UX upgrade: zoom readout, snap, clear playhead label, active subtitle */
.timeline-premiere .timeline-zoom-readout{
  min-width:44px;text-align:center;font-size:11px;font-weight:900;color:#dbeafe;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 8px;font-variant-numeric:tabular-nums;
}
.timeline-premiere .timeline-snap-control{
  display:inline-flex;align-items:center;gap:5px;color:#cbd5e1;font-size:11px;font-weight:800;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:3px 7px;white-space:nowrap;
}
.timeline-premiere .timeline-snap-control select{
  background:#0f172a;color:#e2e8f0;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:3px 6px;font-size:11px;outline:none;
}
.timeline-premiere .timeline-ruler-inner{position:relative;height:100%}
.timeline-premiere .tl-playhead-label{
  position:absolute;top:3px;transform:translateX(-50%);z-index:35;background:#fff;color:#0f172a;border-radius:999px;padding:2px 7px;font-size:10px;font-weight:1000;box-shadow:0 6px 18px rgba(0,0,0,.28);font-variant-numeric:tabular-nums;pointer-events:none;white-space:nowrap;
}
.timeline-premiere .tl-block{padding:0 10px!important;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;border:1px solid rgba(255,255,255,.14)!important;user-select:none;touch-action:none}
.timeline-premiere .tl-sub.active-subtitle{outline:2px solid rgba(250,204,21,.95)!important;box-shadow:0 0 0 3px rgba(250,204,21,.16),0 8px 22px rgba(0,0,0,.24)!important;z-index:22!important}
.timeline-premiere .tl-img{cursor:pointer!important}.timeline-premiere .tl-img:hover,.timeline-premiere .tl-sub:hover{filter:brightness(1.12)}
.timeline-premiere .timeline-statusbar b{font-variant-numeric:tabular-nums}
@media(max-width:760px){
  body.workspace-editor .workspace-bottom-timeline.timeline-premiere{display:flex!important;height:210px!important;max-height:210px!important;padding:8px!important}
  .timeline-premiere-shell{grid-template-columns:96px minmax(0,1fr)}
  .timeline-premiere-label-inner{width:96px}.timeline-premiere-label{font-size:11px;padding:0 6px}.timeline-premiere-label .track-tools{display:none}
  .timeline-premiere .workspace-timeline-actions{overflow-x:auto;max-width:100%;padding-bottom:2px}.timeline-premiere .workspace-zoom{width:96px!important;min-width:96px!important}
  .timeline-premiere .timeline-helpbar{display:none!important}.timeline-premiere .timeline-statusbar{font-size:10px;overflow-x:auto;white-space:nowrap}
}


/* Safe top-nav fullscreen icon: does not alter normal editor layout */
.fullscreen-icon-btn{min-width:42px!important;width:42px!important;padding-left:0!important;padding-right:0!important;font-size:18px!important;line-height:1!important}
.fullscreen-icon-btn.is-active{box-shadow:0 0 0 2px rgba(59,130,246,.45) inset!important}

/* Fullscreen timeline visibility fix: Timeline Pro is body-level fixed dock. */
html:fullscreen,
html:fullscreen body{
  background:#060b14!important;
}
html:fullscreen body.workspace-editor .workspace-bottom-timeline,
body.workspace-editor:fullscreen .workspace-bottom-timeline,
:fullscreen body.workspace-editor .workspace-bottom-timeline{
  display:flex!important;
  position:fixed!important;
  left:10px!important;
  right:10px!important;
  bottom:10px!important;
  z-index:9999!important;
}
html:fullscreen body.workspace-editor .top{
  z-index:10000!important;
}

/* Timeline compact header update: remove always-visible helper text and save vertical space */
.timeline-premiere .timeline-helpbar{display:none!important}
.timeline-premiere .workspace-timeline-head.compact{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin:0!important;padding:0!important;min-height:30px!important}
.timeline-premiere .timeline-title-row{display:flex!important;align-items:center!important;gap:7px!important;min-width:max-content!important}
.timeline-premiere .timeline-title-row h3{font-size:13px!important;line-height:1!important;margin:0!important;white-space:nowrap!important}
.timeline-premiere .timeline-help-btn{width:22px!important;height:22px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.08)!important;color:#dbeafe!important;font-size:12px!important;font-weight:900!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;padding:0!important}
.timeline-premiere .timeline-help-btn:hover{background:rgba(96,165,250,.22)!important;border-color:rgba(96,165,250,.45)!important}
.timeline-premiere .timeline-help-popover{position:absolute!important;left:10px!important;bottom:calc(100% - 6px)!important;z-index:100!important;display:grid!important;gap:4px!important;min-width:230px!important;padding:10px 12px!important;border-radius:12px!important;background:rgba(15,23,42,.98)!important;border:1px solid rgba(96,165,250,.28)!important;color:#cbd5e1!important;box-shadow:0 18px 48px rgba(0,0,0,.45)!important;font-size:11px!important;line-height:1.25!important}
.timeline-premiere .timeline-help-popover[hidden]{display:none!important}
.timeline-premiere .timeline-help-popover b{color:#fff!important;font-size:12px!important;margin-bottom:2px!important}
.timeline-premiere .workspace-timeline-actions{gap:5px!important;flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:thin!important;padding-bottom:1px!important}
.timeline-premiere .workspace-timeline-actions .btn{min-height:28px!important;padding:5px 9px!important;font-size:11px!important;border-radius:10px!important;white-space:nowrap!important}
.timeline-premiere .workspace-zoom{width:118px!important;min-width:96px!important;max-width:150px!important}
.timeline-premiere .timeline-preview-transport{grid-template-columns:auto auto minmax(220px,1fr)!important;gap:6px!important;padding:4px 7px!important;margin:2px 0 0!important;min-height:30px!important;border-radius:12px!important}
.timeline-premiere .timeline-preview-transport .btn{min-height:26px!important;padding:5px 8px!important;font-size:11px!important;border-radius:9px!important}
.timeline-premiere .timeline-preview-progress,.timeline-premiere .timeline-preview-label{display:none!important}
.timeline-premiere .timeline-timecode{font-size:11px!important;min-width:50px!important}
.timeline-premiere .timeline-scrub-wrap{gap:6px!important;min-width:220px!important}
.timeline-premiere .track-list{margin-top:0!important}
.timeline-premiere .timeline-statusbar{font-size:10px!important;line-height:1.1!important;min-height:16px!important;padding:0 3px!important}
body.workspace-editor .workspace-bottom-timeline.timeline-premiere{gap:5px!important;padding:8px!important}
@media(max-height:760px) and (min-width:721px){body.workspace-editor{--workspace-timeline-h:196px!important}body.workspace-editor .workspace-bottom-timeline.timeline-premiere{height:196px!important;max-height:196px!important}}
@media(max-width:760px){.timeline-premiere .timeline-help-popover{left:8px!important;right:8px!important;min-width:0!important}.timeline-premiere .timeline-preview-transport{grid-template-columns:auto auto 1fr!important}.timeline-premiere .timeline-scrub-wrap{min-width:130px!important}.timeline-premiere .workspace-timeline-actions{max-width:100%!important}}

/* Compact timeline height fix: remove extra blank area under status bar */
body.workspace-editor{
  --workspace-timeline-h:210px!important;
}
body.workspace-editor .pro-wrap{
  padding-bottom:calc(var(--workspace-timeline-h) + 34px)!important;
}
body.workspace-editor .wizard-grid{
  margin-bottom:calc(var(--workspace-timeline-h) + 24px)!important;
}
body.workspace-editor .simple-workspace-head{
  bottom:calc(var(--workspace-timeline-h) + 22px)!important;
}
body.workspace-editor .workspace-bottom-timeline.timeline-premiere{
  height:var(--workspace-timeline-h)!important;
  max-height:var(--workspace-timeline-h)!important;
  min-height:0!important;
  gap:4px!important;
  padding:8px!important;
}
body.workspace-editor .workspace-bottom-timeline.timeline-premiere .track-list{
  flex:0 1 auto!important;
  height:calc(var(--workspace-timeline-h) - 96px)!important;
  max-height:calc(var(--workspace-timeline-h) - 96px)!important;
  min-height:72px!important;
  overflow:auto!important;
}
body.workspace-editor .workspace-bottom-timeline.timeline-premiere .timeline-premiere-shell{
  height:100%!important;
}
body.workspace-editor .workspace-bottom-timeline.timeline-premiere .timeline-statusbar{
  flex:0 0 14px!important;
  min-height:14px!important;
  margin:0!important;
  padding:0 4px!important;
  align-items:center!important;
}
@media(max-height:760px) and (min-width:721px){
  body.workspace-editor{--workspace-timeline-h:184px!important;}
  body.workspace-editor .workspace-bottom-timeline.timeline-premiere .track-list{
    height:calc(var(--workspace-timeline-h) - 90px)!important;
    max-height:calc(var(--workspace-timeline-h) - 90px)!important;
  }
}
@media(max-width:760px){
  body.workspace-editor{--workspace-timeline-h:192px!important;}
  body.workspace-editor .workspace-bottom-timeline.timeline-premiere{
    height:var(--workspace-timeline-h)!important;
    max-height:var(--workspace-timeline-h)!important;
  }
}

/* =====================================================================
   Timeline dock gap fix v2
   Fixes large blank space above Timeline Pro by docking the workspace grid
   between the top nav and the fixed bottom timeline, instead of reserving
   timeline height twice with padding/margins.
   ===================================================================== */
@media (min-width:721px){
  body.workspace-editor{
    --workspace-editor-top:80px!important;
    --workspace-timeline-gap:12px!important;
  }
  body.workspace-editor .pro-wrap{
    height:100vh!important;
    max-height:100vh!important;
    min-height:0!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  body.workspace-editor .wizard-grid{
    position:fixed!important;
    top:var(--workspace-editor-top)!important;
    left:calc(10px + var(--workspace-rail-w, 94px) + var(--workspace-gutter, 12px))!important;
    right:10px!important;
    bottom:calc(var(--workspace-timeline-h, 182px) + 10px + var(--workspace-timeline-gap))!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }
  body.workspace-editor .simple-workspace-head{
    top:var(--workspace-editor-top)!important;
    bottom:calc(var(--workspace-timeline-h, 182px) + 10px + var(--workspace-timeline-gap))!important;
  }
  body.workspace-editor .wizard-card,
  body.workspace-editor .previewBox{
    height:100%!important;
    max-height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.workspace-editor .wizard-card{overflow-y:auto!important;}
  body.workspace-editor .previewBox > .preview-scroll{
    min-height:0!important;
    height:100%!important;
  }
  body.workspace-editor .workspace-bottom-timeline.timeline-premiere,
  body.workspace-editor .workspace-bottom-timeline{
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    height:var(--workspace-timeline-h, 182px)!important;
    max-height:var(--workspace-timeline-h, 182px)!important;
    margin:0!important;
  }
}
@media (max-height:760px) and (min-width:721px){
  body.workspace-editor{--workspace-editor-top:74px!important;--workspace-timeline-gap:8px!important;}
}

/* Timeline ruler transport compact update: remove extra transport row and put Play/Stop in ruler label cell */
.timeline-premiere .timeline-preview-transport{display:none!important}
.timeline-premiere .timeline-premiere-ruler-spacer{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  padding:0 6px!important;height:28px!important;min-height:28px!important;overflow:hidden!important;
}
.timeline-premiere .timeline-ruler-transport{display:flex!important;align-items:center!important;gap:5px!important;width:100%!important;min-width:0!important}
.timeline-premiere .timeline-ruler-transport .btn{min-height:24px!important;height:24px!important;padding:3px 7px!important;font-size:10px!important;border-radius:8px!important;white-space:nowrap!important;line-height:1!important}
.timeline-premiere .timeline-ruler-transport .timeline-timecode{font-size:10px!important;min-width:42px!important;font-weight:900!important;color:#dbeafe!important;font-variant-numeric:tabular-nums!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important}
.timeline-premiere .timeline-premiere-ruler{height:28px!important;min-height:28px!important}
.timeline-premiere .timeline-premiere-shell{grid-template-rows:auto!important}
.timeline-premiere .timeline-premiere-scroll{min-height:0!important}
@media(max-width:760px){.timeline-premiere .timeline-ruler-transport .timeline-timecode{display:none!important}.timeline-premiere .timeline-ruler-transport .btn{padding:3px 6px!important}}

/* Template tag visibility control */
.inline-check{display:flex;align-items:center;gap:8px;background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.22);border-radius:12px;padding:10px 12px;color:#e5e7eb;font-size:13px;font-weight:800}.inline-check input{width:auto;min-width:16px}

/* Wider workspace timeline label column: +50% for readable track names */
body.workspace-editor .timeline-premiere-shell{grid-template-columns:177px minmax(0,1fr)!important}
body.workspace-editor .timeline-premiere-label-inner{width:177px!important}
body.workspace-editor .timeline-pro{--tl-label-w:168px}
@media(max-width:760px){body.workspace-editor .timeline-premiere-shell{grid-template-columns:150px minmax(0,1fr)!important}body.workspace-editor .timeline-premiere-label-inner{width:150px!important}body.workspace-editor .timeline-pro{--tl-label-w:129px}}


/* Timeline voice waveform fix: one continuous waveform clipped inside the voice clip */
.timeline-pro .tl-voice-with-wave,
.timeline-premiere .tl-voice-with-wave{
  overflow:hidden!important;
  position:absolute!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
}
.timeline-pro .tl-voice-label,
.timeline-premiere .tl-voice-label{
  position:relative!important;
  z-index:3!important;
  display:inline-flex!important;
  align-items:center!important;
  height:100%!important;
  padding:0 7px!important;
  border-radius:8px!important;
  background:rgba(15,23,42,.36)!important;
  color:#fff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45)!important;
}
.timeline-pro .tl-voice-with-wave .tl-waveform,
.timeline-premiere .tl-voice-with-wave .tl-waveform{
  position:absolute!important;
  inset:3px 6px!important;
  display:grid!important;
  grid-template-columns:repeat(var(--wave-bars,180),minmax(1px,1fr))!important;
  align-items:center!important;
  gap:1px!important;
  padding:0!important;
  opacity:.62!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.timeline-pro .tl-voice-with-wave .tl-waveform span,
.timeline-premiere .tl-voice-with-wave .tl-waveform span{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:var(--h,42%)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  align-self:center!important;
}
.timeline-pro .track-lane>.tl-waveform,
.timeline-premiere-lane>.tl-waveform{
  display:none!important;
}


/* Timeline Pro intro / voice / outro tracks */
.timeline-premiere .tl-music{background:linear-gradient(135deg,#9333ea,#ec4899)!important;color:#fff!important}
.timeline-premiere .tl-fx{background:linear-gradient(135deg,#475569,#64748b)!important;color:#e2e8f0!important}
.timeline-premiere .tl-text-intro,.timeline-premiere .tl-text-outro{background:linear-gradient(135deg,#92400e,#f97316)!important;opacity:.9!important}
.timeline-premiere-lane[data-track="music"] .tl-block{top:7px!important;height:28px!important}
.timeline-premiere-lane[data-track="voice"] .tl-voice-with-wave{top:7px!important;height:28px!important}
.timeline-premiere .tl-music.muted{opacity:.55!important;filter:saturate(.6)!important}
.timeline-premiere .tl-block[data-timeline-phase]{cursor:pointer!important}

/* ── Mode pill toggle ─────────────────── */
.mode-pill-wrap{
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:2px;
  gap:2px;
}
.mode-pill-btn{
  border:none;
  background:transparent;
  color:rgba(255,255,255,.6);
  font-size:13px;
  font-weight:600;
  padding:4px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .18s,color .18s;
  white-space:nowrap;
}
.mode-pill-btn.active{
  background:#2563eb;
  color:#fff;
  box-shadow:0 1px 6px rgba(37,99,235,.45);
}
.mode-pill-btn:hover:not(.active){
  background:rgba(255,255,255,.1);
  color:#fff;
}
/* ── Pro tab dim in beginner ──────────── */
.simple-tab.pro-tab:not(.active){
  opacity:.45;
  cursor:not-allowed;
}
/* ── Beginner/pro hint link ───────────── */
.beginner-pro-hint{
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,.55);
  text-align:center;
}
.link-btn{
  background:none;
  border:none;
  color:#60a5fa;
  font-size:12px;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
}
.link-btn:hover{ color:#93c5fd; }

/* ── Active image card: full-width expanded layout ────────────────────────── */

/* Gallery switches to a two-zone layout when a card is expanded:
   - non-active thumbs stay in a compact strip on the left/top
   - the active card takes full width below them */
.image-panel.active .bg-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}

/* Non-active cards: compact fixed-width thumbnail */
.image-panel.active .bg-gallery .bg-thumb:not(.active) {
  width: 130px;
  flex: 0 0 130px;
}
.image-panel.active .bg-gallery .bg-thumb:not(.active) img {
  aspect-ratio: 1/1;
}
/* Hide heavy controls on collapsed cards */
.image-panel.active .bg-gallery .bg-thumb:not(.active) .thumb-meta,
.image-panel.active .bg-gallery .bg-thumb:not(.active) .thumb-actions,
.image-panel.active .bg-gallery .bg-thumb:not(.active) .mini-note {
  display: none;
}

/* Active (expanded) card: full row, internal horizontal layout */
.image-panel.active .bg-gallery .bg-thumb.active {
  flex: 1 1 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: auto;
  gap: 16px;
  align-items: start;
  padding: 14px;
  min-width: 0;
}

/* Left column: image thumbnail */
.image-panel.active .bg-gallery .bg-thumb.active > img {
  width: 180px;
  height: 135px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 12px;
  grid-column: 1;
  grid-row: 1 / 4;
}

/* Order badge and drag handle still overlay the image */
.image-panel.active .bg-gallery .bg-thumb.active > .order-badge {
  top: 22px;
  left: 22px;
}
.image-panel.active .bg-gallery .bg-thumb.active > .drag-handle {
  top: 22px;
  right: auto;
  left: 108px;
}

/* Right column: all meta/controls */
.image-panel.active .bg-gallery .bg-thumb.active > .thumb-meta {
  grid-column: 2;
  grid-row: 1;
  gap: 10px;
  margin-top: 0;
  min-width: 0;
}

/* Actions row below, spanning right column */
.image-panel.active .bg-gallery .bg-thumb.active > .thumb-actions {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

/* Range rows: always 4-col on wide, 2-col on medium */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row.three {
  grid-template-columns: repeat(3, 1fr);
}

/* Role/scene rows: 2-col */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-role-row,
.image-panel.active .bg-gallery .bg-thumb.active .thumb-scenes-row {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Slider label styling */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-meta small {
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 3px;
  white-space: nowrap;
}

/* mini-note full width */
.image-panel.active .bg-gallery .bg-thumb.active .mini-note {
  grid-column: 1 / -1;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* video badge positioning */
.image-panel.active .bg-gallery .bg-thumb.active > .media-badge {
  left: 22px;
  top: 110px;
}

/* Responsive: stack on narrow screens */
@media (max-width: 680px) {
  .image-panel.active .bg-gallery .bg-thumb.active {
    grid-template-columns: 1fr;
  }
  .image-panel.active .bg-gallery .bg-thumb.active > img {
    width: 100%;
    height: auto;
    grid-row: 1;
  }
  .image-panel.active .bg-gallery .bg-thumb.active > .thumb-meta {
    grid-column: 1;
    grid-row: 2;
  }
  .image-panel.active .bg-gallery .bg-thumb.active > .thumb-actions {
    grid-column: 1;
    grid-row: 3;
    grid-template-columns: repeat(3, 1fr);
  }
  .image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Correction: thumb-actions is inside thumb-meta, not direct child ─────── */

/* Override the grid child rules to work with actual DOM structure */
.image-panel.active .bg-gallery .bg-thumb.active {
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-areas:
    "img  meta"
    "img  meta";
  gap: 16px;
  align-items: start;
}

.image-panel.active .bg-gallery .bg-thumb.active > img,
.image-panel.active .bg-gallery .bg-thumb.active > video {
  grid-area: img;
  width: 180px;
  height: 145px;
  object-fit: cover;
  border-radius: 12px;
}

.image-panel.active .bg-gallery .bg-thumb.active > .thumb-meta {
  grid-area: meta;
  margin-top: 0;
  min-width: 0;
}

/* All range rows inside the expanded card: 4 columns */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row.three {
  grid-template-columns: repeat(4, 1fr);
}

/* Actions row: 5 equal columns */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-actions {
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
}

/* Ensure sliders are full width of their cell */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row > div {
  min-width: 0;
}
.image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row input[type=range] {
  width: 100%;
}

/* Each small label above a slider */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-meta small {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Role row and scene row: 2 columns */
.image-panel.active .bg-gallery .bg-thumb.active .thumb-role-row,
.image-panel.active .bg-gallery .bg-thumb.active .thumb-scenes-row {
  grid-template-columns: 1fr 1fr;
}

/* Narrow screen: stack image above meta */
@media (max-width: 640px) {
  .image-panel.active .bg-gallery .bg-thumb.active {
    grid-template-columns: 1fr;
    grid-template-areas: "img" "meta";
  }
  .image-panel.active .bg-gallery .bg-thumb.active > img {
    width: 100%;
    height: auto;
  }
  .image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row,
  .image-panel.active .bg-gallery .bg-thumb.active .thumb-range-row.three {
    grid-template-columns: repeat(2, 1fr);
  }
  .image-panel.active .bg-gallery .bg-thumb.active .thumb-actions {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Content tab: 3-mode input selector ──────────────────────────── */
.input-mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.input-mode-tab {
  flex: 1 1 auto;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.7);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-align: center;
  white-space: nowrap;
}
.input-mode-tab:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.input-mode-tab.active {
  background: #2563eb;
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 2px 12px rgba(37,99,235,.35);
}

/* Panels */
.input-mode-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  animation: fadeSlideIn .18s ease;
}
.input-mode-panel.active {
  display: flex;
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Description line above each panel */
.input-mode-desc {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border-left: 3px solid #2563eb;
  border-radius: 0 8px 8px 0;
}

/* URL input: full-width input + button side by side */
.inline-input {
  display: flex;
  gap: 8px;
}
.inline-input input {
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 11px 14px;
  font-size: 14px;
  min-width: 0;
}
.inline-input input:focus {
  outline: none;
  border-color: #60a5fa;
}

/* Hint text below a panel */
.input-mode-hint {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-top: 2px;
}

/* "Settings used" note in URL panel — shows the user which language/voice/etc
   will be applied when they click Read & Create. Makes implicit state explicit. */
.settings-used-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(37,99,235,.07);
  border: 1px solid rgba(96,165,250,.18);
  border-radius: 10px;
  display: none;          /* hidden until JS populates it */
}
.settings-used-note.show { display: block; }
.settings-used-note b { color: #f59e0b; font-weight: 700; }
.settings-used-note .sun-label { color: rgba(255,255,255,.46); font-weight: 600; margin-right: 3px; }
.settings-used-note .sun-row { display: inline-block; margin-right: 12px; }

/* Textarea inside panels */
.input-mode-panel textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 12px 14px;
  font-size: 14px;
  resize: vertical;
  min-height: 90px;
  box-sizing: border-box;
  line-height: 1.6;
}
.input-mode-panel textarea:focus {
  outline: none;
  border-color: #60a5fa;
}

/* Actions row inside topic/script panels */
.input-mode-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.input-mode-actions .inline-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}
.input-mode-actions select {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 7px 10px;
  font-size: 13px;
}
.input-mode-actions .btn.primary {
  margin-left: auto;
  white-space: nowrap;
}

.btn.primary {
  background: #2563eb;
  border-color: #60a5fa;
  color: #fff;
}
.btn.primary:hover {
  background: #1d4ed8;
}

@media (max-width: 560px) {
  .input-mode-tabs { flex-direction: column; }
  .inline-input { flex-direction: column; }
  .input-mode-actions { flex-direction: column; align-items: stretch; }
  .input-mode-actions .btn.primary { margin-left: 0; }
}

/* ── Design tab: quick row ──────────────────────────────────────── */
.design-quick-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.design-field-inline {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 160px;
  min-width: 0;
}
.design-field-inline label {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  font-weight: 600;
}
.design-field-inline select {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 9px 12px;
  font-size: 13px;
}
.design-field-inline .toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 8px 0;
  color: rgba(255,255,255,.75);
}

/* ── Visual template grid ───────────────────────────────────────── */
.design-section-label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.tpl-visual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.tpl-visual-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.tpl-visual-btn:hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
}
.tpl-visual-btn.active {
  border-color: #60a5fa;
  background: rgba(37,99,235,.15);
  box-shadow: 0 0 0 2px rgba(37,99,235,.3);
}
.tvb-preview {
  display: block;
  width: 100%;
  height: 42px;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
}
.tvb-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 0 0 7px 7px;
  opacity: .85;
}
.tvb-line {
  position: absolute;
  top: 11px;
  left: 7px;
  right: 7px;
  height: 6px;
  background: rgba(255,255,255,.5);
  border-radius: 3px;
}
.tvb-line2 {
  top: 22px;
  right: 20px;
  height: 4px;
  background: rgba(255,255,255,.28);
}
.tvb-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.tvb-desc {
  display: block;
  font-size: 10px;
  color: rgba(255,255,255,.45);
}
@media (max-width: 640px) {
  .tpl-visual-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .tvb-label { font-size: 10px; }
}
@media (max-width: 420px) {
  .tpl-visual-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Accordion ──────────────────────────────────────────────────── */
.design-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.accordion-item {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}
.accordion-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.accordion-head:hover {
  background: rgba(255,255,255,.06);
}
.accordion-item.open .accordion-head {
  background: rgba(37,99,235,.12);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.accordion-icon { font-size: 16px; flex: 0 0 auto; }
.accordion-title { font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.accordion-sub { font-size: 11px; color: rgba(255,255,255,.45); flex: 1; }
.accordion-chevron {
  font-size: 18px;
  color: rgba(255,255,255,.4);
  transition: transform .2s;
  flex: 0 0 auto;
}
.accordion-item.open .accordion-chevron { transform: rotate(90deg); }

.accordion-body {
  display: none;
  padding: 14px;
}
.accordion-item.open .accordion-body { display: block; }

.acc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.acc-grid .full { grid-column: 1 / -1; }
.acc-grid label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
  font-weight: 600;
}
.acc-grid input[type=color] { width: 100%; height: 38px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: transparent; cursor: pointer; }
.acc-grid input[type=range] { width: 100%; }
.acc-grid input[type=text],
.acc-grid input:not([type]),
.acc-grid textarea,
.acc-grid select {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 9px 12px;
  font-size: 13px;
  box-sizing: border-box;
}
.acc-grid textarea { resize: vertical; min-height: 64px; }
.acc-hint {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  line-height: 1.5;
}
.acc-apply-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.acc-apply-row .btn { flex: 1 1 auto; }

/* ── Bottom actions row ─────────────────────────────────────────── */
.design-autofix-row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.design-autofix-row .btn { flex: 1 1 auto; }

@media (max-width: 560px) {
  .design-quick-row { flex-direction: column; align-items: stretch; }
  .acc-grid { grid-template-columns: 1fr; }
}

/* ── Voice tab: guided steps ─────────────────────────────────────── */
.voice-guide-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vgs-step {
  display: flex;
  gap: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  padding: 16px;
  align-items: flex-start;
}
.vgs-num {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.vgs-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vgs-title { font-size: 14px; font-weight: 800; color: #fff; }
.vgs-desc { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; }
.vgs-action { width: 100%; margin-top: 4px; }

/* ── Voice mood grid ─────────────────────────────────────────────── */
.voice-mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.voice-mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px 8px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-size: 18px;
  text-align: center;
}
.voice-mood-btn span { display: block; font-size: 11px; font-weight: 700; color: #fff; }
.voice-mood-btn small { display: block; font-size: 10px; color: rgba(255,255,255,.4); }
.voice-mood-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.25); }
.voice-mood-btn.active {
  background: rgba(37,99,235,.2);
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}
.voice-mood-btn.active span { color: #93c5fd; }

/* ── Animation style grid ────────────────────────────────────────── */
.anim-style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.anim-style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.55);
  cursor: pointer;
  font-size: 18px;
  transition: background .15s, border-color .15s;
}
.anim-style-btn span { display: block; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.7); }
.anim-style-btn:hover { background: rgba(255,255,255,.09); }
.anim-style-btn.active {
  background: rgba(37,99,235,.2);
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}
.anim-style-btn.active span { color: #93c5fd; }

/* ── Advanced voice/subtitle accordion ───────────────────────────── */
.voice-adv-accordion { margin-top: 4px; }
.voice-adv-head {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 9px 14px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .15s, color .15s;
}
.voice-adv-head:hover { background: rgba(255,255,255,.08); color: #fff; }
.voice-adv-head .accordion-chevron { font-size: 16px; transition: transform .2s; }
.voice-adv-body {
  display: none;
  padding: 14px 0 4px;
}
.vab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.vab-grid .full { grid-column: 1 / -1; }
.vab-grid label {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.6);
  margin-bottom: 4px;
  font-weight: 600;
}
.vab-grid select,
.vab-grid input[type=text],
.vab-grid input:not([type]) {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,23,42,.85);
  color: #fff;
  padding: 8px 10px;
  font-size: 12px;
  box-sizing: border-box;
}
.vab-grid input[type=range] { width: 100%; }

@media (max-width: 560px) {
  .voice-mood-grid { grid-template-columns: repeat(3, 1fr); }
  .anim-style-grid { grid-template-columns: repeat(2, 1fr); }
  .vab-grid { grid-template-columns: 1fr; }
}

/* ── Pro step buttons inside input panels ────────────────────────── */
.url-pro-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 10px;
}
.pro-steps-label {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  margin-right: 2px;
}
.url-pro-steps .btn {
  font-size: 12px;
  padding: 6px 12px;
}

/* ── P1: Visual step progress bar ──────────────────────────────── */
.fpc-progress-bar-wrap {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px 16px 12px;
  margin: 10px 0;
}
.fpc-progress-steps {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fpc-ps {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  transition: background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.fpc-ps.active {
  color: #fff;
  border-color: #2563eb;
  background: rgba(37,99,235,.18);
  animation: fpcPulse 1.2s ease-in-out infinite;
}
.fpc-ps.done {
  color: #4ade80;
  border-color: rgba(74,222,128,.3);
  background: rgba(74,222,128,.08);
}
@keyframes fpcPulse {
  0%,100% { opacity: 1; }
  50% { opacity: .65; }
}
.fpc-progress-track {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.fpc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,#2563eb,#60a5fa);
  border-radius: 999px;
  transition: width .5s ease;
  width: 0%;
}
.fpc-progress-label {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-align: right;
}

/* ── P2: "What next?" nudge banner ─────────────────────────────── */
.fpc-next-nudge {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(37,99,235,.14);
  border: 1px solid rgba(96,165,250,.3);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  animation: nudgeIn .3s ease;
}
@keyframes nudgeIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.fpc-nudge-text {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  flex: 1 1 auto;
}
.fpc-nudge-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.fpc-nudge-btn {
  background: #2563eb;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.fpc-nudge-btn:hover { background: #1d4ed8; }
.fpc-nudge-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  flex: 0 0 auto;
  line-height: 1;
}
.fpc-nudge-dismiss:hover { color: #fff; }

/* ── P3: Friendly error action link ───────────────────────────── */
.status-action-link {
  color: #60a5fa;
  text-decoration: underline;
  font-weight: 600;
  margin-left: 8px;
}
.status-action-link:hover { color: #93c5fd; }

/* ── P4: Export platform card grid ────────────────────────────── */
.export-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.export-platform-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.export-platform-card:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
}
.export-platform-card.active {
  border-color: #60a5fa;
  background: rgba(37,99,235,.15);
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}
.epc-icon {
  font-size: 20px;
  line-height: 1;
  margin-bottom: 2px;
  font-style: normal;
}
.epc-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.epc-size {
  font-size: 11px;
  color: rgba(255,255,255,.4);
}
.epc-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.epc-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.epc-btn.png {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
}
.epc-btn.png:hover { background: rgba(255,255,255,.18); }
.epc-btn.mp4 {
  background: rgba(245,158,11,.15);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.25);
}
.epc-btn.mp4:hover { background: rgba(245,158,11,.25); }

.export-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.1);
  border-radius: 10px;
}
.export-custom-label {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  flex: 1 1 auto;
}

@media (max-width: 600px) {
  .export-platform-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .export-platform-grid { grid-template-columns: 1fr; }
}

/* ── Wide screen previewBox fix (1280px+) ──────────────────────── */
@media (min-width: 1280px) {
  .wizard-grid {
    grid-template-columns: minmax(420px, 1fr) minmax(460px, 560px) !important;
  }
  .previewBox { max-width: 560px; }
  .canvasWrap canvas { max-width: min(100%, 520px); width: auto; height: auto; }
}
@media (min-width: 1600px) {
  .wizard-grid {
    grid-template-columns: minmax(480px, 1fr) minmax(500px, 620px) !important;
  }
  .previewBox { max-width: 620px; }
  .canvasWrap canvas { max-width: min(100%, 580px); }
}
@media (min-width: 1920px) {
  .wizard-grid {
    grid-template-columns: minmax(520px, 1fr) minmax(540px, 680px) !important;
  }
  .previewBox { max-width: 680px; }
  .canvasWrap canvas { max-width: min(100%, 640px); }
}
/* workspace-editor has its own max-width and grid rules already defined above */

/* ── preview-scroll wrapper: explicit layout ────────────────────── */
.previewBox > .preview-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}

/* Children of preview-scroll: don't shrink */
.preview-scroll > .preview-head,
.preview-scroll > .preview-head-compact,
.preview-scroll > .score-card,
.preview-scroll > .canvasWrap { flex-shrink: 0; }

/* score-inline-only: hidden when content moved into compact head */
.score-inline-only { display: none !important; }

/* preview-head-compact: horizontal toolbar */
.preview-head-compact {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap;
  padding: 6px 0;
}
.preview-head-compact .preview-score-inline {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.preview-head-compact .preview-head-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.preview-head-compact .preview-head-actions .btn {
  padding: 7px 12px;
  font-size: 12px;
}

/* workspace-editor has its own display:grid on .preview-scroll — do not override */

/* ── P1: Project hub redesign ───────────────────────────────────── */
.project-name-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 14px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 14px;
}
.project-name-wrap {
  flex: 1 1 220px;
  min-width: 0;
}
.project-name-wrap input {
  width: 100%;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 14px;
  box-sizing: border-box;
}
.project-name-wrap input:focus {
  outline: none;
  border-color: #60a5fa;
}
.project-name-hint {
  display: block;
  font-size: 11px;
  color: rgba(255,255,255,.35);
  margin-top: 5px;
  padding-left: 2px;
}
.project-hub-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.project-hub-actions .btn {
  padding: 9px 13px;
  font-size: 12px;
}

/* Hub tabs */
.project-hub-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.phub-tab {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.6);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.phub-tab:hover { background: rgba(255,255,255,.09); color: #fff; }
.phub-tab.active {
  background: rgba(37,99,235,.18);
  border-color: #60a5fa;
  color: #93c5fd;
}
.phub-panel { display: none; }
.phub-panel.active { display: block; }

/* Project card grid */
.phub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.phub-empty {
  font-size: 13px;
  color: rgba(255,255,255,.4);
  padding: 20px 0;
  text-align: center;
}
.phub-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  flex-direction: column;
}
.phub-card:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
}
.phub-card-thumb {
  height: 72px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 6px 8px;
  gap: 4px;
}
.phub-card-tpl {
  font-size: 10px;
  font-weight: 800;
  color: rgba(255,255,255,.75);
  background: rgba(0,0,0,.35);
  border-radius: 6px;
  padding: 2px 7px;
  text-transform: capitalize;
}
.phub-card-lang {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.3);
  border-radius: 6px;
  padding: 2px 7px;
  text-transform: uppercase;
}
.phub-card-body {
  padding: 8px 10px 4px;
  flex: 1;
}
.phub-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phub-card-meta {
  font-size: 10px;
  color: rgba(255,255,255,.35);
}
.phub-card-actions {
  display: flex;
  gap: 4px;
  padding: 6px 8px 8px;
  align-items: center;
}
.phub-action-open {
  flex: 1;
  background: #2563eb;
  border: none;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.phub-action-open:hover { background: #1d4ed8; }
.phub-action-dup,
.phub-action-del {
  background: rgba(255,255,255,.07);
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 12px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phub-action-dup:hover { background: rgba(255,255,255,.14); color: #fff; }
.phub-action-del:hover { background: rgba(239,68,68,.2); color: #f87171; }

/* ── P2: Export brand row ───────────────────────────────────────── */
.export-brand-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  margin-bottom: 14px;
}
.export-brand-field {
  flex: 1 1 200px;
  min-width: 0;
}
.export-brand-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  margin-bottom: 5px;
}
.export-brand-field input {
  width: 100%;
  background: rgba(15,23,42,.85);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #fff;
  padding: 9px 12px;
  font-size: 13px;
  box-sizing: border-box;
}
.export-brand-hint {
  font-size: 11px;
  color: rgba(255,255,255,.35);
  flex: 1 1 100%;
  margin-top: 2px;
}

@media (max-width: 560px) {
  .phub-grid { grid-template-columns: repeat(2, 1fr); }
  .project-name-row { flex-direction: column; }
  .project-hub-actions { width: 100%; }
}

/* ── P4: Mobile nav hamburger ───────────────────────────────────── */
.nav-hamburger { display: none; font-size: 20px; padding: 9px 13px; }

.nav-overflow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 560px) {
  .nav-hamburger { display: inline-flex; }

  .nav-overflow {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    background: rgba(10,17,31,.97);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 10px;
    gap: 6px;
    margin-top: 6px;
  }
  .nav-overflow.open { display: flex; }

  .nav-overflow .btn,
  .nav-overflow a.btn {
    width: 100%;
    justify-content: center;
    padding: 11px 14px;
  }

  .nav-overflow .autosave-pill {
    text-align: center;
    width: 100%;
    padding: 6px;
  }

  /* Keep brand row compact */
  .top { gap: 10px; }
  .brand h1 { font-size: 18px; }
  .brand .sub { display: none; }
}

/* ── Subtitle style/effect visual picker ───────────────────────── */
.vab-hint-small {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  font-weight: 400;
}
.sub-style-picker,
.sub-fx-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.ssp-btn {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.09);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, transform .1s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ssp-btn:hover {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.07);
  transform: translateY(-1px);
}
.ssp-btn.active {
  border-color: #60a5fa;
  background: rgba(37,99,235,.14);
  box-shadow: 0 0 0 2px rgba(37,99,235,.2);
}
.ssp-preview {
  height: 52px;
  background: #070d1a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4px;
  flex-shrink: 0;
}
.ssp-label {
  font-size: 10px;
  font-weight: 700;
  color: #e2e8f0;
  padding: 4px 6px 2px;
  line-height: 1.2;
}
.ssp-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px 4px;
  border-radius: 4px;
  display: block;
  text-align: center;
}
.tag-news { color: #f87171; }
.tag-social { color: #c084fc; }
.tag-anim { color: #4ade80; }
.tag-calm { color: #38bdf8; }
.tag-urdu { color: #d4af37; }

/* FX picker rows are wider */
.sub-fx-picker {
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
}
.ssp-fx-icon {
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  margin-bottom: 3px;
}
.ssp-btn.active .ssp-fx-icon { color: #60a5fa; }
.ssp-fx-desc {
  font-size: 9px;
  color: rgba(255,255,255,.4);
  line-height: 1.3;
  padding: 0 4px 4px;
}

/* ── Mini preview animations ──────────────────────────────────── */
.ssp-karaoke { display: flex; gap: 3px; align-items: center; }
.sk-w { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.35); transition: color .3s; }
.sk-w.active { color: #f59e0b; }

.ssp-kpro { width: 72px; }
.skp-words { display: flex; gap: 3px; justify-content: center; margin-bottom: 4px; }
.skp-bar { height: 2px; background: rgba(255,255,255,.1); border-radius: 1px; overflow: hidden; }
.skp-fill { height: 100%; background: #f59e0b; border-radius: 1px; animation: sspkpfill 3s linear infinite; }
@keyframes sspkpfill { 0%{width:0%} 100%{width:100%} }

.ssp-focus { display: flex; gap: 3px; }
.sf-w { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.18); }
.sf-w.active { color: #f59e0b; opacity: 1 !important; }

.ssp-wordpop { display: flex; align-items: center; justify-content: center; }
.swp-w { font-size: 14px; font-weight: 900; color: #f59e0b; animation: sspwpop .9s ease-in-out infinite alternate; }
@keyframes sspwpop { 0%{transform:scale(1)} 100%{transform:scale(1.15)} }

.ssp-typewriter { display: flex; align-items: center; gap: 0; }
.stw-t { font-size: 11px; font-weight: 800; color: #fff; }
.stw-cur { font-size: 12px; font-weight: 900; color: #f59e0b; animation: ssptw .8s step-end infinite; }
@keyframes ssptw { 0%,100%{opacity:1} 50%{opacity:0} }

.ssp-glass { width: 72px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 5px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.sg-line { height: 6px; width: 60px; border-radius: 3px; background: rgba(255,255,255,.7); }
.sg-line2 { width: 40px; background: rgba(255,255,255,.4); }

.ssp-clean { width: 72px; background: rgba(0,0,0,.28); border-radius: 6px; padding: 5px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.sc-line { height: 6px; width: 60px; border-radius: 3px; background: rgba(255,255,255,.7); }
.sc-line2 { width: 38px; background: rgba(255,255,255,.35); }

.ssp-lt { width: 76px; background: rgba(15,23,42,.94); border-radius: 6px; padding: 5px 5px 5px 10px; position: relative; overflow: hidden; }
.slt-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #f59e0b; }
.slt-l { height: 6px; border-radius: 3px; background: rgba(255,255,255,.8); margin-bottom: 3px; }
.slt-l2 { width: 60%; background: rgba(255,255,255,.4); }

.ssp-mn { width: 76px; background: rgba(15,23,42,.97); border-radius: 5px; padding: 5px; }
.smn-top { height: 2px; background: #3b82f6; border-radius: 1px; margin-bottom: 4px; }
.smn-l { height: 6px; border-radius: 3px; background: rgba(255,255,255,.8); margin-bottom: 3px; }
.smn-l2 { width: 55%; background: rgba(255,255,255,.35); }

.ssp-tiktok { display: flex; gap: 3px; align-items: center; }
.stt-w { font-size: 11px; font-weight: 900; color: #fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.stt-a { color: #f59e0b; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

.ssp-reels { display: flex; gap: 3px; align-items: center; }
.srg-w { font-size: 10px; font-weight: 800; color: #fff; }
.srg-w.active { color: #f59e0b; text-shadow: 0 0 8px #f59e0b; animation: sspreelspulse 1s ease-in-out infinite; }
@keyframes sspreelspulse { 0%,100%{text-shadow:0 0 6px #f59e0b} 50%{text-shadow:0 0 14px #f59e0b} }

.ssp-neon { background: rgba(0,0,0,.6); border-radius: 6px; padding: 4px 8px; }
.sn-w { font-size: 11px; font-weight: 800; color: #22d3ee; animation: sspneon 1.2s ease-in-out infinite; }
@keyframes sspneon { 0%,100%{text-shadow:0 0 6px rgba(34,211,238,.5)} 50%{text-shadow:0 0 16px rgba(34,211,238,.9)} }

.ssp-alert { display: flex; gap: 3px; align-items: center; background: rgba(0,0,0,.5); border-radius: 6px; padding: 4px 6px; }
.sa-w { font-size: 10px; font-weight: 800; color: #fff; }
.sa-w.active { background: #fff; color: #111827; padding: 1px 3px; border-radius: 3px; }

.ssp-cinematic { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.scp-bar { width: 70px; height: 5px; background: rgba(0,0,0,.88); }
.scp-t { font-size: 9px; font-weight: 800; color: #fff; letter-spacing: .08em; background: rgba(0,0,0,.65); padding: 2px 6px; }

.ssp-urdu { background: rgba(0,0,0,.6); border-radius: 6px; padding: 4px 8px; }
.su-t { font-size: 12px; font-weight: 700; color: #fde68a; direction: rtl; }

.ssp-podcast { width: 72px; background: rgba(15,23,42,.94); border-radius: 5px; padding: 5px; border-bottom: 2px solid #f59e0b; }
.spd-l { height: 6px; border-radius: 3px; background: rgba(255,255,255,.75); margin-bottom: 3px; }
.spd-l2 { width: 55%; background: rgba(255,255,255,.35); }

.ssp-default { font-size: 10px; font-weight: 800; color: #64748b; }

/* ── Subtitle effect animated previews ─────────────────────────── */
.sfx-smooth,.sfx-slide,.sfx-pop,.sfx-bounce,.sfx-bsoft,.sfx-wzoom,
.sfx-kpop,.sfx-glow,.sfx-tglow,.sfx-neonpulse,.sfx-sweep,
.sfx-blurin,.sfx-slfade {
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;position:relative;overflow:hidden;
}
.sfx-word {
  font-size:11px;font-weight:800;color:#fff;
  background:rgba(0,0,0,.6);padding:4px 9px;border-radius:7px;
  white-space:nowrap;
}

/* smooth — static */
.sfx-smooth .sfx-word { color:#64748b; }

/* slide — slides up from below */
.sfx-slide .sfx-word {
  animation:sfxSlide 1.6s ease-out infinite;
}
@keyframes sfxSlide {
  0%  { opacity:0; transform:translateY(12px); }
  35% { opacity:1; transform:translateY(0); }
  75% { opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(0); }
}

/* pop — scales up */
.sfx-pop .sfx-word {
  color:#f59e0b;
  animation:sfxPop .7s ease-in-out infinite alternate;
}
@keyframes sfxPop { 0%{transform:scale(1)} 100%{transform:scale(1.18)} }

/* bounce — jumps up */
.sfx-bounce .sfx-word {
  color:#f59e0b;
  animation:sfxBnc .5s ease-in-out infinite alternate;
}
@keyframes sfxBnc { 0%{transform:translateY(0)} 100%{transform:translateY(-6px)} }

/* bounce-soft — gentle float */
.sfx-bsoft .sfx-word {
  color:#f59e0b;
  animation:sfxBsoft .9s ease-in-out infinite;
}
@keyframes sfxBsoft { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

/* word-zoom */
.sfx-wzoom .sfx-word {
  color:#f59e0b;
  animation:sfxWzoom .8s cubic-bezier(.22,1,.36,1) infinite alternate;
}
@keyframes sfxWzoom { 0%{transform:scale(1)} 100%{transform:scale(1.14)} }

/* kinetic-pop — big scale */
.sfx-kpop .sfx-word {
  color:#f59e0b;font-size:10px;
  animation:sfxKpop .5s cubic-bezier(.25,.46,.45,.94) infinite alternate;
}
@keyframes sfxKpop { 0%{transform:scale(1)} 100%{transform:scale(1.22)} }

/* glow — box pulsing golden shadow */
.sfx-glow .sfx-word {
  animation:sfxGlow 1.2s ease-in-out infinite;
}
@keyframes sfxGlow {
  0%,100% { box-shadow:0 0 6px rgba(250,204,21,.3); }
  50%     { box-shadow:0 0 18px rgba(250,204,21,.8); }
}

/* type-glow — text glow */
.sfx-tglow .sfx-word {
  color:#f59e0b;background:rgba(0,0,0,.6);
  animation:sfxTglow 1s ease-in-out infinite;
}
@keyframes sfxTglow {
  0%,100% { text-shadow:0 0 4px rgba(245,158,11,.3); }
  50%     { text-shadow:0 0 14px rgba(245,158,11,.9),0 0 26px rgba(245,158,11,.5); }
}

/* neon-pulse — cyan pulse */
.sfx-neonpulse .sfx-word {
  color:#22d3ee;background:rgba(0,0,0,.6);
  animation:sfxNeon 1s ease-in-out infinite;
}
@keyframes sfxNeon {
  0%,100% { text-shadow:0 0 6px rgba(34,211,238,.4); }
  50%     { text-shadow:0 0 18px rgba(34,211,238,.9),0 0 36px rgba(34,211,238,.4); }
}

/* highlight-sweep */
.sfx-sweep { position:relative; }
.sfx-sweep-bg {
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:60px;height:26px;
  background:rgba(245,158,11,.3);
  border-radius:5px;
  animation:sfxSweep 1.6s ease-in-out infinite;
  transform-origin:left center;
}
@keyframes sfxSweep {
  0%  { clip-path:inset(0 100% 0 0 round 5px); opacity:.8; }
  50% { clip-path:inset(0 0% 0 0 round 5px);   opacity:.8; }
  100%{ clip-path:inset(0 0% 0 0 round 5px);   opacity:0;  }
}
.sfx-sweep .sfx-word { position:relative;z-index:1; }

/* blur-in */
.sfx-blurin { gap:4px; }
.sfx-bi-w { font-size:10px;font-weight:800; }
.sfx-bi-dim { color:rgba(255,255,255,.45);filter:blur(.8px); }
.sfx-bi-on {
  color:#f59e0b;filter:blur(0);
  animation:sfxBlurin .7s ease-in-out infinite;
}
@keyframes sfxBlurin { 0%,100%{opacity:1} 50%{opacity:.75} }

/* slide-fade */
.sfx-slfade .sfx-word {
  animation:sfxSlfade 2s ease-in-out infinite;
}
@keyframes sfxSlfade {
  0%  { opacity:0; transform:translateY(-8px); }
  30% { opacity:1; transform:translateY(0); }
  70% { opacity:1; transform:translateY(0); }
  100%{ opacity:.2;transform:translateY(0); }
}

/* Quick subtitle preset cards */
.subtitle-preset-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.subtitle-preset-card {
  appearance: none;
  border: 1px solid rgba(148,163,184,.22);
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.72));
  color: #e5e7eb;
  border-radius: 14px;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
  min-height: 68px;
}
.subtitle-preset-card:hover {
  transform: translateY(-1px);
  border-color: rgba(96,165,250,.62);
  background: linear-gradient(135deg, rgba(30,41,59,.96), rgba(15,23,42,.82));
}
.subtitle-preset-card.active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96,165,250,.22), 0 14px 36px rgba(15,23,42,.28);
}
.preset-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(96,165,250,.14);
  color: #facc15;
  font-weight: 900;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.preset-copy { display: flex; flex-direction: column; min-width: 0; }
.preset-copy b { font-size: 12px; line-height: 1.15; color: #f8fafc; }
.preset-copy small { font-size: 10px; color: rgba(226,232,240,.66); line-height: 1.25; margin-top: 3px; }

.sfx-linereveal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 100%;
}
.sfx-lr {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  animation: sfxLineReveal 1.6s ease-in-out infinite;
}
.sfx-lr.l1 { width: 58px; animation-delay: 0s; }
.sfx-lr.l2 { width: 46px; animation-delay: .16s; }
.sfx-lr.l3 { width: 34px; animation-delay: .32s; }
@keyframes sfxLineReveal {
  0% { opacity: .15; transform: translateY(7px); }
  40%, 75% { opacity: 1; transform: translateY(0); }
  100% { opacity: .28; transform: translateY(0); }
}


/* Live subtitle preview */
.subtitle-live-preview-card {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 18px;
  background: radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 42%), rgba(15,23,42,.54);
}
.subtitle-live-stage {
  position: relative;
  min-height: 132px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(15,23,42,.32), rgba(2,6,23,.74)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, #111827, #0f172a 52%, #1e293b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.subtitle-live-stage.pos-top { align-items: flex-start; }
.subtitle-live-stage.pos-middle { align-items: center; }
.subtitle-live-box {
  max-width: 86%;
  padding: 10px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.62);
  color: #fff;
  text-align: center;
  line-height: 1.28;
  font-weight: 900;
  letter-spacing: -.015em;
  transition: all .18s ease;
  direction: ltr;
}
.subtitle-live-stage.rtl .subtitle-live-box { direction: rtl; font-family: 'Jameel Noori Nastaleeq', serif; line-height: 1.65; }
.subtitle-live-word { display:inline-block; margin:0 .12em; opacity:.76; transition: transform .18s ease, opacity .18s ease, color .18s ease, text-shadow .18s ease, filter .18s ease; }
.subtitle-live-word.active { opacity:1; color: var(--subtitle-active, #f59e0b); }
.subtitle-live-meta { margin-top: 8px; font-size: 11px; color: rgba(226,232,240,.72); }
.subtitle-live-stage.style-tiktok-bold .subtitle-live-box { background: transparent !important; text-shadow: 0 3px 0 rgba(0,0,0,.85), 0 0 18px rgba(0,0,0,.55); -webkit-text-stroke: 1px rgba(0,0,0,.72); font-size: 22px; }
.subtitle-live-stage.style-karaoke-pro .subtitle-live-box { background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(2,6,23,.88)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.subtitle-live-stage.style-lowerthird .subtitle-live-box,
.subtitle-live-stage.style-modern-news .subtitle-live-box { width: 82%; border-left: 8px solid var(--subtitle-active,#f59e0b); background: rgba(15,23,42,.94); border-radius: 14px; }
.subtitle-live-stage.style-breaking-alert .subtitle-live-box { width: 86%; background: linear-gradient(90deg, rgba(127,29,29,.96), rgba(15,23,42,.88), rgba(180,83,9,.96)); border: 2px solid var(--subtitle-active,#f59e0b); border-radius: 12px; text-transform: uppercase; }
.subtitle-live-stage.style-clean .subtitle-live-box { background: rgba(0,0,0,.28); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.subtitle-live-stage.style-glass .subtitle-live-box { background: rgba(255,255,255,.14); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.subtitle-live-stage.style-cinematic-pro .subtitle-live-box { background: transparent; text-shadow: 0 2px 10px rgba(0,0,0,.9); font-size: 17px; letter-spacing:.04em; }
.subtitle-live-stage.style-cinematic-pro::before,
.subtitle-live-stage.style-cinematic-pro::after { content:""; position:absolute; left:0; right:0; height:18px; background:#020617; z-index:0; }
.subtitle-live-stage.style-cinematic-pro::before { top:0; } .subtitle-live-stage.style-cinematic-pro::after { bottom:0; }
.subtitle-live-stage.style-neon-caption .subtitle-live-box { background: rgba(2,6,23,.62); color:#e0f2fe; box-shadow: 0 0 18px rgba(34,211,238,.18), inset 0 0 0 1px rgba(34,211,238,.28); }
.subtitle-live-stage.style-reels-glow .subtitle-live-word.active,
.subtitle-live-stage.style-neon-caption .subtitle-live-word.active { text-shadow: 0 0 18px var(--subtitle-active,#f59e0b); }
.subtitle-live-stage.fx-word-zoom .subtitle-live-word.active,
.subtitle-live-stage.fx-pop .subtitle-live-word.active,
.subtitle-live-stage.fx-kinetic-pop .subtitle-live-word.active { transform: scale(1.18); }
.subtitle-live-stage.fx-bounce .subtitle-live-word.active { animation: subtitleLiveBounce .65s ease-in-out infinite; }
.subtitle-live-stage.fx-bounce-soft .subtitle-live-word.active { animation: subtitleLiveSoftBounce 1.1s ease-in-out infinite; }
.subtitle-live-stage.fx-highlight-sweep .subtitle-live-word.active { border-radius: 8px; background: color-mix(in srgb, var(--subtitle-active,#f59e0b) 26%, transparent); padding: 0 .16em; }
.subtitle-live-stage.fx-blur-in .subtitle-live-word:not(.active) { filter: blur(.7px); opacity:.46; }
.subtitle-live-stage.fx-line-reveal .subtitle-live-word { animation: subtitleLiveLineReveal 1.7s ease both; }
.subtitle-live-stage.fx-neon-pulse .subtitle-live-word.active { animation: subtitleLiveNeon 1s ease-in-out infinite; }
@keyframes subtitleLiveBounce { 0%,100%{ transform: translateY(0) scale(1.08);} 50%{ transform: translateY(-5px) scale(1.14);} }
@keyframes subtitleLiveSoftBounce { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }
@keyframes subtitleLiveLineReveal { 0%{opacity:.08; transform:translateY(9px)} 42%,100%{opacity:1; transform:translateY(0)} }
@keyframes subtitleLiveNeon { 0%,100%{ text-shadow:0 0 8px var(--subtitle-active,#22d3ee);} 50%{ text-shadow:0 0 24px var(--subtitle-active,#22d3ee);} }


/* Animated intro/outro preset cards */
.io-preset-wrap{display:grid;gap:10px}
.io-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.io-preset-card{position:relative;appearance:none;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));color:#fff;border-radius:16px;padding:0 0 10px 0;text-align:left;cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow,.18s background;overflow:hidden}
.io-preset-card:hover{transform:translateY(-1px);border-color:rgba(245,158,11,.45)}
.io-preset-card.active{border-color:rgba(245,158,11,.9);box-shadow:0 0 0 1px rgba(245,158,11,.35),0 10px 26px rgba(0,0,0,.22);background:linear-gradient(180deg,rgba(245,158,11,.18),rgba(255,255,255,.04))}
.io-preset-thumb{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px 14px 0 0;background:#0a0e1a;margin-bottom:8px}
.io-preset-card b{display:block;font-size:13px;margin:0 12px 4px}
.io-preset-card span{display:block;font-size:11px;line-height:1.35;color:rgba(255,255,255,.74);margin:0 12px}
@media (max-width: 720px){.io-preset-grid{grid-template-columns:1fr}}

/* Final visible state for animated intro/outro preset cards */
.io-preset-card.active,.io-preset-card.is-selected,.io-preset-card[aria-pressed="true"]{
  border-color:#f59e0b!important;
  box-shadow:0 0 0 2px rgba(245,158,11,.75),0 14px 34px rgba(245,158,11,.22)!important;
  background:linear-gradient(180deg,rgba(245,158,11,.28),rgba(37,99,235,.10))!important;
}
.io-preset-card.is-selected b:before{content:'✓ ';color:#f59e0b;font-weight:900}

/* Customization controls panel under each preset grid */
.io-preset-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:6px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:12px}
.io-ctl{display:flex;flex-direction:column;gap:4px;min-width:0}
.io-ctl > label{font-size:11px;font-weight:600;color:rgba(255,255,255,.78);display:flex;justify-content:space-between;align-items:center;gap:8px}
.io-ctl-val{font-size:11px;color:#f59e0b;font-weight:700;font-variant-numeric:tabular-nums}
.io-ctl input[type="range"]{width:100%;accent-color:#f59e0b;height:18px}
.io-ctl select{width:100%;padding:6px 8px;font-size:12px;background:rgba(0,0,0,.30);border:1px solid rgba(255,255,255,.14);color:#fff;border-radius:8px}
.io-ctl-chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.io-ctl-chips button{appearance:none;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.85);padding:5px 10px;font-size:11px;font-weight:700;border-radius:8px;cursor:pointer;transition:.15s border-color,.15s background,.15s color}
.io-ctl-chips button:hover{border-color:rgba(245,158,11,.5)}
.io-ctl-chips button.active{background:rgba(245,158,11,.20);border-color:#f59e0b;color:#fff}
@media (max-width: 720px){.io-preset-controls{grid-template-columns:1fr}}