@font-face { font-family:'AlQalam'; src:url('../assets/fonts/alqalam.ttf?v=2') format('truetype'); font-weight:400; font-style:normal; }
@font-face { font-family:'MontserratLocal'; src:url('../assets/fonts/montserrat.ttf?v=2') format('truetype'); font-weight:100 900; font-style:normal; }
:root{
  --bg:#131511; --panel:#1c1f16; --panel2:#242819; --line:#383c29;
  --green:#7a9a3f; --gold:#c99a3f; --text:#eceadd; --muted:#9a9a86; --danger:#c05a4a;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; min-height:100vh; }

header{ padding:14px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
header h1{ font-size:15px; margin:0; }
.stepper{ display:flex; gap:0; align-items:center; }
.step-btn{ display:flex; align-items:center; gap:7px; background:none; border:none; color:var(--muted); font-size:12px; cursor:pointer; padding:7px 12px; border-radius:18px; font-weight:600; }
.step-btn .num{ width:18px; height:18px; border-radius:50%; background:var(--panel2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); }
.step-btn.active{ color:var(--text); background:var(--panel2); }
.step-btn.active .num{ background:var(--gold); border-color:var(--gold); color:#241c05; }
.step-btn.done .num{ background:var(--green); border-color:var(--green); color:#0e1206; }
.step-sep{ width:18px; height:1px; background:var(--line); }

.view{ display:none; }
.view.active{ display:block; }

/* ---- generator views (step 1 & 2) ---- */
.gen-wrap{ display:flex; flex-wrap:wrap; gap:22px; padding:20px; align-items:flex-start; justify-content:center; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; width:400px; }
.panel h2{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin:0 0 4px; }
.panel .sub{ font-size:11.5px; color:var(--muted); margin-bottom:12px; }
label.field-label{ display:block; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:12px 0 5px; }
textarea, input[type=text]{ width:100%; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:14px; font-family:inherit; resize:vertical; background:var(--panel2); color:var(--text); }
textarea{ min-height:110px; line-height:1.75; }
#romanText{ min-height:100px; }
.panel{ width:440px; }
textarea.arabic{ font-family:'AlQalam'; direction:rtl; font-size:23px; line-height:2.0; min-height:150px; }
/* Urdu: prefer a locally installed Alvi Nastaleeq, else fall back to
   Gulzar / Noto Nastaliq which are true Nastaliq faces. */
/* Urdu: always the supplied Alvi Nastaleeq Regular file. No local() sources,
   so a different installed Nastaliq face can never be substituted - the slide,
   the preview and the exported video all use the same glyphs. */
@font-face{ font-family:'AlviNastaleeq';  src:url('../assets/fonts/alvi-nastaleeq.ttf?v=2') format('truetype'); font-weight:400; font-style:normal; font-display:block; }
@font-face{ font-family:'Alvi Nastaleeq'; src:url('../assets/fonts/alvi-nastaleeq.ttf?v=2') format('truetype'); font-weight:400; font-style:normal; font-display:block; }


textarea.urdu{ font-family:'Alvi Nastaleeq','AlviNastaleeq','Noto Nastaliq Urdu',serif; direction:rtl;
  font-size:19px; line-height:2.1; min-height:120px; }
/* Any field that currently holds Urdu/Arabic script switches to Nastaliq. */
textarea.has-urdu, input.has-urdu{
  font-family:'Alvi Nastaleeq','AlviNastaleeq','Noto Nastaliq Urdu',serif !important;
  direction:rtl; text-align:right; font-size:19px; line-height:2.1;
}

/* single-row toolbar */
.fmt-toolbar{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow-x:auto; background:var(--panel2); border:1px solid var(--line); border-radius:8px; padding:6px 7px; margin-top:8px; }
.fmt-toolbar .fmt-label{ font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.fmt-btn{ width:24px; height:24px; border-radius:5px; border:1px solid var(--line); background:var(--panel); color:var(--text); font-size:11.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fmt-btn.italic-b{ font-style:italic; } .fmt-btn.underline-b{ text-decoration:underline; }
.fmt-btn.on{ background:var(--gold); border-color:var(--gold); color:#241c05; }
.fmt-sep{ width:1px; height:16px; background:var(--line); margin:0 2px; flex-shrink:0; }
.fmt-size{ width:38px; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:5px; padding:3px 2px; font-size:11px; text-align:center; flex-shrink:0; }
.fmt-color{ width:24px; height:24px; padding:0; border:1px solid var(--line); border-radius:5px; background:var(--panel); cursor:pointer; flex-shrink:0; }
.fmt-target{ background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:5px; padding:3px 4px; font-size:10.5px; flex-shrink:0; }

.sp-row{ display:flex; align-items:center; gap:8px; margin-top:6px; padding:5px 8px;
  background:var(--panel2); border:1px solid var(--line); border-radius:7px; flex-wrap:wrap; }
.sp-row .sp-lbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.sp-row .sp-grp{ display:flex; align-items:center; gap:4px; }
.sp-row input[type=range]{ width:86px; accent-color:var(--green); }
.sp-row input[type=number]{ width:52px; background:var(--panel); border:1px solid var(--line);
  color:var(--text); border-radius:5px; padding:3px 5px; font-size:10.5px; text-align:center; }
.sp-row .sp-val{ font-size:10px; color:var(--text); min-width:30px; font-variant-numeric:tabular-nums; }
.sp-row button.sp-reset{ margin-left:auto; background:none; border:1px solid var(--line);
  color:var(--muted); border-radius:5px; font-size:9.5px; padding:2px 7px; cursor:pointer; }
.sp-row button.sp-reset:hover{ border-color:var(--green); color:var(--green); }




.note{ font-size:10px; color:var(--muted); margin-top:10px; line-height:1.5; }
.canvas-wrap{ background:var(--panel2); padding:12px; border-radius:12px; border:1px solid var(--line); }
/* scoped to the Step 1/2 preview canvases only — a bare `canvas` rule was
   capping every timeline waveform at 360px */
.canvas-wrap canvas{ display:block; max-width:360px; width:360px; height:auto; border-radius:6px; box-shadow:0 2px 14px rgba(0,0,0,.4); }
.btnrow{ display:flex; gap:8px; margin-top:14px; }
button.primary{ padding:10px 16px; border:none; border-radius:8px; background:var(--gold); color:#241c05; font-weight:700; font-size:13px; cursor:pointer; }
button.primary:disabled{ opacity:.5; cursor:not-allowed; }
button.secondary{ padding:10px 16px; border:1px solid var(--green); border-radius:8px; background:none; color:var(--green); font-weight:700; font-size:13px; cursor:pointer; }
button.ghost{ padding:7px 10px; border:1px solid var(--line); background:none; color:var(--muted); border-radius:6px; font-size:11px; cursor:pointer; }
button.ghost:hover{ color:var(--text); border-color:var(--green); }

/* ---- step 3: editor ---- */




















.preview-empty{ color:var(--muted); font-size:11px; text-align:center; padding:10px; }
















.ruler{ height:20px; position:relative; border-bottom:1px solid var(--line); margin-bottom:6px; font-size:9px; color:var(--muted); }
.ruler span{ position:absolute; top:0; transform:translateX(-50%); }
.track{ position:relative; min-height:64px; margin-bottom:10px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px; }












.playhead{ position:absolute; top:0; bottom:0; width:1px; background:var(--gold); z-index:10; pointer-events:none; }
.playhead::before{ content:''; position:absolute; top:-4px; left:-4px; width:9px; height:9px; background:var(--gold); border-radius:50% 50% 50% 0; transform:rotate(-45deg); }

.inspector{ margin-top:4px; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:10px 14px; display:none; }
.inspector.show{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.inspector label{ font-size:10.5px; color:var(--muted); display:flex; flex-direction:column; gap:3px; }
.inspector input{ background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:5px; padding:5px 6px; font-size:11.5px; width:80px; }



#log{ background:#0e0f0a; border:1px solid var(--line); border-radius:8px; padding:10px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10.5px; color:#9fd66a; max-height:120px; overflow-y:auto; white-space:pre-wrap; margin-top:10px; display:none; }


#result{ margin-top:12px; display:none; }
#result video{ width:100%; max-width:320px; border-radius:8px; display:block; margin-bottom:8px; }
#result a{ display:inline-block; padding:8px 14px; background:var(--green); color:#0e1206; border-radius:7px; text-decoration:none; font-size:12px; font-weight:700; }


/* ===== CapCut-style editor styles ===== */
/* ================= STEP 3: CAPCUT-STYLE EDITOR ================= */
.ed{
  display:grid;
  grid-template-columns:246px minmax(0,1fr) 274px;
  grid-template-rows:minmax(220px,1fr) 316px;
  grid-template-areas:"bin player details" "timeline timeline timeline";
  height:calc(100vh - 55px);
  min-height:620px;
  background:var(--bg);
  gap:0;
}
@media (max-width:1100px){
  .ed{ grid-template-columns:200px minmax(0,1fr); grid-template-areas:"bin player" "timeline timeline"; }
  .ed-details{ display:none !important; }
}

/* ---------- media bin ---------- */
.ed-bin{ grid-area:bin; border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--panel); }
.ed-bin-head{ padding:10px 12px 8px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.ed-bin-head h2{ margin:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.ed-imp-row{ display:flex; gap:6px; }
.ed-imp{ flex:1; padding:8px; border-radius:7px; border:1px solid var(--green); background:var(--green); color:#0e1206; font-size:11.5px; font-weight:700; cursor:pointer; }
.ed-imp.alt{ background:none; color:var(--green); }
.ed-search{ width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:6px 8px; font-size:11px; color:var(--text); }
.ed-bin-body{ flex:1; overflow-y:auto; padding:10px; min-height:0; }
.ed-dropzone{ border:1.5px dashed var(--line); border-radius:9px; padding:14px 8px; text-align:center; font-size:10.5px; color:var(--muted); line-height:1.5; margin-bottom:10px; transition:.15s; }
.ed-dropzone.hot{ border-color:var(--gold); color:var(--gold); background:rgba(201,154,63,.08); }
.ed-bin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.bin-item{ position:relative; background:var(--panel2); border:1px solid var(--line); border-radius:8px; overflow:hidden; cursor:grab; user-select:none; }
.bin-item:hover{ border-color:var(--green); }
.bin-item.pinned{ border-color:var(--gold); }
.bin-item.dragging{ opacity:.45; }
.bin-thumb{ width:100%; height:58px; background:#000; display:block; object-fit:cover; }
.bin-wave{ width:100%; height:58px; display:block; background:#10361f; }
.bin-meta{ padding:4px 5px 5px; }
.bin-name{ font-size:9.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bin-kind{ font-size:8.5px; color:var(--muted); }
.bin-badge{ position:absolute; top:4px; left:4px; background:rgba(0,0,0,.72); color:#fff; font-size:8px; padding:1px 5px; border-radius:4px; }
.bin-dur{ position:absolute; top:4px; right:4px; background:rgba(0,0,0,.72); color:#fff; font-size:8px; padding:1px 5px; border-radius:4px; }
.bin-add{ position:absolute; bottom:26px; right:5px; width:19px; height:19px; border-radius:50%; background:var(--gold); color:#241c05; border:none; font-size:13px; line-height:19px; padding:0; cursor:pointer; font-weight:700; }
.bin-del{ position:absolute; bottom:26px; left:5px; width:19px; height:19px; border-radius:50%; background:rgba(0,0,0,.7); color:#eee; border:none; font-size:11px; line-height:19px; padding:0; cursor:pointer; display:none; }
.bin-item:hover .bin-del{ display:block; }

/* ---------- player ---------- */
.ed-player{ grid-area:player; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--bg); }
.ed-player-head{ padding:8px 14px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.ed-stage{ flex:1; display:flex; align-items:center; justify-content:center; padding:12px; min-height:0; background:#0b0c08; }
#edCanvas{ max-width:100%; max-height:100%; width:auto; height:auto; background:#000; border-radius:6px; box-shadow:0 4px 22px rgba(0,0,0,.55); }
.ed-transport{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-top:1px solid var(--line); background:var(--panel); }
.tp-btn{ width:30px; height:30px; border-radius:6px; border:1px solid var(--line); background:var(--panel2); color:var(--text); cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }
.tp-btn:hover{ border-color:var(--green); }
.tp-play{ background:var(--gold); border-color:var(--gold); color:#241c05; font-size:13px; }
.tp-time{ font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.tp-time b{ color:var(--text); font-weight:600; }
.tp-spacer{ flex:1; }
.ed-transport select, .ed-transport input[type=number]{ background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:5px; padding:4px 5px; font-size:11px; }
.ed-transport input[type=number]{ width:56px; }
.ed-transport label{ font-size:10px; color:var(--muted); display:flex; align-items:center; gap:4px; }

/* ---------- details / inspector ---------- */
.ed-details{ grid-area:details; border-left:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; min-height:0; }
.ed-details h2{ margin:0; padding:10px 14px; border-bottom:1px solid var(--line); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); }
.ed-details-body{ flex:1; overflow-y:auto; padding:12px 14px; }
.det-row{ display:flex; justify-content:space-between; gap:10px; font-size:11px; padding:5px 0; border-bottom:1px solid rgba(56,60,41,.5); }
.det-row .k{ color:var(--muted); flex-shrink:0; }
.det-row .v{ text-align:right; word-break:break-word; }
.det-group{ margin-top:12px; }
.det-group h3{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 8px; }
.det-field{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:11px; color:var(--muted); }
.det-field input[type=number], .det-field select{ width:88px; background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:5px; padding:4px 6px; font-size:11px; }
.det-field input[type=range]{ width:88px; }
.det-empty{ font-size:11px; color:var(--muted); line-height:1.6; }
.det-btn{ width:100%; margin-top:6px; padding:7px; border-radius:6px; border:1px solid var(--line); background:var(--panel2); color:var(--text); font-size:11px; cursor:pointer; }
.det-btn:hover{ border-color:var(--green); }
.det-btn.danger:hover{ border-color:var(--danger); color:var(--danger); }

/* ---------- timeline ---------- */
.ed-timeline{ grid-area:timeline; border-top:1px solid var(--line); display:flex; flex-direction:column; min-height:0; background:var(--panel); }
.tl-toolbar{ display:flex; align-items:center; gap:4px; padding:6px 10px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tl-btn{ height:28px; min-width:28px; padding:0 8px; border-radius:6px; border:1px solid transparent; background:none; color:var(--text); font-size:12px; cursor:pointer; display:flex; align-items:center; gap:5px; }
.tl-btn span.t{ font-size:10.5px; }
.tl-btn:hover{ background:var(--panel2); border-color:var(--line); }
.tl-btn:disabled{ opacity:.35; cursor:not-allowed; }
.tl-btn.on{ background:var(--panel2); border-color:var(--gold); color:var(--gold); }
.tl-sep{ width:1px; height:18px; background:var(--line); margin:0 4px; }
.tl-zoom{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.tl-zoom input[type=range]{ width:96px; }
.tl-export{ margin-left:auto; display:flex; align-items:center; gap:6px; }
#edExportBtn{ padding:7px 16px; border:none; border-radius:7px; background:var(--gold); color:#241c05; font-weight:700; font-size:12px; cursor:pointer; }
#edExportBtn:disabled{ opacity:.5; cursor:not-allowed; }

.tl-body{ flex:1; display:flex; min-height:0; }
.tl-heads{ width:112px; flex-shrink:0; border-right:1px solid var(--line); background:var(--panel); overflow:hidden; }
.tl-heads-top{ height:24px; border-bottom:1px solid var(--line); }
.tl-head{ display:flex; align-items:center; gap:3px; padding:0 6px; border-bottom:1px solid rgba(56,60,41,.6); box-sizing:border-box; }
.tl-head .nm{ font-size:10px; color:var(--muted); flex:1; white-space:nowrap; overflow:hidden; }
.tl-head .tg{ width:19px; height:19px; border-radius:4px; border:1px solid var(--line); background:var(--panel2); color:var(--muted); font-size:9.5px; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.tl-head .tg.on{ color:var(--gold); border-color:var(--gold); }
.tl-head .tg.add{ color:var(--green); border-color:var(--green); font-weight:700; }
.tl-head .tg.add:hover{ background:var(--green); color:#0e1206; }
.tl-addrow{ display:flex; align-items:center; gap:6px; padding:4px 6px; }
.tl-addrow button{ flex:1; height:22px; border-radius:5px; border:1px dashed var(--line);
  background:var(--panel2); color:var(--muted); font-size:10px; cursor:pointer; }
.tl-addrow button:hover{ border-color:var(--green); color:var(--green); }

.tl-scroll{ flex:1; overflow:auto; position:relative; min-width:0; }
.tl-inner{ position:relative; min-height:100%; }
.tl-ruler{ height:24px; position:sticky; top:0; z-index:6; background:var(--panel); border-bottom:1px solid var(--line); cursor:text; }
.tl-ruler canvas{ display:block; height:24px; }
.tl-lanes{ position:relative; }
.tl-lane{ position:relative; border-bottom:1px solid rgba(56,60,41,.6); box-sizing:border-box; }
.tl-lane.video{ background:repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.025) 39px,rgba(255,255,255,.025) 40px); }
.tl-lane.audio{ background:repeating-linear-gradient(90deg,transparent,transparent 39px,rgba(255,255,255,.02) 39px,rgba(255,255,255,.02) 40px); }
.tl-lane.drop-hot{ background:rgba(122,154,63,.14); }

.clip{ position:absolute; top:4px; border-radius:6px; overflow:hidden; border:1.5px solid rgba(0,0,0,.5); background:var(--panel2); cursor:grab; user-select:none; box-sizing:border-box; }
.clip.dragging{ opacity:.75; cursor:grabbing; z-index:20; }
.clip.selected{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.clip.locked{ cursor:not-allowed; }
.clip-v{ background:#20301c; }
.clip-a{ background:#12352a; }
.clip-strip{ position:absolute; inset:0; display:flex; overflow:hidden; pointer-events:none; }
.clip-strip img{ height:100%; width:auto; object-fit:cover; flex-shrink:0; opacity:.92; }
.clip-wave{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }


.clip-handle{ position:absolute; top:0; bottom:0; width:9px; cursor:ew-resize; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; z-index:3; }
.clip-handle::after{ content:''; width:2px; height:16px; background:rgba(255,255,255,.75); border-radius:2px; }
.clip-handle.l{ left:0; border-radius:5px 0 0 5px; }
.clip-handle.r{ right:0; border-radius:0 5px 5px 0; }

 
.clip-xfade{ position:absolute; top:0; bottom:0; background:repeating-linear-gradient(45deg,rgba(201,154,63,.35),rgba(201,154,63,.35) 5px,rgba(201,154,63,.12) 5px,rgba(201,154,63,.12) 10px); pointer-events:none; z-index:5; border-left:1px solid rgba(201,154,63,.6); border-right:1px solid rgba(201,154,63,.6); }

.tl-playhead{ position:absolute; top:0; bottom:0; width:1.5px; background:var(--gold); z-index:30; pointer-events:none; }
.tl-playhead::before{ content:''; position:absolute; top:0; left:-5.5px; width:12px; height:12px; background:var(--gold); border-radius:2px 2px 6px 6px; }
.tl-snapline{ position:absolute; top:0; bottom:0; width:1px; background:#5ad6ff; z-index:29; pointer-events:none; display:none; }
.tl-hint{ padding:26px 16px; text-align:center; color:var(--muted); font-size:11.5px; line-height:1.7; }


/* ---- right panel: split into Info / Shortcuts ---- */
.ed-details h2{ display:flex; align-items:center; gap:8px; }
.det-tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); flex-shrink:0; }
.det-tab{ flex:1; padding:8px 6px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; }
.det-tab:hover{ color:var(--text); }
.det-tab.active{ color:var(--gold); border-bottom-color:var(--gold); }
.det-pane{ display:none; }
.det-pane.active{ display:block; }
.sc-group{ margin-bottom:14px; }
.sc-group h4{ margin:0 0 6px; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); }
.sc-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:3px 0; font-size:11px; }
.sc-row span{ color:var(--muted); }
kbd{ background:var(--panel2); border:1px solid var(--line); border-bottom-width:2px; border-radius:4px;
  padding:1px 5px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.5px; color:var(--text); white-space:nowrap; }

/* ---- template / intro / outro ---- */
.tpl-bar{ display:flex; align-items:center; gap:6px; padding:6px 10px; border-bottom:1px solid var(--line);
  background:var(--panel2); flex-wrap:wrap; }
.tpl-bar .lbl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); font-weight:700; }
.tpl-btn{ height:24px; padding:0 8px; border-radius:5px; border:1px solid var(--line); background:var(--panel);
  color:var(--text); font-size:10.5px; cursor:pointer; display:flex; align-items:center; gap:4px; }
.tpl-btn:hover{ border-color:var(--green); }
.tpl-btn.on{ border-color:var(--gold); color:var(--gold); }
.tpl-state{ font-size:10px; color:var(--muted); margin-left:auto; }

.clip.keep{ box-shadow:inset 0 0 0 1.5px rgba(201,154,63,.85); }
.clip-pin{ position:absolute; top:2px; right:3px; font-size:9px; z-index:6; pointer-events:none;
  background:rgba(0,0,0,.6); border-radius:3px; padding:0 3px; color:var(--gold); }
.clip-role{ position:absolute; bottom:1px; left:5px; font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  color:#ffe6a8; text-shadow:0 1px 2px #000; pointer-events:none; }

/* drag ghost when dropping media from the bin onto a lane */
.tl-lane.dnd{ background:rgba(201,154,63,.13) !important; }
.dnd-ghost{ position:absolute; top:4px; border:1.5px dashed var(--gold); border-radius:6px;
  background:rgba(201,154,63,.18); pointer-events:none; z-index:25; }
.dnd-ghost .g-lbl{ font-size:9.5px; color:var(--gold); padding:2px 5px; white-space:nowrap; overflow:hidden; }

/* ---- audio fx controls ---- */
.fx-field{ margin-bottom:9px; }
.fx-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--muted); margin-bottom:3px; }
.fx-head b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; font-size:10.5px; }
.fx-field input[type=range]{ width:100%; margin:0; accent-color:var(--green); }
.fx-sub{ display:flex; gap:6px; }
.fx-sub .fx-field{ flex:1; }
.fx-presets{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.fx-preset{ padding:4px 8px; border-radius:5px; border:1px solid var(--line); background:var(--panel2);
  color:var(--text); font-size:10px; cursor:pointer; }
.fx-preset:hover{ border-color:var(--green); color:var(--green); }
.fx-toggle{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); margin-bottom:9px; cursor:pointer; }
.fx-toggle input{ accent-color:var(--green); }
.det-group.audio h3{ color:#68e0a0; }

/* ---- left sidebar tabs ---- */
.bin-tabs{ display:flex; border-bottom:1px solid var(--line); flex-shrink:0; }
.bin-tab{ flex:1; padding:9px 4px; background:none; border:none; border-bottom:2px solid transparent;
  color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; }
.bin-tab .ic{ font-size:13px; line-height:1; }
.bin-tab:hover{ color:var(--text); }
.bin-tab.active{ color:var(--gold); border-bottom-color:var(--gold); background:rgba(201,154,63,.07); }
.bin-pane{ display:none; flex:1; min-height:0; flex-direction:column; }
.bin-pane.active{ display:flex; }

/* ---- controls pane ---- */
.ctl-scroll{ flex:1; overflow-y:auto; padding:12px; }
.ctl-sec{ margin-bottom:16px; }
.ctl-sec h3{ margin:0 0 8px; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); }
.ctl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ctl-btn{ display:flex; align-items:center; gap:6px; padding:7px 8px; border-radius:6px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); font-size:10.5px;
  cursor:pointer; text-align:left; }
.ctl-btn:hover{ border-color:var(--green); color:var(--green); }
.ctl-btn:disabled{ opacity:.35; cursor:not-allowed; }
.ctl-btn .ic{ font-size:12px; flex-shrink:0; }
.ctl-btn.wide{ grid-column:1/-1; }
.ctl-btn.on{ border-color:var(--gold); color:var(--gold); }
.ctl-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;
  font-size:10.5px; color:var(--muted); }
.ctl-row input[type=range]{ flex:1; accent-color:var(--green); }
.ctl-row input[type=number]{ width:58px; background:var(--panel2); border:1px solid var(--line);
  color:var(--text); border-radius:5px; padding:4px 5px; font-size:10.5px; }
.ctl-row select{ background:var(--panel2); border:1px solid var(--line); color:var(--text);
  border-radius:5px; padding:4px 5px; font-size:10.5px; }
.ctl-row b{ color:var(--text); font-size:10px; font-variant-numeric:tabular-nums; min-width:40px; text-align:right; }
.ctl-hint{ font-size:9.5px; color:var(--muted); line-height:1.55; }

.ctl-asset{ padding:9px 11px; border-bottom:1px solid var(--line); background:var(--panel2); }
.ctl-asset .nm{ font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:flex; align-items:center; gap:5px; }
.ctl-asset .meta{ font-size:9.5px; color:var(--muted); margin-top:2px; }
.ctl-none{ padding:20px 14px; text-align:center; color:var(--muted); font-size:11px; line-height:1.7; }
.ctl-sec.tight{ margin-bottom:12px; }
.ctl-fx{ margin-bottom:9px; }
.ctl-fx .hd{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:10.5px; color:var(--muted); margin-bottom:3px; }
.ctl-fx .hd b{ color:var(--text); font-size:10px; font-variant-numeric:tabular-nums; }
.ctl-fx input[type=range]{ width:100%; accent-color:var(--green); }
.ctl-two{ display:flex; gap:6px; }
.ctl-two .ctl-fx{ flex:1; }

/* ---- transitions pane ---- */
.tr-head{ padding:10px 12px; border-bottom:1px solid var(--line); }
.tr-head .sel{ font-size:10px; color:var(--muted); line-height:1.5; }
.tr-head .sel b{ color:var(--gold); }
.tr-scroll{ flex:1; overflow-y:auto; padding:10px 12px; }
.tr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:12px; }
.tr-item{ border:1px solid var(--line); border-radius:7px; background:var(--panel2); cursor:pointer;
  overflow:hidden; padding:0; }
.tr-item:hover{ border-color:var(--green); }
.tr-item.on{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.tr-thumb{ width:100%; height:40px; display:block; background:#0d0f0a; }
.tr-name{ font-size:9.5px; padding:3px 4px; color:var(--text); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tr-dur{ display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--muted); margin-bottom:8px; }
.tr-dur input{ flex:1; accent-color:var(--gold); }

/* transition marker on the timeline */
.clip-trans{ position:absolute; top:0; bottom:0; z-index:7; cursor:pointer;
  background:linear-gradient(90deg,rgba(201,154,63,.05),rgba(201,154,63,.42),rgba(201,154,63,.05));
  border-left:1px solid rgba(201,154,63,.75); border-right:1px solid rgba(201,154,63,.75);
  display:flex; align-items:center; justify-content:center; }
.clip-trans:hover{ background:linear-gradient(90deg,rgba(201,154,63,.15),rgba(201,154,63,.6),rgba(201,154,63,.15)); }
.clip-trans .ic{ font-size:9px; color:#241c05; background:var(--gold); border-radius:3px;
  padding:0 3px; line-height:12px; white-space:nowrap; pointer-events:none; }

.tr-item{ cursor:grab; }
.tr-item:active{ cursor:grabbing; }
.tr-item.dragging{ opacity:.5; }
.junction-hint{ position:absolute; top:0; bottom:0; width:26px; margin-left:-13px; z-index:26;
  border-radius:4px; background:rgba(201,154,63,.28); border:1.5px dashed var(--gold);
  pointer-events:none; display:flex; align-items:center; justify-content:center; }
.junction-hint.hot{ background:rgba(201,154,63,.65); border-style:solid; }
.junction-hint .lbl{ font-size:8px; color:#241c05; background:var(--gold); border-radius:3px;
  padding:0 3px; white-space:nowrap; transform:rotate(-90deg); }

/* ---- next verse ---- */
.ex-actions button.next{ background:var(--green); border-color:var(--green); color:#0e1206; }



/* ---- settings ---- */
#settingsBtn{ background:none; border:1px solid var(--line); color:var(--muted);
  border-radius:7px; padding:5px 11px; font-size:11.5px; cursor:pointer; margin-left:auto; }
#settingsBtn:hover{ border-color:var(--gold); color:var(--gold); }
.set-overlay{ position:fixed; inset:0; background:rgba(8,9,6,.86); z-index:420;
  display:none; align-items:center; justify-content:center; padding:20px; }
.set-overlay.show{ display:flex; }
.set-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
  width:min(640px,100%); max-height:90vh; overflow-y:auto; }
.set-head{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.set-head h3{ margin:0; font-size:14px; }
.set-head button{ margin-left:auto; background:none; border:none; color:var(--muted);
  font-size:19px; cursor:pointer; line-height:1; }
.set-body{ padding:14px 18px; }
.set-sec{ margin-bottom:18px; }
.set-sec h4{ margin:0 0 8px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); }
.set-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px; }
.set-row label{ font-size:11.5px; color:var(--muted); flex:1; }
.set-row input[type=text]{ width:230px; background:var(--panel2); border:1px solid var(--line);
  color:var(--text); border-radius:6px; padding:6px 9px; font-size:11.5px; }
.set-row input[type=color]{ width:44px; height:28px; padding:0; border:1px solid var(--line);
  border-radius:6px; background:var(--panel2); cursor:pointer; }
.set-btn{ padding:7px 12px; border-radius:6px; border:1px solid var(--line); background:var(--panel2);
  color:var(--text); font-size:11px; cursor:pointer; }
.set-btn:hover{ border-color:var(--green); color:var(--green); }
.set-btn.wide{ width:100%; margin-top:5px; }
.set-hint{ font-size:10px; color:var(--muted); line-height:1.6; margin-top:5px; }
.set-themes{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-bottom:10px; }
.set-theme{ padding:8px 5px; border-radius:7px; border:1px solid var(--line); cursor:pointer;
  font-size:10px; text-align:center; color:var(--text); }
.set-theme:hover{ border-color:var(--green); }
.set-theme.on{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold); }
.set-sw{ display:flex; gap:3px; justify-content:center; margin-bottom:4px; }
.set-sw i{ width:11px; height:11px; border-radius:3px; display:block; }
.set-thumb{ width:100%; height:110px; object-fit:cover; border-radius:6px;
  border:1px solid var(--line); margin-top:6px; display:none; }
.set-preview-info{ font-size:10px; color:var(--muted); margin:5px 0 8px; overflow-wrap:anywhere; }
.set-font-card{ border:1px solid var(--line); background:var(--panel2); border-radius:8px;
  padding:9px 10px; margin:7px 0; }
.set-font-card .top{ display:flex; align-items:center; gap:8px; }
.set-font-card .top b{ font-size:11px; flex:1; }
.set-font-card .name{ font-size:9.5px; color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.set-font-sample{ margin-top:8px; padding:8px; min-height:40px; border-radius:6px;
  border:1px dashed var(--line); background:rgba(255,255,255,.025); color:var(--text);
  font-size:21px; line-height:1.8; text-align:center; overflow:hidden; }
.set-folder{ border:1px solid var(--line); background:var(--panel2); border-radius:8px; padding:10px; }
.set-folder-status{ font-size:10.5px; line-height:1.55; color:var(--muted); margin:7px 0; }
.set-folder-status.ok{ color:var(--green); }
.set-check{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text); margin:8px 0; }
.set-path-tree{ white-space:pre-line; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:9px; color:var(--muted); background:rgba(0,0,0,.16); border-radius:6px; padding:8px; margin-top:8px; }
.set-actions{ display:flex; gap:8px; padding:12px 18px; border-top:1px solid var(--line); }
.set-actions button{ padding:8px 14px; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); }
.set-actions .save{ background:var(--gold); border-color:var(--gold); color:#241c05; margin-left:auto; }

/* ---- export quality dialog ---- */
.q-overlay{ position:fixed; inset:0; background:rgba(8,9,6,.86); z-index:350;
  display:none; align-items:center; justify-content:center; padding:20px; }
.q-overlay.show{ display:flex; }
.q-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px;
  width:min(460px,100%); max-height:88vh; overflow-y:auto; padding:18px 20px; }
.q-card h3{ margin:0 0 4px; font-size:14px; }
.q-sub{ font-size:11px; color:var(--muted); margin-bottom:14px; line-height:1.6; }
.q-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; }
.q-row label{ font-size:11.5px; color:var(--muted); }
.q-row select, .q-row input[type=number]{ background:var(--panel2); border:1px solid var(--line);
  color:var(--text); border-radius:6px; padding:6px 8px; font-size:11.5px; min-width:150px; }
.q-presets{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:14px; }
.q-preset{ padding:9px 8px; border-radius:7px; border:1px solid var(--line); background:var(--panel2);
  color:var(--text); font-size:11px; cursor:pointer; text-align:left; line-height:1.4; }
.q-preset:hover{ border-color:var(--green); }
.q-preset.on{ border-color:var(--gold); background:rgba(201,154,63,.12); }
.q-preset b{ display:block; font-size:11.5px; margin-bottom:1px; }
.q-preset span{ color:var(--muted); font-size:9.5px; }
.q-est{ font-size:10.5px; color:var(--green); margin:4px 0 12px; }
.q-actions{ display:flex; gap:8px; justify-content:flex-end; }
.q-actions button{ padding:9px 16px; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer;
  border:1px solid var(--line); background:var(--panel2); color:var(--text); }
.q-actions button.go{ background:var(--gold); border-color:var(--gold); color:#241c05; }
.q-note{ font-size:10px; color:var(--muted); line-height:1.6; margin-top:10px;
  border-top:1px solid var(--line); padding-top:9px; }
.q-background{ display:flex; align-items:flex-start; gap:9px; margin:8px 0 12px; padding:9px 10px;
  border:1px solid rgba(122,154,63,.45); border-radius:8px; background:rgba(122,154,63,.08); cursor:pointer; }
.q-background input{ margin-top:3px; accent-color:var(--green); }
.q-background span{ min-width:0; font-size:10px; line-height:1.45; color:var(--muted); }
.q-background b{ display:block; color:var(--text); font-size:11px; margin-bottom:2px; }


/* ---- export range ---- */
.tl-range{ position:absolute; top:0; height:24px; z-index:7; pointer-events:none;
  background:rgba(122,154,63,.22); border-left:2px solid var(--green); border-right:2px solid var(--green); }
.tl-range .cap{ position:absolute; top:1px; font-size:8.5px; color:#0e1206; background:var(--green);
  border-radius:3px; padding:0 4px; white-space:nowrap; }
.tl-range .cap.l{ left:0; } .tl-range .cap.r{ right:0; }
.tl-dim{ position:absolute; top:0; bottom:0; background:rgba(8,9,6,.55); z-index:3; pointer-events:none; }
.rng-btn{ height:28px; padding:0 8px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font-size:10.5px; cursor:pointer; display:flex;
  align-items:center; gap:4px; }
.rng-btn:hover{ border-color:var(--green); }
.rng-btn.on{ border-color:var(--green); color:var(--green); }
.rng-info{ font-size:10px; color:var(--muted); margin-left:2px; }

/* ---- CapCut-style clips ---- */
.clip{ border:none !important; border-radius:4px; background:#0d2a2c; }
.clip.clip-v{ background:#004d52; }
.clip.clip-a{ background:#0e3058; }
.clip-head{ position:absolute; top:0; left:0; right:0; height:15px; z-index:5;
  display:flex; align-items:center; gap:6px; padding:0 6px; pointer-events:none;
  border-radius:4px 4px 0 0; font-size:9.5px; line-height:15px; white-space:nowrap; overflow:hidden; }
.clip-v .clip-head{ background:#004d52; color:#e8f3f2; }
.clip-a .clip-head{ background:#2b4c8c; color:#dce8fb; }
.clip-head .nm{ overflow:hidden; text-overflow:ellipsis; font-weight:500; }
.clip-head .tcode{ margin-left:auto; opacity:.92; font-variant-numeric:tabular-nums; flex-shrink:0; }
.clip-strip{ top:15px; bottom:9px; border-radius:0; }
.clip-v .clip-wave{ top:auto !important; bottom:0 !important; height:9px !important;
  width:100% !important; opacity:1 !important; background:#00777e; }
.clip-a .clip-wave{ top:15px !important; bottom:0 !important; height:auto !important;
  width:100% !important; }
.clip.selected{ outline:2px solid var(--gold); outline-offset:-2px; box-shadow:none; }

.tl-lane .clip + .clip{ margin-left:0; }
.clip::after{ content:''; position:absolute; top:0; bottom:0; right:-1px; width:2px;
  background:rgba(250,250,250,.92); pointer-events:none; z-index:8; }
.clip:last-child::after{ display:none; }

/* ---- live audio meters ---- */
.clip-live{ position:absolute; left:0; right:0; top:15px; bottom:0; width:100%; pointer-events:none; z-index:4; }
.clip-vu{ position:absolute; right:3px; top:3px; bottom:3px; width:4px; z-index:6;
  border-radius:2px; background:rgba(0,0,0,.4); overflow:hidden; pointer-events:none; }
.clip-vu i{ position:absolute; left:0; right:0; bottom:0; display:block; border-radius:2px;
  background:linear-gradient(180deg,#ffd75e,#68e0a0); transition:height .05s linear; }
.clip-vu.hot i{ background:linear-gradient(180deg,#ff6b52,#ffd75e); }
.tl-lane .clip.playing{ box-shadow:0 0 0 1px rgba(104,224,160,.75); }

/* ---- version badge + changelog ---- */
.ver-badge{ display:inline-flex; align-items:center; gap:5px; margin-left:8px; padding:2px 8px;
  border:1px solid var(--gold); border-radius:11px; background:rgba(201,154,63,.12);
  color:var(--gold); font-size:10px; font-weight:700; letter-spacing:.03em; cursor:pointer;
  vertical-align:middle; font-family:inherit; }
.ver-badge:hover{ background:rgba(201,154,63,.24); }
.ver-badge .dot{ width:5px; height:5px; border-radius:50%; background:var(--green); }





.cl-head{ padding:14px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.cl-head h3{ margin:0; font-size:14px; }
.cl-head .cur{ font-size:10px; color:var(--gold); border:1px solid var(--gold);
  border-radius:10px; padding:1px 7px; font-weight:700; }
.cl-head button{ margin-left:auto; background:none; border:none; color:var(--muted);
  font-size:19px; cursor:pointer; line-height:1; }










/* export overlay */
.ex-overlay{ position:fixed; inset:0; background:rgba(8,9,6,.86); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.ex-overlay.show{ display:flex; }
.ex-card{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; width:min(520px,100%); max-height:88vh; overflow-y:auto; }
.ex-card h3{ margin:0 0 4px; font-size:14px; }
.ex-sub{ font-size:11px; color:var(--muted); margin-bottom:12px; line-height:1.6; }
#edProgWrap{ height:6px; background:var(--panel2); border-radius:4px; overflow:hidden; margin:10px 0; }
#edProgBar{ height:100%; width:0%; background:var(--green); transition:width .5s linear; }
#edLog{ background:#0e0f0a; border:1px solid var(--line); border-radius:8px; padding:9px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px; color:#9fd66a; max-height:150px; overflow-y:auto; white-space:pre-wrap; }
.ex-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.ex-actions a, .ex-actions button{ padding:8px 14px; border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; cursor:pointer; border:1px solid var(--line); background:var(--panel2); color:var(--text); }
.ex-actions a.dl{ background:var(--green); border-color:var(--green); color:#0e1206; }
.ex-actions button.mp4{ background:var(--gold); border-color:var(--gold); color:#241c05; }
#edResultVideo{ width:100%; border-radius:8px; margin-top:10px; display:none; background:#000; }
.ex-warn{ font-size:10.5px; color:var(--gold); line-height:1.6; margin-top:8px; }




/* ======================================================================
   Verse Studio V.1 — responsive, high-definition and interaction polish
   ====================================================================== */
:root{ --header-h:56px; --focus-ring:rgba(201,154,63,.35); }
html,body{ width:100%; min-height:100%; overflow-x:hidden; }
body{ min-height:100svh; }
header{ min-height:var(--header-h); padding:10px clamp(10px,2vw,24px); gap:clamp(8px,1.5vw,20px);
  position:relative; z-index:40; background:color-mix(in srgb,var(--bg) 94%,transparent); }
header h1{ white-space:nowrap; display:flex; align-items:center; gap:5px; }
#settingsBtn{ margin-left:auto; }
.view.active{ width:100%; }

/* Generator views now use all available width. The source canvases remain
   1800×2250 masters; only their responsive on-screen size changes. */
.gen-wrap{ width:min(1600px,100%); margin:0 auto; display:grid;
  grid-template-columns:minmax(340px,480px) minmax(360px,1fr); gap:clamp(14px,2vw,28px);
  padding:clamp(12px,2vw,26px); align-items:start; }
.panel{ width:100%; min-width:0; }
.canvas-wrap{ width:100%; min-width:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:12px; align-items:start; justify-items:center; padding:clamp(8px,1.5vw,16px); }
.canvas-wrap canvas{ width:min(100%,620px); max-width:620px; height:auto; image-rendering:auto;
  box-shadow:0 12px 34px rgba(0,0,0,.48); }
.slide-preview{ width:100%; display:flex; flex-direction:column; align-items:center; gap:7px; }
.slide-preview-label{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.translation-split-card{ margin-top:11px; display:flex; align-items:center; gap:10px; padding:10px 12px;
  border:1px solid var(--line); border-radius:9px; background:linear-gradient(135deg,var(--panel2),transparent);
  color:var(--text); cursor:pointer; }
.translation-split-card input{ width:34px; height:19px; accent-color:var(--green); flex:0 0 auto; }
.translation-split-card span{ display:flex; flex-direction:column; gap:2px; font-size:11.5px; font-weight:700; }
.translation-split-card small{ color:var(--muted); font-size:9.5px; font-weight:400; line-height:1.35; }

/* Editor fills the viewport and scales its columns/rows fluidly. */
.ed{ grid-template-columns:clamp(220px,18vw,300px) minmax(0,1fr) clamp(240px,20vw,320px);
  grid-template-rows:minmax(260px,1fr) clamp(280px,38vh,390px); height:calc(100svh - var(--header-h));
  min-height:560px; }
.ed-stage{ padding:clamp(6px,1vw,14px); }
#edCanvas{ image-rendering:auto; }
.tl-toolbar,.tpl-bar,.ed-transport{ scrollbar-width:thin; }

/* Strong, unmistakable selection state. */
.clip{ transition:filter .12s,box-shadow .12s,outline-color .12s; }
.clip.selected{ z-index:18 !important; outline:3px solid var(--gold) !important; outline-offset:-3px;
  filter:brightness(1.17) saturate(1.12); box-shadow:0 0 0 2px rgba(255,255,255,.78),0 0 18px var(--focus-ring) !important; }
.clip.selected .clip-head{ background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--gold) 65%,#16211e)) !important;
  color:#191507 !important; font-weight:800; }
.tl-marquee{ position:absolute; display:none; z-index:45; pointer-events:none; border:1.5px solid var(--gold);
  background:rgba(201,154,63,.18); box-shadow:0 0 0 1px rgba(255,255,255,.2) inset; border-radius:4px; }

/* Range markers stay visible even when only In or Out has been set. */
.tl-range{ top:0; height:auto; z-index:8; border:1px solid rgba(122,154,63,.9);
  background:linear-gradient(180deg,rgba(122,154,63,.28),rgba(122,154,63,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.tl-range .cap{ top:2px; font-size:9px; font-weight:800; z-index:3; }
.tl-range-handle{ position:absolute; top:0; bottom:0; width:10px; pointer-events:auto; cursor:ew-resize; z-index:4; }
.tl-range-handle.l{ left:-5px; } .tl-range-handle.r{ right:-5px; }
.tl-range-handle::after{ content:''; position:absolute; top:0; bottom:0; left:4px; width:2px; background:var(--green); }
.tl-range-marker{ position:absolute; top:0; width:2px; z-index:12; pointer-events:none; background:var(--green); }
.tl-range-marker::before{ content:attr(data-label); position:absolute; top:2px; left:3px; padding:2px 5px;
  border-radius:4px; background:var(--green); color:#0e1206; font-size:8.5px; font-weight:800; white-space:nowrap; }
.tl-range-marker.out::before{ left:auto; right:3px; }
.tl-dim{ z-index:3; background:rgba(5,7,5,.62); }
.rng-info{ min-width:118px; }

/* Media folders. */
.folder-bar{ display:flex; align-items:center; gap:6px; min-width:0; }
.folder-crumbs{ flex:1; min-width:0; display:flex; align-items:center; gap:4px; overflow-x:auto; white-space:nowrap; }
.folder-crumb{ border:0; background:none; color:var(--muted); font-size:10px; padding:3px 2px; cursor:pointer; }
.folder-crumb:hover,.folder-crumb.current{ color:var(--gold); }
.folder-sep{ color:var(--line); font-size:10px; }
.folder-new{ flex:0 0 auto; border:1px solid var(--line); background:var(--panel2); color:var(--text); border-radius:6px;
  padding:5px 8px; font-size:10px; cursor:pointer; }
.folder-new:hover{ border-color:var(--green); color:var(--green); }
.bin-folder-card{ min-height:76px; padding:10px; border-radius:9px; border:1px solid var(--line);
  background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 10%,var(--panel2)),var(--panel2)); cursor:pointer;
  position:relative; display:flex; flex-direction:column; justify-content:center; gap:5px; }
.bin-folder-card:hover,.bin-folder-card.drop-hot{ border-color:var(--gold); background:rgba(201,154,63,.13); }
.bin-folder-icon{ font-size:24px; line-height:1; }
.bin-folder-name{ font-size:10px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:30px; }
.bin-folder-count{ color:var(--muted); font-size:8.5px; }
.bin-folder-actions{ position:absolute; right:5px; top:5px; display:flex; gap:3px; opacity:0; }
.bin-folder-card:hover .bin-folder-actions{ opacity:1; }
.bin-folder-actions button{ width:20px; height:20px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--muted); cursor:pointer; padding:0; }
.bin-move{ position:absolute; bottom:26px; left:29px; width:19px; height:19px; border-radius:50%; border:1px solid var(--line);
  background:rgba(0,0,0,.75); color:#fff; font-size:10px; line-height:17px; padding:0; cursor:pointer; display:none; }
.bin-item:hover .bin-move{ display:block; }
.folder-empty{ grid-column:1/-1; padding:18px 8px; text-align:center; color:var(--muted); font-size:10.5px; line-height:1.6; }

/* Settings: spacious card grid with sticky chrome and clear hierarchy. */
.set-overlay{ padding:clamp(0px,2vw,22px); backdrop-filter:blur(9px); }
.set-card{ width:min(940px,100%); max-height:min(92svh,900px); border-radius:16px;
  box-shadow:0 28px 80px rgba(0,0,0,.55); }
.set-head{ position:sticky; top:0; z-index:2; padding:16px 20px; background:var(--panel); }
.set-head h3{ font-size:16px; display:flex; flex-direction:column; gap:2px; }
.set-head h3 small{ color:var(--muted); font-size:10px; font-weight:400; }
.set-body{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:16px 18px; }
.set-sec{ margin:0; padding:15px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel2) 86%,transparent),transparent); min-width:0; }
.set-sec h4{ font-size:11px; margin-bottom:5px; }
.set-sec-desc{ margin:0 0 11px; color:var(--muted); font-size:10px; line-height:1.5; }





.set-actions{ position:sticky; bottom:0; z-index:2; background:var(--panel); padding:12px 18px; }
.set-theme{ min-height:52px; }
.set-font-card{ border-radius:10px; }

/* Export result state. */
.ex-overlay{ backdrop-filter:blur(10px); padding:clamp(8px,2vw,22px); }
.ex-card{ width:min(660px,100%); border-radius:16px; padding:20px; box-shadow:0 30px 90px rgba(0,0,0,.62); }


 

.ex-card.complete #edProgWrap{ display:none; }
.ex-card.complete #edLog{ max-height:82px; opacity:.78; }
.ex-card.complete #edResultVideo{ border:1px solid var(--line); box-shadow:0 8px 25px rgba(0,0,0,.35); }
.ex-actions{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ex-actions a,.ex-actions button{ min-height:42px; display:flex; align-items:center; justify-content:center; text-align:center; }
.ex-actions a.dl{ grid-column:1/-1; font-size:12.5px; }
.ex-actions button.share{ background:var(--gold); border-color:var(--gold); color:#241c05; }
.ex-actions button.next{ border-color:var(--green); color:var(--green); }

/* Permanent authorship watermark on the application UI (not burned into media). */



@media (max-width:1100px){
  .ed{ grid-template-columns:clamp(190px,25vw,250px) minmax(0,1fr);
    grid-template-rows:minmax(250px,1fr) clamp(280px,40vh,380px); }
}
@media (max-width:760px){
  :root{ --header-h:102px; }
  header{ position:sticky; top:0; align-items:center; padding:8px 10px; }
  header h1{ font-size:13px; flex:1; }
  header h1>span{ display:none; }
  #settingsBtn{ padding:7px 9px; font-size:11px; }
  .stepper{ order:3; width:100%; overflow-x:auto; justify-content:stretch; }
  .step-btn{ flex:1; justify-content:center; white-space:nowrap; padding:6px 8px; font-size:10.5px; }
  .step-sep{ width:8px; flex:0 0 8px; }
  .gen-wrap{ display:grid; grid-template-columns:1fr; padding:10px; gap:10px; }
  .panel{ padding:13px; border-radius:10px; }
  .canvas-wrap{ grid-template-columns:1fr; }
  .canvas-wrap canvas{ width:min(100%,560px); max-width:560px; }
  .fmt-toolbar{ max-width:calc(100vw - 46px); }
  .btnrow{ flex-wrap:wrap; } .btnrow button{ flex:1; min-width:115px; }

  .ed{ height:auto; min-height:0; display:grid; grid-template-columns:1fr;
    grid-template-rows:minmax(330px,58svh) minmax(240px,38svh) minmax(360px,60svh);
    grid-template-areas:"player" "bin" "timeline"; }
  .ed-player{ border-bottom:1px solid var(--line); }
  .ed-bin{ border-right:0; border-bottom:1px solid var(--line); }
  .ed-stage{ min-height:230px; }
  .ed-transport{ overflow-x:auto; flex-wrap:nowrap; padding:7px 8px; gap:7px; }
  .ed-transport label{ flex:0 0 auto; }
  .tl-toolbar,.tpl-bar{ overflow-x:auto; flex-wrap:nowrap; justify-content:flex-start; }
  .tl-toolbar>*{ flex:0 0 auto; }
  .tl-export{ margin-left:4px; }
  .tl-body{ min-height:265px; }
  .tl-heads{ width:88px; }
  .tl-head .tg.add,.tl-head .tg[data-a="del"]{ display:none; }
  .tl-btn span.t{ display:none; }
  .rng-info{ min-width:104px; }

  .set-overlay{ padding:0; }
  .set-card{ width:100%; height:100svh; max-height:none; border-radius:0; border:0; }
  .set-body{ grid-template-columns:1fr; padding:12px; }
  
  
  .ex-card{ max-height:96svh; padding:16px; }
  .ex-actions{ grid-template-columns:1fr; }
  .ex-actions a.dl{ grid-column:auto; }
  
}
@media (max-width:430px){
  textarea{ min-height:128px; }
  .panel{ border-left:0; border-right:0; }
  .gen-wrap{ padding:6px 0; }
  .canvas-wrap{ border-left:0; border-right:0; border-radius:0; }
  .ed-bin-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .q-overlay{ padding:0; } .q-card{ width:100%; max-height:100svh; border-radius:0; }
}
@media (min-width:1700px){
  .gen-wrap{ grid-template-columns:520px minmax(700px,1fr); }
  .canvas-wrap canvas{ max-width:700px; }
  .ed{ grid-template-columns:310px minmax(0,1fr) 340px; }
}


/* ======================================================================
   V.1 interface refinement
   ====================================================================== */
.ver-badge{ cursor:default; user-select:none; }
.ver-badge:hover{ background:rgba(201,154,63,.12); }
header{ box-shadow:0 8px 28px rgba(0,0,0,.16); }
header h1{ font-size:16px; letter-spacing:-.01em; }
.stepper{ padding:3px; border:1px solid var(--line); border-radius:999px; background:rgba(0,0,0,.12); }
.step-btn{ transition:background .16s,color .16s,transform .16s; }
.step-btn:hover{ color:var(--text); }
.step-btn.active{ box-shadow:0 3px 12px rgba(0,0,0,.22); }
.panel,.canvas-wrap{ border-color:color-mix(in srgb,var(--line) 80%,var(--gold) 20%); box-shadow:0 14px 38px rgba(0,0,0,.2); }
.panel h2{ font-size:12px; }
textarea,input[type=text],select,.fmt-size{ transition:border-color .15s,box-shadow .15s,background .15s; }
textarea:focus,input:focus,select:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,154,63,.13); }
button{ transition:transform .12s,border-color .12s,background .12s,color .12s; }
button:active{ transform:translateY(1px); }

/* Arabic editor follows the slide's displayed height. */
#arabicText{ resize:none; overflow-y:auto; }
#view1 .panel{ align-self:start; }

/* A true compact switch instead of a checkbox card. */
.translation-split-card{ min-height:54px; margin-top:10px; padding:8px 11px; gap:10px; border-radius:10px; }
.switch-input{ position:absolute; opacity:0; pointer-events:none; width:1px!important; height:1px!important; }
.switch-visual{ width:42px; height:24px; border-radius:999px; padding:3px; flex:0 0 auto;
  background:#3a3e32; border:1px solid var(--line); transition:.18s; }
.switch-visual i{ display:block; width:16px; height:16px; border-radius:50%; background:#d6d5ca;
  box-shadow:0 2px 5px rgba(0,0,0,.38); transform:translateX(0); transition:.18s; }
.switch-copy{ min-width:0; flex:1; display:flex!important; flex-direction:column; gap:1px; }
.switch-copy b{ font-size:11.5px; }
.switch-copy small{ font-size:9.5px; color:var(--muted); font-weight:400; }

.switch-input:checked + .switch-visual{ background:var(--green); border-color:var(--green); }
.switch-input:checked + .switch-visual i{ transform:translateX(18px); background:#fff; }




/* Translation controls are always one compact row with no scrollbar. */
#view2 .fmt-toolbar{ flex-wrap:nowrap; overflow:hidden; max-width:none; gap:2px; padding:5px; scrollbar-width:none; }
#view2 .fmt-toolbar::-webkit-scrollbar{ display:none; }
#view2 .fmt-toolbar .fmt-btn{ width:22px; height:22px; font-size:10.5px; }
#view2 .fmt-toolbar .fmt-size{ width:34px; height:22px; font-size:10px; }
#view2 .fmt-toolbar .fmt-target{ width:52px; padding:2px; font-size:9.5px; }
#view2 .fmt-toolbar .fmt-color{ width:22px; height:22px; }
#view2 .fmt-toolbar .fmt-sep{ margin:0 1px; height:15px; }
#view2 .fmt-toolbar .fmt-label{ font-size:8px; }

/* Cleaner settings without a branding/lock block. */
.set-card{ background:linear-gradient(160deg,color-mix(in srgb,var(--panel) 94%,var(--gold) 6%),var(--panel)); }
.set-head{ min-height:68px; border-bottom-color:color-mix(in srgb,var(--line) 80%,var(--gold) 20%); }
.set-head h3{ font-size:17px; }
.set-body{ gap:16px; }
.set-sec{ padding:17px; border-radius:14px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.set-sec h4{ display:flex; align-items:center; gap:7px; font-size:11px; }
.set-sec h4::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(201,154,63,.1); }
.set-row{ min-height:35px; padding:4px 7px; margin-bottom:5px; border-radius:7px; background:rgba(0,0,0,.1); }
.set-row input[type=color]{ width:52px; height:26px; border-radius:7px; }
.set-theme{ border-radius:9px; background:rgba(0,0,0,.1); }
.set-theme.on{ background:rgba(201,154,63,.09); }
.set-folder,.set-font-card{ border-radius:11px; }
.set-actions{ min-height:60px; align-items:center; }

/* More legible, modern timeline. */
.ed-timeline{ background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,#000),var(--panel)); }
.tl-toolbar{ min-height:42px; padding:6px 9px; gap:3px; background:rgba(0,0,0,.12); }
.tl-btn,.rng-btn{ height:30px; border-radius:7px; }
.tl-btn:hover,.rng-btn:hover{ background:rgba(255,255,255,.045); }
.tpl-bar{ min-height:36px; background:linear-gradient(90deg,var(--panel2),color-mix(in srgb,var(--panel2) 84%,var(--green) 16%)); }
.tl-body{ background:#10120e; }
.tl-heads{ width:124px; background:color-mix(in srgb,var(--panel) 92%,#000); }
.tl-head{ padding:0 8px; background:linear-gradient(90deg,rgba(255,255,255,.018),transparent); }
.tl-head .nm{ color:var(--text); font-weight:650; }
.tl-scroll{ background:#0e100c; box-shadow:inset 0 1px rgba(255,255,255,.025); transition:box-shadow .15s,background .15s; }
.tl-scroll.timeline-drag-active{ background:rgba(122,154,63,.055); box-shadow:inset 0 0 0 2px var(--green),inset 0 0 45px rgba(122,154,63,.08); }
.tl-ruler{ height:28px; background:color-mix(in srgb,var(--panel) 92%,#000); box-shadow:0 3px 10px rgba(0,0,0,.18); }
.tl-ruler canvas{ height:28px; }
.tl-heads-top{ height:28px; }
.tl-lane{ box-shadow:inset 0 1px rgba(255,255,255,.018); transition:background .12s; }
.tl-lane:nth-child(odd){ background-color:rgba(255,255,255,.012); }
.tl-lane:hover{ background-color:rgba(201,154,63,.035); }
.tl-lane.dnd{ background:rgba(122,154,63,.12)!important; box-shadow:inset 0 0 0 1px rgba(122,154,63,.55); }
.clip{ top:5px; border-radius:7px; box-shadow:0 3px 8px rgba(0,0,0,.28); }
.clip-handle{ width:12px; opacity:.45; }
.clip:hover .clip-handle,.clip.selected .clip-handle{ opacity:1; }
.tl-playhead{ width:2px; box-shadow:0 0 10px rgba(201,154,63,.45); }
.tl-playhead::before{ width:14px; height:13px; left:-6px; border-radius:3px 3px 7px 7px; }
.dnd-ghost{ border:2px solid var(--green); background:rgba(122,154,63,.18); box-shadow:0 8px 24px rgba(0,0,0,.35); }
.dnd-ghost .g-lbl{ color:#dff3bb; font-weight:700; }
#edExportBtn{ min-height:32px; padding:7px 18px; border-radius:8px; box-shadow:0 5px 15px rgba(201,154,63,.16); }

/* Minimal export state with one-word actions and a permanent top X. */
.ex-card{ position:relative; width:min(600px,100%); }
.ex-close{ position:absolute; top:12px; right:12px; width:30px; height:30px; border:1px solid var(--line);
  border-radius:50%; background:var(--panel2); color:var(--muted); font-size:20px; line-height:26px; cursor:pointer; z-index:4; }
.ex-close:hover{ border-color:var(--gold); color:var(--text); }
.ex-card h3{ padding-right:38px; font-size:16px; }
.ex-card.complete #edLog{ display:none; }
.ex-card.complete .ex-sub{ margin-bottom:8px; }
.ex-card.complete .ex-warn:empty{ display:none; }
.ex-card.complete #edResultVideo{ max-height:46svh; object-fit:contain; }
.ex-actions{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:13px; }
.ex-actions a.dl{ grid-column:auto; font-size:12px; }
.ex-actions a,.ex-actions button{ min-height:40px; padding:8px 12px; }



@media (min-width:761px){
  .gen-wrap{ grid-template-columns:minmax(440px,540px) minmax(420px,1fr); }
}
@media (max-width:760px){
  .tl-heads{ width:94px; }
  #view2 .fmt-toolbar{ zoom:.86; width:116.27%; }
  .ex-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:430px){
  #view2 .fmt-toolbar{ zoom:.74; width:135.14%; }
  #view2 .fmt-toolbar .fmt-sep{ display:none; }
  
  .ex-actions{ grid-template-columns:1fr; }
}


/* Round 3 refinements */
#translationCanvasWrap:not(.is-split){ grid-template-columns:minmax(0,1fr); }
#translationCanvasWrap:not(.is-split) #cv2RomanWrap,
#cv2RomanWrap[hidden]{ display:none!important; }

#view2 .fmt-toolbar{ display:block!important; overflow:hidden!important; zoom:1!important; width:100%!important;
  min-height:34px; padding:5px!important; }
.translation-tools-inner{ display:flex; align-items:center; flex-wrap:nowrap; gap:2px; width:max-content;
  transform-origin:top left; will-change:transform; }
.translation-tools-inner .fmt-sep{ flex:0 0 1px; }

.ex-media-grid{ display:grid; grid-template-columns:minmax(150px,.88fr) minmax(180px,1.12fr); gap:12px;
  align-items:stretch; margin-top:10px; }
.ex-preview-pane,.ex-info-pane{ min-width:0; border:1px solid var(--line); border-radius:11px;
  background:rgba(0,0,0,.17); padding:9px; }
.ex-preview-pane{ display:flex; flex-direction:column; justify-content:center; align-items:center; }
.ex-info-pane{ display:flex; flex-direction:column; justify-content:center; }
.ex-pane-label{ width:100%; margin-bottom:7px; color:var(--muted); font-size:9px; font-weight:750;
  text-transform:uppercase; letter-spacing:.08em; }
#edExportPreview{ display:block; width:100%; max-width:190px; max-height:250px; aspect-ratio:4/5;
  object-fit:contain; border-radius:7px; background:#050605; box-shadow:0 8px 22px rgba(0,0,0,.3); }
.ex-media-grid #edResultVideo{ width:100%; max-width:220px; max-height:280px; margin:0; object-fit:contain; }
.ex-info-pane #edProgWrap{ margin:4px 0 10px; }
.ex-info-pane #edLog{ max-height:175px; }
.ex-card.complete .ex-media-grid{ grid-template-columns:minmax(170px,.95fr) minmax(190px,1.05fr); }
.ex-card.complete .ex-info-pane{ justify-content:center; }

.ex-card.complete #edLog,.ex-card.complete #edProgWrap{ display:none; }
.ex-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; }
.ex-actions .share{ order:1; }
.ex-actions .dl{ order:2; }
.ex-actions .next{ order:3; }

@media (max-width:520px){
  .ex-card{ padding:14px; }
  .ex-media-grid,.ex-card.complete .ex-media-grid{ grid-template-columns:minmax(120px,.9fr) minmax(145px,1.1fr); gap:8px; }
  .ex-preview-pane,.ex-info-pane{ padding:7px; }
  #edExportPreview{ max-height:190px; }
  .ex-media-grid #edResultVideo{ max-height:210px; }
  .ex-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px; }
  .ex-actions a,.ex-actions button{ padding:7px 5px; font-size:10.5px; }
}


/* Latest fit and export refinements */
html,body{ width:100%; max-width:100%; overflow-x:clip; }
body>*{ max-width:100vw; }
header,.view,.gen-wrap,.panel,.canvas-wrap,.ed,.ed>*{ min-width:0; max-width:100%; }
header{ width:100%; }
.view.active{ width:100%; overflow-x:clip; }
.gen-wrap{ width:100%; max-width:1600px; }
.panel,.canvas-wrap{ overflow:hidden; }
.canvas-wrap canvas{ max-width:100%; }
.ed{ width:100%; max-width:100vw; overflow:hidden; }
.ed-player,.ed-bin,.ed-timeline,.tl-body,.tl-scroll,.tl-inner{ min-width:0; }
.tl-toolbar,.tpl-bar,.ed-transport{ max-width:100%; }
.set-card,.q-card,.ex-card{ max-width:calc(100vw - 20px); }

/* Translation tools: every control stays visible in one fitted row. */
#view2 .fmt-toolbar{ display:block!important; width:100%!important; max-width:100%!important; min-width:0!important;
  overflow:hidden!important; overflow-x:hidden!important; zoom:1!important; padding:4px!important; }
#view2 .translation-tools-inner{ display:flex!important; align-items:center; flex-wrap:nowrap!important; gap:1px!important;
  width:max-content; max-width:none; transform-origin:top left; white-space:nowrap; }
#view2 .translation-tools-inner .fmt-sep{ display:none!important; }
#view2 .translation-tools-inner .fmt-btn{ width:20px!important; min-width:20px!important; height:21px!important; font-size:10px!important; }
#view2 .translation-tools-inner .fmt-size{ width:31px!important; min-width:31px!important; height:21px!important;
  padding:1px!important; font-size:9px!important; }
#view2 .translation-tools-inner .fmt-target{ width:50px!important; min-width:50px!important; height:21px!important;
  padding:1px 2px!important; font-size:9px!important; }
#view2 .translation-tools-inner .fmt-color{ width:20px!important; min-width:20px!important; height:21px!important; }
#view2 .translation-tools-inner .fmt-label{ font-size:7.5px!important; margin:0 1px!important; }

/* Keep the export presentation unified: preview first, status below it. */
.ex-media-grid,.ex-card.complete .ex-media-grid{ display:block!important; margin-top:9px; }
.ex-preview-pane{ width:min(230px,70%); margin:0 auto 10px; padding:8px; border:1px solid var(--line);
  border-radius:10px; background:rgba(0,0,0,.18); }
.ex-info-pane{ width:100%; padding:0!important; border:0!important; border-radius:0!important; background:none!important; }
#edExportPreview{ width:auto; max-width:100%; height:min(230px,32vh); margin:auto; aspect-ratio:auto; object-fit:contain; }
.ex-media-grid #edResultVideo{ width:100%; max-width:430px; max-height:46vh; margin:0 auto; }
.ex-pane-label{ margin-bottom:5px; }
.ex-info-pane #edLog{ max-height:120px; }


/* Required action order and theme colours. */
.ex-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; }
.ex-actions .share{ order:1; background:var(--green)!important; border-color:var(--green)!important; color:#0e1206!important; }
.ex-actions a.dl{ order:2; background:var(--gold)!important; border-color:var(--gold)!important; color:#0e1206!important; }
.ex-actions .next{ order:3; background:var(--green)!important; border-color:var(--green)!important; color:#0e1206!important; }

@media (min-width:761px){
  .gen-wrap{ grid-template-columns:minmax(380px,520px) minmax(0,1fr)!important; }
}
@media (max-width:1100px) and (min-width:761px){
  .ed{ grid-template-columns:minmax(180px,23vw) minmax(0,1fr)!important; }
}
@media (max-width:760px){
  body>*{ max-width:100%; }
  header{ flex-wrap:wrap; }
  .stepper{ max-width:100%; overflow:hidden; }
  .step-btn{ min-width:0; padding-left:5px; padding-right:5px; }
  .gen-wrap{ grid-template-columns:minmax(0,1fr)!important; width:100%; }
  .panel,.canvas-wrap{ width:100%; max-width:100%; }
  .ed{ width:100%; grid-template-columns:minmax(0,1fr)!important; }
  .ed-transport,.tl-toolbar,.tpl-bar{ width:100%; max-width:100%; }
  .set-card,.q-card,.ex-card{ width:calc(100vw - 12px); max-width:calc(100vw - 12px); }
  .ex-preview-pane{ width:min(200px,74%); }
  .ex-actions{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px; }
  .ex-actions a,.ex-actions button{ min-width:0; padding:7px 4px; font-size:10.5px; }
}
@media (max-width:380px){
  header h1{ font-size:12px; }
  #settingsBtn{ padding-left:6px; padding-right:6px; }
  .step-btn{ font-size:9.5px; gap:3px; }
  .step-btn .num{ width:16px; height:16px; }
  .panel{ padding-left:10px; padding-right:10px; }
  .ex-card{ width:100vw; max-width:100vw; border-radius:0; }
}


/* Ready badge over a larger final video preview */
.ex-media-grid{ position:relative; }
.ex-card.complete{ width:min(780px,calc(100vw - 20px))!important; }
.ex-card.complete .ex-preview-pane{ position:relative; width:min(680px,100%)!important; max-width:100%;
  margin:0 auto 10px!important; padding:0!important; border:0!important; background:#050605!important;
  border-radius:12px; overflow:hidden; }
.ex-card.complete .ex-pane-label{ display:none!important; }
.ex-card.complete .ex-media-grid #edResultVideo{ display:block; width:100%!important; max-width:680px!important;
  max-height:62vh!important; margin:0 auto!important; border-radius:12px; object-fit:contain; }
.ex-card.complete .ex-info-pane{ min-height:0; }





/* Dedicated track add locations. */
#tlAddTrack{ display:none!important; }
.tl-heads-top{ display:flex; align-items:center; justify-content:center; padding:2px 5px; }
.tl-edge-add{ width:100%; height:22px; border:1px dashed var(--green); border-radius:6px;
  background:rgba(122,154,63,.08); color:var(--green); font-size:9.5px; font-weight:750; cursor:pointer; }
.tl-edge-add:hover{ border-style:solid; background:var(--green); color:#0e1206; }
.tl-audio-addrow{ padding:5px 6px 7px!important; border-top:1px solid rgba(56,60,41,.45); }
.tl-audio-addrow .tl-edge-add{ height:24px; }
.tl-head .tg.add{ display:none!important; }

@media (max-width:760px){
  .ex-card.complete{ width:calc(100vw - 12px)!important; }
  .ex-card.complete .ex-preview-pane{ width:100%!important; }
  .ex-card.complete .ex-media-grid #edResultVideo{ max-height:58vh!important; }
  .tl-edge-add{ font-size:8.5px; }
}


/* Exact editor viewport fit */
body.editor-active{ height:100dvh!important; max-height:100dvh!important; overflow:hidden!important; }
body.editor-active header{ flex-shrink:0; }
#view3.active{ height:calc(100dvh - var(--editor-header-h,56px)); max-height:calc(100dvh - var(--editor-header-h,56px));
  overflow:hidden!important; }
#view3 .ed{ height:100%!important; max-height:100%!important; min-height:0!important; overflow:hidden!important;
  grid-template-rows:minmax(0,1fr) minmax(210px,38%)!important; }
#view3 .ed-player,#view3 .ed-bin,#view3 .ed-details,#view3 .ed-timeline{ min-height:0!important; overflow:hidden; }
#view3 .ed-stage,#view3 .ed-bin-body,#view3 .ed-details-body,#view3 .tl-body,#view3 .tl-scroll{ min-height:0!important; }
#view3 .ed-bin-body,#view3 .ed-details-body,#view3 .tl-scroll{ overflow:auto; }
#view3 .ed-transport,#view3 .tl-toolbar,#view3 .tpl-bar{ flex-shrink:0; }

/* Ready tag stays beside Export ready. */
.ex-title-row{ display:flex; align-items:center; gap:8px; padding-right:38px; }
.ex-title-row h3{ margin:0!important; padding-right:0!important; }
.ex-ready-badge{ display:inline-flex; align-items:center; min-height:20px; padding:3px 8px; border-radius:999px;
  border:1px solid var(--green); background:rgba(122,154,63,.15); color:var(--green);
  font-size:9px; line-height:1; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.ex-ready-badge[hidden]{ display:none!important; }


/* The final video window is exactly the project/video ratio. */
.ex-card.complete{ max-width:calc(100vw - 20px)!important; }
.ex-card.complete .ex-preview-pane{ position:relative; max-width:calc(100vw - 60px)!important; max-height:56vh!important;
  margin:0 auto 10px!important; padding:0!important; border:0!important; border-radius:12px; background:#050605!important;
  overflow:hidden; }
.ex-card.complete .ex-media-grid #edResultVideo{ width:100%!important; height:100%!important; max-width:none!important;
  max-height:none!important; margin:0!important; border-radius:0!important; object-fit:contain; }
.ex-card.complete .ex-info-pane{ display:none!important; }

/* Identical styling and dimensions for both edge track controls. */
.tl-heads-top,.tl-audio-addrow{ height:28px!important; min-height:28px!important; padding:2px 5px!important;
  display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box; }
.tl-edge-add.video,.tl-edge-add.audio{ width:100%!important; height:22px!important; min-height:22px!important;
  padding:0 6px!important; border:1px dashed var(--green)!important; border-radius:6px!important;
  background:rgba(122,154,63,.08)!important; color:var(--green)!important;
  font-size:9px!important; font-weight:750!important; line-height:20px!important; }
.tl-edge-add.video:hover,.tl-edge-add.audio:hover{ border-style:solid!important; background:var(--green)!important; color:#0e1206!important; }

@media (max-width:760px){
  #view3 .ed{ grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,40fr) minmax(0,24fr) minmax(0,36fr)!important; }
  #view3 .ed-stage{ min-height:0!important; padding:4px; }
  #view3 .ed-bin{ min-height:0!important; }
  #view3 .ed-timeline{ min-height:0!important; }
  #view3 .tl-body{ min-height:0!important; }
  .ex-card.complete .ex-preview-pane{ max-width:calc(100vw - 36px)!important; max-height:52vh!important; }
}


/* Final export modal itself follows the exported video's exact ratio. */
.ex-card.complete{ box-sizing:border-box!important; max-width:none!important; max-height:none!important;
  overflow:hidden!important; display:grid!important;
  grid-template-rows:auto auto minmax(0,1fr) auto!important; gap:0; }
.ex-card.complete .ex-title-row{ min-height:24px; }
.ex-card.complete .ex-sub{ min-height:16px; margin:2px 0 7px!important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ex-card.complete .ex-media-grid{ display:block!important; min-height:0!important; height:100%!important; margin:0 0 8px!important; overflow:hidden; }
.ex-card.complete .ex-preview-pane{ width:100%!important; height:100%!important; max-width:none!important; max-height:none!important;
  margin:0!important; padding:0!important; border-radius:10px; }
.ex-card.complete .ex-actions{ margin-top:0!important; min-height:40px; }

@media (max-width:520px){
  .ex-card.complete{ padding:12px!important; }
  .ex-card.complete .ex-title-row{ min-height:22px; }
  .ex-card.complete .ex-sub{ font-size:9px; margin-bottom:5px!important; }
  .ex-card.complete .ex-actions{ min-height:36px; }
}


/* Home / recent projects */
#homeBtn{ margin-left:auto; padding:6px 11px; border:1px solid var(--line); border-radius:7px;
  background:var(--panel2); color:var(--text); font-size:11px; cursor:pointer; }
#settingsBtn{ margin-left:0!important; }
.home-shell{ width:min(1180px,100%); margin:0 auto; padding:clamp(16px,3vw,34px); }
.home-hero{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(20px,4vw,42px);
  border:1px solid var(--line); border-radius:18px; background:linear-gradient(135deg,color-mix(in srgb,var(--panel) 92%,var(--gold) 8%),var(--panel));
  box-shadow:0 22px 60px rgba(0,0,0,.24); }
.home-kicker{ color:var(--gold); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
.home-hero h2{ margin:5px 0 7px; font-size:clamp(24px,4vw,42px); letter-spacing:-.04em; }
.home-hero p,.home-section-head p{ margin:0; color:var(--muted); font-size:11.5px; line-height:1.6; }
.home-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.home-actions button,.home-card-actions button{ padding:9px 16px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--text); font-weight:750; cursor:pointer; }
.home-actions .home-primary,.home-card-actions button:first-child{ background:var(--green); border-color:var(--green); color:#0e1206; }
.home-section{ margin-top:20px; }
.home-section-head{ display:flex; align-items:end; justify-content:space-between; gap:12px; margin-bottom:11px; }
.home-section-head h3{ margin:0 0 3px; font-size:15px; }
#homeSaveState{ color:var(--green); font-size:9.5px; }
.home-save-wrap{ display:inline-flex; flex-wrap:wrap; gap:2px 10px; justify-content:flex-end; text-align:right; }
#homeSyncState{ color:var(--muted); font-size:9.5px; }
#homeSyncState.sync-on{ color:var(--green); }
#homeSyncState.link{ color:var(--gold); cursor:pointer; text-decoration:underline; }
.home-projects{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; }
.home-project-card{ min-width:0; display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:10px;
  border:1px solid var(--line); border-radius:13px; background:var(--panel); }
.home-project-card.current{ border-color:color-mix(in srgb,var(--green) 65%,var(--line)); }
.home-project-preview{ width:96px; height:120px; border-radius:9px; overflow:hidden; display:grid; place-items:center;
  background:#0b0c08; color:var(--gold); font-weight:900; }
.home-project-preview img{ width:100%; height:100%; object-fit:cover; }
.home-project-info{ min-width:0; display:flex; flex-direction:column; }
.home-project-info h4{ margin:5px 0; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-project-info p{ margin:0; color:var(--muted); font-size:9.5px; line-height:1.5; }
.home-card-actions{ margin-top:auto; display:flex; gap:6px; }
.home-card-actions button{ padding:6px 10px; font-size:10px; }
.home-card-actions .danger{ background:none; border-color:var(--danger); color:var(--danger); }
.home-empty{ grid-column:1/-1; padding:35px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }

/* Text box width controls */
.box-width-control{ display:grid; grid-template-columns:auto minmax(100px,1fr) 38px; align-items:center; gap:9px;
  margin-top:9px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); }
.box-width-control span{ font-size:9.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.box-width-control input{ width:100%; accent-color:var(--green); }
.box-width-control b{ font-size:10px; color:var(--green); text-align:right; }

/* Smooth zoom / long timeline performance */
.tl-ruler.lite-ruler{ background-color:color-mix(in srgb,var(--panel) 92%,#000);
  background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--zoom-grid,40px) - 1px),rgba(154,154,134,.42) calc(var(--zoom-grid,40px) - 1px),rgba(154,154,134,.42) var(--zoom-grid,40px)); }
.clip.wave-lite::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:10px; z-index:2;
  background:repeating-linear-gradient(90deg,rgba(130,220,225,.78) 0 1px,transparent 1px 5px),#00777e; }
.tl-scroll.zooming .clip-strip,.tl-scroll.zooming .clip-wave{ opacity:.72; }

@media (max-width:760px){
  #homeBtn{ order:2; margin-left:auto; }
  #settingsBtn{ order:2; }
  .home-hero{ align-items:flex-start; flex-direction:column; }
  .home-actions{ width:100%; }
  .home-actions button{ flex:1; }
  .home-projects{ grid-template-columns:1fr; }
}

body.home-active .stepper{opacity:.42;pointer-events:none;}

/* Recent-project duplicate action */
.home-card-actions{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
.home-card-actions button{ min-width:0; padding:6px 5px!important; font-size:9.5px!important; }
.home-card-actions .duplicate{ border-color:var(--gold); color:var(--gold); background:rgba(201,154,63,.07); }
.home-card-actions .duplicate:hover{ background:var(--gold); color:#0e1206; }

/* Additional phone and touch fitting */
button,a,input,select{ -webkit-tap-highlight-color:transparent; }
.tl-toolbar,.tpl-bar,.ed-transport{ overscroll-behavior-x:contain; touch-action:pan-x; }
.tl-scroll{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.clip{ touch-action:none; }
@media (max-width:600px){
  :root{--header-h:94px;}
  header{gap:6px!important;padding:7px 8px!important;}
  header h1{min-width:0;overflow:hidden;text-overflow:ellipsis;}
  #homeBtn,#settingsBtn{min-height:32px;padding:5px 7px!important;}
  .stepper{width:100%;}
  .step-btn{padding:5px 3px!important;font-size:9.5px!important;}
  .home-shell{padding:10px;}
  .home-hero{padding:18px;border-radius:13px;gap:16px;}
  .home-hero h2{font-size:27px;}
  .home-project-card{grid-template-columns:78px minmax(0,1fr);gap:9px;}
  .home-project-preview{width:78px;height:98px;}
  .home-card-actions{gap:4px;}
  .home-card-actions button{font-size:8.5px!important;padding:6px 2px!important;}
  #view3 .ed{grid-template-rows:minmax(0,39fr) minmax(0,25fr) minmax(0,36fr)!important;}
  .ed-bin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .ed-bin-head{padding:7px 8px;}
  .ed-bin-body{padding:7px;}
  .ed-stage{padding:3px!important;}
  .ed-transport{padding:5px 6px;gap:5px;}
  .tp-btn{min-width:29px;width:29px;height:29px;}
  .tl-toolbar{padding:5px 6px;gap:2px;}
  .tl-btn,.rng-btn{min-width:28px;height:29px;padding:0 6px;}
  .tpl-bar{padding:5px 6px;gap:4px;}
  .tpl-btn{height:25px;padding:0 6px;}
  .tl-heads{width:90px!important;}
  .ex-overlay{padding:5px!important;}
  .ex-card.complete{max-width:calc(100vw - 10px)!important;}
  .ex-actions{gap:5px!important;}
  .ex-actions a,.ex-actions button{min-height:36px!important;font-size:10px!important;}
  .box-width-control{grid-template-columns:auto minmax(70px,1fr) 34px;gap:6px;padding:7px;}
}
@media (max-width:370px){
  .ed-bin-grid{grid-template-columns:1fr!important;}
  .home-project-card{grid-template-columns:68px minmax(0,1fr);}
  .home-project-preview{width:68px;height:86px;}
  .home-card-actions{grid-template-columns:1fr 1fr;}
  .home-card-actions .danger{grid-column:1/-1;}
}


/* Project-first disk storage */
.set-folder{ position:relative; }
.set-folder::before{ content:'Browser autosave is primary'; display:inline-flex; margin-bottom:5px; padding:3px 7px;
  border-radius:999px; background:rgba(122,154,63,.12); color:var(--green); font-size:8.5px; font-weight:800; text-transform:uppercase; }


/* Storage monitor */
.storage-monitor{ margin-top:10px; padding:11px; border:1px solid var(--line); border-radius:10px;
  background:rgba(0,0,0,.13); }
.storage-head,.storage-disk{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.storage-head>div,.storage-disk>div{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.storage-head b{ font-size:11px; color:var(--text); }
.storage-head span,.storage-disk span{ font-size:8.5px; color:var(--muted); }
.storage-head button,.storage-disk button{ flex:0 0 auto; padding:5px 8px; border:1px solid var(--line); border-radius:6px;
  background:var(--panel); color:var(--text); font-size:9px; cursor:pointer; }
.storage-meter{ margin:11px 0 9px; }
.storage-meter-line{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:5px; }
.storage-meter-line span{ font-size:9px; color:var(--muted); }.storage-meter-line b{ font-size:9px; color:var(--green); }
.storage-bar{ height:7px; overflow:hidden; border-radius:999px; background:var(--panel); border:1px solid var(--line); }
.storage-bar i{ display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--green),var(--gold)); transition:width .3s; }
.storage-meter small,.storage-disk small{ color:var(--muted); font-size:8px; }
.storage-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.storage-stats div{ min-width:0; padding:7px; border-radius:7px; background:var(--panel); border:1px solid rgba(56,60,41,.55); }
.storage-stats span,.storage-stats b{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.storage-stats span{ color:var(--muted); font-size:8px; }.storage-stats b{ margin-top:3px; color:var(--text); font-size:10px; }
.storage-disk{ padding-top:9px; border-top:1px solid var(--line); }.storage-disk b{ max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9.5px; color:var(--text); }
.storage-monitor p{ margin:8px 0 0; color:var(--muted); font-size:8px; line-height:1.5; }
@media(max-width:520px){
  .storage-stats{ grid-template-columns:1fr; }
  .storage-disk{ align-items:flex-start; }
  .storage-disk b{ max-width:190px; }
}


/* Translation focus and generator history */
#view2 textarea.active-text-target,#view2 input.active-text-target{ border-color:var(--gold)!important;
  box-shadow:0 0 0 3px rgba(201,154,63,.16)!important; }
.hist-btn{ color:var(--green); }
.hist-btn:disabled{ opacity:.28!important; }

/* Clearly visible lightweight waveform while extremely zoomed. */
.clip-a.wave-lite::before{ top:15px!important; bottom:2px!important; height:auto!important;
  background-color:#0e3058!important;
  background-image:repeating-linear-gradient(90deg,transparent 0 2px,rgba(92,185,230,.85) 2px 3px,transparent 3px 6px),
    repeating-linear-gradient(0deg,transparent 0 45%,rgba(140,220,255,.72) 45% 55%,transparent 55% 100%)!important; }
.clip-v.wave-lite::before{ top:auto!important; bottom:0!important; height:9px!important;
  background:repeating-linear-gradient(90deg,#00777e 0 2px,rgba(190,245,250,.85) 2px 3px,#00777e 3px 6px)!important; }


/* Explicit local-vs-disk save mode */
.storage-save-mode{ margin-bottom:9px; padding:7px 9px; border-radius:8px; border:1px solid var(--line);
  font-size:8.5px; font-weight:850; line-height:1.45; letter-spacing:.025em; }
.storage-save-mode.local{ color:#9fd66a; background:rgba(122,154,63,.09); border-color:rgba(122,154,63,.4); }
.storage-save-mode.disk{ color:#f1c75b; background:rgba(201,154,63,.09); border-color:rgba(201,154,63,.45); }


/* Immediate recent-project cache */
.home-project-card.cached{ opacity:.94; }
.home-project-card.cached::after{ content:'Local cache'; position:absolute; top:7px; right:8px; color:var(--muted); font-size:7px; text-transform:uppercase; letter-spacing:.08em; }
.home-project-card.cached{ position:relative; }
.cached-actions{ grid-template-columns:1fr 1fr!important; }
.cached-actions button:disabled{ opacity:.55; }
.home-ready b{ color:var(--text); }.home-ready span{ color:var(--muted); font-size:10px; line-height:1.6; }


/* Folder reconnect/import and no-hang status */
.set-folder-actions{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.set-folder-actions .set-btn{ width:100%; margin:0; }
@media(max-width:420px){.set-folder-actions{grid-template-columns:1fr;}}


/* Media multi-select */
.media-batch{ display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 7px;
  border:1px solid var(--gold); border-radius:7px; background:rgba(201,154,63,.09); }
.media-batch[hidden]{ display:none!important; }.media-batch b{ color:var(--gold); font-size:9.5px; white-space:nowrap; }
.media-batch>div{ display:flex; gap:3px; }.media-batch button{ padding:4px 6px; border:1px solid var(--line); border-radius:5px; background:var(--panel); color:var(--text); font-size:8.5px; cursor:pointer; }
.media-batch button:hover{ border-color:var(--green); }.media-batch #edMediaBatchDelete:hover{ border-color:var(--danger); color:var(--danger); }
.bin-item.selected{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold)!important; box-shadow:0 0 16px rgba(201,154,63,.24); }
.bin-item.selected::after{ content:'✓'; position:absolute; top:4px; right:4px; z-index:9; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:var(--gold); color:#181407; font-size:10px; font-weight:900; }
.bin-select-marquee{ position:fixed; z-index:900; pointer-events:none; border:1.5px solid var(--gold); border-radius:4px; background:rgba(201,154,63,.17); }

/* Tabbed, cleaner Settings */
.set-tabs{ position:sticky; top:68px; z-index:3; display:flex; gap:4px; padding:8px 18px; border-bottom:1px solid var(--line); background:var(--panel); }
.set-tabs button{ flex:1; padding:8px; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--muted); font-size:10px; font-weight:800; cursor:pointer; }
.set-tabs button.active{ color:#171407; background:var(--gold); border-color:var(--gold); }
.set-body [data-set-pane]{ display:none; }.set-body[data-active-pane="appearance"] [data-set-pane="appearance"],.set-body[data-active-pane="storage"] [data-set-pane="storage"],.set-body[data-active-pane="fonts"] [data-set-pane="fonts"]{ display:block; }
.set-body[data-active-pane="storage"],.set-body[data-active-pane="fonts"]{ grid-template-columns:1fr; }
.set-body[data-active-pane="storage"] .set-sec,.set-body[data-active-pane="fonts"] .set-sec{ width:100%; max-width:760px; margin:0 auto; }

/* Export estimate and running timer */
.ex-timing{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; color:var(--muted); font-size:9px; font-variant-numeric:tabular-nums; }
.ex-timing b{ color:var(--green); font-size:9px; }
.ex-card.complete .ex-timing{ display:none; }

@media(max-width:600px){
  .media-batch{ align-items:flex-start; flex-direction:column; }.media-batch>div{ width:100%; }.media-batch button{ flex:1; }
  .set-tabs{ top:60px; padding:7px 10px; }.set-tabs button{ padding:7px 4px; }
  .set-body[data-active-pane="appearance"]{ grid-template-columns:1fr; }
}


/* Turbo HQ quality messaging */
.q-preset[data-q="turbohq"]{ border-color:rgba(122,154,63,.65); }
.q-preset[data-q="turbohq"].on{ background:rgba(122,154,63,.13); border-color:var(--green); box-shadow:0 0 0 1px var(--green); }


/* Recent project rename and track previews */
.home-card-actions{ grid-template-columns:repeat(2,minmax(0,1fr))!important; }
.home-card-actions .rename{ border-color:var(--green); color:var(--green); background:rgba(122,154,63,.06); }
.home-card-actions .rename:hover{ background:var(--green); color:#0e1206; }
.tl-heads{ width:144px!important; }
.tl-track-preview{ flex:0 0 28px; width:28px; height:34px; border-radius:5px; border:1px solid var(--line); background-color:#0b0c08; background-position:center; background-size:cover; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.tl-head .nm{ min-width:0; }

/* Export countdown */
.ex-timing strong{ min-width:30px; color:var(--gold); font-size:9px; text-align:right; font-variant-numeric:tabular-nums; }
@media(max-width:600px){.tl-heads{width:108px!important;}.tl-track-preview{flex-basis:22px;width:22px;height:28px;}.home-card-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;}}