/* ============================================================
   BRICK CITY OUTLAW STUDIO
   Elite mastering suite — main stylesheet
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  /* Brand & neutrals (max 5 colors) */
  --brand:       #ff6b00;   /* primary orange */
  --brand-2:     #db3911;   /* deep orange   */
  --brand-3:     #ffb074;   /* light orange  */
  --bg:          #141414;   /* was #0a0a0a — slight lift for less eye strain */
  --bg-1:        #1c1c1c;   /* was #121212 */
  --bg-2:        #242424;   /* was #1a1a1a */
  --bg-3:        #2e2e2e;   /* was #222222 */
  --bdr:         #383838;   /* was #2a2a2a */
  --bdr-2:       #4a4a4a;   /* was #3a3a3a */
  --text:        #f3f3f3;   /* was #ececec */
  --text-2:      #bcbcbc;   /* was #a8a8a8 */
  --text-3:      #888888;   /* was #6e6e6e */

  /* Status */
  --ok:          #4ade80;
  --warn:        #fbbf24;
  --danger:      #ef4444;

  /* Shape */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* Layout (resizable, persisted) */
  --sb-w:       232px;
  --transport-h: 280px;

  /* Touch target floor */
  --tap: 44px;

  /* Motion */
  --t-fast: .12s;
  --t-med:  .2s;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
}

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{
  height:100%; margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  font-size:13px; line-height:1.45;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color: transparent;
}
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
input,select,textarea{ font:inherit; color:inherit }
.bg-bg{ background:var(--bg) }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* ---------- APP SHELL ---------- */
.app{
  display:flex; flex-direction:column; height:100dvh; width:100vw;
}

/* ---------- HEADER ---------- */
.hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; gap:12px;
  background:var(--bg-1);
  border-bottom:1px solid var(--bdr);
  flex-shrink:0;
}
.hdr-l{ display:flex; align-items:center; gap:10px }
.hdr-r{ display:flex; align-items:center; gap:14px }
.hlogo{
  font-family:'Playfair Display',serif;
  font-size:18px; font-weight:500;
  color:var(--brand); letter-spacing:-.3px;
}
.hbadge{
  font-size:10px; font-weight:600; font-style:italic;
  letter-spacing:.8px; padding:2px 8px;
  border-radius:var(--r-sm);
  background:rgba(255,107,0,.13);
  border:1px solid rgba(255,107,0,.32);
  color:var(--brand);
}
.stat,.hstat{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-3) }
.stat-k,.hstat-k{ color:var(--text-3); text-transform:uppercase; letter-spacing:.5px; font-size:10px }
.stat-v,.hstat-v{ color:var(--brand-3); font-weight:600; font-variant-numeric:tabular-nums }
.stat-file,.hstat-file{ max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

.drawer-toggle{ display:none }
@media (max-width:900px){
  .drawer-toggle{ display:inline-flex }
  .hdr{ padding:10px 12px }
  .hdr-r .stat:not(.stat-file),.hdr-r .hstat:not(.hstat-file){ display:none }
}

/* ---------- WORKSPACE ---------- */
.ws{
  flex:1; display:flex; min-height:0; position:relative;
}

/* ---------- SIDEBAR ---------- */
.sb{
  width:var(--sb-w); flex-shrink:0;
  background:var(--bg-1);
  border-right:1px solid var(--bdr);
  overflow-y:auto; overflow-x:hidden;
  display:flex; flex-direction:column;
  scrollbar-width:thin; scrollbar-color:var(--bdr-2) transparent;
}
.sb::-webkit-scrollbar{ width:6px }
.sb::-webkit-scrollbar-thumb{ background:var(--bdr-2); border-radius:3px }
.sbs{
  padding:12px;
  border-bottom:1px solid var(--bdr);
}
.sbs:last-child{ border-bottom:0 }
.sblbl{
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:11px; font-weight:600;
  color:var(--brand-2);
  text-transform:uppercase; letter-spacing:.8px;
  margin:0 0 8px;
}

/* Drop zone */
.dz{
  border:1.5px dashed var(--bdr-2);
  border-radius:var(--r-md);
  padding:14px 8px; text-align:center;
  cursor:pointer; transition:all var(--t-fast);
  color:var(--brand-2);
}
.dz:hover, .dz:focus-visible, .dz.drag{
  border-color:var(--brand);
  background:rgba(255,107,0,.06);
  outline:none;
}
.dz svg{ color:var(--brand-2); opacity:.7 }
.dz p{
  font-size:11px; font-weight:300; font-style:italic;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--brand-2); margin:6px 0 2px;
}
.dz small{
  font-size:9px; color:var(--text-3); letter-spacing:.06em;
  text-transform:uppercase;
}

/* File list */
.flist{ list-style:none; padding:0; margin:8px 0 0 }
.flist li{
  display:flex; align-items:center; gap:6px;
  padding:6px 8px; border-radius:var(--r-sm);
  font-size:12px; color:var(--text-2);
  cursor:pointer; user-select:none;
  border:1px solid transparent;
}
.flist li:hover{ background:var(--bg-2); color:var(--text) }
.flist li.active{ background:rgba(255,107,0,.10); border-color:rgba(255,107,0,.3); color:var(--brand-3) }
.flist .fname{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.flist .fclose{ opacity:0; color:var(--text-3); padding:2px }
.flist li:hover .fclose{ opacity:1 }
.flist .fclose:hover{ color:var(--danger) }

/* Platforms */
.plats{ display:grid; grid-template-columns:1fr 1fr; gap:6px }
.plat{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:2px; padding:8px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  cursor:pointer; transition:all var(--t-fast);
  min-height:var(--tap);
}
.plat:hover{ border-color:var(--bdr-2); background:var(--bg-3) }
.plat.active{ background:rgba(255,107,0,.12); border-color:var(--brand); color:var(--brand-3) }
.plat-n{ font-size:11px; font-weight:600 }
.plat-v{ font-size:10px; color:var(--text-3); font-variant-numeric:tabular-nums }
.plat.active .plat-v{ color:var(--brand-3) }

/* Export grid */
.exp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.exp-cell{ display:flex; flex-direction:column; gap:4px }
.exp-k{ font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:.5px }
.sel{
  width:100%; padding:7px 8px;
  background:var(--bg-2); color:var(--text);
  border:1px solid var(--bdr); border-radius:var(--r-sm);
  cursor:pointer; min-height:34px;
  font-size:12px;
}
.sel:focus-visible{ outline:2px solid var(--brand); outline-offset:1px }

/* Snapshots */
.snap-row{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:6px }
.btn-snap, .btn-snap-load{ font-size:11px; padding:7px 8px }
.snap-match{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-2); margin-top:6px; cursor:pointer }
.snap-match input{ accent-color:var(--brand) }

.preset-row{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px }

.btn-block{ width:100%; margin-top:6px }
.ref-info{ font-size:10px; color:var(--text-3); margin:6px 0; word-break:break-all }
.ref-row{ display:grid; grid-template-columns:1fr 1fr; gap:6px }

/* ---------- SPLITTERS ---------- */
.splitter{ background:transparent; position:relative; z-index:2; flex-shrink:0 }
.splitter-v{ width:6px; cursor:col-resize; margin-left:-3px }
.splitter-v::before{ content:""; position:absolute; inset:0 2px; background:var(--bdr); transition:background var(--t-fast) }
.splitter-v:hover::before, .splitter-v.dragging::before, .splitter-v:focus-visible::before{ background:var(--brand) }
.splitter-h{ height:6px; cursor:row-resize; margin-top:-3px; width:100% }
.splitter-h::before{ content:""; position:absolute; inset:2px 0; background:var(--bdr); transition:background var(--t-fast) }
.splitter-h:hover::before, .splitter-h.dragging::before, .splitter-h:focus-visible::before{ background:var(--brand) }
.splitter:focus-visible{ outline:none }

/* ---------- CENTER ---------- */
.ctr{
  flex:1; display:flex; flex-direction:column;
  min-width:0; min-height:0;
  background:var(--bg);
}

/* ---------- TRANSPORT ---------- */
.transport{
  height:var(--transport-h);
  background:var(--bg-1);
  border-bottom:1px solid var(--bdr);
  display:flex; flex-direction:column;
  padding:10px 14px 8px;
  gap:8px; min-height:160px;
  flex-shrink:0;
}
.t-row{ display:flex; align-items:center; gap:12px }
.t-row-1{ flex-shrink:0 }
.t-row-2{ flex:1; min-height:60px }
.t-row-3{ flex-shrink:0 }

.iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  background:var(--bg-2); color:var(--text);
  border:1px solid var(--bdr); border-radius:var(--r-md);
  transition:all var(--t-fast);
}
.iconbtn:hover{ background:var(--bg-3); border-color:var(--bdr-2); color:var(--brand-3) }
.iconbtn:active{ transform:scale(.96) }
.iconbtn:focus-visible{ outline:2px solid var(--brand); outline-offset:1px }
.iconbtn-lg{ width:42px; height:42px; background:var(--brand); color:#0a0a0a; border-color:var(--brand) }
.iconbtn-lg:hover{ background:var(--brand-3); color:#0a0a0a; border-color:var(--brand-3) }
.iconbtn-xs{ width:26px; height:26px; font-size:13px; line-height:1 }

.t-time{
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
  font-size:13px; color:var(--text-2);
  display:flex; gap:4px;
}
.t-sep{ color:var(--text-3) }
.t-vol{ display:flex; align-items:center; gap:8px; flex:1; max-width:240px; min-width:140px }
.t-vol-v{ font-size:11px; color:var(--text-3); min-width:34px; text-align:right; font-variant-numeric:tabular-nums }
.t-bypass-wrap{ display:flex; align-items:center; gap:8px; margin-left:auto }
.t-bypass-lbl{ font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:var(--brand-2); font-style:italic }

/* Waveform */
.wf-wrap{
  position:relative; flex:1; width:100%; min-height:60px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-md);
  overflow:hidden;
}
.wf{ display:block; width:100%; height:100%; cursor:crosshair }
.wf-empty{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-3); font-size:12px; pointer-events:none;
}
.wf-cursor{
  position:absolute; top:0; bottom:0; width:1px;
  background:var(--brand); pointer-events:none;
  box-shadow:0 0 6px rgba(255,107,0,.6);
}
.wf-zoom{ position:absolute; top:6px; right:6px; display:flex; gap:4px }

/* Meters */
.meters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  width:100%;
}
.meter-block{
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-md);
  padding:7px 9px;
  display:flex; flex-direction:column; gap:4px;
}
.meter-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; color:var(--text-3);
  text-transform:uppercase; letter-spacing:.5px;
}
.meter-head b{ font-size:11px; color:var(--text); font-variant-numeric:tabular-nums }
.tag-bs1770{ font-size:9px; padding:1px 5px; background:rgba(255,107,0,.12); color:var(--brand-3); border-radius:3px; letter-spacing:.5px }
.meter-row{ display:flex; align-items:center; gap:6px }
.m-lbl{ font-size:9px; width:8px; color:var(--text-3) }
.meter-bar{
  flex:1; height:6px; background:#000;
  border-radius:3px; overflow:hidden; position:relative;
}
.meter-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--ok) 0%, var(--ok) 60%, var(--warn) 75%, var(--danger) 90%);
  transition:width 60ms linear;
}
.lufs-grid{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; margin-top:2px }
.lufs-cell{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 2px; background:var(--bg-3); border-radius:3px }
.lufs-cell span{ font-size:9px; color:var(--text-3); text-transform:uppercase }
.lufs-cell b{ font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--brand-3); font-variant-numeric:tabular-nums }

.corr-meter{ position:relative; height:6px; background:#000; border-radius:3px; overflow:hidden; margin-top:2px }
.corr-meter::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--bdr-2) }
.corr-needle{ position:absolute; top:-1px; bottom:-1px; width:3px; background:var(--brand); left:50%; transition:left 60ms linear; transform:translateX(-50%) }
.meter-mini-row{ display:flex; justify-content:space-between; font-size:10px; color:var(--text-3); margin-top:3px; font-variant-numeric:tabular-nums }
.meter-mini-row b{ color:var(--text-2); margin-left:3px }
.meter-mini-row .danger{ color:var(--danger) }

/* ---------- PANELS ---------- */
.panels{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:12px 14px 16px;
  display:flex; flex-direction:column; gap:10px;
  min-height:120px;
  scrollbar-width:thin; scrollbar-color:var(--bdr-2) transparent;
}
.panels::-webkit-scrollbar{ width:8px }
.panels::-webkit-scrollbar-thumb{ background:var(--bdr-2); border-radius:4px }

.panel{
  background:var(--bg-1);
  border:1px solid var(--bdr);
  border-radius:var(--r-lg);
  overflow:hidden;        /* closed: clip body so it's invisible */
  position:relative;
  transition:border-color var(--t-fast);
  flex-shrink:0;          /* never squish panels — let .panels scroll instead */
}
.panel.open{
  overflow:visible;       /* open: let body flow naturally, panel grows with content */
}
.panel.bypassed{ opacity:.55 }
.panel:focus-within{ border-color:var(--bdr-2) }
.phdr{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--bg-2);
  cursor:pointer; user-select:none;
  min-height:var(--tap);
}
.phdr-icon{
  width:24px; height:24px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--brand);
}
.phdr-title{ font-size:13px; font-weight:600; flex:1 }
.phdr-title em{ color:var(--text-3); font-weight:400; font-style:normal; margin-left:6px; font-size:11px }
.phdr-actions{ display:flex; align-items:center; gap:8px; margin-left:auto }
.phdr-caret{
  width:18px; height:18px; color:var(--text-3);
  transition:transform var(--t-fast);
}
.panel.open .phdr-caret{ transform:rotate(180deg) }
.pbody{
  display:none;
  padding:12px 16px 14px;
  border-top:1px solid var(--bdr);
}
.panel.open .pbody{ display:block }
.presize{
  position:absolute; bottom:0; right:0;
  width:14px; height:14px; cursor:nwse-resize;
  background:linear-gradient(135deg, transparent 50%, var(--bdr-2) 50%, var(--bdr-2) 60%, transparent 60%, transparent 70%, var(--bdr-2) 70%, var(--bdr-2) 80%, transparent 80%);
  opacity:.5; transition:opacity var(--t-fast);
}
.presize:hover{ opacity:1 }

/* Switch */
.sw{ position:relative; display:inline-block; width:34px; height:20px; cursor:pointer; flex-shrink:0 }
.sw input{ position:absolute; opacity:0; width:0; height:0 }
.sw-track{
  position:absolute; inset:0;
  background:var(--bg-3); border:1px solid var(--bdr-2);
  border-radius:10px; transition:all var(--t-fast);
}
.sw-thumb{
  position:absolute; top:1px; left:1px;
  width:16px; height:16px;
  background:var(--text-2); border-radius:50%;
  transition:all var(--t-fast);
}
.sw input:checked + .sw-track{ background:var(--brand); border-color:var(--brand) }
.sw input:checked + .sw-track .sw-thumb{ left:15px; background:#0a0a0a }
.sw input:focus-visible + .sw-track{ outline:2px solid var(--brand); outline-offset:2px }

/* Controls */
.ctl{
  display:flex; flex-direction:column; gap:4px;
}
.ctl-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px;
}
.ctl-lbl{ color:var(--text-3); text-transform:uppercase; letter-spacing:.4px; font-size:10px }
.ctl-val{ color:var(--brand-3); font-variant-numeric:tabular-nums; font-family:'JetBrains Mono',monospace; cursor:pointer }
.ctl-val:hover{ color:var(--brand); text-decoration:underline dashed }

/* Range slider */
.rng{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; background:transparent; cursor:pointer; padding:0; margin:0;
  touch-action:manipulation;
}
.rng:focus{ outline:none }
.rng::-webkit-slider-runnable-track{
  height:4px; background:var(--bg-3); border-radius:2px;
  border:1px solid var(--bdr);
}
.rng::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--brand); border:2px solid var(--bg-1);
  cursor:pointer; margin-top:-7px;
  box-shadow:0 0 0 1px var(--bdr-2);
  transition:transform var(--t-fast);
}
.rng:hover::-webkit-slider-thumb, .rng:focus-visible::-webkit-slider-thumb{ transform:scale(1.15); box-shadow:0 0 0 3px rgba(255,107,0,.25) }
.rng::-moz-range-track{ height:4px; background:var(--bg-3); border-radius:2px; border:1px solid var(--bdr) }
.rng::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--brand); border:2px solid var(--bg-1); cursor:pointer }
.rng-vol{ flex:1 }

/* Params grid */
.params{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px 18px;
}
.params-3{ grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)) }
.params-2{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)) }

/* Tabs */
.tabs{
  display:flex; gap:4px; margin-bottom:10px;
  background:var(--bg-2); border:1px solid var(--bdr);
  border-radius:var(--r-md); padding:3px;
}
.tab{
  flex:1; padding:7px 12px;
  font-size:11px; font-weight:500;
  color:var(--text-3);
  border-radius:var(--r-sm);
  transition:all var(--t-fast);
  text-align:center;
  min-height:32px;
}
.tab:hover{ color:var(--text-2) }
.tab.active{ background:var(--brand); color:#0a0a0a; font-weight:600 }
.tab:focus-visible{ outline:2px solid var(--brand); outline-offset:1px }

/* Solo/mute pills */
.bandctl{ display:flex; gap:3px; align-items:center }
.pill{
  font-size:9px; font-weight:700;
  width:22px; height:18px; border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-3); color:var(--text-3); border:1px solid var(--bdr);
  cursor:pointer; transition:all var(--t-fast);
}
.pill:hover{ color:var(--text) }
.pill.active{ background:var(--brand); color:#0a0a0a; border-color:var(--brand) }
.pill.solo.active{ background:var(--warn); color:#0a0a0a; border-color:var(--warn) }
.pill.mute.active{ background:var(--danger); color:#fff; border-color:var(--danger) }

/* EQ canvas */
.eq-wrap{
  position:relative; width:100%; aspect-ratio:3/1;
  background:#050505;
  border:1px solid var(--bdr); border-radius:var(--r-md);
  overflow:hidden; touch-action:none;
}
.eq{ display:block; width:100%; height:100%; cursor:grab }
.eq.dragging{ cursor:grabbing }

/* EQ band strip below canvas */
.eq-bands{
  display:grid;
  grid-template-columns:repeat(8, 1fr);
  gap:5px; margin-top:10px;
}
.eqb{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px;
  background:var(--bg-2); border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  font-size:10px; cursor:pointer;
  position:relative;
}
.eqb.on{ border-color:var(--brand); background:rgba(255,107,0,.08) }
.eqb.solo{ border-color:var(--warn) }
.eqb-n{ font-weight:700; color:var(--text-3); font-size:9px }
.eqb.on .eqb-n{ color:var(--brand) }
.eqb-f{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--brand-3) }
.eqb-g{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-2) }
.eqb-t{ font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:.4px }

/* Saturation modes */
.sat-modes{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:12px }
.sat-mode{
  padding:9px 8px;
  background:var(--bg-2); border:1px solid var(--bdr);
  border-radius:var(--r-sm); font-size:11px;
  text-align:center; min-height:var(--tap);
  cursor:pointer; transition:all var(--t-fast);
}
.sat-mode:hover{ background:var(--bg-3) }
.sat-mode.active{ background:rgba(255,107,0,.12); border-color:var(--brand); color:var(--brand-3); font-weight:600 }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:8px 14px;
  background:var(--bg-2); color:var(--text);
  border:1px solid var(--bdr); border-radius:var(--r-md);
  font-size:12px; font-weight:500;
  cursor:pointer; transition:all var(--t-fast);
  min-height:34px;
}
.btn:hover:not(:disabled){ background:var(--bg-3); border-color:var(--bdr-2) }
.btn:active:not(:disabled){ transform:translateY(1px) }
.btn:disabled{ opacity:.45; cursor:not-allowed }
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:1px }
.btn-primary{
  background:var(--brand); color:#0a0a0a;
  border-color:var(--brand); font-weight:600;
}
.btn-primary:hover:not(:disabled){ background:var(--brand-3); border-color:var(--brand-3); color:#0a0a0a }
.btn-snap{ background:rgba(255,107,0,.10); border-color:rgba(255,107,0,.3); color:var(--brand-3) }
.btn-snap-load{ background:var(--bg-2) }

/* ---------- FOOTER ---------- */
.ftr{
  flex-shrink:0;
  display:flex; align-items:center; gap:10px;
  padding:6px 14px;
  background:var(--bg-1);
  border-top:1px solid var(--bdr);
  font-size:11px; color:var(--text-3);
}
.ftr-grow{ flex:1 }
.ftr-hint kbd{ font-size:10px; padding:1px 5px; background:var(--bg-3); border:1px solid var(--bdr); border-radius:3px; font-family:'JetBrains Mono',monospace }

/* ---------- TOOLTIP ---------- */
#tip{
  position:fixed; z-index:9999; pointer-events:none;
  background:#000; color:var(--text);
  border:1px solid var(--bdr-2);
  padding:6px 10px; border-radius:var(--r-sm);
  font-size:11px; line-height:1.3;
  max-width:260px;
  opacity:0; transform:translateY(2px);
  transition:opacity var(--t-fast), transform var(--t-fast);
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
#tip.show{ opacity:1; transform:translateY(0) }
#tip::before{
  content:""; position:absolute; width:8px; height:8px;
  background:#000; border-left:1px solid var(--bdr-2); border-top:1px solid var(--bdr-2);
  transform:rotate(45deg);
}
#tip.below::before{ top:-5px; left:14px }
#tip.above::before{ bottom:-5px; left:14px; transform:rotate(225deg) }

/* ---------- MODALS ---------- */
.modal{
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  backdrop-filter:blur(4px);
}
.modal[hidden]{ display:none }
.modal-card{
  background:var(--bg-1); border:1px solid var(--bdr);
  border-radius:var(--r-xl);
  width:100%; max-width:480px;
  max-height:90vh; overflow:hidden;
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--bdr);
}
.modal-head h3{ margin:0; font-size:15px; font-weight:600; font-family:'Playfair Display',serif }
.modal-body{ padding:18px; overflow-y:auto }

.exp-stage{ font-size:12px; color:var(--text-2); margin-bottom:8px }
.exp-pbar{ height:8px; background:var(--bg-3); border:1px solid var(--bdr); border-radius:4px; overflow:hidden }
.exp-pfill{ height:100%; width:0%; background:linear-gradient(90deg, var(--brand-2), var(--brand)); transition:width .15s linear }
.exp-stat{ display:flex; justify-content:space-between; font-size:11px; color:var(--text-3); margin-top:6px; font-variant-numeric:tabular-nums }
.exp-result{ display:flex; flex-direction:column; gap:8px; margin-top:14px }
.exp-warn{
  padding:10px; background:rgba(251,191,36,.1);
  border:1px solid var(--warn); border-radius:var(--r-sm);
  color:var(--warn); font-size:11px;
}

.sc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:12px }
.sc-grid div{ display:flex; align-items:center; gap:8px; color:var(--text-2) }
.sc-grid kbd{ font-size:10px; padding:2px 6px; background:var(--bg-3); border:1px solid var(--bdr); border-radius:3px; font-family:'JetBrains Mono',monospace; color:var(--text) }

/* ---------- METERS STRIP (new layout) ---------- */
.meters-strip{
  display:flex; gap:8px; padding:6px 12px 8px;
  background:var(--bg-1); border-top:1px solid var(--bdr);
  overflow-x:auto; min-height:72px; flex-shrink:0;
}
.mb{ flex:1; min-width:90px; display:flex; flex-direction:column; gap:3px }
.mb-lufs{ flex:1.4 }
.mb-misc{ flex:1.2 }
.mb-head{ display:flex; justify-content:space-between; align-items:center; font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3) }
.mb-val{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--brand) }
.mb-bars{ display:flex; flex-direction:column; gap:2px }
.mb-lane{ display:flex; align-items:center; gap:4px }
.mb-ch{ font-size:8px; color:var(--text-3); width:8px; flex-shrink:0 }
.mb-bar{ flex:1; height:6px; background:var(--bg-3); border-radius:2px; overflow:hidden }
.mb-fill{ height:100%; background:#4caf50; border-radius:2px; transition:width .06s linear }
.gr-bar{ background:var(--bg-3) }
.gr-fill{ background:#4caf50 }

/* LUFS cells */
.lufs-cells{ display:grid; grid-template-columns:1fr 1fr; gap:2px 6px }
.lufs-cell{ display:flex; flex-direction:column; align-items:flex-start; font-size:9px; color:var(--text-3) }
.lufs-val{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text); font-weight:600 }
.badge-bs1770{ font-size:8px; padding:1px 4px; background:rgba(255,107,0,.15); border:1px solid rgba(255,107,0,.3); border-radius:3px; color:var(--brand); font-family:monospace }

/* Correlation meter */
.corr-wrap{ position:relative; height:6px }
.corr-bar{ height:100%; background:var(--bg-3); border-radius:3px; position:relative }
.corr-needle{ position:absolute; top:-1px; width:3px; height:8px; background:var(--brand); border-radius:1px; transform:translateX(-50%); transition:left .08s linear }

/* Misc row */
.misc-row{ display:flex; gap:8px; font-size:9px; color:var(--text-3) }
.misc-row b{ color:var(--text); font-family:'JetBrains Mono',monospace }
.clip-counter{ color:var(--text) }
.clip-counter.warn{ color:#ff4444 }

/* ---------- TRANSPORT CONTROLS ---------- */
.t-controls{ display:flex; align-items:center; gap:10px; padding:8px 12px 6px }
.t-time{ font-size:11px; color:var(--text-3) }
.t-timecode{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-2) }
.t-vol-wrap{ display:flex; align-items:center; gap:6px; margin-left:auto }
.t-vol-v{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-3); min-width:32px }
.t-bypass-wrap{ display:flex; align-items:center; gap:6px }
.t-bypass-lbl{ font-size:10px; font-style:italic; color:var(--brand); text-transform:uppercase; letter-spacing:.5px }

/* Waveform wrap */
.wf-wrap{ position:relative; flex:1; min-height:60px; padding:0 12px 4px }
.wf-canvas{ width:100%; height:80px; display:block; border-radius:4px; cursor:crosshair }
.seek-bar{
  width:100%; height:3px; margin-bottom:2px;
  -webkit-appearance:none; appearance:none;
  background:var(--bg-3); outline:none; cursor:pointer; border-radius:2px;
}
.seek-bar::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:12px;
  border-radius:50%; background:var(--brand); cursor:pointer;
}
.seek-bar::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:var(--brand); cursor:pointer; border:none }

/* ---------- TRANSPORT ZONE ---------- */
.transport-zone{ display:flex; flex-direction:column; flex-shrink:0; background:var(--bg-1); border-bottom:1px solid var(--bdr) }

/* ---------- SIDEBAR NEW ELEMENTS ---------- */
.file-list{ display:flex; flex-direction:column; gap:2px; margin-top:6px }
.file-empty{ font-size:11px; color:var(--text-3); padding:4px 2px; font-style:italic }
.snap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:6px }
.chk-row{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-2); cursor:pointer; margin:6px 0 }
.chk-row input{ cursor:pointer }
.preset-row{ display:flex; gap:4px; margin-top:4px }
.inp{ background:var(--bg-3); border:1px solid var(--bdr); border-radius:var(--r-sm); padding:4px 8px; font-size:12px; color:var(--text); outline:none; flex:1; min-width:0 }
.inp:focus{ border-color:var(--brand) }
.exp-desc{ font-size:11px; color:var(--text-3); margin-bottom:10px; line-height:1.5 }
.exp-pbar-wrap{ margin:8px 0 }
.exp-actions{ display:flex; flex-direction:column; gap:6px; margin-top:8px }
.ref-row{ display:flex; gap:4px; margin-top:6px }
.ref-info{ font-size:10px; color:var(--text-3); padding:4px 0; font-style:italic }
.ab-table{ width:100%; border-collapse:collapse; font-size:12px }
.ab-table th{ text-align:left; font-weight:600; padding:6px 8px; border-bottom:1px solid var(--bdr); color:var(--text-3); font-size:10px; text-transform:uppercase }
.ab-table td{ padding:5px 8px; border-bottom:1px solid var(--bdr-soft,rgba(255,255,255,.04)) }
.diff-changed{ color:var(--brand); font-weight:600 }

/* ---------- MOBILE BREAKPOINTS ---------- */
@media (max-width:900px){
  .sb{
    position:absolute; left:0; top:0; bottom:0;
    z-index:50; width:280px;
    transform:translateX(-100%);
    transition:transform var(--t-med) ease-out;
    box-shadow:8px 0 24px rgba(0,0,0,.5);
  }
  .app.drawer-open .sb{ transform:translateX(0) }
  .app.drawer-open::after{
    content:""; position:absolute; inset:0;
    background:rgba(0,0,0,.4); z-index:40;
  }
  #split-sb{ display:none }
  .transport{ height:auto; min-height:240px }
  .meters{ grid-template-columns:1fr 1fr }
  .eq-wrap{ aspect-ratio:2/1 }
  .eq-bands{ grid-template-columns:repeat(4, 1fr) }
}
@media (max-width:560px){
  .params{ grid-template-columns:1fr }
  .meters{ grid-template-columns:1fr }
  .sat-modes{ grid-template-columns:1fr 1fr }
  .hdr{ padding:8px 10px }
  .hlogo{ font-size:15px }
  .stat-file{ display:none }
  .panels{ padding:8px 10px 12px }
  .pbody{ padding:10px }
  .t-time{ font-size:12px }
}
@media (hover:none){
  /* Larger tap targets on touch devices */
  .iconbtn{ min-width:var(--tap); min-height:var(--tap) }
  .pill{ height:var(--tap); width:auto; min-width:36px; padding:0 8px }
  .rng::-webkit-slider-thumb{ width:20px; height:20px; margin-top:-9px }
}

/* ============================================================
   CONTROLS — css for all controls.js factory classes
   ============================================================ */

/* Slider wrapper */
.ctl-slider{
  display:flex; flex-direction:column; gap:2px;
}
.ctl-slider .ctl-row label{
  font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-3);
}

/* Range input alias — controls.js uses .ctl-range, CSS has .rng */
.ctl-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; background:transparent; cursor:pointer; padding:0; margin:0;
  touch-action:manipulation;
}
.ctl-range:focus{ outline:none }
.ctl-range::-webkit-slider-runnable-track{
  height:4px;
  background:linear-gradient(to right, var(--brand) var(--fill-start, 0%), var(--brand) var(--fill-end, 0%), var(--bg-3) var(--fill-end, 0%));
  border-radius:2px; border:1px solid var(--bdr);
}
.ctl-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--brand); border:2px solid var(--bg-1);
  cursor:pointer; margin-top:-7px;
  box-shadow:0 0 0 1px var(--bdr-2);
  transition:transform var(--t-fast);
}
.ctl-range:hover::-webkit-slider-thumb, .ctl-range:focus-visible::-webkit-slider-thumb{
  transform:scale(1.15); box-shadow:0 0 0 3px rgba(255,107,0,.25)
}
.ctl-range::-moz-range-track{ height:4px; background:var(--bg-3); border-radius:2px; border:1px solid var(--bdr) }
.ctl-range::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:var(--brand); border:2px solid var(--bg-1); cursor:pointer }

/* Toggle (on/off switch) */
.ctl-toggle{
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  user-select:none;
}
.ctl-toggle input[type="checkbox"]{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}
.toggle-track{
  position:relative;
  width:34px; height:18px; flex-shrink:0;
  background:var(--bg-3);
  border:1px solid var(--bdr);
  border-radius:9px;
  transition:background var(--t-fast), border-color var(--t-fast);
}
.ctl-toggle input:checked ~ .toggle-track{
  background:var(--brand);
  border-color:var(--brand);
}
.toggle-knob{
  position:absolute;
  top:2px; left:2px;
  width:12px; height:12px;
  background:#fff;
  border-radius:50%;
  transition:transform var(--t-fast);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.ctl-toggle input:checked ~ .toggle-track .toggle-knob{
  transform:translateX(16px);
}
.ctl-toggle:focus-within .toggle-track{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.toggle-label{
  font-size:11px; font-weight:500;
  color:var(--text-2);
}
/* Compact toggle (used in panel headers — no text label shown) */
.ctl-toggle.compact .toggle-label{ display:none }
.ctl-toggle.compact .toggle-track{ width:28px; height:16px; border-radius:8px }
.ctl-toggle.compact .toggle-knob{ width:10px; height:10px; top:2px; left:2px }
.ctl-toggle.compact input:checked ~ .toggle-track .toggle-knob{ transform:translateX(12px) }

/* Select wrapper */
.ctl-select{
  display:flex; flex-direction:column; gap:3px;
}
.ctl-select label{
  font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-3);
}
.ctl-select select{
  padding:5px 8px;
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  color:var(--text);
  font-size:12px;
  cursor:pointer;
}
.ctl-select select:focus-visible{
  outline:2px solid var(--brand); outline-offset:1px;
}

/* Icon button */
.ctl-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  color:var(--text-3);
  cursor:pointer;
  transition:all var(--t-fast);
}
.ctl-iconbtn:hover{ border-color:var(--bdr-2); color:var(--text) }
.ctl-iconbtn.active{ background:var(--brand); color:var(--bg); border-color:var(--brand) }

/* ============================================================
   BUTTON GROUP (controls.js createButtonGroup → .ctl-btngroup)
   ============================================================ */
.ctl-btngroup{
  display:inline-flex;
  gap:0;
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.ctl-btngroup button{
  padding:5px 14px;
  background:var(--bg-2);
  border:0;
  border-right:1px solid var(--bdr);
  color:var(--text-2);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast);
  line-height:1.4;
}
.ctl-btngroup button:last-child{ border-right:0 }
.ctl-btngroup button:hover{ background:var(--bg-3); color:var(--text) }
.ctl-btngroup button.active{
  background:var(--brand);
  color:var(--bg);
  font-weight:600;
}
.ctl-btngroup button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:-2px;
  z-index:1;
  position:relative;
}

/* ============================================================
   PANEL CLASS ALIASES — panels.js uses these names, map them
   onto the existing phdr/pbody/eqb design system.
   ============================================================ */

/* Header */
.panel-head{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:var(--bg-2);
  cursor:pointer; user-select:none;
  min-height:var(--tap);
  border-bottom:1px solid transparent;
  transition:border-color var(--t-fast);
}
.panel.open > .panel-head{ border-bottom-color:var(--bdr) }

.panel-title{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
  color:var(--text);
  background:none; border:0; padding:0;
  flex:1; text-align:left; cursor:pointer;
}
.panel-title::after{
  content:'';
  width:14px; height:14px;
  margin-left:auto;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:center;
  transition:transform var(--t-fast);
  flex-shrink:0;
}
.panel.open .panel-title::after{ transform:rotate(180deg) }

.panel-badge{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; font-weight:500;
  color:var(--text-3);
  padding:2px 7px;
  background:var(--bg-3);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  letter-spacing:.2px;
  margin-left:4px;
}

.panel-head-r{
  display:flex; align-items:center; gap:10px;
  margin-left:auto;
}

/* Body */
.panel-body{
  display:none;
  padding:14px 16px 16px;
  background:var(--bg-1);
}
.panel.open .panel-body{ display:block }

/* Resize grip (bottom edge — drag to resize panel height) */
.panel-grip{
  position:absolute; left:0; right:0; bottom:0;
  height:6px;
  cursor:ns-resize;
  background:transparent;
  transition:background var(--t-fast);
}
.panel-grip:hover, .panel-grip:active{
  background:linear-gradient(to bottom, transparent, rgba(255,107,0,.25));
}
.panel.open .panel-grip{ display:block }
.panel:not(.open) .panel-grip{ display:none }

/* Panel content layout helpers */
.panel-row{
  display:flex; align-items:center; gap:12px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.panel-row:last-child{ margin-bottom:0 }

.panel-grid{
  display:grid; gap:12px;
  margin-bottom:12px;
}
.panel-grid:last-child{ margin-bottom:0 }
.panel-grid-2{ grid-template-columns:repeat(2, 1fr) }
.panel-grid-3{ grid-template-columns:repeat(3, 1fr) }
.panel-grid-4{ grid-template-columns:repeat(4, 1fr) }
@media (max-width:780px){
  .panel-grid-3, .panel-grid-4{ grid-template-columns:repeat(2, 1fr) }
}
@media (max-width:480px){
  .panel-grid-2, .panel-grid-3, .panel-grid-4{ grid-template-columns:1fr }
}

/* ============================================================
   EQ PANEL — fix the 8-band cell row (was unstyled / overflowing)
   ============================================================ */
.eq-canvas{
  display:block;
  width:100%;
  height:240px;                  /* was squished to ~100px — proper height now */
  background:#0a0a0a;
  border:1px solid var(--bdr);
  border-radius:var(--r-md);
  cursor:crosshair;
  margin-bottom:14px;
  touch-action:none;
}
.eq-canvas:focus-visible{ outline:2px solid var(--brand); outline-offset:2px }

.eq-bandrow{
  display:grid;
  grid-template-columns:repeat(8, minmax(0, 1fr));
  gap:6px;
  margin-top:4px;
}
@media (max-width:900px){
  .eq-bandrow{ grid-template-columns:repeat(4, 1fr) }
}
@media (max-width:480px){
  .eq-bandrow{ grid-template-columns:repeat(2, 1fr) }
}

.eq-bandcell{
  display:flex; flex-direction:column; gap:4px;
  padding:8px 6px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast);
  min-width:0;                   /* allow shrinking */
}
.eq-bandcell:hover{ border-color:var(--bdr-2) }
.eq-bandcell.active{
  border-color:var(--brand);
  background:rgba(255,107,0,.10);
}

.eq-bandhdr{
  display:flex; align-items:center; justify-content:space-between;
  gap:4px;
}
.eq-bandnum{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; font-weight:700;
  color:var(--text-3);
  letter-spacing:.5px;
}
.eq-bandcell.active .eq-bandnum{ color:var(--brand) }

.eq-bandtog{
  width:16px; height:16px;
  border-radius:50%;
  background:var(--bg-3);
  color:var(--text-3);
  font-size:10px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--bdr);
  flex-shrink:0;
  cursor:pointer;
}
.eq-bandtog.on{
  background:var(--brand);
  color:var(--bg);
  border-color:var(--brand);
}

.eq-bandval{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; font-weight:600;
  color:var(--brand-3);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.eq-bandgain{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  color:var(--text-2);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.eq-bandtype{
  font-size:9px;
  color:var(--text-3);
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* ============================================================
   FILE QUEUE ACTIONS (batch export / clear)
   ============================================================ */
.file-actions{
  display:flex; flex-direction:column; gap:6px;
  margin-top:10px;
}
.file-actions .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px;
  font-size:11px;
}
.btn-block{ width:100%; }

/* ZIP-progress toast variant */
.toast-zip{
  background:var(--bg-2);
  border-left:3px solid var(--brand);
}

/* ============================================================
   PLATFORM TARGET — 2-column card grid with icon + name + LUFS
   ============================================================ */
.platform-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
  margin-top:6px;
}

.plat-btn{
  display:flex; flex-direction:column;
  align-items:flex-start; justify-content:center;
  gap:2px;
  padding:8px 10px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  cursor:pointer;
  text-align:left;
  position:relative;
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  min-height:54px;
  min-width:0;
}
.plat-btn:hover{
  border-color:var(--bdr-2);
  background:var(--bg-3);
}
.plat-btn:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
.plat-btn.active{
  border-color:var(--brand);
  background:rgba(255,107,0,.10);
  box-shadow:inset 0 0 0 1px rgba(255,107,0,.15);
}

.plat-btn > span:first-child{          /* icon (emoji) */
  font-size:14px;
  line-height:1;
  position:absolute;
  top:8px; right:8px;
  opacity:.75;
}
.plat-btn.active > span:first-child{ opacity:1 }

.plat-name{
  font-size:12px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:calc(100% - 18px);          /* leave room for icon */
}
.plat-btn.active .plat-name{ color:var(--brand-3) }

.plat-lufs{
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  font-weight:500;
  color:var(--text-3);
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;
}
.plat-btn.active .plat-lufs{ color:var(--brand) }

/* Sidebar — Files action buttons live right under the dropzone */
.file-actions{ padding-top:4px }
.file-actions .btn{
  padding:8px 12px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  font-size:11px;
  font-weight:500;
  color:var(--text-2);
  cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.file-actions .btn:hover:not(:disabled){
  border-color:var(--brand);
  background:rgba(255,107,0,.08);
  color:var(--brand-3);
}
.file-actions .btn:disabled{
  opacity:.4; cursor:not-allowed;
}
.file-actions .btn-ghost{ background:transparent }

/* A/B + preset rows inside sidebar */
.snap-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
  margin-bottom:8px;
}
.snap-grid .btn{
  padding:6px 8px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  font-size:11px;
  color:var(--text-2);
}
.snap-grid .btn:hover:not(:disabled){ border-color:var(--bdr-2) }
.snap-grid .btn:disabled{ opacity:.4 }

.preset-row{
  display:flex; gap:6px; margin-top:6px;
}
.preset-row .inp{
  flex:1; min-width:0;
  padding:6px 8px;
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  color:var(--text);
  font-size:11px;
}
.preset-row .btn{
  padding:6px 10px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  font-size:11px;
  color:var(--text-2);
  flex-shrink:0;
}
.preset-row .btn:hover{ border-color:var(--brand); color:var(--brand-3) }
.preset-row .btn-danger{ color:var(--danger) }
.preset-row .btn-danger:hover{ border-color:var(--danger); color:var(--danger) }

/* Sidebar selects & checkboxes */
.sel{
  width:100%;
  padding:6px 8px;
  background:var(--bg);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  color:var(--text);
  font-size:11px;
}
.chk-row{
  display:flex; align-items:center; gap:6px;
  margin:6px 0 0;
  font-size:11px;
  color:var(--text-2);
  cursor:pointer;
}

/* Reference track section */
.ref-info{
  font-size:11px;
  color:var(--text-3);
  margin:4px 0 6px;
}
.ref-row{
  display:flex; gap:6px;
}
.ref-row .btn{
  flex:1;
  padding:6px 8px;
  background:var(--bg-2);
  border:1px solid var(--bdr);
  border-radius:var(--r-sm);
  font-size:11px;
  color:var(--text-2);
}
.ref-row .btn:disabled{ opacity:.4 }

/* Export-settings 2x2 grid in sidebar */
.exp-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:6px;
  margin-top:6px;
}
.exp-cell{
  display:flex; flex-direction:column; gap:3px;
}
.exp-k{
  font-size:9px;
  color:var(--text-3);
  text-transform:uppercase;
  letter-spacing:.4px;
}